/* VORSCHLAG.CSS – eigene Vorschlagsliste für <input list> (assets/vorschlag.js) */
.vs-liste {
  position: fixed; z-index: 3000;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper, #fff); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--nacht-950, #000) 16%, transparent),
              0 2px 6px color-mix(in srgb, var(--nacht-950, #000) 8%, transparent);
  animation: vs-auf .12s ease-out;
}
.vs-liste.is-oben { transform: translateY(-100%); animation-name: vs-auf-oben; }
@keyframes vs-auf { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes vs-auf-oben { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

.vs-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 8px 12px;
  font-size: 15px; line-height: 1.3; cursor: pointer;
  border-radius: 8px;
}
.vs-option.is-aktiv { background: var(--surface); }
.vs-option.is-gewaehlt { background: var(--accent-tint); }
.vs-option.is-gewaehlt.is-aktiv { background: color-mix(in srgb, var(--pal-gold) 22%, var(--paper, #fff)); }
.vs-text { display: flex; flex-direction: column; min-width: 0; }
.vs-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-text b { font-weight: 700; color: var(--pal-gold-dunkel); }
.vs-text small { font-size: 12.5px; color: var(--ink-soft); }
.vs-haken { font-size: 18px; color: var(--pal-gold-mittel); flex: none; }
.dark-mode .vs-text b { color: var(--pal-gold); }
@media (pointer: coarse) { .vs-option { min-height: 46px; font-size: 16px; } }