/*
 * Startseite — Scroll-Bühne, Leistungsblöcke, Team, Newsletter, Kontakt-CTA.
 * Portiert aus dem Design-Entwurf „Startseite" (16.9.2026).
 * Nur von der Startseite eingebunden; Tokens kommen aus site.css.
 */

/* --- Scroll-Bühne ----------------------------------------------------------- */
/* Die Sektion ist sehr hoch (Scrollstrecke); innen klebt ein Bildschirm-hoher
   Ausschnitt (sticky). Das Skript steuert alles über den Scroll-Fortschritt.
   ACHTUNG display-gegen-hidden-Falle: Auf #buehne und #buehne-statisch selbst
   steht bewusst KEINE display-Angabe — das Skript schaltet sie mit `hidden`. */

.buehne { position: relative; height: 980vh; background: var(--paper); }

.buehne-blick {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* .lz-claim liegt seit 8.10.2026 in site.css (Bausteine) — die Kontakt-
   Headline nutzt ihn jetzt auch. */

.buehne-claimblock {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    pointer-events: none;
    /* Der Claim sitzt unten (flex-end): 150 px tiefer heißt mehr Mindesthöhe,
       gedeckelt kurz vor der Fensterkante (Roman, 24.9.2026). */
    min-height: min(calc(88vh + 150px), calc(100vh - 32px));
    display: flex;
    align-items: flex-end;
    padding: calc(130px + var(--space-8)) 55px var(--space-9);
}


/* Schwebende Projekt-Objekte */
.buehne-objekte {
    position: absolute;
    inset: 0;
    transition: opacity 400ms linear;
}

.buehne-obj {
    position: absolute;
    left: 0; top: 0;
    will-change: transform;
}

.buehne-obj button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
    transition: opacity 420ms var(--ease-out);
}

.buehne-obj img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Eigenleben, unabhängig vom Scroll-Weg — je Objekt ein anderer Takt */
    animation: buehne-objekt-schweben 9s ease-in-out infinite;
}
.buehne-obj:nth-child(2n) img { animation-duration: 12s; animation-delay: -3s; }
.buehne-obj:nth-child(3n) img { animation-duration: 10s; animation-delay: -6s; animation-direction: reverse; }
.buehne-obj:nth-child(5n) img { animation-duration: 14s; animation-delay: -2s; }

@keyframes buehne-objekt-schweben {
    0%   { transform: translate(0, 0) rotate(-2.4deg); }
    33%  { transform: translate(14px, -26px) rotate(1.6deg); }
    66%  { transform: translate(-12px, -8px) rotate(2.6deg); }
    100% { transform: translate(0, 0) rotate(-2.4deg); }
}

.buehne-objekte.hat-auswahl .buehne-obj button { opacity: .14; }
.buehne-objekte.hat-auswahl .buehne-obj.ist-auswahl button { opacity: 1; }

/* Übergangsbild: weiß oben, schwarz unten — scrollt über die weiße Bühne
   herein und trägt sie ins Schwarz. Liegt über Fragen und Finale. */
.buehne-uebergang {
    position: absolute;
    inset: 0;
    z-index: 4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    pointer-events: none;
}

/* Fragen: wortweise hinter einer Maske hervor */
.buehne-fragen { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.buehne-frage {
    position: absolute;
    left: 55px; right: 55px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    /* Die Umbrüche stehen im Markup (span.buehne-zeile) — nur so sind die
       Fragen auf JEDER Bildschirmbreite verlässlich dreizeilig. */
    max-width: none;
    display: flex;
    flex-direction: column;
    /* Light und annähernd Claim-Größe — die Fragen SIND die Bühne; drei
       Zeilen sind erwünscht (Wunsch Roman, 17.9.2026). */
    font-weight: 300;
    font-size: clamp(2.4rem, 8vw, 8rem);
    line-height: 1.04;
    color: var(--ink);
}

.buehne-zeile {
    display: flex;
    flex-wrap: wrap;
    column-gap: .3em;
}

.buehne-wort-maske {
    display: inline-block;
    overflow: hidden;
    padding-bottom: .08em;
    vertical-align: bottom;
}
.buehne-wort-maske > span { display: inline-block; }

/* Dunkles Finale in zwei Akten (Umbau 17.9.2026): Zuerst reines Schwarz mit
   der Antwort an der Fragen-Position; erst beim Weiterscrollen blendet die
   Splash-Ebene (Ink-Motiv als Inline-Hintergrund aus index.php) mit dem
   Astronauten darüber ein. */
.buehne-finale {
    position: absolute;
    inset: 0;
    /* Flaches #000 statt --gradient-ink: Die Oberkante des Splash-Motivs ist
       reines Schwarz — auf dem Verlauf war die Bildkante sichtbar. */
    background: #000;
    color: #fff;
}

.buehne-splash {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* schiebt sich ans Scrollen gekoppelt von unten herein (kein Einblenden) */
    will-change: transform;
}

/* Weißer Boden hinter dem Team-Text: Die Ausläufer des Splash-Motivs liefen
   unter die Zeilen (Roman, 7.10.2026). Tiefer rücken ging nicht — der Text
   endet schon 16 px über der Bildschirmkante (alles darunter schnitte der
   Bühnen-Ausschnitt ab) — deshalb wird ihm das Weiß untergelegt. */
.buehne-splash::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .92) 55%,
        #fff 100%);
    pointer-events: none;
}

/* Team-Akt auf dem Splash: Foto schwebt im Orbit, darunter zentriert der Text */
.buehne-team {
    position: absolute;
    inset: 0;
    z-index: 1;   /* über dem weißen Bodenverlauf (::after) */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ans untere Ende: dort ist der Splash weiß — der Text lag sonst im
       hellgrauen Übergangsbereich und war schwer zu lesen. */
    justify-content: flex-end;
    gap: calc(var(--space-6) + 100px);
    padding: 70px var(--rand) 16px;
}

/* Der Halter wird vom Skript gefahren: Das Foto ragt schon im Antwort-Akt
   von unten herein und fährt dann mit dem Splash an seinen Platz. */
.buehne-team-halter { will-change: transform; }

.buehne-team-foto {
    width: min(1170px, 92vw, 80vh);
    height: auto;
    border-radius: var(--radius-xs);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: buehne-orbit 11s ease-in-out infinite;
}

@keyframes buehne-orbit {
    0%   { transform: translateY(0) rotate(-2.2deg); }
    50%  { transform: translateY(-22px) rotate(2.2deg); }
    100% { transform: translateY(0) rotate(-2.2deg); }
}

.buehne-team-text {
    text-align: center;
    color: var(--ink);
    max-width: 62ch;
    position: relative;
}
/* Eigener weißer Nebel direkt hinter dem Block: Das Splash-Motiv skaliert
   je Bildschirm anders — der Bodenverlauf allein ließ Überschrift und Text
   mancherorts auf dunklen Ausläufern stehen (Roman, 7.10.2026). */
.buehne-team-text::before {
    content: "";
    position: absolute;
    inset: -64px -120px;
    z-index: -1;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, .97) 54%,
        rgba(255, 255, 255, 0) 84%);
}
.buehne-team-text h2 {
    margin: 0;
    font-weight: var(--weight-display);
    font-size: clamp(1.9rem, 3vw, 3.1rem);
    line-height: 1.1;
}
.buehne-team-text p {
    /* Gleiche Größe wie „Seit 2008." im Antwort-Akt */
    font-size: var(--text-lg);
    line-height: var(--leading-body);
    margin: var(--space-5) 0 var(--space-6);
    color: var(--text-body);
}

@keyframes buehne-schweben {
    0%   { transform: translateY(0) rotate(-1deg); }
    50%  { transform: translateY(-20px) rotate(1.2deg); }
    100% { transform: translateY(0) rotate(-1deg); }
}

.buehne-antwort {
    position: absolute;
    left: 55px; right: 55px;
    top: 50%;
    transform: translateY(-50%);
    will-change: opacity;
}
.buehne-antwort h2 {
    margin: 0;
    font-weight: 300;
    font-size: clamp(2.4rem, 8vw, 8rem);
    line-height: 1.04;
    color: #fff;
}
.buehne-antwort h2 .buehne-zeile { display: block; }
.buehne-antwort p {
    margin: var(--space-5) 0 0;
    font-size: var(--text-lg);
    line-height: var(--leading-body);
    color: rgba(255, 255, 255, .72);
}

.buehne-knoepfe {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* Zeiger-Badge (Beschluss Roman, 12.10.2026): ein
   schwarzer KREIS folgt der Maus über den Objekten — Projekttitel und ein
   weißer Pfeil. Beim Klick füllt er den Schirm (Skript skaliert ihn) und
   die Projektseite lädt. Am Telefon erscheint er beim ersten Tipp über dem
   Objekt und nimmt dort auch selbst den zweiten Tipp entgegen. */
.buehne-zeigerbadge {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    width: clamp(120px, 14vw, 156px);
    height: clamp(120px, 14vw, 156px);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px;
    background: var(--ink);
    color: #fff;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    will-change: transform;
}
.buehne-zeigerbadge.da { opacity: 1; }
.buehne-zeigerbadge strong {
    font-weight: 600;
    font-size: .72rem;
    line-height: 1.25;
    /* Lange Projekttitel enden im Kreis nach drei Zeilen. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.buehne-zeigerbadge svg { width: 36px; height: auto; flex: none; }
/* Während der Absprung-Animation skaliert der Kreis — der Inhalt bleibt
   zurück, sonst würde er riesig mitwachsen. */
.buehne-zeigerbadge.zoom strong,
.buehne-zeigerbadge.zoom svg { opacity: 0; transition: opacity .18s ease; }
/* Am Zeigegerät ersetzt das Badge den Systemzeiger über den Objekten. */
@media (hover: hover) and (pointer: fine) {
    .buehne-obj button { cursor: none; }
}


/* Statischer Ersatz (ohne JavaScript oder bei reduzierter Bewegung):
   gleiche Inhalte als ruhige Seite. */
.buehne-statisch { padding: calc(130px + var(--space-7)) var(--rand) var(--space-9); }
.buehne-statisch .lz-claim { margin-bottom: var(--space-8); }
.buehne-statisch-frage {
    margin: 0 0 var(--space-5);
    font-weight: 300;
    font-size: clamp(1.8rem, 3.4vw, 3.5rem);
    line-height: 1.15;
    max-width: 34ch;
}
.buehne-statisch-antwort { margin: var(--space-7) 0 var(--space-6); }

/* --- Leistungsblöcke ---------------------------------------------------------- */

.lz-blockgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-7);
    align-items: start;
}

.lz-blocktext {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
}
.lz-blocktext p { margin: 0; max-width: min(52ch, 100%); }

#handwerk { padding-top: calc(2 * var(--space-10)); }

.handwerk-titel {
    margin: var(--space-8) 0 0;
    text-align: center;
    font-weight: 300;
    font-size: clamp(2.4rem, 8vw, 8rem);
    line-height: 1.04;
}
.handwerk-titel .buehne-zeile { display: block; }

/* Die zwei Säulen: Fassung „frei" (Beschluss 17.9.2026) — schmale, offene
   Spalten mit kräftiger Oberlinie und reichlich Weißraum links, mittig
   und rechts. */
.lz-saeulen {
    display: grid;
    /* Halb so breite Spalten, verteilt mit Weißraum links, mittig, rechts */
    grid-template-columns: repeat(2, minmax(min(100%, 260px), 420px));
    justify-content: space-evenly;
    column-gap: var(--space-8);
    row-gap: var(--space-7);
    margin-top: var(--space-8);
    align-items: stretch;
}

.lz-saeule {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border-top: 2px solid var(--ink);
    padding: var(--space-6) 0 0;
}
.lz-saeule p { margin: 0; }
.lz-saeule-fuss { margin-top: auto; padding-top: var(--space-5); }

.lz-saeule-titel {
    margin: 0;
    font-weight: 300;
    font-size: clamp(1.7rem, 2.7vw, 2.75rem);
    line-height: 1.08;
}
/* Eine Fließtext-Größe über alle Absätze */
.lz-saeule-text {
    font-size: var(--text-lg);
    line-height: var(--leading-body);
    color: var(--text-body);
}

/* --- Team ----------------------------------------------------------------------- */

.lz-teamgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}

.lz-teamgrid img.team-foto-bild {
    border-radius: var(--radius-xs);
    width: 100%;
    height: auto;
    border-radius: var(--radius-xs);
}

.team-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xs);
    background: var(--grey-100);
    border: 1px dashed var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* --- Telefon ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .lz-blockgrid, .lz-teamgrid, .lz-saeulen { grid-template-columns: 1fr; gap: var(--space-7); }
    .buehne-frage { max-width: none; left: var(--rand); right: var(--rand); }
    .buehne-claimblock { padding: calc(90px + var(--space-7)) var(--rand) var(--space-8); }
    /* Rund 20 % höher als am Schreibtisch: Der Claim konkurrierte unten
       mit dem schwebenden Anfrage-Icon (Roman, 12.10.2026). */
    .buehne-claimblock { min-height: min(calc(68vh + 150px), calc(80vh - 32px)); }
    .buehne-antwort { left: var(--rand); right: var(--rand); }
    .buehne-statisch { padding-top: calc(90px + var(--space-6)); }
    /* Team-Akt: Foto und Text rücken zusammen und damit tiefer (das Foto
       hing sonst oben an der Kopfzeile). Der weiße Nebel hinter dem Text
       läuft mit closest-side GARANTIERT innerhalb seiner Box auf 0 aus —
       die geklemmte Oberkante stand am Telefon als harte Linie im
       dunklen Splash (Roman, 12.10.2026). */
    .buehne-team { gap: var(--space-7); }
    .buehne-team-text::before {
        inset: -120px -90px;
        background: radial-gradient(closest-side,
            rgba(255, 255, 255, .97) 52%,
            rgba(255, 255, 255, 0) 100%);
    }
}

/* Reduzierte Bewegung: kein Eigenleben — das Skript bleibt ohnehin bei der
   statischen Fassung, aber auch Astronaut/Karten stehen dann still. */
@media (prefers-reduced-motion: reduce) {
    .buehne-obj img, .buehne-astro img { animation: none; }
}