/* @import MUST be the first rule in the file — anything before it (other than
   @charset) macht Browser silent-ignore.
   Selbst-gehostete Schriften (DSGVO — LG Muenchen 3 O 17493/20):
   keine Google-CDN-Requests mehr. Pflege via deploy/_fetch_fonts.py. */
@import url('fonts/_self-hosted-fonts.css?v=tx260803a');

/* ═══════════════════════════════════════════════════════════════
   TOXIC OVERRIDE OF NOVA TOKENS — appended on top so Toxic mint
   replaces NOVA yellow everywhere (links, hovers, focus, accents)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --primary: #01DEC2 !important;
  --primary-rgb: 1, 222, 194 !important;
  --primary-dark: #01DEC2 !important;
  --link-color: #ECEFEE !important;
  --link-hover-color: #01DEC2 !important;
  --body-bg: #0B0C0D !important;
  --color-primary: #01DEC2 !important;
  --warning: #FFC857 !important;
  --info: #01DEC2 !important;
}
/* Force-override NOVA's anchor colors site-wide (excluding tx-* explicit colors) */
a:not([class*="tx-"]):hover,
a:not([class*="tx-"]):focus { color: #01DEC2 !important; }
a:not([class*="tx-"]) { color: #ECEFEE; }

/* Buttons: NOVA's btn-primary uses --primary background */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #01DEC2 !important;
  border-color: #01DEC2 !important;
  color: #0B0C0D !important;
}
/* Form inputs focus rings */
.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: #01DEC2 !important;
  box-shadow: 0 0 0 .2rem rgba(1,222,194,.25) !important;
}
/* Body bg fallback in case NOVA fights us */
body { background: #0B0C0D !important; color: #ECEFEE !important; }

/* ───────────────────────────────────────────────────────────────
   TOXIC SYSTEMS — Production-ready shop CSS
   Drop-in for JTL: all classes are tx-* prefixed, no globals
   leak. Replace --tx-* tokens with your theme variables if needed.
   ─────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --tx-mint: #01DEC2;
  --tx-mint-2: #01DEC2;
  --tx-mint-soft: rgba(1, 222, 194, 0.16);
  --tx-mint-glow: rgba(1, 222, 194, 0.05);
  --tx-bg: #0B0C0D;
  --tx-bg-2: #101113;
  --tx-bg-3: #16181A;
  --tx-card: #14171A;
  --tx-card-2: #0F1214;
  --tx-line: #25282A;
  --tx-line-2: #353A3D;
  --tx-text: #ECEFEE;
  --tx-text-dim: #BEC5C7;  /* Lesbarkeit 2026-07-17: heller (war #A8AFB1) — User-Feedback „zu dunkel/dünn" */
  --tx-text-mute: #ABB2B5; /* Lesbarkeit 2026-07-17: heller (war #9AA1A4, davor #6E7479) */
  --tx-danger: #FF5570;
  --tx-warn: #FFC857;
  /* 80-PLUS-Effizienz-Tiers (Netzteil-Filter-Chips) — greifen die Badge-
     Farben der Karten auf. -soft = Aktiv-Tint (bg), -line = Aktiv-Rahmen. */
  --tx-eff-gold: #E7C66B;
  --tx-eff-gold-soft: rgba(231, 198, 107, 0.14);
  --tx-eff-gold-line: rgba(231, 198, 107, 0.55);
  --tx-eff-bronze: #CE9366;
  --tx-eff-bronze-soft: rgba(206, 147, 102, 0.15);
  --tx-eff-bronze-line: rgba(206, 147, 102, 0.55);
  --tx-shadow: rgba(0,0,0,0.6);
  --tx-hex-stroke: %231F2528;

  /* Toxic font system
     --tx-body : Workhorse — Inter — body, paragraphs, buttons, long PC titles' parents
     --tx-h    : Display — Oxanium — section headings (h1-h6, .tx-section-title)
     --tx-sub  : PC names — Rajdhani — product card names, configurator titles
     --tx-mono : Tech accent — Share Tech Mono — eyebrows, labels, status bar, kbd */
  --tx-body: 'Inter', system-ui, -apple-system, sans-serif;
  --tx-h:    'Oxanium', 'Inter', system-ui, sans-serif;
  --tx-sub:  'Rajdhani', 'Inter', sans-serif;
  --tx-mono: 'Inter', 'Rajdhani', sans-serif; /* 2026-07-17 R4: Labels jetzt Rajdhani (User fand Share Tech Mono zu dünn, JBMono unscharf); alle var(--tx-mono)-Regeln haben Gewicht ≥600 */

  /* Landing-Page-Akzent · pro Aktion austauschbar
     Standard: Crimson Desert Rot. Override via Theme-Klasse am body
     (z.B. body.tx-lp-theme--nvidia) oder inline style="--lp-accent:..." */
  --lp-accent: #C8252C;
  --lp-accent-light: #FF5570;
  --lp-accent-rgb: 200, 37, 44;
}

/* Landing-Page Theme-Varianten · class auf <body> oder einem Wrapper */
.tx-lp-theme--amd      { --lp-accent: #ED1C24; --lp-accent-light: #FF5570; --lp-accent-rgb: 237, 28, 36; }
.tx-lp-theme--nvidia   { --lp-accent: #76B900; --lp-accent-light: #A4D81F; --lp-accent-rgb: 118, 185, 0; }
.tx-lp-theme--intel    { --lp-accent: #0071C5; --lp-accent-light: #41B0F4; --lp-accent-rgb: 0, 113, 197; }
.tx-lp-theme--corsair  { --lp-accent: #FFC857; --lp-accent-light: #FFE680; --lp-accent-rgb: 255, 200, 87; }
.tx-lp-theme--asus     { --lp-accent: #C8102E; --lp-accent-light: #FF5570; --lp-accent-rgb: 200, 16, 46; }
.tx-lp-theme--mint     { --lp-accent: #06A87E; --lp-accent-light: #01DEC2; --lp-accent-rgb: 1, 222, 194; }

[data-theme="light"] {
  --tx-mint: #06A87E;
  --tx-mint-2: #08C091;
  --tx-mint-soft: rgba(6, 168, 126, 0.16);
  --tx-mint-glow: rgba(6, 168, 126, 0.04);
  --tx-bg: #F7F8F7;
  --tx-bg-2: #FFFFFF;
  --tx-bg-3: #EEF1F0;
  --tx-card: #FFFFFF;
  --tx-card-2: #F4F6F5;
  --tx-line: #DEE3E1;
  --tx-line-2: #C2CCC8;
  --tx-text: #0F1414;
  --tx-text-dim: #45514D;  /* Lesbarkeit 2026-07-17: dunkler = mehr Kontrast (war #4F5C58) */
  --tx-text-mute: #525E5A; /* Lesbarkeit 2026-07-17: dunkler (war #5E6A66, davor #7E8A86) */
  /* 80-PLUS-Tiers im Light-Theme dunkler = lesbar auf Weiß */
  --tx-eff-gold: #9A6E12;
  --tx-eff-gold-soft: rgba(154, 110, 18, 0.12);
  --tx-eff-gold-line: rgba(154, 110, 18, 0.45);
  --tx-eff-bronze: #8A5730;
  --tx-eff-bronze-soft: rgba(138, 87, 48, 0.12);
  --tx-eff-bronze-line: rgba(138, 87, 48, 0.45);
  --tx-shadow: rgba(0,0,0,0.08);
  --tx-hex-stroke: %23E0E5E3;
}
[data-theme="light"] .tx-btn--primary { color: #FFFFFF; }
[data-theme="light"] .tx-badge-tag--recommended,
[data-theme="light"] .tx-badge-tag--new,
[data-theme="light"] .tx-badge-tag--top { color: #FFFFFF; }
[data-theme="light"] .tx-nav__pill { color: #FFFFFF; }
[data-theme="light"] .tx-cfg-row__title .req { color: var(--tx-mint); }
[data-theme="light"] .tx-statusbar { border-bottom-color: var(--tx-line); }
[data-theme="light"] .tx-megamenu { background: var(--tx-bg-2); }
[data-theme="light"] .tx-megamenu__feature::after { background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.85)); }
[data-theme="light"] .tx-megamenu__feature h3 { color: var(--tx-text); }
[data-theme="light"] .tx-cat::after { background: linear-gradient(to top, rgba(15,20,20,0.85) 0%, rgba(15,20,20,0.3) 50%, transparent 100%); }
[data-theme="light"] .tx-cat h3,
[data-theme="light"] .tx-cat .tx-cat__sub,
[data-theme="light"] .tx-cat .tx-cat__cta { color: #FFFFFF; }
[data-theme="light"] .tx-cat .tx-cat__sub { color: rgba(255,255,255,0.85); }
[data-theme="light"] .tx-builtdiff { background: var(--tx-bg-2); }
[data-theme="light"] .tx-pillar { background: var(--tx-card); }
[data-theme="light"] .tx-cfg-bd__pillar { background: var(--tx-card); }
[data-theme="light"] .tx-cfg-sticky { background: rgba(255,255,255,0.97); }
[data-theme="light"] .tx-hero-slider__arrow { background: rgba(255,255,255,0.85); color: var(--tx-text); }
[data-theme="light"] .tx-hexbg {
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(6,168,126,0.06), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(6,168,126,0.03), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%23DEE3E1' stroke-width='1'/></svg>");
}
[data-theme="light"] .tx-builtdiff__bg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%23DEE3E1' stroke-width='1'/></svg>");
  opacity: 0.5;
}
[data-theme="light"] .tx-cfg-bd::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%23DEE3E1' stroke-width='1'/></svg>");
  opacity: 0.5;
}
/* (Light-Theme-Hexagon-Override entfernt — Basis-::before existiert nicht mehr) */
[data-theme="light"] .tx-icon-btn { color: var(--tx-text); }
[data-theme="light"] .tx-search { background: var(--tx-card); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--tx-body);
  background: var(--tx-bg);
  color: var(--tx-text);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  max-width: 100%;
}
img, video, svg { max-width: 100%; height: auto; }
.tx-hero, .tx-hero-slider, .tx-section, .tx-plp, .tx-cfg-detail, .tx-megamenu-wrap { max-width: 100vw; }
:focus-visible {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

img { max-width: 100%; display: block; }

.tx-container {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── STATUS BAR ──────────────────────────────────────────────── */
.tx-statusbar {
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-line);
  font-family: var(--tx-sub);
  font-size: 13px;
  font-weight: 600;
}
.tx-statusbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 32px 8px;
  max-width: var(--tx-box);
  margin: 0 auto;
  gap: 24px;
}
.tx-statusbar__left { display: flex; gap: 24px; flex-shrink: 0; }
.tx-statusbar__right {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--tx-text-dim);
}
.tx-statusbar__item { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-text-dim); }
.tx-statusbar__item svg { color: var(--tx-mint); }
.tx-statusbar__right a { color: var(--tx-text-dim) !important; text-decoration: none !important; }
.tx-statusbar__right a:hover { color: var(--tx-mint) !important; }
.tx-statusbar__lang {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.15em;
  padding: 0 10px;
  margin-left: 6px;
  border-left: 1px solid var(--tx-line);
  display: inline-flex;
  align-items: center;
  height: 28px;
}

/* ─── HEADER ──────────────────────────────────────────────────── */
.tx-header {
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-line);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.tx-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 14px 32px;
  max-width: var(--tx-box);
  margin: 0 auto;
}
.tx-logo {
  display: flex;
  align-items: center;
  height: 48px;
  min-width: 0;
  flex-shrink: 0;
}
.tx-brand img { height: 32px; width: auto; display: block; }

.tx-nav {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-self: start;
  margin-left: 18px;
}
.tx-nav__item {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 14px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.tx-nav__item::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: 6px;
  height: 2px;
  background: var(--tx-mint);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity .15s, transform .2s;
}
.tx-nav__item.is-active::after,
.tx-nav__item:hover::after,
.tx-nav__item.is-open::after { opacity: 1; transform: scaleX(1); }
.tx-nav__item.is-active,
.tx-nav__item:hover,
.tx-nav__item.is-open { color: var(--tx-mint) !important; }
.tx-nav__item__chev {
  font-size: 11px;
  opacity: 0.85;
  margin-left: 2px;
  transition: transform .2s;
}
.tx-nav__item.is-open .tx-nav__item__chev { transform: rotate(180deg); }
.tx-nav__item--cfg { color: var(--tx-mint); }
.tx-nav__pill {
  display: inline-flex;
  align-items: center;
  background: var(--tx-mint);
  color: #062019;
  font-family: var(--tx-sub);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 3px 6px;
  margin-left: 4px;
  text-transform: uppercase;
}

.tx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  padding: 7px 12px;
  width: 240px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  transition: border-color .15s, width .2s;
}
.tx-search:focus-within { border-color: var(--tx-mint); width: 280px; }

/* Compact Search — sits in status bar */
.tx-search--compact {
  width: 240px;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--tx-bg-2);
  height: 28px;
}
.tx-search--compact:focus-within { width: 300px; }
.tx-search--compact input { font-size: 12px; }
.tx-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--tx-text);
  outline: none;
  font: inherit;
}
.tx-search kbd {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-mute);
  flex-shrink: 0;
}

/* Submit-Button im neuen Search-Pattern (Click-Target für Lupe-Icon).
   Vorher war's ein <svg> direkt im Form, jetzt ein <button> drumrum
   damit Enter sicher submitted (typeahead fängt sonst Enter ab). */
.tx-search__submit {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx-text-dim);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.tx-search__submit:hover { color: var(--tx-mint); }
.tx-search__submit:focus-visible { outline: 1px solid var(--tx-mint); outline-offset: 2px; }

.tx-iconbar { display: flex; gap: 4px; }
/* Small variant for status-bar — 30x30 Buttons mit größeren Icons */
.tx-icon-btn--sm {
  width: 30px !important;
  height: 30px !important;
  border-color: transparent !important;
}
.tx-icon-btn--sm svg {
  width: 17px !important;
  height: 17px !important;
}
.tx-icon-btn--sm:hover { border-color: var(--tx-line-2) !important; }
.tx-statusbar__lang { height: 30px; font-size: 12px; }
.tx-icon-btn {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative;
  transition: border-color .15s, color .15s;
}
.tx-icon-btn:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-icon-btn .tx-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--tx-mint);
  color: #062019;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 9px;
  min-width: 16px;
  text-align: center;
}

/* mega menu (closed by default; open via .is-open) */
.tx-megamenu-wrap {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 60;
  pointer-events: none;
}
.tx-megamenu {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--tx-bg-2);
  border-top: 2px solid var(--tx-mint);
  border-bottom: 1px solid var(--tx-line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.tx-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, visibility 0s linear 0s;
}
.tx-megamenu__inner {
  display: grid;
  grid-template-columns: 260px repeat(auto-fit, minmax(145px, 1fr));
  gap: 28px;
  padding: 36px 32px;
  max-width: 1600px;
  margin: 0 auto;
}
.tx-megamenu__feature {
  position: relative;
  background:
    linear-gradient(180deg, rgba(11,15,16,0.4) 0%, rgba(11,15,16,0.95) 100%),
    var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  overflow: hidden;
}
.tx-megamenu__feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--mm-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: 0;
}
.tx-megamenu__feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,13,13,0.2), rgba(10,13,13,0.95));
  z-index: 1;
}
.tx-megamenu__feature > * { position: relative; z-index: 2; }
.tx-megamenu__feature h4 {
  font-family: var(--tx-h);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin: 0 0 8px;
  font-weight: 700;
}
.tx-megamenu__feature h3 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.05;
  color: var(--tx-text);
}
.tx-megamenu__feature p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--tx-text-dim);
  line-height: 1.5;
}
.tx-megamenu__feature .tx-btn { align-self: flex-start; padding: 12px 20px; font-size: 12px; }
.tx-megamenu__col h5 {
  font-family: var(--tx-sub);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tx-line);
  font-weight: 700;
}
.tx-megamenu__col ul { list-style: none; padding: 0; margin: 0; }
.tx-megamenu__col li {
  padding: 7px 0;
  font-size: 14px;
  color: var(--tx-text);
  cursor: pointer;
  font-family: var(--tx-sub);
  font-weight: 500;
}
.tx-megamenu__col li:hover { color: var(--tx-mint); }
.tx-megamenu__col li.is-emph {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
}

/* ─── BUTTONS ─────────────────────────────────────────────────── */
/* Toxic-style cut-corner buttons */
.tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: transform .15s, filter .15s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.tx-btn--primary {
  background: var(--tx-mint);
  color: #062019;
}
.tx-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tx-btn--ghost {
  background: transparent;
  color: var(--tx-mint);
  /* 2px statt 1px (2026-07-17): 1px-Rahmen exakt auf der Clip-Path-Kante
     wurde beim Rastern unten/links abrasiert (User: „unten fehlt die Linie") */
  box-shadow: inset 0 0 0 2px var(--tx-mint);
}
.tx-btn--ghost:hover { background-color: rgba(1,222,194,0.08); color: var(--tx-mint); }
.tx-btn--mint-outline {
  background: transparent;
  color: var(--tx-mint);
  box-shadow: inset 0 0 0 2px var(--tx-mint);
}
.tx-btn--mint-outline:hover { background-color: var(--tx-mint); color: #062019; }

.tx-btn .tx-arr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  font-size: 12px;
}

/* ─── KICKER & HEADINGS ───────────────────────────────────────── */
.tx-kicker {
  font-family: var(--tx-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tx-mint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tx-kicker::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--tx-mint);
}
.tx-kicker--no-line::before { display: none; }

.tx-section-title {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 12px 0 0;
  color: var(--tx-text);
}
.tx-section-title em {
  font-style: normal;
  color: var(--tx-mint);
  font-weight: 700;
}
.tx-section-title--big {
  font-size: 56px;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.tx-section-sub {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  color: var(--tx-text-dim);
  max-width: 680px;
  margin: 16px 0 0;
  line-height: 1.5;
}
@media (max-width: 1180px) {
  .tx-section-title { font-size: 36px; }
  .tx-section-title--big { font-size: 44px; }
}
@media (max-width: 720px) {
  .tx-section-title { font-size: 28px; }
  .tx-section-title--big { font-size: 34px; }
}

.tx-section { padding: 96px 0; position: relative; }
.tx-section--tight { padding: 64px 0; }
.tx-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
}
.tx-section__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tx-section__head--center .tx-section-sub { text-align: center; margin-left: auto; margin-right: auto; }

/* hex bg overlay */
.tx-hexbg {
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(1,222,194,0.08), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(1,222,194,0.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%231F2528' stroke-width='1'/></svg>");
}

/* ─── HERO SLIDER ─────────────────────────────────────────────── */
/* KRITISCH — NOVA's compiled my-nova.css enthält die Regel:
       main section { padding: 4rem 0 }  (Zeile 23728)
   Die wird auf JEDEN <section> im <main> angewandt — damit kriegt unser
   Slider 64px Top- und Bottom-Padding. Das ist der schwarze Streifen
   zwischen Header und Slider. Hier explizit für den Hero-Slider killen. */
main section.tx-hero-slider,
#main-content > .tx-hero-slider {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

.tx-hero-slider {
  position: relative;
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-line);
  overflow: hidden;
}

/* Big-Slide darf keine Top-Padding aus generischem .tx-hero erben */
.tx-hero-slide--big {
  padding: 0 !important;
  border-bottom: 0 !important;
}
/* GAP-FIX: Die Slides liegen gestapelt im selben Grid-Cell (grid-area:stack),
   Container-Höhe = höchste Slide. Die System-Slide (.tx-hero) ist 720px hoch,
   die Big-Slide per aspect-ratio 3.2/1 aber kürzer → darunter blieb schwarzer
   Rest, in dem die Pagination-Dots (bottom:24px) schwebten. aspect-ratio:auto
   löst die fixe Höhe → die Big-Slide streckt sich (Grid-Default stretch) auf die
   volle Stack-Höhe, das Cover-Bild füllt sie, kein Rest mehr. Nur Desktop —
   Mobile hat eigenen Flex-Stack (aspect-ratio:auto) ab max-width:720. */
@media (min-width: 721px) {
  .tx-hero-slider__track > .tx-hero-slide--big {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: var(--tx-hb-min-h, 520px);
  }
}

/* ─── A11Y-FIXES · Welle 1 (2026-07-22) ──────────────────────────── */
/* Skip-Link: off-screen bis fokussiert (WCAG 2.4.1 Bypass Blocks). */
.tx-skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100000;
  transform: translateY(-160%);
  background: var(--tx-mint);
  color: #062019;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.tx-skip:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* Hero Partner-Edition: Button-/Kicker-Kontrast auf ≥4,5:1 heben (WCAG 1.4.3).
   .tx-hero-slider davor = höhere Spezifität als Plugin-CSS → Override greift sicher. */
.tx-hero-slider .tx-hero-slide--big .tx-btn--big-green { color: #0B0C0D !important; }
.tx-hero-slider .tx-hero-slide--big .tx-btn--big-red   { background: #E81B23 !important; border-color: #E81B23 !important; }
.tx-hero-slider .tx-hero-slide--big .tx-hero-slide__kicker--red { color: #FF3B41 !important; }

/* Hero-Slider Pause/Play-Button (WCAG 2.2.2) */
.tx-hero-slider__playpause {
  position: absolute;
  right: 24px; bottom: 20px;
  z-index: 6;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(11,15,16,0.7);
  border: 1px solid var(--tx-line-2);
  border-radius: 999px;
  color: var(--tx-text);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .15s, color .15s, background .15s;
}
.tx-hero-slider__playpause:hover { border-color: var(--tx-mint); color: var(--tx-mint); background: rgba(11,15,16,0.9); }
.tx-hero-slider__pp-play { display: none; }
.tx-hero-slider__playpause.is-paused .tx-hero-slider__pp-pause { display: none; }
.tx-hero-slider__playpause.is-paused .tx-hero-slider__pp-play  { display: inline; }
.tx-hero-slider__track {
  position: relative;
}
/* Slide visibility (fade-stack) is owned by the tx_hero_slider plugin
   (Portlets/ToxicHeroSlider/ToxicHeroSlider.css). Don't add display
   rules here — they fight the grid-area stacking. */

/* arrows */
.tx-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  background: rgba(11,15,16,0.7);
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(8px);
  transition: border-color .15s, color .15s, background .15s;
}
.tx-hero-slider__arrow:hover { border-color: var(--tx-mint); color: var(--tx-mint); background: rgba(11,15,16,0.9); }
.tx-hero-slider__arrow--prev { left: 24px; }
.tx-hero-slider__arrow--next { right: 24px; }

/* bar pagination */
.tx-hero-slider__bars {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.tx-hero-slider__bar {
  width: 32px;
  height: 8px;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  cursor: pointer;
  padding: 0;
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px));
  transition: background .15s, border-color .15s;
}
.tx-hero-slider__bar:hover { border-color: var(--tx-text-dim); }
.tx-hero-slider__bar.is-active {
  background: var(--tx-mint);
  border-color: var(--tx-mint);
  width: 48px;
}

/* slide promo strip below header */
.tx-hero-slider__strip {
  background: var(--tx-bg-2);
  border-bottom: 1px solid var(--tx-line);
  padding: 12px 0;
  text-align: center;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text);
  letter-spacing: 0.02em;
}
.tx-hero-slider__strip em { font-style: normal; color: var(--tx-mint); font-weight: 700; }

/* ─── HERO ────────────────────────────────────────────────────── */
.tx-hero {
  position: relative;
  min-height: 720px;
  padding: 80px 0 64px;
  overflow: hidden;
  border-bottom: 1px solid var(--tx-line);
}
.tx-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.tx-hero__title {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 24px 0 8px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,255,255,.08);
}
.tx-hero__title em {
  font-style: normal;
  color: var(--tx-mint);
  display: block;
  text-shadow: 0 0 60px rgba(1,222,194,0.4);
}
.tx-hero__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 19px;
  color: var(--tx-text-dim);
  max-width: 480px;
  line-height: 1.5;
  margin: 22px 0 30px;
}
/* Spec-Boxen (GPU/CPU/RAM) im Hero-Slider — IMMER EINE REIHE.
   Vorher: grid repeat(3,1fr) + max-width:520px zwang gleich breite Boxen,
   dadurch brach ein langer Wert wie „RTX 5060 Ti 8GB" auf 2 Zeilen um und
   die Boxen wurden unterschiedlich hoch. Jetzt: Flex-Reihe, jede Box so
   breit wie ihr Inhalt (flex:0 0 auto), Wert nie umbrechend (nowrap).
   overflow-x nur als sanfter Fallback auf sehr schmalen Screens.
   WICHTIG: KEIN touch-action:pan-x hier — das wuerde auf Mobile das
   vertikale Seiten-Scrollen blockieren (Lektion aus dem Konfigurator). */
.tx-hero__stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 30px;
  max-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tx-hero__stats::-webkit-scrollbar { display: none; }
.tx-stat {
  flex: 0 0 auto;
  border: 1px solid var(--tx-line);
  background: rgba(0,0,0,0.3);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}
.tx-stat__label {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  white-space: nowrap;
}
.tx-stat__val {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 18px;
  color: var(--tx-text);
  margin-top: 4px;
  white-space: nowrap;
}
.tx-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.tx-hero__visual {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tx-hero__visual::before {
  content: '';
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, rgba(1,222,194,0.4), transparent 60%);
  filter: blur(80px);
  z-index: 0;
}
.tx-hero__visual img {
  position: relative;
  max-height: 600px;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}
/* corner brackets */
.tx-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--tx-mint) 2px, transparent 2px) 0 0/24px 1px no-repeat,
    linear-gradient(to bottom, var(--tx-mint) 2px, transparent 2px) 0 0/1px 24px no-repeat,
    linear-gradient(to left, var(--tx-mint) 2px, transparent 2px) 100% 0/24px 1px no-repeat,
    linear-gradient(to bottom, var(--tx-mint) 2px, transparent 2px) 100% 0/1px 24px no-repeat,
    linear-gradient(to right, var(--tx-mint) 2px, transparent 2px) 0 100%/24px 1px no-repeat,
    linear-gradient(to top, var(--tx-mint) 2px, transparent 2px) 0 100%/1px 24px no-repeat,
    linear-gradient(to left, var(--tx-mint) 2px, transparent 2px) 100% 100%/24px 1px no-repeat,
    linear-gradient(to top, var(--tx-mint) 2px, transparent 2px) 100% 100%/1px 24px no-repeat;
  pointer-events: none;
}
.tx-hero__hud {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--tx-mint);
  z-index: 3;
}
.tx-hero__hud::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tx-mint);
  margin-right: 8px;
  box-shadow: 0 0 12px var(--tx-mint);
  animation: tx-blink 1.5s infinite;
}
@keyframes tx-blink { 50% { opacity: 0.3; } }
.tx-hero__chip {
  position: absolute;
  bottom: 14px;
  right: 24px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.tx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-mint);
  border: 1px solid var(--tx-mint);
  background: rgba(1,222,194,0.06);
  padding: 5px 10px;
}
.tx-chip--dim { color: var(--tx-text-dim); border-color: var(--tx-line-2); background: transparent; }
.tx-chip--danger { color: var(--tx-danger); border-color: var(--tx-danger); background: rgba(255,85,112,0.08); }
.tx-chip--top { color: #062019; background: var(--tx-mint); border-color: var(--tx-mint); }

/* hero side gauge */
.tx-hero__sidebar {
  position: absolute;
  top: 80px;
  bottom: 64px;
  right: 32px;
  width: 96px;
  border-left: 1px solid var(--tx-line);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  z-index: 1;
  pointer-events: none;
}

/* ─── USP BAR (under hero) ────────────────────────────────────── */
/* NOVA legt per `main section { padding: 4rem 0 }` (my-nova.css:23728) auf
   JEDE <section> im <main> 64px Top+Bottom. Bei der USP-Bar ergibt das oben
   einen ~64px dunklen Streifen (= der „Gap" zwischen Slider und Bar) und
   bläht die Bar zusätzlich auf. Wie beim Slider explizit killen; die kompakte
   Höhe kommt allein aus dem .tx-usp-Innenpadding. */
main section.tx-uspbar,
#main-content > .tx-uspbar {
  padding: 0 !important;
  margin-top: 0 !important;
}
.tx-uspbar {
  background: var(--tx-bg-2);
}
.tx-uspbar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 100px;          /* feste, präsente Bar-Höhe (Grid-Zellen strecken → Trennlinien volle Höhe, Inhalt via .tx-usp align-items:center zentriert) */
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-usp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-right: 1px solid var(--tx-line);
}
.tx-usp:last-child { border-right: 0; }
.tx-usp__icon {
  width: 30px; height: 30px;
  color: var(--tx-text-dim);
  flex-shrink: 0;
}
.tx-usp__label {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-text);
}
.tx-usp__sub {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tx-text-dim);
  margin-top: 2px;
}

/* ─── WÄHLE DEIN SYSTEM (image-led category cards) ────────────── */
.tx-cats {
  background: var(--tx-bg-3);
  padding: 88px 0;
}
.tx-cats__head { margin-bottom: 40px; }
.tx-cats__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  height: 580px;
}
/* OPC-Variante: KEIN festes Grid, damit das Mountpoint die volle Breite
   bekommt und Banner-/Grid-Layout-Portlets ihr eigenes Bootstrap-Layout
   entfalten können. Höhe + Spalten regelt der Redakteur in OPC. */
.tx-cats__grid--opc {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  height: auto;
  gap: 0;
}

/* ── OPC-Karten "Partner-Editionen-Style" ────────────────────────
   Live-HTML pro Spalte (data-area-id="col-N") enthält direkt:
     - <div class="banner"> mit <picture><img></picture>  (das Bild)
     - <h1>/<h2>/<h3>                                     (Überschrift)
     - <div><p>...</p></div>                              (Rich Text)
     - <div class="opc-Button"><button|a>                 (Schaltfläche)
   CSS layert das Bild als gedimmtes Backdrop, der Rest sitzt darüber. */

/* Row → CSS-Grid mit 24px Gap. Überschreibt Bootstraps Float-Layout,
   damit zwischen den Karten echtes Spacing entsteht. Responsive: 3→2→1. */
.tx-cats__grid--opc .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
@media (max-width: 991px) {
  .tx-cats__grid--opc .row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .tx-cats__grid--opc .row { grid-template-columns: 1fr; }
}
/* Bootstrap-Clearfixes innerhalb der Row neutralisieren, sonst zerreißen
   sie das Grid (sie wollen auf Float-Layout reagieren). */
.tx-cats__grid--opc .row > .clearfix { display: none !important; }

.tx-cats__grid--opc [data-area-id^="col-"] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  /* Grid setzt Width — Bootstrap-col-Klassen übersteuern */
  width: auto;
  max-width: none;
  flex: none;
  border: 1px solid var(--tx-line);
  background: linear-gradient(135deg, #0F1011 0%, #14161A 100%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .2s, transform .2s;
  padding: 36px 32px;
  margin: 0;
}
.tx-cats__grid--opc [data-area-id^="col-"]:hover {
  border-color: var(--tx-mint, #01DEC2);
  transform: translateY(-3px);
}
/* Lesbarkeits-Gradient — deutlich weicher (Bild bleibt klar, nur unten ein Hauch) */
.tx-cats__grid--opc [data-area-id^="col-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,12,13,0) 55%, rgba(11,12,13,0.50) 100%);
  pointer-events: none;
}

/* Banner = Backdrop: absolut, full-bleed, gedimmt */
.tx-cats__grid--opc [data-area-id^="col-"] > .banner {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
}
.tx-cats__grid--opc [data-area-id^="col-"] > .banner picture {
  display: block;
  width: 100%;
  height: 100%;
}
.tx-cats__grid--opc [data-area-id^="col-"] > .banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.85;
  transition: transform .5s ease, opacity .3s ease;
}
.tx-cats__grid--opc [data-area-id^="col-"]:hover > .banner img {
  transform: scale(1.04);
  opacity: 1;
}
/* Banner-Hotspots ausblenden — wir benutzen den CTA stattdessen */
.tx-cats__grid--opc [data-area-id^="col-"] > .banner .area,
.tx-cats__grid--opc [data-area-id^="col-"] > .banner .area-desc {
  display: none !important;
}

/* Alle Direkt-Kinder außer .banner sitzen über dem Backdrop */
.tx-cats__grid--opc [data-area-id^="col-"] > *:not(.banner) {
  position: relative;
  z-index: 3;
}

/* Überschrift (h1–h6 als direktes Kind der col) */
.tx-cats__grid--opc [data-area-id^="col-"] > :is(h1,h2,h3,h4,h5,h6) {
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* Rich-Text Subline (div mit p drin, nicht .banner / nicht .opc-Button) */
.tx-cats__grid--opc [data-area-id^="col-"] > div:not(.banner):not(.opc-Button) p {
  color: rgba(236, 239, 238, .82);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* CTA-Button: mint, unterstrichen, Pfeil */
.tx-cats__grid--opc [data-area-id^="col-"] .opc-Button {
  margin: 0;
}
.tx-cats__grid--opc [data-area-id^="col-"] .opc-Button :is(a, button, .btn) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tx-mint, #01DEC2) !important;
  border-radius: 0 !important;
  color: var(--tx-mint, #01DEC2) !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 4px 0 6px !important;
  transition: gap .15s ease;
  box-shadow: none !important;
}
.tx-cats__grid--opc [data-area-id^="col-"] .opc-Button :is(a, button, .btn)::after {
  content: "→";
  font-size: 14px;
  line-height: 1;
  transition: transform .2s ease;
}
.tx-cats__grid--opc [data-area-id^="col-"]:hover .opc-Button :is(a, button, .btn)::after {
  transform: translateX(4px);
}

/* ──────────────────────────────────────────────────────────────────
   OPC-Karten "Stack-Style" (Partner-Editionen)
   Reihenfolge im OPC pro Spalte:
     1. Überschrift  (z. B. "Du bestimmst dein Schicksal")
     2. Banner       (Bild 1200×675, 16:9)
     3. Rich Text    (Beschreibung)
     4. Schaltfläche (CTA)
   Bild = Backdrop, Text+CTA liegen DRAUF (Mifcom-Style).
   Erste Row = Hero (16:9 hoch). Zweite Row = Banner-Strip (16:6 flach).
   Layout: 2 Spalten Desktop → 1 Spalte Mobile.
   ────────────────────────────────────────────────────────────────── */

.tx-cards-stack--opc .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0 0 24px;
}
.tx-cards-stack--opc .row:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .tx-cards-stack--opc .row { grid-template-columns: 1fr; }
}
.tx-cards-stack--opc .row > .clearfix { display: none !important; }

/* Erste Row (Hero): Text oben links, Button unten links */
.tx-cards-stack--opc .row:first-of-type [data-area-id^="col-"] {
  justify-content: flex-start;
}
.tx-cards-stack--opc .row:first-of-type [data-area-id^="col-"] .opc-Button {
  margin-top: auto;
}
/* Erste Row: CTA als mint Cut-Corner-Button (wie ANSEHEN / JETZT KONFIGURIEREN) */
.tx-cards-stack--opc .row:first-of-type [data-area-id^="col-"] .opc-Button :is(a, button, .btn) {
  background: var(--tx-mint, #01DEC2) !important;
  color: #062019 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 14px 22px !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: filter .15s, transform .15s;
}
.tx-cards-stack--opc .row:first-of-type [data-area-id^="col-"]:hover .opc-Button :is(a, button, .btn) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Zweite (und weitere) Row → Banner-Strip (16:6, kompakter) */
.tx-cards-stack--opc .row:nth-of-type(n+2) [data-area-id^="col-"] {
  aspect-ratio: 16 / 6;
  padding: 22px 28px;
}
.tx-cards-stack--opc .row:nth-of-type(n+2) [data-area-id^="col-"] > :is(h1,h2,h3,h4,h5,h6) {
  font-size: 22px;
  margin-bottom: 6px;
}
.tx-cards-stack--opc .row:nth-of-type(n+2) [data-area-id^="col-"] > div:not(.banner):not(.opc-Button) p {
  font-size: 13px;
  margin-bottom: 10px;
}

.tx-cards-stack--opc [data-area-id^="col-"] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: auto;
  max-width: none;
  flex: none;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--tx-line);
  background: #0F1011;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .2s, transform .2s;
  padding: 32px;
  margin: 0;
}
.tx-cards-stack--opc [data-area-id^="col-"]:hover {
  border-color: var(--tx-mint, #01DEC2);
  transform: translateY(-3px);
}
/* Lesbarkeits-Gradient zwischen Bild (z=1) und Text (z=3) */
.tx-cards-stack--opc [data-area-id^="col-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,12,13,0) 35%, rgba(11,12,13,0.50) 70%, rgba(11,12,13,0.87) 100%);
  pointer-events: none;
}
/* ── Custom-Portlet "ToxicPartnerCard" neutralisiert Wrapper ────
   Wenn der Redakteur unsere neue `.tx-pc-card` in eine OPC-Spalte
   legt, soll die Spalte KEIN eigenes Padding/Border/Min-Height/
   Background/Gradient mehr beisteuern — die Card bringt alles selbst
   mit. Sonst doppelter Border, doppelter Gradient, leerer Raum drunter.

   WICHTIG zur Breite: JTL/Bootstrap-Cols haben Default-Padding
   (typisch 15px links + rechts via .col-md-*). Ohne diese Patch
   shrinkt unsere Card auf 100% des Col-CONTENT-Bereichs (= 30px
   schmaler als die Col selbst). In Rows mit unterschiedlichen
   Col-Klassen kann das pro Row unterschiedlich ausfallen → daher
   padding:0 + margin:0 + width:100% mit !important erzwingen. */
.tx-cards-stack--opc [data-area-id^="col-"]:has(.tx-pc-card),
.tx-cats__grid--opc [data-area-id^="col-"]:has(.tx-pc-card) {
  min-height: 0 !important;
  aspect-ratio: auto;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible;
}
.tx-cards-stack--opc [data-area-id^="col-"]:has(.tx-pc-card)::after,
.tx-cats__grid--opc [data-area-id^="col-"]:has(.tx-pc-card)::after {
  display: none !important;
}
.tx-cards-stack--opc [data-area-id^="col-"]:has(.tx-pc-card):hover,
.tx-cats__grid--opc [data-area-id^="col-"]:has(.tx-pc-card):hover {
  border-color: transparent !important;
  transform: none !important;
}
/* Card selbst nimmt explizit volle Breite der Col, ignoriert
   ererbtes Padding/Margin von Bootstrap-Layern. */
.tx-cards-stack--opc .tx-pc-card,
.tx-cats__grid--opc .tx-pc-card {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* Alle Direkt-Kinder außer .banner sitzen über dem Backdrop */
.tx-cards-stack--opc [data-area-id^="col-"] > *:not(.banner) {
  position: relative;
  z-index: 3;
}

/* Überschrift — auf dem Bild liegend */
.tx-cards-stack--opc [data-area-id^="col-"] > :is(h1,h2,h3,h4,h5,h6) {
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  padding: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* Banner = Backdrop (absolut, full-bleed) */
.tx-cards-stack--opc [data-area-id^="col-"] > .banner {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
}
.tx-cards-stack--opc [data-area-id^="col-"] > .banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Banner-Bild */
.tx-cards-stack--opc [data-area-id^="col-"] > .banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: transform .5s ease, opacity .3s ease;
}
.tx-cards-stack--opc [data-area-id^="col-"]:hover > .banner img {
  transform: scale(1.04);
  opacity: 1;
}
.tx-cards-stack--opc [data-area-id^="col-"] > .banner .area,
.tx-cards-stack--opc [data-area-id^="col-"] > .banner .area-desc {
  display: none !important;
}

/* Rich-Text Subline (überlagert) */
.tx-cards-stack--opc [data-area-id^="col-"] > div:not(.banner):not(.opc-Button) p {
  color: rgba(236, 239, 238, .85);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
  padding: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* CTA-Button (überlagert) */
.tx-cards-stack--opc [data-area-id^="col-"] .opc-Button {
  margin: 0;
  padding: 0;
}
.tx-cards-stack--opc [data-area-id^="col-"] .opc-Button :is(a, button, .btn) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tx-mint, #01DEC2) !important;
  border-radius: 0 !important;
  color: var(--tx-mint, #01DEC2) !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 4px 0 6px !important;
  transition: gap .15s ease;
  box-shadow: none !important;
}
.tx-cards-stack--opc [data-area-id^="col-"] .opc-Button :is(a, button, .btn)::after {
  content: "→";
  font-size: 14px;
  line-height: 1;
  transition: transform .2s ease;
}
.tx-cards-stack--opc [data-area-id^="col-"]:hover .opc-Button :is(a, button, .btn)::after {
  transform: translateX(4px);
}
.tx-cat {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tx-line);
  background: var(--tx-card);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  cursor: pointer;
  transition: border-color .15s, transform .2s;
}
.tx-cat:hover { border-color: var(--tx-mint); transform: translateY(-2px); }
.tx-cat:first-child { grid-row: 1 / span 2; }
.tx-cat__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: brightness(0.65) contrast(1.05);
  transition: transform .4s, filter .3s;
}
.tx-cat:hover .tx-cat__img { transform: scale(1.04); filter: brightness(0.75); }
.tx-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,7,7,0.95) 0%, rgba(5,7,7,0.4) 50%, transparent 100%);
  z-index: 1;
}
.tx-cat > * { position: relative; z-index: 2; }
.tx-cat__powered {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(5,7,7,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 12px;
  z-index: 3;
}
.tx-cat__count {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--tx-text-dim);
  z-index: 3;
}
.tx-cat h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.tx-cat:first-child h3 { font-size: 48px; font-weight: 600; }
.tx-cat__sub {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
  margin-bottom: 14px;
}
.tx-cat__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-mint);
}

/* ─── BESTSELLER GRID ─────────────────────────────────────────── */
.tx-bestseller-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ─── HOMEPAGE BESTSELLER · Rotor (breiter als boxed, Flex-Rail, grüne
       Doppel-Chevrons flankierend). Nur #bestseller-scoped, damit das
       .tx-bestseller-grid auf Landingpages (.tx-lp-products) Grid bleibt.
       JS: initBestsellerCarousel (custom.js) — unverändert, erwartet
       genau diesen Flex-Rail + scroll-snap. ─────────────────────────── */
#bestseller .tx-rotor {
  position: relative;
  /* Shopweite Box statt eigener Breite. Vorher min(1860px, 96vw) plus 70px
     Gutter fuer die seitlichen Pfeile — die Sektion stand dadurch breiter als
     alle anderen und ihre Kante lag nicht auf der des uebrigen Inhalts. Die
     Pfeile sind in den Kopf gewandert, damit hier nichts mehr Platz braucht. */
  max-width: var(--tx-box, 1660px);
  margin: 0 auto;
  padding-inline: 32px;
}
#bestseller .tx-section__head { padding: 0; }

/* Kopfzeile rechts: „Alle Systeme" plus die beiden Pfeile. */
.tx-section__head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* Viewport trägt die seitlichen 70px-Gutter — die Pfeile sitzen DARIN,
   neben dem scrollbaren Rail. (Padding auf den Rail selbst funktioniert
   nicht: beim Scrollen verschwindet das äußere Padding und der Pfeil
   überlappt die Randkarte.) */
.tx-rotor__viewport { position: relative; }
#bestseller .tx-bestseller-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 8px;
}
#bestseller .tx-bestseller-grid::-webkit-scrollbar { display: none; }
#bestseller .tx-bestseller-grid > .tx-product-card {
  /* Die Breite leitet sich aus der Box ab, nicht aus dem Fenster: genau so
     viele Karten, wie ganz hineinpassen.
     Vorher stand hier eine feste Spanne (clamp 320…392px). Ab etwa 1830px
     Fensterbreite ergab das 4 Karten zu je 392px = 1628px in einer 1596px
     breiten Box — die vierte stand gemessen 32px ueber die Kante und wurde
     angeschnitten. Ein 32px-Anschnitt liest sich nicht als „weiter
     scrollbar", sondern als Fehler; genau so wurde er auch gemeldet. Den
     Hinweis auf mehr Systeme tragen die beiden Pfeile im Kopf. */
  flex: 0 0 calc((100% - 60px) / 4);   /* 4 Karten, 3 Luecken zu 20px */
  scroll-snap-align: start;
}
.tx-rotor__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 54px;
  height: 70%;
  min-height: 150px;
  max-height: 230px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity .2s ease;
}

.tx-rotor__arrow svg { width: 30px; height: 72px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tx-rotor__arrow .ch { stroke: var(--tx-text); transition: stroke .2s ease; }
.tx-rotor__arrow .ch1 { stroke-width: 2.2; opacity: .45; }  /* dünner Trail */
.tx-rotor__arrow .ch2 { stroke-width: 3.8; opacity: .95; }  /* dickes Leit-Chevron */
.tx-rotor__arrow:hover .ch { stroke: var(--tx-mint); }
.tx-rotor__arrow[disabled] { opacity: .16; pointer-events: none; }
/* Die seitlichen 54px/40px-Gutter sind entfallen. Sie hielten Platz fuer die
   Pfeile frei, als die noch neben dem Rail standen — seit die im Kopf sitzen,
   ruecken sie die ganze Sektion nur um 54px gegen jede andere ein. */
@media (max-width: 1180px) {
  #bestseller .tx-bestseller-grid > .tx-product-card { flex-basis: calc((100% - 40px) / 3); }
  .tx-rotor__arrow { width: 44px; }
}
@media (max-width: 900px) {
  #bestseller .tx-bestseller-grid > .tx-product-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  #bestseller .tx-bestseller-grid > .tx-product-card { flex-basis: 78vw; }
  .tx-rotor__arrow { width: 34px; }
}
.tx-product-card {
  background: linear-gradient(180deg, var(--tx-card), var(--tx-card-2));
  border: 1px solid var(--tx-line);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .2s;
  /* TOXIC frame: angeschrägte Ecken (oben-rechts + unten-links) — gleiche
     Kanten-DNA wie die Aktions-Karte. clip-path beschneidet den Hover-
     Box-Shadow, das ist bewusst (Toxic ist flat). */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
/* Mint-Scanline wischt beim Hover über die Oberkante. */
.tx-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--tx-mint);
  transition: width .35s ease;
  z-index: 5;
  pointer-events: none;
}
.tx-product-card:hover::before { width: 100%; }
.tx-product-card:hover {
  border-color: var(--tx-mint);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
  /* z-index 49 = direkt UNTER dem Sticky-Header (z-index:50), damit
     beim horizontalen Sliden im Bestseller-Carousel oder beim vertikalen
     Scrollen die Cards niemals den Header überlagern. Trade-off: wenn
     eine Card exakt unter der Header-Unterkante hovered wird, kann der
     obere 1px Mint-Border vom Header optisch verdeckt sein — das ist
     ein extrem seltener Edge-Case, vs der häufige Bug „Cards laufen
     über Header" beim Scroll. Header gewinnt immer. */
  z-index: 49;
}
.tx-product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit !important;
  text-decoration: none !important;
}
.tx-product-card__sub {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tx-text-dim);
  margin: 0 0 14px;
}
.tx-plp__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  border: 1px dashed var(--tx-line);
  background: var(--tx-card);
}
.tx-plp__empty p {
  font-family: var(--tx-h);
  font-size: 16px;
  color: var(--tx-text-dim);
  margin: 0 0 24px;
}
.tx-plp__pager {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
}
.tx-plp__pager a {
  font-family: var(--tx-h);
  font-weight: 600;
  font-size: 14px;
  color: var(--tx-text) !important;
  text-decoration: none !important;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tx-line);
  background: var(--tx-card);
  transition: border-color .12s, color .12s;
}
.tx-plp__pager a:hover { border-color: var(--tx-mint); color: var(--tx-mint) !important; }
.tx-plp__pager a.is-active {
  border-color: var(--tx-mint);
  color: var(--tx-mint) !important;
  background: rgba(1,222,194,0.08);
}
.tx-product-card__media {
  position: relative;
  aspect-ratio: 1/1;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.18), transparent 70%),
    var(--tx-bg-3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tx-product-card__media img {
  width: 100%;
  height: 100%;
  padding: 4%;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.6));
  transition: transform .4s;
  /* Hide alt-text rendering on broken images so layout doesn't blow up
     before the onerror handler swaps to the placeholder. */
  font-size: 0;
  color: transparent;
}
.tx-product-card:hover .tx-product-card__media img { transform: scale(1.04); }
.tx-product-card__badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.tx-badge-tag {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--tx-mint);
  color: #062019;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tx-badge-tag--new { background: var(--tx-mint); color: #062019; }
.tx-badge-tag--top { background: var(--tx-mint); color: #062019; }
.tx-badge-tag--sale { background: var(--tx-danger); color: #fff; }
.tx-badge-tag--recommended { background: var(--tx-mint); color: #062019; }
.tx-badge-tag--recommended::before {
  content: '★';
  font-size: 12px;
}
.tx-product-card__fav {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 1px solid var(--tx-line-2);
  background: rgba(0,0,0,0.5);
  color: var(--tx-text-dim);
  display: inline-flex;
  align-items: center; justify-content: center;
  z-index: 2;
}
.tx-product-card__fav:hover { color: var(--tx-mint); border-color: var(--tx-mint); }

.tx-product-card__case {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-text);
  z-index: 2;
}
.tx-product-card__case::before {
  content: '●';
  color: var(--tx-mint);
  margin-right: 6px;
  font-size: 11px;
}

.tx-product-card__body {
  padding: 18px;
  border-top: 1px solid var(--tx-line);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tx-product-card__class {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.tx-product-card__tier {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
}
.tx-product-card__perf {
  display: flex;
  gap: 6px;
}
.tx-product-card__perf span {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  background: rgba(1,222,194,0.12);
  color: var(--tx-mint);
  border: 1px solid rgba(1,222,194,0.4);
}
.tx-product-card__name {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-transform: uppercase;
  color: #FFFFFF !important;
}
/* FPS-Badges auf Spiele-Kategorie-PLPs (fps-badges.js).
   Mint = WQHD-Prognose fürs Kategorie-Spiel, dezent hell = 4K-ready. */
.tx-fps-badge {
  background: rgba(1,222,194,0.12);
  color: var(--tx-mint);
  border: 1px solid rgba(1,222,194,0.4);
}
.tx-fps-badge--4k {
  background: rgba(255,255,255,0.05);
  color: var(--tx-text);
  border-color: rgba(255,255,255,0.28);
}

/* Bewertungs-Zeile auf der Produktkarte (nur sichtbar mit Bewertungen) */
.tx-product-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 12px;
}
.tx-product-card__stars { color: var(--tx-mint); letter-spacing: 2px; font-size: 13px; }
.tx-product-card__stars em { font-style: normal; color: rgba(255,255,255,0.18); }
.tx-product-card__rating-txt {
  font-family: var(--tx-body);
  font-size: 12px;
  color: var(--tx-text-dim);
}
.tx-product-card__rating-txt em { font-style: normal; color: var(--tx-text); font-weight: 700; }
.tx-product-card__specs {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
}
.tx-product-card__specs > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(31,45,45,0.6);
}
.tx-product-card__specs > div:last-child { border-bottom: 0; }
.tx-product-card__specs dt {
  color: var(--tx-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tx-product-card__specs dt::before {
  content: '›';
  color: var(--tx-text-mute);
}
.tx-product-card__specs dd {
  margin: 0;
  color: var(--tx-text);
  font-weight: 500;
  text-align: right;
}
.tx-product-card__specs dd em {
  font-style: normal;
  color: var(--tx-mint);
}

.tx-product-card__rma {
  border: 1px solid var(--tx-line-2);
  padding: 8px 10px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tx-product-card__rma::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tx-mint);
  box-shadow: 0 0 8px var(--tx-mint);
}
.tx-product-card__rma em { font-style: normal; color: var(--tx-text); font-weight: 600; }

/* ─── PRODUCT CARD · Hersteller-Logo-Leiste ──────────────────────
     Monochrome Logos (currentColor), die beim Hover dezent aufhellen.
     Sitzt zwischen Spec-Liste und Preisblock. Markup/Erkennung:
     snippets/tx_brand_logos.tpl. */
.tx-product-card__brands {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  padding-top: 13px;
  border-top: 1px solid var(--tx-line);
}
.tx-brandlogo {
  display: inline-flex;
  align-items: center;
  height: 19px;              /* SVG-Breite folgt dem Seitenverhältnis */
  color: var(--tx-text-dim); /* heller als mute → auf Dunkel gut lesbar */
  transition: color .2s ease, transform .2s ease, filter .2s ease;
}
.tx-brandlogo svg { height: 100%; width: auto; display: block; fill: currentColor; }
.tx-brandlogo:hover { color: var(--tx-text); transform: translateY(-1px); }
/* Variante B (Farb-Glow beim Hover) — bei Bedarf einkommentieren:
.tx-brandlogo[data-brand="amd"]:hover      { color:#ED1C24; filter:drop-shadow(0 0 8px rgba(237,28,36,.5)); }
.tx-brandlogo[data-brand="nvidia"]:hover   { color:#76B900; filter:drop-shadow(0 0 8px rgba(118,185,0,.5)); }
.tx-brandlogo[data-brand="intel"]:hover    { color:#0071C5; filter:drop-shadow(0 0 8px rgba(0,113,197,.5)); }
.tx-brandlogo[data-brand="msi"]:hover      { color:#FF0000; filter:drop-shadow(0 0 8px rgba(255,0,0,.5)); }
.tx-brandlogo[data-brand="gigabyte"]:hover { color:#F47216; filter:drop-shadow(0 0 8px rgba(244,114,22,.5)); }
.tx-brandlogo[data-brand="kingston"]:hover { color:#BE0027; filter:drop-shadow(0 0 8px rgba(190,0,39,.5)); }
*/

.tx-product-card__foot {
  display: flex;
  flex-direction: column;
  /* Kein gap: die Abstaende stehen an den Zeilen selbst. Mit gap kam zu jedem
     Rand noch einmal derselbe Wert dazu — zwischen Preis und Metazeilen
     gemessen 26px statt der gesetzten 12, und zwischen den beiden Metazeilen
     14px, obwohl die als EINE Gruppe gedacht sind (gestrichelte Linie nur
     oben und unten). */
  gap: 0;
  margin-top: auto;
}
.tx-product-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tx-price__old {
  font-family: var(--tx-body);
  font-size: 14px;
  color: var(--tx-text-mute);
  text-decoration: line-through;
}
.tx-price__now {
  font-family: var(--tx-h);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--tx-text);
}
.tx-price__meta {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  margin-top: 2px;
  display: flex;
  gap: 10px;
}
.tx-price__meta em { font-style: normal; color: var(--tx-mint); }
.tx-price__meta em::before {
  content: '●';
  margin-right: 4px;
}

/* ─── AKTIONS-PCS · vertikale Karte (BILD oben · SPECS · Fuß Preis+CTA) ── */
.tx-aktion { background: var(--tx-bg); }
.tx-aktion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.tx-aktion-card {
  background: linear-gradient(180deg, var(--tx-card), var(--tx-card-2));
  border: 1px solid var(--tx-line);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .2s, box-shadow .2s;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.tx-aktion-card:hover {
  border-color: var(--tx-mint);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}
.tx-aktion-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--tx-mint);
  transition: width .35s ease;
  z-index: 5;
  pointer-events: none;
}
.tx-aktion-card:hover::before { width: 100%; }

/* main = vertikaler Stapel (BILD oben · Specs darunter) — gleiche Achse wie
   die Bestseller-/PC-Finder-Karten, damit die Highlights nicht mehr wie ein
   Datenblatt neben einem kleinen Bild wirken. */
.tx-aktion-card__main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tx-aktion-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.16), transparent 70%),
    var(--tx-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--tx-line);
  overflow: hidden;
}
.tx-aktion-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.10) 3px 4px);
  opacity: .35;
  pointer-events: none;
}
.tx-aktion-card__media img {
  width: 100%;
  height: 100%;
  padding: 6%;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.6));
  transition: transform .4s;
  position: relative;
  z-index: 1;
}
.tx-aktion-card:hover .tx-aktion-card__media img { transform: scale(1.04); }
.tx-aktion-card__brand {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--tx-mono); font-weight: 600;  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--tx-line);
  padding: 4px 8px;
}
.tx-aktion-card__tag {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  font-family: var(--tx-sub);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--tx-mint);
  color: #062019;
}
.tx-aktion-card__info {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tx-aktion-card__name {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.24em;
}
.tx-aktion-card__name a { color: #FFFFFF !important; text-decoration: none !important; }
.tx-aktion-card__name a:hover { color: var(--tx-mint) !important; }
.tx-aktion-card__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tx-aktion-card__specs li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: baseline;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tx-aktion-card__specs li:last-child { border-bottom: 0; }
.tx-aktion-card__specs .k {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-aktion-card__specs .v { color: #D7DDDC; }
.tx-aktion-card__specs .v b { color: #FFFFFF; font-weight: 700; }

.tx-aktion-card__foot {
  padding: 0;
  border-top: 1px solid var(--tx-line);
  background: rgba(0,0,0,0.25);
}
/* Gestapelt: Preisbalken über volle Breite, CTA darunter (passt in die
   schmaleren vertikalen Karten ohne den Button zu quetschen). */
.tx-aktion-card__pricebar { display: flex; flex-direction: column; }
.tx-aktion-card__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 18px;
  border-left: 3px solid var(--tx-mint);
}
.tx-aktion-card__price .lbl {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin-bottom: 3px;
}
.tx-aktion-card__price .row1 { display: flex; align-items: baseline; gap: 10px; }
.tx-aktion-card__price .now {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.025em;
  color: #FFFFFF;
}
.tx-aktion-card__price .now--ask { font-size: 19px; }
.tx-aktion-card__price .old {
  font-size: 12.5px;
  color: var(--tx-text-mute);
  text-decoration: line-through;
}
/* __btn nutzt bewusst den echten .tx-btn-Clip (oben-rechts + unten-links),
   damit der Button identisch zu allen Shop-Buttons aussieht. Volle Breite,
   da der Fuß jetzt gestapelt ist. */
.tx-aktion-card__btn {
  width: 100%;
  justify-content: center;
  border-top: 1px solid var(--tx-line);
}
.tx-aktion-card__fin {
  display: flex;
  /* Umbruch erlaubt: der Rechtshinweis rechts ist seit 2026-08-04 laenger
     („inkl. MwSt. · zzgl. Versand"). Diese Karte kommt aus einem
     OPC-Portlet und laesst sich im Pruefgeruest nicht rendern — statt zu
     hoffen, dass es passt, darf die Zeile im Zweifel umbrechen. */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #C6D0CE;
}
.tx-aktion-card__fin b { color: var(--tx-mint); font-weight: 700; }

/* auto-fit oben regelt das Umbrechen schon; auf sehr schmalen Screens
   sicherheitshalber strikt einspaltig. */
@media (max-width: 520px) {
  .tx-aktion-grid { grid-template-columns: 1fr; }
}

/* ─── SYSTEM SELECTOR ─────────────────────────────────────────── */
.tx-syssel {
  background: var(--tx-bg);
}
.tx-syssel__head {
  padding: 64px 32px 24px;
  max-width: var(--tx-box);
  margin: 0 auto;
}
.tx-syssel__tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.tx-syssel__tabs::after {
  content: '';
  position: absolute;
  left: 32px; right: 32px; bottom: 0;
  height: 1px;
  background: var(--tx-line);
  pointer-events: none;
}
.tx-syssel__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tx-text-dim);
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  position: relative;
}
.tx-syssel__tab.is-active {
  color: var(--tx-mint);
  border-bottom-color: var(--tx-mint);
}
.tx-syssel__tab.is-active::after {
  content: '';
  position: absolute;
  inset: 0 0 -1px 0;
  background: linear-gradient(to top, rgba(1,222,194,0.08), transparent);
  pointer-events: none;
}
.tx-syssel__tab:hover { color: var(--tx-text); }
.tx-syssel__tab small {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  margin-left: 6px;
  color: var(--tx-text-mute);
}

.tx-syssel__body {
  display: grid;
  grid-template-columns: 320px repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
  padding: 32px;
  max-width: var(--tx-box);
  margin: 0 auto;
  align-items: stretch;
}
.tx-syssel__intro {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.tx-syssel__intro .tx-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tx-danger);
  color: #fff;
  padding: 4px 10px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 20px;
}
.tx-syssel__intro h3 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.tx-syssel__intro p {
  font-family: var(--tx-sub); font-weight: 500;
  color: var(--tx-text-dim);
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}
.tx-syssel__intro ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-family: var(--tx-sub); font-weight: 500;
}
.tx-syssel__intro li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(31,45,45,0.6);
  font-size: 14px;
}
.tx-syssel__intro li::before {
  content: '›';
  color: var(--tx-text-dim);
  font-weight: 700;
}

.tx-syssel-card {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .2s;
  /* Equal-height: child gets stretched by grid auto-rows; min-height fallback */
  min-height: 460px;
}
.tx-syssel-card:hover { border-color: var(--tx-mint); transform: translateY(-3px); }
.tx-syssel-card__media {
  aspect-ratio: 1/1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.15), transparent 70%);
  margin-bottom: 16px;
  overflow: hidden;
}
.tx-syssel-card__media img {
  max-height: 95%;
  max-width: 95%;
  object-fit: contain;
}
.tx-syssel-card__brand {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  /* Lock height to keep cards aligned even when label wraps to 2 lines */
  display: block;
  min-height: 16px;
  line-height: 1.2;
}
.tx-syssel-card h4 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 18px;
  margin: 6px 0 10px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--tx-text);
  /* Lock 2-line height — long names like "AMD RYZEN" wrap don't shift the card */
  line-height: 1.2;
  min-height: calc(2 * 1.2em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-syssel-card__price {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  color: var(--tx-text);
  margin-bottom: 12px;
  min-height: 22px;
}
.tx-syssel-card__price em { font-style: normal; color: var(--tx-text-dim); font-weight: 500; font-size: 13px; margin-right: 4px; }
.tx-syssel-card__cfg {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
/* Stretched link — whole card clickable, CTA stays accessible above */
.tx-syssel-card { position: relative; }
.tx-syssel-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999em;
  overflow: hidden;
}
/* Tab panel toggle */
.tx-syssel__body.is-hidden { display: none; }

/* ─── BUILT DIFFERENT (4 pillars) ─────────────────────────────── */
.tx-builtdiff {
  background: var(--tx-bg);
  position: relative;
  overflow: hidden;
}
.tx-builtdiff__bg {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%231F2528' stroke-width='1'/></svg>");
}
.tx-builtdiff__inner { position: relative; z-index: 1; }
.tx-builtdiff__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.tx-pillar {
  background: rgba(14,17,19,0.92);
  border: 1px solid var(--tx-line-2);
  padding: 28px;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(2px);
}
.tx-pillar__num {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--tx-mint);
}
.tx-pillar__corner {
  position: absolute;
  top: 12px; right: 12px;
  width: 16px; height: 16px;
  border-top: 1px solid var(--tx-mint);
  border-right: 1px solid var(--tx-mint);
}
.tx-pillar__icon {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--tx-mint);
  margin-bottom: 24px;
}
.tx-pillar h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.05;
  color: #fff;
}
[data-theme="light"] .tx-pillar h3 { color: var(--tx-text); }
.tx-pillar h3 em {
  font-style: normal;
  color: var(--tx-mint);
}
.tx-pillar__sub {
  font-family: var(--tx-sub);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tx-mint);
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tx-line-2);
  position: relative;
}
.tx-pillar__sub::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 32px; height: 1px;
  background: var(--tx-mint);
}
.tx-pillar p {
  font-family: var(--tx-sub); font-weight: 500;
  color: var(--tx-text-dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ─── CONFIGURATOR (full-width section) ───────────────────────── */
.tx-config {
  background: var(--tx-bg-2);
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
  padding: 80px 0;
}
.tx-config__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
.tx-config__visual {
  position: sticky;
  top: 100px;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 24px;
}
.tx-config__hero {
  position: relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.22), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.tx-config__hero img { max-height: 100%; max-width: 100%; }
.tx-config__hero-tag {
  position: absolute;
  top: 14px; left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.tx-config__hero-tools {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex;
  gap: 6px;
}
.tx-config__hero-tools button {
  width: 36px; height: 36px;
  border: 1px solid var(--tx-line-2);
  background: rgba(0,0,0,0.5);
  color: var(--tx-text);
}
.tx-config__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.tx-config__thumb {
  aspect-ratio: 1/1;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
}
.tx-config__thumb.is-active { border-color: var(--tx-mint); }
.tx-config__thumb img { max-height: 100%; max-width: 100%; }

.tx-config__details h2 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 16px 0 20px;
  text-transform: uppercase;
}
.tx-config__details h2 em {
  font-style: normal;
  color: var(--tx-mint);
}
.tx-config__crumbs {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tx-config__crumbs em { font-style: normal; color: var(--tx-text); }
.tx-config__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
}
.tx-config__rating .tx-stars { color: var(--tx-mint); letter-spacing: 2px; }
.tx-config__rating em { font-style: normal; color: var(--tx-text); font-weight: 700; }

.tx-config__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  color: var(--tx-text-dim);
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: 24px;
}

.tx-config__buybox {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 28px;
  margin-bottom: 24px;
}
.tx-config__buybox-eyebrow {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin-bottom: 8px;
}
.tx-config__buybox h3 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.tx-config__buybox-base {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  margin-bottom: 16px;
}
.tx-config__buybox-price {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 56px;
  color: var(--tx-mint);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.tx-config__buybox-vat {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  margin-bottom: 22px;
}
.tx-config__buybox .tx-btn { width: 100%; margin-bottom: 8px; }

.tx-config__assurance {
  border-top: 1px solid var(--tx-line);
  padding-top: 18px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
}
.tx-config__assurance > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--tx-text-dim);
}
.tx-config__assurance > div::before {
  content: '✓';
  color: var(--tx-mint);
  font-weight: 700;
}

/* configurator components list */
.tx-config__components {
  margin-top: 48px;
  grid-column: 1 / -1;
}
.tx-config__components-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  margin-bottom: 32px;
}
.tx-config__components-head h3 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.tx-comp-row {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  margin-bottom: 8px;
}
.tx-comp-row__head {
  display: grid;
  grid-template-columns: 60px 1fr auto 36px;
  gap: 20px;
  padding: 16px 20px;
  align-items: center;
  cursor: pointer;
}
.tx-comp-row__icon {
  width: 40px; height: 40px;
  border: 1px solid var(--tx-line-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--tx-mint);
}
.tx-comp-row__title {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-comp-row__title em.req {
  font-style: normal;
  background: var(--tx-mint);
  color: #062019;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 2px 6px;
  font-weight: 800;
}
.tx-comp-row__val {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  color: var(--tx-text);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.tx-comp-row__val small {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 13px;
  color: var(--tx-mint);
  margin-left: 8px;
}
.tx-comp-row__price {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  color: var(--tx-text-dim);
}
.tx-comp-row__price em { font-style: normal; color: var(--tx-mint); }
.tx-comp-row__chev {
  width: 28px; height: 28px;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  display: inline-flex;
  align-items: center; justify-content: center;
}
.tx-comp-row__info {
  border-top: 1px dashed var(--tx-line);
  padding: 12px 20px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tx-comp-row__info::before {
  content: 'INFO';
  font-weight: 700;
  color: var(--tx-mint);
  letter-spacing: 0.2em;
  font-size: 11px;
  padding-right: 12px;
  border-right: 1px solid var(--tx-line);
}

/* delivery / what you get cards */
.tx-config__deliver {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 28px;
}
.tx-config__deliver h3 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.tx-config__deliver-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--tx-line);
}
.tx-config__deliver-item:first-of-type { border-top: 0; }
.tx-config__deliver-item strong {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--tx-mint);
}
.tx-config__deliver-item h4 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  margin: 4px 0 4px;
}
.tx-config__deliver-item p {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  margin: 0;
  line-height: 1.4;
}

/* ─── PARTNER SECTION ─────────────────────────────────────────── */
.tx-partners {
  padding: 88px 0;
  background: var(--tx-bg-3);
}
.tx-partners__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.tx-partner-card {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #16191B 0%, #0B0C0D 100%);
  border: 1px solid var(--tx-line);
  overflow: hidden;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tx-partner-card--feature {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(1,222,194,0.08), transparent 60%),
    linear-gradient(135deg, #181B1D 0%, #0B0C0D 100%);
}
.tx-partner-card__cta {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #ECEFEE;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tx-mint);
  padding-bottom: 4px;
  align-self: flex-start;
}
.tx-partner-card__cta:hover { color: var(--tx-mint); }
.tx-partner-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tx-mint);
  color: #062019;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 10px;
  align-self: flex-start;
}
.tx-partner-card h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 18px 0 8px;
  text-transform: uppercase;
  color: #ECEFEE;
}
.tx-partner-card p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 360px;
  margin: 0 0 20px;
  line-height: 1.45;
}
.tx-partner-card__brand {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.tx-partner-card__brand::before {
  content: '';
  width: 28px; height: 1px;
  background: rgba(255, 255, 255, 0.4);
}
.tx-partner-card__cta {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--tx-mint);
  text-transform: uppercase;
}

.tx-partners__second {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.tx-partner-mini {
  position: relative;
  background: linear-gradient(135deg, #181B1D 0%, #0B0C0D 100%);
  border: 1px solid var(--tx-line);
  padding: 32px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.tx-partner-mini--silent { background: linear-gradient(135deg, #1A1A18 0%, #0B0C0D 100%); }
.tx-partner-mini h4 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #ECEFEE;
}
.tx-partner-mini p {
  font-family: var(--tx-sub);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tx-warn);
  font-weight: 600;
  margin: 0;
}

/* logo row */
.tx-partners--logos-only {
  padding: 64px 0;
  background: var(--tx-bg-3);
}
/* 40 statt 64px: die Logos stehen jetzt in einer Reihe (28px hoch statt
   zweizeilig 104px) — mit dem alten Abstand hing die Überschrift über einem
   fast leeren Block. */
.tx-partners--logos-only .tx-section__head { margin-bottom: 40px; }
.tx-partners--logos-only .tx-section-title { font-size: 32px; }
.tx-partners__logos {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  /* Eine durchgehende Reihe statt Brick-Pattern (5 oben / 4 unten versetzt).
     Flex statt Grid, weil die Wortmarken sehr unterschiedlich breit sind
     (Seitenverhältnisse 3,26 bis 6,14) — gleich breite 1fr-Spalten hätten
     die schmalen Logos aufgeblasen und die breiten gestaucht. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 48px);
}
/* Die Bilder sind selbst die Flex-Kinder und dürfen schrumpfen; mit
   height:auto skalieren sie dabei seitenverhältnistreu mit. */
.tx-partners__logos > * { flex: 0 1 auto; min-width: 0; }
/* Ab Tablet abwärts umbrechen lassen — 9 Logos in einer Reihe wären
   unter ~900px nur noch Briefmarken. */
@media (max-width: 991px) {
  .tx-partners__logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 36px;
  }
}

.tx-partners__logos img {
  max-width: 100%;
  /* Höhe wächst mit dem Viewport mit: die Summe aller Logo-Breiten ist
     rund 40 × Höhe, bei 28px also 1124px — das passt erst in der vollen
     Box (1596px Inhalt). Darunter würde die Reihe sonst auf 0 Abstand
     zusammenlaufen. */
  max-height: clamp(18px, 1.9vw, 28px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logos auf Mono-Weiß zwingen, dezent ausblenden, mint auf Hover */
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.tx-partners__logos img:hover {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(1,222,194,.45));
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .tx-partners--logos-only .tx-section-title { font-size: 24px; }
}

/* ─── SOCIAL PROOF ───────────────────────────────────────────────
   Schmale Bewertungs-Sektion direkt vor dem Footer. Dezent gestaltet:
   3 Cards in einer Row, mint-Sterne, mono-Eyebrow, kein Card-Glow.
   Mobile fällt auf horizontalen Scroll zurück. */
.tx-social-proof {
  background: var(--tx-bg);
  border-top: 1px solid var(--tx-line);
  padding: 56px 0 48px;
}
.tx-social-proof__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tx-social-proof__head h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 8px 0 0;
}
.tx-social-proof__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-social-proof__rating strong {
  color: var(--tx-text);
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.tx-social-proof__rating .tx-social-proof__count {
  color: var(--tx-text-mute);
  font-size: 12px;
}
.tx-social-proof__stars {
  color: var(--tx-mint);
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1;
}

/* Card-Grid — 3 Spalten Desktop, scroll-snap auf Mobile */
.tx-social-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tx-social-proof__card {
  background: var(--tx-bg-2);
  border: 1px solid var(--tx-line);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.tx-social-proof__card .tx-social-proof__stars {
  font-size: 16px;
}
.tx-social-proof__quote {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx-text);
  margin: 0;
  /* 4-Zeilen-Cap damit alle Cards gleich hoch sind */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-social-proof__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--tx-line);
}
.tx-social-proof__author {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-text);
}
.tx-social-proof__source {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-social-proof__disclaimer {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  font-style: italic;
  color: var(--tx-text-mute);
  margin: 18px 0 0;
  text-align: center;
}
.tx-social-proof__widget {
  /* Provider-Embed-Container — kein eigenes Styling, Provider rendert selbst */
  min-height: 80px;
}

@media (max-width: 900px) {
  .tx-social-proof__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tx-social-proof__grid .tx-social-proof__card:nth-child(3) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .tx-social-proof { padding: 40px 0 32px; }
  .tx-social-proof__head h3 { font-size: 22px; }
  .tx-social-proof__grid {
    grid-template-columns: 1fr;
  }
  .tx-social-proof__grid .tx-social-proof__card:nth-child(3) {
    grid-column: auto;
  }
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
.tx-footer {
  background: #050707;
  border-top: 1px solid var(--tx-line);
  padding: 64px 0 32px;
}
/* Footer-Container darf breiter atmen als der globale 1440er — sonst wird
   das Logo + 4 Content-Spalten gequetscht. Nur für Footer scoped. */
.tx-footer .tx-container { max-width: 1680px; }
/* 5-Spalten-Grid: Brand-Spalte fix (passend zum Logo-Asset, sonst clipt
   das 6000×698-PNG bei 56px Höhe), dann 4 gleichbreite Content-Spalten. */
.tx-footer__cols {
  display: grid;
  grid-template-columns: 220px repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
  align-items: start;
}
.tx-footer h5 {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-footer ul { list-style: none; padding: 0; margin: 0; }
.tx-footer li { padding: 6px 0; }
.tx-footer a {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
  text-decoration: none;
  transition: color 120ms ease;
}
.tx-footer a:hover,
.tx-footer a:focus-visible { color: var(--tx-mint); }

/* Logo-Spalte — Logo + Social-Icons gestackt darunter */
.tx-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tx-footer__brand img {
  width: 200px;
  height: auto;
  max-width: 100%;
  display: block;
}
.tx-footer__col { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════
   CSS-WIDERRUFSFORMULAR PLUGIN OVERRIDES (Andreas Petermann · v1.1.3)
   Plugin-Route: /Ruecktrittsformular (kLink 114)
   Bestätigung:  /Ruecktrittsformular-Bestaetigung (kLink 115)
   Pflicht ab §356a BGB (19. Juni 2026, EU-RL 2023/2673).
   Wir scopen die Overrides auf den Plugin-Form-Container damit
   andere Formulare im Shop nicht versehentlich umgestylt werden.
   ═══════════════════════════════════════════════════════════════ */

/* Form-Container — Karte mit Toxic-Borders */
form[name="cssRuecktrittsformular"],
.css-withdrawal-form,
form.jtl-validate:has(input[name="CssWithdrawalForm"]) {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 32px;
  margin: 24px auto;
  max-width: 900px;
}

/* Labels */
form:has(input[name="CssWithdrawalForm"]) label,
form:has(input[name="CssWithdrawalForm"]) .form-label {
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin-bottom: 8px !important;
}

/* Inputs */
form:has(input[name="CssWithdrawalForm"]) .form-control,
form:has(input[name="CssWithdrawalForm"]) input[type="text"],
form:has(input[name="CssWithdrawalForm"]) input[type="email"],
form:has(input[name="CssWithdrawalForm"]) select,
form:has(input[name="CssWithdrawalForm"]) textarea {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line-2) !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: var(--tx-body) !important;
  transition: border-color .15s, background .15s !important;
}
form:has(input[name="CssWithdrawalForm"]) .form-control:hover,
form:has(input[name="CssWithdrawalForm"]) input:hover,
form:has(input[name="CssWithdrawalForm"]) select:hover,
form:has(input[name="CssWithdrawalForm"]) textarea:hover {
  border-color: var(--tx-text-dim) !important;
}
form:has(input[name="CssWithdrawalForm"]) .form-control:focus,
form:has(input[name="CssWithdrawalForm"]) input:focus,
form:has(input[name="CssWithdrawalForm"]) select:focus,
form:has(input[name="CssWithdrawalForm"]) textarea:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-bg-2) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--tx-mint) !important;
}
form:has(input[name="CssWithdrawalForm"]) .form-control::placeholder,
form:has(input[name="CssWithdrawalForm"]) input::placeholder,
form:has(input[name="CssWithdrawalForm"]) textarea::placeholder {
  color: var(--tx-text-mute) !important;
}

/* Required-Indikator */
form:has(input[name="CssWithdrawalForm"]) .css-required,
form:has(input[name="CssWithdrawalForm"]) .text-right small {
  color: var(--tx-text-dim) !important;
  font-family: var(--tx-mono) !important; font-weight: 600;  font-size: 13px !important;
  letter-spacing: 0.13em !important;
}

/* Submit-Button („Widerruf bestätigen") */
form:has(input[name="CssWithdrawalForm"]) button[type="submit"],
form:has(input[name="CssWithdrawalForm"]) .btn-primary,
form:has(input[name="CssWithdrawalForm"]) input[type="submit"] {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
  box-shadow: 0 4px 16px rgba(1,222,194,0.2) !important;
}
form:has(input[name="CssWithdrawalForm"]) button[type="submit"]:hover,
form:has(input[name="CssWithdrawalForm"]) .btn-primary:hover {
  background: var(--tx-mint-2) !important;
  transform: translateY(-1px) !important;
}

/* Error-Messages */
form:has(input[name="CssWithdrawalForm"]) .form-error-msg,
form:has(input[name="CssWithdrawalForm"]) .alert-danger {
  background: rgba(255,85,112,0.08) !important;
  border: 1px solid var(--tx-danger) !important;
  border-radius: 0 !important;
  color: var(--tx-danger) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin-top: 8px !important;
}

/* Button.tpl (B3) — Account-Bestelldetail Widerruf-Button */
.css-withdrawal-button-wrapper {
  margin: 24px 0 !important;
  text-align: left !important;
}
.css-withdrawal-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 12px 22px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}
.css-withdrawal-button:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}
.css-withdrawal-button::after {
  content: '→';
  display: inline-block;
  transition: transform .15s;
}
.css-withdrawal-button:hover::after {
  transform: translateX(3px);
}

/* Honeypot-Input (Anti-Spam) — komplett unsichtbar */
.CssWithdrawalFormInput {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Bestätigungs-Seite (Danke-Seite) */
body[data-page-id="115"] .alert,
body[data-page-id="115"] .alert-success {
  background: rgba(1,222,194,0.08) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  padding: 24px !important;
  font-size: 15px !important;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL TOXIC-FORM-STYLE
   ─────────────────────────────────────────────────────────────────
   Vereinheitlichter Form-Look für ALLE JTL-Formulare (Login, Register,
   Mein-Konto, Checkout, Adressen, Passwort-ändern etc). Bootstrap-
   Default-Styles werden geplättet, alle relevanten JTL-Wrapper auf
   einen einheitlichen Toxic-Look gebracht:
     - dunkle Inputs (var(--tx-bg-3))
     - Mint-Focus-Border
     - lesbare Sans-Serif Labels, Uppercase + 0.12em Letterspacing
     - Mint-Asterisk für Pflichtfelder
     - Floating-Labels deaktiviert (statisch über Input)
     - Keine weißen Backgrounds nirgends
   Wenn neue JTL-Pages mit Formularen dazukommen → einfach Selector
   in der :is()-Liste unten ergänzen, der Rest greift automatisch. *)
   ════════════════════════════════════════════════════════════════ */
/* Selector-Liste als CSS-Variable wäre ideal aber nicht supported.
   Stattdessen jede Regel mit kompletter :is()-Liste. Flat selectors,
   kein CSS-Nesting — kompatibel mit allen Browsern seit ~2021. */

/* Floating-Label-Reset — komplett statisch */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-floating,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-group {
  position: static !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-floating > label,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label.col-form-label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 6px 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  height: auto !important;
  width: auto !important;
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  font-style: normal !important;
}
/* Floating-Label-Animation deaktiviert */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-floating > .form-control:focus ~ label,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-floating > .form-control:not(:placeholder-shown) ~ label,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-floating > .form-select ~ label {
  transform: none !important;
  background: transparent !important;
  padding: 0 0 6px 0 !important;
  opacity: 1 !important;
  height: auto !important;
}
/* Inputs / Selects / Textareas */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-control,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input[type="text"],
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input[type="email"],
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input[type="password"],
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input[type="tel"],
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input[type="number"],
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) select,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) textarea {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: var(--tx-body) !important;
  box-shadow: none !important;
  transition: border-color .15s, background .15s !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-control:focus,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input:focus,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) select:focus,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) textarea:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
  box-shadow: none !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-control::placeholder,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) input::placeholder,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) textarea::placeholder {
  color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
/* Required-Asterisk Mint + ohne Background-Block */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .text-danger,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label .text-danger {
  color: var(--tx-mint) !important;
  background: transparent !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label::after,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label::before {
  background: transparent !important;
}
/* Optional-Suffix dezent */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label .optional {
  color: var(--tx-text-mute) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}
/* Bootstrap-Input-Group-Icons (fa-user/fa-lock) und FontAwesome-Icons
   in Labels entfernen — die kleinen Person-/Schlüssel-Glyphen sehen
   auf dem Toxic-Theme aus wie Render-Bugs. Asterisk bleibt sichtbar. */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .input-group-prepend,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .input-group-append,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label > i.fa,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label > i.fas,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) label > i[class*="fa-"] {
  display: none !important;
}
/* Login-Card-Wrapper (gleiche Optik wie Register-Card) */
#login_form {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  padding: 32px !important;
  margin: 24px 0 !important;
}
/* Section-Helpers + Legends */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .h3,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) h3,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .h2,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) h2 {
  color: var(--tx-text) !important;
  font-family: var(--tx-h) !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) legend {
  font-family: var(--tx-h) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 0 24px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--tx-line) !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .required-info {
  color: var(--tx-text-dim) !important;
  font-size: 13px !important;
  font-family: var(--tx-mono) !important; font-weight: 600;  letter-spacing: 0.13em !important;
  margin-bottom: 14px !important;
}
/* Buttons */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-primary,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) button[type="submit"] {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: background .15s, transform .15s !important;
  box-shadow: none !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-primary:hover,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) button[type="submit"]:hover {
  background: var(--tx-mint-2) !important;
  transform: translateY(-1px) !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-outline-primary,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-dark,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-secondary {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-outline-primary:hover,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-dark:hover,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .btn-secondary:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}
/* Links + Errors + Checkboxes */
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) a {
  color: var(--tx-mint);
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .invalid-feedback,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-error-msg {
  color: var(--tx-danger) !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .alert-danger {
  background: rgba(255,85,112,0.08) !important;
  border: 1px solid var(--tx-danger) !important;
  color: var(--tx-danger) !important;
  border-radius: 0 !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .custom-control-label,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-check-label {
  font-size: 13px !important;
  color: var(--tx-text-dim) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .custom-control-input:checked ~ .custom-control-label::before,
:is(#new_customer, #login_form, .login-form, .account-login, .account-content, .inc-billing-address-form, .register-form-account, .checkout-step-form, .change-password-form, .password-reset-form) .form-check-input:checked {
  background: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
}

/* ════════════════════════════════════════════════════════════════
   CHECKOUT / BESTELLVORGANG — Toxic-Dark-Style
   ────────────────────────────────────────────────────────────────
   NOVA's _stepper.scss nutzt $gray-lighter BG + $primary (Yellow)
   für aktive Steps + Bootstrap-Custom-Radio mit Yellow-Dots.
   Hier komplett auf Toxic-Dark + Mint umgestylt. data-page="11"
   = PAGE_BESTELLVORGANG.
   ════════════════════════════════════════════════════════════════ */

/* Stepper Container — dunkel statt gray-lighter */
.stepper,
.stepper.checkout-steps {
  background: var(--tx-bg-2) !important;
  border: 1px solid var(--tx-line) !important;
  margin: 0 0 40px 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Step Items */
.stepper .step {
  position: relative;
}
.stepper .step .step-content {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 46px !important;
  padding: 8px 0 !important;
}
.stepper .step a,
.stepper .step a:hover {
  text-decoration: none !important;
}

/* Arrow-Pseudo-Elements (die Pfeil-Spitzen zwischen Steps) — Toxic-dark */
.stepper .step::before,
.stepper .step::after {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 50px solid transparent !important;
  border-bottom: 50px solid transparent !important;
  position: absolute !important;
  top: 50% !important;
  margin-top: -50px !important;
  left: 100% !important;
  content: ' ' !important;
}
/* ::before = Trennlinie (hinten, Toxic-Line) */
.stepper .step::before {
  border-left: 30px solid var(--tx-line) !important;
  z-index: 1 !important;
  margin-left: -13px !important;
}
/* ::after = Step-BG-Farbe als Pfeil (vorne) */
.stepper .step::after {
  border-left: 30px solid var(--tx-bg-2) !important;
  z-index: 2 !important;
  margin-left: -15px !important;
}
/* Last step kein Pfeil */
.stepper .step:last-child::before,
.stepper .step:last-child::after {
  display: none !important;
}

/* Active Step BG → Toxic-Card heller als der Container für sichtbaren Kontrast */
.stepper .step-active {
  background: var(--tx-card) !important;
}
.stepper .step-active::after {
  border-left-color: var(--tx-card) !important;
}

/* Bottom-Bar unter aktivem Step (NOVA hat das als 2px primary, hier mint) */
.stepper .step-active .step-content::after {
  content: '' !important;
  position: absolute !important;
  height: 2px !important;
  bottom: 0 !important;
  left: -15px !important;
  right: -15px !important;
  background: var(--tx-mint) !important;
  z-index: 11 !important;
}

/* Badge/Kreise mit den Zahlen */
.stepper .badge,
.stepper .badge-pill {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text-mute) !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}
.stepper .badge-count {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Active Badge → Mint */
.stepper .step-active .badge,
.stepper .step-active .badge-pill,
.stepper .step-active .badge-primary {
  background: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
  color: #062019 !important;
}
.stepper .step-current .badge,
.stepper .step-current .badge-pill {
  box-shadow: 0 0 0 4px rgba(1,222,194,0.18) !important;
}

/* Step Text */
.stepper .step-text {
  font-family: var(--tx-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--tx-text-mute) !important;
}
.stepper .step-active .step-text {
  color: var(--tx-text) !important;
}
.stepper .step-current .step-text {
  color: var(--tx-mint) !important;
}

/* Step-Check (Häkchen) */
.stepper .step-check {
  color: var(--tx-mint) !important;
  font-size: 16px !important;
  margin-left: 6px !important;
}

/* Mobile: Stepper kompakt */
@media (max-width: 880px) {
  .stepper .step::before,
  .stepper .step::after { display: none !important; }
  .stepper .step .step-content { gap: 8px !important; }
  .stepper .badge,
  .stepper .badge-pill { width: 24px !important; height: 24px !important; font-size: 12px !important; }
}

/* Page H1 „Versand- und Zahlungsart" + alle Checkout-Headings */
body[data-page="11"] h1,
body[data-page="11"] .h1,
body[data-page="11"] h2,
body[data-page="11"] .h2,
body[data-page="11"] h3,
body[data-page="11"] .h3,
.checkout-step-form h1,
.checkout-step-form h2,
.checkout-step-form h3,
.checkout-step-form .h1,
.checkout-step-form .h2,
.checkout-step-form .h3 {
  color: var(--tx-text) !important;
  font-family: var(--tx-h) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
body[data-page="11"] h1,
body[data-page="11"] .h1 {
  font-size: 36px !important;
  margin-bottom: 32px !important;
}
body[data-page="11"] h2,
body[data-page="11"] .h2 {
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  margin: 28px 0 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--tx-line) !important;
}

/* Bootstrap Custom-Radio (yellow dots) — Mint */
body[data-page="11"] .custom-radio .custom-control-label::before,
body[data-page="11"] .custom-control-label::before,
.checkout-step-form .custom-radio .custom-control-label::before,
.checkout-step-form .custom-control-label::before {
  background: var(--tx-bg-3) !important;
  border: 2px solid var(--tx-line-2) !important;
}
body[data-page="11"] .custom-control-input:checked ~ .custom-control-label::before,
.checkout-step-form .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--tx-bg-3) !important;
  border-color: var(--tx-mint) !important;
  box-shadow: none !important;
}
/* The selected dot inside the circle */
body[data-page="11"] .custom-radio .custom-control-input:checked ~ .custom-control-label::after,
.checkout-step-form .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background: var(--tx-mint) !important;
  background-image: none !important;
  border-radius: 50% !important;
  width: 8px !important;
  height: 8px !important;
  top: 8px !important;
  left: -20px !important;
}
body[data-page="11"] .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px rgba(1,222,194,0.3) !important;
}

/* Custom-Radio Yellow-Dot kompletter Override: alle möglichen
   Bootstrap-Custom-Radio-Konstellationen + JTL Radio-Macro */
body[data-page="11"] label::before,
body[data-page="11"] .form-check-input,
body[data-page="11"] .custom-control-input,
.checkout-payment-method label::before,
.checkout-payment-method .form-check-input,
.checkout-shipping-method label::before {
  background-color: var(--tx-bg-3) !important;
  border-color: var(--tx-line-2) !important;
}
body[data-page="11"] input[type="radio"]:checked + label::before,
body[data-page="11"] .custom-control-input:checked ~ .custom-control-label::before,
body[data-page="11"] .form-check-input:checked,
.checkout-payment-method input[type="radio"]:checked + label::before,
.checkout-payment-method input[type="radio"]:checked ~ label::before {
  background-color: var(--tx-bg-3) !important;
  border-color: var(--tx-mint) !important;
  box-shadow: none !important;
}
/* Inner-Dot (Mint statt yellow) */
body[data-page="11"] input[type="radio"]:checked + label::after,
body[data-page="11"] .custom-control-input:checked ~ .custom-control-label::after,
.checkout-payment-method input[type="radio"]:checked + label::after,
.checkout-payment-method input[type="radio"]:checked ~ label::after {
  background-image: radial-gradient(circle, var(--tx-mint) 40%, transparent 50%) !important;
  background-color: transparent !important;
}
/* Native input[type="radio"] (accent-color für moderne Browser) */
body[data-page="11"] input[type="radio"],
.checkout-payment-method input[type="radio"],
.checkout-shipping-method input[type="radio"] {
  accent-color: var(--tx-mint) !important;
}

/* ─── CHECKOUT · Zahlungsart-Kacheln ──────────────────────────────
   Jedes Logo in einen gleich großen weißen Chip (object-fit:contain →
   nichts abgeschnitten). Jede Option = Kachel mit Mint-Highlight bei
   Auswahl. BEWUSST minimal-invasiv: NICHT .custom-control/Label auf Flex
   stellen — das blies mit den ausklappbaren PayPal-SDK-Containern die
   Karten auf. Nur Chip + Abstände stylen. */
.checkout-payment-method {
  border: 1px solid var(--tx-line);
  border-radius: 10px;
  padding: 13px 18px;
  margin-bottom: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.checkout-payment-method:hover { border-color: var(--tx-line-2); }
.checkout-payment-method:has(input[type="radio"]:checked) {
  border-color: var(--tx-mint);
  background: var(--tx-mint-soft);
}
/* Logo-Chip — gleich großer weißer Rahmen für alle Raster-Logos */
.checkout-payment-method :is(img, .img-sm),
.checkout-payment-method picture img {
  height: 34px !important;
  width: auto !important;
  max-width: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 7px;
  padding: 5px 9px;
  box-sizing: border-box;
  vertical-align: middle;
  margin: 0 14px 0 8px;       /* "PayPal weiter weg vom Logo": rechts mehr Abstand */
}
/* Name/Text */
.checkout-payment-method :is(.title, .content) {
  color: var(--tx-text);
  font-weight: 600;
  vertical-align: middle;
}
.checkout-payment-method-badge { color: var(--tx-mint) !important; }
.checkout-payment-method-note small { color: var(--tx-text-dim) !important; }
/* AUSNAHME: PayPal-"Später bezahlen" (WEISSES Logo) auf PayPal-Blau,
   nur paylater treffen — SEPA/Karte bleiben weiß. */
.checkout-payment-method [id*="paylater" i] :is(img, .paypal-mark),
.checkout-payment-method [class*="paylater" i] :is(img, .paypal-mark),
.checkout-payment-method img[alt*="later" i],
.checkout-payment-method img[src*="paylater" i] {
  background: #0070ba !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}
/* Schritt 1 (DevTools-bestätigt): Der sichtbare Kreis ist
   label.custom-control-label::before und ein FLEX-Element → das Label ist
   bereits display:flex, der Kreis hing als Flex-Item oben. Lösung: nur
   align-items:center am Label. KEIN width/flex-wrap/min-height/display →
   bläht nichts auf (der ausklappbare Fields-Container ist ein Sibling). */
.checkout-payment-method .custom-control-label {
  align-items: center !important;
}
/* Schritt 2: Abstand Logo ↔ Name (PayPal-Funding-Name war nur ml-1 = 4px). */
.checkout-payment-method .funding-name { margin-left: 14px !important; }

/* "Warenkorb ändern" und andere Outline-Buttons mit Yellow-Border */
body[data-page="11"] .btn-outline-warning,
body[data-page="11"] .btn-warning,
body[data-page="11"] a.btn-warning,
body[data-page="11"] a.btn-outline-warning,
body[data-page="11"] [class*="btn-"][class*="warning"],
.checkout-step-form .btn-warning,
.checkout-step-form .btn-outline-warning {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
body[data-page="11"] .btn-outline-warning:hover,
body[data-page="11"] .btn-warning:hover,
.checkout-step-form .btn-warning:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}

/* "ÄNDERN"-Button am Ende der Zusammenfassung (Warenkorb-Ändern Action)
   — JTL rendert das oft als großen Block-Button. War weiß mit Mint-
   Text, jetzt transparent mit Mint-Outline. */
body[data-page="11"] .btn-block,
body[data-page="11"] .checkout-confirmation-edit,
body[data-page="11"] a[href*="editCart"],
body[data-page="11"] a[href*="editBestellvorgang"] {
  background: transparent !important;
  color: var(--tx-mint) !important;
}

/* Datenschutz-Checkbox auf Zusammenfassung-Page — Checkbox war ganz
   links angeklatscht, Text in der Mitte. Jetzt: Checkbox + Text als
   Pärchen, Box bleibt full-width aber Inhalt zentriert mit max-width. */
body:has(.stepper.checkout-steps) .checkboxes-area,
body:has(.stepper.checkout-steps) .form-group.checkbox {
  max-width: 720px !important;
  margin: 20px auto !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: rgba(1,222,194,0.04) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
}
body:has(.stepper.checkout-steps) .checkboxes-area input[type="checkbox"],
body:has(.stepper.checkout-steps) .form-group.checkbox input[type="checkbox"] {
  flex-shrink: 0 !important;
  accent-color: var(--tx-mint) !important;
  width: 18px !important;
  height: 18px !important;
}
body:has(.stepper.checkout-steps) .checkboxes-area label,
body:has(.stepper.checkout-steps) .form-group.checkbox label {
  flex: 0 1 auto !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 600px !important;
}

/* "Ändern"-Pencil-Links in Card-Headers + bottom Action-Row */
body[data-page="11"] .card-header a[href*="editVersandart"],
body[data-page="11"] .card-header a[href*="editLieferadresse"],
body[data-page="11"] .card-header a[href*="editRechnungsadresse"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* BULLETPROOF-FIX: Statt data-page-Selector der nicht immer matched,
   via body:has(.stepper.checkout-steps) scopen — greift auf jeder
   Checkout-Stage egal welche page-id. Plus zusätzliche Top-Level-
   Selectors mit hoher Spezifität. */
body:has(.stepper.checkout-steps) h1,
body:has(.stepper.checkout-steps) h2,
body:has(.stepper.checkout-steps) h3,
body:has(.stepper.checkout-steps) .h1,
body:has(.stepper.checkout-steps) .h2,
body:has(.stepper.checkout-steps) .h3,
body:has(.stepper.checkout-steps) main h1,
body:has(.stepper.checkout-steps) main h2,
body:has(.stepper.checkout-steps) main h3,
.checkout-step-form h1,
.checkout-step-form h2,
.checkout-step-form h3 {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Textareas im Checkout (Kommentar) — bulletproof via body:has */
body:has(.stepper.checkout-steps) textarea,
body:has(.stepper.checkout-steps) textarea[name="kommentar"],
body:has(.stepper.checkout-steps) .form-control[type="textarea"] {
  background: var(--tx-bg-3) !important;
  background-color: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-family: var(--tx-body) !important;
  font-size: 14px !important;
  min-height: 100px !important;
}
body:has(.stepper.checkout-steps) textarea::placeholder {
  color: var(--tx-text-mute) !important;
}

/* Cards/Card-Headers im gesamten Checkout */
body:has(.stepper.checkout-steps) .card {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
}
body:has(.stepper.checkout-steps) .card-header {
  background: var(--tx-bg-2) !important;
  border-bottom: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  font-family: var(--tx-h) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  color: var(--tx-text) !important;
}
body:has(.stepper.checkout-steps) .card-body {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
}

/* "ÄNDERN" Button + Outline-Buttons bulletproof */
body:has(.stepper.checkout-steps) .btn-outline-primary,
body:has(.stepper.checkout-steps) .btn-outline-warning,
body:has(.stepper.checkout-steps) .btn-link {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
}
body:has(.stepper.checkout-steps) .btn-outline-primary:hover,
body:has(.stepper.checkout-steps) .btn-outline-warning:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}

/* Kommentar-Textarea ZUSAMMENFASSUNG — JTL rendert <textarea name="kommentar">
   im step5_confirmation.tpl. War immer noch weiß weil mein .card-body
   textarea Selektor zu eng war. */
body[data-page="11"] textarea,
body[data-page="11"] textarea[name="kommentar"],
body[data-page="11"] .card textarea,
body[data-page="11"] .form-control[type="textarea"] {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  padding: 12px 14px !important;
  font-family: var(--tx-body) !important;
  font-size: 14px !important;
  min-height: 100px !important;
}
body[data-page="11"] textarea::placeholder,
body[data-page="11"] textarea[name="kommentar"]::placeholder {
  color: var(--tx-text-mute) !important;
}

/* "ÄNDERN"-Button bottom-right (Warenkorb-ändern Action) — war weiß.
   JTL rendert das als <a href="...editWarenkorb..."> typischerweise. */
body[data-page="11"] a[href*="editWarenkorb"],
body[data-page="11"] a[href*="editCart"],
body[data-page="11"] .btn-link.btn-outline-primary,
body[data-page="11"] .checkout-edit-cart {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
body[data-page="11"] a[href*="editWarenkorb"]:hover,
body[data-page="11"] a[href*="editCart"]:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}

/* Datenschutz-Checkbox Layout auf Zusammenfassung — schmaler + zentriert */
body[data-page="11"] .checkboxes-area,
body[data-page="11"] .form-group.checkbox {
  max-width: 800px !important;
  margin: 16px auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 24px !important;
}
body[data-page="11"] .checkboxes-area input[type="checkbox"],
body[data-page="11"] .form-group.checkbox input[type="checkbox"] {
  flex-shrink: 0 !important;
}
body[data-page="11"] .checkboxes-area label,
body[data-page="11"] .form-group.checkbox label {
  flex: 1 !important;
  max-width: none !important;
}

/* AGGRESSIVE Yellow-Radio Override — ALLE Radio-Renderings im Checkout
   (Versand + Zahlung) via body:has() scope. Custom-radio + native */
body:has(.stepper.checkout-steps) .custom-radio .custom-control-input:checked ~ .custom-control-label::after,
body:has(.stepper.checkout-steps) .checkout-shipping-form-options-radio + .custom-control-label::after,
body:has(.stepper.checkout-steps) input[name="Versandart"]:checked + label::after,
body:has(.stepper.checkout-steps) input[name="Versandart"]:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2310E0B4'/%3E%3C/svg%3E") !important;
  background-color: transparent !important;
}
/* Outer ring Border-Color für Versandart-Radio */
body:has(.stepper.checkout-steps) input[name="Versandart"]:checked ~ .custom-control-label::before,
body:has(.stepper.checkout-steps) .checkout-shipping-form-options-radio:checked ~ .custom-control-label::before {
  background-color: var(--tx-bg-3) !important;
  border-color: var(--tx-mint) !important;
}
body:has(.stepper.checkout-steps) input[name="Versandart"] ~ .custom-control-label::before {
  background-color: var(--tx-bg-3) !important;
  border-color: var(--tx-line-2) !important;
}

/* USt./Preis-Tabelle ganz unten in Zusammenfassung — saubere
   Tabellen-Optik mit Border zwischen Rows */
body[data-page="11"] table.table tbody tr td {
  border-bottom: 1px solid var(--tx-line) !important;
  border-top: 0 !important;
  vertical-align: middle !important;
}
body[data-page="11"] table.table tbody tr:last-child td {
  border-bottom: 0 !important;
}
/* Summen-Zeilen (USt., Gesamtsumme) — rechtsbündig, prominent */
body[data-page="11"] .checkout-summary-totals,
body[data-page="11"] .totals-row,
body[data-page="11"] tr.subtotal,
body[data-page="11"] tr.total {
  text-align: right !important;
}
body[data-page="11"] strong:has-text("Gesamtsumme"),
body[data-page="11"] tr td:has(strong:contains("Gesamtsumme")) {
  font-size: 18px !important;
  color: var(--tx-mint) !important;
}

/* ─── Zusammenfassung-Page (Step 3) — Toxic-Dark-Cards ────────────
   JTL rendert Step 3 mit weißen Bootstrap-Cards (Rechnungsadresse,
   Versand/Zahlungsart, Kommentar, Bestellpositionen). Hier alles auf
   Toxic-Dark mit Mint-Top-Border umgestylt. */

body[data-page="11"] .card,
body[data-page="11"] .card-deck .card,
body[data-page="11"] section .card,
.checkout-confirmation .card,
.confirm .card,
.bestellabschluss .card {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

body[data-page="11"] .card-header,
.checkout-confirmation .card-header {
  background: var(--tx-bg-2) !important;
  border-bottom: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  padding: 16px 22px !important;
  font-family: var(--tx-h) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
}
body[data-page="11"] .card-header a,
.checkout-confirmation .card-header a {
  color: var(--tx-mint) !important;
  text-decoration: none !important;
  font-family: var(--tx-mono) !important; font-weight: 600;  font-size: 13px !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
}
body[data-page="11"] .card-header a:hover {
  color: var(--tx-mint-2) !important;
  text-decoration: underline !important;
}

body[data-page="11"] .card-body,
.checkout-confirmation .card-body {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  padding: 22px !important;
}

/* Address Card Inhalte ("Rechnungsadresse" / "Lieferadresse" Sub-Titles) */
body[data-page="11"] .card-body strong,
body[data-page="11"] .card-body b,
body[data-page="11"] .card-body .font-weight-bold {
  color: var(--tx-text) !important;
  font-family: var(--tx-body) !important;
  font-weight: 700 !important;
}
body[data-page="11"] .card-body p,
body[data-page="11"] .card-body div,
body[data-page="11"] .card-body span,
body[data-page="11"] .card-body td {
  color: var(--tx-text) !important;
}
body[data-page="11"] .card-body .text-muted {
  color: var(--tx-text-dim) !important;
}

/* Bestellpositionen-Tabelle (Artikel-Liste am Ende) */
body[data-page="11"] table,
body[data-page="11"] .table {
  background: transparent !important;
  color: var(--tx-text) !important;
  margin-bottom: 0 !important;
}
body[data-page="11"] table thead,
body[data-page="11"] .table thead {
  background: var(--tx-bg-2) !important;
}
body[data-page="11"] table thead th,
body[data-page="11"] .table thead th {
  background: var(--tx-bg-2) !important;
  color: var(--tx-text) !important;
  border-bottom: 2px solid var(--tx-mint) !important;
  border-top: 0 !important;
  font-family: var(--tx-sub) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 14px !important;
}
body[data-page="11"] table tbody td,
body[data-page="11"] .table tbody td {
  background: transparent !important;
  color: var(--tx-text) !important;
  border-color: var(--tx-line) !important;
  padding: 14px !important;
}
body[data-page="11"] .table-hover tbody tr:hover {
  background: rgba(1,222,194,0.04) !important;
}
body[data-page="11"] .table-hover tbody tr:hover td {
  background: transparent !important;
}
/* Total-Row mit Mint-Akzent */
body[data-page="11"] tfoot tr,
body[data-page="11"] .total-row,
body[data-page="11"] .checkout-summary-total {
  background: rgba(1,222,194,0.06) !important;
  border-top: 2px solid var(--tx-mint) !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--tx-mint) !important;
}
body[data-page="11"] tfoot td {
  color: var(--tx-text) !important;
  font-weight: 700 !important;
}

/* Kommentar-Textarea Card */
body[data-page="11"] .card-body textarea {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  min-height: 100px !important;
}

/* AGB / Widerrufsrecht Info-Text */
body[data-page="11"] p.text-muted,
body[data-page="11"] .agb-info,
body[data-page="11"] .checkout-agb {
  color: var(--tx-text-dim) !important;
  font-size: 13px !important;
  margin: 16px 0 !important;
}
body[data-page="11"] p.text-muted a,
body[data-page="11"] .agb-info a {
  color: var(--tx-mint) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* "Ändern" Pencil-Icon-Buttons rechts in Card-Header */
body[data-page="11"] .card-header .btn,
body[data-page="11"] .card-header .pencil,
body[data-page="11"] .card-header [class*="fa-"] {
  color: var(--tx-mint) !important;
}

/* "Versand nach: ..." Adress-Zeile + edit link */
.checkout-step-form .shipping-address-info,
.checkout-step-form .address-info {
  color: var(--tx-text) !important;
  margin-bottom: 20px !important;
}
.checkout-step-form .shipping-address-info a,
.checkout-step-form .address-info a {
  color: var(--tx-mint) !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

/* Versand- + Zahlungsart Cards/Items */
.versandart-option,
.zahlungsart-option,
.checkout-step-form .form-check,
.checkout-step-form .custom-radio,
.checkout-step-form .form-group:has(input[type="radio"]) {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  transition: border-color .15s, background .15s !important;
  cursor: pointer !important;
}
.versandart-option:hover,
.zahlungsart-option:hover,
.checkout-step-form .form-check:hover,
.checkout-step-form .custom-radio:hover {
  border-color: var(--tx-mint) !important;
  background: rgba(1,222,194,0.04) !important;
}
.checkout-step-form .form-check:has(input:checked),
.checkout-step-form .custom-radio:has(input:checked) {
  border-color: var(--tx-mint) !important;
  background: rgba(1,222,194,0.06) !important;
}

/* Radio Buttons selber */
.checkout-step-form input[type="radio"] {
  accent-color: var(--tx-mint) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Radio Labels */
.checkout-step-form .form-check-label,
.checkout-step-form .custom-radio label,
.checkout-step-form .form-check label {
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--tx-text) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex: 1 !important;
}

/* Beschreibungs-Text unter Radio (z.B. „Es fällt ein zusätzliches...") */
.versandart-option .description,
.zahlungsart-option .description,
.checkout-step-form .form-check .small,
.checkout-step-form .form-check small,
.checkout-step-form .text-muted {
  color: var(--tx-text-dim) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
  width: 100% !important;
  padding-left: 34px !important; /* aligned mit Label */
}

/* Lieferzeit-Tag (z.B. „2-3 Werktage") */
.checkout-step-form .delivery-time,
.checkout-step-form .form-check .text-nowrap {
  color: var(--tx-text-dim) !important;
  font-size: 13px !important;
}

/* Preis-Tag (z.B. „4,20 €") */
.checkout-step-form .price,
.checkout-step-form .shipping-cost,
.checkout-step-form .form-check .ml-auto-util {
  color: var(--tx-mint) !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-left: auto !important;
}

/* Back / Weiter Button Row */
.checkout-step-form .navigation-row,
.checkout-step-form .checkout-button-row,
.checkout-step-form .row:has(button[type="submit"]) {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--tx-line) !important;
}

/* Zurück-Button (left, outline) */
.checkout-step-form .btn-back,
.checkout-step-form a.btn-secondary,
.checkout-step-form a.btn-outline-primary {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.checkout-step-form .btn-back:hover,
.checkout-step-form a.btn-secondary:hover,
.checkout-step-form a.btn-outline-primary:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}

/* ════════════════════════════════════════════════════════════════
   KUNDENKONTO-DASHBOARD (Mein Konto) — Toxic-Dark-Style
   ────────────────────────────────────────────────────────────────
   JTL rendert das Dashboard (my_account.tpl) mit Bootstrap-Cards
   in Stock-weiß. Hier alle Card-Strukturen + Tabellen + Sektionen
   auf Toxic-Dark umgestylt. Wrapper-Klassen: .account-head-data,
   .account-data-item, .account-head-data-credit + Bootstrap .card.
   ════════════════════════════════════════════════════════════════ */

/* Welcome H1 „Willkommen Marcel Lache" — body hat data-page="4"
   (PAGE_MEINKONTO=4 in JTL-Konstanten). JTL rendert h1 direkt im
   account-my-account-Block. */
body[data-page="4"] h1,
body[data-page="4"] .container > h1,
body#Mein-Konto h1,
body[id*="konto"] h1,
body[id*="Konto"] h1,
h1:has(+ .account-head-data) {
  color: var(--tx-text) !important;
  font-family: var(--tx-h) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
  opacity: 1 !important;
}

/* Beschreibungs-Text unter Welcome */
.account-head-data {
  margin-bottom: 32px !important;
}
.account-head-data .col,
.account-head-data > div {
  color: var(--tx-text-dim) !important;
}

/* Guthaben-Card (war Bootstrap-Yellow-Border) */
.account-head-data-credit,
.account-head-data .card {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Sektion-Cards (Daten, Bestellungen, Wunschzettel, Vergleichsliste) */
.account-data-item,
.account-data-item-address,
.account-data-item-orders,
.account-data-item-wishlist,
.account-data-item-comparelist,
.account-data-item-rma,
.account-data-shipping-address {
  margin-bottom: 24px !important;
}
.account-data-item .card,
.account-data-shipping-address .card {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  overflow: hidden;
}
.account-data-item .card-header,
.account-data-shipping-address .card-header {
  background: var(--tx-bg-2) !important;
  border-bottom: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  padding: 16px 22px !important;
  color: var(--tx-text) !important;
}
.account-data-item .card-header h2,
.account-data-item .card-header .h2,
.account-data-item .card-header h3,
.account-data-item .card-header .h3 {
  font-family: var(--tx-h) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 !important;
}
.account-data-item .card-header a,
.account-data-shipping-address .card-header a {
  color: var(--tx-mint) !important;
  text-decoration: none !important;
  font-family: var(--tx-mono) !important; font-weight: 600;  font-size: 13px !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
}
.account-data-item .card-header a:hover {
  color: var(--tx-mint-2) !important;
  text-decoration: underline !important;
}
.account-data-item .card-body,
.account-data-shipping-address .card-body {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  padding: 22px !important;
}
.account-data-item .table,
.account-data-shipping-address .table {
  color: var(--tx-text) !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}
.account-data-item .table td,
.account-data-item .table th {
  background: transparent !important;
  border-color: var(--tx-line) !important;
  color: var(--tx-text) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
}
.account-data-item .table-hover tbody tr:hover {
  background: rgba(1,222,194,0.04) !important;
}
.account-data-item .table-hover tbody tr:hover td {
  background: transparent !important;
}

/* „Sie haben noch keine..." Empty-State-Text */
.account-data-item .card-body p,
.account-data-item .card-body .empty,
.account-data-shipping-address .card-body p {
  color: var(--tx-text-dim) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* Edit-Pencil-Icons in den Datentabellen */
.account-data-item .table .fa,
.account-data-item .table .fas,
.account-data-item .table i[class*="fa-"] {
  color: var(--tx-mint) !important;
  opacity: 0.7;
  transition: opacity .15s;
}
.account-data-item .table tr:hover .fa,
.account-data-item .table tr:hover i[class*="fa-"] {
  opacity: 1;
}
.account-data-item .table a {
  color: var(--tx-text) !important;
  text-decoration: none !important;
}
.account-data-item .table a:hover {
  color: var(--tx-mint) !important;
}

/* „Neue Lieferadresse erstellen" Button + andere CTA-Buttons in Cards */
.account-data-item .btn,
.account-data-shipping-address .btn,
.btn-icon {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  font-family: var(--tx-sub) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.account-data-item .btn:hover,
.account-data-shipping-address .btn:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}

/* „Kundenkonto löschen" und „Abmelden" Bottom-Buttons */
.account-content .btn-danger,
.account-content .btn-outline-danger {
  background: transparent !important;
  color: var(--tx-danger) !important;
  border: 1px solid var(--tx-danger) !important;
  border-radius: 0 !important;
  padding: 12px 22px !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.account-content .btn-danger:hover,
.account-content .btn-outline-danger:hover {
  background: var(--tx-danger) !important;
  color: var(--tx-text) !important;
}

/* Success-Alert „Ihr Kundenkonto wurde erstellt" */
.alert-success,
.alert.alert-success {
  background: rgba(1,222,194,0.08) !important;
  border: 1px solid var(--tx-mint) !important;
  border-left: 3px solid var(--tx-mint) !important;
  color: var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════
   REGISTRIERUNG · Strukturelle Verbesserungen
   ────────────────────────────────────────────────────────────────
   1. Passwörter untereinander statt nebeneinander (col-md-6 → full)
   2. Größere Abstände zwischen Sections (Name / Rechnung / Kontakt)
   3. Sectionen mit Trennlinien zur visuellen Hierarchie
   4. Submit-Button am Ende rechts ausgerichtet mit Min-Width
   ════════════════════════════════════════════════════════════════ */

/* Passwort-Felder: parent col-md-6 auf volle Breite (untereinander) */
.col-md-6:has(.register-form-account-password),
.col-md-6:has(.register-form-account-password-repeat),
.col-md-6:has(#password),
.col-md-6:has(#password2) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-bottom: 16px !important;
}

/* Passwort-Felder: JTL rendert je nach Block Input-zuerst oder Label-
   zuerst (inkonsistent). Wir erzwingen via flex + order dass Label
   IMMER oben und Input IMMER unten ist — unabhängig von der DOM-Order. */
.register-form-account-password,
.register-form-account-password-repeat,
.form-group.register-form-account-password,
.form-group.register-form-account-password-repeat {
  display: flex !important;
  flex-direction: column !important;
}
.register-form-account-password > label,
.register-form-account-password-repeat > label,
.form-group.register-form-account-password > label,
.form-group.register-form-account-password-repeat > label {
  order: 1 !important;
  margin: 0 0 6px 0 !important;
}
.register-form-account-password > input,
.register-form-account-password-repeat > input,
.form-group.register-form-account-password > input,
.form-group.register-form-account-password-repeat > input,
.register-form-account-password > .form-control,
.register-form-account-password-repeat > .form-control {
  order: 2 !important;
}
.register-form-account-password > .form-error-msg,
.register-form-account-password-repeat > .form-error-msg {
  order: 3 !important;
}

/* Section-Spacing innerhalb der Register-Form
   (jede Section = Name / Rechnungsadresse / Kontaktdaten / Login-Daten) */
.inc-billing-address-form > .form-row,
.inc-billing-address-form .formrow,
#new_customer .form-row,
#new_customer .formrow {
  margin-bottom: 12px;
}

/* Section-Divider: <hr> zwischen den Bereichen */
#new_customer hr,
.inc-billing-address-form hr {
  border: 0 !important;
  border-top: 1px solid var(--tx-line) !important;
  margin: 32px 0 24px !important;
  opacity: 1 !important;
}

/* Section-Labels (Name / Rechnungsadresse / Kontaktdaten — als .h3 col-md-4) */
.inc-billing-address-form .col-md-4 > .h3,
.inc-billing-address-form .col-md-4 > h3,
#new_customer .col-md-4 > .h3,
#new_customer .col-md-4 > h3 {
  font-size: 14px !important;
  letter-spacing: 0.16em !important;
  padding-top: 4px !important;
}

/* Submit-Button-Row: rechts ausrichten, nicht volle Breite */
.checkout-button-row {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--tx-line) !important;
}
.checkout-button-row .checkout-button-row-submit {
  flex: 0 0 auto !important;
  max-width: none !important;
}
.checkout-button-row .checkout-register-form-buttons-privacy {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding-right: 16px !important;
}

/* Submit-Button: min-width damit's prominent ist */
#new_customer .checkout-button-row-submit button[type="submit"],
.checkout-button-row-submit button[type="submit"] {
  min-width: 240px !important;
  padding: 14px 28px !important;
}

/* Passwort-Strength-Indicator (snippets/password_check.tpl) — Toxic-styled */
.password-strength,
.progress {
  background: var(--tx-bg-3) !important;
  border-radius: 0 !important;
  height: 4px !important;
  margin-top: 4px !important;
  border: 1px solid var(--tx-line) !important;
}
.progress-bar {
  background: var(--tx-mint) !important;
}
.password-strength small,
.password-strength .small {
  color: var(--tx-text-dim) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════
   REGISTRIERUNG-spezifischer Wrapper-Style (Card mit Mint-Top-Border)
   ════════════════════════════════════════════════════════════════ */

/* Page-H1 "Neues Kundenkonto erstellen" — JTL rendert es als .h2 helper
   in /Registrieren-Page. Soll Toxic-weiß-display sein wie andere H1. */
.register-form-account ~ * h1,
.register-content h1.h2,
h1.h2 {
  color: var(--tx-text) !important;
  font-family: var(--tx-h) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
}

/* Section-Labels "Name", "Rechnungsadresse", "Kontaktdaten" rendern als
   .h3 div-Helper (siehe inc_billing_address_form.tpl). Weiß + uppercase. */
#new_customer .h3,
#new_customer h3,
.inc-billing-address-form .h3,
.inc-billing-address-form h3 {
  color: var(--tx-text) !important;
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
#new_customer {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  border-top: 3px solid var(--tx-mint);
  padding: 32px;
  margin: 24px 0;
}
#new_customer .col-form-label,
#new_customer label {
  /* Lesbare Sans-Serif statt Display-Font, gleiche Optik wie Kontakt-Form */
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin-bottom: 6px !important;
  background: transparent !important;
}
/* HARDER RESET: JTL nutzt mehrere Mechanismen die weiße Backgrounds
   einschleusen — form-floating, form-control-placeholder, .label.required
   etc. Hier ALLES platt-machen und auf Toxic-Style umbauen.
   Scope: alles im #new_customer + .inc-billing-address-form. */
#new_customer .form-floating,
.inc-billing-address-form .form-floating,
#new_customer .form-group,
.inc-billing-address-form .form-group {
  position: static !important;
}
#new_customer .form-floating > label,
#new_customer .form-group > label,
#new_customer .form-row label,
.inc-billing-address-form .form-floating > label,
.inc-billing-address-form label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 6px 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  height: auto !important;
  width: auto !important;
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  font-style: normal !important;
}
#new_customer .form-floating > .form-control,
.inc-billing-address-form .form-floating > .form-control {
  padding: 11px 14px !important;
  min-height: auto !important;
  height: auto !important;
}
/* Floating-Label-Placeholder-Trick komplett killen
   (placeholder=" " + ~ label::after sind die typischen Quellen
   für die weißen Asterisk-Blöcke). */
#new_customer .form-control-placeholder,
.inc-billing-address-form .form-control-placeholder,
#new_customer label::before,
#new_customer label::after,
.inc-billing-address-form label::before,
.inc-billing-address-form label::after {
  background: transparent !important;
  background-color: transparent !important;
}
/* Bootstrap-Floating-Label Animation deaktivieren — wir nutzen statische Labels */
#new_customer .form-floating > .form-control:focus ~ label,
#new_customer .form-floating > .form-control:not(:placeholder-shown) ~ label,
#new_customer .form-floating > .form-select ~ label,
.inc-billing-address-form .form-floating > .form-control:focus ~ label,
.inc-billing-address-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
.inc-billing-address-form .form-floating > .form-select ~ label {
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 0 6px 0 !important;
  opacity: 1 !important;
  height: auto !important;
}
/* Sterne der Pflichtfeld-Markierung mint statt rot, kein weißer Block */
#new_customer label .text-danger,
#new_customer label .required,
#new_customer .text-danger,
.inc-billing-address-form label .text-danger,
.inc-billing-address-form .text-danger {
  color: var(--tx-mint) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
/* Optional-Suffix (- optional) dezent */
#new_customer label .optional,
.inc-billing-address-form label .optional {
  color: var(--tx-text-mute) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* JTL Custom-Checkbox (Datenschutz, Newsletter etc. aus Admin → Inhalt
   → Custom-Checkboxen) Toxic-styled — gleiches Look-and-Feel wie das
   Kontaktformular-Datenschutz-Häkchen, prominent mit Mint-Left-Border.
   align-items: center stellt sicher dass Box-Inhalt vertikal mittig
   zur Checkbox-Glyphe sitzt (kein Drift bei 1-Zeilen-Text). */
.checkboxes-area,
.checkboxes-area-checkbox,
.custom-checkbox,
.form-group.checkbox {
  padding: 16px 20px !important;
  margin: 20px 0 !important;
  background: rgba(1,222,194,0.04) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.checkboxes-area label,
.checkboxes-area .custom-control-label,
.form-group.checkbox label,
.checkboxes-area .form-check-label {
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tx-text-dim) !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}
.checkboxes-area input[type="checkbox"],
.form-group.checkbox input[type="checkbox"] {
  flex-shrink: 0 !important;
  accent-color: var(--tx-mint) !important;
}
.checkboxes-area label a,
.form-group.checkbox label a {
  color: var(--tx-mint) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── LOGIN-DRAWER / SIDEBAR (Mein-Konto-Icon Klick) ──
   JTL rendert account/login.tpl als off-canvas Drawer. Stock-Stil
   ist weiß mit lila Buttons (Bootstrap-Default). Hier in Toxic-Dark. */
.login-form,
.account-login,
.modal-login,
#login_form {
  background: var(--tx-bg) !important;
  color: var(--tx-text) !important;
}
.login-form legend,
.account-login legend,
#login_form legend,
.login-form .h2,
.account-login .h2 {
  font-family: var(--tx-h) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 0 24px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--tx-line) !important;
}
.login-form .form-control,
#login_form .form-control,
.account-login .form-control {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
}
.login-form .form-control:focus,
#login_form .form-control:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  box-shadow: none !important;
  outline: none !important;
}
.login-form label,
#login_form label,
.account-login label {
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  background: transparent !important;
}
.login-form .btn-primary,
#login_form .btn-primary,
.account-login .btn-primary,
.account-login button[type="submit"] {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: background .15s, transform .15s !important;
}
.login-form .btn-primary:hover,
#login_form .btn-primary:hover,
.account-login .btn-primary:hover {
  background: var(--tx-mint-2) !important;
  transform: translateY(-1px) !important;
}
.login-form a,
#login_form a,
.account-login a {
  color: var(--tx-mint) !important;
}
/* „Sind Sie Neukunde?" Block + „Jetzt registrieren"-Button */
.login-form .btn-outline-primary,
.login-form .btn-dark,
.account-login .btn-outline-primary,
.account-login .btn-dark {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.login-form .btn-outline-primary:hover,
.account-login .btn-outline-primary:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}
#new_customer .form-control,
#new_customer input[type="text"],
#new_customer input[type="email"],
#new_customer input[type="password"],
#new_customer input[type="tel"],
#new_customer select,
#new_customer textarea {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: var(--tx-body) !important;
  transition: border-color .15s, background .15s !important;
}
#new_customer .form-control::placeholder,
#new_customer input::placeholder {
  color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
#new_customer .form-control:hover,
#new_customer input:hover,
#new_customer select:hover,
#new_customer textarea:hover {
  border-color: var(--tx-text-dim) !important;
}
#new_customer .form-control:focus,
#new_customer input:focus,
#new_customer select:focus,
#new_customer textarea:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
  box-shadow: none !important;
}
#new_customer .invalid-feedback,
#new_customer .form-error-msg {
  color: var(--tx-danger) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}
#new_customer .form-control.is-invalid,
#new_customer input.is-invalid {
  border-color: var(--tx-danger) !important;
}
/* Sektion-Titel (Name, Rechnungsadresse, Kontaktdaten) */
#new_customer .col-form-label-fieldset,
#new_customer legend,
#new_customer .h5,
#new_customer h5 {
  font-family: var(--tx-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
}
/* Checkbox-Reihe (Datenschutz) */
#new_customer .custom-control-label,
#new_customer .form-check-label {
  font-size: 13px !important;
  color: var(--tx-text-dim) !important;
  font-family: var(--tx-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
}
#new_customer .custom-control-label a,
#new_customer .form-check-label a {
  color: var(--tx-mint) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#new_customer .custom-control-input:focus ~ .custom-control-label::before {
  border-color: var(--tx-mint) !important;
  box-shadow: 0 0 0 1px var(--tx-mint) !important;
}
#new_customer .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
}
/* Submit-Button („Kundendaten abschicken") */
#new_customer button[type="submit"],
#new_customer .btn-primary {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 13px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
}
#new_customer button[type="submit"]:hover,
#new_customer .btn-primary:hover {
  background: var(--tx-mint-2) !important;
  transform: translateY(-1px) !important;
}
/* Datenschutz-Hinweis-Text */
#new_customer .text-muted,
#new_customer small {
  color: var(--tx-text-dim) !important;
  font-size: 12px !important;
}
#new_customer .text-muted a,
#new_customer small a {
  color: var(--tx-mint) !important;
}

/* ─── WIDERRUF-CTA-Row im Footer (Pflicht ab 19.06.2026, §356a BGB) ──
   Sitzt zwischen Legal-Links-Row und Disclaimer. Prominent aber dezent —
   Text links, Mint-Button rechts. Auf Mobile zentriert + gestackt. */
.tx-footer__widerruf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
  margin: 6px 0;
  border-top: 1px dashed rgba(31,45,45,0.6);
  border-bottom: 1px dashed rgba(31,45,45,0.6);
}
.tx-footer__widerruf-text {
  font-family: var(--tx-body);
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-footer__widerruf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-mint) !important;
  background: transparent;
  border: 1px solid var(--tx-mint);
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.tx-footer__widerruf-btn:hover {
  background: var(--tx-mint);
  color: #062019 !important;
}
.tx-footer__widerruf-btn .tx-arr {
  display: inline-flex;
  transition: transform .15s;
}
.tx-footer__widerruf-btn:hover .tx-arr {
  transform: translateX(3px);
}
@media (max-width: 720px) {
  .tx-footer__widerruf-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ─── Widerruf-CTA inline auf Widerrufsbelehrung-Page (kLink 105) ──
   Wird per JS am Ende von .link-content injected wenn aktuell auf der
   Widerrufsbelehrung-Seite. Damit hat der User direkt nach dem Lesen
   des Textes einen Klick zum Formular. */
.tx-widerruf-cta-inline {
  margin: 40px 0 16px;
  padding: 28px 32px;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  border-left: 3px solid var(--tx-mint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tx-widerruf-cta-inline__text {
  flex: 1;
  min-width: 220px;
}
.tx-widerruf-cta-inline__head {
  font-family: var(--tx-h);
  font-size: 18px;
  font-weight: 800;
  color: var(--tx-text);
  margin: 0 0 6px;
}
.tx-widerruf-cta-inline__sub {
  font-size: 13px;
  color: var(--tx-text-dim);
  margin: 0;
  line-height: 1.5;
}
.tx-widerruf-cta-inline__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--tx-mint);
  color: #062019 !important;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid var(--tx-mint);
  transition: background .15s, transform .15s;
}
.tx-widerruf-cta-inline__btn:hover {
  background: var(--tx-mint-2);
  transform: translateY(-1px);
}
.tx-widerruf-cta-inline__btn .tx-arr { transition: transform .15s; }
.tx-widerruf-cta-inline__btn:hover .tx-arr { transform: translateX(3px); }

/* Social-Icons unter Logo */
.tx-footer__social {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.tx-footer__social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tx-line);
  border-radius: 50%;
  color: var(--tx-text-dim);
  transition: color 140ms ease, border-color 140ms ease;
}
.tx-footer__social a:hover,
.tx-footer__social a:focus-visible {
  color: var(--tx-mint);
  border-color: var(--tx-mint);
}
.tx-footer__social svg { width: 16px; height: 16px; }

/* ── Reihe 2 · Sichere Zahlung (zentriert) ── */
.tx-footer__payments {
  display: flex;
  justify-content: center;
  padding: 28px 0;
  border-top: 1px solid var(--tx-line);
}
.tx-footer__payments-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tx-pay {
  height: 40px;
  background: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
  min-width: 64px;
}
.tx-pay svg { max-width: 100%; max-height: 100%; display: block; }
.tx-pay img { height: 28px; width: auto; max-width: 90px; display: block; object-fit: contain; }

/* Methoden-Tiles (Überweisung/Bar/Nachnahme) — Outline statt White-Box. */
.tx-pay--method {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--tx-line);
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  height: 44px;
  min-width: 70px;
  color: var(--tx-text-dim);
}
.tx-pay--method svg { height: 16px; }
.tx-pay__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  line-height: 1;
  white-space: nowrap;
}

/* ── Reihe 3 · Bottom · Legal-Inline + Disclaimer + Copyright ── */
.tx-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--tx-line);
  text-align: center;
  font-family: var(--tx-sub); font-weight: 500;
  color: var(--tx-text-mute);
}
.tx-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.tx-footer__legal li { padding: 0; }
.tx-footer__legal li + li { position: relative; }
.tx-footer__legal li + li::before {
  content: "·";
  position: absolute;
  left: -11px;
  color: var(--tx-text-mute);
  pointer-events: none;
}
.tx-footer__legal a { color: var(--tx-text-dim); }
.tx-footer__disclaimer {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tx-text-mute);
  max-width: 880px;
}
.tx-footer__disclaimer a { color: var(--tx-text-dim); text-decoration: underline; }
.tx-footer__disclaimer a:hover { color: var(--tx-mint); }
.tx-footer__copy {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}

/* ─── CART ────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   CART — Systemtreff-inspired layout in Toxic styling
   ────────────────────────────────────────────────────────────── */
.tx-cart {
  background: var(--tx-bg);
  padding: 48px 0 80px;
}
.tx-cart__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}

/* Header */
.tx-cart__head { margin-bottom: 28px; }
.tx-cart__head h1 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--tx-text);
}
.tx-cart__head-count {
  color: var(--tx-text-dim);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
  margin-left: 4px;
}
.tx-cart__head-confirm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--tx-mint);
}
.tx-cart__head-confirm svg { stroke: var(--tx-mint); flex-shrink: 0; }

/* Layout grid */
.tx-cart__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: flex-start;
}

/* Cart line items wrapper */
.tx-cart__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Single cart-item card */
.tx-cart-item {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  display: flex;
  flex-direction: column;
}

/* Header bar of cart-item — full title.
   ACHTUNG: NOVA's clear_crit.css setzt header { background-color:#fff } auf
   ALLE <header>-Elements (HTML5-Tag-Selektor). Da unsere Cart-Item den
   <header> Tag nutzt, schlägt das durch. Hier explizit transparent setzen
   damit der dunkle .tx-cart-item Card-Background sichtbar bleibt. */
.tx-cart-item__header {
  background: transparent;
  padding: 18px 24px;
  border-bottom: 1px solid var(--tx-line);
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--tx-text);
}
.tx-cart-item__header a { color: var(--tx-text); text-decoration: none; }
.tx-cart-item__header a:hover { color: var(--tx-mint); }

/* Main row — image | config | price */
.tx-cart-item__row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  padding: 24px;
  align-items: flex-start;
}

.tx-cart-item__media {
  aspect-ratio: 1/1;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.06), transparent 70%),
    var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.tx-cart-item__media img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Config list */
.tx-cart-item__main { min-width: 0; }
.tx-cart-item__cfg-label {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx-text);
  margin-bottom: 12px;
}
.tx-cart-item__cfg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-cart-item__cfg-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
  line-height: 1.5;
}
.tx-cart-item__cfg-list li svg {
  stroke: var(--tx-mint);
  flex-shrink: 0;
}
.tx-cart-item__cfg-list li strong {
  color: var(--tx-text);
  font-weight: 600;
  margin-right: 4px;
}

/* Price block on the right */
.tx-cart-item__price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 180px;
}
.tx-cart-item__price-total {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 26px;
  color: var(--tx-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tx-cart-item__qty-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-cart-item__qty-input {
  width: 56px;
  height: 32px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 0 4px;
}

/* Action bar — Bearbeiten + Entfernen */
.tx-cart-item__actions {
  display: flex;
  gap: 24px;
  padding: 12px 24px;
  border-top: 1px solid var(--tx-line);
}
.tx-cart-item__action-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.tx-cart-item__action-link:hover { color: var(--tx-mint); }
.tx-cart-item__action-link--danger:hover { color: var(--tx-danger, #e86363); }
.tx-cart-item__action-link svg { flex-shrink: 0; }

/* Meta bar — ArtNr + Einzelpreis */
.tx-cart-item__meta {
  display: flex;
  gap: 32px;
  padding: 12px 24px;
  background: var(--tx-bg-3);
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-cart-item__meta strong { color: var(--tx-text); font-weight: 600; }
.tx-cart-item__meta:empty { display: none; }

/* ─── Sidebar — Bestellübersicht ──────────────────────────────── */
.tx-cart__aside {
  position: sticky;
  top: 24px;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 24px;
}
.tx-cart__aside h2 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tx-line);
  letter-spacing: 0.02em;
  color: var(--tx-text);
}
.tx-cart__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
}
.tx-cart__line strong { color: var(--tx-text); font-weight: 600; font-size: 15px; }
.tx-cart__line--total {
  padding: 12px 0;
  margin: 8px 0 4px;
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
}
.tx-cart__line--total span {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx-text);
}
.tx-cart__line--total strong {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 22px;
  color: var(--tx-text);
}

.tx-cart__shipping-note {
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  line-height: 1.5;
}
.tx-cart__shipping-note p { margin: 0 0 4px; }
.tx-cart__shipping-note p:last-child { margin: 0; }
.tx-cart__shipping-link { color: var(--tx-mint); text-decoration: underline dotted; text-underline-offset: 3px; }
.tx-cart__shipping-eta {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed var(--tx-line);
  color: var(--tx-mint) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tx-cart__shipping-eta svg { flex-shrink: 0; }
.tx-cart__shipping-eta strong { color: var(--tx-mint); font-weight: 700; }

.tx-cart__voucher-form { margin-bottom: 16px; }
.tx-cart__voucher {
  display: flex;
  gap: 8px;
}
.tx-cart__voucher input {
  flex: 1;
  padding: 10px 12px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
}
.tx-cart__voucher button {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tx-cart__voucher button:hover { border-color: var(--tx-mint); color: var(--tx-mint); }

/* Primary checkout CTA */
.tx-btn--checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  background: var(--tx-mint);
  color: var(--tx-bg) !important;
  border: 0;
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.tx-btn--checkout:hover { filter: brightness(1.1); color: var(--tx-bg) !important; }
.tx-btn--checkout svg { stroke: var(--tx-bg); }

.tx-cart__or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--tx-text-mute);
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tx-cart__or-divider::before,
.tx-cart__or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tx-line);
}

.tx-cart__aside .tx-btn--ghost { width: 100%; text-align: center; justify-content: center; }
.tx-btn--small { padding: 10px 14px; font-size: 12px; }

.tx-cart__pay-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--tx-line);
  text-align: center;
}
.tx-cart__pay-title {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  margin-bottom: 10px;
}
.tx-cart__pay-icons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.tx-cart__pay-icon {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tx-text-dim);
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  padding: 6px 9px;
  text-transform: uppercase;
}

/* Empty state — darker, weniger Bootstrap-Card-Look, mehr „Edel-Leer" */
.tx-cart__empty {
  background: var(--tx-bg-2);
  border: 1px solid var(--tx-line);
  border-left: 3px solid var(--tx-mint);
  padding: 64px 48px;
  text-align: center;
}
.tx-cart__empty h2 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cart__empty p {
  font-family: var(--tx-sub); font-weight: 500;
  color: var(--tx-text-dim);
  margin: 0 0 24px;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
  .tx-cart__layout { grid-template-columns: 1fr; }
  .tx-cart__aside { position: static; }
}
@media (max-width: 720px) {
  .tx-cart-item__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tx-cart-item__media { max-width: 200px; aspect-ratio: 1/1; }
  .tx-cart-item__price-block { align-items: flex-start; min-width: 0; }
  .tx-cart-item__actions,
  .tx-cart-item__meta { flex-wrap: wrap; padding: 12px 18px; gap: 12px 20px; }
  .tx-cart__head h1 { font-size: 28px; }
  .tx-cart__head-count { font-size: 18px; }
  .tx-cart-item__header { padding: 14px 18px; font-size: 13px; }
  .tx-cart-item__row { padding: 18px; }
}

/* ─── RICH PDP (System Detail) ────────────────────────────────── */
.tx-pdp-hero {
  background: var(--tx-bg);
  padding: 36px 0 48px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-pdp-hero__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
.tx-pdp-hero__media {
  position: relative;
  aspect-ratio: 1/1;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.12), transparent 65%),
    var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tx-pdp-hero__media img { max-width: 88%; max-height: 88%; filter: drop-shadow(0 30px 70px rgba(0,0,0,0.7)); }
.tx-pdp-hero__media::before,
.tx-pdp-hero__media::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--tx-text-dim);
  opacity: 0.5;
}
.tx-pdp-hero__media::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.tx-pdp-hero__media::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.tx-pdp-hero__info { padding-top: 12px; }
.tx-pdp-hero__crumbs {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--tx-text-mute);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tx-pdp-hero__crumbs em { color: var(--tx-text); font-style: normal; }
.tx-pdp-hero__crumbs a:hover { color: var(--tx-mint); }

.tx-pdp-hero h1 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.tx-pdp-hero h1 em { font-style: normal; color: var(--tx-mint); display: block; }
.tx-pdp-hero__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tx-text-dim);
  margin: 0 0 24px;
  max-width: 540px;
}
.tx-pdp-hero__keyspecs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.tx-pdp-hero__price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.tx-pdp-hero__price {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 44px;
  color: var(--tx-mint);
  letter-spacing: -0.025em;
  line-height: 1;
}
.tx-pdp-hero__price-old {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 17px;
  color: var(--tx-text-mute);
  text-decoration: line-through;
}
.tx-pdp-hero__finance {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
  margin-bottom: 22px;
}
.tx-pdp-hero__finance em { color: var(--tx-text); font-style: normal; font-weight: 700; }
.tx-pdp-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.tx-pdp-hero__assurance {
  border-top: 1px solid var(--tx-line);
  padding-top: 16px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13.5px;
  color: var(--tx-text-dim);
  display: grid;
  gap: 6px;
}
.tx-pdp-hero__assurance > div::before {
  content: '✓';
  color: var(--tx-mint);
  margin-right: 8px;
  font-weight: 700;
}

/* Tabs */
.tx-pdp-tabs {
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.tx-pdp-tabs__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.tx-pdp-tabs__item {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tx-text-dim);
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 18px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tx-pdp-tabs__item:hover { color: var(--tx-text); }
.tx-pdp-tabs__item.is-active {
  color: var(--tx-mint);
  border-bottom-color: var(--tx-mint);
}

/* Long description body */
.tx-pdp-body {
  background: var(--tx-bg);
  padding: 56px 0;
}
.tx-pdp-body__inner {
  /* 1148px = 1100 content + 2×24 padding — matched mit Rich-Content's
     .trc-section padding + .trc-inner max-width (1100). So alignt der
     Theme-Kicker (// GAMING PC KAGE X1 ...) exakt mit den .trc-kicker
     Headlines im pasted Rich-Content (// SYSTEM 02 · ENTRY CLASS 2026). */
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Rich-Content im PDP-Body: dessen .trc-section/bd/dc bringen eigene
   24px L/R-Padding mit. Drinnen im theme-body würde das die .trc-inner
   nochmal um 24px nach innen schieben → Doppel-Inset. Wir neutralisieren
   das horizontale Rich-Content-Section-Padding hier, vertikal bleibt es. */
.tx-pdp-body__longdesc .trc-section,
.tx-pdp-body__longdesc .trc-bd,
.tx-pdp-body__longdesc .trc-dc {
  padding-left: 0;
  padding-right: 0;
}
/* Full-Bleed-Override für Sections mit eigenem Hintergrund (z.B. .trc-bd
   "Built Different" mit dunklem Hex-Pattern). Klassischer
   `margin-left: calc(50% - 50vw)` Trick: negative Margins ziehen das
   Element bis zum Viewport-Rand, die Auto-Width füllt den entstandenen
   Raum. Padding restored damit auf Mobile das Pattern nicht edge-to-edge
   abschneidet; auf Desktop zentriert .trc-bd-inner per max-width:1100px
   den Content trotz Full-Bleed-Background. */
.tx-pdp-body__longdesc .trc-bd {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 24px;
  padding-right: 24px;
  max-width: none;
}
.tx-pdp-body p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx-text);
  margin: 0 0 18px;
}
.tx-pdp-body h2 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 48px 0 24px;
  color: var(--tx-text);
}
.tx-pdp-body h2:first-of-type { margin-top: 0; }

/* Highlights – 3 spotlight cards */
.tx-pdp-highlights {
  background: var(--tx-bg);
  padding: 32px 0 64px;
}
.tx-pdp-highlights__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-pdp-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tx-pdp-highlight {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tx-pdp-highlight__media {
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.06), transparent 70%),
    var(--tx-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--tx-line);
  overflow: hidden;
  position: relative; /* anchor für .tx-pdp-info-btn */
}
.tx-pdp-highlight__media img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.5));
}
.tx-pdp-highlight__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tx-pdp-highlight__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  border: 1px solid var(--tx-mint);
  padding: 4px 10px;
  margin-bottom: 14px;
}
.tx-pdp-highlight h3 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--tx-text);
  /* Immer 2 Zeilen Höhe reservieren, damit Description+Pills auf allen 3
     Karten auf gleicher Y-Position starten (kürzere Titel wie „32GB DDR5
     6000 DUAL CHANNEL" haben sonst nur 1 Zeile und kippen das Layout). */
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-pdp-highlight__sub {
  font-family: var(--tx-sub);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 600;
}
.tx-pdp-highlight p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tx-text-dim);
  margin: 0 0 18px;
  /* Bausteine sind schmaler — auf 7 Zeilen klemmen reicht für die meisten
     Wawi-Kurzbeschreibungen ohne mid-word cut. Pills-Row bleibt am unteren
     Rand der Karte (margin-top:auto im Container) — alle 3 Karten der Row
     stretchen via grid auf gleiche Höhe. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Component spotlight rows (Mainboard / Gehäuse / Kühlung etc.) */
.tx-pdp-spotlight {
  background: var(--tx-bg);
  padding: 24px 0;
}
.tx-pdp-spotlight__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-pdp-spotlight__row {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.tx-pdp-spotlight__row--reverse { grid-template-columns: 1fr 1fr; }
.tx-pdp-spotlight__row--reverse .tx-pdp-spotlight__media { order: 2; }
/* Info-Button auf den Bausteine + Spotlight-Karten — visuell identisch
   zum Konfigurator (.tx-cfg-card__info), eigene Klasse weil die Card-
   Struktur anders ist (Bausteine: __media absolute parent; Spotlight:
   media-Cell hat aspect-ratio + align-self:center). Triggert das gleiche
   Universal-Info-Modal aus config_container.tpl via [data-info-trigger].

   Bausteine: TOP-LEFT damit der "/ 01"-Number-Badge top-right frei bleibt
   (sonst überlagern sich beide und der Klick auf das i wird vom Number-
   Span gefressen, weil der in der DOM-Reihenfolge nach dem Button kommt).
   Spotlights: TOP-RIGHT (kein Number-Badge in dem Layout), eigener
   --spot Modifier. */
.tx-pdp-info-btn {
  position: absolute;
  top: 10px; left: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--tx-line-2);
  background: rgba(5,7,7,0.7);
  color: var(--tx-text-dim);
  font-family: var(--tx-h);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
  padding: 0;
  line-height: 1;
}
.tx-pdp-info-btn:hover {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
  background: rgba(1,222,194,0.1);
  transform: scale(1.08);
}
.tx-pdp-info-btn:focus-visible {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}
.tx-pdp-info-btn--spot {
  top: 14px; right: 14px; left: auto;
  width: 32px; height: 32px;
  font-size: 14px;
}

.tx-pdp-spotlight__media {
  aspect-ratio: 4/3;
  /* align-self: center — verhindert, dass die Kachel mitwächst, wenn der
     Body-Text länger wird. Image-Tile bleibt auf seiner 4/3-Höhe, Body
     kann nach unten wachsen, beide vertikal zentriert in der Row. */
  align-self: center;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.08), transparent 70%),
    var(--tx-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tx-pdp-spotlight__media img {
  max-width: 78%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.6));
}
.tx-pdp-spotlight__media-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px solid var(--tx-line-2);
  background: rgba(0,0,0,0.4);
  color: var(--tx-text);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color .15s, color .15s;
}
.tx-pdp-spotlight__media-arrow:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-pdp-spotlight__media-arrow--prev { left: 16px; }
.tx-pdp-spotlight__media-arrow--next { right: 16px; }
.tx-pdp-spotlight__body {
  padding: 36px 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tx-pdp-spotlight__tag {
  display: inline-block;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  border: 1px solid var(--tx-mint);
  padding: 4px 10px;
  align-self: flex-start;
  margin-bottom: 18px;
}
.tx-pdp-spotlight h3 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--tx-text);
}
.tx-pdp-spotlight__sub {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-top: 10px;
  margin-bottom: 6px;
}
.tx-pdp-spotlight__row p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx-text-dim);
  margin: 0 0 18px;
  /* Soft visual cap auf 10 Zeilen — Spotlight-Karten haben mehr Platz als
     die schmaleren Bausteine, und 6 Zeilen war oft mid-sentence cut.
     Volltext bleibt im DOM (Screen-Reader, SEO-Bot). Truncate im Snippet
     ist auf 600 Zeichen als Hard-Cap gegen Edge-Cases. */
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-pdp-spotlight__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--tx-line);
  padding-top: 16px;
  margin-top: auto;
}
.tx-pdp-spotlight__feat {
  border-right: 1px solid var(--tx-line);
  padding: 0 14px;
}
.tx-pdp-spotlight__feat:last-child { border-right: 0; }
.tx-pdp-spotlight__feat-label {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.tx-pdp-spotlight__feat-sub {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
}

/* Reviews + Finance simple panels */
.tx-pdp-panel {
  background: var(--tx-bg);
  padding: 56px 0;
}
.tx-pdp-panel__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.tx-pdp-panel.is-hidden,
[data-panel].is-hidden { display: none; }

.tx-pdp-rating {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-pdp-rating__big {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 56px;
  color: var(--tx-mint);
  line-height: 1;
  letter-spacing: -0.025em;
}
.tx-pdp-rating__stars {
  font-size: 22px;
  color: var(--tx-mint);
  letter-spacing: 4px;
  margin-bottom: 4px;
}
.tx-pdp-review {
  border-bottom: 1px solid var(--tx-line);
  padding: 18px 0;
}
.tx-pdp-review:last-child { border-bottom: 0; }
.tx-pdp-review__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-pdp-review__head em { color: var(--tx-mint); font-style: normal; letter-spacing: 2px; }
.tx-pdp-review h4 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
}
.tx-pdp-review p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx-text-dim);
  margin: 0;
}

@media (max-width: 1024px) {
  .tx-pdp-hero__inner { grid-template-columns: 1fr; }
  .tx-pdp-hero h1 { font-size: 40px; }
  .tx-pdp-spotlight__row { grid-template-columns: 1fr; }
  .tx-pdp-spotlight__row--reverse .tx-pdp-spotlight__media { order: 0; }
  .tx-pdp-highlights__grid { grid-template-columns: 1fr; }
  .tx-pdp-spotlight__features { grid-template-columns: repeat(2, 1fr); }
}

/* ─── LEGAL / STATIC PAGES ────────────────────────────────────── */
.tx-legal {
  background: var(--tx-bg);
  padding: 56px 0 80px;
}
.tx-legal__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}
.tx-legal__crumbs {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin-bottom: 18px;
}
.tx-legal__crumbs a:hover { color: var(--tx-mint); }
.tx-legal__crumbs em { color: var(--tx-text); font-style: normal; }
.tx-legal h1 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.tx-legal h2 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
.tx-legal h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tx-legal p,
.tx-legal address {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx-text);
  margin: 0 0 16px;
  font-style: normal;
}
.tx-legal ul, .tx-legal ol {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx-text);
  padding-left: 22px;
  margin: 0 0 16px;
}
.tx-legal a { color: var(--tx-mint); text-decoration: underline dotted; text-underline-offset: 3px; }
.tx-legal__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 17px;
  color: var(--tx-text);
  line-height: 1.55;
  border-left: 2px solid var(--tx-mint);
  padding: 4px 0 4px 18px;
  margin: 0 0 28px;
}
.tx-legal__contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.tx-legal__contact-card {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 24px;
}
.tx-legal__contact-card h3 {
  margin-top: 0;
  color: var(--tx-mint);
  font-size: 12px;
  letter-spacing: 0.18em;
}
/* Dezenter Hinweis-Absatz (z.B. Haftungs-/Datensicherungs-Hinweis auf
   Info-Seiten). Bewusst KEINE Box/Icon — nur ruhige linke Linie. */
.tx-legal__note {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx-text-dim);
  border-left: 2px solid var(--tx-line-2);
  padding: 2px 0 2px 16px;
  margin: 0 0 16px;
}
.tx-legal__note strong { color: var(--tx-text); }
@media (max-width: 720px) {
  .tx-legal h1 { font-size: 36px; }
  .tx-legal__contact-grid { grid-template-columns: 1fr; }
}

/* ─── CONTACT PAGE ────────────────────────────────────────────── */

/* Trust strip below the lead */
.tx-contact-trust {
  display: flex;
  gap: 0;
  margin: 28px 0 40px;
  border: 1px solid var(--tx-line);
}
.tx-contact-trust__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-right: 1px solid var(--tx-line);
}
.tx-contact-trust__item:last-child { border-right: 0; }
.tx-contact-trust__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--tx-mint);
}
.tx-contact-trust__copy { min-width: 0; }
.tx-contact-trust__val {
  font-family: var(--tx-h);
  font-size: 13px;
  font-weight: 800;
  color: var(--tx-text);
  white-space: nowrap;
}
.tx-contact-trust__desc {
  font-size: 12px;
  color: var(--tx-text-dim);
  margin-top: 1px;
}

/* Main 2-col layout */
.tx-contact-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

/* Form card */
.tx-contact-form-card {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  border-top: 3px solid var(--tx-mint);
  padding: 32px;
}
.tx-contact-form-card__title {
  font-family: var(--tx-h);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 0 0 24px;
}
.tx-contact-form { display: block; }
.tx-contact-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tx-contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tx-contact-form__group--full { grid-column: 1 / -1; }
.tx-contact-form__label {
  /* Display-Font war zu condensed/unleserlich auf kleinen Form-Labels.
     Hier System-Sans (Inter/Segoe UI etc.) — uppercase + letter-spacing
     bleibt für Toxic-Style, aber Schrift ist klar lesbar. */
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-text);
}
.tx-contact-form__label span { color: var(--tx-mint); margin-left: 2px; }
.tx-contact-form__input,
.tx-contact-form__select,
.tx-contact-form__textarea {
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  border-bottom-width: 2px;
  color: var(--tx-text);
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
}
.tx-contact-form__input:focus,
.tx-contact-form__select:focus,
.tx-contact-form__textarea:focus {
  border-color: var(--tx-mint);
  background: var(--tx-card);
}
.tx-contact-form__input::placeholder,
.tx-contact-form__textarea::placeholder { color: var(--tx-text-mute); }
.tx-contact-form__select-wrap { position: relative; }
.tx-contact-form__select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--tx-mint);
  font-size: 12px;
}
.tx-contact-form__textarea { resize: vertical; min-height: 130px; }
.tx-contact-form__hint {
  font-size: 12px;
  color: var(--tx-text-mute);
  line-height: 1.5;
}
.tx-contact-form__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.tx-contact-form__fine {
  font-size: 12px;
  color: var(--tx-text-mute);
  line-height: 1.5;
}
.tx-contact-form__fine a { color: var(--tx-mint); text-decoration: none; }
.tx-contact-form__fine a:hover { text-decoration: underline; }

/* Success state */
.tx-contact-form__success {
  display: none;
  grid-column: 1 / -1;
  background: var(--tx-mint-soft);
  border: 1px solid var(--tx-mint);
  padding: 22px 26px;
  color: var(--tx-mint);
  font-family: var(--tx-h);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tx-contact-form--sent .tx-contact-form__success { display: block; }
.tx-contact-form--sent .tx-contact-form__fields { display: none; }

/* Sidebar */
.tx-contact-aside {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tx-line);
  border-top: 3px solid var(--tx-line-2);
  overflow: hidden;
}
.tx-contact-aside__block {
  padding: 20px 22px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-contact-aside__block:last-child { border-bottom: 0; }
.tx-contact-aside__label {
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-bottom: 10px;
}
.tx-contact-aside__val {
  font-size: 13px;
  color: var(--tx-text);
  line-height: 1.6;
}
.tx-contact-aside__val strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--tx-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.tx-contact-aside__val a { color: var(--tx-mint); text-decoration: none; font-weight: 600; }
.tx-contact-aside__val a:hover { text-decoration: underline; }
.tx-contact-aside__hours {
  margin-top: 10px;
  font-size: 12px;
  color: var(--tx-text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-contact-aside__hours span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-contact-aside__hours span:last-child { border-bottom: 0; padding-bottom: 0; }
.tx-contact-aside__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-mint);
  margin-top: 8px;
}
.tx-contact-aside__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tx-mint);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--tx-mint);
}
.tx-contact-aside__status--closed { color: var(--tx-text-dim); }
.tx-contact-aside__status--closed::before {
  background: var(--tx-text-mute);
  box-shadow: none;
}

/* Datenschutz-Checkbox */
.tx-contact-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-text);
  user-select: none;
}
.tx-contact-form__checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.tx-contact-form__checkbox-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  border-bottom-width: 2px;
  position: relative;
  transition: border-color .15s, background .15s;
}
.tx-contact-form__checkbox-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--tx-mint);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease-out;
}
.tx-contact-form__checkbox input:checked ~ .tx-contact-form__checkbox-mark {
  border-color: var(--tx-mint);
  background: var(--tx-card);
}
.tx-contact-form__checkbox input:checked ~ .tx-contact-form__checkbox-mark::after {
  transform: rotate(45deg) scale(1);
}
.tx-contact-form__checkbox input:focus-visible ~ .tx-contact-form__checkbox-mark {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}
.tx-contact-form__checkbox-text a { color: var(--tx-mint); text-decoration: none; }
.tx-contact-form__checkbox-text a:hover { text-decoration: underline; }
.tx-contact-form__checkbox-star { color: var(--tx-mint); margin-left: 2px; }
.tx-contact-form__group--invalid .tx-contact-form__checkbox-mark {
  border-color: #ff6464;
}

/* JTL-native Pflicht-Checkboxen (Datenschutz) im Toxic-Container */
.tx-contact-form__jtl-checkboxes { padding: 0; }
.tx-contact-form__jtl-checkboxes .form-group {
  margin: 0;
  padding: 14px 16px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  border-bottom-width: 2px;
}
.tx-contact-form__jtl-checkboxes .form-group .col-form-label,
.tx-contact-form__jtl-checkboxes .form-group .form-text { display: none; }
.tx-contact-form__jtl-checkboxes .custom-control { padding-left: 28px; min-height: auto; }
.tx-contact-form__jtl-checkboxes .custom-control-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-text);
  cursor: pointer;
}
.tx-contact-form__jtl-checkboxes .custom-control-label::before {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  border-bottom-width: 2px;
  border-radius: 0;
  width: 18px;
  height: 18px;
  top: 1px;
  left: -28px;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
.tx-contact-form__jtl-checkboxes .custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
  border-color: var(--tx-mint);
}
.tx-contact-form__jtl-checkboxes .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--tx-card);
  border-color: var(--tx-mint);
}
.tx-contact-form__jtl-checkboxes .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
  content: '';
  border: solid var(--tx-mint);
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 10px;
  transform: rotate(45deg);
  top: 3px;
  left: -23px;
}
.tx-contact-form__jtl-checkboxes .moreinfo { font-size: 12px; }
.tx-contact-form__jtl-checkboxes .moreinfo a,
.tx-contact-form__jtl-checkboxes .moreinfo a.popup,
.tx-contact-form__jtl-checkboxes a.checkbox-popup { color: var(--tx-mint) !important; text-decoration: none; }
.tx-contact-form__jtl-checkboxes .moreinfo a:hover,
.tx-contact-form__jtl-checkboxes a.checkbox-popup:hover { text-decoration: underline; }
.tx-contact-form__jtl-checkboxes .form-group.has-error,
.tx-contact-form__group--invalid .tx-contact-form__jtl-checkboxes .form-group {
  border-color: #ff6464;
}

/* Top-of-form server-validation alert (rendered when $fehlendeAngaben != empty) */
.tx-contact-form__alert {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.4);
  border-left: 3px solid #ff6464;
  color: #ff8b8b;
  font-size: 13px;
  font-family: var(--tx-h);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Standalone success state (no $step → form submitted ok) */
.tx-contact-form__success--standalone {
  display: block;
  grid-column: auto;
  margin: 0;
}

/* FAQ strip */
.tx-contact-faq {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--tx-line);
}
.tx-contact-faq__title {
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin-bottom: 14px;
}
.tx-contact-faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tx-contact-faq__list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 13px 16px;
  color: var(--tx-text-dim);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-contact-faq__list li a:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-contact-faq__list li a svg { flex-shrink: 0; color: var(--tx-mint); }

@media (max-width: 960px) {
  .tx-contact-wrap { grid-template-columns: 1fr; }
  .tx-contact-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top-width: 1px;
  }
  .tx-contact-aside__block { border-right: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line); }
  .tx-contact-aside__block:nth-child(2n) { border-right: 0; }
  .tx-contact-aside__block:nth-last-child(-n+2) { border-bottom: 0; }
  .tx-contact-trust { flex-wrap: wrap; }
  .tx-contact-trust__item { flex: 0 0 50%; border-bottom: 1px solid var(--tx-line); }
  .tx-contact-trust__item:nth-child(2) { border-right: 0; }
  .tx-contact-faq__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tx-contact-form__fields { grid-template-columns: 1fr; }
  .tx-contact-form-card { padding: 20px; }
  .tx-contact-aside { grid-template-columns: 1fr; }
  .tx-contact-aside__block { border-right: 0 !important; }
  .tx-contact-aside__block:nth-last-child(-n+2) { border-bottom: 1px solid var(--tx-line); }
  .tx-contact-aside__block:last-child { border-bottom: 0; }
  .tx-contact-faq__list { grid-template-columns: 1fr; }
  .tx-contact-trust__item { flex: 0 0 100%; border-right: 0 !important; }
  .tx-contact-form__submit { flex-direction: column; align-items: flex-start; }
}

/* ─── BLOG TEASER ─────────────────────────────────────────────── */
.tx-blog {
  background: var(--tx-bg);
  padding: 88px 0;
}
.tx-blog__head { margin-bottom: 44px; }
.tx-blog__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 460px;
}
.tx-blog-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tx-line);
  background: var(--tx-card);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  cursor: pointer;
  transition: transform .2s, border-color .15s;
}
.tx-blog-card:first-child { grid-row: 1 / span 2; padding: 32px; }
.tx-blog-card:hover { border-color: var(--tx-text-dim); transform: translateY(-2px); }
.tx-blog-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: brightness(0.7) contrast(1.05);
  transition: transform .4s, filter .3s;
}
.tx-blog-card:hover .tx-blog-card__img { transform: scale(1.04); filter: brightness(0.85); }
.tx-blog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,7,7,0.96) 0%, rgba(5,7,7,0.5) 50%, transparent 100%);
  z-index: 1;
}
.tx-blog-card > *:not(.tx-blog-card__img) { position: relative; z-index: 2; color: var(--tx-text); }
.tx-blog-card__tag {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--tx-sub);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  z-index: 3;
}
.tx-blog-card h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: #FFFFFF;
}
.tx-blog-card:first-child h3 { font-size: 28px; font-weight: 700; }
.tx-blog-card__sub {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

/* ─── NEWS / BLOG · DETAIL HERO ───────────────────────────────── */
.tx-news-hero {
  margin: 0 0 32px;
  border: 1px solid var(--tx-line);
  overflow: hidden;
  background: var(--tx-card);
  border-radius: 2px;
}
.tx-news-hero img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .tx-news-hero { margin-bottom: 20px; }
  .tx-news-hero img { max-height: 280px; }
}

/* ─── SOCIALS STRIP ───────────────────────────────────────────── */
.tx-socials {
  background: var(--tx-bg-3);
  padding: 72px 0 88px;
}
.tx-socials__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.tx-socials__head h2 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 36px;
  margin: 12px 0 0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.tx-socials__icons { display: flex; gap: 8px; }
.tx-socials__icon {
  width: 40px; height: 40px;
  border: 1px solid var(--tx-line-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--tx-text);
  transition: border-color .15s, color .15s, background .15s;
}
.tx-socials__icon:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-socials__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tx-socials__tile {
  position: relative;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-color: var(--tx-card);
  border: 1px solid var(--tx-line);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, border-color .15s;
}
.tx-socials__tile:hover { border-color: var(--tx-text-dim); transform: translateY(-2px); }
.tx-socials__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7));
  opacity: 0;
  transition: opacity .2s;
}
.tx-socials__tile:hover::after { opacity: 1; }
.tx-socials__tile-meta {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0;
  z-index: 2;
  transition: opacity .2s;
}
.tx-socials__tile:hover .tx-socials__tile-meta { opacity: 1; }

/* ─── PLP (PRODUKTÜBERSICHT) ──────────────────────────────────── */
.tx-plp-crumbs {
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-line);
  padding: 14px 0;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-plp-crumbs__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tx-plp-crumbs a:hover { color: var(--tx-mint); }
.tx-plp-crumbs em { font-style: normal; color: var(--tx-text); }
.tx-plp-crumbs__sep { color: var(--tx-mint); }

/* ─── PLP LANDING BANNER · Mode A (Wawi-Kategoriebild) ────────────
   Wird gerendert wenn die Kategorie in Wawi ein Bild zugewiesen hat
   (productlist/index.tpl). Full-width Marketing-Image über dem Intro,
   skaliert auf 100% Container-Breite, Höhe automatisch. JPG/PNG aus
   Wawi-Upload (WebP geht im Wawi-Bild-Tab nicht). */
/* PLP Title-Section — H1 über dem Banner-Bild (User-Request 2026-05-26).
   Reuse der Intro-H1-Typografie, kompaktere Top-Padding. */
.tx-plp-title {
  background: var(--tx-bg);
  padding: 40px 0 24px;
}
.tx-plp-title__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-plp-title h1 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF !important;
  margin: 0;
  max-width: 920px;
}
.tx-plp-title h1 em {
  font-style: normal;
  color: var(--tx-mint);
}
@media (max-width: 1024px) {
  .tx-plp-title h1 { font-size: 44px; }
}
@media (max-width: 880px) {
  .tx-plp-title { padding: 24px 0 16px; }
  .tx-plp-title__inner { padding: 0 20px; }
  .tx-plp-title h1 { font-size: 32px; }
}

.tx-plp-banner {
  background: var(--tx-bg);
  padding: 16px 0 0;
}
.tx-plp-banner__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-plp-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
@media (max-width: 880px) {
  .tx-plp-banner { padding: 8px 0 0; }
  .tx-plp-banner__inner { padding: 0; }
}

.tx-plp-intro {
  background: var(--tx-bg);
  /* 56px→16px oben (2026-07-13): Lead rückt näher an den H1, weniger
     „schwebender" Leerraum zwischen Titel und Beschreibung. */
  padding: 16px 0 40px;
  position: relative;
  overflow: hidden;
}
/* Hexagon-Pattern im Intro entfernt (User-Feedback 2026-07-13) —
   Beschreibung steht jetzt auf cleanem Flat-Background. */
.tx-plp-intro__inner {
  position: relative;
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-plp-intro h1 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF !important;
  margin: 0 0 24px;
  max-width: 920px;
}
.tx-plp-intro h1 em {
  font-style: normal;
  color: var(--tx-mint);
}
/* Kategorie-Beschreibung v3: kompletter Text oben im cleanen tx-cms-Look
   (wie Zahlungsarten/Versand-Seiten: schlichte Typo, kein Kasten, keine
   Akzentlinie). Default auf ~3 Zeilen geklappt (.is-clamped mit Fade),
   „Mehr lesen"-Toggle blendet den Rest ein. Voller Text im DOM = SEO ok. */
.tx-plp-intro__lead {
  font-family: var(--tx-body);
  font-size: 15.5px;
  color: var(--tx-text-dim);
  line-height: 1.65;
  /* volle Boxed-Breite (User-Wunsch, Systemtreff-Stil) — Breite kommt
     vom __inner-Container (1440px/32px) */
  max-width: none;
  margin: 0;
}
.tx-plp-intro__lead p { margin: 0 0 12px; }
.tx-plp-intro__lead p:last-child { margin-bottom: 0; }
.tx-plp-intro__lead.is-clamped {
  max-height: 5em; /* ~3 Zeilen bei lh 1.65 */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.tx-plp-intro__lead a {
  color: var(--tx-mint);
  border-bottom: 1px solid rgba(1,222,194,0.35);
  transition: border-color .15s;
}
.tx-plp-intro__lead a:hover { border-bottom-color: var(--tx-mint); }
.tx-plp-intro__lead strong { color: var(--tx-text); }
.tx-plp-intro__more {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 10px;
  font-family: var(--tx-sub);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tx-mint);
  cursor: pointer;
}
.tx-plp-intro__more:hover { text-decoration: underline; }

.tx-plp {
  background: var(--tx-bg);
  padding: 32px 0 80px;
}
.tx-plp__layout {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: flex-start;
}
.tx-plp__layout--no-sidebar {
  grid-template-columns: 1fr;
}

/* Sidebar — eigene Scrollbar (2026-07-17): sticky + Filterliste länger als
   Viewport hieß vorher, untere Filter erst nach Durchscrollen der ganzen
   Seite erreichbar. Jetzt scrollt die Sidebar im Viewport selbst. */
.tx-plp__sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--tx-line-2) transparent;
}
.tx-plp__sidebar::-webkit-scrollbar { width: 6px; }
.tx-plp__sidebar::-webkit-scrollbar-track { background: transparent; }
.tx-plp__sidebar::-webkit-scrollbar-thumb { background: var(--tx-line-2); }
.tx-plp__sidebar::-webkit-scrollbar-thumb:hover { background: var(--tx-text-mute); }
.tx-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-filter-head h2 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}
.tx-filter-head a {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tx-text-dim);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.tx-filter-head a:hover { color: var(--tx-mint); }

.tx-filter-section {
  border-bottom: 1px solid var(--tx-line);
  padding: 14px 0;
}
.tx-filter-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-text);
  padding: 4px 0;
  user-select: none;
}
.tx-filter-section__chev {
  font-size: 12px;
  color: var(--tx-text-dim);
  transition: transform .15s;
}
.tx-filter-section.is-open .tx-filter-section__chev { transform: rotate(180deg); color: var(--tx-mint); }
.tx-filter-section__body {
  padding: 12px 0 4px;
  display: none;
}
.tx-filter-section.is-open .tx-filter-section__body { display: block; }

/* Range slider (cosmetic) */
.tx-filter-range {
  display: flex;
  justify-content: space-between;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}
.tx-filter-range em { font-style: normal; }
.tx-filter-track {
  position: relative;
  height: 4px;
  background: var(--tx-line);
  margin: 6px 0 14px;
}
.tx-filter-track__range {
  position: absolute;
  top: 0; bottom: 0;
  left: 18%;
  right: 28%;
  background: var(--tx-mint);
  box-shadow: 0 0 12px rgba(1,222,194,0.5);
}
.tx-filter-track__handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--tx-bg);
  border: 2px solid var(--tx-mint);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(1,222,194,0.12);
}

/* Checkbox list */
.tx-filter-list { list-style: none; padding: 0; margin: 0; }
.tx-filter-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13.5px;
  color: var(--tx-text);
  cursor: pointer;
}
.tx-filter-list li:hover .tx-filter-check { border-color: var(--tx-text-dim); }
.tx-filter-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--tx-line-2);
  background: var(--tx-bg-3);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s, background .15s;
}
.tx-filter-list li.is-checked .tx-filter-check {
  background: var(--tx-mint);
  border-color: var(--tx-mint);
}
.tx-filter-list li.is-checked .tx-filter-check::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #062019;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tx-filter-list li > span:first-of-type { flex: 1; }
.tx-filter-list li .tx-filter-count {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
}

/* Top bar */
.tx-plp__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-plp__count {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.tx-plp__count em {
  font-style: normal;
  color: var(--tx-mint);
  margin-right: 4px;
}
.tx-plp__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.tx-plp__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tx-text);
  border: 1px solid var(--tx-line-2);
  background: rgba(1,222,194,0.04);
  padding: 5px 10px;
}
.tx-plp__chip button {
  background: none;
  border: 0;
  color: var(--tx-text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.tx-plp__chip button:hover { color: var(--tx-danger); }

.tx-plp__sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-plp__sort select {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--tx-text);
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line-2);
  padding: 8px 28px 8px 12px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2310E0B4' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.tx-plp__view {
  display: flex;
  gap: 4px;
}
.tx-plp__view button {
  width: 36px; height: 36px;
  border: 1px solid var(--tx-line-2);
  background: transparent;
  color: var(--tx-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tx-plp__view button.is-active { color: var(--tx-mint); border-color: var(--tx-mint); }

/* Card grid */
.tx-plp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* PLP card uses simpler spec list */
.tx-plp__grid .tx-product-card__specs--compact {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
}
.tx-plp__grid .tx-product-card__specs--compact > div {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(31,45,45,0.5);
}
.tx-plp__grid .tx-product-card__specs--compact > div:last-child { border-bottom: 0; }
.tx-plp__grid .tx-product-card__specs--compact dt {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--tx-text-mute);
  text-transform: uppercase;
}
.tx-plp__grid .tx-product-card__specs--compact dd {
  margin: 0;
  color: var(--tx-text);
  font-weight: 600;
}
.tx-plp__grid .tx-product-card__specs--compact dd em {
  font-style: normal;
  color: var(--tx-mint);
  font-weight: 700;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .tx-search { width: 200px; }
  .tx-search:focus-within { width: 240px; }
  .tx-nav__item { padding: 10px 11px; font-size: 12px; }
}
@media (max-width: 1180px) {
  .tx-search { display: none; }
  .tx-bestseller-grid { grid-template-columns: repeat(2, 1fr); }
  .tx-builtdiff__grid { grid-template-columns: repeat(2, 1fr); }
  .tx-syssel__body { grid-template-columns: 1fr 1fr; }
  .tx-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .tx-footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .tx-plp__layout { grid-template-columns: 220px 1fr; gap: 24px; }
  .tx-plp__grid { grid-template-columns: repeat(2, 1fr); }
  .tx-plp-intro h1 { font-size: 44px; }
}
@media (max-width: 880px) {
  .tx-plp__layout { grid-template-columns: 1fr; }
  .tx-plp__sidebar { position: static; max-height: none; overflow-y: visible; padding-right: 0; }
  .tx-plp__grid { grid-template-columns: 1fr; }
  .tx-blog__grid { grid-template-columns: 1fr; height: auto; }
  .tx-blog-card { aspect-ratio: 16/9; }
  .tx-blog-card:first-child { grid-row: auto; }
  .tx-socials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1180px) {
  .tx-blog__grid { height: 420px; }
}
@media (max-width: 880px) {
  .tx-hero__inner { grid-template-columns: 1fr; }
  .tx-hero__title { font-size: 56px; }
  .tx-config__inner { grid-template-columns: 1fr; }
  .tx-section-title { font-size: 36px; }
  .tx-nav, .tx-search, .tx-statusbar { display: none; }
  .tx-bestseller-grid, .tx-builtdiff__grid, .tx-syssel__body, .tx-partners__row { grid-template-columns: 1fr; }
  .tx-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .tx-footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}

/* Trustpilot-Collector als schlanke Footer-Zeile (Sammelphase) —
   zentriert zwischen Zahlarten und Rechtlichem. */
.tx-footer__trustpilot {
  max-width: 560px;
  margin: 26px auto 0;
}
.tx-footer__trustpilot .trustpilot-widget > a { color: var(--tx-mint); }

/* Trustpilot in der Social-Proof-Sektion („Was unsere Kunden sagen") —
   Review-Collector-Bar + Intro-Zeile, ersetzt die alten Demo-Karten. */
.tx-social-proof__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  color: var(--tx-text-dim);
  margin: 0 0 22px;
}
.tx-social-proof__lead a {
  color: var(--tx-mint);
  border-bottom: 1px solid rgba(1,222,194,0.35);
}
.tx-social-proof__lead a:hover { border-bottom-color: var(--tx-mint); }
.tx-social-proof__trustbox {
  max-width: 640px;
}
.tx-social-proof__trustbox .trustpilot-widget > a { color: var(--tx-mint); }

/* ─── PDP · Kundenbewertungen (#tab-votes) — dunkle Cards im Toxic-Frame,
   „Verifizierter Kauf"-Badge in Mint, Shop-Antworten mit Akzentlinie. ── */
.tx-pdp-reviews { background: var(--tx-bg); padding: 64px 0; }
.tx-pdp-reviews__inner { max-width: var(--tx-box); margin: 0 auto; padding: 0 32px; }
.tx-pdp-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tx-pdp-reviews__head h2 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 34px;
  margin: 8px 0 0;
  color: #fff;
}
.tx-pdp-reviews__avg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  color: var(--tx-text-dim);
}
.tx-pdp-reviews__stars { color: var(--tx-mint); letter-spacing: 2px; }
.tx-pdp-reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.tx-pdp-reviews__item {
  border: 1px solid var(--tx-line);
  background: rgba(255,255,255,0.02);
  padding: 20px 22px;
}
.tx-pdp-reviews__item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: #fff;
  font-family: var(--tx-sub); font-weight: 500;
}
.tx-pdp-reviews__text {
  font-family: var(--tx-body);
  font-size: 14px;
  color: var(--tx-text-dim);
  line-height: 1.6;
  margin: 0 0 14px;
}
.tx-pdp-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
}
.tx-pdp-reviews__badge {
  color: var(--tx-mint);
  border: 1px solid rgba(1,222,194,0.3);
  background: rgba(1,222,194,0.06);
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tx-pdp-reviews__answer {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--tx-mint);
  background: rgba(1,222,194,0.04);
  font-family: var(--tx-body);
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-pdp-reviews__empty {
  font-family: var(--tx-sub); font-weight: 500;
  color: var(--tx-text-dim);
  margin: 0 0 20px;
}
.tx-pdp-reviews__cta { margin: 0; display: inline-block; }
.tx-pdp-reviews__hint {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
  margin: 10px 0 0;
}
@media (max-width: 720px) {
  .tx-pdp-reviews { padding: 44px 0; }
  .tx-pdp-reviews__inner { padding: 0 20px; }
  .tx-pdp-reviews__head h2 { font-size: 26px; }
}

/* ─── PDP · Description headline + lead + perf strip ─────────── */
.tx-pdp-body__headline {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 12px 0 18px;
  color: var(--tx-text);
}
.tx-pdp-body__headline em {
  font-style: normal;
  color: var(--tx-mint);
  font-weight: 700;
  display: block;
}
.tx-pdp-body__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--tx-text);
  margin: 0 0 32px;
  max-width: 780px;
}
.tx-pdp-perfstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0 0 44px;
  border: 1px solid var(--tx-line-2);
  background: var(--tx-bg-3);
}
.tx-pdp-perfstrip__cell {
  padding: 22px 20px;
  border-right: 1px solid var(--tx-line-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-pdp-perfstrip__cell:last-child { border-right: 0; }
.tx-pdp-perfstrip__num {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tx-text);
}
.tx-pdp-perfstrip__num em {
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-text-dim);
  margin-left: 3px;
  letter-spacing: 0;
}
.tx-pdp-perfstrip__lbl {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
}

/* ─── PDP · Highlights — kicker, title, numbered cards ────────── */
.tx-pdp-highlights__title {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 12px 0 28px;
  color: var(--tx-text);
}
.tx-pdp-highlight {
  position: relative;
}
.tx-pdp-highlight__num {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--tx-mint);
  z-index: 2;
}

/* ─── PDP · Reviews (rating bars, filters, list, foot) ────────── */
.tx-pdp-reviews-summary {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid var(--tx-line-2);
  background: var(--tx-bg-3);
  margin-bottom: 32px;
}
.tx-pdp-reviews-summary__score { text-align: left; }
.tx-pdp-reviews-summary__score .tx-pdp-rating__big { margin-bottom: 4px; }
.tx-pdp-reviews-summary__count {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin-top: 6px;
}
.tx-pdp-reviews-summary__rec {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  color: var(--tx-text);
  margin-top: 8px;
}
.tx-pdp-reviews-summary__rec strong { color: var(--tx-mint); font-weight: 700; }

.tx-pdp-reviews-summary__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tx-pdp-rating-bar {
  display: grid;
  grid-template-columns: 36px 1fr 48px;
  align-items: center;
  gap: 14px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
}
.tx-pdp-rating-bar__lbl {
  color: var(--tx-text-dim);
  font-weight: 600;
}
.tx-pdp-rating-bar__track {
  height: 8px;
  background: var(--tx-bg);
  border: 1px solid var(--tx-line);
  position: relative;
  overflow: hidden;
}
.tx-pdp-rating-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tx-mint);
  display: block;
}
.tx-pdp-rating-bar__pct {
  color: var(--tx-text);
  font-weight: 600;
  text-align: right;
}

.tx-pdp-review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.tx-pdp-review-filter {
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tx-pdp-review-filter small {
  font-family: var(--tx-sub);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx-text-mute);
  font-weight: 600;
}
.tx-pdp-review-filter:hover { color: var(--tx-text); border-color: var(--tx-text-dim); }
.tx-pdp-review-filter.is-active {
  color: var(--tx-mint);
  border-color: var(--tx-mint);
}
.tx-pdp-review-filter.is-active small { color: var(--tx-mint); }

.tx-pdp-reviews-list { margin-top: 8px; }
.tx-pdp-review { padding: 22px 0; }
.tx-pdp-review__head strong { color: var(--tx-text); font-weight: 700; }
.tx-pdp-review__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
  letter-spacing: 0.04em;
}
.tx-pdp-review__vote {
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  margin-left: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tx-pdp-review__vote:hover { border-color: var(--tx-mint); color: var(--tx-mint); }

.tx-pdp-reviews-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ─── PDP · Hero rating (Sterne neben dem Produktnamen) ────────── */
.tx-pdp-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  color: var(--tx-text-dim);
}
.tx-pdp-hero__stars {
  color: var(--tx-mint);
  letter-spacing: 3px;
  font-size: 16px;
}
.tx-pdp-hero__rating strong {
  color: var(--tx-text);
  font-weight: 700;
  font-size: 15px;
}
.tx-pdp-hero__rating a {
  color: var(--tx-text-dim);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s;
}
.tx-pdp-hero__rating a:hover { color: var(--tx-mint); }

/* ─── PDP · Erwartete Performance (FPS pro Spiel in Buybox) ──── */
.tx-pdp-hero__perf {
  margin: 22px 0 14px;
  padding: 18px 18px 14px;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line-2);
}
.tx-pdp-hero__perf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.tx-pdp-hero__perf-title {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-text);
}
.tx-pdp-hero__perf-meta {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-pdp-hero__perf-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) 1fr 76px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--tx-line);
}
.tx-pdp-hero__perf-row:last-of-type { border-bottom: 0; }
.tx-pdp-hero__perf-game {
  font-family: var(--tx-h);
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tx-pdp-hero__perf-game em {
  font-style: normal;
  font-family: var(--tx-sub);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  font-weight: 600;
}
.tx-pdp-hero__perf-bar {
  height: 6px;
  background: var(--tx-bg);
  border: 1px solid var(--tx-line);
  position: relative;
  display: block;
}
.tx-pdp-hero__perf-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tx-mint);
  display: block;
}
.tx-pdp-hero__perf-fps {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 18px;
  color: var(--tx-text);
  text-align: right;
  letter-spacing: -0.01em;
}
.tx-pdp-hero__perf-fps em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tx-text-mute);
  margin-left: 4px;
}
.tx-pdp-hero__perf-note {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx-text-mute);
  margin: 12px 0 0;
}

/* ─── PDP · Highlight Card · Spec-Pills (Spotlight-Feat-Style)
   Wert oben fett-weiß, Label unten dim, vertikale Spalten-Trenner.
   margin-top:auto klemmt das Pill-Grid ans Karten-Bottom — alle 3
   Karten flushen auf gleicher Höhe egal wie lang Title/Desc sind.
   text-overflow:ellipsis schneidet was nicht passt mit "…" ab. */
.tx-pdp-highlight__pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--tx-line);
  padding-top: 16px;
  margin-top: auto;
}
.tx-pdp-highlight__pills span {
  display: block;
  border-right: 1px solid var(--tx-line);
  padding: 0 14px;
  min-width: 0;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}
.tx-pdp-highlight__pills span:first-child { padding-left: 0; }
.tx-pdp-highlight__pills span:last-child {
  border-right: 0;
  padding-right: 0;
}
/* Karten ohne Specs (dünne Wawi-Daten) — Pills-Container nicht rendern,
   sonst hängt ein leerer Trennstrich am Boden und die Karte wirkt halbfertig. */
.tx-pdp-highlight__pills--empty { display: none; }
.tx-pdp-highlight__pills span strong {
  display: block;
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--tx-text);
  margin-bottom: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-pdp-highlight__pills span em {
  display: block;
  font-family: var(--tx-sub); font-weight: 600;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── PDP · Body Notice (Inline-Disclaimer im Intro) ─────────── */
.tx-pdp-body__notice {
  font-family: var(--tx-sub) !important; font-weight: 600;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--tx-text-dim) !important;
  background: var(--tx-bg-3);
  border-left: 2px solid var(--tx-mint);
  padding: 12px 16px !important;
  margin: 0 0 28px !important;
}
.tx-pdp-body__notice strong { color: var(--tx-text); font-weight: 700; letter-spacing: 0.04em; }
.tx-pdp-body__notice em { font-style: normal; color: var(--tx-mint); font-weight: 700; }

/* ─── PDP · Toxic Build-Prozess (4 Schritte, alternative Karten) ─ */
.tx-pdp-process {
  background: var(--tx-bg-3);
  padding: 56px 0 64px;
}
.tx-pdp-process__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-pdp-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}
.tx-pdp-process__steps li {
  background: var(--tx-bg);
  border: 1px solid var(--tx-line-2);
  padding: 26px 22px 22px;
  position: relative;
}
.tx-pdp-process__step {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--tx-mint);
  display: block;
  line-height: 1;
  margin-bottom: 14px;
  font-feature-settings: 'tnum';
}
.tx-pdp-process__steps h4 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--tx-text);
  line-height: 1.25;
}
.tx-pdp-process__steps p {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tx-text-dim);
  margin: 0;
}

/* ─── PDP · Disclaimer (Pflichthinweise am Ende des Rich Content) ─ */
.tx-pdp-disclaimer {
  background: var(--tx-bg);
  padding: 40px 0 56px;
}
.tx-pdp-disclaimer__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tx-pdp-disclaimer__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--tx-line);
}
.tx-pdp-disclaimer__row:first-child { border-top: 0; padding-top: 0; }
.tx-pdp-disclaimer__lbl {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  padding-top: 4px;
}
.tx-pdp-disclaimer__row p {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx-text-dim);
  margin: 0;
}
.tx-pdp-disclaimer__row p strong { color: var(--tx-text); font-weight: 700; }

@media (max-width: 880px) {
  .tx-pdp-process__steps { grid-template-columns: 1fr 1fr; }
  .tx-pdp-disclaimer__row { grid-template-columns: 1fr; gap: 6px; }
  .tx-pdp-hero__perf-row { grid-template-columns: 1fr 60px; }
  .tx-pdp-hero__perf-bar { display: none; }
}

@media (max-width: 880px) {
  .tx-pdp-body__headline { font-size: 32px; }
  .tx-pdp-perfstrip { grid-template-columns: repeat(2, 1fr); }
  .tx-pdp-perfstrip__cell { border-right: 1px solid var(--tx-line-2); border-bottom: 1px solid var(--tx-line-2); }
  .tx-pdp-perfstrip__cell:nth-child(2n) { border-right: 0; }
  .tx-pdp-perfstrip__cell:last-child { border-bottom: 0; }
  .tx-pdp-reviews-summary { grid-template-columns: 1fr; gap: 24px; }
  .tx-pdp-highlights__title { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE · Promo (Crimson Desert / Bundle / etc.)
   Composer-orientiert: jeder Block ist ein eigenes Section-Element
   mit klar abgegrenzten Feldern (Bild, Headline, Text, CTA, Liste).
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO ─────────────────────────────────────────────────────── */
.tx-lp-hero {
  position: relative;
  background: var(--tx-bg);
  overflow: hidden;
  border-bottom: 1px solid var(--tx-line);
}
.tx-lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 75% 50%, rgba(var(--lp-accent-rgb), 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 90%, rgba(1, 222, 194, 0.06), transparent 50%),
    linear-gradient(180deg, #0F1112 0%, #0B0C0D 70%);
}
.tx-lp-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%231F2528' stroke-width='1'/></svg>");
  opacity: 0.18;
}
.tx-lp-hero .tx-container { position: relative; z-index: 1; }
.tx-lp-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 540px;
  padding: 72px 0 80px;
}
.tx-lp-hero__content { max-width: 620px; }
.tx-lp-hero__title {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 84px;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 16px 0 12px;
  color: var(--tx-text);
}
.tx-lp-hero__title em {
  font-style: normal;
  display: block;
  color: var(--tx-text);
  background: linear-gradient(90deg, #FFFFFF 0%, var(--lp-accent-light) 60%, var(--lp-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tx-lp-hero__sub {
  font-family: var(--tx-sub);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin: 0 0 18px;
}
.tx-lp-hero__desc {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tx-text);
  margin: 0 0 28px;
  max-width: 520px;
}
.tx-lp-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tx-lp-hero__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--tx-line);
}
.tx-lp-hero__brands span {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  opacity: 0.75;
}
.tx-lp-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}
.tx-lp-hero__halo {
  position: absolute;
  inset: 50% 0 0 0;
  background: radial-gradient(ellipse at center, rgba(var(--lp-accent-rgb), 0.25), transparent 65%);
  filter: blur(20px);
  z-index: 0;
}
.tx-lp-hero__visual img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 480px;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 40px rgba(var(--lp-accent-rgb), 0.25));
}

/* ─── TRUST-STRIP ─────────────────────────────────────────────── */
.tx-lp-trust {
  background: var(--tx-bg-2);
}
.tx-lp-trust .tx-uspbar__inner {
  grid-template-columns: repeat(3, 1fr);
}

/* ─── INTRO (zentriert) ───────────────────────────────────────── */
.tx-lp-intro {
  background: var(--tx-bg);
  padding: 80px 0 56px;
}
.tx-lp-intro__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 0 32px;
}
.tx-lp-intro__inner .tx-kicker { justify-content: center; }
.tx-lp-intro__inner .tx-section-title { margin-top: 12px; }
.tx-lp-intro__inner .tx-section-sub {
  margin: 18px auto 0;
  text-align: center;
  max-width: 720px;
}

/* ─── FEATURE-CARDS ───────────────────────────────────────────── */
.tx-lp-features {
  background: var(--tx-bg);
  padding: 24px 0 88px;
}
.tx-lp-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tx-lp-feature {
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  display: flex;
  flex-direction: column;
  transition: border-color .18s, transform .2s;
}
.tx-lp-feature:hover { border-color: var(--tx-text-dim); transform: translateY(-3px); }
.tx-lp-feature__media {
  aspect-ratio: 16/10;
  background:
    radial-gradient(ellipse at center, rgba(var(--lp-accent-rgb), 0.16), transparent 70%),
    var(--tx-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--tx-line);
  overflow: hidden;
  position: relative;
}
.tx-lp-feature__media img {
  max-width: 70%;
  max-height: 80%;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6));
}
.tx-lp-feature__body { padding: 24px 26px 28px; }
.tx-lp-feature__tag {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  display: block;
  margin-bottom: 10px;
}
.tx-lp-feature h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.1;
}
.tx-lp-feature p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tx-text-dim);
  margin: 0;
}

/* ─── BUNDLE-INCLUSION ───────────────────────────────────────── */
.tx-lp-bundle {
  background: var(--tx-bg-3);
  padding: 88px 0;
  position: relative;
}
.tx-lp-bundle__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.tx-lp-bundle__copy .tx-section-title { margin-top: 12px; }
.tx-lp-bundle__copy .tx-section-title em {
  display: block;
  background: linear-gradient(90deg, #FFFFFF 0%, var(--lp-accent-light) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tx-lp-bundle__items {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  font-family: var(--tx-sub); font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tx-lp-bundle__items li {
  padding: 14px 0;
  border-top: 1px solid var(--tx-line);
  font-size: 15px;
  color: var(--tx-text-dim);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-left: 28px;
}
.tx-lp-bundle__items li:last-child { border-bottom: 1px solid var(--tx-line); }
.tx-lp-bundle__items li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--tx-mint);
  font-weight: 700;
  font-size: 14px;
}
.tx-lp-bundle__items li strong { color: var(--tx-text); font-weight: 700; }

.tx-lp-bundle__visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tx-lp-bundle__chip,
.tx-lp-bundle__pass {
  background: var(--tx-bg);
  border: 1px solid var(--tx-line-2);
  padding: 28px 28px 26px;
  position: relative;
  overflow: hidden;
}
.tx-lp-bundle__chip {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(var(--lp-accent-rgb), 0.18), transparent 60%),
    var(--tx-bg);
  min-height: 180px;
}
.tx-lp-bundle__pass {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(1, 222, 194, 0.12), transparent 60%),
    var(--tx-bg);
  min-height: 130px;
}
.tx-lp-bundle__chip-tag {
  display: inline-block;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-bottom: 14px;
}
.tx-lp-bundle__chip-title {
  display: block;
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin-bottom: 6px;
  line-height: 1.05;
}
.tx-lp-bundle__chip-sub {
  font-style: normal;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--tx-text-dim);
}

/* ─── FINANZIERUNG ────────────────────────────────────────────── */
.tx-lp-finance {
  background: var(--tx-bg);
  padding: 80px 0;
}
.tx-lp-finance__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.tx-lp-finance__copy .tx-section-title { margin-top: 12px; }
.tx-lp-finance__copy .tx-section-title em {
  display: block;
  color: var(--tx-mint);
  font-style: normal;
}
.tx-lp-finance__copy .tx-btn { margin-top: 24px; }
.tx-lp-finance__visual {
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line-2);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tx-lp-finance__partner {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--tx-text);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-lp-finance__partner em {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--tx-text-dim);
  margin-top: 4px;
  font-weight: 600;
}
.tx-lp-finance__legal {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tx-text-mute);
  margin: 0;
}

/* ─── PRODUCT-GRID Wrapper ────────────────────────────────────── */
.tx-lp-products {
  background: var(--tx-bg-3);
  padding: 80px 0 96px;
}
.tx-lp-products .tx-bestseller-grid {
  margin-top: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1180px) {
  .tx-lp-products .tx-bestseller-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tx-lp-products .tx-bestseller-grid { grid-template-columns: 1fr; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .tx-lp-hero__title { font-size: 64px; }
  .tx-lp-features__grid { grid-template-columns: 1fr 1fr; }
  .tx-lp-features__grid .tx-lp-feature:last-child { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .tx-lp-hero__inner { grid-template-columns: 1fr; min-height: 0; padding: 56px 0 64px; }
  .tx-lp-hero__title { font-size: 44px; }
  .tx-lp-hero__sub { font-size: 14px; letter-spacing: 0.14em; }
  .tx-lp-hero__desc { font-size: 15px; }
  .tx-lp-hero__visual { min-height: 280px; }
  .tx-lp-features__grid { grid-template-columns: 1fr; }
  .tx-lp-features__grid .tx-lp-feature:last-child { grid-column: auto; }
  .tx-lp-bundle__grid,
  .tx-lp-finance__grid { grid-template-columns: 1fr; gap: 32px; }
  .tx-lp-trust .tx-uspbar__inner { grid-template-columns: 1fr; }
  .tx-lp-bundle__chip-title { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SWEEP · finale Mobile-Coverage für alle Seiten
   Breakpoints: 880 (tablet/landscape), 720 (small tablet),
                480 (phone)
   ═══════════════════════════════════════════════════════════════ */

/* ─── HAMBURGER NAV ───────────────────────────────────────────── */
.tx-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--tx-text);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s;
}
.tx-nav-toggle:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-nav-toggle svg { width: 20px; height: 20px; }

/* Hamburger-Toggle nur auf Mobile sichtbar */
.tx-mobnav-toggle { display: none !important; }
@media (max-width: 980px) {
  .tx-mobnav-toggle { display: inline-flex !important; }
  .tx-nav { display: none; }
}

.tx-mobnav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}
.tx-mobnav.is-open { display: block; }
.tx-mobnav.is-open .tx-mobnav__panel { transform: translateX(0); }
.tx-mobnav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--tx-bg-2);
  border-left: 1px solid var(--tx-line);
  padding: 24px 22px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.tx-mobnav__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-mobnav__head img { height: 28px; }
.tx-mobnav__close {
  background: transparent;
  border: 0;
  color: var(--tx-text);
  cursor: pointer;
  padding: 6px;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tx-mobnav__close:hover { color: var(--tx-mint); }
.tx-mobnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tx-mobnav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-text);
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-mobnav__list a:hover,
.tx-mobnav__list a.is-active { color: var(--tx-mint); }
.tx-mobnav__list a span { color: var(--tx-text-mute); font-weight: 500; font-size: 14px; }
.tx-mobnav__usp {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tx-mobnav__usp svg { width: 16px; height: 16px; color: var(--tx-mint); margin-right: 8px; flex-shrink: 0; }
.tx-mobnav__usp > div { display: flex; align-items: center; }
.tx-mobnav__footer {
  border-top: 1px solid var(--tx-line);
  padding: 16px 0 0;
  margin-top: 8px;
}
.tx-mobnav__account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font: 500 0.875rem/1 'Inter', sans-serif;
  color: rgba(236,239,238,.7);
  text-decoration: none;
  transition: color .15s;
}
.tx-mobnav__account:hover, .tx-mobnav__account:focus { color: var(--tx-mint); }
.tx-mobnav__cta { margin-top: 16px; }
.tx-mobnav__cta .tx-btn { width: 100%; }
.tx-mobnav__body { flex: 1; padding: 18px 0; }
.tx-mobnav__item {
  display: block;
  padding: 14px 0;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--tx-line);
}
.tx-mobnav__item:hover,
.tx-mobnav__item:focus { color: var(--tx-mint) !important; }

/* ─── Mobile Nav · Expandable Sub-Groups (<details>) ─────────────
   <details>/<summary> liefert das Open/Close-Verhalten ohne Extra-JS.
   Default-Marker des UA wird ausgeblendet (Chevron rotiert per CSS). */
.tx-mobnav__group { border-bottom: 1px solid var(--tx-line); }
.tx-mobnav__group > summary { list-style: none; cursor: pointer; }
.tx-mobnav__group > summary::-webkit-details-marker { display: none; }
.tx-mobnav__item--has-sub {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0 !important;
}
.tx-mobnav__chev {
  color: var(--tx-text-mute);
  font-size: 12px;
  transition: transform .2s ease;
}
.tx-mobnav__group[open] > summary .tx-mobnav__chev { transform: rotate(180deg); color: var(--tx-mint); }
.tx-mobnav__group[open] > summary .tx-mobnav__item--has-sub > span:first-child { color: var(--tx-mint); }
.tx-mobnav__sub {
  display: flex;
  flex-direction: column;
  padding: 4px 0 16px 12px;
  border-left: 2px solid var(--tx-line);
  margin-left: 4px;
}
.tx-mobnav__sublink {
  display: block;
  padding: 10px 4px;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--tx-text-dim) !important;
  text-decoration: none !important;
}
.tx-mobnav__sublink:hover,
.tx-mobnav__sublink:focus { color: var(--tx-mint) !important; }
.tx-mobnav__sublink--all {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-mint) !important;
  padding: 8px 4px 12px;
}
.tx-mobnav__subgroup { padding: 6px 0 4px; }
.tx-mobnav__subhead {
  margin: 8px 0 2px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}

body.is-nav-open { overflow: hidden; }

/* ─── HEADER · Mobile-spezifisch ──────────────────────────────── */
@media (max-width: 1024px) {
  .tx-header__inner { padding: 14px 20px; gap: 16px; }
}

@media (max-width: 880px) {
  .tx-nav-toggle { display: inline-flex; }
  .tx-nav { display: none; }
  .tx-header__inner { gap: 12px; }
  .tx-iconbar { gap: 6px; }
  .tx-iconbar .tx-icon-btn { width: 36px; height: 36px; }
  .tx-statusbar { display: none; }
}

/* ─── HOMEPAGE · Hero ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tx-hero { min-height: 600px; padding: 56px 0 48px; }
  .tx-hero__title { font-size: 72px; }
}

@media (max-width: 880px) {
  .tx-hero { min-height: auto; padding: 40px 0 48px; }
  .tx-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .tx-hero__sidebar { display: none; }
  .tx-hero__title { font-size: 44px; }
  .tx-hero__lead { font-size: 16px; margin: 18px 0 24px; }
  /* Eine Reihe bleibt eine Reihe — nur Abstaende/Groessen enger. */
  .tx-hero__stats { gap: 10px; max-width: none; }
  .tx-stat { padding: 12px 14px; }
  .tx-stat__val { font-size: 16px; }
  .tx-hero__visual { aspect-ratio: 4/3; }
  .tx-hero__visual img { max-height: 320px; }
  .tx-hero-slider__arrow { width: 36px; height: 36px; }
  .tx-hero-slider__arrow--prev { left: 8px; }
  .tx-hero-slider__arrow--next { right: 8px; }
}

@media (max-width: 480px) {
  .tx-hero__title { font-size: 34px; }
  .tx-hero__lead { font-size: 15px; }
  .tx-hero__cta .tx-btn { font-size: 12px; padding: 14px 18px; }
  /* KEIN 2-Reihen-Umbruch mehr (war: 1fr 1fr + 3. Box volle Breite).
     Kompakter, aber lesbar; passt auf gaengigen Phones in eine Reihe.
     Sehr lange GPU-Namen lassen die Reihe sanft horizontal scrollen,
     statt die Boxen zu zerreissen. */
  .tx-hero__stats { gap: 8px; }
  .tx-stat { padding: 10px 12px; }
  .tx-stat__label { font-size: 11px; letter-spacing: 0.14em; }
  .tx-stat__val { font-size: 14px; margin-top: 3px; }
  .tx-hero-slider__arrow { display: none; }
  .tx-hero__hud { font-size: 11px; top: 12px; left: 12px; }
}

/* ─── HOMEPAGE · USP-Bar ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .tx-uspbar__inner { grid-template-columns: repeat(2, 1fr); }
  .tx-usp:nth-child(2n) { border-right: 0; }
  .tx-usp { padding: 12px 18px; }
}
@media (max-width: 480px) {
  .tx-uspbar__inner { grid-template-columns: 1fr; padding: 0 20px; }
  .tx-usp { border-right: 0; border-bottom: 1px solid var(--tx-line); }
  .tx-usp:last-child { border-bottom: 0; }
}

/* ─── HOMEPAGE · Section-Heads & Container Padding ────────────── */
@media (max-width: 720px) {
  .tx-container { padding: 0 20px; }
  .tx-section { padding: 64px 0; }
  .tx-section__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
  .tx-section__head > div:nth-child(2) { align-self: stretch; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .tx-container { padding: 0 16px; }
  .tx-section { padding: 48px 0; }
}

/* ─── HOMEPAGE · Cats-Grid (Wähle dein System) ────────────────── */
@media (max-width: 1024px) {
  .tx-cats__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; height: auto; gap: 14px; }
  .tx-cats__grid .tx-cat:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16/9; }
  .tx-cats__grid .tx-cat { aspect-ratio: 4/3; }
}
@media (max-width: 720px) {
  .tx-cats__grid { grid-template-columns: 1fr; }
  .tx-cats__grid .tx-cat:first-child { grid-column: auto; }
}

/* ─── HOMEPAGE · Syssel (Dein Gaming PC) ──────────────────────── */
@media (max-width: 1180px) {
  .tx-syssel__body { grid-template-columns: 280px repeat(3, 1fr); }
  .tx-syssel__body .tx-syssel-card:nth-child(5) { display: none; }
}
@media (max-width: 880px) {
  .tx-syssel__body { grid-template-columns: 1fr 1fr; padding: 24px 20px; }
  .tx-syssel__body .tx-syssel-card:nth-child(5) { display: flex; }
  .tx-syssel__intro { grid-column: 1 / -1; }
  .tx-syssel__head { padding: 48px 20px 16px; }
}
@media (max-width: 480px) {
  .tx-syssel__body { grid-template-columns: 1fr; }
  .tx-syssel__intro h3 { font-size: 22px; }
}

/* ─── HOMEPAGE · Partners (Highlights) ────────────────────────── */
@media (max-width: 720px) {
  .tx-partners__row,
  .tx-partners__second { grid-template-columns: 1fr; }
  .tx-partner-card { aspect-ratio: 4/3; padding: 24px; }
  .tx-partner-card h3 { font-size: 28px; }
  .tx-partner-mini { padding: 22px; min-height: 180px; }
}

/* ─── HOMEPAGE · Built-Different ──────────────────────────────── */
@media (max-width: 720px) {
  .tx-builtdiff__grid { grid-template-columns: 1fr; gap: 14px; }
  .tx-pillar { min-height: auto; padding: 22px; }
  .tx-pillar h3 { font-size: 19px; }
}

/* ─── HOMEPAGE · Socials ──────────────────────────────────────── */
@media (max-width: 480px) {
  .tx-socials__grid { grid-template-columns: 1fr 1fr; }
  .tx-socials__head { gap: 12px; }
  .tx-socials__head h2 { font-size: 28px; }
}

/* ─── HOMEPAGE · Blog ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .tx-blog__grid { grid-template-columns: 1fr; height: auto; }
  .tx-blog-card { aspect-ratio: 16/10; min-height: 220px; }
  .tx-blog-card:first-child h3 { font-size: 24px; }
}

/* ─── HOMEPAGE · Logo-wall ────────────────────────────────────── */
@media (max-width: 720px) {
  /* zentriert statt linksbündig — die Reihe bricht hier um und eine
     angebrochene letzte Zeile sähe linksbündig abgerissen aus */
  .tx-partners__logos { gap: 18px 28px; justify-content: center; }
  .tx-partners__logos div { font-size: 14px; }
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .tx-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .tx-footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
@media (max-width: 480px) {
  .tx-footer__cols { grid-template-columns: 1fr; }
  .tx-footer__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tx-footer__legal { gap: 4px 14px; }
}

/* ─── PDP · Mobile ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tx-pdp-hero__inner { padding: 0 20px; }
  .tx-pdp-hero h1 { font-size: 30px; }
  .tx-pdp-hero__keyspecs { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .tx-pdp-hero__price { font-size: 36px; }
  .tx-pdp-hero__cta { flex-direction: column; }
  .tx-pdp-hero__cta .tx-btn { width: 100%; }
  .tx-pdp-tabs__inner { padding: 0 20px; }
  .tx-pdp-tabs__item { padding: 14px 16px; font-size: 12px; }
  .tx-pdp-spotlight__features { grid-template-columns: 1fr 1fr; }
  .tx-pdp-process__steps { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tx-pdp-hero h1 { font-size: 26px; }
  .tx-pdp-hero__price { font-size: 30px; }
  .tx-pdp-hero__price-row { flex-wrap: wrap; gap: 8px; }
}

/* ─── PLP · Mobile ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tx-plp-intro { padding: 12px 20px 24px; }
  .tx-plp-intro h1 { font-size: 32px; }
  .tx-plp__layout { padding: 0 20px; }
  .tx-plp-tabs { gap: 6px; flex-wrap: wrap; }
  .tx-plp-tabs__item { padding: 10px 14px; font-size: 12px; }
}

/* Konfigurator-Mobile-Regeln liegen in configurator.css */

/* ─── CART / WARENKORB · Mobile ───────────────────────────────── */
@media (max-width: 880px) {
  .tx-cart__layout { grid-template-columns: 1fr; }
  .tx-cart__aside { position: static; }
}
@media (max-width: 720px) {
  .tx-cart__item { grid-template-columns: 80px 1fr; gap: 14px; padding: 16px 0; }
  .tx-cart__item-foot { grid-column: 1 / -1; }
}

/* ─── LANDING · zusätzliches Mobile-Tuning ────────────────────── */
@media (max-width: 720px) {
  .tx-lp-hero__title { font-size: 38px; }
  .tx-lp-hero__cta { flex-direction: column; align-items: stretch; }
  .tx-lp-hero__cta .tx-btn { width: 100%; }
  .tx-lp-hero__brands { gap: 16px 24px; padding-top: 18px; }
  .tx-lp-hero__brands span { font-size: 12px; }
  .tx-lp-features { padding: 16px 0 56px; }
  .tx-lp-bundle,
  .tx-lp-finance,
  .tx-lp-products { padding: 56px 0; }
  .tx-lp-bundle__items li { font-size: 14px; padding: 12px 0 12px 24px; }
}
@media (max-width: 480px) {
  .tx-lp-hero__title { font-size: 30px; }
  .tx-lp-bundle__chip-title,
  .tx-lp-finance__partner { font-size: 18px; }
}

/* ─── HEADER-ICONBAR Light-Mode Mobile-Drawer ─────────────────── */
[data-theme="light"] .tx-mobnav { background: rgba(0,0,0,0.45); }
[data-theme="light"] .tx-mobnav__panel { background: var(--tx-bg-2); }

/* ════════════════════════════════════════════════════════════════
   THERMAL GRIZZLY · CO-BRAND STRIP (PDP)
   Dezenter Übergang Hero → Rich-Content. Original-Logo behält
   seine Markenfarbe; der Rahmen drumherum ist transparent/dezent.
   ════════════════════════════════════════════════════════════════ */
:root {
  --tg-orange: #ff6b1a;
  --tg-orange-soft: rgba(255, 107, 26, 0.08);
  --tg-orange-line: rgba(255, 107, 26, 0.22);
}
[data-theme="light"] {
  --tg-orange: #d6470a;
  --tg-orange-soft: rgba(214, 71, 10, 0.06);
  --tg-orange-line: rgba(214, 71, 10, 0.25);
}

.tx-tg-strip {
  background: var(--tx-bg);
  padding: 18px 0 26px;
  position: relative;
}
.tx-tg-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tx-tg-strip__lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--tx-text-mute);
  text-transform: uppercase;
}
.tx-tg-strip__lockup-mark--tg { color: var(--tg-orange); }
.tx-tg-strip__lockup-x { opacity: 0.5; font-weight: 400; }

.tx-tg-strip__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 18px 22px;
  background: var(--tg-orange-soft);
  border: 1px solid var(--tg-orange-line);
  border-left: 3px solid var(--tg-orange);
  border-radius: 4px;
}

.tx-tg-strip__logo {
  width: 130px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.tx-tg-strip__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Hide fallback when a real logo image is present as sibling */
.tx-tg-strip__logo:has(img) .tx-tg-strip__logo-fallback { display: none; }

.tx-tg-strip__logo-fallback {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.tx-tg-strip__logo-fallback em {
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--tg-orange);
  letter-spacing: -0.01em;
}
.tx-tg-strip__logo-fallback strong {
  font-style: normal;
  font-weight: 800;
  font-size: 19px;
  color: var(--tg-orange);
  letter-spacing: 0.02em;
}

.tx-tg-strip__copy { min-width: 0; }
.tx-tg-strip__title {
  font-family: var(--tx-sub);
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-text);
  margin: 0 0 4px;
  letter-spacing: 0.005em;
}
.tx-tg-strip__title strong { color: var(--tg-orange); font-weight: 700; }
.tx-tg-strip__lead {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  margin: 0;
  line-height: 1.55;
}
.tx-tg-strip__lead strong { color: var(--tx-text); font-weight: 600; }

.tx-tg-strip__cta {
  font-family: var(--tx-sub);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx-mint);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid rgba(1,222,194,0.32);
  padding: 11px 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s ease;
}
.tx-tg-strip__cta:hover {
  background: var(--tx-mint-soft);
  border-color: var(--tx-mint);
}
.tx-tg-strip__cta .tx-arr { font-size: 10px; }

@media (max-width: 820px) {
  .tx-tg-strip__main {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    text-align: left;
  }
  .tx-tg-strip__logo { width: 110px; height: 44px; }
  .tx-tg-strip__cta { justify-content: center; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   DIRECT-CART CTA · Klassen-abhängige Sichtbarkeit
   Default: Direct-Cart sichtbar.
   Versteckt für: flagship, enthusiast (= JTL High-End Tier).
   In JTL: <body data-system-class="..."> aus Custom-Feld setzen.
   ════════════════════════════════════════════════════════════════ */
body[data-system-class="flagship"] .tx-pdp-hero__cta--direct,
body[data-system-class="enthusiast"] .tx-pdp-hero__cta--direct {
  display: none;
}

/* ════════════════════════════════════════════════════════════════
   BRAND-STRIP · "Wir bauen mit den Besten"
   Greyscale-Logos → Hover Color. Text-Fallback kommt aus
   <img onerror>, falls SVG nicht existiert.
   In JTL: weitere <li>-Items im Markup duplizieren.
   ════════════════════════════════════════════════════════════════ */
.tx-brandstrip {
  background: var(--tx-bg-2);
  border-top: 1px solid var(--tx-line);
  padding: 56px 0 48px;
}
.tx-brandstrip__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.tx-brandstrip__head {
  text-align: center;
  margin-bottom: 32px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.tx-brandstrip__head .tx-kicker {
  display: inline-block;
  margin-bottom: 12px;
}
.tx-brandstrip__head h2 {
  font-family: var(--tx-h);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tx-text);
  margin: 0 0 10px;
}
.tx-brandstrip__head p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx-text-dim);
  margin: 0;
}

.tx-brandstrip__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--tx-line);
  border: 1px solid var(--tx-line);
}
.tx-brandstrip__logo {
  background: var(--tx-bg-2);
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  filter: grayscale(1) brightness(0.85);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.tx-brandstrip__logo:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
  background: var(--tx-bg-3);
}
.tx-brandstrip__logo img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* Text-Fallback wenn Logo-SVG fehlt — wird via onerror eingesetzt */
.tx-brandstrip__logo-fb {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--tx-text);
  text-transform: uppercase;
  white-space: nowrap;
}
.tx-brandstrip__logo-fb--tg {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  letter-spacing: 0;
  text-transform: none;
}
.tx-brandstrip__logo-fb--tg em {
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: #ff6b1a;
}
.tx-brandstrip__logo-fb--tg strong {
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
  color: #ff6b1a;
}

@media (max-width: 880px) {
  .tx-brandstrip__logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .tx-brandstrip { padding: 40px 0 32px; }
  .tx-brandstrip__head h2 { font-size: 22px; }
  .tx-brandstrip__logos { grid-template-columns: repeat(3, 1fr); }
  .tx-brandstrip__logo { height: 76px; padding: 14px 16px; }
  .tx-brandstrip__logo img { max-height: 36px; }
  .tx-brandstrip__logo-fb { font-size: 13px; }
}
@media (max-width: 380px) {
  .tx-brandstrip__logos { grid-template-columns: repeat(2, 1fr); }
}


/* ─── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── CONTACT PAGE OVERRIDES ──────────────────────────────────── */
/* Wider container for 2-col contact layout */
.tx-legal--contact .tx-legal__inner {
  max-width: 1040px;
}

/* Mobile touch targets for form inputs */
@media (max-width: 600px) {
  .tx-contact-form__input,
  .tx-contact-form__select,
  .tx-contact-form__textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}

/* Error state: field-level message */
.tx-contact-form__error {
  display: none;
  font-size: 12px;
  color: #ff5252;
  margin-top: 4px;
  font-weight: 500;
}
.tx-contact-form__group--invalid .tx-contact-form__error { display: block; }
.tx-contact-form__group--invalid .tx-contact-form__input,
.tx-contact-form__group--invalid .tx-contact-form__select,
.tx-contact-form__group--invalid .tx-contact-form__textarea {
  border-color: #ff5252;
  border-bottom-color: #ff5252;
}
.tx-contact-form__group--valid .tx-contact-form__input,
.tx-contact-form__group--valid .tx-contact-form__select {
  border-bottom-color: var(--tx-mint);
}

/* Trust items: cursor feedback */
.tx-contact-trust__item[href],
.tx-contact-trust__item--link { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   TOXIC FONT SYSTEM — final cascade overrides
   Loaded last so it beats earlier var(--tx-h) defaults.

   Oxanium       → big section headings & display titles
   Rajdhani      → PC product names (long, must stay readable)
   Share Tech    → tech accents (eyebrows, labels, statusbar, kbd, specs)
   Inter (body)  → paragraph text + buttons (CTA legibility)
   ═══════════════════════════════════════════════════════════════ */

/* Section headings → Oxanium (via --tx-h) */
h1, h2, h3, h4, h5, h6,
.tx-section-title,
.tx-section-title--big,
.tx-hero__title,
.tx-hero__title em,
.tx-cats__head h2,
.tx-cards-stack h2,
.tx-bestseller h2,
.tx-brandstrip__head h3,
.tx-builtdiff__head h2,
.tx-blog__head h2,
.tx-cfg-bd__head h2,
.tx-info-modal__title,
.tx-contact-faq__title,
.tx-contact-form-card__title,
.tx-megamenu__feature h3,
.tx-megamenu__col h5,
.tx-footer h5 {
  font-family: var(--tx-h);
  letter-spacing: -0.01em;
}

/* PC product names & configurator titles → Rajdhani (via --tx-sub)
   Slightly bumped weight + tracking — Rajdhani 600 looks lighter than Inter 700 */
.tx-product-card__name,
.tx-cfg-card__title,
.tx-cfg-opt__title,
.tx-cfg-sticky__name,
.tx-cart-item__main h3,
.tx-cart-item__main strong,
.tx-syssel-card h3,
.tx-cat h3,
.tx-cfg-detail h1,
.tx-cfg-detail__title,
h1.tx-pdp-title,
.tx-blog-card__sub {
  font-family: var(--tx-sub);
  font-weight: 600;
  letter-spacing: 0;
}

/* Tech accents → Share Tech Mono (via --tx-mono)
   Already wide-spaced by design — neutralize letter-spacing tweaks */
.tx-statusbar,
.tx-statusbar__item,
.tx-statusbar__right a,
.tx-cfg-buy__eyebrow,
.tx-stat__label,
.tx-usp__label,
.tx-contact-aside__label,
.tx-contact-form__label,
.tx-cfg-row__title,
.tx-cfg-filter-group__label,
.tx-cfg-sticky__pill-label,
.tx-cart-item__specs,
.tx-cart-item__tier,
.tx-cart__total-label,
.tx-cart__vat,
.tx-badge-tag,
.tx-badge-tag--new,
.tx-badge-tag--sale,
.tx-badge-tag--top,
.tx-badge-tag--recommended,
.tx-cfg-opt__badge,
.tx-cfg-crumbs,
.tx-breadcrumb,
.tx-search kbd,
kbd,
.tx-megamenu__feature h4,
.tx-blog-card__tag,
.tx-cfg-bd__num,
[class*="__eyebrow"] {
  font-family: var(--tx-mono); font-weight: 600;  letter-spacing: 0.07em;
}

/* Buttons & form inputs stay Inter — readability on CTAs is non-negotiable */
.tx-btn,
.tx-btn--primary,
.tx-btn--ghost,
.btn, .btn-primary, .btn-secondary, .btn-outline-primary,
button, input, select, textarea {
  font-family: var(--tx-body);
}

/* Search input itself stays Inter, but the kbd hint stays Share Tech (above) */
.tx-search input { font-family: var(--tx-body); }

/* Prices → Oxanium, dialed back per user feedback (was 700, "zu dick").
   500/600 reads as confident headline without the chunky Inter-Black look.
   Tabular nums keep digit columns aligned across rows. */
.tx-product-card__price,
.tx-cfg-card__price,
.tx-cfg-opt__price,
.tx-cfg-buy__price,
.tx-cfg-sticky__price,
.tx-cart__total-val,
.tx-cart-item__price,
.tx-syssel-card__price,
.tx-price__now {
  font-family: var(--tx-h);
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}
.tx-price__now { font-weight: 600; }
.tx-price__now--ask { font-weight: 500; }

/* Cap Oxanium-target headlines at weight 800 — Google Fonts ships Oxanium 200–800.
   Anything heavier triggers synthetic-bold fallback to Inter Black (the "zu dick" look
   the user flagged). Applied globally across our heading selectors. */
h1, h2, h3, h4, h5, h6,
.tx-section-title,
.tx-section-title--big,
.tx-hero__title,
.tx-hero__title em,
.tx-cats__head h2,
.tx-cards-stack h2,
.tx-bestseller h2,
.tx-brandstrip__head h3,
.tx-builtdiff__head h2,
.tx-blog__head h2,
.tx-cfg-bd__head h2,
.tx-info-modal__title,
.tx-contact-faq__title,
.tx-contact-form-card__title,
.tx-megamenu__feature h3,
.tx-megamenu__col h5,
.tx-footer h5 {
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   PLP CARD READABILITY PASS — 2026-04-28
   - Card title: clamp to 2 lines so long Wawi names don't blow up cards
   - Specs: switch from Rajdhani 13px → Inter 14px (proportional, scanable)
     Labels stay narrow tech-mono caps, values get full Inter width
   - Spec values: ellipsis on overflow so 80-char Wawi strings stay inline
   - Lagernd badge gone (BTO context — instant-stock will be its own cat)
   ═══════════════════════════════════════════════════════════════ */

.tx-product-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  min-height: 2.4em;
}

.tx-product-card__specs {
  font-family: var(--tx-body);
  font-size: 14px;
  line-height: 1.45;
}
.tx-product-card__specs dt {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  flex-shrink: 0;
  min-width: 56px;
}
.tx-product-card__specs dt::before { content: none; }
.tx-product-card__specs dd {
  font-family: var(--tx-body);
  font-weight: 500;
  color: var(--tx-text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  margin-left: 12px;
}

/* Sticky header: ensure no parent overflow:hidden breaks position:sticky.
   Belt-and-suspenders — the rule itself sits at line ~218, this just guards
   against future layout-block overflows (PLP/PDP main wraps). */
html, body { overflow-x: clip; }
main, .tx-page > main { overflow: visible; }

/* Equal card heights AND widths regardless of spec count or image size.
   - minmax(0, 1fr) forces equal columns; default 1fr is minmax(auto, 1fr) and
     auto resolves to min-content, so a wide image can blow up one column.
   - min-width: 0 on cards lets grid shrink them below their content width.
   - Body grows to fill, price-block pinned bottom — uniform foot alignment.
   - Em-dash placeholder for missing specs keeps the dl rows occupying space. */
/* Carousel layout — 4 cards visible per row, overflow scrolls horizontally.
   Header arrows (.tx-icon-btn[data-tx-bestseller-nav]) drive scroll via custom.js.
   `--tx-bs-cols` defines visible-cards-per-viewport at the current breakpoint;
   card flex-basis is computed against it so cards always align to the grid edges
   regardless of total pool size. scroll-snap keeps positions tidy. */
.tx-bestseller-grid {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  /* overflow-x:auto zwingt overflow-y per CSS-Spec auch auf auto (visible
     ist mit einer anderen Achse nicht erlaubt). Dadurch wurde der Card-
     Hover-Shadow oben/unten geclippt. Nur positives padding-top/bottom:
     gibt dem Hover-Lift Luft. KEIN negativer margin — der hat die Carousel-
     Box in den Section-Header (h2 „DIE MEISTVERKAUFTEN SYSTEME") gezogen,
     wo dann der Header die Card-Oberkante visuell „verschluckt" hat. */
  padding: 14px 4px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  --tx-bs-cols: 4;
}
.tx-bestseller-grid::-webkit-scrollbar { display: none; }
.tx-bestseller-grid > * {
  flex: 0 0 calc((100% - (var(--tx-bs-cols) - 1) * 20px) / var(--tx-bs-cols));
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 1180px) {
  .tx-bestseller-grid { --tx-bs-cols: 2; }
}
@media (max-width: 560px) {
  .tx-bestseller-grid { --tx-bs-cols: 1; }
}

/* Arrow disabled state when carousel is at start/end edge. */
.tx-icon-btn[disabled],
.tx-icon-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── PRODUCT CARD · stretched-link pattern ───────────────────
   The whole card is clickable via the title-anchor's ::after pseudo
   that spans inset:0 over the entire .tx-product-card. Real <button>
   elements (cart, fav) sit on z-index:2 above the stretch layer. */
.tx-product-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.tx-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tx-product-card__link {
  color: inherit !important;
  text-decoration: none !important;
  display: inline;
}
.tx-product-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tx-product-card:hover .tx-product-card__link { color: var(--tx-mint) !important; }

/* Lift interactive controls above the stretched-link layer.
   __fav und __badges sind absolut positioniert (top/left/right) — denen
   nur z-index geben, NICHT position überschreiben. CTA-Row und Cart-Form
   sind im Body-Flow, brauchen position:relative für z-index. */
.tx-product-card__fav,
.tx-product-card__badges { z-index: 3; }
.tx-product-card__cta-row,
.tx-product-card__cart-form { position: relative; z-index: 2; }

/* Em-dash for missing specs — muted so it doesn't compete with real values */
.tx-spec-dash { color: var(--tx-text-mute); font-weight: 400; }

/* PLP smooth-filter loading state — content dims during fetch+swap */
.tx-plp__layout.is-loading .tx-plp__content,
.tx-plp__layout.is-loading .tx-plp__sidebar {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity .12s ease;
}
.tx-plp__layout { transition: opacity .12s ease; }

/* "Preis auf Anfrage" reserved height: same vertical footprint as a real price */
.tx-price__now--ask {
  font-size: 22px;
  font-weight: 500;
  color: var(--tx-text-dim);
  letter-spacing: 0;
}

/* Financing line under the price */
/* Pflichtangabe nach PAngV — sie gehoert unmittelbar an den Preis, nicht nur
   in den Fuss der Seite. Bewusst gedaempft: sie muss lesbar sein, nicht
   auffallen. */
.tx-price__tax {
  font-family: var(--tx-body);
  font-size: 12px;
  line-height: 1.35;
  color: var(--tx-text-mute);
  margin-top: 3px;
}
/* Der Zusatz `.tx-product-card__foot` ist noetig, nicht schmueckend: das
   kritische CSS in header.tpl setzt `.tx-product-card__foot a { color: mint
   !important; text-decoration: none !important }`, damit beim ersten Malen
   kein NOVA-Gelb aufblitzt. Ein !important schlaegt jede Regel ohne — also
   waere dieser Rechtshinweis live mint und ohne Unterstreichung gewesen,
   direkt ueber dem ohnehin minten „Finanzierung". Zwei minte Links
   uebereinander sind einer zu viel; die Farbe soll zaehlbar bleiben.
   (Im Pruefgeruest faellt das nicht auf — dort fehlt das Inline-CSS. Das
   Geruest laedt es seit dieser Runde mit.) */
.tx-product-card__foot .tx-price__tax a {
  color: var(--tx-text-dim) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.tx-product-card__foot .tx-price__tax a:hover { color: var(--tx-mint) !important; }

.tx-price__finance {
  font-family: var(--tx-body);
  font-size: 12px;
  color: var(--tx-text-dim);
  line-height: 1.4;
  margin-top: 2px;
}
.tx-price__finance-link {
  color: var(--tx-mint) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.tx-price__finance-link:hover { color: var(--tx-mint-2) !important; }

/* Die beiden kleinen Links im Preisblock ueber die Klickflaeche der Karte
   heben. Ohne das liegt der aufgespannte Titel-Link darueber und der Klick
   auf „Finanzierung" oeffnet die Produktseite — gemessen mit
   elementFromPoint, es betraf auch schon den bestehenden Link. Nur die Links
   anheben, nicht den ganzen Preisblock: auf den Preis selbst soll weiterhin
   der Kartenklick greifen. */
.tx-price__tax a,
.tx-price__finance-link { position: relative; z-index: 2; }

/* "Individuell konfigurierbar" hint — sits between price block and CTA row.
   Conveys that any Toxic build is customizable in the configurator before
   the user even clicks "Details". Sliders icon = visual cue for tuning. */
/* Meta-Zeilen "Individuell konfigurierbar" + "Versand 3–5 Werktage" stacken
   visuell als eine Gruppe: top-dashed an der ersten, bottom-dashed an der
   letzten, dazwischen kein Doppel-Border. Selbe Typo / mint-Akzent für beide. */
.tx-product-card__customizable,
.tx-product-card__shipping {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tx-mono);  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tx-mint) !important;
  font-weight: 600;
  /* 5px statt 8px nach innen — die beiden Zeilen sollen sich als Gruppe
     lesen, nicht als zwei einzeln gerahmte Angaben. */
  padding: 5px 0;
}
.tx-product-card__customizable {
  margin-top: 14px;
  padding-top: 9px;
  border-top: 1px dashed var(--tx-line);
}
.tx-product-card__shipping {
  /* Kein Abstand nach oben: hier schliesst die Gruppe direkt an. */
  margin-bottom: 0;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--tx-line);
}
.tx-product-card__customizable svg,
.tx-product-card__shipping svg {
  flex-shrink: 0;
  color: var(--tx-mint);
  opacity: 0.85;
}
.tx-product-card__customizable span,
.tx-product-card__shipping span {
  color: var(--tx-text-dim) !important;
}

/* CTA row — wide Details + small cart icon */
.tx-product-card__cta-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* Traegt jetzt selbst den Abstand nach oben (der Fuss hat kein gap mehr).
     Gilt auch fuer Karten ohne die beiden Metazeilen ($hideConfigHint) — dort
     steht die Schaltflaeche sonst am Preis. */
  margin-top: 14px;
}
.tx-product-card__details {
  flex: 1;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px !important;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-decoration: none !important;
}
.tx-product-card__cart-form { margin: 0; }
.tx-product-card__cart-btn {
  width: 48px;
  height: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.tx-product-card__cart-btn:hover,
.tx-product-card__cart-btn:focus {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
  background: rgba(1,222,194,0.06);
}
.tx-product-card__cart-btn svg { display: block; }

/* ═══════════════════════════════════════════════════════════════
   PDP HERO LAYOUT · ported from configurator.css
   3-column grid: gallery | info+spec-table | sticky buybox+perf.
   ═══════════════════════════════════════════════════════════════ */

/* Crumbs bar above hero */
.tx-cfg-crumbs {
  background: var(--tx-bg-2);
  border-bottom: 1px solid var(--tx-line);
  padding: 14px 0;
}
.tx-cfg-crumbs__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cfg-crumbs__inner a { color: var(--tx-text-mute) !important; text-decoration: none !important; }
.tx-cfg-crumbs__inner a:hover { color: var(--tx-mint) !important; }
.tx-cfg-crumbs__inner em { font-style: normal; color: var(--tx-text); }
.tx-cfg-crumbs__sep { color: var(--tx-mint); }

/* Detail layout grid */
.tx-cfg-detail {
  background: var(--tx-bg);
  padding: 80px 0 48px;
}
.tx-cfg-crumbs { padding: 22px 0; }
.tx-cfg-detail__inner {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  /* Mitte braucht mehr Platz für Spec-Werte — ~44% statt 37% vorher */
  grid-template-columns: 0.9fr 1.4fr 0.9fr;
  gap: 32px;
  align-items: flex-start;
}

/* Left · gallery */
.tx-cfg-gallery { position: relative; min-width: 0; }
.tx-cfg-gallery__hero {
  position: relative;
  aspect-ratio: 5/6;
  background:
    radial-gradient(ellipse at center, rgba(1,222,194,0.16), transparent 70%),
    var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tx-cfg-gallery__hero img {
  /* 100% Fit + transform:scale(1.1) für das visuelle Plus.
     Toxic-Renderings haben transparente Ränder im PNG. Bei reinem
     max-width/height:100% bleibt die Pufferzone sichtbar als leerer
     Rand. Die Skalierung croppt diese Pufferzone weg (overflow:hidden
     am Hero-Container clipt das Überstehende), das eigentliche Case
     wird sichtbar größer ohne dass die Box wächst.
     transform-origin:center hält das Case zentriert. */
  max-width: 100%;
  max-height: 100%;
  transform: scale(1.1);
  transform-origin: center center;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.7));
  font-size: 0; color: transparent; /* hide alt-text on broken images */
}
.tx-cfg-gallery__hero::before,
.tx-cfg-gallery__hero::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--tx-text-dim);
  opacity: 0.6;
}
.tx-cfg-gallery__hero::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.tx-cfg-gallery__hero::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.tx-cfg-gallery__tags {
  position: absolute;
  top: 16px; left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}
.tx-cfg-gallery__tools {
  position: absolute;
  bottom: 16px; right: 16px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.tx-cfg-gallery__tools button {
  width: 36px; height: 36px;
  background: rgba(5,7,7,0.7);
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tx-cfg-gallery__tools button:hover { color: var(--tx-mint); border-color: var(--tx-mint); }
.tx-cfg-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.tx-cfg-gallery__thumb {
  aspect-ratio: 1/1;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tx-cfg-gallery__thumb.is-active { border-color: var(--tx-mint); box-shadow: inset 0 0 0 1px var(--tx-mint); }
.tx-cfg-gallery__thumb img { max-width: 100%; max-height: 100%; font-size: 0; color: transparent; }

/* Tx chip — used in gallery tags. Höhere Spezifität (über
   .tx-cfg-gallery__tags geschachtelt) damit kein NOVA-stock Bootstrap-
   Badge oder JTL-Theme-Rule überschreiben kann. Die identische Regel
   nur via `.tx-chip` wurde an Stellen mit Bright-Bg-Image (KRAIT-Cyan-
   Glow) cascading-überlebt — dadurch sahen die Chips translucent und
   rund aus statt scharf+solid. Jetzt mit Container-Scope unkillbar. */
.tx-cfg-gallery__tags .tx-chip,
.tx-chip {
  font-family: var(--tx-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-text);
  border: 1px solid rgba(255,255,255,0.22);
  background: #0a0c0c;
  padding: 5px 9px;
  display: inline-block;
  white-space: nowrap;
  border-radius: 0;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.tx-cfg-gallery__tags .tx-chip--top,
.tx-chip--top {
  color: #062019;
  background: var(--tx-mint);
  border-color: var(--tx-mint);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Middle · info column */
.tx-cfg-info { min-width: 0; }
.tx-cfg-info__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tx-stars { color: var(--tx-mint); letter-spacing: 2px; font-size: 14px; }
.tx-stars em { font-style: normal; color: rgba(255,255,255,0.18); }
.tx-rating {
  font-family: var(--tx-body);
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-rating em { font-style: normal; color: var(--tx-text); font-weight: 700; }
/* Rating-Summary als Anker-Link zur Review-Sektion (#tab-votes) */
.tx-rating-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.tx-rating-link:hover .tx-rating,
.tx-rating-link:hover .tx-rating em { color: var(--tx-mint); }

/* Eyebrow over title — Toxic system-line style */
.tx-cfg-info__eyebrow {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-bottom: 20px;
  position: relative;
  padding-left: 32px;
}
.tx-cfg-info__eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--tx-mint);
}

/* Kategorie-Kicker — prägnant über dem Modellnamen (WORKSTATION PC / OFFICE PC …) */
.tx-cfg-info__cat {
  font-family: var(--tx-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin: 0 0 4px;
  line-height: 1.1;
}

.tx-cfg-info h1,
.tx-cfg-info__h1 {
  font-family: var(--tx-h) !important;
  font-weight: 800;
  font-size: 72px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 6px 0 14px;
  color: var(--tx-text) !important;
}
.tx-cfg-info h1 em,
.tx-cfg-info__h1 em {
  font-style: normal;
  color: var(--tx-mint) !important;
  display: inline;
  margin-left: 0.15em;
  font-family: var(--tx-h) !important;
  font-weight: 800;
}

/* Subtitle under title — compact spec line from Wawi cName parts */
.tx-cfg-info__subtitle {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 14px;
  letter-spacing: 0.09em;
  color: var(--tx-text-dim);
  margin: -4px 0 22px;
  line-height: 1.5;
}
.tx-cfg-info__lead {
  font-family: var(--tx-body);
  font-size: 16px;
  color: var(--tx-text-dim);
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 24px;
}
.tx-cfg-meta {
  border-top: 1px solid var(--tx-line);
  padding-top: 16px;
  font-family: var(--tx-body);
  font-size: 14px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 20px;
}
.tx-cfg-meta dt {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.23em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(31,45,45,0.6);
}
.tx-cfg-meta dd {
  margin: 0;
  padding: 6px 0;
  color: var(--tx-text);
  border-bottom: 1px dashed rgba(31,45,45,0.6);
}
.tx-cfg-meta > :nth-last-child(-n+2) { border-bottom: 0; }

/* New component spec list — replaces tx-cfg-meta on PDP middle column.
   Icon-Label-Value 3-col grid, mint icons, full contrast on values. */
.tx-cfg-specs {
  border-top: 1px solid var(--tx-line);
  padding-top: 8px;
}
.tx-cfg-specs__row {
  display: grid;
  /* Die Bezeichnerspalte muss den LAENGSTEN Bezeichner fassen, sonst laeuft er
     in den Spaltenabstand hinein und klebt am Wert. Gemessen bei 14px und
     0,17em Sperrung: „PROZESSORKÜHLER" 181,9px, „ARBEITSSPEICHER" 168,7px,
     „BETRIEBSSYSTEM" 161,7px — bei 150px Spaltenbreite ueberlappte der
     laengste den Wert um 7,9px. 190px lassen auch dem laengsten noch Luft.
     Die Wertspalte vertraegt das: breitester Wert gemessen 287px bei 376px
     Spalte. Jede Zeile ist ein eigenes Raster, `max-content` wuerde die
     Spalten deshalb NICHT ueber die Zeilen hinweg ausrichten — die Breite
     muss fest sein. */
  grid-template-columns: 28px 190px 1fr;
  gap: 14px 26px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.tx-cfg-specs__row:last-child { border-bottom: 0; }
.tx-cfg-specs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tx-mint);
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.tx-cfg-specs__icon svg { display: block; }
.tx-cfg-specs__label {
  font-family: var(--tx-mono);  font-size: 14px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tx-text);
  font-weight: 600;
}
.tx-cfg-specs__value {
  font-family: var(--tx-body);
  font-size: 15px;
  color: var(--tx-text);
  font-weight: 400;
  line-height: 1.4;
  /* Lange Werte brechen um, statt mit Auslassungspunkten zu enden.
     Vorher: `white-space: nowrap` plus `text-overflow: ellipsis`, der volle
     Text nur im title-Tooltip — also unsichtbar fuer jeden, der nicht mit der
     Maus daraufzeigt. Gemessen bekommt die Wertspalte je nach Fensterbreite
     236 bis 400px, der laengste Wert braucht 287px („Aerocool P500C-G-BK-V1
     Midi PC-Gehaeuse"): unterhalb von rund 1500px wurde also regelmaessig
     gekuerzt. Der Preis dafuer sind ungleich hohe Zeilen, wenn ein Wert
     umbricht — das ist ehrlicher als versteckter Text. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.tx-cfg-specs__value .tx-spec-dash {
  font-style: normal;
  color: var(--tx-text-mute);
}

/* Unter 760px greift weiter unten eine spaetere Regel („MOBILE PDP/
   KONFIGURATOR FIXES"), die Bezeichner UEBER den Wert stapelt. Die
   Spaltenbreite hier ist dort also wirkungslos — sie bleibt nur stehen,
   damit die Schriftgroessen weiter gelten. */
@media (max-width: 760px) {
  .tx-cfg-specs__row {
    grid-template-columns: 28px 130px 1fr;
    gap: 12px;
    padding: 12px 0;
  }
  .tx-cfg-specs__label { font-size: 12px; letter-spacing: 0.1em; }
  .tx-cfg-specs__value { font-size: 14px; }
}

/* Right · sticky buybox */
.tx-cfg-buy {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 28px;
  position: sticky;
  top: 80px;
  min-width: 0;
}
.tx-cfg-buy__eyebrow {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin-bottom: 8px;
}
.tx-cfg-buy h3 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.tx-cfg-buy__artnr {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.13em;
  color: var(--tx-text-mute);
  margin: 0 0 18px;
}
.tx-cfg-buy__price {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--tx-mint);
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
/* Pflichtangabe unter dem Preis. Der Abstand nach unten haengt daran, ob die
   Rate darunter noch kommt — die traegt ihn dann selbst. Ohne :has() bleiben
   22px stehen: etwas viel Luft, aber nichts klebt aneinander. */
.tx-cfg-buy__tax {
  font-family: var(--tx-body);
  font-size: 12px;
  color: var(--tx-text-mute);
  margin-bottom: 22px;
}
.tx-cfg-buy__tax:has(+ .tx-cfg-buy__finance) { margin-bottom: 4px; }

.tx-cfg-buy__finance {
  font-family: var(--tx-body);
  font-size: 13px;
  color: var(--tx-text-dim);
  margin-bottom: 22px;
}
.tx-cfg-buy__finance em { font-style: normal; color: var(--tx-mint); }
.tx-cfg-buy .tx-btn { width: 100%; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.tx-cfg-buy__form { margin: 0; }
.tx-cfg-buy__form .tx-btn { margin-bottom: 8px; }

.tx-cfg-buy__assurance {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-body);
  font-size: 13px;
}
.tx-cfg-buy__assurance > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--tx-text-dim);
}
.tx-cfg-buy__assurance svg { color: var(--tx-mint); flex-shrink: 0; }

.tx-cfg-buy__perf {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tx-line);
}
.tx-cfg-buy__perf-head {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  margin-bottom: 12px;
}
.tx-perf-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  font-family: var(--tx-body);
  font-size: 13px;
}
.tx-perf-row__title { color: var(--tx-text); }
.tx-perf-row__val { color: var(--tx-mint); font-weight: 700; font-family: var(--tx-h); }
.tx-perf-row__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--tx-bg-3);
  position: relative;
  margin-bottom: 4px;
}
.tx-perf-row__bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--w, 80%);
  background: linear-gradient(to right, var(--tx-mint), var(--tx-mint-2));
  box-shadow: 0 0 12px var(--tx-mint);
}

/* Responsive — collapse 3-col → 2-col → 1-col */
@media (max-width: 1200px) {
  .tx-cfg-detail__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .tx-cfg-buy { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  .tx-cfg-detail__inner { grid-template-columns: 1fr; gap: 20px; padding: 0 16px; }
  .tx-cfg-info h1 { font-size: 44px; }
  .tx-cfg-buy__price { font-size: 44px; }
  .tx-cfg-meta { grid-template-columns: 100px 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   KONFIGURATOR · Komponenten-Block (tx-cfg-comps)
   Ported from configurator.css 278-794. Renders inside the PDP
   between Hero and Body-Description, when $Artikel->oKonfig_arr is
   non-empty. Markup from
   NOVAChild/productdetails/config_container.tpl + config_options_list.tpl.
   ════════════════════════════════════════════════════════════════ */
.tx-cfg-comps {
  background: var(--tx-bg-2);
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
  padding: 64px 0 56px;
}
.tx-cfg-comps__head {
  max-width: var(--tx-box);
  margin: 0 auto 40px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 36px;
  align-items: flex-start;
}
.tx-cfg-comps__head h2 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  text-transform: uppercase;
  color: var(--tx-text);
  line-height: 1.05;
}
.tx-cfg-comps__head > div:first-child > .tx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tx-cfg-comps__head > div:first-child > .tx-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--tx-mint);
}
.tx-cfg-comps__head p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  color: var(--tx-text-dim);
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
}

/* Soft disclaimer line below Konfig-Intro — Beispielbilder-Hinweis */
.tx-cfg-disclaimer {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 2px solid var(--tx-line-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tx-text-mute);
  font-style: italic;
  max-width: 56ch;
}

/* ── Peripherie-Sektion „Upgrade für dein PC-Setup" ──────────────
   Rendert unterhalb der Komponenten-Liste (gleiche Row/Card-Markup,
   config_options_list.tpl), nur wenn das Produkt Peripherie-Konfig-
   gruppen (Maus, Tastatur, Monitor, …) aus der Wawi mitbringt. */
.tx-cfg-peri { margin-top: 56px; }
.tx-cfg-peri__head {
  max-width: var(--tx-box);
  margin: 0 auto 32px;
  padding: 44px 32px 0;
  border-top: 1px solid var(--tx-line);
}
.tx-cfg-peri__head .tx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tx-cfg-peri__head .tx-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--tx-mint);
}
.tx-cfg-peri__head h2 {
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  text-transform: uppercase;
  color: var(--tx-text);
  line-height: 1.05;
}
.tx-cfg-peri__head p {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  color: var(--tx-text-dim);
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 991px) {
  .tx-cfg-peri { margin-top: 40px; }
  .tx-cfg-peri__head { padding: 32px 20px 0; }
  .tx-cfg-peri__head h2 { font-size: 28px; }
}
@media (max-width: 575px) {
  .tx-cfg-peri__head h2 { font-size: 22px; }
}

/* „Nicht benötigt"-Karte (optionale Konfiggruppen — Abwahl-Option).
   Media-Bereich: gestrichelte Null-Optik statt Produktbild. */
.tx-cfg-card--none .tx-cfg-card__media--none {
  color: var(--tx-text-mute);
}
.tx-cfg-card--none .tx-cfg-card__media--none svg { opacity: .55; }
.tx-cfg-card--none:has(.tx-cfg-card__input:checked) .tx-cfg-card__media--none svg {
  opacity: .9;
  color: var(--tx-mint);
}

.tx-cfg-deliver {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 24px;
}
.tx-cfg-deliver h4 {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.tx-cfg-deliver-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--tx-line);
}
.tx-cfg-deliver-item:first-of-type { border-top: 0; }
.tx-cfg-deliver-item strong {
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tx-text-dim);
  border: 1px solid var(--tx-line-2);
  padding: 4px 8px;
  align-self: flex-start;
  text-align: center;
  width: 32px;
}
.tx-cfg-deliver-item h5 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  margin: 2px 0 4px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tx-text);
}
.tx-cfg-deliver-item p {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  margin: 0;
  line-height: 1.4;
}

.tx-cfg-comps__list {
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
.tx-cfg-row {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.tx-cfg-row:hover { border-color: var(--tx-line-2); }
.tx-cfg-row.is-open {
  border-color: var(--tx-line-2);
  background: var(--tx-card-2);
}
/* WICHTIG: exakt so viele Spalten wie Kinder. Kam 2026-07-29 die
   Schrittnummer als fuenftes Kind dazu, ohne die Vorlage zu erweitern —
   der Chevron fiel dadurch in eine zweite Zeile und der Kopf zerfiel.
   Die Nummer gibt es nur in der Hauptliste, deshalb per :has() gescoped. */
.tx-cfg-row:has(.tx-cfg-row__step) > .tx-cfg-row__head {
  grid-template-columns: auto 56px 1fr auto auto;
}
.tx-cfg-row__head {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 18px;
  padding: 16px 22px;
  align-items: center;
  cursor: pointer;
}
.tx-cfg-row__icon {
  width: 40px; height: 40px;
  border: 1px solid var(--tx-line-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--tx-text-dim);
  transition: color .15s, border-color .15s;
}
.tx-cfg-row.is-open .tx-cfg-row__icon { color: var(--tx-text); border-color: var(--tx-text-dim); }
.tx-cfg-row__title {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-cfg-row__title .req {
  font-style: normal;
  border: 1px solid var(--tx-mint);
  color: var(--tx-mint);
  background: transparent;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 2px 6px;
  font-weight: 700;
}
.tx-cfg-row__val {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 16px;
  color: var(--tx-text);
  margin-top: 4px;
}
.tx-cfg-row__val small {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-dim);
  margin-left: 8px;
  letter-spacing: 0.05em;
}
.tx-cfg-row__price {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  color: var(--tx-text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tx-cfg-row__price em { font-style: normal; color: var(--tx-text); }
.tx-cfg-row__chev {
  width: 28px; height: 28px;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px;
  transition: transform .2s, color .15s, border-color .15s;
}
.tx-cfg-row.is-open .tx-cfg-row__chev { transform: rotate(180deg); color: var(--tx-text); border-color: var(--tx-text-dim); }

/* ─── KONFIGURATOR · Aufklappen ──────────────────────────────────────────
   Vorher stand hier `display: none` → `display: block`: die Gruppe sprang auf,
   ohne jede Bewegung. `display` laesst sich nicht ueberblenden, und eine feste
   `max-height` verbietet sich hier — die Gruppen sind zwischen einer und
   neunzehn Optionen gross, ein gemeinsamer Deckel waere bei fast allen viel zu
   hoch und die Kurve liefe am Ende ins Leere (dieselbe Falle wie bei der
   Spec-Liste der Spiel-Suche, siehe CLAUDE.md).

   Stattdessen ein Raster von `0fr` auf `1fr`: das animiert die ECHTE
   Inhaltshoehe, ohne sie zu kennen, und braucht kein JavaScript. Der
   Innenabstand sitzt in der inneren Huelle — laege er hier, bliebe er im
   geschlossenen Zustand als 42px hoher Streifen stehen.

   `visibility` wird verzoegert umgeschaltet, damit der Inhalt waehrend des
   Zuklappens sichtbar bleibt, danach aber nicht mehr per Tastatur erreichbar
   ist (das erledigte vorher `display: none`). */
.tx-cfg-row__body {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  visibility: hidden;
  transition:
    grid-template-rows .38s cubic-bezier(.22, .61, .36, 1),
    border-top-color .2s ease,
    visibility 0s linear .38s;
}
.tx-cfg-row__bodyinner {
  /* `overflow: hidden` setzt das automatische Mindestmass des Rasterelements
     auf null — nur deshalb kann `0fr` ueberhaupt auf null gehen.
     ⚠️ KEIN `min-height: 0` dazu: das nimmt dem `1fr`-Zustand genau die
     Inhaltsgroesse, aus der er seine Hoehe zieht. Gemessen blieb die Gruppe
     damit auch im geoeffneten Zustand 0px hoch, bei 1724px Inhalt.
     ⚠️ Der Innenabstand zaehlt zum Mindestmass. Bleibt er im geschlossenen
     Zustand stehen, ist die Zeile 43px hoch statt null — genau so gemessen.
     Er faehrt deshalb mit auf null, in derselben Zeit wie das Raster. */
  overflow: hidden;
  padding: 20px 22px 22px;
  transition: padding-top .38s cubic-bezier(.22, .61, .36, 1),
              padding-bottom .38s cubic-bezier(.22, .61, .36, 1);
}
.tx-cfg-row:not(.is-open) .tx-cfg-row__bodyinner {
  padding-top: 0;
  padding-bottom: 0;
}
.tx-cfg-row.is-open .tx-cfg-row__body {
  grid-template-rows: 1fr;
  border-top-color: var(--tx-line);
  visibility: visible;
  transition:
    grid-template-rows .38s cubic-bezier(.22, .61, .36, 1),
    border-top-color .2s ease,
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .tx-cfg-row__body,
  .tx-cfg-row.is-open .tx-cfg-row__body,
  .tx-cfg-row__bodyinner { transition: none; }
}
.tx-cfg-row__desc {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  margin-bottom: 16px;
  line-height: 1.5;
  max-width: 720px;
}

/* INFO-Zeile mit ::before Badge — wie Mockup */
.tx-cfg-row__info-line {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.5;
}
.tx-cfg-row__info-line::before {
  content: 'INFO';
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--tx-text-dim);
  border: 1px solid var(--tx-line-2);
  padding: 4px 8px;
  flex-shrink: 0;
  align-self: flex-start;
}
/* Konfiggruppen-Banner — Wawi-Gruppenbild bündig an die Box.
   Negative Margins heben das Body-Padding (20px top / 22px L+R) auf, damit
   das Banner randlos oben + links/rechts an der Box klebt; unten bleibt
   Abstand zu den Filter-Tabs. Keine Border, keine Rundung. height:auto →
   Seitenverhältnis bleibt, skaliert Desktop→Mobile. */
.tx-cfg-row__banner {
  margin: -20px -22px 18px;
  line-height: 0;
  background: var(--tx-bg-2, #0c0c10);
}
.tx-cfg-row__banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.tx-cfg-row__error,
.tx-cfg-card__error {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-danger);
  border: 1px solid var(--tx-danger);
  background: rgba(255,85,112,0.06);
  padding: 8px 12px;
  margin: 8px 0 12px;
}

/* Brand-tab strip per row (Hersteller-Filter) */
.tx-cfg-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--tx-line);
  padding-bottom: 0;
  margin-bottom: 18px;
}
.tx-cfg-tabs__list {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: stretch;
}
.tx-cfg-tabs__item {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  /* Hersteller-Namen Mockup-konform NICHT uppercasen — Eigennamen wie
     "be quiet!" oder "Lian Li" sollen Original-Casing behalten. */
  text-transform: none;
  color: var(--tx-text-dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 18px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  outline: none;
}
.tx-cfg-tabs__item:hover { color: var(--tx-text); }
.tx-cfg-tabs__item.is-active {
  color: var(--tx-mint);
  border-bottom-color: var(--tx-mint);
}
.tx-cfg-tabs__item:focus-visible {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}

@media (max-width: 800px) {
  .tx-cfg-tabs {
    border-bottom: 0;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .tx-cfg-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--tx-line);
    /* Fade-Indicator rechts */
    mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
  }
  .tx-cfg-tabs__list::-webkit-scrollbar { display: none; }
  .tx-cfg-tabs__item { flex-shrink: 0; padding: 8px 14px 10px; }
}

/* Secondary axis filter — Cyber-Cut-Buttons rechts neben den Hersteller-Tabs.
   Sitzt im selben Flex-Container wie der Brand-Strip, dazwischen ein
   margin-left:auto auf der ersten Axis-Group damit sie sich nach rechts
   schiebt (Brand-Tabs links, Axis-Buttons rechts, Carousel-Arrows ganz rechts). */
.tx-cfg-tabs__axis {
  display: flex;
  gap: 2px;
  align-items: stretch;
}
.tx-cfg-tabs__axis:first-of-type {
  margin-left: auto;
}
/* Vertikale Trennlinie zwischen Filter-Buttons und Carousel-Pfeilen.
   Sitzt auf dem .tx-cfg-tabs__nav weil das immer das letzte Element ist
   und nur dann angezeigt werden soll wenn davor eine Achse stand. */
.tx-cfg-tabs__axis + .tx-cfg-tabs__nav {
  position: relative;
  padding-left: 16px;
  margin-left: 4px;
}
.tx-cfg-tabs__axis + .tx-cfg-tabs__nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--tx-line-2);
}
/* Sekundär-Achsen-Filter im TOXIC-Button-Stil (2026-07-22): angeschrägte
   Ecken wie .tx-btn (oben-rechts + unten-links), nur kleiner. Inaktiv =
   Ghost-Outline via inset box-shadow (NICHT border — die Clip-Kante würde
   einen 1px-Rahmen unten/links abrasieren, siehe .tx-btn--ghost). Aktiv =
   Vollfläche: „Alle" füllt Mint, Gold/Bronze füllen ihre eigene Tier-Farbe
   (knüpft ans House-Button-Design an UND behält die 80-PLUS-Identität).
   Der kleine Tier-Punkt links ist der Off-State-Hinweis (Echo der
   80-PLUS-Badges auf den Karten); bei aktivem Fill trägt die Farbe selbst. */
/* Sekundär-Achsen-Filter (Netzteil Gold/Bronze) als reine TEXT-TABS — genau
   wie die Hersteller-Tabs links, nur farbig (2026-07-22, User-Entscheid nach
   mehreren Rahmen-Iterationen: KEIN Rahmen/Kasten mehr, [[design-flat-crisp-lines]]).
   Aktiv = Text + Unterstrich in der Chip-Farbe (Mint/Gold/Bronze), sitzt auf
   derselben Grundlinie wie die Marken-Tabs → eine ruhige, einheitliche Zeile. */
.tx-cfg-axis-btn {
  --c: var(--tx-mint);
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 14px 14px;
  margin-bottom: -1px;
  color: var(--tx-text-dim);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  outline: none;
}
.tx-cfg-axis-btn[data-value="gold"]   { --c: var(--tx-eff-gold); }
.tx-cfg-axis-btn[data-value="bronze"] { --c: var(--tx-eff-bronze); }
.tx-cfg-axis-btn:hover { color: var(--tx-text); }
.tx-cfg-axis-btn.is-active { color: var(--c); border-bottom-color: var(--c); }
.tx-cfg-axis-btn:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 2px; }

@media (max-width: 900px) {
  /* Auf engen Screens: Axis-Buttons brechen unter die Brand-Tabs.
     flex-basis:100% zwingt eine neue Reihe, margin-left auf 0 zurück. */
  .tx-cfg-tabs__axis {
    flex-basis: 100%;
    margin-left: 0 !important;
    flex-wrap: wrap;
    padding-bottom: 10px;
    padding-top: 4px;
    order: 2;
  }
  .tx-cfg-tabs__nav { order: 3; }
  .tx-cfg-axis-btn { font-size: 12px; padding: 8px 12px 10px; }
}

.tx-cfg-carousel {
  position: relative;
  /* HOVER-CLIP-FIX (siehe memory feedback_konfig_card_hover_clip.md):
     overflow-x: clip + overflow-y: visible erlaubt vertikale Sichtbarkeit
     ohne neuen Block-Formatting-Context. `clip` ist hier wichtig, NICHT
     `hidden` — letzteres würde overflow-y implizit zu auto zwingen. */
  overflow-x: clip;
  overflow-y: visible;
}
.tx-cfg-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Vertical-Buffer für Hover-Lift: CSS-Spec zwingt overflow-y zu `auto`
     sobald overflow-x: auto gesetzt ist (gleiche Achse darf nicht gemischt
     visible/auto sein). Damit clippt der Track die obere Kartenkante wenn
     .tx-cfg-card:hover ein translateY(-2px) macht (User-Bericht: türkise
     Selected-Outline verliert obere Linie bei Mausover).
     Lösung: padding-top schafft 6px Reserve INNERHALB des Tracks. Die
     Karte hebt sich auf den Buffer hoch statt aus dem Track raus. Negatives
     margin-top neutralisiert den Layout-Effekt nach außen. */
  padding-top: 6px;
  margin-top: -6px;
  padding-bottom: 4px;
  /* Scrollbar komplett ausblenden — Navigation läuft via Pfeil-Buttons */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tx-cfg-carousel__track::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Carousel-Pfeile (rechts in der tx-cfg-tabs__nav Box) */
.tx-cfg-carousel__btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  padding: 0;
}
.tx-cfg-carousel__btn:hover {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
}
.tx-cfg-carousel__btn:disabled,
.tx-cfg-carousel__btn[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--tx-line);
}
.tx-cfg-carousel__btn:disabled:hover,
.tx-cfg-carousel__btn[aria-disabled="true"]:hover {
  border-color: var(--tx-line);
  color: var(--tx-text);
}
.tx-cfg-carousel__btn:focus-visible {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}

.tx-cfg-card {
  scroll-snap-align: start;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  position: relative;
  /* Defensive vs. Browser-Extensions (SellerAmp, Honey, etc.) die Content-
     Scripts mit invisible Click-Tracking-Overlays über die Seite legen.
     isolate + z-index hebt die Konfig-Cards in einen eigenen Stacking-
     Context, sodass Extension-Overlays mit Default-z-index die Label-
     Klicks nicht abfangen. Bestätigte Reproduktion: Inkognito-Modus
     (Extensions aus) löst den Bug, normaler Modus mit Amazon-Tools nicht. */
  isolation: isolate;
  z-index: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .15s, transform .2s;
  width: 240px;
  margin: 0;
}
.tx-cfg-card:hover { border-color: var(--tx-text-dim); transform: translateY(-2px); }
/* SELECTED-STATE: ein durchgängiger Mint-Rahmen statt border+inset-Shadow.
   Der frühere `box-shadow: inset 0 0 0 1px mint` wurde teilweise vom Media-
   Hintergrund überdeckt und führte mit der grauen `border-bottom` zwischen
   Image und Body zu einem optisch zweigeteilten Look (zwei getrennt wirkende
   Mint-Rechtecke). Stattdessen jetzt: outline statt box-shadow (außerhalb
   der Border platziert → garantiert sichtbar, von Kindern nicht überdeckbar)
   plus mintgrüne Divider-Linie zwischen Image und Body → ein homogener Rahmen. */
.tx-cfg-card.is-selected,
.tx-cfg-card:has(.tx-cfg-card__input:checked) {
  border-color: var(--tx-mint);
  /* Mobile-Fix 2026-07-17: outline zeichnet AUSSERHALB der Box und wurde
     auf Mobile vom Nachbar-Element verdeckt (User: „türkiser Frame nicht
     sichtbar") → inset-Shadow zeichnet den Rahmen INNEN, kann nie
     verdeckt oder geclippt werden. */
  outline: none;
  box-shadow: inset 0 0 0 1px var(--tx-mint);
  z-index: 2;
}
.tx-cfg-card.is-selected .tx-cfg-card__media,
.tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__media {
  border-bottom-color: var(--tx-mint);
}
.tx-cfg-card.is-selected::after,
.tx-cfg-card:has(.tx-cfg-card__input:checked)::after {
  content: '✓';
  position: absolute;
  top: 12px; right: 12px;
  width: 24px; height: 24px;
  background: var(--tx-mint);
  color: #062019;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 800;
  z-index: 3;
  /* Pseudo-Element darf den i-Button nicht überdecken — JS würde sonst
     keine Clicks mehr abkriegen wenn der ::after-Layer drauf liegt. */
  pointer-events: none;
}
/* Wenn Card selected ist, sitzt der ✓-Badge bei right:12px. Der i-Button
   default-position ist right:10px — kollidiert direkt. Bei selected-State
   schieben wir den i-Button links neben den Haken (right: 44px = 12px Badge-
   right-offset + 24px Badge-width + 8px gap). */
.tx-cfg-card.is-selected .tx-cfg-card__info,
.tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__info {
  right: 44px;
}
.tx-cfg-card.is-disabled { opacity: 0.45; cursor: not-allowed; }
.tx-cfg-card.is-disabled:hover { transform: none; }
.tx-cfg-card:focus-within {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}

.tx-cfg-card__media {
  position: relative;
  aspect-ratio: 1/1;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 70%),
    var(--tx-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--tx-line);
  padding: 14px;
}
.tx-cfg-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
  transition: transform .3s;
}
.tx-cfg-card:hover .tx-cfg-card__media img { transform: scale(1.04); }
.tx-cfg-card__flag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--tx-sub);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #062019;
  border: 0;
  background: var(--tx-mint);
  padding: 4px 8px;
  z-index: 2;
}

/* Info-Button (kleines „i" oben rechts auf jeder Card). type=button damit
   der Click NICHT das parent <label> auslöst (Radio-Toggle); dazu macht
   das JS zusätzlich stopPropagation. */
.tx-cfg-card__info {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--tx-line-2);
  background: rgba(5,7,7,0.7);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: border-color .15s, color .15s, background .15s;
  padding: 0;
  line-height: 1;
}
.tx-cfg-card__info:hover {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
  background: rgba(1,222,194,0.1);
}
.tx-cfg-card__info:focus-visible {
  outline: 2px solid var(--tx-mint);
  outline-offset: 2px;
}

/* ── Wärmeleitpaste: „Tube im Lieferumfang"-Eck-Badge (unten links) +
   leise „Fachgerecht aufgetragen"-Grundzeile im Body. Alle Pasten werden
   von uns aufgetragen; das Badge zeigt NUR, ob der Kunde die Tube mitbekommt.
   Ecke unten links, weil oben rechts Info-„i"/Auswahlhaken belegen. ── */
.tx-cfg-card__lu {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tx-sub);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
}
.tx-cfg-card__lu svg { width: 12px; height: 12px; flex: none; }
.tx-cfg-card__lu--yes {
  background: rgba(1, 222, 194, 0.14);
  color: var(--tx-mint);
  border: 1px solid rgba(1, 222, 194, 0.4);
}
.tx-cfg-card__lu--no {
  background: rgba(5, 7, 7, 0.72);
  color: var(--tx-text-dim);
  border: 1px solid var(--tx-line-2);
}
.tx-cfg-card__applied {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--tx-text-mute);
}
.tx-cfg-card__applied svg { width: 12px; height: 12px; flex: none; }

/* ── Feature-Badges im Konfigurator (Wawi-Merkmal „Badge") ──
   Bewusst schlicht: übernimmt die Typo der bestehenden „NEU"-Tags
   (.tx-badge-tag) und setzt nur eine NEUTRALE Farbe, kein Icon.
   Freie Ecke unten links, mehrere Tags stapeln nach oben. Generisch
   für jeden Bauteil-Typ (Gehäuse/Lüfter/Kühler/Netzteil). ── */
.tx-cfg-card__badges {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 5px;
}
.tx-badge-tag--feature {
  background: rgba(5, 7, 7, 0.72);
  color: var(--tx-text-dim);
  border: 1px solid var(--tx-line-2);
}

/* ════════════════════════════════════════════════════════════════
   Universal Info-Modal (Mifcom-Style) — Image-Left / Text-Right
   Source: konfigurator.html L680-702 + configurator.css L1172-1336.
   Geöffnet durch Klick auf .tx-cfg-card__info, gefüllt aus
   data-info-* Attributen am parent <label data-info>.
   ════════════════════════════════════════════════════════════════ */
.tx-info-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tx-info-modal.is-open { display: flex; }
.tx-info-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.tx-info-modal__panel {
  position: relative;
  width: 100%;
  /* Fast Container-Breite (1440px max, minus etwas Luft an den Seiten —
     sieht aus wie ein vollwertiger Page-Block). Vertikal flach: 62vh cap,
     Specs scrollen intern. */
  max-width: 1280px;
  max-height: 62vh;
  background: var(--tx-bg-2);
  border: 1px solid var(--tx-line-2);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tx-info-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s, border-color .15s;
}
.tx-info-modal__close:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--tx-line-2);
}
.tx-info-modal__body {
  /* 2-Spalten-Layout passend zur breiteren Panel-Breite: Bild links 380px
     (groß genug für Produktshot), Text rechts flex. Body selber NICHT
     overflow:auto — Text-Panel scrollt intern, Bild + Footer bleiben fix. */
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tx-info-modal__media {
  margin: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 70%),
    var(--tx-bg-3);
  border-right: 1px solid var(--tx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-height: 0;
}
.tx-info-modal__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5));
}
.tx-info-modal__text {
  /* Scrollt intern bei langen Specs */
  padding: 32px 36px 28px;
  overflow-y: auto;
  min-height: 0;
}
.tx-info-modal__brand {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  margin-bottom: 6px;
}
.tx-info-modal__brand:empty { display: none; }
.tx-info-modal__title {
  font-family: var(--tx-h);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tx-text);
  margin: 0 0 14px;
}
.tx-info-modal__desc {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-text-dim);
  margin: 0 0 22px;
  white-space: pre-line;
}
.tx-info-modal__desc:empty { display: none; }

/* Spezifikations-Sektion — Heading + Sub-Disclaimer + Tabelle.
   Wenn keine Specs vorhanden sind, hidet das JS den ganzen wrap. */
.tx-info-modal__specs-wrap {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--tx-line);
}
.tx-info-modal__specs-heading {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 0 0 4px;
}
.tx-info-modal__specs-sub {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  font-style: italic;
  color: var(--tx-text-mute);
  margin: 0 0 14px;
  line-height: 1.4;
}
.tx-info-modal__specs {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
}
.tx-info-modal__specs tr { border-bottom: 1px solid var(--tx-line); }
.tx-info-modal__specs tr:last-child { border-bottom: 0; }
.tx-info-modal__specs th {
  text-align: left;
  font-weight: 600;
  color: var(--tx-text-mute);
  padding: 9px 12px 9px 0;
  width: 40%;
  vertical-align: top;
}
.tx-info-modal__specs td {
  color: var(--tx-text);
  padding: 9px 0;
  vertical-align: top;
}
.tx-info-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--tx-line);
  background: var(--tx-bg-3);
}
@media (max-width: 720px) {
  .tx-info-modal { padding: 0; align-items: flex-end; }
  .tx-info-modal__panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 4px 4px 0 0;
  }
  /* Auf Mobile auf vertical stacken — Bild oben kompakt, Text drunter scrollable. */
  .tx-info-modal__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .tx-info-modal__media {
    min-height: 160px;
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--tx-line);
  }
  .tx-info-modal__media img { max-height: 140px; }
  .tx-info-modal__text { padding: 20px 18px 16px; }
  .tx-info-modal__title { font-size: 18px; }
  .tx-info-modal__foot { padding: 14px 16px; }
}

.tx-cfg-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.tx-cfg-card__sub {
  font-family: var(--tx-sub);
  font-size: 12px;
  color: var(--tx-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.tx-cfg-card__title {
  font-weight: 700;
  font-size: 14px; /* Lesbarkeit 2026-07-17: war 13px (User: Konfig-Produktnamen groesser) */
  margin: 0;
  color: var(--tx-text);
  line-height: 1.25;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Immer 2 Zeilen Höhe reservieren, damit der Preis darunter nicht hochrutscht
     wenn das Item einen einzeiligen Namen hat (z.B. „Cooler Master Hyper 411"
     vs zweizeilige Namen daneben). 2 × line-height = 2.5em. */
  min-height: 2.5em;
}
.tx-cfg-card.is-disabled .tx-cfg-card__title { color: var(--tx-text-dim); }
.tx-cfg-card__price {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 16px;
  margin-top: auto;
  padding-top: 4px;
  letter-spacing: -0.01em;
}
.tx-cfg-card__price--up    { color: var(--tx-text); }
.tx-cfg-card__price--down  { color: var(--tx-text-dim); }
.tx-cfg-card__price--inkl  { color: var(--tx-text-dim); font-weight: 600; font-size: 16px; }

@media (max-width: 1180px) {
  .tx-cfg-comps__head { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .tx-cfg-comps { padding: 40px 0; }
  .tx-cfg-comps__head { padding: 0 20px; gap: 24px; }
  .tx-cfg-comps__head h2 { font-size: 32px; }
  .tx-cfg-comps__list { padding: 0 20px; }
  .tx-cfg-row__head { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 14px 16px; }
  .tx-cfg-row:has(.tx-cfg-row__step) > .tx-cfg-row__head { grid-template-columns: auto 40px 1fr auto; }
  .tx-cfg-row__chev { display: none; }
  /* Der Innenabstand sitzt seit dem animierten Aufklappen an der inneren
     Huelle — an .tx-cfg-row__body wuerde er im geschlossenen Zustand als
     Streifen stehen bleiben. */
  .tx-cfg-row__bodyinner { padding: 16px 16px 18px; }
  .tx-cfg-row__banner { margin: -16px -16px 14px; }
  .tx-cfg-carousel__track { grid-auto-columns: minmax(220px, 75vw); }
  .tx-cfg-card { min-width: 220px; }
}
@media (max-width: 480px) {
  .tx-cfg-comps__head h2 { font-size: 24px; }
}


/* ════════════════════════════════════════════════════════════════
   STICKY BOTTOM BAR · running build-summary at viewport bottom
   Visible after the hero section scrolls out (IntersectionObserver
   in productdetails/index.tpl toggles `.is-show`).
   ════════════════════════════════════════════════════════════════ */
.tx-cfg-sticky {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(13,17,17,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--tx-line);
  z-index: 30;
  box-shadow: 0 -16px 48px rgba(0,0,0,0.7);
  transform: translateY(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.tx-cfg-sticky.is-show { transform: translateY(0); pointer-events: auto; }
.tx-cfg-sticky__inner {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) auto auto;
  gap: 32px;
  align-items: center;
  padding: 20px 40px;
  max-width: 100%;
  margin: 0 auto;
}
.tx-cfg-sticky__lead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.tx-cfg-sticky__name {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--tx-text);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-cfg-sticky__sub {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.tx-cfg-sticky__sub em {
  font-style: normal;
  color: var(--tx-text);
  font-weight: 700;
}
.tx-cfg-sticky__sub.is-changed em { color: var(--tx-mint); }
/* Wrapper für die Pill-Reihe + die Scroll-Arrow-Buttons. position:relative
   ist Anchor für die absolute positionierten < > Pfeile. flex:1 damit der
   Wrapper den verfügbaren Platz zwischen Lead und Price/CTA einnimmt. */
.tx-cfg-sticky__pills-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.tx-cfg-sticky__pills {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 4px 0;
  min-width: 0;
  width: 100%;
  /* Fade-Indicator beidseitig wenn Scroll möglich. Maske wird per JS via
     class-toggle umgeschaltet — siehe inline_script unten. */
  mask-image: linear-gradient(to right, black 0%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 94%, transparent 100%);
}
.tx-cfg-sticky__pills.is-scroll-mid {
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.tx-cfg-sticky__pills.is-scroll-end {
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 100%);
}
/* Pfeil-Buttons sitzen absolut über dem Pill-Container. Default versteckt,
   .is-show wird per JS gesetzt wenn in dieser Richtung gescrollt werden kann. */
.tx-cfg-sticky__scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 36px;
  background: rgba(10, 12, 12, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background .15s, color .15s, border-color .15s;
  z-index: 3;
  padding: 0;
  border-radius: 0;
}
.tx-cfg-sticky__scroll-arrow.is-show {
  opacity: 1;
  pointer-events: auto;
}
.tx-cfg-sticky__scroll-arrow:hover,
.tx-cfg-sticky__scroll-arrow:focus-visible {
  background: var(--tx-mint);
  color: #0a0c0c;
  border-color: var(--tx-mint);
  outline: none;
}
.tx-cfg-sticky__scroll-arrow--left  { left: 0; }
.tx-cfg-sticky__scroll-arrow--right { right: 0; }
.tx-cfg-sticky__scroll-arrow svg { display: block; }
.tx-cfg-sticky__pills::-webkit-scrollbar { display: none; }
.tx-cfg-sticky__pills::-webkit-scrollbar { height: 4px; }
.tx-cfg-sticky__pills::-webkit-scrollbar-thumb { background: var(--tx-line-2); }
.tx-cfg-sticky__pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--tx-line);
  background: rgba(255,255,255,0.02);
  padding: 14px 20px 15px;
  font-family: var(--tx-sub); font-weight: 500;
  line-height: 1.25;
  min-width: 170px;
  max-width: 240px;
  position: relative;
  transition: border-color .15s, background .15s, transform .2s;
  cursor: pointer; /* Pill = Sprung-Navigation zur Gruppe (index.tpl inline_script) */
}
.tx-cfg-sticky__pill:hover,
.tx-cfg-sticky__pill:focus-visible {
  border-color: var(--tx-mint);
  background: rgba(1,222,194,0.06);
}
.tx-cfg-sticky__pill.is-changed { transform: translateY(-1px); }
.tx-cfg-sticky__pill-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  font-weight: 600;
}
.tx-cfg-sticky__pill-val {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 14px;
  color: var(--tx-text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-cfg-sticky__pill.is-changed {
  border-color: var(--tx-line-2);
  background: rgba(255,255,255,0.04);
}
.tx-cfg-sticky__pill.is-changed::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--tx-mint);
}

/* Delta-Pfeil + Preis-Diff (Upgrade/Downgrade-Indicator) */
.tx-cfg-sticky__pill-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-top: 2px;
  line-height: 1;
}
.tx-cfg-sticky__pill-delta[hidden] { display: none; }
.tx-cfg-sticky__pill-delta::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.tx-cfg-sticky__pill-delta--up {
  color: var(--tx-mint);
}
.tx-cfg-sticky__pill-delta--up::before {
  border-bottom: 5px solid var(--tx-mint);
}
.tx-cfg-sticky__pill-delta--down {
  color: var(--tx-text-dim);
}
.tx-cfg-sticky__pill-delta--down::before {
  border-top: 5px solid var(--tx-text-dim);
}

/* ─── LVL UP! Animation ───────────────────────────────────────
   Spawnt als prominenter floating Badge in der rechten oberen Ecke
   des Sticky-Bars, kommt aus dem Bereich des Cart-Buttons heraus,
   schwebt nach oben + fadet aus. Gross, mint, gaming-style. */
.tx-cfg-sticky__lvlup {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 32px;
  pointer-events: none;
  background: var(--tx-mint);
  color: #062019;
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.24em;
  padding: 12px 22px;
  white-space: nowrap;
  z-index: 4;
  opacity: 0;
  transform: translateY(40px) scale(0.6);
  box-shadow:
    0 0 24px rgba(1, 222, 194, 0.7),
    0 0 48px rgba(1, 222, 194, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.6);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tx-cfg-sticky__lvlup::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #062019;
  transform: translateY(-1px);
}
.tx-cfg-sticky__lvlup.is-visible {
  animation: tx-lvlup-pop 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes tx-lvlup-pop {
  0%   { opacity: 0;   transform: translateY(40px)  scale(0.6); }
  12%  { opacity: 1;   transform: translateY(-6px)  scale(1.18); }
  22%  { opacity: 1;   transform: translateY(-12px) scale(1); }
  70%  { opacity: 1;   transform: translateY(-14px) scale(1); }
  100% { opacity: 0;   transform: translateY(-40px) scale(0.92); }
}

/* Pill-Selbst-Pulse beim LVL-UP-Trigger — kurzer Mint-Glow */
.tx-cfg-sticky__pill.is-lvlup {
  animation: tx-pill-pulse .6s ease-out;
}
@keyframes tx-pill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 222, 194, 0.5); }
  60%  { box-shadow: 0 0 0 10px rgba(1, 222, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 222, 194, 0); }
}

/* Reduced-motion: Animation aus, nur Badge kurz sichtbar */
@media (prefers-reduced-motion: reduce) {
  .tx-cfg-sticky__lvlup { animation: none; opacity: 1; transform: translateY(-30px); }
  .tx-cfg-sticky__pill.is-lvlup { animation: none; }
}
.tx-cfg-sticky__price {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 26px;
  color: var(--tx-mint);
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
  padding-left: 12px;
}
.tx-cfg-sticky__cta {
  padding: 15px 28px;
  font-size: 13px;
  white-space: nowrap;
  margin-left: 12px;
}

@media (max-width: 1280px) {
  .tx-cfg-sticky__inner { grid-template-columns: minmax(200px, 240px) 1fr auto auto; gap: 20px; padding: 12px 24px; }
  .tx-cfg-sticky__price { font-size: 22px; }
}
@media (max-width: 1024px) {
  .tx-cfg-sticky__inner { grid-template-columns: 1fr auto auto; gap: 16px; }
  .tx-cfg-sticky__pills { display: none; }
}
@media (max-width: 640px) {
  .tx-cfg-sticky__inner { grid-template-columns: 1fr auto; padding: 10px 16px; gap: 12px; }
  .tx-cfg-sticky__price { font-size: 20px; }
  .tx-cfg-sticky__cta { padding: 10px 14px; font-size: 12px; }
  .tx-cfg-sticky__sub { display: none; }
}

/* ──────────────────────────────────────────────────────────────
   Alert Region — JTL alerts (Cart-Add success/error, Konfig validation, …)
   ────────────────────────────────────────────────────────────── */
.tx-alert-region {
  max-width: 1280px;
  margin: 16px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 5;
}
.tx-alert-region .alert {
  border: 1px solid var(--tx-border);
  background: rgba(20, 20, 22, 0.92);
  color: var(--tx-text);
  padding: 16px 22px;
  border-radius: 10px;
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.tx-alert-region .alert::before {
  content: '';
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--tx-accent);
  flex: 0 0 4px;
  margin-right: 4px;
}
.tx-alert-region .alert-success { border-color: rgba(96, 230, 169, 0.4); }
.tx-alert-region .alert-success::before { background: var(--tx-accent); }
.tx-alert-region .alert-danger,
.tx-alert-region .alert-error { border-color: rgba(232, 99, 99, 0.5); color: #ffd7d7; }
.tx-alert-region .alert-danger::before,
.tx-alert-region .alert-error::before { background: var(--tx-danger, #e86363); }
.tx-alert-region .alert-info { border-color: rgba(120, 160, 220, 0.4); }
.tx-alert-region .alert-info::before { background: #78a0dc; }
.tx-alert-region .alert .close { background: none; border: 0; color: var(--tx-text-dim); margin-left: auto; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.tx-alert-region .alert .close:hover { color: var(--tx-text); }

@media (max-width: 720px) {
  .tx-alert-region { padding: 0 14px; }
  .tx-alert-region .alert { padding: 12px 16px; font-size: 13px; }
}

/* ──────────────────────────────────────────────────────────────
   A11y utilities
   ────────────────────────────────────────────────────────────── */
.tx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────────────────────────────────
   Button size variants — extrahiert aus den Inline-Styles
   die in productlist + page/index 13× wiederholt waren.
   ────────────────────────────────────────────────────────────── */
.tx-btn--lg {
  padding: 11px 18px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.tx-btn--xl {
  padding: 14px 22px;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   PDP TWO-MODE TOGGLE · Rich-Content ↔ Konfigurator
   Default (kein Hash) = Rich-Mode: Marketing-Sections sichtbar,
                         Configurator versteckt, Sticky = "Konfigurieren"-CTA.
   #konfigurator (Hash) = Config-Mode: Configurator sichtbar,
                          Marketing-Sections aus, Sticky = Build-Summary.
   Mechanik: CSS :target auf #konfigurator Wrapper, Sibling-Combinator
   für Geschwister-Sections. Kein JS für Mode-Switch nötig.
   ══════════════════════════════════════════════════════════════ */

/* Default: Configurator ist versteckt — wird durch :target unten gezeigt.
   scroll-margin-top kompensiert für den sticky Header (z-index 50, ~80px) —
   sonst landet die Top-Edge des Konfigurators direkt UNTER der Status-Bar
   und der Konfig-Headline ist abgeschnitten. */
.tx-pdp-config-block {
  display: none;
  scroll-margin-top: 96px;
}
.tx-pdp-config-block:target,
html.is-cfg-mode .tx-pdp-config-block { display: block; }

/* JTL's stock $.evo.extended().startSpinner injectet bei jeder buildConfiguration-
   AJAX (auch beim init-setTimeout in registerConfig) ein <div.jtl-spinner> mit
   8-Punkt fa-spinner Overlay — auf Mobile flackert das beim Scrollen bzw. Reflow
   sichtbar (vom User gemeldet als „Ladebalken kommt ab und zu beim Scrollen").
   Wir haben unseren eigenen syncKonfigToServer-Flow + UI-Update; der JTL-Spinner
   im Konfigurator-Bereich ist redundant und bringt nur visuelles Rauschen.
   Außerhalb des Konfigurators (Wishlist, Mobile-Filter, …) bleibt er aktiv. */
.tx-pdp-config-block .jtl-spinner,
#product-configurator .jtl-spinner,
.tx-cfg-comps .jtl-spinner,
#cfg-container .jtl-spinner { display: none !important; }

/* Wenn Configurator :target ist ODER html.is-cfg-mode gesetzt ist →
   Marketing-Sections ausblenden. Doppelte Selektoren weil:
   - :target greift bei direktem URL-Aufruf mit #konfigurator (Bookmarks,
     externe Links), wo kein JS-Klick passiert ist.
   - html.is-cfg-mode setzt unser JS-Click-Handler — vermeidet das
     location.hash-Anchor-Scroll-Problem (User landete sonst "wieder
     oben" weil das native Scroll auf veraltete Positionen ging). */
.tx-pdp-config-block:target ~ .tx-pdp-body,
.tx-pdp-config-block:target ~ .tx-builtdiff,
.tx-pdp-config-block:target ~ .tx-pdp-highlights,
.tx-pdp-config-block:target ~ .tx-pdp-process,
.tx-pdp-config-block:target ~ .tx-pdp-spotlight,
.tx-pdp-config-block:target ~ .tx-pdp-disclaimer,
.tx-pdp-config-block:target ~ .tx-pdp-reviews,
.tx-pdp-config-block:target ~ .tx-fps-check,
html.is-cfg-mode .tx-pdp-body,
html.is-cfg-mode .tx-builtdiff,
html.is-cfg-mode .tx-pdp-highlights,
html.is-cfg-mode .tx-pdp-process,
html.is-cfg-mode .tx-pdp-spotlight,
html.is-cfg-mode .tx-pdp-disclaimer,
html.is-cfg-mode .tx-pdp-reviews,
/* FPS-Check im Konfig-Modus versteckt: zeigt Standardkonfig-Performance,
   ändert sich aber NICHT live mit Component-Swaps (CPU/GPU getauscht →
   FPS-Werte wären stale). Mehr Verwirrung als Mehrwert. */
html.is-cfg-mode .tx-fps-check { display: none; }

/* Sticky-Bar Variante: Rich-Mode default visible, Config-Mode default hidden.
   In Konfig-Mode (via :target oder .is-cfg-mode) dreht sich das um. */
.tx-cfg-sticky--rich { display: flex; }
.tx-cfg-sticky--config { display: none; }
.tx-pdp-config-block:target ~ .tx-cfg-sticky--rich,
html.is-cfg-mode .tx-cfg-sticky--rich { display: none; }
.tx-pdp-config-block:target ~ .tx-cfg-sticky--config,
html.is-cfg-mode .tx-cfg-sticky--config { display: flex; flex-direction: column; }

/* Rich-Sticky Layout — eine Lead-Zeile + ein CTA-Button, kein Pills-Grid.
   Der Bestands-Sticky-Container hat schon translateY+is-show Logik.
   Hier nur die Inhalts-Variante anpassen. */
.tx-cfg-sticky__rich-lead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.tx-cfg-sticky__rich-headline {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--tx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-cfg-sticky__rich-headline em {
  color: var(--tx-mint);
  font-style: normal;
}
.tx-cfg-sticky__rich-sub {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tx-text-mute); /* Fix 2026-07-17: var(--tx-muted) existierte nicht */
}
.tx-cfg-sticky--rich .tx-cfg-sticky__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.tx-cfg-sticky--rich .tx-cfg-sticky__cta {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Rich-Sticky CTAs: 2 Buttons nebeneinander (Cart-ghost + Konfigurieren-primary). */
.tx-cfg-sticky__rich-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tx-cfg-sticky__cta--cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mobile: Rich-Sticky kompakt. Sub-Zeile + Cart-Shortcut entfernen damit
   Headline + Konfigurieren-CTA atmen können. Cart-Add ist im Hero-Buybox
   ohnehin verfügbar — auf 360-420px breiten Screens würden 2 Buttons +
   Headline schlicht nicht zusammen passen. */
@media (max-width: 720px) {
  .tx-cfg-sticky__rich-headline {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tx-cfg-sticky__rich-sub { display: none; }
  .tx-cfg-sticky--rich .tx-cfg-sticky__inner { gap: 12px; }
  .tx-cfg-sticky__rich-lead { min-width: 0; flex: 1; }
  .tx-cfg-sticky__rich-ctas { gap: 6px; }
  .tx-cfg-sticky__cta--cart { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   PDP · Bild-Lightbox (native <dialog>)
   ══════════════════════════════════════════════════════════════ */
.tx-pdp-zoom {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: visible;
  color: var(--tx-text);
}
.tx-pdp-zoom::backdrop {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
}
.tx-pdp-zoom img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.6));
}
.tx-pdp-zoom__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tx-pdp-zoom__close:hover {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
}
@media (max-width: 600px) {
  .tx-pdp-zoom__close { top: -40px; width: 32px; height: 32px; font-size: 20px; }
}

/* Heart-Button-Form auf Product-Cards: display:contents lässt die <form>-Box
   aus dem Layout verschwinden, der Button erbt positioning von .tx-product-card__media
   wie vorher (position:absolute relativ zur Card-Media-Area). Hidden CSRF-Inputs
   stören dabei nicht — die rendern eh nichts. */
.tx-product-card__fav-form {
  display: contents;
}

/* ══════════════════════════════════════════════════════════════
   ACCOUNT · Auth-Pages (Login, Register, Password-Reset)
   Scope: alles unter .tx-auth, damit andere Bootstrap-Forms
   im Shop unverändert bleiben. Lifting der NOVA-Innereien
   (form-control, btn-primary, label, fieldset) zur Toxic-Optik.
   ══════════════════════════════════════════════════════════════ */

.tx-auth {
  background: var(--tx-bg);
  padding: 80px 24px 100px;
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Subtiler Hex-Pattern-Background — derselbe wie in builtdiff/process,
   gibt Atmosphäre ohne Form vom Lesen abzulenken. */
.tx-auth::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%2320232680' stroke-width='1'/></svg>");
  opacity: 0.5;
  pointer-events: none;
}
.tx-auth__inner {
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 1;
}
.tx-auth__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-bottom: 14px;
}
.tx-auth__kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--tx-mint);
}
.tx-auth__title {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 0 0 28px;
  line-height: 1.05;
}
.tx-auth__title em {
  color: var(--tx-mint);
  font-style: normal;
}
.tx-auth__hint {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-text-dim);
  margin: 0 0 20px;
}
.tx-auth__hint em {
  color: var(--tx-mint);
  font-style: normal;
}

/* Centered Card mit Mint Top-Accent-Line */
.tx-auth__card {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 32px 32px 28px;
  position: relative;
}
.tx-auth__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  height: 2px;
  background: var(--tx-mint);
}

/* Bootstrap row/col override im Auth-Scope —
   wir wollen kein 6/12 Grid, sondern Full-Width im Card */
.tx-auth__card .row,
.tx-auth__card [class*="col-"] {
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Fieldset-Reset (Bootstrap rendert <fieldset> für Form-Sections) */
.tx-auth__card fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Legend = "Anmelden für registrierte Kunden" — als Sub-Headline stylen */
.tx-auth__card legend {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin: 0 0 18px;
  padding: 0;
  width: auto;
  border: 0;
}

/* Required-Info ("Alle mit * markierten Felder sind Pflichtfelder.") */
.tx-auth__card .required-info {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tx-text-dim);
  margin: 0 0 20px;
}
.tx-auth__card .required-info .required-star {
  color: var(--tx-mint);
}

/* Form-Group als Position-Anchor für Notched-Border-Label.
   NOVA rendert: <div class="form-group"><div class="d-flex flex-column-reverse"><input><label>
   Wir lassen die flex-Reihenfolge in Ruhe und positionieren das Label
   absolut auf der Input-Top-Border — der Label-Background "schneidet"
   die Border durch (fieldset-legend Pattern). */
.tx-auth__card .form-group {
  margin-bottom: 22px;
  position: relative;
}
.tx-auth__card .form-group > .d-flex {
  position: relative;
}

/* Labels — clean Mint-Mini-Headline ÜBER dem Input. Kein Notch, keine
   Border-Decoration. flex-column-reverse parent macht das visuelle
   Stacking (Input DOM-first → unten, Label DOM-second → oben).

   SPEZIFITÄTS-BOOST: NOVA's clear_crit.css hat
     .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label
   { background:#fff; display:none } — Spezifität (0,0,4,1).
   Ohne `.label-slide` im Selektor verliert unsere Regel und Labels werden
   weiß + versteckt. Mit .label-slide im Pfad matchen wir spezifisch genug. */
.tx-auth__card .label-slide .form-group:not(.checkbox) label,
.tx-auth__card .label-slide .form-group:not(.checkbox) .col-form-label,
.tx-auth__card .form-group label,
.tx-auth__card .form-group .col-form-label {
  position: static;
  display: block;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
  transform: none;
  opacity: 1;
  line-height: 1;
}
/* Bestands-::before-Pseudo (war fixe-12px Notch-Linie) entfernen.
   ::after lassen wir am Leben — NOVA injectet darüber den Required-* */
.tx-auth__card .form-group label::before,
.tx-auth__card .form-group .col-form-label::before {
  content: none;
}

/* Required-Asterisk override: NOVA setzt color:#b90000 (rot) auf den ::after
   pseudo-Stern — wirkt bei 10px/Oxanium-Bold wie ein weißer Pixel-Klotz.
   Wir setzen explizit mint + etwas größer + kleiner Spacer davor.
   Spezifität: 0,0,5,1 + pseudo schlägt NOVA's 0,0,3,1 + pseudo. */
.tx-auth__card .label-slide input[required] + .col-form-label::after,
.tx-auth__card .label-slide textarea[required] + .col-form-label::after,
.tx-auth__card .label-slide select[required] + .col-form-label::after {
  color: var(--tx-mint);
  font-size: 14px;
  font-weight: 400;
  margin-left: 4px;
  vertical-align: -2px;
  line-height: 0;
  display: inline-block;
}
/* Gap zwischen Label und Input — Label ist DOM-2, Input DOM-1, aber
   visuell durch flex-column-reverse umgekehrt. gap auf flex-Container
   wirkt unabhängig der DOM-Reihenfolge. */
.tx-auth__card .form-group .d-flex.flex-column-reverse {
  gap: 8px;
}

/* Required-Star im Label — mint statt rot (rot = Error-Farbe) */
.tx-auth__card .form-group label .required,
.tx-auth__card .form-group .col-form-label .required,
.tx-auth__card .form-group label .required-star,
.tx-auth__card .form-group .col-form-label .required-star {
  color: var(--tx-mint);
  margin-left: 2px;
  font-weight: 400;
}

/* Inputs — volle 4-Seiten-Border, Toxic dark mit Mint-Focus-Glow */
.tx-auth__card .form-control {
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 15px;
  padding: 14px;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: none;
}
.tx-auth__card .form-control::placeholder {
  color: transparent;
}
.tx-auth__card .form-control:hover {
  border-color: rgba(1, 222, 194, 0.4);
}
.tx-auth__card .form-control:focus {
  outline: none;
  border-color: var(--tx-mint);
  box-shadow: 0 0 0 3px rgba(1, 222, 194, 0.14),
              0 6px 18px -8px rgba(1, 222, 194, 0.4);
  background: var(--tx-bg-3);
  color: var(--tx-text);
}
/* Focus-State: Label heller (Mint-2) als Visual-Feedback */
.tx-auth__card .form-group:focus-within label,
.tx-auth__card .form-group:focus-within .col-form-label {
  color: var(--tx-mint-2);
}

/* Chrome/Edge Autofill Yellow killen — sticky bug der die ganzen Inputs
   gelb färbt nach Login-Versuch. text-fill-color override + box-shadow
   inset overpaint sind die Standard-Fixes. */
.tx-auth__card .form-control:-webkit-autofill,
.tx-auth__card .form-control:-webkit-autofill:hover,
.tx-auth__card .form-control:-webkit-autofill:focus,
.tx-auth__card .form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--tx-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--tx-bg-3) inset !important;
  caret-color: var(--tx-text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Error-State (NOVA setzt .is-invalid bei Validation-Fehlern) */
.tx-auth__card .form-control.is-invalid {
  border-color: #E25555;
  box-shadow: 0 0 0 3px rgba(226, 85, 85, 0.18);
}
.tx-auth__card .invalid-feedback,
.tx-auth__card .form-text {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: #E25555;
  margin-top: 6px;
}

/* Submit-Button — Toxic Primary Mint, full-width */
.tx-auth__card .btn-primary,
.tx-auth__card .btn.btn-block {
  background: var(--tx-mint);
  border: 1px solid var(--tx-mint);
  color: #001512;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 22px;
  width: 100%;
  border-radius: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  box-shadow: none;
  margin-top: 4px;
}
.tx-auth__card .btn-primary:hover,
.tx-auth__card .btn.btn-block:hover {
  background: var(--tx-mint-2);
  border-color: var(--tx-mint-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(1, 222, 194, 0.55);
}
.tx-auth__card .btn-primary:focus,
.tx-auth__card .btn-primary:active {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 222, 194, 0.35);
}

/* "Neu hier? Jetzt registrieren!" + "Passwort vergessen" Links */
.tx-auth__card .register-wrapper,
.tx-auth__card .resetpw-wrapper {
  display: block;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13.5px;
  color: var(--tx-text-dim);
  margin-top: 18px;
  letter-spacing: 0.02em;
}
.tx-auth__card .register-wrapper {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tx-line);
}
.tx-auth__card .register-wrapper a,
.tx-auth__card .resetpw-wrapper a {
  color: var(--tx-mint);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color .15s ease;
}
.tx-auth__card .register-wrapper a:hover,
.tx-auth__card .resetpw-wrapper a:hover {
  color: var(--tx-mint-2);
  text-decoration: underline;
}
.tx-auth__card .resetpw-wrapper .fa-question-circle {
  margin-right: 4px;
  opacity: 0.75;
}

/* Captcha (falls aktiviert) */
.tx-auth__card .simple-captcha-wrapper {
  margin: 16px 0;
}

/* Mobile */
@media (max-width: 600px) {
  .tx-auth { padding: 48px 16px 64px; }
  .tx-auth__title { font-size: 30px; }
  .tx-auth__card { padding: 24px 22px 22px; }
}

/* ══════════════════════════════════════════════════════════════
   404 / ERROR PAGES · Toxic-branded "Signal verloren"
   Scope: .tx-error — eigener Wrapper, ersetzt NOVA's Sitemap-Dump.
   Hex-Pattern Background gleich wie .tx-auth, große outline-Nummer
   404 als visuelles Statement, dazu Quick-Link Cards.
   ══════════════════════════════════════════════════════════════ */

.tx-error {
  background: var(--tx-bg);
  padding: 80px 24px 100px;
  min-height: 70vh;
  position: relative;
  overflow: hidden;
}
.tx-error::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1l26 15v32L28 63 2 48V16z' fill='none' stroke='%2320232680' stroke-width='1'/></svg>");
  opacity: 0.5;
  pointer-events: none;
}
.tx-error__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.tx-error__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mint);
  margin-bottom: 18px;
}
.tx-error__kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--tx-mint);
}

/* Big outline-style 404 — gleicher Look wie Build-Prozess Step-Numbers,
   text-stroke statt fill für den technischen Vibe. */
.tx-error__code {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: clamp(120px, 22vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--tx-mint);
  margin: 0 0 8px;
  user-select: none;
}

.tx-error__title {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 0 0 16px;
  line-height: 1.05;
}
.tx-error__title em {
  color: var(--tx-mint);
  font-style: normal;
}

.tx-error__lead {
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tx-text-dim);
  max-width: 560px;
  margin: 0 auto 32px;
}

.tx-error__cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Quick-Links Grid — 4 Karten, Hover-Lift wie auf der Build-Prozess */
.tx-error__quicks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: left;
}
.tx-error__quick {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 26px 24px 22px;
  position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
/* JTL inline Bootstrap setzt a:hover{color:#f8bf00} (gelb) im <head> —
   Custom-Theme braucht !important für <a>-Color-Overrides, sonst werden
   die ganzen Quick-Card-Texte beim Hover gelb. */
.tx-error__quick:hover,
.tx-error__quick:focus {
  transform: translateY(-3px);
  border-color: var(--tx-mint);
  box-shadow: 0 16px 36px -16px rgba(1, 222, 194, 0.45);
  text-decoration: none;
  color: inherit !important;
}
.tx-error__quick:hover h3,
.tx-error__quick:focus h3 {
  color: var(--tx-mint) !important;
}
.tx-error__quick:hover p,
.tx-error__quick:focus p {
  color: var(--tx-text-dim) !important;
}
.tx-error__quick:hover .tx-error__quick-num,
.tx-error__quick:focus .tx-error__quick-num {
  color: var(--tx-mint-2) !important;
}
.tx-error__quick::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 18px;
  height: 2px;
  background: var(--tx-mint);
  transition: width .25s ease;
}
.tx-error__quick:hover::before {
  width: 56px;
}
.tx-error__quick-num {
  display: block;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--tx-mint);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.tx-error__quick h3 {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 0 0 8px;
}
.tx-error__quick p {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tx-text-dim);
  margin: 0;
}

/* JTL Default-Notification "pageNotFound" ausblenden — der wird über
   das globale Alert-System oben ans Layout gehängt (außerhalb <main>).
   data-key="pageNotFound" macht ihn eindeutig identifizierbar.
   Unsere tx-error-Page hat eigenen Headline-Text, also Doppelung killen. */
[data-key="pageNotFound"] {
  display: none !important;
}

@media (max-width: 980px) {
  .tx-error__quicks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tx-error { padding: 56px 18px 72px; }
  .tx-error__quicks { grid-template-columns: 1fr; }
  .tx-error__cta-row { flex-direction: column; align-items: stretch; }
}

/* Mini-FPS-Block in der Buybox: versteckt sich solange JS noch keine
   GPU-Daten gefunden/gefüllt hat (verhindert leeres Heading-Flash). */
[data-fps-mini][data-empty] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   FPS-CHECK — PDP Gaming Performance section
   ═══════════════════════════════════════════════════════════════ */
.tx-fps-check {
  background: var(--tx-bg-2);
  padding: 80px 0;
  border-top: 1px solid var(--tx-line);
}
.tx-fps-check__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.tx-fps-check__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.tx-fps-check__head-left { flex: 1; min-width: 0; }
.tx-fps-check__title {
  /* Spiegelt .tx-section-title (Homepage „Built Different" etc.)
     damit die FPS-Check-Headline mit den anderen PDP/Section-Titeln
     visuell übereinstimmt — uppercase, condensed, negative tracking. */
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tx-text);
  margin: 12px 0 4px;
}
.tx-fps-check__sub {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 0.75rem;
  color: var(--tx-text-mute);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
/* Resolution toggle */
.tx-fps-check__res-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--tx-line);
  border-radius: 8px;
  padding: 4px;
  flex-shrink: 0;
}
.tx-fps-res {
  padding: 7px 16px;
  border: none;
  background: none;
  color: var(--tx-text-mute);
  font-family: var(--tx-mono);  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
  transition: background .18s, color .18s;
  white-space: nowrap;
  letter-spacing: 0.07em;
}
.tx-fps-res.is-active {
  background: var(--tx-mint);
  color: var(--tx-bg);
}
.tx-fps-res:not(.is-active):hover { color: var(--tx-text); }
/* Carousel */
.tx-fps-check__carousel {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-fps-check__track-wrap {
  flex: 1;
  overflow: hidden;
}
.tx-fps-check__track {
  display: flex;
  gap: 16px;
  will-change: transform;
}
.tx-fps-nav {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tx-line-2);
  background: var(--tx-card);
  color: var(--tx-text);
  border-radius: 50%;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s, color .18s, opacity .18s;
  padding: 0;
  line-height: 1;
}
.tx-fps-nav:hover:not(:disabled) {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
}
.tx-fps-nav:disabled { opacity: .25; cursor: default; }
/* Game cards */
.tx-fps-card {
  flex-shrink: 0;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  border-radius: 12px;
  padding: 22px 20px 18px;
  transition: border-color .2s;
  min-width: 0;
}
.tx-fps-card:hover { border-color: var(--tx-line-2); }
.tx-fps-card__game {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--tx-text-mute);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-fps-card__val {
  font-family: var(--tx-h);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--tx-text);
  line-height: 1;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tx-fps-card__val em {
  font-family: var(--tx-mono); letter-spacing: 0.08em;  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tx-mint);
  font-style: normal;
}
.tx-fps-card__bar-track {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.tx-fps-card__bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--tx-mint);
  transition: width .55s cubic-bezier(.4,0,.2,1);
}
.tx-fps-card__preset {
  font-family: var(--tx-mono); font-weight: 600;  font-size: 0.68rem;
  color: rgba(255,255,255,.28);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── FPS-Spielbarkeits-Tiers ──────────────────────────────────
   Zwei Stufen unter der Default-Spielbarkeit:
   - is-fps-warn: 40-59 FPS  → amber, "Grenzwertig"
   - is-fps-low : <40 FPS    → rot,    "Kaum spielbar"
   Tier-Badge sitzt RECHTS neben dem FPS-Wert (nicht drunter), damit
   die Karten-Höhe konstant bleibt — Karten ohne Tier haben die gleiche
   Höhe wie Karten mit Tier. */
.tx-fps-card__valrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
}
.tx-fps-card__valrow .tx-fps-card__val { margin: 0; }
.tx-fps-card__tier {
  font-family: var(--tx-mono);  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.tx-fps-card.is-fps-warn .tx-fps-card__val,
.tx-fps-card.is-fps-warn .tx-fps-card__val em { color: #f5a524; }
.tx-fps-card.is-fps-warn .tx-fps-card__bar-fill { background: #f5a524; }
.tx-fps-card.is-fps-warn .tx-fps-card__tier {
  color: #f5a524;
  background: rgba(245, 165, 36, 0.12);
  border: 1px solid rgba(245, 165, 36, 0.35);
}
.tx-fps-card.is-fps-low .tx-fps-card__val,
.tx-fps-card.is-fps-low .tx-fps-card__val em { color: #ef4444; }
.tx-fps-card.is-fps-low .tx-fps-card__bar-fill { background: #ef4444; }
.tx-fps-card.is-fps-low .tx-fps-card__tier {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Mini-Rows in der Buybox spiegeln die gleichen Tiers (kein Badge,
   nur Farbe — Platz ist knapp). */
.tx-perf-row.is-fps-warn .tx-perf-row__val { color: #f5a524; }
.tx-perf-row.is-fps-warn .tx-perf-row__bar::after { background: #f5a524; }
.tx-perf-row.is-fps-low .tx-perf-row__val { color: #ef4444; }
.tx-perf-row.is-fps-low .tx-perf-row__bar::after { background: #ef4444; }
.tx-fps-check__no-data {
  text-align: center;
  color: var(--tx-text-mute);
  padding: 48px 24px;
  font-size: 0.9rem;
  width: 100%;
}
.tx-fps-check__disclaimer {
  font-size: 0.72rem;
  color: rgba(255,255,255,.28);
  margin-top: 28px;
  line-height: 1.5;
}
@media (max-width: 639px) {
  .tx-fps-check { padding: 56px 0; }
  .tx-fps-check__head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 1023px) {
  .tx-fps-check__title { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPATIBILITY VALIDATOR — Live-Check der Konfig-Komponenten
   Status: Per-Card-Badge (✓/⚠/⨯), Sticky-Banner über dem Buy-Form,
           Modal mit Konflikt-Liste, Buy-Button-Block bei Errors.
   JS: NOVAChild/js/compatibility.js
   ═══════════════════════════════════════════════════════════════ */

/* Per-Card Badge — als Badge nahe dem Card-Body */
.tx-cfg-card__compat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
  color: transparent;
  background: transparent;
  transition: color .15s ease, background .15s ease;
}
.tx-cfg-card__compat:empty { display: none; }
.tx-cfg-card__compat.is-ok    { color: #01DEC2; background: rgba(1,222,194,.10); }
.tx-cfg-card__compat.is-warn  { color: #FFC857; background: rgba(255,200,87,.14); }
.tx-cfg-card__compat.is-bad   { color: #ef4444; background: rgba(239,68,68,.20); animation: txCompatBadgePulse 1.6s ease-in-out infinite; }
@keyframes txCompatBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  60%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

/* What-If-Block — Karten die bei Auswahl einen Error auslösen würden,
   werden physisch unklickbar (input.disabled=true) UND visuell als
   "NICHT KOMPATIBEL" markiert. Distinkt von Out-of-Stock (`is-disabled`):
   diese Karte ist verfügbar, passt aber nicht zur aktuellen Konfig. */
.tx-cfg-card.is-compat-blocked {
  position: relative;
  cursor: not-allowed;
  border-color: rgba(239,68,68,.20);
}
.tx-cfg-card.is-compat-blocked:hover {
  transform: none;
  border-color: rgba(239,68,68,.30);
}
.tx-cfg-card.is-compat-blocked .tx-cfg-card__media {
  opacity: 0.45;
  filter: grayscale(.65);
}
.tx-cfg-card.is-compat-blocked .tx-cfg-card__body { opacity: 0.55; }
.tx-cfg-card.is-compat-blocked .tx-cfg-card__flag { display: none; } /* Kein "EMPFOHLEN" wenn inkompatibel */
.tx-cfg-card.is-compat-blocked::before {
  content: 'NICHT KOMPATIBEL';
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 9px;
  background: rgba(239,68,68,.92);
  color: #fff;
  border-radius: 4px;
  font: 800 0.62rem/1 var(--tx-font-display, 'Oxanium', sans-serif);
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(239,68,68,.30);
  pointer-events: none;
}
/* Hover auf der Card öffnet trotzdem das info-modal via info-button (i),
   aber Card-Klick darf den disabled-Radio nicht umflippen — input.disabled
   verhindert das nativ; wir blocken zusätzlich pointer-events auf der
   inneren input area um Click-Bleed zu vermeiden. */
.tx-cfg-card.is-compat-blocked .tx-cfg-card__input { pointer-events: none; }

/* Konflikt-Karte — kräftigeres Rot statt nur Outline. Selected + Konflikt
   überschreibt den Mint-Look, weil Rot-Severity Vorrang hat (User soll
   nicht erst durchklicken müssen). Hover-State bleibt ruhiger als der
   normale "lift up", weil das Item ohnehin schon laut auffällt. */
.tx-cfg-card:has(.tx-cfg-card__compat.is-bad) {
  border-color: rgba(239,68,68,.55);
  background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(239,68,68,.02)), var(--tx-card, #18191B);
  box-shadow: 0 0 0 1px rgba(239,68,68,.30), 0 10px 28px -10px rgba(239,68,68,.40);
}
.tx-cfg-card:has(.tx-cfg-card__compat.is-bad) .tx-cfg-card__title { color: #ffc4c4; }
.tx-cfg-card:has(.tx-cfg-card__compat.is-bad):hover { transform: none; border-color: rgba(239,68,68,.75); }
/* Selected + Konflikt: Mint-Border + Check-Bubble durch Rot ersetzen */
.tx-cfg-card:has(.tx-cfg-card__compat.is-bad):has(.tx-cfg-card__input:checked) {
  border-color: rgba(239,68,68,.85);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.85), 0 10px 28px -10px rgba(239,68,68,.45);
}
.tx-cfg-card:has(.tx-cfg-card__compat.is-bad):has(.tx-cfg-card__input:checked)::after {
  content: '!';
  background: #ef4444;
  color: #fff;
  font-weight: 800;
}

/* Compat-Banner — Top-Strip IN .tx-cfg-sticky--config (Markup-Position
   in productdetails/index.tpl). Statisch im Sticky-Stack: Sticky-Bar
   wächst beim Aktiv-Werden um die Banner-Höhe nach oben, schiebt sich
   die ganze Einheit vom Viewport-Boden hoch. Kein fixed/absolute mehr,
   keine z-Index-Mathematik, kein Höhen-Mismatch. Slide-Transition kommt
   aus dem .tx-cfg-sticky transform: translateY automatisch mit. */
.tx-compat-banner {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 11px 40px;
  font: 600 0.92rem/1.2 var(--tx-font-body, 'Inter', sans-serif);
  letter-spacing: 0.005em;
  color: #ffe1e1;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(45,12,12,0.94) 0%, rgba(28,12,12,0.94) 100%);
  border-bottom: 1px solid rgba(239,68,68,.45);
  box-shadow: inset 0 1px 0 rgba(239,68,68,.55);
  transition: background .2s ease;
}
.tx-compat-banner.is-active { display: flex; }
.tx-compat-banner[data-severity="warn"] {
  background: linear-gradient(90deg, rgba(50,38,12,0.94) 0%, rgba(34,26,12,0.94) 100%);
  border-bottom-color: rgba(255,200,87,.45);
  box-shadow: inset 0 1px 0 rgba(255,200,87,.55);
  color: #ffeec2;
}
@media (max-width: 1199px) { .tx-compat-banner { padding: 10px 24px; font-size: 0.88rem; } }
@media (max-width: 767px)  { .tx-compat-banner { padding: 9px 16px; font-size: 0.84rem; gap: 10px; } }

.tx-compat-banner__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  border-radius: 999px;
  background: rgba(239,68,68,.22);
  border: 1px solid rgba(239,68,68,.60);
  color: #ffd1d1;
  animation: txCompatIconPulse 1.6s ease-in-out infinite;
}
.tx-compat-banner[data-severity="warn"] .tx-compat-banner__icon {
  background: rgba(255,200,87,.20);
  border-color: rgba(255,200,87,.55);
  color: #ffe9b9;
  animation-name: txCompatIconPulseWarn;
}
@keyframes txCompatIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  60%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
@keyframes txCompatIconPulseWarn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,87,.55); }
  60%      { box-shadow: 0 0 0 8px rgba(255,200,87,0); }
}

.tx-compat-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.tx-compat-banner__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(239,68,68,.85);
  color: #fff;
  font: 800 0.74rem/1 var(--tx-font-display, 'Oxanium', sans-serif);
  letter-spacing: 0.02em;
}
.tx-compat-banner[data-severity="warn"] .tx-compat-banner__count {
  background: rgba(255,200,87,.95);
  color: #2b1d00;
}
.tx-compat-banner__count[hidden] { display: none; }
.tx-compat-banner__label {
  font-weight: 600;
  color: inherit;
  vertical-align: middle;
}
.tx-compat-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe1e1;
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.45);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tx-compat-banner[data-severity="warn"] .tx-compat-banner__cta {
  color: #ffeec2;
  background: rgba(255,200,87,.16);
  border-color: rgba(255,200,87,.45);
}
.tx-compat-banner__cta::after {
  content: '→';
  display: inline-block;
  transform: translateX(0);
  transition: transform .15s ease;
}
.tx-compat-banner:hover .tx-compat-banner__cta {
  background: rgba(239,68,68,.28);
  border-color: rgba(239,68,68,.65);
}
.tx-compat-banner[data-severity="warn"]:hover .tx-compat-banner__cta {
  background: rgba(255,200,87,.26);
  border-color: rgba(255,200,87,.65);
}
.tx-compat-banner:hover .tx-compat-banner__cta::after { transform: translateX(3px); }
@media (max-width: 640px) {
  .tx-compat-banner__cta { padding: 6px 10px; font-size: 0.74rem; }
  .tx-compat-banner__cta-text { display: none; }   /* Pfeil + Click-Affordance reichen */
}

/* Modal — wiederverwendet das info-modal Pattern aber eigene IDs/Klassen */
.tx-compat-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
}
.tx-compat-modal.is-open { display: block; }
.tx-compat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.tx-compat-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 520px;
  width: calc(100vw - 40px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--tx-card, #18191B);
  border: 1px solid var(--tx-line, #2a2c2f);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.tx-compat-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--tx-text-mute, #888);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
}
.tx-compat-modal__close:hover { color: var(--tx-text, #fff); background: rgba(255,255,255,.06); }
.tx-compat-modal__title {
  margin: 0 0 16px 0;
  font: 700 1.05rem/1.3 var(--tx-font-display, 'Oxanium', sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-text, #fff);
}
.tx-compat-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tx-compat-modal__item {
  position: relative;
  padding: 10px 0 10px 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tx-text-dim, #cfcfcf);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tx-compat-modal__item:last-child { border-bottom: 0; }
.tx-compat-modal__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ef4444;
}
.tx-compat-modal__item.is-warn::before { background: #FFC857; }
.tx-compat-modal__item.is-ok::before { background: #01DEC2; }
.tx-compat-modal__item.is-ok { color: #01DEC2; }
.tx-compat-modal__item b { color: var(--tx-text, #fff); font-weight: 700; }
.tx-compat-modal__foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.30);
  border-radius: 8px;
  font-size: 0.85rem;
  color: #ffd9d9;
}
.tx-compat-modal__foot-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
}

/* Buy-Button gating */
.is-compat-blocked {
  opacity: 0.55;
  cursor: not-allowed !important;
  position: relative;
}
.is-compat-blocked::after {
  content: '⚠';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   ============================== PC-FINDER · BEGIN ==============================
   Component appended 2026-05-05 · drop-in tool for /index.tpl after Bestseller.
   To remove: delete everything between BEGIN/END markers + tx_pc_finder.tpl
   include in page/index.tpl + pc-finder.js include in layout/footer.tpl.
   See snippets/tx_pc_finder.tpl for documentation.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Section frame (matches .tx-section spacing) ─────────────── */
.tx-pcf {
  padding: 96px 0;
  position: relative;
  background: var(--tx-bg);
}
/* ─── HOMEPAGE SECTION-RHYTHM ──────────────────────────────────────
   Bricht den flachen Dunkel-Stretch (Bestseller→PC-Finder→Highlight,
   alle --tx-bg) auf: PC-Finder bekommt ein helleres Band + dezenten
   Mint-Glow, Highlight einen feinen Glow-Akzent. PLP-Finder unberührt.
   Bänder-Reihenfolge: USP(bg-2)·Bestseller(bg)·PC-Finder(bg-2)·Highlight(bg)·Partner(bg-3). */
.tx-pcf:not(.tx-pcf--plp) {
  /* Eigene Zone: hellere Basis (bg-3→bg-2) + kräftigerer Mint-Top-Glow +
     Rahmenkanten oben/unten, damit die Sektion nicht mehr in die fast-
     schwarze Page (bg #0B0C0D) zerfließt. */
  background:
    radial-gradient(80% 75% at 50% -6%, rgba(1,222,194,0.11), transparent 58%),
    linear-gradient(180deg, var(--tx-bg-3), var(--tx-bg-2) 60%);
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
}
.tx-aktion {
  background:
    radial-gradient(55% 80% at 88% -5%, rgba(1,222,194,0.05), transparent 55%),
    var(--tx-bg);
}
.tx-pcf--tight { padding: 64px 0; }
.tx-pcf--strip-only { padding: 24px 0; border-bottom: 1px solid var(--tx-line); background: var(--tx-bg-2); }
/* compact default state (before user filters) — section stays small */
.tx-pcf:not(.is-revealed) { padding: 80px 0 64px; }

/* ─── Section head (matches .tx-section__head pattern) ────────── */
.tx-pcf__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
}
.tx-pcf__head-text { max-width: 720px; }
.tx-pcf__head-cta { flex-shrink: 0; }

/* ─── Mode switch (Spiel / Hardware) ──────────────────────────── */
.tx-pcf-mode {
  display: inline-flex;
  background: var(--tx-bg-2);
  border: 1px solid var(--tx-line);
  margin-bottom: 16px;
  position: relative;
}
.tx-pcf-mode__btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--tx-line);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .15s, background .15s;
}
.tx-pcf-mode__btn:last-child { border-right: 0; }
.tx-pcf-mode__btn:hover { color: var(--tx-text); }
.tx-pcf-mode__btn.is-active {
  background: var(--tx-bg);
  color: var(--tx-mint);
  position: relative;
}
.tx-pcf-mode__btn.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--tx-mint);
}
.tx-pcf-mode__btn-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border: 1px solid currentColor;
  background: transparent;
}
.tx-pcf-mode__btn.is-active .tx-pcf-mode__btn-dot {
  background: var(--tx-mint);
  border-color: var(--tx-mint);
}

/* ─── Filter strip (the slim row of inputs) ───────────────────── */
.tx-pcf-strip {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.8fr auto auto;
  gap: 14px;
  align-items: end;
  background: var(--tx-bg-2);
  border: 1px solid var(--tx-line);
  border-left: 2px solid var(--tx-mint);
  padding: 18px 20px;
}
.tx-pcf-strip[data-mode="hw"] {
  grid-template-columns: 1.6fr 1.6fr 1.6fr auto auto;
}

.tx-pcf-strip__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tx-pcf-strip__col--game,
.tx-pcf-strip__col--hw { display: none; }
.tx-pcf-strip[data-mode="game"] .tx-pcf-strip__col--game { display: flex; }
.tx-pcf-strip[data-mode="hw"]   .tx-pcf-strip__col--hw   { display: flex; }
.tx-pcf-strip__col--shared { display: flex; }

.tx-pcf-strip__label {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-pcf-strip__label .num { color: var(--tx-mint); margin-right: 4px; }

/* ─── Select (Toxic-style, sharp, mint focus) ─────────────────── */
.tx-pcf-select {
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
  font-family: var(--tx-h);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 38px 11px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23A8AFB1' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .15s;
}
.tx-pcf-select:hover { border-color: var(--tx-line-2); }
.tx-pcf-select:focus {
  outline: none;
  border-color: var(--tx-mint);
}

/* ─── Pills (Auflösung / FPS-Ziel) ────────────────────────────── */
.tx-pcf-pills {
  display: inline-flex;
  border: 1px solid var(--tx-line);
  background: var(--tx-bg-3);
}
.tx-pcf-pill {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--tx-line);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: color .15s, background-color .15s;
}
.tx-pcf-pill:last-child { border-right: 0; }
.tx-pcf-pill:hover { color: var(--tx-text); }
.tx-pcf-pill.is-active {
  background: var(--tx-mint);
  color: #062019;
  font-weight: 800;
}

/* ─── Strip CTAs ──────────────────────────────────────────────── */
.tx-pcf-strip__cta {
  white-space: nowrap;
  padding: 14px 22px;
  font-size: 12px;
}
.tx-pcf-strip__reset {
  background: transparent;
  border: 1px solid var(--tx-line);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  align-self: end;
  height: 44px;
}
.tx-pcf-strip__reset:hover { border-color: var(--tx-mint); color: var(--tx-mint); }

/* ─── Empty-state hint (shown when no results yet) ────────────── */
.tx-pcf-empty {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: transparent;
  border: 1px dashed var(--tx-line);
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-mute);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-pcf-empty::before {
  content: '↑';
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--tx-mint);
  opacity: 0.6;
}
.tx-pcf-empty b { color: var(--tx-text-dim); font-weight: 600; }
.tx-pcf.is-revealed .tx-pcf-empty { display: none; }

/* result/status block — hidden until revealed, smooth fade-in */
.tx-pcf-reveal {
  display: none;
  animation: tx-pcf-fade .35s ease;
}
.tx-pcf.is-revealed .tx-pcf-reveal { display: block; }
@keyframes tx-pcf-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Status line (between strip and results) ─────────────────── */
.tx-pcf-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 16px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-dim);
}
.tx-pcf-status__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-mint);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}
.tx-pcf-status__live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--tx-mint);
  border-radius: 50%;
  animation: tx-pcf-pulse 2.4s infinite;
}
@keyframes tx-pcf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ─── Result cards · 3 horizontal · MATCH center stands out ──────
   Layout: side cards normal height, center card scales up + lifts up
   so the user's eye gravitates to the recommended option. Side cards
   are slightly desaturated to flatten the visual weight. */
.tx-pcf-results {
  display: grid;
  /* GLEICH GROSSE Karten (User 2026-07-09) — vorher Mitte 1.22fr = unsymmetrisch
     + der translateY-Lift der Mittelkarte ragte oben aus der Box. Jetzt drei
     identische Spalten, Best-Match wird nur per Mint-Rahmen hervorgehoben. */
  /* --tx-pcf-n setzt pc-finder.js auf die Zahl der Treffer: bleibt für eine Rolle
     kein ehrlicher Kandidat (z.B. kein Build mit echter Reserve), rendern nur 2
     Karten — die sollen dann die Breite füllen statt eine Spalte leer zu lassen. */
  grid-template-columns: repeat(var(--tx-pcf-n, 3), 1fr);
  grid-auto-rows: 1fr;   /* alle Karten exakt gleich hoch */
  gap: 20px;
  align-items: stretch;
  padding-top: 4px;
  padding-bottom: 4px;
}

.tx-pcf-card {
  background: linear-gradient(180deg, var(--tx-card), var(--tx-card-2));
  border: 1px solid var(--tx-line-2);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: var(--tx-text) !important;       /* defeat JTL inline a:hover{color:#f8bf00} */
  transition: border-color .25s, transform .25s, box-shadow .25s;
  /* WICHTIG: Grid-Item braucht min-width:0, sonst = min-width:auto = volle
     min-content-Breite des nowrap-Mainboard-Strings → Grid-Blowout, Karten
     ragen über den Container-Rand (User „außerhalb der Box" 2026-07-09).
     Mit min-width:0 schrumpfen die 1fr-Spalten korrekt, dd-Ellipsis greift. */
  min-width: 0;
  overflow: hidden;
  /* cut corners: top-right + bottom-left, like .tx-btn */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.tx-pcf-card:hover,
.tx-pcf-card:focus,
.tx-pcf-card:active,
.tx-pcf-card:visited {
  color: var(--tx-text) !important;       /* same defeat — every link state */
  text-decoration: none !important;
}
.tx-pcf-card:hover {
  border-color: var(--tx-mint);
  transform: translateY(-3px);
}
/* Lock child text colors so the JTL inline a:hover yellow can't bleed in.
   Each child element re-asserts its real color even inside a hovered <a>. */
.tx-pcf-card .tx-pcf-card__name        { color: #FFFFFF !important; }
.tx-pcf-card .tx-pcf-card__tagline     { color: var(--tx-text-mute) !important; }
.tx-pcf-card .tx-pcf-card__specs dt    { color: var(--tx-text-mute) !important; }
.tx-pcf-card .tx-pcf-card__specs dd    { color: var(--tx-text) !important; }
.tx-pcf-card .tx-pcf-card__price-val   { color: var(--tx-text) !important; }
.tx-pcf-card .tx-pcf-card__price-tax   { color: var(--tx-text-mute) !important; }
.tx-pcf-card .tx-pcf-card__media-fps   { color: var(--tx-text) !important; }
.tx-pcf-card .tx-pcf-card__media-fps small { color: var(--tx-mint) !important; }
.tx-pcf-card .tx-pcf-card__media-game  { color: var(--tx-text-dim) !important; }
.tx-pcf-card .tx-pcf-card__media-game b{ color: var(--tx-text) !important; }

/* BEST MATCH (links) — gleiche Größe wie die anderen, NUR per Mint-Rahmen +
   dezentem Glow hervorgehoben (kein Größen-/translateY-Lift mehr → symmetrisch
   und bleibt sauber in der Box). */
.tx-pcf-card--match {
  border-color: var(--tx-mint);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(1,222,194,0.13) 0%, var(--tx-card) 42%);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.45),
    0 0 0 1px rgba(1,222,194,0.30),
    0 0 40px rgba(1,222,194,0.10);
  z-index: 2;
}
.tx-pcf-card--match:hover {
  border-color: var(--tx-mint);
  transform: translateY(-3px);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.5),
    0 0 0 1px rgba(1,222,194,0.45),
    0 0 56px rgba(1,222,194,0.16);
}

.tx-pcf-card__role {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--tx-sub);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--tx-bg-3);
  color: var(--tx-text-mute);
  border-right: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
  z-index: 2;
}
.tx-pcf-card--match .tx-pcf-card__role {
  background: var(--tx-mint);
  color: #062019;
  border-right-color: var(--tx-mint);
  border-bottom-color: var(--tx-mint);
}
/* Tier-Farbcodierung der Seitenkarten (MATCH = Mint-Filled = Held;
   die zwei Nebenrollen tönen + farbiger Text, damit sie als eigene
   Tiers lesen statt grau-gleich). */
.tx-pcf-card--min .tx-pcf-card__role {        /* Sparvariante — kühler Blau-Akzent (Value) */
  background: rgba(77,163,255,0.12);
  color: #6FB6FF;
  border-right-color: rgba(77,163,255,0.5);
  border-bottom-color: rgba(77,163,255,0.5);
}
.tx-pcf-card--headroom .tx-pcf-card__role {   /* Mehr Reserve — Violett-Akzent (High-End) */
  background: rgba(185,140,255,0.12);
  color: #C6A6FF;
  border-right-color: rgba(185,140,255,0.5);
  border-bottom-color: rgba(185,140,255,0.5);
}

/* media (PC image) */
.tx-pcf-card__media {
  height: 220px;
  /* Soft glow behind the PC so the dark case doesn't melt into the dark
     page (was flat → cards "gingen unter"). Match-Karte überschreibt mit
     stärkerem Mint-Glow und bleibt dadurch der Held. */
  background:
    radial-gradient(ellipse at 50% 78%, rgba(1,222,194,0.06) 0%, transparent 62%),
    linear-gradient(180deg, var(--tx-bg-2) 0%, var(--tx-card-2) 100%);
  border-bottom: 1px solid var(--tx-line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tx-pcf-card--match .tx-pcf-card__media {
  background:
    radial-gradient(ellipse at 50% 76%, rgba(1,222,194,0.26) 0%, transparent 60%),
    linear-gradient(180deg, var(--tx-bg-2) 0%, var(--tx-card-2) 100%);
}
.tx-pcf-card__media img {
  max-width: 80%;
  max-height: 192px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.65));
  position: relative; z-index: 1;
  transition: transform .3s;
}
.tx-pcf-card:hover .tx-pcf-card__media img { transform: scale(1.04); }

.tx-pcf-card__media-fps {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--tx-h);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--tx-text);
  letter-spacing: -0.03em;
  z-index: 2;
  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.tx-pcf-card--match .tx-pcf-card__media-fps {
  font-size: 46px;
  color: var(--tx-text);
}
.tx-pcf-card__media-fps small {
  font-family: var(--tx-sub);
  font-size: 12px;
  color: var(--tx-mint);
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: top;
  display: inline-block;
  padding-top: 6px;
}
.tx-pcf-card__media-game {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  z-index: 2;
}
.tx-pcf-card__media-game b { color: var(--tx-text); font-weight: 600; }

/* body */
.tx-pcf-card__body {
  padding: 22px 24px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow flex children to shrink + truncate */
}
/* Aligned to .tx-product-card__name (bestseller cards):
   Rajdhani 600 · 2-line clamp · consistent min-height across cards. */
.tx-pcf-card__name {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #FFFFFF;
  /* clamp long Wawi names ("TOXIC TAIPAN-Win11 Gaming PC AMD…") to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  min-height: 2.4em;
}
.tx-pcf-card__name em {
  font-style: normal;
  color: var(--tx-mint);
  font-weight: 600;
}
.tx-pcf-card__tagline {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  min-height: 1.6em;
}

/* Spec rows · vertical list (CPU/GPU/Mainboard/RAM/SSD) — matches
   the bestseller .tx-product-card__specs pattern: <dl> with <div>
   rows, dt label left, dd value right, dashed dividers. */
.tx-pcf-card__specs {
  margin: 0 0 0;
  padding: 14px 0 4px;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-body);
  font-size: 13px;
  line-height: 1.45;
}
.tx-pcf-card__specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(31,45,45,0.6);
  min-width: 0;     /* allow dd to shrink below content width */
  overflow: hidden; /* clip any overflow that escapes dd truncation */
}
.tx-pcf-card__specs > div:last-child { border-bottom: 0; }
.tx-pcf-card__specs dt {
  font-family: var(--tx-mono);  font-size: 12px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  font-weight: 600;
  flex-shrink: 0;
  margin: 0;
}
.tx-pcf-card__specs dd {
  font-family: var(--tx-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--tx-text);
  letter-spacing: 0;
  text-align: right;
  margin: 0;
  flex: 1 1 auto;   /* take the remaining row width so ellipsis can engage */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* footer (price + CTA) — top divider matches the bestseller card */
.tx-pcf-card__foot {
  display: flex;
  align-items: center;
  /* wie bei .tx-aktion-card__fin: der Rechtshinweis unter dem Preis ist
     laenger geworden, die Karte wird per JS gebaut und nicht mitfotografiert.
     Umbruch statt Ueberlauf. */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--tx-line);
}
.tx-pcf-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.tx-pcf-card__price-val {
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 24px;
  color: var(--tx-text);
  letter-spacing: -0.01em;
}
.tx-pcf-card__price-tax {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.tx-pcf-card__cta {
  /* inherits from .tx-btn (in HTML markup) — no extra rules needed */
  padding: 12px 18px;
  font-size: 12px;
}

/* miss-target hint (when fps under target) */
.tx-pcf-card__hint {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-warn);
  background: rgba(255,200,87,0.12);
  border: 1px solid var(--tx-warn);
  padding: 4px 8px;
  z-index: 3;
}

/* ─── Footnote (subtle, no mint, just a methodology link) ─────── */
.tx-pcf-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 12px;
  color: var(--tx-text-mute);
  letter-spacing: 0.04em;
}
.tx-pcf-foot a {
  color: var(--tx-text-mute);
  border-bottom: 1px dashed var(--tx-line);
  transition: color .15s, border-color .15s;
}
.tx-pcf-foot a:hover { color: var(--tx-text-dim); border-bottom-color: var(--tx-line-2); }

/* ─── Strip-only mode (PLP top-of-page) ───────────────────────── */
.tx-pcf--strip-only .tx-pcf__head { display: none; }
.tx-pcf--strip-only .tx-pcf-mode {
  margin-right: 12px;
  margin-bottom: 0;
  align-self: stretch;
}
.tx-pcf--strip-only .tx-pcf-mode__btn { padding: 8px 14px; font-size: 12px; }
.tx-pcf--strip-only .tx-pcf-strip {
  padding: 12px 16px;
  border-left-width: 2px;
  align-items: center;
  grid-template-columns: auto 1fr 1.2fr 1.4fr auto auto;
}
.tx-pcf--strip-only .tx-pcf-strip__col { gap: 4px; }
.tx-pcf--strip-only .tx-pcf-strip__label { font-size: 11px; }
.tx-pcf--strip-only .tx-pcf-status,
.tx-pcf--strip-only .tx-pcf-results,
.tx-pcf--strip-only .tx-pcf-foot { display: none; }
.tx-pcf--strip-only .tx-pcf-strip__col--mode {
  display: flex; flex-direction: row; align-items: center;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .tx-pcf { padding: 64px 0; }
  .tx-pcf__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
  .tx-pcf-strip { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .tx-pcf-strip__cta, .tx-pcf-strip__reset { grid-column: span 1; }
  /* Stacked = one uniform column. No 2+1 "hero card 3" split, so all
     three cards are identical width & structure (the user-reported bug). */
  .tx-pcf-results { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tx-pcf-card:nth-child(3) { grid-column: auto; flex-direction: column; }
  .tx-pcf-card:nth-child(3) .tx-pcf-card__media {
    width: 100%; height: 220px; border-right: 0;
    border-bottom: 1px solid var(--tx-line);
  }
  .tx-pcf-card:nth-child(3) .tx-pcf-card__body { flex: 1; }
  .tx-pcf--strip-only .tx-pcf-strip { grid-template-columns: 1fr; }
  /* Skip the desktop "lift" on stacked layouts — it leaves an awkward gap */
  .tx-pcf-card--match { transform: none; }
  .tx-pcf-card--match:hover { transform: translateY(-3px); }
}
@media (max-width: 720px) {
  .tx-pcf-strip { grid-template-columns: 1fr; }
  .tx-pcf-strip__cta, .tx-pcf-strip__reset { grid-column: span 1; }
  /* results already single-column from the ≤1180 rule — just size tweaks */
  .tx-pcf-card__media-fps { font-size: 32px; }
  .tx-pcf-card--match .tx-pcf-card__media-fps { font-size: 38px; }
  .tx-pcf-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ─── PLP MODE · compact filter strip on top of productlist ──── */
.tx-pcf--plp {
  padding: 24px 0 28px;
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-line);
  margin-bottom: 24px;
}
.tx-pcf--plp:not(.is-revealed) { padding: 24px 0 28px; }
.tx-pcf--plp.is-revealed { padding: 24px 0 56px; }

/* compact one-line head (replaces big section title in plp mode) */
.tx-pcf__head--plp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.tx-pcf__head-hint {
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text-mute);
  letter-spacing: 0.02em;
}

/* slim down mode toggle + strip in PLP mode */
.tx-pcf--plp .tx-pcf-mode { margin-bottom: 8px; }
.tx-pcf--plp .tx-pcf-mode__btn { padding: 8px 16px; font-size: 12px; }
.tx-pcf--plp .tx-pcf-strip { padding: 14px 16px; gap: 10px; }
.tx-pcf--plp .tx-pcf-strip__label { font-size: 11px; }
.tx-pcf--plp .tx-pcf-select { font-size: 13px; padding: 9px 32px 9px 12px; }
.tx-pcf--plp .tx-pcf-pill { padding: 8px 12px; font-size: 12px; }
.tx-pcf--plp .tx-pcf-strip__reset { padding: 10px 14px; height: 38px; }
.tx-pcf--plp .tx-pcf-strip__cta { padding: 10px 18px; font-size: 12px; }

/* ─── Quick-filter category buttons (4 across) ─── */
.tx-pcf-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.tx-pcf-cat {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  text-decoration: none;
  cursor: pointer;
  /* same cut-corner as .tx-btn but smaller bevel for the button row */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color .15s, color .15s, background-color .15s;
}
.tx-pcf-cat:hover {
  border-color: var(--tx-mint);
  color: var(--tx-text);
  background: var(--tx-bg-3);
}
.tx-pcf-cat:hover .tx-pcf-cat__count { color: var(--tx-mint); }
.tx-pcf-cat__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.tx-pcf-cat__count {
  font-family: var(--tx-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tx-text-mute);
  text-transform: none;
  flex-shrink: 0;
  transition: color .15s;
}

/* PLP empty state · slimmer */
.tx-pcf--plp .tx-pcf-empty { margin-top: 14px; padding: 10px 14px; font-size: 12px; }

/* PLP · "Filter aktiv" banner (replaces 3-card reveal) */
.tx-pcf-banner {
  margin-top: 14px;
  padding: 12px 18px;
  background: var(--tx-mint-soft);
  border: 1px solid var(--tx-mint);
  border-left: 3px solid var(--tx-mint);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--tx-sub); font-weight: 600;
  font-size: 13px;
  color: var(--tx-text);
  animation: tx-pcf-fade .25s ease;
}
.tx-pcf-banner[hidden] { display: none; }
.tx-pcf-banner__live {
  font-family: var(--tx-sub);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-mint);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tx-pcf-banner__live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--tx-mint);
  border-radius: 50%;
  animation: tx-pcf-pulse 2.4s infinite;
}
.tx-pcf-banner__text {
  flex: 1;
  color: var(--tx-text-dim);
  letter-spacing: 0.02em;
}
.tx-pcf-banner__text b { color: var(--tx-text); font-weight: 700; }
.tx-pcf-banner__reset {
  background: transparent;
  border: 1px solid var(--tx-line);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.tx-pcf-banner__reset:hover { border-color: var(--tx-mint); color: var(--tx-text); }

/* PLP filter mode · dim filtered-out product cards (visual cue) */
.tx-product-card.tx-pcf-hidden { display: none !important; }

@media (max-width: 720px) {
  .tx-pcf-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 1180px) {
  .tx-pcf-cats { grid-template-columns: repeat(2, 1fr); }
  .tx-pcf--plp .tx-pcf__head--plp { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .tx-pcf-cats { grid-template-columns: 1fr; }
  .tx-pcf-cat { font-size: 12px; padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ============================== MOBILE FIXES · 2026-05-05 ====================
   Four iterations from a mobile review:
   1. PLP filter sidebar → hidden by default, "Filter" button toggles it
   2. Mobnav subheads → mint instead of mute (consistent section-header look)
   3. Partner-logo grid → smaller logos + tighter gaps
   4. Partner-Editionen OPC cards → hide buttons + paragraph copy on mobile
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. PLP filter toggle button (visible only on mobile) ───────
   IMPORTANT: button is direct grid-child of .tx-plp__layout (see
   productlist/index.tpl). Without grid-column:1/-1 it would occupy
   only col 1 of the 260px-1fr grid → on mobile/tablet it would push
   sidebar into col 2 and cards into row 2 col 1 (very narrow). The
   span-all-columns rule keeps the layout sane regardless of viewport
   weirdness or stale CSS cache. */
.tx-plp__filter-toggle {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  background: var(--tx-bg-2);
  border: 1px solid var(--tx-line);
  border-left: 2px solid var(--tx-mint);
  color: var(--tx-text);
  font-family: var(--tx-h);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 18px;
  margin: 0 0 18px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color .15s;
}
.tx-plp__filter-toggle::after {
  content: '▾';
  float: right;
  color: var(--tx-mint);
  transition: transform .2s;
}
.tx-plp__filter-toggle.is-open::after { transform: rotate(180deg); }
.tx-plp__filter-toggle:hover { border-left-color: var(--tx-mint-2); }

@media (max-width: 880px) {
  .tx-plp__filter-toggle { display: block; }
  /* Hide the sidebar by default; .is-open opens it */
  .tx-plp__sidebar { display: none; position: static; }
  .tx-plp__sidebar.is-open { display: block; margin-bottom: 24px; }
  /* Sidebar uses card-style instead of sticky positioning on mobile */
  .tx-plp__sidebar.is-open .tx-filter-head {
    background: var(--tx-bg-2);
    border: 1px solid var(--tx-line);
    padding: 12px 16px;
    margin-bottom: 8px;
  }
}

/* ─── 1b. PLP layout safety net ─────────────────────────────────
   Force a clean breakpoint: at any viewport that triggers the mobile
   filter toggle, also collapse the layout to a single column. This
   defends against any stale rule that leaves grid-template-columns
   at "260px 1fr" while the toggle is visible. */
@media (max-width: 880px) {
  .tx-plp__layout { grid-template-columns: 1fr !important; }
  .tx-plp__grid { grid-template-columns: 1fr !important; }
}

/* ─── 2. Mobnav · category section headers in mint ─────────────── */
.tx-mobnav__subhead {
  color: var(--tx-mint) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  margin: 14px 0 6px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tx-line);
}
/* Group's "Alle X" link → keep mint but smaller, less competing with subheads */
.tx-mobnav__sublink--all {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  padding: 8px 4px 14px !important;
  border-bottom: 1px solid var(--tx-line);
  margin-bottom: 6px;
}
/* Active sub-cat → border-left + slightly stronger text, NOT mint color
   (mint is reserved for true headers; active uses spatial cue instead) */
.tx-mobnav__sublink.is-active,
.tx-mobnav__sublink[aria-current="page"] {
  color: var(--tx-text) !important;
  border-left: 2px solid var(--tx-mint);
  padding-left: 10px !important;
  font-weight: 700;
}

/* ─── 3. Partner-Logos · smaller + tighter on mobile ───────────── */
@media (max-width: 575px) {
  .tx-partners__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 14px;
  }
  .tx-partners__logos img {
    max-height: 22px;
  }
}
@media (max-width: 380px) {
  .tx-partners__logos { gap: 14px 10px; }
  .tx-partners__logos img { max-height: 20px; }
}

/* ─── 4. Partner-Editionen · Mobile ─────────────────────────────────────────
   ENTFERNT am 2026-08-07. Der Block hat die Hero-Karten der Editionen auf dem
   Telefon kompakt gemacht (4:3, Text 85 %, Titel 18 px) — alles mit
   !important, weil er gegen die Plugin-CSS ankommen musste. Seit dem Umbau
   nach design_handoff_editionen/ gibt die Sektion die Geometrie selbst vor,
   und die alten !important schlugen die neuen Regeln: auf 390 px stand der
   Innenabstand wieder auf 20 px rundum (damit fiel die Reserve fuer den
   Knopf an der Unterkante weg) und der Titel auf 18 px. Ein !important
   schlaegt jede Regel ohne, egal wie spezifisch.
   Der Selektor .tx-cards-stack--opc kommt NUR in dieser einen Sektion vor
   (page/index.tpl), der Block hatte also keine zweite Aufgabe.
   Neue Fassung: Block „PARTNER-EDITIONEN" am Ende dieser Datei. */

/* ─── 6. Hero Slide BIG · Mobile: spacing (plugin CSS may be cached) ──────── */
@media (max-width: 720px) {
  .tx-hero-slide--big > .tx-hero-slide__content {
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 32px 24px 44px !important;
  }
  .tx-hero-slide--big .tx-hero-slide__kicker  { margin: 0 !important; font-size: 0.82rem !important; }
  .tx-hero-slide--big .tx-hero-slide__headline { font-size: 2.1rem !important; margin: 0 !important; }
  .tx-hero-slide--big .tx-hero-slide__sub      { font-size: 0.97rem !important; margin: 0 !important; }
  .tx-hero-slide--big .tx-hero-slide__ctas     { margin: 0 !important; }
}

/* ============================================================================
   ============================== MOBILE FIXES · END ===========================
   ============================================================================ */

/* ============================== PC-FINDER · END ============================== */


/* ============================================================================
   GLOBAL CMS-PAGE SPACING (Impressum, AGB, Datenschutz, Widerruf, Versand …)
   --------------------------------------------------------------------------
   .index-heading-wrapper (Page-H1) + .link-content (Body) sind die zwei
   Container die JTL für statische CMS-Seiten rendert. Stock-NOVA gibt denen
   nur Bootstrap-Container-Padding (15-20px) — direkt unter Sticky-Header.
   Hier: anständiges Top-Padding damit Inhalt nicht am Header klebt.
   ============================================================================ */
.index-heading-wrapper {
  padding-top: 64px !important;
  padding-bottom: 16px !important;
}
.link-content {
  padding-bottom: 80px !important;
}
@media (max-width: 880px) {
  .index-heading-wrapper { padding-top: 40px !important; }
  .link-content { padding-bottom: 56px !important; }
}

/* ============================================================================
   A11Y · GLOBAL HEADLINE & TEXT CONTRAST FIX
   --------------------------------------------------------------------------
   Headlines auf allen JTL-CMS-Pages (Impressum, AGB, Datenschutz, Widerruf,
   Versandinfos, …) rendern in .container.index-heading-wrapper (<h1>) und
   .container.link-content (h2/h3/h4 + p/li). Ohne expliziten color erbten
   sie NOVA's Bootstrap-Default → grau auf schwarz, WCAG-kritisch.
   Hier vereinheitlicht: weiß, gleiche Display-Font, klare Hierarchie.
   ============================================================================ */
.index-heading-wrapper h1,
.link-content h1,
.link-content h2,
.link-content h3,
.link-content h4,
.link-content h5,
.link-content h6,
.tx-legal h1,
.tx-legal h2,
.tx-legal h3,
.tx-legal h4,
.tx-legal h5,
.tx-legal h6 {
  color: var(--tx-text);
  font-family: var(--tx-h);
}

.index-heading-wrapper h1,
.tx-legal h1 {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 32px;
}

.link-content h2,
.tx-legal h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 40px 0 14px;
  text-transform: none;
}

.link-content h3,
.tx-legal h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 28px 0 10px;
  text-transform: none;
}

.link-content h4,
.tx-legal h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 22px 0 8px;
  letter-spacing: 0.01em;
}

.link-content h5,
.link-content h6,
.tx-legal h5,
.tx-legal h6 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 18px 0 6px;
}

/* Body-Text auf CMS-Pages: voller Kontrast, einheitliche Schrift/Größe */
.link-content,
.link-content p,
.link-content li,
.link-content address,
.link-content td,
.link-content th {
  color: var(--tx-text);
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
}

.link-content a {
  color: var(--tx-mint);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.link-content a:hover { text-decoration-style: solid; }

/* Mobile: H1 etwas kleiner */
@media (max-width: 720px) {
  .index-heading-wrapper h1,
  .tx-legal h1 { font-size: 36px; }
  .link-content h2,
  .tx-legal h2 { font-size: 22px; }
}

/* PDP Hero — Specs-Subline + Lead waren auf --tx-text-dim, gleicher Bug */
.tx-cfg-info__subtitle { color: var(--tx-text); }
.tx-cfg-info__lead { color: var(--tx-text); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIXES · Hero Slider · Blog · PC-Finder
   Behebt: Hero-Buttons über Bild (verwirrend), Blog-Title-Overlap
   auf eigenen Banner-Bildern, PC-Finder Karte sprengt Frame,
   PC-Finder Hint zerschoss sich in Spalten.
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO · Bild zuerst, Text/CTAs darunter ── */
@media (max-width: 880px) {
  .tx-hero__inner > div:first-child { order: 2; }
  .tx-hero__visual { order: 1; }
  /* Slider-Bars deutlicher zeigen — User-Hinweis: slider war "nicht
     wirklich sichtbar" auf mobile. Größerer aktiver Strich + mehr
     Abstand zum Bild. */
  .tx-hero-slider__bars { bottom: 18px; gap: 8px; }
  .tx-hero-slider__bar { width: 24px; height: 6px; }
  .tx-hero-slider__bar.is-active { width: 40px; }
}
@media (max-width: 480px) {
  .tx-hero__inner { gap: 22px; }
  /* Touch-Swipe ist aktiv (ToxicHeroSlider.tpl) — Cursor-Hint für visuelle
     User dass es draggable ist (auch wenn Touch das nicht braucht). */
  .tx-hero-slider__track { touch-action: pan-y; }
}

/* ─── BLOG · Bild + Text trennen statt überlagern ── */
@media (max-width: 720px) {
  .tx-blog-card {
    aspect-ratio: auto;
    min-height: auto;
    padding: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--tx-card);
  }
  .tx-blog-card__img {
    position: relative;
    inset: auto;
    height: 200px;
    filter: none;
    z-index: 0;
  }
  /* Gradient-Overlay killen — beißt sich mit text-haltigen Banner-Bildern */
  .tx-blog-card::after { display: none; }
  .tx-blog-card__tag {
    position: relative;
    top: auto;
    left: auto;
    padding: 0 18px;
  }
  .tx-blog-card h3,
  .tx-blog-card:first-child h3 {
    padding: 0 18px;
    font-size: 18px;
    line-height: 1.25;
    color: #fff;
  }
  .tx-blog-card__sub {
    padding: 0 18px;
    color: var(--tx-text-dim);
    font-size: 13px;
  }
}

/* ─── PC-FINDER · Hint-Text · flex-Bug fix ──
   Vorher: display:flex auf <p> hat anonyme Text-Items neben dem
   <b>Suchen</b> erzeugt → 3-Spalten-Layout statt fließendem Text. */
.tx-pcf-empty {
  display: block;
  position: relative;
  padding: 14px 18px 14px 38px;
}
.tx-pcf-empty::before {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* ─── PC-FINDER · Karten passen in Mobile-Frame ── */
@media (max-width: 480px) {
  .tx-pcf-card__body { padding: 18px 18px 6px; }
  .tx-pcf-card__foot { padding: 14px 18px 18px; }
  .tx-pcf-card__name { font-size: 16px; }
  .tx-pcf-card__tagline { font-size: 11px; margin-bottom: 12px; }
  .tx-pcf-card__specs { font-size: 12px; }
  .tx-pcf-card__specs dd { font-size: 12px; }
  .tx-pcf-card__price-val { font-size: 22px; }
  .tx-pcf-card__cta { padding: 11px 14px; font-size: 11px; }
  .tx-pcf-card__media { height: 180px; }
  .tx-pcf-card__media-fps { font-size: 28px; bottom: 10px; right: 12px; }
  .tx-pcf-card--match .tx-pcf-card__media-fps { font-size: 32px; }
  .tx-pcf-card__media-game { bottom: 10px; left: 12px; font-size: 11px; }
  /* Hint-Badge nach oben rechts — vorher top:50% schnitt durch Specs */
  .tx-pcf-card__hint {
    top: 12px;
    right: 12px;
    transform: none;
  }
}


/* GLOBAL JTL-TOXIC-OVERRIDES — FINAL CLEANUP */

body:has(.link-content) h1, body:has(.link-content) h2, body:has(.link-content) h3, body:has(.link-content) h4,
body:has(.link-content) .h1, body:has(.link-content) .h2, body:has(.link-content) .h3,
body:has(.account-content) h1, body:has(.account-content) h2, body:has(.account-content) h3, body:has(.account-content) h4,
body:has(.account-content) .h1, body:has(.account-content) .h2, body:has(.account-content) .h3,
body:has(.stepper.checkout-steps) h1, body:has(.stepper.checkout-steps) h2, body:has(.stepper.checkout-steps) h3,
body:has(.stepper.checkout-steps) .h1, body:has(.stepper.checkout-steps) .h2, body:has(.stepper.checkout-steps) .h3,
body:has(#wishlist-table) h1, body:has(#wishlist-table) h2, body:has(#wishlist-table) h3 {
  color: var(--tx-text) !important;
  opacity: 1 !important;
}

body:has(.link-content) .card, body:has(.account-content) .card,
body:has(.stepper.checkout-steps) .card, body:has(#wishlist-table) .card {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
}
body:has(.link-content) .card-header, body:has(.account-content) .card-header,
body:has(.stepper.checkout-steps) .card-header, body:has(#wishlist-table) .card-header {
  background: var(--tx-bg-2) !important;
  border-bottom: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  color: var(--tx-text) !important;
}
body:has(.link-content) .card-body, body:has(.account-content) .card-body,
body:has(.stepper.checkout-steps) .card-body, body:has(#wishlist-table) .card-body {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
}

body:has(.link-content) .text-muted, body:has(.account-content) .text-muted,
body:has(.stepper.checkout-steps) .text-muted, body:has(#wishlist-table) .text-muted {
  color: var(--tx-text-dim) !important;
}

.checkboxes-area, body:has(.stepper.checkout-steps) .form-group.checkbox,
body:has(.inc-billing-address-form) .form-group.checkbox {
  background: rgba(1,222,194,0.04) !important;
  border: 0 !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 12px 20px !important;
  margin: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 0 !important;
  min-height: 48px;
}
.checkboxes-area input[type="checkbox"], body:has(.stepper.checkout-steps) input[type="checkbox"] {
  accent-color: var(--tx-mint) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.checkboxes-area label {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tx-text-dim) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  cursor: pointer !important;
  background: transparent !important;
}

body:has(.stepper.checkout-steps) .custom-control.custom-checkbox,
body:has(.inc-billing-address-form) .custom-control.custom-checkbox {
  background: rgba(1,222,194,0.04) !important;
  border: 0 !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}

body:has(#wishlist-table) #wishlist-table thead {
  background: var(--tx-bg-2) !important;
}
body:has(#wishlist-table) #wishlist-table thead th {
  color: var(--tx-text) !important;
  border-bottom: 2px solid var(--tx-mint) !important;
  font-family: var(--tx-sub) !important; font-weight: 600;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
body:has(#wishlist-table) #wishlist-table tbody td {
  background: transparent !important;
  border-color: var(--tx-line) !important;
  color: var(--tx-text) !important;
}
body:has(#wishlist-table) .input-group .form-control,
body:has(#wishlist-table) .input-group input,
body:has(#wishlist-table) .input-group select {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
}

.tx-contact-form__label {
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}
.tx-contact-form-card__title {
  font-family: var(--tx-h) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   UNIFIED CHECKBOX-STYLE — alle Checkboxen auf JTL-Pages wie Widerrufsformular
   ════════════════════════════════════════════════════════════════════════════ */
.checkboxes-area,
.tx-contact-form__jtl-checkboxes,
body:has(.stepper.checkout-steps) .form-group.checkbox,
body:has(.stepper.checkout-steps) .custom-control.custom-checkbox,
body:has(.inc-billing-address-form) .form-group.checkbox,
body:has(.inc-billing-address-form) .custom-control.custom-checkbox,
body:has(.link-content) .form-group.checkbox,
body:has(.account-content) .form-group.checkbox,
body:has(#wishlist-table) .form-group.checkbox {
  background: rgba(1,222,194,0.04) !important;
  border: 0 !important;
  border-left: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  margin: 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 50px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.checkboxes-area input[type="checkbox"],
.tx-contact-form__jtl-checkboxes input[type="checkbox"],
body:has(.stepper.checkout-steps) .custom-checkbox input[type="checkbox"],
body:has(.inc-billing-address-form) .custom-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  accent-color: var(--tx-mint) !important;
  margin: 0 !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
.checkboxes-area label,
.checkboxes-area .form-check-label,
.checkboxes-area .custom-control-label,
.tx-contact-form__jtl-checkboxes label,
body:has(.stepper.checkout-steps) .custom-checkbox label,
body:has(.inc-billing-address-form) .custom-checkbox label {
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tx-text-dim) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex: 1 !important;
}
.checkboxes-area label a,
.tx-contact-form__jtl-checkboxes label a,
body:has(.stepper.checkout-steps) .custom-checkbox label a {
  color: var(--tx-mint) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.checkboxes-area .custom-control-label::before,
.checkboxes-area .custom-control-label::after,
.tx-contact-form__jtl-checkboxes .custom-control-label::before,
.tx-contact-form__jtl-checkboxes .custom-control-label::after,
body:has(.stepper.checkout-steps) .custom-checkbox .custom-control-label::before,
body:has(.stepper.checkout-steps) .custom-checkbox .custom-control-label::after {
  display: none !important;
}
.tx-contact-form__jtl-checkboxes {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 8px 0 !important;
}
body:has(.stepper.checkout-steps) .checkboxes-area,
body:has(.stepper.checkout-steps) .form-group.checkbox {
  max-width: 800px !important;
  margin: 16px auto !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL POLISH: PayPal Banner-Text, Guest-Checkout, Checkbox-Sichtbarkeit
   ════════════════════════════════════════════════════════════════════════════ */

/* PayPal Ratenkauf-Banner Text auf dunklem BG lesbar machen */
.paypal-button-container .paypal-text,
.tx-cart__payments + div,
[data-pp-message],
.pp-message,
[id*="paypal-message"] {
  color: var(--tx-text) !important;
}
/* Banner mit dunklem Background-Wrapper wenn PayPal Plugin Banner injected */
body:has(.tx-cart) [data-pp-message],
body:has(.tx-cart) .pp-message {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 12px 16px !important;
  margin-top: 12px !important;
  border-radius: 0 !important;
}

/* === GUEST-CHECKOUT: „Ich bin bereits Kunde" + „Als Neukunde fortfahren" ===
   Bootstrap-Autofill-Yellow auf Email/Passwort-Inputs killen */
body:has(.stepper.checkout-steps) input:-webkit-autofill,
body:has(.stepper.checkout-steps) input:-webkit-autofill:hover,
body:has(.stepper.checkout-steps) input:-webkit-autofill:focus,
.checkout-step-form input:-webkit-autofill,
#login_form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--tx-bg-3) inset !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  caret-color: var(--tx-text) !important;
  background-color: var(--tx-bg-3) !important;
}

/* Login-Box auf Bestellvorgang Step 1 */
body:has(.stepper.checkout-steps) .checkout-login-form,
body:has(.stepper.checkout-steps) #login_form,
.checkout-step-form #login_form {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
body:has(.stepper.checkout-steps) .checkout-login-form input,
body:has(.stepper.checkout-steps) #login_form input {
  background: var(--tx-bg-3) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
}

/* „Neues Kundenkonto erstellen" als Button (war eine leere Box) */
.checkout-step-form a[href*="editRechnungsadresse"],
body:has(.stepper.checkout-steps) a:has(span:contains("Neues Kundenkonto")),
body:has(.stepper.checkout-steps) .checkout-register-link {
  display: inline-block !important;
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  padding: 13px 28px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}

/* === Checkbox-Input SICHTBAR machen (war versteckt durch Bootstrap-
       custom-control-input opacity:0 Trick) === */
.checkboxes-area input[type="checkbox"],
.tx-contact-form__jtl-checkboxes input[type="checkbox"],
body:has(.stepper.checkout-steps) input[type="checkbox"]:not(.custom-control-input):not([style*="display"]),
body:has(.stepper.checkout-steps) .custom-checkbox input[type="checkbox"],
body:has(.inc-billing-address-form) .custom-checkbox input[type="checkbox"] {
  opacity: 1 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: auto !important;
  display: inline-block !important;
  visibility: visible !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--tx-mint) !important;
}
/* Bootstrap-custom-control-input ist absolute+opacity:0 → muss aufgehoben werden */
.checkboxes-area .custom-control-input,
.tx-contact-form__jtl-checkboxes .custom-control-input,
body:has(.stepper.checkout-steps) .custom-checkbox .custom-control-input {
  opacity: 1 !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  z-index: auto !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   BRUTAL OVERRIDES — fieldset.inc-billing-address-form direct (no :has)
   Greift unabhängig von Browser-Support, höchste Spezifität.
   ════════════════════════════════════════════════════════════════════════════ */
fieldset.inc-billing-address-form input,
fieldset.inc-billing-address-form select,
fieldset.inc-billing-address-form textarea,
fieldset.inc-billing-address-form .form-control,
form.checkout-shipping-form input,
form.checkout-shipping-form select,
.checkout-step-form input,
.checkout-step-form select,
.checkout-step-form textarea,
.checkout-step-form .form-control,
.checkout-shipping-form .form-control {
  background-color: var(--tx-bg-3) !important;
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--tx-text) !important;
}
fieldset.inc-billing-address-form input::placeholder,
fieldset.inc-billing-address-form textarea::placeholder,
.checkout-step-form input::placeholder {
  color: var(--tx-text-mute) !important;
  -webkit-text-fill-color: var(--tx-text-mute) !important;
}
fieldset.inc-billing-address-form input:focus,
fieldset.inc-billing-address-form select:focus,
fieldset.inc-billing-address-form textarea:focus,
.checkout-step-form input:focus,
.checkout-step-form .form-control:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  background-color: var(--tx-card) !important;
  outline: none !important;
}
fieldset.inc-billing-address-form label,
.checkout-step-form label {
  color: var(--tx-text) !important;
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* Bootstrap-Autofill (Chrome/Edge) ULTRA-AGGRESSIVE Override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--tx-bg-3) inset !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  caret-color: var(--tx-mint) !important;
  transition: background-color 9999s ease-in-out 0s !important;
  background-color: var(--tx-bg-3) !important;
}

/* "Neues Kundenkonto erstellen" Toggle-Button (war leere Box) */
.checkout-button-row a[href*="loggedout"],
.register-form-account .control-toggle,
.register-form-account-unreg,
.register-form-account-unreg .control-toggle,
.register-form-account-unreg .form-check {
  background: rgba(1,222,194,0.04) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 14px 22px !important;
  margin: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.register-form-account-unreg:hover {
  background: rgba(1,222,194,0.1) !important;
}
.register-form-account-unreg label,
.register-form-account-unreg .custom-control-label {
  color: var(--tx-mint) !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   NUCLEAR OVERRIDE — alle Inputs auf Bestellvorgang (data-page=11)
   inkl. customer_shipping_address (zweites fieldset ohne inc-billing-class)
   ════════════════════════════════════════════════════════════════════════════ */
body[data-page="11"] fieldset input,
body[data-page="11"] fieldset select,
body[data-page="11"] fieldset textarea,
body[data-page="11"] form input,
body[data-page="11"] form select,
body[data-page="11"] form textarea,
body[data-page="11"] .form-control,
body[data-page="11"] .custom-select,
body[data-page="11"] .country-input,
body[data-page="11"] .postcode_input,
body[data-page="11"] .city-input,
body[data-page="11"] .typeahead {
  background-color: var(--tx-bg-3) !important;
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  appearance: auto !important;
}
body[data-page="11"] fieldset input::placeholder,
body[data-page="11"] fieldset textarea::placeholder,
body[data-page="11"] form input::placeholder {
  color: var(--tx-text-mute) !important;
  -webkit-text-fill-color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
body[data-page="11"] fieldset input:focus,
body[data-page="11"] fieldset select:focus,
body[data-page="11"] fieldset textarea:focus,
body[data-page="11"] .form-control:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  background-color: var(--tx-card) !important;
  outline: none !important;
}
body[data-page="11"] fieldset label,
body[data-page="11"] form label {
  color: var(--tx-text) !important;
  font-family: var(--tx-body), -apple-system, "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* Floating-Labels für Address-Form (Titel - optionale Angabe etc.) deaktivieren */
body[data-page="11"] .form-floating > label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 6px 0 !important;
  height: auto !important;
}
body[data-page="11"] .form-floating {
  position: static !important;
}
body[data-page="11"] .form-floating > .form-control {
  padding: 11px 14px !important;
  min-height: auto !important;
  height: auto !important;
}

/* Gast-Login-Block "Ich bin bereits Kunde" — gleiche Card-Optik wie Mein Konto */
body[data-page="11"] #login_form,
body[data-page="11"] .checkout-login-form,
body[data-page="11"] form[id*="login"],
body[data-page="11"] .col:has(#login_form) {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}
body[data-page="11"] .checkout-login-legend,
body[data-page="11"] #login_form legend,
body[data-page="11"] .checkout-login-form legend {
  font-family: var(--tx-h) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--tx-line) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL UNIFICATION — alles auf /Kontakt + /Mein-Konto Style angeglichen
   ════════════════════════════════════════════════════════════════════════════ */

/* PayPal-Banner-Text aufhellen (BG ist hellblau-grau vom PayPal-SDK) */
[data-pp-message] *,
.paypal-button-container ~ .paypal-text,
[id*="paypal-message-container"] *,
.pp-message *,
.tx-cart__pay-block ~ * span {
  color: var(--tx-text) !important;
}
/* PayPal-Banner Container */
[data-pp-message],
[id*="paypal-message-container"],
.pp-message {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin-top: 12px !important;
}

/* SUPER-NUCLEAR — ALLE Inputs auf Bestellvorgang inkl. customer_shipping
   Address-Form das in einer Sub-Section ohne data-page-Inherit liegt. */
body[data-page="11"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body[data-page="11"] select,
body[data-page="11"] textarea,
form.customer-shipping-address input,
form.customer-shipping-address select,
.customer-shipping-address input,
.customer-shipping-address select,
.checkout-shipping-form input,
.checkout-shipping-form select,
.checkout-shipping-form textarea {
  background-color: var(--tx-bg-3) !important;
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
}
body[data-page="11"] select,
.customer-shipping-address select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2310E0B4' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* Kontakt-Form Doppel-Border bei Datenschutz-Checkbox killen.
   Wrapper hat tx-contact-form__jtl-checkboxes UND .checkboxes-area
   die beide eigene Border haben. */
.tx-contact-form__jtl-checkboxes {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 16px 0 0 0 !important;
}
.tx-contact-form__jtl-checkboxes .checkboxes-area {
  background: rgba(1,222,194,0.04) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 14px 20px !important;
  margin: 0 !important;
}

/* Alle Submit-Buttons (Anmelden, Kundendaten abschicken, Weiter, Nachricht senden,
   Widerruf bestätigen) — gleiche Optik wie Kontakt "Nachricht senden".
   ACHTUNG: explizit Header-Search + Icon-Buttons + PLP-Card-Buttons + Fav-Buttons
   ausschließen, sonst werden die im :has-Scope auch zu mint-Blöcken
   (Such-Lupe verschwand, weil Icon-Color=Mint=BG). */
body:has(.stepper.checkout-steps) button[type="submit"]:not(.tx-search__submit):not(.tx-icon-btn):not(.tx-icon-btn--sm):not(.tx-product-card__cart-btn):not(.tx-product-card__fav):not(.tx-btn):not([class*="paypal"]),
body:has(.stepper.checkout-steps) .btn-primary:not(.tx-search__submit):not(.tx-icon-btn):not(.tx-product-card__cart-btn),
body:has(.stepper.checkout-steps) input[type="submit"]:not([name="fake"]),
#login_form button[type="submit"],
#login_form .btn-primary,
#new_customer button[type="submit"],
#new_customer .btn-primary {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: none !important;
}
body:has(.stepper.checkout-steps) button[type="submit"]:not(.tx-search__submit):not(.tx-icon-btn):not(.tx-icon-btn--sm):not(.tx-product-card__cart-btn):not(.tx-product-card__fav):not(.tx-btn):not([class*="paypal"]):hover,
body:has(.stepper.checkout-steps) .btn-primary:not(.tx-search__submit):not(.tx-icon-btn):not(.tx-product-card__cart-btn):hover,
#login_form button[type="submit"]:hover,
#new_customer button[type="submit"]:hover {
  background: var(--tx-mint-2) !important;
  color: #062019 !important;
  transform: translateY(-1px) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ULTRA-FINAL: body.is-checkout — ALLES auf Bestellvorgang, kein Spalt
   für weisse Inputs, egal welcher Sub-Template
   ════════════════════════════════════════════════════════════════════════════ */
body.is-checkout input[type="text"],
body.is-checkout input[type="email"],
body.is-checkout input[type="password"],
body.is-checkout input[type="tel"],
body.is-checkout input[type="number"],
body.is-checkout input:not([type]),
body.is-checkout select,
body.is-checkout textarea {
  background-color: var(--tx-bg-3) !important;
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body.is-checkout input:focus,
body.is-checkout select:focus,
body.is-checkout textarea:focus,
body.is-checkout .form-control:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
}
body.is-checkout input::placeholder,
body.is-checkout textarea::placeholder {
  color: var(--tx-text-mute) !important;
  -webkit-text-fill-color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
body.is-checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2310E0B4' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}
body.is-checkout label,
body.is-checkout .col-form-label,
body.is-checkout legend {
  color: var(--tx-text) !important;
  background: transparent !important;
}
body.is-checkout .form-floating {
  position: static !important;
}
body.is-checkout .form-floating > label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  padding: 0 0 6px 0 !important;
  height: auto !important;
}

/* Login-Card wirklich identisch wie /Mein-Konto */
body.is-checkout #login_form,
body.is-checkout .checkout-login-form {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}

/* Step1-Wrapper Spaltenlayout normieren */
body.is-checkout .row#new_customer_login,
body.is-checkout .row.new-customer-section {
  margin-top: 16px !important;
}

/* Konsistente Card-Wrappers für "Als Neukunde fortfahren"-Section */
body.is-checkout fieldset.inc-billing-address-form {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Bootstrap-Autofill Browser-Quirk komplett killen */
body.is-checkout input:-webkit-autofill,
body.is-checkout input:-webkit-autofill:hover,
body.is-checkout input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tx-bg-3) inset !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  caret-color: var(--tx-mint) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ENDGAME: targeted Bestellvorgang Step 0/1 — fix Login-Card, fix Neue
   Lieferadresse erstellen (.bg-typeahead-fix), fix card-gray, fix alerts,
   fix fieldsets, fix Spalten-Symmetrie. Direkt nach den ULTRA-FINAL Regeln
   eingefügt, damit Specificity gewinnt.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1) DER WHITE-INPUT CULPRIT: Bootstrap-Helper .bg-typeahead-fix erzwingt
      weisses BG auf PLZ/Stadt Typeahead-Inputs in "Neue Lieferadresse erstellen".
      Hier brutal überschreiben. */
body.is-checkout .bg-typeahead-fix,
body.is-checkout input.bg-typeahead-fix,
body.is-checkout .typeahead,
body.is-checkout input.typeahead,
body.is-checkout .postcode_input,
body.is-checkout .city_input {
  background-color: var(--tx-bg-3) !important;
  background-image: none !important;
  color: var(--tx-text) !important;
}

/* 2) Typeahead-Dropdown-Liste (Suggest-Box) — kommt sonst weiss */
body.is-checkout .tt-menu,
body.is-checkout .tt-dropdown-menu,
body.is-checkout .twitter-typeahead {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
}
body.is-checkout .tt-suggestion {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
body.is-checkout .tt-suggestion:hover,
body.is-checkout .tt-suggestion.tt-cursor {
  background: var(--tx-bg-3) !important;
  color: var(--tx-mint) !important;
}

/* 3) Bootstrap Card / card-gray (Login-Card-Hülle, sonst hell) — neutralisieren.
      Unser Override ersetzt das Card bereits durch tx-contact-form-card, aber
      falls NOVA-Update den Block zurückbringt: catch-all dark. */
body.is-checkout .card,
body.is-checkout .card-gray,
body.is-checkout .card.card-gray,
body.is-checkout .card-body,
body.is-checkout .card-header,
body.is-checkout .card-footer {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tx-text) !important;
}

/* 4) Alle .alert (Post-Login-Notification, mandatoryField-Fehler) auf dark.
      Bootstrap Default ist hellblau/grün/rot mit hellem BG. */
body.is-checkout .alert {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  padding: 12px 16px !important;
}
body.is-checkout .alert-success {
  border-left-color: var(--tx-mint) !important;
  background: rgba(1, 222, 194, 0.05) !important;
  color: var(--tx-text) !important;
}
body.is-checkout .alert-info {
  border-left-color: var(--tx-mint) !important;
  background: rgba(1, 222, 194, 0.05) !important;
  color: var(--tx-text) !important;
}
body.is-checkout .alert-warning {
  border-left-color: #f0b400 !important;
  background: rgba(240, 180, 0, 0.06) !important;
  color: var(--tx-text) !important;
}
body.is-checkout .alert-danger {
  border-left-color: var(--tx-danger, #ff5570) !important;
  background: rgba(255, 85, 112, 0.06) !important;
  color: var(--tx-text) !important;
}
body.is-checkout .alert a {
  color: var(--tx-mint) !important;
  text-decoration: underline;
}

/* 5) Alle Fieldsets/Collapses im is-checkout transparent — sonst krieg "Neue
      Lieferadresse erstellen" weißes Hintergrund-Panel von Bootstrap. */
body.is-checkout fieldset,
body.is-checkout #register_shipping_address,
body.is-checkout .checkout-register-shipping-address,
body.is-checkout .collapse,
body.is-checkout .collapsing,
body.is-checkout .collapse-non-validate,
body.is-checkout .select-shipping-address,
body.is-checkout .new-shipping-address {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* 6) Wenn die "Neue Lieferadresse"-Sektion expanded ist → zarte Mint-Linke
      damit klar ist wo der Block anfängt. */
body.is-checkout #register_shipping_address.show,
body.is-checkout .checkout-register-shipping-address.show {
  border-left: 2px solid var(--tx-mint) !important;
  padding-left: 16px !important;
  margin-top: 12px !important;
}

/* 7) Login-Card (unser Override) — Layout + Forgot-Link  */
.tx-login-card {
  margin-bottom: 0 !important;
}
.tx-login-card__forgot {
  display: inline-block;
  margin-left: 18px;
  color: var(--tx-text-dim);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: center;
}
.tx-login-card__forgot:hover {
  color: var(--tx-mint);
}
.tx-login-card .tx-contact-form__submit {
  display: flex !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 8) „oder"-Trennstrich zwischen Login + Register im Toxic-Style */
body.is-checkout .tx-checkout-or .hr-sect,
body.is-checkout .checkout-existing-customer-hr .hr-sect {
  color: var(--tx-text-mute) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  margin: 22px 0 !important;
}
body.is-checkout .tx-checkout-or .hr-sect::before,
body.is-checkout .tx-checkout-or .hr-sect::after,
body.is-checkout .checkout-existing-customer-hr .hr-sect::before,
body.is-checkout .checkout-existing-customer-hr .hr-sect::after {
  background: var(--tx-line) !important;
}

/* 9) Step 1 — Spalten-Symmetrie. NOVA macht lg=4/lg=8 → Login-Card schmal.
      Wir gleichen Höhen aus, machen das Layout luftiger. */
body.is-checkout #register-customer {
  align-items: stretch !important;
  margin-top: 20px !important;
}
body.is-checkout #register-customer > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
body.is-checkout #register-customer .checkout-existing-customer {
  display: flex;
  flex-direction: column;
}
body.is-checkout #register-customer .tx-contact-form-card {
  flex: 1;
}

/* 10) HR (Trennlinie zwischen Adresse + Lieferadresse) dezent dunkel */
body.is-checkout hr {
  border-top: 1px solid var(--tx-line) !important;
  margin: 24px 0 !important;
  opacity: 1 !important;
}

/* 11) H3 / .h3 Sub-Headings ("Name", "Adresse", "Kontakt", "Abweichende
       Lieferadresse") auf weiß + uppercase Toxic-Vibe */
body.is-checkout .h3,
body.is-checkout h3,
body.is-checkout legend {
  color: var(--tx-text) !important;
  font-family: var(--tx-font-display, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* 12) required-info ("* Pflichtfeld") Hinweis subtil */
body.is-checkout .required-info {
  color: var(--tx-text-mute) !important;
  font-size: 12px !important;
  margin: 8px 0 !important;
}
body.is-checkout .required-info::before,
body.is-checkout .optional {
  color: var(--tx-mint) !important;
}

/* 13) "Lieferadresse = Rechnungsadresse" Checkbox + alle anderen Checkboxes
       konsistent mint */
body.is-checkout .custom-control-label::before {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
}
body.is-checkout .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
}
body.is-checkout .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px rgba(1, 222, 194, 0.25) !important;
}

/* 14) form-error-msg (server-side Validation) — dezent rot statt grell */
body.is-checkout .form-error-msg,
body.is-checkout .has-error .form-control,
body.is-checkout .has-error input {
  border-color: var(--tx-danger, #ff5570) !important;
}
body.is-checkout .form-error-msg {
  color: var(--tx-danger, #ff5570) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  background: transparent !important;
}

/* 15) Bestelltabelle der bestehenden Lieferadressen (DataTable) — dark */
body.is-checkout #shipping-address-templates,
body.is-checkout #shipping-address-templates tbody,
body.is-checkout #shipping-address-templates tr,
body.is-checkout #shipping-address-templates td {
  background: transparent !important;
  color: var(--tx-text) !important;
  border-color: var(--tx-line) !important;
}
body.is-checkout #shipping-address-templates tr:hover {
  background: rgba(1, 222, 194, 0.04) !important;
}
body.is-checkout .dataTables_wrapper .dataTables_length,
body.is-checkout .dataTables_wrapper .dataTables_filter,
body.is-checkout .dataTables_wrapper .dataTables_info,
body.is-checkout .dataTables_wrapper .dataTables_paginate {
  color: var(--tx-text-dim) !important;
}
body.is-checkout .dataTables_wrapper .dataTables_filter input {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text) !important;
}

/* 16) Custom-Radios (Lieferadresse-Auswahl) - Toxic mint dot */
body.is-checkout .custom-radio .custom-control-label::before {
  background-color: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
}
body.is-checkout .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
}
body.is-checkout .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23000'/%3E%3C/svg%3E") !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 2 (2026-05-13)

   Findings:
   - `body.is-checkout` als Selektor MATCHT NIE — NOVAChild/layout/header.tpl
     setzt nur `tx-page` als Body-Class. Die `is-checkout`-Selektoren oben
     sind Dead Code. Korrekter Scope hier ist `body:has(.stepper.checkout-steps)`.
   - E-Mail-Feld im Step 1 (id=email, type=email) bleibt weiss — das ist die
     ENZIGE Floating-Label-Variante in der Form (Label INSIDE Input). Bootstrap
     `.form-floating` hat eigenen weissen BG, der die fieldset-input-Regel
     besiegt. Direkt per ID + .form-floating selecten.
   ════════════════════════════════════════════════════════════════════════════ */

/* E-Mail-Feld auf Step 1 — Floating-Label + Input beide dunkel */
body:has(.stepper.checkout-steps) input#email,
body:has(.stepper.checkout-steps) input[name="email"],
body:has(.stepper.checkout-steps) input[type="email"] {
  background-color: var(--tx-bg-3) !important;
  background: var(--tx-bg-3) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  border-radius: 0 !important;
  -webkit-text-fill-color: var(--tx-text) !important;
}
/* Bootstrap form-floating wrapper hat default weissen BG via ::before/::after */
body:has(.stepper.checkout-steps) .form-floating,
body:has(.stepper.checkout-steps) .form-floating > .form-control,
body:has(.stepper.checkout-steps) .form-floating > .form-control:not(:placeholder-shown),
body:has(.stepper.checkout-steps) .form-floating > .form-control:focus {
  background: var(--tx-bg-3) !important;
  background-color: var(--tx-bg-3) !important;
  color: var(--tx-text) !important;
}
body:has(.stepper.checkout-steps) .form-floating > label,
body:has(.stepper.checkout-steps) .form-floating > .form-control:focus ~ label,
body:has(.stepper.checkout-steps) .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--tx-text-mute) !important;
  background: transparent !important;
  font-family: var(--tx-body, system-ui), sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
/* Floating-Label-Background (Bootstrap legt nen weissen "Klotz" hinter das Label) */
body:has(.stepper.checkout-steps) .form-floating > label::after {
  background: var(--tx-bg-3) !important;
}

/* Re-Apply alles vom is-checkout Block jetzt mit :has(.stepper.checkout-steps) */
body:has(.stepper.checkout-steps) .bg-typeahead-fix,
body:has(.stepper.checkout-steps) input.bg-typeahead-fix,
body:has(.stepper.checkout-steps) .typeahead,
body:has(.stepper.checkout-steps) input.typeahead,
body:has(.stepper.checkout-steps) .postcode_input,
body:has(.stepper.checkout-steps) .city_input {
  background-color: var(--tx-bg-3) !important;
  background-image: none !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-line) !important;
}

body:has(.stepper.checkout-steps) .tt-menu,
body:has(.stepper.checkout-steps) .tt-dropdown-menu,
body:has(.stepper.checkout-steps) .twitter-typeahead {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
}
body:has(.stepper.checkout-steps) .tt-suggestion {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  padding: 8px 12px !important;
}
body:has(.stepper.checkout-steps) .tt-suggestion:hover,
body:has(.stepper.checkout-steps) .tt-suggestion.tt-cursor {
  background: var(--tx-bg-3) !important;
  color: var(--tx-mint) !important;
}

/* card-gray (alte Login-Card-Hülle) neutralisieren */
body:has(.stepper.checkout-steps) .card,
body:has(.stepper.checkout-steps) .card-gray,
body:has(.stepper.checkout-steps) .card.card-gray,
body:has(.stepper.checkout-steps) .card-body,
body:has(.stepper.checkout-steps) .card-header,
body:has(.stepper.checkout-steps) .card-footer {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tx-text) !important;
}

/* Post-Login-Notification + alle .alert dunkel */
body:has(.stepper.checkout-steps) .alert {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  padding: 12px 16px !important;
}
body:has(.stepper.checkout-steps) .alert-success { background: rgba(1, 222, 194, 0.05) !important; }
body:has(.stepper.checkout-steps) .alert-info    { background: rgba(1, 222, 194, 0.05) !important; }
body:has(.stepper.checkout-steps) .alert-warning {
  border-left-color: #f0b400 !important;
  background: rgba(240, 180, 0, 0.06) !important;
}
body:has(.stepper.checkout-steps) .alert-danger {
  border-left-color: var(--tx-danger, #ff5570) !important;
  background: rgba(255, 85, 112, 0.06) !important;
}
body:has(.stepper.checkout-steps) .alert a {
  color: var(--tx-mint) !important;
  text-decoration: underline;
}

/* Fieldsets / Collapses transparent — "Neue Lieferadresse"-Wrapper */
body:has(.stepper.checkout-steps) fieldset:not(.inc-billing-address-form),
body:has(.stepper.checkout-steps) #register_shipping_address,
body:has(.stepper.checkout-steps) .checkout-register-shipping-address,
body:has(.stepper.checkout-steps) .collapse,
body:has(.stepper.checkout-steps) .collapsing,
body:has(.stepper.checkout-steps) .collapse-non-validate,
body:has(.stepper.checkout-steps) .select-shipping-address,
body:has(.stepper.checkout-steps) .new-shipping-address {
  background: transparent !important;
  background-color: transparent !important;
}

body:has(.stepper.checkout-steps) #register_shipping_address.show,
body:has(.stepper.checkout-steps) .checkout-register-shipping-address.show {
  border-left: 2px solid var(--tx-mint) !important;
  padding-left: 16px !important;
  margin-top: 12px !important;
}

/* Login-Card (unser Override mit tx-contact-form-card) */
.tx-login-card { margin-bottom: 0 !important; }
.tx-login-card__forgot {
  display: inline-block;
  margin-left: 18px;
  color: var(--tx-text-dim);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: center;
}
.tx-login-card__forgot:hover { color: var(--tx-mint); }
.tx-login-card .tx-contact-form__submit {
  display: flex !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* „oder"-Trennstrich */
body:has(.stepper.checkout-steps) .tx-checkout-or .hr-sect,
body:has(.stepper.checkout-steps) .checkout-existing-customer-hr .hr-sect {
  color: var(--tx-text-mute) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  margin: 22px 0 !important;
}
body:has(.stepper.checkout-steps) .tx-checkout-or .hr-sect::before,
body:has(.stepper.checkout-steps) .tx-checkout-or .hr-sect::after,
body:has(.stepper.checkout-steps) .checkout-existing-customer-hr .hr-sect::before,
body:has(.stepper.checkout-steps) .checkout-existing-customer-hr .hr-sect::after {
  background: var(--tx-line) !important;
}

/* Spalten-Symmetrie für Step 0 */
body:has(.stepper.checkout-steps) #register-customer {
  align-items: stretch !important;
  margin-top: 20px !important;
}
body:has(.stepper.checkout-steps) #register-customer > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
body:has(.stepper.checkout-steps) #register-customer .tx-contact-form-card { flex: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 3 (2026-05-13 abend)
   - Mini-Cart-Button entfernt aus tx_product_card → Details geht jetzt full-width
   - Such-Input defensive: nur ein Border, kein Doppel-Frame
   ════════════════════════════════════════════════════════════════════════════ */

/* Details-Button auf PLP-Card spannt jetzt die ganze Footer-Row */
.tx-product-card__details--full {
  width: 100% !important;
  justify-content: center !important;
}
/* CTA-Row: kein Grid mehr nötig, einfacher Flex */
.tx-product-card__cta-row {
  display: flex !important;
  gap: 0 !important;
}

/* Such-Input: explizit kein border auf der inneren <input>, kein doppelter
   Outline-Frame durch Browser-Defaults. Der Mint-Frame kommt nur von der
   Form-Hülle (.tx-search:focus-within). */
.tx-search input,
.tx-search input[type="search"],
.tx-search input.ac_input {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.tx-search input:focus,
.tx-search input[type="search"]:focus,
.tx-search input.ac_input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* WebKit search-decoration kill (kleines x-clear-button erzeugt manchmal
   Pseudo-Frame in Chrome/Edge) */
.tx-search input[type="search"]::-webkit-search-decoration,
.tx-search input[type="search"]::-webkit-search-cancel-button,
.tx-search input[type="search"]::-webkit-search-results-button,
.tx-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX BATCH 4 (2026-05-13 spät) — Toxic-Bestellvorgang E-Mail + Headings
   - Toxic E-Mail-Field-Klasse aus NOVAChild/checkout/inc_billing_address_form.tpl
     override (tx-bv-field) Toxic-styled: Label oben, dark Input, mint Focus.
   - Heading "Kontaktdaten" + "Name" + "Rechnungsadresse" mit höherer
     Specificity uppercase'n (das fiel vorher durch).
   ═══════════════════════════════════════════════════════════════════════ */

/* Toxic-style E-Mail field (NOVAChild Override) */
.tx-bv-field {
  display: block;
  margin-bottom: 12px;
}
.tx-bv-field__label {
  display: block !important;
  font-family: var(--tx-body, -apple-system, "Inter", "Segoe UI", system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.tx-bv-req {
  color: var(--tx-mint, #01DEC2) !important;
  margin-left: 2px;
}
.tx-bv-field__input {
  display: block !important;
  width: 100% !important;
  background: var(--tx-bg-3) !important;
  background-color: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-text-fill-color: var(--tx-text) !important;
}
.tx-bv-field__input:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.tx-bv-field__input:-webkit-autofill,
.tx-bv-field__input:-webkit-autofill:hover,
.tx-bv-field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tx-bg-3) inset !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
.tx-bv-field__error {
  color: var(--tx-danger, #ff5570) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* "Kontaktdaten" Heading + andere Section-Heads MUST uppercase
   (war vorher inkonsistent — "NAME"/"RECHNUNGSADRESSE" oben uppercase,
   "Kontaktdaten" mixed-case. Erhöhte Specificity damit alle hits) */
.inc-billing-address-form .h3,
.inc-billing-address-form h3,
.checkout-step-form .h3,
.checkout-step-form h3,
body:has(.stepper.checkout-steps) .inc-billing-address-form .h3,
body:has(.stepper.checkout-steps) .inc-billing-address-form h3 {
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 0 12px 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 5 (2026-05-13 spät spät) — Bootstrap-Modals + Confirmation + Cart-Empty

   ALLE JTL/Bootstrap-Modals (Warenkorb-Merge auf Login, Datenschutz-Popup,
   Widerrufsrecht-Popup, weitere CMS-Modals) wurden weiß gerendert mit gelbem
   X-Close-Button. JTL's stock NOVA inkludiert Bootstrap Modal-CSS mit hellem
   Default. Hier: einmal global auf Toxic-Dark stylen.

   Plus: Confirmation-Page (Step 3 / "Zusammenfassung") zerrissen → kompakte
   Spacing. Plus: Warenkorb-Leer-Panel noch dunkler blenden.
   ════════════════════════════════════════════════════════════════════════════ */

/* — MODALS — Bootstrap Modal-Wrappers überall Toxic-dark */
.modal-content,
.modal-dialog .modal-content,
body .modal-content {
  background: var(--tx-card) !important;
  background-color: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
}
.modal-header,
.modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--tx-line) !important;
  padding: 18px 24px !important;
  color: var(--tx-text) !important;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 !important;
}
.modal-body,
.modal .modal-body {
  background: transparent !important;
  color: var(--tx-text) !important;
  padding: 22px 24px !important;
  font-family: var(--tx-body, system-ui), sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.modal-body p,
.modal-body li,
.modal-body td,
.modal-body span {
  color: var(--tx-text) !important;
}
.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4 {
  color: var(--tx-text) !important;
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.modal-body a,
.modal-content a {
  color: var(--tx-mint) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal-body a:hover,
.modal-content a:hover {
  color: var(--tx-mint-2, var(--tx-mint)) !important;
}
.modal-footer,
.modal .modal-footer {
  background: transparent !important;
  border-top: 1px solid var(--tx-line) !important;
  padding: 14px 24px !important;
}

/* Modal-Close-Button — der gelbe X-Knopf killen */
.modal .close,
.modal button.close,
.modal-header .close,
.modal-header button.close,
.modal .btn-close,
.modal-header .btn-close,
.close,
button.close {
  background: transparent !important;
  border: 0 !important;
  color: var(--tx-text-dim) !important;
  opacity: 1 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  text-shadow: none !important;
  transition: color .15s !important;
}
.modal .close:hover,
.modal button.close:hover,
.modal .btn-close:hover {
  color: var(--tx-mint) !important;
  background: transparent !important;
}
.modal .close span,
.modal button.close span {
  color: inherit !important;
  font-weight: 400 !important;
}
/* Bootstrap 5 btn-close uses background-image SVG — replace with mint X */
.modal .btn-close,
.btn-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310E0B4'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important;
  filter: none !important;
}

/* Modal-Backdrop dunkler */
.modal-backdrop,
.modal-backdrop.show {
  background: rgba(8, 10, 12, 0.78) !important;
  opacity: 1 !important;
}

/* Modal-Buttons (Bootstrap-Defaults überschreiben) */
.modal-footer .btn,
.modal-content .btn,
.modal-body .btn {
  border-radius: 0 !important;
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
}
.modal-content .btn-primary,
.modal-content button[data-bs-dismiss="modal"].btn-primary,
.modal-content .btn-success {
  background: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
  color: #062019 !important;
}
.modal-content .btn-danger,
.modal-content .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--tx-danger, #ff5570) !important;
  color: var(--tx-danger, #ff5570) !important;
}
.modal-content .btn-danger:hover,
.modal-content .btn-secondary:hover {
  background: rgba(255, 85, 112, 0.08) !important;
  color: var(--tx-danger, #ff5570) !important;
}

/* Datenschutz / Widerrufs-Modal interner Content (lange HTML-Texte) */
.modal-body table,
.modal-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 12px 0 !important;
}
.modal-body table td,
.modal-body table th,
.modal-content table td,
.modal-content table th {
  border: 1px solid var(--tx-line) !important;
  padding: 8px 12px !important;
  color: var(--tx-text) !important;
}
.modal-body table th,
.modal-content table th {
  background: var(--tx-bg-3) !important;
  font-weight: 700 !important;
}
.modal-body hr,
.modal-content hr {
  border-color: var(--tx-line) !important;
  opacity: 1 !important;
}

/* — CONFIRMATION PAGE (Step 3) — kompakteres Spacing */
body:has(.stepper.checkout-steps) .checkout-summary,
body:has(.stepper.checkout-steps) #checkout-confirmation,
body:has(.stepper.checkout-steps) .checkout-step-confirmation {
  display: flex;
  flex-direction: column;
  gap: 16px !important;
}
/* Reduziere alle row+col Großräume auf Step 3 */
body:has(.stepper.checkout-steps) .row + .row,
body:has(.stepper.checkout-steps) .checkout-step-confirmation .row + .row {
  margin-top: 0 !important;
}
body:has(.stepper.checkout-steps) .checkout-step-confirmation hr,
body:has(.stepper.checkout-steps) hr {
  margin: 14px 0 !important;
  border-top: 1px solid var(--tx-line) !important;
  opacity: 1 !important;
}
body:has(.stepper.checkout-steps) .checkbox.checkbox-toggle,
body:has(.stepper.checkout-steps) .form-group.checkbox {
  margin: 12px 0 !important;
}
/* Kommentar-Textarea Sektion zusammen mit anderen Boxes */
body:has(.stepper.checkout-steps) textarea[name="kommentar"] {
  min-height: 96px !important;
  resize: vertical !important;
}
/* "Ändern"-Buttons (kleine Edit-Links pro Section) Toxic-Style */
body:has(.stepper.checkout-steps) a[href*="editRechnungsadresse"],
body:has(.stepper.checkout-steps) .btn-edit-step,
body:has(.stepper.checkout-steps) [data-bs-toggle="collapse"][href*="edit"] {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}

/* — WARENKORB-LEER — noch dunkler, fully blended */
.tx-cart__empty {
  background: transparent !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 72px 48px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 6 (2026-05-13 nachts) — Bestellvorgang Step 1 KONSISTENT
   - Lieferadresse-Felder (Vorname/Nachname/Strasse/PLZ/Ort/Land/Titel im
     "Neue Lieferadresse erstellen"-Wrapper) sollen 1:1 wie Rechnungsadresse:
     Label oben uppercase, dark Input, roter Asterisk
   - User-Feedback: „soll alles gleich aussehen". Mein E-Mail-Override hatte
     mint Asterisk → jetzt rot wie der Rest.
   - Lieferadresse-Floating-Labels endgültig statisch
   ════════════════════════════════════════════════════════════════════════════ */

/* tx-bv-req auf rot/danger umstellen — konsistent mit Rechnungsadresse */
.tx-bv-req {
  color: var(--tx-danger, #ff5570) !important;
  margin-left: 2px;
}

/* Shipping-Address-Wrapper bekommt die GLEICHE Behandlung wie Rechnungsadresse.
   Greift auf:
   - #register_shipping_address (Fieldset-ID)
   - .checkout-register-shipping-address (Klasse vom Fieldset)
   - .customer-shipping-address (Klasse vom inneren formrow)
   - .new-shipping-address (Wrapper-Div) */

/* 1) Form-Floating + Form-Group: statisch (kein Floating-Label) */
#register_shipping_address .form-floating,
#register_shipping_address .form-group,
.checkout-register-shipping-address .form-floating,
.checkout-register-shipping-address .form-group,
.customer-shipping-address .form-floating,
.customer-shipping-address .form-group,
.new-shipping-address .form-floating,
.new-shipping-address .form-group {
  position: static !important;
}

/* 2) Labels — uppercase, oben, in Toxic-Body-Font */
#register_shipping_address label,
#register_shipping_address .form-floating > label,
#register_shipping_address label.col-form-label,
.checkout-register-shipping-address label,
.checkout-register-shipping-address .form-floating > label,
.checkout-register-shipping-address label.col-form-label,
.customer-shipping-address label,
.customer-shipping-address .form-floating > label,
.customer-shipping-address label.col-form-label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 6px 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  height: auto !important;
  width: auto !important;
  font-family: var(--tx-body, -apple-system, "Inter", "Segoe UI", system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  font-style: normal !important;
}
/* Floating-Animation deaktiviert für Shipping */
#register_shipping_address .form-floating > .form-control:focus ~ label,
#register_shipping_address .form-floating > .form-control:not(:placeholder-shown) ~ label,
.checkout-register-shipping-address .form-floating > .form-control:focus ~ label,
.checkout-register-shipping-address .form-floating > .form-control:not(:placeholder-shown) ~ label,
.customer-shipping-address .form-floating > .form-control:focus ~ label,
.customer-shipping-address .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: none !important;
  background: transparent !important;
  padding: 0 0 6px 0 !important;
  opacity: 1 !important;
  height: auto !important;
}

/* 3) Shipping-Inputs/Selects/Textareas — dark, mint focus */
#register_shipping_address .form-control,
#register_shipping_address input[type="text"],
#register_shipping_address input[type="email"],
#register_shipping_address input[type="tel"],
#register_shipping_address input[type="number"],
#register_shipping_address select,
#register_shipping_address textarea,
.checkout-register-shipping-address .form-control,
.checkout-register-shipping-address input[type="text"],
.checkout-register-shipping-address input[type="email"],
.checkout-register-shipping-address input[type="tel"],
.checkout-register-shipping-address input[type="number"],
.checkout-register-shipping-address select,
.checkout-register-shipping-address textarea,
.customer-shipping-address .form-control,
.customer-shipping-address input[type="text"],
.customer-shipping-address input[type="email"],
.customer-shipping-address input[type="tel"],
.customer-shipping-address input[type="number"],
.customer-shipping-address select,
.customer-shipping-address textarea {
  background: var(--tx-bg-3) !important;
  background-color: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  font-size: 14px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#register_shipping_address input:focus,
#register_shipping_address select:focus,
#register_shipping_address textarea:focus,
.checkout-register-shipping-address input:focus,
.checkout-register-shipping-address select:focus,
.checkout-register-shipping-address textarea:focus,
.customer-shipping-address input:focus,
.customer-shipping-address select:focus,
.customer-shipping-address textarea:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Placeholder dim für Shipping */
#register_shipping_address input::placeholder,
.checkout-register-shipping-address input::placeholder,
.customer-shipping-address input::placeholder {
  color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
/* Required-Asterisk auf Shipping: rot wie Rechnungsadresse */
#register_shipping_address .text-danger,
#register_shipping_address label .text-danger,
.checkout-register-shipping-address .text-danger,
.customer-shipping-address .text-danger {
  color: var(--tx-danger, #ff5570) !important;
  background: transparent !important;
}
/* Optional-Suffix dezent */
#register_shipping_address label .optional,
.checkout-register-shipping-address label .optional,
.customer-shipping-address label .optional {
  color: var(--tx-text-mute) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* "Neue Lieferadresse erstellen" Heading-Box: Toxic-Style (war so'n
   schmaler hellgrüner Rahmen, schief im Layout) */
#register_shipping_address .h3,
.checkout-register-shipping-address .h3,
.new-shipping-address .h3 {
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* "Lieferadresse entspricht der Rechnungsadresse" Toggle-Box — auch
   subtiler dark statt grünlicher Rahmen */
.form-group.checkbox.control-toggle:has(#checkout_register_shipping_address) {
  background: rgba(1, 222, 194, 0.04) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 14px 18px !important;
  margin: 12px 0 !important;
}

/* "Neues Kundenkonto erstellen" Checkbox-Wrapper (war ein schmaler
   bordered Container — nutzte md=4 Spalte, sah weird aus) — entzieht
   den engen Rahmen, lässt es einfacher wirken */
.register-form-account .form-group.checkbox.control-toggle {
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 14px 18px !important;
  margin: 12px 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 7 (2026-05-14 ganz früh) — Asterisk-Frame weg + Kundenkonto-
   Erstellen-Box full-width

   1) Asterisks (*) hatten weiße/helle Hintergrund-Quadrate um sich rum
      auf der Shipping-Section (oben Rechnungsadresse war's schon gefixt
      via :is()-Liste, aber der Shipping-Wrapper war nicht drin).
   2) "Neues Kundenkonto erstellen" sitzt in col-md-4 → schmaler Container.
      "Lieferadresse entspricht Rechnungsadresse" sitzt in col-12 → full-width.
      User will dass beide gleich breit sind. CSS-fix: col-md-4 das die
      .register-form-account-unreg enthält auf full-width zwingen.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1) Weiße Quadrate um Asterisks killen — alles was background+span
      basiert auf den Labels in der Shipping-Section + global im Checkout */
#register_shipping_address .text-danger,
#register_shipping_address label .text-danger,
#register_shipping_address label > span,
#register_shipping_address label::before,
#register_shipping_address label::after,
.checkout-register-shipping-address .text-danger,
.checkout-register-shipping-address label .text-danger,
.checkout-register-shipping-address label > span,
.checkout-register-shipping-address label::before,
.checkout-register-shipping-address label::after,
.customer-shipping-address .text-danger,
.customer-shipping-address label .text-danger,
.customer-shipping-address label > span,
.customer-shipping-address label::before,
.customer-shipping-address label::after,
body:has(.stepper.checkout-steps) label .text-danger,
body:has(.stepper.checkout-steps) label > span.text-danger,
body:has(.stepper.checkout-steps) label::before,
body:has(.stepper.checkout-steps) label::after {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Asterisks bleiben nur als ROTES Zeichen sichtbar, kein Block-Frame */
body:has(.stepper.checkout-steps) .text-danger,
body:has(.stepper.checkout-steps) label .text-danger,
#register_shipping_address .text-danger,
.customer-shipping-address .text-danger {
  color: var(--tx-danger, #ff5570) !important;
  font-weight: 600 !important;
  margin-left: 2px;
}

/* 2) "Neues Kundenkonto erstellen" Box auf full-width (statt md=4)
      damit's gleich breit wirkt wie der "Lieferadresse entspricht
      Rechnungsadresse"-Toggle drunter. */
.register-form-account [class*="col-md-4"]:has(.register-form-account-unreg),
.checkout-register-form [class*="col-md-4"]:has(.register-form-account-unreg),
[class*="col-md-4"]:has(.register-form-account-unreg) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* Falls die nachfolgende col-md-8 (Password-Felder) eingeklappt ist
   (Default-State: collapse) — auch full-width, damit das Layout nicht
   zerrissen aussieht wenn User die Checkbox aktiviert */
.register-form-account [class*="col-md-8"]:has(#create_account_data),
.checkout-register-form [class*="col-md-8"]:has(#create_account_data) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 8 (2026-05-14 früh) — Doppel-Frame killen auf Checkbox-Toggle-Boxes
   User-Sichtweise: die "Neues Kundenkonto erstellen" + "Lieferadresse entspricht
   Rechnungsadresse" Boxen haben aktuell 3px Mint-Left-Border + 1px Outline-Border
   → visuell ein Doppel-Frame. Nur die Mint-Left-Linie behalten, äussere Border weg.
   ════════════════════════════════════════════════════════════════════════════ */

/* Mint-Tint-BG + Mint-Left-Line, kein 1px Outer-Frame mehr.
   Match Datenschutz-Checkbox-Box-Style. */
.form-group.checkbox.control-toggle:has(#checkout_register_shipping_address),
.register-form-account .form-group.checkbox.control-toggle,
.checkout-register-form .form-group.checkbox.control-toggle {
  background: rgba(1,222,194,0.04) !important;
  border: 0 !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 14px 18px !important;
  margin: 14px 0 !important;
}

/* DOPPEL-BG-FIX: Wenn ein .custom-control oder .form-group.checkbox INSIDE
   einer schon gestylten .control-toggle-Box (oder anderem Toxic-Tint-Wrapper)
   sitzt → innere ohne BG/Border. Das Problem: {checkbox}-Macro generiert
   automatisch wieder einen `.custom-control.custom-checkbox`-Wrapper innerhalb
   der `.form-group.checkbox.control-toggle` → zwei Mint-Tints übereinander. */
.form-group.checkbox.control-toggle .custom-control,
.form-group.checkbox.control-toggle .custom-checkbox,
.form-group.checkbox.control-toggle .form-group,
.form-group.checkbox.control-toggle .form-group.checkbox,
.form-group.checkbox .custom-control,
.form-group.checkbox .custom-checkbox,
.custom-control .form-group.checkbox,
.custom-checkbox .form-group.checkbox {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

/* Datenschutz-Checkbox-Box (über der Kundenkonto-Box) — selbe Pattern,
   damit alle drei Toggle-Boxen optisch durchgängig sind */
.tx-contact-form__group .tx-contact-form__terms,
.tx-form-row.tx-form-row--datenschutz,
.checkbox.checkout-privacy-checkbox,
.form-group.checkbox:has(input[name*="datenschutz"]),
.form-group.checkbox:has(input[name*="agb"]) {
  background: rgba(1,222,194,0.04) !important;
  border: 0 !important;
  border-left: 3px solid var(--tx-mint) !important;
  padding: 14px 18px !important;
  margin: 14px 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 9 (2026-05-14) — Radio-Buttons auf Step 2 (Versand-/Zahlungsart)
   sichtbar machen.

   Problem: Unchecked custom-radios hatten Border `var(--tx-line)` (#1f2528) —
   auf dunkelm BG quasi unsichtbar. Nur die selektierte Option zeigt nen Mint-
   Dot, die anderen Optionen sehen "unklickbar" aus.

   Root-Cause: Die existierenden Radio-Styles nutzen `body[data-page="11"]`,
   was in NOVAChild nie matcht (Body-Class ist nur "tx-page"). Daher Fallback-
   Regel mit `body:has(.stepper.checkout-steps)` Selektor, der echt greift.
   ════════════════════════════════════════════════════════════════════════════ */

body:has(.stepper.checkout-steps) .custom-radio .custom-control-label::before,
body:has(.stepper.checkout-steps) .custom-control-label::before {
  background: var(--tx-bg-3) !important;
  border: 2px solid var(--tx-text-dim) !important;
  width: 18px !important;
  height: 18px !important;
  top: 4px !important;
  left: -24px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
body:has(.stepper.checkout-steps) .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--tx-bg-3) !important;
  border-color: var(--tx-mint) !important;
}
body:has(.stepper.checkout-steps) .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background: var(--tx-mint) !important;
  background-image: none !important;
  border-radius: 50% !important;
  width: 8px !important;
  height: 8px !important;
  top: 9px !important;
  left: -19px !important;
}
/* Hover-State: Border heller damit's klickbar wirkt */
body:has(.stepper.checkout-steps) .custom-radio:hover .custom-control-label::before,
body:has(.stepper.checkout-steps) .custom-control-label:hover::before {
  border-color: var(--tx-text) !important;
}
/* Focus-State: Mint-Glow */
body:has(.stepper.checkout-steps) .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px rgba(1, 222, 194, 0.25) !important;
  border-color: var(--tx-mint) !important;
}

/* Auch normale <input type="radio"> (ohne custom-radio Wrapper) sichtbar */
body:has(.stepper.checkout-steps) input[type="radio"]:not(.custom-control-input) {
  accent-color: var(--tx-mint) !important;
  width: 18px !important;
  height: 18px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 10 (2026-05-14) — Mein-Konto Lieferadresse-Form

   1) `#lieferadressen-liste` DataTable rechts: White Bootstrap-Card-BG auf
      `<tr>` und `<td>` → Toxic-dark.
   2) Back-Link (.tx-back-link) — Ghost-Button-Style passend zum Toxic-Theme,
      damit User aus Lieferadresse-Form zurück ins Mein-Konto findet.
   ════════════════════════════════════════════════════════════════════════════ */

/* DataTable für die Lieferadressen-Liste in /jtl.php?editLieferadresse=1 */
#lieferadressen-liste,
#lieferadressen-liste tbody,
#lieferadressen-liste tr,
#lieferadressen-liste td,
.shipping-addresses-wrapper #lieferadressen-liste_wrapper,
.shipping-addresses-wrapper .dataTables_wrapper {
  background: transparent !important;
  color: var(--tx-text) !important;
  border-color: var(--tx-line) !important;
}
#lieferadressen-liste tbody tr {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-left: 3px solid var(--tx-mint) !important;
}
#lieferadressen-liste tbody tr:hover {
  background: var(--tx-bg-3) !important;
}
#lieferadressen-liste td {
  background: transparent !important;
  color: var(--tx-text) !important;
  border-color: var(--tx-line) !important;
  padding: 16px 18px !important;
}
#lieferadressen-liste td strong {
  color: var(--tx-text) !important;
  font-family: var(--tx-body), sans-serif !important;
  font-weight: 600 !important;
}
#lieferadressen-liste .btn-show-more,
#lieferadressen-liste a.btn-link {
  color: var(--tx-mint) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
/* Adress-Aktionen: edit-Pencil + delete-X kleiner, weniger Bootstrap-Y */
#lieferadressen-liste .btn-outline-secondary,
#lieferadressen-liste .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text-dim) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
}
#lieferadressen-liste .btn-outline-secondary:hover,
#lieferadressen-liste .btn-secondary:hover {
  border-color: var(--tx-mint) !important;
  color: var(--tx-mint) !important;
  background: rgba(1, 222, 194, 0.04) !important;
}
#lieferadressen-liste .btn-danger.delete-popup-modal {
  background: transparent !important;
  border: 1px solid var(--tx-danger, #ff5570) !important;
  color: var(--tx-danger, #ff5570) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}
#lieferadressen-liste .btn-danger.delete-popup-modal:hover {
  background: rgba(255, 85, 112, 0.08) !important;
}
/* DataTable search/length/pagination - Toxic-dark */
.shipping-addresses-wrapper .dataTables_filter,
.shipping-addresses-wrapper .dataTables_length,
.shipping-addresses-wrapper .dataTables_info,
.shipping-addresses-wrapper .dataTables_paginate {
  color: var(--tx-text-dim) !important;
  background: transparent !important;
  margin: 8px 0 !important;
}
.shipping-addresses-wrapper .dataTables_filter input,
.shipping-addresses-wrapper .dataTables_length select {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
}
.shipping-addresses-wrapper .paginate_button.current,
.shipping-addresses-wrapper .paginate_button.current:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.shipping-addresses-wrapper .paginate_button:hover {
  background: var(--tx-bg-3) !important;
  color: var(--tx-mint) !important;
  border: 0 !important;
}

/* Back-Link (Toxic Ghost-Button-Style passend zur Mein-Konto-Form) */
.tx-back-link {
  background: transparent !important;
  border: 1px solid var(--tx-line) !important;
  color: var(--tx-text-dim) !important;
  border-radius: 0 !important;
  padding: 14px 22px !important;
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: border-color .15s, color .15s !important;
}
.tx-back-link:hover {
  border-color: var(--tx-mint) !important;
  color: var(--tx-mint) !important;
  text-decoration: none !important;
}
.tx-arr-back {
  font-family: var(--tx-mono, ui-monospace), monospace !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX BATCH 11 (2026-05-14) — Mein-Konto Dashboard

   1) Toggle-Switches (Standard-Lieferadresse, Wunschzettel Privat/Öffentlich)
      hatten Bootstrap-Default-Yellow (#f8bf00 von JTL-Stock-Inline-CSS) statt
      mint — auch im is-checkout-Scope nicht erwischt, weil Mein-Konto kein
      .stepper.checkout-steps hat.
   2) Sub-Text der Mein-Konto-Cards (.text-muted-util — Adresse / E-Mail unter
      den Section-Headlines) zu dim, schwer lesbar.
   3) Edit-Pencil-Icon (.tx-account-edit-icon) bei Lieferadresse-Row stylisch
      einheitlich zu den Pencil-Icons der Persönliche-Daten-Section.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1) Bootstrap Custom-Switch (Toggle-Slider) → Mint statt Yellow.
   Scope: alle Mein-Konto-Pages + Wunschzettel. */
.account-content .custom-switch .custom-control-input ~ .custom-control-label::before,
.account-content .custom-switch .custom-control-label::before,
body:has(.account-content) .custom-switch .custom-control-label::before {
  background-color: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  width: 36px !important;
  height: 20px !important;
  border-radius: 10px !important;
  top: 2px !important;
  left: -42px !important;
}
.account-content .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
body:has(.account-content) .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
}
.account-content .custom-switch .custom-control-label::after,
body:has(.account-content) .custom-switch .custom-control-label::after {
  background-color: var(--tx-text) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  top: 5px !important;
  left: -39px !important;
  transition: transform 0.15s ease-in-out !important;
}
.account-content .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
body:has(.account-content) .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #062019 !important;
  transform: translateX(16px) !important;
}
.account-content .custom-switch .custom-control-input:focus ~ .custom-control-label::before,
body:has(.account-content) .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px rgba(1, 222, 194, 0.25) !important;
}

/* Auch für Wishlist-Toggle (Privat/Öffentlich) — gleicher Pattern */
body:has(.account-content) .custom-switch label,
body:has(#wishlist-table) .custom-switch label {
  color: var(--tx-text) !important;
  font-weight: 600 !important;
  padding-left: 0 !important;
  margin-left: 50px !important;
}

/* 2) Sub-Text der Mein-Konto-Cards (.text-muted-util) heller machen */
.account-content .text-muted-util,
.account-content small.text-muted-util,
.account-content .small.text-muted-util,
body:has(.account-content) .text-muted-util,
body:has(.account-content) .table small.text-muted-util,
body:has(.account-content) td .text-muted-util {
  color: var(--tx-text-dim) !important;
  opacity: 1 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Section-Header-Links ("Alle anzeigen") besser sichtbar */
.account-content .card-header a,
body:has(.account-content) .card-header a {
  color: var(--tx-mint) !important;
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.account-content .card-header a:hover,
body:has(.account-content) .card-header a:hover {
  color: var(--tx-mint-2, var(--tx-mint)) !important;
  text-decoration: underline !important;
}
.account-content .card-header h2,
.account-content .card-header .h2,
.account-content .card-header h3,
.account-content .card-header .h3 {
  color: var(--tx-text) !important;
  font-family: var(--tx-h, "Orbitron", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* 3) Edit-Pencil-Icon Toxic-Style — mint hover, dim default */
.tx-account-edit-icon,
body:has(.account-content) a:has(.fa-pencil-alt),
body:has(.account-content) a:has(.fas.fa-pencil-alt) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--tx-text-dim) !important;
  border: 1px solid var(--tx-line);
  background: var(--tx-bg-3);
  transition: color .15s, border-color .15s, background .15s;
}
.tx-account-edit-icon:hover,
body:has(.account-content) a:has(.fa-pencil-alt):hover,
body:has(.account-content) a:has(.fas.fa-pencil-alt):hover {
  color: var(--tx-mint) !important;
  border-color: var(--tx-mint) !important;
  background: rgba(1, 222, 194, 0.06) !important;
  text-decoration: none !important;
}
.tx-account-edit-icon .fa-pencil-alt,
.tx-account-edit-icon .fas {
  font-size: 12px;
}

/* ── OPC Editor-Hints ────────────────────────────────────────────
   Hinweis-Boxen für Redakteure direkt im Frontend. Sichtbarkeit
   wird serverseitig per Smarty {if AdminAccount::logged()} geregelt
   — wenn der Hint im DOM ist, ist der User Admin → immer anzeigen.
   Live-Besucher: das Markup ist bei ihnen gar nicht erst gerendert. */
.tx-opc-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 18px;
  border: 1px dashed var(--tx-mint, #01DEC2);
  background: rgba(1, 222, 194, 0.06);
  border-radius: 4px;
  font: 500 13px/1.5 'Inter', sans-serif;
  color: var(--tx-text, #ECEFEE);
}
.tx-opc-hint__tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--tx-mint, #01DEC2);
  color: #0B0C0D;
  font: 700 11px/1 'Oxanium', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tx-opc-hint__text { flex: 1; }
.tx-opc-hint__text b { color: var(--tx-mint, #01DEC2); font-weight: 700; }
@media (max-width: 720px) {
  .tx-opc-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FOLGE UNS — Social Feed Section
   ═══════════════════════════════════════════════════════════════════ */
.tx-social-feed {
  background: #111315;
  padding: 60px 0 52px;
  border-top: 1px solid #1a1d1f;
}

.tx-sf__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.tx-sf__header-left .tx-kicker { margin-bottom: 10px; }
.tx-sf__title {
  font: 700 38px/1 'Raleway', sans-serif;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .01em;
  margin: 8px 0 10px;
}
.tx-sf__desc {
  font: 400 14px/1.5 'Inter', sans-serif;
  color: rgba(255,255,255,.5);
  max-width: 520px;
  margin: 0;
}
.tx-sf__ig-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-mint, #01DEC2) !important;
  font: 700 13px/1 'Oxanium', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter .15s;
}
.tx-sf__ig-cta:hover { filter: brightness(1.15); }
.tx-sf__ig-cta svg  { width: 18px; height: 18px; }

/* ── Photo Strip ─────────────────────────────────────────────────── */
.tx-sf__strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-bottom: 44px;
}
.tx-sf__strip::-webkit-scrollbar { display: none; }
.tx-sf__strip--centered { justify-content: center; }

.tx-sf__tile {
  flex: 0 0 calc(100% / 8);
  min-width: 140px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  display: block;
  background: #1a1d1f;
  scroll-snap-align: start;
  text-decoration: none;
}
.tx-sf__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s;
  opacity: .88;
}
.tx-sf__tile:hover img {
  transform: scale(1.06);
  opacity: 1;
}
.tx-sf__tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 224, 180, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.tx-sf__tile:hover .tx-sf__tile-overlay { opacity: 1; }
.tx-sf__tile-overlay svg { width: 44px; height: 44px; color: #fff; }

.tx-sf__tile--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: #161819;
}
.tx-sf__tile--placeholder svg { width: 32px; height: 32px; color: #252829; }

/* ── Social Links Bar ────────────────────────────────────────────── */
.tx-sf__social-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tx-sf__social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.6) !important;
  font: 600 12px/1 'Oxanium', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: border-color .2s, color .2s;
}
.tx-sf__social-link:hover {
  border-color: var(--tx-mint, #01DEC2);
  color: var(--tx-mint, #01DEC2) !important;
}
.tx-sf__social-link svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 1023px) {
  .tx-sf__title { font-size: 30px; }
  .tx-sf__tile  { flex: 0 0 calc(100% / 5); min-width: 120px; }
}
@media (max-width: 720px) {
  .tx-social-feed { padding: 32px 0 24px; }
  /* Column-flex: kein space-between-Gap, align-items auf flex-start, gap reduzieren */
  .tx-sf__header  {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }
  .tx-sf__title   { font-size: 24px; margin: 4px 0 8px; }
  /* 2x2 Quadrat-Grid: 4 Fotos, kein horizontales Scrollen */
  .tx-sf__strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    gap: 3px;
    margin-bottom: 0;
  }
  .tx-sf__tile { flex: none; width: auto; min-width: 0; aspect-ratio: 1 / 1; }
  .tx-sf__tile:nth-child(n+5) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BUG FIXES · 2026-05-27
   1. Partner- + Kategorie-Karten full-bleed (kein Container-Padding)
   2. Hero-Slider Höhe stabilisieren (verhindert Layout-Jump)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Homepage-Banners: volle Breite auf Mobile ──────────────
   .tx-container hat 20px Padding bei ≤720px, 16px bei ≤480px.
   Negativer Margin bricht die Grid-Wrapper aus dem Padding raus —
   Headings (tx-section__head, tx-cats__head) behalten ihr Padding. */
@media (max-width: 767px) {
  .tx-partners .tx-cards-stack--opc,
  .tx-cats .tx-cats__grid--opc {
    margin-left: -20px;
    margin-right: -20px;
  }
  /* 1-Spalten-Grid erzwingen — !important überschreibt Bootstrap-col-Flex + OPC-Defaults */
  .tx-cards-stack--opc .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin: 0 0 3px !important;
  }
  .tx-cats__grid--opc .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  /* Cols: volle Breite, Bootstrap max-width killer */
  .tx-cards-stack--opc [data-area-id^="col-"],
  .tx-cats__grid--opc [data-area-id^="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
@media (max-width: 480px) {
  .tx-partners .tx-cards-stack--opc,
  .tx-cats .tx-cats__grid--opc {
    margin-left: -16px;
    margin-right: -16px;
  }
}

/* ─── 2. Hero-Slider: Big-Slide füllt die volle System-Slide-Höhe ───────────
   Beide Slide-Typen liegen im Grid-Area-Stack → Container-Höhe = größter Slide
   (System-Slide mit Text + Bild + Stats). Big-Slide muss diese Höhe ausfüllen
   damit kein Leerraum unter dem aktiven Big-Slide entsteht und damit kein
   Jump beim Wechsel — flex:1 auf dem Content-Panel streckt ihn automatisch. */

/* ============================================================
   CMS RICH PAGES · .tx-cms  (Zahlung, Versand & weitere Info-Seiten)
   ------------------------------------------------------------
   Edle Card-/Logo-/Tabellen-Komponenten für CMS-Seiten. Aktiviert
   durch <div class="tx-cms"> im Seiteninhalt (JTL: Inhalt → Eigene
   Inhaltsseiten → HTML). Zentral hier, damit ALLE so gebauten Seiten
   konsistent aussehen. Karten = Toxic-Frame (angeschrägt), Logos auf
   weißem Chip, Vorteile-Haken per CSS (kein Inline-SVG nötig im Text).
   ============================================================ */
.tx-cms .tx-cms__title{font-family:var(--tx-h);font-weight:900;font-size:44px;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase;margin:0 0 12px;color:var(--tx-text);}
/* Hat eine tx-cms-Seite einen EIGENEN Titel (statt JTLs index-heading-wrapper),
   braucht der Wrapper denselben Top-Abstand zum Header wie die anderen Seiten
   (~64px). Scoped per :has → Seiten ohne eigenen Titel bleiben unberührt. */
.tx-cms:has(.tx-cms__title){padding-top:56px;}
@media (max-width:760px){.tx-cms .tx-cms__title{font-size:32px;} .tx-cms:has(.tx-cms__title){padding-top:32px;}}
.tx-cms .tx-cms__lead{color:var(--tx-text-dim);font-size:15.5px;max-width:64ch;margin:0 0 34px;line-height:1.6;}
.tx-cms .tx-cms__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:0;}
@media (max-width:760px){.tx-cms .tx-cms__grid{grid-template-columns:1fr;}}

/* ---- Karte (Zahlart / Info-Block) ---- */
.tx-cms .tx-card{position:relative;background:linear-gradient(180deg,var(--tx-card),var(--tx-card-2));
  border:1px solid var(--tx-line);padding:24px;display:flex;flex-direction:column;margin:0 0 20px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.tx-cms .tx-cms__grid .tx-card{margin:0;height:100%;}
.tx-cms .tx-card--accent{border-left:3px solid var(--tx-mint);}

.tx-cms .tx-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;}
.tx-cms .tx-logo{height:56px;display:flex;align-items:center;flex:0 0 auto;}
.tx-cms .tx-logo svg{height:56px;width:auto;max-width:200px;display:block;}
.tx-cms .tx-logo img{height:56px;width:auto;max-width:200px;display:block;object-fit:contain;}
.tx-cms .tx-tag{font-family:var(--tx-mono); font-weight: 600;font-size: 11.5px;letter-spacing: 0.1em;text-transform:uppercase;
  color:var(--tx-mint);background:rgba(1,222,194,.14);border:1px solid rgba(1,222,194,.3);padding:4px 8px;white-space:nowrap;margin-top:4px;}

.tx-cms .tx-card__name{font-family:var(--tx-sub);font-weight:700;font-size:21px;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;margin:0 0 8px;line-height:1.1;}
.tx-cms .tx-card > p,.tx-cms .tx-card__desc{font-size:13.5px;color:var(--tx-text-dim);line-height:1.6;margin:0 0 14px;}
.tx-cms .tx-card strong{color:var(--tx-text);}

/* Vorteile-Liste mit Mint-Haken (kein Inline-SVG) */
.tx-cms ul.tx-adv{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:0;}
.tx-cms ul.tx-adv li{position:relative;padding-left:24px;font-size:13px;color:var(--tx-text);line-height:1.45;}
.tx-cms ul.tx-adv li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;
  background:var(--tx-mint);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;}

/* Fuß-Zeile (Voraussetzung / Gut zu wissen) */
.tx-cms .tx-req{margin-top:auto;border-top:1px solid var(--tx-line);padding-top:12px;font-size: 12.5px;color:var(--tx-text-mute);line-height:1.5;}
.tx-cms .tx-req b{color:var(--tx-text-dim);font-weight:600;font-family:var(--tx-mono);font-size: 12px;letter-spacing: 0.11em;text-transform:uppercase;display:block;margin-bottom:3px;}
.tx-cms .tx-req em{color:var(--tx-text-mute);font-style:italic;}

/* Überschrift in Info-Karten (Versand-Sektionen) — überschreibt .link-content h2 */
.tx-cms .tx-card > h2{font-family:var(--tx-h);font-weight:800;font-size:21px;letter-spacing:-.01em;margin:0 0 8px;color:#fff;text-transform:none;}

/* ---- Kosten-Tabelle ---- */
.tx-cms table{width:100%;border-collapse:collapse;margin:6px 0 0;font-size:14px;}
.tx-cms thead th{font-family:var(--tx-mono); font-weight: 600;font-size: 12.5px;letter-spacing: 0.11em;text-transform:uppercase;
  color:var(--tx-mint);text-align:left;padding:0 14px 12px;border-bottom:1px solid var(--tx-line-2);}
.tx-cms tbody td{padding:14px;border-bottom:1px solid var(--tx-line);vertical-align:top;color:var(--tx-text-dim);}
.tx-cms tbody td:first-child{color:#fff;font-family:var(--tx-sub);font-weight:700;font-size:16px;text-transform:uppercase;}
.tx-cms tbody tr:last-child td{border-bottom:0;}
.tx-cms .tx-ph{color:var(--tx-mint);background:rgba(1,222,194,.14);border:1px solid rgba(1,222,194,.3);padding:1px 6px;font-family:var(--tx-mono); letter-spacing: 0.08em; font-weight: 600;font-size: 13px;}
.tx-cms .tx-note{font-size:12.5px;color:var(--tx-text-mute);margin-top:14px;padding-top:12px;border-top:1px dashed var(--tx-line-2);}

/* ---- Trust-Leiste ---- */
.tx-cms .tx-trust{margin-top:30px;border:1px solid var(--tx-line);background:rgba(0,0,0,.25);
  display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:20px 24px;}
.tx-cms .tx-trust span{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--tx-text-dim);font-weight:500;}
.tx-cms .tx-trust svg{width:17px;height:17px;stroke:var(--tx-mint);fill:none;stroke-width:1.8;}

.tx-cms .tx-fill{color:var(--tx-text-mute);font-style:italic;border-bottom:1px dashed var(--tx-line-2);padding-bottom:1px;white-space:nowrap;}

/* FAQ-Akkordeon (natives <details>, kein JS) */
.tx-cms .tx-faq{display:flex;flex-direction:column;gap:10px;margin:0 0 12px;}
.tx-cms .tx-faqcat{font-family:var(--tx-mono); font-weight: 600;font-size: 13px;letter-spacing: 0.17em;text-transform:uppercase;color:var(--tx-mint);margin:28px 0 6px;}
.tx-cms details.tx-q{background:linear-gradient(180deg,var(--tx-card),var(--tx-card-2));border:1px solid var(--tx-line);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));}
.tx-cms details.tx-q[open]{border-color:var(--tx-line-2);}
.tx-cms details.tx-q summary{cursor:pointer;list-style:none;padding:17px 22px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:var(--tx-sub);font-weight:700;font-size:16px;color:#fff;line-height:1.3;}
.tx-cms details.tx-q summary::-webkit-details-marker{display:none;}
.tx-cms details.tx-q summary::after{content:"+";font-family:var(--tx-h);font-weight:400;font-size:24px;color:var(--tx-mint);line-height:1;flex:0 0 auto;}
.tx-cms details.tx-q[open] summary{color:var(--tx-mint);}
.tx-cms details.tx-q[open] summary::after{content:"\2212";}
.tx-cms details.tx-q .tx-a{padding:2px 22px 20px;font-size:14px;color:var(--tx-text-dim);line-height:1.65;}
.tx-cms details.tx-q .tx-a p{margin:0 0 10px;}
.tx-cms details.tx-q .tx-a p:last-child{margin:0;}
.tx-cms details.tx-q .tx-a a{color:var(--tx-mint);}

/* Nummerierte Cards (Servicebedingungen, AGB-Abschnitte, …) */
.tx-cms .tx-numcard{position:relative;display:flex;gap:20px;align-items:flex-start;background:linear-gradient(180deg,var(--tx-card),var(--tx-card-2));border:1px solid var(--tx-line);border-left:3px solid var(--tx-mint);padding:22px 24px;margin:0 0 14px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.tx-cms .tx-numcard__n{flex:0 0 auto;min-width:34px;font-family:var(--tx-h);font-weight:900;font-size:30px;line-height:1;color:var(--tx-mint);}
.tx-cms .tx-numcard__b{flex:1;}
.tx-cms .tx-numcard__b h3{margin:0 0 6px;font-family:var(--tx-h);font-weight:700;font-size:18px;color:#fff;text-transform:none;letter-spacing:0;line-height:1.3;}
.tx-cms .tx-numcard__b p{margin:0;font-size:14px;color:var(--tx-text-dim);line-height:1.6;}
.tx-cms .tx-numcard__b a{color:var(--tx-mint);}

/* Download-/Link-CTA in Karten (Treiber-Download & weitere Link-Seiten) */
.tx-cms .tx-dl{margin-top:auto;}
.tx-cms a.tx-dlbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--tx-mono); font-weight: 600;font-size: 13px;letter-spacing: 0.1em;text-transform:uppercase;color:var(--tx-mint);
  border:1px solid rgba(1,222,194,.35);background:rgba(1,222,194,.08);padding:10px 15px;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.tx-cms a.tx-dlbtn::after{content:"\2192";font-family:var(--tx-h);}
.tx-cms a.tx-dlbtn:hover{background:var(--tx-mint);color:#04110d;border-color:var(--tx-mint);}
/* Links in der System-Tools-Tabelle */
.tx-cms table a{color:var(--tx-mint);text-decoration:none;white-space:nowrap;}
.tx-cms table a:hover{text-decoration:underline;}

/* ═══════════════════════════════════════════════════════════════
   COOKIE CONSENT — Toxic Brand Override
   Basis-Layout/Animation kommt aus my-nova.css (NOVA base consent).
   Hier nur: Dark/Mint-Branding + rechtlich gleichwertiges Button-Paar
   (Akzeptieren gefüllt · Ablehnen Outline · Einstellungen dezenter Link).
   ─────────────────────────────────────────────────────────────── */
#consent-banner,
#consent-settings .consent-modal-content,
#consent-confirm .consent-modal-content {
  background: var(--tx-bg-2) !important;
  color: var(--tx-text) !important;
  border: 1px solid var(--tx-line) !important;
}
#consent-banner { box-shadow: 0 -6px 40px rgba(0,0,0,.55) !important; }
#consent-banner .consent-banner-icon svg,
#consent-settings .consent-modal-icon svg,
#consent-confirm .consent-modal-icon svg { color: var(--tx-mint) !important; }
#consent-banner .consent-display-2,
#consent-settings .consent-display-1,
#consent-settings .consent-display-2,
#consent-settings .consent-display-3,
#consent-confirm .consent-display-1,
#consent-confirm .consent-display-2 { font-family: var(--tx-h) !important; color: var(--tx-text) !important; }
#consent-banner p,
#consent-settings p,
#consent-confirm p,
#consent-settings .consent-label,
#consent-settings .consent-help { color: var(--tx-text-dim) !important; }
#consent-banner a,
#consent-settings a,
#consent-confirm a { color: var(--tx-mint) !important; }
#consent-settings .consent-modal-close,
#consent-confirm .consent-modal-close { color: var(--tx-text-dim) !important; }
#consent-settings hr { border-color: var(--tx-line) !important; }

/* Aktions-Reihe im Banner: Accept + Reject gleichwertig nebeneinander */
.tx-consent-btns { display: flex !important; flex-wrap: wrap; gap: 10px; align-items: center; }
.tx-consent-col { flex: 1 1 160px; }
.tx-consent-col-link { flex: 0 0 auto; margin-left: auto; }
.tx-consent-accept,
.tx-consent-reject {
  width: 100%;
  font-family: var(--tx-sub) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 13px 22px !important;
  transition: filter .15s, transform .15s, background .15s !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.tx-consent-accept { background: var(--tx-mint) !important; color: #062019 !important; }
.tx-consent-accept:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tx-consent-reject {
  background: transparent !important;
  color: var(--tx-mint) !important;
  box-shadow: inset 0 0 0 1px var(--tx-mint) !important;
}
.tx-consent-reject:hover { background: rgba(1,222,194,.10) !important; }
/* „Einstellungen" als dezenter Link — bewusst weniger prominent, aber sichtbar */
.tx-consent-settings-link {
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--tx-text-dim) !important;
  text-decoration: underline;
  padding: 8px 6px !important;
  font-size: 13px;
  clip-path: none !important;
}
.tx-consent-settings-link:hover { color: var(--tx-mint) !important; }

/* Buttons im Einstellungen-/Bestätigungs-Modal auf Brand-Mint */
#consent-settings .consent-btn-primary,
#consent-settings .consent-btn-tertiary,
#consent-confirm .consent-btn-tertiary,
#consent-accept-banner-btn-close {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 0 !important;
}
#consent-confirm .consent-btn-outline-primary,
#consent-settings .consent-btn-outline-primary {
  background: transparent !important;
  color: var(--tx-mint) !important;
  box-shadow: inset 0 0 0 1px var(--tx-mint) !important;
  border: 0 !important;
}
/* „Mehr Informationen"-Toggle */
#consent-settings .consent-show-more,
#consent-confirm .consent-show-more { color: var(--tx-mint) !important; }

@media (max-width: 575px) {
  .tx-consent-col-link { margin-left: 0; flex: 1 1 100%; }
  .tx-consent-settings-link { width: 100% !important; text-align: center; }
}

/* ============================================================================
   DEIN SYSTEM · VARIANTE C  (System-Selector, Plugin tx_system_selector)
   Alles unter .tx-syssel--c gescoped → überschreibt die alte Sektion per
   Spezifität, ohne die Alt-Styles (Editor-Preview etc.) zu löschen.
   Fonts: Inter (--tx-h) + Rajdhani (--tx-sub). Akzent: Mint.
   ============================================================================ */
.tx-syssel--c{position:relative;padding:70px 0 90px;
  background:radial-gradient(130% 90% at 28% 0%,#101a1c 0%,var(--tx-bg) 60%);}
.tx-syssel--c .tx-syssel__inner{max-width:1360px;margin:0 auto;padding:0 56px;}

/* header */
.tx-syssel--c .tx-syssel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin:0;}
.tx-syssel--c .tx-syssel__kicker{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.tx-syssel--c .tx-syssel__kicker-bar{width:34px;height:2px;background:var(--tx-mint);box-shadow:0 0 12px rgba(1,222,194,.7);}
.tx-syssel--c .tx-syssel__kicker span{font-family:var(--tx-sub);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mint);font-weight:600;}
.tx-syssel--c .tx-syssel__title{margin:0;font-family:var(--tx-h);font-weight:900;font-size:62px;line-height:.92;letter-spacing:-.02em;text-transform:uppercase;color:#f4f8f6;}
.tx-syssel--c .tx-syssel__sub{margin:16px 0 0;max-width:580px;font-family:var(--tx-sub); font-weight: 500;font-size:16px;line-height:1.5;color:var(--tx-text-dim);}
.tx-syssel--c .tx-syssel__all{cursor:pointer;display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid rgba(1,222,194,.45);color:var(--tx-mint);text-decoration:none;padding:13px 20px;font-family:var(--tx-sub);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);transition:background .2s;}
.tx-syssel--c .tx-syssel__all:hover{background:rgba(1,222,194,.12);}

/* category selector */
.tx-syssel--c .tx-syssel__cats-label{font-family:var(--tx-sub); font-weight: 600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-text-mute);margin:34px 0 12px;}
.tx-syssel--c .tx-syssel__tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;border:0;}
.tx-syssel--c .tx-syssel__tab{appearance:none;cursor:pointer;flex:1 1 0;min-width:168px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(255,255,255,.03);border:1px solid var(--tx-line);padding:18px 16px;margin:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .2s,border-color .2s,box-shadow .2s;}
.tx-syssel--c .tx-syssel__tab:hover{transform:translateY(-2px);border-color:var(--tx-line-2);}
.tx-syssel--c .tx-syssel__tab .lbl{font-family:var(--tx-sub);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-text-dim);white-space:nowrap;}
.tx-syssel--c .tx-syssel__tab .n{font-family:var(--tx-sub);font-size:12px;font-weight:700;color:var(--tx-text-mute);}
.tx-syssel--c .tx-syssel__tab.is-active{background:var(--tx-mint);border-color:var(--tx-mint);box-shadow:0 0 26px rgba(1,222,194,.38);}
.tx-syssel--c .tx-syssel__tab.is-active .lbl{color:#06140f;}
.tx-syssel--c .tx-syssel__tab.is-active .n{color:rgba(6,20,15,.6);}
.tx-syssel--c .tx-syssel__tab.is-active::after{content:"\25BA";font-size: 10px;color:#06140f;}

/* panels + body grid */
.tx-syssel--c .tx-syssel__panels{margin:0;}
.tx-syssel--c .tx-syssel__body{display:grid;grid-template-columns:1.12fr 1fr;gap:22px;align-items:stretch;margin:0;}
.tx-syssel--c .tx-syssel__body.is-hidden{display:none;}
.tx-syssel--c .tx-syssel__empty{padding:40px;border:1px dashed var(--tx-line);color:var(--tx-text-mute);font-family:var(--tx-sub); font-weight: 500;}

/* featured */
.tx-syssel--c .tx-syssel__featured{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:8px;min-height:460px;padding:34px;overflow:hidden;
  background:radial-gradient(110% 90% at 78% 28%,rgba(1,222,194,.15),rgba(255,255,255,.01) 56%);
  border:1px solid rgba(1,222,194,.26);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);}
.tx-syssel--c .tx-syssel__orb{position:absolute;width:420px;height:420px;right:-50px;top:20px;border-radius:50%;background:radial-gradient(circle,rgba(1,222,194,.22),transparent 62%);filter:blur(4px);}
.tx-syssel--c .tx-syssel__feat-col{position:relative;z-index:2;display:flex;flex-direction:column;}
.tx-syssel--c .tx-syssel__feat-tags{display:flex;align-items:center;gap:10px;}
.tx-syssel--c .tx-flag{font-family:var(--tx-sub);font-size: 12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#06140f;background:var(--tx-mint);padding:5px 10px;}
.tx-syssel--c .tx-syssel__flagship{font-family:var(--tx-sub); font-weight: 600;font-size: 12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mint);}
.tx-syssel--c .tx-syssel__featured h3{margin:18px 0 0;font-family:var(--tx-h);font-weight:900;font-size:44px;line-height:.9;text-transform:uppercase;color:#f4f8f6;}
.tx-syssel--c .tx-syssel__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.tx-syssel--c .tx-syssel__chips span{font-family:var(--tx-sub);font-size:12.5px;font-weight: 600;color:#c6cdca;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:7px 11px;}
.tx-syssel--c .tx-syssel__feat-price{margin-top:auto;padding-top:28px;display:flex;align-items:flex-end;gap:7px;}
.tx-syssel--c .tx-syssel__feat-price em{font-style:normal;font-family:var(--tx-sub); font-weight: 600;font-size:13px;color:var(--tx-text-mute);padding-bottom:6px;}
.tx-syssel--c .tx-syssel__feat-price span{font-family:var(--tx-h);font-weight:800;font-size:44px;line-height:.82;color:#fff;white-space:nowrap;}
.tx-syssel--c .tx-syssel__feat-cfg{margin-top:20px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--tx-mint);color:#06140f;text-decoration:none;padding:16px 28px;font-family:var(--tx-sub);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);box-shadow:0 0 30px rgba(1,222,194,.4);transition:background .2s;}
.tx-syssel--c .tx-syssel__feat-cfg:hover{background:var(--tx-mint-2);}
.tx-syssel--c .tx-syssel__feat-media{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
.tx-syssel--c .tx-syssel__feat-media img{max-height:410px;max-width:100%;object-fit:contain;filter:drop-shadow(0 28px 46px rgba(0,0,0,.65));}
.tx-syssel--c .tx-syssel__noimg{display:flex;align-items:center;justify-content:center;width:180px;height:220px;border:1px dashed rgba(255,255,255,.16);font-family:var(--tx-sub);font-size: 12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-text-mute);text-align:center;line-height:1.7;}
.tx-syssel--c .tx-syssel__noimg--sm{width:72px;height:72px;font-size: 9px;letter-spacing:.1em;}

/* grid + small cards */
.tx-syssel--c .tx-syssel__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.tx-syssel--c .tx-syssel-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;
  background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.07);text-decoration:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:border-color .25s,transform .25s;}
.tx-syssel--c .tx-syssel-card:hover{border-color:rgba(1,222,194,.5);transform:translateY(-3px);}
.tx-syssel--c .tx-syssel-card__media{position:relative;height:108px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tx-syssel--c .tx-syssel-card__glow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(1,222,194,.16),transparent 65%);filter:blur(5px);}
.tx-syssel--c .tx-syssel-card__media img{position:relative;max-height:104px;max-width:88%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6));}
.tx-syssel--c .tx-syssel-card__name{font-family:var(--tx-h);font-weight:800;font-size:19px;text-transform:uppercase;color:#eef3f1;line-height:1;}
.tx-syssel--c .tx-syssel-card__spec{font-family:var(--tx-sub); font-weight: 600;font-size:13px;color:var(--tx-text-mute);line-height:1.3;}
.tx-syssel--c .tx-syssel-card__foot{margin-top:4px;display:flex;align-items:center;justify-content:space-between;}
.tx-syssel--c .tx-syssel-card__price{font-family:var(--tx-h);font-weight:800;font-size:19px;color:#fff;white-space:nowrap;}
.tx-syssel--c .tx-syssel-card__arr{color:var(--tx-mint);font-family:var(--tx-sub);font-weight:700;font-size:16px;}

/* promo tile */
.tx-syssel--c .tx-syssel__promo{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px;
  background:linear-gradient(150deg,rgba(16,224,168,.12),rgba(255,255,255,.012));border:1px solid rgba(16,224,168,.24);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.tx-syssel--c .tx-syssel__promo-badge{font-family:var(--tx-sub);font-size: 12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mint);}
.tx-syssel--c .tx-syssel__promo-big{font-family:var(--tx-h);font-weight:900;font-size:30px;line-height:.92;text-transform:uppercase;color:#f4f8f6;}
.tx-syssel--c .tx-syssel__promo-desc{font-family:var(--tx-sub); font-weight: 600;font-size:13.5px;line-height:1.45;color:var(--tx-text-dim);}
.tx-syssel--c .tx-syssel__promo-more{margin-top:4px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--tx-sub);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mint);transition:gap .2s;}
.tx-syssel--c .tx-syssel__promo-more:hover{gap:13px;}

@media (max-width:1000px){
  .tx-syssel--c .tx-syssel__body{grid-template-columns:1fr;}
  .tx-syssel--c .tx-syssel__featured{grid-template-columns:1fr;}
  .tx-syssel--c .tx-syssel__feat-media{display:none;}
}
@media (max-width:560px){
  .tx-syssel--c .tx-syssel__inner{padding:0 22px;}
  .tx-syssel--c .tx-syssel__title{font-size:40px;}
  .tx-syssel--c .tx-syssel__grid{grid-template-columns:1fr;}
}

/* ============================================================================
   DEIN SYSTEM · VARIANTE A  (System-Selector, Plugin tx_system_selector)
   Row-Layout: Promo-Kachel (300px) + 4 gleich große Produktkarten.
   Alles unter .tx-syssel--a gescoped. Fonts: Inter (--tx-h) + Rajdhani (--tx-sub).
   ============================================================================ */
.tx-syssel--a{position:relative;padding:70px 0 90px;background:radial-gradient(120% 80% at 18% 0%,#10171a 0%,var(--tx-bg) 58%);}
.tx-syssel--a .tx-syssel__inner{max-width:var(--tx-box);margin:0 auto;padding:0 15px;}

/* header (wie --c) */
.tx-syssel--a .tx-syssel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin:0;max-width:none;padding:0;}
.tx-syssel--a .tx-syssel__kicker{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.tx-syssel--a .tx-syssel__kicker-bar{width:34px;height:2px;background:var(--tx-mint);box-shadow:0 0 12px rgba(1,222,194,.7);}
.tx-syssel--a .tx-syssel__kicker span{font-family:var(--tx-sub);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mint);font-weight:600;}
.tx-syssel--a .tx-syssel__title{margin:0;font-family:var(--tx-h);font-weight:900;font-size:62px;line-height:.92;letter-spacing:-.02em;text-transform:uppercase;color:#f4f8f6;}
.tx-syssel--a .tx-syssel__sub{margin:16px 0 0;max-width:580px;font-family:var(--tx-sub); font-weight: 500;font-size:16px;line-height:1.5;color:var(--tx-text-dim);}
.tx-syssel--a .tx-syssel__all{cursor:pointer;display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid rgba(1,222,194,.45);color:var(--tx-mint);text-decoration:none;padding:13px 20px;font-family:var(--tx-sub);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);transition:background .2s;}
.tx-syssel--a .tx-syssel__all:hover{background:rgba(1,222,194,.12);}

/* chips */
.tx-syssel--a .tx-syssel__cats-label{font-family:var(--tx-sub); font-weight: 600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-text-mute);margin:34px 0 12px;}
.tx-syssel--a .tx-syssel__tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;border:0;max-width:none;padding:0;overflow:visible;}
.tx-syssel--a .tx-syssel__tabs::after{display:none;}
.tx-syssel--a .tx-syssel__tab{appearance:none;cursor:pointer;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--tx-line);padding:11px 16px;margin:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:transform .2s,border-color .2s,box-shadow .2s;}
.tx-syssel--a .tx-syssel__tab:hover{transform:translateY(-2px);border-color:var(--tx-line-2);}
.tx-syssel--a .tx-syssel__tab .lbl{font-family:var(--tx-sub);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-text-dim);white-space:nowrap;}
.tx-syssel--a .tx-syssel__tab .n{font-family:var(--tx-sub);font-size: 12px;font-weight:700;color:var(--tx-text-mute);}
.tx-syssel--a .tx-syssel__tab.is-active{background:var(--tx-mint);border-color:var(--tx-mint);box-shadow:0 0 24px rgba(1,222,194,.34);}
.tx-syssel--a .tx-syssel__tab.is-active .lbl{color:#06140f;}
.tx-syssel--a .tx-syssel__tab.is-active .n{color:rgba(6,20,15,.6);}

/* panels = body grid */
.tx-syssel--a .tx-syssel__panels{margin:0;max-width:none;padding:0;}
.tx-syssel--a .tx-syssel__body{display:grid;grid-template-columns:260px repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;margin:0;max-width:none;padding:0;}
.tx-syssel--a .tx-syssel__body.is-hidden{display:none;}
.tx-syssel--a .tx-syssel__empty{grid-column:1/-1;padding:40px;border:1px dashed var(--tx-line);color:var(--tx-text-mute);font-family:var(--tx-sub); font-weight: 500;}

/* promo tile */
.tx-syssel--a .tx-syssel__promo{position:relative;display:flex;flex-direction:column;gap:16px;padding:26px 24px 28px 28px;background:linear-gradient(180deg,rgba(16,224,168,.06),rgba(255,255,255,.012));border:1px solid rgba(16,224,168,.18);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);}
.tx-syssel--a .tx-syssel__promo-bar{position:absolute;left:0;top:26px;bottom:26px;width:3px;background:var(--tx-mint);box-shadow:0 0 16px rgba(1,222,194,.6);}
.tx-syssel--a .tx-syssel__promo-badge{align-self:flex-start;font-family:var(--tx-sub);font-size: 11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#06140f;background:var(--tx-mint);padding:5px 9px;}
.tx-syssel--a .tx-syssel__promo-big{font-family:var(--tx-h);font-weight:900;font-size:40px;line-height:.92;text-transform:uppercase;color:#f3f7f5;}
.tx-syssel--a .tx-syssel__promo-big span{color:var(--tx-mint);}
.tx-syssel--a .tx-syssel__promo-desc{font-family:var(--tx-sub); font-weight: 500;font-size:14px;line-height:1.5;color:var(--tx-text-dim);}
.tx-syssel--a .tx-syssel__promo-bullets{display:flex;flex-direction:column;gap:10px;}
.tx-syssel--a .tx-syssel__promo-bullets span{display:flex;gap:9px;align-items:flex-start;font-family:var(--tx-sub); font-weight: 600;font-size:13px;color:#c6cdca;}
.tx-syssel--a .tx-syssel__promo-bullets i{color:var(--tx-mint);font-weight:700;font-style:normal;}
.tx-syssel--a .tx-syssel__promo-more{margin-top:auto;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:var(--tx-mint);color:#06140f;text-decoration:none;border:none;padding:13px 20px;font-family:var(--tx-sub);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);box-shadow:0 0 22px rgba(1,222,194,.32);transition:background .2s;}
.tx-syssel--a .tx-syssel__promo-more:hover{background:var(--tx-mint-2);}

/* product card */
.tx-syssel--a .tx-syssel-card{position:relative;display:flex;flex-direction:column;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));border:1px solid rgba(255,255,255,.07);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:transform .25s,border-color .25s;}
.tx-syssel--a .tx-syssel-card:hover{border-color:rgba(1,222,194,.55);transform:translateY(-5px);}
.tx-syssel--a .tx-syssel-card__media{position:relative;height:218px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tx-syssel--a .tx-syssel-card__glow{position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(1,222,194,.20),transparent 64%);filter:blur(6px);}
.tx-syssel--a .tx-syssel-card__media img{position:relative;max-height:196px;max-width:90%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));}
.tx-syssel--a .tx-syssel-card__tag{position:absolute;top:14px;left:14px;font-family:var(--tx-sub);font-size: 10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#06140f;background:var(--tx-mint);padding:4px 8px;}
.tx-syssel--a .tx-syssel-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:13px;flex:1;}
.tx-syssel--a .tx-syssel-card__name{font-family:var(--tx-h);font-weight:800;font-size:24px;line-height:1.06;letter-spacing:.01em;color:#f3f7f5;text-transform:uppercase;min-height:51px;display:flex;align-items:flex-start;}
.tx-syssel--a .tx-syssel-card__specs{display:flex;flex-direction:column;gap:5px;font-family:var(--tx-sub); font-weight: 600;font-size:13.5px;min-height:43px;}
.tx-syssel--a .tx-syssel-card__cpugpu{color:#c6cdca;font-weight:600;}
.tx-syssel--a .tx-syssel-card__memssd{color:var(--tx-text-mute);}
.tx-syssel--a .tx-syssel-card__rule{height:1px;background:rgba(255,255,255,.07);}
.tx-syssel--a .tx-syssel-card__brands{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.tx-syssel--a .tx-syssel-card__brands span{font-family:var(--tx-sub); font-weight: 600;font-size: 10.5px;letter-spacing:.06em;text-transform:uppercase;color:#98A29E;}
.tx-syssel--a .tx-syssel-card__foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;}
.tx-syssel--a .tx-syssel-card__price{display:flex;align-items:baseline;gap:7px;}
.tx-syssel--a .tx-syssel-card__price em{font-family:var(--tx-sub); font-weight: 600;font-style:normal;font-size: 12px;color:var(--tx-text-mute);}
.tx-syssel--a .tx-syssel-card__price span{font-family:var(--tx-h);font-weight:800;font-size:26px;color:#fff;white-space:nowrap;}
.tx-syssel--a .tx-syssel-card__cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border:1px solid rgba(1,222,194,.42);color:var(--tx-mint);font-family:var(--tx-sub);font-size: 12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:background .2s,border-color .2s;}
.tx-syssel--a .tx-syssel-card__cta span{transition:transform .2s;}
.tx-syssel--a .tx-syssel-card:hover .tx-syssel-card__cta{background:rgba(1,222,194,.12);border-color:var(--tx-mint);}
.tx-syssel--a .tx-syssel-card:hover .tx-syssel-card__cta span{transform:translateX(3px);}
.tx-syssel--a .tx-syssel__noimg{display:flex;align-items:center;justify-content:center;width:140px;height:140px;border:1px dashed rgba(255,255,255,.16);font-family:var(--tx-sub);font-size: 11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-text-mute);text-align:center;line-height:1.6;}

/* responsive */
@media (max-width:1180px){
  .tx-syssel--a .tx-syssel__body{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tx-syssel--a .tx-syssel__promo{grid-column:1 / -1;}
}
@media (max-width:760px){
  .tx-syssel--a .tx-syssel__inner{padding:0 22px;}
  .tx-syssel--a .tx-syssel__title{font-size:42px;}
  .tx-syssel--a .tx-syssel__body{grid-template-columns:1fr;}
}

/* ════════════════════════════════════════════════════════════════
   CHECKOUT · Kontaktdaten-Sektion Fix (2026-06-25)
   Problem: Telefon (type=tel) UND Geburtsdatum (type=date) im
   inc-billing-address-form rendern noch hell/Bootstrap-Default —
   weißer BG, runde Ecken, native Datepicker-Glyphe hell, native
   Checkboxen (Datenschutz / „Neues Kundenkonto") als weiße Kästchen.
   Ursache: input[type="date"] fehlte in JEDER gestylten Input-Liste,
   und native Controls (Datepicker, Checkbox) erben kein dark
   color-scheme → Browser zeichnet sie hell.
   Fix: date-artige Inputs in den Toxic-Input-Style, color-scheme:dark
   auf der ganzen Sektion (themed native Datepicker + Checkboxen dark),
   Datepicker-Indikator sichtbar, accent-color mint.
   ════════════════════════════════════════════════════════════════ */
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"],
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="datetime-local"],
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="month"],
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="week"],
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="time"] {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: var(--tx-body) !important;
  box-shadow: none !important;
  color-scheme: dark !important;
  transition: border-color .15s, background .15s !important;
}
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"]:hover,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="datetime-local"]:hover {
  border-color: var(--tx-text-dim) !important;
}
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"]:focus,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="datetime-local"]:focus,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="month"]:focus,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="time"]:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Native Datepicker-Kalender-Glyphe auf Dark sichtbar machen (sonst
   schwarzes Icon auf dunklem Feld = unsichtbar). invert() + grau. */
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"]::-webkit-calendar-picker-indicator,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
}
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
}
/* Leere date/datetime-Felder (TT.MM.JJJJ-Platzhalter) dezent. */
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"]::-webkit-datetime-edit,
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="datetime-local"]::-webkit-datetime-edit {
  color: var(--tx-text) !important;
}
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .account-content) input[type="date"]:invalid::-webkit-datetime-edit {
  color: var(--tx-text-mute) !important;
}
/* Native Checkboxen (Datenschutz + „Neues Kundenkonto erstellen")
   dunkel rendern statt weißem Browser-Default; checked = mint.
   color-scheme:dark zeichnet das leere Kästchen dunkel.
   WICHTIG: NOVAs {checkbox}/{radio}-Macro versteckt das native Input
   (.custom-control-input) und zeichnet eine eigene Glyphe via
   ::before/::after. Stylen wir das versteckte Native trotzdem (Größe +
   color-scheme:dark), rendert der Browser es zusätzlich sichtbar →
   doppelte/komische Glyphe („Pfeile"). Daher .custom-control-input
   IMMER ausschließen (gleiches Pattern wie weiter oben). */
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .checkboxes-area) input[type="checkbox"]:not(.custom-control-input),
:is(#new_customer, .inc-billing-address-form, .register-form-account, .checkout-step-form, .checkboxes-area) input[type="radio"]:not(.custom-control-input) {
  accent-color: var(--tx-mint) !important;
  color-scheme: dark !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* ════════════════════════════════════════════════════════════════
   BESTELLDETAILS / BESTELLBESTAETIGUNG · Dark-Theme (2026-06-25)
   Problem: "Ihre Bestellung" (account/order_details.tpl, Gast-PLZ/
   Mail-Lookup) + "Bestellbestaetigung" (#order-confirmation) rendern
   noch als weisse Bootstrap-.card -> komplett gegen das Toxic-Dark-
   Theme. Buttons ("Zurueck") gelb (btn-outline-primary Default).
   Diese Seiten liegen NICHT unter body[data-page="11"] / .checkout-
   confirmation, daher vom bestehenden Card-Dark-Block nicht erfasst.
   Fix: gleiche Card-Optik wie Checkout-Confirmation, scoped auf die
   Order-Container .order-details / #order-confirmation / .order-completed.
   ════════════════════════════════════════════════════════════════ */
:is(.order-details, #order-confirmation, .order-completed) {
  color: var(--tx-text) !important;
}
:is(.order-details, #order-confirmation, .order-completed).card,
:is(.order-details, #order-confirmation, .order-completed) .card {
  background: var(--tx-card) !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: 0 !important;
  color: var(--tx-text) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
/* Kopfzeile: Datum / Bestellnummer / Status */
:is(.order-details, #order-confirmation, .order-completed) .card-header {
  background: var(--tx-bg-2) !important;
  border-bottom: 1px solid var(--tx-line) !important;
  border-top: 3px solid var(--tx-mint) !important;
  padding: 16px 22px !important;
  font-family: var(--tx-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
}
:is(.order-details, #order-confirmation, .order-completed) .card-header a {
  color: var(--tx-mint) !important;
  text-decoration: none !important;
}
:is(.order-details, #order-confirmation, .order-completed) .card-body {
  background: var(--tx-card) !important;
  color: var(--tx-text) !important;
  padding: 22px !important;
}
/* Alle Text-/Inline-Elemente im Order-Block hell machen */
:is(.order-details, #order-confirmation, .order-completed) p,
:is(.order-details, #order-confirmation, .order-completed) li,
:is(.order-details, #order-confirmation, .order-completed) span,
:is(.order-details, #order-confirmation, .order-completed) div,
:is(.order-details, #order-confirmation, .order-completed) td,
:is(.order-details, #order-confirmation, .order-completed) th,
:is(.order-details, #order-confirmation, .order-completed) dt,
:is(.order-details, #order-confirmation, .order-completed) dd,
:is(.order-details, #order-confirmation, .order-completed) label,
:is(.order-details, #order-confirmation, .order-completed) h1,
:is(.order-details, #order-confirmation, .order-completed) h2,
:is(.order-details, #order-confirmation, .order-completed) h3 {
  color: var(--tx-text) !important;
}
:is(.order-details, #order-confirmation, .order-completed) strong,
:is(.order-details, #order-confirmation, .order-completed) b,
:is(.order-details, #order-confirmation, .order-completed) .font-weight-bold {
  color: var(--tx-text) !important;
  font-weight: 700 !important;
}
:is(.order-details, #order-confirmation, .order-completed) .text-muted,
:is(.order-details, #order-confirmation, .order-completed) small {
  color: var(--tx-text-dim) !important;
}
:is(.order-details, #order-confirmation, .order-completed) a:not(.btn) {
  color: var(--tx-mint) !important;
}
/* Sub-Ueberschriften (Zahlungsart / Versandart / Rechnungsadresse / Warenkorb) */
:is(.order-details, #order-confirmation, .order-completed) .h2,
:is(.order-details, #order-confirmation, .order-completed) .h3,
:is(.order-details, #order-confirmation, .order-completed) h2,
:is(.order-details, #order-confirmation, .order-completed) h3,
:is(.order-details, #order-confirmation, .order-completed) legend {
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
}
/* Positions-Tabelle */
:is(.order-details, #order-confirmation, .order-completed) table,
:is(.order-details, #order-confirmation, .order-completed) .table {
  background: transparent !important;
  color: var(--tx-text) !important;
}
:is(.order-details, #order-confirmation, .order-completed) table thead th,
:is(.order-details, #order-confirmation, .order-completed) .table thead th {
  background: var(--tx-bg-2) !important;
  color: var(--tx-text) !important;
  border-bottom: 2px solid var(--tx-mint) !important;
  border-top: 0 !important;
  font-family: var(--tx-sub) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
:is(.order-details, #order-confirmation, .order-completed) table td,
:is(.order-details, #order-confirmation, .order-completed) .table td,
:is(.order-details, #order-confirmation, .order-completed) table th,
:is(.order-details, #order-confirmation, .order-completed) .table th {
  background: transparent !important;
  color: var(--tx-text) !important;
  border-color: var(--tx-line) !important;
}
:is(.order-details, #order-confirmation, .order-completed) tr,
:is(.order-details, #order-confirmation, .order-completed) hr {
  border-color: var(--tx-line) !important;
}
:is(.order-details, #order-confirmation, .order-completed) tfoot tr,
:is(.order-details, #order-confirmation, .order-completed) .total-row {
  border-top: 2px solid var(--tx-mint) !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  color: var(--tx-text) !important;
}
/* Gast-Lookup-Form (PLZ + E-Mail) Inputs dunkel */
:is(.order-details, #order-confirmation, .order-completed) .form-control,
:is(.order-details, #order-confirmation, .order-completed) input[type="text"],
:is(.order-details, #order-confirmation, .order-completed) input[type="email"],
:is(.order-details, #order-confirmation, .order-completed) input[type="tel"],
:is(.order-details, #order-confirmation, .order-completed) input[type="number"] {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}
:is(.order-details, #order-confirmation, .order-completed) .form-control:focus,
:is(.order-details, #order-confirmation, .order-completed) input:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
  box-shadow: none !important;
}
:is(.order-details, #order-confirmation, .order-completed) .form-control::placeholder,
:is(.order-details, #order-confirmation, .order-completed) input::placeholder {
  color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
/* Float-Label-Reset fuer Lookup-Form (PLZ/E-Mail Labels oben, statisch) */
:is(.order-details, #order-confirmation, .order-completed) .form-floating,
:is(.order-details, #order-confirmation, .order-completed) .form-group {
  position: static !important;
}
:is(.order-details, #order-confirmation, .order-completed) .form-floating > label,
:is(.order-details, #order-confirmation, .order-completed) label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 6px 0 !important;
  opacity: 1 !important;
  height: auto !important;
  color: var(--tx-text) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
/* Primaer-Button ("Bestelldetails ansehen") mint */
:is(.order-details, #order-confirmation, .order-completed) .btn-primary,
:is(.order-details, #order-confirmation, .order-completed) button[type="submit"] {
  background: var(--tx-mint) !important;
  color: #062019 !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
:is(.order-details, #order-confirmation, .order-completed) .btn-primary:hover,
:is(.order-details, #order-confirmation, .order-completed) button[type="submit"]:hover {
  background: var(--tx-mint-2) !important;
}
/* Sekundaer-Button ("Zurueck") war gelb (btn-outline-primary Default) -> Mint-Outline */
:is(.order-details, #order-confirmation, .order-completed) .btn-outline-primary,
:is(.order-details, #order-confirmation, .order-completed) .btn-outline-secondary,
:is(.order-details, #order-confirmation, .order-completed) .btn-secondary,
:is(.order-details, #order-confirmation, .order-completed) .btn-default,
.btn-row .btn-outline-primary {
  background: transparent !important;
  color: var(--tx-mint) !important;
  border: 1px solid var(--tx-mint) !important;
  border-radius: 0 !important;
  font-family: var(--tx-h) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
:is(.order-details, #order-confirmation, .order-completed) .btn-outline-primary:hover,
:is(.order-details, #order-confirmation, .order-completed) .btn-outline-secondary:hover,
.btn-row .btn-outline-primary:hover {
  background: var(--tx-mint) !important;
  color: #062019 !important;
}

/* ════════════════════════════════════════════════════════════════
   PAYPAL ACDC KREDITKARTE · Hosted-Fields Dark-Fix (2026-06-25)
   Plugin jtl_paypal_commerce, Template paypalacdc_hostedfields.tpl.
   Markup: #acdc_card > .card > .card-body.label-slide > .form-group
           ( .card_field.form-control (iframe) | input.form-control )
           + <label> (DOM-NACH dem Feld).
   Problem: NOVA's .label-slide gibt jedem Label background:#ffffff +
   position:absolute (schwebt auf die obere Feldkante) → weiße Pills
   („Kartennummer/Ablaufdatum/Sicherheitscode/Name des Karteninhabers")
   auf dem Dark-Theme = doof. Feld-BGs sind schon dunkel, nur die
   Labels brechen aus.
   Fix: identisch zum .tx-auth__card-Pattern — Label statisch ÜBER das
   Feld (form-group column-reverse, da Label DOM-2/Feld DOM-1), Mint-
   Uppercase, KEIN weißer Pill-BG, weißen :after-Border-Cut killen.
   ID #acdc_card schlägt NOVA-Spezifität sicher.
   ════════════════════════════════════════════════════════════════ */
#acdc_card.card,
#acdc_card .card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
#acdc_card .card-header {
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: 0 0 14px 0 !important;
  font-family: var(--tx-sub) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
}
#acdc_card .card-body {
  background: transparent !important;
  padding: 0 !important;
}
/* form-group: Label (DOM-2) optisch nach oben, Feld (DOM-1) darunter */
#acdc_card .label-slide .form-group:not(.checkbox),
#acdc_card .form-group:not(.checkbox) {
  position: static !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
/* Labels statisch, Mint-Uppercase, KEIN weißer Pill-BG */
#acdc_card .label-slide .form-group:not(.checkbox) label,
#acdc_card .form-group:not(.checkbox) label,
#acdc_card .label-slide .form-group:not(.checkbox) .col-form-label {
  position: static !important;
  display: block !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tx-mint) !important;
  font-family: var(--tx-sub) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  line-height: 1.2 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}
/* weißen Border-Cut-Balken (label:after) + ::before-Notch entfernen */
#acdc_card .label-slide .form-group label:after,
#acdc_card .label-slide .form-group label:before,
#acdc_card .form-group label::after,
#acdc_card .form-group label::before {
  background: transparent !important;
  content: none !important;
  display: none !important;
}
/* CVV-Typ-Suffix ("(CVV)") dezent inline */
#acdc_card label #sec_type {
  color: var(--tx-text-mute) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}
/* Felder: Hosted-Field-iframes (.card_field) + echte Inputs dunkel/eckig */
#acdc_card .card_field,
#acdc_card .form-control,
#acdc_card input[type="text"] {
  background: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}
/* Hosted-Field-Container (iframe) braucht feste Höhe (kein Text-Flow drin) */
#acdc_card .card_field {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
}
#acdc_card .form-control:focus,
#acdc_card input:focus,
#acdc_card .card_field.card-fields-focused,
#acdc_card .card_field:focus-within {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
  box-shadow: none !important;
}
#acdc_card input::placeholder {
  color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
/* CC-Marken-Icons-Reihe etwas Luft */
#acdc_card #ppc-cc-icon {
  margin-bottom: 8px !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX (2026-06-25): „FAKE SUBMIT" + blasse Order-Completed-Headline
   ════════════════════════════════════════════════════════════════ */
/* 1) NOVAs versteckter Enter-Abfang-Button (inc_order_items.tpl /
      cart_items.tpl: <input type="submit" name="fake" class="d-none">)
      wurde durch unsere Checkout-Submit-Regel (display:inline-flex
      !important) sichtbar → mint-Balken "FAKE SUBMIT". Hart verstecken. */
input[name="fake"],
.btn-hidden-default {
  display: none !important;
}
/* 2) Bestellabschluss-Headline „Ihre Bestellung ist bei uns eingegangen."
      + „Ihre Bestellung" (Order-Details). NOVA-Base setzt h1{color:#525252}
      (dunkelgrau) und diese Seiten überschreiben es nicht → Geister-Optik.
      h1/.h1 hier hell + Toxic-Headline-Stil. Scope via :has auf die
      Order-Wrapper, damit nur diese Seiten betroffen sind. */
body:has(.order-completed) h1,
body:has(.order-completed) .h1,
body:has(.order-details) h1,
body:has(.order-details) .h1,
body:has(#order-confirmation) h1,
body:has(#order-confirmation) .h1 {
  color: var(--tx-text) !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  font-family: var(--tx-h) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   KONTAKTDATEN-FIELDSET FIX (2026-06-25)
   Telefon (type=tel) + Geburtsdatum (type=date) blieben WEISS.
   Ursache: Im Live-Template inc_billing_address_form.tpl liegen die
   Adressfelder in <fieldset class="inc-billing-address-form"> (→ dunkel
   gestylt), die Kontaktdaten (E-Mail/Telefon/Geburtsdatum) aber in
   einem ZWEITEN, KLASSENLOSEN <fieldset> direkt danach. Das fiel durch
   ALLE bisherigen Scopes. Zusätzlich fehlte input[type=date] überall.
   Form-Wrapper im Checkout: #form-register / .checkout-register-form,
   auf der Registrierungsseite: #new_customer.
   Fix: per Geschwister-Kombinator .inc-billing-address-form ~ fieldset
   + Form-IDs greifen + alle Input-Typen inkl. date + color-scheme dark
   + Label-slide-Reset (statische Uppercase-Labels wie bei den Adressen).
   ════════════════════════════════════════════════════════════════ */
.inc-billing-address-form ~ fieldset .form-control,
.inc-billing-address-form ~ fieldset input[type="text"],
.inc-billing-address-form ~ fieldset input[type="email"],
.inc-billing-address-form ~ fieldset input[type="tel"],
.inc-billing-address-form ~ fieldset input[type="number"],
.inc-billing-address-form ~ fieldset input[type="date"],
.inc-billing-address-form ~ fieldset input[type="datetime-local"],
.inc-billing-address-form ~ fieldset select,
.inc-billing-address-form ~ fieldset textarea,
.checkout-register-form input[type="tel"],
.checkout-register-form input[type="date"],
#form-register input[type="tel"],
#form-register input[type="date"],
#new_customer input[type="date"],
body:has(.stepper.checkout-steps) input[type="date"],
body:has(.stepper.checkout-steps) input[type="tel"],
body.is-checkout input[type="date"] {
  background: var(--tx-bg-3) !important;
  background-color: var(--tx-bg-3) !important;
  border: 1px solid var(--tx-line) !important;
  border-bottom-width: 2px !important;
  color: var(--tx-text) !important;
  -webkit-text-fill-color: var(--tx-text) !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  color-scheme: dark !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.inc-billing-address-form ~ fieldset .form-control:focus,
.inc-billing-address-form ~ fieldset input:focus,
.checkout-register-form input[type="tel"]:focus,
.checkout-register-form input[type="date"]:focus,
#form-register input[type="date"]:focus,
body:has(.stepper.checkout-steps) input[type="date"]:focus {
  border-color: var(--tx-mint) !important;
  background: var(--tx-card) !important;
  outline: none !important;
  box-shadow: none !important;
}
.inc-billing-address-form ~ fieldset input::placeholder {
  color: var(--tx-text-mute) !important;
  -webkit-text-fill-color: var(--tx-text-mute) !important;
  opacity: 1 !important;
}
/* Native Datepicker-Glyphe (Kalender-Icon) auf Dark sichtbar */
.inc-billing-address-form ~ fieldset input[type="date"]::-webkit-calendar-picker-indicator,
.checkout-register-form input[type="date"]::-webkit-calendar-picker-indicator,
#form-register input[type="date"]::-webkit-calendar-picker-indicator,
body:has(.stepper.checkout-steps) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
}
/* Label-slide-Reset im Kontakt-Fieldset → statische Uppercase-Labels
   (wie bei STRASSE/PLZ/ORT), kein weißer Floating-Pill mehr. */
.inc-billing-address-form ~ fieldset .form-floating,
.inc-billing-address-form ~ fieldset .form-group {
  position: static !important;
}
.inc-billing-address-form ~ fieldset .form-floating > label,
.inc-billing-address-form ~ fieldset .form-group > label,
.inc-billing-address-form ~ fieldset label.col-form-label {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 6px 0 !important;
  top: auto !important;
  left: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  height: auto !important;
  display: block !important;
  font-family: var(--tx-body), "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tx-text) !important;
}
.inc-billing-address-form ~ fieldset .form-floating > label:after,
.inc-billing-address-form ~ fieldset .form-group > label:after,
.inc-billing-address-form ~ fieldset label::before {
  background: transparent !important;
  content: none !important;
}
/* Optional-Suffix („ - optionale Angabe") dezent */
.inc-billing-address-form ~ fieldset label .optional {
  color: var(--tx-text-mute) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* ── PLP Filter-Rows Fix (2026-06-26): Marker-Strich weg + NOVA-Gelb-Hover -> Teal ── */
.tx-filter-list .tx-filter-check { display: none !important; }
.tx-filter-list li .tx-filter-row { border: 0 !important; text-decoration: none !important; }
.tx-filter-list li:hover .tx-filter-row,
.tx-filter-list li:hover .tx-filter-row span:not(.tx-filter-count),
.tx-filter-list li.is-checked .tx-filter-row,
.tx-filter-list li.is-checked .tx-filter-row span:not(.tx-filter-count) { color: var(--tx-mint) !important; }
.tx-filter-list li .tx-filter-count { color: var(--tx-text-mute) !important; }

/* ══ LAYOUT-VEREINHEITLICHUNG auf 1440px-Box (2026-07-02) ══
   Alles außer Hero fluchtet auf die etablierte .tx-container-Breite. */
/* Footer: war 1680px → Content-/Header-Breite, damit Header bündig mit Footer */
.tx-footer .tx-container { max-width: var(--tx-box) !important; }

/* "01 Meistverkaufte Systeme" (Bestseller-Rotor): war ~1860px-Rail →
   geboxt auf 1440, Titel + Karten bündig mit anderen Sektionen (32px).
   Pfeile (54px, left/right:0) überlagern damit die Peek-Kartenränder leicht. */

/* Partner-Editionen OPC-Banner: Extra-Einrückung raus → bündig zum Titel */
.tx-cards-stack--opc { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.tx-cards-stack--opc > .opc-area,
.tx-cards-stack--opc .opc-area,
.tx-cards-stack--opc [class*="opc-"] > .row { margin-left: 0 !important; margin-right: 0 !important; }

/* ── OPC-Banner bündig auf 1440 (2026-07-02b) ──
   Sortiment + Partner-Editionen: der reingedroppte Bootstrap-Container-Portlet
   (.container = max-width + 15px Seiten-Padding) rückt die Karten ein.
   Neutralisieren → Karten fluchten mit Titel + System-Selector auf 32px. */
.tx-cats__grid--opc .container,
.tx-cats__grid--opc .container-fluid,
.tx-cards-stack--opc .container,
.tx-cards-stack--opc .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── System-Selector "Dein System" bündig (2026-07-02c) ──
   .tx-syssel--a .tx-syssel__inner hatte padding 0 15px → 17px weiter draußen
   als .tx-container (0 32px). Auf 32px angeglichen → fluchtet mit allem. */
.tx-syssel--a .tx-syssel__inner { padding-left: 32px !important; padding-right: 32px !important; }

/* ── PC-Finder Reassurance/Upsell-Zeile (2026-07-02) ──
   "Alle stärkeren Builds schaffen dein Spiel auch" unter den 3 Ergebnis-Karten. */
.tx-pcf-reassure {
  margin: 18px 0 0;
  padding: 13px 18px;
  border: 1px solid rgba(1,222,194,0.28);
  background: rgba(1,222,194,0.06);
  font-family: var(--tx-sub); font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-text-dim);
}
.tx-pcf-reassure b { color: var(--tx-text); }
.tx-pcf-reassure a { color: var(--tx-mint); font-weight: 700; text-decoration: none; white-space: nowrap; }
.tx-pcf-reassure a:hover { text-decoration: underline; }
.tx-pcf-reassure__ic { color: var(--tx-mint); font-weight: 900; margin-right: 5px; }

/* ════════════════════════════════════════════════════════════════
   MOBILE PDP/KONFIGURATOR FIXES (2026-07-04)
   ════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Spec-Liste („Dein System") — lange Artikelnamen wurden per
   ellipsis abgeschnitten. Auf Mobile Label ÜBER Wert stapeln, Wert voll
   umbrechen. Icon spannt beide Zeilen links.
   ⚠️ Grenze am 2026-08-04 von 760 auf 1099px gezogen — dieselbe Breite, ab der
   die Produktseite ohnehin einspaltig wird. Dazwischen stand die Liste
   dreispaltig, obwohl der Platz fehlt: bei 900px blieben dem Wert gemessen
   136px, der laengste Wert braucht 287px und lief damit auf drei Zeilen.
   Gestapelt hat er die volle Breite. ── */
@media (max-width: 1099px) {
  .tx-cfg-specs__row {
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "icon label"
      "icon value";
    row-gap: 2px;
    column-gap: 12px;
    align-items: start;
    padding: 12px 0;
  }
  .tx-cfg-specs__icon  { grid-area: icon; align-self: center; }
  .tx-cfg-specs__label { grid-area: label; font-size: 12px; letter-spacing: 0.1em; }
  .tx-cfg-specs__value {
    grid-area: value;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
  }
}

/* ── FIX 2: Component-Spotlight (Rich-Content) — Desktop alterniert
   Bild/Text (schön). Mobile war Reihenfolge inkonsistent (mal Bild oben,
   mal unten). Gewünscht: EINHEITLICH Überschrift → Bild → Fließtext.
   Trick: __body auf display:contents → seine Kinder werden Flex-Items
   der Row, dann per order sortieren. ── */
@media (max-width: 1024px) {
  .tx-pdp-spotlight__row,
  .tx-pdp-spotlight__row--reverse {
    display: flex !important;
    flex-direction: column !important;
  }
  .tx-pdp-spotlight__body { display: contents; }
  .tx-pdp-spotlight__tag  { order: 1; align-self: flex-start; margin: 20px 20px 12px; }
  .tx-pdp-spotlight__sub  { order: 2; padding: 0 20px; margin-bottom: 4px; }
  .tx-pdp-spotlight__body > h3,
  .tx-pdp-spotlight__row h3 { order: 3; padding: 0 20px; margin: 0 0 12px; }
  .tx-pdp-spotlight__row .tx-pdp-spotlight__media,
  .tx-pdp-spotlight__row--reverse .tx-pdp-spotlight__media {
    order: 4 !important;
    aspect-ratio: 16 / 10;
    align-self: stretch;
    margin: 2px 0 8px;
  }
  .tx-pdp-spotlight__body > p,
  .tx-pdp-spotlight__row p { order: 5; padding: 0 20px; }
  .tx-pdp-spotlight__features { order: 6; padding: 0 20px 22px; }
}

/* ── FIX 3: Touch-Scroll auf horizontalen Konfigurator-Leisten.
   Die Hersteller-Tabs (und Achsen/Karussell) ließen sich am Touch in
   BEIDE Richtungen ziehen → Seiten-Scroll ruckelte. touch-action:pan-x
   = horizontal scrollt die Leiste, vertikal geht an die Seite. ── */
/* Track: KEIN touch-action:pan-x! Die Produktkarten füllen den Track —
   pan-x blockierte vertikales Seiten-Scrollen, sobald der Finger auf
   einer Karte/einem Bild startet (User-Bug 2026-07-08: „muss erst
   dahin tippen, wo kein Bild ist"). Browser-Default (auto) trennt
   horizontal-Track vs. vertikal-Seite nativ sauber. Nur das
   Scroll-Chaining horizontal eindämmen: */
.tx-cfg-carousel__track {
  overscroll-behavior-x: contain;
}
@media (max-width: 800px) {
  .tx-cfg-tabs__list {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    overflow-y: hidden;
  }
  .tx-cfg-tabs__axis {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
}

/* ── FIX 4: Usercentrics-Cookie-Button (fixed, unten links, Shadow-DOM →
   per CSS nicht erreichbar) überlappte den Preis der Sticky-Bottom-Bar.
   Layout bleibt — links Platz für den Button reservieren, damit Name/
   Preis daran vorbeirücken. ── */
@media (max-width: 640px) {
  .tx-cfg-sticky__inner { padding-left: 58px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE · iOS-Auto-Zoom auf Formularfeldern verhindern (2026-07-08)
   iOS Safari zoomt beim Fokussieren in jedes Input mit font-size <16px
   hinein (Viewport springt) — unsere Formfelder haben 14px. Auf Mobile
   alle Eingabefelder auf 16px anheben = kein Zoom-Sprung mehr.
   Spezifität: :is() mit IDs matcht die bestehenden ID-gescopten
   14px-!important-Regeln; gleiche Spezifität + später im File = gewinnt.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  :is(#new_customer, #login_form, #form-register, body) :is(
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="date"],
    input[type="search"], select, textarea,
    .form-control, .tx-contact-form__input
  ) {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   GANZE KARTE / GANZER BANNER KLICKBAR (2026-07-09)

   Muster: „Stretched Link". Ein unsichtbares ::after des BEREITS
   vorhandenen Haupt-Links spannt sich ueber die ganze Flaeche.
   Bewusst NICHT die Karte in ein <a> gewickelt: das erzeugt
   verschachtelte Links (invalides HTML), zerschiesst die Tastatur-
   Navigation und Screenreader lesen jedes Spec-Detail als Linktext.
   So bleibt genau EIN Link pro Karte im Fokus-/A11y-Baum.
   ════════════════════════════════════════════════════════════════ */

/* ── 1) Highlight-System-Karten (Startseite) ───────────────────── */
.tx-aktion-card { cursor: pointer; }
.tx-aktion-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Sichtbarer Button liegt UEBER dem Overlay, behaelt eigenen Hover */
.tx-aktion-card__btn { position: relative; z-index: 2; }
/* Hover irgendwo auf der Karte hebt auch den Button an — zeigt dem
   Nutzer, dass die ganze Karte das Ziel ist. */
.tx-aktion-card:hover .tx-aktion-card__btn { background: var(--tx-mint-2); }

/* ── 2) Hero-Banner im Slider ──────────────────────────────────── */
/* Positionierender Vorfahre ist .tx-hero__inner → Klickflaeche =
   gesamter Banner-Inhalt inkl. Produktbild. Overlay haengt am
   primaeren CTA („Jetzt konfigurieren"), also fuehrt der Banner-Klick
   genau dorthin. Fehlt der CTA, ist der Banner schlicht nicht klickbar. */
.tx-hero__inner { cursor: pointer; }
.tx-hero__cta .tx-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Diese Elemente muessen UEBER dem Overlay bleiben:
   - Ghost-CTA hat ein eigenes Ziel („Alle Systeme")
   - Spec-Reihe muss horizontal scrollbar bleiben (sonst schluckt das
     Overlay die Touch-Geste); sie ist kein Link → normaler Cursor. */
.tx-hero__cta .tx-btn--ghost { position: relative; z-index: 2; }
.tx-hero__stats { position: relative; z-index: 2; cursor: default; }
/* Slider-Pfeile + Dots liegen bereits auf z-index:5 → bleiben klickbar. */

/* Big-Slide-Variante (eigenes Markup, dynamische CTA-Klassen) */
.tx-hero-slide--big .tx-hero-slide__content { position: relative; cursor: pointer; }
.tx-hero-slide--big .tx-hero-slide__ctas > .tx-btn:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tx-hero-slide--big .tx-hero-slide__ctas > .tx-btn:nth-child(2) {
  position: relative;
  z-index: 2;
}

/* ─── Partner-Editionen-Banner: GANZE KARTE KLICKBAR (2026-07-09) ───
   Overlay-Link (.tx-pc-card__stretch, im Portlet-Template) deckt die
   komplette Karte ab. CTA-Button wird darüber gehoben, damit sein
   Hover/Styling erhalten bleibt (gleiches Ziel). */
.tx-pc-card__stretch {
  position: absolute;
  inset: 0;
  z-index: 4;
  cursor: pointer;
  /* kein sichtbarer Inhalt — reine Klickfläche */
  background: transparent;
  border: 0;
}
.tx-pc-card .tx-pc-card__cta {
  position: relative;
  z-index: 5;   /* über dem Overlay → eigener Hover bleibt */
}


/* ================================================================
   MOBILE-FIXES 2026-07-17 (User-Feedback iPhone)
   1) Konfigurator: Brand-Tabs + Achsen-Filter (Luft/Wasser, Gold/Bronze)
      horizontal wischbar statt gestapelt; Pfeile bleiben oben rechts.
   2) Partner-Cards (Plugin ToxicPartnerCard): Content auf Mobile immer
      unten links + kraeftiger Bottom-Verlauf — Desktop-Positionen
      (right/top) kollidieren auf 375px mit Bildmotiv/Badge.
   3) System-Selector (Dein System, A+C): Tab-Leiste horizontal
      scrollbar (Mifcom-Style) statt vertikal gestapelt.
   ================================================================ */
@media (max-width: 640px) {
  /* -- 1) Konfigurator-Filterzeilen -- */
  .tx-cfg-tabs { flex-wrap: wrap; row-gap: 6px; }
  .tx-cfg-tabs__list {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tx-cfg-tabs__list::-webkit-scrollbar { display: none; }
  .tx-cfg-tabs__item { flex: 0 0 auto; white-space: nowrap; }
  .tx-cfg-tabs__nav { order: 1; margin-left: auto; flex: 0 0 auto; }
  .tx-cfg-tabs__axis {
    flex-basis: 100%;
    order: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0 !important;
    padding: 2px 0 10px;
  }
  .tx-cfg-tabs__axis::-webkit-scrollbar { display: none; }
  .tx-cfg-axis-btn { flex: 0 0 auto; white-space: nowrap; }
  .tx-cfg-tabs__axis + .tx-cfg-tabs__nav { padding-left: 0; margin-left: auto; }
  .tx-cfg-tabs__axis + .tx-cfg-tabs__nav::before { display: none; }
}

@media (max-width: 720px) {
  /* -- 2) Partner-Cards: Redakteur-Positionen BLEIBEN (Text ist im OPC
     bewusst neben die Bildmotive gesetzt — User-Feedback 2026-07-17,
     Revert des bottom-left-Zwangs). Nur: 16:6-Strips zu flach fuer
     Text auf 375px + etwas Schatten-Reserve fuer helle Motive. */
  .tx-pc-card--strip { aspect-ratio: 16 / 9 !important; }
  .tx-pc-card__headline { text-shadow: 0 2px 14px rgba(0,0,0,.65); }
}

@media (max-width: 700px) {
  /* -- 3) System-Selector: Tabs als wischbare Leiste -- */
  .tx-syssel--c .tx-syssel__tabs,
  .tx-syssel--a .tx-syssel__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }
  .tx-syssel--c .tx-syssel__tabs::-webkit-scrollbar,
  .tx-syssel--a .tx-syssel__tabs::-webkit-scrollbar { display: none; }
  .tx-syssel--c .tx-syssel__tab,
  .tx-syssel--a .tx-syssel__tab {
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;
    padding: 13px 16px;
  }
  /* Systeme (Karten + Promo-Kachel) horizontal wischbar statt
     untereinander — Mifcom-Style (User-Feedback 2026-07-17).
     Ueberschreibt das aeltere ≤560px grid-template-columns:1fr
     per Source-Order. */
  .tx-syssel--c .tx-syssel__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .tx-syssel--c .tx-syssel__grid::-webkit-scrollbar { display: none; }
  .tx-syssel--c .tx-syssel-card,
  .tx-syssel--c .tx-syssel__promo { scroll-snap-align: start; }
}


/* ================================================================
   KUEHLUNG-SPLIT · Luft-/Wasser-Unter-Sektionen im Konfigurator
   (2026-07-17, Nykta-Style — Markup in config_group_row.tpl)
   ================================================================ */
.tx-cfg-subrow { margin-bottom: 24px; }
.tx-cfg-subrow:last-of-type { margin-bottom: 0; }
.tx-cfg-subrow.is-empty { display: none; }
.tx-cfg-subrow__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 12px;
}
.tx-cfg-subrow__head h5 {
  margin: 0;
  font-family: var(--tx-sub);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-text);
  white-space: nowrap;
}
.tx-cfg-subrow__head h5 em {
  font-style: normal;
  color: var(--tx-mint);
  margin-left: 4px;
}
.tx-cfg-subrow__line { flex: 1; height: 1px; background: var(--tx-line); }
.tx-cfg-subrow__head .tx-cfg-tabs__nav { display: flex; gap: 8px; }
.tx-cfg-subrow__head .tx-cfg-carousel__btn { width: 34px; height: 34px; }
@media (max-width: 640px) {
  /* Pfeile in den Unter-Sektionen weglassen — Tracks sind wischbar */
  .tx-cfg-subrow__head .tx-cfg-tabs__nav { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR · LISTEN-MODUS (Prozessor + Grafikkarte)
   ---------------------------------------------------------------
   Diese beiden Gruppen rendern als volle Auswahlzeilen statt als
   Bild-Karussell — unsere CPUs/GPUs sind generische Artikel, das
   Produktbild trägt keine Information, verglichen werden Modell,
   Eckdaten und Aufpreis. Untereinander statt nebeneinander.

   Markup bleibt IDENTISCH zum Karten-Modus (.tx-cfg-card, __input,
   __title, __price, [data-carousel-track]) — custom.js hängt daran:
   Brand-Filter, Preis-/Namens-Sync in die Kopfzeile, Aufpreis-
   Sortierung und Compat-Badges laufen unverändert weiter. Hier wird
   nur das Layout umgeschaltet, siehe productdetails/config_group_row.tpl
   ($txListMode). Deshalb setzen die Regeln unten konsequent die
   Karussell-Eigenschaften zurück statt eigene Klassen zu erfinden.
   ═══════════════════════════════════════════════════════════════ */

/* Track: aus horizontalem Snap-Grid wird eine vertikale Liste.
   Alles hängt an EINER Klasse — `tx-cfg-row--list` auf der Row —, weil
   genau die von js/cfg-view.js gekippt wird. Früher hing der Track an
   einer statischen `tx-cfg-carousel--list`, die beim Umschalten stehen
   blieb: die Ansichten waren dann nur noch über Quellreihenfolge
   auseinanderzuhalten. */
.tx-cfg-row--list .tx-cfg-carousel { overflow: visible; }
.tx-cfg-row--list .tx-cfg-carousel__track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  overflow-x: visible;
  overflow-y: visible;
  scroll-snap-type: none;
  /* Hover-Lift-Buffer des Karussells wird nicht gebraucht */
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
}

/* Zeile statt Karte */
.tx-cfg-row--list .tx-cfg-card {
  width: auto;
  flex-direction: row;
  scroll-snap-align: none;
  /* Kein translateY-Lift in einer Liste — das wirkt wie ein Wackeln.
     Zustandswechsel läuft über Rahmen + Fläche. */
  transition: border-color .15s, background-color .15s;
}
.tx-cfg-row--list .tx-cfg-card:hover {
  transform: none;
  border-color: var(--tx-text-dim);
  background: var(--tx-bg-3);
}
.tx-cfg-row--list .tx-cfg-card.is-disabled:hover { background: var(--tx-card); }

/* Auswahl = durchgehender Mint-Rahmen (wie im Referenz-Pattern).
   Der ✓-Eckbadge des Karten-Modus entfällt: in einer Zeile säße er
   direkt auf dem Preis, und der Rahmen trägt den Zustand allein. */
.tx-cfg-row--list .tx-cfg-card.is-selected::after,
.tx-cfg-row--list .tx-cfg-card:has(.tx-cfg-card__input:checked)::after {
  content: none;
}
.tx-cfg-row--list .tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__title {
  color: var(--tx-mint);
}
.tx-cfg-row--list .tx-cfg-card.is-selected .tx-cfg-card__info,
.tx-cfg-row--list .tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__info {
  /* Karten-Modus schiebt den i-Button am ✓-Badge vorbei — hier gibt es
     keinen Badge, also zurück auf die normale Position. */
  right: auto;
}

/* Body: Zeilen-Grid.
   Spalten: [Compat-Badge] [Titel/Specs] [Preis] [Info]
   column-gap bewusst 0 — der Compat-Badge bringt seinen eigenen
   margin-right mit und ist per :empty ausgeblendet, sonst bliebe eine
   leere Einrückung stehen. Abstände kommen deshalb aus den Zellen. */
.tx-cfg-row--list .tx-cfg-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "compat title fps price info"
    "compat spec  fps price info";
  align-items: center;
  column-gap: 0;
  row-gap: 2px;
  padding: 14px 18px;
  width: 100%;
}
.tx-cfg-row--list .tx-cfg-card__compat { grid-area: compat; }
.tx-cfg-row--list .tx-cfg-card__title  { grid-area: title; }
.tx-cfg-row--list .tx-cfg-card__spec   { grid-area: spec; }
.tx-cfg-row--list .tx-cfg-card__price  { grid-area: price; padding-left: 20px; text-align: right; }
.tx-cfg-row--list .tx-cfg-card__info   { grid-area: info; position: static; margin-left: 14px; flex: none; }

/* Titel: einzeilig, größer — er ist der Anker der Zeile. Der Karten-Modus
   klemmt auf 2 Zeilen mit min-height, das muss hier komplett weg. */
.tx-cfg-row--list .tx-cfg-card__title {
  font-size: 16px;
  line-height: 1.3;
  min-height: 0;
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  overflow: visible;
  transition: color .15s;
}

/* Spec-Zeile: Eckdaten aus den Wawi-Merkmalen (Sockel, L3, TDP,
   Speichertyp) bzw. dem Namensrest (Takt, Kerne, Threads). */
.tx-cfg-row--list .tx-cfg-card__spec {
  font-family: var(--tx-sub);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx-text-dim);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.tx-cfg-row--list .tx-cfg-card__price {
  font-size: 15px;
  white-space: nowrap;
}
/* „inkl." ist keine Information, die um Aufmerksamkeit kämpfen muss —
   ein echter Aufpreis dagegen schon. */
.tx-cfg-row--list .tx-cfg-card__price--inkl { color: var(--tx-text-mute); }

/* Marken-Zeile entfällt: bei CPU/GPU steht die Marke schon im Modellnamen
   („AMD Ryzen 7 9800X3D", „Nvidia GeForce RTX 5080"). */
.tx-cfg-row--list .tx-cfg-card__sub { display: none; }

@media (max-width: 640px) {
  .tx-cfg-row--list .tx-cfg-card__body {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "compat title info"
      "compat spec  info"
      "compat fps   info"
      "compat price info";
    row-gap: 4px;
    padding: 12px 14px;
  }
  .tx-cfg-row--list .tx-cfg-card__price {
    padding-left: 0;
    text-align: left;
  }
  .tx-cfg-row--list .tx-cfg-card__title { font-size: 15px; }
}

/* ── Listen-Modus: Auswahlkreis + Thumbnail (Nachtrag 2026-07-29) ──
   Zeilenanatomie:  [Kreis] [Thumb] [Titel/Specs ......] [Preis] [i]
   Der Kreis steht IMMER — er wechselt nur die Füllung. Vorher trug allein
   der Rahmen den Zustand, wodurch beim Umschalten die Zeile optisch
   „sprang". Gleiches Prinzip beim Thumb- und Compat-Slot: Platz wird
   reserviert, nicht ein-/ausgeblendet. */
.tx-cfg-row--list .tx-cfg-card { align-items: center; }

.tx-cfg-card__pick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: 18px;
  border: 1.5px solid var(--tx-line-2);
  border-radius: 50%;
  position: relative;
  transition: border-color .15s, background-color .15s;
}
.tx-cfg-card__pick::after {
  /* Haken — liegt immer im DOM, wird nur eingeblendet. Kein Reflow. */
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #062019;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .12s;
}
.tx-cfg-card:hover .tx-cfg-card__pick { border-color: var(--tx-text-dim); }
.tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__pick {
  border-color: var(--tx-mint);
  background: var(--tx-mint);
}
.tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__pick::after { opacity: 1; }
.tx-cfg-card.is-disabled .tx-cfg-card__pick { border-style: dashed; }

/* In der Liste wird DIESELBE Media-Box zur 72px-Thumbnail-Box. Kein
   zweites Bild-Element — sonst lädt der Browser jedes Produktbild doppelt
   und die beiden Ansichten könnten auseinanderlaufen. */
.tx-cfg-row--list .tx-cfg-card__media {
  flex: none;
  width: 72px;
  height: 72px;
  margin-left: 14px;
  aspect-ratio: auto;
  padding: 4px;
  border-bottom: none;
  /* flach, kein Verlauf — passt zur restlichen Flächensprache */
  background: var(--tx-bg-3);
}
/* image.tpl liefert ein <picture> — das muss selbst auf die Box begrenzt
   werden, sonst schiebt es die Zeile auf. */
.tx-cfg-row--list .tx-cfg-card__media picture,
.tx-cfg-row--list .tx-cfg-card__media .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
.tx-cfg-row--list .tx-cfg-card__media img {
  filter: none;              /* Karten-Drop-Shadow wäre auf 72px nur Matsch */
}
.tx-cfg-row--list .tx-cfg-card:hover .tx-cfg-card__media img { transform: none; }
.tx-cfg-row--list .tx-cfg-card__media--none { color: var(--tx-text-mute); }
.tx-cfg-row--list .tx-cfg-card__media--none svg { width: 22px; height: 22px; }

/* Body sitzt jetzt hinter Kreis + Thumb, deshalb weniger Innenabstand links */
.tx-cfg-row--list .tx-cfg-card__body { padding-left: 14px; }

/* Compat-Badge: Platz dauerhaft reservieren. Global gilt
   `.tx-cfg-card__compat:empty { display: none }` — dadurch wäre der Titel
   nach rechts gerutscht, sobald compatibility.js ein Badge nachträgt. */
.tx-cfg-row--list .tx-cfg-card__compat:empty {
  display: inline-flex;
  visibility: hidden;
}

@media (max-width: 640px) {
  .tx-cfg-card__pick  { margin-left: 12px; width: 18px; height: 18px; }
  .tx-cfg-card__pick::after { left: 5px; top: 1.5px; width: 4.5px; height: 8px; }
  .tx-cfg-row--list .tx-cfg-card__media { width: 56px; height: 56px; margin-left: 10px; }
  .tx-cfg-row--list .tx-cfg-card__body { padding-left: 10px; }
}

/* Inline-Flags im Listen-Modus („EMPFOHLEN", Feature-Badges). Im Karten-
   Modus liegen die in der Media-Box — die entfällt hier, sonst wären sie
   ersatzlos weg. Als ruhige Tags neben dem Titel, nicht als Störer. */
.tx-cfg-card__flag--inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: static;
  margin-left: 8px;
  padding: 2px 7px;
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
em.tx-cfg-card__flag--inline { font-style: normal; }

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR · ANSICHT UMSCHALTEN (Liste ⇄ Kacheln)
   ---------------------------------------------------------------
   Gilt für die umschaltbaren Gruppen (Prozessor/Grafikkarte). Beide
   Ansichten teilen sich EIN Markup — umgeschaltet wird nur die Klasse
   `tx-cfg-row--list` auf der Row (js/cfg-view.js). Dadurch bleibt die
   Auswahl beim Wechsel erhalten, es werden keine Inputs neu erzeugt.

   Kachel-Ansicht = umbrechendes Raster, kein horizontaler Scroller:
   bei 6–12 Optionen will man vergleichen, nicht wischen. Deshalb gibt
   es in diesen Gruppen auch keine Pfeil-Buttons.
   ═══════════════════════════════════════════════════════════════ */
.tx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tx-cfg-tabs__view {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  flex: none;
}
.tx-cfg-view-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.tx-cfg-view-btn:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-cfg-view-btn.is-active {
  border-color: var(--tx-mint);
  color: #062019;
  background: var(--tx-mint);
}
.tx-cfg-view-btn:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 2px; }

/* ── Kachel-Ansicht der umschaltbaren Gruppen ──
   Die Row hat KEIN --list, greift also auf die Karten-Grundregeln zurück.
   Hier nur das, was vom Karussell abweicht: umbrechendes Raster statt
   Scroller, plus die Elemente, die es im Karten-Modus sonst nicht gibt
   (Auswahlkreis, Spec-Zeile). */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel { overflow: visible; }
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: initial;
  gap: 12px;
  overflow: visible;
  scroll-snap-type: none;
  padding-top: 6px;
  margin-top: -6px;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card { width: auto; scroll-snap-align: none; }

/* Auswahlkreis in der Kachel: obere rechte Ecke, wie im Referenzbild.
   Der ✓-Eckbadge der Standard-Karte entfällt dort, sonst lägen zwei
   Auswahl-Indikatoren übereinander. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__pick {
  position: absolute;
  top: 10px;
  right: 10px;
  margin-left: 0;
  z-index: 3;
  background: rgba(5,7,7,0.72);
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__pick {
  background: var(--tx-mint);
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card.is-selected::after,
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card:has(.tx-cfg-card__input:checked)::after { content: none; }
/* i-Button sitzt in diesen Gruppen im Body, nicht im Bild — die
   Ausweich-Position für den ✓-Badge entfällt damit. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__info { right: auto; }

/* Spec-Zeile auch in der Kachel zeigen — sie ersetzt den langen Rohnamen. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__spec {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-text-dim);
  line-height: 1.35;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__title {
  min-height: 0;
  -webkit-line-clamp: 2;
}
/* In der Kachel liegt der Info-Button im Body-Flow ganz unten rechts */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body {
  position: relative;
  padding-right: 40px;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__info {
  position: absolute;
  right: 12px;
  bottom: 12px;
  top: auto;
}

@media (max-width: 640px) {
  .tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
}

/* FPS-Richtwert pro Grafikkarten-Zeile (js/cfg-view.js). Bewusst
   zurückhaltend: eine Kennzahl, keine zweite Preis-Optik. */
.tx-cfg-card__fps {
  display: inline-flex;
  align-items: center;
  align-self: start;
  margin-top: 2px;
  padding: 2px 8px;
  font-family: var(--tx-sub);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tx-mint);
  background: rgba(1,222,194,0.10);
  white-space: nowrap;
}
/* Eigene Grid-Spalte — NICHT `grid-area: spec`, sonst läge der Chip auf
   der Spec-Zeile. Fehlt der Chip (CPU-Gruppe), kollabiert die Spalte auf 0;
   der Abstand steckt deshalb im margin des Chips, nicht im column-gap. */
.tx-cfg-row--list .tx-cfg-card__fps {
  grid-area: fps;
  align-self: center;
  margin: 0 0 0 16px;
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR V2 — dreispaltig (Variante B)
   ---------------------------------------------------------------
   [ Produkt sticky 32% ] [ Konfigurator 43% ] [ Zusammenfassung 25% ]

   Vier Fragen müssen jederzeit beantwortet sein: wo bin ich, was habe
   ich gewählt, was kostet es, was kommt als Nächstes. Links hält das
   Produkt die Emotion, rechts hält die Zusammenfassung die Orientierung,
   in der Mitte ist immer nur EINE Kategorie offen.

   Breite bleibt bewusst in der kanonischen Content-Box (1440/32px) statt
   randlos: bei 2560px würden drei Spalten sonst absurd breit und die
   Zeilenlängen unlesbar. Der Konfigurator nutzt die Box voll aus,
   sprengt sie aber nicht.

   Mobil ist das KEIN skalierter Desktop — eine Spalte, Bild oben, und
   Preis/CTA bleiben der bestehenden Sticky-Bar überlassen.
   ═══════════════════════════════════════════════════════════════ */

.tx-cfg-v2 {
  display: grid;
  grid-template-columns: 32fr 43fr 25fr;
  gap: 32px;
  align-items: start;
  /* Kanonische Content-Box. .tx-cfg-comps hat bewusst KEIN horizontales
     Padding (nur 64px 0) — die Box kam frueher aus .tx-cfg-comps__head und
     .tx-cfg-comps__list. Ohne diese Zeilen laeuft das Grid randlos ueber
     die volle Fensterbreite und das Produktbild wird auf 27" absurd gross. */
  max-width: var(--tx-box);
  margin: 0 auto;
  padding: 0 32px;
}
/* Grid-Items haben default min-width:auto — Inhalt mit white-space:nowrap
   (die Sidebar-Werte) sprengt sonst die Spalte und schiebt das ganze Grid
   aus dem Viewport. Deshalb ueberall explizit min-width:0. */
.tx-cfg-v2__visual,
.tx-cfg-v2__side { min-width: 0; }
/* Der Kopf sitzt jetzt INNERHALB der Box — seine eigene Box muss weg,
   sonst doppeltes Padding und ein zweites max-width. */
.tx-cfg-v2__main .tx-cfg-comps__head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Band unter dem Konfigurator in dieselbe Box holen */
.tx-cfg-deliver-band {
  max-width: var(--tx-box);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Links · Produkt ── */
.tx-cfg-v2__visual-inner {
  position: sticky;
  /* Muss unter dem Sticky-Header liegen, sonst verschwindet die
     Oberkante des Bildes darunter. */
  top: 96px;
}
.tx-cfg-v2__stage {
  background: var(--tx-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.tx-cfg-v2__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity .2s ease;
}
.tx-cfg-v2__visual-meta { padding: 14px 2px 0; }
.tx-cfg-v2__visual-name {
  font-size: 19px;
  line-height: 1.25;
  margin: 4px 0 0;
  color: var(--tx-text);
}

/* ── Mitte ── */
.tx-cfg-v2__main { min-width: 0; }
.tx-cfg-v2__main .tx-cfg-comps__head { display: block; margin-bottom: 22px; }
.tx-cfg-v2__main .tx-cfg-comps__head h2 { margin: 6px 0 8px; }
.tx-cfg-v2__main .tx-cfg-disclaimer { margin-top: 22px; }

/* Schrittnummer in der Kategorie-Kopfzeile — beantwortet "wo bin ich?" */
.tx-cfg-row__step {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tx-line-2);
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-text-dim);
  margin-right: 12px;
}
.tx-cfg-row.is-open .tx-cfg-row__step {
  border-color: var(--tx-mint);
  color: #062019;
  background: var(--tx-mint);
}

/* ── Rechts · Zusammenfassung ── */
.tx-cfg-v2__side-inner {
  position: sticky;
  top: 96px;
  border: 1px solid var(--tx-line);
  background: var(--tx-card);
  padding: 20px 18px;
}
.tx-cfg-v2__side-head {
  font-family: var(--tx-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cfg-v2__side-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--tx-mint);
  margin: 4px 0 16px;
  line-height: 1.25;
}
.tx-cfg-v2__specs { list-style: none; margin: 0 0 18px; padding: 0; }
.tx-cfg-v2__spec {
  /* Grid mit festen Anteilen statt flex+space-between: mit flex hat die
     lange Beschriftung ("PROZESSOR KUEHLER") den Wert ueberlappt, weil
     beide nowrap sind und keiner nachgeben wollte. Jetzt bekommt jeder
     seinen Anteil und kuerzt selbst mit Ellipsis. */
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--tx-line);
}
.tx-cfg-v2__spec:last-child { border-bottom: none; }
.tx-cfg-v2__spec-k {
  font-family: var(--tx-sub);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  font-size: 11px;
  line-height: 1.3;
  /* darf umbrechen — lieber zwei kurze Zeilen als eine Kollision */
  overflow-wrap: anywhere;
}
.tx-cfg-v2__spec-v {
  color: var(--tx-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* ohne min-width:0 greift text-overflow im Flex-Kind nicht und der
     lange Komponentenname macht die ganze Spalte breiter */
  min-width: 0;
}

.tx-cfg-v2__spec.is-empty .tx-cfg-v2__spec-v { color: var(--tx-text-mute); }

/* Kurzes Aufblitzen an der Stelle, die sich gerade geändert hat */
@keyframes txSpecChanged {
  0%   { background: rgba(1,222,194,.16); }
  100% { background: transparent; }
}
.tx-cfg-v2__spec.is-changed { animation: txSpecChanged .7s ease-out; }

/* ── Leistung / Aufwertungs-Rückmeldung ──
   Der Wert ist echt (kalibriertes FPS-Modell), deshalb darf er auffallen.
   Kein Konfetti: eine Zahl, die hochzählt, und ein Delta. */
.tx-cfg-v2__perf {
  border: 1px solid var(--tx-line);
  padding: 12px 14px;
  margin-bottom: 16px;
  transition: border-color .2s ease;
}
.tx-cfg-v2__perf.is-up { border-color: var(--tx-mint); }
.tx-cfg-v2__perf-head {
  font-family: var(--tx-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cfg-v2__perf-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.tx-cfg-v2__perf-value [data-cfg-perf-fps] {
  font-size: 28px;
  font-weight: 700;
  color: var(--tx-mint);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tx-cfg-v2__perf-unit {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-text-dim);
}
.tx-cfg-v2__perf-delta {
  margin-left: auto;
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.tx-cfg-v2__perf-delta.is-in { opacity: 1; transform: translateY(0); }
.tx-cfg-v2__perf-delta.is-up   { color: #062019; background: var(--tx-mint); }
.tx-cfg-v2__perf-delta.is-down { color: var(--tx-text-dim); background: var(--tx-bg-3); }
.tx-cfg-v2__perf-note {
  font-size: 11.5px;
  color: var(--tx-text-mute);
  margin-top: 3px;
}

.tx-cfg-v2__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tx-line);
}
.tx-cfg-v2__price-label {
  font-family: var(--tx-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cfg-v2__price { font-size: 24px; font-weight: 700; color: var(--tx-text); white-space: nowrap; }
.tx-cfg-v2__price-note { font-size: 11.5px; color: var(--tx-text-mute); margin: 2px 0 14px; }
.tx-cfg-v2__cta { width: 100%; justify-content: center; }
.tx-cfg-v2__trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--tx-line);
  font-size: 12px;
  color: var(--tx-text-dim);
}
.tx-cfg-v2__trust li { position: relative; padding-left: 18px; margin-bottom: 6px; line-height: 1.4; }
.tx-cfg-v2__trust li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--tx-mint);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Expertenoptionen ── */
.tx-cfg-expert { margin-top: 20px; }
.tx-cfg-expert__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--tx-line);
  color: var(--tx-text-dim);
  padding: 13px 16px;
  cursor: pointer;
  font-family: var(--tx-sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: border-color .15s, color .15s;
}
.tx-cfg-expert__toggle:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-cfg-expert__toggle-hint { margin-left: auto; font-size: 12px; color: var(--tx-text-mute); }
.tx-cfg-expert__chev { transition: transform .2s ease; }
.tx-cfg-expert.is-open .tx-cfg-expert__chev { transform: rotate(180deg); }
.tx-cfg-expert__body { display: none; margin-top: 12px; }
.tx-cfg-expert.is-open .tx-cfg-expert__body { display: block; }

/* ── Lieferumfang als Band unter dem Konfigurator ── */
.tx-cfg-deliver-band { margin-top: 48px; border-top: 1px solid var(--tx-line); padding-top: 26px; }
.tx-cfg-deliver-band h4 {
  font-family: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  margin: 0 0 18px;
}
.tx-cfg-deliver-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

/* ═══════════════ Sticky-Bar im V2-Layout ═══════════════
   Auf DESKTOP übernimmt die rechte Sidebar Preis, Auswahl und CTA — die
   Bar unten wäre eine zweite Wahrheit und verdeckt zusätzlich Inhalt.
   ABER: der Kompatibilitäts-Warnstreifen ist ein KIND dieser Bar. Deshalb
   wird nicht die Bar ausgeblendet, sondern nur ihr Inhalt (__inner) —
   der Warnstreifen bleibt sichtbar und klickbar.
   Auf MOBILE bleibt alles wie bisher: dort gibt es keine Sidebar. */
@media (min-width: 1100px) {
  .tx-cfg-sticky--config .tx-cfg-sticky__inner { display: none; }
  .tx-cfg-sticky--config {
    background: transparent;
    border-top: none;
    box-shadow: none;
    pointer-events: none;
  }
  .tx-cfg-sticky--config .tx-compat-banner { pointer-events: auto; }
}

/* ═══════════════ Responsive ═══════════════ */

/* Ab hier wird die Sidebar zu schmal für Label + Wert nebeneinander →
   zweispaltig, Zusammenfassung wandert unter den Konfigurator. */
@media (max-width: 1279px) {
  .tx-cfg-v2 {
    grid-template-columns: 34fr 66fr;
    gap: 24px;
  }
  .tx-cfg-v2__side { grid-column: 1 / -1; }
  .tx-cfg-v2__side-inner { position: static; }
  .tx-cfg-v2__specs { columns: 2; column-gap: 28px; }
  .tx-cfg-v2__spec { break-inside: avoid; }
}

/* Mobil: eigenes Layout, kein herunterskalierter Desktop.
   Bild oben (kompakt, damit der erste Schritt ohne Scrollen sichtbar
   ist), darunter die Kategorien; Preis und CTA über die bestehende
   Sticky-Bar am unteren Rand. */
@media (max-width: 899px) {
  .tx-cfg-v2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .tx-cfg-v2__visual-inner { position: static; }
  .tx-cfg-v2__stage {
    aspect-ratio: 16 / 10;
    padding: 12px;
  }
  .tx-cfg-v2__visual-meta { padding-top: 10px; }
  .tx-cfg-v2__visual-name { font-size: 17px; }
  .tx-cfg-v2__specs { columns: 1; }
  .tx-cfg-v2__side-inner { padding: 16px 14px; }
  /* Preis und CTA entfallen hier — die Sticky-Bar unten hat beides.
     Zwei CTAs untereinander sind eine Sackgasse. */
  .tx-cfg-v2__price-row,
  .tx-cfg-v2__price-note,
  .tx-cfg-v2__cta { display: none; }
  .tx-cfg-row__step { width: 22px; height: 22px; font-size: 11px; margin-right: 9px; }
  .tx-cfg-deliver-band { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-cfg-v2__spec.is-changed { animation: none; }
  .tx-cfg-v2__perf-delta { transition: none; }
  .tx-cfg-v2__stage img { transition: none; }
}

/* ── Nachbesserungen nach visueller Abnahme (2026-07-29) ──
   Gepruef  t per Playwright-Screenshot, nicht nur im HTML. */

/* Der Wert in der Kategorie-Kopfzeile brach auf zwei Zeilen um und machte
   den Kopf 107px hoch. Eine Zeile, Rest kuerzen — der volle Name steht in
   der Zeile darunter und in der Zusammenfassung. */
.tx-cfg-row__head { gap: 14px; }
.tx-cfg-row__head > div { min-width: 0; }
.tx-cfg-row__val {
  /* Zwei Zeilen statt einzeilig kuerzen: "Aerocool AERO 650, PC-N..." ist
     als Antwort auf "was habe ich gewaehlt?" wertlos. Der Kopf wird dadurch
     etwas hoeher, bleibt aber intakt — kaputt war er vorher nur, weil der
     Chevron mangels Grid-Spalte in eine zweite Zeile gefallen ist. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* Out-of-Stock-Text ("Artikel zurzeit vergriffen") stand in der auto-breiten
   Preisspalte und hat die Titelspalte (minmax(0,1fr)) auf null gequetscht —
   der Produktname zerfiel dadurch in ein Wort pro Zeile. Preisspalte wird
   deshalb gedeckelt und darf selbst umbrechen. */
.tx-cfg-row--list .tx-cfg-card__price {
  max-width: 150px;
  white-space: normal;
  line-height: 1.3;
}
/* Produktnamen duerfen NICHT hart kuerzen — "AMD Ryzen 5 560..." ist
   wertlos. Zwei Zeilen sind erlaubt, danach Ellipsis. Nur der Wert in der
   Kategorie-Kopfzeile kuerzt einzeilig, dort steht der Name ohnehin
   nochmal in der Liste darunter. */
.tx-cfg-row--list .tx-cfg-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.25;
}
.tx-cfg-row--list .tx-cfg-card__spec {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar-Werte: lieber zwei Zeilen als ein abgeschnittener Name. */
.tx-cfg-v2__spec { grid-template-columns: minmax(0, 38%) minmax(0, 62%); }
.tx-cfg-v2__spec-v {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Linke Spalte: unter dem Bild stand nur der Name, darunter ~900px Leere.
   Die belegten Zusagen fuellen den Raum und stuetzen die Kaufentscheidung
   genau dort, wo der Blick beim Konfigurieren ohnehin haengt. */
.tx-cfg-v2__usp {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--tx-line);
  display: grid;
  gap: 10px;
}
.tx-cfg-v2__usp li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--tx-text-dim);
  line-height: 1.35;
}
.tx-cfg-v2__usp li::before {
  content: "";
  position: absolute;
  left: 3px; top: 5px;
  width: 5px; height: 9px;
  border: solid var(--tx-mint);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (max-width: 899px) {
  /* Mobil doppelt sich das mit der Trust-Liste in der Zusammenfassung */
  .tx-cfg-v2__usp { display: none; }
}

/* ── Mobile-Feinschliff nach Screenshot-Abnahme (2026-07-29) ──
   Bei 390px Viewport blieben der Titelspalte nur ~164px, weil Kreis,
   Thumbnail, Info-Button und Preis je eine eigene Grid-Spalte belegten.
   Ergebnis: "AMD Ryzen ...", "Jonsbo CR-140...". Platz schaffen statt
   Schrift verkleinern. */
@media (max-width: 640px) {
  /* 1) Der Preis in der Kategorie-Kopfzeile ist redundant — Gesamtpreis
        steht in der Sticky-Bar, der Aufpreis an der Karte selbst. */
  .tx-cfg-row__price { display: none; }
  .tx-cfg-row:has(.tx-cfg-row__step) > .tx-cfg-row__head { grid-template-columns: auto 40px 1fr; }
  .tx-cfg-row__head { grid-template-columns: 40px 1fr; }

  /* 2) Info-Button raus aus dem Grid und in die Ecke — spart eine ganze
        Spalte plus Abstand. */
  .tx-cfg-row--list .tx-cfg-card { position: relative; }
  .tx-cfg-row--list .tx-cfg-card__info {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-left: 0;
  }
  .tx-cfg-row--list .tx-cfg-card__body {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "compat title"
      "compat spec"
      "compat fps"
      "compat price";
    padding: 12px 34px 12px 12px;   /* rechts Platz fuer den Info-Button */
  }
  .tx-cfg-row--list .tx-cfg-card__media { width: 52px; height: 52px; margin-left: 10px; }
  .tx-cfg-row--list .tx-cfg-card__price { max-width: none; padding-left: 0; }
  .tx-cfg-row--list .tx-cfg-card__fps { margin-left: 0; }

  /* 3) Titel darf drei Zeilen — auf Mobil ist Hoehe billiger als
        ein unlesbarer Name. */
  .tx-cfg-row--list .tx-cfg-card__title { -webkit-line-clamp: 3; }
  .tx-cfg-row--list .tx-cfg-card__spec { white-space: normal; }
  .tx-cfg-row__val { -webkit-line-clamp: 3; }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR V2 · Korrekturen nach visueller Abnahme (2026-07-29)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · STICKY REPARIERT ──
   `align-items: start` liess die Grid-Items auf Inhaltshoehe schrumpfen —
   damit hatte `position: sticky` im Inneren KEINEN Weg zum Kleben und das
   Bild scrollte einfach weg. Items strecken jetzt ueber die volle Zeilen-
   hoehe, das sticky Kind wandert darin mit. */
.tx-cfg-v2 { align-items: stretch; }
.tx-cfg-v2__visual,
.tx-cfg-v2__side { align-self: stretch; }
/* Sticky bricht ausserdem, sobald ein Vorfahre overflow != visible hat. */
.tx-cfg-comps,
.tx-cfg-pcwrap,
.tx-cfg-v2 { overflow: visible; }

/* ── 2 · MEHR BREITE ──
   Die Mittelspalte hatte bei 1440er Box nur ~564px; Karten, Marken-Tabs und
   Produktnamen haben sich darin gegenseitig erdrueckt. Der Konfigurator
   bekommt eine eigene, breitere Box — die restliche Seite bleibt bei 1440. */
.tx-cfg-v2,
.tx-cfg-deliver-band { max-width: 1720px; }
.tx-cfg-v2 { grid-template-columns: 30fr 45fr 25fr; gap: 36px; }

/* ── 3 · MARKEN-TABS ──
   Bei acht Herstellern brachen die Tabs auf drei Zeilen um und schoben die
   Karten nach unten. Jetzt eine Zeile, horizontal wischbar. */
.tx-cfg-v2 .tx-cfg-tabs__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
}
.tx-cfg-v2 .tx-cfg-tabs__list::-webkit-scrollbar { display: none; }
.tx-cfg-v2 .tx-cfg-tabs__item { white-space: nowrap; flex: none; }
.tx-cfg-v2 .tx-cfg-tabs { align-items: center; gap: 14px; }

/* ── 4 · KACHEL-ANSICHT ──
   Gilt jetzt fuer alle umschaltbaren Gruppen. Groessere Mindestbreite,
   damit Gehaeuse-Bilder wirken; Bildflaeche etwas flacher als quadratisch,
   sonst wird die Kachel turmhoch. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__media {
  aspect-ratio: 4 / 3;
  padding: 10px;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body {
  padding: 12px 14px 14px;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__title {
  font-size: 14px;
  min-height: 0;
}
/* Der Auswahlkreis sitzt in der Kachel oben rechts — der Info-Button darf
   ihm nicht ins Gehege kommen. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__info {
  right: auto;
  left: 10px;
  top: 10px;
  bottom: auto;
  position: absolute;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body { padding-right: 14px; }

/* ── 5 · LINKE SPALTE · Bewertung + Zahlarten ── */
.tx-cfg-v2__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--tx-text-dim);
}
.tx-cfg-v2__stars { letter-spacing: 1px; color: var(--tx-line-2); }
.tx-cfg-v2__stars .is-on { color: var(--tx-mint); }
.tx-cfg-v2__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tx-line);
}
.tx-cfg-v2__pay img {
  height: 20px;
  width: auto;
  opacity: .6;
  transition: opacity .15s;
}
.tx-cfg-v2__pay img:hover { opacity: 1; }

/* ── 6 · Bild etwas ruhiger ──
   Quadratische Buehne war bei 500px Spaltenbreite sehr dominant. */
.tx-cfg-v2__stage { aspect-ratio: 4 / 5; }

@media (max-width: 1279px) {
  .tx-cfg-v2 { grid-template-columns: 34fr 66fr; }
}
@media (max-width: 899px) {
  .tx-cfg-v2 { grid-template-columns: 1fr; }
  .tx-cfg-v2__stage { aspect-ratio: 16 / 10; }
  .tx-cfg-v2__pay img { height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR V2 · Kachelraster + Mengenbegrenzung (2026-07-29)
   ---------------------------------------------------------------
   Messung vor dem Fix: Gehaeuse-Gruppe = 19 Kacheln in ZWEI Spalten,
   Track 3489px hoch. Durch diese Wand arbeitet sich niemand.
   ═══════════════════════════════════════════════════════════════ */

/* Drei Spalten statt zwei: minmax war mit 210px zu gross fuer die
   effektive Trackbreite (~600px nach Innenabstand der Zeile). */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}

/* Mengenbegrenzung liegt AUSSCHLIESSLICH bei cfg-v2.js (`.is-capped`).
   Hier stand vorher zusaetzlich eine :nth-child-Regel mit fester Grenze
   (6 Kacheln / 8 Zeilen). Die kannte weder die tatsaechliche Spaltenzahl
   — bei 4 Spalten blieb die zweite Reihe halb leer — noch die Ausnahme
   „Empfohlene werden nie gekappt": sie versteckte stur nach DOM-Position
   und hat die JS-Ausnahme wieder aufgehoben. Zwei Mechanismen fuer
   dieselbe Sache; der statische ist raus. Das Ausblenden selbst steht
   weiter unten: `.tx-cfg-card.is-capped { display: none !important }`. */

.tx-cfg-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tx-cfg-more:hover { border-color: var(--tx-mint); color: var(--tx-mint); }
.tx-cfg-more:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 2px; }

/* Kacheln etwas kompakter — bei drei Spalten ist die Bildflaeche klein
   genug, dass ein quadratisches Format wieder passt. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__media { aspect-ratio: 1 / 1; padding: 8px; }
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body { padding: 10px 12px 12px; }
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__title { font-size: 13px; -webkit-line-clamp: 2; }
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__spec { font-size: 11.5px; }
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__price { font-size: 13px; }

@media (max-width: 899px) {
  .tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ── Korrekturen Kachelansicht (2026-07-29, nach Screenshot) ── */

/* Der Info-Button lag auf dem Produktnamen: .tx-cfg-card__body hatte
   position:relative, dadurch verankerte sich der absolut positionierte
   Button am Body statt an der Karte und landete oben links im Text.
   Body wieder static -> Anker ist die Karte (die ist position:relative). */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body {
  position: static;
  padding-right: 12px;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__info {
  position: absolute;
  left: 10px;
  top: 10px;
  right: auto;
  bottom: auto;
  z-index: 4;
}

/* Mobil erzwang `.tx-cfg-card { min-width: 220px }` (Karussell-Regel) eine
   einzige Spalte. Im umbrechenden Raster gilt die Spaltenbreite. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR V2 · ZWEISPALTIG (2026-07-29, Umbau nach User-Feedback)
   ---------------------------------------------------------------
   Vorher: Bild links, Konfigurator mittig, Zusammenfassung rechts —
   und damit exakt dieselbe Anmutung wie der Hero darüber. Zwei Bereiche,
   die gleich aussehen, konkurrieren, statt sich zu ergänzen.

   Jetzt: EIN mitlaufendes Panel rechts, das Bild klein darin. Der
   Konfigurator bekommt die freigewordene Breite — genau das, was vorher
   gefehlt hat. Zurück zur kanonischen 1440er-Box, weil die Extrabreite
   nur nötig war, um drei Spalten unterzubringen.
   ═══════════════════════════════════════════════════════════════ */

.tx-cfg-v2 {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  max-width: var(--tx-box);
}
.tx-cfg-deliver-band { max-width: var(--tx-box); }

/* Kleines Produktbild im Panel. Höhe gedeckelt, damit das Panel beim
   Scrollen nicht länger wird als der Viewport — sonst klebt es nicht mehr. */
.tx-cfg-v2__side-media {
  background: var(--tx-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin: -20px -18px 16px;
  overflow: hidden;
}
.tx-cfg-v2__side-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity .2s ease;
}

/* Panel selbst etwas ruhiger — es steht jetzt allein und muss nicht mehr
   gegen eine zweite Spalte bestehen. */
.tx-cfg-v2__side-inner { padding: 20px 18px 22px; }
.tx-cfg-v2__side-name { font-size: 15px; margin-bottom: 14px; }
.tx-cfg-v2__spec { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }

/* Zahlarten unten im Panel */
.tx-cfg-v2__pay { margin-top: 14px; padding-top: 14px; }
.tx-cfg-v2__pay img { height: 18px; }
.tx-cfg-v2__rating { margin-top: 14px; }

/* Mit der freien Breite passen deutlich mehr Kacheln nebeneinander —
   bei 1440er Box hat die Hauptspalte jetzt ~1000px statt 713px. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

@media (max-width: 1099px) {
  .tx-cfg-v2 { grid-template-columns: 1fr; gap: 24px; }
  .tx-cfg-v2__side-inner { position: static; }
  .tx-cfg-v2__specs { columns: 2; column-gap: 28px; }
  .tx-cfg-v2__spec { break-inside: avoid; }
  /* Das Bild steht auf schmalen Viewports schon im Hero — im Panel wäre es
     die dritte Wiederholung auf derselben Seite. */
  .tx-cfg-v2__side-media { display: none; }
}
@media (max-width: 899px) {
  .tx-cfg-v2__specs { columns: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR V2 · Ausrichtung, Panel-Symmetrie, Gehäuse-Kacheln
   (2026-07-29, dritte Feedbackrunde)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · BÜNDIG LINKS ──
   Gemessen: Überschrift bei x=32, Optionsboxen bei x=64. Ursache war die
   alte Box an `.tx-cfg-comps__list` (max-width 1440 + padding 0 32px) —
   die stammt aus dem einspaltigen Layout und wirkt im neuen Grid als
   zweite, verschachtelte Einrückung. Innerhalb der Hauptspalte gilt die
   Box des Grids, nicht die eigene. */
.tx-cfg-v2__main .tx-cfg-comps__list,
.tx-cfg-v2__main .tx-cfg-peri .tx-cfg-comps__list {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ── 2 · SYMMETRIE MIT DER HERO-BOX ──
   Die Kaufbox oben (.tx-cfg-buy) ist 369px breit, hat 28px Innenabstand
   und klebt bei top:80px. Das Panel im Konfigurator übernimmt exakt diese
   Maße — gemessen stimmte bisher nur die rechte Kante (1408), links lag
   es 29px daneben. */
.tx-cfg-v2 { grid-template-columns: minmax(0, 1fr) 369px; }
.tx-cfg-v2__side-inner {
  padding: 28px;
  top: 80px;
}
.tx-cfg-v2__side-media { margin: -28px -28px 20px; height: 170px; }

/* ── 3 · GEHÄUSE GRÖSSER ──
   Das Gehäuse ist die erste und die emotionalste Entscheidung — es darf
   nicht dieselbe Kachelgröße haben wie ein Netzteil. Drei statt vier
   Spalten, deutlich mehr Bildfläche. Selektor über den Gruppennamen,
   damit keine zusätzliche Klasse durch alle Templates gereicht werden
   muss. */
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track,
.tx-cfg-row[data-grp-name*="gehaeuse"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card__media,
.tx-cfg-row[data-grp-name*="gehaeuse"]:not(.tx-cfg-row--list) .tx-cfg-card__media {
  aspect-ratio: 4 / 5;
  padding: 14px;
}
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card__title,
.tx-cfg-row[data-grp-name*="gehaeuse"]:not(.tx-cfg-row--list) .tx-cfg-card__title {
  font-size: 14.5px;
}

@media (max-width: 1099px) {
  .tx-cfg-v2 { grid-template-columns: 1fr; }
  .tx-cfg-v2__side-media { margin: -28px -28px 20px; }
}
@media (max-width: 767px) {
  /* Die 20px-Variante der alten Box ebenfalls neutralisieren */
  .tx-cfg-v2__main .tx-cfg-comps__list { padding-left: 0; padding-right: 0; }
  .tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════
   PDP-BREITE (2026-07-29) — eine Variable für die ganze Produktseite
   ---------------------------------------------------------------
   User: „wir brauchen mehr space links und rechts, also eventuell weg
   von 1440p". Der Konfigurator allein breiter zu machen hätte die gerade
   erst hergestellte Bündigkeit mit der Hero-Kaufbox wieder zerstört —
   deshalb bekommen ALLE Abschnitte der Produktseite dieselbe Breite über
   eine Variable. Der Rest des Shops (PLP, Startseite, Footer …) bleibt
   bei 1440, dort wurde nichts beanstandet.

   min(): auf grossen Schirmen 1680px, darunter immer 64px Luft zum Rand,
   damit der Inhalt nie an der Fensterkante klebt.
   ═══════════════════════════════════════════════════════════════ */
:root { --tx-pdp-max: min(1660px, 100%); }

.tx-cfg-detail__inner,
.tx-cfg-v2,
.tx-cfg-deliver-band,
.tx-fps-check__inner,
.tx-pdp-body__inner,
.tx-pdp-reviews__inner {
  max-width: var(--tx-pdp-max);
}

@media (max-width: 1279px) {
  :root { --tx-pdp-max: min(1660px, 100%); }
}
@media (max-width: 767px) {
  :root { --tx-pdp-max: min(1660px, 100%); }
}

/* ═══════════════════════════════════════════════════════════════
   ÜBERSICHTLICHER — Rhythmus statt Dichte
   ---------------------------------------------------------------
   Geschlossene Kategorien waren so hoch wie offene Inhalte und alle
   gleich laut. Jetzt: geschlossen kompakt und ruhig, offen deutlich
   abgesetzt. Das Auge findet dadurch sofort, wo es gerade steht.
   ═══════════════════════════════════════════════════════════════ */

/* Geschlossene Zeilen kompakter */
.tx-cfg-row:not(.is-open) > .tx-cfg-row__head { padding-top: 13px; padding-bottom: 13px; }
.tx-cfg-row:not(.is-open) { margin-bottom: 6px; }

/* Die offene Kategorie bekommt Luft und eine ruhige Kante */
.tx-cfg-row.is-open {
  margin-top: 18px;
  margin-bottom: 18px;
  border-color: var(--tx-line-2);
}
.tx-cfg-row.is-open:first-child { margin-top: 0; }

/* Kopfzeile der offenen Kategorie klarer vom Inhalt trennen */
.tx-cfg-row.is-open > .tx-cfg-row__head { border-bottom: 1px solid var(--tx-line); }

/* Der Wert in der Kopfzeile ist die Antwort auf „was habe ich gewählt" —
   der darf kräftiger sein als die Gruppenbezeichnung darüber. */
.tx-cfg-row__val { color: var(--tx-text); }
.tx-cfg-row:not(.is-open) .tx-cfg-row__val { font-size: 14.5px; }

/* ═══════════════════════════════════════════════════════════════
   GEHÄUSE-AUSWAHL
   ---------------------------------------------------------------
   Mit der neuen Breite passen vier grosse Kacheln nebeneinander.
   Zusätzlich: ruhigeres Bild-Framing (einheitlicher Innenabstand statt
   je nach Freisteller unterschiedlich viel Luft) und ein zurückhaltender
   Hover, der die Karte anhebt statt sie einzufärben.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track,
.tx-cfg-row[data-grp-name*="gehaeuse"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card__media {
  aspect-ratio: 3 / 4;
  padding: 18px;
  background: var(--tx-bg-2);
}
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card {
  transition: border-color .15s ease, transform .15s ease;
}
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card:hover {
  transform: translateY(-3px);
}
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__media {
  background: var(--tx-bg-3);
}

/* Die Spec-Zeile unter dem Gehäusenamen war die laut wirkende Textwand
   („Midi PC-Gehäuse · Vollständig Gehärtetes Glas · ARGB-Lüfter · …").
   Zwei Zeilen reichen, der Rest steht im Info-Modal. */
.tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-card__spec {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

@media (max-width: 767px) {
  .tx-cfg-row[data-grp-name*="gehäuse"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  .tx-cfg-row.is-open { margin-top: 12px; margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-cfg-row[data-grp-name*="gehäuse"] .tx-cfg-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   „DEINE WAHL"-VORSCHAU + Kartenfuss
   Ideen aus dem Design-Entwurf (Artifact „PC-Konfigurator Wireframes"),
   übersetzt ins bestehende TOXIC-System — nicht 1:1 übernommen.
   ═══════════════════════════════════════════════════════════════ */

/* Die Vorschau steht links, das Auswahlraster rechts. Ein ruhiger Anker
   für das Auge: die getroffene Wahl bleibt gross sichtbar, während das
   Raster daneben kompakt bleiben darf. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-row__bodyinner:has(.tx-cfg-pick) {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-row__bodyinner:has(.tx-cfg-pick) > .tx-cfg-tabs {
  grid-column: 1 / -1;
}

.tx-cfg-pick {
  border: 1px solid var(--tx-line-2);
  background: var(--tx-bg-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-self: start;
  position: sticky;
  top: 96px;
}
.tx-cfg-pick__label {
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tx-mint);
}
.tx-cfg-pick__media {
  aspect-ratio: 1 / 1;
  background: var(--tx-bg-3);
  border: 1px solid var(--tx-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.tx-cfg-pick__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tx-cfg-pick__name { font-size: 13px; font-weight: 700; color: var(--tx-text); line-height: 1.3; }
.tx-cfg-pick__spec { font-size: 11.5px; color: var(--tx-text-dim); line-height: 1.4; }
.tx-cfg-pick__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px dashed var(--tx-line-2);
  padding-top: 9px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--tx-text-mute);
}
.tx-cfg-pick__foot strong {
  font-family: var(--tx-sub);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-mint);
}

/* Kartenfuss: gestrichelte Trennlinie, Preis rechts unten und kräftiger.
   Bisher stand der Preis irgendwo im Fluss und ging unter. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__price {
  border-top: 1px dashed var(--tx-line);
  padding-top: 9px;
  margin-top: auto;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
/* Marke wieder einblenden — im Raster trägt sie zur Orientierung bei */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__sub {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
}

/* Breite an den Entwurf angeglichen (dort 1660px). */
:root { --tx-pdp-max: min(1660px, 100%); }

@media (max-width: 1099px) {
  .tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-row__bodyinner:has(.tx-cfg-pick) {
    grid-template-columns: 1fr;
  }
  .tx-cfg-pick { position: static; flex-direction: row; align-items: center; }
  .tx-cfg-pick__media { width: 90px; flex: none; }
  .tx-cfg-pick__label { display: none; }
  .tx-cfg-pick__foot { border-top: none; padding-top: 0; margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   KORREKTUREN (2026-07-29, vierte Feedbackrunde)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · VORSCHAU ALS QUERBALKEN STATT SEITENSPALTE ──
   Die zweispaltige Variante (Vorschau links, Raster rechts) ist an
   Gruppen mit Unter-Sektionen zerbrochen: beim Kühler fielen
   „Luftkühlung" und „Wasserkühlung" als eigene Grid-Kinder in die
   schmale linke Spalte. Dazu klebte das Panel per sticky und wanderte
   dabei aus seiner Zeile.
   Jetzt: EIN Querbalken über dem Raster, volle Breite, nicht sticky.
   Damit ist die Anordnung unabhängig davon, wie viele Blöcke eine
   Gruppe darunter aufmacht — und das Bild liegt liegend statt hoch. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-row__bodyinner:has(.tx-cfg-pick) {
  display: block;
}

.tx-cfg-pick {
  position: static;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
}
.tx-cfg-pick__label {
  flex: none;
  writing-mode: horizontal-tb;
  align-self: center;
}
.tx-cfg-pick__media {
  flex: none;
  width: 132px;
  height: 84px;              /* liegend statt hoch — User-Vorgabe */
  aspect-ratio: auto;
  padding: 8px;
}
.tx-cfg-pick__name { flex: 0 1 auto; }
.tx-cfg-pick__spec { flex: 1 1 auto; min-width: 0; }
.tx-cfg-pick__foot {
  flex: none;
  margin-left: auto;
  border-top: none;
  border-left: 1px dashed var(--tx-line-2);
  padding: 4px 0 4px 16px;
  margin-top: 0;
  gap: 10px;
  align-items: baseline;
}

/* ── 2 · NUR EIN HAKEN ──
   Der Kompatibilitäts-Badge setzte bei jedem passenden Teil ein grünes
   Häkchen — direkt neben den Auswahlkreis. Zwei Haken an einer Karte
   sind eine Aussage zu viel; welcher gilt, war nicht ablesbar.
   „Passt" ist ausserdem der Normalfall und braucht kein Symbol —
   Aufmerksamkeit verdient nur, was NICHT passt. Warnung und Fehler
   bleiben deshalb sichtbar. */
.tx-cfg-card__compat.is-ok { display: none; }

/* ── 3 · MOBIL ── */
@media (max-width: 899px) {
  .tx-cfg-pick {
    flex-wrap: wrap;
    padding: 12px;
    gap: 12px;
  }
  .tx-cfg-pick__media { width: 96px; height: 64px; }
  .tx-cfg-pick__name { flex: 1 1 100%; order: 3; }
  .tx-cfg-pick__spec { flex: 1 1 100%; order: 4; }
  .tx-cfg-pick__foot {
    order: 2;
    margin-left: auto;
    border-left: none;
    padding-left: 0;
  }
  .tx-cfg-pick__label { order: 1; flex: 1 1 100%; }
}

/* ── PDP-Breite endgueltig (2026-07-29) ──
   `calc(100vw - 128px)` ergab bei 390px Viewport 262px — die Seite war
   mobil auf zwei Drittel zusammengequetscht. Zusaetzlich hatte eine
   spaeter angehaengte, media-query-freie Neudeklaration die Mobil-
   Ausnahme wieder ausgehebelt (Quellreihenfolge schlaegt Media Query
   bei gleicher Spezifitaet).
   `min(1660px, 100%)` braucht gar keine Ausnahme: auf grossen Schirmen
   greift die Deckelung, auf kleinen die volle Breite — der Seitenabstand
   kommt aus dem padding des Containers. */
:root { --tx-pdp-max: min(1660px, 100%); }

/* ── Kappung jetzt per Klasse statt :nth-child (2026-07-29) ──
   Die Grenze wird in js/cfg-v2.js aus der tatsaechlichen Spaltenzahl
   berechnet, damit immer VOLLE Reihen stehen — bei vier Spalten also
   acht Karten und nicht sechs mit halb leerer zweiter Reihe.
   Empfohlene Teile werden nie gekappt. */
.tx-cfg-card.is-capped { display: none !important; }

/* Die alten festen :nth-child-Regeln sind damit hinfaellig. */
.tx-cfg-row--capped:not(.is-expanded):not(.tx-cfg-row--list)
  .tx-cfg-carousel__track > .tx-cfg-card:nth-child(n + 7) { display: flex; }
.tx-cfg-row--capped:not(.is-expanded).tx-cfg-row--list
  .tx-cfg-carousel__track > .tx-cfg-card:nth-child(n + 9) { display: flex; }

/* Vorschaupanel entfernt — der User fand es stoerend. Regeln neutralisiert,
   damit kein Rest im Layout wirkt. */
.tx-cfg-pick { display: none !important; }

/* Produktbild im Panel groesser — bei 369px Panelbreite wirkten 170px
   Hoehe unausgewogen, das Bild schwamm in der Flaeche. 230px kommt der
   Breite naeher und laesst die Box ruhiger wirken. Die Deckelung bleibt
   wichtig, damit das Panel kuerzer als der Viewport bleibt und klebt. */
.tx-cfg-v2__side-media { height: 230px; }
@media (max-width: 1099px) { .tx-cfg-v2__side-media { display: none; } }

/* Browsereigenes Scroll-Anchoring im Konfigurator abschalten.
   Beim Zuklappen einer Kategorie oberhalb des Sichtfensters korrigiert
   Chromium die Scrollposition selbst — braucht dafuer aber bis ~600ms und
   liegt am Ende daneben. Zusammen mit unserer synchronen Korrektur in
   custom.js gaebe das zwei konkurrierende Ausgleiche. Wir behalten den
   eigenen, weil er im selben Frame greift und der Nutzer nichts sieht. */
#cfg-container,
#cfg-container .tx-cfg-row,
.tx-cfg-peri .tx-cfg-row { overflow-anchor: none; }

/* ── Info-Button auf Mobil (2026-07-29) ──
   Zwei Fehler auf einmal:
   1. `grid-area: info` blieb gesetzt. Ein absolut positioniertes GRID-Kind
      nimmt seine Grid-Flaeche als Bezugsrahmen, nicht die Karte — und die
      Flaeche „info" gibt es im Mobil-Raster gar nicht mehr. Auf der
      gewaehlten Zeile landete der Button dadurch bei right:162px, also
      mitten auf dem Produktnamen. `grid-area: auto` loest den Bezug auf,
      danach gilt wieder die Karte (position:relative).
   2. 24px sind als Fingerziel zu klein (Apple empfiehlt 44pt, Android 48dp).
      Die sichtbare Flaeche bleibt zurueckhaltend, die Trefferflaeche waechst
      ueber ein Pseudo-Element — Optik unveraendert, Bedienbarkeit besser. */
@media (max-width: 640px) {
  .tx-cfg-row--list .tx-cfg-card__info {
    grid-area: auto;
    inset: 8px 8px auto auto;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .tx-cfg-row--list .tx-cfg-card__info::after {
    content: "";
    position: absolute;
    inset: -8px;          /* 46x46 Trefferflaeche */
  }
  /* Die Ausweich-Position aus dem Karten-Modus (rechts neben dem ✓-Badge)
     gilt hier nicht — es gibt keinen Badge mehr. */
  .tx-cfg-row--list .tx-cfg-card.is-selected .tx-cfg-card__info,
  .tx-cfg-row--list .tx-cfg-card:has(.tx-cfg-card__input:checked) .tx-cfg-card__info {
    right: 8px;
    left: auto;
  }
  .tx-cfg-row--list .tx-cfg-card__body { padding-right: 46px; }
}

/* Info-Button auch in der KACHEL-Ansicht auf Fingergroesse — die Regel
   davor griff nur fuer `--list`, die Gehaeuse-Kacheln blieben bei 24px. */
@media (max-width: 640px) {
  .tx-cfg-card__info { width: 30px; height: 30px; font-size: 13px; }
  .tx-cfg-card__info::after { content: ""; position: absolute; inset: -8px; }
}

/* Marken-Tabs: der Streifen ist wischbar, sah aber aus wie abgeschnitten.
   Ein weicher Auslauf am rechten Rand zeigt, dass dort weitergeht.
   `mask` statt Overlay, damit der Verlauf nicht ueber dem Rahmen liegt. */
.tx-cfg-v2 .tx-cfg-tabs__list {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  scroll-snap-type: x proximity;
}
.tx-cfg-v2 .tx-cfg-tabs__item { scroll-snap-align: start; }
/* Wenn alles passt, soll nichts ausgeblendet werden — greift ab Tablet,
   wo die Tabs in eine Zeile passen. */
@media (min-width: 768px) {
  .tx-cfg-v2 .tx-cfg-tabs__list:not(:hover) { -webkit-mask-image: none; mask-image: none; }
}

/* ── Badges: Eck-Tags im Bild vs. Inline am Titel (2026-07-29) ──
   Beide Varianten stehen im DOM, weil die Ansicht zur Laufzeit umschaltbar
   ist. CSS entscheidet, welche gilt:
     Kachel  -> Eck-Tags unten links im Bild (der ruhigere, urspruengliche
                Look; im Text wirkten sie wie Stolpersteine)
     Liste   -> Inline-Tags am Titel (im 72px-Thumbnail waeren Eck-Badges
                unlesbar) */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__title .tx-badge-tag,
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__title .tx-cfg-card__flag--inline {
  display: none;
}
.tx-cfg-row--list .tx-cfg-card__badges,
.tx-cfg-row--list .tx-cfg-card__flag {
  display: none;
}

/* In der Kachel liegt der Auswahlkreis oben rechts und der Info-Button oben
   links — „EMPFOHLEN" darf beiden nicht ins Gehege kommen. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__flag {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ── Sidebar-Zeilen sind Sprungmarken (2026-07-29) ──
   Klick auf „GEHÄUSE"/„PROZESSOR" oeffnet die Kategorie im Konfigurator.
   Sie sind jetzt <button> — deshalb die Button-Grundstile neutralisieren,
   sonst erbt die Zeile Rahmen, Hintergrund und zentrierten Text. */
button.tx-cfg-v2__spec {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--tx-line);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
}
button.tx-cfg-v2__spec:last-child { border-bottom: none; }
button.tx-cfg-v2__spec:hover { background: rgba(1,222,194,.07); }
button.tx-cfg-v2__spec:hover .tx-cfg-v2__spec-k { color: var(--tx-mint); }
button.tx-cfg-v2__spec:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: -2px; }
.tx-cfg-v2__specs li { list-style: none; }

/* Angesprungene Kategorie kurz markieren, damit der Sprung nachvollziehbar
   ist — sonst weiss man nicht, wo man gelandet ist. */
@keyframes txRowJumped {
  0%   { border-color: var(--tx-mint); }
  100% { border-color: var(--tx-line); }
}
.tx-cfg-row.is-jumped { animation: txRowJumped 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tx-cfg-row.is-jumped { animation: none; }
}

/* Als Textzeile waren 31px in Ordnung — als Tippziel nicht.
   Auf Touch-Geraeten auf 44px anheben (WCAG 2.5.8 / BFSG). */
@media (max-width: 991.98px) {
  button.tx-cfg-v2__spec { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR · LAYOUT-KONSOLIDIERUNG (2026-07-29)
   ---------------------------------------------------------------
   Die Regeln fuer Kachel- und Listenansicht waren ueber fuenf
   nachtraeglich angehaengte Bloecke verteilt und haben sich
   gegenseitig ueberschrieben. Dieser Block ist die letzte Instanz
   und legt die Geometrie beider Ansichten abschliessend fest.

   Leitgedanke: die Kachelbreite richtet sich nach dem Bauteil.
   Ein Gehaeuse ist eine Bildentscheidung und braucht Flaeche; ein
   Luefter ist es kaum. Vorher galt fuer alles dieselbe 178px-Spalte.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kachelraster: Spaltenbreite nach Bauteil ── */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px;
}
/* Gehaeuse: die Kaufentscheidung am Bild. Vier breite Kacheln statt
   sechs schmaler — bei ~1230px Trackbreite sind das ~296px pro Kachel. */
.tx-cfg-row[data-cfg-type="case"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}

/* Bildformat nach Bauteil. Tower sind hochkant — im Quadrat blieb
   links und rechts Luft, waehrend das Gehaeuse selbst klein blieb. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__media {
  aspect-ratio: 1 / 1;
  padding: 10px;
}
/* Gehaeuse bleiben QUADRATISCH. Gemessen 2026-07-30: die Wawi-Fotos sind
   quadratische Freisteller — in einer 4:5-Box (294x368) stand das Bild mit
   266x266 oben und darunter blieben 102px Leere. Das war der eigentliche
   Grund, warum die Kachelansicht „doof" aussah. Mehr Bild kommt hier ueber
   die Spaltenbreite (296px), nicht ueber ein hoeheres Seitenverhaeltnis. */
.tx-cfg-row[data-cfg-type="case"]:not(.tx-cfg-row--list) .tx-cfg-card__media {
  aspect-ratio: 1 / 1;
  padding: 14px;
}

/* ── Bild fuellt seine Box (beide Ansichten) ──
   snippets/image.tpl liefert <picture> um das <img>. Ein `height: 100%`
   am img bezieht sich damit auf die Hoehe des <picture>, und die ist
   `auto` — das img behielt seine Eigenhoehe und stand in der Liste 24px
   ueber die 72px-Box hinaus (im Screenshot das „verrutschte" Bild der
   gewaehlten Zeile). Deshalb: der Wrapper spannt die Box auf, das Bild
   wird nur noch per max-* begrenzt und behaelt sein Seitenverhaeltnis. */
.tx-cfg-card__media picture,
.tx-cfg-card__media .image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
/* Nachdem der <picture>-Wrapper die Box aufspannt, traegt `height: 100%`
   am Bild wieder. Bewusst 100%/100% + object-fit statt `auto` + max-*:
   die Bilder haengen an `loading="lazy"`, und ein noch nicht geladenes
   Bild mit `width:auto` hat GAR KEINE Groesse — die Kachel wuerde beim
   Nachladen aufspringen. Feste Flaeche + contain haelt das Layout ruhig
   und schneidet trotzdem nichts ab. */
.tx-cfg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Typografie der Kachel — vorher 13px/11.5px auf 178px Breite.
   Mit mehr Spaltenbreite darf der Name wieder lesbar sein. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body {
  padding: 12px 14px 14px;
  position: static;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__title {
  font-size: 14px;
  line-height: 1.32;
  -webkit-line-clamp: 2;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__spec { font-size: 12px; }
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__price { font-size: 14px; }

/* Gleich hohe Kacheln in einer Reihe: der Preis sitzt unten buendig,
   egal ob der Name ein- oder zweizeilig ist. Ohne das „haengen" die
   Preise auf unterschiedlicher Hoehe und die Reihe wirkt unruhig. */
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-card__price { margin-top: auto; }

/* ── Fehlendes Produktbild ──
   JTLs keinBild.gif ist weiss und reisst im dunklen Raster ein Loch.
   Das Template rendert dafuer jetzt --empty + ein Icon. */
.tx-cfg-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.014) 0 8px, transparent 8px 16px),
    var(--tx-card-2, rgba(255,255,255,.03));
}
.tx-cfg-card__noimg {
  width: 34%;
  max-width: 44px;
  height: auto;
  color: var(--tx-text-mute);
  opacity: .5;
}
.tx-cfg-row--list .tx-cfg-card__noimg { width: 22px; max-width: 22px; }

/* ── Listenansicht: ruhigere Zeilen ──
   Vorher schwankte die Zeilenhoehe mit der Spec-Zeile (Artikel ohne
   gepflegte Eckdaten wurden flacher) — das Raster wirkte dadurch
   zerfranst. Feste Mindesthoehe, der Text zentriert sich darin. */
.tx-cfg-row--list .tx-cfg-card { min-height: 88px; }
.tx-cfg-row--list .tx-cfg-card__body { min-width: 0; }

/* Der Titel bekommt den Platz, den die Zeile hergibt; der Preis bleibt
   rechtsbuendig in einer festen Spalte, damit die Preise untereinander
   fluchten statt am Titelende zu kleben. */
.tx-cfg-row--list .tx-cfg-card__price {
  min-width: 108px;
  padding-left: 24px;
}
/* Zwei Zeilen, nicht eine. Einzeilig geklemmt bekam praktisch jeder
   Wawi-Name ein „…" mitten im Wort („… Wärmeleitpaste 2g…"). Kurze Namen
   bleiben einzeilig, die Zeile bleibt durch `min-height` trotzdem ruhig —
   Informationsverlust waere der schlechtere Tausch. */
.tx-cfg-row--list .tx-cfg-card__title {
  font-size: 15px;
  -webkit-line-clamp: 2;
}
.tx-cfg-row--list .tx-cfg-card__spec {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thumbnail breiter, Hoehe bleibt bei 72px. Die Bilder sind ueberwiegend
   quer (Grafikkarte, Netzteil, Paste); in der 72x72-Box wurden die auf
   ~40px Hoehe heruntergerechnet. Die Hoehe zu senken waere ein Rueckschritt
   fuer quadratische Motive (CPU), deshalb nur Breite dazu. */
/* Box-Masse minus Innenabstand = die Flaeche, die dem Bild bleibt.
   96x72 bei 5px Abstand liess nur 62px Hoehe uebrig — deshalb 100x80
   bei 4px: das Bild erreicht damit die angepeilten 72px. */
.tx-cfg-row--list .tx-cfg-card__media {
  width: 100px;
  height: 80px;
  flex: 0 0 100px;
  padding: 4px;
}
/* Begrenzung siehe oben (.tx-cfg-card__media img) — hier nur die
   Besonderheit der Liste. */
.tx-cfg-row--list .tx-cfg-card__media picture,
.tx-cfg-row--list .tx-cfg-card__media .image-wrapper { max-height: 100%; }

@media (max-width: 991.98px) {
  .tx-cfg-row--list .tx-cfg-card { min-height: 0; }
  .tx-cfg-row--list .tx-cfg-card__media { width: 72px; height: 58px; flex: 0 0 72px; }
  .tx-cfg-row--list .tx-cfg-card__price { min-width: 0; padding-left: 12px; }
  .tx-cfg-row--list .tx-cfg-card__spec { white-space: normal; }
  .tx-cfg-row--toggle:not(.tx-cfg-row--list) .tx-cfg-carousel__track,
  .tx-cfg-row[data-cfg-type="case"]:not(.tx-cfg-row--list) .tx-cfg-carousel__track {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 10px;
  }
  .tx-cfg-row[data-cfg-type="case"]:not(.tx-cfg-row--list) .tx-cfg-card__media { padding: 8px; }
}

/* ── Gruppen-Banner (Wawi-Bild an der Konfiggruppe) ──
   Ist ein redaktionelles Kategoriebild (Thermal Grizzly ueber den
   Pasten). Es darf Flaeche haben, aber nie die Auswahl verdraengen —
   deshalb Hoehe gedeckelt statt freiem Seitenverhaeltnis. */
.tx-cfg-row__banner {
  max-height: 168px;
  overflow: hidden;
  border-radius: 2px;
}
.tx-cfg-row__banner img {
  width: 100%;
  height: 100%;
  max-height: 168px;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 767px) {
  .tx-cfg-row__banner,
  .tx-cfg-row__banner img { max-height: 108px; }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR · SIDEBAR KOMPAKTER (2026-07-30)
   ---------------------------------------------------------------
   User: „die sticky sidebar ist zu gross jetzt. wir muessen platz
   schaffen." Drei Hebel, in dieser Reihenfolge wirksam:
   1. Systemname ohne Komponentenliste (Template)
   2. Werte am ersten Trennzeichen gekuerzt (cfg-v2.js)
   3. Label ueber Wert statt daneben (hier)

   Zu 3: nebeneinander blieben dem Wert nur ~58% von 313px, also
   ~180px — „Aerocool P500D-G-BK-v1" oder „Polartherm X-8 by
   Thermal Griz…" liefen dort auf zwei Zeilen oder ins Ellipsis.
   Gestapelt hat der Wert die volle Breite und passt einzeilig;
   unterm Strich baut das NICHT hoeher, liest sich aber ruhiger.
   ═══════════════════════════════════════════════════════════════ */

.tx-cfg-v2__spec {
  display: block;                    /* war Grid mit 42/58 */
  padding: 7px 0;
  line-height: 1.3;
}
.tx-cfg-v2__spec-k {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  margin-bottom: 1px;
}
.tx-cfg-v2__spec-v {
  display: block;
  text-align: left;                  /* war rechtsbuendig */
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der Systemname ist jetzt kurz („Gaming PC KAGE X1") und darf
   dafuer als Ueberschrift auftreten. */
.tx-cfg-v2__side-name {
  font-size: 18px;
  margin: 2px 0 14px;
}

/* ── FPS-Kasten mit Spielauswahl ── */
.tx-cfg-v2__perf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.tx-cfg-v2__perf-game {
  flex: 0 1 auto;
  max-width: 62%;
  padding: 2px 20px 2px 6px;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  border-radius: 2px;
  color: var(--tx-text);
  font-family: var(--tx-sub);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  /* Eigener Pfeil: das System-Widget ist hell und faellt im dunklen
     Panel auf. -webkit-appearance zusaetzlich fuer aeltere Safari. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d8785' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  text-overflow: ellipsis;
}
.tx-cfg-v2__perf-game:hover { border-color: var(--tx-mint); }
.tx-cfg-v2__perf-game:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 1px; }
/* Das Aufklappmenue rendert das Betriebssystem — dort greift nur
   Farbe, und die muss gesetzt sein, sonst weisse Schrift auf weiss. */
.tx-cfg-v2__perf-game option { background: #121514; color: #ECEFEE; }

/* ── Panelhoehe: gemessen 1220px bei 1200px Viewport (2026-07-30) ──
   Ein sticky Element, das hoeher ist als der Bildschirm, klebt nicht
   mehr sinnvoll: die Unterkante — und damit der Warenkorb-Knopf —
   bleibt unerreichbar, solange oben angedockt ist. Aufschluesselung
   war Bild 230 / Zeilen 410 / Leistung 104 / Trust 146.

   Gekuerzt wird dort, wo nichts verlorengeht. Das Produktbild steht
   im Hero darueber gross; hier ist es nur Orientierung. */
.tx-cfg-v2__side-media { height: 150px; }

.tx-cfg-v2__spec { padding: 4px 0; }
.tx-cfg-v2__spec-v { font-size: 13px; }

.tx-cfg-v2__trust { gap: 5px; font-size: 12px; }
.tx-cfg-v2__trust li { line-height: 1.35; }

/* Sicherheitsnetz: egal wie viele Konfiggruppen ein PC hat, das Panel
   bleibt im Viewport. Ohne die Deckelung waechst es mit jeder weiteren
   Gruppe weiter aus dem Bild heraus. Preis und CTA liegen nach dem
   Kuerzen bei ~700px und damit auf jedem Laptop ueber der Falz. */
.tx-cfg-v2__side-inner {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  /* BEWUSST kein `overscroll-behavior: contain`: das unterbindet die
     Scroll-Weitergabe an die Seite. Wer mit dem Zeiger ueber dem Panel
     scrollt, haette am Panelende festgehangen statt weiterzublaettern. */
  scrollbar-width: thin;
}
.tx-cfg-v2__side-inner::-webkit-scrollbar { width: 6px; }
.tx-cfg-v2__side-inner::-webkit-scrollbar-thumb {
  background: var(--tx-line-2);
  border-radius: 3px;
}
/* Unter 1100px faellt das Panel unter den Konfigurator — dort waere ein
   eigener Scrollbereich eine Falle (Seite scrollt nicht weiter). */
@media (max-width: 1099.98px) {
  .tx-cfg-v2__side-inner { max-height: none; overflow-y: visible; }
}

/* Die Komponentenliste steht jetzt UNTER dem Kaufknopf (Reihenfolge siehe
   config_container.tpl). Sie braucht dadurch etwas Abstand nach oben und
   verliert den unteren, der vorher zum Leistungskasten fuehrte. */
.tx-cfg-v2__specs { margin: 18px 0 0; }
.tx-cfg-v2__perf { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR · PREISZEILE + ZAHLARTEN (2026-07-30)
   User: „nur der preis noch nicht ganz. das sieht asymetrisch
   nicht mittig aus. unten die zahlungsdinger auch nicht so geil."
   ═══════════════════════════════════════════════════════════════ */

/* Preis: gestapelt statt links-rechts.
   Ein 11px-Label ganz links und eine 24px-Zahl ganz rechts auf einer
   gemeinsamen Grundlinie haben die Zeile optisch auseinandergezogen —
   dazwischen klaffte Leere, und der Hinweis darunter hing wieder links.
   Gestapelt sitzt alles auf derselben Kante wie die Komponentenzeilen
   darunter, und der Preis darf groesser werden. */
.tx-cfg-v2__price-row {
  display: block;
  padding-top: 14px;
}
.tx-cfg-v2__price-label { display: block; margin-bottom: 2px; }
.tx-cfg-v2__price {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;   /* kein Zappeln beim Umkonfigurieren */
}
.tx-cfg-v2__price-note { margin: 4px 0 14px; }

/* Zahlarten: die Logos haben sehr unterschiedliche Seitenverhaeltnisse
   (Klarna breit, Apple Pay schmal). Nebeneinander bei fixer Hoehe ergab
   das eine ausgefranste Reihe verschieden grosser Farbflecken.
   Jetzt sitzt jedes Logo in derselben Box und wird darin eingepasst —
   gleiches Raster, ruhige Reihe. */
.tx-cfg-v2__pay {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
}
.tx-cfg-v2__pay img {
  height: 26px;
  width: 100%;
  object-fit: contain;
  padding: 4px 6px;
  background: rgba(255, 255, 255, .045);
  border-radius: 3px;
  opacity: .78;
}
.tx-cfg-v2__pay img:hover { opacity: 1; }

/* Bildhinweis sitzt jetzt VOR der Auswahl (siehe config_container.tpl).
   Als Fussnote unten durfte er kursiv und weit weg stehen; oben zwischen
   Einleitung und erster Kategorie braucht er andere Abstaende und darf
   nicht wie ein Zitat wirken. */
.tx-cfg-disclaimer--top {
  margin: -6px 0 22px;
  padding: 9px 13px;
  border-left-color: var(--tx-line);
  font-style: normal;
  font-size: 12px;
  max-width: 78ch;
}

/* Bildhinweis unter der Galerie im Hero. Er liegt jetzt in einer
   schmalen Spalte (Galeriebreite), deshalb kleiner und ohne die
   Zitat-Anmutung des frueheren Fussnoten-Platzes. */
.tx-cfg-disclaimer--gallery {
  margin: 16px 0 0;
  padding: 0 0 0 11px;
  border-left: 2px solid var(--tx-line);
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.55;
  max-width: none;
}
@media (max-width: 767px) {
  .tx-cfg-disclaimer--gallery { font-size: 11px; margin-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   KOPFZEILE · PFLICHT/OPTIONAL-MARKE (2026-07-30)
   User: „das required sieht hier doof aus … dass es nicht so
   gequetscht aussieht."

   Ursache des Gequetschten: ein gerahmter Chip mit nur 2px
   Innenabstand, und `letter-spacing` setzt den Abstand HINTER jeden
   Buchstaben — auch den letzten. Der Text klebte dadurch links am
   Rahmen, rechts stand Luft. Dazu sass er direkt hinter dem ebenfalls
   gesperrt gesetzten Kategorienamen.

   Neu: kein Rahmen (passt auch zur Flächensprache — keine
   überflüssigen Rahmen), und die Marke steht rechts ÜBER dem Preis.
   Damit ist die Kopfzeile symmetrisch: links Kategorie über
   Produktname, rechts Status über Preis.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-row__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  line-height: 1.2;
}
.tx-cfg-row__req {
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  /* letter-spacing haengt hinter dem letzten Zeichen — sonst wirkt die
     Marke gegenüber dem Preis darunter nach links versetzt. */
  margin-right: -.16em;
  text-transform: uppercase;
  color: var(--tx-mint);
  white-space: nowrap;
}
.tx-cfg-row__req--opt { color: var(--tx-text-mute); }
.tx-cfg-row__price-val { white-space: nowrap; }

/* Der Kategoriename braucht die Flex-Box jetzt nicht mehr (der Chip,
   der darin sass, ist weg) — aber sie schadet auch nicht, falls dort
   je wieder etwas dazukommt. */

@media (max-width: 767px) {
  /* Mobil ist die Kopfzeile eng; dort zaehlt der Preis, die Marke
     erklaert sich beim Aufklappen ohnehin (leere Auswahl = Pflicht). */
  .tx-cfg-row__req { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL · KONFIGURATOR (2026-07-30, nach Messung @390px)
   ───────────────────────────────────────────────────────────────
   Gemessen VOR dem Fix:
     Listenzeile  Karte 292px, Textzelle 178px, davon Raster nur
                  26+94px → dem Titel blieben 94px, der Name zerfiel
                  in bis zu 6 Zeilen. Kartenhoehen 184/319/201px.
     Kopfzeile    142px hoch, Raster nur 3 Spalten (Preis + Pfeil
                  rutschten in Zeile 2), Preis landete in Spalte 1
                  und blies sie auf 63px auf → 109px Luecke zwischen
                  der Schrittnummer und dem Namen.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1 · Listenzeile: Textzelle nimmt den freien Platz ──
     Die Zelle ist ein Flex-Kind ohne `flex` — sie blieb deshalb auf
     Inhaltsbreite stehen, waehrend rechts 32px leer blieben. */
  .tx-cfg-row--list .tx-cfg-card__body {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 11px 30px 11px 12px;
  }

  /* Zeilen gleich hoch halten: der Name darf zwei Zeilen, die
     Eckdaten zwei — vorher lief die Polartherm X-10 mit ihrer langen
     Beschreibung auf 319px auf, die Nachbarzeilen auf 184. */
  .tx-cfg-row--list .tx-cfg-card__title { -webkit-line-clamp: 2; }
  .tx-cfg-row--list .tx-cfg-card__spec {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Mit mehr Platz fuer den Text darf das Bild wieder groesser sein. */
  .tx-cfg-row--list .tx-cfg-card__media {
    width: 78px; height: 66px; flex: 0 0 78px; margin-left: 10px;
  }

  /* „Fachgerecht aufgetragen" o.ae. stand als eigene Rasterzeile
     zwischen Eckdaten und Preis und trieb die Hoehe hoch. Auf Mobil
     hinter den Preis, eine Zeile gespart. */
  .tx-cfg-row--list .tx-cfg-card__fps { font-size: 11px; }

  /* ── 2 · Kopfzeile: benannte Flaechen ──
     Vier Spalten, Preis in Zeile 2 UNTER dem Text (nicht in Spalte 1),
     Pfeil ueber beide Zeilen. Damit steht der Name direkt neben der
     Schrittnummer. */
  .tx-cfg-row:has(.tx-cfg-row__step) > .tx-cfg-row__head,
  .tx-cfg-row__head {
    grid-template-columns: auto 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "step icon text  chev"
      ".    .    price chev";
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }
  .tx-cfg-row__step  { grid-area: step; }
  .tx-cfg-row__icon  { grid-area: icon; width: 36px; height: 36px; }
  .tx-cfg-row__text  { grid-area: text; min-width: 0; }
  .tx-cfg-row__price { grid-area: price; align-items: flex-start; }
  .tx-cfg-row__chev  { grid-area: chev; align-self: center; }

  /* Ohne Schrittnummer faellt die erste Spalte weg. */
  .tx-cfg-row:not(:has(.tx-cfg-row__step)) > .tx-cfg-row__head {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon text  chev"
      ".    price chev";
  }

  /* Preis + Marke nebeneinander statt untereinander — in Zeile 2 ist
     Breite da, Hoehe nicht. */
  .tx-cfg-row__price {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  /* „ERFORDERLICH" bleibt auf Mobil AUS. Es stand direkt neben
     „inklusive" in derselben engen Zeile — zwei Angaben, von denen die
     eine (Pflicht) auf fast jeder Gruppe dasselbe sagt. Der Preis ist
     die nuetzlichere. Ob eine Gruppe Pflicht ist, zeigt sich beim
     Aufklappen ohnehin (keine „Nicht benoetigt"-Karte). */
  .tx-cfg-row__req { display: none; }
}

/* Nachtrag zur Mobil-Listenzeile (Messung: Titel hatte 104 von 130px).
   Der Kompatibilitaets-Hinweis haelt im Listen-Modus dauerhaft eine
   Spalte frei (26px), damit auf dem Desktop nichts springt, wenn
   compatibility.js nachtraegt. Auf 390px sind 26px aber ein Fuenftel
   der Textbreite — dort bekommt der Hinweis stattdessen eine eigene
   Zeile und verschwindet, solange er leer ist. */
@media (max-width: 767px) {
  .tx-cfg-row--list .tx-cfg-card__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "compat"
      "title"
      "spec"
      "fps"
      "price";
  }
  .tx-cfg-row--list .tx-cfg-card__compat {
    display: none;
    margin-right: 0;
    visibility: visible;
  }
  /* :not(.is-ok) ergaenzt am 2026-08-08. Der Block „NUR EIN HAKEN" weiter
     oben blendet den Kompatibel-Haken aus (`.tx-cfg-card__compat.is-ok`,
     Spezifitaet (0,2,0)) — diese Regel hier steht auf (0,3,0) und hat ihn auf
     dem Telefon wieder eingeblendet. Auf der gewaehlten Karte standen dadurch
     zwei Haken nebeneinander: der runde Auswahl-Haken und der Kreis-Haken
     „Kompatibel". Auf dem Schreibtisch war das nicht zu sehen, weil die Regel
     in einer max-width-Abfrage steht — gemeldet wurde es folgerichtig als
     reines Mobil-Problem. Warnung und Konflikt bleiben sichtbar. */
  .tx-cfg-row--list .tx-cfg-card__compat:not(:empty):not(.is-ok) {
    display: inline-flex;
    margin-bottom: 3px;
  }

  /* Etwas kleineres Bild — der Name traegt hier mehr als 12px Kantenlaenge. */
  .tx-cfg-row--list .tx-cfg-card__media {
    width: 66px; height: 58px; flex: 0 0 66px; margin-left: 8px;
  }
  .tx-cfg-row--list .tx-cfg-card__body { padding: 11px 26px 11px 10px; }

  /* Der gewaehlte Name in der Kopfzeile: zwei Zeilen statt drei —
     drei machten den Kopf 130px hoch. */
  .tx-cfg-row__val { -webkit-line-clamp: 2; font-size: 15px; }
}

/* Mobil-Listenzeile, dritter Durchgang (Messung: von 292px Kartenbreite
   gingen 140px an Auswahlkreis, Bild und Innenabstaende — dem Namen
   blieben 150px, also weniger als die Haelfte). */
@media (max-width: 767px) {
  /* „Fachgerecht aufgetragen" steht auf JEDER Zeile derselben Gruppe
     und kostet dort zwei Zeilen. Das ist eine Aussage ueber die Gruppe,
     nicht ueber die einzelne Paste — auf 390px sechsmal wiederholt ist
     es reiner Ballast. Auf dem Desktop bleibt es (dort passt es in eine
     Zeile neben den Preis). */
  .tx-cfg-card__applied { display: none; }

  /* Bild kleiner, Abstaende enger — der Name traegt hier mehr. */
  .tx-cfg-row--list .tx-cfg-card__media {
    width: 54px; height: 50px; flex: 0 0 54px; margin-left: 8px;
  }
  .tx-cfg-row--list .tx-cfg-card__body { padding: 10px 24px 10px 8px; }
  .tx-cfg-row--list .tx-cfg-card__pick { margin-left: 8px; }

  /* Etwas kompakter setzen: bei ~175px Textbreite zaehlt jede Zeile. */
  .tx-cfg-row--list .tx-cfg-card__title { font-size: 14px; line-height: 1.25; }
  .tx-cfg-row--list .tx-cfg-card__spec  { font-size: 12px; line-height: 1.35; }
  .tx-cfg-row--list .tx-cfg-card__price { font-size: 13px; margin-top: 2px; }
}

/* ═══════════════════════════════════════════════════════════════
   PDP · SPEC-PILLS: haengender Trennstrich + Enge (2026-07-30)
   ───────────────────────────────────────────────────────────────
   User: „die features … kleben oben an der linie, dann haben wir
   noch nen strich am ende rechts vertikal."

   Ursache 1 (Strich): der Trennstrich lag als `border-right` auf
   JEDER Pill und wurde nur bei `:last-child` entfernt. Sobald das
   Raster umbricht — oder die Anzahl nicht durch die Spaltenzahl
   teilbar ist — behaelt die letzte Pill JEDER Reihe ihren Strich und
   der haengt am rechten Rand in der Luft.
   Loesung: den Strich links zeichnen und in der ERSTEN Spalte
   weglassen. Damit kann am rechten Rand konstruktionsbedingt nie
   ein Strich stehen, egal wie viele Pills es sind.

   Ursache 2 (Enge): `gap: 0` — beim Umbruch stossen die Reihen
   direkt aneinander, und die Werte sitzen dicht unter der Linie.
   ═══════════════════════════════════════════════════════════════ */
.tx-pdp-highlight__pills {
  padding-top: 18px;
  row-gap: 14px;
}
.tx-pdp-highlight__pills span,
.tx-pdp-highlight__pills span:last-child {
  border-right: 0;
  border-left: 1px solid var(--tx-line);
  padding: 0 14px;
}
/* Erste Spalte ohne Strich und ohne Einzug — gilt fuer JEDE Reihe,
   nicht nur die erste Pill. */
.tx-pdp-highlight__pills span:nth-child(4n + 1) {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 767px) {
  /* Zwei Spalten: vier nebeneinander ergaben auf 390px 69px pro Pill,
     in denen „120/140/240/280/360 mm" zu „120…" abgeschnitten wurde. */
  .tx-pdp-highlight__pills { grid-template-columns: repeat(2, 1fr); }
  .tx-pdp-highlight__pills span:nth-child(4n + 1) {
    border-left: 1px solid var(--tx-line);
    padding-left: 14px;
  }
  .tx-pdp-highlight__pills span:nth-child(2n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  /* Lange Werte duerfen umbrechen statt abgeschnitten zu werden —
     bei zwei Spalten ist die Hoehe billiger als der Informationsverlust. */
  .tx-pdp-highlight__pills span strong,
  .tx-pdp-highlight__pills span em {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .tx-pdp-highlight__pills span em { letter-spacing: .1em; }
}

/* ═══════════════════════════════════════════════════════════════
   STARTSEITE · HERO-LABELS AUF MOBIL (2026-07-30)
   ───────────────────────────────────────────────────────────────
   User: „die labels sehen mobile doof aus. auch oben das live 4k."

   Ursache: `.tx-hero__chip` ist eine Flex-Reihe OHNE Umbruch, die an
   `right: 24px` haengt. Sind beide Chips zusammen breiter als der
   Bildschirm, waechst die Reihe nach LINKS aus dem Bild — im
   Screenshot war von „MIT LIEBE GEBAUT" nur noch „T LIEBE GEBAUT"
   zu sehen. Ein Chip mit 12px, Versalien und 0.2em Sperrung braucht
   viel Breite; auf 390px passen zwei davon nicht nebeneinander.

   Markup liegt im Plugin tx_hero_slider (nicht im Repo) — deshalb
   hier per CSS gelöst, ohne das Plugin anzufassen.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tx-hero__chip {
    /* Beide Kanten binden statt nur rechts: die Reihe kann jetzt
       schrumpfen und umbrechen, statt links hinauszulaufen. */
    left: 12px;
    right: 12px;
    bottom: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .tx-hero__chip .tx-chip {
    font-size: 10px;
    letter-spacing: .12em;
    padding: 4px 8px;
    max-width: 100%;
  }

  /* HUD kleiner und naeher an die Ecke — 0.25em Sperrung bei 12px
     macht die Zeile auf einem Telefon unnoetig breit. */
  .tx-hero__hud {
    top: 12px;
    left: 12px;
    right: 12px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .tx-hero__hud::before { width: 6px; height: 6px; margin-right: 6px; }
}

/* Sicherheitsnetz auch oberhalb der Mobil-Grenze: die Chips duerfen
   nie ueber die linke Kante hinauslaufen, egal wie lang der Text ist. */
.tx-hero__chip { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 32px); }

/* Nachtrag Hero-Chips: `left`+`right` allein reichen nicht — eine
   Flex-Box hat `min-width: auto` und waechst trotzdem auf ihre
   Mindestbreite (gemessen 368px bei 360px Viewport). Erst `min-width: 0`
   laesst sie schrumpfen, dann greift der Umbruch. */
.tx-hero__chip { min-width: 0; }
@media (max-width: 767px) {
  .tx-hero__chip { min-width: 0; }
  .tx-hero__chip .tx-chip {
    min-width: 0;
    white-space: normal;      /* darf im Notfall zweizeilig werden */
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY-PANEL · KOMPAKT (2026-07-30)
   ───────────────────────────────────────────────────────────────
   User: „schau mal wie Systemtreff das löst. ohne foto, artikel-
   liste scrollbar … bisher ist die sticky zu groß."

   Gemessen vorher: 1110px. Aufteilung Bild 150 / Name 40 /
   Leistung 104 / Preis+Hinweis 63 / Knopf 49 / Liste 350 /
   Vertrauensliste 142 / Zahlarten 33.

   Drei Hebel, alle ohne Informationsverlust:
     Bild raus            −150  (steht im Hero darüber groß)
     Vertrauensliste raus −142  (wortgleich in der Sektion darunter)
     Leistung einzeilig    −55  (Zahl bleibt sichtbar, siehe unten)
   Dazu bekommt die Komponentenliste einen eigenen Scrollbereich —
   damit ist die Panelhöhe nach oben beschränkt, egal wie viele
   Konfiggruppen ein PC hat.
   ═══════════════════════════════════════════════════════════════ */

/* ── Leistung: eine Zeile statt drei ──
   BEWUSST kein Reiter wie bei Systemtreff („ÜBERSICHT / FPS
   BENCHMARK"): der FPS-Wert ist unser staerkstes Unterscheidungs-
   merkmal, hinter einem Reiter saehe ihn kaum jemand. Gerechnet
   nimmt sich beides ohnehin nichts — ein Reiterband kostet selbst
   ~36px, die kompakte Zeile spart dieselben ~55px UND bleibt
   sichtbar. */
.tx-cfg-v2__perf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "value spiel"
    "note  note";
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  padding: 10px 12px;
}
.tx-cfg-v2__perf-value { grid-area: value; }
.tx-cfg-v2__perf-top   { grid-area: spiel; justify-content: flex-end; margin: 0; }
.tx-cfg-v2__perf-note  { grid-area: note; }
/* „Gaming" ist ueberfluessig, sobald das Spiel danebensteht. */
.tx-cfg-v2__perf-head { display: none; }
.tx-cfg-v2__perf-game { max-width: 100%; }

/* ── Komponentenliste mit eigenem Scrollbereich ──
   Die Hoehe richtet sich nach dem, was der Rest des Panels braucht
   (~430px): auf hohen Schirmen zeigt die Liste mehr, auf flachen
   weniger, das Panel bleibt immer im Bild. */
/* Scrollen NUR wenn noetig (User, 2026-07-30: „scrollen koennen wir,
   wenn aufloesung kleiner").

   Der erste Versuch hatte einen festen Deckel von 430px — und traf
   damit fast genau die Inhaltshoehe. Ergebnis: auf JEDEM Schirm eine
   Bildlaufleiste, nur um eine einzige Zeile zu verdecken. Der Deckel
   darf keine willkuerliche Zahl sein, sondern muss aus dem Platz
   folgen, der tatsaechlich uebrig ist.

   Gemessen am fertigen Panel: Rest ohne Liste 421px, sticky-Abstand
   oben 80px, 16px Luft unten -> die Liste darf 100vh - 517px hoch
   sein, damit das GANZE Panel in den Viewport passt.
   Mit `overflow-y: auto` erscheint die Bildlaufleiste dadurch von
   selbst nur dann, wenn der Inhalt wirklich nicht passt:
     1400px Viewport -> 883px erlaubt, Inhalt 474px -> keine Leiste
      900px Viewport -> 383px erlaubt, Inhalt 474px -> Leiste
   Untergrenze 200px, damit die Liste auf sehr flachen Schirmen nicht
   auf einen Spalt zusammenfaellt. */
/* Der Scrollbereich gilt NUR im Sidebar-Layout (ab 1100px). Darunter
   liegt das Panel als volle Breite im Fluss und die Liste ist
   ZWEISPALTIG gesetzt (`columns: 2`, weiter oben) — ein `overflow`
   erzeugt dort zusaetzliche Spalten RECHTS ausserhalb der Box:
   gemessen scrollWidth 1320 bei 646px Box, die Zeile „Zusatz SSD"
   stand bei x=707..1381. Mit `overflow-x: hidden` waere sie schlicht
   verschwunden. Deshalb: unterhalb 1100px kein Deckel, kein Scrollen. */
@media (min-width: 1100px) {
  .tx-cfg-v2__specs {
    max-height: max(200px, calc(100vh - 517px));
    overflow-y: auto;
    /* Wird nur `overflow-y` gesetzt, rechnet der Browser `overflow-x`
       von `visible` auf `auto` — einspaltig gibt es hier nichts zu
       schieben, die Achse wird trotzdem ausdruecklich zugesperrt. */
    overflow-x: hidden;
    scrollbar-width: thin;
  }
}
.tx-cfg-v2__specs::-webkit-scrollbar { width: 5px; }
.tx-cfg-v2__specs::-webkit-scrollbar-thumb {
  background: var(--tx-line-2);
  border-radius: 3px;
}
.tx-cfg-v2__specs::-webkit-scrollbar-track { background: transparent; }
/* Weicher Auslauf unten als Hinweis „da kommt noch was" — ohne
   zusaetzliches Element, rein als Hintergrund am Container. */
.tx-cfg-v2__specs { scroll-padding-bottom: 8px; }

/* Da die Liste jetzt selbst scrollt, braucht das Panel keinen
   eigenen Scrollbereich mehr — zwei verschachtelte waeren eine
   Falle (man weiss nie, welcher gerade scrollt). Der Deckel bleibt
   als Notnagel, nur grosszuegiger. */
.tx-cfg-v2__side-inner {
  max-height: none;
  overflow-y: visible;
}

/* Zahlarten ruecken nach dem Wegfall der Vertrauensliste direkt
   unter die Komponenten — etwas mehr Luft nach oben. */
.tx-cfg-v2__pay { margin-top: 18px; }

/* Die weiche Blende am Listenende ist wieder RAUS (User, 2026-07-30:
   „die scroll animation in der liste weg"). Beim Scrollen wanderte der
   ausgeblichene Bereich mit und wirkte wie ein Effekt. Dass die Liste
   scrollt, zeigen jetzt die schmale Bildlaufleiste und die Trennlinie
   darunter — ruhiger und ohne Bewegung. */

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR · PANEL BÜNDIG + GLIEDERUNG (2026-07-30)
   ───────────────────────────────────────────────────────────────
   1) Panel bündig mit der ersten Auswahlbox: die Überschrift ist
      jetzt eigene Rasterzeile über der LINKEN Spalte, das Panel
      startet in Reihe 2. Vorher lief es oben neben der Überschrift
      mit und stand deutlich über der Gehäusebox.
   2) Zusammenfassung gegliedert: Pflicht, dann „Optional",
      dann „Zubehör" als Symbolreihe.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-v2 {
  grid-template-areas:
    "kopf ."
    "main side";
}
.tx-cfg-v2 > .tx-cfg-comps__head { grid-area: kopf; }
.tx-cfg-v2 > .tx-cfg-v2__main    { grid-area: main; }
.tx-cfg-v2 > .tx-cfg-v2__side    { grid-area: side; }

/* ── Abschnittsüberschrift in der Zusammenfassung ── */
.tx-cfg-v2__spec-sep {
  list-style: none;
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cfg-v2__spec-sep:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Zubehör als Symbolreihe ──
   Bewusst KEINE vollen Textzeilen: es sind bis zu fünf Gruppen, die
   meist leer sind. Als Zeilen wuerden sie die Zusammenfassung
   dominieren, obwohl nichts gewaehlt ist. Jede Kachel ist zugleich
   Sprungmarke in die Gruppe (derselbe Handler wie die Zeilen). */
.tx-cfg-v2__peri-head {
  margin: 16px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-cfg-v2__peri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 6px;
}
.tx-cfg-v2__peri-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px 7px;
  background: none;
  border: 1px solid var(--tx-line);
  border-radius: 2px;
  color: var(--tx-text-mute);
  font-family: var(--tx-sub);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tx-cfg-v2__peri-item span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-cfg-v2__peri-item:hover { border-color: var(--tx-text-dim); color: var(--tx-text); }
.tx-cfg-v2__peri-item:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 1px; }
/* Gewaehlt: Markenfarbe statt Haken — flach, kein zusaetzliches Symbol. */
.tx-cfg-v2__peri-item.is-on {
  border-color: var(--tx-mint);
  color: var(--tx-mint);
  background: rgba(1, 222, 194, .06);
}

@media (max-width: 1099.98px) {
  /* Einspaltig: die Rasterflächen wieder aufheben, sonst bleibt
     rechts neben der Überschrift eine leere Spalte stehen. */
  .tx-cfg-v2 { grid-template-areas: none; }
  .tx-cfg-v2 > .tx-cfg-comps__head,
  .tx-cfg-v2 > .tx-cfg-v2__main,
  .tx-cfg-v2 > .tx-cfg-v2__side { grid-area: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   LEISTUNGSKLASSE · die „Level up"-Rueckmeldung (2026-07-30)
   ───────────────────────────────────────────────────────────────
   User vermisste das Level-up aus der alten Sticky-Bar. Umgesetzt
   als Stufenbalken statt als Effekt: der Balken waechst mit jedem
   Upgrade, und beim Ueberschreiten einer Bildwiederholraten-Schwelle
   erscheint kurz „Level up". Damit haengt die Belohnung an einer
   nachpruefbaren Zahl — und kann nicht behaupten, was die Hardware
   nicht hergibt.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-v2__tier {
  grid-area: tier;
  margin-top: 8px;
}
.tx-cfg-v2__tier-bar {
  position: relative;
  height: 3px;
  background: var(--tx-line);
  overflow: hidden;
}
.tx-cfg-v2__tier-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tx-mint);
  /* Der Balken WAECHST sichtbar — das ist die eigentliche Bewegung,
     die der Nutzer als Fortschritt liest. */
  transition: width .5s cubic-bezier(.22, .8, .3, 1);
}
.tx-cfg-v2__tier-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}
.tx-cfg-v2__tier-name {
  font-family: var(--tx-sub);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  transition: color .3s;
}
.tx-cfg-v2__tier-up {
  font-family: var(--tx-sub);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-mint);
  white-space: nowrap;
}

/* Aufstieg: eine einzige, kurze Geste — der Name faerbt sich mint,
   „Level up" gleitet von unten herein. Nichts blinkt, nichts springt. */
.tx-cfg-v2__tier.is-up .tx-cfg-v2__tier-name { color: var(--tx-mint); }
.tx-cfg-v2__tier.is-up .tx-cfg-v2__tier-up { animation: txTierUp 2.4s ease-out; }
.tx-cfg-v2__tier.is-up .tx-cfg-v2__tier-bar > span {
  box-shadow: 0 0 10px rgba(1, 222, 194, .55);
}
@keyframes txTierUp {
  0%   { opacity: 0; transform: translateY(6px); }
  10%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tx-cfg-v2__tier-bar > span { transition: none; }
  .tx-cfg-v2__tier.is-up .tx-cfg-v2__tier-up { animation: none; }
}

/* Der Kasten hat jetzt eine vierte Zeile — Rasterflaeche ergaenzen. */
.tx-cfg-v2__perf {
  grid-template-areas:
    "value spiel"
    "note  note"
    "tier  tier";
}

/* ── Der Aufstiegs-Moment (2026-07-30) ──
   User: „die animation war gut, weil der kunde dann direkt gesehen hat,
   es war was geiles."

   Vorher wechselte nur die Rahmenfarbe — das sieht niemand. Jetzt hebt
   sich der ganze Leistungskasten kurz an: Rahmen mint, weicher Schein
   nach aussen, die FPS-Zahl atmet einmal. Eine Geste, ~900ms, danach
   ist wieder Ruhe. Bewusst kein Blinken und kein Konfetti — die Zahl
   ist echt, der Moment darf sie betonen, nicht ueberlagern. */
.tx-cfg-v2__perf {
  border: 1px solid var(--tx-line);
  transition: border-color .3s ease, box-shadow .5s ease;
}
.tx-cfg-v2__perf.is-up {
  border-color: var(--tx-mint);
  animation: txPerfUp .9s cubic-bezier(.22, .8, .3, 1);
}
@keyframes txPerfUp {
  0%   { box-shadow: 0 0 0 0 rgba(1, 222, 194, .38); }
  35%  { box-shadow: 0 0 22px 2px rgba(1, 222, 194, .30); }
  100% { box-shadow: 0 0 0 0 rgba(1, 222, 194, 0); }
}
.tx-cfg-v2__perf.is-up [data-cfg-perf-fps] {
  display: inline-block;
  animation: txFpsUp .9s cubic-bezier(.22, .8, .3, 1);
}
@keyframes txFpsUp {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tx-cfg-v2__perf.is-up,
  .tx-cfg-v2__perf.is-up [data-cfg-perf-fps] { animation: none; }
}

/* ── Brotkrümel auf Mobil aus (2026-07-31) ──
   Der letzte Krümel ist der volle Wawi-Name („GAMING PC KAGE X1 | AMD
   RYZEN 7 5700X | NVIDIA RTX 5060 TI | 32GB DDR4 | 1TB M.2 SSD") und
   lief über drei Zeilen — vor dem Produktbild, das die Seite eigentlich
   verkauft. Für Suchmaschinen bleibt die BreadcrumbList als JSON-LD
   (productdetails/index.tpl ~Z. 73) unberührt; sichtbar entfällt sie
   nur auf kleinen Schirmen. */
@media (max-width: 767px) {
  .tx-cfg-crumbs { display: none; }
}

/* ── Spec-Kacheln mobil ruhiger ──
   Bei zwei Spalten à 138px sind gesperrte Versalien-Labels wie
   „STROMANSCHLUSS" das Problem, nicht die Werte. Etwas kleiner und
   enger gesetzt, damit sie einzeilig bleiben. */
@media (max-width: 767px) {
  .tx-pdp-highlight__pills { row-gap: 12px; padding-top: 16px; }
  .tx-pdp-highlight__pills span { padding: 0 10px; }
  .tx-pdp-highlight__pills span:nth-child(2n + 1) { padding-left: 0; }
  .tx-pdp-highlight__pills span strong { font-size: 13px; }
  .tx-pdp-highlight__pills span em {
    font-size: 10px;
    letter-spacing: .06em;
    line-height: 1.3;
  }
}

/* ═══════════════════════════════════════════════════════════════
   KONFIGURATOR · ZWEI FILTERREIHEN TRENNEN (2026-07-31)
   ───────────────────────────────────────────────────────────────
   User: „hier sollten wir noch mehr abstand haben zwischen den namen
   und der auswahl zwischen gold und bronze."

   In der Netzteil-Gruppe stehen zwei voneinander unabhaengige Filter
   in einer Zeile: links die Hersteller, rechts die Effizienzklasse.
   Beide beginnen mit „Alle" — direkt nebeneinander liest sich das wie
   EINE Leiste mit einem doppelten Eintrag. Mehr Abstand allein reicht
   dafuer nicht; es braucht eine sichtbare Kante. Dasselbe Muster gibt
   es weiter oben schon zwischen Achse und Karussell-Pfeilen.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-tabs__list + .tx-cfg-tabs__axis,
.tx-cfg-tabs__axis + .tx-cfg-tabs__axis {
  position: relative;
  margin-left: 34px;
  padding-left: 26px;
}
.tx-cfg-tabs__list + .tx-cfg-tabs__axis::before,
.tx-cfg-tabs__axis + .tx-cfg-tabs__axis::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--tx-line-2);
}

@media (max-width: 767px) {
  /* Auf Mobil scrollt die Leiste seitlich — dort kostet der grosse
     Abstand nur Wischweg, die Kante allein trennt genug. */
  .tx-cfg-tabs__list + .tx-cfg-tabs__axis,
  .tx-cfg-tabs__axis + .tx-cfg-tabs__axis {
    margin-left: 16px;
    padding-left: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   KOPFZEILE · PREIS HINTER DEN NAMEN (2026-07-31)
   ───────────────────────────────────────────────────────────────
   User: „das INKLUSIVE sollte hinter den namen, oder hinter den
   namen halt der aufpreis, wenn einer da ist … dann haben wir
   rechts das Erforderlich."

   Rechts steht damit nur noch Pflicht/Optional, der Preis klebt am
   Produkt. Bei langen Namen darf der Name kuerzen, der Preis nie —
   er ist die kuerzere und wichtigere Angabe.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-row__valline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.tx-cfg-row__valline .tx-cfg-row__val {
  min-width: 0;
  flex: 0 1 auto;
}
.tx-cfg-row__price-val {
  flex: 0 0 auto;
  font-family: var(--tx-sub);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx-text-mute);
  white-space: nowrap;
}
/* Kostet die Wahl etwas, wird der Betrag zur Marke — das ist die
   Information, die der Kunde sucht. „inklusive" bleibt zurueckhaltend. */
.tx-cfg-row__price-val.is-extra {
  color: var(--tx-mint);
  font-weight: 700;
}

/* Rechte Zelle traegt nur noch die Pflicht-Marke — sie braucht keine
   eigene Spalte mehr in Preisbreite. */
.tx-cfg-row__price { gap: 0; }

/* Aufpreis in der Zusammenfassung: NUR wenn einer anfaellt. */
.tx-cfg-v2__spec-extra {
  display: block;
  margin-top: 1px;
  font-family: var(--tx-sub);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx-mint);
}

@media (max-width: 767px) {
  /* Auf Mobil bricht der Preis unter den Namen statt die Zeile zu
     sprengen — dort ist Hoehe billiger als Abschneiden. */
  .tx-cfg-row__valline { flex-wrap: wrap; gap: 2px 10px; }
  .tx-cfg-row__price-val { font-size: 12px; }
}

/* Pflicht-Marke zurueckgenommen: sie steht auf fast jeder Zeile und sagt
   dort immer dasselbe — in Markenfarbe war sie lauter als ihr Inhalt,
   jetzt wo sie allein rechts steht, fiel das auf. Mint bleibt dem
   vorbehalten, was der Kunde entscheidet (Auswahl, Aufpreis, Leistung). */
.tx-cfg-row__req { color: var(--tx-text-mute); }
.tx-cfg-row__req--opt { color: var(--tx-text-dim); }

/* ═══════════════════════════════════════════════════════════════
   REGRESSION-FIX (2026-07-31)
   ───────────────────────────────────────────────────────────────
   Beim Bündig-Machen (Runde 15) ist `.tx-cfg-comps__head` aus
   `.tx-cfg-v2__main` heraus in die Rasterzeile darüber gewandert.
   Damit griffen zwei ältere Regeln nicht mehr, die auf
   `.tx-cfg-v2__main .tx-cfg-comps__head` zielten — und der Block
   fiel auf seine Ur-Form zurück: ein 2-Spalten-Raster (1.5fr 1fr).
   Bei drei flachen Kindern landete dadurch der Kicker in Spalte 1,
   die ÜBERSCHRIFT in Spalte 2 (gemessen x=620 statt 64) und der
   Fließtext in Zeile 2. Genau das sah der User als „gesprengt".

   Die Regeln greifen jetzt am Konfigurator-Raster selbst, nicht mehr
   an der Mittelspalte — dann ist es egal, in welcher Zeile der Kopf
   sitzt.
   ═══════════════════════════════════════════════════════════════ */
.tx-cfg-v2 > .tx-cfg-comps__head {
  display: block;
  max-width: none;
  margin: 0 0 22px;
  padding-left: 0;
  padding-right: 0;
}
.tx-cfg-v2 > .tx-cfg-comps__head h2 { margin: 6px 0 8px; }

/* ── Zahlarten im Panel groesser (2026-07-31) ──
   User: „die zahlarten sind mir noch zu klein." Mit Klarna raus bleiben
   vier Logos — die duerfen dieselbe Flaeche auf vier statt fuenf
   Spalten verteilen und hoeher stehen. Sie sitzen direkt unter dem
   Kaufknopf und sind dort ein Vertrauenssignal, kein Beiwerk. */
.tx-cfg-v2__pay {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.tx-cfg-v2__pay img {
  height: 38px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 3px;
  opacity: .92;
}
.tx-cfg-v2__pay img:hover { opacity: 1; }

@media (max-width: 1099.98px) {
  /* Volle Panelbreite — dort wirken vier Spalten sehr breit. */
  .tx-cfg-v2__pay { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   INHALTSBOX · EINE STELLSCHRAUBE (2026-07-31)
   ───────────────────────────────────────────────────────────────
   User: „unser shop wirkt durch den grossen konfigurator jetzt
   nicht mehr symetrisch."

   Gemessen bei 1920px Fenster: Brotkrümel und der Rest des Shops
   standen in einer 1440er-Box (240→1680), Hero und Konfigurator in
   einer 1660er (130→1790) — also auf JEDER Seite 110px weiter
   aussen. Genau das sieht man als Versatz.

   Die 1440 war an 31 Stellen hart notiert. Sie laufen jetzt alle
   ueber `--tx-box`; damit ist die Shopbreite EINE Zahl. Der
   Konfigurator gibt sie vor (1660), weil er die anspruchsvollste
   Ansicht ist: bei 1440 blieben neben dem 369px-Panel nur ~980px
   fuer die Mittelspalte, und die Gehaeusekacheln fielen von vier
   auf drei Spalten zurueck.

   Zurueckdrehen = diese eine Zahl auf 1440 setzen.
   ═══════════════════════════════════════════════════════════════ */
:root { --tx-box: 1660px; }

/* Der PDP-Deckel war separat auf 1660 gesetzt — er zeigt jetzt auf
   dieselbe Zahl, sonst driften die beiden beim naechsten Umstellen
   wieder auseinander. */
:root { --tx-pdp-max: min(var(--tx-box), 100%); }

/* ═══════════════════════════════════════════════════════════════
   HERO · SPEC-LEISTE (2026-08-02)
   ───────────────────────────────────────────────────────────────
   User: „unten die SPEC Bar solid, round border oder border wie
   unsere buttons. dazu vorne FPS mit anzeigen. Dann GPU, CPU und
   Speicher."

   Vorher: drei einzelne Kaesten mit 12px Luecke, halbtransparent
   (`rgba(0,0,0,.3)`) und 1px-Rahmen — auf dem dunklen Hero kaum
   sichtbar und optisch zerfallen.

   Jetzt: EIN durchgehender Block mit der gekappten Ecke unserer
   Buttons. Der Rahmen laeuft als `box-shadow: inset` statt als
   `border` — ein echter Rahmen wird auf der clip-path-Kante beim
   Rastern abrasiert (dieselbe Lektion wie bei .tx-btn--ghost,
   17.07.). Trennlinien zwischen den Zellen statt Luecken.
   ═══════════════════════════════════════════════════════════════ */
.tx-hero__stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;                                  /* Trennlinien statt Luecken */
  margin-bottom: 30px;
  width: fit-content;
  max-width: 100%;

  background: rgba(12, 16, 16, .92);       /* solid, nicht durchscheinend */
  box-shadow: inset 0 0 0 1px var(--tx-line-2);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px,
                     100% 100%, 14px 100%, 0 calc(100% - 14px));

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tx-hero__stats::-webkit-scrollbar { display: none; }

.tx-hero__stats .tx-stat {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 14px 22px;
  border-left: 1px solid var(--tx-line);
  scroll-snap-align: start;
}
.tx-hero__stats .tx-stat:first-child { border-left: 0; padding-left: 24px; }
.tx-hero__stats .tx-stat:last-child  { padding-right: 26px; }

/* FPS ist die Antwort, die Hardware daneben die Begruendung —
   deshalb als einzige Zelle in Markenfarbe und eine Spur groesser. */
.tx-hero__stats .tx-stat--fps .tx-stat__val {
  color: var(--tx-mint);
  font-size: 1.18em;
}
.tx-hero__stats .tx-stat--fps .tx-stat__label { color: var(--tx-mint); opacity: .75; }

@media (max-width: 767px) {
  /* Mobil darf die Leiste wischbar sein, aber die gekappte Ecke wuerde
     beim horizontalen Scrollen den Inhalt beschneiden. */
  .tx-hero__stats { clip-path: none; width: 100%; }
  .tx-hero__stats .tx-stat { padding: 11px 14px; }
  .tx-hero__stats .tx-stat:first-child { padding-left: 16px; }
}

/* Der Textblock im Hero ist ein Grid-Kind. Ohne `min-width: 0` wuechse er
   auf die Breite seines breitesten Inhalts (die Spec-Leiste) statt sich der
   Rasterspalte zu fuegen — gemessen 439px in einer 358px-Spalte, die Leiste
   ragte damit mobil aus dem Bild statt zu scrollen. Gleiche Ursache wie bei
   den Hero-Chips (min-width: auto bei Flex/Grid-Kindern). */
.tx-hero__text { min-width: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   HERO 2.1 · Komposition, Typo, Bildgroesse            (2026-08-02)
   ───────────────────────────────────────────────────────────────────────
   Ausgangslage, im Browser gemessen (nicht gerechnet), bei 1920px:
     Hero 956px hoch, Inhalt 290px, 545px LEER darueber, Titel fix 67px,
     Bild 437x600 in einer 755px breiten Spalte (58 % Fuellung).

   Drei gestapelte Ursachen:
     1. .tx-hero__visual { aspect-ratio: 1/1 }   (custom.css oben)
        Die Bildspalte macht sich so hoch wie sie breit ist und diktiert
        damit die Hero-Hoehe — obwohl das Bild auf 600px gedeckelt war.
     2. .tx-hero-slide .tx-hero__inner { align-items: end }
        (Plugin ToxicHeroSlide.css:170) — der gesamte Ueberschuss landet
        OBEN. Daher das Loch.
     3. .tx-hero-slide .tx-hero__title { clamp(...,4.2rem) }
        (Plugin:42) — Deckel 67,2px, erreicht schon ab 1018px Viewport.

   WICHTIG zur Spezifitaet: das Portlet bringt eigene CSS mit, deren Regeln
   mit (0,2,0) gewinnen. Alles hier steht deshalb auf
   `.tx-hero-slider .tx-hero-slide …` = (0,3,0) und greift unabhaengig von
   der Ladereihenfolge.

   Die Hoehe bleibt bewusst GROSS. Ein Zwischenstand hatte sie ans
   Bannerformat gebunden (41vw) — das staucht den Hero bei 1440 auf 591px
   und macht aus beiden Slide-Typen flache Streifen. Alle Slides liegen im
   selben Grid (grid-area:stack), die PC-Slide gibt also auch den Partner-
   Bannern die Hoehe vor; die werden weiterhin per cover beschnitten, wofuer
   es im Portlet das Fokus-System data-img-focus gibt.
   Gemessen nachher bei 1920: Hero 961px, Inhalt 403px, 279/280 symmetrisch,
   Bild 683x845 = Spalte voll.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* EINE Hoehe fuer den Hero, aus der alles andere abgeleitet wird.
     Vorher gab es gar keine: die Hoehe war ein Nebenprodukt von
     aspect-ratio:1/1 auf der Bildspalte und wuchs mit --tx-box mit. */
  /* Die Hoehe folgt dem BANNER-Seitenverhaeltnis, nicht dem Geschmack.
     Alle Slides liegen im selben Grid (grid-area:stack) und teilen sich
     eine Hoehe — die PC-Slide diktiert sie also auch den Hersteller-
     Bannern. 100vw / 2.44 = 41vw ist genau das beschlossene Bannerformat
     2880x1180. Damit wird ein 2,44:1-Banner vollstaendig gezeigt statt
     beschnitten, und der Hero ist trotzdem gross.
     Gemessen VORHER bei 1440px: nur 53 % des Banners sichtbar. */
  /* KORREKTUR gegenueber dem ersten Entwurf: die Hoehe folgt NICHT dem
     Bannerformat. Das haette den Hero bei 1440 auf 591px gestaucht — aus
     beiden Slide-Typen waeren flache Streifen geworden. Die Beschwerde war
     nie "zu hoch", sondern "zu leer".
     Die Banner werden weiterhin per cover beschnitten; genau dafuer gibt es
     im Portlet das Fokus-System (data-img-focus), das steuert, welcher Teil
     stehen bleibt. Cover-Crop mit Fokuspunkt ist bei Partnermotiven der
     Normalfall, nicht der Fehler.
     Werte nah am Ist-Zustand (1440: 849 / 1920: 956), damit der grosse
     Hero erhalten bleibt. */
  --tx-hero-h:   clamp(720px, 50vw, 980px);
  --tx-hero-pad: clamp(40px, 2.6vw, 64px);
}

@media (min-width: 881px) {

  /* ── 1 · Die Zeile bekommt eine BESTIMMTE Hoehe ─────────────────────── */
  /* Wichtig: `height`, nicht `min-height`. Bei min-height bleibt die Hoehe
     unbestimmt, dann faellt `height:100%` am Bild auf `auto` zurueck, das
     Bild sizet sich nach seinem Seitenverhaeltnis und treibt die Zeile
     wieder auf. Genau das ist mir im ersten Entwurf passiert (1310px). */
  /* .tx-hero bringt zusaetzlich min-height:720px + padding 80/64 mit
     (custom.css:834-835). Das polstert ein zweites Mal — zusammen mit dem
     Zeilenpolster waren das 144px Luft, die niemand sieht ausser als Loch.
     Die Hoehe kommt ab jetzt AUSSCHLIESSLICH aus --tx-hero-h. */
  .tx-hero-slider .tx-hero-slide { min-height: 0; padding: 0; }
  .tx-hero-slider .tx-hero-slide .tx-hero__inner {
    height: var(--tx-hero-h);
    align-items: center;
    padding-block: var(--tx-hero-pad);
    /* Die Bildspalte wird aus der HOEHE abgeleitet, nicht als fr-Anteil:
       das Motiv ist Hochformat (0,728). Damit es die volle Hero-Hoehe
       ausfuellt, muss die Spalte Hoehe x 0,73 breit sein. Vorher war sie
       755px breit bei einem 437px breiten Bild — daher die waagerechte
       Leere. Der Rest gehoert der Textspalte.
       min() als Sicherung, damit die Spalte bei schmalem Desktop nicht
       mehr als 46 % der Box frisst. */
    /* 0,78 statt 0,73: die Spalte ist jetzt QUADRATISCH gedacht, nicht
       auf das Hochformat zugeschnitten. Zusammen mit aspect-ratio:1 am
       Bild bekommt damit JEDES Format dieselbe sichtbare Hoehe. */
    grid-template-columns:
      minmax(0, 1fr)
      min(calc(var(--tx-hero-h) * .78), 46%);
    gap: clamp(32px, 2.6vw, 56px);
  }

  /* ── 2 · Bild fuellt die Spalte, treibt aber keine Hoehe ────────────── */
  .tx-hero-slider .tx-hero-slide .tx-hero__visual {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 0;
    /* ueber das Padding hinaus bis an die Hero-Kanten */
    margin-block: calc(var(--tx-hero-pad) * -1);
    /* Spalte statt Zeile: sonst wird die Chip-Zeile zum Flex-Geschwister
       NEBEN dem Bild und laeuft in die Randlabels. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--tx-hero-pad);
  }
  .tx-hero-slider .tx-hero-slide .tx-hero__visual img {
    max-height: none;
    width: 100%;
    /* NICHT 100%: das Motiv fuellt seine Leinwand randlos aus (gemessene
       Motiv-Bbox = volle Bilddatei). Bei exakt 100% stoesst das Gehaeuse
       oben hart an die Hero-Kante und liest sich als abgeschnitten. */
    /* Als Flex-Kind der Spalte: nimmt den Rest der Hoehe, gibt die
       Chip-Zeile darunter frei. min-height:0 verhindert, dass es die
       Spalte wieder aufblaeht. */
    /* aspect-ratio:1 macht die Bildbox quadratisch. Mit object-fit:contain
       ist dann fuer JEDES Seitenverhaeltnis die HOEHE der bindende Faktor:
       Hochformat 0,728 wird 0,728W breit, Quadrat wird W breit — beide
       exakt W hoch. Vorher war die Spalte aus 0,73 abgeleitet, dadurch
       waren quadratische Motive breitenbegrenzt und 24 % niedriger als
       das hochformatige SHIRO (gemessen 683 gegen 845 bei 1920px).
       Das ist die CSS-Haelfte der Loesung; die andere ist ein gemeinsames
       Quellformat fuer alle Freisteller. */
    flex: 0 0 auto;
    aspect-ratio: 1;
    min-height: 0;
    height: auto;
    /* Das Motiv fuellt seine Leinwand randlos aus — ohne diesen Abstand
       stoesst das Gehaeuse oben an die Hero-Kante und liest sich als
       abgeschnitten (bei 1440 nachgemessen). */
    margin-top: 28px;
    object-fit: contain;
    object-position: center bottom;
  }

  /* ── Spec-Leiste darf die Textspalte tragen ─────────────────────────── */
  /* Sie stand auf width:fit-content und wirkte dadurch wie ein Zettel in
     einer sehr breiten Spalte. */
  .tx-hero-slider .tx-hero-slide .tx-hero__stats {
    width: 100%;
    max-width: 760px;
  }

  /* ── Spec-Labels lesbar machen ───────────────────────────────────────── */
  /* Ist-Zustand (ToxicHeroSlide.css:76-79): 'Share Tech Mono' in .55rem
     = 8,8px, mint auf .92 Deckkraft. Zwei Probleme auf einmal:
     die Schrift wurde am 17.07. shopweit gegen Rajdhani ersetzt, und
     8,8px liegt unter jeder Lesbarkeitsgrenze — bei .17em Sperrung erst
     recht. Jetzt Rajdhani 700 in 11-13px, gesperrt, in Textfarbe statt
     Mint: Mint bleibt der FPS-Zahl und der Titelsilbe vorbehalten,
     sonst zaehlt man die Markenfarbe nicht mehr. */
  .tx-hero-slider .tx-hero-slide .tx-hero__stats .tx-stat__label {
    font-family: var(--tx-sub), 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(.6875rem, .665rem + .0922vw, .8125rem);  /* 11 … 13px */
    letter-spacing: .16em;
    line-height: 1;
    color: var(--tx-text-mute);
    opacity: 1;
  }
  /* Die FPS-Zelle behaelt Mint — sie ist die Zahl, nach der gesucht wird. */
  .tx-hero-slider .tx-hero-slide .tx-hero__stats > .tx-stat:first-child .tx-stat__label {
    color: var(--tx-mint);
  }
  /* Werte eine Spur groesser, damit Label und Wert nicht gleich wiegen. */
  .tx-hero-slider .tx-hero-slide .tx-hero__stats .tx-stat__val {
    font-size: clamp(.9375rem, .9rem + .16vw, 1.125rem);      /* 15 … 18px */
    line-height: 1.25;
  }
  /* Icon vor dem Label mitwachsen lassen — sonst kippt die Grundlinie. */
  .tx-hero-slider .tx-hero-slide .tx-hero__stats .tx-stat__label::before {
    width: 15px; height: 15px;
  }

  /* ── 3 · Titel skaliert bis 2560 durch, ZWEIZEILIG ──────────────────── */
  /* Der zweite Teil (em) stand bisher inline: "SHIROX1" in einer Zeile.
     Als Block darunter wird der Titel doppelt so hoch und traegt den
     grossen Hero — das ist der auffaelligste Unterschied zum Zielbild. */
  .tx-hero-slider .tx-hero-slide .tx-hero__title {
    font-size: clamp(2.4rem, 1.34rem + 3.23vw, 6.5rem);  /* 38 … 104px */
    line-height: .88;
    letter-spacing: -.03em;
  }
  .tx-hero-slider .tx-hero-slide .tx-hero__title em {
    display: block;
    font-style: normal;
  }
  /* Mint-Strich unter dem Titel wie im Zielbild — flach, 1px, kein Rahmen. */
  .tx-hero-slider .tx-hero-slide .tx-hero__title::after {
    content: '';
    display: block;
    width: 56px; height: 2px;
    background: var(--tx-mint);
    margin: 20px 0 0;
  }

  /* ── 4 · Textspalte darf die Spur ausnutzen ─────────────────────────── */
  .tx-hero-slider .tx-hero-slide .tx-hero__inner > *:first-child {
    max-width: none;
  }
  .tx-hero-slider .tx-hero-slide .tx-hero__lead {
    max-width: 52ch;
  }

  /* ── 5 · Deko, die Leere rahmt statt Produkt ───────────────────────── */
  /* Die acht Eckwinkel sitzen auf inset:0 der 755px-Buehne — also rund
     160px neben dem PC. Sie rahmen nichts. Und der schwarze Schlagschatten
     liegt auf #0B0C0D, leistet also messbar null. */
  .tx-hero-slider .tx-hero-slide .tx-hero__visual::after { content: none; }
  .tx-hero-slider .tx-hero-slide .tx-hero__visual img { filter: none; }

  /* ── 6 · Die eingebackene Spiegelung wegmaskieren ───────────────────── */
  /* Gemessen: der Reflex unter dem Gehaeuse hat Helligkeit L=193 bei 11 %
     Deckung. Ueber #0B0C0D (L=12) ergibt das einen milchigen Nebel — eine
     Reflexion auf dunklem Boden ist aber IMMER dunkler als der Boden, nie
     heller. Genau das liest man als "billig".
     Korpus endet bei ca. 88 % Bildhoehe, Reflex laeuft bis 97 %. */
  .tx-hero-slider .tx-hero-slide .tx-hero__visual img {
    -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 87%, transparent 96%);
  }
  /* Standflaeche als flache Kontaktlinie statt Verlauf ueber Flaeche. */
  /* Der Mint-Radial-Blur hinter dem Gehaeuse faellt ersatzlos weg: er ist
     ein Verlauf ueber Flaeche (verboten) und verschwindet hinter einem
     weissen Korpus ohnehin vollstaendig. Eine Kontaktlinie hatte ich
     versucht — sie fiel mit der Hero-Trennlinie zusammen und las sich als
     bunter Abschnitt davon. Der Freisteller auf Schwarz braucht keinen
     Boden. */
  .tx-hero-slider .tx-hero-slide .tx-hero__visual::before { content: none; }

  /* ── 8a · Geistertext hinter dem Titel ──────────────────────────────── */
  /* Fuellt die Hoehe des grossen Hero, ohne eine einzige neue Aussage.
     Nur Kontur, keine Flaeche: eine gefuellte Version waere ein zweiter
     Grauton und wuerde mit dem Lead konkurrieren.
     Braucht data-ghost am Textblock (eine Zeile im Template). */
  .tx-hero-slider .tx-hero-slide .tx-hero__text { position: relative; }
  .tx-hero-slider .tx-hero-slide .tx-hero__text::before {
    content: attr(data-ghost);
    position: absolute;
    left: -.05em;
    top: 50%;
    transform: translateY(-58%);
    font-family: var(--tx-h);
    font-weight: 800;
    font-size: clamp(7rem, 15.5vw, 19rem);
    line-height: .78;
    letter-spacing: -.055em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .052);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  /* Die echten Inhalte muessen davor liegen — sonst verschluckt der
     Geistertext den Kicker. */
  .tx-hero-slider .tx-hero-slide .tx-hero__text > * { position: relative; }

  /* ── 8b · Lead bekommt Gewicht ──────────────────────────────────────── */
  .tx-hero-slider .tx-hero-slide .tx-hero__lead {
    font-size: clamp(1rem, .94rem + .23vw, 1.3125rem);
    line-height: 1.55;
    max-width: 46ch;
  }

  /* ── 8c · Chips als flache Zeile UNTER dem Bild ─────────────────────── */
  /* Vorher schwebten sie als Kaesten ueber den Gehaeusefuessen. Als Zeile
     im Fluss kollidieren sie mit nichts und lesen sich als Zusage. */
  .tx-hero-slider .tx-hero-slide .tx-hero__chip {
    display: flex;
    position: static;
    justify-content: center;
    gap: clamp(16px, 1.6vw, 32px);
    margin-top: 18px;
    flex-wrap: wrap;
  }
  .tx-hero-slider .tx-hero-slide .tx-hero__chip .tx-chip {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tx-text-mute);
    font-family: var(--tx-sub);
    font-weight: 600;
    font-size: clamp(.6875rem, .66rem + .1vw, .8125rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Randlabels bleiben — sie stehen so auch im Zielbild. Aber sie brauchen
     PLATZ: bisher lagen sie einfach auf der Bildspalte. Solange das Bild
     klein war (437px in 648px Spalte) fiel das nicht auf; jetzt fuellt es
     die Spalte und ueberdeckt die Labels. Deshalb reserviert die Zeile
     rechts 112px, statt die Labels darueber zu legen. */
  .tx-hero-slider .tx-hero-slide .tx-hero__sidebar { display: flex; }
  /* Platz fuer die Randlabels — aber nur, solange das Fenster ihn nicht
     ohnehin neben der Inhaltsbox hat. Ab ca. 1920px liegt links und rechts
     genug schwarzer Rand, dort kostet die Reserve nur Bildgroesse.
     1440 -> 160px, 1660 -> 160px, 1920 -> 32px, darueber 32px. */
  .tx-hero-slider .tx-hero-slide .tx-container {
    padding-right: clamp(32px, calc(160px - (100vw - var(--tx-box)) / 2), 160px);
  }

  /* ── 8 · Titel ohne Schein ──────────────────────────────────────────── */
  /* text-shadow 0 0 40px / 0 0 60px mint ist Deko-Schatten und laesst die
     Markenfarbe ausbluten — der Effektivkontrast der mint Silbe sinkt. */
  .tx-hero-slider .tx-hero-slide .tx-hero__title,
  .tx-hero-slider .tx-hero-slide .tx-hero__title em { text-shadow: none; }

}

/* ── 7 · Deko raus, die Inhalt ueberlagert oder Leere rahmt ──────────── */
/* Alle drei sind aria-hidden, tragen also keine Information, kosten aber
   Platz und kollidieren jetzt mit dem groesseren Bild:
   - __sidebar : lag auf dem Gehaeuse und wurde von ihm zerschnitten
   - __chip    : klebte auf den Gehaeusefuessen; die Aussagen
                 "mit liebe gebaut" / "Lieferzeit 3-7 Werktage" stehen
                 ausserdem nicht auf der Freigabeliste
   - __hud     : blinkender Punkt direkt neben dem LCP-Element
   Was davon als echter Text zurueckkommt, entscheidet der Kunde. */
.tx-hero-slider .tx-hero-slide .tx-hero__hud { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT „banner" — Startseite v2                            (2026-08-03)
   ───────────────────────────────────────────────────────────────────────
   Greift nur, wenn der Container auf `layout = banner` steht. Ohne diesen
   Modifier bleibt oben alles unveraendert; deshalb kann dieser Block schon
   ausgeliefert sein, bevor die neuen Slides gepflegt sind.

   Spezifitaet: .tx-hero-slider.tx-hero-slider--banner … ist (0,2,0) und schlaegt die
   Basisregeln aus custom.css (0,1,0) unabhaengig von der Ladereihenfolge.
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Ueberblendung bleibt. Der Handoff beschreibt einen Schiebe-Track mit
   width:500% — das setzt exakt fuenf Slides voraus, im OPC kann aber
   jederzeit ein sechster dazukommen. Der Grid-Stapel ist anzahlunabhaengig
   und traegt die gesamte Editor-Vorschau. */

/* ── Slide-Tabs unten links statt Balken mittig ───────────────────────── */
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bars {
  position: absolute;
  left: 0; right: 0;
  /* An der BUEHNE ausrichten, nicht am Slide: der Slide traegt zusaetzlich
     die Systemleiste und ist deutlich hoeher. --tx-hbn-stage-h kommt aus
     ToxicHeroBanner.css, beide benutzen denselben Wert. Rueckfall fuer den
     Fall, dass nur alte Slides im Track liegen. */
  top: calc(var(--tx-hbn-stage-h, 100%) - 42px);
  bottom: auto;
  transform: none;
  /* Gleiche Geometrie wie .tx-container, damit der erste Strich exakt unter
     der Headline steht — ohne zweites Markup-Element. Keine vw-Rechnung:
     100vw enthaelt die Scrollleiste, die Elementbreite nicht. */
  width: auto;
  max-width: var(--tx-box, 1660px);
  margin-inline: auto;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  z-index: 5;
  /* Sonst faengt die leere Flaeche der Leiste Klicks ab, die dem
     Pause-Knopf daneben gelten. */
  pointer-events: none;
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto; height: auto;
  padding: 8px 0;              /* Trefferflaeche >= 24px, der Strich ist 2px */
  background: none;
  border: 0;
  clip-path: none;             /* die 3px-Fase der alten Balken faellt weg */
  cursor: pointer;
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar.is-active {
  width: auto;
  background: none;
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar-line {
  width: 32px; height: 2px;
  flex: none;
  /* Handoff: #2B3A39. Gemessen 1,70:1 gegen den Scrim — auf dem Handy sind
     die Beschriftungen ausgeblendet, dort traegt der Strich den Zustand
     ALLEIN und muss 3:1 erreichen (WCAG 1.4.11). #4A5F5D = 3,04:1. */
  background: #4A5F5D;
  transition: background .15s;
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar.is-active .tx-hero-slider__bar-line {
  background: var(--tx-mint, #01DEC2);
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar-label {
  font-family: var(--tx-sub, 'Rajdhani', sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-text-mute, #ABB2B5);   /* 9,39:1 statt der 4,83:1 des Handoffs */
  transition: color .15s;
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar.is-active .tx-hero-slider__bar-label {
  color: var(--tx-text, #ECEFEE);
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar:focus-visible {
  outline: 2px solid var(--tx-mint, #01DEC2);
  outline-offset: 3px;
}

/* ── Pause-Knopf ──────────────────────────────────────────────────────── */
/* Gehoert auf die Buehne, nicht an die Unterkante des Slides — dort saesse er
   seit der Systemleiste zwischen den Produktkarten. */
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__playpause {
  top: calc(var(--tx-hbn-stage-h, 100%) - 56px);
  bottom: auto;
}

/* ── Pfeile ───────────────────────────────────────────────────────────── */
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__arrow {
  /* dito: Mitte der Buehne, nicht Mitte des Slides */
  top: calc(var(--tx-hbn-stage-h, 100%) / 2);
  width: 46px; height: 46px;
  background: rgba(7, 13, 14, .73);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  color: var(--tx-text, #ECEFEE);
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__arrow:hover {
  color: var(--tx-mint, #01DEC2);
  background: rgba(7, 13, 14, .9);
  box-shadow: inset 0 0 0 1px var(--tx-mint, #01DEC2);
}
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__arrow--prev { left: 16px; }
.tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__arrow--next { right: 16px; }

@media (max-width: 759px) {
  /* Handoff: mobil Wisch statt Pfeile. Die Tastaturbedienung bleibt ueber
     die Tabs und die Pfeiltasten am Slider erhalten. */
  .tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__arrow { display: none; }
  .tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bars {
    gap: 10px;
    /* 16px, nicht 20 wie im Handoff: .tx-container polstert mobil mit 16px,
       gemessen begann der Text bei 16 und der erste Tabstrich bei 20. */
    padding-inline: 16px;
    /* Die Beschriftungen bleiben sichtbar und werden wischbar, statt sie
       auszublenden — im Prototyp des Kunden ist das so geloest und es ist
       die bessere Loesung: fuenf namenlose Striche sagen nichts. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bars::-webkit-scrollbar { display: none; }
  .tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar-line  { width: 22px; }
  .tx-hero-slider.tx-hero-slider--banner .tx-hero-slider__bar-label { font-size: 11px; }
}



/* ==============================================================================
   ============================== SPIEL-SUCHE · BEGIN ===========================
   Startseiten-Sektion „Sag uns dein Spiel" — Umsetzung von
   design_handoff_spielsuche/. Zum Entfernen: alles zwischen BEGIN/END loeschen,
   dazu snippets/tx_spielsuche.tpl, js/spielsuche.js und lib/TxPcCatalog.php.

   Der Handoff nennt eigene Farben (#22E3C0) und Schriften (Saira Condensed,
   IBM Plex). Uebernommen ist die Gestaltung, nicht die Palette — es gilt
   unsere: Markenfarbe #01DEC2, Oxanium fuer Anzeigetext, Rajdhani fuer
   Beschriftungen, Inter fuer Fliesstext. Gleiche Entscheidung wie beim
   Hero-Handoff.
   ============================================================================== */

.tx-sps {
  /* Etwas dunkler als die Nachbarsektionen — das trennt sie optisch, ohne
     einen Rahmen oder einen Verlauf zu brauchen. */
  background: #08090B;
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
  padding-block: clamp(44px, 5vw, 80px);
}

/* ─── Kopf ─────────────────────────────────────────────────────────────── */
.tx-sps__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}
.tx-sps__lead {
  flex: 0 1 440px;
  margin: 0;
  text-align: right;
  font-family: var(--tx-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx-text-mute);
}

/* ─── Filterleiste ──────────────────────────────────────────────────────
   Nur Haarlinien, kein Kasten: die Karten sollen die Aufmerksamkeit
   bekommen, nicht das Bedienfeld. */
.tx-sps__filter {
  display: flex;
  align-items: center;
  gap: 0 24px;
  padding-block: 12px;
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
  margin-bottom: 24px;
}
.tx-sps__field {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Ohne das wachsen Felder mit langem Inhalt auf dessen Breite und sprengen
     die Zeile — die Falle ist im Projekt schon zweimal aufgetreten. */
  min-width: 0;
}
.tx-sps__field + .tx-sps__field { border-left: 1px solid var(--tx-line); padding-left: 24px; }
.tx-sps__field--game { flex: 0 1 340px; }

.tx-sps__label {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  white-space: nowrap;
}

/* ─── Auswahlliste Spiel ────────────────────────────────────────────────── */
.tx-sps__select { position: relative; flex: 1 1 auto; min-width: 180px; }
.tx-sps__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--tx-bg);
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text);
  font-family: var(--tx-h);
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  cursor: pointer;
}
.tx-sps.is-listeauf .tx-sps__trigger { border-color: var(--tx-text-mute); }
.tx-sps__trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-sps__caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--tx-text-mute);
}
.tx-sps.is-listeauf .tx-sps__caret { transform: rotate(180deg); }

.tx-sps__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  background: var(--tx-bg);
  border: 1px solid var(--tx-line-2);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .8);
}
.tx-sps__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--tx-line);
  font-family: var(--tx-body);
  font-size: 15px;
  color: var(--tx-text-dim);
  cursor: pointer;
}
.tx-sps__opt:last-child { border-bottom: 0; }
.tx-sps__opt:hover,
.tx-sps__opt:focus-visible { background: var(--tx-bg-2); color: var(--tx-text); outline: none; }
.tx-sps__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--tx-mint); }
.tx-sps__opt.is-on { background: var(--tx-bg-2); color: var(--tx-text); }
.tx-sps__opt i {
  font-style: normal;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--tx-text-mute);
  white-space: nowrap;
}

/* ─── Chips ─────────────────────────────────────────────────────────────
   Bewusst grau und nicht in der Markenfarbe: Tuerkis ist im Shop fuer
   Kauf-Aktionen reserviert und soll zaehlbar bleiben. */
.tx-sps__chips { display: flex; gap: 8px; }
.tx-sps__chip {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--tx-line-2);
  color: var(--tx-text-dim);
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
}
.tx-sps__chip.is-on { border-color: var(--tx-text-mute); color: var(--tx-text); background: #141819; }
.tx-sps__chip:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 2px; }

.tx-sps__count {
  margin: 0 0 0 auto;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  text-align: right;
}

/* ─── Raster ────────────────────────────────────────────────────────────── */
.tx-sps__grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.tx-sps[data-bp="lg"] .tx-sps__grid { grid-template-columns: repeat(3, 1fr); }
.tx-sps[data-bp="xl"] .tx-sps__grid { grid-template-columns: repeat(4, 1fr); }

/* ─── Karte ─────────────────────────────────────────────────────────────
   Hochformat: das Gehaeuse ist das Verkaufsargument.

   Der Rahmen liegt in zwei Lagen statt in einem inneren Schatten. Auf einer
   gekappten Ecke rasiert ein echter border die Kante ab, und ein
   box-shadow: inset verliert bei gebrochener Hoehe die unterste Reihe — im
   Raster mit 1fr ist eine gebrochene Hoehe der Normalfall. Gleiche Loesung
   wie .tx-hbn__card. */
.tx-sps-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 680px;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tx-sps-card::before,
.tx-sps-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tx-sps-card::before { background: var(--tx-line); }
.tx-sps-card::after {
  inset: 1px;
  /* Schwarz statt der Kartenfarbe (#14171A). Die Karte steht damit etwas
     TIEFER als die Seite (#0B0C0D), nicht darueber — sie liest sich als
     Vertiefung.

     ⚠️ Diese Lage MUSS deckend bleiben. Der Rahmen ist keine `border`,
     sondern die darunterliegende ::before-Lage, die ueber die VOLLE Flaeche
     gefuellt ist (Zwei-Lagen-Rahmen, weil ein echter Rahmen auf der gekappten
     Ecke abrasiert wird). Ein durchscheinendes ::after laesst diese Fuellung
     durch die ganze Karte schlagen: mit rgba(0,0,0,.55) war die
     Preis-Tipp-Karte flaechig TUERKIS und alle anderen grau ueberzogen.
     Durchsichtig gehoert das Infofeld ueber dem Produktbild — dort sieht man
     wirklich hindurch —, nicht die Kartenflaeche vor dem Seitenhintergrund. */
  background: #000;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}
.tx-sps-card > * { position: relative; z-index: 1; }
.tx-sps-card:hover::before { background: var(--tx-line-2); }
.tx-sps-card.is-tipp::before { background: var(--tx-mint); }
.tx-sps-card:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 3px; }

.tx-sps-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
}
.tx-sps-card__tag,
.tx-sps-card__notiz {
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
  white-space: nowrap;
}
.tx-sps-card.is-tipp .tx-sps-card__tag { color: var(--tx-mint); }

/* Bildzone: contain, nicht cover — sonst wird das Gehaeuse angeschnitten. */
.tx-sps-card__bild {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}
/* ⚠️ Das Flex-Kind ist das <picture>, nicht das <img> — TxPcCatalog liefert
   ein <picture> mit WebP-Quelle plus Rueckfall. Ein Prozentwert am <img> loest
   damit gegen das <picture> auf, und das steht auf `height: auto`: der
   Prozentwert faellt auf `auto` zurueck und begrenzt nichts. Gemessen wurde
   das Bild dadurch ueber die Breite gross (349,5px in einem 300px hohen
   Rahmen) und stand 24,7px oben und 24,8px unten heraus, wo `overflow: hidden`
   es abschnitt — der PC war oben angeschnitten.
   Die Groesse gehoert also an das <picture>; das <img> fuellt es dann aus und
   `object-fit: contain` legt die echten Bildpunkte hinein, ohne zu schneiden.
   Verwandte Falle in CLAUDE.md („height: 100% in unbestimmt hoher Zeile"). */
.tx-sps-card__bild > picture,
.tx-sps-card__bild > img {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.tx-sps-card__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tx-sps-card__panel {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 20px;
}

.tx-sps-card__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tx-sps-card__name {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tx-text);
  min-width: 0;
}
.tx-sps-card__fps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--tx-text-dim);
  white-space: nowrap;
}
.tx-sps-card.is-tipp .tx-sps-card__fps { color: var(--tx-mint); }
.tx-sps-card__quelle {
  font-style: normal;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}

/* ── Karte: feste Hoehe, Bild und Infofeld absolut darin ────────────────
   Das Infofeld waechst beim Zeigen nach OBEN ueber das Bild. Weil nichts im
   Fluss liegt, kann die Kartenhoehe sich dabei nicht aendern — im Raster
   spraenge sonst die ganze Zeile mit. Zwei Vorstufen sind daran gescheitert:
   erst klappte die Liste im Fluss auf (Karte wuchs), dann fuhr eine eigene
   Lage von unten herein (die Liste stand nicht mehr beim Namen). */
.tx-sps-card__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
}
.tx-sps-card__bild {
  position: absolute;
  top: 46px; left: 0; right: 0;
  height: 300px;
  overflow: hidden;
}
.tx-sps-card__panel {
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  z-index: 3;
  margin-top: 0;
  /* Schwarz und durchscheinend: der PC bleibt hinter dem Infofeld zu ahnen,
     statt hart abgeschnitten zu werden.
     Die Deckung ist NICHT geschaetzt. Gemessen wurde der Kontrast der
     Spec-Schrift gegen das 99. Perzentil des Grundes, je Karte, mit
     ausgeblendeter Schrift (deploy/_kontrast_specs.js + .py). Ueber die
     Deckungsstufen:
         .62 -> 3,82:1   .66 -> 4,34:1   .68 -> 4,63:1   .70 -> 5,00:1
     Die Norm verlangt 4,5:1 fuer kleine Schrift; .68 ist die Kippgrenze.
     Gewaehlt ist .70 — die transparenteste Stufe mit Reserve, falls ein
     helleres Produktfoto in die Auswahl rutscht. Der schlechteste Wert
     entsteht am hellsten Bild, nicht am Durchschnitt. */
  background: rgba(0, 0, 0, .70);
  transition: box-shadow .28s ease;
}
/* Weicher Uebergang zum Bild darueber statt einer harten Kante. Das ist ein
   Scrim ueber einem Bild, kein Zierverlauf. */
.tx-sps-card__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 54px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .70));
  pointer-events: none;
}

/* Spec-Liste: im Ruhezustand zwei Zeilen, nach unten ausgeblendet.
   Beim Zeigen — und beim Tastaturfokus, sonst waere sie ohne Maus nicht
   erreichbar — geht sie ganz auf. */
.tx-sps-card__specs {
  margin: 0;
  max-height: 46px;
  /* Die Blende sitzt IMMER am unteren Rand des sichtbaren Kastens
     (`calc(100% - 18px)` bezieht sich auf die beschnittene Hoehe). Dadurch
     muss beim Zeigen nichts umgeschaltet werden — vorher sprang die Maske
     hart auf `none`, und beim Verlassen genauso zurueck. Das Polster unten
     sorgt dafuer, dass im offenen Zustand die Blende auf Leerraum faellt und
     nicht auf die letzte Zeile. */
  padding-bottom: 16px;
  overflow: hidden;
  opacity: .62;
  mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent 100%);
  transition: max-height .42s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.tx-sps-card:hover .tx-sps-card__specs,
.tx-sps-card:focus-within .tx-sps-card__specs {
  /* Die echte Inhaltshoehe, von spielsuche.js je Karte gemessen. Vorher stand
     hier fest 190px, waehrend der Inhalt nur 106px hoch war: 84px Leerlauf.
     Die Bewegung war nach 44 Prozent der Laufzeit optisch fertig und der Rest
     der Kurve lief ins Leere — genau das fuehlt sich als Haenger an. */
  max-height: var(--tx-sps-h, 190px);
  opacity: 1;
}

.tx-sps-card__spec {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.tx-sps-card__spec dt {
  flex: none;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-sps-card__spec::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--tx-line-2);
  transform: translateY(-3px);
}
.tx-sps-card__spec dd {
  flex: 0 1 auto;
  margin: 0;
  min-width: 0;
  font-family: var(--tx-body);
  font-size: 13px;
  color: var(--tx-text-dim);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-sps-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--tx-line);
  border-bottom: 1px solid var(--tx-line);
}
.tx-sps-card__stats span {
  display: block;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-text-mute);
}
.tx-sps-card__stats b {
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 22px;
  color: var(--tx-text);
}

/* Der eigentliche Verkaufstext. */
.tx-sps-card__warum {
  margin: 0;
  font-family: var(--tx-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-text-mute);
  /* Feste Hoehe von drei Zeilen. Das Infofeld haengt an der Unterkante der
     Karte; ein kuerzerer Text hebt damit alles darueber an, und Name, Specs
     und Kennzahlen der Nachbarkarten standen gemessen 23,1px hoeher — genau
     eine Zeile. Preis und MwSt.-Zeile blieben buendig, weil sie unten haengen,
     der Versatz fiel also nur oben auf.
     Drei Zeilen sind nicht geraten: alle 900 Kombinationen aus Spiel,
     Aufloesung und Ziel wurden bei 1920, 1440 und 1180px durchgezaehlt
     (deploy/_diag_warum.js), das Maximum lag ueberall bei drei. Es wird also
     nichts abgeschnitten. Die px-Angabe steht als Rueckfall fuer Browser
     ohne die Einheit `lh`. */
  min-height: 69px;
  min-height: 3lh;
}

.tx-sps-card__kauf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tx-sps-card__preis {
  display: flex;
  flex-direction: column;
  /* Der Preis darf nicht umbrechen: eine zweite Zeile macht das Infofeld
     hoeher, und weil es an der Unterkante haengt, verschiebt sich damit alles
     darueber — genau der Versatz, der hier gerade behoben wurde. */
  white-space: nowrap;
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--tx-text);
}
.tx-sps-card__preis i {
  font-style: normal;
  font-family: var(--tx-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--tx-text-mute);
}
.tx-sps-card__cta {
  flex: none;
  /* Feste, GANZZAHLIGE Hoehe statt Innenabstand. Aus 13px Polsterung ergaben
     sich gemessen 49,3px — und auf einer gebrochenen Hoehe faellt beim Rastern
     die unterste Reihe eines `box-shadow: inset` weg. Der Rahmen fehlte
     dadurch genau unten, was den Knopf angeschlagen aussehen liess. Steht in
     CLAUDE.md als eigene Falle. */
  display: inline-flex;
  align-items: center;
  /* Flex verwirft den Leerraum zwischen Text und Pfeil — ohne `gap` steht dort
     „DETAILS→" ohne Luft. 6px statt 8px und 16px statt 20px Polsterung:
     gemessen brauchte die Kaufzeile 346,5px in einem 344px breiten Feld, die
     zusaetzliche Luft hatte den Preis umbrechen lassen. */
  gap: 6px;
  height: 48px;
  padding: 0 16px;
  /* Rahmen als ZWEI LAGEN statt als inset-Schatten. Der Schatten folgt dem
     Rechteck und wird von den beiden gekappten Ecken einfach weggeschnitten:
     der Umriss war an genau diesen zwei Schraegen unterbrochen und der Knopf
     sah dadurch angeschlagen aus. Vorbild ist .tx-hbn__card, die Regel steht
     in CLAUDE.md. */
  position: relative;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  color: var(--tx-mint);
  font-family: var(--tx-h);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Untere Lage: Rahmenfarbe ueber die volle Flaeche, in der Knopfform. */
.tx-sps-card__cta::before,
.tx-sps-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.tx-sps-card__cta::before {
  background: var(--tx-mint);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* Obere Lage: 1px kleiner, in Kartenfarbe — was uebrig bleibt, IST der Rahmen.
   Die Schraege ist hier 11px statt 12px, damit sie parallel zur aeusseren
   laeuft und die Kante ueberall gleich dick bleibt. */
.tx-sps-card__cta::after {
  inset: 1px;
  background: #000;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
/* Bei drei Spalten wird die Karte am schmalsten (gemessen 318px im Infofeld
   gegen 344px bei vier Spalten). Dort reicht der Platz fuer „Konfigurieren"
   neben dem Preis nicht mehr: Preis 135,6 + Luecke 10 + Knopf 189 = 334,6.
   Der Knopf wird deshalb genau hier kompakter — nicht der Preis, der ist das
   Verkaufsargument. */
.tx-sps[data-bp="lg"] .tx-sps-card__cta {
  font-size: 13.5px;
  letter-spacing: .06em;
  padding: 0 12px;
}

/* Der Preis-Tipp hat einen gefuellten Knopf: dort ist die innere Lage
   ebenfalls mint, es bleibt eine durchgehende Flaeche. */
.tx-sps-card.is-tipp .tx-sps-card__cta::after { background: var(--tx-mint); }
.tx-sps-card.is-tipp .tx-sps-card__cta {
  background: transparent;
  box-shadow: none;
  color: #03100D;
}
/* Pflichtangabe am Preis. Das Infofeld haengt an der Unterkante der Karte und
   waechst nach oben — diese Zeile schiebt es also nicht nach unten heraus,
   sie verdeckt oben 16px mehr vom Bild. */
.tx-sps-card__steuer {
  margin: 8px 0 0;
  font-family: var(--tx-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--tx-text-mute);
}

/* ─── Fusszeile ─────────────────────────────────────────────────────────── */
.tx-sps__foot {
  margin: 18px 0 0;
  font-family: var(--tx-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx-text-mute);
}
.tx-sps__foot a { color: var(--tx-text-dim); }
.tx-sps.is-leer .tx-sps__grid,
.tx-sps.is-leer .tx-sps__count { display: none; }

/* ─── Schmal ────────────────────────────────────────────────────────────
   Ohne Zeiger gibt es kein Hover — die Specs stehen deshalb offen, sonst
   waeren sie auf dem Telefon gar nicht lesbar. */
@media (max-width: 1099px) {
  .tx-sps__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tx-sps__lead { text-align: left; flex: 1 1 auto; }
  .tx-sps__filter { flex-wrap: wrap; gap: 14px 18px; }
  .tx-sps__field + .tx-sps__field { border-left: 0; padding-left: 0; }
  .tx-sps__count { margin-left: 0; text-align: left; flex: 1 1 100%; }
}
@media (max-width: 759px) {
  .tx-sps__grid { grid-template-columns: 1fr; }
  .tx-sps__field--game { flex: 1 1 100%; }
  .tx-sps-card { min-height: 640px; }
  .tx-sps-card__bild { height: 290px; }
}
/* Ohne Zeiger gibt es kein Mausover. Die Lage bleibt dort aus — sonst
   verdeckte sie dauerhaft das Produktbild. Die Kurzfassung im Textteil
   traegt die Angaben. */
/* Ohne Zeiger gibt es kein Mausover — dort steht die Liste offen. */
@media (hover: none) {
  .tx-sps-card__specs {
    max-height: var(--tx-sps-h, 190px);
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
    padding-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tx-sps-card__specs,
  .tx-sps-card__kopf,
  .tx-sps-card__kurz { transition: none; }
}

/* =============================== SPIEL-SUCHE · END ============================
   ============================================================================== */


/* ─── Topseller-Pfeile im Kopf ────────────────────────────────────────────
   Sie sassen als absolut positionierte Bahnen ueber volle Karten-Hoehe neben
   dem Rail und erzwangen dessen Sondermass. Als Kopf-Schaltflaechen brauchen
   sie keinen Platz mehr am Rail. */
.tx-section__head-tools .tx-rotor__arrow {
  position: static;
  /* min-height/max-height MUESSEN mit zurueckgesetzt werden. Die Grundregel
     setzt min-height: 150px, und min-height schlaegt height — ohne das
     bleiben die Pfeile 150px hohe Balken neben der Ueberschrift, egal wie
     spezifisch oder wie spaet diese Regel steht. */
  min-height: 0;
  max-height: none;
  transform: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--tx-line-2);
  cursor: pointer;
}
.tx-section__head-tools .tx-rotor__arrow svg { width: 14px; height: 22px; }
.tx-section__head-tools .tx-rotor__arrow:hover { box-shadow: inset 0 0 0 1px var(--tx-mint); }
/* Am Anfang des Rails ist „zurueck" deaktiviert. Die Grundregel setzt dafuer
   Deckkraft .16 — als grosse Chevrons neben dem Rail fiel das nicht auf, als
   44px-Knopf im Kopf liest es sich als „Knopf fehlt". Deutlich gedaempft,
   aber vorhanden. */
.tx-section__head-tools .tx-rotor__arrow[disabled] { opacity: .38; }
.tx-section__head-tools .tx-rotor__arrow:focus-visible { outline: 2px solid var(--tx-mint); outline-offset: 2px; }

@media (max-width: 767px) {
  .tx-section__head-tools .tx-rotor__arrow { display: none; }
  /* Die Knopfgruppe stand auf flex: none und schrumpfte deshalb nicht mit —
     gemessen 56px Ueberlauf im Kopf bei 390px Breite. Sie bricht jetzt in
     eine eigene Zeile um. */
  #bestseller .tx-section__head { flex-wrap: wrap; }
  .tx-section__head-tools { flex: 1 1 100%; }
  /* min-width: auto laesst Flex-Kinder nicht unter ihre laengste Silbe
     schrumpfen. Gemessen bei 390px: das Wort MEISTVERKAUFTEN ist 342px breit,
     im Kopf stehen 326px zur Verfuegung — der Ueberlauf kam nicht von der
     Knopfgruppe, sondern von der Ueberschrift. Sperre loesen und Trennung
     erlauben. Die Falle steht in CLAUDE.md und ist hier zum dritten Mal
     aufgetreten. */
  .tx-section__head > * { min-width: 0; }
  /* `anywhere`, nicht `break-word`: nur `anywhere` senkt auch die
     min-content-Breite des Elements. `break-word` bricht zwar beim Rendern,
     der Kasten bleibt aber so breit wie das laengste Wort — gemessen blieb es
     bei 342px, obwohl die Regel griff. `hyphens: auto` half nicht, im
     Headless-Browser fehlen die Trennmuster. */
  .tx-section-title { overflow-wrap: anywhere; hyphens: auto; }
}


/* --- FPS-Leiste in der Produktkarte -------------------------------------
   Gefuellt von js/fps-badges.js. Steht versteckt im Template, bis eine Zahl
   vorliegt — eine leere Leiste waere schlimmer als keine. */
.tx-product-card__fps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
}
.tx-product-card__fps-bar {
  flex: 1 1 auto;
  height: 3px;
  background: var(--tx-line);
  min-width: 0;
}
.tx-product-card__fps-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tx-mint);
}
.tx-product-card__fps-val {
  flex: none;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  white-space: nowrap;
}
/* Gemessene Werte duerfen sich von errechneten unterscheiden — die Tilde
   allein ist zu leise. */
.tx-product-card__fps.is-gemessen .tx-product-card__fps-val { color: var(--tx-mint); }

/* --- Dieselbe Leiste auf der Highlight-Karte -----------------------------
   Seit 2026-08-07: die Highlight-Systeme standen als einzige Systemkarten
   der Startseite ohne FPS da, obwohl sie dieselbe Ware zeigen wie die
   Bestseller daneben. Gefuellt vom selben js/fps-badges.js.
   Die Regeln stehen hier und nicht in der Portlet-CSS des Plugins: die wird
   von JTL ohne ?v= eingebunden und von nginx 30 Tage immutable geliefert,
   eine Aenderung dort erreicht Bestandsbesucher nicht mehr. */
.tx-aktion-card .tx-aktion-card__fps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
}
.tx-aktion-card .tx-aktion-card__fps-bar {
  flex: 1 1 auto;
  height: 3px;
  background: var(--tx-line);
  /* Ohne min-width:0 waechst das Flex-Kind auf die Breite seines Inhalts
     und sprengt die Spalte. */
  min-width: 0;
}
.tx-aktion-card .tx-aktion-card__fps-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tx-mint);
}
.tx-aktion-card .tx-aktion-card__fps-val {
  flex: none;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-text-dim);
  white-space: nowrap;
}
.tx-aktion-card .tx-aktion-card__fps.is-gemessen .tx-aktion-card__fps-val {
  color: var(--tx-mint);
}


/* ==============================================================================
   ========================== LESBARKEIT · BEGIN ================================
   Gemessen am 2026-08-03 (deploy/_audit_typo.js): auf Startseite und
   Konfigurator waren 22 Textstile beanstandet — fast alle Rajdhani bei 10-12px
   mit 0,12-0,32em Sperrung. Der Kontrast war nie das Problem (8,8:1 bis
   19,6:1); die Ursache waren Groesse, Sperrung und die Wahl einer SCHMALEN
   Anzeigeschrift fuer Text, der gelesen wird.

   Rajdhani bleibt fuer Grosses. Alles Kleine geht auf Inter — dafuer ist sie
   gezeichnet, und seit heute liegen ihre echten Schnitte vor (vorher war
   jedes Fett vom Browser gerechnet, siehe deploy/_fix_interschnitte.py).

   Untergrenze 12px, Sperrung hoechstens 0,08em unterhalb 13px.
   ============================================================================== */

/* ── Spiel-Suche ─────────────────────────────────────────────────────────── */
.tx-sps__label,
.tx-sps__count,
.tx-sps-card__tag,
.tx-sps-card__notiz,
.tx-sps-card__quelle,
.tx-sps-card__stats span,
.tx-sps-card__spec dt { font-size: 12px; letter-spacing: .07em; }
.tx-sps__opt i        { font-size: 12px; letter-spacing: .04em; }
.tx-sps-card__spec dd { font-size: 14px; }
.tx-sps-card__kurz    { font-size: 14px; }
.tx-sps-card__warum   { font-size: 14px; line-height: 1.65; }
.tx-sps__foot         { font-size: 14px; }
.tx-sps__lead         { font-size: 16px; }

/* ── Produktkarte ────────────────────────────────────────────────────────── */
.tx-product-card__fps-val { font-size: 12px; letter-spacing: .05em; }
.tx-product-card__case    { font-size: 12px; letter-spacing: .06em; }

/* ── Shopweit: die staerksten Sperrungen bei Kleinschrift zuruecknehmen ──
   „/ 01 — Bestseller" stand auf 0,32em. Das ist als Zierrat gedacht, liest
   sich bei 12-13px aber als Buchstabenreihe statt als Wort. */
.tx-kicker      { letter-spacing: .1em; }
.tx-kicker .num { letter-spacing: .08em; }
.tx-badge-tag   { font-size: 12px; letter-spacing: .06em; }

/* ── Konfigurator ────────────────────────────────────────────────────────
   Die Gruppentitel („Gehaeuse", „Radiator Deckel") standen auf 12px mit
   0,18-0,22em. Sie sind Ueberschriften einer Auswahl — sie muessen zuerst
   lesbar sein, dann gesperrt. */
.tx-cfg-group__title,
.tx-cfg-row__title { font-size: 13px; letter-spacing: .08em; }

/* -- Restliche Fundstellen aus der zweiten Messung ------------------------ */
/* Die Doppelung der Klasse hebt nur die Spezifitaet an. Ohne sie gewinnen
   aeltere, spezifischere Regeln und die Korrektur bleibt wirkungslos —
   gemessen bei .tx-chip, das trotz eigener Regel auf 0,14em stehen blieb. */
.tx-chip.tx-chip                        { letter-spacing: .07em; }
.tx-pdp-highlight__pills span em,
.tx-pdp-highlight__pills em             { font-size: 13px; letter-spacing: .07em; }
.tx-footer__copy.tx-footer__copy        { font-size: 13px; letter-spacing: .04em; }
.tx-pdp-disclaimer__lbl.tx-pdp-disclaimer__lbl { font-size: 13px; letter-spacing: .08em; }
.tx-pdp-highlight__sub.tx-pdp-highlight__sub   { font-size: 13px; letter-spacing: .07em; }
.tx-pillar__num,
.tx-pdp-highlight__num  { letter-spacing: .09em; }
.tx-pillar__sub,
.tx-pdp-highlight__tag  { font-size: 13px; letter-spacing: .07em; }
.tx-cfg-group__head em,
.tx-cfg-row__head em    { font-size: 13px; letter-spacing: .07em; }
.tx-statusbar__lang,
.tx-chip                { letter-spacing: .07em; }
.tx-btn                 { letter-spacing: .08em; }
.tx-cfg-disclaimer      { font-size: 13px; line-height: 1.6; }

/* =========================== LESBARKEIT · END ================================
   ============================================================================== */


/* ==============================================================================
   =========================== SYSTEMLEISTE · HINTERGRUND =======================

   Der Hintergrund der Systemleiste („Systeme mit AMD Ryzen 9000") im
   Hero-Banner. Er stand bis 2026-08-04 in
   _plugin/tx_hero_slider/ToxicHeroBanner/ToxicHeroBanner.css und ist aus einem
   handfesten Grund hierher gezogen: Portlet-CSS bindet JTL ohne Version ein
   (OPC\PortletStyles::getCssFile baut den Pfad ohne ?v=), und nginx liefert
   jede .css 30 Tage `public, immutable`. Gemessen am 2026-08-04:

     cache-control: public, immutable   max-age=2592000

   Eine Aenderung an der Portlet-CSS erreicht damit niemanden mehr, der die
   Datei schon geladen hat. custom.css hat ein Cache-Token (header.tpl Zeile
   160) und ist der einzige Ort, an dem eine Aenderung sicher ankommt.

   Deshalb (0,4,0) statt (0,3,0): die Regel muss auch eine ALTE, noch im
   Browsercache liegende Fassung der Portlet-CSS schlagen — die traegt
   `.tx-hero-slide.tx-hero-banner .tx-hbn__systems` mit (0,3,0) und wird nach
   custom.css geladen. Bei gleicher Spezifitaet gewaenne sie (CLAUDE.md Regel 7).

   ── Weg zum jetzigen Motiv ──
   1. Lochblech (Filter .82) und Drahtgewebe (.90, dann .94) aus dem
      Design-Ordner. Beide durchgefallen, und aus demselben Grund: es sind
      aufgenommene Oberflaechen mit Lichtschleier, Perspektive und Diagonalen.
      Jedes Motiv dort hat seinen Lichtfleck auf einer Seite — genau da, wo
      die Kantenmaske ihn wegblendet.
   2. Ein gezeichnetes Haarlinien-Raster als Gegenentwurf. Sauber, aber vom
      Betreiber als zu wenig empfunden.
   3. Eigens erzeugte Motive (Higgsfield, nano_banana_pro, 21:9, 2k). Erster
      Anlauf war zu flach, weil der Prompt „extremely subtle, very low
      contrast" verlangte — diese Bremse gehoert NICHT in den Prompt, denn
      abgedunkelt wird hier im CSS. Ein reiches Bild laesst sich leise machen,
      ein flaches nicht reich. Zweiter Anlauf ohne die Bremse, dafuer mit
      „extreme macro, immense micro-detail, tack sharp": Streuung 35–41 statt
      15–20. Was bleiben MUSS, ist die Vorgabe zur gleichmaessigen
      Ausleuchtung — daran haengt, dass das seitliche Ausblenden wirkt.

   4. Die gefraeste Wabe aus Runde 3 war „so dick". Lehre: eine Strichstaerke
      braucht ein VERHAELTNIS, kein Adjektiv — „no thicker than one twentieth
      of a cell width" griff sofort, „thin" allein hatte der Generator
      ignoriert. Dasselbe gilt fuer Zellgroessen.
   5. Alles bis hier sah „nicht REAL aus, so 3D-animiert". Auch das lag an
      meinen eigenen Vorgaben: „zero perspective, no visible light source, no
      specular highlights, no reflections, no depth of field" ist die
      Beschreibung eines CGI-Renders. Ein Foto hat Licht AUS EINER RICHTUNG,
      Glanzkanten und kleine Fehler — genau daraus entsteht der Tiefeneindruck.
      Die Vorgaben lauten jetzt umgekehrt: Makroobjektiv, eine grosse
      Softbox streifend von links oben, Schlagschatten in jeder Zelle,
      Staubkoerner, Mikrokratzer, „a photograph, not a 3D render".

   Das dadurch entstehende Helligkeitsgefaelle (gemessen bis 107 links gegen
   15 rechts) wird nicht mehr im Prompt verboten, sondern in der Aufbereitung
   herausgerechnet — `ausleuchtung_ausgleichen()` in deploy/_bg_aufbereiten.py.
   Danach betraegt die Spanne ueber die Breite noch 8,7 von 255.

   Jetzt: `sysbg-carbonfein.webp` — eine in eine Verbundplatte eingepraegte Wabe.
   Keine Loecher, sondern flache Vertiefungen unter Klarlack; der Glanz ist
   weicher und satter als beim durchbrochenen Paneel. Nach dem Ausgleich das
   gleichmaessigste Motiv der ganzen Reihe: Spanne 3,8 von 255.

   ⚠️ Die Zellangabe im Prompt ist eine Bitte, kein Ergebnis. Auf „noch
   kleiner" hin wurden drei Stufen erzeugt (1/130, 1/180, 1/250 der
   Bildbreite laut Prompt); GEMESSEN kam heraus 1/36, 1/57 und 1/67 — eine
   davon war nicht einmal feiner als die Vorlage. Nachmessen mit
   deploy/_bg_zellgroesse.py (Autokorrelation ueber die Bildzeilen), nicht
   dem Etikett glauben: auf der kleinen Vergleichstafel sah die feinste
   Fassung sogar groeber aus, weil sie schaerfer gezeichnet ist.

   Alternativen liegen daneben, jede ist eine Zeile:
     sysbg-carbon.webp     dieselbe Wabe groeber (1/34) — die Vorstufe
     sysbg-carbonmicro.webp   noch feiner (1/67), dafuer weicher
     sysbg-wabe.webp       durchbrochenes Wabenpaneel, technischer
     sysbg-grille.webp     Lautsprechergitter, groebere Loecher
     sysbg-casemesh.webp   Gehaeuse-Frontmesh, am groebsten
     sysbg-hexfein.webp    gezeichnetere Wabe, drahtduenne Stege
     sysbg-hexlinie.webp   nur Waben-Umrisse
     sysbg-pcb.webp        Platine — schoenstes Einzelbild, in der Leiste unruhig

   Drei Lagen von oben nach unten:
     1. Seitliches Ausblenden — links und rechts ins Schwarz, Mitte offen.
        Dieselbe Maske wie der Scrim im Hero, kein Farbverlauf als Deko.
     2. Schwarzer Filter ueber dem Motiv (`--tx-hbn-sysbg-dim`, Vorgabe .94).
        Er ist der Grund, warum die Textur die Produktfotos darueber nicht
        stoert. Bei einem gezeichneten Muster gehoert er auf 0, weil die
        Deckkraft dort schon in der Linienfarbe steckt.
     3. Das Motiv selbst.

   Ein anderes Motiv ist eine Zeile am Element:
     --tx-hbn-sysbg: url("/templates/NOVAChild/themes/my-nova/img/sysbg-wabe.webp");
   Der Pfad MUSS absolut sein: ein url() in einer CSS-Variablen wird relativ zu
   dem Stylesheet aufgeloest, das die Variable BENUTZT. Mit relativem Pfad
   laedt das Motiv stillschweigend nicht — kein Layoutfehler, nur ein leerer
   Hintergrund. Auf `none` gesetzt bleibt sauberes Schwarz. Das gezeichnete
   Raster von Schritt 2 steht als auskommentierte Fassung darunter.
   ============================================================================== */

.tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__systems {
  background-color: var(--tx-bg, #0B0C0D);
  background-image:
    linear-gradient(90deg,
      var(--tx-bg, #0B0C0D) 0%,
      rgba(11, 12, 13, .55) 16%,
      rgba(11, 12, 13, 0) 38%,
      rgba(11, 12, 13, 0) 62%,
      rgba(11, 12, 13, .55) 84%,
      var(--tx-bg, #0B0C0D) 100%),
    linear-gradient(0deg,
      rgba(11, 12, 13, var(--tx-hbn-sysbg-dim, .94)),
      rgba(11, 12, 13, var(--tx-hbn-sysbg-dim, .94))),
    var(--tx-hbn-sysbg,
      url("/templates/NOVAChild/themes/my-nova/img/sysbg-carbonfein.webp"));
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* Das gezeichnete Haarlinien-Raster aus Schritt 2 — falls wieder ohne Bild:
     --tx-hbn-sysbg:
       repeating-linear-gradient(0deg,  rgba(236,239,238,.055) 0 1px, transparent 1px 56px),
       repeating-linear-gradient(90deg, rgba(236,239,238,.055) 0 1px, transparent 1px 56px);
     --tx-hbn-sysbg-dim: 0;                                                      */

/* ======================== SYSTEMLEISTE · HINTERGRUND · END ====================
   ============================================================================== */


/* ==============================================================================
   SYSTEMLEISTE · KEINE WAISE IN DER LETZTEN REIHE                    2026-08-05
   ==============================================================================
   Das Raster steht zwischen 760 und 1199px auf ZWEI Spalten, das Portlet
   liefert aber drei Karten. Gemessen am lebenden Shop bei 1199, 1100, 900,
   768 und 760px: Reihen „2 + 1" — die dritte Karte stand allein und halb so
   breit wie die Reihe darueber. Ueber 1199px sind es drei Spalten, unter
   760px eine wischbare Flex-Reihe; dort ist die dritte Karte richtig und
   bleibt stehen.

   Warum die Regel HIER steht und nicht in `ToxicHeroBanner.css`: Portlet-CSS
   bindet JTL ohne `?v=` ein und nginx liefert jede `.css` 30 Tage
   `public, immutable`. Eine Aenderung dort erreicht niemanden mehr, der die
   Datei schon geladen hat. `custom.css` haengt am Cache-Token in `header.tpl`.
   Deshalb auch die Spezifitaet: die Portlet-Regeln stehen auf (0,3,0) und
   werden NACH `custom.css` geladen.

   `:nth-child(odd):last-child:not(:first-child)` statt `:nth-child(3)`:
   die Kartenzahl ist je Slide einstellbar (1 bis 8, `getSystems($limit)`).
   Getroffen wird damit jede ungerade Karte, die als letzte allein in ihrer
   Reihe landet — bei 3 die dritte, bei 5 die fuenfte. `:not(:first-child)`
   ist die Sicherung fuer den Fall EINER Karte: die ist ebenfalls ungerade
   und letzte, darf aber nicht verschwinden.                                  */

@media (min-width: 760px) and (max-width: 1199px) {
  .tx-hero-slider .tx-hero-slide.tx-hero-banner
  .tx-hbn__card:nth-child(odd):last-child:not(:first-child) {
    display: none;
  }
}

/* ======================== SYSTEMLEISTE · WAISE · END ==========================
   ============================================================================== */


/* ==============================================================================
   HERO-BUEHNE · SEITENVERHAELTNIS STATT GEDECKELTER HOEHE            2026-08-05
   ==============================================================================
   Vorher: `clamp(430px, 100vw / 3.55, 640px)`. Die Deckelung nach oben (640) und
   der Boden (430) liessen das Seitenverhaeltnis der Buehne von 4,00:1 bei 2560px
   bis 0,86:1 bei 360px wandern, waehrend das Motiv fest auf 2,44:1 steht. Der
   Ueberschuss wurde weggeschnitten — gemessen bei 1920px 184px oben UND unten,
   bei 2560px je 230px. Sichtbar blieben 61 bis 73 Prozent des Motivs.

   Vorbild ist MIFCOM, ausdruecklich gewuenscht und nachgemessen
   (`deploy/_diag_mifcom_hero.js`): deren Buehne hat auf JEDER Breite exakt das
   Verhaeltnis der Datei — 2560x800, 1920x600, 1440x450, 1100x344, alle 3,20:1.
   Deshalb wird dort nie geschnitten, das Motiv wird nur kleiner. Unter 769px
   schalten sie auf ein eigenes Telefon-Motiv um.

   3,20:1 ist zugleich 2880 x 900 — genau das Format, in dem AMD die
   Partner-Banner liefert. Die Fassung in unserem Shop wurde auf 2880x1174
   umgebaut; erst das erzeugt den Beschnitt.

   Warum die Skalierung NICHT bis ganz nach unten laufen kann: unsere Schrift
   liegt UEBER dem Bild, bei Mifcom steckt sie im Bild. Gemessen braucht der
   Block aus Kicker, Ueberschrift, Preiszeile und Schaltflaechen 253 bis 298px.
   Bei 768px waere eine 3,20:1-Buehne nur 240px hoch — 90px zu wenig. Der Boden
   von 430px bleibt deshalb stehen; ab 1376px Fenster (1376/3,2 = 430) skaliert
   es sauber mit. Nach oben bei 800px gedeckelt, dem gemessenen Mifcom-Wert bei
   2560px — ohne Deckel waere ein 3440er Bildschirm 1075px Hero.

   Warum hier und nicht in `ToxicHeroBanner.css`: Portlet-CSS bindet JTL ohne
   `?v=` ein und nginx liefert sie 30 Tage `immutable`. `html:root` statt `:root`,
   weil die Portlet-CSS NACH `custom.css` geladen wird und bei gleicher
   Spezifitaet gewinnen wuerde — `html:root` ist (0,1,1) gegen (0,1,0).

   ENDGUELTIGES FORMAT: 2880 x 800 (3,60 : 1). Zwischenstand am selben Tag war
   3,20 : 1 (2880 x 900) — Mifcoms Wert. Der machte die Buehne bei 1920px 600px
   hoch, und das war dem Betreiber „nen Tick zu hoch". 3,60 : 1 bringt sie auf
   533px, also praktisch auf die 541px von vorher, ohne dabei zu schneiden.

   Die drei Zahlen greifen ineinander, das ist kein Zufall, sondern ausgesucht:
     Boden  400px  greift exakt ab 1440px Fenster (400 x 3,6) — der ganze
                   Bereich 1440 bis 2304px ist damit VOLLSTAENDIG sichtbar.
     Deckel 640px  greift ab 2304px — dieselbe Maximalhoehe wie vor der
                   Umstellung; darueber fehlen 36px je Kante (4 %).
     Boden statt weiter zu schrumpfen, weil unsere Schrift UEBER dem Bild liegt
                   und gemessen 253 bis 298px braucht. Bei Mifcom steckt sie im
                   Bild, deren Buehne darf deshalb beliebig flach werden.

   Buehnenhoehe: 2560 -> 640, 1920 -> 533, 1600 -> 444, 1440 -> 400,
   darunter 400 fest, unter 760px unveraendert 420 (eigene Regel im Portlet).

   ⚠️ Voll wirksam erst mit Motiven im Format 2880 x 800. Mit einem anderen
   Seitenverhaeltnis schneidet `cover` weiter — nur eben weniger.              */

html:root {
  --tx-hbn-stage-h: clamp(400px, 100vw / 3.6, 640px);
}

/* ── Telefon: eigenes Motiv, eigene Bühne ─────────────────────────────────
   Unter 760px liefert das Portlet über `<picture><source>` ein zweites Motiv
   aus (Feld `image_mobile`). Damit DAS nicht auch beschnitten wird, muss die
   Bühne wieder sein Verhältnis tragen — dasselbe Prinzip wie oben, nur mit
   1200 x 850 (1,41 : 1) statt 2880 x 800.

   Warum `min(…, 420px)` und nicht rein proportional: bei 759px wäre die Bühne
   sonst 538px hoch, deutlich höher als die 400px direkt darüber. Der Deckel
   von 420px hält sie auf dem heutigen Wert. Folge: unter 592px (592/1,412)
   sitzt das Motiv exakt, darüber bis 759px bleiben 78 bis 99 Prozent — statt
   24 bis 28 Prozent mit dem breiten Motiv.

   Gemessen bei 390px: Bühne 276px, Textblock 181px, also 95px Luft.

   ⚠️ Die neue Höhe MUSS über die Variable laufen, nicht nur über `height`.
   Fortschrittsbalken, Pause-Taste und Pfeile richten sich an
   `--tx-hbn-stage-h` aus (`top: calc(var(--tx-hbn-stage-h) - 42px)` und
   Verwandte). Beim ersten Anlauf stand hier nur die Höhe: die Bühne war 276px
   hoch, die Bedienelemente rechneten weiter mit 400px und standen dadurch
   UNTER dem Hero mitten in der Systemleiste. Eine Quelle, sonst laufen
   Bühne und Bedienung auseinander.

   Die zweite Regel ist trotzdem nötig: die Portlet-Regel
   `.tx-hero-slide.tx-hero-banner .tx-hbn__stage { height: 420px }` steht auf
   (0,3,0) und wird NACH `custom.css` geladen — sie würde die Variable sonst
   überstimmen.                                                              */

@media (max-width: 759.98px) {
  html:root {
    --tx-hbn-stage-h: min(100vw * 850 / 1200, 420px);
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__stage {
    height: var(--tx-hbn-stage-h);
  }
}

/* ======================== HERO-BUEHNE · VERHAELTNIS · END =====================
   ============================================================================== */


/* ==============================================================================
   HERO-KNOPF · EIGENFARBE BLEIBT BEIM UEBERFAHREN                    2026-08-06
   ==============================================================================
   Gemeldet: „Mausover beim Button wird grün." Ursache ist ein
   Spezifitaetsfehler in `ToxicHeroBanner.css`:

     .tx-hero-slide.tx-hero-banner .tx-hbn__cta:hover        (0,4,0) -> #8CFCE6
     .tx-hero-slide.tx-hero-banner .tx-hbn__cta--custom      (0,3,0) -> Eigenfarbe
     .tx-hero-slide.tx-hero-banner .tx-hbn__cta--custom:hover (0,4,0) -> nur `filter`

   Die Grundregel setzt beim Ueberfahren einen minten Grund und wird von der
   Variante nicht zurueckgesetzt — der Zusatz dort aendert nur die Helligkeit.
   Also wird JEDER eigenfarbige Knopf beim Ueberfahren mint, zuletzt gesehen am
   AMD-Orange #FF6A1F.

   Warum die Korrektur HIER steht und nicht in der Portlet-CSS: die bindet JTL
   ohne `?v=` ein und nginx liefert sie 30 Tage `immutable`. Deshalb auch
   (0,5,0) — die Regel muss die alte, noch im Browsercache liegende Fassung mit
   (0,4,0) schlagen, die NACH `custom.css` geladen wird.

   Der Kontrast bleibt gewahrt: `inkFor()` setzt die Schrift auf dem farbigen
   Grund dunkel (gemessen 6,77:1 auf dem AMD-Orange gegen 2,86:1 mit Weiss).   */

.tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__cta--custom:hover {
  background: var(--tx-hbn-cta-bg, #FF6A1F);
  box-shadow: inset 0 0 0 1px var(--tx-hbn-cta-bg, #FF6A1F);
  color: var(--tx-hbn-cta-ink, #03100D);
  filter: brightness(1.12);
}

/* ======================== HERO-KNOPF · END ===================================
   ============================================================================== */


/* ==============================================================================
   HERO AUF DEM TELEFON · BILD OBEN, TEXT DARUNTER                    2026-08-06
   ==============================================================================
   Bis hierher lag die Schrift auch auf dem Telefon ÜBER dem Motiv. Auf 390px
   Breite deckt sie dort fast die ganze Fläche ab: das Motiv muss oben links
   leer bleiben, und die Überschrift landet trotzdem auf dem Produkt.

   MIFCOM wurde nachgemessen (`deploy/_diag_mifcom_text.js`) und macht es
   zweigeteilt: auf dem Desktop steht ihre Schrift wie unsere ÜBER dem Bild
   (54px gegen unsere 53px — kein Unterschied, sie halten nur die Zeilen kurz:
   18 und 12 Zeichen). Auf dem Telefon steht das Bild oben und der Text
   DARUNTER auf dunklem Grund; über dem Motiv liegt dort kein einziger
   Textknoten. Deshalb darf ihr Telefon-Motiv randvoll sein und die Schrift
   trotzdem gross bleiben. Genau das wird hier übernommen.

   Ohne Markup-Änderung: `.tx-hbn__content` liegt IN der Bühne. Statt es
   herauszuziehen bekommt die Bühne unter 760px eine automatische Höhe, das
   Bild eine feste, und der Textblock fliesst dahinter.

   ⚠️ Drei Dinge, die dabei zwingend mitmüssen:
   1. `.tx-hbn__pic` steht auf `position: absolute; inset: 0`. Bleibt das so,
      hat das Bild in einer automatisch hohen Bühne keine Höhe mehr und
      verschwindet. Es muss in den Fluss und die Höhe selbst tragen.
   2. Der Scrim liegt auf `inset: 0` und würde in der auto-hohen Bühne auch
      den Textblock abdunkeln. Er ist hier ohnehin sinnlos — es steht keine
      Schrift mehr auf dem Bild — also weg.
   3. `.tx-hbn__content` trägt `pointer-events: none`, weil der Stretched Link
      des CTA darunter lag. Im Fluss muss der Block wieder Klicks annehmen,
      sonst ist der Knopf tot. Und `position: relative` ist Pflicht: sonst
      spannt sich `.tx-hbn__cta::after` bis zum nächsten positionierten
      Vorfahren — das ist der ganze Slide, und damit läge der Link über der
      Systemleiste und würde deren Produktkarten unklickbar machen.

   Die Subline wird hier wieder eingeblendet. Sie war nur ausgeblendet, weil
   über dem Motiv kein Platz für sie war; unter dem Bild ist er da.          */

@media (max-width: 759.98px) {
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__stage {
    height: auto;
    overflow: visible;
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__pic {
    position: relative;
    inset: auto;
    height: var(--tx-hbn-stage-h);
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__scrim {
    display: none;
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__content {
    position: relative;
    inset: auto;
    align-items: stretch;
    padding-block: 22px 26px;
    padding-inline: 0;
    background: var(--tx-bg, #0B0C0D);
    pointer-events: auto;
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__sub {
    display: block;
  }
}

/* ======================== HERO TELEFON · END =================================
   ============================================================================== */


/* ==============================================================================
   ======================== HERO · KNOPF STEHT FEST =============================
   Der Knopf sprang beim Slide-Wechsel. Gemessen am 2026-08-07 mit
   deploy/_diag_heroshift.js, Oberkante des Knopfes je Slide:

     1660px  249 · 269 · 281 · 249   -> 32px Unterschied
     1280px  213 · 224 · 218 · 213   -> 11px
      900px  225 · 216 · 230 · 212   -> 18px
      390px  425 · 434 · 463 · 398   -> 65px

   Ursache ist nicht die Ueberschrift, sondern `.tx-hbn__content` auf
   `align-items: center` (Portlet-CSS): der Textblock waechst zentriert, also
   nach oben UND unten — jede zusaetzliche Zeile schiebt den Knopf nach
   unten, eine fehlende Subline zieht ihn hoch.

   Neu: der Block haengt an der UNTERKANTE. Damit steht der Knopf fest und der
   Text waechst ueber ihm nach oben — unabhaengig davon, ob ein Slide zwei
   Ueberschriftzeilen und eine Subline hat oder nur eine Zeile.

   Der Abstand nach unten ist so gewaehlt, dass der Knopf dort landet, wo er
   beim laengsten Slide ohnehin schon stand (1660px: 329px Unterkante) — kein
   Slide rutscht damit tiefer als heute der tiefste.

   Spezifitaet: die Regel steht in ToxicHeroBanner.css auf (0,3,0), und die
   Datei hat keinen Cache-Buster (JTL bindet Portlet-CSS ohne ?v= ein, nginx
   liefert 30 Tage immutable). Deshalb hier mit `.tx-hero-slider` davor auf
   (0,4,0) — sie muss auch die alte Fassung im Browsercache schlagen.
   ============================================================================== */

.tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__content {
  align-items: flex-end;
  /* Der Abstand nach unten bestimmt, wo der Knopf steht. Am 2026-08-07 nach
     Sichtprobe um rund 17px angehoben (vorher clamp(96px, 8vw, 132px)). */
  padding-block-end: clamp(114px, 9vw, 152px);
}

/* ─── Telefon ───────────────────────────────────────────────────────────
   Hier steht der Text UNTER dem Bild im Fluss, die Buehne ist also
   automatisch hoch und jeder Slide unterschiedlich (gemessen 466 bis
   531px). Alle Slides liegen in derselben Rasterzelle, die so hoch ist wie
   der hoechste — der kuerzere fuellt sie nur nicht aus, und darum sprang es
   hier am staerksten.

   Gegenmittel: Slide und Buehne die Zelle ausfuellen lassen und den
   Textblock in der Restflaeche nach unten legen. Dann sitzt der Knopf immer
   auf derselben Hoehe, egal wie lang die Ueberschrift ist. */
@media (max-width: 759.98px) {
  .tx-hero-slider .tx-hero-slide.tx-hero-banner {
    display: flex;
    flex-direction: column;
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* min-height: 0 nicht noetig — das Bild traegt seine feste Hoehe selbst,
       und der Textblock soll gerade NICHT schrumpfen. */
  }
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__content {
    flex: 1 1 auto;
    /* Waagerechte Achse bleibt gestreckt (der Kasten nimmt die volle
       Breite), senkrecht sitzt der Text unten — dafuer ist hier nicht
       align-items zustaendig, sondern der Kasten selbst. */
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: 22px 26px;
  }
}

/* ─── Systemleiste: gleich hohe Karten ──────────────────────────────────
   Auf dem Telefon steht der Text im Fluss und die Buehne fuellt den Rest des
   Slides — dadurch schiebt jede Aenderung UNTER der Buehne den Knopf mit.
   Gemessen am 2026-08-07: der Slide ist konstant 911px, die Systemleiste
   darunter schwankt aber zwischen 360 und 394px, und genau diese 34px blieben
   nach dem Verankern des Knopfes uebrig.

   Ursache ist der Produktname: er ist auf zwei Zeilen begrenzt, belegt aber
   nur eine, wenn er kurz ist. Die zweite Zeile wird deshalb reserviert — in
   `em`, damit sie der Schriftgroesse folgt (die steht auf einer clamp()). */
.tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__cardname {
  min-height: calc(2 * 1.15em);
}
/* Dasselbe fuer die Spec-Zeile — sie ist auf zwei Zeilen begrenzt, belegte
   aber nur eine, wenn die Bauteilnamen kurz sind.
   Gemessen am 2026-08-08 ueber vierzehn Fensterbreiten: bei 1920px standen
   die Leisten auf 373/373/354/373 und bei 1100px auf 340/340/321/340 — je
   19px Unterschied, immer beim Slide „White Builds", dessen Namen
   („RX 9060 XT · AMD Ryzen 5 7500F") in eine Zeile passen, waehrend
   „Nvidia RTX 5060 · AMD RYZEN 5 7500F" umbricht. Dazwischen faellt es nicht
   auf, weil dort alle umbrechen — deshalb war es bei 1660 und 1280 nicht zu
   sehen und wirkte wie ein Zufall.
   Karten ohne Spec-Zeile (kein Bauteil hinterlegt) bleiben unberuehrt: das
   Element wird gar nicht erst gerendert. Sie stehen trotzdem gleich hoch, weil
   das Raster die Zeile streckt. */
.tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__cardspec {
  min-height: calc(2 * 1.4em);
}

/* Zweiter Grund fuer denselben Effekt, erst nach dem ersten sichtbar: die
   Ueberschrift der Leiste. „GAMING PCS AMD RYZEN" bricht auf 390px auf zwei
   Zeilen (Kopf 86px), „WHITE BUILDS" passt in eine (53px) — die 33px
   Unterschied blieben nach der Karten-Angleichung als Einziges uebrig.
   Also auch hier die zweite Zeile reservieren statt den Namen zu kappen:
   ein abgeschnittener Kategoriename waere schlechter als etwas Leerraum. */
@media (max-width: 759.98px) {
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__systitle {
    min-height: calc(2 * 1.1em);
  }
  /* Dritter und letzter Grund: der Kopf ist eine umbrechende Flex-Zeile aus
     Ueberschrift, Hinweis und „Alle Systeme"-Link. Gemessen sind alle drei
     Teile in jedem Slide gleich hoch (37 + 17 + 19) — der Kopf aber 105 statt
     70px, weil bei der breitesten Ueberschrift („GAMING PCS AMD RYZEN") der
     Link in eine eigene Zeile rutscht und bei den kuerzeren nicht. Also
     bekommt er IMMER seine eigene Zeile: drei Zeilen ueberall statt zwei oder
     drei je nach Kategoriename. */
  .tx-hero-slider .tx-hero-slide.tx-hero-banner .tx-hbn__sysall {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ==================== HERO · KNOPF STEHT FEST · END ===========================
   ============================================================================== */


/* ==============================================================================
   ========================= PARTNER-EDITIONEN · BEGIN ==========================
   Umsetzung von design_handoff_editionen/. Vier gleiche Querformat-Kacheln
   (2 × 2, Hoehe 320 px) statt der bisherigen Mischung aus zwei hohen
   Hero-Karten (786 × 524) und zwei flachen Streifen (786 × 295).

   Palette und Schriften sind NICHT uebernommen — gleiche Entscheidung wie beim
   Hero- und beim Spiel-Suche-Handoff: unsere Markenfarbe #01DEC2 statt #22E3C0,
   Oxanium/Rajdhani/Inter statt Saira Condensed/IBM Plex. Der Handoff verlangt
   das ausdruecklich so („in der Umgebung des Zielprojekts mit dessen
   etablierten Mustern nachbauen").

   Warum die Regeln sektionsweit auf .tx-pc-card liegen und nicht auf einem
   neuen Kartentyp „Edition": die vier Kacheln sind gespeicherte OPC-Instanzen,
   und gespeicherte Instanzen bekommen weder neue Felder noch neue Auswahlwerte
   nachgereicht. Ein neuer Kartentyp haette also gar nichts veraendert, bis
   jemand alle vier Karten von Hand umstellt. Die Sektion ist ohnehin nur fuer
   Editionen da — also gibt sie die Geometrie vor, und Kartentyp, Hero-Format
   und Content-Position der einzelnen Karte werden hier bewusst ueberstimmt.

   SPEZIFITAET: ToxicPartnerCard.css hat keinen Cache-Buster (JTL bindet
   Portlet-CSS ohne ?v= ein, nginx liefert 30 Tage immutable) und wird NACH
   custom.css geladen. Jede Regel hier steht deshalb auf mindestens (0,4,0) —
   bei Kind-Elementen also mit .tx-pc-card in der Kette; wo die alte Regel
   selbst ein !important traegt (aspect-ratio der Streifen), steht hier auch
   eines.
   ============================================================================== */

.tx-partners--editionen {
  /* Etwas dunkler als --tx-bg-3 der Nachbarsektionen: der Handoff trennt die
     Sektion nach unten mit einer Haarlinie statt mit einem Farbsprung. */
  background: #0A0B0C;
  border-bottom: 1px solid var(--tx-line);
  padding-block: clamp(44px, 5vw, 80px);
}
.tx-partners--editionen .tx-section__head {
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-bottom: 32px;
}
.tx-partners--editionen .tx-section-sub {
  flex: 0 1 420px;
  margin: 0;
  text-align: right;
  font-family: var(--tx-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx-text-mute);
}

/* ─── Raster ────────────────────────────────────────────────────────────
   Zwei Spalten, 18 px Abstand. Der Umbruch auf eine Spalte kommt bei 1100 px
   und nicht erst bei 767 px: bei 380 px Textbreite bleibt darunter von der
   halben Kachel kein Motiv mehr uebrig. */
.tx-partners--editionen .tx-cards-stack--opc .row {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0 0 18px;
}
.tx-partners--editionen .tx-cards-stack--opc .row:last-child { margin-bottom: 0; }
@media (max-width: 1099px) {
  .tx-partners--editionen .tx-cards-stack--opc .row { grid-template-columns: 1fr; }
}

/* Die OPC-Spalte darf der Kachel keine Hoehe mehr vorgeben. Gemessen am
   2026-08-07: die Kacheln der zweiten Reihe standen auf 295,875 px statt 320,
   obwohl an der Karte selbst aspect-ratio:auto und height:320px anlagen. Grund
   sind ZWEI Dinge zusammen — die Spalte traegt aus der Streifen-Regel weiter
   oben ein aspect-ratio:16/6 (und die gewinnt mit (0,4,0) gegen die
   :has()-Regel, die es zuruecknehmen soll), und sie ist ein Flex-Container:
   die Karte ist damit ein Flex-Kind mit flex-shrink:1 und wird auf die
   Spaltenhoehe zusammengedrueckt. display:block nimmt ihr die Flex-Eigenschaft,
   aspect-ratio:auto die Hoehe. Der Selektor braucht .row in der Kette, sonst
   verliert er gegen die (0,4,0) der Streifen-Regel. */
.tx-partners--editionen .tx-cards-stack--opc .row [data-area-id^="col-"] {
  aspect-ratio: auto !important;
  height: auto;
  min-height: 0;
  display: block;
}

/* ─── Kachel ────────────────────────────────────────────────────────────
   Feste Hoehe statt aspect-ratio: die vier Kacheln muessen unabhaengig von
   ihrem Kartentyp gleich hoch sein. !important, weil die Streifen-Regel
   weiter oben in dieser Datei selbst eines traegt (Mobil-Fix 2026-07-17) —
   ein !important schlaegt jede Regel ohne, egal wie spezifisch. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: 320px;
  display: block;
  border: 1px solid var(--tx-line);
  background: var(--tx-bg-2);
  transition: border-color .2s ease;
}
/* Handoff: der Rahmenwechsel ist die EINZIGE Hoverreaktion — kein Anheben,
   kein Zoom, kein Schatten. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card:hover {
  border-color: var(--tx-mint);
  transform: none;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card:focus-within {
  border-color: var(--tx-mint);
  outline-offset: 2px;
}

/* ─── Motiv ─────────────────────────────────────────────────────────────
   object-position bleibt beim Redakteur (Feld „Bild-Fokus") — welcher
   Ausschnitt eines konkreten Motivs traegt, entscheidet das Motiv, nicht die
   Sektion. Zurueckgenommen werden nur Zoom und Abdunklung. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card > .tx-pc-card__bg {
  opacity: 1;
  transition: none;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card:hover > .tx-pc-card__bg {
  transform: none;
  opacity: 1;
}
/* Fall „eigenes Mobil-Motiv gepflegt": dann ist .tx-pc-card__bg ein <picture>.
   Ein <picture> ist kein ersetztes Element — object-fit/-position wirken dort
   nicht, sie muessen an das innere <img>. object-position: inherit uebernimmt
   dabei den Wert, den die Fokus-Regeln am <picture> gesetzt haben; so bleibt
   das Feld „Bild-Fokus" auch hier wirksam, ohne jede Variante zu wiederholen. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card > picture.tx-pc-card__bg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: inherit;
}

/* ─── Scrim ─────────────────────────────────────────────────────────────
   Als ::before der Kachel und nicht ueber .tx-pc-card__overlay: dieses
   Element gibt es nur, wenn der Redakteur einen Verlauf gewaehlt hat — zwei
   der vier Karten stehen auf „Kein Verlauf" und haetten gar keins. Der
   Verlauf des Portlets wird abgeschaltet, sonst addieren sich beide. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(11,12,13,.97) 10%,
              rgba(11,12,13,.60) 48%,
              rgba(11,12,13,0)   80%);
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card > .tx-pc-card__overlay {
  display: none;
}
/* Der Verlauf bleibt schaltbar. In der ersten Fassung (2026-08-07) war er fest
   verdrahtet — das Feld „Dunkler Verlauf" hatte in dieser Sektion keine
   Wirkung mehr, und ein Motiv, das von sich aus dunkel ist, liess sich nicht
   freistellen. Gemeldet mit „ich schaffe es nicht, den Verlauf rauszubekommen".
   Die Richtungen des Feldes werden hier bewusst NICHT einzeln umgesetzt: der
   Text steht in dieser Sektion immer links, ein Verlauf von rechts waere
   sinnlos. Uebrig bleiben drei sinnvolle Zustaende. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-overlay="none"]::before {
  display: none;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-overlay="full"]::before {
  background: rgba(11,12,13,.45);
}

/* ─── Textblock ─────────────────────────────────────────────────────────
   Absolut, links, senkrecht mittig. Ueberstimmt die vier Content-Positionen
   des Portlets (bottom-left/-right, top-left/-right) — die Sektion laesst nur
   eine Anordnung zu, sonst stehen vier Kacheln nebeneinander mit vier
   verschiedenen Textecken. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__content {
  /* Der Block spannt die ganze Kachel auf statt nur den Textkasten. Das ist
     die Voraussetzung dafuer, dass der Knopf weiter unten an der UNTERKANTE
     der Kachel haengen kann: ein absolut gesetztes Kind bezieht sich auf den
     naechsten positionierten Vorfahren — waere das der 380er Textkasten,
     saesse der Knopf an dessen Unterkante und nicht an der der Kachel. */
  position: absolute;
  inset: 0;
  top: 0;
  transform: none;
  /* 5 statt 3: der Kachel-Link (.tx-pc-card__stretch) liegt auf z-index 4 und
     deckt die ganze Karte ab. Der Knopf traegt zwar selbst z-index 5, das half
     aber nichts — dieser Block ist `position: absolute` MIT z-index und macht
     damit einen eigenen Stapelkontext auf; die 5 des Knopfes gilt nur INNERHALB
     davon, und der Block als Ganzes lag unter dem Link. Gemessen am 2026-08-07:
     der Zeiger erreichte den Knopf nie, es gab also auch keinen Hover.
     Der Block bleibt `pointer-events: none`, nur der Knopf nimmt Klicks an —
     die uebrige Kachel bleibt also weiter ueber den Link klickbar. */
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 9px;
  /* Bei left:0 und right:0 zugleich gewinnt in LTR das linke Anlegen, sobald
     die Breite begrenzt ist — der Kasten sitzt also links und ist 380 breit. */
  max-width: calc(380px + 68px);
  padding: 30px 34px 84px;
  /* Der Text soll den Kachel-Link nicht abfangen; der Knopf bekommt seine
     Klickbarkeit weiter unten einzeln zurueck. */
  pointer-events: none;
}
/* Die Abstaende macht gap — die Einzelabstaende der Portlet-CSS wuerden sich
   sonst dazuaddieren. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__content > * {
  margin: 0;
}

.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__kicker {
  font-family: var(--tx-sub);
  font-weight: 600;
  /* 13 px statt der 11 px des Handoffs: unterhalb 13 px darf die Sperrung
     hoechstens 0,08em betragen, und ohne Sperrung ist ein Kicker kein Kicker
     mehr. Die Farbe bleibt beim Redakteur (Feld „Eyebrow-Farbe") —
     Partnerkarten tragen legitim Partnerfarben. */
  font-size: 13px;
  line-height: 1;
  letter-spacing: .18em;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__headline {
  font-family: var(--tx-h);
  font-weight: 700;
  /* Die Groesse steht seit 2026-08-07 im Portlet-Feld „Textgroesse" und nicht
     mehr fest im CSS — erst 42 px (Handoff), dann 30, und auch die waren auf
     der Kachel noch zu laut. Hier steht nur die Vorgabe fuer den Fall, dass
     das data-Attribut fehlt (gespeicherte Instanz ohne den neuen Wert). */
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  /* Flach: die Lesbarkeit macht der Scrim, nicht ein Schlagschatten. */
  text-shadow: none;
  /* Ohne beides sprengt ein langes Wort die 380 px, statt umzubrechen —
     break-word wuerde nur den Umbruch erlauben, aber die min-content-Breite
     nicht senken. */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Die drei Stufen des Feldes „Textgroesse". Der Selektor traegt das
   Attribut zusaetzlich zur Klassenkette und liegt damit ueber der Vorgabe. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-text-size="klein"] .tx-pc-card__headline {
  font-size: 20px;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-text-size="mittel"] .tx-pc-card__headline {
  font-size: 24px;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-text-size="gross"] .tx-pc-card__headline {
  font-size: 30px;
}

.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__sub {
  font-family: var(--tx-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-text-dim);
  max-width: none;
  margin-left: 0;
  text-shadow: none;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__meta {
  font-family: var(--tx-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tx-text-mute);
}

/* ─── Knopf ─────────────────────────────────────────────────────────────
   Umrandet, rechtwinklig, in der Markenfarbe. Der Knopf-Stil der einzelnen
   Karte (hier ueberall „Weiss") wird ueberstimmt: gefuellte Knoepfe bleiben
   im Shop den Kauf-Aktionen vorbehalten, und in dieser Sektion wird nichts
   gekauft. „Rechtwinklig" heisst, dass die gekappte Ecke ausdruecklich
   zurueckgenommen werden muss — sie steckt in den Stil-Klassen. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta {
  /* An der Unterkante der Kachel statt direkt unter dem Text: so bleibt in der
     Mitte mehr vom Motiv sichtbar. Bezugsrahmen ist der Content-Block, der
     dank inset:0 deckungsgleich mit der Kachel ist. */
  position: absolute;
  left: 34px;
  bottom: 26px;
  align-self: flex-start;
  margin: 0;
  padding: 11px 22px;
  font-family: var(--tx-sub);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--tx-mint);
  color: var(--tx-mint);
  clip-path: none;
  backdrop-filter: none;
  pointer-events: auto;
  transition: background-color .2s ease, color .2s ease;
}
/* Eine Variante muss im :hover ALLE Eigenschaften der Grundregel
   zuruecknehmen, nicht nur die eine, die man aendern will — sonst leuchtet
   der Knopf beim Ueberfahren der Kachel auf und wandert nach oben. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card:hover .tx-pc-card__cta {
  filter: none;
  transform: none;
}
/* Der Knopf zeigt, wo man klickt: gefuellt statt umrandet, sobald der Zeiger
   darauf steht — und ebenso beim Tastatur-Fokus, sonst waere die Stelle nur
   mit der Maus zu finden. Der Zeiger wird ausdruecklich gesetzt: der Knopf
   liegt ueber einer Flaeche, die selbst keine Klicks annimmt. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta {
  cursor: pointer;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta:hover,
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta:focus-visible {
  background: var(--tx-mint);
  color: #062019;
}
/* Der Pfeil rueckt beim Ueberfahren ein Stueck weiter — dieselbe Geste wie an
   den Produktkarten, und sie macht auf einem dunklen Motiv auch dann etwas
   sichtbar, wenn der Farbwechsel gerade untergeht. */
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta .tx-arr {
  transition: transform .15s ease;
}
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta:hover .tx-arr,
.tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta:focus-visible .tx-arr {
  transform: translateX(3px);
}

/* ─── Tablet: eine Spalte, flachere Kachel ─────────────────────────────── */
@media (max-width: 1099px) {
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card { height: 280px; }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__headline {
    font-size: 27px;
  }
}

/* ─── Telefon ───────────────────────────────────────────────────────────
   Der Textblock liegt weiter auf dem Motiv — der Handoff behaelt den
   waagerechten Verlauf auch hier bei —, nimmt aber 82 % der Breite. */
@media (max-width: 759px) {
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card { height: 240px; }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__content {
    max-width: calc(82% + 44px);
    padding: 24px 22px 74px;
    gap: 7px;
  }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__cta {
    left: 22px;
    bottom: 20px;
  }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card .tx-pc-card__headline {
    font-size: 20px;
  }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-text-size="klein"] .tx-pc-card__headline {
    font-size: 17px;
  }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-text-size="mittel"] .tx-pc-card__headline {
    font-size: 20px;
  }
  .tx-partners--editionen .tx-cards-stack--opc .tx-pc-card[data-text-size="gross"] .tx-pc-card__headline {
    font-size: 23px;
  }
  .tx-partners--editionen .tx-cards-stack--opc .row { gap: 14px; margin-bottom: 14px; }
  .tx-partners--editionen .tx-section-sub { text-align: left; flex-basis: 100%; }
  .tx-partners--editionen .tx-section__head { margin-bottom: 24px; }
}

/* ======================= PARTNER-EDITIONEN · END =============================
   ============================================================================== */