{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "leistungsseite-antwort-zuerst",
 "name": "Leistungsseite: Antwort zuerst",
 "name_en": "Service detail page, answer first",
 "kurz": "Eine Leistungsseite, die mit der Antwort beginnt: Leistung und Ort als H1, darunter in drei Sätzen was, für wen, Preis, Dauer und Gebiet, danach Ablauf, Preise, Beispiel, Fragen, Ansprechperson und eine Handlung.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "sachlich",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "svg",
  "json-ld"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Vorlage für die Unterseite einer einzelnen Leistung, etwa „Dachfenster tauschen in Lemgo“ oder „Professionelle Zahnreinigung in Lemgo“. Die H1 nennt Leistung und Ort. Direkt darunter steht die Antwort in zwei bis drei Sätzen: was, für wen, Preisrahmen, Dauer, Einzugsgebiet. Es folgen Ablauf, Preise mit ab-Preis, ein Beispiel (vorher/nachher oder Referenz), Fragen als echte Zwischenüberschriften, eine Ansprechperson mit Foto und genau eine Handlung (Anfrage, Termin oder Anruf). Brotkrumen, das Datum der letzten Prüfung und Verweise auf verwandte Leistungen gehören fest dazu. Das Gerüst ist fest, die Gestaltung kommt aus dem jeweiligen Rezept.",
  "warum_es_wirkt": "Wer über Google oder eine KI-Suche auf einer Leistungsseite landet, hat eine konkrete Frage. Die Antwort steht in den ersten Zeilen, der Rest belegt sie. Beschreibende Überschriften helfen beim Überfliegen und machen die Seite als Antwortbaustein brauchbar. Ort, Preisrahmen und Prüfdatum schaffen Vertrauen, die eine Handlung am Ende verhindert Entscheidungsstau.",
  "wann_einsetzen": "Für jede Leistung, die eine eigene Unterseite verdient: Handwerk, Praxis, Kanzlei, Fahrschule, Immobilien (Verkaufen, Bewerten), Kurse, Friseur, Fitness, Pflege, Kfz. Spätestens ab fünf Leistungen, die auf der Startseite nur als Akkordeon stehen.",
  "wann_nicht": "Für Projekte und Referenzen (dafür case-study-geruest). Für Leistungen ohne belastbare Angaben zu Preis oder Dauer nur, wenn statt Zahlen ehrlich gesagt wird, wovon sie abhängen. Nicht als Massenware mit getauschtem Ortsnamen für zwanzig Nachbarorte.",
  "varianten": [
   "Handwerk: Leistung mit ab-Preis, Einsatztag und Einzugsgebiet, Beispiel als Vorher/Nachher",
   "Praxis: Behandlung in Alltagssprache, Selbstzahler-Preis, Dauer der Sitzung, Kassenfrage als Zwischenüberschrift",
   "Kanzlei oder Beratung: Erstgespräch mit festem Preis, Ablauf in Schritten, Fristen als Frage",
   "Kurs oder Fahrschule: Kursleistung mit Terminen, Dauer in Stunden, Voraussetzungen als Frage"
  ],
  "umsetzung": "Eine Seitenvorlage mit festen Blöcken in fester Reihenfolge: Brotkrumen als <nav aria-label=\"Brotkrumen\"> mit <ol> und aria-current=\"page\", H1 „Leistung in Ort“, Antwort als erster Absatz (2–3 Sätze, Zahlen als Text), daneben eine <dl> mit Preis ab, Dauer, Einzugsgebiet und Zielgruppe. Danach Sprungliste, Ablauf als <ol>, Preise als Tabelle mit ab-Preisen und Stand, Beispiel als <figure> mit Ort und Jahr, Fragen als <h3> mit Antwortabsatz (nicht im Akkordeon versteckt), Ansprechperson mit Foto, Rolle und Durchwahl, eine primäre Handlung, verwandte Leistungen als Linkliste. Prüfdatum als <time datetime> mit Namen der prüfenden Person. Alle Werte stammen aus einem Datensatz je Leistung, aus dem auch JSON-LD (BreadcrumbList, Service mit areaServed und Offer) entsteht, damit Markup und sichtbarer Text nicht auseinanderlaufen. FAQ-Markup bringt seit Mai 2026 keine Rich Results mehr und ist verzichtbar. Bei Praxen kein Vorher/Nachher von Behandlungsergebnissen (Heilmittelwerbung), stattdessen den Ablauf eines Termins zeigen. Preisangaben, Gesundheitsaussagen und Förderhinweise vom Kunden prüfen lassen.",
  "mobil": "Einspaltig in derselben Reihenfolge: Antwort und Faktenliste vor jedem Bild. Eine feste Leiste unten mit „Anrufen“ und der einen Handlung. Preistabelle als Liste, Sprungliste waagerecht umbrechend, kein seitliches Scrollen.",
  "reduzierte_bewegung": "Keine Bewegung nötig. Markierungen und Wechsel erscheinen ohne Übergang, Sprunglinks springen ohne weiches Scrollen.",
  "barrierefreiheit": "Eine H1, beschreibende H2 und Fragen als H3 ergeben eine Gliederung, die Screenreader als Überschriftenliste anbieten. Brotkrumen als nav mit aria-current=\"page\". Preise und Dauer als Text, nicht nur als Grafik. Telefon als tel:-Link mit sichtbarer Nummer. Prüfdatum als <time>. Kontrast mindestens 4,5 : 1, Signalfarbe nur mit dunkler Schrift."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
  "dauer_ms": "150 Farbe und Fokus, 240 Markierung, 280 Wechsel der Branche",
  "stagger_ms": "",
  "distanz": "Einblendung höchstens 8 px",
  "sonstiges": "Gerüst fest, Token aus dem Rezept: Kurve und Dauern aus handwerk-werkstatt-klartext (Holzrausch .15s, thermondo .28s), bei Praxis cubic-bezier(0.2, 0, 0.38, 0.9)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezepte handwerk-werkstatt-klartext und praxis-gesundheit-ruhig"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.2, 1)",
  "name": "Material Standard",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Aroundhome: Dachfenster austauschen",
   "url": "https://www.aroundhome.de/dachfenster/austausch/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: Brotkrumen, H1 „Dachfenster austauschen“, direkt darunter der Preisrahmen pro Stück, Autorin und „Aktualisiert am“-Datum, Sprungliste und H2-Überschriften überwiegend als Fragen („Was kostet es, ein Dachfenster austauschen zu lassen?“). Dauer des Austauschs im Kostenabschnitt. Ein Vermittlungsportal, kein Betrieb: Ansprechperson und Einzugsgebiet fehlen.",
   "art": "website"
  },
  {
   "seite": "sellwerk: Google KI-Modus und KMU",
   "url": "https://sellwerk.de/wissenswert/google-ki-modus",
   "auszeichnung": "",
   "beobachtung": "Artikel vom 06.05.2026: Inhalte sollen als direkte Antwortbausteine funktionieren, Leistungen genau beschrieben und der Standort auf der Website klar und konsistent genannt werden. Ein Thema lieber umfassend und zusammenhängend abdecken und intern verlinken.",
   "art": "artikel"
  },
  {
   "seite": "Lovart: Web Design Trends 2027",
   "url": "https://www.lovart.ai/blog/web-design-trends-2027",
   "auszeichnung": "",
   "beobachtung": "Artikel vom 19.10.2026, Punkt 12 „Plain language and reduced cognitive load“: der erste Absatz unter einer Überschrift bringt die Kernaussage, Überschriften beschreiben den Inhalt statt witziger Formulierungen.",
   "art": "artikel"
  },
  {
   "seite": "Google Search Central: AI features and your website",
   "url": "https://developers.google.com/search/docs/appearance/ai-features",
   "auszeichnung": "",
   "beobachtung": "Stand 10.12.2025: keine Zusatzanforderungen für AI Overviews und AI Mode, keine KI-Textdateien nötig. Strukturierte Daten sollen zum sichtbaren Text passen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "WAI-ARIA APG: Breadcrumb Pattern",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb"
  },
  {
   "titel": "Google Search Central: Breadcrumb (BreadcrumbList) structured data",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/breadcrumb"
  },
  {
   "titel": "Google Search Central: AI features and your website",
   "url": "https://developers.google.com/search/docs/appearance/ai-features"
  }
 ],
 "kombinierbar_mit": [
  "prozess-timeline-wachsende-linie",
  "vorher-nachher-vergleichsregler",
  "kostenrechner-konfigurator",
  "mehrschritt-anfrage",
  "termin-buchung-zwei-klick",
  "mobile-bottom-navigation",
  "lesesatz-text-wrap",
  "tabellenziffern"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Lücken-Recherche 02.11.2026 (N4)"
  ],
  "pruefnotizen": [
   "Lücken-Recherche 02.11.2026 (N4): Leistungen stehen in 15 Rezepten nur als Akkordeon auf der Startseite, eine Vorlage für die Unterseite fehlt.",
   "Aufbau „Antwort zuerst“ bei einem Vermittlungsportal geprüft (aroundhome.de, 02.11.2026). Beleg von einer Betriebs-Website mit vollständigem Gerüst (Ansprechperson, Einzugsgebiet, Prüfdatum) fehlt noch.",
   "Preise, Dauer und Förderung in der Demo sind Beispielwerte, keine Marktdaten."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Leistungsseite, die mit der Antwort beginnt: Leistung und Ort als H1, darunter in drei Sätzen was, für wen, Preis, Dauer und Gebiet, danach Ablauf, Preise, Beispiel, Fragen, Ansprechperson und eine Handlung.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.4, 0, 0.2, 1) (Handwerk) · cubic-bezier(0.2, 0, 0.38, 0.9) (Praxis)",
   "dauer_ui_ms": 150,
   "markierung": "Satzteil: background-size 0 % → 100 % bei 46 % Höhe, 240 ms; Faktenzeile: Balken links scaleY 0 → 1, 240 ms",
   "wechsel_ms": "280 (Farben beim Branchenwechsel)",
   "sprunglinks": "weiches Scrollen 700 ms per rAF mit derselben Kurve, Ziel 8 px über dem Block, Fokus auf die H2",
   "raster": "Einstieg 1.36fr / .96fr, Blöcke .82fr / 2fr mit H2 sticky top 20 px; einspaltig unter 900 px",
   "antwort": "18 bis 21 px, Zeilenhöhe 1.55, höchstens 62ch; fünf Teile (was, wer, preis, dauer, gebiet) als span[data-teil], Faktenliste mit gleichen Schlüsseln",
   "mobil_leiste": "unter 760 px fest unten: Anrufen (tel:) und eine Handlung, Höhe 48 px",
   "vorfuehrung": "fünf Satzteile im Abstand 950 ms markieren, Gerüst einblenden, fünf Blöcke je 900 ms anfahren und 2100 ms halten, zurück 1100 ms"
  },
  "ausloeser": "laden",
  "touch": "Einspaltig in derselben Reihenfolge, Antwort und Fakten vor jedem Bild. Feste Leiste unten mit „Anrufen“ und der einen Handlung. Preistabelle wird zur Liste, Fragen einspaltig, Brotkrumen und Sprungliste brechen um. Die Hover-Verknüpfung von Fakt und Satzteil entfällt ohne Zeiger.",
  "reduziert": "Markierungen erscheinen ohne Übergang, Sprunglinks springen ohne weiches Scrollen, die Vorführung springt von Block zu Block.",
  "korrekturen": {},
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept handwerk-werkstatt-klartext, erfundener Betrieb Dachwerk Begatal (Dachdeckermeister Jannes Kesting) aus Lemgo, Leistung „Dachfenster tauschen“. Zweite Branche über ?v=praxis mit den Token aus praxis-gesundheit-ruhig: Zahnarztpraxis Lindenhaus, „Professionelle Zahnreinigung“; dort statt Vorher/Nachher die Aufteilung einer Stunde (Heilmittelwerbung). Gerüst und Reihenfolge bleiben gleich, nur Token und Inhalte wechseln. Pult: Branche, „Gerüst zeigen“ (nummerierte Bausteine), „JSON-LD zeigen“ (BreadcrumbList und Service aus demselben Datensatz wie der sichtbare Text, auch als script im Dokument). Fakt und Satzteil markieren sich gegenseitig beim Überfahren. Porträts und Dachfenster als eigene SVG-Zeichnungen, im Einsatz echte Fotos. Preise sind Beispielwerte. Referenzen: aroundhome.de (Preis unter der H1, Fragen als H2, Aktualisierungsdatum), sellwerk.de, lovart.ai. AD-Review 02.11.2026: Note 4.",
  "varianten": [
   {
    "id": "handwerk",
    "name": "Handwerk",
    "wann": "Handwerksbetriebe mit Festpreis nach Aufmaß: ab-Preis, Einsatztag, Einzugsgebiet in km, Beispiel als Vorher/Nachher mit Ort und Jahr.",
    "werte": {
     "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
     "schriften": "Special Gothic 700 (H1, H2, Preise), Labels Special Gothic 75 % Breite versal +0.04em, Text Atkinson Hyperlegible Next 17 px",
     "farben": "#EFEDEA Grund, #F7F6F3 Faktenkarte mit 4 px Oberkante #1A1A1A, Signal #FB6100 mit Schrift #1A1A1A, Markierung #FDB98A",
     "ecken": "0 px",
     "beispiel": "zwei SVG-Ansichten Vorher/Nachher plus Steckbrief (Fenster, Einbau, Preis, Ort)"
    }
   },
   {
    "id": "praxis",
    "name": "Praxis",
    "wann": "Arzt-, Zahnarzt- und Therapiepraxen: Behandlung in Alltagssprache, Selbstzahler-Preis, Dauer der Sitzung, Kassenfrage als Zwischenüberschrift, kein Vorher/Nachher.",
    "werte": {
     "easing": "cubic-bezier(0.2, 0, 0.38, 0.9)",
     "schriften": "Hedvig Letters Serif 400 (H1, H2, Preise), Text und Labels Google Sans Flex, Labels ohne Versalien 14 px",
     "farben": "#F5F7F7 Grund, #FFFFFF Faktenkarte, Marke und Handlung #005450 mit weißer Schrift, Markierung #FFD99A",
     "ecken": "14 px Karten, Knöpfe rund",
     "beispiel": "Aufteilung eines 60-Minuten-Termins als Balken aus fünf Abschnitten (flex nach Minuten)"
    }
   }
  ]
 }
}
