/* =============================================================================
   Hero Slider — Vollbild-Bildslider mit Ueberschrift (ACF: acf/hero-slider)
   -----------------------------------------------------------------------------
   @scope kapselt auf .hero-slider. Slide-Wechsel steuert hero-slider.js ueber
   .is-active. Der Hero ist ein gerader Vollbild-Block (keine Schräge).
   ========================================================================== */

/* Hebt das globale padding-block-start:60px von <main> auf, wenn der Hero der
   erste Block ist, damit kein Zwischenraum zum Header entsteht. */
.main > .hero-slider:first-child {
  margin-block-start: -60px;
}

@scope (.hero-slider) {
  :scope {
    position: relative;
    /* Track waechst um diesen Betrag nach UNTEN, Caption + Dots werden gleich
       stark hochgezogen — Titel und Punkte bleiben an ihrer Position, nur das
       Bild reicht tiefer. */
    --hero-extra: 60px;
    --hero-caption-offset: 0rem;
  }

  /* Grosses Logo ueber dem Slider, weiss, oben links, scrollt mit der Seite.
     Der clamp haelt auf Mobil den knappen Bestandswert, gibt Desktop mehr Luft
     (bei festen 4.5rem blieben dort nur 8px zum Header-Schatten). Ab 1920px
     wandert das Logo mit der Bildkante (--content-flank) statt am Fensterrand
     zu kleben. */
  .hero-logo {
    position: absolute;
    inset-block-start: clamp(4.5rem, 7vw, 7.5rem);
    inset-inline-start: calc(var(--inner-padding) + var(--content-flank));
    z-index: 3;
    inline-size: clamp(16rem, 34vw, 33.75rem);
    block-size: auto;
    pointer-events: none;
  }

  /* Bilder-Deckel wie bei .image-section: ab 1920px bleibt das Bild zentriert
     und links/rechts werden hellblaue Flanken sichtbar. Traegt bewusst NUR die
     Bilder — Caption, Logo und Punkte richten sich weiter am Fenster aus. */
  .hero-media {
    position: absolute;
    inset: 0;
    max-inline-size: var(--content-max);
    margin-inline: auto;
    overflow: hidden;
  }

  .hero-track {
    position: relative;
    block-size: min(
      calc(50rem + var(--hero-extra)),
      calc(100vh + var(--hero-extra))
    ); /* 800px + extra */
    min-block-size: 30rem;
    overflow: hidden;
    /* Gerader Block (kein skew): Oberkante bleibt senkrecht und liegt buendig
       unter der Kopfleiste. Nur die Unterkante wird per clip-path im 5°-Winkel
       (8.75vw = Breite*tan5°) schräg beschnitten. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8.75vw), 0 100%);
    background-color: var(--color-blue-light);
  }

  /* Tablet/Mobil: der Hero ist deutlich flacher, feste Hoehen analog zur
     .image-section. */
  @media (width <= 900px) {
    .hero-track {
      block-size: calc(28rem + var(--hero-extra)); /* ~448px + extra */
      min-block-size: 0;
    }
  }

  @media (width <= 601px) {
    .hero-track {
      block-size: calc(26rem + var(--hero-extra)); /* ~416px + extra */
    }

    /* Logo auf Handys ausblenden: der Hero ist hier nur ~416px hoch, das Logo
       laege mit der Ueberschrift im selben engen Raum. Die Marke steht ohnehin
       in der festen Kopfleiste. */
    .hero-logo {
      display: none;
    }
  }

  /* Slides fuellen den Track randlos (gerader Block -> kein Ueberhang noetig). */
  .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
  }

  .hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Abdunklung oben fuer lesbaren Titel (::before-Verlauf). */
  .hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 45%);
  }

  /* Titel unten-links im Bild, mit Puffer 8.75vw ueber der schrägen Unterkante,
     damit er nicht in die abgeschnittene Ecke rutscht. Feinjustage ueber
     --hero-caption-offset. */
  .hero-caption {
    position: absolute;
    inset-block-end: calc(8.75vw + var(--hero-caption-offset) + var(--hero-extra));
    inset-inline: 0;
    z-index: 2;
  }

  /* Bewusst feste Groessen-Stufen pro Breakpoint statt fluidem --h1-size-clamp:
     der faellt zu flach ab und war auf Tablet/Mobil deutlich zu gross. */
  .hero-headline {
    display: none;
    color: var(--color-white);
    margin: 0;
    font-size: 65px;
  }

  .hero-headline.is-active {
    display: block;
  }

  /* Tablet: 42px. */
  @media (width <= 900px) {
    .hero-headline {
      font-size: 42px;
    }

    /* Der redaktionelle Umbruch (Shift+Enter) passt nur auf Desktop-Zeilenlaenge
       — auf schmaleren Screens wuerde er einzelne Woerter allein in eine Zeile
       zwingen. Der Browser bricht hier daher selbst. */
    .hero-headline br {
      display: none;
    }
  }

  /* Mobil: 36px. */
  @media (width <= 601px) {
    .hero-headline {
      font-size: 36px;
    }
  }

  /* Kleine Handys: 28px. */
  @media (width <= 451px) {
    .hero-headline {
      font-size: 28px;
    }
  }

  /* Landscape-Handy: 32px. Der Hero ist dort besonders flach, die 42px der
     Tablet-Stufe waeren zu hoch. */
  @media screen and (width <= 900px) and (orientation: landscape) {
    .hero-headline {
      font-size: 32px;
    }
  }

  /* Kleine Handys: Ueberschrift UNTER das Bild statt hinein. Bei 28px Schrift
     und schmaler Spalte bricht der Titel im Bild drei- bis vierfach um und
     waere kaum lesbar — stattdessen ein eigener blauer Balken unter dem Bild.
     Die Schräge wandert dafuer vom Track auf Bild und Balken (gegengleich
     angeschnitten, fugenlos aneinander). Breakpoint bewusst 451px statt 601px:
     dazwischen ist der Titel im Bild noch lesbar. */
  @media (width <= 451px) {
    .hero-track {
      block-size: auto;
      min-block-size: 0;
      overflow: visible;
      clip-path: none;
      background-color: transparent;
    }

    /* Bilder-Deckel greift hier nicht mehr (kein 1920px-Fenster) — die
       Track-Hoehe soll sich wieder nach dem aktiven Slide richten. */
    .hero-media {
      position: relative;
      inset: auto;
      max-inline-size: none;
      overflow: visible;
    }

    /* Nur der aktive Slide nimmt Platz ein, die anderen bleiben fuer die
       Kreuzblende absolut positioniert. */
    .hero-slide {
      position: absolute;
      inset: 0 0 auto;
      block-size: 17.1875rem; /* 275px */
    }

    .hero-slide.is-active {
      position: relative;
    }

    .hero-image {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8.75vw), 0 100%);
    }

    /* Abdunklung entfaellt: der Titel liegt nicht mehr im Bild. */
    .hero-image::before {
      background: none;
    }

    /* Blauer Balken unter dem Bild, gegengleich angeschnitten, damit die
       Diagonale fugenlos weiterlaeuft. padding-block gleicht auf beiden Seiten
       die Schrägtiefe aus, damit der Text nicht in den Anschnitt rutscht. */
    .hero-caption {
      position: relative;
      inset: auto;
      background-color: var(--color-blue);
      clip-path: polygon(0 8.75vw, 100% 0, 100% calc(100% - 8.75vw), 0 100%);
      margin-block-start: calc(-1 * 8.75vw);
      padding-block: calc(1.2188rem + 8.75vw);
    }

    /* Seitlicher Rand (25px). */
    .hero-caption .inner {
      padding-inline: 25px;
    }

    .hero-headline {
      padding-block: 1.0625rem; /* 17px */
    }
  }

  /* Punkt-Navigation im weissen Bereich unter dem Slider, rechtsbuendig. */
  .hero-dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    /* Wie Bild und Logo ab 1920px gedeckelt: Punkte sitzen an der Bildkante
       statt am Fensterrand, sonst verlieren sie den Bezug zum Slider. */
    padding-inline-end: calc(50px + var(--content-flank));
  }

  .hero-dot {
    inline-size: 15px;
    block-size: 15px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-blue);
    opacity: 1;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .hero-dot.is-active {
    background: var(--color-blue-dark);
  }

  /* Blauer Untergrund: Punkte umkehren, damit sie sichtbar bleiben. */
  :scope.section-blue .hero-dot {
    background: var(--color-white);
  }

  :scope.section-blue .hero-dot.is-active {
    background: var(--color-blue-light);
  }
}