/* Kopfbereich mit Text auf dem vollbreiten Titelbild
   (Ratgeber, Ratgeber-Artikel, Über uns — Bild: partials/components/hero-media.php;
   die Startseite ergänzt ihre Variante in css/pages/index-hero.css).

   Handy/Tablet: Das Motiv steht oben fast vollständig, ein Verlauf nach unten
   geht in Dunkelblau über; der Text beginnt noch auf dem Bild und läuft auf dem
   Dunkelblau weiter — das Motiv selbst bleibt oben frei.
   Desktop: Bild über die ganze Fläche, der Text steht unten links auf dem
   ruhigen Boden. Der Farbverlauf folgt dem Textblock (.page-hero__content::before):
   Er deckt ihn kräftig ab und läuft nach oben und rechts aus. So bleiben
   Skyline, Wahrzeichen und Container darüber und daneben sichtbar. */

.page-hero {
  --hero-shade: 24% 0.06 254;
  --hero-media-h: clamp(13rem, 60vw, 24rem);
  --hero-overlap: 4rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: oklch(var(--hero-shade));
}
@media (min-width: 640px) {
  .page-hero {
    --hero-media-h: clamp(18rem, 48vw, 26rem);
    --hero-overlap: 6rem;
  }
}

/* --- Bild + Farbverlauf ------------------------------------------------- */
.page-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hero-media-h);
  z-index: -1;
}
.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    oklch(var(--hero-shade) / 0) calc(100% - var(--hero-overlap) - 4.5rem),
    oklch(var(--hero-shade) / 0.6) calc(100% - var(--hero-overlap) - 1rem),
    oklch(var(--hero-shade) / 0.9) calc(100% - var(--hero-overlap) + 1.5rem),
    oklch(var(--hero-shade)) 100%
  );
}
.page-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Motive, deren Wesentliches hoch im Bild liegt (Container-Dach, Stecker):
   Der sichtbare Ausschnitt rückt nach oben (hero_image(…, $focus)). */
.page-hero__img--upper { object-position: 50% 35%; }
.page-hero__img--top   { object-position: 50% 20%; }

/* Kennzeichnung als gestaltete Szene — oben rechts, fern vom Text */
.page-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);
}

/* --- Text ---------------------------------------------------------------- */
.page-hero__inner {
  padding-top: calc(var(--hero-media-h) - var(--hero-overlap));
  padding-bottom: 2.25rem;
}
.page-hero__content {
  max-width: 38rem;
}
.page-hero__title {
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 4px 18px oklch(var(--hero-shade) / 0.45);
}
.page-hero__lead {
  max-width: 36rem;
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.9);
}

.page-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
@media (min-width: 480px) {
  .page-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Zweitziel als helle Kontur — die Anfrage bleibt die eine Hauptaktion */
.page-hero__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.8125rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.page-hero__secondary:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: #fff;
}

.page-hero__note {
  color: rgb(255 255 255 / 0.85);
}
.page-hero__note::before {
  background: rgb(255 255 255 / 0.16);
}
.page-hero__note::after {
  border-color: #fff;
}

/* Brotkrumen, Dachzeile und Kategorie auf Dunkelblau */
.page-hero .breadcrumb {
  margin-bottom: 1.25rem;
  color: rgb(255 255 255 / 0.9);
  text-shadow: 0 1px 2px oklch(var(--hero-shade) / 0.6);
}
.page-hero .breadcrumb a {
  color: rgb(255 255 255 / 0.92);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 0.2em;
}
.page-hero .breadcrumb a:hover {
  color: #fff;
  text-decoration-color: #fff;
}
.page-hero .breadcrumb svg {
  color: rgb(255 255 255 / 0.5);
}
.page-hero .breadcrumb [aria-current="page"] {
  color: #fff;
}
.page-hero .eyebrow {
  color: var(--color-primary-200);
}
.page-hero .badge-usecase {
  border-color: rgb(255 255 255 / 0.4);
}

/* Fokusring auf Dunkelblau sichtbar halten */
.page-hero :focus-visible {
  outline-color: #fff;
}

/* --- Desktop: Text unten links auf dem Bild ------------------------------ */
@media (min-width: 1024px) {
  .page-hero {
    --hero-fade: 12rem;
    display: flex;
    align-items: flex-end;
    min-height: clamp(32rem, 80svh, 50rem);
  }
  .page-hero__media {
    bottom: 0;
    height: auto;
  }
  /* Der Text belegt den unteren Bildteil: Der Ausschnitt schneidet eher oben
     leeren Himmel ab, damit Skyline und Container höher und frei stehen. */
  .page-hero__img        { object-position: 50% 65%; }
  .page-hero__img--upper { object-position: 50% 35%; }
  .page-hero__img--top   { object-position: 50% 20%; }
  /* Leichte Bodenschattierung über die ganze Breite verankert den Textblock */
  .page-hero__media::after {
    background-image: linear-gradient(
      0deg,
      oklch(var(--hero-shade) / 0.4) 0%,
      oklch(var(--hero-shade) / 0) 40%
    );
  }
  .page-hero__caption {
    top: auto;
    right: 1.25rem;
    bottom: 1.25rem;
  }
  .page-hero__inner {
    width: 100%;
    padding-block: 7rem 3.5rem;
  }
  .page-hero__content {
    position: relative;
  }
  /* Farbverlauf hinter dem Textblock: links bis zum Bildrand, nach rechts
     über --hero-fade auslaufend. Nach oben blendet er weich über 9rem aus,
     damit keine Kante über dem Himmel steht und Skyline oder Wahrzeichen
     darüber hell bleiben; ab der ersten Textzeile deckt er voll. */
  .page-hero__content::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -9rem;
    bottom: -8rem;
    left: -100vw;
    right: calc(-1 * var(--hero-fade));
    background-image: linear-gradient(
      90deg,
      oklch(var(--hero-shade) / 0.86) 0%,
      oklch(var(--hero-shade) / 0.78) calc(100% - var(--hero-fade)),
      oklch(var(--hero-shade) / 0.4) calc(100% - var(--hero-fade) / 2),
      oklch(var(--hero-shade) / 0) 100%
    );
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.55) 5rem, #000 9rem);
    mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.55) 5rem, #000 9rem);
    pointer-events: none;
  }
  .page-hero__lead {
    margin-top: 1.25rem;
  }
  .page-hero__actions {
    margin-top: 2rem;
  }
}

/* --- Meta-Leiste unter dem Titelbild (Ratgeber-Artikel: Autor, Datum) ---- */
.page-hero-meta {
  padding-block: 1rem;
}
@media (min-width: 1024px) {
  .page-hero-meta {
    padding-block: 1.25rem;
  }
}