/* ============================================================
   ScreenImmos — /suche  (search-first landing)
   Gradient hero + first-party location search bar.
   Builds on tokens.css + base.css; only this page links it.
   ============================================================ */

/* ---------- Hero band ---------- */
.search-hero {
  position: relative;
  isolation: isolate;
  /* Lift the hero above the sections below it so the open search dropdown —
     which escapes the hero via overflow-y below — overlays them, not vice-versa. */
  z-index: 1;
  padding-block: clamp(3.5rem, 1.5rem + 8vw, 8rem) clamp(5.5rem, 3rem + 9vw, 10rem);
  /* Deep, saturated jewel-tone sweep: dark enough that white body copy clears
     WCAG AA (4.5:1) on every stop by construction — not via a fragile overlay.
     A pink corner-glow + faint top sheen keep the field lively away from text. */
  background:
    radial-gradient(110% 80% at 12% -10%, rgba(255, 255, 255, 0.12), transparent 48%),
    radial-gradient(90% 85% at 98% 6%, rgba(236, 90, 160, 0.30), transparent 55%),
    linear-gradient(135deg, #0a6b68 -8%, #1a5fb4 32%, #4a37a8 72%, #8e3a6f 122%);
  color: #fff;
  text-align: center;
  /* Clip only horizontal bleed (the -8% concave sweep); let the open search
     dropdown overflow the bottom edge so it floats over the next section. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Faint top sheen for atmosphere (kept low so it never lifts the copy backdrop
   above the AA threshold). */
.search-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% -6%, rgba(255, 255, 255, 0.06), transparent 68%);
  pointer-events: none;
}

/* Concave white sweep at the bottom edge (echoes the reference). */
.search-hero::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: clamp(38px, 5.5vw, 84px);
  background: var(--bg);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}

.search-hero > .container {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.search-hero h1 {
  color: #fff;
  font-size: clamp(2.35rem, 1.1rem + 4.4vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.search-hero h1 .u {
  background: linear-gradient(120deg, #fff 30%, rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  box-shadow: inset 0 -0.14em rgba(255, 255, 255, 0.45);
}

.search-hero .lead {
  max-width: 640px;
  margin: 1.15rem auto 0;
  color: #fff;
  font-size: var(--text-lead);
}
.search-hero .lead strong { font-weight: 800; }
/* Semantic highlights: the two scan/rating facts in bright brand mint, the
   "unter Marktwert" payoff in warm gold — both clear WCAG AA on the dark hero. */
.search-hero .lead .hl-fact { color: #8ff3ea; }
.search-hero .lead .hl-key {
  color: #ffdf7a;
  text-shadow: 0 0 18px rgba(255, 214, 107, 0.35);
}

/* ---------- The search card ---------- */
.loc-search {
  position: relative;
  /* Lift the whole bar above the hero content below it. The hero-in load-in
     animation turns .loc-search into a stacking context, which would otherwise
     trap the dropdown's z-index and let the trust line paint over it. */
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  max-width: 760px;
  margin: clamp(1.9rem, 1rem + 2.4vw, 3rem) auto 0;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  text-align: left;
  transition: box-shadow var(--duration-normal) var(--ease-out);
}
.loc-search:focus-within {
  box-shadow: var(--shadow-float), 0 0 0 3px rgba(46, 155, 255, 0.6);
}

/* While the suggestions (or loading) panel is open, hide the trust line beneath
   it so the floating results overlay the hero cleanly instead of the centred
   trust text bleeding out around the dropdown. JS toggles .loc-search--open. */
.loc-search--open ~ .search-trust { visibility: hidden; }

.loc-search__field {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.loc-search__icon {
  position: absolute;
  left: 1.15rem;
  width: 20px;
  height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.loc-search__input {
  width: 100%;
  height: 58px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-strong);
  padding: 0 1rem 0 3rem;
  border-radius: var(--radius-pill);
}
.loc-search__input::placeholder { color: var(--faint); font-weight: 500; }
.loc-search__input:focus { outline: none; }
/* Hide the native search "×" clear (we manage state ourselves). */
.loc-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Static category segment — the product covers Eigentumswohnungen today. */
.loc-search__cat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-inline: 1.1rem;
  border-left: 1px solid var(--border);
  color: var(--muted-tint);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
.loc-search__cat svg { width: 18px; height: 18px; color: var(--purple); }

.loc-search__submit {
  flex: none;
  height: 58px;
  padding-inline: 1.6rem;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.loc-search__count { font-weight: 800; }

/* ---------- Suggestions ---------- */
.loc-search__suggest {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.1rem;
  right: -0.1rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  max-height: min(56vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30;
}
.loc-search__suggest[hidden] { display: none; }

.loc-search__opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  cursor: pointer;
}
/* data-active covers both keyboard highlight and hover (mouseenter sets it), so
   this is also the hover state — a clear, on-brand highlight, not a faint tint. */
.loc-search__opt[data-active] {
  background: #eeeafc;
  box-shadow: inset 3px 0 0 var(--purple);
}
.loc-search__opt-label {
  font-weight: 700;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-search__opt-kind {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-text);
}
.loc-search__opt-count {
  flex: none;
  margin-left: auto;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

/* Loading hint while the place index is still fetching (a11y: role=status). */
.loc-search__status {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.1rem;
  right: -0.1rem;
  margin: 0;
  padding: 0.8rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  color: var(--muted);
  font-size: 0.92rem;
  z-index: 29;
}
.loc-search__status[hidden] { display: none; }
.loc-search__status::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--purple);
  animation: loc-spin 0.7s linear infinite;
}
@keyframes loc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loc-search__status::before { animation: none; }
}

/* ---------- Trust row under the hero ---------- */
.search-trust {
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
}
.search-trust .stars { color: #ffd66b; letter-spacing: 0.1em; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .loc-search {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    padding: 0.7rem;
    gap: 0.6rem;
  }
  .loc-search__field {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
  }
  .loc-search__cat {
    border-left: 0;
    justify-content: center;
    padding-block: 0.2rem;
  }
  .loc-search__submit { width: 100%; }
  .loc-search__suggest,
  .loc-search__status { left: 0; right: 0; top: calc(100% + 0.5rem); }
}