/* Anfragestrecke: Startbildschirm auf dem Titelbild
   (nur wenn images/hero-inquiry.webp vorhanden ist — Klasse .cf-slide--with-image;
   Bild: partials/components/hero-media.php mit $hero_block = 'cf-hero').

   Wie auf den übrigen Seiten liegt der Text auf dem Bild, hier in der
   zentrierten Form der Strecke: Das Motiv füllt den Startbildschirm über die
   volle Fensterbreite, ein dunkelblauer Verlauf trägt Überschrift, Vorteile
   und „Preis anfragen" in Weiß. Zur Mitte hin wird er dichter, zu den Rändern
   lichter — Tür und kalter Nebel bleiben seitlich sichtbar. */

.cf-slide--with-image {
  --hero-shade: 24% 0.06 254;
  --cf-shade-rx: 50rem; /* Ausdehnung des dichten Verlaufs um den Text */
  --cf-shade-ry: 22rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: -1.25rem; /* hebt den Seitenabstand der Bühne auf */
  padding: 3.5rem 1.25rem;
  color: #fff;
  background: oklch(var(--hero-shade));
}

.cf-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cf-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    ellipse var(--cf-shade-rx) var(--cf-shade-ry) at 50% 50%,
    oklch(var(--hero-shade) / 0.8) 0%,
    oklch(var(--hero-shade) / 0.7) 55%,
    oklch(var(--hero-shade) / 0.38) 100%
  );
}
.cf-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Kennzeichnung als gestaltete Szene — oben rechts, fern von Text und Fussleiste */
.cf-hero__caption {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  margin: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgb(17 24 39 / 0.68);
  border-radius: var(--radius-sm);
}

.cf-slide--with-image .cf-title {
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 4px 18px oklch(var(--hero-shade) / 0.5);
}
.cf-slide--with-image .cf-usp {
  color: rgb(255 255 255 / 0.92);
}
.cf-slide--with-image .cf-btn-desc {
  color: rgb(255 255 255 / 0.78);
}
.cf-slide--with-image .cf-btn-desc strong {
  color: #fff;
}
/* Fokusring auf Dunkelblau sichtbar halten */
.cf-slide--with-image .cf-btn:focus-visible {
  outline-color: #fff;
}

@media (max-width: 48rem) {
  .cf-slide--with-image {
    --cf-shade-rx: 95%;
    --cf-shade-ry: 24rem;
    margin-inline: -1rem;
    padding: 3rem 1rem;
  }
}