/* Kopfbereich einer Inhaltsseite mit Foto über die volle Breite
   (templates/article.php, includes/hero-backdrop.php): Überschrift, Autorenzeile
   und Anfrage-Knopf stehen weiß auf dem Foto, der Schnellstart der Anfrage als
   weiße Karte rechts daneben. Die Bandfarbe ist auch ohne Bild gesetzt, damit
   der Kontrast nie am Foto hängt.

   Diese Datei liegt außerhalb der Tailwind-Ebenen und gewinnt deshalb gegen die
   Regeln des gewohnten, hellen Kopfbereichs. */

.page-hero--photo {
  --hero-strip: clamp(12.5rem, 8rem + 24vw, 18rem);
  isolation: isolate;
  background: var(--color-primary-950);
  border-bottom: 0;
}
/* Die farbigen Lichtflecken des hellen Kopfbereichs würden das Foto einfärben. */
.page-hero--photo::after { content: none; }

/* Auf dem Telefon liegt das Foto als Bildstreifen oben und läuft nach unten in
   die Bandfarbe aus — über das ganze, hohe Band gezogen stünde es nur als
   unkenntlicher Ausschnitt hinter dem Text. Oben dunkelt der Verlauf leicht für
   die Brotkrumen ab, unten deckt er für die Überschrift. */
.page-hero--photo > .page-hero-media {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: var(--hero-strip);
}
.page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    oklch(0.238 0.033 198 / 0.80) 0%,
    oklch(0.238 0.033 198 / 0.64) 26%,
    oklch(0.238 0.033 198 / 0.30) 46%,
    oklch(0.238 0.033 198 / 0.78) 74%,
    var(--color-primary-950) 100%);
}
/* Die Überschrift beginnt im unteren, abgedunkelten Teil des Bildstreifens. */
.page-hero--photo .hero-grid { padding-top: calc(var(--hero-strip) - 8.5rem); }

/* ------------------------------------------------- Text auf dem Foto -- */

.page-hero--photo .breadcrumb,
.page-hero--photo .breadcrumb a { color: var(--color-primary-100); }
.page-hero--photo .breadcrumb a:hover { color: #fff; }
.page-hero--photo .breadcrumb span[aria-current] { color: #fff; }
.page-hero--photo .breadcrumb svg { color: var(--color-primary-300); }

.page-hero--photo .eyebrow { color: var(--color-accent-300); }
.page-hero--photo h1 {
  hyphens: auto;
  overflow-wrap: break-word;
  color: #fff;
  text-shadow: 0 1px 18px oklch(0.238 0.033 198 / 0.5);
}

.page-hero--photo .byline { color: #fff; }
.page-hero--photo .byline strong { color: #fff; }
.page-hero--photo .byline a { text-decoration-color: color-mix(in oklch, #fff 50%, transparent); }
.page-hero--photo .byline a:hover { color: var(--color-accent-300); text-decoration-color: currentColor; }
.page-hero--photo .byline span[aria-hidden] { color: var(--color-primary-300); }

.page-hero--photo .lead { color: var(--color-primary-100); }
.page-hero--photo .byline,
.page-hero--photo .lead,
.page-hero--photo .hero-cta-note { text-shadow: 0 1px 10px oklch(0.238 0.033 198 / 0.55); }

/* Auf dem dunklen Grund trägt der Anfrage-Knopf die Akzentfarbe — die
   Markenfarbe des hellen Kopfbereichs ginge im Foto unter. */
.page-hero--photo .hero-cta .btn-primary {
  background: var(--color-accent-500);
  color: var(--color-primary-950);
}
.page-hero--photo .hero-cta .btn-primary:hover {
  background: var(--color-accent-400);
  box-shadow: var(--shadow-lift);
}
.page-hero--photo .hero-cta-note { color: var(--color-primary-100); }
.page-hero--photo .hero-cta-note svg {
  color: var(--color-accent-300);
  background: color-mix(in oklch, #fff 14%, transparent);
}

/* Richtpreis über dem Knopf (Immobilienseiten) und die stille Alternative
   darunter tragen im hellen Kopfbereich dunkle Schrift. */
.page-hero--photo .price-tag .price-tag-amount { color: #fff; }
.page-hero--photo .price-tag .price-tag-meta { color: var(--color-primary-100); }
.page-hero--photo .price-tag .price-tag-more { color: var(--color-accent-300); }
.page-hero--photo .price-tag,
.page-hero--photo .hero-cta-alt { text-shadow: 0 1px 10px oklch(0.238 0.033 198 / 0.55); }
.page-hero--photo .hero-cta-alt { color: var(--color-primary-100); }
.page-hero--photo .hero-cta-alt a {
  color: #fff;
  text-decoration-color: color-mix(in oklch, #fff 50%, transparent);
}
.page-hero--photo .hero-cta-alt a:hover {
  color: var(--color-accent-300);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------- ab Desktop -- */

/* Ab Desktop trägt das Foto das ganze Band und füllt den ersten Bildschirm:
   Der Verlauf deckt links unter dem Text am stärksten und gibt das Motiv nach
   rechts frei, wo nur die weiße Schnellstart-Karte darüber steht. */
@media (min-width: 1024px) {
  .page-hero--photo {
    display: flex;
    align-items: center;
    min-height: clamp(32rem, 68vh, 42rem);
  }
  .page-hero--photo > .container-x { width: 100%; }
  .page-hero--photo > .page-hero-media { inset: 0; height: auto; }
  .page-hero-media img { object-position: 38% 42%; }
  .page-hero-media::after {
    background: linear-gradient(96deg,
      oklch(0.238 0.033 198 / 0.88) 0%,
      oklch(0.238 0.033 198 / 0.82) 40%,
      oklch(0.238 0.033 198 / 0.76) 62%,
      oklch(0.238 0.033 198 / 0.38) 80%,
      oklch(0.238 0.033 198 / 0.18) 100%);
  }
  .page-hero--photo .hero-grid { padding-top: 0; }
  .page-hero--photo .hero-grid--quickstart { align-items: center; }
  .page-hero--photo .quickstart { margin-top: 0; }
}