/* ============================================================
   Inszenierung "Himmelskreis" — nur fuer Seiten, die sie in der
   Spec anfordern ('heroStil' => 'gross', 'inszenierung' => 'himmel').

   Grundsatz: Die Seite muss OHNE JavaScript und ohne Animation
   vollstaendig lesbar sein. Alles hier ist Zugabe.

   Deshalb haengt die Inszenierung an der Klasse .is-aktiv, die erst
   JavaScript setzt — und nur, wenn der Besucher keine reduzierte
   Bewegung verlangt. Ohne sie stehen die drei Schritte als normale
   Liste untereinander, wie auf jeder anderen Landingpage.

   Bewegt werden ausschliesslich transform und opacity. Beides kann der
   Browser auf der Grafikkarte erledigen, ohne das Layout neu zu
   rechnen; alles andere loeste bei jedem Scrollschritt Arbeit aus.
   ============================================================ */

:root {
    --himmel-nacht: #0B1220;
    --himmel-gold:  #D6BD88;
    --himmel-creme: #EADBBD;
}

/* ── Grosser Kopf ─────────────────────────────────────────── */
.lpm-hero--gross {
    position: relative;
    min-height: 86svh;
    display: grid;
    place-items: center;
    padding: 0 1.5rem;
    overflow: hidden;
    background: var(--himmel-nacht);
    isolation: isolate;
}
/*
 * DAS <picture> MUSS AUS DEM RASTER RAUS.
 *
 * Der Kopf ist ein Raster mit place-items: center. Ein absolut
 * gesetztes Bild ist darin kein Rasterelement und erzeugt keine
 * Zeile — deshalb sass der Inhalt frueher allein und mittig.
 *
 * Seit das Bild in einem <picture> steckt, ist DIESES das
 * Rasterelement: statisch gesetzt, damit eine zweite Zeile, und der
 * Inhalt rutschte in Zeile zwei. Gemessen 168,4 px + 605,6 px statt
 * einer Zeile — der Titel stand dadurch 84 Pixel zu tief. Pascal hat
 * das gesehen, und meine erste Gegenprobe (display: contents
 * umschalten und neu messen) hat es nicht gezeigt.
 *
 * Jetzt traegt das <picture> die Positionierung, die vorher das Bild
 * hatte, und das Bild fuellt es aus. Damit ist wieder genau ein
 * Rasterelement im Kopf.
 */
.lpm-hero--gross picture {
    position: absolute; inset: -6% 0 0;
    display: block; width: 100%; height: 112%;
    z-index: -2;
}
.lpm-hero--gross picture .lpm-hero__bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.lpm-hero--gross .lpm-hero__bild {
    position: absolute; inset: -6% 0 0;
    width: 100%; height: 112%;
    object-fit: cover;
    z-index: -2;
}

/*
 * Der Bildversatz beim Scrollen — und warum er NICHT mehr aus dem
 * Skript kommt.
 *
 * Vorher hing er an --lp-scroll, das JavaScript bei jedem Bild neu
 * setzte. Das ruckelte sichtbar, und zwar prinzipbedingt: Der Browser
 * scrollt und malt auf einem eigenen Strang, unser Skript rechnet auf
 * dem Hauptstrang. Zwischen "gescrollt" und "Bild verschoben" liegt
 * immer mindestens ein Bild Verzoegerung — das Foto haengt dem Rest
 * der Seite hinterher und wirkt wie geschuettelt.
 *
 * Scrollgebundene CSS-Animationen kennen dieses Problem nicht: Sie
 * laufen dort, wo auch gescrollt wird, ohne Umweg ueber JavaScript.
 *
 * Wo es sie nicht gibt, passiert schlicht nichts — ein stehendes Bild
 * ist besser als ein zappelndes. Deshalb steht hier kein Rueckfall
 * auf die alte Loesung.
 */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .lpm-hero--gross .lpm-hero__bild {
            animation: lpm-bildversatz linear both;
            animation-timeline: scroll(root block);
            /* Nur der erste Bildschirm: danach ist der Kopf ohnehin
               vorbei. */
            animation-range: 0 100vh;
        }
        @keyframes lpm-bildversatz {
            from { transform: translate3d(0, -2.5%, 0); }
            to   { transform: translate3d(0, 2.5%, 0); }
        }
    }
}

/* Kurze Zeile im Kopf, wo frueher der ganze Absatz stand. */
.lpm-hero__kurz {
    margin: 0 auto 1.6rem; max-width: 40ch;
    font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

/* Der ausgelagerte Absatz: groesser gesetzt als gewoehnlicher
   Fliesstext, weil er die Seite eroeffnet. */
.lpm-auftakt__text {
    margin: 0 auto; max-width: 46ch; text-align: center;
    font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.65;
    color: var(--neutral-text, #1E293B);
}
/*
 * Zwei Schleier uebereinander, und beide sind noetig.
 *
 * Der erste Versuch hatte in der Mitte nur 15 Prozent Deckung — auf
 * ruhigem Himmel haette das gereicht, auf bewegtem Blattwerk nicht:
 * Vorspann und Lauftext waren kaum zu lesen. Ein einzelner staerkerer
 * Verlauf haette dafuer das Foto plattgedrueckt.
 *
 * Also: ein senkrechter Verlauf fuer die Grundstimmung, dazu eine
 * weiche dunkle Scheibe genau dort, wo die Schrift steht. So bleibt
 * das Bild an den Raendern hell und der Text trotzdem lesbar.
 */
.lpm-hero--gross::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 70% 55% at 50% 52%, rgba(11, 18, 32, .62), transparent 70%),
        linear-gradient(180deg,
            rgba(11, 18, 32, .58) 0%,
            rgba(11, 18, 32, .34) 40%,
            rgba(11, 18, 32, .86) 100%);
}
.lpm-hero--gross .lpm-hero__inhalt { text-align: center; max-width: 54rem; }
.lpm-hero--gross .lpm-eyebrow { color: var(--himmel-gold); }
.lpm-hero--gross .lpm-hero__title { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.lpm-hero--gross .lpm-hero__lead { color: rgba(255, 255, 255, .86); margin-inline: auto; }
/* Etwas mehr Luft unter den Knoepfen (Rueckmeldung 27.08.) — sie
   standen zu dicht am unteren Rand des Kopfbereichs. */
.lpm-hero--gross .lpm-hero__cta { justify-content: center; margin-bottom: 1.4rem; }

/*
 * Auf grossen Schirmen steht der Kopfinhalt weiter auseinander.
 *
 * Die Abstaende stammen aus dem zweispaltigen Kopf, wo der Text neben
 * einem Bild steht und eng gesetzt richtig ist. Hier liegt er MITTEN
 * IN einem Bild von 774 Pixeln Hoehe und nahm davon nur 356 ein — der
 * Block sass als kompaktes Paket in einer weiten Landschaft.
 *
 * Nur ab 62rem: auf dem Handy ist der Kopf knapp, dort wuerde
 * dasselbe die Knoepfe aus dem Bild schieben. Genau das war im August
 * schon einmal der Fehler.
 */
@media (min-width: 62rem) {
    .lpm-hero--gross .lpm-eyebrow { margin-bottom: 1.4rem; }
    .lpm-hero--gross .lpm-hero__title { margin-bottom: 1.8rem; }
    .lpm-hero--gross .lpm-hero__kurz { margin-bottom: 2.8rem; }
    .lpm-hero--gross .lpm-hero__cta { margin-bottom: 2rem; }
}

/* Scroll-Hinweis: eine Einladung, kein Bedienelement — er sagt nur,
   dass unten weitergeht, was oben begonnen hat. */
.lpm-scrollhinweis {
    position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    display: inline-flex; flex-direction: column; align-items: center; gap: .4rem;
    color: rgba(255, 255, 255, .8); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; text-decoration: none;
}
.lpm-scrollhinweis i { font-style: normal; font-size: 1.1rem; }

/* Kennzeichnung des KI-Bildes: dezent in der Ecke, aber nicht
   versteckt — sie soll gefunden werden, wenn jemand hinsieht. */
.lpm-kihinweis {
    position: absolute; right: 1rem; bottom: 1rem; margin: 0;
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    background: rgba(11, 18, 32, .42);
    padding: .3rem .6rem; border-radius: 999px;
    backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
    .lpm-scrollhinweis i { animation: lpm-wippen 2.4s ease-in-out infinite; }
}
@keyframes lpm-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── Himmelskreis ─────────────────────────────────────────── */
.lpm-himmel {
    background: var(--himmel-nacht);
    color: #fff;
    position: relative;
}
/* Weicher Uebergang aus dem Cremeton hinein und wieder heraus —
   sonst schneidet die Nacht wie ein Fremdkoerper in die Seite. */
.lpm-himmel::before,
.lpm-himmel::after {
    content: ""; position: absolute; left: 0; right: 0; height: 5rem;
    pointer-events: none; z-index: 3;
}
.lpm-himmel::before { top: 0;    background: linear-gradient(180deg, var(--brand-cream, #FAF8F3), transparent); }
.lpm-himmel::after  { bottom: 0; background: linear-gradient(0deg,   var(--brand-cream, #FAF8F3), transparent); }

.lpm-himmel__buehne { padding: clamp(3rem, 7vw, 6rem) 0; position: relative; }
.lpm-himmel__kopf { text-align: center; margin-bottom: 2rem; position: relative; z-index: 2; }
.lpm-himmel__kopf .lpm-eyebrow { color: var(--himmel-gold); }
.lpm-himmel__kopf h2 { color: #fff; }

/* Ohne Inszenierung ist das Rad reine Zier neben der Liste. */
.lpm-himmel__rad { display: block; width: min(30rem, 80vw); margin: 0 auto 2rem; opacity: .5; }

.lpm-himmel__karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; position: relative; z-index: 2; }
.lpm-himmel__karte {
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding-top: 1.1rem; max-width: 34rem; margin-inline: auto;
}
.lpm-himmel__kopfzeile { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.lpm-himmel__nummer {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem;
    border: 1px solid rgba(214, 189, 136, .55); border-radius: 999px;
    color: var(--himmel-gold); font-size: .78rem; font-weight: 700; flex: none;
}
.lpm-himmel__phase {
    color: var(--himmel-gold); font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
}
.lpm-himmel__karte h3 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: #fff; }
.lpm-himmel__karte p  { margin: 0; color: rgba(255, 255, 255, .68); line-height: 1.7; }

/* ── Ab hier nur mit JavaScript UND ohne reduzierte Bewegung ── */
.lpm-himmel.is-aktiv { height: 320vh; }
.lpm-himmel.is-aktiv .lpm-himmel__buehne {
    position: sticky; top: 0; height: 100svh;
    display: grid; align-content: center; overflow: hidden; padding: 0 1.5rem;
}
.lpm-himmel.is-aktiv .lpm-himmel__rad {
    position: absolute; left: 50%; top: 50%;
    width: min(46rem, 92vw); margin: 0; opacity: 1; z-index: 1;
    /* Nur rund 100 Grad ueber den ganzen Scrollweg: eine bewusste
       Drehung, kein Karussell. */
    transform: translate(-50%, -50%) rotate(calc(-18deg + var(--lp-scroll, 0) * 100deg));
}
.lpm-himmel.is-aktiv .lpm-himmel__kopf { margin: 0 0 2.5rem; }
.lpm-himmel.is-aktiv .lpm-himmel__karten { display: block; min-height: 16rem; }
.lpm-himmel.is-aktiv .lpm-himmel__karte {
    /*
     * Der seitliche Abstand muss hier stehen, obwohl er schon in
     * .lpm-wrap steht: absolut gesetzte Elemente richten sich am
     * Innenrand aus und ueberspringen dessen Polster. Die
     * Ueberschrift darueber begann dadurch 24 Pixel weiter rechts als
     * die Schritt-Texte darunter. Mittig gesetzt ist das nie
     * aufgefallen; seit die Ueberschrift linksbuendig steht, hat sie
     * eine Kante — und die muss dieselbe sein.
     */
    position: absolute; inset: 0 1.5rem auto 1.5rem;
    /* --naehe kommt aus dem Skript: 1 = genau dran, 0 = weit weg.
       Ganz auf null statt auf einen Restwert: mit 6 Prozent standen
       die beiden anderen Karten als Geisterschrift hinter der
       aktiven, und zusammen mit dem Mond dahinter war nichts mehr
       ruhig zu lesen. Jetzt loest eine die andere ab. */
    /*
     * DER RUECKFALLWERT IST NULL, NICHT EINS.
     *
     * Das Skript setzt .is-aktiv sofort beim Laden, misst --naehe aber
     * erst, wenn der Abschnitt ins Bild kommt. Dazwischen galt der
     * Rueckfallwert — und der stand auf 1. Alle drei Karten lagen dann
     * uebereinander und waren gleichzeitig voll sichtbar: drei
     * Ueberschriften und drei Absaetze ineinander. Genau das hat
     * Pascal am 28.08. als "unaufgeraeumt" gesehen.
     *
     * Dass in derselben Regel zwei verschiedene Rueckfallwerte standen
     * (1 fuer die Deckkraft, 0 fuer die Verschiebung), war der Hinweis:
     * einer von beiden musste falsch sein.
     */
    opacity: var(--naehe, 0);
    transform: translate3d(0, calc((1 - var(--naehe, 0)) * 2rem), 0);
    transition: opacity .22s ease, transform .22s ease;
}
/* Vor der ersten Messung ist die erste Karte die richtige. Ohne diese
   Zeile stuende der Abschnitt beim Laden leer da — genauso falsch wie
   drei Karten uebereinander. */
.lpm-himmel.is-aktiv .lpm-himmel__karte:first-child { opacity: var(--naehe, 1); }
/*
 * SECHS PIXEL, NICHT ZWEI. Bei zwei war der Balken auf dem fast
 * schwarzen Grund schlicht nicht zu sehen.
 *
 * Und der Verlauf faengt nicht mehr beim Markenblau an. Auf dieser
 * Buehne kommt gar kein Blau vor, und dunkles Blau auf fast Schwarz
 * unterscheidet sich kaum in der Helligkeit: die ersten Prozent des
 * Balkens waren unsichtbar, er schien spaeter zu beginnen, als er
 * begann. Der Kontrast kommt jetzt aus der HELLIGKEIT statt aus der
 * Farbe — von gedecktem Gold zu hellem Champagner, denselben Toenen
 * wie Mond und Sterne daneben. Vorn am hellsten: die Spitze ist die
 * Stelle, auf die man schaut.
 *
 * Orange, wie im fremden Entwurf, waere hier ein Warnton und in
 * unserer Palette ein Fremdkoerper.
 */
.lpm-himmel__fortschritt {
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: rgba(255, 255, 255, .1); display: none; z-index: 4;
}
.lpm-himmel.is-aktiv .lpm-himmel__fortschritt { display: block; }
.lpm-himmel__fortschritt span {
    display: block; height: 100%; width: 100%; transform-origin: left;
    transform: scaleX(var(--lp-scroll, 0));
    background: linear-gradient(90deg, #A9803A 0%, var(--himmel-gold) 55%, #F6ECD2 100%);
    box-shadow: 0 0 12px rgba(214, 189, 136, .55);
}

/* Sterne im Hintergrund, zwei Ebenen mit unterschiedlicher
   Geschwindigkeit — das erzeugt Tiefe ohne ein zweites Bild. */
.lpm-himmel__sterne { position: absolute; inset: 0; pointer-events: none; color: rgba(226, 205, 163, .5); }
.lpm-himmel__sterne i { position: absolute; font-style: normal; font-size: .85rem; }
.lpm-himmel.is-aktiv .lpm-himmel__sterne--a { transform: translate3d(0, calc(var(--lp-scroll, 0) * -2.5rem), 0); }
.lpm-himmel.is-aktiv .lpm-himmel__sterne--b { transform: translate3d(0, calc(var(--lp-scroll, 0) * -5rem), 0); opacity: .6; }
.lpm-himmel__sterne--a i:nth-child(1) { left: 8%;  top: 17%; }
.lpm-himmel__sterne--a i:nth-child(2) { left: 33%; top: 11%; font-size: .7rem; }
.lpm-himmel__sterne--a i:nth-child(3) { left: 74%; top: 19%; }
.lpm-himmel__sterne--a i:nth-child(4) { right: 7%; top: 62%; font-size: .8rem; }
.lpm-himmel__sterne--a i:nth-child(5) { left: 47%; bottom: 9%; font-size: .6rem; }
.lpm-himmel__sterne--b i:nth-child(1) { left: 16%; top: 64%; font-size: .7rem; }
.lpm-himmel__sterne--b i:nth-child(2) { left: 60%; top: 45%; font-size: .6rem; }
.lpm-himmel__sterne--b i:nth-child(3) { left: 84%; top: 33%; }
.lpm-himmel__sterne--b i:nth-child(4) { right: 15%; bottom: 10%; font-size: .7rem; }

/*
 * Ab mittlerer Breite stehen Kreis und Text NEBENeinander.
 *
 * Uebereinander gelegt war der Mond ein grosser Fleck hinter der
 * Schrift — schoen anzusehen, schlecht zu lesen. Nebeneinander tut
 * jedes was es soll: links die Bewegung, rechts die Aussage.
 */
@media (min-width: 1024px) {
    .lpm-himmel.is-aktiv .lpm-himmel__rad {
        left: 27%; width: min(36rem, 44vw);
    }
    .lpm-himmel.is-aktiv .lpm-himmel__kopf,
    .lpm-himmel.is-aktiv .lpm-himmel__karten {
        margin-left: 52%; margin-right: 0; max-width: 34rem; text-align: left;
    }
    .lpm-himmel.is-aktiv .lpm-himmel__kopf .lpm-h2 { text-align: left; }
    .lpm-himmel.is-aktiv .lpm-himmel__karte { max-width: none; margin-inline: 0; }
}

/* Auf schmalen Schirmen ruhiger: das Rad liegt hinter dem Text und
   dreht sich weniger. Sonst konkurriert es mit dem, was zu lesen ist. */
@media (max-width: 860px) {
    .lpm-himmel.is-aktiv { height: 280vh; }
    .lpm-himmel.is-aktiv .lpm-himmel__rad {
        width: 125vw; opacity: .32;
        transform: translate(-50%, -50%) rotate(calc(-10deg + var(--lp-scroll, 0) * 55deg));
    }
    .lpm-himmel.is-aktiv .lpm-himmel__karten { min-height: 19rem; }
    /*
     * Mobil lief der Inhalt in den Scroll-Hinweis: Ueberschrift und
     * Lauftext brauchen auf schmalem Schirm mehr Hoehe, als 86 % der
     * Bildschirmhoehe hergeben — der Knopf lag dann auf dem Hinweis.
     *
     * Statt die Hoehe zu deckeln (dann waere der Text abgeschnitten)
     * darf der Kopf mitwachsen, und unten steht fester Platz fuer den
     * Hinweis frei. Der Kopf ist damit auf dem Handy manchmal hoeher
     * als der Bildschirm — das ist richtig so: lesbar schlaegt exakt
     * bildschirmfuellend.
     */
    .lpm-hero--gross {
        min-height: 78svh; height: auto;
        padding-top: 2.5rem; padding-bottom: 7rem;
    }
    .lpm-hero--gross .lpm-hero__lead { font-size: 1.02rem; }
    .lpm-scrollhinweis { bottom: 3.2rem; }
    .lpm-kihinweis { bottom: .7rem; right: .7rem; font-size: .6rem; }
}