/* ====================================================================== *
 * Startseite – Handlungsaufruf im Kopfbereich und Produktbänder
 * Nur die Startseite lädt dieses Stylesheet. Nutzt ausschließlich die
 * Tokens aus tailwind/input.css (@theme).
 * ====================================================================== */

/* ---------- Kopfbereich ------------------------------------------------- */
/* Die Knöpfe stehen direkt unter der Überschrift, damit der Weg in die
   Anfrage auch auf Laptop und Handy im ersten Bildschirm liegt. */
.hero__text > .hero__actions--top {
  margin-top: 1.75rem;
}

.hero__text > .hero__actions--top + * {
  margin-top: 1.9rem;
}

/* Desktop: Die Überschrift bricht in vier statt fünf Zeilen um, damit
   Einleitung und Hinweis neben der Partnerkarte im ersten Bildschirm
   stehen. */
@media (min-width: 1200px) {
  .hero--home h1 {
    font-size: clamp(3rem, 1.9rem + 1.6vw, 3.4rem);
  }
}

/* Hintergrundbild: Handy und Tablet zeigen es über dem Text (Ausschnitt mit
   den Geräten). Ab 900 px liegt es über die volle Breite in seinem eigenen
   Seitenverhältnis hinter Text und Partnerkarte: Der Himmel läuft oben in
   den hellen Grund aus, die Geräte stehen unten rechts unter der Karte, und
   am unteren Rand der Bühne blendet das Bild vor dem Kennzahlenband aus. Ein
   heller Verlauf von links hält den Text lesbar; die Karte steht rechts im
   Vordergrund auf einer hellen, halbdurchsichtigen Fläche (hero-map.css). */
.hero--home .hero__stage {
  display: flex;
  flex-direction: column;
}

.hero--home .hero__stage > .shell {
  padding-top: 0.5rem;
}

.hero--home .hero-backdrop img {
  object-position: 88% center;
}

@media (min-width: 900px) {
  .hero--home .hero__stage {
    position: relative;
  }

  .hero--home .hero__stage > .shell {
    padding-top: 0;
  }

  .hero--home .hero-backdrop {
    inset: auto 0 -3rem;
    width: 100%;
    height: auto;
    aspect-ratio: 633 / 266;
    max-height: 50rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 84%, transparent 100%);
  }

  .hero--home .hero-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      color-mix(in oklch, #fff 94%, transparent) 0%,
      color-mix(in oklch, #fff 88%, transparent) 44%,
      color-mix(in oklch, #fff 45%, transparent) 58%,
      transparent 74%
    );
  }

  /* Auf sehr breiten Bildschirmen wird das Bild nicht beliebig hoch; der
     Ausschnitt behält die Geräte und kürzt den Himmel. */
  .hero--home .hero-backdrop img {
    object-position: center 70%;
  }
}

/* ---------- Textspalte -------------------------------------------------- */
/* Dieselbe Teilung wie der Kopfbereich (.hero__grid--media): Texte unter den
   Überschriften stehen in der Breite des Einleitungstexts oben. */
.home-columns {
  display: grid;
  gap: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
}

@media (min-width: 960px) {
  .home-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Kernbereiche als Produktbänder ------------------------------ */
/* Die Bänder schließen bündig an die folgende Sektion an. */
.home-products {
  padding-bottom: 0;
}

.product-bands {
  border-top: 1px solid var(--color-ink-200);
}

.product-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.product-band + .product-band {
  border-top: 1px solid var(--color-ink-200);
}

/* Handy und Tablet: Das Produkt steht über dem Text und läuft nach unten in
   den weißen Grund aus. Im DOM folgt das Bild dem Text, damit Überschrift
   und Anfrage zuerst vorgelesen werden. */
.product-band__media {
  order: -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 26rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
}

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

/* Freigestellte Produkte auf weißem Grund vollständig zeigen. Das Bild
   behält sein Seitenverhältnis und blendet an den eigenen Kanten aus, damit
   der leicht getönte Bildgrund ohne sichtbare Kante in das Band übergeht. */
.product-band--contain .product-band__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-band--contain .product-band__media img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.product-band__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.5rem clamp(3rem, 2.2rem + 2.6vw, 4.5rem);
}

.product-band__title {
  font-family: var(--font-display);
  font-size: var(--text-fluid-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary-900);
  margin-bottom: 0.25rem;
}

.product-band__title a {
  text-decoration: none;
}

.product-band__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.product-band__text {
  margin: 0;
  font-size: var(--text-fluid-base);
  line-height: 1.7;
  color: var(--color-ink-600);
}

.product-band__text a {
  color: var(--color-primary-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-primary-600) 45%, transparent);
  text-underline-offset: 3px;
}

.product-band__text a:hover {
  color: var(--color-primary-800);
  text-decoration-color: currentColor;
}

.product-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.75rem;
}

/* Desktop: Das Produkt liegt rechts im Hintergrund über die volle Höhe bis
   an den Bildschirmrand und blendet zur Textspalte hin sowie oben und unten
   weich aus. Der Text bleibt auf reinem Weiß. */
@media (min-width: 960px) {
  .product-band {
    flex-direction: row;
    align-items: center;
    min-height: clamp(28rem, 18rem + 13vw, 36rem);
  }

  .product-band__media {
    position: absolute;
    inset-block: 0;
    right: 0;
    z-index: -1;
    width: 58%;
    max-height: none;
    aspect-ratio: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, transparent 12%, #000 50%),
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, transparent 12%, #000 50%),
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, 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. */
  .product-band--contain .product-band__media {
    width: 50%;
    justify-content: flex-end;
    padding-block: clamp(1.5rem, 0.5rem + 2vw, 3rem);
    padding-right: clamp(1rem, -1rem + 3vw, 3rem);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .product-band__body {
    padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.5rem);
  }
}

@media print {
  .product-band__media {
    display: none;
  }
}