/* ============================================================
   Pro Tier — Teaser im Look des Legacy-Hero-Sliders
   Quelle: _legacy/rp/assets/css/_startseite.css (.hero-slider, .btn-luxury-light)
   Markup, Slide-Logik, Fade-up-Staffelung (0.3–1.1s) und 6s-Fortschrittsbalken
   liefert der Kernel (components/teaser.css, js/page/teaser.js) bereits identisch —
   hier nur die IPS-Optik: Graustufen-Bild, dunkler Verlauf, hellgraue Typo,
   heller Button mit Gold-Schrift.
   ============================================================ */

:root {
  /* Legacy: min-height 70vh, ≤ Tablet 60vh. max(): auf
     niedrigen Fenstern fällt der Hero nicht zusammen, der Text rutscht nicht
     unter den schwebenden Header. */
  --teaser-hero-min-height:        max(70vh, 40rem);
  --teaser-hero-min-height-tablet: max(60vh, 36rem);
  --teaser-hero-min-height-mobile: 60vh;

  /* Legacy --teaser-main-clr */
  --teaser-ips-color:   rgb(191, 191, 191);
  --teaser-ips-ease:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Bild-Look: AKTIV = heller (25.09.2026) ─────────────────────────
     Weiterhin Schwarz-Weiß, aber weniger harter Kontrast, keine Abdunklung
     im Filter und ein leichterer Verlauf. */
  --teaser-ips-filter:  grayscale(100%) contrast(125%) brightness(0.8);
  --teaser-ips-overlay: linear-gradient(to bottom,
                          rgb(0 0 0 / 0.25) 0%,
                          rgb(0 0 0 / 0.45) 70%,
                          rgb(0 0 0 / 0.35) 100%);

  /* ─── BACKUP: Legacy-Look (bis 24.09.2026, dunkler) ──────────────────
     Zum Zurückschalten die beiden Zeilen oben durch diese ersetzen:
       --teaser-ips-filter:  grayscale(100%) contrast(150%) saturate(200%) brightness(0.8);
       --teaser-ips-overlay: linear-gradient(to bottom,
                               rgb(0 0 0 / 0.4) 0%,
                               rgb(0 0 0 / 0.6) 70%,
                               rgb(0 0 0 / 0.5) 100%);                    */
}

/* --- Bild: Graustufen + Kontrast, langsamer Zoom (Ken Burns) --- */
#teaser-slider .bg::after {
  background: var(--teaser-ips-overlay);
}

#teaser-slider .bg img,
#teaser-slider .bg video {
  filter: var(--teaser-ips-filter);
  transform: scale(1.06);
}

#teaser-slider .slide.active .bg img,
#teaser-slider .slide.active .bg video {
  transform: scale(1);
}

/* --- Typografie --- */
#teaser-slider .content {
  color: var(--teaser-ips-color);
}

/* Eyebrow-Label als farbiger Badge (Kundenwunsch 24.09.2026) — Primary-Gold,
   gleiche Rundung wie Buttons und Nav. Weiß auf Primary = 5.0:1 (AA).
   inline-block statt block: der Badge ist nur so breit wie sein Text und
   bleibt über text-align:center der .content mittig. */
#teaser-slider .label {
  display: inline-block;
  padding: 0.45em 1em 0.45em 1.3em;   /* rechts weniger: letter-spacing hängt am letzten Zeichen */
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  letter-spacing: 0.3em;
}

#teaser-slider:not(.teaser-compact) h2 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.02em;
}

#teaser-slider h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--teaser-ips-color);
}

#teaser-slider hr {
  background: rgb(191 191 191 / 0.5);
}

#teaser-slider .content p {
  font-size: 1.15rem;
  color: rgb(191 191 191 / 0.95);
}

/* --- Button: Legacy .btn-luxury-light ---
   Legacy-Schrift war das Original-Gold (#c5a449, 2.4:1 auf Weiß) — hier das
   AA-konforme Primary-Gold, optisch gleich warm. */
#teaser-slider .content a {
  gap: 1rem;
  padding: 1.25rem 2.5rem;
  border: none;
  border-radius: var(--btn-radius);   /* IPS-Rundung wie alle Buttons */
  background: hsl(0 0% 98%);
  color: var(--color-primary);
  font-family: var(--font-button);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  transition: background 0.4s var(--teaser-ips-ease),
              color 0.4s var(--teaser-ips-ease),
              gap 0.4s var(--teaser-ips-ease);
}

#teaser-slider .content a:hover,
#teaser-slider .content a:focus-visible {
  gap: 1.5rem;
  background: var(--color-primary);
  color: hsl(0 0% 98%);
}

/* --- Indikatoren: 60px-Balken, Fortschritt im Primary-Gold ---
   Vorher --color-accent (helles Logo-Gold #c5a449) — stand direkt unter
   Button-Schrift und Badge im Primary-Gold und wirkte als zweiter Ton. */
#teaser-slider .indicators {
  bottom: 2.5rem;
  gap: 1rem;
}

#teaser-slider .indicators button {
  width: 60px;
}

#teaser-slider .indicators button::before {
  background: var(--color-primary);
}

#teaser-slider .indicators button.active {
  background: hsl(0 0% 100% / 0.85);
}

/* --- Pfeile: dezente Glas-Kacheln wie Legacy (Sichtbarkeit: teaser_arrows = hover) --- */
#teaser-slider .prev,
#teaser-slider .next {
  border-radius: 0.25rem;
  backdrop-filter: blur(10px);
}

/* --- Responsive --- */
@media screen and (max-width: 44.999rem) {
  #teaser-slider .indicators {
    bottom: 1.25rem;
  }
  #teaser-slider .indicators button {
    width: 40px;
  }
  #teaser-slider .content a {
    padding: 1rem var(--btn-padding-inline-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  #teaser-slider .bg img,
  #teaser-slider .bg video,
  #teaser-slider .slide.active .bg img,
  #teaser-slider .slide.active .bg video {
    transform: none;
    transition: none;
  }
}