.hero-bg-layer { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden; }
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Zwei gestaffelte Verläufe statt einem linearen (seit 25.08.2026):
   der frühere lineare Verlauf ließ die oberen Textzeilen nur auf
   1,9–2,7:1 Kontrast kommen. Diese Verläufe setzen früher an und
   halten alle Zeilen über 4,5:1 (SC 1.4.3 Contrast Minimum, Stufe AA).
   Unter 1024px (Hochformat-Crop) beginnt der dunkle Bereich früher
   (Text liegt höher im Bild), ab 1024px (Kundenfoto-Querformat)
   bleiben die Gesichter oberhalb der Textzone weitgehend unverdunkelt. */
.hero-bg-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,40,71,0.30) 0%, rgba(1,40,71,0.58) 28%, rgba(1,40,71,0.80) 62%, rgba(1,40,71,0.88) 100%);
}
@media (min-width: 1024px) {
  .hero-bg-overlay {
    background: linear-gradient(180deg, rgba(1,40,71,0.12) 0%, rgba(1,40,71,0.58) 28%, rgba(1,40,71,0.80) 62%, rgba(1,40,71,0.88) 100%);
  }
}

.hero-content-layer {
  position: relative; z-index: 1;
  margin-top: -100vh; margin-top: -100svh;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff;
}
.hero-content-inner { width: 100%; padding-bottom: 64px; }
@media (min-width: 640px) { .hero-content-inner { padding-bottom: 80px; } }
@media (min-width: 1024px) { .hero-content-inner { padding-bottom: 112px; } }

.hero-lead { max-width: 680px; margin-inline: auto; margin-top: 24px; }
.hero-ctas {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: var(--gap-sol-sm);
}
@media (min-width: 640px) { .hero-ctas { flex-direction: row; align-items: center; } }

/* post-hero-stack: alles nach dem Hero liegt zuverlässig über dem
   sticky Hintergrundbild. */
.post-hero-stack { position: relative; z-index: 10; }
.section-card-reveal { border-top-left-radius: 32px; border-top-right-radius: 32px; margin-top: -32px; }