EU-Hinweis zur Gewährleistung und Garantie-Label
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.
Jeder Shop für Verbraucher: vollständiger Gewährleistungshinweis als feste Leiste unter dem Preis, dazu der Satz zur Abgrenzung.
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.
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.
Robust umsetzen
Telefon. Label in voller Breite unter dem Preis; Garantie-Kurzform unter dem ersten Produktbild statt daneben. Footer-Link auch im mobilen Menü.
Ohne Bewegung. Dialog ohne Bewegung, nur kurzes Einblenden.
Barrierefrei. 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.
Code
<!DOCTYPE html>
<!--
EU-Hinweis zur Gewährleistung und Garantie-Label
Fundus · Sektionen & Funktionen · https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/
Eigenständige Datei. Bilder liegen hier unter bilder/ – eigene einsetzen.
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EU-Hinweis zur Gewährleistung und Garantie-Label · Fundus-Demo</title>
<script>document.documentElement.classList.add('js');if(matchMedia('(prefers-reduced-motion: reduce)').matches)document.documentElement.classList.add('reduziert')</script>
<style>
@font-face { font-family: 'Young Serif'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/young-serif@latest/latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-sans:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
/* Rezept d2c-produkt-zuerst · eine Kurve: token-toggle-asymmetrisch */
:root {
--grund: #f5f4f1; --kachel: #ece9e2; --text: #212121; --leise: #636362; --linie: rgba(33, 33, 33, .12); --gruen: #10714e; --akzent: #eb5c9d;
--auf: cubic-bezier(0.16, 1, 0.3, 1); --zu: cubic-bezier(0.7, 0, 0.84, 0);
--t-ui: 150ms; --t-auf: 300ms; --t-zu: 200ms;
--rand: clamp(16px, 3vw, 40px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--text); font-family: 'Instrument Sans', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100svh; font-size: 1rem; line-height: 1.55; }
:root:has(:focus-visible) { scroll-behavior: auto; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ziffern { font-variant-numeric: tabular-nums; }
.label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
/* ── Kopf ── */
.band { background: var(--text); color: #f5f4f1; text-align: center; font-size: .8125rem; padding: 8px var(--rand); }
.kopf { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 14px var(--rand); border-bottom: 1px solid var(--linie); background: var(--grund); }
.marke { display: inline-flex; align-items: center; gap: 10px; font: 400 1.5rem/1 'Young Serif', Georgia, serif; text-decoration: none; margin-right: auto; }
.marke svg { width: 26px; height: 26px; }
.kopf nav { display: flex; gap: 24px; flex-wrap: wrap; }
.kopf nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; padding: 10px 0; }
.kopf nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.korb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 500; font-size: .9375rem; }
.korb svg { width: 22px; height: 22px; }
/* ── Produktseite ── */
.produkt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); max-width: 1440px; margin: 0 auto; padding: clamp(16px, 3vw, 40px) var(--rand) clamp(40px, 6vw, 88px); align-items: start; }
.pfad { grid-column: 1 / -1; font-size: .8125rem; color: var(--leise); }
.pfad a { color: var(--leise); }
.galerie { display: grid; gap: 12px; position: relative; }
.buehne { position: relative; background: var(--kachel); border-radius: 12px; aspect-ratio: 1 / 1; max-height: 640px; display: grid; place-items: center; overflow: hidden; }
.buehne svg.muehle { width: 62%; height: auto; max-height: 92%; }
.koerper-farbe { transition: fill 400ms var(--auf); }
.schild { position: absolute; left: 16px; top: 16px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--akzent); color: #212121; padding: 5px 10px; border-radius: 999px; }
.kaufbox { display: grid; gap: 18px; position: sticky; top: 20px; }
.claim { font: 400 1rem/1.3 'Young Serif', Georgia, serif; color: var(--leise); }
.kaufbox h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; margin-top: 4px; }
.kurztext { max-width: 46ch; }
.farben { border: 0; padding: 0; display: grid; gap: 8px; }
.farben legend { font-size: .9375rem; padding: 0; margin-bottom: 8px; }
.farben legend b { font-weight: 600; }
.farben .reihe { display: flex; gap: 10px; }
.farben label { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.farben input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.farben span { width: 32px; height: 32px; border-radius: 50%; background: var(--m); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.farben label:has(input:checked) { box-shadow: 0 0 0 2px var(--text); }
.farben label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 4px; }
.preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.preis { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.preiszeile small { font-size: .875rem; color: var(--leise); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font-weight: 600; transition: background-color var(--t-ui) linear, transform var(--t-ui) linear; }
.cta:hover { background: #000; }
.cta:active { transform: scale(.98); }
.meldung { font-size: .9375rem; color: var(--gruen); min-height: 1.4em; font-weight: 500; }
.vertrauen { list-style: none; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.vertrauen li { display: flex; gap: 10px; align-items: center; }
.vertrauen svg { width: 18px; height: 18px; flex: none; }
/* ═══ Der Baustein: Ort für das amtliche Label ═══
Gestaltet wird nur der Ort. Das Label selbst ist die Vorlage der EU-Kommission und wird nicht nachgebaut.
Bis die Vorlage eingesetzt ist, steht hier ein klar markierter Platzhalterrahmen mit Rahmendaten als Text. */
.label-ort { display: grid; gap: 8px; margin: 0; }
.label-ort figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; color: var(--leise); }
.label-ort figcaption b { color: var(--text); font-weight: 600; }
.eu-platz { position: relative; display: grid; gap: 10px; align-content: center; min-height: 112px; padding: 16px 18px; border: 2px dashed var(--text); border-radius: 6px; background: repeating-linear-gradient(135deg, #fff 0 12px, #f1efe9 12px 24px); }
.eu-platz .marke-platz { justify-self: start; font: 600 .6875rem/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; background: var(--text); color: #fff; padding: 6px 8px; border-radius: 3px; }
.eu-platz .anweisung { font-weight: 600; font-size: .9375rem; line-height: 1.4; max-width: 52ch; text-wrap: pretty; }
.eu-platz dl { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .875rem; }
.eu-platz dl div { display: flex; gap: 6px; }
.eu-platz dt { color: var(--leise); }
.eu-platz dd { font-weight: 600; }
.abgrenzung { font-size: .875rem; line-height: 1.5; color: var(--text); max-width: 60ch; }
.abgrenzung a { font-weight: 500; }
/* Garantie-Label am Produktbild: geschachtelte Kurzform */
.garantie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 12px 12px 14px; }
.garantie .kurz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.garantie .kurz .eu-mini { grid-row: span 2; width: 64px; height: 64px; border: 2px dashed var(--text); border-radius: 6px; display: grid; place-items: center; text-align: center; font: 600 .5625rem/1.15 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; background: repeating-linear-gradient(135deg, #fff 0 8px, #f1efe9 8px 16px); padding: 4px; }
.garantie .kurz b { font-size: 1rem; }
.garantie .kurz span { font-size: .875rem; color: var(--leise); }
.knopf-zart { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--text); border-radius: 999px; background: transparent; font-weight: 600; font-size: .875rem; transition: background-color var(--t-ui) linear, color var(--t-ui) linear; }
.knopf-zart:hover, .knopf-zart.zeigt { background: var(--text); color: #fff; }
.knopf-zart svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.intern { border: 2px dashed #b3261e; border-radius: 8px; padding: 10px 14px; background: #fbeceb; color: #6f1712; font-size: .875rem; }
/* Dialog mit dem vollen Label (dialog-modal-nativ), öffnen 300 ms expo.out, schließen 200 ms expo.in */
dialog.voll { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); border: 0; border-radius: 14px; padding: 0; background: var(--grund); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
opacity: 0; transform: translateY(12px); transition: opacity var(--t-zu) var(--zu), transform var(--t-zu) var(--zu), overlay var(--t-zu) allow-discrete, display var(--t-zu) allow-discrete; }
dialog.voll[open] { opacity: 1; transform: none; transition: opacity var(--t-auf) var(--auf), transform var(--t-auf) var(--auf), overlay var(--t-auf) allow-discrete, display var(--t-auf) allow-discrete; }
@starting-style { dialog.voll[open] { opacity: 0; transform: translateY(12px); } }
dialog.voll::backdrop { background: rgba(20, 20, 20, 0); transition: background-color var(--t-zu) linear, overlay var(--t-zu) allow-discrete, display var(--t-zu) allow-discrete; }
dialog.voll[open]::backdrop { background: rgba(20, 20, 20, .5); transition: background-color var(--t-auf) linear, overlay var(--t-auf) allow-discrete, display var(--t-auf) allow-discrete; }
@starting-style { dialog.voll[open]::backdrop { background: rgba(20, 20, 20, 0); } }
.dialog-innen { display: grid; gap: 16px; padding: 22px 22px 24px; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.dialog-kopf h2 { font: 400 1.5rem/1.15 'Young Serif', Georgia, serif; }
.zu { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: #fff; display: grid; place-items: center; }
.zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
dialog .eu-platz { min-height: 260px; }
/* ── Footer und Seite ── */
.shop-ende { max-width: 1440px; margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--rand); display: grid; gap: 20px; }
.shop-ende h2 { font: 400 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.08 'Young Serif', Georgia, serif; max-width: 20ch; }
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kachel { background: var(--kachel); border-radius: 12px; aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 16px; position: relative; text-decoration: none; }
.kachel svg { width: 64%; height: auto; }
.kachel span { position: absolute; left: 14px; bottom: 12px; right: 14px; display: flex; justify-content: space-between; gap: 8px; font-size: .875rem; font-weight: 500; }
.fuss { background: var(--text); color: #f5f4f1; }
.fuss-innen { max-width: 1440px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--rand) 24px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.fuss :focus-visible { outline-color: #fff; }
.fuss .claim-gross { font: 400 1.75rem/1.15 'Young Serif', Georgia, serif; max-width: 16ch; }
.fuss-innen p { color: #d6d4cf; font-size: .9375rem; margin-top: 12px; max-width: 36ch; }
.fuss h3 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #c9c6bf; font-weight: 600; margin-bottom: 12px; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.fuss li a { display: inline-block; padding: 6px 0; font-size: .9375rem; text-decoration: none; }
.fuss li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss li a.hervor { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fuss li a.zeigt { text-decoration: underline; text-decoration-thickness: 2px; }
.fuss-unten { max-width: 1440px; margin: 0 auto; padding: 18px var(--rand) 28px; border-top: 1px solid rgba(245, 244, 241, .18); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .8125rem; color: #c9c6bf; }
.seite { max-width: 880px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) var(--rand) clamp(48px, 7vw, 96px); display: grid; gap: 24px; }
.seite.kommt { animation: kommt var(--t-auf) var(--auf) both; }
@keyframes kommt { from { opacity: 0; transform: translateY(8px); } }
.seite h1 { font: 400 clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem)/1.05 'Young Serif', Georgia, serif; letter-spacing: -.01em; }
.seite .lead { font-size: 1.125rem; max-width: 58ch; text-wrap: pretty; }
.seite .eu-platz { min-height: 300px; }
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vergleich section { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.vergleich h2 { font-size: 1.125rem; font-weight: 600; }
.vergleich ul { padding-left: 1.1em; font-size: .9375rem; display: grid; gap: 4px; }
.seite .stand { font-size: .875rem; color: var(--leise); }
.zurueck { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; font-weight: 600; padding: 0; }
.zurueck svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.zurueck:hover span { text-decoration: underline; text-underline-offset: 3px; }
.platzhalter-text { background: #fff3c4; border-radius: 3px; padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.recht { font-size: .875rem; color: var(--leise); max-width: 90ch; }
/* Gedachter Zeiger */
.zeiger { position: fixed; left: 0; top: 0; z-index: 2147483001; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #212121; background: rgba(235, 92, 157, .5); pointer-events: none; opacity: 0; transition: transform 700ms var(--auf), opacity 200ms linear; }
.vorfuehrung .zeiger { opacity: 1; }
.zeiger.drueckt { scale: .8; }
/* Pult */
.pult { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px 8px 14px; max-width: calc(100vw - 32px); background: rgba(18, 19, 20, .94); color: #eef0f2; border-radius: 6px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.pult, .pult button { font: 500 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.pult .gruppe { display: flex; flex-wrap: wrap; gap: 2px; }
.pult button { color: rgba(238, 240, 242, .78); background: transparent; border: 0; padding: 8px 9px; border-radius: 3px; transition: background-color var(--t-ui) linear, color var(--t-ui) linear; }
.pult button[aria-pressed="true"] { background: #eef0f2; color: #121314; }
.pult button:focus-visible { outline: 2px solid #eef0f2; outline-offset: 2px; }
.pult .werte { text-transform: none; letter-spacing: .02em; color: rgba(238, 240, 242, .72); max-width: 30ch; line-height: 1.4; }
/* Varianten */
[data-v="kaufbox"] .garantie, [data-v="kaufbox"] .intern { display: none !important; }
[data-v="footer-seite"] .produkt { display: none; }
[data-v="kaufbox"] .shop-ende, [data-v="garantie-label"] .shop-ende, [data-v="kaufbox"] .seite, [data-v="garantie-label"] .seite, [data-v="kaufbox"] .fuss, [data-v="garantie-label"] .fuss { display: none; }
@media (max-width: 900px) {
.produkt { grid-template-columns: minmax(0, 1fr); }
.kaufbox { position: static; }
.fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.kopf nav { display: none; }
.korb .wort { display: none; }
.vergleich { grid-template-columns: minmax(0, 1fr); }
.fuss-innen { grid-template-columns: minmax(0, 1fr); }
.garantie { grid-template-columns: minmax(0, 1fr); }
.garantie .knopf-zart { justify-self: start; }
.pult { bottom: 12px; right: 12px; }
}
@media (max-width: 360px) {
.kacheln { grid-template-columns: minmax(0, 1fr); }
.eu-platz { padding: 14px; }
.garantie .kurz { grid-template-columns: minmax(0, 1fr); }
.garantie .kurz .eu-mini { grid-row: auto; }
}
/* Vorschau 960 × 720 */
.vorschau body { overflow: hidden; }
.vorschau .pult, .vorschau fundus-pult-knopf, .vorschau .band, .vorschau .pfad, .vorschau .kurztext, .vorschau .vertrauen, .vorschau .recht, .vorschau .intern, .vorschau .shop-ende { display: none !important; }
.vorschau .produkt { padding-top: 20px; gap: 32px; }
.vorschau .buehne { max-height: 560px; }
.vorschau .kaufbox { gap: 14px; }
.vorschau .seite { padding-top: 20px; gap: 18px; }
.vorschau .seite .eu-platz { min-height: 200px; }
:root.reduziert *, :root.reduziert *::before, :root.reduziert *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
:root.reduziert dialog.voll, :root.reduziert dialog.voll[open] { transform: none !important; transition: opacity 150ms linear, overlay 150ms allow-discrete, display 150ms allow-discrete !important; }
:root.reduziert .zeiger { transition: opacity 150ms linear !important; }
@media (hover: none) {
.cta:hover { background: var(--text); }
.knopf-zart:hover { background: transparent; color: var(--text); }
.knopf-zart:active { background: var(--text); color: #fff; }
}
@media (forced-colors: active) {
button, [role=button], [role=tab], [role=switch], input, select, textarea { border: 1px solid ButtonText !important; }
.eu-platz, .garantie .eu-mini { border-color: CanvasText; }
.farben label:has(input:checked) { outline: 2px solid Highlight; }
}
</style>
</head>
<body data-v="kaufbox">
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<defs>
<linearGradient id="stahl" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#000" stop-opacity=".22"/><stop offset=".22" stop-color="#fff" stop-opacity=".3"/><stop offset=".45" stop-color="#fff" stop-opacity="0"/><stop offset=".8" stop-color="#000" stop-opacity=".08"/><stop offset="1" stop-color="#000" stop-opacity=".28"/></linearGradient>
<linearGradient id="holzv" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#9a6a42"/><stop offset="1" stop-color="#5b3a22"/></linearGradient>
<radialGradient id="boden"><stop offset="0" stop-color="#3a3126" stop-opacity=".35"/><stop offset="1" stop-color="#3a3126" stop-opacity="0"/></radialGradient>
<symbol id="muehle" viewBox="0 0 320 460">
<ellipse cx="160" cy="440" rx="120" ry="12" fill="url(#boden)"/>
<!-- Kurbel -->
<path d="M160 92 L160 70 L258 54" fill="none" stroke="#2b2b2b" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
<ellipse cx="262" cy="40" rx="17" ry="24" fill="url(#holzv)"/>
<circle cx="160" cy="70" r="11" fill="#2b2b2b"/>
<!-- Deckel -->
<rect x="110" y="88" width="100" height="22" rx="6" style="fill:var(--koerper);" class="koerper-farbe"/>
<rect x="110" y="88" width="100" height="22" rx="6" fill="url(#stahl)"/>
<!-- Körper -->
<path d="M100 116 H220 V400 Q220 420 200 420 H120 Q100 420 100 400 Z" style="fill:var(--koerper);" class="koerper-farbe"/>
<path d="M100 116 H220 V400 Q220 420 200 420 H120 Q100 420 100 400 Z" fill="url(#stahl)"/>
<!-- Griffband aus Holz -->
<rect x="100" y="196" width="120" height="96" fill="url(#holzv)"/>
<g stroke="#000" stroke-opacity=".12" stroke-width="2"><path d="M100 212 H220 M100 230 H220 M100 248 H220 M100 266 H220 M100 284 H220"/></g>
<rect x="100" y="196" width="120" height="96" fill="url(#stahl)" opacity=".7"/>
<!-- Mahlgrad-Ring -->
<rect x="96" y="330" width="128" height="18" rx="4" fill="#2b2b2b"/>
<g stroke="#e9e6df" stroke-width="2"><path d="M110 334v10M124 334v10M138 334v10M152 334v10M166 334v10M180 334v10M194 334v10M208 334v10"/></g>
<!-- Markenzeichen: Kegel -->
<path d="M160 140 L176 172 H144 Z" fill="none" stroke="#e9e6df" stroke-width="2" stroke-linejoin="round" opacity=".85"/>
</symbol>
</defs>
</svg>
<p class="band">Kostenloser Versand ab 49 € · Mahlwerke aus eigener Fertigung in Landau</p>
<header class="kopf">
<a class="marke" href="#start" aria-label="Mahlgut, Startseite"><svg viewBox="0 0 26 26" aria-hidden="true"><path d="M13 3 L23 22 H3 Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 15 H18" stroke="currentColor" stroke-width="2"/></svg>Mahlgut</a>
<nav aria-label="Hauptnavigation"><a href="#start">Mühlen</a><a href="#start">Zubehör</a><a href="#start">Mahlgrad-Hilfe</a><a href="#start">Werkstatt</a></nav>
<a class="korb" href="#start"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8h16l-1.4 11.2a2 2 0 0 1-2 1.8H7.4a2 2 0 0 1-2-1.8L4 8Z M8.5 8V6.5a3.5 3.5 0 0 1 7 0V8" fill="none" stroke="currentColor" stroke-width="1.6"/></svg><span class="wort">Warenkorb</span> <span class="ziffern" id="korb-zahl">0</span></a>
</header>
<main id="start">
<div class="produkt">
<p class="pfad"><a href="#start">Mühlen</a> / <a href="#start">Handmühlen</a> / Kegel H2</p>
<section class="galerie" aria-label="Produktbild und Garantie">
<div class="buehne" id="buehne">
<svg class="muehle" viewBox="0 0 320 460" role="img" aria-label="Handmühle Kegel H2 in Edelstahl, Seitenansicht (Zeichnung)" id="muehle-bild" style="--koerper:#c9ccd0"><use href="#muehle"/></svg>
<span class="schild">Neu</span>
</div>
<!-- Garantie-Label: nur wenn der Hersteller mehr als zwei Jahre gibt -->
<div class="garantie" id="garantie">
<div class="kurz">
<span class="eu-mini" aria-hidden="true">Kurzform · Platz­halter</span>
<b><span class="ziffern" data-jahre>5</span> Jahre Haltbarkeitsgarantie des Herstellers</b>
<span>Kostenlos und zusätzlich zur gesetzlichen Gewährleistung. Alle Bedingungen im vollen Label.</span>
</div>
<button class="knopf-zart" type="button" id="garantie-auf" aria-haspopup="dialog">Garantie-Label ansehen <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg></button>
</div>
<p class="intern" id="intern" hidden><b>Nur intern sichtbar:</b> Herstellergarantie nicht länger als zwei Jahre. Das Garantie-Label entfällt, der Gewährleistungshinweis bleibt.</p>
</section>
<section class="kaufbox" aria-labelledby="produktname">
<div>
<p class="claim">Mahlt gleichmäßig, Jahr für Jahr.</p>
<h1 id="produktname">Handmühle Kegel H2</h1>
</div>
<p class="kurztext">Kegelmahlwerk aus gehärtetem Edelstahl, 40 Rasterstufen von Espresso bis French Press. Griffband aus Nussbaum, Kurbel abnehmbar.</p>
<fieldset class="farben">
<legend>Farbe: <b id="farbname">Edelstahl</b></legend>
<div class="reihe">
<label><input type="radio" name="farbe" value="#c9ccd0" data-name="Edelstahl" checked aria-label="Edelstahl"><span style="--m:#c9ccd0"></span></label>
<label><input type="radio" name="farbe" value="#3a3d41" data-name="Graphit" aria-label="Graphit"><span style="--m:#3a3d41"></span></label>
</div>
</fieldset>
<p class="preiszeile"><span class="preis ziffern">189 €</span><small>inkl. MwSt., zzgl. <a href="#start">Versand</a></small></p>
<!-- Hinweis zur gesetzlichen Gewährleistung: vollständig, eigene Zeile, nicht aufklappbar -->
<figure class="label-ort" aria-labelledby="gw-titel">
<figcaption><b id="gw-titel">Ihre gesetzliche Gewährleistung</b><span>EU-Hinweis, Pflicht seit 27.09.2026</span></figcaption>
<div class="eu-platz" role="note" aria-label="Platzhalter für das amtliche EU-Label zur gesetzlichen Gewährleistung">
<span class="marke-platz">Platzhalter · amtliche Vorlage</span>
<p class="anweisung">Amtliches EU-Label (Vorlage der EU-Kommission, Sprache der Seite) hier einsetzen, nicht verändern</p>
<dl><div><dt>Label</dt><dd>Gesetzliche Gewährleistung</dd></div><div><dt>Dauer</dt><dd>mind. 2 Jahre</dd></div><div><dt>Sprache</dt><dd>Deutsch</dd></div><div><dt>Form</dt><dd>Leiste, farbig</dd></div></dl>
</div>
</figure>
<p class="abgrenzung">Die gesetzliche Gewährleistung haben Sie gegenüber uns als Verkäufer, mindestens zwei Jahre und kostenlos. Unsere Haltbarkeitsgarantie als Hersteller kommt freiwillig dazu und ersetzt sie nicht. <a href="#start" data-zur-seite>Mehr zur Gewährleistung</a></p>
<button class="cta" type="button" id="kaufen">In den Warenkorb</button>
<p class="meldung" role="status" id="meldung"></p>
<ul class="vertrauen">
<li><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M1.5 5.5h9v7h-9zM10.5 8h3.5l2.5 2.5v2h-6z" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="4.5" cy="13.5" r="1.6" fill="#f5f4f1" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="13.5" r="1.6" fill="#f5f4f1" stroke="currentColor" stroke-width="1.3"/></svg>Versand in 1 bis 2 Werktagen</li>
<li><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M3 9a6 6 0 1 0 2-4.5M3 3v3h3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>30 Tage Rückgabe</li>
<li><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 2v4M5 6h8l-1 10H6z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>Mahlwerk einzeln nachkaufbar</li>
</ul>
</section>
</div>
<!-- Variante footer-seite: Shop-Ende, Footer, Seite „Gesetzliche Gewährleistung“ -->
<section class="shop-ende" id="shop-ende" aria-labelledby="ende-h">
<h2 id="ende-h">Mühlen, die man vererbt.</h2>
<div class="kacheln">
<a class="kachel" href="#start"><svg viewBox="0 0 320 460" aria-hidden="true" style="--koerper:#c9ccd0"><use href="#muehle"/></svg><span>Kegel H2 <b class="ziffern">189 €</b></span></a>
<a class="kachel" href="#start"><svg viewBox="0 0 320 460" aria-hidden="true" style="--koerper:#3a3d41"><use href="#muehle"/></svg><span>Kegel H2 Graphit <b class="ziffern">189 €</b></span></a>
<a class="kachel" href="#start"><svg viewBox="0 0 320 460" aria-hidden="true" style="--koerper:#b9a58a"><use href="#muehle"/></svg><span>Kegel H1 <b class="ziffern">139 €</b></span></a>
<a class="kachel" href="#start"><svg viewBox="0 0 320 460" aria-hidden="true" style="--koerper:#8c9a8a"><use href="#muehle"/></svg><span>Kegel H2 Salbei <b class="ziffern">199 €</b></span></a>
</div>
</section>
<article class="seite" id="seite" hidden aria-labelledby="seite-h">
<button class="zurueck" type="button" id="zurueck"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg><span>Zurück zum Shop</span></button>
<div>
<p class="label">Service · Rechtliches</p>
<h1 id="seite-h" tabindex="-1">Gesetzliche Gewährleistung</h1>
</div>
<p class="lead">Für alle Waren, die Sie bei uns kaufen, gilt die gesetzliche Gewährleistung. Was das heißt, fasst der Hinweis der Europäischen Union zusammen.</p>
<figure class="label-ort" aria-labelledby="seite-gw">
<figcaption><b id="seite-gw">Hinweis zur gesetzlichen Gewährleistung</b><span>Fassung der EU-Kommission, Deutsch</span></figcaption>
<div class="eu-platz" role="note" aria-label="Platzhalter für das amtliche EU-Label zur gesetzlichen Gewährleistung">
<span class="marke-platz">Platzhalter · amtliche Vorlage</span>
<p class="anweisung">Amtliches EU-Label (Vorlage der EU-Kommission, Sprache der Seite) hier einsetzen, nicht verändern</p>
<dl><div><dt>Label</dt><dd>Gesetzliche Gewährleistung</dd></div><div><dt>Dauer</dt><dd>mind. 2 Jahre</dd></div><div><dt>Sprache</dt><dd>Deutsch</dd></div><div><dt>Form</dt><dd>vollständig, farbig</dd></div></dl>
</div>
</figure>
<div class="vergleich">
<section aria-labelledby="v1"><h2 id="v1">Gesetzliche Gewährleistung</h2><ul><li>gilt gegenüber uns als Verkäufer</li><li>mindestens zwei Jahre ab Lieferung</li><li>kostenlos, Sie müssen nichts tun</li><li>Reparatur oder Ersatz bei einem Mangel</li></ul></section>
<section aria-labelledby="v2"><h2 id="v2">Haltbarkeitsgarantie des Herstellers</h2><ul><li>freiwillig, zusätzlich zur Gewährleistung</li><li>bei Mahlgut fünf Jahre auf Kegel H1 und H2</li><li>Bedingungen im Garantie-Label am Produkt</li><li>ersetzt die Gewährleistung nicht</li></ul></section>
</div>
<p>Einen Mangel melden Sie an <a href="mailto:service@mahlgut.example">service@mahlgut.example</a> oder unter <a href="tel:+496341987650">06341 98765-0</a>. Den Rückversand zahlen wir.</p>
<p class="stand"><span class="platzhalter-text">Vom Kunden prüfen lassen:</span> Inhalt und Fristen dieser Seite. Stand 03.11.2026.</p>
</article>
<footer class="fuss" id="fuss">
<div class="fuss-innen">
<div><p class="claim-gross">Mahlgut, Landau in der Pfalz</p><p>Handmühlen mit Kegelmahlwerk, gefertigt und repariert in unserer Werkstatt am Queichufer.</p></div>
<nav aria-labelledby="f1"><h3 id="f1">Shop</h3><ul><li><a href="#start">Handmühlen</a></li><li><a href="#start">Zubehör</a></li><li><a href="#start">Ersatz-Mahlwerke</a></li><li><a href="#start">Gutscheine</a></li></ul></nav>
<nav aria-labelledby="f2"><h3 id="f2">Hilfe</h3><ul><li><a href="#start">Versand und Lieferung</a></li><li><a href="#start">Rückgabe</a></li><li><a href="#start">Mahlgrad-Hilfe</a></li><li><a href="#start">Kontakt</a></li></ul></nav>
<nav aria-labelledby="f3"><h3 id="f3">Rechtliches</h3><ul><li><a href="#start">Impressum</a></li><li><a href="#start">Datenschutz</a></li><li><a href="#start">AGB</a></li><li><a href="#start">Widerrufsbelehrung</a></li><li><a href="#start">Verträge hier kündigen</a></li><li><a href="#seite" class="hervor" data-zur-seite>Gesetzliche Gewährleistung</a></li></ul></nav>
</div>
<p class="fuss-unten"><span>© 2026 Mahlgut GmbH</span><span>Alle Preise inkl. MwSt.</span></p>
</footer>
<p class="recht" style="max-width:1440px;margin:0 auto;padding:16px var(--rand) 96px" id="recht"><span class="platzhalter-text">Vom Kunden prüfen lassen:</span> Einsatz der amtlichen Labels nach Art. 246 und 246a EGBGB. Das Label wird nicht nachgezeichnet: Die Demo zeigt bewusst nur einen Platzhalterrahmen. Marke, Produkt und Zahlen sind erfunden.</p>
</main>
<dialog class="voll" id="dlg" aria-labelledby="dlg-h">
<div class="dialog-innen">
<div class="dialog-kopf"><h2 id="dlg-h">Garantie-Label: Kegel H2</h2><button class="zu" type="button" id="dlg-zu" aria-label="Schließen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>
<figure class="label-ort" aria-labelledby="dlg-cap">
<figcaption><b id="dlg-cap">EU-Label zur Haltbarkeitsgarantie des Herstellers</b><span>volle Fassung</span></figcaption>
<div class="eu-platz" role="note" aria-label="Platzhalter für das amtliche EU-Garantie-Label">
<span class="marke-platz">Platzhalter · amtliche Vorlage</span>
<p class="anweisung">Amtliches EU-Label (Vorlage der EU-Kommission, Sprache der Seite) hier einsetzen, nicht verändern</p>
<dl><div><dt>Garantiedauer</dt><dd><span class="ziffern" data-jahre>5</span> Jahre</dd></div><div><dt>Marke</dt><dd>Mahlgut</dd></div><div><dt>Modell</dt><dd>Kegel H2</dd></div><div><dt>Garantiegeber</dt><dd>Mahlgut GmbH, Landau</dd></div><div><dt>Sprache</dt><dd>Deutsch</dd></div></dl>
</div>
</figure>
<p class="abgrenzung">Die Garantie gilt zusätzlich zu Ihrer gesetzlichen Gewährleistung gegenüber dem Verkäufer und ersetzt sie nicht.</p>
</div>
</dialog>
<div class="zeiger" id="zeiger" aria-hidden="true"></div>
<div class="pult">
<span>Variante</span>
<div class="gruppe" role="group" aria-label="Variante der Demo">
<button type="button" data-v="kaufbox" aria-pressed="true">Kaufbox</button>
<button type="button" data-v="garantie-label" aria-pressed="false">Garantie-Label</button>
<button type="button" data-v="footer-seite" aria-pressed="false">Footer und Seite</button>
</div>
<span data-nur-garantie>Garantie</span>
<div class="gruppe" role="group" aria-label="Herstellergarantie" data-nur-garantie>
<button type="button" data-jahre-setzen="5" aria-pressed="true">5 Jahre</button>
<button type="button" data-jahre-setzen="2" aria-pressed="false">2 Jahre</button>
</div>
<span class="werte" id="werte"></span>
</div>
<script>
(() => {
const html = document.documentElement;
const reduziert = () => html.classList.contains('reduziert');
const $ = (s, r = document) => r.querySelector(s);
const $$ = (s, r = document) => [...r.querySelectorAll(s)];
/* Herstellerdaten: das Garantie-Label erscheint nur bei mehr als zwei Jahren */
const GARANTIE = { jahre: 5, marke: 'Mahlgut', modell: 'Kegel H2' };
const zeigeGarantie = () => GARANTIE.jahre > 2 && GARANTIE.marke && GARANTIE.modell;
const VARIANTEN = ['kaufbox', 'garantie-label', 'footer-seite'];
const WERTE = {
'kaufbox': 'Leiste unter dem Preis · nicht aufklappbar',
'garantie-label': 'dialog auf 300 / zu 200 ms',
'footer-seite': 'Seite 300 ms expo.out, 8 px',
};
let V = 'kaufbox';
function render() {
const da = zeigeGarantie();
$('#garantie').hidden = !da;
$('#intern').hidden = da || V !== 'garantie-label';
$$('[data-jahre]').forEach(e => e.textContent = GARANTIE.jahre);
$$('[data-jahre-setzen]').forEach(b => b.setAttribute('aria-pressed', +b.dataset.jahreSetzen === GARANTIE.jahre));
$$('[data-nur-garantie]').forEach(e => e.hidden = V !== 'garantie-label');
}
function setzeV(v, url = true) {
V = VARIANTEN.includes(v) ? v : VARIANTEN[0];
document.body.dataset.v = V;
$$('.pult [data-v]').forEach(b => b.setAttribute('aria-pressed', b.dataset.v === V));
$('#werte').textContent = WERTE[V];
if (V !== 'footer-seite') zeigeSeite(false, false);
render();
if (url) { const q = new URLSearchParams(location.search); q.set('v', V); history.replaceState(null, '', '?' + q.toString() + location.hash); }
}
/* Farbe */
$$('input[name=farbe]').forEach(i => i.addEventListener('change', () => {
$('#muehle-bild').style.setProperty('--koerper', i.value);
$('#farbname').textContent = i.dataset.name;
$('#muehle-bild').setAttribute('aria-label', `Handmühle Kegel H2 in ${i.dataset.name}, Seitenansicht (Zeichnung)`);
}));
let korb = 0;
$('#kaufen').addEventListener('click', () => { korb++; $('#korb-zahl').textContent = korb; $('#meldung').textContent = `Kegel H2 in ${$('#farbname').textContent} liegt im Warenkorb.`; });
/* Dialog mit dem vollen Garantie-Label */
const dlg = $('#dlg'), auf = $('#garantie-auf');
auf.addEventListener('click', () => dlg.showModal());
$('#dlg-zu').addEventListener('click', () => dlg.close());
dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); });
dlg.addEventListener('close', () => { if (!html.classList.contains('vorfuehrung')) auf.focus(); });
/* Seite „Gesetzliche Gewährleistung“ (in der Demo ohne Seitenwechsel) */
const seite = $('#seite');
function zeigeSeite(an, fokus = true) {
seite.hidden = !an;
$('#shop-ende').hidden = an;
if (an) {
if (!reduziert()) { seite.classList.remove('kommt'); void seite.offsetWidth; seite.classList.add('kommt'); }
scrollTo(0, 0);
if (fokus) $('#seite-h').focus({ preventScroll: true });
}
}
$$('[data-zur-seite]').forEach(a => a.addEventListener('click', e => { e.preventDefault(); if (V !== 'footer-seite') setzeV('footer-seite'); zeigeSeite(true); }));
$('#zurueck').addEventListener('click', () => { zeigeSeite(false); $('[data-zur-seite].hervor').focus(); });
$$('.pult [data-v]').forEach(b => b.addEventListener('click', () => { pause(); setzeV(b.dataset.v); }));
$$('[data-jahre-setzen]').forEach(b => b.addEventListener('click', () => { pause(); GARANTIE.jahre = +b.dataset.jahreSetzen; render(); }));
/* Vorführung */
const zeiger = $('#zeiger');
let timer = [], laeuft = false;
const nach = (ms, fn) => timer.push(setTimeout(fn, ms));
function zeigeAuf(el, druck) {
if (!el) return;
const r = el.getBoundingClientRect();
zeiger.style.transform = `translate(${r.left + Math.min(r.width / 2, 140)}px, ${r.top + r.height / 2}px)`;
if (druck) nach(reduziert() ? 50 : 650, () => { zeiger.classList.add('drueckt'); setTimeout(() => zeiger.classList.remove('drueckt'), 160); });
}
function lauf() {
timer.forEach(clearTimeout); timer = [];
if (dlg.open) dlg.close();
GARANTIE.jahre = 5; render();
if (V === 'kaufbox') {
scrollTo(0, 0);
$('input[name=farbe][value="#c9ccd0"]').click();
nach(300, () => zeigeAuf($('.kaufbox .preis')));
nach(1100, () => zeigeAuf($('.kaufbox .eu-platz .anweisung')));
nach(2600, () => zeigeAuf($('.kaufbox .abgrenzung')));
nach(3800, () => zeigeAuf($$('input[name=farbe]')[1].closest('label'), true));
nach(4500, () => { $$('input[name=farbe]')[1].click(); zeigeAuf($('.kaufbox .eu-platz')); });
nach(6200, lauf);
} else if (V === 'garantie-label') {
scrollTo(0, 0);
nach(300, () => zeigeAuf($('#garantie .kurz')));
nach(1200, () => zeigeAuf(auf, true));
nach(1900, () => dlg.showModal());
nach(2400, () => zeigeAuf($('#dlg .eu-platz dl')));
nach(4400, () => zeigeAuf($('#dlg-zu'), true));
nach(5000, () => dlg.close());
nach(5600, () => { GARANTIE.jahre = 2; render(); zeigeAuf($('.galerie')); });
nach(7400, () => { GARANTIE.jahre = 5; render(); });
nach(8000, lauf);
} else {
zeigeSeite(false, false);
const ziel = $('[data-zur-seite].hervor');
ziel.scrollIntoView({ block: 'center', behavior: 'instant' });
nach(300, () => { zeigeAuf(ziel, true); ziel.classList.add('zeigt'); });
nach(1100, () => { ziel.classList.remove('zeigt'); zeigeSeite(true, false); zeigeAuf($('#seite-h')); });
nach(2200, () => zeigeAuf($('.seite .eu-platz')));
nach(4000, () => { $('.vergleich').scrollIntoView({ block: 'center', behavior: reduziert() ? 'instant' : 'smooth' }); });
nach(4600, () => zeigeAuf($('#v2')));
nach(6400, lauf);
}
}
function neustart() {
timer.forEach(clearTimeout); timer = [];
laeuft = false; html.classList.remove('vorfuehrung');
if (dlg.open) dlg.close();
GARANTIE.jahre = 5; zeigeSeite(false, false); render(); scrollTo(0, 0);
}
function vorfuehren() { laeuft = true; html.classList.add('vorfuehrung'); lauf(); }
function pause() { timer.forEach(clearTimeout); timer = []; if (laeuft) { laeuft = false; html.classList.remove('vorfuehrung'); } }
function weiter() { vorfuehren(); }
setzeV(new URLSearchParams(location.search).get('v'), false);
})();
</script>
</body>
</html>