{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bewertungen-verteilung",
 "name": "Bewertungen mit Sternverteilung",
 "name_en": "Reviews with rating distribution, star filters and owner replies",
 "kurz": "Durchschnitt und Sternverteilung, deren Balken die Liste filtern, mit Reiseart, Sortierung, Antwort des Hauses und sichtbarem Echtheitshinweis.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "ruhig",
  "vertrauenswürdig",
  "warm"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "intl"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Bewertungs-Sektion für die eigene Website. Oben steht der Durchschnitt mit der Verteilung als waagerechte Balken von 5 bis 1 Stern. Jeder Balken ist ein Filter: Ein Klick zeigt nur diese Bewertungen, ein zweiter Klick hebt den Filter wieder auf. Dazu kommen eine Sortierung, die Trefferzahl und eine Zeile mit den aktiven Filtern. Unter einzelnen Bewertungen steht die Antwort des Hauses. Direkt bei den Bewertungen steht, ob und wie geprüft wird, dass sie von echten Gästen oder Kunden stammen.",
  "warum_es_wirkt": "Die Verteilung gibt Kritik ihren Platz: Zwei schlechte Bewertungen unter vielen guten wirken ehrlich statt bedrohlich. Wer gezielt nach Schwächen sucht, findet sie mit einem Klick. Antworten des Hauses zeigen, dass jemand zuhört.",
  "wann_einsetzen": "Hotel, Ferienwohnung, Restaurant, Praxis, Handwerk, Produktseiten in Shops: überall, wo eigene Bewertungen auf der Website stehen sollen.",
  "wann_nicht": "Bei fünf oder weniger Bewertungen: dann ohne Verteilung, nur die Stimmen zeigen. Wenn die Bewertungen nur von Google oder einer Plattform kommen und nicht gespiegelt werden dürfen: dann verlinken. Nicht als Ersatz für ein großes Zitat im Marken-Teil der Seite (dafür testimonials-neu-gedacht).",
  "varianten": [
   "Verteilung seitlich, Liste daneben (Hotel, Praxis)",
   "Verteilung als schmales Band über der Liste (Produktseite im Shop)",
   "Zusätzlich Filter nach Reiseart oder Kundentyp",
   "Teilnoten (Zimmer, Frühstück, Lage) als kleine Werte unter dem Durchschnitt",
   "Weitere Bewertungen per Knopf nachladen statt Seitennummern"
  ],
  "umsetzung": "Bewertungen als Daten vom Server oder Bewertungsdienst. Verteilung als Liste von <button aria-pressed> mit Anzahl; Balkenbreite als CSS-Wert --anteil (transform: scaleX). Ein Sternfilter zur Zeit, zweiter Klick hebt ihn auf; Balken mit 0 Treffern sind deaktiviert. Die Verteilung rechnet mit der gewählten Reiseart neu, so stimmen Balken und Trefferzahl immer überein. Sortierung als natives <select>. Trefferzahl und aktive Filter als Chips mit × in einem role=\"status\"-Bereich. Liste als <ol> mit <article> je Bewertung, Sterne mit role=\"img\" und aria-label „4 von 5 Sternen“. Antwort des Hauses als <details> (Desktop offen, Telefon zu). Echtheitshinweis direkt unter der Verteilung, nicht hinter einem Klick. Zustände: Leerzustand mit „Filter lösen“, weniger als 6 Bewertungen ohne Verteilung, Fehler mit „Erneut versuchen“ und Skelett beim Laden.",
  "mobil": "Verteilung über der Liste, Balken volle Breite mit mindestens 44 px Höhe. Sortierung und Filter-Zeile darunter. Antworten des Hauses eingeklappt bis „Antwort lesen“.",
  "reduzierte_bewegung": "Balken springen auf die neue Breite, die Liste erscheint ohne Versatz.",
  "barrierefreiheit": "Balken sind echte Knöpfe mit aria-pressed und vollständiger Beschriftung („3 Sterne: 2 Bewertungen“). Sterne nie nur als Grafik: Text „4 von 5 Sternen“. Trefferzahl in role=\"status\" (WCAG 4.1.3). Farbe nicht allein (1.4.1): Auswahl auch über Rahmen und Häkchen. Sortierung als natives select. Fokus bleibt nach dem Filtern auf dem Balken."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
  "dauer_ms": "200 (Balkenbreite, Farbe), 250 (Liste blendet ein)",
  "stagger_ms": "30",
  "distanz": "Listeneinträge 6 px",
  "sonstiges": "UI-Tempo aus dem Rezept boutique-hotel-gastgeber (Buchungsstrecke 150 bis 250 ms); Baymard: Filter einzeln, Verteilung ab mehr als 5 Bewertungen",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept boutique-hotel-gastgeber, Baymard"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.2, 1)",
  "name": "Material Standard",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Baymard Institute: Ratings Distribution Summary",
   "url": "https://baymard.com/research-articles/user-ratings-distribution-summary",
   "auszeichnung": "",
   "beobachtung": "Fünf Anforderungen: Balkendiagramm, Balken als Filter klickbar, standardmäßig sichtbar, Filter einzeln wählbar wie Radio-Knöpfe, bei fünf oder weniger Bewertungen ausblenden (Empfehlung). 90 % der Testpersonen, die bestimmte Sterne suchten, klickten auf die Balken; nur 61 % der Seiten mit Verteilung machen sie klickbar. 53 % suchten gezielt negative Bewertungen.",
   "art": "artikel"
  },
  {
   "seite": "INFORMS / Marketing Science (Proserpio, Zervas)",
   "url": "https://www.informs.org/News-Room/INFORMS-Releases/News-Releases/Want-to-improve-your-business-s-online-ratings-Make-sure-to-respond-to-reviews",
   "auszeichnung": "",
   "beobachtung": "Hotels, die auf Bewertungen antworten, bekamen rund 12 % mehr Bewertungen und im Schnitt 0,12 Sterne mehr. Negative Bewertungen wurden seltener, aber länger und ausführlicher. Datengrundlage: Hotelbewertungen bei TripAdvisor.",
   "art": "artikel"
  },
  {
   "seite": "IT-Recht Kanzlei: FAQ Informationspflicht zur Echtheit von Kundenbewertungen",
   "url": "https://www.it-recht-kanzlei.de/faq-informationspflicht-echtheit-kundenbewertungen.html",
   "auszeichnung": "",
   "beobachtung": "§ 5b Abs. 3 UWG: Wer Bewertungen zugänglich macht, muss informieren, ob und wie er sicherstellt, dass sie von Verbrauchern stammen, die das Produkt genutzt oder gekauft haben. Hinweis im unmittelbaren Sichtzusammenhang mit den Bewertungen, auch bei Widgets. Findet keine Prüfung statt, ist auch das anzugeben.",
   "art": "artikel"
  },
  {
   "seite": "onlinemarktplatz.de: OLG Frankfurt bestätigt Hinweispflicht",
   "url": "https://onlinemarktplatz.de/270958/kundenbewertungen-im-shop/",
   "auszeichnung": "",
   "beobachtung": "OLG Frankfurt, Beschluss vom 19.05.2026 (6 U 305/25): Ein Hinweis, versteckt in einem aufklappbaren Bereich „Wettbewerbsrechtliche Hinweise“, reichte nicht. Der Hinweis gehört sichtbar zu den Bewertungen, ohne Extra-Klick.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Baymard: 5 Requirements for the Ratings Distribution Summary",
   "url": "https://baymard.com/research-articles/user-ratings-distribution-summary"
  },
  {
   "titel": "IT-Recht Kanzlei: FAQ Echtheit von Kundenbewertungen",
   "url": "https://www.it-recht-kanzlei.de/faq-informationspflicht-echtheit-kundenbewertungen.html"
  }
 ],
 "kombinierbar_mit": [
  "testimonials-neu-gedacht",
  "token-toggle-asymmetrisch",
  "gleitender-indikator",
  "tabellenziffern",
  "zahlen-odometer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Belege sind Studien und Rechtsartikel; eine Produktionsseite mit gemessenen Werten fehlt noch. Bewegungswerte sind eigene Festlegung nach Rezept.",
   "Rechtliches: Der Echtheitshinweis in der Demo ist ein Textbaustein. In Deutschland gilt § 5b Abs. 3 UWG; in der Schweiz und Österreich gelten eigene Regeln. Wortlaut immer vom Kunden rechtlich prüfen lassen.",
   "„Echte Bewertungen“ oder „verifiziert“ nur schreiben, wenn jede Bewertung tatsächlich geprüft wird (UWG Anhang Nr. 23b laut IT-Recht Kanzlei)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Durchschnitt und Sternverteilung, deren Balken die Liste filtern, mit Reiseart, Sortierung, Antwort des Hauses und sichtbarem Echtheitshinweis.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.4, 0, 0.2, 1) (UI-Tempo der Buchungsstrecke im Rezept)",
   "dauer_balken_ms": 200,
   "dauer_liste_ms": 250,
   "dauer_farbe_ms": 150,
   "stagger_ms": 30,
   "distanz": "Listeneinträge translate 0 6px → 0, dazu opacity 0 → 1",
   "zahl_zaehlen_ms": 200,
   "balken": "transform: scaleX(var(--anteil)), Höhe 8 px, Spur #E6DFD4, Füllung #6E5A47, nicht gewählte Balken bei aktivem Filter #B8AA9A",
   "seite": "5 Bewertungen, „Weitere 5 anzeigen“ mit 350 ms Ladezustand",
   "verteilung_ab": "6 Bewertungen (Baymard: bei 5 oder weniger keine Verteilung)",
   "zahlformat": "Intl.NumberFormat('de-CH', 1 Nachkommastelle) → 4.2; für deutsche Seiten 'de-DE' → 4,2",
   "schrift": "Newsreader opsz 300–400 (Durchschnitt 88 px, Titel), Mona Sans wdth 118 % Versal-Labels +0.07em, Fließtext Mona Sans 16 px / 1.62",
   "farben": "#F3EEE7 Grund, #FEF2E3 Creme (Echtheitshinweis, aktiver Balken), #3E3A37 Text, #66645F Meta, #6E5A47 Holz"
  },
  "ausloeser": "klick",
  "touch": "Balken mit 12 px Innenabstand (über 44 px hoch), Reiseart-Chips und Hilfreich-Knopf größer, kein Hover-Zustand. Unter 640 px sind die Antworten des Hauses eingeklappt („Antwort des Hauses“ öffnet sie), die Zusammenfassung steht über der Liste.",
  "reduziert": "Balken springen auf die neue Breite, der Durchschnitt wechselt ohne Zählen, die Liste erscheint ohne Versatz und ohne Staffel, das Skelett glänzt nicht.",
  "korrekturen": {
   "umsetzung": "Bewertungen als Daten vom Server oder Bewertungsdienst. Verteilung als Liste von <button aria-pressed> mit Anzahl; Balkenbreite als CSS-Wert --anteil (transform: scaleX). Ein Sternfilter zur Zeit, zweiter Klick hebt ihn auf; Balken mit 0 Treffern sind deaktiviert. Die Verteilung rechnet mit der gewählten Reiseart neu, so stimmen Balken und Trefferzahl immer überein. Sortierung als natives <select>. Trefferzahl und aktive Filter als Chips mit × in einem role=\"status\"-Bereich. Liste als <ol> mit <article> je Bewertung, Sterne mit role=\"img\" und aria-label „4 von 5 Sternen“. Antwort des Hauses als <details> (Desktop offen, Telefon zu). Echtheitshinweis direkt unter der Verteilung, nicht hinter einem Klick. Zustände: Leerzustand mit „Filter lösen“, weniger als 6 Bewertungen ohne Verteilung, Fehler mit „Erneut versuchen“ und Skelett beim Laden."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept boutique-hotel-gastgeber, erfundenes Haus Zwirn an der Spisergasse in St. Gallen (Gastgeberin Ladina Caduff, Zimmer nach Sticharten benannt, Spitzenborte als SVG-Ornament). Schweizer Schreibweise ohne ß, Zahlen und Monate per Intl mit de-CH. 18 erfundene Bewertungen, sichtbar als „Beispieldaten · erfunden“ markiert; Echtheitshinweis als Textbaustein mit Vermerk „vom Kunden rechtlich prüfen lassen“ (in Deutschland § 5b Abs. 3 UWG, OLG Frankfurt 6 U 305/25: sichtbar bei den Bewertungen). Pult: Variante Seitlich/Band und Zustand 18 Stimmen / Nur 4 / Dienst aus. Vorführung: 1 Stern (Kritik mit Antwort), Reiseart Familie (Leerzustand), Filter lösen, 5 Sterne, alle Reisearten, kritischste zuerst. Quellen: baymard.com, informs.org, it-recht-kanzlei.de, onlinemarktplatz.de. AD-Review 02.11.2026: Note 4. Zugang 02.11.2026: Einzelne Stern-SVGs aria-hidden (Name trägt die Gruppe role=img „n von 5 Sternen“); Pult-Labels Alpha .6 → .7; Kontrastmodus-Rahmen für Knöpfe.",
  "varianten": [
   {
    "id": "seitlich",
    "name": "Verteilung seitlich",
    "wann": "Hotel, Praxis, Handwerk: Bewertungen sind eine eigene Sektion, die Zusammenfassung bleibt beim Lesen sichtbar.",
    "werte": {
     "layout": "Zwei Spalten minmax(290px, 360px) + Liste, Zusammenfassung position: sticky; top: 24px",
     "liste": "einspaltig, Meta-Spalte 150 px links"
    }
   },
   {
    "id": "band",
    "name": "Verteilung als Band",
    "wann": "Produktseite im Shop (mode, d2c) oder Restaurant: Bewertungen unter dem Produkt, volle Breite, kurze Texte.",
    "werte": {
     "layout": "Zusammenfassung dreispaltig (Durchschnitt und Teilnoten | Balken | Echtheitshinweis), nicht sticky",
     "liste": "zweispaltig, Spaltenabstand 48 px, Meta unter dem Text"
    }
   }
  ]
 }
}