Zum Inhalt
← Galerien & Slider

Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)

Atelierwand eines Antwerpener Modelabels: native grid-lanes mit Rückfall auf JS-Masonry, umschaltbar gegen CSS-Spalten und Raster, Spuren und kürzeste Spur sichtbar.

Bilder unterschiedlicher Höhe, Hoch- und Querformate, werden lückenlos in Spuren gepackt, ohne Zuschnitt. Seit 2026 geht das nativ mit display: grid-lanes. Die Spuren definiert man wie bei Grid über grid-template-columns, jedes Element fließt in die gerade kürzeste Spur. Browser ohne Unterstützung bekommen ein normales Grid, CSS-Spalten (column-count) oder eine JS-Masonry.

Die Formate bleiben unbeschnitten. Die Wand wirkt dicht, lebendig und kuratiert statt rasterstarr. Nativ springt nach dem Laden nichts, und bei jeder Größenänderung entfällt die Neuberechnung per JS.

Wann einsetzen

Fotografie- und Moodboard-Galerien, Referenzwände, Inspirations-Feeds, Wände mit Kundenstimmen, Blog-Kartenlisten mit unterschiedlich langen Texten.

Wann nicht

Wenn die Reihenfolge streng gelesen werden muss, etwa chronologisch: Masonry gibt die Zeilenlogik auf. Bei gleich hohen Elementen reicht ein normales Grid. Bei wenigen Bildern (unter etwa acht).

Varianten

  • Nativ: display: grid-lanes mit repeat(auto-fill, minmax(…, 1fr))
  • Feste Spaltenzahl je Breakpoint (1fr 1fr / 1fr 1fr 1fr) mit column-count als Rückfall (mwop.net)
  • Rückfall mit flex-wrap und zentrierten Elementen (mwop.net)
  • JS-Masonry mit absolut positionierten Elementen (Pinterest)
  • Einzelne Elemente über zwei Spuren (grid-column: span 2) für Rhythmus

Umsetzung

Browserstand (caniuse, geprüft 31.10.2026): Safari und Safari iOS unterstützen display: grid-lanes ab 26.4 (März 2026). Chrome und Edge bis Version 159 nur hinter dem Flag „CSS Grid Lanes Layout“, Firefox nur hinter Flag mit der alten Syntax grid-template-rows: masonry. Deshalb immer mit Rückfall. Einfach: .wand { display: grid; display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem }. Robuster für die Lesereihenfolge (Manuel Matuzović): erst ein normales Grid, dann @supports (display: grid-lanes) and (reading-flow: grid-rows) { .wand { display: grid-lanes; reading-flow: grid-rows } }. Gegen hin- und herspringende Platzierung hilft die Toleranz: Spuren, deren Füllhöhe weniger als den Wert auseinanderliegt, gelten als gleich hoch. Safari 27.2 (Beta, laut web.dev September 2026) benennt die Eigenschaft von flow-tolerance in fit-tolerance um. Deshalb beide setzen, neuer Name zuerst: fit-tolerance: 2rem; flow-tolerance: 2rem. Danach mit der Tastatur testen. Rückfall-Optik: quadratisch zuschneiden (@supports not: aspect-ratio 1, object-fit cover, WebKit-Empfehlung) oder column-count mit break-inside: avoid. Wer echte Masonry überall braucht, lädt eine kleine JS-Masonry nur, wenn CSS.supports('display', 'grid-lanes') falsch ist. Bilder mit width und height, damit nichts nachspringt.

Robust umsetzen

Telefon. Ein bis zwei Spuren über minmax und auto-fill. Die native Lösung braucht beim Drehen oder Ändern der Breite keine Neuberechnung.

Ohne Bewegung. Das Layout selbst bewegt sich nicht. Einblend- und Umsortier-Animationen der Kacheln weglassen.

Barrierefrei. Hauptrisiko: Die sichtbare Reihenfolge weicht von der DOM-Reihenfolge ab, der Tab-Fokus springt. Wo verfügbar reading-flow: grid-rows setzen, dazu fit-tolerance (bis Safari 27.1 flow-tolerance, beide setzen) und mit der Tastatur testen. CSS-Spalten lesen spaltenweise und passen hier am schlechtesten. Alt-Texte für alle Bilder; in einer Galerie zusätzlich ein Leuchtkasten mit Pfeiltasten.

Code

<!DOCTYPE html>
<!--
  Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)
  Fundus · Galerien & Slider · https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/
  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>Masonry-Galerie mit nativem display: grid-lanes (plus Fallback) · 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: 'Zalando Sans'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/zalando-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: 'Fragment Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/fragment-mono@latest/latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/eb-garamond:vf@latest/latin-wght-italic.woff2') format('woff2-variations'); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --grund: #f6f3ee; --text: #121010; --karte: #ebe7e0; --linie: #cecdc6; --meta: #6a6359; --signal: #a3402a;
  --kurve: cubic-bezier(0.25, 1, 0.5, 1);   /* Rezept: Toteme --Carousel_Ease */
  --flip: 250ms; --ui: 200ms; --bild: 1000ms;
  --gap: 1rem; --spur: 14rem;               /* WebKit-Demo: minmax(14rem, 1fr), gap 1rem */
  --rand: clamp(16px, 3.4vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grund); color: var(--text); font-family: 'Zalando Sans', system-ui, sans-serif; font-size: 100%; -webkit-font-smoothing: antialiased; }
body { min-height: 100svh; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono, .zeile, .chip sup, .status, .spurkopf, .pult { font-family: 'Fragment Mono', ui-monospace, monospace; }
.zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .75rem; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); }
.ziffern { font-variant-numeric: tabular-nums; }

/* ---------- Kopf ---------- */
.kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; padding: 0 var(--rand); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.kopf nav { display: flex; gap: 22px; }
.kopf nav:last-child { justify-content: flex-end; }
.kopf a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 100ms var(--kurve); }
.kopf a:hover { text-decoration-color: currentColor; }
.wortmarke { font-size: 18px; font-weight: 500; font-stretch: 125%; letter-spacing: .24em; text-decoration: none !important; padding-left: .24em; }

/* ---------- Einstieg ---------- */
.einstieg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 24px 48px; align-items: end; padding: clamp(40px, 7vw, 96px) var(--rand) clamp(28px, 4vw, 48px); }
.einstieg .zeile { justify-content: flex-start; margin-bottom: 14px; }
h1 { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 400; font-stretch: 125%; letter-spacing: -.01em; line-height: 1.05; }
.einstieg p.text { font-size: 1rem; line-height: 1.5; text-wrap: pretty; max-width: 40ch; }
.einstieg p.text + .zeile { margin: 14px 0 0; }

/* ---------- Leiste: Filter und Status ---------- */
.leiste { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; padding: 0 var(--rand) 14px; border-bottom: 1px solid var(--linie); margin: 0 var(--rand); padding-left: 0; padding-right: 0; }
.filter { display: flex; gap: 22px; flex-wrap: wrap; }
.chip { font-size: .9375rem; line-height: 1.6; color: var(--meta); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--ui) var(--kurve), text-decoration-color 100ms var(--kurve), text-decoration-thickness 100ms var(--kurve); }
.chip sup { font-size: .625rem; margin-left: 3px; letter-spacing: .04em; }
.chip:hover { color: var(--text); text-decoration-color: currentColor; }
.chip[aria-pressed='true'] { color: var(--text); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.status { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); display: flex; align-items: center; gap: 8px; }
.status b { color: var(--text); font-weight: 400; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: #3f4a3a; flex: none; }
.status.rueckfall i { background: var(--signal); }

/* ---------- Spuren (Hilfslinien) ---------- */
.wandrahmen { position: relative; margin: 0 var(--rand); padding: 30px 0 0; }
.spurkopf { position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none; opacity: 0; transition: opacity var(--ui) var(--kurve); }
.spurkopf span { position: absolute; top: 9px; font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); white-space: nowrap; overflow: hidden; display: flex; justify-content: space-between; gap: 8px; }
.spurkopf span.kurz { color: var(--text); }
.baender { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; pointer-events: none; opacity: 0; transition: opacity var(--ui) var(--kurve); }
.baender i { position: absolute; top: 0; bottom: 0; background: rgba(206, 205, 198, .2); border-left: 1px dashed rgba(140, 133, 123, .4); border-right: 1px dashed rgba(140, 133, 123, .4); }
.mit-spuren .spurkopf, .mit-spuren .baender { opacity: 1; }

/* ---------- Die Wand ---------- */
.wand { list-style: none; position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--spur), 100%), 1fr)); gap: var(--gap); padding-bottom: 8px; }
.stein { position: relative; min-width: 0; }
.stein[hidden] { display: none; }
/* 1. Nativ: Grid Lanes (Safari 26.4+, Chromium hinter Flag). Ohne Unterstützung bleibt display: grid stehen.
   Toleranz: Spuren, deren Füllhöhe weniger als 2rem auseinanderliegt, gelten als gleich hoch; das Element geht in die erste davon,
   die Reihenfolge springt weniger. Safari 27.2 nennt die Eigenschaft fit-tolerance (vorher flow-tolerance): neuer Name zuerst, alter als Rückfall. */
.wand[data-layout='lanes'] { display: grid; display: grid-lanes; reading-flow: grid-rows; align-items: start; fit-tolerance: 2rem; flow-tolerance: 2rem; }
.wand[data-layout='lanes'] .breit { grid-column: span 2; }
/* 2. CSS-Spalten: column-width = Spurbreite, Reihenfolge läuft spaltenweise */
.wand[data-layout='spalten'] { display: block; columns: var(--spur); column-gap: var(--gap); }
.wand[data-layout='spalten'] .stein { break-inside: avoid; margin-bottom: var(--gap); }
/* 3. JS-Masonry: absolut positioniert, Höhe setzt das Skript */
.wand[data-layout='js'] { display: block; }
.wand[data-layout='js'] .stein { position: absolute; top: 0; left: 0; }
/* 4. Raster: normales Grid mit quadratischem Zuschnitt (WebKit-Empfehlung für @supports not) */
.wand[data-layout='raster'] .bild { aspect-ratio: 1 / 1 !important; }
.wand[data-layout='raster'] .bild svg { height: 100%; }
.wand[data-layout='raster'] .notiz { aspect-ratio: 1 / 1; overflow: hidden; }

.kachel { display: block; width: 100%; cursor: zoom-in; }
.kachel:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.bild { display: block; overflow: hidden; background: var(--karte); }
.bild svg { display: block; width: 100%; height: auto; transition: scale var(--bild) var(--kurve); }
.unter { display: grid; gap: 3px; padding: 9px 0 4px; }
.titel { font-size: .9375rem; font-weight: 500; line-height: 1.35; text-wrap: pretty; }
@media (hover: hover) { .kachel:hover .bild svg { scale: 1.035; } .kachel:hover .titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }

.notiz { padding: 20px 20px 18px; display: grid; align-content: start; gap: 14px; }
.zitat { padding: 18px 0 8px; border-top: 1px solid var(--text); }
.zitat blockquote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.zitat p { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.5rem; line-height: 1.2; text-wrap: pretty; }
.masse { background: var(--karte); }
.masse-titel { font-size: .9375rem; font-weight: 500; }
.masse dl { display: grid; font: .8125rem/1.5 'Fragment Mono', monospace; }
.masse dl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--linie); padding: 3px 0; }
.masse dt { color: var(--meta); }
.hand { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.0625rem; line-height: 1.3; color: #5b544b; }
.termin { background: var(--text); color: var(--grund); }
.termin .zeile { color: #a69d90; }
.termin-titel { font-size: 1.25rem; font-stretch: 112%; line-height: 1.2; text-wrap: pretty; }
.termin-link { justify-self: start; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-thickness 100ms var(--kurve); }
.termin-link:hover { text-decoration-thickness: 2px; }

.fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 48px var(--rand) 40px; }

/* ---------- Leuchtkasten ---------- */
.leuchtkasten { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: var(--grund); color: var(--text); }
.leuchtkasten::backdrop { background: rgba(246, 243, 238, .6); }
.leuchtkasten[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lk-buehne { position: relative; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px) 0; min-height: 0; }
.lk-buehne > span { grid-area: 1 / 1; display: block; height: 100%; max-width: 100%; aspect-ratio: var(--ar); max-height: 100%; }
.lk-buehne svg { display: block; width: 100%; height: 100%; }
.lk-fuss { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: end; padding: 16px clamp(16px, 4vw, 48px) 20px; }
.lk-fuss .titel { font-size: 1rem; }
.lk-fuss .unter { max-width: 26rem; padding: 0; }
.lk-knoepfe { display: flex; gap: 18px; font: .75rem 'Fragment Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.lk-knoepfe button { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 100ms var(--kurve); }
.lk-knoepfe button:hover { text-decoration-color: currentColor; }

/* ---------- Pult (Varianten, Werte) ---------- */
.pult { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: min(336px, calc(100vw - 32px)); padding: 12px 14px 12px; background: rgba(246, 243, 238, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linie); font-size: .6875rem; letter-spacing: .04em; color: var(--meta); display: grid; gap: 10px; }
.pult .kopfzeile { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .06em; }
.pult .kopfzeile b { color: var(--text); font-weight: 400; }
.segment { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linie); }
.segment button { height: 28px; font-size: .6875rem; text-align: center; color: var(--meta); transition: background-color var(--ui) var(--kurve), color var(--ui) var(--kurve); }
.segment button + button { border-left: 1px solid var(--linie); }
.segment button[aria-pressed='true'] { background: var(--text); color: var(--grund); }
.segment button .x { opacity: .6; }
.schalter { display: flex; justify-content: space-between; align-items: center; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
.schalter span:last-child { width: 26px; height: 14px; border: 1px solid var(--text); position: relative; }
.schalter span:last-child::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: var(--text); transition: translate var(--ui) var(--kurve); }
.schalter[aria-pressed='true'] span:last-child::after { translate: 12px 0; }
.pult .werte { line-height: 1.55; }
.pult .werte b { color: var(--text); font-weight: 400; }

/* ---------- Vorschau: nur die Wand ---------- */
.vorschau body { overflow: hidden; }
.vorschau .kopf, .vorschau .einstieg, .vorschau .fuss { display: none; }
.vorschau .leiste { margin-top: 22px; }
.vorschau .wand { --spur: 10rem; }

/* ---------- Reduziert ---------- */
:root.reduziert * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
:root.reduziert .kachel:hover .bild svg { scale: none; }

/* ---------- Schmal ---------- */
@media (max-width: 860px) {
  .einstieg { grid-template-columns: 1fr; }
  .kopf nav:first-child a:not(:first-child), .kopf nav:last-child a:not(:last-child) { display: none; }
}
@media (max-width: 640px) {
  :root { --spur: 9.5rem; --gap: .75rem; }
  .filter { gap: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--rand) * -1); padding-right: var(--rand); }
  .chip { white-space: nowrap; }
  .leiste { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .status span { overflow-wrap: anywhere; }
  .titel { font-size: .875rem; }
  .zeile { font-size: .6875rem; gap: 6px; }
  .zeile span:last-child { text-align: right; }
  .zitat p { font-size: 1.25rem; }
  .notiz { padding: 14px; }
  .lk-fuss { grid-template-columns: 1fr; }
}
@media (hover: none) { .kachel { cursor: pointer; } }
/* Kontrastmodus: Knöpfe mit Rahmen */
@media (forced-colors: active) { button, [role=button], [role=tab], [role=switch] { border: 1px solid ButtonText !important; } }
</style>
</head>
<body>
<svg class="defs" width="0" height="0" aria-hidden="true" focusable="false"><defs>
<pattern id="fischgrat" width="20" height="10" patternUnits="userSpaceOnUse"><rect width="20" height="10" fill="#5a5146"/><path d="M0 5L5 0M0 10L10 0M5 10L10 5" stroke="#8f8370" stroke-width="2"/><path d="M10 0L20 10M10 5L15 10M15 0L20 5" stroke="#3f382f" stroke-width="2"/></pattern>
<pattern id="bluete" width="64" height="64" patternUnits="userSpaceOnUse"><rect width="64" height="64" fill="#1d2230"/>
<g fill="#3f4a3a"><ellipse cx="44" cy="16" rx="3" ry="8" transform="rotate(40 44 16)"/><ellipse cx="18" cy="46" rx="3" ry="8" transform="rotate(-35 18 46)"/><ellipse cx="58" cy="30" rx="2.4" ry="6" transform="rotate(-20 58 30)"/></g>
<g transform="translate(18 18)" fill="#c08a3e"><ellipse cy="-7" rx="4.2" ry="7.5"/><ellipse cy="-7" rx="4.2" ry="7.5" transform="rotate(72)"/><ellipse cy="-7" rx="4.2" ry="7.5" transform="rotate(144)"/><ellipse cy="-7" rx="4.2" ry="7.5" transform="rotate(216)"/><ellipse cy="-7" rx="4.2" ry="7.5" transform="rotate(288)"/><circle r="3.2" fill="#9a4b2f"/></g>
<g transform="translate(46 46)" fill="#e9e4da"><ellipse cy="-6" rx="3.4" ry="6" transform="rotate(20)"/><ellipse cy="-6" rx="3.4" ry="6" transform="rotate(92)"/><ellipse cy="-6" rx="3.4" ry="6" transform="rotate(164)"/><ellipse cy="-6" rx="3.4" ry="6" transform="rotate(236)"/><ellipse cy="-6" rx="3.4" ry="6" transform="rotate(308)"/><circle r="2.4" fill="#c08a3e"/></g>
<circle cx="50" cy="12" r="1.6" fill="#e9e4da"/><circle cx="8" cy="58" r="1.6" fill="#c08a3e"/><circle cx="34" cy="34" r="1.2" fill="#8d9aa3"/></pattern>
<pattern id="plissee" width="14" height="10" patternUnits="userSpaceOnUse"><rect width="14" height="10" fill="#45513f"/><rect width="6" height="10" fill="#51604b"/><rect x="6" width="1.2" height="10" fill="#2f382c"/><rect x="12.8" width="1.2" height="10" fill="#5f6e58"/></pattern>
<pattern id="rippe" width="8" height="7" patternUnits="userSpaceOnUse"><rect width="8" height="7" fill="#bba582"/><path d="M0 0L4 6L8 0" fill="none" stroke="#d2bf9c" stroke-width="2"/><path d="M0 1.5L4 7.5L8 1.5" fill="none" stroke="#a08a66" stroke-width=".8"/></pattern>
<pattern id="fenstercheck" width="28" height="28" patternUnits="userSpaceOnUse"><rect width="28" height="28" fill="#6b5a48"/><g stroke="#5c4c3c" stroke-width=".8"><path d="M0 4H28M0 9H28M0 14H28M0 19H28M0 24H28M4 0V28M9 0V28M14 0V28M19 0V28M24 0V28" opacity=".55"/></g><path d="M0 .8H28M.8 0V28" stroke="#b39c78" stroke-width="1.4"/></pattern>
<pattern id="ziegel" width="24" height="12" patternUnits="userSpaceOnUse"><rect width="24" height="12" fill="#6f4130"/><path d="M0 .5H24M0 6.5H24M6 .5V6.5M18 6.5V12" stroke="#4f2d22" stroke-width="1"/></pattern>
<pattern id="webung" width="3" height="3" patternUnits="userSpaceOnUse"><rect width="3" height="3" fill="#121010"/><path d="M0 1.5H3" stroke="#262120" stroke-width="1"/></pattern>
<linearGradient id="volumen" x1="0" x2="1"><stop offset="0" stop-color="#000" stop-opacity=".2"/><stop offset=".24" stop-color="#fff" stop-opacity=".08"/><stop offset=".5" stop-color="#000" stop-opacity="0"/><stop offset=".78" stop-color="#fff" stop-opacity=".06"/><stop offset="1" stop-color="#000" stop-opacity=".22"/></linearGradient>
<linearGradient id="himmel" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#b9c0c0"/><stop offset=".7" stop-color="#e3ddd2"/><stop offset="1" stop-color="#efe9df"/></linearGradient>
<linearGradient id="wasser" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#97a3a6"/><stop offset="1" stop-color="#6d7a7f"/></linearGradient>
<linearGradient id="schlick" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7a6853"/><stop offset="1" stop-color="#4c3f32"/></linearGradient>
<linearGradient id="scheibe" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2a3142"/><stop offset=".55" stop-color="#1a1f2b"/><stop offset="1" stop-color="#232a38"/></linearGradient>
<radialGradient id="horn" cx=".38" cy=".34" r=".75"><stop offset="0" stop-color="#7b6250"/><stop offset=".55" stop-color="#4a372a"/><stop offset="1" stop-color="#21170f"/></radialGradient>
<filter id="korn" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.18"/></filter>
<filter id="schatten" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#121010" flood-opacity=".18"/></filter>
<filter id="weich"><feGaussianBlur stdDeviation="5"/></filter>
</defs></svg>
<header class="kopf">
  <nav aria-label="Kollektion"><a href="#">Kollektion</a><a href="#">Lookbook</a><a href="#">Atelier</a></nav>
  <a class="wortmarke" href="#" aria-label="RUIEN, Startseite">RUIEN</a>
  <nav aria-label="Konto"><a href="#">Suche</a><a href="#">Konto</a><a href="#">Tasche <span class="ziffern">(0)</span></a></nav>
</header>

<section class="einstieg" aria-labelledby="titel">
  <div>
    <p class="zeile"><span>Herbst/Winter 2026 · Atelierwand</span></p>
    <h1 id="titel">Laagwater</h1>
  </div>
  <div>
    <p class="text">Zwanzig Blätter von der Wand unseres Ateliers in Antwerpen: Looks, Stoffe, Fundstücke vom Kai. Jedes Bild behält sein Format, die Wand ordnet sich selbst.</p>
    <p class="zeile"><span>RUIEN, Kloosterstraat 41, Antwerpen</span></p>
  </div>
</section>

<div class="leiste">
  <div class="filter" role="group" aria-label="Nach Art filtern"><button type="button" class="chip" data-filter="alle" aria-pressed="true">Alle<sup class="ziffern">20</sup></button><button type="button" class="chip" data-filter="looks" aria-pressed="false">Looks<sup class="ziffern">7</sup></button><button type="button" class="chip" data-filter="stoffe" aria-pressed="false">Stoffe<sup class="ziffern">5</sup></button><button type="button" class="chip" data-filter="details" aria-pressed="false">Details<sup class="ziffern">3</sup></button><button type="button" class="chip" data-filter="orte" aria-pressed="false">Orte<sup class="ziffern">2</sup></button><button type="button" class="chip" data-filter="notizen" aria-pressed="false">Notizen<sup class="ziffern">3</sup></button></div>
  <p class="status" data-status aria-live="polite"><i aria-hidden="true"></i><span data-status-text>Layout wird gewählt</span></p>
</div>

<div class="wandrahmen" data-rahmen>
  <div class="spurkopf" data-spurkopf aria-hidden="true"></div>
  <div class="baender" data-baender aria-hidden="true"></div>
  <ul class="wand" data-wand data-layout="lanes" aria-label="Atelierwand der Kollektion Laagwater">
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 400"><svg viewBox="0 0 300 400" width="300" height="400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Zweireihiger Mantel aus Fischgrat, technische Zeichnung"><rect width="300" height="400" fill="#e4dfd6"/><ellipse cx="150.0" cy="378" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M118 56 Q150 68 182 56 L224 72 Q238 78 240 96 L258 262 L238 268 L226 150 L230 362 L70 362 L74 150 L62 268 L42 262 L60 96 Q62 78 76 72 Z" fill="url(#fischgrat)"/></g><path d="M118 56 Q150 68 182 56 L224 72 Q238 78 240 96 L258 262 L238 268 L226 150 L230 362 L70 362 L74 150 L62 268 L42 262 L60 96 Q62 78 76 72 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(18,16,16,.5)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M118 56 L132 94 L150 74 L168 94 L182 56"/><path d="M132 94 L162 150"/><path d="M168 94 L150 128"/><path d="M162 150 L162 362"/><path d="M92 252 L126 248"/><path d="M174 248 L208 252"/><path d="M226 150 L224 76"/><path d="M74 150 L76 76"/></g><circle cx="140" cy="182" r="4.5" fill="#2a221c"/><circle cx="138.8" cy="180.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="184" cy="182" r="4.5" fill="#2a221c"/><circle cx="182.8" cy="180.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="140" cy="236" r="4.5" fill="#2a221c"/><circle cx="138.8" cy="234.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="184" cy="236" r="4.5" fill="#2a221c"/><circle cx="182.8" cy="234.8" r="1.6" fill="rgba(255,255,255,.25)"/><path d="M76 352 H224" stroke="rgba(255,255,255,.3)" stroke-dasharray="3 3" fill="none"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 01</span><span class="ziffern">890 €</span></span><span class="titel">Zweireihiger Mantel, Fischgrat</span></span></button>
</li>
<li class="stein notiz zitat" data-kat="notizen">
  <blockquote><p>„Bei Niedrigwasser zeigt die Schelde ihren Grund: Schlick, Rost, Algen, Kalk. Mehr Farbkarte brauchten wir nicht.“</p>
  <footer class="zeile"><span>Lien Verbruggen</span><span>Atelierleitung</span></footer></blockquote>
</li>
<li class="stein" data-kat="stoffe">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 300"><svg viewBox="0 0 300 300" width="300" height="300" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Stoffmuster Fischgrat"><rect width="300" height="300" fill="#ebe7e0"/><g filter="url(#schatten)"><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.0 L286.0 30.0 L290.0 38.0 L286.0 46.0 L290.0 54.0 L286.0 62.0 L290.0 70.0 L286.0 78.0 L290.0 86.0 L286.0 94.0 L290.0 102.0 L286.0 110.0 L290.0 118.0 L286.0 126.0 L290.0 134.0 L286.0 142.0 L290.0 150.0 L286.0 158.0 L290.0 166.0 L286.0 174.0 L290.0 182.0 L286.0 190.0 L290.0 198.0 L286.0 206.0 L290.0 214.0 L286.0 222.0 L290.0 230.0 L286.0 238.0 L290.0 246.0 L286.0 254.0 L290.0 262.0 L286.0 270.0 L290.0 278.0 L286.0 286.0 L278.0 290.0 L270.0 286.0 L262.0 290.0 L254.0 286.0 L246.0 290.0 L238.0 286.0 L230.0 290.0 L222.0 286.0 L214.0 290.0 L206.0 286.0 L198.0 290.0 L190.0 286.0 L182.0 290.0 L174.0 286.0 L166.0 290.0 L158.0 286.0 L150.0 290.0 L142.0 286.0 L134.0 290.0 L126.0 286.0 L118.0 290.0 L110.0 286.0 L102.0 290.0 L94.0 286.0 L86.0 290.0 L78.0 286.0 L70.0 290.0 L62.0 286.0 L54.0 290.0 L46.0 286.0 L38.0 290.0 L30.0 286.0 L22.0 290.0 L14.0 286.0 L10.0 278.0 L14.0 270.0 L10.0 262.0 L14.0 254.0 L10.0 246.0 L14.0 238.0 L10.0 230.0 L14.0 222.0 L10.0 214.0 L14.0 206.0 L10.0 198.0 L14.0 190.0 L10.0 182.0 L14.0 174.0 L10.0 166.0 L14.0 158.0 L10.0 150.0 L14.0 142.0 L10.0 134.0 L14.0 126.0 L10.0 118.0 L14.0 110.0 L10.0 102.0 L14.0 94.0 L10.0 86.0 L14.0 78.0 L10.0 70.0 L14.0 62.0 L10.0 54.0 L14.0 46.0 L10.0 38.0 L14.0 30.0 L10.0 22.0 Z" fill="url(#fischgrat)"/></g><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.0 L286.0 30.0 L290.0 38.0 L286.0 46.0 L290.0 54.0 L286.0 62.0 L290.0 70.0 L286.0 78.0 L290.0 86.0 L286.0 94.0 L290.0 102.0 L286.0 110.0 L290.0 118.0 L286.0 126.0 L290.0 134.0 L286.0 142.0 L290.0 150.0 L286.0 158.0 L290.0 166.0 L286.0 174.0 L290.0 182.0 L286.0 190.0 L290.0 198.0 L286.0 206.0 L290.0 214.0 L286.0 222.0 L290.0 230.0 L286.0 238.0 L290.0 246.0 L286.0 254.0 L290.0 262.0 L286.0 270.0 L290.0 278.0 L286.0 286.0 L278.0 290.0 L270.0 286.0 L262.0 290.0 L254.0 286.0 L246.0 290.0 L238.0 286.0 L230.0 290.0 L222.0 286.0 L214.0 290.0 L206.0 286.0 L198.0 290.0 L190.0 286.0 L182.0 290.0 L174.0 286.0 L166.0 290.0 L158.0 286.0 L150.0 290.0 L142.0 286.0 L134.0 290.0 L126.0 286.0 L118.0 290.0 L110.0 286.0 L102.0 290.0 L94.0 286.0 L86.0 290.0 L78.0 286.0 L70.0 290.0 L62.0 286.0 L54.0 290.0 L46.0 286.0 L38.0 290.0 L30.0 286.0 L22.0 290.0 L14.0 286.0 L10.0 278.0 L14.0 270.0 L10.0 262.0 L14.0 254.0 L10.0 246.0 L14.0 238.0 L10.0 230.0 L14.0 222.0 L10.0 214.0 L14.0 206.0 L10.0 198.0 L14.0 190.0 L10.0 182.0 L14.0 174.0 L10.0 166.0 L14.0 158.0 L10.0 150.0 L14.0 142.0 L10.0 134.0 L14.0 126.0 L10.0 118.0 L14.0 110.0 L10.0 102.0 L14.0 94.0 L10.0 86.0 L14.0 78.0 L10.0 70.0 L14.0 62.0 L10.0 54.0 L14.0 46.0 L10.0 38.0 L14.0 30.0 L10.0 22.0 Z" fill="url(#volumen)" opacity=".5"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.45"/></svg></span>
  <span class="unter"><span class="zeile"><span>Stoff 01</span><span class="ziffern">Schurwolle</span></span><span class="titel">Fischgrat, gewebt in Flandern</span></span></button>
</li>
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 375"><svg viewBox="0 0 300 375" width="300" height="375" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Hemd mit Blütendruck, technische Zeichnung"><rect width="300" height="375" fill="#d8d0c0"/><ellipse cx="150.0" cy="353" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M120 50 Q150 60 180 50 L228 66 Q240 72 244 86 L270 196 L246 204 L226 130 L228 330 Q150 342 72 330 L74 130 L54 204 L30 196 L56 86 Q60 72 72 66 Z" fill="url(#bluete)"/></g><path d="M120 50 Q150 60 180 50 L228 66 Q240 72 244 86 L270 196 L246 204 L226 130 L228 330 Q150 342 72 330 L74 130 L54 204 L30 196 L56 86 Q60 72 72 66 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(233,228,218,.55)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M120 50 L136 86 L150 66 L164 86 L180 50"/><path d="M150 66 L150 336"/><path d="M246 204 L226 130"/><path d="M54 204 L74 130"/><path d="M252 186 L270 180"/><path d="M48 186 L30 180"/><path d="M88 118 H122 V152 Q105 158 88 152 Z"/></g><circle cx="156" cy="104" r="2.6" fill="#e9e4da"/><circle cx="154.8" cy="102.8" r="0.9" fill="rgba(255,255,255,.25)"/><circle cx="156" cy="148" r="2.6" fill="#e9e4da"/><circle cx="154.8" cy="146.8" r="0.9" fill="rgba(255,255,255,.25)"/><circle cx="156" cy="192" r="2.6" fill="#e9e4da"/><circle cx="154.8" cy="190.8" r="0.9" fill="rgba(255,255,255,.25)"/><circle cx="156" cy="236" r="2.6" fill="#e9e4da"/><circle cx="154.8" cy="234.8" r="0.9" fill="rgba(255,255,255,.25)"/><circle cx="156" cy="280" r="2.6" fill="#e9e4da"/><circle cx="154.8" cy="278.8" r="0.9" fill="rgba(255,255,255,.25)"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 02</span><span class="ziffern">240 €</span></span><span class="titel">Hemd mit Blütendruck, Seide</span></span></button>
</li>
<li class="stein breit" data-kat="orte">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 480 / 300"><svg viewBox="0 0 480 300" width="480" height="300" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Antwerpener Kai bei Niedrigwasser: Kräne, Schelde, Schlick und eine Person im Mantel"><rect width="480" height="300" fill="url(#himmel)"/><g stroke="#6f7b80" stroke-width="2" fill="none"><path d="M330 150 V70 H392 M352 70 L330 92 M392 70 V84"/><path d="M402 150 V58 H452 M424 58 L402 80 M452 58 V74"/><path d="M60 150 V96 H104 M78 96 L60 112"/></g><path d="M0 150 H120 L134 140 H230 L240 146 H480 V160 H0 Z" fill="#7f8b8e"/><rect y="158" width="480" height="38" fill="url(#wasser)"/><g stroke="rgba(233,228,218,.45)" stroke-width="1"><path d="M40 168 H120M200 174 H300M340 166 H420M90 184 H150M260 188 H360"/></g><path d="M0 194 Q120 186 240 196 T480 192 V300 H0 Z" fill="url(#schlick)"/><g stroke="rgba(233,228,218,.16)" stroke-width="1.2" fill="none"><path d="M20 230 Q160 214 300 236 T480 226"/><path d="M0 262 Q140 248 280 268 T480 256"/></g><g fill="#2a2420"><path d="M300 222 l3 -26 q3 -10 8 -10 q5 0 8 10 l3 26 z"/><circle cx="311" cy="180" r="5"/></g><ellipse cx="311" cy="224" rx="16" ry="2.5" fill="rgba(18,16,16,.3)"/><path d="M0 196 Q120 188 240 198 T480 194" stroke="rgba(233,228,218,.4)" fill="none"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.6"/></svg></span>
  <span class="unter"><span class="zeile"><span>Ort</span><span class="ziffern">Sint-Andries</span></span><span class="titel">Kai bei Laagwater, 7:40 Uhr</span></span></button>
</li>
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 450"><svg viewBox="0 0 300 450" width="300" height="450" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Plisseehose aus Wollkrepp, technische Zeichnung"><rect width="300" height="450" fill="#ebe7e0"/><ellipse cx="150.0" cy="428" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M86 40 L214 40 L222 70 L240 420 L176 420 L152 152 L148 152 L124 420 L60 420 L78 70 Z" fill="url(#plissee)"/></g><path d="M86 40 L214 40 L222 70 L240 420 L176 420 L152 152 L148 152 L124 420 L60 420 L78 70 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(18,16,16,.45)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M84 60 H216"/><path d="M150 60 L150 142"/><path d="M104 64 L88 418"/><path d="M122 64 L108 418"/><path d="M178 64 L192 418"/><path d="M196 64 L212 418"/><path d="M96 74 Q112 84 124 74"/></g><circle cx="150" cy="50" r="3.2" fill="#c9c2b4"/><circle cx="148.8" cy="48.8" r="1.1" fill="rgba(255,255,255,.25)"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 03</span><span class="ziffern">360 €</span></span><span class="titel">Plisseehose aus Wollkrepp</span></span></button>
</li>
<li class="stein" data-kat="details">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 300"><svg viewBox="0 0 300 300" width="300" height="300" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Hornknopf mit Rost-Faden auf Fischgrat, Nahaufnahme"><rect width="300" height="300" fill="url(#fischgrat)"/><rect width="300" height="300" fill="rgba(18,16,16,.18)"/><g filter="url(#schatten)"><circle cx="150" cy="150" r="104" fill="url(#horn)"/></g><circle cx="150" cy="150" r="88" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="3"/><g fill="none" stroke="rgba(233,228,218,.09)" stroke-width="5"><path d="M70 120 Q150 90 232 136"/><path d="M64 170 Q150 140 236 186"/><path d="M84 214 Q150 196 222 222"/></g><g stroke="#c08a3e" stroke-width="6" stroke-linecap="round"><path d="M128 128 L172 172"/><path d="M172 128 L128 172"/></g><g fill="#1a120d"><circle cx="128" cy="128" r="9"/><circle cx="172" cy="128" r="9"/><circle cx="128" cy="172" r="9"/><circle cx="172" cy="172" r="9"/></g><ellipse cx="116" cy="96" rx="34" ry="14" fill="rgba(255,255,255,.1)" transform="rotate(-24 116 96)"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.4"/></svg></span>
  <span class="unter"><span class="zeile"><span>Detail</span><span class="ziffern">Horn</span></span><span class="titel">Knopf mit Faden in Roest</span></span></button>
</li>
<li class="stein" data-kat="stoffe">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 375"><svg viewBox="0 0 300 375" width="300" height="375" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Stoffmuster Seidenjacquard mit Blüten"><rect width="300" height="375" fill="#e4dfd6"/><g filter="url(#schatten)"><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.1 L286.0 30.1 L290.0 38.2 L286.0 46.3 L290.0 54.3 L286.0 62.4 L290.0 70.5 L286.0 78.6 L290.0 86.6 L286.0 94.7 L290.0 102.8 L286.0 110.8 L290.0 118.9 L286.0 127.0 L290.0 135.0 L286.0 143.1 L290.0 151.2 L286.0 159.3 L290.0 167.3 L286.0 175.4 L290.0 183.5 L286.0 191.5 L290.0 199.6 L286.0 207.7 L290.0 215.7 L286.0 223.8 L290.0 231.9 L286.0 240.0 L290.0 248.0 L286.0 256.1 L290.0 264.2 L286.0 272.2 L290.0 280.3 L286.0 288.4 L290.0 296.4 L286.0 304.5 L290.0 312.6 L286.0 320.7 L290.0 328.7 L286.0 336.8 L290.0 344.9 L286.0 352.9 L290.0 361.0 L278.0 365.0 L270.0 361.0 L262.0 365.0 L254.0 361.0 L246.0 365.0 L238.0 361.0 L230.0 365.0 L222.0 361.0 L214.0 365.0 L206.0 361.0 L198.0 365.0 L190.0 361.0 L182.0 365.0 L174.0 361.0 L166.0 365.0 L158.0 361.0 L150.0 365.0 L142.0 361.0 L134.0 365.0 L126.0 361.0 L118.0 365.0 L110.0 361.0 L102.0 365.0 L94.0 361.0 L86.0 365.0 L78.0 361.0 L70.0 365.0 L62.0 361.0 L54.0 365.0 L46.0 361.0 L38.0 365.0 L30.0 361.0 L22.0 365.0 L14.0 361.0 L10.0 352.9 L14.0 344.9 L10.0 336.8 L14.0 328.7 L10.0 320.7 L14.0 312.6 L10.0 304.5 L14.0 296.4 L10.0 288.4 L14.0 280.3 L10.0 272.2 L14.0 264.2 L10.0 256.1 L14.0 248.0 L10.0 240.0 L14.0 231.9 L10.0 223.8 L14.0 215.7 L10.0 207.7 L14.0 199.6 L10.0 191.5 L14.0 183.5 L10.0 175.4 L14.0 167.3 L10.0 159.3 L14.0 151.2 L10.0 143.1 L14.0 135.0 L10.0 127.0 L14.0 118.9 L10.0 110.8 L14.0 102.8 L10.0 94.7 L14.0 86.6 L10.0 78.6 L14.0 70.5 L10.0 62.4 L14.0 54.3 L10.0 46.3 L14.0 38.2 L10.0 30.1 L14.0 22.1 Z" fill="url(#bluete)"/></g><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.1 L286.0 30.1 L290.0 38.2 L286.0 46.3 L290.0 54.3 L286.0 62.4 L290.0 70.5 L286.0 78.6 L290.0 86.6 L286.0 94.7 L290.0 102.8 L286.0 110.8 L290.0 118.9 L286.0 127.0 L290.0 135.0 L286.0 143.1 L290.0 151.2 L286.0 159.3 L290.0 167.3 L286.0 175.4 L290.0 183.5 L286.0 191.5 L290.0 199.6 L286.0 207.7 L290.0 215.7 L286.0 223.8 L290.0 231.9 L286.0 240.0 L290.0 248.0 L286.0 256.1 L290.0 264.2 L286.0 272.2 L290.0 280.3 L286.0 288.4 L290.0 296.4 L286.0 304.5 L290.0 312.6 L286.0 320.7 L290.0 328.7 L286.0 336.8 L290.0 344.9 L286.0 352.9 L290.0 361.0 L278.0 365.0 L270.0 361.0 L262.0 365.0 L254.0 361.0 L246.0 365.0 L238.0 361.0 L230.0 365.0 L222.0 361.0 L214.0 365.0 L206.0 361.0 L198.0 365.0 L190.0 361.0 L182.0 365.0 L174.0 361.0 L166.0 365.0 L158.0 361.0 L150.0 365.0 L142.0 361.0 L134.0 365.0 L126.0 361.0 L118.0 365.0 L110.0 361.0 L102.0 365.0 L94.0 361.0 L86.0 365.0 L78.0 361.0 L70.0 365.0 L62.0 361.0 L54.0 365.0 L46.0 361.0 L38.0 365.0 L30.0 361.0 L22.0 365.0 L14.0 361.0 L10.0 352.9 L14.0 344.9 L10.0 336.8 L14.0 328.7 L10.0 320.7 L14.0 312.6 L10.0 304.5 L14.0 296.4 L10.0 288.4 L14.0 280.3 L10.0 272.2 L14.0 264.2 L10.0 256.1 L14.0 248.0 L10.0 240.0 L14.0 231.9 L10.0 223.8 L14.0 215.7 L10.0 207.7 L14.0 199.6 L10.0 191.5 L14.0 183.5 L10.0 175.4 L14.0 167.3 L10.0 159.3 L14.0 151.2 L10.0 143.1 L14.0 135.0 L10.0 127.0 L14.0 118.9 L10.0 110.8 L14.0 102.8 L10.0 94.7 L14.0 86.6 L10.0 78.6 L14.0 70.5 L10.0 62.4 L14.0 54.3 L10.0 46.3 L14.0 38.2 L10.0 30.1 L14.0 22.1 Z" fill="url(#volumen)" opacity=".5"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.45"/></svg></span>
  <span class="unter"><span class="zeile"><span>Stoff 02</span><span class="ziffern">Seide 100 %</span></span><span class="titel">Jacquard mit Blüten, Como</span></span></button>
</li>
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 400"><svg viewBox="0 0 300 400" width="300" height="400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Strickpullover in Rippe, technische Zeichnung"><rect width="300" height="400" fill="#3f4a3a"/><ellipse cx="150.0" cy="378" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M112 62 Q150 82 188 62 L232 80 Q246 86 248 104 L264 292 L232 298 L222 150 L224 332 L76 332 L78 150 L68 298 L36 292 L52 104 Q54 86 68 80 Z" fill="url(#rippe)"/></g><path d="M112 62 Q150 82 188 62 L232 80 Q246 86 248 104 L264 292 L232 298 L222 150 L224 332 L76 332 L78 150 L68 298 L36 292 L52 104 Q54 86 68 80 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(60,46,30,.5)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M112 62 Q150 98 188 62"/><path d="M118 66 Q150 92 182 66"/><path d="M234 282 L264 278"/><path d="M66 282 L36 278"/><path d="M76 314 H224"/><path d="M222 150 L232 80"/><path d="M78 150 L68 80"/></g><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 04</span><span class="ziffern">310 €</span></span><span class="titel">Pullover in 2×2-Rippe, Merino</span></span></button>
</li>
<li class="stein notiz masse" data-kat="notizen">
  <p class="zeile"><span>Atelier-Notiz</span><span class="ziffern">14.09.</span></p>
  <p class="masse-titel">Mantel M01, Größe 38</p>
  <dl class="ziffern"><div><dt>Länge</dt><dd>118 cm</dd></div><div><dt>Schulter</dt><dd>46 cm</dd></div><div><dt>Ärmel</dt><dd>64 cm</dd></div><div><dt>Stoff</dt><dd>3,2 m</dd></div><div><dt>Futter</dt><dd>Cupro, Roest</dd></div></dl>
  <p class="hand">Revers 2 mm schmaler. Knöpfe mit Faden in Roest annähen.</p>
</li>
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 450"><svg viewBox="0 0 300 450" width="300" height="450" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Trenchcoat mit Gürtel, technische Zeichnung"><rect width="300" height="450" fill="#8d9aa3"/><ellipse cx="150.0" cy="428" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M116 54 Q150 66 184 54 L226 70 Q240 76 242 94 L262 272 L240 278 L228 150 L248 422 L52 422 L72 150 L60 278 L38 272 L58 94 Q60 76 74 70 Z" fill="#b49a6c"/></g><path d="M116 54 Q150 66 184 54 L226 70 Q240 76 242 94 L262 272 L240 278 L228 150 L248 422 L52 422 L72 150 L60 278 L38 272 L58 94 Q60 76 74 70 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(18,16,16,.5)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M116 54 L130 96 L150 74 L170 96 L184 54"/><path d="M130 96 L160 160"/><path d="M150 74 L190 64 L198 124 L156 132"/><path d="M160 160 L164 422"/><path d="M228 150 L226 72"/><path d="M72 150 L74 72"/><path d="M236 240 L258 236"/><path d="M64 240 L42 236"/></g><rect x="68" y="204" width="166" height="14" fill="#9b8259"/><rect x="146" y="201" width="20" height="20" fill="none" stroke="#3b2f22" stroke-width="2"/><circle cx="140" cy="176" r="4.5" fill="#3b2f22"/><circle cx="138.8" cy="174.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="180" cy="176" r="4.5" fill="#3b2f22"/><circle cx="178.8" cy="174.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="140" cy="258" r="4.5" fill="#3b2f22"/><circle cx="138.8" cy="256.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="180" cy="258" r="4.5" fill="#3b2f22"/><circle cx="178.8" cy="256.8" r="1.6" fill="rgba(255,255,255,.25)"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 05</span><span class="ziffern">760 €</span></span><span class="titel">Trenchcoat mit Gürtel, Baumwollgabardine</span></span></button>
</li>
<li class="stein" data-kat="details">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 200"><svg viewBox="0 0 300 200" width="300" height="200" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Eingewebtes Etikett RUIEN auf plissiertem Wollkrepp"><rect width="300" height="200" fill="url(#plissee)"/><rect width="300" height="200" fill="rgba(18,16,16,.12)"/><g filter="url(#schatten)"><rect x="62" y="58" width="176" height="84" fill="url(#webung)"/></g><rect x="68" y="64" width="164" height="72" fill="none" stroke="rgba(233,228,218,.35)" stroke-dasharray="2 3"/><text x="150" y="104" text-anchor="middle" fill="#e9e4da" style="font: 500 26px 'Zalando Sans', sans-serif; font-stretch: 125%; letter-spacing: .18em">RUIEN</text><text x="150" y="124" text-anchor="middle" fill="#a69d90" style="font: 8.5px 'Fragment Mono', monospace; letter-spacing: .3em">ANTWERPEN</text><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Detail</span><span class="ziffern">Etikett</span></span><span class="titel">Eingewebt, schwarz auf schwarz</span></span></button>
</li>
<li class="stein" data-kat="stoffe">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 300"><svg viewBox="0 0 300 300" width="300" height="300" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Stoffmuster Merino-Rippe"><rect width="300" height="300" fill="#3f4a3a"/><g filter="url(#schatten)"><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.0 L286.0 30.0 L290.0 38.0 L286.0 46.0 L290.0 54.0 L286.0 62.0 L290.0 70.0 L286.0 78.0 L290.0 86.0 L286.0 94.0 L290.0 102.0 L286.0 110.0 L290.0 118.0 L286.0 126.0 L290.0 134.0 L286.0 142.0 L290.0 150.0 L286.0 158.0 L290.0 166.0 L286.0 174.0 L290.0 182.0 L286.0 190.0 L290.0 198.0 L286.0 206.0 L290.0 214.0 L286.0 222.0 L290.0 230.0 L286.0 238.0 L290.0 246.0 L286.0 254.0 L290.0 262.0 L286.0 270.0 L290.0 278.0 L286.0 286.0 L278.0 290.0 L270.0 286.0 L262.0 290.0 L254.0 286.0 L246.0 290.0 L238.0 286.0 L230.0 290.0 L222.0 286.0 L214.0 290.0 L206.0 286.0 L198.0 290.0 L190.0 286.0 L182.0 290.0 L174.0 286.0 L166.0 290.0 L158.0 286.0 L150.0 290.0 L142.0 286.0 L134.0 290.0 L126.0 286.0 L118.0 290.0 L110.0 286.0 L102.0 290.0 L94.0 286.0 L86.0 290.0 L78.0 286.0 L70.0 290.0 L62.0 286.0 L54.0 290.0 L46.0 286.0 L38.0 290.0 L30.0 286.0 L22.0 290.0 L14.0 286.0 L10.0 278.0 L14.0 270.0 L10.0 262.0 L14.0 254.0 L10.0 246.0 L14.0 238.0 L10.0 230.0 L14.0 222.0 L10.0 214.0 L14.0 206.0 L10.0 198.0 L14.0 190.0 L10.0 182.0 L14.0 174.0 L10.0 166.0 L14.0 158.0 L10.0 150.0 L14.0 142.0 L10.0 134.0 L14.0 126.0 L10.0 118.0 L14.0 110.0 L10.0 102.0 L14.0 94.0 L10.0 86.0 L14.0 78.0 L10.0 70.0 L14.0 62.0 L10.0 54.0 L14.0 46.0 L10.0 38.0 L14.0 30.0 L10.0 22.0 Z" fill="url(#rippe)"/></g><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.0 L286.0 30.0 L290.0 38.0 L286.0 46.0 L290.0 54.0 L286.0 62.0 L290.0 70.0 L286.0 78.0 L290.0 86.0 L286.0 94.0 L290.0 102.0 L286.0 110.0 L290.0 118.0 L286.0 126.0 L290.0 134.0 L286.0 142.0 L290.0 150.0 L286.0 158.0 L290.0 166.0 L286.0 174.0 L290.0 182.0 L286.0 190.0 L290.0 198.0 L286.0 206.0 L290.0 214.0 L286.0 222.0 L290.0 230.0 L286.0 238.0 L290.0 246.0 L286.0 254.0 L290.0 262.0 L286.0 270.0 L290.0 278.0 L286.0 286.0 L278.0 290.0 L270.0 286.0 L262.0 290.0 L254.0 286.0 L246.0 290.0 L238.0 286.0 L230.0 290.0 L222.0 286.0 L214.0 290.0 L206.0 286.0 L198.0 290.0 L190.0 286.0 L182.0 290.0 L174.0 286.0 L166.0 290.0 L158.0 286.0 L150.0 290.0 L142.0 286.0 L134.0 290.0 L126.0 286.0 L118.0 290.0 L110.0 286.0 L102.0 290.0 L94.0 286.0 L86.0 290.0 L78.0 286.0 L70.0 290.0 L62.0 286.0 L54.0 290.0 L46.0 286.0 L38.0 290.0 L30.0 286.0 L22.0 290.0 L14.0 286.0 L10.0 278.0 L14.0 270.0 L10.0 262.0 L14.0 254.0 L10.0 246.0 L14.0 238.0 L10.0 230.0 L14.0 222.0 L10.0 214.0 L14.0 206.0 L10.0 198.0 L14.0 190.0 L10.0 182.0 L14.0 174.0 L10.0 166.0 L14.0 158.0 L10.0 150.0 L14.0 142.0 L10.0 134.0 L14.0 126.0 L10.0 118.0 L14.0 110.0 L10.0 102.0 L14.0 94.0 L10.0 86.0 L14.0 78.0 L10.0 70.0 L14.0 62.0 L10.0 54.0 L14.0 46.0 L10.0 38.0 L14.0 30.0 L10.0 22.0 Z" fill="url(#volumen)" opacity=".5"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.45"/></svg></span>
  <span class="unter"><span class="zeile"><span>Stoff 03</span><span class="ziffern">Merino</span></span><span class="titel">Rippe, gestrickt in Porto</span></span></button>
</li>
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 500"><svg viewBox="0 0 300 500" width="300" height="500" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Ärmelloses Midikleid in Rost, technische Zeichnung"><rect width="300" height="500" fill="#e4dfd6"/><ellipse cx="150.0" cy="478" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M120 50 Q150 66 180 50 L196 58 L204 130 L196 190 Q250 400 262 470 Q150 486 38 470 Q50 400 104 190 L96 130 L104 58 Z" fill="#9a4b2f"/></g><path d="M120 50 Q150 66 180 50 L196 58 L204 130 L196 190 Q250 400 262 470 Q150 486 38 470 Q50 400 104 190 L96 130 L104 58 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(40,14,8,.45)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M104 190 Q150 198 196 190"/><path d="M132 200 L110 472"/><path d="M150 200 L150 480"/><path d="M168 200 L190 472"/><path d="M120 50 Q150 82 180 50"/></g><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 06</span><span class="ziffern">420 €</span></span><span class="titel">Ärmelloses Midikleid in Roest</span></span></button>
</li>
<li class="stein breit" data-kat="details">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 480 / 240"><svg viewBox="0 0 480 240" width="480" height="240" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Farbkarte der Saison: Schlick, Scheldegrün, Roest, Ocker, Kalk, Tinte"><rect width="480" height="240" fill="#ebe7e0"/><rect x="24" y="24" width="66" height="148" fill="#6b5a48"/><text x="24" y="192" fill="#121010" style="font: 10px 'Fragment Mono', monospace; letter-spacing: .06em">SCHLICK</text><text x="24" y="208" fill="#6a6359" style="font: 9px 'Fragment Mono', monospace; letter-spacing: .06em">#7A6853</text><rect x="98" y="24" width="66" height="148" fill="#3f4a3a"/><text x="98" y="192" fill="#121010" style="font: 10px 'Fragment Mono', monospace; letter-spacing: .06em">SCHELDEGRÜN</text><text x="98" y="208" fill="#6a6359" style="font: 9px 'Fragment Mono', monospace; letter-spacing: .06em">#3F4A3A</text><rect x="172" y="24" width="66" height="148" fill="#9a4b2f"/><text x="172" y="192" fill="#121010" style="font: 10px 'Fragment Mono', monospace; letter-spacing: .06em">ROEST</text><text x="172" y="208" fill="#6a6359" style="font: 9px 'Fragment Mono', monospace; letter-spacing: .06em">#9A4B2F</text><rect x="246" y="24" width="66" height="148" fill="#c08a3e"/><text x="246" y="192" fill="#121010" style="font: 10px 'Fragment Mono', monospace; letter-spacing: .06em">OCKER</text><text x="246" y="208" fill="#6a6359" style="font: 9px 'Fragment Mono', monospace; letter-spacing: .06em">#C08A3E</text><rect x="320" y="24" width="66" height="148" fill="#e9e4da"/><text x="320" y="192" fill="#121010" style="font: 10px 'Fragment Mono', monospace; letter-spacing: .06em">KALK</text><text x="320" y="208" fill="#6a6359" style="font: 9px 'Fragment Mono', monospace; letter-spacing: .06em">#E9E4DA</text><rect x="394" y="24" width="66" height="148" fill="#1d2230"/><text x="394" y="192" fill="#121010" style="font: 10px 'Fragment Mono', monospace; letter-spacing: .06em">TINTE</text><text x="394" y="208" fill="#6a6359" style="font: 9px 'Fragment Mono', monospace; letter-spacing: .06em">#1D2230</text><rect x="24" y="24" width="440" height="148" fill="none" stroke="rgba(18,16,16,.08)"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.3"/></svg></span>
  <span class="unter"><span class="zeile"><span>Farbkarte</span><span class="ziffern">6 Töne</span></span><span class="titel">Was die Schelde bei Niedrigwasser zeigt</span></span></button>
</li>
<li class="stein" data-kat="orte">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 375"><svg viewBox="0 0 300 375" width="300" height="375" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Schaufenster des Ladens in der Kloosterstraat 41 mit dem Mantel M01"><rect width="300" height="375" fill="url(#ziegel)"/><rect x="0" y="0" width="300" height="375" fill="rgba(18,16,16,.12)"/><rect x="26" y="34" width="248" height="34" fill="#1d2230"/><text x="150" y="57" text-anchor="middle" fill="#e9e4da" style="font: 500 15px 'Zalando Sans', sans-serif; font-stretch: 125%; letter-spacing: .3em">RUIEN</text><rect x="26" y="88" width="180" height="250" fill="#2b2622"/><rect x="32" y="94" width="168" height="238" fill="url(#scheibe)"/><g transform="translate(80 140) scale(.24)"><path d="M118 56 Q150 68 182 56 L224 72 Q238 78 240 96 L258 262 L238 268 L226 150 L230 362 L70 362 L74 150 L62 268 L42 262 L60 96 Q62 78 76 72 Z" fill="url(#fischgrat)"/><path d="M118 56 Q150 68 182 56 L224 72 Q238 78 240 96 L258 262 L238 268 L226 150 L230 362 L70 362 L74 150 L62 268 L42 262 L60 96 Q62 78 76 72 Z" fill="url(#volumen)"/></g><rect x="112" y="226" width="4" height="96" fill="#5b4a3c"/><rect x="96" y="320" width="36" height="4" fill="#5b4a3c"/><path d="M32 94 L120 94 L32 230 Z" fill="rgba(233,228,218,.07)"/><path d="M150 94 L200 94 L200 150 L110 332 L70 332 Z" fill="rgba(233,228,218,.05)"/><rect x="216" y="160" width="58" height="178" fill="#2b2622"/><rect x="221" y="165" width="48" height="173" fill="#3f4a3a"/><circle cx="260" cy="256" r="2.5" fill="#c08a3e"/><text x="245" y="152" text-anchor="middle" fill="#e9e4da" style="font: 11px 'Fragment Mono', monospace">41</text><rect x="0" y="338" width="300" height="37" fill="#5a5653"/><path d="M0 338 H300" stroke="#3a3735" stroke-width="2"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.55"/></svg></span>
  <span class="unter"><span class="zeile"><span>Ort</span><span class="ziffern">Kloosterstraat 41</span></span><span class="titel">Schaufenster, Woche 44</span></span></button>
</li>
<li class="stein" data-kat="stoffe">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 400"><svg viewBox="0 0 300 400" width="300" height="400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Stoffmuster Wollkrepp, plissiert"><rect width="300" height="400" fill="#ebe7e0"/><g filter="url(#schatten)"><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.1 L286.0 30.2 L290.0 38.3 L286.0 46.3 L290.0 54.4 L286.0 62.5 L290.0 70.6 L286.0 78.7 L290.0 86.8 L286.0 94.9 L290.0 103.0 L286.0 111.0 L290.0 119.1 L286.0 127.2 L290.0 135.3 L286.0 143.4 L290.0 151.5 L286.0 159.6 L290.0 167.7 L286.0 175.7 L290.0 183.8 L286.0 191.9 L290.0 200.0 L286.0 208.1 L290.0 216.2 L286.0 224.3 L290.0 232.3 L286.0 240.4 L290.0 248.5 L286.0 256.6 L290.0 264.7 L286.0 272.8 L290.0 280.9 L286.0 289.0 L290.0 297.0 L286.0 305.1 L290.0 313.2 L286.0 321.3 L290.0 329.4 L286.0 337.5 L290.0 345.6 L286.0 353.7 L290.0 361.7 L286.0 369.8 L290.0 377.9 L286.0 386.0 L278.0 390.0 L270.0 386.0 L262.0 390.0 L254.0 386.0 L246.0 390.0 L238.0 386.0 L230.0 390.0 L222.0 386.0 L214.0 390.0 L206.0 386.0 L198.0 390.0 L190.0 386.0 L182.0 390.0 L174.0 386.0 L166.0 390.0 L158.0 386.0 L150.0 390.0 L142.0 386.0 L134.0 390.0 L126.0 386.0 L118.0 390.0 L110.0 386.0 L102.0 390.0 L94.0 386.0 L86.0 390.0 L78.0 386.0 L70.0 390.0 L62.0 386.0 L54.0 390.0 L46.0 386.0 L38.0 390.0 L30.0 386.0 L22.0 390.0 L14.0 386.0 L10.0 377.9 L14.0 369.8 L10.0 361.7 L14.0 353.7 L10.0 345.6 L14.0 337.5 L10.0 329.4 L14.0 321.3 L10.0 313.2 L14.0 305.1 L10.0 297.0 L14.0 289.0 L10.0 280.9 L14.0 272.8 L10.0 264.7 L14.0 256.6 L10.0 248.5 L14.0 240.4 L10.0 232.3 L14.0 224.3 L10.0 216.2 L14.0 208.1 L10.0 200.0 L14.0 191.9 L10.0 183.8 L14.0 175.7 L10.0 167.7 L14.0 159.6 L10.0 151.5 L14.0 143.4 L10.0 135.3 L14.0 127.2 L10.0 119.1 L14.0 111.0 L10.0 103.0 L14.0 94.9 L10.0 86.8 L14.0 78.7 L10.0 70.6 L14.0 62.5 L10.0 54.4 L14.0 46.3 L10.0 38.3 L14.0 30.2 L10.0 22.1 Z" fill="url(#plissee)"/></g><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.1 L286.0 30.2 L290.0 38.3 L286.0 46.3 L290.0 54.4 L286.0 62.5 L290.0 70.6 L286.0 78.7 L290.0 86.8 L286.0 94.9 L290.0 103.0 L286.0 111.0 L290.0 119.1 L286.0 127.2 L290.0 135.3 L286.0 143.4 L290.0 151.5 L286.0 159.6 L290.0 167.7 L286.0 175.7 L290.0 183.8 L286.0 191.9 L290.0 200.0 L286.0 208.1 L290.0 216.2 L286.0 224.3 L290.0 232.3 L286.0 240.4 L290.0 248.5 L286.0 256.6 L290.0 264.7 L286.0 272.8 L290.0 280.9 L286.0 289.0 L290.0 297.0 L286.0 305.1 L290.0 313.2 L286.0 321.3 L290.0 329.4 L286.0 337.5 L290.0 345.6 L286.0 353.7 L290.0 361.7 L286.0 369.8 L290.0 377.9 L286.0 386.0 L278.0 390.0 L270.0 386.0 L262.0 390.0 L254.0 386.0 L246.0 390.0 L238.0 386.0 L230.0 390.0 L222.0 386.0 L214.0 390.0 L206.0 386.0 L198.0 390.0 L190.0 386.0 L182.0 390.0 L174.0 386.0 L166.0 390.0 L158.0 386.0 L150.0 390.0 L142.0 386.0 L134.0 390.0 L126.0 386.0 L118.0 390.0 L110.0 386.0 L102.0 390.0 L94.0 386.0 L86.0 390.0 L78.0 386.0 L70.0 390.0 L62.0 386.0 L54.0 390.0 L46.0 386.0 L38.0 390.0 L30.0 386.0 L22.0 390.0 L14.0 386.0 L10.0 377.9 L14.0 369.8 L10.0 361.7 L14.0 353.7 L10.0 345.6 L14.0 337.5 L10.0 329.4 L14.0 321.3 L10.0 313.2 L14.0 305.1 L10.0 297.0 L14.0 289.0 L10.0 280.9 L14.0 272.8 L10.0 264.7 L14.0 256.6 L10.0 248.5 L14.0 240.4 L10.0 232.3 L14.0 224.3 L10.0 216.2 L14.0 208.1 L10.0 200.0 L14.0 191.9 L10.0 183.8 L14.0 175.7 L10.0 167.7 L14.0 159.6 L10.0 151.5 L14.0 143.4 L10.0 135.3 L14.0 127.2 L10.0 119.1 L14.0 111.0 L10.0 103.0 L14.0 94.9 L10.0 86.8 L14.0 78.7 L10.0 70.6 L14.0 62.5 L10.0 54.4 L14.0 46.3 L10.0 38.3 L14.0 30.2 L10.0 22.1 Z" fill="url(#volumen)" opacity=".5"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.45"/></svg></span>
  <span class="unter"><span class="zeile"><span>Stoff 04</span><span class="ziffern">Schurwolle</span></span><span class="titel">Wollkrepp, plissiert, Biella</span></span></button>
</li>
<li class="stein" data-kat="looks">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 400"><svg viewBox="0 0 300 400" width="300" height="400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Einreihiger Blazer im Fenstercheck, technische Zeichnung"><rect width="300" height="400" fill="#d9cbb4"/><ellipse cx="150.0" cy="378" rx="90" ry="7" fill="rgba(18,16,16,.12)" filter="url(#weich)"/><g filter="url(#schatten)"><path d="M118 58 Q150 70 182 58 L224 74 Q238 80 240 98 L256 262 L236 268 L226 152 L228 302 L72 302 L74 152 L64 268 L44 262 L60 98 Q62 80 76 74 Z" fill="url(#fenstercheck)"/></g><path d="M118 58 Q150 70 182 58 L224 74 Q238 80 240 98 L256 262 L236 268 L226 152 L228 302 L72 302 L74 152 L64 268 L44 262 L60 98 Q62 80 76 74 Z" fill="url(#volumen)"/><g fill="none" stroke="rgba(18,16,16,.5)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M118 58 L134 100 L150 80 L166 100 L182 58"/><path d="M134 100 L150 188 L166 100"/><path d="M150 188 L150 302"/><path d="M90 236 L124 232"/><path d="M176 232 L210 236"/><path d="M178 128 L204 126"/><path d="M226 152 L224 78"/><path d="M74 152 L76 78"/></g><circle cx="156" cy="212" r="4.5" fill="#2a221c"/><circle cx="154.8" cy="210.8" r="1.6" fill="rgba(255,255,255,.25)"/><circle cx="156" cy="252" r="4.5" fill="#2a221c"/><circle cx="154.8" cy="250.8" r="1.6" fill="rgba(255,255,255,.25)"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.35"/></svg></span>
  <span class="unter"><span class="zeile"><span>Look 07</span><span class="ziffern">540 €</span></span><span class="titel">Einreihiger Blazer, Fenstercheck</span></span></button>
</li>
<li class="stein" data-kat="stoffe">
  <button type="button" class="kachel" aria-haspopup="dialog"><span class="bild" style="aspect-ratio: 300 / 300"><svg viewBox="0 0 300 300" width="300" height="300" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Stoffmuster Fenstercheck"><rect width="300" height="300" fill="#d9cbb4"/><g filter="url(#schatten)"><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.0 L286.0 30.0 L290.0 38.0 L286.0 46.0 L290.0 54.0 L286.0 62.0 L290.0 70.0 L286.0 78.0 L290.0 86.0 L286.0 94.0 L290.0 102.0 L286.0 110.0 L290.0 118.0 L286.0 126.0 L290.0 134.0 L286.0 142.0 L290.0 150.0 L286.0 158.0 L290.0 166.0 L286.0 174.0 L290.0 182.0 L286.0 190.0 L290.0 198.0 L286.0 206.0 L290.0 214.0 L286.0 222.0 L290.0 230.0 L286.0 238.0 L290.0 246.0 L286.0 254.0 L290.0 262.0 L286.0 270.0 L290.0 278.0 L286.0 286.0 L278.0 290.0 L270.0 286.0 L262.0 290.0 L254.0 286.0 L246.0 290.0 L238.0 286.0 L230.0 290.0 L222.0 286.0 L214.0 290.0 L206.0 286.0 L198.0 290.0 L190.0 286.0 L182.0 290.0 L174.0 286.0 L166.0 290.0 L158.0 286.0 L150.0 290.0 L142.0 286.0 L134.0 290.0 L126.0 286.0 L118.0 290.0 L110.0 286.0 L102.0 290.0 L94.0 286.0 L86.0 290.0 L78.0 286.0 L70.0 290.0 L62.0 286.0 L54.0 290.0 L46.0 286.0 L38.0 290.0 L30.0 286.0 L22.0 290.0 L14.0 286.0 L10.0 278.0 L14.0 270.0 L10.0 262.0 L14.0 254.0 L10.0 246.0 L14.0 238.0 L10.0 230.0 L14.0 222.0 L10.0 214.0 L14.0 206.0 L10.0 198.0 L14.0 190.0 L10.0 182.0 L14.0 174.0 L10.0 166.0 L14.0 158.0 L10.0 150.0 L14.0 142.0 L10.0 134.0 L14.0 126.0 L10.0 118.0 L14.0 110.0 L10.0 102.0 L14.0 94.0 L10.0 86.0 L14.0 78.0 L10.0 70.0 L14.0 62.0 L10.0 54.0 L14.0 46.0 L10.0 38.0 L14.0 30.0 L10.0 22.0 Z" fill="url(#fenstercheck)"/></g><path d="M14.0 14.0 L22.0 10.0 L30.0 14.0 L38.0 10.0 L46.0 14.0 L54.0 10.0 L62.0 14.0 L70.0 10.0 L78.0 14.0 L86.0 10.0 L94.0 14.0 L102.0 10.0 L110.0 14.0 L118.0 10.0 L126.0 14.0 L134.0 10.0 L142.0 14.0 L150.0 10.0 L158.0 14.0 L166.0 10.0 L174.0 14.0 L182.0 10.0 L190.0 14.0 L198.0 10.0 L206.0 14.0 L214.0 10.0 L222.0 14.0 L230.0 10.0 L238.0 14.0 L246.0 10.0 L254.0 14.0 L262.0 10.0 L270.0 14.0 L278.0 10.0 L286.0 14.0 L290.0 22.0 L286.0 30.0 L290.0 38.0 L286.0 46.0 L290.0 54.0 L286.0 62.0 L290.0 70.0 L286.0 78.0 L290.0 86.0 L286.0 94.0 L290.0 102.0 L286.0 110.0 L290.0 118.0 L286.0 126.0 L290.0 134.0 L286.0 142.0 L290.0 150.0 L286.0 158.0 L290.0 166.0 L286.0 174.0 L290.0 182.0 L286.0 190.0 L290.0 198.0 L286.0 206.0 L290.0 214.0 L286.0 222.0 L290.0 230.0 L286.0 238.0 L290.0 246.0 L286.0 254.0 L290.0 262.0 L286.0 270.0 L290.0 278.0 L286.0 286.0 L278.0 290.0 L270.0 286.0 L262.0 290.0 L254.0 286.0 L246.0 290.0 L238.0 286.0 L230.0 290.0 L222.0 286.0 L214.0 290.0 L206.0 286.0 L198.0 290.0 L190.0 286.0 L182.0 290.0 L174.0 286.0 L166.0 290.0 L158.0 286.0 L150.0 290.0 L142.0 286.0 L134.0 290.0 L126.0 286.0 L118.0 290.0 L110.0 286.0 L102.0 290.0 L94.0 286.0 L86.0 290.0 L78.0 286.0 L70.0 290.0 L62.0 286.0 L54.0 290.0 L46.0 286.0 L38.0 290.0 L30.0 286.0 L22.0 290.0 L14.0 286.0 L10.0 278.0 L14.0 270.0 L10.0 262.0 L14.0 254.0 L10.0 246.0 L14.0 238.0 L10.0 230.0 L14.0 222.0 L10.0 214.0 L14.0 206.0 L10.0 198.0 L14.0 190.0 L10.0 182.0 L14.0 174.0 L10.0 166.0 L14.0 158.0 L10.0 150.0 L14.0 142.0 L10.0 134.0 L14.0 126.0 L10.0 118.0 L14.0 110.0 L10.0 102.0 L14.0 94.0 L10.0 86.0 L14.0 78.0 L10.0 70.0 L14.0 62.0 L10.0 54.0 L14.0 46.0 L10.0 38.0 L14.0 30.0 L10.0 22.0 Z" fill="url(#volumen)" opacity=".5"/><rect width="100%" height="100%" filter="url(#korn)" opacity="0.45"/></svg></span>
  <span class="unter"><span class="zeile"><span>Stoff 05</span><span class="ziffern">Wolle, Kaschmir</span></span><span class="titel">Fenstercheck, Biella</span></span></button>
</li>
<li class="stein notiz termin" data-kat="notizen">
  <p class="zeile"><span>Anprobe im Atelier</span><span>Do–Sa</span></p>
  <p class="termin-titel">Alle sieben Looks hängen bis Ende November in der Kloosterstraat.</p>
  <a href="#" class="termin-link">Termin wählen</a>
</li>
  </ul>
</div>

<footer class="fuss zeile"><span>RUIEN · Kloosterstraat 41 · 2000 Antwerpen</span><span>Atelier Do–Sa 11–18 Uhr</span></footer>

<dialog class="leuchtkasten" data-lk aria-label="Bildansicht">
  <div class="lk-buehne" data-lk-buehne></div>
  <div class="lk-fuss">
    <div class="unter"><span class="zeile" data-lk-zeile></span><span class="titel" data-lk-titel></span></div>
    <div class="lk-knoepfe"><button type="button" data-lk-zurueck aria-label="Vorheriges Bild">← Zurück</button><span class="ziffern" data-lk-zahl></span><button type="button" data-lk-vor aria-label="Nächstes Bild">Weiter →</button><button type="button" data-lk-zu>Schließen</button></div>
  </div>
</dialog>

<aside class="pult" aria-label="Varianten und Werte">
  <p class="kopfzeile"><span>Layout</span><b data-pult-name>–</b></p>
  <div class="segment" role="group" aria-label="Layout wählen">
    <button type="button" data-layout-wahl="lanes" aria-pressed="false">grid-lanes</button>
    <button type="button" data-layout-wahl="spalten" aria-pressed="false">Spalten</button>
    <button type="button" data-layout-wahl="js" aria-pressed="false">JS</button>
    <button type="button" data-layout-wahl="raster" aria-pressed="false">Raster</button>
  </div>
  <button type="button" class="schalter" data-spuren-wahl aria-pressed="false"><span>Spuren zeigen</span><span aria-hidden="true"></span></button>
  <p class="werte" data-werte></p>
</aside>

<script>
(() => {
  const html = document.documentElement;
  const reduziert = () => html.classList.contains('reduziert');
  const $ = s => document.querySelector(s), $$ = s => [...document.querySelectorAll(s)];
  const wand = $('[data-wand]'), rahmen = $('[data-rahmen]');
  const steine = $$('.stein');
  const W = { kurve: 'cubic-bezier(0.25, 1, 0.5, 1)', flipMs: 250, bildMs: 1000 };
  const NATIV = !!(window.CSS && CSS.supports('display', 'grid-lanes'));
  const TOLERANZ = !window.CSS ? '' : CSS.supports('fit-tolerance', '2rem') ? 'fit-tolerance' : CSS.supports('flow-tolerance', '2rem') ? 'flow-tolerance' : '';
  const STANDARD = NATIV ? 'lanes' : 'js';
  const NAMEN = { lanes: 'display: grid-lanes', spalten: 'CSS-Spalten', js: 'JS-Masonry', raster: 'Grid mit Zuschnitt' };
  let layout = STANDARD, filter = 'alle';

  /* ---------- Maße ---------- */
  const px = v => { const t = document.createElement('div'); t.style.width = v; wand.appendChild(t); const w = t.getBoundingClientRect().width; t.remove(); return w; };
  function masse() {
    const cs = getComputedStyle(wand);
    const gap = parseFloat(cs.columnGap) || 16;
    const spur = px('var(--spur)'), b = wand.clientWidth;
    return { gap, spur, b, n: Math.max(1, Math.floor((b + gap) / (spur + gap))) };
  }
  const sichtbar = () => steine.filter(s => !s.hidden);

  /* ---------- JS-Masonry: jedes Element in die kürzeste Spur ---------- */
  function jsLayout() {
    if (layout !== 'js') { wand.style.height = ''; steine.forEach(s => { s.style.width = s.style.translate = ''; }); return; }
    const { gap, b, n } = masse();
    const sb = (b - gap * (n - 1)) / n, hoehe = new Array(n).fill(0);
    sichtbar().forEach(s => {
      const span = s.classList.contains('breit') ? Math.min(2, n) : 1;
      s.style.width = (sb * span + gap * (span - 1)) + 'px';
      let best = 0, bestH = Infinity;
      for (let i = 0; i <= n - span; i++) { const h = Math.max(...hoehe.slice(i, i + span)); if (h < bestH - 0.5) { bestH = h; best = i; } }
      s.style.translate = (best * (sb + gap)) + 'px ' + bestH + 'px';
      const h = bestH + s.offsetHeight + gap;
      for (let i = best; i < best + span; i++) hoehe[i] = h;
    });
    wand.style.height = Math.max(0, Math.max(...hoehe) - gap) + 'px';
  }

  /* ---------- Spuren sichtbar machen: Bänder und Füllhöhe je Spur ---------- */
  function spuren() {
    const m = masse();
    let n = m.n;
    if (layout === 'lanes' || layout === 'raster') n = getComputedStyle(wand).gridTemplateColumns.split(' ').filter(Boolean).length || n;
    const sb = (m.b - m.gap * (n - 1)) / n, w = wand.getBoundingClientRect(), hoehe = new Array(n).fill(0);
    sichtbar().forEach(s => {
      const r = s.getBoundingClientRect();
      const i = Math.round((r.left - w.left) / (sb + m.gap)), span = Math.max(1, Math.round((r.width + m.gap) / (sb + m.gap)));
      for (let k = i; k < Math.min(n, i + span); k++) hoehe[k] = Math.max(hoehe[k], r.bottom - w.top);
    });
    const min = Math.min(...hoehe);
    $('[data-baender]').innerHTML = hoehe.map((_, i) => `<i style="left:${i * (sb + m.gap)}px;width:${sb}px"></i>`).join('');
    $('[data-spurkopf]').innerHTML = hoehe.map((h, i) => `<span class="${n > 1 && h === min ? 'kurz' : ''}" style="left:${i * (sb + m.gap)}px;width:${sb}px">${n > 1 && h === min ? '▾ Kürzeste' : 'Spur ' + (i + 1)} · ${Math.round(h).toLocaleString('de-DE')} px</span>`).join('');
    return { n, gap: m.gap };
  }

  /* ---------- FLIP: nur Position, 250 ms, keine Einblendung ---------- */
  function flip(aenderung) {
    const vorher = new Map();
    if (!reduziert()) sichtbar().forEach(s => vorher.set(s, s.getBoundingClientRect()));
    steine.forEach(s => s.getAnimations().forEach(a => a.cancel()));
    aenderung();
    jsLayout();
    zeige();   // misst die Endlage, solange noch keine Animation läuft
    if (!reduziert()) sichtbar().forEach(s => {
      const a = vorher.get(s); if (!a) return;
      const b = s.getBoundingClientRect(), dx = a.left - b.left, dy = a.top - b.top;
      if (Math.abs(dx) + Math.abs(dy) < 1) return;
      s.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], { duration: W.flipMs, easing: W.kurve });
    });
  }

  /* ---------- Anzeige: Status, Pult, Werte ---------- */
  function zeige() {
    const { n, gap } = spuren();
    const st = $('[data-status]'), rf = !NATIV && (layout === 'js' || layout === 'lanes');
    st.classList.toggle('rueckfall', rf);
    $('[data-status-text]').innerHTML = NATIV
      ? `<b>${NAMEN[layout]}</b> · <span style="white-space:nowrap">${n} Spuren</span>`
      : layout === 'lanes' ? `<b>grid-lanes fehlt</b> · Browser fällt auf display: grid zurück, mit Lücken`
      : layout === 'js' ? `<b>JS-Masonry</b> · Fallback, grid-lanes fehlt · <span style="white-space:nowrap">${n} Spuren</span>`
      : `<b>${NAMEN[layout]}</b> · <span style="white-space:nowrap">${n} Spuren</span>`;
    $('[data-pult-name]').textContent = NATIV || layout !== 'lanes' ? NAMEN[layout] : 'nicht unterstützt';
    $$('[data-layout-wahl]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.layoutWahl === layout)));
    const spalte = layout === 'spalten' ? 'columns: var(--spur)' : layout === 'js' ? `${n} Spuren, translate`
      : layout === 'lanes' ? `repeat(auto-fill, minmax(var(--spur), 1fr))<br><span style="white-space:nowrap">fit-tolerance <b>2rem</b></span> · <span style="white-space:nowrap">Rückfall flow-tolerance</span>${TOLERANZ ? ` · hier: <b>${TOLERANZ}</b>` : ''}`
      : 'repeat(auto-fill, minmax(var(--spur), 1fr))';
    $('[data-werte]').innerHTML = `--spur <b>${getComputedStyle(wand).getPropertyValue('--spur').trim()}</b> · gap <b>${gap} px</b><br>${spalte}<br>FLIP <b>${W.flipMs} ms</b> · ${W.kurve}<br>grid-lanes hier: <b>${NATIV ? 'ja' : 'nein'}</b>`;
  }

  function setzeLayout(l) { if (l === layout) return; flip(() => { layout = l; wand.dataset.layout = l; }); }
  function setzeFilter(f) {
    filter = f;
    $$('[data-filter]').forEach(c => c.setAttribute('aria-pressed', String(c.dataset.filter === f)));
    flip(() => steine.forEach(s => { s.hidden = f !== 'alle' && s.dataset.kat !== f; }));
  }
  function setzeSpuren(an) { rahmen.classList.toggle('mit-spuren', an); $('[data-spuren-wahl]').setAttribute('aria-pressed', String(an)); }

  $$('[data-filter]').forEach(c => c.addEventListener('click', () => { stoppe(); setzeFilter(c.dataset.filter); }));
  $$('[data-layout-wahl]').forEach(b => b.addEventListener('click', () => { stoppe(); setzeLayout(b.dataset.layoutWahl); }));
  $('[data-spuren-wahl]').addEventListener('click', e => setzeSpuren(e.currentTarget.getAttribute('aria-pressed') !== 'true'));
  if (!NATIV) $('[data-layout-wahl="lanes"]').title = 'display: grid-lanes wird hier nicht unterstützt: zeigt den Grid-Rückfall';

  // Nur auf Breitenänderung reagieren (die Höhe ändert sich bei jedem Filtern selbst)
  let rz = 0, breite = 0;
  new ResizeObserver(([e]) => {
    const b = Math.round(e.contentRect.width); if (b === breite) return; breite = b;
    cancelAnimationFrame(rz); rz = requestAnimationFrame(() => { jsLayout(); zeige(); });
  }).observe(rahmen);
  document.fonts && document.fonts.ready.then(() => { jsLayout(); zeige(); });

  /* ---------- Leuchtkasten mit Pfeiltasten, Bilder überblenden 1 s ---------- */
  const lk = $('[data-lk]'), buehne = $('[data-lk-buehne]');
  let lkIndex = 0;
  const bilder = () => sichtbar().filter(s => s.querySelector('.kachel'));
  function lkZeige(i, sanft) {
    const liste = bilder(); if (!liste.length) return;
    lkIndex = (i + liste.length) % liste.length;
    const s = liste[lkIndex], svg = s.querySelector('svg').cloneNode(true), vb = svg.viewBox.baseVal;
    const neu = document.createElement('span'); neu.style.setProperty('--ar', vb.width + ' / ' + vb.height);
    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); neu.appendChild(svg);
    const alt = [...buehne.children];
    buehne.appendChild(neu);
    if (sanft && !reduziert()) neu.animate([{ opacity: 0 }, { opacity: 1 }], { duration: W.bildMs, easing: W.kurve }).finished.then(() => alt.forEach(a => a.remove()));
    else alt.forEach(a => a.remove());
    $('[data-lk-zeile]').innerHTML = s.querySelector('.zeile').innerHTML;
    $('[data-lk-titel]').textContent = s.querySelector('.titel').textContent;
    $('[data-lk-zahl]').textContent = String(lkIndex + 1).padStart(2, '0') + ' / ' + String(liste.length).padStart(2, '0');
  }
  steine.forEach(s => { const k = s.querySelector('.kachel'); if (k) k.addEventListener('click', () => { stoppe(); lkZeige(bilder().indexOf(s), false); lk.showModal(); }); });
  $('[data-lk-vor]').addEventListener('click', () => lkZeige(lkIndex + 1, true));
  $('[data-lk-zurueck]').addEventListener('click', () => lkZeige(lkIndex - 1, true));
  $('[data-lk-zu]').addEventListener('click', () => lk.close());
  lk.addEventListener('keydown', e => { if (e.key === 'ArrowRight') { e.preventDefault(); lkZeige(lkIndex + 1, true); } if (e.key === 'ArrowLeft') { e.preventDefault(); lkZeige(lkIndex - 1, true); } });
  lk.addEventListener('click', e => { if (e.target === lk || e.target === buehne) lk.close(); });
  lk.addEventListener('close', () => { const s = bilder()[lkIndex]; s && s.querySelector('.kachel').focus({ preventScroll: true }); });

  /* ---------- Vorführung: filtern und Layout wechseln, Spuren sichtbar ---------- */
  let uhr = null, schritt = 0;
  const ABLAUF = [() => setzeLayout('spalten'), () => setzeLayout('raster'), () => setzeLayout(STANDARD), () => setzeFilter('looks'), () => setzeFilter('alle')];
  function stoppe() { if (!html.classList.contains('vorfuehrung')) return; clearInterval(uhr); uhr = null; html.classList.remove('vorfuehrung'); }
  function vorfuehren() {
    clearInterval(uhr); html.classList.add('vorfuehrung'); setzeSpuren(true);
    schritt = 0;
    uhr = setInterval(() => { ABLAUF[schritt % ABLAUF.length](); schritt++; }, 2200);
  }
  function pause() { clearInterval(uhr); uhr = null; }
  function weiter() { if (html.classList.contains('vorfuehrung') && !uhr) uhr = setInterval(() => { ABLAUF[schritt % ABLAUF.length](); schritt++; }, 2200); }
  function neustart() { stoppe(); if (lk.open) lk.close(); setzeFilter('alle'); setzeLayout(STANDARD); }

  wand.dataset.layout = layout;
  jsLayout(); zeige();

})();
</script>
</body>
</html>