{
"$schema": "../../schema.json",
"schema": "fundus/1",
"id": "logo-wand-social-proof",
"name": "Logo-Wand / Social-Proof-Band",
"name_en": "Logo wall / customer logo band",
"kurz": "Kundenlogos eines Hamburger Studios unter dem Hero: als ziehbares Laufband, als Raster mit gestaffelt umklappenden Kacheln oder als Haarlinien-Raster mit Kennzahl beim Hover.",
"kategorie": "Hero & Section-Layouts",
"kategorie_slug": "hero-layouts",
"kategorie_nr": 4,
"bau_chat": "C2",
"prioritaet": "A",
"trendstatus": "etabliert",
"belegstatus": "belegt",
"website_belege": 2,
"stimmung": [
"ruhig",
"präzise"
],
"stimmung_roh": [
"sachlich",
"funktional",
"präzise",
"ruhig"
],
"technik": [
"css",
"vanilla-js",
"svg"
],
"technik_gruppen": [
"css",
"js",
"canvas"
],
"leistungskosten": "niedrig",
"steckbrief": {
"beschreibung": "Direkt unter dem Hero steht ein Band oder Raster mit Kunden- und Partnerlogos. Die Logos sind einfarbig (Graustufe oder Textfarbe), darüber steht ein kurzer Satz wie „Vertraut von …“. Bewegung ist ruhig oder fehlt ganz: ein endloses Laufband, das sich auch ziehen lässt, oder ein festes Raster, in dem die Kacheln in Abständen auf das nächste Logo umklappen. Beim Hover bekommt das Logo seine Markenfarbe, die anderen treten zurück. Jedes Logo verlinkt auf die passende Fallstudie.",
"warum_es_wirkt": "Fremde Marken leihen Vertrauen, bevor der Besucher eine Zeile Text gelesen hat. Ein Raster mit Umklapp-Wechsel zeigt viele Logos auf wenig Fläche, ohne dass etwas ständig läuft. Verlinkte Logos machen aus Dekoration einen Weg zu den Referenzen.",
"wann_einsetzen": "B2B-, SaaS- und Agenturseiten, Portfolios von Freelancern mit bekannten Kunden und Template-Startseiten. Der Platz eignet sich auch für „Bekannt aus“, Partner, Zertifikate, Verbände und Förderer.",
"wann_nicht": "Mit weniger als etwa 5 Logos. Mit unbekannten Logos ohne Bezug zum Angebot. Mit Logos ohne Nutzungserlaubnis. Als dritte Laufband-Zeile auf derselben Seite. Mit farbigen Original-Logos in voller Sättigung, die das Layout zerreißen. Keine selbst gestalteten Siegel mit Umwelt-, Bio-, Regional- oder Sozialaussage: Eigensiegel ohne Zertifizierungssystem sind seit 27.09.2026 unzulässig (UWG Anhang Nr. 2a), vom Kunden prüfen lassen. Auszeichnungen nur als Preis eines Vergebers mit Wettbewerb und Jahr; echte Siegel mit Nachweis zeigt die Variante „Siegel mit Nachweis“.",
"varianten": [
"Laufband mit Haarlinien, per Ziehen greifbar (cursor: grab), Logos verlinkt (Stripe)",
"Festes Raster mit 4/6/8 Spalten, Kacheln klappen gestaffelt per rotateX auf das nächste Logo (Cursor)",
"Statisches Raster mit Haarlinien-Rahmen, zeitlos und ohne JS",
"Hover gibt dem Logo die Markenfarbe, Nachbarn dimmen (passt zu graustufen-zu-farbe und nachbarn-reagieren-hover)",
"Logo plus Kennzahl oder Kurzzitat beim Hover",
"Ruhiges Raster: Logos in natürlicher Breite, zentriert, Reihen per flex-wrap: balance gleich lang (Chrome 150), sonst per Messung",
"Auszeichnungen mit Jahr: Jahreszahl, Grafik des Vergebers, Titel, Wettbewerb oder Guide mit Jahr, neueste zuerst (Gastro, Kanzlei); keine Eigensiegel mit Umwelt- oder Sozialaussage",
"Siegel mit Nachweis: je Zeichen Träger, Art, Zertifikatsnummer, Gültigkeit und Link zu den Kriterien als dl, Logo nur Begleitung; ohne vollständige Daten erscheint das Zeichen nicht"
],
"umsetzung": "Markup: . Logos als SVG mit fill: currentColor, damit eine Farbe für alle gilt und der Hover nur color ändert (300 ms cubic-bezier(.25, 1, .5, 1)). Feste Kachelbreite (Stripe: 172px) statt Logobreite, optischer Ausgleich über die Höhe je Logo. Laufband: Liste doppelt rendern (zweite Kopie aria-hidden=\"true\", Links mit tabindex=\"-1\"), per CSS @keyframes von translateX(0) auf translateX(-50%), linear, 30 bis 60 s, Hover pausiert (animation-play-state). Mit Ziehen besser per requestAnimationFrame und Pointer Events. Klapp-Raster: pro Kachel Vorder- und Rückseite, .flipped { transform: rotateX(180deg) } mit 600 ms ease-in-out, gestaffelt um 160 ms, alle 5 s; danach die Logos ohne Übergang tauschen und zurücksetzen. Logos nur mit Freigabe des Kunden zeigen.",
"mobil": "Raster auf 4 Spalten und weniger Logos (Cursor blendet ab Kachel 5 aus). Das Laufband bleibt, läuft aber langsamer. Tippen statt Hover.",
"reduzierte_bewegung": "Laufband anhalten oder als statisches Raster zeigen. Kein Umklappen (so macht es Cursor). Farbwechsel beim Hover ohne Übergang.",
"barrierefreiheit": "Jedes Logo braucht einen Namen (alt oder aria-label mit dem Firmennamen). Die doppelte Laufband-Kopie ist aria-hidden und enthält keine Fokusziele. Ein bewegtes Band muss sich anhalten lassen (WCAG 2.2.2); Pause beim Hover reicht auf Touch nicht, also einen sichtbaren Pause-Knopf anbieten. Fokussierte Logos ins Sichtfeld holen und hervorheben. Die einfarbigen Logos brauchen genug Kontrast zum Grund."
},
"messwerte": {
"easing": "Flip: ease-in-out; Logo-Farbwechsel: cubic-bezier(.25,1,.5,1); Opacity: linear",
"dauer_ms": "Flip 600; Logo-Fill 300; Opacity 150; Wechselintervall 5000",
"stagger_ms": "160",
"distanz": "rotateX 0° auf 180°; perspective 1000px",
"sonstiges": "Stripe: Kachelbreite 172px, Band mit Haarlinien, Drag per cursor: grab. Cursor: 4/6/8 Spalten, Kachelhöhe 4rem/4.5rem/6.25rem.",
"herkunft": "beobachtet",
"quelle": "https://b.stripecdn.com/mkt-ssr-statics/assets/_next/static/css/a86126a5a6c78d53.css; https://www.cursor.com/marketing-static/_next/static/immutable/chunks/3g8c5788oj-t7.css; https://www.cursor.com/marketing-static/_next/static/immutable/chunks/3tdvkmh2k3v7h.js"
},
"kurve": {
"bezier": [
0.42,
0,
0.58,
1
],
"css": "cubic-bezier(0.42, 0, 0.58, 1)",
"name": "ease-in-out",
"dauer_ms": 600
},
"gesehen_bei": [
{
"seite": "Stripe",
"url": "https://stripe.com/",
"auszeichnung": "",
"beobachtung": "Live geprüft: .hero-logo-section mit .logo-carousel > .logo-carousel__marquee-container > ul.logo-carousel__marquee, 36 li.logo-carousel__item (Logos als Inline-SVG). Viele Logos verlinken auf Kundenstories (/customers/amazon, /customers/shopify …). CSS: Band mit Haarlinie oben/unten, Container overflow hidden und cursor: grab (per Drag verschiebbar), user-select none; Item 172px breit, transition opacity .15s linear; SVG-Pfade transition fill .3s cubic-bezier(.25,1,.5,1). Variante --centered für wenige Logos (space-evenly, kein Lauf).",
"art": "website"
},
{
"seite": "Cursor",
"url": "https://www.cursor.com/",
"auszeichnung": "",
"beobachtung": "Live geprüft: .logo-flip-row als Raster mit 4/6/8 Spalten (ab 660px/900px), Kachelhöhe 4rem/4.5rem/6.25rem. Jede .logo-flip-card hat perspective 1000px, die Innenseite transform-style preserve-3d und transition transform .6s ease-in-out; .flipped = rotateX(180deg), Vorder- und Rückseite mit backface-visibility hidden. JS: alle 5 s (Intervall-Default 5) klappen die sichtbaren Kacheln nacheinander mit 160 ms Versatz um; nach (n−1)×160+600+50 ms werden die Logos ohne Transition getauscht und die Kacheln zurückgesetzt. prefers-reduced-motion: keine Transition und kein Flip.",
"art": "website"
}
],
"tutorials": [
{
"titel": "Ryan Mulligan – Infinite Marquee mit CSS",
"url": "https://ryanmulligan.dev/blog/css-marquee/"
}
],
"kombinierbar_mit": [
"marquee-laufband",
"graustufen-zu-farbe",
"testimonials-neu-gedacht",
"zahlen-fakten-section",
"prompt-hero-eingabefeld"
],
"urls": {
"detail": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/",
"meta": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/meta.json",
"demo": "https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo"
},
"herkunft": {
"quelldateien": [
"patch-luecken-a.json"
]
},
"bau": {
"status": "fertig",
"kurz": "Kundenlogos eines Hamburger Studios unter dem Hero: als ziehbares Laufband, als Raster mit gestaffelt umklappenden Kacheln oder als Haarlinien-Raster mit Kennzahl beim Hover.",
"demo": true,
"abhaengigkeiten": [],
"werte": {
"logos": "16 erfundene Kunden als Inline-SVG mit fill/stroke currentColor, viewBox-Höhe 40, Breite nach dem Laden der Schriften per getBBox nachgemessen; optischer Ausgleich über eine Höhe je Logo (22 bis 31 px, Telefon × .82)",
"logo_farbe": "Ruhe #6c6963 auf Papier #efece6 (4,6 : 1), Hover/Fokus/Tippen: Markenfarbe je Logo",
"fill": "color 300ms cubic-bezier(0.25, 1, 0.5, 1) (Stripe)",
"nachbarn": "opacity 150ms linear auf .3, sobald ein Logo hervorgehoben ist (Stripe: transition opacity .15s linear)",
"fallzeile": "Kopfzeile rechts zeigt Name und Kennzahl des hervorgehobenen Logos, Einblenden 300 ms cubic-bezier(0.25, 1, 0.5, 1), translateY 5px",
"band_kachel": "172px breit, 108px hoch (Telefon 136 × 84px), Haarlinie 1px oben und unten",
"band_lauf": "linear 55 px/s, eine Runde = 16 × 172px ≈ 50 s; Telefon 35 px/s ≈ 62 s; Liste doppelt, zweite Kopie aria-hidden und tabindex -1",
"band_hover": "Hover oder Fokus bremst weich auf 0 (exponentiell, Zeitkonstante 250 ms) und fährt ebenso wieder an",
"band_ziehen": "cursor: grab/grabbing, touch-action: pan-y, ab 4px Bewegung gilt es als Ziehen (kein Klick); Schwung nach dem Loslassen max. 1600 px/s, abklingend mit Zeitkonstante 350 ms",
"band_rand": "mask-image linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)",
"band_pause": "runder Knopf 26px neben der Fallzeile, hält das Band für alle an (WCAG 2.2.2)",
"klapp_raster": "1 Reihe, 4/6/8 Spalten ab 0/660/900px, Kachelhöhe 4rem/4.5rem/6.25rem, gap 8px, Radius 10px, Fläche #e6e2da (Cursor)",
"klapp_flip": "perspective 1000px, transform-style preserve-3d, rotateX(0) → rotateX(180deg), transition transform 600ms cubic-bezier(0.42, 0, 0.58, 1), backface-visibility hidden",
"klapp_takt": "Versatz 160 ms je Kachel, Intervall 5000 ms, erster Wechsel 1200 ms nach dem Anzeigen; nach (n − 1) × 160 + 600 + 50 ms Logos ohne Übergang tauschen und Kacheln zurücksetzen; Hover über dem Raster schiebt den nächsten Wechsel auf",
"linien_raster": "8 Spalten (unter 900px 4 Spalten, 12 Logos), Zellhöhe 116px (unter 1100px 100px, Telefon 86px), Haarlinie 1px rgba(21, 21, 20, .15)",
"linien_hover": "Logo hebt sich um 14px, Kennzahl und Pfeil blenden ein: opacity 150ms linear, translate 300ms cubic-bezier(0.25, 1, 0.5, 1)",
"schriften": "Seite: Instrument Sans, Instrument Serif Italic, Geist Mono; Logos: Fraunces, Archivo (wdth 75/125), Cormorant Garamond, Michroma, Questrial, Jost, Bricolage Grotesque, Source Serif 4, Unbounded, Geist Mono, Instrument Sans/Serif",
"farben": "Papier #efece6, Kachel #e6e2da, Tinte #151514, Akzent #2d5b43",
"vorfuehrung_runde_ms": 21000
},
"ausloeser": "hover",
"touch": "Laufband läuft langsamer (35 px/s) und lässt sich mit dem Finger ziehen, senkrechtes Scrollen bleibt frei (touch-action: pan-y). Erstes Tippen auf ein Logo färbt es ein, dimmt die Nachbarn und zeigt die Kennzahl in der Kopfzeile; zweites Tippen löst es wieder, Tippen daneben ebenfalls. Klapp-Raster mit 4 Kacheln, Haarlinien-Raster mit 4 Spalten und 12 Logos, Kennzahl dort nur in der Kopfzeile. Pause-Knopf für das Band. Varianten: Ruhiges Raster und Auszeichnungen reagieren auf Tippen (erstes Tippen hebt hervor, zweites löst); Auszeichnungen stehen auf dem Telefon als Liste.",
"reduziert": "Laufband steht als Raster (8 bzw. 4 Spalten) mit allen 16 Logos, ohne Kopie und ohne Randmaske; kein Ziehen, kein Pause-Knopf. Klapp-Raster zeigt die ersten Logos ohne Flip. Hover färbt sofort ohne Übergang, Haarlinien-Logo hebt sich nicht. Die Werte-Leiste meldet den Zustand. Varianten: Raster ohne Übergang; Auszeichnungen ohne Drehung und ohne Übergang.",
"korrekturen": {
"beschreibung": "Direkt unter dem Hero steht ein Band oder Raster mit Kunden- und Partnerlogos. Die Logos sind einfarbig (Graustufe oder Textfarbe), darüber steht ein kurzer Satz wie „Vertraut von …“. Bewegung ist ruhig oder fehlt ganz: ein endloses Laufband, das sich auch ziehen lässt, oder ein festes Raster, in dem die Kacheln in Abständen auf das nächste Logo umklappen. Beim Hover bekommt das Logo seine Markenfarbe, die anderen treten zurück. Jedes Logo verlinkt auf die passende Fallstudie.",
"warum_es_wirkt": "Fremde Marken leihen Vertrauen, bevor der Besucher eine Zeile Text gelesen hat. Ein Raster mit Umklapp-Wechsel zeigt viele Logos auf wenig Fläche, ohne dass etwas ständig läuft. Verlinkte Logos machen aus Dekoration einen Weg zu den Referenzen.",
"wann_einsetzen": "B2B-, SaaS- und Agenturseiten, Portfolios von Freelancern mit bekannten Kunden und Template-Startseiten. Der Platz eignet sich auch für „Bekannt aus“, Partner, Zertifikate, Verbände und Förderer.",
"wann_nicht": "Mit weniger als etwa 5 Logos. Mit unbekannten Logos ohne Bezug zum Angebot. Mit Logos ohne Nutzungserlaubnis. Als dritte Laufband-Zeile auf derselben Seite. Mit farbigen Original-Logos in voller Sättigung, die das Layout zerreißen. Keine selbst gestalteten Siegel mit Umwelt-, Bio-, Regional- oder Sozialaussage: Eigensiegel ohne Zertifizierungssystem sind seit 27.09.2026 unzulässig (UWG Anhang Nr. 2a), vom Kunden prüfen lassen. Auszeichnungen nur als Preis eines Vergebers mit Wettbewerb und Jahr; echte Siegel mit Nachweis zeigt die Variante „Siegel mit Nachweis“.",
"varianten": [
"Laufband mit Haarlinien, per Ziehen greifbar (cursor: grab), Logos verlinkt (Stripe)",
"Festes Raster mit 4/6/8 Spalten, Kacheln klappen gestaffelt per rotateX auf das nächste Logo (Cursor)",
"Statisches Raster mit Haarlinien-Rahmen, zeitlos und ohne JS",
"Hover gibt dem Logo die Markenfarbe, Nachbarn dimmen (passt zu graustufen-zu-farbe und nachbarn-reagieren-hover)",
"Logo plus Kennzahl oder Kurzzitat beim Hover",
"Ruhiges Raster: Logos in natürlicher Breite, zentriert, Reihen per flex-wrap: balance gleich lang (Chrome 150), sonst per Messung",
"Auszeichnungen mit Jahr: Jahreszahl, Grafik des Vergebers, Titel, Wettbewerb oder Guide mit Jahr, neueste zuerst (Gastro, Kanzlei); keine Eigensiegel mit Umwelt- oder Sozialaussage",
"Siegel mit Nachweis: je Zeichen Träger, Art, Zertifikatsnummer, Gültigkeit und Link zu den Kriterien als dl, Logo nur Begleitung; ohne vollständige Daten erscheint das Zeichen nicht"
],
"umsetzung": "Markup: . Logos als SVG mit fill: currentColor, damit eine Farbe für alle gilt und der Hover nur color ändert (300 ms cubic-bezier(.25, 1, .5, 1)). Feste Kachelbreite (Stripe: 172px) statt Logobreite, optischer Ausgleich über die Höhe je Logo. Laufband: Liste doppelt rendern (zweite Kopie aria-hidden=\"true\", Links mit tabindex=\"-1\"), per CSS @keyframes von translateX(0) auf translateX(-50%), linear, 30 bis 60 s, Hover pausiert (animation-play-state). Mit Ziehen besser per requestAnimationFrame und Pointer Events. Klapp-Raster: pro Kachel Vorder- und Rückseite, .flipped { transform: rotateX(180deg) } mit 600 ms ease-in-out, gestaffelt um 160 ms, alle 5 s; danach die Logos ohne Übergang tauschen und zurücksetzen. Logos nur mit Freigabe des Kunden zeigen.",
"mobil": "Raster auf 4 Spalten und weniger Logos (Cursor blendet ab Kachel 5 aus). Das Laufband bleibt, läuft aber langsamer. Tippen statt Hover.",
"reduzierte_bewegung": "Laufband anhalten oder als statisches Raster zeigen. Kein Umklappen (so macht es Cursor). Farbwechsel beim Hover ohne Übergang.",
"barrierefreiheit": "Jedes Logo braucht einen Namen (alt oder aria-label mit dem Firmennamen). Die doppelte Laufband-Kopie ist aria-hidden und enthält keine Fokusziele. Ein bewegtes Band muss sich anhalten lassen (WCAG 2.2.2); Pause beim Hover reicht auf Touch nicht, also einen sichtbaren Pause-Knopf anbieten. Fokussierte Logos ins Sichtfeld holen und hervorheben. Die einfarbigen Logos brauchen genug Kontrast zum Grund."
},
"geprueft": "03.11.2026",
"notiz": "Hero des erfundenen Hamburger Studios Reede mit Social-Proof-Bereich. Umschalter Laufband (Stripe: 172px-Kacheln, Haarlinien, Ziehen mit Schwung, Hover bremst weich, Pause-Knopf), Klapp-Raster (Cursor: 4/6/8 Spalten, rotateX 600 ms ease-in-out, 160 ms Versatz, alle 5 s) und Haarlinien-Raster (statisch, Kennzahl und Pfeil beim Hover). Alle drei nutzen dieselben 16 Logos, die als eigene SVG-Wortmarken mit freien Schriften gebaut sind; Kunden und Kennzahlen sind erfunden. Die Kopfzeile zeigt beim Hover Name und Kennzahl des Kunden. Vorführung 21 s: Zeiger hält das Band an und zieht es, dann zwei Klapp-Wechsel, dann Hover über drei Haarlinien-Zellen. Varianten 01.11.2026: Umschalter im Pult unter der Wand (?v=laufband|raster|auszeichnungen), Kopf und Hero wechseln die Welt mit. „Ruhiges Raster“: Dachdeckerei Brömmel, Lüneburg (Innung, Hersteller, Zertifikate, 11 eigene Wortmarken), flex-wrap: balance mit Weiche „Fallback: Messung“ im Pult zum Vergleichen. „Auszeichnungen mit Jahr“: Hofküche Ellerbrook bei Lübeck mit 5 erfundenen Preisen und eigenen Siegeln. Fallstrick: Logos verschieden hoch und mittig ausgerichtet, darum Reihen über die Mitte der Logos zählen, nicht über offsetTop. Bilder 02.11.2026: Die Arbeitsprobe im Hero war ein Portfolio-Foto, jetzt eine Magazin-Doppelseite als CSS-Miniatur (bilder.json kam nicht). Zugang 02.11.2026: --leise Alpha .58 → .66 (5,5:1 auf #efece6). Tastatur im Laufband: Beim Fokus wird das Band nicht mehr auf (−breite, 0] umgebrochen, sondern auf höchstens 0 begrenzt; vorher stand die aria-hidden-Kopie in der Mitte und das fokussierte Original außerhalb des Bildes. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Die Kopie-Logos (aria-hidden, tabindex -1) sind absichtlich nicht fokussierbar. Hinweis: pruef.sh --v raster meldet in der Detailseite requestfailed demo.html, schon vor dieser Änderung. Varianten 03.11.2026: „Siegel mit Nachweis“ (?v=siegel-nachweis) im Rezept weingut-hofladen-herkunft (Weingut Sennfeld, Dalsheim), Pult „Nummer fehlt“. Auszeichnungen geprüft (UWG Anhang Nr. 2a seit 27.09.2026): „Grüne Gabel“ (Blatt, „14 Höfe im Umkreis“, also Regional-/Umweltaussage) ersetzt durch „Landgasthaus des Jahres, 2. Platz, Wettbewerb Gasthaus im Norden 2025“ mit Medaille; „Ausbildungsbetrieb des Jahres, Bündnis Gute Gastgeber“ (Sozialaussage) ersetzt durch „Bester Service, Gastgeberwettbewerb Holstein 2022“ mit Service-Glocke; alle Vergeber mit Wettbewerb bzw. Ausgabe und Jahr. Belege Heuking 09.04.2026, IHK Ostthüringen (Schwarze Liste Nr. 2a). Selbsturteil 4.",
"varianten": [
{
"id": "laufband",
"name": "Kundenlogos als Laufband",
"wann": "Agentur, Studio, SaaS mit vielen bekannten Kunden: Band mit Pause-Knopf (WCAG 2.2.2), dazu Klapp-Raster und Haarlinien-Raster als Ansichten.",
"werte": {
"aufbau": "Laufband 172px-Kacheln, Ziehen mit Schwung, Hover bremst weich; Ansichten Klapp-Raster und Haarlinien",
"pause": "runder Knopf 26px, hält das Band für alle an",
"lauf": "55 px/s linear, Telefon 35 px/s",
"rezept": "kreativstudio-buehne",
"details": "siehe bau.werte"
}
},
{
"id": "raster",
"name": "Ruhiges Raster",
"wann": "Handwerk, Verein, Praxis: Innung, Zertifikate, Herstellerpartner oder Förderer, die ruhig und vollständig dastehen sollen; ungerade Anzahl verschieden breiter Logos.",
"werte": {
"aufbau": "ul mit display: flex, flex-wrap: balance (ab Chrome 150), justify-content: center; 11 Logos in natürlicher Breite (viewBox per getBBox nachgemessen), Höhe 32–40 px",
"fallback": "@supports-Weiche; ohne balance flex-wrap: wrap plus Messung: kleinste max-inline-size, bei der die Reihenzahl gleich bleibt (Binärsuche, 12 Schritte), bei jeder Größenänderung neu",
"ergebnis": "1280 px: Reihen 6 / 5 statt 7 / 4",
"gap": "clamp(22px, 3.4vh, 36px) clamp(32px, 4.4vw, 64px)",
"hover": "opacity .78 → 1, Farbe Grau → Tinte, 150 ms cubic-bezier(0.4, 0, 0.2, 1); keine Nachbarn-Dimmung, kein Laufband",
"schrift": "Archivo 700 wdth 75 versal (Titel), Atkinson Hyperlegible Next (Text)",
"farben": "Grund #EFEDEA, Text #1A1A1A, Logos #4F4B46, Signal #FB6100 nur für Anfrage",
"vorfuehrung": "Breite der Fläche 100 % → 58 % → 100 % in 2 × 4 s, die Reihen gleichen sich jedes Mal neu aus",
"rezept": "handwerk-werkstatt-klartext"
}
},
{
"id": "auszeichnungen",
"name": "Auszeichnungen mit Jahr",
"wann": "Gastro, Hotel, Kanzlei, Studio: Preise, Rankings und Guides eines Vergebers, bei denen das Jahr die Aussage trägt. Jede Grafik nennt Wettbewerb oder Guide und Jahr; keine Umwelt-, Bio-, Regional- oder Sozialaussage in eigenen Siegeln.",
"werte": {
"aufbau": "ol mit 5 Spalten (unter 900 px 3, Telefon 1 Zeile je Preis: Jahr / Siegel / Text), Haarlinien zwischen den Spalten; neueste zuerst",
"jahr": "Fraunces 560, clamp(30px, 2.8vw, 44px), lnum tnum",
"siegel": "eigene SVG je Vergeber (Guide-Emblem, Medaille „II“, Löffel, Weinglas, Service-Glocke), currentColor, 58–76 px; keine Blätter, kein Grün, keine Umwelt-, Regional- oder Sozialaussage",
"hover": "Siegel in Hausfarbe und rotate −8°, 700 ms; Nachbarn opacity .42, 200 ms; Kurve cubic-bezier(0.16, 1, 0.3, 1)",
"touch": "erstes Tippen hebt hervor, zweites löst",
"schrift": "Fraunces (Titel, Jahr), Commissioner (Text)",
"farben": "Grund #F0ECE0, Text #353839, Dunkelgrün #293E3A, Salbei #7F937A, Senf #EAC16E",
"a11y": "aria-label je Preis mit Jahr, Titel und Vergeber",
"rezept": "gastro-warm-appetitlich",
"vergeber": "Tafelführer Nord, Ausgabe 2026 und 2025; Wettbewerb Gasthaus im Norden 2025 (2. Platz); Elbweinpreis 2024, Kategorie Gasthaus; Gastgeberwettbewerb Holstein 2022 (Bester Service)"
}
},
{
"id": "siegel-nachweis",
"name": "Siegel mit Nachweis",
"knopf": "Siegel mit Nachweis",
"wann": "Bio-, Fair- oder Umweltzeichen, Verbandsmitgliedschaft und Zertifizierungen bei Weingut, Mode, D2C, Gastro, Hotel und Handwerk. Seit 27.09.2026 sind Eigensiegel mit Umwelt- oder Sozialaussage unzulässig (UWG Anhang Nr. 2a); jedes Zeichen braucht Träger, Art, Nummer, Gültigkeit und öffentliche Kriterien. Vom Kunden prüfen lassen.",
"werte": {
"aufbau": "ul mit 4 Spalten (unter 1100 px 2, Telefon 1), je Zeichen h3 + dl mit Träger, Art (staatlich geregelt oder Zertifizierungssystem), Zertifikat-Nr., Gültig bis (time), Kriterien (Link „öffentlich einsehen“); Logo 40 px nur Begleitung, aria-hidden",
"regel": "Zeichen erscheint nur, wenn alle fünf Angaben da sind und gueltig ≥ heute; Beispiel „Klimaneutrales Weingut“ (eigene Angabe, ohne Träger und Nummer) fällt durch und wird nicht gezeigt",
"daten": "erfundene Träger: Kontrollstelle Agrarcert Mitte, Lebendiger Boden e. V., Weinbau Zukunft e. V. mit Prüfgesellschaft Lauterbach, Initiative Faire Lese e. V. mit Sozialaudit Rhein; Logos als neutrale Platzhalter (Kreis, Quadrat, Sechseck, Schild mit Kürzel)",
"pult": "„Nummer fehlt“ entfernt die Nummer eines Zeichens: es blendet aus (opacity, translate 8px, 200 ms cubic-bezier(0.7, 0, 0.84, 0)) und kommt mit 450 ms cubic-bezier(0.16, 1, 0.3, 1) wieder",
"schrift": "EB Garamond (Titel clamp(1.5rem, 1.2rem + 1vw, 2rem), Zeichenname Italic 1.375rem, Werte 1.0625rem), DM Mono 500 für Labels .6875rem versal .1em und Nummern .8125rem",
"farben": "Kalk #f1ece2, Löss #e6dccb (Hover-Fläche), Text #22211f, Sekundär #5a564f, Linien #d8cfc0, Buntsandstein #8a3a2b für Link und Kaufen",
"vorfuehrung": "Zeiger liest die vier Zeichen (je 1,3 s), dann fehlt eine Nummer und das Zeichen verschwindet, nach 3,2 s kommt es zurück; Runde 11 s",
"rezept": "weingut-hofladen-herkunft (Weingut Sennfeld, Dalsheim, Rheinhessen)"
}
}
]
}
}