/* ============================================================
 * Hero Teasers — editorial card track
 * ──────────────────────────────────────────────────────────────
 * v4 (S64-rev4, 2026-05-10) — Apple Editorial / Linear Feature
 *                              / Stripe Product Teaser look.
 *
 * Design intent (was v3 got wrong):
 *   ✗ v3 dunkelte das gesamte Bild mit einem 70 %-Schwarz-Verlauf ab.
 *     Das machte die Karten schwer und billig, das Bild verlor seine
 *     Premium-Wirkung.
 *
 *   ✓ v4: das Bild bleibt im Vordergrund, hochwertig, sichtbar.
 *     Der Text sitzt in einer KLEINEN, schlanken Floating-Glass-Plate
 *     unten links. Die Plate ist content-driven (nicht volle Breite),
 *     hat eine eigene visuelle Existenz und liest sich wie ein
 *     editorial caption tag — nicht wie ein Banner.
 *
 *   ✓ Textfarbe ist konstant weiß. Kein Adaptiv-Switch mehr.
 *
 *   ✓ CTA ist ein Ghost-Link mit Pfeil — kein dominanter Pill-Button.
 *     Pfeil rückt beim Hover weiter — Apple-/Linear-Pattern.
 *
 *   ✓ Subtile cinematic vignette (radial, in den unteren Ecken)
 *     bringt Tiefe, ohne das Bild abzudunkeln.
 *
 *   ✓ Keine Brightness-Klassifikation mehr (war v1/v2-Schwachstelle).
 *
 * ============================================================ */

:root {
  --hero-teasers-edge:    clamp(20px, 5vw, 56px);
  --hero-teasers-gap:     clamp(14px, 1.6vw, 24px);
  --hero-teasers-radius:  22px;
  --hero-teasers-card-h:  clamp(380px, 56vw, 500px);

  --hero-teasers-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 12px 28px rgba(15, 23, 42, 0.10),
    0 24px 64px rgba(15, 23, 42, 0.08);
  --hero-teasers-shadow-hover:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 18px 40px rgba(15, 23, 42, 0.18),
    0 36px 80px rgba(15, 23, 42, 0.14);
  --hero-teasers-ring: 0 0 0 3px rgba(70, 110, 220, 0.32);
}

/* ---- Section frame ----------------------------------------- */
.pxz-hero-teasers {
  position: relative;
  margin-top: clamp(24px, 4vw, 48px);
}

.pxz-hero-teasers__viewport {
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hero-teasers-edge);
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 18px 0 28px;
  outline: none;
  /* Welle 10 (2026-05-10): explizite Mobile-Swipe-Affordance — touch-action
   * pan-x lässt horizontales Wischen zu und gibt vertikales Page-Scroll
   * frei (kein Konflikt). -webkit-overflow-scrolling: touch glättet das
   * Inertia-Verhalten auf älteren iOS-Safari. */
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.pxz-hero-teasers__viewport::-webkit-scrollbar { display: none; }
.pxz-hero-teasers__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(70, 110, 220, 0.55);
  border-radius: 12px;
}

.pxz-hero-teasers__track {
  list-style: none;
  margin: 0;
  padding: 0 var(--hero-teasers-edge);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(80vw, 80vw);
  gap: var(--hero-teasers-gap);
  align-items: stretch;
}
@media (min-width: 600px) { .pxz-hero-teasers__track { grid-auto-columns: minmax(56vw, 56vw); } }
@media (min-width: 900px) { .pxz-hero-teasers__track { grid-auto-columns: clamp(340px, 38vw, 440px); } }
@media (min-width: 1280px) { .pxz-hero-teasers__track { grid-auto-columns: clamp(380px, 30vw, 460px); } }

.pxz-hero-teasers__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
}

/* ---- Card -------------------------------------------------- */
.pxz-hero-teaser {
  position: relative;
  display: block;
  width: 100%;
  height: var(--hero-teasers-card-h);
  border-radius: var(--hero-teasers-radius);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
  background: #0a0e1a;
  box-shadow: var(--hero-teasers-shadow);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition:
    transform 360ms var(--pxz-easing-spring),
    box-shadow 360ms var(--pxz-easing-spring);
}

.pxz-hero-teaser:hover,
.pxz-hero-teaser:focus-visible {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--hero-teasers-shadow-hover);
}
.pxz-hero-teaser:focus-visible {
  outline: none;
  box-shadow: var(--hero-teasers-shadow-hover), var(--hero-teasers-ring);
}

/* ---- Media — image stays in the foreground, only minimal calm */
.pxz-hero-teaser__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.pxz-hero-teaser__media picture,
.pxz-hero-teaser__media img,
.pxz-hero-teaser__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight horizontal bias so the bottom-left third — where the
     plate sits — usually shows the calmer corner of the photo. */
  object-position: 60% center;
  /* Bare-minimum tonal touch. The image keeps its life. */
  filter: brightness(0.97) saturate(1.04);
  transform: scale(1.03);
  transition:
    transform 700ms var(--pxz-easing-spring),
    filter   500ms var(--pxz-easing-spring);
}
.pxz-hero-teaser:hover .pxz-hero-teaser__img,
.pxz-hero-teaser:focus-visible .pxz-hero-teaser__img {
  transform: scale(1.06);
  filter: brightness(1.00) saturate(1.06);
}

/* ---- Cinematic vignette — radial, only in the corners ------
 * Brings depth to the image without making it darker overall.
 * This is the only image-level overlay; everything else lives
 * inside the floating plate.
 * ------------------------------------------------------------ */
.pxz-hero-teaser__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(0, 0, 0, 0)   58%,
      rgba(0, 0, 0, 0.18) 100%
    );
}

/* ---- Floating editorial plate ------------------------------
 *  Slim, content-driven, bottom-left. Frosted glass with a
 *  subtle dark wash so weiße Typografie immer ihre Bühne hat.
 *  Width auto = nur so breit wie der längste Inhalt — wirkt wie
 *  ein editorial caption-tag, nicht wie ein Banner.
 * ------------------------------------------------------------ */
.pxz-hero-teaser__body {
  position: absolute;
  left:   clamp(14px, 2.4vw, 22px);
  right:  clamp(14px, 2.4vw, 22px);
  bottom: clamp(14px, 2.4vw, 22px);
  z-index: 3;
  /* Plate width hugs content. */
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - clamp(28px, 4.8vw, 44px));

  padding: 16px 20px 18px;
  border-radius: 16px;

  background: rgba(14, 18, 30, 0.46);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);

  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.22);

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Fallback for browsers without backdrop-filter — slightly
 * stronger background so the contrast still holds. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .pxz-hero-teaser__body { background: rgba(14, 18, 30, 0.78); }
}

/* ---- Title + Sub — beide in hellem Weiß
 * v4.2: Blocksy-Parent setzt h3 { color: var(--theme-heading-...) }.
 * Spezifität reicht zwar (Klasse > Tag), aber zur Abschirmung
 * gegen Theme-Customizer-Overrides erzwingen wir Weiß per
 * !important — Lesbarkeit ist hart non-negotiable. CTA komplett
 * entfernt (User-Direktive 2026-05-10). */
.pxz-hero-teaser__body { color: #ffffff !important; }
.pxz-hero-teaser__title {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #ffffff !important;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pxz-hero-teaser__sub {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.94) !important;
  margin: 0;
  max-width: 30ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Mobile breathing room -------------------------------- */
@media (max-width: 600px) {
  .pxz-hero-teaser__body  { padding: 14px 16px 16px; gap: 6px; }
  .pxz-hero-teaser__title { font-size: 17px; }
  .pxz-hero-teaser__sub   { font-size: 12.5px; max-width: 26ch; }
}

/* ---- Nav buttons (desktop only) --------------------------- */
.pxz-hero-teasers__nav {
  display: none;
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  padding: 0 calc(var(--hero-teasers-edge) - 24px);
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}
@media (min-width: 900px) {
  .pxz-hero-teasers__nav { display: flex; }
}
.pxz-hero-teasers__btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  color: #0b1220;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(15, 23, 42, 0.10);
  transition:
    transform 220ms var(--pxz-easing-spring),
    background 220ms ease,
    opacity 220ms ease,
    box-shadow 220ms ease;
}
.pxz-hero-teasers__btn:hover {
  transform: scale(1.04);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 12px 28px rgba(15, 23, 42, 0.16);
}
.pxz-hero-teasers__btn:focus-visible {
  outline: none;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 12px 28px rgba(15, 23, 42, 0.16),
    var(--hero-teasers-ring);
}
.pxz-hero-teasers__btn[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ---- Drag affordance -------------------------------------- */
.pxz-hero-teasers__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.pxz-hero-teasers__viewport.is-dragging .pxz-hero-teaser {
  pointer-events: none;
}

/* ---- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pxz-hero-teaser,
  .pxz-hero-teaser__img,
  .pxz-hero-teaser__cta,
  .pxz-hero-teaser__cta-icon,
  .pxz-hero-teasers__btn {
    transition: none !important;
  }
  .pxz-hero-teaser:hover,
  .pxz-hero-teaser:focus-visible {
    transform: none;
  }
  .pxz-hero-teaser:hover .pxz-hero-teaser__img,
  .pxz-hero-teaser:focus-visible .pxz-hero-teaser__img {
    transform: scale(1.03);
    filter: brightness(0.97) saturate(1.04);
  }
  .pxz-hero-teasers__viewport {
    scroll-behavior: auto;
  }
}