/* ====================================================================== *
 * Hintergrundbild der Seitenköpfe (render_hero_backdrop())
 * Jede öffentliche Seite zeigt im ersten Bildschirm ein Foto über die volle
 * Breite. Handy und Tablet: Das Bild steht über dem Text und läuft nach unten
 * in den Grund aus. Desktop: Das Bild liegt rechts im Hintergrund, reicht bis
 * an den Fensterrand und blendet zum Text hin sowie oben und unten weich aus;
 * der Text bleibt auf hellem Grund. Nutzt ausschließlich die Tokens aus
 * tailwind/input.css (@theme).
 * ====================================================================== */

.hero--backdrop,
.page-hero--backdrop {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

/* ---------- Handy und Tablet: Bild über dem Text ------------------------ */
/* Im DOM folgt das Bild dem Text, damit Überschrift und Anfrage zuerst
   vorgelesen werden. Der Text rückt in den auslaufenden Bildrand. */
.hero-backdrop {
  position: relative;
  z-index: -1;
  order: -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(19rem, 36svh);
  margin-bottom: -2rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

.hero-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-backdrop--left img {
  object-position: 20% center;
}

.hero-backdrop--right img {
  object-position: 80% center;
}

.hero-backdrop--top img {
  object-position: center 30%;
}

/* Freigestellte Produkte vollständig zeigen. Das Bild blendet an den eigenen
   Kanten aus, damit der helle Bildgrund ohne sichtbare Kante übergeht. */
.hero-backdrop--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 1rem 0.5rem;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-backdrop--contain img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* Der Text beginnt unter dem Bild; der obere Innenabstand entfällt. */
.hero--backdrop > .shell,
.page-hero--backdrop > .shell {
  padding-top: 0.5rem;
}

/* ---------- Desktop: Bild rechts im Hintergrund ------------------------- */
@media (min-width: 900px) {
  /* Der Kopf beginnt dicht unter der Navigation, damit Überschrift,
     Anfrageknopf und Einleitung auch auf Laptops im ersten Bildschirm
     stehen. */
  .hero--backdrop,
  .page-hero--backdrop {
    justify-content: center;
    min-height: clamp(30rem, 19rem + 17vw, 40rem);
    padding-top: clamp(2.25rem, 1rem + 2.8vw, 4rem);
  }

  .hero--backdrop {
    padding-top: clamp(3rem, 1.2rem + 3.6vw, 5.5rem);
  }

  /* Rechts- und Suchseiten: schlanker Kopf, das Bild trägt trotzdem. */
  .page-hero--slim.page-hero--backdrop {
    min-height: clamp(17rem, 12rem + 8vw, 22rem);
    padding-top: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
  }

  .hero--backdrop > .shell,
  .page-hero--backdrop > .shell {
    padding-top: 0;
  }

  /* Das Bild füllt den ersten Bildschirm; bei langen Einleitungen läuft es
     dort aus, statt über die ganze Höhe gestreckt und unscharf zu werden. */
  .hero-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: min(100%, max(32rem, 100svh - 5rem), 46vw);
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, transparent 22%, #000 60%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 76%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, transparent 22%, #000 60%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 76%, transparent 100%);
    mask-composite: intersect;
  }

  /* Freigestellte Produkte beginnen erst in der rechten Hälfte, damit sie
     auch auf schmalen Bildschirmen nicht in die Textspalte ragen. */
  .hero-backdrop--contain {
    width: 50%;
    justify-content: flex-end;
    padding-block: clamp(2rem, 1rem + 2.4vw, 3.5rem);
    padding-right: clamp(1rem, -1rem + 3vw, 3rem);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-backdrop--contain img {
    height: auto;
    max-height: 100%;
  }

  /* Schmale Rechtsseiten setzen den Titel in Lesetextbreite mittig; das Bild
     bleibt deshalb im rechten Drittel. */
  .page-hero--slim .hero-backdrop {
    width: 42%;
  }

  /* Der Text steht links, rechts bleibt das Bild frei. Die Textspalte ist
     etwas breiter als die Hälfte und die Überschrift kleiner als im
     Seitentext, damit lange Titel nicht auf fünf Zeilen anwachsen und der
     Kopf mit Anfrageknopf und Einleitung in den ersten Bildschirm passt. */
  .hero--backdrop .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-hero--backdrop .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-hero--backdrop h1 {
    font-size: clamp(2.125rem, 1.4rem + 1.75vw, 3.3rem);
  }

  @media (min-width: 1200px) {
    .page-hero--backdrop .page-hero__grid {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
  }

  .page-hero--slim.page-hero--backdrop .page-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .hero-backdrop {
    display: none;
  }
}