/*
 * Schnellsuche (Paket S): Overlay als <dialog>. Farben aus den Tokens von Paket R, Rückfallwerte nur bis tokens.css da ist.
 */
.hv-suche {
  --s-text: var(--farbe-text, #1f1a14);
  --s-gedaempft: var(--farbe-text-leise, #5f564a);
  --s-flaeche: var(--farbe-flaeche, #fffdf8);
  --s-papier: var(--farbe-papier, #f7f3ea);
  --s-linie: var(--farbe-linie, #d6ccb6);
  --s-akzent: var(--farbe-akzent, #7a2e1f);
  --s-akzent-text: var(--farbe-akzent-text, #ffffff);
  --s-fokus: var(--farbe-fokus, #1b5fa6);
  --s-markiert: var(--farbe-markiert, #f3dd8c);
  --s-radius: var(--radius, 8px);

  box-sizing: border-box; position: fixed; inset: 8vh auto auto 50%; transform: translateX(-50%);
  width: min(40rem, calc(100vw - 2rem)); max-height: 82vh; margin: 0; padding: 0; overflow: hidden;
  display: none; flex-direction: column;
  color: var(--s-text); background: var(--s-flaeche); border: 1px solid var(--s-linie); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  overscroll-behavior: contain;
}
.hv-suche[open] { display: flex; }
.hv-suche::backdrop { background: rgba(20, 15, 10, .5); }
.hv-suche-offen { overflow: hidden; }
.hv-suche-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.hv-suche-lese {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hv-suche-kopf { display: flex; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--s-linie); }
.hv-suche-feld {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: .5rem .85rem; font: inherit; font-size: 1.15rem;
  color: var(--s-text); background: var(--s-papier); border: 2px solid var(--s-linie); border-radius: var(--s-radius);
}
.hv-suche-feld:focus { outline: 2px solid var(--s-fokus); outline-offset: 1px; border-color: var(--s-fokus); }   /* Rahmen plus Linie: die Randfarbe allein ist kaum zu sehen */
.hv-suche-zu {
  flex: 0 0 auto; min-height: 48px; min-width: 44px; padding: 0 .9rem; font: inherit; cursor: pointer;
  color: var(--s-text); background: transparent; border: 1px solid var(--s-linie); border-radius: var(--s-radius);
}
.hv-suche-zu:focus-visible { outline: 3px solid var(--s-fokus); outline-offset: 2px; }
/* Handy: der Hinweis „Ort, Name, Jahr oder Thema" war am rechten Rand abgeschnitten; etwas kleiner (nicht unter 16 px), schmaleres
   Polster, bei sehr großer Schrift mit Auslassungspunkten */
@media (max-width: 30em) {
  .hv-suche-feld { padding-inline: .6rem; text-overflow: ellipsis; }
  .hv-suche-feld::placeholder { font-size: .9rem; }
  .hv-suche-zu { padding-inline: .6rem; }
}
.hv-suche-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.hv-suche-liste:empty { display: none; }
.hv-suche-treffer { margin: 0; }
.hv-suche-link {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name typ' 'kurz kurz'; gap: .1rem .75rem; align-items: baseline;
  min-height: 48px; padding: .6rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--s-linie);
}
.hv-suche-treffer[aria-selected="true"] .hv-suche-link { background: var(--s-papier); box-shadow: inset 4px 0 0 var(--s-akzent); }
.hv-suche-name { grid-area: name; font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.hv-suche-typ { grid-area: typ; font-size: var(--t-klein); letter-spacing: .06em; text-transform: uppercase; color: var(--s-gedaempft); }
.hv-suche-kurz { grid-area: kurz; font-size: var(--t-klein); color: var(--s-gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-suche mark { background: var(--s-markiert); color: var(--auf-markierung, inherit); border-radius: 2px; padding: 0 .1em; }
.hv-suche-status { margin: 0; padding: .6rem 1rem; font-size: var(--t-klein); color: var(--s-gedaempft); }
.hv-suche-fuss { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; padding: .4rem 1rem .75rem; border-top: 1px solid var(--s-linie); font-size: var(--t-klein); }
.hv-suche-weg { display: inline-flex; align-items: center; min-height: 44px; color: var(--s-akzent); font-weight: 600; }
.hv-suche-weg:focus-visible { outline: 3px solid var(--s-fokus); outline-offset: 2px; }
.hv-suche-tasten { margin-left: auto; color: var(--s-gedaempft); }

@media (max-width: 600px) {
  .hv-suche { inset: 0 auto auto 0; transform: none; width: 100vw; max-width: none; max-height: var(--sicht-h, 100dvh); height: auto; border-radius: 0 0 12px 12px; border-top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .hv-suche-kopf { padding-left: max(.75rem, env(safe-area-inset-left, 0px)); padding-right: max(.75rem, env(safe-area-inset-right, 0px)); }
  .hv-suche-tasten { display: none; }
  /* die Trefferliste endet über der Bildschirmtastatur (handy.js setzt --sicht-h, solange sie offen ist) */
  .hv-suche-liste { max-height: min(55dvh, calc(var(--sicht-h, 100dvh) - 9rem - env(safe-area-inset-top, 0px))); }
}
@media (hover: none) { .hv-suche-tasten { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-bewegung="ruhig"]) .hv-suche[open] { animation: hv-suche-ein .16s ease-out; }
  html:not([data-bewegung="ruhig"]) .hv-suche[open]::backdrop { animation: hv-suche-schleier .16s ease-out; }
}
@keyframes hv-suche-ein { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes hv-suche-schleier { from { opacity: 0; } to { opacity: 1; } }

/* Welle 2 (Idee 22): Treffer ohne Lage und der Knopf „Treffer auf der Karte zeigen" */
.hv-suche-ohneort { text-transform: none; letter-spacing: 0; font-style: italic; }
.hv-suche-karte { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.hv-suche-karte[hidden] { display: none; }