/* Belvedere - Adressvorschlaege (public/js/places.js).
   Eigene Liste unter jedem Feld mit data-booking-address (Startseite, Buchung Schritt 1,
   Anfrage). Farben, Schrift und Radien aus den Tokens von site.css; die Rueckfallwerte sind
   die dunklen Grundwerte ("dunkel, aber aufgeraeumt") und greifen nur, wenn ein Token fehlt.
   Gold nur fuer die Auswahl (Strich links) und das Symbol der markierten Zeile.
   Klassen, die places.js setzt: .ac-host, .ac, .ac__list, .ac__opt(--fixed), .ac__icon,
   .ac__text, .ac__main, .ac__hit, .ac__sub, .ac__none, .ac__attr, .ac__sr, .field__hint--places */

/* Der Kasten haengt am Elternteil des Feldes (.field__prefix) */
.ac-host{ position:relative }

.ac{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  background: var(--bg-2, #141A2B);
  color: var(--fg, #F5F1E8);
  border:1px solid var(--line-strong, rgba(232,213,163,.36));
  border-radius: var(--r-s, 10px);
  box-shadow: var(--shadow-m, 0 12px 32px rgba(0,0,0,.35));
  overflow:hidden;
  font-family: var(--sans, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  text-align:left;
}
.ac[hidden]{ display:none }

.ac__list{
  position:relative;                 /* Bezug fuer offsetTop beim Blaettern mit Pfeiltasten */
  list-style:none; margin:0; padding:4px 0;
  max-height:340px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.ac__opt{
  display:flex; align-items:center; gap:12px;
  min-height: var(--tap, 48px);      /* Tap-Ziel >= 44 px */
  padding:8px 16px 8px 13px;
  border-left:3px solid transparent; /* Markierung nicht nur ueber Farbe */
  line-height:1.3; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.ac__opt + .ac__opt{ border-top:1px solid var(--line, rgba(232,213,163,.18)) }
@media (hover:hover){
  .ac__opt:hover{ background: rgba(201,165,90,.08) }
}
.ac__opt[aria-selected="true"]{
  background: rgba(201,165,90,.16);
  border-left-color: var(--gold, #C9A55A);
}

.ac__icon{ flex:0 0 20px; width:20px; height:20px; color: var(--fg-muted, rgba(245,241,232,.62)) }
.ac__opt[aria-selected="true"] .ac__icon,
.ac__opt--fixed .ac__icon{ color: var(--gold, #C9A55A) }

.ac__text{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.ac__main{ font-size: var(--fs-m, 1rem); color: var(--fg, #F5F1E8); overflow-wrap:anywhere }
.ac__opt--fixed .ac__main{ font-weight:600 }
.ac__hit{ font-weight:600; color: var(--fg-heading, #F5F1E8) }
.ac__sub{ font-size: var(--fs-s, .875rem); color: var(--fg-muted, rgba(245,241,232,.62)); overflow-wrap:anywhere }

/* Kein Treffer: kurzer Hinweis statt stumm geschlossener Liste */
.ac__none{ padding:12px 16px; font-size: var(--fs-s, .875rem); color: var(--fg-muted, rgba(245,241,232,.62)) }
.ac__none[hidden]{ display:none }

/* Pflicht-Attribution (Google): "Google Maps", Roboto/serifenlos, 12 px, weiss auf dunkel */
.ac__attr{
  padding:6px 16px 8px; border-top:1px solid var(--line, rgba(232,213,163,.18));
  text-align:right; font:400 12px/1.2 Roboto, Arial, sans-serif; color:#FFFFFF;
}

/* Nur fuer Screenreader (Statusbereich, Trenner zwischen Name und Ort) */
.ac__sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Hinweis "Bitte noch Strasse oder Hotel angeben." nach der Wahl von "Wien" */
.field__hint--places{ color: var(--fg, #F5F1E8) }

/* Startseite: die Kurzkarte liegt im Hero (overflow:hidden). Solange die Liste offen ist,
   darf sie ueber den Hero hinausragen und liegt ueber dem naechsten Abschnitt. Das Bild
   bleibt ueber .hero__media beschnitten. */
.hero:has(.ac:not([hidden])){ overflow:visible; z-index:3 }

@media (forced-colors: active){
  .ac{ border-color: CanvasText }
  .ac__opt[aria-selected="true"]{ outline:2px solid Highlight; outline-offset:-2px }
}

@media print{ .ac{ display:none !important } }