{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "eu-gewaehrleistungshinweis",
 "name": "EU-Hinweis zur Gewährleistung und Garantie-Label",
 "name_en": "EU harmonised legal guarantee notice and durability label",
 "kurz": "Der Ort für das amtliche EU-Label: als feste Leiste unter dem Preis, als geschachtelte Garantie-Kurzform am Produktbild mit vollem Label im Dialog und als Footer-Link auf eine schlichte Seite, jeweils mit einem Satz, der Gewährleistung und Herstellergarantie trennt.",
 "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": [
  "ruhig",
  "präzise"
 ],
 "technik": [
  "css",
  "dialog",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Auf der Produktseite steht das vollständige EU-Label zur gesetzlichen Gewährleistung als schmale, nicht aufklappbare Leiste unter dem Preis. Gibt der Hersteller eine kostenlose Haltbarkeitsgarantie über mehr als zwei Jahre, sitzt am Produktbild zusätzlich das EU-Garantie-Label in der geschachtelten Kurzform; ein Knopf öffnet das volle Label im Dialog. Ein Footer-Link „Gesetzliche Gewährleistung“ führt zu einer schlichten Seite mit dem Label. Ein Satz grenzt Gewährleistung und Herstellergarantie voneinander ab.",
  "warum_es_wirkt": "Das Label ist amtlich und darf gestalterisch nicht verändert werden. Gestaltet wird deshalb nur der Ort: eine ruhige Leiste, die zur Kaufbox gehört, statt eines Fremdkörpers. Kunden sehen auf einen Blick, was gilt, und der Shop wirkt sorgfältig.",
  "wann_einsetzen": "Jeder Shop und jeder Online-Verkauf beweglicher Waren an Verbraucher, seit 27.09.2026. Das Garantie-Label nur, wenn der Hersteller die Garantie gibt und die Daten liefert.",
  "wann_nicht": "Nicht bei reinen Dienstleistungen ohne Warenverkauf. Das Label nie nachzeichnen, umfärben oder in die Hausschrift setzen: nur die amtliche Vorlage. Nicht als Mouse-over, Aufklapptext oder nur in den AGB. Das Garantie-Label nicht mit eigenen Garantien des Händlers verwechseln.",
  "varianten": [
   "kaufbox: vollständiges Label als Leiste unter dem Preis, nicht aufklappbar, mit dem Satz zur Abgrenzung",
   "garantie-label: am Produktbild in der geschachtelten Kurzform; ein Knopf öffnet das volle Label im nativen dialog. Nur bei Herstellergarantie über zwei Jahre",
   "footer-seite: Link „Gesetzliche Gewährleistung“ im Footer und im mobilen Menü auf eine schlichte Seite mit dem Label (Mindestlösung laut Handelskammer Hamburg)",
   "warenkorb (nicht in der Demo): Garantie-Label je Position; nur eine Quelle nennt das"
  ],
  "umsetzung": "Die amtliche Vorlage der EU-Kommission in der Seitensprache als SVG oder HTML einbinden (Quelle über das IHK-Toolkit) und nichts daran ändern: keine Hausschrift, keine Umfärbung, kein Nachbau. Gestaltet wird nur der Ort. Kaufbox und Checkout: Label als figure mit figcaption in einer eigenen Zeile unter dem Preis, nicht in details, nicht als Mouse-over. Darunter ein Satz, der gesetzliche Gewährleistung (Verkäufer, zwei Jahre) und Herstellergarantie (freiwillig, zusätzlich) abgrenzt. Garantie-Label: nur rendern, wenn garantie.jahre > 2 und Herstellerdaten vorhanden; Platz direkt am Produktbild in der geschachtelten Online-Fassung, ein button öffnet das volle Label im dialog (showModal, Esc schließt, Fokus zurück auf den Knopf). Footer: Link „Gesetzliche Gewährleistung“ neben Widerruf und Kündigung, auch im mobilen Menü, auf eine schlichte Seite mit dem Label. Sprachwechsel tauscht die Vorlage, nicht nur den Text. Ohne JS steht das volle Label statt der geschachtelten Fassung. Solange die Vorlage fehlt, steht an der Label-Stelle ein markierter Platzhalterrahmen mit Rahmendaten (Garantiedauer, Marke, Modell) als Text, nie eine nachgezeichnete Grafik. Vom Kunden prüfen lassen.",
  "mobil": "Label in voller Breite unter dem Preis; Garantie-Kurzform unter dem ersten Produktbild statt daneben. Footer-Link auch im mobilen Menü.",
  "reduzierte_bewegung": "Dialog ohne Bewegung, nur kurzes Einblenden.",
  "barrierefreiheit": "SVG mit title und Textalternative bzw. HTML-Fassung bevorzugen, damit Screenreader den Inhalt lesen. Kontrast der Vorlage nicht verändern. Tastatur: Knopf zur Vollansicht erreichbar, Esc schließt, Fokus kehrt zurück. 320 px und 200 % Zoom: Label skaliert mit, kein waagerechtes Scrollen."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen (token-toggle-asymmetrisch)",
  "dauer_ms": "Dialog öffnen etwa 250–300, schließen etwa 65 % davon",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Mindestgröße am Bildschirm in den Quellen nicht eindeutig; Druckgrößen A4 bzw. 95 × 100 mm gelten für den Laden",
  "herkunft": "eigene Festlegung",
  "quelle": "IHK Berlin 08.10.2026 für die Druckgrößen; Dauer und Kurve eigene Festlegung"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "IHK Berlin: Neue Etiketten im Handel",
   "url": "https://www.ihk.de/berlin/service-und-beratung/innovation/product-compliance/gewaehrleistung-garantie-label-7186298",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026 (28.09.2026): Pflicht seit 27.09.2026 für Händler im Laden und online, zwei Etiketten, Umsetzung in Art. 246 und 246a EGBGB, Layout fest nach Durchführungsverordnung (EU) 2025/1960.",
   "art": "artikel"
  },
  {
   "seite": "IHK Berlin: Muster Gewährleistungs- und Garantielabel (Label-Toolkit)",
   "url": "https://www.ihk.de/berlin/service-und-beratung/innovation/product-compliance/muster-garantielabel-7186302",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026 (08.10.2026): Amtliche Vorlagen der EU-Kommission in 24 Sprachen als PDF, PNG/JPG, SVG und HTML, auch geschachtelte Online-Fassung. Online farbig. Mouse-over und reine AGB-Hinweise reichen nicht.",
   "art": "artikel"
  },
  {
   "seite": "Handelskammer Hamburg: Garantien und Gewährleistung, neue Informationspflichten",
   "url": "https://www.handelskammer-hamburg.de/recht-steuern/aktuelle-rechtsthemen/garantien-und-gewaehrleistung-informationspflichten-7175700",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026 (16.09.2026): Gewährleistungshinweis online über allgemeinen Hinweis, etwa Footer-Link, möglich; Garantie-Label neben dem Produktbild und laut Kammer auch im Warenkorb; Gesetz am 05.02.2026 verkündet.",
   "art": "artikel"
  },
  {
   "seite": "CMS Deutschland: Gewährleistung und Garantien, was Händler ab 2026 beachten müssen",
   "url": "https://cms.law/de/deu/legal-updates/gewaehrleistung-und-garantien-was-haendler-ab-2026-beachten-muessen",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Label neben dem Produktbild, Abgrenzung Gewährleistung und Garantie, BGBl. I 2026 Nr. 28.",
   "art": "artikel"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "produkt-kaufbox-varianten",
  "warenkorb-drawer",
  "mega-footer-sitemap",
  "widerruf-und-kuendigung-schaltflaeche",
  "dialog-modal-nativ"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Techniken-Recherche 03.11.2026"
  ],
  "pruefnotizen": [
   "EUR-Lex (Durchführungsverordnung 2025/1960) war nicht abrufbar; Angaben zum Layout stammen aus IHK und Handelskammer. BGBl-Nummer aus Sekundärquelle.",
   "Bildschirm-Mindestgröße offen. Warenkorb-Pflicht nur bei einer Quelle.",
   "Die Demo zeigt bewusst kein Label, sondern einen markierten Platzhalterrahmen: Die amtliche Vorlage konnte nicht heruntergeladen werden und darf nicht nachgezeichnet werden.",
   "Dazu passt die Reparierbarkeitsangabe für Smartphones und Tablets (Variante für technische-daten-produktseite).",
   "Vom Kunden prüfen lassen, keine Rechtsberatung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Ort für das amtliche EU-Label: als feste Leiste unter dem Preis, als geschachtelte Garantie-Kurzform am Produktbild mit vollem Label im Dialog und als Footer-Link auf eine schlichte Seite, jeweils mit einem Satz, der Gewährleistung und Herstellergarantie trennt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen (token-toggle-asymmetrisch)",
   "dauer_ms": "Dialog auf 300 / zu 200, Hintergrund rgba(20,20,20,.5) im selben Takt; Seite kommt 300 ms, translateY 8 px → 0; UI 150 linear",
   "dialog": "<dialog> mit showModal, @starting-style, overlay und display allow-discrete; translateY 12 px → 0; Esc und Klick auf den Hintergrund schließen, Fokus zurück auf den Knopf; margin auto",
   "platzhalter": "Rahmen 2 px gestrichelt #212121, Radius 6 px, Streifen 135° #fff/#f1efe9 je 12 px, Marke „Platzhalter · amtliche Vorlage“ Geist Mono 11 px auf #212121; Text „Amtliches EU-Label (Vorlage der EU-Kommission, Sprache der Seite) hier einsetzen, nicht verändern“; Rahmendaten nur als Text (dl)",
   "leiste": "figure mit figcaption „Ihre gesetzliche Gewährleistung“ unter der Preiszeile, Platzhalter mind. 112 px hoch, volle Breite der Kaufbox, nicht in details",
   "garantie_regel": "nur wenn garantie.jahre > 2 und Marke und Modell da sind; sonst entfällt das Garantie-Label, der Gewährleistungshinweis bleibt",
   "farben": "Grund #f5f4f1, Kachel #ece9e2, Text #212121, leise #636362, Akzent #eb5c9d nur als Fläche mit dunkler Schrift",
   "schrift": "Instrument Sans für UI und Preise, Young Serif nur für Claims und Überschriften"
  },
  "ausloeser": "klick",
  "touch": "Unter 900 px Bild oben, Kaufbox darunter, Label-Leiste in voller Breite; Garantie-Kurzform unter dem Bild mit Knopf darunter (44 px). Footer einspaltig.",
  "reduziert": "Dialog und Seite nur mit 150 ms Einblenden, kein Versatz; Farbwechsel des Bildes ohne Übergang; der Zeiger der Vorführung blendet nur.",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Rezept d2c-produkt-zuerst, erfundene Marke Mahlgut (Handmühlen) aus Landau in der Pfalz, Produkt Kegel H2 als eigene SVG-Zeichnung. Das amtliche Label wird bewusst nicht nachgebaut: Die Vorlage war nicht abrufbar und darf nicht verändert werden, deshalb zeigt jede Variante einen klar markierten Platzhalterrahmen mit Rahmendaten als Text. Gestaltet ist nur der Ort. Pult-Schalter „5 Jahre / 2 Jahre“ zeigt, dass das Garantie-Label erst über zwei Jahren erscheint (intern markierter Hinweis). Rechtliches vom Kunden prüfen lassen. Selbsturteil 4.",
  "varianten": [
   {
    "id": "kaufbox",
    "name": "Label-Leiste in der Kaufbox",
    "wann": "Jeder Shop für Verbraucher: vollständiger Gewährleistungshinweis als feste Leiste unter dem Preis, dazu der Satz zur Abgrenzung.",
    "werte": {
     "ort": "unter der Preiszeile, volle Breite",
     "aufklappbar": "nein",
     "platzhalter_hoehe": "mind. 112 px"
    }
   },
   {
    "id": "garantie-label",
    "name": "Garantie-Label am Produktbild",
    "wann": "Hersteller oder Marken mit kostenloser Haltbarkeitsgarantie über zwei Jahre: Kurzform am Bild, volles Label im Dialog.",
    "werte": {
     "ort": "unter dem Produktbild, Karte #fff, Radius 12 px",
     "dialog_ms": "300 auf / 200 zu",
     "bedingung": "garantie.jahre > 2"
    }
   },
   {
    "id": "footer-seite",
    "name": "Footer-Link und Seite",
    "wann": "Mindestlösung für kleine Shops und als Ergänzung: Link „Gesetzliche Gewährleistung“ neben Widerruf und Kündigung, schlichte Seite mit Label und Gegenüberstellung.",
    "werte": {
     "ort": "Footer-Spalte Rechtliches, Link unterstrichen",
     "seite": "max. 880 px, h1 Young Serif clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem), Platzhalter mind. 300 px",
     "einblendung_ms": 300
    }
   }
  ]
 }
}