/* 2.7: Startseite als zwei Bühnen.
   1. Bildschirm: Kopfleiste + Kopfbereich + Stand-Zeile füllen genau die Fensterhöhe.
   2. Bildschirm: Preisabfrage. Ein Dreh am Mausrad im ersten Bildschirm blättert sanft dorthin.
   Im Hintergrund der Preisabfrage zeichnet sich einmal Hamburgs Silhouette wie mit Kreide,
   danach zeigt ein Pfeil auf das Eingabefeld. */

/* Erster Bildschirm */
.home .einstieg{min-height:calc(100svh - var(--h-kopf,4.35rem) - var(--h-stand,2.75rem) - var(--h-admin,0px));display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.home .einstieg > .huelle{width:100%;box-sizing:border-box}
@media (min-width:761px){.home .einstieg{padding-top:2.25rem;padding-bottom:2.25rem}}

/* Weiterblättern zur Preisabfrage übernimmt buehne.js; ab 1100 px ist die Kopfleiste dort ausgeblendet */
@media (min-width:1100px){html:has(body.home){scroll-padding-top:var(--h-admin,0px)}}

/* Zweiter Bildschirm: Preisabfrage */
.home #preisniveau{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--h-admin,0px));display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.home #preisniveau > .huelle{width:100%;box-sizing:border-box;position:relative;z-index:1}
.kreide-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(30vh,15rem);z-index:0;pointer-events:none;color:var(--hanse);opacity:.24}
.kreide-skyline path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kreide-pfeil{position:absolute;z-index:2;pointer-events:none;color:var(--klinker);width:7.5rem;height:5rem;left:-8.25rem;top:2.7rem;display:none}
@media (min-width:980px){.kreide-pfeil{display:block}}
.kreide-pfeil path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.home .schnellsuche{position:relative}

/* Zeichnen: Striche starten unsichtbar und werden gezogen, sobald der Abschnitt im Bild ist */
.kreide-an .kreide-skyline path,.kreide-an .kreide-pfeil path{stroke-dasharray:1;stroke-dashoffset:1}
.kreide-los .kreide-skyline path{animation:kreide-zug 1.6s cubic-bezier(.45,.05,.35,1) forwards;animation-delay:calc(var(--i,0) * .22s)}
.kreide-los .kreide-pfeil path{animation:kreide-zug .7s ease-out forwards;animation-delay:calc(2.4s + var(--i,0) * .45s)}
@keyframes kreide-zug{to{stroke-dashoffset:0}}

/* Danach: das Eingabefeld bekommt einmal einen ruhigen Ring */
.kreide-los #schnell-stadtteil{animation:feld-ring 1.4s ease-out 3.3s 1}
@keyframes feld-ring{0%{box-shadow:0 0 0 0 rgba(142,58,44,.45)}100%{box-shadow:0 0 0 10px rgba(142,58,44,0)}}

@media (prefers-reduced-motion:reduce){
  .kreide-an .kreide-skyline path,.kreide-an .kreide-pfeil path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .kreide-los #schnell-stadtteil{animation:none}
}