{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "faq-seite-suche",
 "name": "FAQ-Seite mit Suche",
 "name_en": "FAQ page with search, topics and deep links",
 "kurz": "Eine ganze FAQ-Seite: Suchfeld mit Treffermarkierung per Custom Highlight, Themen als Filter mit Zahl, exklusives Akkordeon aus details mit name, Direktlink je Frage, Rückruf mit dem Suchwort bei null Treffern und FAQPage-JSON-LD nur auf Wunsch.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "ruhig",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "details-name",
  "css-highlight-api",
  "json-ld"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine eigene Seite für häufige Fragen. Oben ein Suchfeld, darunter Themen als Filter mit Trefferzahl. Die Fragen stehen als Akkordeon aus details und summary, je Thema mit name, sodass nur eine Antwort offen ist. Jede Frage hat eine eigene Adresse (#frage-…), die sie öffnet; ein Knopf kopiert den Link. Treffer werden im Text markiert. Gibt es keinen Treffer, nennt die Seite Telefon und Rückruf statt einer leeren Liste. FAQPage-JSON-LD gibt es nur, wo es Sinn ergibt.",
  "warum_es_wirkt": "Angehörige, Patient:innen oder Kund:innen kommen mit einer konkreten Frage. Eine Suche mit Markierung findet sie schneller als Scrollen durch zwanzig Einträge. Direktlinks lassen sich im Telefonat oder per E-Mail weitergeben („Schauen Sie unter Kosten nach“). Der Weg zum Menschen am Ende fängt alles auf, was die Seite nicht beantwortet.",
  "wann_einsetzen": "Ab etwa acht Fragen in mehreren Themen: Pflege, Praxis, Fahrschule, Kurs, Fitness, Apotheke, IT-Dienstleister, Umzug. Als eigene Seite zusätzlich zu kurzen FAQ-Blöcken auf den Leistungsseiten.",
  "wann_nicht": "Nicht bei drei bis fünf Fragen: dann reicht akkordeon-hoehe-auto auf der Leistungsseite. Nicht als Ablage für Inhalte, die eine eigene Seite verdienen (Kosten, Ablauf). FAQPage-JSON-LD nicht als Trick für Rich Results: Google zeigt FAQ-Ergebnisse seit August 2023 nur noch für bekannte Behörden- und Gesundheitsseiten; Markup muss genau dem sichtbaren Text entsprechen.",
  "varianten": [
   "Ausführlich: Suche, Themen-Filter mit Zahl, Direktlinks, Treffermarkierung, Rückruf bei null Treffern",
   "Kurz: wenige Fragen ohne Suche, nur Themen als Sprunglinks",
   "Mit „Antwort geändert am“ für Fragen zu Kosten und Fristen"
  ],
  "umsetzung": "Fragen als details mit summary in Abschnitten je Thema; alle details eines Themas tragen dasselbe name (exklusives Akkordeon). Während einer Suche wird name entfernt, damit mehrere Treffer offen stehen dürfen. Jede Frage hat eine id; beim Laden und bei hashchange öffnet die passende details, scrollt mit scroll-margin-top und setzt den Fokus auf summary. Ein kleiner Knopf je Antwort kopiert location mit #id (navigator.clipboard, Rückmeldung in aria-live). Suche: input type=search mit 120 ms Entprellung, Umlaute und ß normalisiert, alle Wörter müssen vorkommen; Treffer öffnen sich bis zu drei, Zahl in aria-live=polite, Wert in ?q= per history.replaceState. Markierung über CSS Custom Highlight API (CSS.highlights, ::highlight) ohne DOM-Eingriff, ohne Unterstützung ohne Markierung. Themen als Knöpfe mit aria-pressed und Zahl. Null Treffer: eigener Zustand mit Telefon, Rückruf und dem Suchwort als Formulartext. Die Browser-Suche findet geschlossene details-Inhalte in Chromium und öffnet sie. JSON-LD FAQPage nur aus dem sichtbaren Text erzeugen und nur, wenn die Seite wirklich Fragen und Antworten des Betriebs enthält.",
  "mobil": "Suchfeld groß oben, Themen als umbrechende Knopfreihe. Fragen in voller Breite mit großen Tippzielen (mindestens 56 px). Link-kopieren-Knopf sichtbar in der offenen Antwort. Telefon am Ende als großer Knopf.",
  "reduzierte_bewegung": "Antworten öffnen und schließen ohne Übergang, Sprünge ohne weiches Scrollen.",
  "barrierefreiheit": "summary ist der native Knopf, keine eigene Rolle nötig. Suchfeld mit sichtbarem Label, Trefferzahl per aria-live. Themen-Knöpfe mit aria-pressed. Markierung nicht nur über Farbe (zusätzlich Unterstreichung im ::highlight). Nach einem Direktlink liegt der Fokus auf der Frage. Null-Treffer-Zustand als Text mit Ausweg."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
  "dauer_ms": "150 Hover, 300 Antwort öffnen, 200 schließen; Fokusring ohne Übergang",
  "stagger_ms": "",
  "distanz": "keine Bewegung über 8px, keine Skalierung",
  "sonstiges": "Werte aus dem Rezept pflege-dienst-naehe (token-toggle-asymmetrisch).",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept pflege-dienst-naehe"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Search Engine Land: Google reduces the visibility of HowTo and FAQ rich results in search",
   "url": "https://searchengineland.com/google-reduces-the-visibility-of-howto-and-faq-rich-results-in-search-430452",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026, Bericht zum Google-Blogbeitrag vom August 2023: FAQ-Rich-Results nur noch für „well-known, authoritative government and health websites“, für alle anderen nicht mehr regelmäßig. Die Auswahl erfolgt automatisch.",
   "art": "artikel"
  },
  {
   "seite": "specification.website: Hidden until found",
   "url": "https://specification.website/spec/accessibility/hidden-until-found.md",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026, Stand 31.05.2026: details/summary bevorzugen; für eigene Aufklapp-Bausteine hidden=\"until-found\", damit die Browser-Suche verborgenen Text findet, beforematch öffnet das Panel. content-visibility: hidden in CSS ersetzt das Attribut nicht.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "specification.website: Hidden until found",
   "url": "https://specification.website/spec/accessibility/hidden-until-found.md"
  },
  {
   "titel": "Google Search Central: FAQ (FAQPage) structured data",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/faqpage"
  }
 ],
 "kombinierbar_mit": [
  "akkordeon-hoehe-auto",
  "leistungsseite-antwort-zuerst",
  "fehlerseite-leerzustand",
  "kontakt-anfrage-formular",
  "sprunglinks-landmarken",
  "command-palette-und-ki-suche"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Die Recherche Runde 4 nennt den internen Befund (akkordeon-hoehe-auto hat eine Variante faq, aber keine Seite mit Themenfilter, Null-Treffer-Zustand und Kopf und Fuß) und Custom Highlights aus Interop 2026. Abgrenzung: akkordeon-hoehe-auto zeigt die Technik der Höhe, diese Seite das Gerüst.",
   "Der Google-Blogbeitrag selbst lieferte beim Abruf keinen Text; die Aussage stammt aus Search Engine Land (abgerufen 04.11.2026). Vor Einsatz im Original prüfen.",
   "Pflege: Beträge der Pflegekasse und Rechtsfragen nur mit Quelle und Stand, vom Kunden prüfen lassen. Die Demo zeigt Beträge als Platzhalter."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine ganze FAQ-Seite: Suchfeld mit Treffermarkierung per Custom Highlight, Themen als Filter mit Zahl, exklusives Akkordeon aus details mit name, Direktlink je Frage, Rückruf mit dem Suchwort bei null Treffern und FAQPage-JSON-LD nur auf Wunsch.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
   "dauer_ms": "150 Hover, 300 Antwort auf, 200 zu (::details-content block-size mit interpolate-size: allow-keywords), Plus zu Minus 300/200, Fokusring ohne Übergang",
   "suche": "input type=search, 120 ms entprellt, Umlaute auf Grundbuchstaben (gleiche Länge), einfache Stammform ab 5 Zeichen (−en, −er, −es, −et, −e, −n, −s), alle Wörter müssen vorkommen, Thema zählt mit; bis zu 3 Treffer offen (wenn höchstens 6); ?q= per replaceState; / fokussiert, Esc leert",
   "markierung": "CSS.highlights „faq-treffer“, ::highlight #FFE08A mit Unterstreichung 2 px Pflaume; ohne API keine Markierung",
   "exklusiv": "name je Thema, während der Suche entfernt",
   "direktlink": "#frage-id öffnet, scrollt (scroll-margin-top 180 px unter der klebenden Suche), Fokus auf summary, Antwort blinkt 1200 ms #FFF1CC",
   "null_treffer": "eigener Zustand mit vier Vorschlägen und Rückruf-Formular, Frage mit dem Suchwort vorbelegt, Fehler als Satz",
   "groessen": "Text 20 px (Telefon 19), Knöpfe 56 px, summary mindestens 64 px",
   "vorfuehrung": "„Kosten“ tippen (90 ms je Zeichen), Thema Kosten, zurück, „Hund“ (null Treffer), Direktlink Wochenende; Schleife ca. 12 s"
  },
  "ausloeser": "klick",
  "touch": "Suche nicht klebend, Themen als waagerecht wischbare Reihe, Fragen in voller Breite, Link-Knopf in der offenen Antwort sichtbar, Anrufen als großer Knopf am Ende.",
  "reduziert": "Antworten öffnen und schließen ohne Übergang, Direktlinks springen, kein Blinken.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept pflege-dienst-naehe, erfundener ambulanter Dienst Pflege Weidenhof in Neumarkt in der Oberpfalz (Pflegedienstleitung Nadine Gebhardt). Literata und Hanken Grotesk 20 px, Pflaume für Überschriften und Fuß, Sonnengelb nur für Anrufen und Anfragen. 18 Fragen in vier Themen, einfache Sprache mit Fachwort in Klammern; Beträge, Fristen und Stand als markierte Platzhalter (vom Kunden mit Quelle eintragen). Abgrenzung zu akkordeon-hoehe-auto (Technik der Höhe): hier das Seitengerüst mit Kopf, Fuß, Filter, Null-Treffer und Rückruf. JSON-LD FAQPage im Pult zuschaltbar (auch ?ld) mit Hinweis auf die Einschränkung seit August 2023. Selbsturteil 4.",
  "varianten": [
   {
    "id": "suche",
    "name": "Mit Suche",
    "wann": "Ab etwa acht Fragen in mehreren Themen: Pflege, Praxis, Fahrschule, Kurs, IT-Dienstleister.",
    "werte": {
     "fragen": 18,
     "themen": "Filterknöpfe mit Zahl, aria-pressed",
     "suche": "klebend unter dem Kopf"
    }
   },
   {
    "id": "kurz",
    "name": "Kurz",
    "wann": "Kleine Betriebe mit fünf bis acht Fragen: ohne Suche, Themen als Sprunglinks.",
    "werte": {
     "fragen": 6,
     "themen": "Sprunglinks statt Filter",
     "suche": "ausgeblendet"
    }
   }
  ]
 }
}