/* Seitenspezifisches CSS — ausgelagert aus index.html */
/* Abstimmung auf das neue Hero-Video (helles Gegenlicht):
       weniger Aufhellung, kräftigerer Verlauf oben für Navbar + Headline */
    body[data-page="home"] .hero__video {
      filter: brightness(1.12) contrast(1.03) saturate(1.06);
    }
    body[data-page="home"] .hero__veil {
      background:
        linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.22) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.24) 82%, rgba(0,0,0,0.56) 100%);
    }
    body[data-page="home"] .hero__lede {
      text-shadow: 0 1px 16px rgba(0,0,0,0.45);
    }

    /* ── Hero „Signet zentriert“ — Marke als Hauptmotiv ───────────────── */
    body[data-page="home"] .brand {
      transition: opacity .4s var(--ease), visibility .4s var(--ease);
    }
    body[data-page="home"] .site-header:not(.is-stuck) .brand {
      opacity: 0; visibility: hidden; pointer-events: none;
    }
    .hero--brand .hero__content {
      position: absolute;
      top: 0; bottom: clamp(148px, 19vh, 205px);
      left: var(--pad-x); right: var(--pad-x);
      max-width: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(1.4rem, 3.4vh, 2.4rem);
      text-align: center;
    }
    .hero__baseline {
      position: absolute;
      left: var(--pad-x); right: var(--pad-x);
      bottom: clamp(2rem, 4vh, 2.9rem);
      padding-top: clamp(1.1rem, 2.2vh, 1.7rem);
      border-top: 1px solid rgba(244,239,230,0.28);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
    }
    /* Platzhalter hält die Mitte frei — das Logo selbst fliegt fixed darüber */
    .hero__logo-slot {
      display: block;
      height: clamp(112px, 19vh, 214px);
      aspect-ratio: 1131 / 373;
    }
    .hero__logo {
      position: fixed;
      left: 0; top: 0;
      transform-origin: top left;
      z-index: 55;
      pointer-events: none;
      height: clamp(112px, 19vh, 214px);
      width: auto;
      display: block;
      filter: brightness(0) invert(1) drop-shadow(0 10px 34px rgba(0,0,0,0.45));
      transition: opacity .3s var(--ease);
    }
    .hero__brandrule {
      width: 72px; height: 1px;
      background: rgba(244,239,230,0.55);
    }
    .hero--brand .display {
      margin: 0;
    }
    .hero--brand .hero__lede {
      margin: 0;
      max-width: 48ch;
    }
    .hero--brand .hero__actions {
      margin: 0;
      flex: none;
      justify-content: flex-end;
    }
    .hero--brand .hero__scroll { display: none; }
    @media (max-width: 900px) {
      .hero__baseline {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
      }
      .hero--brand .hero__content { bottom: clamp(210px, 30vh, 280px); }
    }

    /* ── Mobil: Signet, Überschrift und Knöpfe ──────────────────────────
       Das Signet war über die Bildschirmbreite hinaus skaliert (19vh Höhe
       ergaben bei 3:1 rund 486px Breite) und wurde links abgeschnitten.
       Auf Mobil bestimmt darum die Breite die Größe, nicht die Höhe.       */
    @media (max-width: 900px) {
      .hero__logo-slot {
        height: auto;
        width: min(80vw, 360px);
        aspect-ratio: 1131 / 373;
      }
      .hero__logo { height: auto; }

      /* Das helle Gegenlicht des Videos schluckt die Überschrift —
         mehr Verlauf im Mittelfeld und ein kräftigerer Schattensaum. */
      body[data-page="home"] .hero__veil {
        background:
          linear-gradient(180deg, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.28) 16%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.26) 62%, rgba(0,0,0,0.48) 82%, rgba(0,0,0,0.68) 100%);
      }
      body[data-page="home"] .hero .display {
        text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 34px rgba(0,0,0,0.5);
      }
      body[data-page="home"] .hero__lede {
        text-shadow: 0 1px 10px rgba(0,0,0,0.6);
        font-size: 1rem;
      }

      /* Knöpfe untereinander in voller Breite statt rechtsbündig
         nebeneinander — sonst stehen sie ungleich lang im Anschnitt. */
      .hero--brand .hero__actions {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
        gap: 0.7rem;
      }
      .hero--brand .hero__actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 52px;
      }
      .hero__baseline { gap: 1rem; }
      .hero--brand .hero__content { bottom: clamp(250px, 34vh, 320px); }
    }