/* ============================================================
 * Stoll Hero Slider — D1 S3 (Claude-Design-Export, Homepage.dc.html)
 * Desktop: full-bleed Bild, Text unten LINKS direkt auf dem Bild
 *   (Gold-Strich-Eyebrow, 800er-Headline OHNE Uppercase, 17px-Sub,
 *   Gold-CTA mit Chevron), 52px-Quadrat-Pfeile unten RECHTS,
 *   Dots unten links. Gestaffelte Text-Einblendung pro Slide.
 * Mobile (<=767): Bild 340px + WEISSE Karte, -44px nach oben
 *   ueberlappend (Ink-Text auf Weiss), 44px-Pfeile im Bild.
 * Scroll-Parallax auf dem Bild (JS, nur wenn Ken-Burns aus).
 * CSS-Vars kommen aus den Elementor-Widget-Controls.
 * ============================================================ */

.pst-hero {
  --pst-minh: 620px;
  --pst-card-max: 560px;
  --pst-title-minh: 0px;
  --pst-overlap: 0px;
  --pst-mobile-ratio: 16 / 10;
  --pst-trans-dur: 600ms;
  --pst-kb-scale: 1.08;
  --pst-kb-dur: 7000ms;
  position: relative;
  overflow: hidden;
  min-height: var(--pst-minh);
  margin-bottom: calc(-1 * var(--pst-overlap));
  background: var(--pst-ink-800);
  /* Task #48: horizontal wischen steuert den Slider (pst-swipe.js),
   * vertikal bleibt normales Seitenscrollen — deshalb pan-y. */
  touch-action: pan-y;
}

.pst-hero__track {
  display: flex;
  height: 100%;
  min-height: var(--pst-minh);
}
.pst-hero__slide {
  flex: 0 0 100%;
  position: relative;
  min-height: var(--pst-minh);
  display: flex;
  align-items: flex-end;
}

/* ── Transition modes (desktop/tablet only; mobile is single-active stacked) ── */
@media (min-width: 768px) {
  .pst-hero[data-effect="slide"] .pst-hero__track { transition: transform var(--pst-trans-dur) ease; }
  .pst-hero[data-effect="cut"]   .pst-hero__track { transition: none; }
  .pst-hero[data-effect="fade"]  .pst-hero__track { transform: none !important; }
  .pst-hero[data-effect="fade"]  .pst-hero__slide {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity var(--pst-trans-dur) ease;
  }
  .pst-hero[data-effect="fade"]  .pst-hero__slide.is-active { opacity: 1; z-index: 2; }
}

/* ── Media ── */
.pst-hero__media {
  position: absolute; inset: 0; margin: 0;
  transform: scale(1);
}
/* E7 (23.07.2026): echtes <img> statt CSS background-image (LCP-Discovery-Fix,
 * siehe PHP-Kommentar) - object-fit uebernimmt die bisherige background-size:
 * cover-Rolle, object-position die bisherige background-position (Fokuspunkt). */
.pst-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* 5-Stufen-Abdunklung (Export-Defaults 0/.14/.48/.60/.74) — Text unten lesbar */
.pst-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.14) 25%,
    rgba(0,0,0,0.48) 50%,
    rgba(0,0,0,0.60) 75%,
    rgba(0,0,0,0.74) 100%);
}
/* Scrim-Opt-out (25.07.2026, Joe-Wunsch, Widget-Control "scrim"): manche
 * Fotos sind selbst kontrastreich genug, der Verlauf waere nur unnoetige
 * Abdunklung. Spezifitaet (0,2,1) schlaegt die Basis-Regel (0,1,1) zuverlaessig. */
.pst-hero[data-scrim="none"] .pst-hero__media::after { display: none; }
/* Ken Burns — optional (Widget-Control); Parallax-JS greift nur bei KB=off.
 * Ursprungs-Kaskade (21.07.2026, Design-Spec): eigener Fokuspunkt des Slides
 * (--pst-kb-origin, nur gesetzt wenn vom Redakteur bewegt) > sitewiter
 * Motion-Default (--hero-zoom-origin, ACF "Globale Inhalte" -> Motion) >
 * harter Fallback "center 20px". Linear statt ease-out (Design-Spec: der
 * Zoom soll gleichmaessig durchlaufen, nicht am Anfang schneller sein). */
.pst-hero__media { transform-origin: var(--pst-kb-origin, var(--hero-zoom-origin, center 20px)); }
.pst-hero[data-kenburns="yes"] .pst-hero__slide.is-active .pst-hero__media {
  animation: pst-kenburns var(--pst-kb-dur) linear forwards;
}
@keyframes pst-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(var(--pst-kb-scale)); }
}

/* ── Textblock unten links (Export: width:640/max-width:100%, auf dem
 * 1180er-Content-Raster ausgerichtet — "bündig mit den Sektionen darunter",
 * Homepage.dc.html Zeile 224/227f. Kein flacher left:64px: der Container-
 * Formel-Trick (max(...)) haelt den linken Rand deckungsgleich mit jeder
 * anderen Section auf der Seite, auch auf sehr breiten Bildschirmen —
 * ein fixer px-Wert waere dort zu weit vom Content-Raster entfernt.
 * Bugfix 23.07.2026 (Joe-QA): war vorher max-width:560px OHNE width, dadurch
 * schrumpfte die Flex-Column-Card auf die Textbreite (~400px bei kurzen
 * Slides) statt der vorgesehenen festen 640px-Breite. ── */
.pst-hero__card {
  position: absolute; bottom: 64px; z-index: 5;
  left: max(32px, calc((100% - var(--content-max, 1320px)) / 2 + 32px));
  width: var(--pst-card-max);
  max-width: calc(100% - 64px);
  display: flex; flex-direction: column;
  padding: 0; background: transparent;
}
.pst-hero--card-center .pst-hero__card { left: 50%; transform: translateX(-50%); }
.pst-hero--card-right  .pst-hero__card {
  left: auto;
  right: max(32px, calc((100% - var(--content-max, 1320px)) / 2 + 32px));
}

/* Optik jetzt stoll-eyebrow (D1.3 S-C); Hero behaelt bewusst gold-300 statt
 * dem generischen --on-dark-Gold-400 (Joe-Hotfix 15.07., Lesbarkeit auf dem
 * Foto) + eigenen Abstand (.pst-hero__card traegt kein flex_gap). Doppelt
 * qualifiziert (0,2,0), da hero-slider.css ohne Enqueue-Dependency auf
 * stoll-components laedt (Ladereihenfolge nicht garantiert). */
.pst-hero__eyebrow.stoll-eyebrow { margin: 0 0 14px; color: var(--pst-gold-300); }
.pst-hero__title {
  margin: 0 0 14px; font-family: var(--pst-font-display);
  font-weight: var(--pst-fw-heading, 800); color: #FFFFFF;
  font-size: clamp(40px, 4.5vw, 64px); line-height: 1.08;
  letter-spacing: -.01em;
  min-height: var(--pst-title-minh);
}
/* Kit-Heading-Farbe (.elementor-kit-NNN h1, (0,1,1)) uebersteuert die
 * einfache Klasse — Tag-qualifiziert (0,2,1) zurueckholen. */
.pst-hero h1.pst-hero__title,
.pst-hero p.pst-hero__title { color: #FFFFFF; }
.pst-hero__subtitle {
  margin: 0 0 26px; font-family: var(--pst-font-body); font-weight: 400;
  font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.94);
}
.pst-hero__attr {
  margin: 0 0 10px; font-family: var(--pst-font-display); font-weight: 700;
  color: var(--pst-gold-300); font-size: var(--pst-fs-sm);
}
/* CTA: D1.3 S-B — Optik jetzt stoll-btn stoll-btn--primary stoll-btn--hero
 * (components.css); hier nur noch der Card-Layout-Rest. */
.pst-hero__card > .pst-hero__btn { align-self: flex-start; }

/* ── Gestaffelte Text-Einblendung pro Slide-Wechsel (Export heroTextIn) ──
 * Neustart, wenn .is-active gesetzt wird (Selector matcht neu -> Animation
 * laeuft erneut). Reihenfolge: Eyebrow -> Titel -> Sub -> CTA. */
@keyframes pst-heroTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pst-hero__slide.is-active .pst-hero__card > * {
  animation: pst-heroTextIn .6s cubic-bezier(0.22,1,0.36,1) both;
}
.pst-hero__slide.is-active .pst-hero__card > :nth-child(2) { animation-delay: .08s; }
.pst-hero__slide.is-active .pst-hero__card > :nth-child(3) { animation-delay: .16s; }
.pst-hero__slide.is-active .pst-hero__card > :nth-child(4) { animation-delay: .24s; }

/* Hello-reset.css (#CC3366) neutralisieren — .pst-hero__btn faellt seit
 * D1.3 S-B unter .stoll-btn (eigener Reset dort), nicht mehr hier gelistet. */
.pst-hero__nav,
.pst-hero__dot { border: 0 solid transparent; outline-color: transparent; }
.pst-hero__dot { color: transparent; }
.pst-hero__nav:focus-visible,
.pst-hero__dot:focus-visible { outline: 2px solid var(--pst-gold-300); outline-offset: 2px; }

/* ── Pfeile: links/rechts auf vertikaler Mitte (Joe 28.07.2026 — vorher
 * 52px-Quadrate unten rechts in der Ecke: "wie alle normalen Slider").
 * Look bleibt (Quadrat, weisses Icon), Flaeche halbtransparent mit
 * backdrop-filter blur(10px). ── */
.pst-hero__navs { display: contents; }
.pst-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px;
  background: rgba(38,38,38,.35); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--pst-dur-fast) ease, color var(--pst-dur-fast) ease, border-color var(--pst-dur-fast) ease;
}
.pst-hero__nav--prev { left: 24px; }
/* rechts mehr Abstand: die fixe Terminvereinbarungs-Leiste (Site-Chrome,
 * ~46px) ueberlappte den Pfeil bei 24px (Screenshot-Befund 28.07.) */
.pst-hero__nav--next { right: 76px; }
.pst-hero__nav:hover { background: var(--pst-gold-500); border-color: var(--pst-gold-500); color: var(--pst-ink-900); }
/* :focus ohne :hover haelt die Ruhe-Optik (Fund 03.08.): nach einem Tipp/Klick
 * behaelt der Pfeil den Fokus; ohne eigene Flaechenangabe fuellt Hellos
 * Magenta-Warnfarbe den Button. Flaeche, Rahmen und Text gemeinsam gesetzt. */
.pst-hero__nav:focus:not(:hover) {
  background: rgba(38,38,38,.35);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

/* ── Dots: Homepage.dc.html Zeile 1083 — width 10px/28px (active), height
 * 10px, borderRadius:999px (Pill/Rund, KEIN Quadrat). Bugfix 23.07.2026
 * (Joe-QA): eine fruehere Session hatte das eigenmaechtig auf kantige
 * 8px-Quadrate "verbessert" — Verstoss gegen die Handoff-Regel "keine
 * eigenen Design-Entscheidungen", border-radius:0 gilt nur fuer die
 * rechteckige Marke, nicht fuer Slider-Pagination-Dots. Selbe
 * Container-Ausrichtung wie .pst-hero__card (bündig mit dem Content-Raster). */
.pst-hero__dots {
  position: absolute; bottom: 24px; z-index: 5;
  left: max(32px, calc((100% - var(--content-max, 1320px)) / 2 + 32px));
  display: flex; gap: 9px;
}
.pst-hero__dot {
  width: 10px; height: 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.5); padding: 0;
  transition: background-color var(--pst-dur-fast) ease, width var(--pst-dur-fast) var(--pst-ease-out);
}
.pst-hero__dot.is-active { background: var(--pst-gold-500); width: 28px; }
.pst-hero__dot:hover:not(.is-active) { background: rgba(255,255,255,.85); }

/* ── Mobile: Bild 340px + weisse Karte mit -44px-Ueberlappung (Export) ── */
@media (max-width: 767px) {
  .pst-hero { min-height: 0; margin-bottom: 0; background: var(--pst-white); }
  .pst-hero__track { min-height: 0; display: block; transform: none !important; }
  .pst-hero__slide {
    position: relative; inset: auto; min-height: 0;
    display: none; opacity: 1; transition: none;
    flex-direction: column; align-items: stretch;
  }
  .pst-hero__slide.is-active { display: block; }

  /* Bild als eigener Block (kein Vollflaechen-Overlay mehr) */
  .pst-hero__media { position: relative; inset: auto; height: 340px; }
  .pst-hero__media::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 25%, rgba(0,0,0,.15) 50%,
      rgba(0,0,0,.22) 75%, rgba(0,0,0,.31) 100%);
  }

  /* Weisse Karte, nach oben ueberlappend — Ink-Text auf Weiss */
  .pst-hero__card,
  .pst-hero--card-center .pst-hero__card,
  .pst-hero--card-right .pst-hero__card {
    position: relative; left: auto; right: auto; bottom: auto; top: auto;
    transform: none; width: auto; max-width: none;
    margin: -44px 16px 0; padding: 26px 24px 30px;
    background: var(--pst-white);
    box-shadow: 0 18px 44px rgba(38,33,22,.14);
    z-index: 4;
  }
  .pst-hero__eyebrow.stoll-eyebrow { margin-bottom: 12px; color: var(--pst-gold-800); text-shadow: none; }
  .pst-hero__title,
  .pst-hero h1.pst-hero__title,
  .pst-hero p.pst-hero__title { color: var(--pst-ink-800); text-shadow: none; font-size: clamp(30px, 8.5vw, 40px); line-height: 1.1; }
  .pst-hero__subtitle { color: var(--pst-ink-600); text-shadow: none; font-size: 16px; margin-bottom: 20px; }
  .pst-hero__attr { color: var(--pst-gold-800); text-shadow: none; }

  /* Pfeile mobil: 44px, links/rechts auf vertikaler Mitte des 340px-Bilds
   * (28.07.2026 — vorher unten rechts in der Ecke) */
  .pst-hero__nav { width: 44px; height: 44px; top: 170px; }
  .pst-hero__nav--prev { left: 12px; }
  .pst-hero__nav--next { right: 12px; }

  /* Dots mobil aus (Pfeile navigieren, Export-Muster) */
  .pst-hero__dots { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pst-hero__track { transition: none !important; }
  .pst-hero__slide { transition: none !important; }
  .pst-hero[data-kenburns="yes"] .pst-hero__slide.is-active .pst-hero__media { animation: none; }
  .pst-hero__slide.is-active .pst-hero__card > * { animation: none; }
}