/* ---------------------------------------------------------------------------
   hero-media.css — Titelbild in voller Breite (Startseite und Unterseiten)
   Alle Motive halten das linke Drittel ruhig und dunkel; dort steht der Text.
   Ab 1024 px liegt das Bild hinter dem Text. Ein Schleier in Nachtblau deckt
   die Textspalte bis zu ihrem rechten Rand mit 90 % und laeuft erst danach
   aus; so bleibt der Kontrast auch an der hellsten Bildstelle unter dem Text
   ueber 4,5:1 (fuer alle 16 Motive an Spaltenrand und Lichtquellen gemessen).
   Darunter steht das Bild als eigenes Band ueber dem Text: Motiv und Aussage
   bleiben beide lesbar, statt dass der Text das Bild vollstaendig verdeckt.
   Wird nach components.css geladen und ueberschreibt dort .hero/.page-head.
--------------------------------------------------------------------------- */

@layer components {
  .media-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 0;
    background-color: var(--color-navy-950);
    color: var(--color-navy-200);
  }

  /* === BILD === */
  /* Auf schmalen Displays im Originalformat: ein flaches Panoramaband, damit
     die Anfrage-Aktion weiterhin ohne Scrollen erreichbar bleibt. */
  .media-hero-media {
    position: relative;
    aspect-ratio: 1916 / 821;
    max-height: 60vh;
  }
  .media-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }
  /* Das Band laeuft nach unten in die Textflaeche aus; die Brotkrumen liegen
     bereits auf dem fast deckenden Teil des Verlaufs (mindestens 5:1 auch bei
     hellem Metall oder Fensterlicht im unteren Bilddrittel). */
  .media-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 28%,
      color-mix(in oklch, var(--color-navy-950) 88%, transparent) 56%,
      var(--color-navy-950) 80%
    );
  }
  .media-hero-note {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-navy-950) 75%, transparent);
    color: var(--color-navy-100);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  /* === TEXT === */
  .media-hero-body {
    position: relative;
    z-index: 1;
    margin-top: -4rem;
    padding-bottom: clamp(3rem, 2.25rem + 3vw, 4.5rem);
  }
  .media-hero h1 {
    color: #fff;
  }
  .media-hero .breadcrumb {
    color: var(--color-navy-100);
  }
  .media-hero .breadcrumb li + li::before {
    color: var(--color-navy-400);
  }
  .media-hero .breadcrumb a:hover {
    color: #fff;
  }
  .media-hero .breadcrumb [aria-current="page"] {
    color: #fff;
  }
  .media-hero .link-arrow {
    color: var(--color-primary-200);
  }
  .media-hero .link-arrow:hover {
    color: #fff;
  }
  .media-hero .page-stamp {
    color: var(--color-navy-200);
  }
  .media-hero .page-stamp b {
    color: #fff;
  }
  /* Auf Nachtblau traegt das helle Cyan die Aktion (Navy-Text 6,8:1). */
  .media-hero .btn-primary {
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
    color: var(--color-navy-950);
  }
  .media-hero .btn-primary:hover {
    background-color: var(--color-primary-300);
    border-color: var(--color-primary-300);
  }
  .media-hero :focus-visible {
    outline-color: var(--color-primary-300);
  }
  .media-hero .flag-strip {
    border-top-color: color-mix(in oklch, var(--color-navy-200) 22%, transparent);
  }
  .media-hero .flag-strip-label {
    color: var(--color-navy-200);
  }
  .media-hero .flag-chip-name {
    color: var(--color-navy-100);
  }
  .media-hero .flag-circle {
    box-shadow: 0 0 0 1px color-mix(in oklch, #fff 35%, transparent);
  }

  @media (min-width: 1024px) {
    .media-hero {
      /* Rechter Rand der Textspalte: Innenabstand der .shell plus Spaltenbreite. */
      --scrim-edge: 39rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: clamp(34rem, 22rem + 18vw, 44rem);
    }
    .media-hero-media {
      position: absolute;
      inset: 0;
      z-index: -1;
      aspect-ratio: auto;
      max-height: none;
    }
    .media-hero-media::after {
      background:
        linear-gradient(
          90deg,
          color-mix(in oklch, var(--color-navy-950) 93%, transparent) 0%,
          color-mix(in oklch, var(--color-navy-950) 90%, transparent) var(--scrim-edge),
          color-mix(in oklch, var(--color-navy-950) 55%, transparent) calc(var(--scrim-edge) + 12%),
          color-mix(in oklch, var(--color-navy-950) 15%, transparent) calc(var(--scrim-edge) + 24%),
          transparent calc(var(--scrim-edge) + 34%)
        ),
        linear-gradient(0deg, color-mix(in oklch, var(--color-navy-950) 55%, transparent), transparent 28%);
    }
    .media-hero-note {
      right: 1.25rem;
      top: 1rem;
    }
    .media-hero-body {
      width: 100%;
      margin-top: 0;
      padding-block: clamp(3.5rem, 2rem + 3vw, 5.5rem);
    }
    /* Unter dem Seitenkopf der Themenseiten rueckt der Eckdaten-Kasten ins Bild. */
    .page-head.media-hero .media-hero-body {
      padding-bottom: clamp(6rem, 4.5rem + 3vw, 7.5rem);
    }
    .media-hero-text {
      max-width: 35rem;
    }
  }
  @media (min-width: 1280px) {
    .media-hero {
      --scrim-edge: calc(50% + 7rem);
    }
    .media-hero-text {
      max-width: 40rem;
    }
  }

  /* === STARTSEITE: BILD ALS HINTERGRUND ===
     Auf der Startseite (.hero) fuellt das Motiv den ganzen ersten Bildschirm
     in voller Breite und liegt auf jedem Display hinter dem Text, auch unter
     1024 px statt als Band darueber. Der Text steht unten im Bild; ist er
     hoeher als der Bildschirm, waechst der Bereich mit. Der freie Streifen
     ueber dem Text waechst nur mit der Bildschirmhoehe, damit die
     Anfrage-Aktion auch auf kleinen Telefonen ohne Scrollen sichtbar bleibt.
     Unter 1024 px liegt der Schleier nicht auf dem ganzen Bild, sondern
     wandert mit dem Textblock: Das Motiv bleibt ueber dem Text hell, unter
     dem Text deckt er so weit, dass auch die gedaempfte Schrift an der
     hellsten Bildstelle ueber 4,5:1 bleibt. */
  .hero.media-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100svh - var(--header-h));
  }
  .hero .media-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    max-height: none;
  }
  /* Hochformat: der Ausschnitt zeigt Hallen, Strasse und Umspannwerk. */
  .hero .media-hero-img {
    object-position: 64% 50%;
  }
  .hero .media-hero-media::after {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-navy-950) 15%, transparent) 0%,
      color-mix(in oklch, var(--color-navy-950) 35%, transparent) 100%
    );
  }
  .hero .media-hero-body {
    --hero-free: clamp(3rem, 100svh - 45rem, 9rem);
    margin-top: 0;
    padding-top: var(--hero-free);
  }
  @media (max-width: 1023.98px) {
    .hero .media-hero-body::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        180deg,
        transparent 0,
        color-mix(in oklch, var(--color-navy-950) 40%, transparent) calc(var(--hero-free) * 0.55),
        color-mix(in oklch, var(--color-navy-950) 64%, transparent) calc(var(--hero-free) - 0.5rem),
        color-mix(in oklch, var(--color-navy-950) 68%, transparent) calc(var(--hero-free) + 10rem),
        color-mix(in oklch, var(--color-navy-950) 76%, transparent) 100%
      );
    }
    .hero .media-hero-text {
      max-width: 40rem;
    }
  }
  /* Tablets: rechts neben der Textspalte laeuft der Schleier aus, dort bleibt
     das Motiv frei. */
  @media (min-width: 640px) and (max-width: 1023.98px) {
    .hero .media-hero-body::before {
      -webkit-mask-image: linear-gradient(90deg, #000 calc(40rem + 3rem), transparent calc(40rem + 14rem));
      mask-image: linear-gradient(90deg, #000 calc(40rem + 3rem), transparent calc(40rem + 14rem));
    }
  }

  @media (min-width: 1024px) {
    .hero.media-hero {
      --scrim-edge: 39rem;
      justify-content: center;
      min-height: max(36rem, calc(100svh - var(--header-h)));
    }
    .hero .media-hero-img {
      object-position: 70% 50%;
    }
    .hero .media-hero-media::after {
      background:
        linear-gradient(
          90deg,
          color-mix(in oklch, var(--color-navy-950) 80%, transparent) 0%,
          color-mix(in oklch, var(--color-navy-950) 72%, transparent) var(--scrim-edge),
          color-mix(in oklch, var(--color-navy-950) 30%, transparent) calc(var(--scrim-edge) + 14%),
          transparent calc(var(--scrim-edge) + 30%)
        ),
        linear-gradient(0deg, color-mix(in oklch, var(--color-navy-950) 60%, transparent), transparent 30%);
    }
    .hero .media-hero-body {
      padding-block: clamp(3.5rem, 2rem + 3vw, 5.5rem);
    }
  }
  @media (min-width: 1280px) {
    .hero.media-hero {
      --scrim-edge: calc(50% + 4rem);
    }
  }

  /* === ECKDATEN UNTER DEM TITELBILD ===
     Das Panel "Auf einen Blick" stand rechts neben dem Text; mit Titelbild
     wuerde es das Motiv verdecken. Es folgt deshalb direkt unter dem Bild und
     legt die Eckdaten ab 1024 px nebeneinander. */
  .head-facts {
    position: relative;
    z-index: 2;
    padding-top: 1.5rem;
  }
  .head-facts + .section {
    padding-top: var(--space-section-sm);
  }
  @media (min-width: 1024px) {
    .head-facts {
      margin-top: -3.5rem;
      padding-top: 0;
    }
    .head-facts .panel-light {
      display: grid;
      grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
      grid-template-rows: auto auto auto 1fr;
      column-gap: 2.5rem;
      padding: 2rem;
      background: #fff;
      border: var(--hairline);
      box-shadow: var(--shadow-lift);
    }
    .head-facts .panel-light > * {
      grid-column: 1;
    }
    .head-facts .panel-light > .link-arrow {
      justify-self: start;
    }
    .head-facts .keyfacts {
      grid-column: 2;
      grid-row: 1 / -1;
      grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
      gap: 1.25rem 0;
      margin: 0;
    }
    .head-facts .keyfacts > div,
    .head-facts .keyfacts > div:first-child,
    .head-facts .keyfacts > div:last-child {
      padding: 0 1.25rem;
      border-top: 0;
      border-left: var(--hairline);
    }
  }
}

/* Hinweiszeilen im Seitenkopf tragen die Textfarbe der hellen Flaeche
   (text-ink-700). Auf dem Titelbild uebernehmen sie das gedaempfte Hellblau
   der Themenseiten; als Utility-Ebene, damit die Regel die Farbklasse schlaegt. */
@layer utilities {
  .media-hero-body .text-ink-700 {
    color: var(--color-navy-200);
  }
}