/* Fokus-Modus der Startseite H (geführte Suche je Anliegen): Rückfrage als Karten, Wo-Frage, Filterleiste mit
   „Alle … anzeigen“, drei kompakte Vorschläge ohne Scrollen.
   Die Blase selbst sieht aus wie FrankKIs Sprechblase (.fk-blase), die Vorschläge wie seine Trefferliste. */
.h-fokus { display: none; flex-direction: column; gap: 12px; overflow-y: auto; }
.fz-satz { margin: 0; }
.fz-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.fz-wahl .fz-art { min-height: 38px; }
.fz-wahl .fz-art[data-fz-art='alle'] { border-style: dashed; }
.fz-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fz-leiste:empty { display: none; }
.fz-leiste .fz-alle { margin-left: auto; min-height: 38px; }
.fz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--gold); color: var(--nacht); font: 700 0.8125rem/1 var(--sans); }
.fz-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(14, 26, 43, 0.15); color: var(--nacht); font-size: 0.875rem; cursor: pointer; }
.fz-treffer { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fz-treffer:empty { display: none; }
.fz-treffer > li.fz-ziel { position: relative; display: grid; grid-template-columns: 26px 104px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--linie); border-radius: 16px; background: rgba(233, 238, 246, 0.04); animation: fk-auftauchen 0.3s ease-out backwards; }
.fz-treffer > li.fz-ziel:nth-child(2) { animation-delay: 0.06s; }
.fz-treffer > li.fz-ziel:nth-child(3) { animation-delay: 0.12s; }
.fz-bild { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #1B2D47; color: var(--moos); }
.fz-bild img, .fz-bild > div, .fz-bild svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-text { display: grid; gap: 3px; min-width: 0; }
.fz-text strong { font: 650 1rem/1.25 var(--display); }
.fz-meta { font-size: 0.8125rem; color: var(--leise); }
.fz-meta b { color: var(--gold); font-weight: 700; }
.fz-kurz { font-size: 0.8125rem; line-height: 1.4; color: var(--leise); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fz-quelle { font-size: 0.6875rem; color: #8392A8; }
@media (prefers-reduced-motion: reduce) { .fz-treffer > li.fz-ziel { animation: none; } }
.fz-zahl { display: none; }
/* Vor der Wahl: die Rückfrage als große Karten mit der Zahl passender Ziele */
.fz-ohne-wahl .fz-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.fz-ohne-wahl .fz-wahl .fz-art { display: grid; align-content: center; justify-items: start; gap: 4px; min-height: 84px; padding: 12px 16px; border-radius: 16px; text-align: left; }
.fz-ohne-wahl .fz-art-name { font: 650 1.0625rem/1.2 var(--display); }
.fz-ohne-wahl .fz-zahl { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--leise); }
/* Zweite kurze Frage vor der Wahl: wohin (gewählter oder erkannter Ort oder ganz Oberfranken) */
.fz-wo { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linie); }
.fz-ohne-wahl .fz-wo { display: flex; }
.fz-wo-frage { margin-right: 6px; font-weight: 600; color: var(--leise); }
/* Suchleiste unten in der Blase: doch etwas anderes fragen */
.fz-eingabe { margin-top: auto; padding: 5px 5px 5px 16px; }
.fz-eingabe input { flex: 1; min-width: 0; margin: 8px 0; border: 0; outline: 0; background: transparent; color: #121417; font: 400 0.9375rem/1.4 var(--sans); }
.fz-art.leer { opacity: 0.45; }
/* Bleibt beim Scrollen durch die Vorschläge am unteren Rand der Blase stehen */
.fz-eingabe { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 24px rgba(14, 26, 43, 0.55); }
/* Nach der Wahl: kompakt, damit alles ohne Scrollen passt; Suchleiste nur vor der Wahl */
.h-fokus:not(.fz-ohne-wahl) .fz-eingabe { display: none; }
.h-fokus:not(.fz-ohne-wahl) .fz-wahl { gap: 6px; }
.h-fokus:not(.fz-ohne-wahl) .fz-wahl .fz-art { min-height: 30px; padding: 0 11px; font-size: 0.8125rem; }
.h-fokus:not(.fz-ohne-wahl) { gap: 10px; overflow-y: hidden; }
.h-fokus:not(.fz-ohne-wahl) .fz-treffer { gap: 8px; }
.h-fokus:not(.fz-ohne-wahl) .fz-treffer > li.fz-ziel { grid-template-columns: 24px 84px minmax(0, 1fr) auto; gap: 10px; padding: 8px 8px 8px 10px; }
.h-fokus:not(.fz-ohne-wahl) .fz-kurz { -webkit-line-clamp: 1; }
.h-fokus:not(.fz-ohne-wahl) .fz-text strong { font-size: 0.9375rem; }
/* Präzisieren in einem Satz: nur nach der Wahl, füllt den Platz unter den drei Vorschlägen */
.fz-genauer { display: none; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linie); }
.h-fokus:not(.fz-ohne-wahl) .fz-genauer { display: grid; }
.fz-genauer-frage { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--leise); }
.fz-genauer-frage .fk-name { padding: 3px 10px 3px 8px; font-size: 0.75rem; }
.fz-genauer .fk-eingabe { padding: 3px 3px 3px 16px; }
.fz-genauer .senden { width: 36px; height: 36px; }
.fz-genauer input { flex: 1; min-width: 0; margin: 6px 0; border: 0; outline: 0; background: transparent; color: #121417; font: 400 0.9375rem/1.4 var(--sans); }
.fz-genauer input::placeholder { color: #6B7280; }