{
"$schema": "../../schema.json",
"schema": "fundus/1",
"id": "testimonials-neu-gedacht",
"name": "Testimonials neu gedacht",
"name_en": "Reimagined testimonials",
"kurz": "Ein Kundenzitat als große Schlagzeile, zeilenweise aus der Maske enthüllt, dazu Kundenliste mit Hover-Zitat und eine Masonry-Wand.",
"kategorie": "Hero & Section-Layouts",
"kategorie_slug": "hero-layouts",
"kategorie_nr": 4,
"bau_chat": "C2",
"prioritaet": "B",
"trendstatus": "aufsteigend",
"belegstatus": "belegt",
"website_belege": 2,
"stimmung": [
"editorial",
"präzise",
"warm"
],
"stimmung_roh": [
"vertrauenswürdig",
"editorial",
"warm"
],
"technik": [
"css",
"grid-lanes",
"gsap",
"splittext",
"scroll-driven-css"
],
"technik_gruppen": [
"css",
"gsap"
],
"leistungskosten": "niedrig",
"steckbrief": {
"beschreibung": "Statt Slider mit Sternchen und Stockfoto steht ein einzelnes, konkretes Zitat als großer Editorial-Satz da. Name, Ort und Kontext klein darunter, Produkt oder Porträt sparsam daneben. Mehrere Stimmen erscheinen als typografische Kundenliste mit Zitat bei Hover, als Notizzettel beim Scrollen oder als Wand aus unterschiedlich großen Karten. Beim Wechsel fährt das Zitat zeilenweise ein. Jedes Zitat verlinkt auf das zugehörige Produkt oder die Case Study.",
"warum_es_wirkt": "Ein groß gesetztes, konkretes Zitat liest sich wie eine Schlagzeile. Details wie Ort, Dauer und ein messbares Ergebnis machen es glaubwürdiger als zehn allgemeine Lobeshymnen.",
"wann_einsetzen": "Dienstleister, Studios, Freelancer und Shops mit echten, konkreten Kundenstimmen. Gut für Bewertungsbereiche in Mode- und Beauty-Shops.",
"wann_nicht": "Bei erfundenen oder austauschbaren Zitaten. Nicht als Auto-Slider ohne Steuerung.",
"varianten": [
"Ein großes Editorial-Zitat mit Vor/Zurück",
"Kundenliste mit Zitat bei Hover oder Fokus",
"Masonry-Wand (display: grid-lanes mit Fallback)",
"Notizzettel-Zitate, die beim Scrollen auftauchen",
"Eigene Testimonial-Unterseite",
"Stimmen-Reihe: echte Stimmen unterschiedlicher Länge als Wischreihe, die Höhe folgt der aktiven Stimme; Name, Ort, Datum und Quelle, keine Sterne, Echtheitshinweis direkt darunter"
],
"umsetzung": "Zitat als
…
…. Großes Zitat mit hängendem Anführungszeichen (hanging-punctuation in Safari oder negativer text-indent in der ersten Zeile). Zeilen-Enthüllung: Text in Zeilen teilen, jede Zeile in eine Maske mit overflow: clip, dann yPercent 105 → 0 mit power3.out, 600–900 ms, 60–100 ms Versatz. Wand: display: grid-lanes (Safari 26.4) mit Fallback über CSS columns oder display: grid. Notizzettel: absolut positionierte Karten mit ScrollTrigger oder Scroll-getriggerten CSS-Animationen.",
"mobil": "Ein Zitat pro Bildschirm, Wechsel per Wischen oder Pfeiltasten. In der Liste steht das Zitat über den Namen, Tippen ersetzt Hover. Die Wand wird einspaltig.",
"reduzierte_bewegung": "Kein Auto-Wechsel, keine Zeilen- oder Kartenbewegung. Zitate wechseln nur auf Wunsch mit kurzer Einblendung.",
"barrierefreiheit": "Keine automatisch rotierenden Slider ohne Pause. Zitat und Quelle semantisch in figure und figcaption verbinden. Listeneinträge sind Buttons mit aria-pressed und reagieren auch auf Fokus. Der Zitatbereich ist eine aria-live-Region (polite), Pfeiltasten wechseln das Zitat."
},
"messwerte": {
"easing": "power3.out",
"dauer_ms": "600–900 pro Zitat-Wechsel",
"stagger_ms": "60–100 pro Zeile",
"distanz": "",
"sonstiges": "Zitat-Schriftgröße 3–6vw (clamp)",
"herkunft": "typisch",
"quelle": ""
},
"kurve": {
"bezier": [
0.25,
1,
0.5,
1
],
"css": "cubic-bezier(0.25, 1, 0.5, 1)",
"name": "power3.out",
"dauer_ms": 600
},
"gesehen_bei": [
{
"seite": "Vendredi Society",
"url": "https://vendredi-society.com/",
"auszeichnung": "",
"beobachtung": "Live geprüft (HTML): #homeTestimonial als ziehbare Schiene (.c-testimonials_rail, data-rail-draggable, data-rail-speed 0.5) mit eigenem \"Drag\"-Cursor.",
"art": "website"
},
{
"seite": "Cuberto",
"url": "https://cuberto.com/",
"auszeichnung": "",
"beobachtung": "Live geprüft (HTML): .testimonials mit großen Zitaten (.testimonial__quotes, __text, __divider).",
"art": "website",
"browser_gemessen": true
}
],
"tutorials": [
{
"titel": "Manuel Matuzović – Progressively enhancing Grid Lanes (06/2026)",
"url": "https://matuzo.at/blog/2026/grid-lanes-progressive-enhancement"
}
],
"kombinierbar_mit": [
"editorial-magazin-layout",
"case-study-geruest",
"marquee-laufband"
],
"urls": {
"detail": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/",
"meta": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/meta.json",
"demo": "https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo"
},
"herkunft": {
"quelldateien": [
"layouts.json",
"patch-belege-3.json",
"patch-luecken-a.json"
],
"pruefnotizen": [
"patch-belege-3.json: Zwei Produktionsbelege; Awwwards-Inspirationen entfernt.",
"patch-luecken-a.json: Browserstand für die Masonry-Wand präzisieren: Stand 31.10.2026 (caniuse-Daten) unterstützen nur Safari/iOS ab 26.4 display: grid-lanes stabil; Chrome/Edge bis 159 und Firefox nur hinter Flag. Fallback (display: grid vor grid-lanes bzw. @supports mit reading-flow) ist Pflicht. Details und Belege im neuen Muster masonry-grid-lanes-galerie."
],
"kategorie_alt": "Section-Layout"
},
"bau": {
"status": "fertig",
"kurz": "Ein Kundenzitat als große Schlagzeile, zeilenweise aus der Maske enthüllt, dazu Kundenliste mit Hover-Zitat und eine Masonry-Wand.",
"demo": true,
"abhaengigkeiten": [
"gsap@3.15.0"
],
"werte": {
"easing": "power3.out = cubic-bezier(0.25, 1, 0.5, 1)",
"zitat_zeilen_dauer_ms": 800,
"zitat_zeilen_stagger_ms": 80,
"zitat_weg": "yPercent 105 → 0, je Zeile eine Maske mit overflow: clip",
"zitat_abgang": "yPercent 0 → -105, 300 ms, power2.in, stagger 30 ms",
"quelle_einblenden": "opacity 0 → 1, y 8 px → 0, 600 ms, power3.out, Verzögerung 350 ms",
"liste_zeilen_dauer_ms": 700,
"liste_zeilen_stagger_ms": 60,
"liste_namen_ui_ms": 200,
"liste_pfeil": "translateX -10 px → 0, 300 ms",
"produktbild": "altes Bild opacity → 0 in 300 ms, neues opacity → 1 in 1000 ms (120 ms verzögert), Kurve wie oben",
"wand_karten_dauer_ms": 800,
"wand_karten_stagger_ms": 80,
"wand_karten_weg_px": 24,
"wand_layout": "display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap 14px. Fallback: columns: 4 230px, column-gap 14px, break-inside: avoid",
"zitat_schrift": "Zalando Sans wght 300, font-stretch 125%, clamp(28px, 4.6vw, 72px), line-height 1.05, letter-spacing -0.01em; Betonung EB Garamond Italic 1.1em",
"haengendes_anfuehrungszeichen": "text-indent -0.52em nur in der ersten Zeile",
"liste_zitat_schrift": "Zalando Sans wght 300, font-stretch 112%, clamp(22px, 2.3vw, 36px), line-height 1.14",
"labels": "Fragment Mono 11px versal, letter-spacing 0.06em, tabular-nums",
"farben": "#f6f3ee Grund, #121010 Text, #ebe7e0 Karten, #cecdc6 Linien, #6a6359 Meta",
"wischen_schwelle_px": 48,
"vorfuehrung_takt_s": "Zitat 3,4 / 3,2 / 3,2, Liste 4 × 1,9 bis 2,2, Wand 4,2"
},
"ausloeser": "klick",
"touch": "Zitat: Pfeiltasten oder Wischen (ab 48 px). Liste: Tippen auf einen Namen zeigt das Zitat, das Zitatfeld steht über der Liste. Wand wird einspaltig, die Produktkarte zweispaltig klein. Reihe: Wischen mit Scroll-Snap, Stimmen 88 % breit, die nächste ist angeschnitten; Angaben unter dem Zitat untereinander.",
"reduziert": "Kein Auto-Wechsel, keine Zeilen- und Kartenbewegung. Zitate wechseln nur per Klick mit 200 ms Einblendung, die Wand steht sofort. Reihe: Höhe und Reihe springen ohne Übergang, kein weiches Scrollen.",
"korrekturen": {
"beschreibung": "Statt Slider mit Sternchen und Stockfoto steht ein einzelnes, konkretes Zitat als großer Editorial-Satz da. Name, Ort und Kontext klein darunter, Produkt oder Porträt sparsam daneben. Mehrere Stimmen erscheinen als typografische Kundenliste mit Zitat bei Hover, als Notizzettel beim Scrollen oder als Wand aus unterschiedlich großen Karten. Beim Wechsel fährt das Zitat zeilenweise ein. Jedes Zitat verlinkt auf das zugehörige Produkt oder die Case Study.",
"warum_es_wirkt": "Ein groß gesetztes, konkretes Zitat liest sich wie eine Schlagzeile. Details wie Ort, Dauer und ein messbares Ergebnis machen es glaubwürdiger als zehn allgemeine Lobeshymnen.",
"wann_einsetzen": "Dienstleister, Studios, Freelancer und Shops mit echten, konkreten Kundenstimmen. Gut für Bewertungsbereiche in Mode- und Beauty-Shops.",
"wann_nicht": "Bei erfundenen oder austauschbaren Zitaten. Nicht als Auto-Slider ohne Steuerung.",
"varianten": [
"Ein großes Editorial-Zitat mit Vor/Zurück",
"Kundenliste mit Zitat bei Hover oder Fokus",
"Masonry-Wand (display: grid-lanes mit Fallback)",
"Notizzettel-Zitate, die beim Scrollen auftauchen",
"Eigene Testimonial-Unterseite",
"Stimmen-Reihe: echte Stimmen unterschiedlicher Länge als Wischreihe, die Höhe folgt der aktiven Stimme; Name, Ort, Datum und Quelle, keine Sterne, Echtheitshinweis direkt darunter"
],
"umsetzung": "Zitat als
…
…. Großes Zitat mit hängendem Anführungszeichen (hanging-punctuation in Safari oder negativer text-indent in der ersten Zeile). Zeilen-Enthüllung: Text in Zeilen teilen, jede Zeile in eine Maske mit overflow: clip, dann yPercent 105 → 0 mit power3.out, 600–900 ms, 60–100 ms Versatz. Wand: display: grid-lanes (Safari 26.4) mit Fallback über CSS columns oder display: grid. Notizzettel: absolut positionierte Karten mit ScrollTrigger oder Scroll-getriggerten CSS-Animationen.",
"mobil": "Ein Zitat pro Bildschirm, Wechsel per Wischen oder Pfeiltasten. In der Liste steht das Zitat über den Namen, Tippen ersetzt Hover. Die Wand wird einspaltig.",
"reduzierte_bewegung": "Kein Auto-Wechsel, keine Zeilen- oder Kartenbewegung. Zitate wechseln nur auf Wunsch mit kurzer Einblendung.",
"barrierefreiheit": "Keine automatisch rotierenden Slider ohne Pause. Zitat und Quelle semantisch in figure und figcaption verbinden. Listeneinträge sind Buttons mit aria-pressed und reagieren auch auf Fokus. Der Zitatbereich ist eine aria-live-Region (polite), Pfeiltasten wechseln das Zitat."
},
"geprueft": "03.11.2026",
"notiz": "Welt aus Rezept mode-beauty-kollektion: RUESS, erfundene Hautpflege aus Luzern (Schweizer Schreibweise, «» als Anführungszeichen). Zalando Sans für alles, Fragment Mono für Labels und Formeln, EB Garamond Italic (neu in assets/fonts, fontsource) als zweite Stimme für die Betonung. Produktbilder als eigene SVG-Flakons auf einheitlicher 4:5-Off-White-Fläche, Formelzeile wie bei Typology. Drei Varianten per Umschalter: Zitat, Liste, Wand. Zeilenteilung selbst geschrieben statt SplitText, weil SplitText die Zeilen bei hängendem Einzug falsch erkannte. Die Wand nutzt grid-lanes, wo verfügbar, sonst CSS columns (Werte-Zeile zeigt, was greift). AD-Review 01.11.2026: Note 5. Kundin Selin Arslan in Nalan Arslan umbenannt (Vorname Selin stand schon in team-ueber-mich-layout). Varianten 01.11.2026: Die drei Ansichten sind jetzt Varianten nach Regel 13 (?v=zitat|liste|wand, Umschalter oben rechts schreibt die URL). vorfuehren() spielt nur die gewählte Variante: Zitat blättert durch alle fünf Stimmen, Liste fährt sechs Namen ab, Wand baut sich alle 4,6 s neu auf. Zugang 02.11.2026: --meta #8c857b → #6a6359 (5,4:1); Zeilen der Zitatmaske ohne white-space: nowrap (gemessene Zeilen bleiben einzeilig, bei Textabständen 1.4.12 bricht die Zeile in ihrer Maske um statt abgeschnitten zu werden); Pfeil-SVGs aria-hidden; Kontrastmodus-Rahmen für Knöpfe. Varianten 03.11.2026: stimmen-reihe (?v=stimmen-reihe, Rezept praxis-gesundheit-ruhig): erfundene Physiotherapie an der Ilmenau in Lüneburg, fünf Stimmen unterschiedlicher Länge als Scroll-Snap-Reihe, das Fenster nimmt die gemessene Höhe der aktiven Stimme an (400 ms). Mit Name, Ort, Datum und Quelle, ohne Sterne; Echtheitshinweis zu Rückmeldekarten und Google-Bewertungen direkt an der Reihe. Patientenstimmen nach Leitfaden 8a: nur echt, sachlich, freigegeben, ohne Heilversprechen; Texte vom Kunden prüfen lassen. Kopfzeile bricht auf dem Telefon jetzt um (vier Varianten-Knöpfe). Selbsturteil 4.",
"varianten": [
{
"id": "zitat",
"name": "Ein großes Zitat",
"wann": "Wenige, sehr konkrete Stimmen mit Produkt oder Projekt daneben: Freelancer, Kanzlei, Praxis, Immobilien, Hotel. Eine Stimme pro Bildschirm, gelesen wie eine Schlagzeile.",
"werte": {
"aufbau": "Zitat links (max. 16,5em), Produktkachel 4:5 rechts (minmax(200px, 23vw)), Vor/Zurück mit Zähler",
"zitat_schrift": "clamp(28px, 4.6vw, 72px), line-height 1.05, hängendes « über text-indent -0.52em",
"zeilen": "yPercent 105 → 0, 800 ms, Versatz 80 ms, power3.out",
"abgang": "yPercent 0 → -105, 300 ms, power2.in, Versatz 30 ms",
"quelle": "opacity 0 → 1, y 8 px → 0, 600 ms, 350 ms verzögert",
"bedienung": "Pfeilknöpfe 44 px, Pfeiltasten, Wischen ab 48 px",
"vorfuehrung": "fünf Zitate im Takt 3,4 / 3,2 s"
}
},
{
"id": "liste",
"name": "Kundenliste mit Hover-Zitat",
"wann": "Viele namentliche Stimmen, die man durchsehen will: Shop, Studio, SaaS, Kurs. Die Namen stehen als typografische Liste, das Zitat erscheint bei Hover, Fokus oder Tippen.",
"werte": {
"aufbau": "Liste 1.15fr links, Zitatfeld 1fr rechts (Telefon: Zitat über der Liste)",
"namen": "clamp(22px, 2.5vw, 38px), inaktive Namen #aaa398, Farbwechsel 200 ms",
"pfeil": "translateX -10 px → 0, 300 ms",
"zitat_schrift": "clamp(22px, 2.3vw, 36px), line-height 1.14, Mindesthöhe 5.7em gegen Springen",
"zeilen": "yPercent 105 → 0, 700 ms, Versatz 60 ms, power3.out",
"ausloeser": "pointerenter (nur Maus), focus, click; Knöpfe mit aria-pressed",
"vorfuehrung": "gedachter Zeiger über sechs Namen, je 1,9 s"
}
},
{
"id": "wand",
"name": "Masonry-Wand",
"wann": "Viele kurze Stimmen auf einen Blick, gemischt mit Kennzahl und Produkt: Fahrschule, Kurs, Verein, Hotel, Beauty-Shop. Statisch lesbar, ohne Klick.",
"werte": {
"layout": "display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap 14px. Fallback columns: 4 230px, break-inside: avoid",
"karten": "opacity 0 → 1, y 24 px → 0, 800 ms, Versatz 80 ms, power3.out",
"kurze_zitate": "unter 78 Zeichen größer: clamp(22px, 1.9vw, 28px), font-stretch 125%",
"kennzahl": "dunkle Karte, clamp(48px, 5vw, 76px), tabular-nums",
"telefon": "eine Spalte",
"vorfuehrung": "Aufbau alle 4,6 s neu"
}
},
{
"id": "stimmen-reihe",
"name": "Stimmen-Reihe mit Höhe der aktiven Stimme",
"knopf": "Reihe",
"wann": "Praxis, Kanzlei, Handwerk: wenige echte Stimmen sehr unterschiedlicher Länge, nüchtern mit Name, Ort, Datum und Quelle. Die Seite springt nicht, weil das Fenster die Höhe der gerade gezeigten Stimme annimmt.",
"werte": {
"rezept": "praxis-gesundheit-ruhig",
"welt": "Physiotherapie an der Ilmenau, Lüneburg; fünf Stimmen von 13 bis 52 Wörtern, Quellen Rückmeldekarte und Google-Bewertung",
"reihe": "display flex, align-items flex-start, overflow-x auto, overflow-y hidden, scroll-snap-type x mandatory, scroll-snap-align start, scroll-snap-stop always; Stimme min(640px, 82 %), Telefon 88 %; Abstandhalter ::after am Ende, damit die letzte Stimme links einrastet",
"hoehe": "Fenster = offsetHeight der aktiven Stimme, transition height 400 ms cubic-bezier(0.2, 0, 0.38, 0.9); beim Klick wechselt die Höhe sofort mit, beim Wischen sobald eine andere Stimme vorn liegt; ResizeObserver misst bei neuer Breite oder Textabständen neu",
"warum_js": "interpolate-size: allow-keywords hilft hier nicht: height auto ergäbe die höchste Stimme der Reihe, nicht die aktive (wie Embla Auto Height und Flickity adaptiveHeight wird gemessen)",
"angaben": "Name, Ort, Datum als time, Quelle; keine Sterne, kein Durchschnitt, keine anonymen Zitate (Leitfaden C8)",
"echtheit": "Hinweis direkt unter der Reihe: Rückmeldekarten schriftlich freigegeben und ungekürzt, Google-Bewertungen ungeprüft, Auswahl die fünf jüngsten; Inhalte sachlich ohne Heilversprechen und Erfolgsquoten (Leitfaden 8a, HWG; vom Kunden prüfen lassen)",
"schrift": "Zitat Hedvig Letters Serif clamp(1.25rem, 1rem + .8vw, 1.625rem)/1.4, opsz 24; Angaben Google Sans Flex .9375rem; Karte #E2E0DE, Radius 16 px",
"bedienung": "Pfeile 44 px (Schleife), ← → mit Fokus auf der Reihe, Wischen; aria-live polite meldet „n von 5: Name“",
"vorfuehrung": "Takt 2600 ms über alle fünf Stimmen"
}
}
]
}
}