Zeichnungsfamilie für Produkte, Läden und Leistungen
Eine Strichsprache für Produkte, Filialen und Leistungen: gleiche Linie, gleiche Ecken, ein Akzent je Bild, damit ein Raster ohne Foto wie aus einer Hand wirkt.
Bäckerei, Konditorei, Hofladen: Sortiment ohne eigene Fotos, Produkte auf einer gemeinsamen Thekenlinie mit Preisschild, Grundpreis und Allergenen.
Eine Zeichensprache aus wenigen festen Regeln: eine Strichstärke, die bei jeder Größe gleich bleibt, eine Eckform, eine Fläche in einem Ton, ein einziger Akzent je Bild aus der Signalfarbe des Rezepts und ein Raster von 96 Einheiten mit gemeinsamer Standlinie. Aus diesen Regeln entstehen Produktbilder (Brot, Brezel, Torte), Ladenfassaden und Leistungsbilder für Werkstätten, die wie aus einer Hand aussehen. Die Bausteine sind SVG-Symbole mit currentColor und CSS-Variablen; das Rezept stellt nur die Werte ein. Beim ersten Sehen zeichnet sich die Kontur einmal (stroke-dashoffset), danach steht sie.
Viele kleine Betriebe haben keine guten Fotos. Stockfotos zeigen fremde Brote, fremde Läden und fremde Autos und wirken genau deshalb unehrlich. Eine konsequente Zeichnung lügt nicht: Sie sagt erkennbar „so sieht es ungefähr aus“ und trägt trotzdem eine eigene Handschrift. Gleiche Strichstärke, gleiche Ecken und ein einziger Akzent machen aus vielen Einzelbildern eine Familie. Das liest sich hochwertiger als ein Raster aus Fotos mit uneinheitlichem Licht.
Wann einsetzen
Wann Zeichnung statt Foto: (1) Es gibt keine eigenen Fotos in einheitlichem Licht, und ein Stockfoto würde das eigene Produkt, den eigenen Laden oder das eigene Auto vortäuschen. (2) Das Sortiment wechselt oft oder ist zu groß für ein Fotoshooting (Backwaren, Leistungen einer Werkstatt). (3) Mehrere Filialen sollen auf einen Blick unterscheidbar sein. (4) Leistungen sind unsichtbar oder unschön im Foto (Bremsen, Klimaservice, Batterie). (5) Icons, Leerzustände und Fehlerseiten sollen zur Produktwelt passen. Branchen: Bäckerei und Konditorei, Laden mit Filialen, Kfz-Werkstatt, Handwerk, Hofladen, Apotheke.
Wann nicht
Wenn es gute eigene Fotos gibt: Fotos verkaufen Essen, Räume und Menschen besser, die Zeichnung ergänzt dann nur Icons und Leerzustände. Nicht für Menschen und Team (dafür echte Fotos mit Einwilligung), nicht für Immobilien, Fahrzeugbestand oder Ware, deren genaues Aussehen kaufentscheidend ist (Farbe, Zustand, Maße). Nicht mischen: Zeichnung und Stockfoto auf derselben Seite heben sich gegenseitig auf. Keine Zeichnung, die eine bestimmte fremde Marke, ein Prüfsiegel oder ein Herstellerlogo nachbildet.
Varianten
- backwaren: Theken-Raster mit Brot, Brötchen, Brezel und Torte, Strich rund, Fläche versetzt, Akzent Krustenrot nur auf Einschnitt oder Füllung
- laden: vier Filialfassaden mit unterscheidbaren Dachformen, Strich eckig wie Etiketten, Akzent Schaufenstergrün nur auf Markise oder Tür, dazu Icons aus derselben Hand
- werkzeug: Leistungsbilder für die Kfz-Werkstatt als technische Zeichnung mit Maßlinie, Strich gerade, Akzent Verkehrsgelb auf dem Teil, um das es geht
Umsetzung
- Ein verstecktes <svg> enthält alle Zeichnungen als <symbol viewBox="0 0 96 96">, jede auf demselben Raster mit Standlinie bei y = 84 und höchstens 80 Einheiten Breite. Jedes Teil trägt eine Rolle als Klasse:
.fFläche,.kKontur,.dDetail,.aAkzent. - Das Bild ist <svg class="zf" role="img" aria-label="…"><use href="#roggenlaib"/></svg>.
- Die Regeln stehen als CSS-Variablen am Bild oder am Rezept:
--zf-strich(Konturstärke in px),--zf-strich-fein(Details),--zf-ecke(stroke-linejoin round, miter oder bevel),--zf-ende(stroke-linecap),--zf-farbe(Linie, sonst currentColor),--zf-flaeche(Füllton),--zf-akzent(Signalfarbe),--zf-versatz-xund -y (die Fläche liegt um wenige Einheiten versetzt unter der Kontur wie ein leicht verschobener Druck). - Alle Linien haben
vector-effect: non-scaling-stroke, deshalb bleibt die Strichstärke bei 40 px und bei 400 px gleich. Variablen erben in den Schatten-Baum von <use>; einfache Klassen-Selektoren wie.zf-kgreifen dort, Nachfahren-Selektoren über die Grenze hinweg nicht. - Zeichen-Reveal: Jede Kontur hat pathLength="1" und
stroke-dasharray: 1; stroke-dashoffset folgt der registrierten Variable--zf-zug(@property, <number>), die am Bild von 1 auf 0 läuft, einmal, wenn das Bild zu 35 % sichtbar ist. Die Fläche blendet danach ein. - Ohne JavaScript und bei reduzierter Bewegung stehen die Bilder fertig. Bilder für Inhalte bekommen role="img" und einen Alternativtext (Produktname), Schmuckbilder aria-hidden.
Robust umsetzen
Telefon. Das Raster wird zweispaltig, die Zeichnung behält ihre Strichstärke, weil die Linie nicht mitskaliert. Unter 360 px einspaltig mit Zeichnung links und Text rechts. Kein Hover: der Versatz bleibt stehen, Tippen öffnet direkt das Produkt.
Ohne Bewegung. Die Zeichnungen stehen fertig, kein Zeichnen, kein Versatz-Wechsel. Nur der Fokusring ändert sich.
Barrierefrei. Produkt- und Fassadenbilder haben role="img" mit aria-label (Produkt bzw. Filiale mit Straße), weil sie Inhalt tragen; reine Schmuckbilder und Icons neben einem Wort sind aria-hidden. Die Linie hat mindestens 3:1 zum Grund (Nicht-Text-Kontrast), die Bedeutung liegt nie nur in der Akzentfarbe. Im Kontrastmodus (forced-colors) erben Linien CanvasText und Flächen Canvas, die Zeichnung bleibt lesbar.
Code
<!DOCTYPE html>
<!--
Zeichnungsfamilie für Produkte, Läden und Leistungen
Fundus · Glas & Material · https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/
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>Zeichnungsfamilie für Produkte, Läden und Leistungen · 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: 'Shrikhand'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/shrikhand@latest/latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/onest:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Libre Caslon Display'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/libre-caslon-display@latest/latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/mona-sans:vf@latest/latin-wdth-normal.woff2') format('woff2-variations'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Google Sans Flex'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 1000; 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; }
/* ============ Zeichnungsfamilie: das System ============
Jede Zeichnung ist ein <symbol viewBox="0 0 96 96"> mit Standlinie y = 84.
Rollen: .zf-f Fläche (versetzt) · .zf-k Kontur · .zf-d Detail · .zf-a Akzentlinie · .zf-af Akzentfläche
.zf-p Punkte · .zf-t Beschriftung · .zf-m Maßlinie · .zf-x Teil, das im Hover herausrückt.
Das Rezept stellt nur die Variablen ein (--zf-strich, --zf-ecke, --zf-flaeche, --zf-akzent, --zf-vx/--zf-vy …). */
@property --zf-zug { syntax: '<number>'; inherits: true; initial-value: 0; } /* 1 = ungezeichnet, 0 = fertig */
@property --zf-fd { syntax: '<number>'; inherits: true; initial-value: 1; } /* Deckkraft der Flächen */
@property --zf-vx { syntax: '<number>'; inherits: true; initial-value: 0; } /* Versatz der Fläche in Einheiten */
@property --zf-vy { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --zf-explo { syntax: '<number>'; inherits: true; initial-value: 0; } /* Hover: Teil rückt heraus */
.zf { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; color: var(--zf-farbe);
transition: --zf-vx var(--dauer-ui) var(--kurve), --zf-vy var(--dauer-ui) var(--kurve), --zf-explo var(--dauer-ui) var(--kurve); }
.zf-f { fill: var(--zf-flaeche); transform: translate(calc(var(--zf-vx) * 1px), calc(var(--zf-vy) * 1px)); opacity: var(--zf-fd); }
.zf-k, .zf-d, .zf-a, .zf-m { fill: none; stroke: currentColor; stroke-width: calc(var(--zf-strich) * var(--zf-skal, 1)); vector-effect: var(--zf-ve, non-scaling-stroke);
stroke-linejoin: var(--zf-ecke); stroke-linecap: var(--zf-ende); stroke-miterlimit: 4; stroke-dasharray: var(--zf-dash, none); stroke-dashoffset: var(--zf-zug); }
.zf-d, .zf-m { stroke-width: calc(var(--zf-strich-fein) * var(--zf-skal, 1)); }
.zf-a { stroke: var(--zf-akzent); }
.zf-af { fill: var(--zf-akzent); opacity: var(--zf-fd); }
.zf-p { fill: currentColor; opacity: var(--zf-fd); }
.zf-t { fill: currentColor; font: 500 4.4px/1 var(--zf-schrift); letter-spacing: .04em; opacity: var(--zf-fd); font-variant-numeric: tabular-nums; }
.zf-t-flanke { font-size: 5.2px; letter-spacing: .12em; }
.zf-x { transform: translate(calc(var(--dx, 0) * var(--zf-explo) * 1px), calc(var(--dy, 0) * var(--zf-explo) * 1px)); }
/* Zeichen-Reveal: nur während des Zeichnens ohne non-scaling-stroke, weil pathLength sonst falsch strichelt */
.zf.zf-zu { --zf-ve: none; --zf-dash: 1; --zf-zug: 1; --zf-fd: 0; transition: none; }
.zf.zf-zu.zf-zieht { --zf-zug: 0; --zf-fd: 1; transition: --zf-zug var(--dauer-zug) var(--kurve) var(--zf-verz, 0ms), --zf-fd var(--dauer-ui) linear calc(var(--zf-verz, 0ms) + 600ms); }
/* Raster zeigen */
.zf-r { display: none; }
[data-raster] .zf-r { display: inline; }
.zf-rl { fill: none; stroke: var(--zf-raster); stroke-width: .5px; vector-effect: non-scaling-stroke; opacity: .5; }
.zf-rk { fill: none; stroke: var(--zf-raster); stroke-width: .75px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; opacity: .8; }
.zf-rs { fill: none; stroke: var(--zf-raster); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* ============ Demo-Grundlage ============ */
:root { --kurve: cubic-bezier(0.37, 0, 0.63, 1); --dauer-zug: 900ms; --dauer-ui: 300ms; --dauer-zurueck: 200ms; }
* { box-sizing: border-box; margin: 0; }
html { background: #F7F1E6; color: #241B14; }
html:has([data-welt=laden]:not([hidden])) { background: #F5F1E8; }
html:has([data-welt=werkzeug]:not([hidden])) { background: #F2F1ED; }
body { min-height: 100svh; font: 400 1.0625rem/1.6 var(--schrift-text, system-ui); background: var(--grund); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fokus, currentColor); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.welt[hidden] { display: none; }
.rahmen { width: min(100% - 2 * var(--rand), 1320px); margin-inline: auto; }
.ziffern { font-variant-numeric: tabular-nums; }
/* ---------- Welt 1: Backhaus Wendeborn, Einbeck (lebensmittelhandwerk-theke) ---------- */
[data-welt=backwaren] {
--grund: #F7F1E6; --text: #241B14; --flaeche: #EBD8BB; --dunkel: #2B211B; --signal: #8A3C12; --leise: #665746; --linie: #DDCDB4;
--schrift-kopf: 'Shrikhand', Georgia, serif; --schrift-text: 'Onest', system-ui, sans-serif; --rand: clamp(16px, 4vw, 56px); --fokus: #8A3C12;
--zf-strich: 2; --zf-strich-fein: 1.25; --zf-strich-gross: 3.5; --zf-strich-gross-fein: 2; --zf-ecke: round; --zf-ende: round; --zf-farbe: #241B14; --zf-flaeche: #EBD8BB; --zf-akzent: #8A3C12;
--zf-vx: 3; --zf-vy: 2; --zf-raster: #8A3C12; --zf-schrift: 'Onest', sans-serif;
background: var(--grund); color: var(--text); font-family: var(--schrift-text);
}
.bw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-block: 22px; border-bottom: 1px solid var(--linie); }
.bw-marke { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.bw-marke b { font: 400 1.75rem/1 var(--schrift-kopf); letter-spacing: -.01em; }
.bw-marke span { font-size: .875rem; color: var(--leise); font-weight: 500; }
.bw-nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-weight: 500; font-size: .9375rem; }
.bw-nav a:not(.pille) { text-decoration: none; }
.pille { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--signal); color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; }
.bw-auftakt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(12px, 2vw, 28px); align-items: end; padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 40px); }
.bw-auftakt__text { grid-column: 1 / span 6; padding-bottom: clamp(8px, 2vw, 32px); }
.bw-tag { font-weight: 600; font-size: .9375rem; color: var(--leise); }
.bw-auftakt h1 { font: 400 clamp(2.75rem, 1.2rem + 5.2vw, 6rem)/.98 var(--schrift-kopf); letter-spacing: -.01em; margin: 14px 0 20px; text-wrap: balance; }
.bw-auftakt p.lead { max-width: 40ch; font-size: 1.125rem; }
.bw-held { grid-column: 7 / -1; position: relative; margin-bottom: 2.2em; }
.bw-held .zf { width: 100%; aspect-ratio: 96 / 58; }
.zf--gross { --zf-strich: var(--zf-strich-gross); --zf-strich-fein: var(--zf-strich-gross-fein); }
.bw-notiz { position: absolute; font-size: .875rem; line-height: 1.35; font-weight: 500; max-width: 15ch; }
.bw-notiz--1 { right: calc(70 / 96 * 100% + 10px); top: 2%; text-align: right; }
.bw-notiz--2 { left: calc(70 / 96 * 100% + 10px); top: 2%; }
.bw-notiz--3 { left: 0; bottom: -2.2em; font-variant-numeric: tabular-nums; }
.zf-hinweis { fill: none; stroke: var(--zf-farbe); stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-dasharray: var(--zf-dash, none); stroke-dashoffset: var(--zf-zug); }
.zf-hinweis-punkt { fill: var(--zf-farbe); opacity: var(--zf-fd); }
.bw-notiz--3::before { display: none; }
.bw-theke { padding-block: clamp(24px, 4vw, 56px) clamp(40px, 6vw, 88px); }
.bw-theke__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: clamp(8px, 2vw, 20px); }
.bw-theke h2 { font: 400 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem)/1.05 var(--schrift-kopf); }
.bw-theke__kopf p { font-size: .9375rem; color: var(--leise); max-width: 52ch; }
.auslage { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(20px, 4vw, 56px); }
.ware { position: relative; display: flex; flex-direction: column; }
.ware .zf { width: 86%; aspect-ratio: 96 / 64; margin: 0 auto -1px; }
.ware__schild { border-top: 2px solid var(--text); padding: 14px clamp(8px, 1.4vw, 18px) 0; }
.ware:not(:nth-child(4n)) .ware__schild { margin-right: 0; }
.ware h3 { font: 600 1.125rem/1.25 var(--schrift-text); margin-bottom: 6px; }
.ware h3 a { text-decoration: none; }
.ware h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.ware h3 a:focus-visible { outline: none; }
.ware h3 a:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 4px; }
.preis { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--flaeche); font-weight: 500; font-variant-numeric: tabular-nums; }
.grund { margin-top: 6px; font-size: .875rem; color: var(--leise); font-weight: 500; font-variant-numeric: tabular-nums; }
.allergene { margin-top: 6px; font-size: .875rem; font-weight: 500; color: var(--leise); }
.allergene b { color: var(--text); font-weight: 700; }
.bw-fuss { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: space-between; padding-block: 18px 28px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--leise); }
@media (hover: hover) {
[data-welt=backwaren] .ware:hover .zf, [data-welt=backwaren] .ware:focus-within .zf,
[data-welt=laden] .filiale:hover .zf, [data-welt=laden] .filiale:focus-within .zf { --zf-vx: 0; --zf-vy: 0; }
[data-welt=werkzeug] .blatt:hover .zf, [data-welt=werkzeug] .blatt:focus-within .zf { --zf-explo: 4; }
}
.zeige .zf { --zf-vx: 0 !important; --zf-vy: 0 !important; --zf-explo: 4 !important; }
/* ---------- Welt 2: Buchhandlung Lohbeck, Soest (laden-vor-ort-sortiment) ---------- */
[data-welt=laden] {
--grund: #F5F1E8; --text: #211F1C; --flaeche: #E2D3B8; --dunkel: #2C2A26; --signal: #2E5B45; --leise: #615B51; --linie: #D9CFBE;
--schrift-kopf: 'Libre Caslon Display', Georgia, serif; --schrift-text: 'Familjen Grotesk', system-ui, sans-serif; --rand: clamp(16px, 4vw, 56px); --fokus: #2E5B45;
--zf-strich: 1.5; --zf-strich-fein: 1; --zf-strich-gross: 2.5; --zf-strich-gross-fein: 1.5; --zf-ecke: miter; --zf-ende: square; --zf-farbe: #211F1C; --zf-flaeche: #E2D3B8; --zf-akzent: #2E5B45;
--zf-vx: 2.5; --zf-vy: 0; --zf-raster: #2E5B45; --zf-schrift: 'Familjen Grotesk', sans-serif;
background: var(--grund); color: var(--text); font-family: var(--schrift-text);
}
.ld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-block: 20px; }
.ld-marke { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.ld-marke b { font: 400 2rem/1 var(--schrift-kopf); letter-spacing: -.01em; }
.ld-marke span { font-size: .8125rem; color: var(--leise); letter-spacing: .02em; }
.ld-nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-size: .9375rem; }
.ld-nav a:not(.knopf) { text-decoration: none; }
.knopf { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 2px; background: var(--signal); color: #fff; text-decoration: none; font-weight: 600; }
.ld-auftakt { padding-block: clamp(24px, 5vw, 72px) clamp(12px, 2vw, 24px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px clamp(12px, 2vw, 28px); align-items: end; }
.ld-auftakt h1 { grid-column: 1 / span 8; font: 400 clamp(2.5rem, 1.5rem + 4vw, 5rem)/1 var(--schrift-kopf); letter-spacing: -.015em; text-wrap: balance; }
.ld-auftakt h1 em { font-style: italic; }
.ld-auftakt p { grid-column: 9 / -1; max-width: 36ch; }
.strasse { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; margin-top: clamp(16px, 3vw, 40px); }
.filiale { position: relative; }
.filiale .zf { width: 94%; margin: 0 auto -1px; }
.filiale__schild { border-top: 2px solid var(--text); background: linear-gradient(var(--text), var(--text)) 0 4px / 100% 1px no-repeat; padding: 18px clamp(8px, 1.4vw, 18px) 0; }
.filiale h3 { font: 400 1.5rem/1.1 var(--schrift-kopf); margin-bottom: 6px; }
.filiale h3 a { text-decoration: none; }
.filiale h3 a::after { content: ''; position: absolute; inset: 0; }
.filiale h3 a:focus-visible { outline: none; }
.filiale h3 a:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 4px; }
.filiale address { font-style: normal; color: var(--leise); font-size: .9375rem; }
.status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: .9375rem; }
.status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--leise); }
.status[data-offen]::before { background: var(--signal); }
.filiale__wege { position: relative; z-index: 1; display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 8px; font-size: .9375rem; }
.ld-dienste { margin-block: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 64px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(12px, 2vw, 28px); }
.ld-dienste h2 { grid-column: 1 / -1; font: 400 clamp(1.875rem, 1.3rem + 2vw, 3rem)/1.05 var(--schrift-kopf); }
.dienst { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.dienst .zf { width: 64px; grid-row: span 2; }
.dienst h3 { font: 600 1.0625rem/1.3 var(--schrift-text); padding-top: 6px; }
.dienst p { font-size: .9375rem; color: var(--leise); }
/* ---------- Welt 3: Kfz-Meisterbetrieb Hölscher, Meppen (kfz-werkstatt-autohaus) ---------- */
[data-welt=werkzeug] {
--grund: #F2F1ED; --text: #121314; --flaeche: #DCDDD9; --dunkel: #232629; --signal: #F5B700; --leise: #595E63; --linie: rgba(89, 94, 99, .35);
--schrift-kopf: 'Mona Sans', system-ui, sans-serif; --schrift-text: 'Google Sans Flex', system-ui, sans-serif; --rand: clamp(16px, 3vw, 40px); --fokus: #121314;
--zf-strich: 1.75; --zf-strich-fein: 1; --zf-strich-gross: 3; --zf-strich-gross-fein: 1.5; --zf-ecke: miter; --zf-ende: butt; --zf-farbe: #121314; --zf-flaeche: #DCDDD9; --zf-akzent: #F5B700;
--zf-vx: 0; --zf-vy: 0; --zf-raster: #3E6FB0; --zf-schrift: 'Google Sans Flex', sans-serif;
background: var(--grund); color: var(--text); font-family: var(--schrift-text);
}
.kz-band { background: var(--dunkel); color: #fff; --fokus: #F5B700; }
.kz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-block: 16px; }
.kz-marke { text-decoration: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kz-marke b { font: 800 1.75rem/1 var(--schrift-kopf); font-stretch: 80%; text-transform: uppercase; letter-spacing: .01em; }
.kz-marke span { font-size: .875rem; color: #B9BEC4; }
.kz-nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-size: .9375rem; }
.kz-nav a:not(.taste) { text-decoration: none; }
.taste { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 4px; background: var(--signal); color: #121314; font-weight: 700; text-decoration: none; }
.kz-auftakt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px clamp(12px, 2vw, 24px); align-items: end; padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 36px); }
.kz-auftakt h1 { grid-column: 1 / span 8; font: 800 clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem)/.95 var(--schrift-kopf); font-stretch: 80%; letter-spacing: -.005em; text-transform: uppercase; }
.kz-auftakt p { grid-column: 9 / -1; color: var(--leise); max-width: 38ch; }
.blaetter { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); padding-bottom: clamp(40px, 6vw, 80px); }
.blatt { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 8px; background: #F7F6F3; overflow: hidden; }
.blatt__zeichnung { padding: clamp(14px, 2vw, 24px) clamp(18px, 3vw, 40px) 8px; }
.blatt .zf { width: min(100%, 300px); margin-inline: auto; }
.feld { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 92px; border-top: 1px solid var(--linie); margin-top: auto; }
.feld > * { padding: 10px 14px; }
.feld > * + * { border-left: 1px solid var(--linie); }
.feld .pos { font: 600 .75rem/1.2 var(--schrift-text); color: var(--leise); letter-spacing: .06em; text-transform: uppercase; display: flex; flex-direction: column; gap: 4px; }
.feld .pos b { font: 800 1.25rem/1 var(--schrift-kopf); font-stretch: 80%; color: var(--text); letter-spacing: 0; }
.feld h3 { font: 700 1.0625rem/1.25 var(--schrift-text); }
.feld h3 a { text-decoration: none; }
.feld h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 8px; }
.feld h3 a:focus-visible { outline: none; }
.feld h3 a:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 3px; }
.feld .inkl { font-size: .875rem; color: var(--leise); margin-top: 2px; }
.feld .betrag { font: 800 1.5rem/1 var(--schrift-kopf); font-stretch: 80%; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; white-space: nowrap; }
.feld .betrag small { font: 500 .75rem/1.2 var(--schrift-text); color: var(--leise); margin-bottom: 4px; }
.kz-fuss { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: space-between; padding-block: 18px 28px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--leise); }
/* ---------- Pult ---------- */
.pult { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 10px; background: rgba(18, 18, 20, .92); color: #f3f2ee; font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.pult .gruppe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pult .gruppe > span { color: rgba(243, 242, 238, .72); margin-right: 4px; }
.pult button { background: transparent; color: inherit; border: 1px solid rgba(243, 242, 238, .3); border-radius: 5px; height: 28px; padding: 0 9px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.pult button[aria-pressed=true] { background: #f3f2ee; color: #111417; border-color: #f3f2ee; }
.pult button:focus-visible { outline: 2px solid #f3f2ee; outline-offset: 2px; }
.pult dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; text-transform: none; letter-spacing: .02em; }
.pult dt { color: rgba(243, 242, 238, .72); }
.pult dd { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.pult dd i { width: 10px; height: 10px; border-radius: 2px; flex: none; border: 1px solid rgba(243, 242, 238, .4); }
/* ---------- Telefon ---------- */
@media (max-width: 900px) {
.bw-auftakt__text, .bw-held { grid-column: 1 / -1; }
.bw-held { margin-top: 8px; }
.auslage, .strasse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-auftakt h1, .ld-auftakt p, .kz-auftakt h1, .kz-auftakt p { grid-column: 1 / -1; }
.ld-dienste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blaetter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.blaetter, .ld-dienste { grid-template-columns: minmax(0, 1fr); }
.bw-notiz { font-size: .8125rem; }
.bw-nav a:not(.pille), .ld-nav a:not(.knopf), .kz-nav a:not(.taste) { display: none; }
.feld { grid-template-columns: auto minmax(0, 1fr); }
.feld .betrag { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linie); flex-direction: row; justify-content: space-between; align-items: baseline; }
}
@media (max-width: 360px) {
.auslage { grid-template-columns: minmax(0, 1fr); }
.ware { display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: end; }
.ware .zf { width: 100%; }
.ware__schild { border-top: 0; border-left: 2px solid var(--text); padding: 0 0 0 12px; }
.strasse { grid-template-columns: minmax(0, 1fr); }
.pille, .knopf, .taste { padding: 0 14px; }
}
/* ---------- Vorschau, reduziert, Kontrast ---------- */
.vorschau body { overflow: hidden; }
.vorschau .bw-fuss, .vorschau .ld-dienste, .vorschau .kz-fuss { display: none; }
:root.reduziert * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
:root.reduziert .zf { --zf-zug: 0 !important; --zf-fd: 1 !important; }
@media (forced-colors: active) {
.zf { --zf-farbe: CanvasText; --zf-flaeche: Canvas; --zf-akzent: CanvasText; color: CanvasText; }
button, [role=button], [role=tab], [role=switch], input, select, textarea { border: 1px solid ButtonText !important; }
}
</style>
</head>
<body>
<!-- zf:symbole: alle Zeichnungen einmal, eingesetzt per <use href="#…"> -->
<svg width="0" height="0" style="position: absolute" aria-hidden="true" focusable="false"><defs><symbol id="roggenlaib" viewBox="0 0 96 96"><path class="zf-f" d="M12 84 C11 70 16 56 28 47 C35 42 41 40.5 48 40.5 C55 40.5 61 42 68 47 C80 56 85 70 84 84 Z"/><path class="zf-k" pathLength="1" d="M12 84 C11 70 16 56 28 47 C35 42 41 40.5 48 40.5 C55 40.5 61 42 68 47 C80 56 85 70 84 84 Z"/><path class="zf-d" pathLength="1" d="M24 66 L38 54 M30 76 L52 57 M44 80 L64 62 M58 80 L72 68 M26 58 L48 78 M36 52 L62 76 M50 50 L72 70"/><path class="zf-a" pathLength="1" d="M25 62 C34 54 50 50.5 66 54"/></symbol><symbol id="dinkelkruste" viewBox="0 0 96 96"><path class="zf-f" d="M18 84 V58 C18 55 19.5 53 22 52.5 C21 44 30 37 48 37 C66 37 75 44 74 52.5 C76.5 53 78 55 78 58 V84 Z"/><path class="zf-k" pathLength="1" d="M18 84 V58 C18 55 19.5 53 22 52.5 C21 44 30 37 48 37 C66 37 75 44 74 52.5 C76.5 53 78 55 78 58 V84 Z"/><path class="zf-d" pathLength="1" d="M18 61 H78 M26 70 V78 M38 70 V78 M50 70 V78 M62 70 V78 M70 70 V78"/><circle class="zf-p" cx="32" cy="46" r="1.1"/><circle class="zf-p" cx="39" cy="42.5" r="1.1"/><circle class="zf-p" cx="46" cy="41" r="1.1"/><circle class="zf-p" cx="53" cy="41.5" r="1.1"/><circle class="zf-p" cx="60" cy="43.5" r="1.1"/><circle class="zf-p" cx="66" cy="47" r="1.1"/><circle class="zf-p" cx="43" cy="46" r="1.1"/><circle class="zf-p" cx="57" cy="47" r="1.1"/><path class="zf-a" pathLength="1" d="M27 50.5 C35 46 46 44.5 56 45 C62 45.4 66 46.6 69 48"/></symbol><symbol id="kuerbiskernbrot" viewBox="0 0 96 96"><path class="zf-f" d="M8 84 C8 74 14 65 26 61 C34 58.5 42 58 48 58 C54 58 62 58.5 70 61 C82 65 88 74 88 84 Z"/><path class="zf-k" pathLength="1" d="M8 84 C8 74 14 65 26 61 C34 58.5 42 58 48 58 C54 58 62 58.5 70 61 C82 65 88 74 88 84 Z"/><ellipse class="zf-p" cx="20" cy="74" rx="1.6" ry=".9" transform="rotate(-30 20 74)"/><ellipse class="zf-p" cx="30" cy="77" rx="1.6" ry=".9" transform="rotate(20 30 77)"/><ellipse class="zf-p" cx="40" cy="74" rx="1.6" ry=".9" transform="rotate(-10 40 74)"/><ellipse class="zf-p" cx="52" cy="77" rx="1.6" ry=".9" transform="rotate(30 52 77)"/><ellipse class="zf-p" cx="62" cy="74" rx="1.6" ry=".9" transform="rotate(-25 62 74)"/><ellipse class="zf-p" cx="74" cy="76" rx="1.6" ry=".9" transform="rotate(15 74 76)"/><ellipse class="zf-p" cx="34" cy="69" rx="1.6" ry=".9" transform="rotate(40 34 69)"/><ellipse class="zf-p" cx="68" cy="69" rx="1.6" ry=".9" transform="rotate(-35 68 69)"/><ellipse class="zf-p" cx="47" cy="80" rx="1.6" ry=".9" transform="rotate(0 47 80)"/><path class="zf-a" pathLength="1" d="M22 70 L31 62.5 M39 69 L48 61.5 M56 69 L65 62.5"/></symbol><symbol id="kaiserbroetchen" viewBox="0 0 96 96"><path class="zf-f" d="M20 84 C18 74 25 64 35 61 C40 59.6 44 59 48 59 C52 59 56 59.6 61 61 C71 64 78 74 76 84 Z"/><path class="zf-k" pathLength="1" d="M20 84 C18 74 25 64 35 61 C40 59.6 44 59 48 59 C52 59 56 59.6 61 61 C71 64 78 74 76 84 Z"/><path class="zf-d" pathLength="1" d="M48 60 C45 66 38 70 29 71.5 M48 60 C51 66 58 70 67 71.5 M48 60 C44 67 41 74 40 81 M48 60 C52 67 55 74 56 81"/><path class="zf-a" pathLength="1" d="M48 60 C47.4 66 47.6 72 48 78"/></symbol><symbol id="laugenbrezel" viewBox="0 0 96 96"><mask id="brezel-m1" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96"><rect width="96" height="96" fill="#fff"/><path d="M79.7 55.9 L79.6 52.8 L79.3 49.7 L78.7 46.9 L77.9 44.1 L76.9 41.6 L75.8 39.3 L74.5 37.1 L73 35.2 L71.4 33.5 L69.6 32 L67.7 30.8 L65.6 30 L63.5 29.4 L61.3 29.2 L59.1 29.4 L56.9 30 L54.8 30.9 L53 32.2 L51.6 33.3 L50.3 34.5 L49.1 35.8 L48 37.2 L47 38.7 L46 40.2 L45.1 41.8 L44.2 43.5 L43.3 45.1 L42.5 46.9 L41.8 48.6 L41 50.4 L40.3 52.1 L39.6 53.9 L38.9 55.7 L38.3 57.4 L37.6 59.1 L37 60.8 L36.7 61.6 L36.4 62.4 L36 63.2 L35.7 63.9 L35.4 64.7 L35.1 65.4 L34.8 66.1 L34.5 66.8 L34.2 67.5 L33.9 68.2 L33.5 68.9 L33.2 69.6 L32.9 70.3 L32.6 71 L32.3 71.6 L32 72.3 L31.6 73 L31.3 73.7 L32 72.7 L33.1 72.2 L34.2 72 L35.3 72.3 L36.3 73 L36.8 74.1 L37 75.2 L36.7 76.3 L37 75.7 L37.4 75 L37.7 74.3 L38.1 73.7 L38.4 73 L38.8 72.3 L39.1 71.6 L39.5 70.9 L39.8 70.2 L40.2 69.5 L40.5 68.7 L40.9 68 L41.2 67.2 L41.6 66.5 L42 65.7 L42.3 64.9 L42.7 64 L43 63.2 L43.7 61.5 L44.4 59.8 L45.1 58.1 L45.8 56.4 L46.5 54.6 L47.2 53 L47.9 51.3 L48.7 49.7 L49.4 48.1 L50.2 46.6 L51 45.2 L51.8 43.8 L52.6 42.5 L53.5 41.4 L54.4 40.3 L55.2 39.4 L56.1 38.5 L57 37.8 L58.2 37.1 L59.3 36.6 L60.3 36.4 L61.2 36.3 L62.2 36.4 L63.2 36.7 L64.3 37.2 L65.3 37.9 L66.4 38.8 L67.4 39.9 L68.4 41.2 L69.3 42.7 L70.2 44.5 L70.9 46.4 L71.5 48.6 L71.9 50.9 L72.2 53.4 L72.3 56.1 Z" fill="#000"/><path d="M23.7 56.1 L23.8 53.4 L24.1 50.9 L24.5 48.6 L25.1 46.4 L25.8 44.5 L26.7 42.7 L27.6 41.2 L28.6 39.9 L29.6 38.8 L30.7 37.9 L31.7 37.2 L32.8 36.7 L33.8 36.4 L34.8 36.3 L35.7 36.4 L36.7 36.6 L37.8 37.1 L39 37.8 L39.9 38.5 L40.8 39.4 L41.6 40.3 L42.5 41.4 L43.4 42.5 L44.2 43.8 L45 45.2 L45.8 46.6 L46.6 48.1 L47.3 49.7 L48.1 51.3 L48.8 53 L49.5 54.6 L50.2 56.4 L50.9 58.1 L51.6 59.8 L52.3 61.5 L53 63.2 L53.3 64 L53.7 64.9 L54 65.7 L54.4 66.5 L54.8 67.2 L55.1 68 L55.5 68.7 L55.8 69.5 L56.2 70.2 L56.5 70.9 L56.9 71.6 L57.2 72.3 L57.6 73 L57.9 73.7 L58.3 74.3 L58.6 75 L59 75.7 L59.3 76.3 L59 75.2 L59.2 74.1 L59.7 73 L60.7 72.3 L61.8 72 L62.9 72.2 L64 72.7 L64.7 73.7 L64.4 73 L64 72.3 L63.7 71.6 L63.4 71 L63.1 70.3 L62.8 69.6 L62.5 68.9 L62.1 68.2 L61.8 67.5 L61.5 66.8 L61.2 66.1 L60.9 65.4 L60.6 64.7 L60.3 63.9 L60 63.2 L59.6 62.4 L59.3 61.6 L59 60.8 L58.4 59.1 L57.7 57.4 L57.1 55.7 L56.4 53.9 L55.7 52.1 L55 50.4 L54.2 48.6 L53.5 46.9 L52.7 45.1 L51.8 43.5 L50.9 41.8 L50 40.2 L49 38.7 L48 37.2 L46.9 35.8 L45.7 34.5 L44.4 33.3 L43 32.2 L41.2 30.9 L39.1 30 L36.9 29.4 L34.7 29.2 L32.5 29.4 L30.4 30 L28.3 30.8 L26.4 32 L24.6 33.5 L23 35.2 L21.5 37.1 L20.2 39.3 L19.1 41.6 L18.1 44.1 L17.3 46.9 L16.7 49.7 L16.4 52.8 L16.3 55.9 Z" fill="#000"/></mask><mask id="brezel-m2" maskUnits="userSpaceOnUse" x="0" y="0" width="96" height="96"><rect width="96" height="96" fill="#fff"/><path d="M23.7 56.1 L23.8 53.4 L24.1 50.9 L24.5 48.6 L25.1 46.4 L25.8 44.5 L26.7 42.7 L27.6 41.2 L28.6 39.9 L29.6 38.8 L30.7 37.9 L31.7 37.2 L32.8 36.7 L33.8 36.4 L34.8 36.3 L35.7 36.4 L36.7 36.6 L37.8 37.1 L39 37.8 L39.9 38.5 L40.8 39.4 L41.6 40.3 L42.5 41.4 L43.4 42.5 L44.2 43.8 L45 45.2 L45.8 46.6 L46.6 48.1 L47.3 49.7 L48.1 51.3 L48.8 53 L49.5 54.6 L50.2 56.4 L50.9 58.1 L51.6 59.8 L52.3 61.5 L53 63.2 L53.3 64 L53.7 64.9 L54 65.7 L54.4 66.5 L54.8 67.2 L55.1 68 L55.5 68.7 L55.8 69.5 L56.2 70.2 L56.5 70.9 L56.9 71.6 L57.2 72.3 L57.6 73 L57.9 73.7 L58.3 74.3 L58.6 75 L59 75.7 L59.3 76.3 L59 75.2 L59.2 74.1 L59.7 73 L60.7 72.3 L61.8 72 L62.9 72.2 L64 72.7 L64.7 73.7 L64.4 73 L64 72.3 L63.7 71.6 L63.4 71 L63.1 70.3 L62.8 69.6 L62.5 68.9 L62.1 68.2 L61.8 67.5 L61.5 66.8 L61.2 66.1 L60.9 65.4 L60.6 64.7 L60.3 63.9 L60 63.2 L59.6 62.4 L59.3 61.6 L59 60.8 L58.4 59.1 L57.7 57.4 L57.1 55.7 L56.4 53.9 L55.7 52.1 L55 50.4 L54.2 48.6 L53.5 46.9 L52.7 45.1 L51.8 43.5 L50.9 41.8 L50 40.2 L49 38.7 L48 37.2 L46.9 35.8 L45.7 34.5 L44.4 33.3 L43 32.2 L41.2 30.9 L39.1 30 L36.9 29.4 L34.7 29.2 L32.5 29.4 L30.4 30 L28.3 30.8 L26.4 32 L24.6 33.5 L23 35.2 L21.5 37.1 L20.2 39.3 L19.1 41.6 L18.1 44.1 L17.3 46.9 L16.7 49.7 L16.4 52.8 L16.3 55.9 Z" fill="#000"/></mask><path class="zf-f" d="M16.3 55.9 L16 58.7 L16 61.6 L16.3 64.5 L16.9 67.2 L17.8 69.8 L18.9 72.4 L20.4 74.7 L22.1 76.9 L24 78.9 L26.1 80.7 L28.4 82.3 L30.9 83.7 L33.5 84.8 L36.2 85.8 L39 86.5 L42 87.1 L45 87.4 L48 87.5 L51 87.4 L54 87.1 L57 86.5 L59.8 85.8 L62.5 84.8 L65.1 83.7 L67.6 82.3 L69.9 80.7 L72 78.9 L73.9 76.9 L75.6 74.7 L77.1 72.4 L78.2 69.8 L79.1 67.2 L79.7 64.5 L80 61.6 L80 58.7 L79.7 55.9 L72.3 56.1 L72.1 58.5 L71.6 60.5 L71.1 62.3 L70.3 64 L69.4 65.5 L68.4 66.8 L67.3 68 L66.1 69.1 L64.7 70.1 L63.3 71 L61.7 71.8 L60.1 72.5 L58.3 73.1 L56.4 73.6 L54.4 74 L52.4 74.3 L50.2 74.4 L48 74.5 L45.8 74.4 L43.6 74.3 L41.6 74 L39.6 73.6 L37.7 73.1 L35.9 72.5 L34.3 71.8 L32.7 71 L31.3 70.1 L29.9 69.1 L28.7 68 L27.6 66.8 L26.6 65.5 L25.7 64 L24.9 62.3 L24.4 60.5 L23.9 58.5 L23.7 56.1 Z"/><path class="zf-f" d="M79.7 55.9 L79.6 52.8 L79.3 49.7 L78.7 46.9 L77.9 44.1 L76.9 41.6 L75.8 39.3 L74.5 37.1 L73 35.2 L71.4 33.5 L69.6 32 L67.7 30.8 L65.6 30 L63.5 29.4 L61.3 29.2 L59.1 29.4 L56.9 30 L54.8 30.9 L53 32.2 L51.6 33.3 L50.3 34.5 L49.1 35.8 L48 37.2 L47 38.7 L46 40.2 L45.1 41.8 L44.2 43.5 L43.3 45.1 L42.5 46.9 L41.8 48.6 L41 50.4 L40.3 52.1 L39.6 53.9 L38.9 55.7 L38.3 57.4 L37.6 59.1 L37 60.8 L36.7 61.6 L36.4 62.4 L36 63.2 L35.7 63.9 L35.4 64.7 L35.1 65.4 L34.8 66.1 L34.5 66.8 L34.2 67.5 L33.9 68.2 L33.5 68.9 L33.2 69.6 L32.9 70.3 L32.6 71 L32.3 71.6 L32 72.3 L31.6 73 L31.3 73.7 L32 72.7 L33.1 72.2 L34.2 72 L35.3 72.3 L36.3 73 L36.8 74.1 L37 75.2 L36.7 76.3 L37 75.7 L37.4 75 L37.7 74.3 L38.1 73.7 L38.4 73 L38.8 72.3 L39.1 71.6 L39.5 70.9 L39.8 70.2 L40.2 69.5 L40.5 68.7 L40.9 68 L41.2 67.2 L41.6 66.5 L42 65.7 L42.3 64.9 L42.7 64 L43 63.2 L43.7 61.5 L44.4 59.8 L45.1 58.1 L45.8 56.4 L46.5 54.6 L47.2 53 L47.9 51.3 L48.7 49.7 L49.4 48.1 L50.2 46.6 L51 45.2 L51.8 43.8 L52.6 42.5 L53.5 41.4 L54.4 40.3 L55.2 39.4 L56.1 38.5 L57 37.8 L58.2 37.1 L59.3 36.6 L60.3 36.4 L61.2 36.3 L62.2 36.4 L63.2 36.7 L64.3 37.2 L65.3 37.9 L66.4 38.8 L67.4 39.9 L68.4 41.2 L69.3 42.7 L70.2 44.5 L70.9 46.4 L71.5 48.6 L71.9 50.9 L72.2 53.4 L72.3 56.1 Z"/><path class="zf-f" d="M23.7 56.1 L23.8 53.4 L24.1 50.9 L24.5 48.6 L25.1 46.4 L25.8 44.5 L26.7 42.7 L27.6 41.2 L28.6 39.9 L29.6 38.8 L30.7 37.9 L31.7 37.2 L32.8 36.7 L33.8 36.4 L34.8 36.3 L35.7 36.4 L36.7 36.6 L37.8 37.1 L39 37.8 L39.9 38.5 L40.8 39.4 L41.6 40.3 L42.5 41.4 L43.4 42.5 L44.2 43.8 L45 45.2 L45.8 46.6 L46.6 48.1 L47.3 49.7 L48.1 51.3 L48.8 53 L49.5 54.6 L50.2 56.4 L50.9 58.1 L51.6 59.8 L52.3 61.5 L53 63.2 L53.3 64 L53.7 64.9 L54 65.7 L54.4 66.5 L54.8 67.2 L55.1 68 L55.5 68.7 L55.8 69.5 L56.2 70.2 L56.5 70.9 L56.9 71.6 L57.2 72.3 L57.6 73 L57.9 73.7 L58.3 74.3 L58.6 75 L59 75.7 L59.3 76.3 L59 75.2 L59.2 74.1 L59.7 73 L60.7 72.3 L61.8 72 L62.9 72.2 L64 72.7 L64.7 73.7 L64.4 73 L64 72.3 L63.7 71.6 L63.4 71 L63.1 70.3 L62.8 69.6 L62.5 68.9 L62.1 68.2 L61.8 67.5 L61.5 66.8 L61.2 66.1 L60.9 65.4 L60.6 64.7 L60.3 63.9 L60 63.2 L59.6 62.4 L59.3 61.6 L59 60.8 L58.4 59.1 L57.7 57.4 L57.1 55.7 L56.4 53.9 L55.7 52.1 L55 50.4 L54.2 48.6 L53.5 46.9 L52.7 45.1 L51.8 43.5 L50.9 41.8 L50 40.2 L49 38.7 L48 37.2 L46.9 35.8 L45.7 34.5 L44.4 33.3 L43 32.2 L41.2 30.9 L39.1 30 L36.9 29.4 L34.7 29.2 L32.5 29.4 L30.4 30 L28.3 30.8 L26.4 32 L24.6 33.5 L23 35.2 L21.5 37.1 L20.2 39.3 L19.1 41.6 L18.1 44.1 L17.3 46.9 L16.7 49.7 L16.4 52.8 L16.3 55.9 Z"/><g mask="url(#brezel-m1)"><path class="zf-k" pathLength="1" d="M16.3 55.9 L16 58.7 L16 61.6 L16.3 64.5 L16.9 67.2 L17.8 69.8 L18.9 72.4 L20.4 74.7 L22.1 76.9 L24 78.9 L26.1 80.7 L28.4 82.3 L30.9 83.7 L33.5 84.8 L36.2 85.8 L39 86.5 L42 87.1 L45 87.4 L48 87.5 L51 87.4 L54 87.1 L57 86.5 L59.8 85.8 L62.5 84.8 L65.1 83.7 L67.6 82.3 L69.9 80.7 L72 78.9 L73.9 76.9 L75.6 74.7 L77.1 72.4 L78.2 69.8 L79.1 67.2 L79.7 64.5 L80 61.6 L80 58.7 L79.7 55.9 M23.7 56.1 L23.9 58.5 L24.4 60.5 L24.9 62.3 L25.7 64 L26.6 65.5 L27.6 66.8 L28.7 68 L29.9 69.1 L31.3 70.1 L32.7 71 L34.3 71.8 L35.9 72.5 L37.7 73.1 L39.6 73.6 L41.6 74 L43.6 74.3 L45.8 74.4 L48 74.5 L50.2 74.4 L52.4 74.3 L54.4 74 L56.4 73.6 L58.3 73.1 L60.1 72.5 L61.7 71.8 L63.3 71 L64.7 70.1 L66.1 69.1 L67.3 68 L68.4 66.8 L69.4 65.5 L70.3 64 L71.1 62.3 L71.6 60.5 L72.1 58.5 L72.3 56.1"/></g><g mask="url(#brezel-m2)"><path class="zf-k" pathLength="1" d="M79.7 55.9 L79.6 52.8 L79.3 49.7 L78.7 46.9 L77.9 44.1 L76.9 41.6 L75.8 39.3 L74.5 37.1 L73 35.2 L71.4 33.5 L69.6 32 L67.7 30.8 L65.6 30 L63.5 29.4 L61.3 29.2 L59.1 29.4 L56.9 30 L54.8 30.9 L53 32.2 L51.6 33.3 L50.3 34.5 L49.1 35.8 L48 37.2 L47 38.7 L46 40.2 L45.1 41.8 L44.2 43.5 L43.3 45.1 L42.5 46.9 L41.8 48.6 L41 50.4 L40.3 52.1 L39.6 53.9 L38.9 55.7 L38.3 57.4 L37.6 59.1 L37 60.8 L36.7 61.6 L36.4 62.4 L36 63.2 L35.7 63.9 L35.4 64.7 L35.1 65.4 L34.8 66.1 L34.5 66.8 L34.2 67.5 L33.9 68.2 L33.5 68.9 L33.2 69.6 L32.9 70.3 L32.6 71 L32.3 71.6 L32 72.3 L31.6 73 L31.3 73.7 L32 72.7 L33.1 72.2 L34.2 72 L35.3 72.3 L36.3 73 L36.8 74.1 L37 75.2 L36.7 76.3 L37 75.7 L37.4 75 L37.7 74.3 L38.1 73.7 L38.4 73 L38.8 72.3 L39.1 71.6 L39.5 70.9 L39.8 70.2 L40.2 69.5 L40.5 68.7 L40.9 68 L41.2 67.2 L41.6 66.5 L42 65.7 L42.3 64.9 L42.7 64 L43 63.2 L43.7 61.5 L44.4 59.8 L45.1 58.1 L45.8 56.4 L46.5 54.6 L47.2 53 L47.9 51.3 L48.7 49.7 L49.4 48.1 L50.2 46.6 L51 45.2 L51.8 43.8 L52.6 42.5 L53.5 41.4 L54.4 40.3 L55.2 39.4 L56.1 38.5 L57 37.8 L58.2 37.1 L59.3 36.6 L60.3 36.4 L61.2 36.3 L62.2 36.4 L63.2 36.7 L64.3 37.2 L65.3 37.9 L66.4 38.8 L67.4 39.9 L68.4 41.2 L69.3 42.7 L70.2 44.5 L70.9 46.4 L71.5 48.6 L71.9 50.9 L72.2 53.4 L72.3 56.1"/></g><path class="zf-k" pathLength="1" d="M23.7 56.1 L23.8 53.4 L24.1 50.9 L24.5 48.6 L25.1 46.4 L25.8 44.5 L26.7 42.7 L27.6 41.2 L28.6 39.9 L29.6 38.8 L30.7 37.9 L31.7 37.2 L32.8 36.7 L33.8 36.4 L34.8 36.3 L35.7 36.4 L36.7 36.6 L37.8 37.1 L39 37.8 L39.9 38.5 L40.8 39.4 L41.6 40.3 L42.5 41.4 L43.4 42.5 L44.2 43.8 L45 45.2 L45.8 46.6 L46.6 48.1 L47.3 49.7 L48.1 51.3 L48.8 53 L49.5 54.6 L50.2 56.4 L50.9 58.1 L51.6 59.8 L52.3 61.5 L53 63.2 L53.3 64 L53.7 64.9 L54 65.7 L54.4 66.5 L54.8 67.2 L55.1 68 L55.5 68.7 L55.8 69.5 L56.2 70.2 L56.5 70.9 L56.9 71.6 L57.2 72.3 L57.6 73 L57.9 73.7 L58.3 74.3 L58.6 75 L59 75.7 L59.3 76.3 L59 75.2 L59.2 74.1 L59.7 73 L60.7 72.3 L61.8 72 L62.9 72.2 L64 72.7 L64.7 73.7 L64.4 73 L64 72.3 L63.7 71.6 L63.4 71 L63.1 70.3 L62.8 69.6 L62.5 68.9 L62.1 68.2 L61.8 67.5 L61.5 66.8 L61.2 66.1 L60.9 65.4 L60.6 64.7 L60.3 63.9 L60 63.2 L59.6 62.4 L59.3 61.6 L59 60.8 L58.4 59.1 L57.7 57.4 L57.1 55.7 L56.4 53.9 L55.7 52.1 L55 50.4 L54.2 48.6 L53.5 46.9 L52.7 45.1 L51.8 43.5 L50.9 41.8 L50 40.2 L49 38.7 L48 37.2 L46.9 35.8 L45.7 34.5 L44.4 33.3 L43 32.2 L41.2 30.9 L39.1 30 L36.9 29.4 L34.7 29.2 L32.5 29.4 L30.4 30 L28.3 30.8 L26.4 32 L24.6 33.5 L23 35.2 L21.5 37.1 L20.2 39.3 L19.1 41.6 L18.1 44.1 L17.3 46.9 L16.7 49.7 L16.4 52.8 L16.3 55.9"/><path class="zf-a" pathLength="1" d="M39 79.2 C44 80.6 52 80.6 57 79.2"/></symbol><symbol id="buttercroissant" viewBox="0 0 96 96"><path class="zf-f" d="M10 82 C12 72 22 64 34 60 C40 58 44 57.5 48 57.5 C52 57.5 56 58 62 60 C74 64 84 72 86 82 C80 84.5 74 83 70 79 C64 82 56 84 48 84 C40 84 32 82 26 79 C22 83 16 84.5 10 82 Z"/><path class="zf-k" pathLength="1" d="M10 82 C12 72 22 64 34 60 C40 58 44 57.5 48 57.5 C52 57.5 56 58 62 60 C74 64 84 72 86 82 C80 84.5 74 83 70 79 C64 82 56 84 48 84 C40 84 32 82 26 79 C22 83 16 84.5 10 82 Z"/><path class="zf-d" pathLength="1" d="M33 60.5 C30.5 67 30.5 73.5 33 80.5 M48 57.5 C46.5 66 46.5 75 48 84 M63 60.5 C65.5 67 65.5 73.5 63 80.5 M22 66 C21 70 22 75 25 78.5 M74 66 C75 70 74 75 71 78.5"/><path class="zf-a" pathLength="1" d="M37 61.5 C43 59.6 53 59.6 59 61.5"/></symbol><symbol id="bienenstich" viewBox="0 0 96 96"><path class="zf-f" d="M18 58 L32 47 H80 V73 L66 84 H18 Z"/><path class="zf-k" pathLength="1" d="M18 58 L32 47 H80 V73 L66 84 H18 Z M18 58 H66 L80 47 M66 58 V84"/><path class="zf-d" pathLength="1" d="M18 65 H66 L80 54 M18 73 H66 L80 62"/><ellipse class="zf-p" cx="30" cy="54" rx="2.2" ry="1" transform="rotate(-10 30 54)"/><ellipse class="zf-p" cx="40" cy="51" rx="2.2" ry="1" transform="rotate(15 40 51)"/><ellipse class="zf-p" cx="52" cy="53" rx="2.2" ry="1" transform="rotate(-20 52 53)"/><ellipse class="zf-p" cx="62" cy="50" rx="2.2" ry="1" transform="rotate(10 62 50)"/><ellipse class="zf-p" cx="72" cy="52" rx="2.2" ry="1" transform="rotate(-5 72 52)"/><ellipse class="zf-p" cx="46" cy="56" rx="2.2" ry="1" transform="rotate(5 46 56)"/><ellipse class="zf-p" cx="36" cy="56.5" rx="2.2" ry="1" transform="rotate(20 36 56.5)"/><ellipse class="zf-p" cx="58" cy="56" rx="2.2" ry="1" transform="rotate(-15 58 56)"/><ellipse class="zf-p" cx="68" cy="49" rx="2.2" ry="1" transform="rotate(25 68 49)"/><path class="zf-a" pathLength="1" d="M18 69 H66 L80 58"/></symbol><symbol id="kaesesahnetorte" viewBox="0 0 96 96"><path class="zf-f" d="M18 46 C18 41.6 31.4 38 48 38 C64.6 38 78 41.6 78 46 V76 C78 80.4 64.6 84 48 84 C31.4 84 18 80.4 18 76 Z"/><path class="zf-k" pathLength="1" d="M18 46 C18 41.6 31.4 38 48 38 C64.6 38 78 41.6 78 46 V76 C78 80.4 64.6 84 48 84 C31.4 84 18 80.4 18 76 Z"/><path class="zf-d" pathLength="1" d="M18 46 C18 50.4 31.4 54 48 54 C64.6 54 78 50.4 78 46 M18 65 C18 69.4 31.4 73 48 73 C64.6 73 78 69.4 78 65"/><path class="zf-d" pathLength="1" d="M21 48.4 C21 44.4 27 44.4 27 48.4 M30 51.4 C30 47.4 36 47.4 36 51.4 M40 52.8 C40 48.8 46 48.8 46 52.8 M50 52.8 C50 48.8 56 48.8 56 52.8 M60 51.4 C60 47.4 66 47.4 66 51.4 M69 48.4 C69 44.4 75 44.4 75 48.4 "/><g class="zf-x" style="--dx:0;--dy:-1"><circle class="zf-af" cx="48" cy="42" r="4.2"/><path class="zf-k" pathLength="1" d="M44 42 A4 4 0 1 0 52 42 A4 4 0 1 0 44 42 M48 38 C49 33.5 52 31 56 30"/></g></symbol><symbol id="laden-altstadt" viewBox="0 0 96 96"><path class="zf-f" d="M20 84 V42 H16 L48 12 L80 42 H76 V84 Z"/><path class="zf-k" pathLength="1" d="M20 84 V42 H16 L48 12 L80 42 H76 V84 Z"/><path class="zf-d" pathLength="1" d="M20 42 H76 M20 63 H76 M30 42 V63 M40 42 V63 M56 42 V63 M66 42 V63 M20 42 L30 52.5 L20 63 M76 42 L66 52.5 L76 63 M40 42 L48 52.5 L56 42 M40 63 L48 52.5 L56 63 M38 22 H58 M32 30 H64 M43 22 V30 M53 22 V30"/><path class="zf-k" pathLength="1" d="M24 84 V67 H56 V84 M24 76 H56 M32 47 H36 V57 H32 Z M60 47 H64 V57 H60 Z"/><path class="zf-d" pathLength="1" d="M25.5 84 V79 M28.9 84 V77 M31.5 84 V80 M34.1 84 V78 M37.5 84 V77 M40.1 84 V79 M42.7 84 V79 M46.1 84 V77 M48.7 84 V80 M51.3 84 V78 "/><g class="zf-x" style="--dx:0;--dy:0"><path class="zf-af" d="M60 84 V67 H72 V84 Z"/><path class="zf-k" pathLength="1" d="M60 84 V67 H72 V84 M69 76 V77"/></g></symbol><symbol id="laden-markt" viewBox="0 0 96 96"><path class="zf-f" d="M18 84 V20 H78 V84 Z"/><path class="zf-k" pathLength="1" d="M18 84 V20 H78 V84 Z M14 20 H82 V15 H14 Z"/><path class="zf-d" pathLength="1" d="M26 44 V30 A4 4 0 0 1 34 30 V44 Z M44 44 V30 A4 4 0 0 1 52 30 V44 Z M62 44 V30 A4 4 0 0 1 70 30 V44 Z M18 50 H78 M24 84 V68 H72 V84 M48 68 V84"/><path class="zf-d" pathLength="1" d="M25.5 84 V77 M28.9 84 V75 M31.5 84 V78 M34.1 84 V76 M37.5 84 V74 M40.1 84 V77 M42.7 84 V77 M50.5 84 V78 M53.9 84 V75 M56.5 84 V77 M59.1 84 V74 M62.5 84 V78 M65.1 84 V76 M67.7 84 V78 "/><g class="zf-x" style="--dx:0;--dy:-1"><path class="zf-af" d="M20 56 H76 L80 64 H16 Z"/><path class="zf-k" pathLength="1" d="M20 56 H76 L80 64 H16 Z M30 56 L28 64 M40 56 L39.5 64 M56 56 L56.5 64 M66 56 L68 64"/></g></symbol><symbol id="laden-bahnhof" viewBox="0 0 96 96"><path class="zf-f" d="M8 47 H88 V52 H82 V84 H14 V52 H8 Z"/><path class="zf-k" pathLength="1" d="M8 52 V47 H88 V52 Z M14 52 V84 H82 V52"/><path class="zf-d" pathLength="1" d="M30 52 V84 M46 52 V84 M62 52 V84 M14 74 H82 M34 47 V38 H62 V47 M38 42.5 H58"/><path class="zf-d" pathLength="1" d="M16.5 84 V80 M19.9 84 V78 M22.5 84 V79 M25.1 84 V80 M32.5 84 V78 M35.9 84 V80 M38.5 84 V79 M41.1 84 V78 M48.5 84 V79 M51.9 84 V78 M54.5 84 V80 M57.1 84 V79 "/><g class="zf-x" style="--dx:1;--dy:0"><path class="zf-af" d="M66 84 V58 H78 V84 Z"/><path class="zf-k" pathLength="1" d="M66 84 V58 H78 V84 M72 58 V84"/></g></symbol><symbol id="laden-ostviertel" viewBox="0 0 96 96"><path class="zf-f" d="M12 84 V26 H84 V84 Z"/><path class="zf-k" pathLength="1" d="M12 84 V26 H84 V84 Z"/><path class="zf-d" pathLength="1" d="M16 32 H80 V40 H16 Z M16 46 H80 V54 H16 Z M32 32 V40 M48 32 V40 M64 32 V40 M32 46 V54 M48 46 V54 M64 46 V54 M12 60 H84"/><path class="zf-k" pathLength="1" d="M18 84 V66 H62 V84 M18 70 H62 M66 84 V66 H78 V84"/><path class="zf-d" pathLength="1" d="M19.5 84 V78 M22.9 84 V76 M25.5 84 V79 M28.1 84 V75 M31.5 84 V77 M34.1 84 V78 M36.7 84 V78 M40.1 84 V76 M42.7 84 V79 M45.3 84 V75 M48.7 84 V77 M51.3 84 V78 M53.9 84 V78 M57.3 84 V76 M59.9 84 V79 "/><g class="zf-x" style="--dx:1;--dy:0"><path class="zf-af" d="M84 62 H92 V72 H84 Z"/><path class="zf-k" pathLength="1" d="M84 62 H92 V72 H84 M86 65 H90 M86 68.5 H90"/></g></symbol><symbol id="icon-reservieren" viewBox="0 0 96 96"><path class="zf-f" d="M22 20 H70 V84 H22 Z"/><path class="zf-k" pathLength="1" d="M22 20 H70 V84 H22 Z M30 20 V84"/><path class="zf-d" pathLength="1" d="M38 34 H62 M38 42 H58"/><g class="zf-x" style="--dx:0;--dy:1"><path class="zf-af" d="M54 20 V54 L59 48 L64 54 V20 Z"/><path class="zf-k" pathLength="1" d="M54 20 V54 L59 48 L64 54 V20"/></g></symbol><symbol id="icon-abholen" viewBox="0 0 96 96"><path class="zf-f" d="M20 36 H76 L72 84 H24 Z"/><path class="zf-k" pathLength="1" d="M20 36 H76 L72 84 H24 Z M36 36 V30 A12 12 0 0 1 60 30 V36"/><path class="zf-d" pathLength="1" d="M30 50 H66"/><g class="zf-x" style="--dx:0;--dy:-1"><path class="zf-af" d="M40 60 H56 V76 H40 Z"/><path class="zf-k" pathLength="1" d="M40 60 H56 V76 H40 Z M44 66 H52 M44 70.5 H50"/></g></symbol><symbol id="icon-lesung" viewBox="0 0 96 96"><path class="zf-f" d="M14 48 C26 42 38 42 48 48 C58 42 70 42 82 48 V82 C70 76 58 76 48 82 C38 76 26 76 14 82 Z"/><path class="zf-k" pathLength="1" d="M14 48 C26 42 38 42 48 48 C58 42 70 42 82 48 V82 C70 76 58 76 48 82 C38 76 26 76 14 82 Z M48 48 V82"/><path class="zf-d" pathLength="1" d="M22 56 C29 53 35 53 40 56 M22 63 C29 60 35 60 40 63 M56 56 C61 53 67 53 74 56"/><g class="zf-x" style="--dx:0;--dy:-1"><path class="zf-af" d="M44 18 C44 15.8 45.8 14 48 14 C50.2 14 52 15.8 52 18 V28 C52 30.2 50.2 32 48 32 C45.8 32 44 30.2 44 28 Z"/><path class="zf-k" pathLength="1" d="M44 18 C44 15.8 45.8 14 48 14 C50.2 14 52 15.8 52 18 V28 C52 30.2 50.2 32 48 32 C45.8 32 44 30.2 44 28 Z M40 26 C40 32 43.6 36 48 36 C52.4 36 56 32 56 26 M48 36 V41"/></g></symbol><symbol id="icon-geschenk" viewBox="0 0 96 96"><path class="zf-f" d="M18 42 H78 V84 H18 Z"/><path class="zf-k" pathLength="1" d="M18 42 H78 V84 H18 Z M14 34 H82 V42 H14 Z"/><path class="zf-d" pathLength="1" d="M26 56 H70 M26 64 H62"/><g class="zf-x" style="--dx:0;--dy:-1"><path class="zf-af" d="M44 34 H52 V84 H44 Z"/><path class="zf-k" pathLength="1" d="M44 34 H52 V84 H44 M48 34 C40 22 30 24 34 31 C36 34 42 34 48 34 C54 34 60 34 62 31 C66 24 56 22 48 34"/></g></symbol><symbol id="kfz-raeder" viewBox="0 0 96 96"><path class="zf-f" d="M12 50 A34 34 0 1 0 80 50 A34 34 0 1 0 12 50"/><path class="zf-k" pathLength="1" d="M12 50 A34 34 0 1 0 80 50 A34 34 0 1 0 12 50 M25 50 A21 21 0 1 0 67 50 A21 21 0 1 0 25 50"/><path class="zf-d" pathLength="1" d="M27 50 A19 19 0 1 0 65 50 A19 19 0 1 0 27 50 M41 50 A5 5 0 1 0 51 50 A5 5 0 1 0 41 50 M77 50 L80 50 M75.9 58 L78.8 58.8 M72.8 65.5 L75.4 67 M67.9 71.9 L70 74 M61.5 76.8 L63 79.4 M54 79.9 L54.8 82.8 M46 81 L46 84 M38 79.9 L37.2 82.8 M30.5 76.8 L29 79.4 M24.1 71.9 L22 74 M19.2 65.5 L16.6 67 M16.1 58 L13.2 58.8 M15 50 L12 50 M16.1 42 L13.2 41.2 M19.2 34.5 L16.6 33 M24.1 28.1 L22 26 M30.5 23.2 L29 20.6 M38 20.1 L37.2 17.2 M46 19 L46 16 M54 20.1 L54.8 17.2 M61.5 23.2 L63 20.6 M67.9 28.1 L70 26 M72.8 34.5 L75.4 33 M75.9 42 L78.8 41.2 M50.7 43.5 L57.2 34.6 M53.6 52.5 L64.1 55.9 M46 58 L46 69 M38.4 52.5 L27.9 55.9 M41.3 43.5 L34.8 34.6"/><path id="kfz-flanke" d="M18.5 50 A27.5 27.5 0 0 1 73.5 50" fill="none"/><text class="zf-t zf-t-flanke"><textPath href="#kfz-flanke" startOffset="50%" text-anchor="middle">205/55 R16 91V</textPath></text><g class="zf-x" style="--dx:0;--dy:0;--ds:1"><circle class="zf-af" cx="46" cy="40" r="2.4"/><circle class="zf-af" cx="55.5" cy="46.9" r="2.4"/><circle class="zf-af" cx="51.9" cy="58.1" r="2.4"/><circle class="zf-af" cx="40.1" cy="58.1" r="2.4"/><circle class="zf-af" cx="36.5" cy="46.9" r="2.4"/><path class="zf-k" pathLength="1" d="M43.6 40 A2.4 2.4 0 1 0 48.4 40 A2.4 2.4 0 1 0 43.6 40 M53.1 46.9 A2.4 2.4 0 1 0 57.9 46.9 A2.4 2.4 0 1 0 53.1 46.9 M49.5 58.1 A2.4 2.4 0 1 0 54.3 58.1 A2.4 2.4 0 1 0 49.5 58.1 M37.7 58.1 A2.4 2.4 0 1 0 42.5 58.1 A2.4 2.4 0 1 0 37.7 58.1 M34.1 46.9 A2.4 2.4 0 1 0 38.9 46.9 A2.4 2.4 0 1 0 34.1 46.9"/></g><path class="zf-m" pathLength="1" d="M86 16 L86 84 M83.8 16 L88.2 16 M83.8 84 L88.2 84"/><text class="zf-t" x="90.5" y="50" text-anchor="middle" transform="rotate(-90 90.5 50)">Ø 632</text></symbol><symbol id="kfz-bremsen" viewBox="0 0 96 96"><path class="zf-f" d="M12 52 A30 30 0 1 0 72 52 A30 30 0 1 0 12 52"/><path class="zf-k" pathLength="1" d="M12 52 A30 30 0 1 0 72 52 A30 30 0 1 0 12 52 M30 52 A12 12 0 1 0 54 52 A12 12 0 1 0 30 52"/><path class="zf-d" pathLength="1" d="M16 52 A26 26 0 1 0 68 52 A26 26 0 1 0 16 52 M38 52 A4 4 0 1 0 46 52 A4 4 0 1 0 38 52 M48.6 52 A1.4 1.4 0 1 0 51.4 52 A1.4 1.4 0 1 0 48.6 52 M43.1 59.6 A1.4 1.4 0 1 0 45.9 59.6 A1.4 1.4 0 1 0 43.1 59.6 M34.1 56.7 A1.4 1.4 0 1 0 36.9 56.7 A1.4 1.4 0 1 0 34.1 56.7 M34.1 47.3 A1.4 1.4 0 1 0 36.9 47.3 A1.4 1.4 0 1 0 34.1 47.3 M43.1 44.4 A1.4 1.4 0 1 0 45.9 44.4 A1.4 1.4 0 1 0 43.1 44.4"/><circle class="zf-p" cx="63.3" cy="57.7" r="1.3"/><circle class="zf-p" cx="57.6" cy="67.6" r="1.3"/><circle class="zf-p" cx="47.7" cy="73.3" r="1.3"/><circle class="zf-p" cx="36.3" cy="73.3" r="1.3"/><circle class="zf-p" cx="26.4" cy="67.6" r="1.3"/><circle class="zf-p" cx="20.7" cy="57.7" r="1.3"/><circle class="zf-p" cx="20.7" cy="46.3" r="1.3"/><circle class="zf-p" cx="26.4" cy="36.4" r="1.3"/><circle class="zf-p" cx="36.3" cy="30.7" r="1.3"/><circle class="zf-p" cx="47.7" cy="30.7" r="1.3"/><circle class="zf-p" cx="57.6" cy="36.4" r="1.3"/><circle class="zf-p" cx="63.3" cy="46.3" r="1.3"/><g class="zf-x" style="--dx:1;--dy:-1"><path class="zf-af" d="M58 20 H74 C78 20 80 22 80 26 V48 C80 52 78 54 74 54 H66 L62 44 V30 Z"/><path class="zf-k" pathLength="1" d="M58 20 H74 C78 20 80 22 80 26 V48 C80 52 78 54 74 54 H66 L62 44 V30 Z M70 28 A2 2 0 1 0 74 28 A2 2 0 1 0 70 28 M70 46 A2 2 0 1 0 74 46 A2 2 0 1 0 70 46"/></g><path class="zf-m" pathLength="1" d="M12 88 L72 88 M12 90.2 L12 85.8 M72 90.2 L72 85.8"/><text class="zf-t" x="42" y="94.5" text-anchor="middle">Ø 300</text></symbol><symbol id="kfz-oel" viewBox="0 0 96 96"><path class="zf-f" d="M22 84 V60 L34 49 H52 L60 54 L84 34 L86.5 36.5 L66 62 V84 Z"/><path class="zf-k" pathLength="1" d="M22 84 V60 L34 49 H52 L60 54 L84 34 L86.5 36.5 L66 62 V84 Z M38 49 V44 H48 V49 M22 64 C12 64 12 80 22 80"/><path class="zf-d" pathLength="1" d="M22 68 H66 M22 78 H66 M30 72 H44"/><g class="zf-x" style="--dx:0;--dy:1"><path class="zf-af" d="M85 41 C82.6 45 81 47.4 81 49.6 A4 4 0 0 0 89 49.6 C89 47.4 87.4 45 85 41 Z"/><path class="zf-k" pathLength="1" d="M85 41 C82.6 45 81 47.4 81 49.6 A4 4 0 0 0 89 49.6 C89 47.4 87.4 45 85 41 Z"/></g><path class="zf-m" pathLength="1" d="M8 44 L8 84 M5.8 44 L10.2 44 M5.8 84 L10.2 84"/><text class="zf-t" x="4" y="64" text-anchor="middle" transform="rotate(-90 4 64)">5 l</text></symbol><symbol id="kfz-klima" viewBox="0 0 96 96"><path class="zf-f" d="M14 28 H70 C74 28 76 30 76 34 V58 C76 62 74 64 70 64 H14 Z"/><path class="zf-k" pathLength="1" d="M14 28 H70 C74 28 76 30 76 34 V58 C76 62 74 64 70 64 H14 Z M20 34 H70 V58 H20 Z"/><path class="zf-d" pathLength="1" d="M20 39 H70 M20 44 H70 M20 49 H70 M20 54 H70 M44 34 V58 M24 72 C30 70 34 74 40 72 M24 78 C32 76 38 80 46 78 M24 84 C30 82 34 86 40 84"/><g class="zf-x" style="--dx:1;--dy:1"><circle class="zf-af" cx="76" cy="74" r="9"/><path class="zf-k" pathLength="1" d="M67 74 A9 9 0 1 0 85 74 A9 9 0 1 0 67 74 M76 67.5 V80.5 M70.4 70.8 L81.6 77.2 M70.4 77.2 L81.6 70.8"/></g><path class="zf-m" pathLength="1" d="M14 20 L76 20 M14 22.2 L14 17.8 M76 22.2 L76 17.8"/><text class="zf-t" x="45" y="16.5" text-anchor="middle">62</text></symbol><symbol id="kfz-batterie" viewBox="0 0 96 96"><path class="zf-f" d="M14 40 H82 V84 H14 Z"/><path class="zf-k" pathLength="1" d="M14 40 H82 V84 H14 Z M14 48 H82 M28 40 V34 H38 V40"/><path class="zf-d" pathLength="1" d="M25 62 H35 M30 57 V67 M61 62 H71 M14 74 H82 M42 48 V74 M54 48 V74"/><g class="zf-x" style="--dx:0;--dy:-1"><path class="zf-af" d="M58 40 V32 H68 V40 Z"/><path class="zf-k" pathLength="1" d="M58 40 V32 H68 V40"/></g><path class="zf-m" pathLength="1" d="M14 90 L82 90 M14 92.2 L14 87.8 M82 92.2 L82 87.8"/><text class="zf-t" x="48" y="95.5" text-anchor="middle">278</text></symbol><symbol id="kfz-scheibe" viewBox="0 0 96 96"><path class="zf-f" d="M10 72 L20 30 C32 25 64 25 76 30 L86 72 C66 76 30 76 10 72 Z"/><path class="zf-k" pathLength="1" d="M10 72 L20 30 C32 25 64 25 76 30 L86 72 C66 76 30 76 10 72 Z"/><path class="zf-d" pathLength="1" d="M16 68 L24 34 C36 30 60 30 72 34 L80 68 M30 74 L58 50 M62 74 L82 56"/><g class="zf-x" style="--dx:-1;--dy:-1"><circle class="zf-af" cx="58" cy="44" r="4.5"/><path class="zf-k" pathLength="1" d="M53.5 44 A4.5 4.5 0 1 0 62.5 44 A4.5 4.5 0 1 0 53.5 44 M58 39.5 L57 34 M62.5 44 L68 43 M58 48.5 L59.5 54 M53.5 44 L48 45.5 M61.2 40.8 L64.5 37.5 M54.8 47.2 L51.5 50.5"/></g><path class="zf-m" pathLength="1" d="M52 20 L64 20 M52 22.2 L52 17.8 M64 22.2 L64 17.8"/><text class="zf-t" x="58" y="16.5" text-anchor="middle">Ø 18</text></symbol><symbol id="zf-raster" viewBox="0 0 96 96"><path class="zf-rl" d="M8 0 V96 M0 8 H96 M16 0 V96 M0 16 H96 M24 0 V96 M0 24 H96 M32 0 V96 M0 32 H96 M40 0 V96 M0 40 H96 M48 0 V96 M0 48 H96 M56 0 V96 M0 56 H96 M64 0 V96 M0 64 H96 M72 0 V96 M0 72 H96 M80 0 V96 M0 80 H96 M88 0 V96 M0 88 H96"/><path class="zf-rk" d="M8 8 H88 V88 H8 Z M8 48 A40 40 0 1 0 88 48 A40 40 0 1 0 8 48"/><path class="zf-rs" d="M0 84 H96"/></symbol></defs></svg>
<!-- /zf:symbole -->
<!-- ============ backwaren ============ -->
<div class="welt" data-welt="backwaren">
<header class="rahmen bw-kopf">
<a class="bw-marke" href="#"><b>Wendeborn</b><span>Backhaus in Einbeck</span></a>
<nav class="bw-nav" aria-label="Backhaus"><a href="#theke">Sortiment</a><a href="#">Filialen</a><a href="#">Torten</a><a class="pille" href="#">Vorbestellen</a></nav>
</header>
<main>
<section class="rahmen bw-auftakt" aria-labelledby="bw-h1">
<div class="bw-auftakt__text">
<p class="bw-tag">Dienstag, 4. November · Theke am Marktplatz</p>
<h1 id="bw-h1">Heute in der Theke.</h1>
<p class="lead">Ab 6:30 Uhr liegt alles hier in der Theke. Bis 18 Uhr bestellen, morgen ab 7 Uhr abholen.</p>
</div>
<figure class="bw-held">
<svg class="zf zf--gross" viewBox="0 24 96 64" role="img" aria-label="Zeichnung: Bauernlaib mit einem langen Einschnitt"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#roggenlaib" width="96" height="96"/><path class="zf-hinweis" pathLength="1" d="M26 31 V64 M70 31 V54.6"/><circle class="zf-hinweis-punkt" cx="26" cy="64" r="1.3"/><circle class="zf-hinweis-punkt" cx="70" cy="54.6" r="1.3"/></svg>
<figcaption class="sr">Bauernlaib, 1.000 g, 5,40 €</figcaption>
<p class="bw-notiz bw-notiz--1" aria-hidden="true">Roggen und Weizen, Sauerteig</p>
<p class="bw-notiz bw-notiz--2" aria-hidden="true">Teig ruht über Nacht</p>
<p class="bw-notiz bw-notiz--3" aria-hidden="true">1.000 g · 5,40 €</p>
</figure>
</section>
<section class="rahmen bw-theke" id="theke" aria-labelledby="bw-h2">
<div class="bw-theke__kopf">
<h2 id="bw-h2">Brot, Brötchen, Süßes.</h2>
<p>Zeichnungen statt Fotos: So sehen unsere Sachen ungefähr aus. Preise sind Beispielpreise.</p>
</div>
<ul class="auslage">
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#roggenlaib" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Bauernlaib</a></h3><p class="preis">1.000 g · 5,40 €</p><p class="grund">5,40 € je kg</p><p class="allergene">Enthält <b>Roggen</b>, <b>Weizen</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#dinkelkruste" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Dinkelkruste</a></h3><p class="preis">750 g · 5,90 €</p><p class="grund">7,87 € je kg</p><p class="allergene">Enthält <b>Dinkel</b>, <b>Sesam</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kuerbiskernbrot" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Kürbiskernbrot</a></h3><p class="preis">500 g · 4,60 €</p><p class="grund">9,20 € je kg</p><p class="allergene">Enthält <b>Weizen</b>, <b>Roggen</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kaiserbroetchen" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Kaiserbrötchen</a></h3><p class="preis">Stück · 0,55 €</p><p class="allergene">Enthält <b>Weizen</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#laugenbrezel" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Laugenbrezel</a></h3><p class="preis">Stück · 0,95 €</p><p class="allergene">Enthält <b>Weizen</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#buttercroissant" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Buttercroissant</a></h3><p class="preis">Stück · 1,40 €</p><p class="allergene">Enthält <b>Weizen</b>, <b>Milch</b>, <b>Ei</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#bienenstich" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Bienenstich</a></h3><p class="preis">Stück · 2,90 €</p><p class="allergene">Enthält <b>Weizen</b>, <b>Milch</b>, <b>Ei</b>, <b>Mandeln</b></p></div></li>
<li class="ware"><svg class="zf" viewBox="0 24 96 64" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kaesesahnetorte" width="96" height="96"/></svg><div class="ware__schild"><h3><a href="#">Käsesahnetorte</a></h3><p class="preis">Stück · 3,40 €</p><p class="grund">ganz auf Bestellung</p><p class="allergene">Enthält <b>Weizen</b>, <b>Milch</b>, <b>Ei</b></p></div></li>
</ul>
</section>
</main>
<footer class="rahmen bw-fuss"><span>Backhaus Wendeborn · Marktplatz 3 · 37574 Einbeck</span><span>Alle Angaben Beispiel, vom Betrieb prüfen lassen</span></footer>
</div>
<!-- ============ laden ============ -->
<div class="welt" data-welt="laden" hidden>
<header class="rahmen ld-kopf">
<a class="ld-marke" href="#"><b>Lohbeck</b><span>Buchhandlung in Soest</span></a>
<nav class="ld-nav" aria-label="Buchhandlung"><a href="#">Empfehlungen</a><a href="#">Lesungen</a><a href="#filialen">Läden</a><a class="knopf" href="#">Reservieren</a></nav>
</header>
<main>
<section class="rahmen ld-auftakt" aria-labelledby="ld-h1">
<h1 id="ld-h1">Vier Läden. Einer ist <em>sicher</em> um die Ecke.</h1>
<p>Jeder Laden sieht anders aus, das Sortiment ist dasselbe. Was Sie heute bis 18 Uhr reservieren, liegt morgen ab 10 Uhr bereit.</p>
</section>
<ul class="rahmen strasse" id="filialen" aria-label="Unsere Läden">
<li class="filiale"><svg class="zf" viewBox="0 0 96 96" role="img" aria-label="Zeichnung: Fachwerkhaus mit Giebel, Laden Altstadt"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#laden-altstadt" width="96" height="96"/></svg><div class="filiale__schild"><h3><a href="#">Altstadt</a></h3><address>Brüderstraße 12</address><p class="status" data-laden="altstadt">Öffnungszeiten werden geladen</p><p class="filiale__wege"><a href="tel:+4929210000101">Anrufen</a><a href="#">Route</a></p></div></li>
<li class="filiale"><svg class="zf" viewBox="0 0 96 96" role="img" aria-label="Zeichnung: hohes Haus mit Bogenfenstern und Markise, Laden am Markt"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#laden-markt" width="96" height="96"/></svg><div class="filiale__schild"><h3><a href="#">Am Markt</a></h3><address>Markt 7</address><p class="status" data-laden="markt">Öffnungszeiten werden geladen</p><p class="filiale__wege"><a href="tel:+4929210000102">Anrufen</a><a href="#">Route</a></p></div></li>
<li class="filiale"><svg class="zf" viewBox="0 0 96 96" role="img" aria-label="Zeichnung: flacher Pavillon mit Glasfront, Laden am Bahnhof"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#laden-bahnhof" width="96" height="96"/></svg><div class="filiale__schild"><h3><a href="#">Bahnhof</a></h3><address>Bahnhofsplatz 1</address><p class="status" data-laden="bahnhof">Öffnungszeiten werden geladen</p><p class="filiale__wege"><a href="tel:+4929210000103">Anrufen</a><a href="#">Route</a></p></div></li>
<li class="filiale"><svg class="zf" viewBox="0 0 96 96" role="img" aria-label="Zeichnung: Zeilenhaus mit Fensterbändern und Ausleger, Laden Ostviertel"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#laden-ostviertel" width="96" height="96"/></svg><div class="filiale__schild"><h3><a href="#">Ostviertel</a></h3><address>Osthofenstraße 40</address><p class="status" data-laden="ost">Öffnungszeiten werden geladen</p><p class="filiale__wege"><a href="tel:+4929210000104">Anrufen</a><a href="#">Route</a></p></div></li>
</ul>
<section class="rahmen ld-dienste" aria-labelledby="ld-h2">
<h2 id="ld-h2">In jedem Laden</h2>
<div class="dienst"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#icon-reservieren" width="96" height="96"/></svg><h3>Reservieren</h3><p>Wir legen das Buch drei Werktage zurück.</p></div>
<div class="dienst"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#icon-abholen" width="96" height="96"/></svg><h3>Abholen</h3><p>Bestellt bis 18 Uhr, morgen ab 10 Uhr da.</p></div>
<div class="dienst"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#icon-lesung" width="96" height="96"/></svg><h3>Lesungen</h3><p>Am Markt, meist donnerstags um 19:30 Uhr.</p></div>
<div class="dienst"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#icon-geschenk" width="96" height="96"/></svg><h3>Einpacken</h3><p>Geschenkpapier gibt es an jeder Kasse.</p></div>
</section>
</main>
</div>
<!-- ============ werkzeug ============ -->
<div class="welt" data-welt="werkzeug" hidden>
<div class="kz-band">
<header class="rahmen kz-kopf">
<a class="kz-marke" href="#"><b>Hölscher</b><span>Kfz-Meisterbetrieb in Meppen</span></a>
<nav class="kz-nav" aria-label="Werkstatt"><a href="#preise">Festpreise</a><a href="#">Werkstatt</a><a href="tel:+4959310000200">05931 0000200</a><a class="taste" href="#">Termin buchen</a></nav>
</header>
</div>
<main>
<section class="rahmen kz-auftakt" aria-labelledby="kz-h1">
<h1 id="kz-h1">Sechs Arbeiten. Sechs Festpreise.</h1>
<p>Endpreise inklusive MwSt. für Kleinwagen bis Mittelklasse, Stand November 2026. Beispielpreise: Bevor wir mehr machen, rufen wir Sie an.</p>
</section>
<ul class="rahmen blaetter" id="preise">
<li class="blatt"><div class="blatt__zeichnung"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kfz-raeder" width="96" height="96"/></svg></div><div class="feld"><p class="pos">Pos.<b>01</b></p><div><h3><a href="#">Räderwechsel</a></h3><p class="inkl">mit Auswuchten und Drehmoment</p></div><p class="betrag"><small>ab</small>39 €</p></div></li>
<li class="blatt"><div class="blatt__zeichnung"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kfz-bremsen" width="96" height="96"/></svg></div><div class="feld"><p class="pos">Pos.<b>02</b></p><div><h3><a href="#">Bremsen vorn</a></h3><p class="inkl">Scheiben und Beläge, mit Material</p></div><p class="betrag"><small>ab</small>289 €</p></div></li>
<li class="blatt"><div class="blatt__zeichnung"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kfz-oel" width="96" height="96"/></svg></div><div class="feld"><p class="pos">Pos.<b>03</b></p><div><h3><a href="#">Ölwechsel</a></h3><p class="inkl">bis 5 Liter Öl, Filter, Entsorgung</p></div><p class="betrag"><small>ab</small>89 €</p></div></li>
<li class="blatt"><div class="blatt__zeichnung"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kfz-klima" width="96" height="96"/></svg></div><div class="feld"><p class="pos">Pos.<b>04</b></p><div><h3><a href="#">Klimaservice</a></h3><p class="inkl">Kältemittel absaugen, prüfen, füllen</p></div><p class="betrag"><small>ab</small>119 €</p></div></li>
<li class="blatt"><div class="blatt__zeichnung"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kfz-batterie" width="96" height="96"/></svg></div><div class="feld"><p class="pos">Pos.<b>05</b></p><div><h3><a href="#">Batterie prüfen</a></h3><p class="inkl">Messung mit Ausdruck, Tausch nach Absprache</p></div><p class="betrag"><small>ab</small>15 €</p></div></li>
<li class="blatt"><div class="blatt__zeichnung"><svg class="zf" viewBox="0 0 96 96" aria-hidden="true"><use class="zf-r" href="#zf-raster" width="96" height="96"/><use href="#kfz-scheibe" width="96" height="96"/></svg></div><div class="feld"><p class="pos">Pos.<b>06</b></p><div><h3><a href="#">Steinschlag</a></h3><p class="inkl">Reparatur, wenn kleiner als 2 cm</p></div><p class="betrag"><small>ab</small>79 €</p></div></li>
</ul>
</main>
<footer class="rahmen kz-fuss"><span>Kfz-Meisterbetrieb Hölscher · Industriestraße 8 · 49716 Meppen</span><span>Preise und Leistungen Beispiel, vom Betrieb prüfen lassen</span></footer>
</div>
<div class="pult">
<div class="gruppe" role="group" aria-label="Variante"><span>Variante</span>
<button type="button" data-v="backwaren" aria-pressed="true">Backwaren</button>
<button type="button" data-v="laden" aria-pressed="false">Laden</button>
<button type="button" data-v="werkzeug" aria-pressed="false">Werkzeug</button>
</div>
<div class="gruppe" role="group" aria-label="Ansicht"><span>Ansicht</span>
<button type="button" id="knopf-raster" aria-pressed="false">Raster zeigen</button>
<button type="button" id="knopf-neu">Neu zeichnen</button>
</div>
<dl id="werte"></dl>
</div>
<script>
(() => {
const h = document.documentElement;
const reduziert = () => h.classList.contains('reduziert');
const WELTEN = {
backwaren: { strich: '2 px rund', fein: '1,25 px', flaeche: '#EBD8BB', akzent: '#8A3C12', versatz: '3 / 2 Einheiten, Hover 0', marke: 'Backhaus Wendeborn, Einbeck' },
laden: { strich: '1,5 px eckig', fein: '1 px', flaeche: '#E2D3B8', akzent: '#2E5B45', versatz: '2,5 / 0 Einheiten, Hover 0', marke: 'Buchhandlung Lohbeck, Soest' },
werkzeug: { strich: '1,75 px gerade', fein: '1 px, Maßlinien', flaeche: '#DCDDD9', akzent: '#F5B700', versatz: '0, Hover: Teil rückt 4 heraus', marke: 'Kfz-Meisterbetrieb Hölscher, Meppen' }
};
const ausUrl = new URLSearchParams(location.search).get('v');
let welt = WELTEN[ausUrl] ? ausUrl : 'backwaren';
const knoepfe = [...document.querySelectorAll('.pult [data-v]')];
const werte = document.getElementById('werte');
const rasterKnopf = document.getElementById('knopf-raster');
let schleife = [], beobachter = null;
/* ---------- Zeichen-Reveal ---------- */
const zeichnungen = () => [...document.querySelectorAll(`.welt[data-welt="${welt}"] .zf`)];
const fertig = new WeakMap();
function vorbereiten(svg) {
if (reduziert()) return;
clearTimeout(fertig.get(svg));
svg.classList.remove('zf-zieht');
svg.style.setProperty('--zf-skal', (96 / (svg.getBoundingClientRect().width || 96)).toFixed(4));
svg.classList.add('zf-zu');
}
function zeichnen(svg, verz) {
if (reduziert() || !svg.classList.contains('zf-zu')) return;
svg.style.setProperty('--zf-skal', (96 / (svg.getBoundingClientRect().width || 96)).toFixed(4));
svg.style.setProperty('--zf-verz', verz + 'ms');
void svg.getBoundingClientRect();
svg.classList.add('zf-zieht');
// danach wieder non-scaling-stroke: gleiche Linie, keine Strichelung mehr
fertig.set(svg, setTimeout(() => { svg.classList.remove('zf-zu', 'zf-zieht'); svg.style.removeProperty('--zf-verz'); svg.style.removeProperty('--zf-skal'); }, 1000 + verz));
}
function beobachten() {
if (beobachter) beobachter.disconnect();
const alle = zeichnungen();
if (reduziert() || !('IntersectionObserver' in window)) return;
alle.forEach(vorbereiten);
let welle = 0, wellenZeit = 0;
beobachter = new IntersectionObserver(eintraege => {
const jetzt = performance.now();
if (jetzt - wellenZeit > 200) { welle = 0; wellenZeit = jetzt; }
eintraege.filter(e => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top || a.boundingClientRect.left - b.boundingClientRect.left)
.forEach(e => { zeichnen(e.target, Math.min(welle++, 8) * 70); beobachter.unobserve(e.target); });
}, { threshold: .35 });
alle.forEach(s => beobachter.observe(s));
}
/* ---------- Öffnungsstatus der Läden (eine Quelle) ---------- */
const ZEITEN = { // Mo–Fr, Sa; So geschlossen
altstadt: [[9.5, 18.5], [9.5, 16]], markt: [[9, 19], [9, 18]], bahnhof: [[7, 20], [8, 18]], ost: [[9.5, 18], [9.5, 14]]
};
const uhr = x => { const s = Math.floor(x), m = Math.round((x - s) * 60); return m ? `${s}:${String(m).padStart(2, '0')}` : `${s}`; };
function status() {
const teile = new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', weekday: 'short', hour: 'numeric', minute: 'numeric', hourCycle: 'h23' }).formatToParts(new Date());
const tag = teile.find(t => t.type === 'weekday').value.replace('.', ''), std = +teile.find(t => t.type === 'hour').value + +teile.find(t => t.type === 'minute').value / 60;
const TAGE = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'], i = TAGE.indexOf(tag);
const zeit = (z, t) => t === 0 ? null : (t === 6 ? z[1] : z[0]);
document.querySelectorAll('.status[data-laden]').forEach(el => {
const z = ZEITEN[el.dataset.laden], heute = zeit(z, i);
if (heute && std >= heute[0] && std < heute[1]) { el.dataset.offen = ''; el.textContent = `Geöffnet bis ${uhr(heute[1])} Uhr`; return; }
delete el.dataset.offen;
if (heute && std < heute[0]) { el.textContent = `Geschlossen · öffnet um ${uhr(heute[0])} Uhr`; return; }
let n = (i + 1) % 7; while (!zeit(z, n)) n = (n + 1) % 7;
el.textContent = `Geschlossen · öffnet ${n === (i + 1) % 7 ? 'morgen' : TAGE[n]} um ${uhr(zeit(z, n)[0])} Uhr`;
});
}
/* ---------- Variante ---------- */
function zeigeWerte() {
const w = WELTEN[welt];
werte.innerHTML = '';
[['Welt', w.marke], ['Kontur', w.strich], ['Detail', w.fein], ['Fläche', w.flaeche, true], ['Akzent', w.akzent, true], ['Versatz', w.versatz], ['Raster', '96 Einheiten, Standlinie 84']].forEach(([k, v, farbe]) => {
const dt = document.createElement('dt'), dd = document.createElement('dd');
dt.textContent = k;
if (farbe) { const i = document.createElement('i'); i.style.background = v; dd.append(i); }
dd.append(v); werte.append(dt, dd);
});
}
function setzeWelt(v, url) {
welt = v;
document.querySelectorAll('.welt').forEach(el => { el.hidden = el.dataset.welt !== v; });
knoepfe.forEach(k => k.setAttribute('aria-pressed', String(k.dataset.v === v)));
if (url) { const u = new URL(location.href); u.searchParams.set('v', v); history.replaceState(history.state, '', u); }
zeigeWerte();
beobachten();
}
knoepfe.forEach(k => k.addEventListener('click', () => { pause(); setzeWelt(k.dataset.v, true); }));
function raster(an) { if (an) h.dataset.raster = ''; else delete h.dataset.raster; rasterKnopf.setAttribute('aria-pressed', String(!!an)); }
rasterKnopf.addEventListener('click', () => raster(!h.hasAttribute('data-raster')));
function neustart() {
raster(false);
document.querySelectorAll('.zeige').forEach(el => el.classList.remove('zeige'));
const sichtbar = zeichnungen().filter(s => { const b = s.getBoundingClientRect(); return b.bottom > 0 && b.top < innerHeight; });
sichtbar.forEach(vorbereiten);
sichtbar.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top).forEach((s, i) => zeichnen(s, Math.min(i, 8) * 70));
}
document.getElementById('knopf-neu').addEventListener('click', () => { pause(); neustart(); });
function nach(ms, f) { schleife.push(setTimeout(f, ms)); }
function vorfuehren() {
pause();
neustart();
const karten = [...document.querySelectorAll(`.welt[data-welt="${welt}"] :is(.ware, .filiale, .blatt)`)].filter(k => k.getBoundingClientRect().top < innerHeight - 80);
const ziel = karten[welt === 'backwaren' ? 0 : 1] || karten[0];
nach(1900, () => ziel && ziel.classList.add('zeige'));
nach(3100, () => { ziel && ziel.classList.remove('zeige'); raster(true); });
nach(4500, () => raster(false));
nach(5200, vorfuehren);
}
function pause() { schleife.forEach(clearTimeout); schleife = []; }
function weiter() { vorfuehren(); }
status(); setInterval(status, 60000);
setzeWelt(welt, false);
})();
</script>
</body>
</html>