/* =============================================================================
   Startseite - die Bühne des Ablaufs.

   Das Luftbild trägt das Bild, alles andere liegt als Karte darüber. Palette
   und Schriften stehen in startseite-seite.css, hier steht nur die Bühne:
   Zeichnung, Schrittleiste, Tafel und die Takte, die den Ablauf treiben.
   ============================================================================= */

.ablauf {
    position: relative;
    background: var(--tinte);
}

/* Laufband und Bühne als EIN gehaltener Block, und genau daran hängt das
   ruhige Band: Gehalten wird nicht das Band, sondern der Block. Das Band sitzt
   in ihm ganz oben, fest auf der Oberkante der Bühne, und kann sich gegenüber
   der räumlichen Ansicht deshalb nie verschieben.

   Der Ablauf beginnt genau dort, wo der Kopfbereich endet, und der ist um die
   Bandhöhe kürzer als das Fenster. Beim Aufruf steht das Band also unten im
   ersten Bild, sichtbar ohne einen einzigen Scrollschritt. Danach wandert der
   Block bis unter die Kopfleiste hinauf und bleibt dort die ganze räumliche
   Ansicht über stehen. Am Ende des Abschnitts lösen sich Band und Bühne
   gemeinsam und gehen zusammen aus dem Bild - das Band bleibt bis zuletzt auf
   der Bühnenkante und läuft ihr nie hinterher.

   Kein overflow, kein transform, kein filter und kein contain auf diesem
   Block: Jede dieser Angaben nähme ihm das Halten. */
.bandbuehne {
    position: sticky;
    top: var(--kopf-höhe);
    height: calc(100dvh - var(--kopf-höhe));
}

/* Die Bühne füllt das Fenster unterhalb von Kopfleiste und Band. Der Himmel
   liegt hinter dem durchsichtigen Bild, der untere Ton entspricht der
   Nebelfarbe der Szene, damit der Übergang unsichtbar bleibt. */
.buehne {
    /* Gehalten wird der Block darüber, hier genügt der Bezugsrahmen für die
       Zeichnung und die Karten. */
    position: relative;
    /* Füllt das Fenster. `dvh` statt `svh`: Klappt die Adressleiste des
       Telefons ein, wächst das Fenster - mit der kleinen Viewporthöhe schaute
       dann unten der nächste Abschnitt als grüner Streifen hervor. */
    height: calc(100dvh - var(--kopf-höhe) - var(--band-höhe));
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #1b232e 0%, #3a4650 38%, #5b6350 66%, #5b6350 100%);
}

/* Eigener Stapel: Darin liegt die Zeichnung über der räumlichen Ansicht.
   Ohne den Kontext steigen die beiden mit ihrem z-index in den Stapel der
   Seite auf und legen sich über Tafel und Beschriftungen. */
.welt {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Die räumliche Ansicht liegt UNTEN, die Zeichnung darüber. Beim Übergang
   wird die Zeichnung durchsichtig und gibt den Blick frei. Weil die Kamera
   in diesem Moment senkrecht herabschaut und denselben Ausschnitt zeigt,
   sind beide Bilder deckungsgleich und der Wechsel fällt nicht auf. */
.welt canvas {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Das Luftbild mit den Ergebnissen als Zeichnung. Die Deckkraft hängt am
   Scrollen, nicht an einem Zeitablauf: Der Besucher blendet selbst über. */
.flachbild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    will-change: opacity;
}

.flachbild.weg {
    pointer-events: none;
}

.flachbild .lage {
    opacity: 0;
    transition: opacity 0.45s var(--kurve);
}

.flachbild .lage.an {
    opacity: 1;
}

/* Gebäude und Dachflächen werden nur umrissen, nicht gefüllt: Das Luftbild
   soll lesbar bleiben, und aus der weißen Gebäudekante des ersten Schritts
   werden im zweiten die weißen Dachflächen. */
.f-gebaeude {
    fill: rgba(247, 243, 234, 0.06);
    stroke: #f7f3ea;
    stroke-width: 2.2;
}

.f-dach {
    fill: none;
    stroke: #f7f3ea;
    stroke-width: 1.6;
}

/* Aufbauten dunkelrot, bestehende Anlagen dunkelblau - beide durchscheinend,
   damit man sieht, worum es sich handelt. */
.f-aufbau {
    fill: rgba(104, 26, 24, 0.5);
    stroke: rgba(198, 84, 74, 0.85);
    stroke-width: 0.9;
}

.f-bestand {
    fill: rgba(20, 54, 96, 0.5);
    stroke: rgba(105, 165, 224, 0.9);
    stroke-width: 1.1;
}

/* Die Module sind das Ergebnis und stehen deshalb als Einzige deckend da. */
.f-modul {
    fill: #16222e;
    stroke: #4d6f88;
    stroke-width: 0.5;
}

/* Zeichnung der Geometrien in der räumlichen Ansicht. Jede Lage wird
   eigenständig eingeblendet. Nur die direkten Kinder der Weltgruppe, sonst
   verschwände die Welt selbst samt Luftbild. */
#welt > g {
    opacity: 0;
    transition: opacity 0.6s var(--kurve);
}

#welt > g.an {
    opacity: 1;
}

.gebaeude-linie {
    fill: rgba(247, 243, 234, 0.08);
    stroke: #f7f3ea;
    stroke-width: 2.5;
}

.dach-flaeche {
    fill: rgba(232, 160, 32, 0.28);
    stroke: var(--bernstein);
    stroke-width: 1.5;
}

.hindernis-aufbau {
    fill: rgba(29, 43, 37, 0.55);
    stroke: #f7f3ea;
    stroke-width: 1;
}

.hindernis-bestand {
    fill: rgba(44, 74, 99, 0.65);
    stroke: #8fd0ff;
    stroke-width: 1.6;
}

.modul {
    fill: rgba(31, 58, 77, 0.86);
    stroke: #9fd4f2;
    stroke-width: 0.6;
    opacity: 0;
    animation: modul-auf 0.35s var(--kurve) forwards;
}

@keyframes modul-auf {
    to {
        opacity: 1;
    }
}

/* Wände der Baukörper. Sie erscheinen nur in der Schrägansicht und sind
   dunkel gehalten, damit die Dachflächen darüber hell bleiben. */
.wand {
    fill: rgba(29, 43, 37, 0.62);
    stroke: rgba(247, 243, 234, 0.35);
    stroke-width: 0.8;
    stroke-linejoin: round;
}

/* --- Schilder über der Welt ---
   Flach in der Bildebene, damit die Schrift scharf bleibt und sich nicht mit
   dem Anwesen wegdreht. Die Lage kommt aus der Projektion der Kamera. */
.schilder {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.5s var(--kurve);
}

.schild {
    position: absolute;
    top: 0;
    left: 0;
    /* Der Ankerpunkt sitzt in der Mitte des Schildes, deshalb der halbe
       Rückversatz. `translate` wird je Bild neu gesetzt. */
    margin: -1.1rem 0 0 -3rem;
    width: 6rem;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7);
    transition: opacity 0.35s var(--kurve);
}

.schild small {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.schild-ertrag {
    color: var(--bernstein);
}

/* Geprüft, aber nicht belegt: Die Zahl bleibt lesbar, tritt aber zurück. */
.schild-blass {
    color: rgba(247, 243, 234, 0.7);
    font-weight: 600;
}

/* Bestehende Anlagen bekommen einen Zeiger auf ihre Fläche. */
.schild-bestand {
    color: #9fd4f2;
    margin-top: -3.2rem;
}

.schild-bestand::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 1.6rem;
    background: linear-gradient(180deg, #9fd4f2, rgba(159, 212, 242, 0.15));
}

.schild-bestand::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 1.4rem);
    width: 0.5rem;
    height: 0.5rem;
    translate: -50% 0;
    rotate: 45deg;
    border-right: 2px solid #9fd4f2;
    border-bottom: 2px solid #9fd4f2;
}

/* --- Schrittleiste: wo bin ich, was kommt noch ---
   Alle sechs Schritte stehen immer da. Der laufende ist hervorgehoben,
   die erledigten bleiben gefüllt. Der Verlauf im Rücken hält die Schrift
   lesbar, egal wie hell das Luftbild an dieser Stelle ist. */
.leiste {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 6;
    translate: 0 -50%;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 1.5rem clamp(2rem, 5vw, 4rem) 1.5rem clamp(1.1rem, 3vw, 2.5rem);
    background: linear-gradient(90deg, rgba(18, 24, 22, 0.62) 35%, rgba(18, 24, 22, 0));
}

.leiste-punkt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.leiste-kreis {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(247, 243, 234, 0.45);
    transition: transform 0.3s var(--kurve), background 0.3s, border-color 0.3s;
}

.leiste-wort {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 243, 234, 0.82);
    /* Zwei Schatten: der enge trägt die Kante, der weite hebt das Wort auch
       von einer hellen Wiese ab. Ohne ihn verschwindet die Leiste je nach
       Luftbild an einzelnen Stellen. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.65);
    transition: color 0.3s;
}

/* Erledigte Schritte bleiben gefüllt, aber ruhig. */
.leiste-punkt.erledigt .leiste-kreis {
    background: rgba(247, 243, 234, 0.55);
    border-color: rgba(247, 243, 234, 0.55);
}

.leiste-punkt.an .leiste-kreis {
    background: var(--bernstein);
    border-color: var(--bernstein);
    transform: scale(1.45);
}

.leiste-punkt.an .leiste-wort {
    color: #fff;
}

.leiste-punkt:hover .leiste-wort {
    color: #fff;
}

/* --- Tafel, liegt als Karte über dem Luftbild --- */
.tafel {
    position: absolute;
    right: 2.5rem;
    bottom: 2.5rem;
    width: min(26rem, calc(100% - 5rem));
    padding: 1.4rem 1.6rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: 0 18px 40px rgba(12, 14, 18, 0.45);
}

.tafel-schritt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.tafel-schritt b {
    color: var(--bernstein-tief);
    font-size: 0.95rem;
}

.tafel h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    margin: 0.45rem 0 0.55rem;
}

.tafel p {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    color: var(--tinte-weich);
    min-height: 4.4em;
}

.tafel-werte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.2rem;
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linie);
    min-height: 6.5rem;
}

/* Beschriftung über dem Wert. Die Paare stehen zu zweit nebeneinander,
   damit auch vier Kennzahlen ohne Umbruch in die Karte passen. */
.tafel-werte .wert {
    min-width: 0;
}

.tafel-werte dt {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.tafel-werte dd {
    margin: 0.15rem 0 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tanne);
    font-variant-numeric: tabular-nums;
}

.tafel-werte dd small {
    display: block;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

/* --- Zustand, Wartefeld, Quellenangabe --- */
.zustand {
    position: absolute;
    left: 0.75rem;
    top: 0.6rem;
    z-index: 6;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(20, 24, 30, 0.6);
}

.zustand:empty {
    display: none;
}

/* Solange gerechnet wird, hält die Seite an dieser Stelle an. Ohne die
   Sperre scrollt der Besucher durch Schritte, zu denen es noch keine Daten
   gibt, und hält die leere Fläche für einen Fehler. */
html.haelt,
html.haelt body {
    overflow: hidden;
    /* Auf dem Telefon greift overflow allein nicht gegen den Wischimpuls. */
    overscroll-behavior: none;
    touch-action: none;
}

.warten {
    position: absolute;
    left: 50%;
    top: 2.6rem;
    z-index: 7;
    width: min(23rem, 82vw);
    padding: 0.9rem 1.1rem 1rem;
    background: rgba(18, 22, 28, 0.86);
    border: 1px solid rgba(247, 243, 234, 0.14);
    border-radius: 6px;
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    translate: -50% 0.6rem;
    transition: opacity 0.3s var(--kurve), translate 0.3s var(--kurve);
}

.warten.an {
    opacity: 1;
    translate: -50% 0;
}

.warten-text {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.92);
}

.warten-schiene {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: rgba(247, 243, 234, 0.16);
    overflow: hidden;
}

.warten-balken {
    display: block;
    height: 100%;
    background: var(--bernstein);
    transform-origin: 0 50%;
    transform: scaleX(0.02);
    transition: transform 0.5s var(--kurve);
}

/* Die Namensnennung wächst mit der Zahl der Datenquellen. Sie bleibt rechts
   unten, darf aber umbrechen, statt in die Tafel zu laufen. */
.quelle {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    max-width: min(46rem, 62%);
    text-align: right;
    font-size: 0.62rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Ein Takt je Schritt, bewusst kurz: ein Wisch bringt einen Schritt weiter.
   KEIN scroll-snap - der Snap-Container müsste das scrollende Element sein,
   am Abschnitt gesetzt blockiert er in manchen Browsern das Weiterscrollen. */
.takt {
    height: 55svh;
}

@media (max-width: 900px) {
    /* Auch auf dem Telefon senkrecht, nur schmaler: Waagrecht ist kein Platz
       für die Wörter, und sechs Punkte ohne Beschriftung sagen nichts. */
    .leiste {
        gap: 0.85rem;
        padding: 1rem 2.4rem 1rem 0.9rem;
    }

    .leiste-wort {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    /* Die Leiste steht jetzt links statt unten, die Tafel darf deshalb bis an
       den unteren Rand. */
    .tafel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: 3px solid var(--bernstein);
        padding: 1rem 1.2rem 1.2rem;
    }

    .tafel h2 {
        font-size: 1.2rem;
        margin: 0.3rem 0 0.4rem;
    }

    .tafel p {
        min-height: 0;
        margin-bottom: 0.7rem;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .tafel-werte {
        min-height: 0;
        padding-top: 0.7rem;
        gap: 0.5rem 1rem;
        align-items: baseline;
    }

    .tafel-werte dt {
        font-size: 0.6rem;
    }

    .tafel-werte dd {
        font-size: 1.05rem;
    }

    .tafel-werte dd small {
        display: inline;
        margin-left: 0.25rem;
    }

    .quelle {
        bottom: auto;
        top: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modul {
        animation: none;
        opacity: 1;
    }

    .leiste-kreis,
    .leiste-wort {
        transition: none;
    }
}