/* Longevity — lr-hero (Home-Hero mit Hintergrund-Video). Alles auf .frame-type-atomicplan_lrhero gescoped (Vertrag §4). Headings/Body- Fonts sind generisch (theme.css) — hier nur Layout, Overlay, helle Typo, Motion. Empfehlung frame_layout=-full: Hero laeuft randabfallend, min-height 100svh. */ /* 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_lrhero { margin-top: calc(-1 * var(--plb-page-main-pt, var(--bs-gap-large, 50px))); } /* Der Startseiten-Kopf konsumiert den generischen Vertrag `plate_partials → Organisms/PageHero`. Box, Schichtung und Abdunklung stehen DORT; hier nur Theme-Werte als Slots plus das, was diesen Kopf von den anderen unterscheidet: das zweispaltige Raster (Text + Kennzahlen). Kein Header-Freiraum: der Kopf ist bildschirmfuellend und unten ausgerichtet, der Header liegt absichtlich transparent darueber. */ .frame-type-atomicplan_lrhero .lr-hero { --pl-pagehero-height: 100svh; --pl-pagehero-min-height: 700px; --pl-pagehero-header-gap: 0px; /* ABSTAND ZUR DISCOVERY-LEISTE (Kundenmeldung 02.09.2026: „die texte im hero bereich sind recht nah an der discovery-leiste"). Die Leiste steigt um `--lr-discovery-bar-lift` (lr-discovery.css) auf das Bild. Der Innenabstand des Kopfes muss diesen Betrag ERST zuruecklegen, bevor ueberhaupt Luft entsteht — gemessen blieben davon bei 1280 px genau 16 px uebrig, weniger als eine Textzeile. Deshalb hier die Summe aus Ueberlappung und gewuenschtem Abstand, nicht eine gewuerfelte Zahl. DER ZUWACHS KOSTET KEINE HOEHE. Der Kopf steht auf `min-height: 100svh` und richtet seinen Inhalt unten aus; ein groesserer Innenabstand unten schiebt den Text nach OBEN in den ohnehin leeren Bildbereich, statt den Kopf zu strecken. Der Gegenweg (die Leiste weniger weit aufsteigen lassen) waere teurer: er nimmt der Komposition genau den Zug, dass die Leiste auf der Bildkante sitzt. */ --pl-pagehero-pad-bottom: calc(var(--lr-discovery-bar-lift, 0px) + clamp(5rem, 3rem + 2.2vw, 5.5rem)); --pl-pagehero-color: var(--lr-on-dark); --pl-pagehero-scrim: linear-gradient(to top, rgba(15, 16, 14, 0.78) 0%, rgba(15, 16, 14, 0.18) 42%, rgba(15, 16, 14, 0.30) 100%); /* BEWUSSTE ABWEICHUNG: breiter als der Seiteninhalt (1380), auf Hoehe von `.lr-header-inner` (1640) — der Startseiten-Kopf soll mit dem Header fluchten, nicht mit dem Text darunter. `hero-audit` meldet das weiterhin als Abweichung; das ist gewollt und hier dokumentiert. */ --pl-pagehero-inner-maxw: 1640px; --pl-pagehero-inner-pad: var(--lr-gutter); /* Unterkante der beiden Bild-Bedienelemente (Ton, Bewegung): ueber der Leiste, nicht dahinter. */ --lr-hero-controls-bottom: calc(var(--lr-discovery-bar-lift, 0px) + clamp(1.4rem, 3vh, 2.2rem)); } /* Zweispaltiges Raster — das gibt es nur bei diesem Kopf. */ .frame-type-atomicplan_lrhero .lr-hero__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; } /* Eyebrow (eigene helle Variante — Deko-Label, nicht von der Heading-Konfig abgedeckt) */ .frame-type-atomicplan_lrhero .lr-hero__eyebrow { display: flex; align-items: center; gap: 0.9em; font-family: var(--lr-font-body); font-size: 0.74rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lr-stone); margin-bottom: 1.6rem; } .frame-type-atomicplan_lrhero .lr-hero__eyebrow::before { content: ""; width: 3rem; height: 1px; background: var(--lr-bronze); } /* H1: generische Display-Typo bleibt; hier nur Farbe/Maß/Zeilenhoehe fuer den Hero-Kontext. `margin` und `text-shadow` stehen hier, weil der Titel seit dem Umbau auf den gemeinsamen Organism auch `.pl-pagehero__title` traegt und von dort `margin: .6rem 0 0` sowie einen Textschatten bekaeme. Der Startseiten-Kopf steht auf einer eigenen, kraeftigen Abdunklung und braucht den Schatten nicht; die Werte hier halten die Darstellung exakt so, wie sie vor dem Umbau war. */ .frame-type-atomicplan_lrhero .lr-hero__title { color: #fff; line-height: 0.96; max-width: 16ch; margin: 0 0 0.5rem; text-shadow: none; } .frame-type-atomicplan_lrhero .lr-hero__title em { color: var(--lr-stone); } /* Einleitung: der Startseiten-Kopf setzt sie BEWUSST in der Body-Schrift, waehrend die uebrigen Koepfe (theme.css, .pl-pagehero__abstract) die Display-Schrift nutzen. Seit dem Umbau auf den gemeinsamen Organism traegt dieses

beide Klassen — Familie, Gewicht, Schatten und der untere Aussenabstand werden deshalb hier ausdruecklich zurueckgeholt. Ohne sie wechselte die Startseite auf Cormorant 300 und der Textblock ruecke 25 px nach unten. */ .frame-type-atomicplan_lrhero .lr-hero__abstract { margin-top: 1.8rem; margin-bottom: 1rem; font-family: var(--lr-font-body); font-weight: inherit; text-shadow: none; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem); color: rgba(255, 255, 255, 0.86); max-width: 44ch; } .frame-type-atomicplan_lrhero .lr-hero__cta { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .frame-type-atomicplan_lrhero .lr-hero__arrow { color: #fff; } /* Kennzahlen-Aside */ .frame-type-atomicplan_lrhero .lr-hero__aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1.4rem; } .frame-type-atomicplan_lrhero .lr-stat { text-align: right; } .frame-type-atomicplan_lrhero .lr-stat__n { font-family: var(--lr-font-display); font-weight: 300; font-size: 2.6rem; line-height: 1; color: #fff; } .frame-type-atomicplan_lrhero .lr-stat__l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-top: 0.4rem; } /* Scroll-Cue */ .frame-type-atomicplan_lrhero .lr-hero__scroll { position: absolute; left: var(--lr-gutter); bottom: clamp(1.4rem, 3vh, 2.2rem); display: flex; align-items: center; gap: 0.8em; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .frame-type-atomicplan_lrhero .lr-hero__scroll .bar { position: relative; width: 46px; height: 1px; background: rgba(255, 255, 255, 0.3); overflow: hidden; } .frame-type-atomicplan_lrhero .lr-hero__scroll .bar::after { content: ""; position: absolute; inset: 0; background: var(--lr-bronze); transform-origin: left; animation: lr-hero-scrollbar 2.6s var(--lr-ease-soft) infinite; } @keyframes lr-hero-scrollbar { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } /* Mute-Toggle */ /* Der Bewegungs-Schalter des generischen Kopfes sass 1rem ueber der Unterkante und damit VOLLSTAENDIG hinter der Leiste (die Leiste liegt auf z-index 1, der Kopf auf keinem) — ein Bedienelement, an das niemand herankam. Er klettert um die Ueberlappung mit. DER SLOT MUSS AM ELEMENT STEHEN, nicht am Kopf: der Organism deklariert `--pl-pagehero-motion-inset` auf `.pl-pagehero__motion` selbst. Eine Deklaration am Elternelement wird von der eigenen ueberschrieben und bleibt wirkungslos (gemessen: Knopf blieb auf y 844). */ .frame-type-atomicplan_lrhero .pl-pagehero__motion { /* Der Slot des Organism setzt BEIDE Achsen mit demselben Wert. Fuer die Hoehe ist das hier falsch — er wuerde den Knopf um dieselben Pixel auch nach links ruecken (gemessen: rechte Kante 1264 -> 1208). Deshalb steht der waagerechte Wert im Slot (Ausrichtung an der Inhaltskante wie alles andere in diesem Kopf) und die Hoehe als eigene Angabe. */ --pl-pagehero-motion-inset: var(--lr-gutter); inset-block-end: var(--lr-hero-controls-bottom); } /* Wie der Bewegungs-Schalter: sass hinter der Leiste (nur die oberen 13 px ragten heraus, gemessen 02.09.2026) und klettert um deren Ueberlappung. */ .frame-type-atomicplan_lrhero .lr-hero__mute { position: absolute; /* Links NEBEN dem Bewegungs-Schalter (dessen Breite 2.5rem + Zwischenraum), beide auf derselben Unterkante — vorher standen sie versetzt und beide unsichtbar hinter der Leiste. */ right: calc(var(--lr-gutter) + 2.5rem + 0.6rem); bottom: var(--lr-hero-controls-bottom); width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; display: grid; place-items: center; color: #fff; background: none; cursor: pointer; transition: background 0.3s, border-color 0.3s; } .frame-type-atomicplan_lrhero .lr-hero__mute:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } .frame-type-atomicplan_lrhero .lr-hero__mute svg { width: 16px; height: 16px; } /* Staged entrance */ .frame-type-atomicplan_lrhero .lr-hero__eyebrow, .frame-type-atomicplan_lrhero .lr-hero__title, .frame-type-atomicplan_lrhero .lr-hero__abstract, .frame-type-atomicplan_lrhero .lr-hero__cta, .frame-type-atomicplan_lrhero .lr-hero__aside, .frame-type-atomicplan_lrhero .lr-hero__scroll { opacity: 0; transform: translateY(26px); animation: lr-hero-up 1.2s var(--lr-ease-out) forwards; } .frame-type-atomicplan_lrhero .lr-hero__title { animation-delay: 0.15s; } .frame-type-atomicplan_lrhero .lr-hero__abstract { animation-delay: 0.35s; } .frame-type-atomicplan_lrhero .lr-hero__cta { animation-delay: 0.50s; } .frame-type-atomicplan_lrhero .lr-hero__aside { animation-delay: 0.65s; } .frame-type-atomicplan_lrhero .lr-hero__scroll { animation-delay: 0.90s; } @keyframes lr-hero-up { to { opacity: 1; transform: none; } } @media (max-width: 860px) { .frame-type-atomicplan_lrhero .lr-hero__inner { grid-template-columns: 1fr; } .frame-type-atomicplan_lrhero .lr-hero__aside, .frame-type-atomicplan_lrhero .lr-hero__mute { display: none; } } @media (prefers-reduced-motion: reduce) { .frame-type-atomicplan_lrhero .lr-hero__eyebrow, .frame-type-atomicplan_lrhero .lr-hero__title, .frame-type-atomicplan_lrhero .lr-hero__abstract, .frame-type-atomicplan_lrhero .lr-hero__cta, .frame-type-atomicplan_lrhero .lr-hero__aside, .frame-type-atomicplan_lrhero .lr-hero__scroll { opacity: 1; transform: none; animation: none; } .frame-type-atomicplan_lrhero .lr-hero__scroll .bar::after { animation: none; } }