/* Longevity — lr-pagehero (Unterseiten-Hero).
   Gescoped auf .frame-type-atomicplan_lrpagehero (§4). Headings/Body generisch.
   frame_layout=-full empfohlen; Hero laeuft randabfallend unter den fixed Header. */

/* Hero liegt full-bleed unterm fixen Header: das globale main-padding-top
   (plate_bootstrap: --plb-page-main-pt) kompensieren. Hero-lose Seiten
   (z. B. Legal) behalten das Padding als Header-Abstand. */
.frame-type-atomicplan_lrpagehero {
  margin-top: calc(-1 * var(--plb-page-main-pt, var(--bs-gap-large, 50px)));
}

/* Der Kopf konsumiert den generischen Vertrag
   `plate_partials → Organisms/PageHero` (Klasse `pl-pagehero`). Box, Schichtung,
   Header-Freiraum und die Nachbildung der .frame-container-Box stehen DORT.
   Hier nur noch Theme-Werte als Slots — keine Eigenschaften. */
.frame-type-atomicplan_lrpagehero .lr-pagehero {
  --pl-pagehero-header-h: var(--lr-header-h);
  --pl-pagehero-header-gap: 50px;
  --pl-pagehero-pad-bottom: clamp(2.6rem, 6vh, 5rem);
  --pl-pagehero-color: var(--lr-on-dark);
  --pl-pagehero-scrim: linear-gradient(to top,
    rgba(15, 16, 14, 0.80) 0%, rgba(15, 16, 14, 0.20) 55%, rgba(15, 16, 14, 0.42) 100%);
  --pl-pagehero-title-measure: 18ch;
  --pl-pagehero-text-measure: 60ch;
}
.frame-type-atomicplan_lrpagehero .lr-pagehero--default { --pl-pagehero-min-height: clamp(58svh, 50svh + 12vw, 78svh); }
.frame-type-atomicplan_lrpagehero .lr-pagehero--compact { --pl-pagehero-min-height: clamp(48svh, 42svh + 10vw, 62svh); }

.frame-type-atomicplan_lrpagehero .lr-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 1.6rem;
}
.frame-type-atomicplan_lrpagehero .lr-breadcrumb a { color: inherit; }
.frame-type-atomicplan_lrpagehero .lr-breadcrumb a:hover { color: #fff; }
.frame-type-atomicplan_lrpagehero .lr-breadcrumb .sep { opacity: 0.5; }
.frame-type-atomicplan_lrpagehero .lr-breadcrumb [aria-current="page"] { color: var(--lr-stone); }

/* Typografie steht EINMAL in theme.css auf .pl-pagehero__* — hier bewusst
   nichts mehr. Wer sie hier wiederholt, baut die Drift wieder ein. */
/* Groesse, Zeilenhoehe, Familie und Farbe der Einleitung stehen in theme.css
   auf .pl-pagehero__abstract — gemeinsam mit allen anderen Koepfen. Hier stand
   frueher ein eigenes clamp(), das den Text 19,2px statt 24px gross machte. */

/* Staged entrance */
.frame-type-atomicplan_lrpagehero .lr-breadcrumb,
.frame-type-atomicplan_lrpagehero .lr-pagehero__eyebrow,
.frame-type-atomicplan_lrpagehero .lr-pagehero__title,
.frame-type-atomicplan_lrpagehero .lr-pagehero__abstract {
  opacity: 0; transform: translateY(22px);
  animation: lr-pagehero-up 1.1s var(--lr-ease-out) forwards;
}
.frame-type-atomicplan_lrpagehero .lr-pagehero__eyebrow { animation-delay: 0.10s; }
.frame-type-atomicplan_lrpagehero .lr-pagehero__title   { animation-delay: 0.20s; }
.frame-type-atomicplan_lrpagehero .lr-pagehero__abstract     { animation-delay: 0.34s; }
@keyframes lr-pagehero-up { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .frame-type-atomicplan_lrpagehero .lr-breadcrumb,
  .frame-type-atomicplan_lrpagehero .lr-pagehero__eyebrow,
  .frame-type-atomicplan_lrpagehero .lr-pagehero__title,
  .frame-type-atomicplan_lrpagehero .lr-pagehero__abstract { opacity: 1; transform: none; animation: none; }
}

/* Das Hintergrundbild kommt aus dem generischen Frame-Feld `background_image`,
   wird hier aber als echtes <img loading="eager" fetchpriority="high"> im
   Template gerendert (LCP). Das AUTO-Rendering des Frames (CSS-Background im
   .frame-backgroundimage-container) waere dasselbe Bild ein zweites Mal —
   Container verstecken; ueber den PARENT, damit der Browser den CSS-Background
   des Kinds gar nicht erst laedt. */
.frame-type-atomicplan_lrpagehero .frame-backgroundimage-container { display: none; }