/* Pro Tier — Teaser
   ------------------------------------------------------------
   TEST: Weicher Schlagschatten am Teaser-Unterrand, der nach unten in
   Transparenz ausfadet (als würde der Teaser einen Schatten auf den
   darunterliegenden Content werfen).

   Warum box-shadow statt Gradient-Overlay:
   #teaser-slider hat im Kernel `overflow: hidden` — ein darunter
   positioniertes ::after würde geclippt. Der box-shadow liegt AUSSERHALB
   der Box und wird davon nicht beschnitten; der Blur erzeugt den
   Verlauf-nach-Transparenz. z-index hebt den Teaser über die folgenden
   Sections, sonst verdeckt deren Hintergrund den Schatten.
   Offset-Y positiv = nach unten; negativer Spread zieht die Seiten ein,
   damit der Schatten praktisch nur unten erscheint.
   ------------------------------------------------------------ */
#teaser-slider {
  position: relative;   /* Kernel setzt das bereits — hier nur zur Sicherheit */
  z-index: 1;
  box-shadow: 0 2.25rem 2.75rem -1.25rem hsl(0 0% 0% / 0.30);
}


#teaser-slider hr {
background: var(--color-primary);
}

#teaser-slider .content .btn{
  border-radius: var(--radius-lg);
  border:0;
}


/* Teaser-Scrim in diesem Projekt: NICHT mehr flächig, sondern als zentrale
   Vignette — nur die Bildmitte (wo der Text-Overlay sitzt) wird ins
   Corporate-Navy abgedunkelt, die Bildränder bleiben klar. Die Deckkraft der
   Mitte hängt an --teaser-scrim; das ist per @property registriert, damit der
   Gradient beim Nachdunkeln smooth interpoliert statt hart zu springen
   (Gradienten sind sonst nicht animierbar). An --color-bg-dark gekoppelt,
   zieht also automatisch bei Farbänderung nach. */
@property --teaser-scrim {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

#teaser-slider .bg::after {
  --teaser-scrim: 50%;
  background-color: transparent;
  background-image: radial-gradient(
    ellipse 100% 65% at center,
    color-mix(in srgb, var(--color-bg-dark) var(--teaser-scrim), transparent) 0%,
    color-mix(in srgb, var(--color-bg-dark) calc(var(--teaser-scrim) * 0.55), transparent) 45%,
    transparent 78%
  );
}

/* Nach einem Delay die Mitte weiter abdunkeln (nur CSS).
   An die aktive Slide gekoppelt → startet pro eingeblendetem Slide neu.
   Animiert --teaser-scrim (via @property smooth interpolierbar), forwards =
   Endzustand bleibt. Reduced-Motion respektiert: kein automatisches Nachdunkeln. */
@media (prefers-reduced-motion: no-preference) {

  /* HOME (Welcome-Hero, KEIN .teaser-compact): einfaches Nachdunkeln 60 % → 82 %. */
  @keyframes teaser-darken-home {
    from { --teaser-scrim: 50%; }
    to   { --teaser-scrim: 82%; }
  }
  #teaser-slider:not(.teaser-compact) .slide.active .bg::after {
    animation: teaser-darken-home 2.5s ease 2.5s forwards;
  }

  /* SUBSEITEN (.teaser-compact): langsames Nachdunkeln 60 % → 80 %. */
  @keyframes teaser-darken-sub {
    from { --teaser-scrim: 50%; }
    to   { --teaser-scrim: 80%; }
  }
  #teaser-slider.teaser-compact .slide.active .bg::after {
    animation: teaser-darken-sub 8.5s ease 2.5s forwards;
  }
}

/* ------------------------------------------------------------
   Bildausschnitt ab einer bestimmten Breite verschieben.
   Standard (schmal): center/center. Ab dem Breakpoint: center 25% —
   es wird mehr vom OBEREN Bildteil gezeigt, das Motiv rutscht optisch
   nach unten. Breakpoint bei Bedarf anpassen (aktuell 64rem ≈ 1024px).
   `object-position` greift beim <img>-Render (Standard im Kernel),
   `background-position` ist der Fallback falls als background-image. */
@media (min-width: 64rem) {
  #teaser-slider .bg img,
  #teaser-slider .slide img {
    object-position: center 25%;
  }
  #teaser-slider .bg {
    background-position: center 25%;
  }
}