/* =============================================================================
   Startseite - Kopfbereich, Adressfeld und Laufband.

   Das Adressfeld ist das Erzählmotiv der Seite und zugleich das echte
   Eingabefeld. Es sieht deshalb wie eine Karte aus und nicht wie ein
   Formular. Grundlage und Palette stehen in startseite-grund.css.
   ============================================================================= */

.held {
    position: relative;
    /* Genau um die Höhe des Laufbands kürzer als das Fenster, damit das Band
       beim Aufruf der Seite unten im Bild steht, ohne dass man scrollen muss. */
    min-height: calc(100dvh - var(--band-höhe));
    display: grid;
    align-items: center;
    padding: 130px 0 40px;
    background:
        radial-gradient(1100px 600px at 78% 6%, rgba(232, 160, 32, 0.2), transparent 60%),
        radial-gradient(900px 700px at -10% 92%, rgba(207, 227, 232, 0.55), transparent 55%),
        var(--papier);
    overflow: hidden;
}

.held-raster {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    background-image:
        linear-gradient(var(--linie) 1px, transparent 1px),
        linear-gradient(90deg, var(--linie) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(80% 70% at 50% 40%, black, transparent);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, black, transparent);
}

.held-gitter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.vorzeile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tanne);
}

.vorzeile-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bernstein);
    animation: puls 2.4s infinite;
}

@keyframes puls {
    70% {
        box-shadow: 0 0 0 12px rgba(232, 160, 32, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(232, 160, 32, 0);
    }
}

.held h1 {
    font-size: clamp(2.3rem, 5.4vw, 4.2rem);
    margin-bottom: 24px;
}

.held h1 em {
    font-style: italic;
    color: var(--tanne);
    position: relative;
}

.held h1 em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.06em;
    height: 0.26em;
    z-index: -1;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(232, 160, 32, 0.55), rgba(232, 160, 32, 0.15));
}

.held-unter {
    max-width: 34rem;
    margin-bottom: 30px;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: var(--tinte-weich);
}

.held-klein {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--tinte-leise);
}

/* --- Adressfeld --- */
.suche {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 32rem;
    padding: 10px 10px 10px 18px;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund-gross);
    box-shadow: var(--schatten-flach);
}

.suche-pin {
    flex: none;
    color: var(--tanne);
}

/* Das Symbol steht IM Feldbereich, damit die Vorschlagsliste sich an dessen
   Kante ausrichten kann. Ohne Flex hier landet es in einer eigenen Zeile
   und die Eingabe rutscht darunter. */
.suche-feld {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.suche input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-family: var(--sans);
    font-size: 0.98rem;
    color: var(--tinte);
    padding: 0.5rem 0;
}

.suche input:focus {
    outline: none;
}

.suche:focus-within {
    border-color: var(--bernstein);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.2);
}

/* --- Während gerechnet wird ---
   Die Analyse dauert je nach Anwesen zwischen einer halben und knapp zwei
   Minuten. Ohne sichtbaren Fortschritt hält der Besucher die Seite in dieser
   Zeit für stehengeblieben, deshalb wird das Feld selbst zur Anzeige: kräftige
   Umrandung, rechts der Balken mit Prozentwert und der Restzeit. */
.suche.laedt {
    border-color: var(--tanne);
    /* Der Rahmen wächst nach innen, sonst springt die ganze Zeile um 4 px. */
    border-width: 3px;
    padding: 8px 8px 8px 16px;
    box-shadow: 0 0 0 4px rgba(14, 63, 47, 0.1);
}

.suche-last {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suche-last[hidden] {
    display: none;
}

.suche-last-balken {
    display: block;
    width: clamp(44px, 11vw, 84px);
    height: 6px;
    border-radius: 999px;
    background: rgba(14, 63, 47, 0.14);
    overflow: hidden;
}

.suche-last-balken i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    /* Verlauf statt einer Fläche: Die hellere Spitze zeigt die Laufrichtung. */
    background: linear-gradient(90deg, var(--tanne), var(--tanne-hell));
    transform-origin: left center;
    transform: scaleX(0);
    /* Gleichmäßig und knapp über dem Takt der Anzeige (120 ms), damit die
       Bewegung ohne Ruckeln durchläuft. Eine weiche Kurve käme hier nie zur
       Ruhe und wirkte zäh. */
    transition: transform 0.18s linear;
}

.suche-last b {
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tanne);
    white-space: nowrap;
}

/* --- Weiterpfeil ---
   Steht erst da, wenn unten wirklich etwas zu sehen ist. Vorher führte die
   Seite von selbst nach unten und nahm dem Besucher die Entscheidung ab. */
.weiterpfeil {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.2rem;
    color: var(--tanne);
    font-size: 0.9rem;
    font-weight: 600;
}

.weiterpfeil[hidden] {
    display: none;
}

.weiterpfeil-kreis {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tanne);
    color: var(--papier);
    box-shadow: var(--schatten-flach);
    animation: pfeil-wippen 1.9s var(--kurve) infinite;
}

@keyframes pfeil-wippen {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 6px;
    }
}

.suche button {
    flex: none;
    padding: 0.7rem 1.3rem;
    border: none;
    border-radius: 12px;
    background: var(--bernstein);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s var(--kurve);
}

.suche button:hover {
    transform: scale(1.04);
}

.suche button[disabled] {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

/* Vorschlagsliste unter dem Eingabefeld. Höhe an das Fenster gebunden,
   sonst reicht sie bei kleinen Bildschirmen unter den unteren Rand. */
.vorschlaege {
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    top: calc(100% + 0.6rem);
    z-index: 20;
    list-style: none;
    max-height: min(15rem, 40svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 12px;
    box-shadow: var(--schatten);
}

.vorschlaege li {
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.35;
    cursor: pointer;
    border-bottom: 1px solid var(--papier-tief);
}

.vorschlaege li:last-child {
    border-bottom: none;
}

.vorschlaege li:hover,
.vorschlaege li.an {
    background: var(--papier-tief);
    color: var(--tanne);
}

.hinweis {
    min-height: 1.3em;
    margin-top: 0.7rem;
    font-size: 0.82rem;
    color: var(--tinte-weich);
}

/* --- Luftbild des gezeigten Anwesens --- */
.held-bild {
    position: relative;
}

.bildkarte {
    position: relative;
    overflow: hidden;
    border-radius: var(--rund-gross);
    border: 1px solid var(--linie);
    background: var(--karte);
    box-shadow: var(--schatten);
}

.bildkarte img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.2;
    object-fit: cover;
}

/* Bezugsrahmen für die Zeichnung: sie liegt als SVG absolut darin und
   braucht deshalb eine Fläche, die auch ohne Inhalt schon steht. */
.held-vorschau {
    position: relative;
    aspect-ratio: 4 / 3.2;
    overflow: hidden;
    background: var(--papier-tief);
}

.held-vorschau img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.bildkarte figcaption {
    padding: 10px 16px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--tinte-leise);
    border-top: 1px solid var(--linie);
}

.held-marke {
    position: absolute;
    right: -8px;
    /* Über dem Luftbild, nicht auf der Quellenangabe darunter. */
    bottom: 78px;
    z-index: 4;
    padding: 12px 18px;
    border-radius: var(--rund);
    background: var(--tinte);
    color: var(--papier);
    box-shadow: var(--schatten);
    font-size: 0.8rem;
    line-height: 1.4;
    transform: rotate(2deg);
}

.held-marke strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--bernstein);
}

/* --- Laufband ---
   Es hat KEINE eigene Positionierung, und das ist der Kern der Sache: Es sitzt
   schlicht als oberste Zeile im Block `.bandbuehne` (startseite-welt.css) und
   damit unverrückbar auf der Oberkante der Bühne. Gehalten wird der ganze
   Block, nie das Band allein. So kann es sich gegenüber der räumlichen Ansicht
   nicht verschieben, weder nach oben noch nach unten, und es hängt am Ende des
   Abschnitts auch nicht über dem nächsten Kapitel nach. */
.laufband {
    overflow: hidden;
    height: var(--band-höhe);
    display: flex;
    align-items: center;
    background: var(--karte);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}

.laufband-lauf {
    display: flex;
    gap: 56px;
    width: max-content;
    white-space: nowrap;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--tinte-weich);
    animation: lauf 38s linear infinite;
}

.laufband-lauf b {
    color: var(--tanne);
    font-weight: 700;
}

@keyframes lauf {
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 960px) {
    .held-gitter {
        grid-template-columns: 1fr;
    }

    .held {
        padding-top: 92px;
        padding-bottom: 24px;
    }

    /* Einspaltig stehen Text und Bild untereinander. Ohne Deckel wächst das
       Bild mit der Breite und schiebt das Laufband aus dem ersten Bild - auf
       einem schmalen Telefon sähe man beim Aufruf nur noch das Luftbild. */
    .held-vorschau {
        aspect-ratio: auto;
        height: min(30dvh, 48vw);
    }

    .bildkarte img {
        aspect-ratio: auto;
        height: 100%;
    }

    .held-marke {
        right: 8px;
        bottom: 58px;
    }
}

@media (max-width: 560px) {
    .suche {
        flex-wrap: wrap;
        padding: 12px;
    }

    .suche-feld {
        flex: 1 1 100%;
        order: 2;
    }

    .suche button {
        flex: 1 1 100%;
        order: 3;
    }

    .vorschlaege {
        left: 0;
        right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .laufband-lauf,
    .vorzeile-punkt {
        animation: none;
    }

    .suche button {
        transition: none;
    }
}