Trennlinien im Raster (Gap Decorations)
Haarlinien in Raster, Liste und umbrechender Leiste kommen aus row-rule und column-rule, mit Ersatz per Pseudo-Elementen, der gleich aussieht.
Linien zwischen Rasterzellen, Listenzeilen und umbrechenden Flex-Elementen kommen direkt aus dem Layout: column-rule und row-rule zeichnen in die Lücke (gap), nicht an die Elemente. Die Linien passen sich an, wenn Spalten umbrechen oder Elemente ausgeblendet werden: keine doppelten Ränder, kein Strich am Zeilenende. rule-break legt fest, ob Linien an Kreuzungen durchlaufen oder abbrechen, rule-inset kürzt sie an Enden und Kreuzungen. Breite, Stil und Farbe nehmen Listen und repeat() an, etwa eine kräftigere Linie nach jeder fünften Zeile. Breite, Farbe und Inset lassen sich animieren.
Haarlinien geben einem ruhigen Raster Halt, ohne Flächen oder Kästen. Weil die Linien in der Lücke liegen, bleiben sie bei jedem Umbruch und jedem Filter richtig. Das wirkt präzise wie ein gedruckter Plan oder eine Tabelle im Jahresbericht. Der Code wird kürzer: keine Ränder an Kindern, keine :last-child-Ausnahmen, keine Rechnerei pro Spaltenzahl.
Wann einsetzen
Kenndaten einer Projektseite, Werkverzeichnisse und Programmlisten, Speise- und Preiskarten, Visitenkarten im Footer, Kennzahlen-Raster. Überall, wo Linien heute per border oder Pseudo-Element an Kinder gehängt werden und beim Umbrechen Ärger machen.
Wann nicht
Wenn die Linie zum Inhalt gehört und Bedeutung trägt, die ohne sie verloren geht (dann echte Tabelle mit Rahmen). Bei Layouts ohne gap. Wenn sehr alte Browser dieselbe Optik brauchen und kein Fallback gepflegt werden soll. Als reine Deko auf einer Seite, die sonst mit Weißraum gliedert.
Varianten
- Kenndaten-Raster: Grid mit column-rule und row-rule, rule-break: intersection und Lücken an den Kreuzungen (rule-inset-junction)
- Werkliste oder Programm: nur row-rule, mit repeat() kräftigere Linie nach jeder fünften Zeile; Filter blenden Zeilen aus, die Linien zählen neu
- Visitenkarte oder Meta-Leiste: Flex mit flex-wrap und column-rule, Trennstriche nur zwischen Elementen derselben Zeile
- Mehrspaltiger Text mit column-rule (gab es schon für multi-column, jetzt mit denselben neuen Eigenschaften)
- Animiert: Linien wachsen beim Laden über rule-inset von der Mitte aus, Farbe und Kreuzungslücke wechseln beim Hover
Umsetzung
Grid: .kenndaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; rule: 1px solid #c5c7c7; rule-break: intersection; rule-inset-junction: -9px; rule-visibility-items: between }. Liste: ol als Grid mit row-gap 2px, row-rule-width: repeat(4, 1px), 2px und row-rule-color: repeat(4, #d9dbdb), #231f20 für eine kräftige Linie nach jeder fünften Zeile. Flex: flex-wrap: wrap mit column-rule. Weiche nur in CSS: Die Ersatzlinien (::before/::after an jedem Kind, Container mit overflow: clip) stehen immer im CSS, @supports (row-rule: 1px solid) schaltet die echten Linien ein und die Pseudo-Elemente aus. Ohne Unterstützung und ohne JS sieht die Seite damit gleich aus. Breite, Farbe und Insets sind animierbar; zum Aufziehen große Insets (größer als die halbe Segmentlänge) auf den Endwert animieren. Beobachtung in Chrome 153: eine @keyframes-Animation von column-rule-color: transparent ließ die Linien nach einem späteren Neuzeichnen verschwinden, daher nur Insets animieren (Farbübergänge per transition funktionieren).
Robust umsetzen
Telefon. Raster bricht auf zwei Spalten um, die Linien folgen ohne eigene Regeln. In umbrechenden Flex-Leisten stehen Trennstriche nur zwischen Elementen derselben Zeile, im Ersatz schneidet die Liste die Striche am Zeilenanfang ab. Kein Hover nötig; Tippen kann den Hover-Zustand umschalten.
Ohne Bewegung. Linien stehen sofort. Kein Aufziehen, keine Übergänge bei Hover, Filter und Breitenwechsel.
Barrierefrei. Linien sind reine Gestaltung und erscheinen nicht im Barrierefreiheitsbaum. Die Struktur kommt aus dem Markup: Kenndaten als dl, Werkliste als ol mit Zeilen als Links, Visitenkarte als address. Linien, die Gruppen trennen, mit mindestens 3 : 1 gegen den Grund (WCAG 1.4.11), etwa die kräftige Rhythmuslinie in #231f20; reine Zierlinien dürfen leiser sein. Filterknöpfe mit aria-pressed, Trefferzahl mit aria-live. Im Kontrastmodus (forced-colors) nehmen die Ersatzlinien CanvasText an.
Code
<!DOCTYPE html>
<!--
Trennlinien im Raster (Gap Decorations)
Fundus · Hero & Section-Layouts · https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/
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>Trennlinien im Raster (Gap Decorations) · 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: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; 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; }
:root {
/* Rezept architektur-ruhiges-raster: achromatisch, eine Kurve, kurze Dauern */
--grund: #ffffff; --flaeche: #e1e3e3; --text: #231f20; --leise: #76767a; --tertiaer: #c5c7c7;
--dunkel: #1f2323; --fokus: #0022ff;
--kurve: cubic-bezier(0.1, 0.6, 0.4, 1); /* Default (Chipperfield, KAAN) */
--kurve-auf: cubic-bezier(0.1, 0.9, 0.3, 1); /* Öffnen, Einblenden */
--ui: 250ms; --strich: 125ms; --aufziehen: 750ms;
--rand: clamp(20px, 3.4vw, 48px);
interpolate-size: allow-keywords;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grund); color: var(--text); font: 400 1.0625rem/1.45 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100svh; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
em { font-style: italic; }
.meta { font-size: .8rem; line-height: 1.35; color: var(--leise); letter-spacing: 0; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px var(--rand); }
.marke { font-weight: 500; letter-spacing: -0.02em; }
.marke span { color: var(--leise); }
.kopf nav ul { display: flex; gap: clamp(14px, 2vw, 28px); list-style: none; }
.kopf nav a { color: var(--leise); transition: color var(--ui) var(--kurve); }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--text); }
.menue { display: none; font: inherit; color: var(--text); background: none; border: 0; padding: 6px 0 6px 12px; cursor: pointer; }
.variante[hidden] { display: none !important; }
/* ════════════════════════════════════════════════════════════════════════
Gap Decorations: die Linien sitzen in der Lücke, nicht an den Kindern.
Ersatz (Fallback): jedes Kind zeichnet seine Linie links und oben selbst,
der Container schneidet die äußeren ab. Beide Wege stehen im CSS; der
@supports-Block unten schaltet auf den nativen Weg um und blendet den
Ersatz aus. .gd-ersatz am <html> erzwingt den Ersatz zum Vergleichen.
════════════════════════════════════════════════════════════════════════ */
/* ── 1 · Kenndaten-Raster (Grid, Kreuzungen) ─────────────────────────── */
.v-kenndaten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding: clamp(28px, 7vh, 88px) var(--rand) clamp(48px, 10vh, 120px); }
.projektkopf { grid-column: 1 / 8; }
.projektkopf h1 { font-size: clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem); font-weight: 450; line-height: 1.04; letter-spacing: -0.02em; margin-top: .9rem; text-wrap: balance; }
.projektkopf h1 em { font-weight: 400; color: var(--leise); }
.v-kenndaten .lead { grid-column: 1 / 7; max-width: 50ch; margin-top: clamp(20px, 3vh, 32px); text-wrap: pretty; }
.ansicht { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; color: var(--text); }
.ansicht svg { display: block; width: 100%; height: auto; overflow: visible; }
.ansicht figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; }
.kenndaten {
--spalt: 28px; /* gleiche Lücke in beiden Richtungen */
--kreuz: 5px; /* halbe Lücke an jeder Kreuzung (sichtbar 10px) */
--kreuz-zu: 0px;
--linie: var(--tertiaer);
grid-column: 1 / -1; margin-top: clamp(36px, 6vh, 64px);
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt);
}
.kenndaten > div { position: relative; min-height: 4.6rem; }
.kenndaten dt { font-size: .8rem; color: var(--leise); letter-spacing: 0; }
.kenndaten dd { margin-top: .35rem; font-size: 1.0625rem; line-height: 1.35; font-variant-numeric: tabular-nums; text-wrap: balance; }
.kenndaten dd em { color: var(--leise); }
/* Ersatz: senkrechte Linie links (::before), waagerechte oben (::after) */
.kenndaten { overflow: clip; overflow-clip-margin: 0px; }
.kenndaten > div::before, .kenndaten > div::after { content: ''; position: absolute; background: var(--linie); pointer-events: none;
transition: background-color var(--ui) var(--kurve), top var(--ui) var(--kurve), bottom var(--ui) var(--kurve), left var(--ui) var(--kurve), right var(--ui) var(--kurve); }
.kenndaten > div::before { width: 1px; left: calc(var(--spalt) / -2 - .5px); top: calc(var(--kreuz) - var(--spalt) / 2); bottom: calc(var(--kreuz) - var(--spalt) / 2); }
.kenndaten > div::after { height: 1px; top: calc(var(--spalt) / -2 - .5px); left: calc(var(--kreuz) - var(--spalt) / 2); right: calc(var(--kreuz) - var(--spalt) / 2); }
.kenndaten:is(:hover, .zeigen) { --linie: var(--text); --kreuz: var(--kreuz-zu); }
.kenndaten.zieht > div::before { animation: ersatz-senkrecht var(--aufziehen) var(--kurve-auf) backwards; }
.kenndaten.zieht > div::after { animation: ersatz-waagerecht var(--aufziehen) var(--kurve-auf) 120ms backwards; }
@keyframes ersatz-senkrecht { from { transform: scaleY(0); } }
@keyframes ersatz-waagerecht { from { transform: scaleX(0); } }
/* ── 2 · Werkliste (Subgrid-Zeilen, row-rule mit repeat()) ──────────── */
.v-werkliste { padding: clamp(28px, 6vh, 72px) var(--rand) clamp(64px, 12vh, 140px); container-type: inline-size; }
.listenkopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; align-items: end; margin-bottom: clamp(28px, 5vh, 52px); }
.listenkopf h2 { grid-column: 1 / 8; grid-row: 1; font-size: clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem); font-weight: 450; line-height: 1.04; letter-spacing: -0.02em; }
.listenkopf h2 em { font-weight: 400; color: var(--leise); }
.listenkopf > p:not(.trefferzahl) { grid-column: 8 / 13; grid-row: 1; max-width: 50ch; color: var(--leise); }
.filter { grid-column: 1 / 10; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.filter button { font: inherit; font-size: .9rem; letter-spacing: -0.01em; color: var(--leise); background: transparent; border: 1px solid var(--tertiaer); border-radius: 999px; height: 34px; padding: 0 14px; cursor: pointer;
transition: color var(--ui) var(--kurve), background-color var(--ui) var(--kurve), border-color var(--ui) var(--kurve); }
.filter button sup { font-size: .68rem; margin-left: 3px; vertical-align: .45em; font-variant-numeric: tabular-nums; }
.filter button:hover { color: var(--text); border-color: var(--text); }
.filter button[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: var(--grund); }
.trefferzahl { grid-column: 10 / 13; grid-row: 2; justify-self: end; font-variant-numeric: tabular-nums; }
.trefferzahl b { font-weight: 450; font-size: 1.25rem; color: var(--text); }
.werk { --spalten: 3.2rem minmax(0, 1fr) minmax(0, 11rem) minmax(0, 8rem) minmax(0, 11rem) 3.4rem; }
.werkliste .jahr, .tabkopf .k-jahr { text-align: right; }
.tabkopf, .werkliste > li > a { display: grid; grid-template-columns: var(--spalten); column-gap: clamp(12px, 1.6vw, 24px); }
.tabkopf { padding-bottom: 10px; border-bottom: 1px solid var(--text); }
.werkliste {
--rhythmus: 2px; /* Lücke, in der die Linie sitzt */
list-style: none; display: grid; grid-template-columns: 1fr; row-gap: var(--rhythmus);
}
.werkliste > li > a { align-items: baseline; padding: 11px 0; font-variant-numeric: tabular-nums; transition: color var(--strich) linear; }
.werkliste .nr, .werkliste .jahr { color: var(--leise); }
.werkliste .titel { font-weight: 450; }
.werkliste .info { display: contents; }
.werkliste .stand { color: var(--leise); }
.werkliste .stand[data-stand='bau'] { color: var(--text); }
.werkliste .stand[data-stand='bau']::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); margin-right: 7px; vertical-align: .12em; }
.werkliste a:hover .titel, .werkliste a:focus-visible .titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.werkliste a:focus-visible { outline-offset: -2px; }
.leer { padding: 28px 0; color: var(--leise); }
/* Ersatz: Linie über jeder Zeile, jede fünfte sichtbare kräftig */
.werkliste { overflow: clip; overflow-clip-margin: 0px; }
.werkliste > li { position: relative; }
.werkliste > li::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--rhythmus) / -2 - .5px); height: 1px; background: #d9dbdb; transform-origin: 0 50%; pointer-events: none; }
.werkliste > li:nth-child(5n + 1 of :not([hidden]))::before { height: 2px; top: calc(var(--rhythmus) / -2 - 1px); background: var(--text); }
.werkliste.zieht > li::before { animation: ersatz-waagerecht var(--aufziehen) var(--kurve-auf) backwards; }
/* ── 3 · Visitenkarte (Flex mit Umbruch, column-rule) ───────────────── */
.v-karte { background: var(--dunkel); color: #f2f2f0; min-height: calc(100svh - 70px); padding: clamp(40px, 9vh, 112px) var(--rand) clamp(28px, 5vh, 48px); display: grid; grid-template-rows: auto 1fr auto; gap: clamp(32px, 7vh, 80px); }
.v-karte .meta { color: rgba(242, 242, 240, .58); }
.v-karte h2 { font-size: clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem); font-weight: 450; line-height: 1.08; letter-spacing: -0.02em; max-width: 19ch; margin-top: .9rem; text-wrap: balance; }
.v-karte h2 em { font-weight: 400; color: rgba(242, 242, 240, .58); }
.kartenkopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lage { color: #f2f2f0; }
.lage svg { display: block; width: 100%; height: auto; overflow: visible; }
.lage figcaption { margin-top: 10px; max-width: 40ch; }
.kartenrahmen { align-self: end; inline-size: var(--breite, 100%); max-inline-size: 100%; transition: inline-size 1200ms var(--kurve); }
.kartenrahmen .meta { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.karte, .links {
--spalt: 34px; --zeile: 14px;
--linie: rgba(242, 242, 240, .26);
display: flex; flex-wrap: wrap; gap: var(--zeile) var(--spalt); list-style: none; font-style: normal;
}
.karte { font-size: clamp(1.0625rem, .9rem + .55vw, 1.4rem); letter-spacing: -0.016em; line-height: 1.3; }
.karte > *, .links > * { position: relative; }
.karte a, .links a { text-decoration: underline; text-decoration-color: rgba(242, 242, 240, .3); text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color var(--strich) linear; }
.karte a:hover, .links a:hover { text-decoration-color: currentColor; }
.links { margin-top: clamp(22px, 4vh, 40px); font-size: .9rem; color: rgba(242, 242, 240, .72); --spalt: 26px; }
.fuss { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v-karte :focus-visible { outline-color: #8fa0ff; }
/* Ersatz: Trennstrich links von jedem Element; die Liste schneidet die Striche
am Zeilenanfang ab (6px Spielraum für den Fokusrahmen, die Striche liegen weiter außen) */
.karte, .links { overflow: clip; overflow-clip-margin: 6px; }
.karte > *::before, .links > *::before { content: ''; position: absolute; width: 1px; background: var(--linie); left: calc(var(--spalt) / -2 - .5px); top: .12em; bottom: .12em; transform-origin: 50% 50%; pointer-events: none; }
.zieht > *::before { animation: ersatz-senkrecht var(--aufziehen) var(--kurve-auf) backwards; }
/* ── Nativer Weg: Gap Decorations (Chrome/Edge 149+) ─────────────────── */
@supports (row-rule: 1px solid) {
:root:not(.gd-ersatz) .kenndaten {
overflow: visible;
rule: 1px solid var(--linie);
rule-break: intersection; /* an jeder Kreuzung neu ansetzen */
rule-inset-cap: 0px;
rule-inset-junction: calc(var(--kreuz) - var(--spalt) / 2);
rule-visibility-items: between; /* keine Linien neben leeren Zellen */
transition: column-rule-color var(--ui) var(--kurve), row-rule-color var(--ui) var(--kurve), rule-inset-junction var(--ui) var(--kurve);
}
:root:not(.gd-ersatz) .kenndaten.zieht { animation: aufziehen-spalten var(--aufziehen) var(--kurve-auf) backwards, aufziehen-zeilen var(--aufziehen) var(--kurve-auf) 120ms backwards; }
@keyframes aufziehen-spalten { from { column-rule-inset: 160px; } }
@keyframes aufziehen-zeilen { from { row-rule-inset: 480px; } }
:root:not(.gd-ersatz) .werkliste {
overflow: visible;
row-rule-style: solid;
row-rule-width: repeat(4, 1px), 2px; /* nach jeder fünften Zeile kräftiger */
row-rule-color: repeat(4, #d9dbdb), var(--text);
row-rule-break: none;
}
:root:not(.gd-ersatz) .werkliste.zieht { animation: aufziehen-liste var(--aufziehen) var(--kurve-auf) backwards; }
@keyframes aufziehen-liste { from { row-rule-inset-end: 100cqi; } }
:root:not(.gd-ersatz) :is(.karte, .links) { overflow: visible; column-rule: 1px solid var(--linie); column-rule-inset: .12em; }
:root:not(.gd-ersatz) .zieht:is(.karte, .links) { animation: aufziehen-karte var(--aufziehen) var(--kurve-auf) backwards; }
@keyframes aufziehen-karte { from { column-rule-inset: 1.2em; } }
:root:not(.gd-ersatz) :is(.kenndaten, .werkliste, .karte, .links) > *::before,
:root:not(.gd-ersatz) .kenndaten > *::after { display: none; }
}
/* ── Pult (Bedienleiste der Demo) ───────────────────────────────────── */
.pult { position: fixed; z-index: 20; left: 50%; bottom: 16px; translate: -50% 0; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 24px);
padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(35, 31, 32, .12); box-shadow: 0 10px 34px rgba(35, 31, 32, .1);
font: 500 10.5px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.pult .zeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pult .zeile > span { margin-right: 4px; }
.pult button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--leise); background: transparent; border: 1px solid rgba(35, 31, 32, .16); border-radius: 999px; height: 28px; padding: 0 11px; cursor: pointer; transition: background-color var(--strich) linear, color var(--strich) linear; }
.pult button[aria-pressed='true'] { background: var(--text); color: #fff; border-color: var(--text); }
.pult button:disabled { opacity: .35; cursor: not-allowed; }
.pult .status b { color: var(--text); font-weight: 500; }
.pult .werte { letter-spacing: .06em; text-transform: none; max-width: 78ch; color: var(--leise); }
.pult input[type='range'] { width: 140px; accent-color: var(--text); }
.pult [hidden] { display: none; }
/* ── Umbrüche ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
.projektkopf, .v-kenndaten .lead { grid-column: 1 / 8; }
.ansicht { grid-column: 8 / 13; }
.listenkopf h2 { grid-column: 1 / -1; }
.listenkopf > p:not(.trefferzahl) { grid-column: 1 / 10; grid-row: 2; }
.filter, .trefferzahl { grid-row: 3; }
.werk { --spalten: 2.8rem minmax(0, 1fr) minmax(0, 9rem) minmax(0, 7rem) 3.4rem; }
.werkliste .stand, .tabkopf .k-stand { display: none; }
}
@media (max-width: 760px) {
.kopf { flex-wrap: wrap; }
.menue { display: block; }
.kopf nav { flex-basis: 100%; display: none; }
.kopf nav.offen { display: block; }
.kopf nav ul { flex-direction: column; gap: 6px; padding-top: 14px; font-size: 1.25rem; }
.v-kenndaten { grid-template-columns: 1fr; }
.projektkopf, .v-kenndaten .lead, .ansicht, .kenndaten { grid-column: 1; grid-row: auto; }
.ansicht { margin-top: 32px; }
.kenndaten { --spalt: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kenndaten dd { font-size: 1rem; }
.listenkopf { grid-template-columns: 1fr auto; }
.listenkopf h2, .listenkopf > p:not(.trefferzahl), .filter { grid-column: 1 / -1; grid-row: auto; }
.trefferzahl { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
.werkliste { border-top: 1px solid var(--text); }
.tabkopf { display: none; }
.werk { --spalten: 2.1rem minmax(0, 1fr) 2.8rem; }
.werkliste > li > a { grid-template-areas: 'nr titel jahr' '. info info'; row-gap: 2px; padding: 12px 0; }
.werkliste .nr { grid-area: nr; } .werkliste .titel { grid-area: titel; } .werkliste .jahr { grid-area: jahr; text-align: right; }
.werkliste .info { grid-area: info; display: flex; flex-wrap: wrap; gap: 0 .6em; font-size: .85rem; color: var(--leise); }
.werkliste .info > span + span::before { content: '·'; margin-right: .6em; }
.werkliste .stand { display: inline; }
.v-karte { min-height: auto; }
.kartenkopf { grid-template-columns: 1fr; }
.lage { max-width: 420px; }
}
/* ── Reduzierte Bewegung ────────────────────────────────────────────── */
.reduziert *, .reduziert *::before, .reduziert *::after { animation: none !important; transition: none !important; }
/* ── Touch: kein Hover-Zustand, Kreuzungen bleiben offen; große Ziele ─ */
@media (hover: none) {
.kenndaten:hover:not(.zeigen) { --linie: var(--tertiaer); --kreuz: 5px; }
.filter button { height: 40px; padding: 0 16px; }
.werkliste > li > a { min-height: 48px; }
}
.vorschau body { overflow: hidden; }
.vorschau .kopf { padding-top: 18px; padding-bottom: 18px; }
.vorschau .lage { display: none; }
.vorschau .v-karte { min-height: calc(100svh - 61px); }
@media (forced-colors: active) { .kenndaten > div::before, .kenndaten > div::after, .werkliste > li::before, .karte > *::before, .links > *::before { background: CanvasText; } }
</style>
</head>
<body>
<header class="kopf">
<a class="marke" href="#" aria-label="Aaregg Architekten, Startseite">Aaregg <span>Architekten</span></a>
<button class="menue" type="button" aria-expanded="false" aria-controls="hauptnavigation">Menü</button>
<nav aria-label="Hauptnavigation">
<ul id="hauptnavigation">
<li><a href="#">Büro</a></li>
<li><a href="#" aria-current="page">Projekte</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Aktuelles</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<!-- Variante 1: Kenndaten einer Projektseite -->
<article class="variante v-kenndaten" data-variante="kenndaten" aria-labelledby="projekt-titel">
<div class="projektkopf">
<p class="meta">Projekt 31 · Wohnen · Fertiggestellt im Juni 2025</p>
<h1 id="projekt-titel">Wohnhaus Lerchenfeld <em>Thun</em></h1>
</div>
<p class="lead">24 Mietwohnungen für eine Genossenschaft am Rand des Lerchenfelds. Ein langer Holzbau steht auf einem Sockel aus Recyclingbeton. Die Laubengänge im Norden sind Erschliessung und Treffpunkt zugleich, nach Süden öffnet sich jede Wohnung mit einem tiefen Balkon zum Garten.</p>
<figure class="ansicht">
<svg viewBox="0 64 640 204" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ansicht-titel"><title id="ansicht-titel">Ansicht Süd des Wohnhauses: langer Holzbau mit drei Obergeschossen und Balkonbändern über einem Sockel aus Beton, Photovoltaik auf dem Dach.</title><g fill="none" stroke="currentColor" stroke-width=".9" vector-effect="non-scaling-stroke" stroke-linecap="square"><path d="M8 252H632" stroke-width="1.4"/><path d="M14 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M23 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M32 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M41 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M50 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M59 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M68 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M77 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M86 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M95 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M104 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M113 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M122 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M131 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M140 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M149 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M158 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M167 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M176 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M185 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M194 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M203 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M212 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M221 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M230 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M239 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M248 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M257 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M266 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M275 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M284 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M293 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M302 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M311 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M320 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M329 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M338 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M347 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M356 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M365 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M374 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M383 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M392 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M401 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M410 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M419 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M428 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M437 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M446 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M455 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M464 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M473 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M482 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M491 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M500 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M509 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M518 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M527 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M536 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M545 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M554 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M563 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M572 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M581 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M590 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M599 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M608 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M617 253l-7 7" stroke-width=".5" opacity=".45"/><path d="M626 253l-7 7" stroke-width=".5" opacity=".45"/><rect x="70" y="206" width="500" height="46" fill="var(--flaeche)"/><rect x="77.5" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="119.2" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="160.8" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="204.2" y="214" width="23.3" height="38" fill="var(--grund)"/><path d="M215.8 214V252" stroke-width=".5"/><rect x="244.2" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="285.8" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="327.5" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="369.2" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="412.5" y="214" width="23.3" height="38" fill="var(--grund)"/><path d="M424.2 214V252" stroke-width=".5"/><rect x="452.5" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="494.2" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="535.8" y="217" width="26.7" height="24" fill="var(--grund)"/><rect x="70" y="92" width="500" height="114"/><path d="M73.0 92V206" stroke-width=".35" opacity=".38"/><path d="M77.2 92V206" stroke-width=".35" opacity=".38"/><path d="M81.4 92V206" stroke-width=".35" opacity=".38"/><path d="M85.6 92V206" stroke-width=".35" opacity=".38"/><path d="M89.8 92V206" stroke-width=".35" opacity=".38"/><path d="M94.0 92V206" stroke-width=".35" opacity=".38"/><path d="M98.2 92V206" stroke-width=".35" opacity=".38"/><path d="M102.4 92V206" stroke-width=".35" opacity=".38"/><path d="M106.6 92V206" stroke-width=".35" opacity=".38"/><path d="M110.8 92V206" stroke-width=".35" opacity=".38"/><path d="M115.0 92V206" stroke-width=".35" opacity=".38"/><path d="M119.2 92V206" stroke-width=".35" opacity=".38"/><path d="M123.4 92V206" stroke-width=".35" opacity=".38"/><path d="M127.6 92V206" stroke-width=".35" opacity=".38"/><path d="M131.8 92V206" stroke-width=".35" opacity=".38"/><path d="M136.0 92V206" stroke-width=".35" opacity=".38"/><path d="M140.2 92V206" stroke-width=".35" opacity=".38"/><path d="M144.4 92V206" stroke-width=".35" opacity=".38"/><path d="M148.6 92V206" stroke-width=".35" opacity=".38"/><path d="M152.8 92V206" stroke-width=".35" opacity=".38"/><path d="M157.0 92V206" stroke-width=".35" opacity=".38"/><path d="M161.2 92V206" stroke-width=".35" opacity=".38"/><path d="M165.4 92V206" stroke-width=".35" opacity=".38"/><path d="M169.6 92V206" stroke-width=".35" opacity=".38"/><path d="M173.8 92V206" stroke-width=".35" opacity=".38"/><path d="M178.0 92V206" stroke-width=".35" opacity=".38"/><path d="M182.2 92V206" stroke-width=".35" opacity=".38"/><path d="M186.4 92V206" stroke-width=".35" opacity=".38"/><path d="M190.6 92V206" stroke-width=".35" opacity=".38"/><path d="M194.8 92V206" stroke-width=".35" opacity=".38"/><path d="M199.0 92V206" stroke-width=".35" opacity=".38"/><path d="M203.2 92V206" stroke-width=".35" opacity=".38"/><path d="M207.4 92V206" stroke-width=".35" opacity=".38"/><path d="M211.6 92V206" stroke-width=".35" opacity=".38"/><path d="M215.8 92V206" stroke-width=".35" opacity=".38"/><path d="M220.0 92V206" stroke-width=".35" opacity=".38"/><path d="M224.2 92V206" stroke-width=".35" opacity=".38"/><path d="M228.4 92V206" stroke-width=".35" opacity=".38"/><path d="M232.6 92V206" stroke-width=".35" opacity=".38"/><path d="M236.8 92V206" stroke-width=".35" opacity=".38"/><path d="M241.0 92V206" stroke-width=".35" opacity=".38"/><path d="M245.2 92V206" stroke-width=".35" opacity=".38"/><path d="M249.4 92V206" stroke-width=".35" opacity=".38"/><path d="M253.6 92V206" stroke-width=".35" opacity=".38"/><path d="M257.8 92V206" stroke-width=".35" opacity=".38"/><path d="M262.0 92V206" stroke-width=".35" opacity=".38"/><path d="M266.2 92V206" stroke-width=".35" opacity=".38"/><path d="M270.4 92V206" stroke-width=".35" opacity=".38"/><path d="M274.6 92V206" stroke-width=".35" opacity=".38"/><path d="M278.8 92V206" stroke-width=".35" opacity=".38"/><path d="M283.0 92V206" stroke-width=".35" opacity=".38"/><path d="M287.2 92V206" stroke-width=".35" opacity=".38"/><path d="M291.4 92V206" stroke-width=".35" opacity=".38"/><path d="M295.6 92V206" stroke-width=".35" opacity=".38"/><path d="M299.8 92V206" stroke-width=".35" opacity=".38"/><path d="M304.0 92V206" stroke-width=".35" opacity=".38"/><path d="M308.2 92V206" stroke-width=".35" opacity=".38"/><path d="M312.4 92V206" stroke-width=".35" opacity=".38"/><path d="M316.6 92V206" stroke-width=".35" opacity=".38"/><path d="M320.8 92V206" stroke-width=".35" opacity=".38"/><path d="M325.0 92V206" stroke-width=".35" opacity=".38"/><path d="M329.2 92V206" stroke-width=".35" opacity=".38"/><path d="M333.4 92V206" stroke-width=".35" opacity=".38"/><path d="M337.6 92V206" stroke-width=".35" opacity=".38"/><path d="M341.8 92V206" stroke-width=".35" opacity=".38"/><path d="M346.0 92V206" stroke-width=".35" opacity=".38"/><path d="M350.2 92V206" stroke-width=".35" opacity=".38"/><path d="M354.4 92V206" stroke-width=".35" opacity=".38"/><path d="M358.6 92V206" stroke-width=".35" opacity=".38"/><path d="M362.8 92V206" stroke-width=".35" opacity=".38"/><path d="M367.0 92V206" stroke-width=".35" opacity=".38"/><path d="M371.2 92V206" stroke-width=".35" opacity=".38"/><path d="M375.4 92V206" stroke-width=".35" opacity=".38"/><path d="M379.6 92V206" stroke-width=".35" opacity=".38"/><path d="M383.8 92V206" stroke-width=".35" opacity=".38"/><path d="M388.0 92V206" stroke-width=".35" opacity=".38"/><path d="M392.2 92V206" stroke-width=".35" opacity=".38"/><path d="M396.4 92V206" stroke-width=".35" opacity=".38"/><path d="M400.6 92V206" stroke-width=".35" opacity=".38"/><path d="M404.8 92V206" stroke-width=".35" opacity=".38"/><path d="M409.0 92V206" stroke-width=".35" opacity=".38"/><path d="M413.2 92V206" stroke-width=".35" opacity=".38"/><path d="M417.4 92V206" stroke-width=".35" opacity=".38"/><path d="M421.6 92V206" stroke-width=".35" opacity=".38"/><path d="M425.8 92V206" stroke-width=".35" opacity=".38"/><path d="M430.0 92V206" stroke-width=".35" opacity=".38"/><path d="M434.2 92V206" stroke-width=".35" opacity=".38"/><path d="M438.4 92V206" stroke-width=".35" opacity=".38"/><path d="M442.6 92V206" stroke-width=".35" opacity=".38"/><path d="M446.8 92V206" stroke-width=".35" opacity=".38"/><path d="M451.0 92V206" stroke-width=".35" opacity=".38"/><path d="M455.2 92V206" stroke-width=".35" opacity=".38"/><path d="M459.4 92V206" stroke-width=".35" opacity=".38"/><path d="M463.6 92V206" stroke-width=".35" opacity=".38"/><path d="M467.8 92V206" stroke-width=".35" opacity=".38"/><path d="M472.0 92V206" stroke-width=".35" opacity=".38"/><path d="M476.2 92V206" stroke-width=".35" opacity=".38"/><path d="M480.4 92V206" stroke-width=".35" opacity=".38"/><path d="M484.6 92V206" stroke-width=".35" opacity=".38"/><path d="M488.8 92V206" stroke-width=".35" opacity=".38"/><path d="M493.0 92V206" stroke-width=".35" opacity=".38"/><path d="M497.2 92V206" stroke-width=".35" opacity=".38"/><path d="M501.4 92V206" stroke-width=".35" opacity=".38"/><path d="M505.6 92V206" stroke-width=".35" opacity=".38"/><path d="M509.8 92V206" stroke-width=".35" opacity=".38"/><path d="M514.0 92V206" stroke-width=".35" opacity=".38"/><path d="M518.2 92V206" stroke-width=".35" opacity=".38"/><path d="M522.4 92V206" stroke-width=".35" opacity=".38"/><path d="M526.6 92V206" stroke-width=".35" opacity=".38"/><path d="M530.8 92V206" stroke-width=".35" opacity=".38"/><path d="M535.0 92V206" stroke-width=".35" opacity=".38"/><path d="M539.2 92V206" stroke-width=".35" opacity=".38"/><path d="M543.4 92V206" stroke-width=".35" opacity=".38"/><path d="M547.6 92V206" stroke-width=".35" opacity=".38"/><path d="M551.8 92V206" stroke-width=".35" opacity=".38"/><path d="M556.0 92V206" stroke-width=".35" opacity=".38"/><path d="M560.2 92V206" stroke-width=".35" opacity=".38"/><path d="M564.4 92V206" stroke-width=".35" opacity=".38"/><path d="M568.6 92V206" stroke-width=".35" opacity=".38"/><rect x="78.3" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M90.8 174V200" stroke-width=".45"/><rect x="120.0" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M132.5 174V200" stroke-width=".45"/><rect x="161.7" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M174.2 174V200" stroke-width=".45"/><rect x="203.3" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M215.8 174V200" stroke-width=".45"/><rect x="245.0" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M257.5 174V200" stroke-width=".45"/><rect x="286.7" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M299.2 174V200" stroke-width=".45"/><rect x="328.3" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M340.8 174V200" stroke-width=".45"/><rect x="370.0" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M382.5 174V200" stroke-width=".45"/><rect x="411.7" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M424.2 174V200" stroke-width=".45"/><rect x="453.3" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M465.8 174V200" stroke-width=".45"/><rect x="495.0" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M507.5 174V200" stroke-width=".45"/><rect x="536.7" y="174" width="25.0" height="26" fill="var(--grund)"/><path d="M549.2 174V200" stroke-width=".45"/><rect x="109.7" y="204" width="87.3" height="3" fill="var(--grund)"/><path d="M109.7 192H197.0" stroke-width=".7"/><path d="M111.7 192V204" stroke-width=".35"/><path d="M114.9 192V204" stroke-width=".35"/><path d="M118.1 192V204" stroke-width=".35"/><path d="M121.3 192V204" stroke-width=".35"/><path d="M124.5 192V204" stroke-width=".35"/><path d="M127.7 192V204" stroke-width=".35"/><path d="M130.9 192V204" stroke-width=".35"/><path d="M134.1 192V204" stroke-width=".35"/><path d="M137.3 192V204" stroke-width=".35"/><path d="M140.5 192V204" stroke-width=".35"/><path d="M143.7 192V204" stroke-width=".35"/><path d="M146.9 192V204" stroke-width=".35"/><path d="M150.1 192V204" stroke-width=".35"/><path d="M153.3 192V204" stroke-width=".35"/><path d="M156.5 192V204" stroke-width=".35"/><path d="M159.7 192V204" stroke-width=".35"/><path d="M162.9 192V204" stroke-width=".35"/><path d="M166.1 192V204" stroke-width=".35"/><path d="M169.3 192V204" stroke-width=".35"/><path d="M172.5 192V204" stroke-width=".35"/><path d="M175.7 192V204" stroke-width=".35"/><path d="M178.9 192V204" stroke-width=".35"/><path d="M182.1 192V204" stroke-width=".35"/><path d="M185.3 192V204" stroke-width=".35"/><path d="M188.5 192V204" stroke-width=".35"/><path d="M191.7 192V204" stroke-width=".35"/><path d="M194.9 192V204" stroke-width=".35"/><rect x="234.7" y="204" width="87.3" height="3" fill="var(--grund)"/><path d="M234.7 192H322.0" stroke-width=".7"/><path d="M236.7 192V204" stroke-width=".35"/><path d="M239.9 192V204" stroke-width=".35"/><path d="M243.1 192V204" stroke-width=".35"/><path d="M246.3 192V204" stroke-width=".35"/><path d="M249.5 192V204" stroke-width=".35"/><path d="M252.7 192V204" stroke-width=".35"/><path d="M255.9 192V204" stroke-width=".35"/><path d="M259.1 192V204" stroke-width=".35"/><path d="M262.3 192V204" stroke-width=".35"/><path d="M265.5 192V204" stroke-width=".35"/><path d="M268.7 192V204" stroke-width=".35"/><path d="M271.9 192V204" stroke-width=".35"/><path d="M275.1 192V204" stroke-width=".35"/><path d="M278.3 192V204" stroke-width=".35"/><path d="M281.5 192V204" stroke-width=".35"/><path d="M284.7 192V204" stroke-width=".35"/><path d="M287.9 192V204" stroke-width=".35"/><path d="M291.1 192V204" stroke-width=".35"/><path d="M294.3 192V204" stroke-width=".35"/><path d="M297.5 192V204" stroke-width=".35"/><path d="M300.7 192V204" stroke-width=".35"/><path d="M303.9 192V204" stroke-width=".35"/><path d="M307.1 192V204" stroke-width=".35"/><path d="M310.3 192V204" stroke-width=".35"/><path d="M313.5 192V204" stroke-width=".35"/><path d="M316.7 192V204" stroke-width=".35"/><path d="M319.9 192V204" stroke-width=".35"/><rect x="359.7" y="204" width="87.3" height="3" fill="var(--grund)"/><path d="M359.7 192H447.0" stroke-width=".7"/><path d="M361.7 192V204" stroke-width=".35"/><path d="M364.9 192V204" stroke-width=".35"/><path d="M368.1 192V204" stroke-width=".35"/><path d="M371.3 192V204" stroke-width=".35"/><path d="M374.5 192V204" stroke-width=".35"/><path d="M377.7 192V204" stroke-width=".35"/><path d="M380.9 192V204" stroke-width=".35"/><path d="M384.1 192V204" stroke-width=".35"/><path d="M387.3 192V204" stroke-width=".35"/><path d="M390.5 192V204" stroke-width=".35"/><path d="M393.7 192V204" stroke-width=".35"/><path d="M396.9 192V204" stroke-width=".35"/><path d="M400.1 192V204" stroke-width=".35"/><path d="M403.3 192V204" stroke-width=".35"/><path d="M406.5 192V204" stroke-width=".35"/><path d="M409.7 192V204" stroke-width=".35"/><path d="M412.9 192V204" stroke-width=".35"/><path d="M416.1 192V204" stroke-width=".35"/><path d="M419.3 192V204" stroke-width=".35"/><path d="M422.5 192V204" stroke-width=".35"/><path d="M425.7 192V204" stroke-width=".35"/><path d="M428.9 192V204" stroke-width=".35"/><path d="M432.1 192V204" stroke-width=".35"/><path d="M435.3 192V204" stroke-width=".35"/><path d="M438.5 192V204" stroke-width=".35"/><path d="M441.7 192V204" stroke-width=".35"/><path d="M444.9 192V204" stroke-width=".35"/><rect x="484.7" y="204" width="87.3" height="3" fill="var(--grund)"/><path d="M484.7 192H572.0" stroke-width=".7"/><path d="M486.7 192V204" stroke-width=".35"/><path d="M489.9 192V204" stroke-width=".35"/><path d="M493.1 192V204" stroke-width=".35"/><path d="M496.3 192V204" stroke-width=".35"/><path d="M499.5 192V204" stroke-width=".35"/><path d="M502.7 192V204" stroke-width=".35"/><path d="M505.9 192V204" stroke-width=".35"/><path d="M509.1 192V204" stroke-width=".35"/><path d="M512.3 192V204" stroke-width=".35"/><path d="M515.5 192V204" stroke-width=".35"/><path d="M518.7 192V204" stroke-width=".35"/><path d="M521.9 192V204" stroke-width=".35"/><path d="M525.1 192V204" stroke-width=".35"/><path d="M528.3 192V204" stroke-width=".35"/><path d="M531.5 192V204" stroke-width=".35"/><path d="M534.7 192V204" stroke-width=".35"/><path d="M537.9 192V204" stroke-width=".35"/><path d="M541.1 192V204" stroke-width=".35"/><path d="M544.3 192V204" stroke-width=".35"/><path d="M547.5 192V204" stroke-width=".35"/><path d="M550.7 192V204" stroke-width=".35"/><path d="M553.9 192V204" stroke-width=".35"/><path d="M557.1 192V204" stroke-width=".35"/><path d="M560.3 192V204" stroke-width=".35"/><path d="M563.5 192V204" stroke-width=".35"/><path d="M566.7 192V204" stroke-width=".35"/><path d="M569.9 192V204" stroke-width=".35"/><rect x="78.3" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M90.8 136V162" stroke-width=".45"/><rect x="120.0" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M132.5 136V162" stroke-width=".45"/><rect x="161.7" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M174.2 136V162" stroke-width=".45"/><rect x="203.3" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M215.8 136V162" stroke-width=".45"/><rect x="245.0" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M257.5 136V162" stroke-width=".45"/><rect x="286.7" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M299.2 136V162" stroke-width=".45"/><rect x="328.3" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M340.8 136V162" stroke-width=".45"/><rect x="370.0" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M382.5 136V162" stroke-width=".45"/><rect x="411.7" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M424.2 136V162" stroke-width=".45"/><rect x="453.3" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M465.8 136V162" stroke-width=".45"/><rect x="495.0" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M507.5 136V162" stroke-width=".45"/><rect x="536.7" y="136" width="25.0" height="26" fill="var(--grund)"/><path d="M549.2 136V162" stroke-width=".45"/><rect x="109.7" y="166" width="87.3" height="3" fill="var(--grund)"/><path d="M109.7 154H197.0" stroke-width=".7"/><path d="M111.7 154V166" stroke-width=".35"/><path d="M114.9 154V166" stroke-width=".35"/><path d="M118.1 154V166" stroke-width=".35"/><path d="M121.3 154V166" stroke-width=".35"/><path d="M124.5 154V166" stroke-width=".35"/><path d="M127.7 154V166" stroke-width=".35"/><path d="M130.9 154V166" stroke-width=".35"/><path d="M134.1 154V166" stroke-width=".35"/><path d="M137.3 154V166" stroke-width=".35"/><path d="M140.5 154V166" stroke-width=".35"/><path d="M143.7 154V166" stroke-width=".35"/><path d="M146.9 154V166" stroke-width=".35"/><path d="M150.1 154V166" stroke-width=".35"/><path d="M153.3 154V166" stroke-width=".35"/><path d="M156.5 154V166" stroke-width=".35"/><path d="M159.7 154V166" stroke-width=".35"/><path d="M162.9 154V166" stroke-width=".35"/><path d="M166.1 154V166" stroke-width=".35"/><path d="M169.3 154V166" stroke-width=".35"/><path d="M172.5 154V166" stroke-width=".35"/><path d="M175.7 154V166" stroke-width=".35"/><path d="M178.9 154V166" stroke-width=".35"/><path d="M182.1 154V166" stroke-width=".35"/><path d="M185.3 154V166" stroke-width=".35"/><path d="M188.5 154V166" stroke-width=".35"/><path d="M191.7 154V166" stroke-width=".35"/><path d="M194.9 154V166" stroke-width=".35"/><rect x="234.7" y="166" width="87.3" height="3" fill="var(--grund)"/><path d="M234.7 154H322.0" stroke-width=".7"/><path d="M236.7 154V166" stroke-width=".35"/><path d="M239.9 154V166" stroke-width=".35"/><path d="M243.1 154V166" stroke-width=".35"/><path d="M246.3 154V166" stroke-width=".35"/><path d="M249.5 154V166" stroke-width=".35"/><path d="M252.7 154V166" stroke-width=".35"/><path d="M255.9 154V166" stroke-width=".35"/><path d="M259.1 154V166" stroke-width=".35"/><path d="M262.3 154V166" stroke-width=".35"/><path d="M265.5 154V166" stroke-width=".35"/><path d="M268.7 154V166" stroke-width=".35"/><path d="M271.9 154V166" stroke-width=".35"/><path d="M275.1 154V166" stroke-width=".35"/><path d="M278.3 154V166" stroke-width=".35"/><path d="M281.5 154V166" stroke-width=".35"/><path d="M284.7 154V166" stroke-width=".35"/><path d="M287.9 154V166" stroke-width=".35"/><path d="M291.1 154V166" stroke-width=".35"/><path d="M294.3 154V166" stroke-width=".35"/><path d="M297.5 154V166" stroke-width=".35"/><path d="M300.7 154V166" stroke-width=".35"/><path d="M303.9 154V166" stroke-width=".35"/><path d="M307.1 154V166" stroke-width=".35"/><path d="M310.3 154V166" stroke-width=".35"/><path d="M313.5 154V166" stroke-width=".35"/><path d="M316.7 154V166" stroke-width=".35"/><path d="M319.9 154V166" stroke-width=".35"/><rect x="359.7" y="166" width="87.3" height="3" fill="var(--grund)"/><path d="M359.7 154H447.0" stroke-width=".7"/><path d="M361.7 154V166" stroke-width=".35"/><path d="M364.9 154V166" stroke-width=".35"/><path d="M368.1 154V166" stroke-width=".35"/><path d="M371.3 154V166" stroke-width=".35"/><path d="M374.5 154V166" stroke-width=".35"/><path d="M377.7 154V166" stroke-width=".35"/><path d="M380.9 154V166" stroke-width=".35"/><path d="M384.1 154V166" stroke-width=".35"/><path d="M387.3 154V166" stroke-width=".35"/><path d="M390.5 154V166" stroke-width=".35"/><path d="M393.7 154V166" stroke-width=".35"/><path d="M396.9 154V166" stroke-width=".35"/><path d="M400.1 154V166" stroke-width=".35"/><path d="M403.3 154V166" stroke-width=".35"/><path d="M406.5 154V166" stroke-width=".35"/><path d="M409.7 154V166" stroke-width=".35"/><path d="M412.9 154V166" stroke-width=".35"/><path d="M416.1 154V166" stroke-width=".35"/><path d="M419.3 154V166" stroke-width=".35"/><path d="M422.5 154V166" stroke-width=".35"/><path d="M425.7 154V166" stroke-width=".35"/><path d="M428.9 154V166" stroke-width=".35"/><path d="M432.1 154V166" stroke-width=".35"/><path d="M435.3 154V166" stroke-width=".35"/><path d="M438.5 154V166" stroke-width=".35"/><path d="M441.7 154V166" stroke-width=".35"/><path d="M444.9 154V166" stroke-width=".35"/><rect x="484.7" y="166" width="87.3" height="3" fill="var(--grund)"/><path d="M484.7 154H572.0" stroke-width=".7"/><path d="M486.7 154V166" stroke-width=".35"/><path d="M489.9 154V166" stroke-width=".35"/><path d="M493.1 154V166" stroke-width=".35"/><path d="M496.3 154V166" stroke-width=".35"/><path d="M499.5 154V166" stroke-width=".35"/><path d="M502.7 154V166" stroke-width=".35"/><path d="M505.9 154V166" stroke-width=".35"/><path d="M509.1 154V166" stroke-width=".35"/><path d="M512.3 154V166" stroke-width=".35"/><path d="M515.5 154V166" stroke-width=".35"/><path d="M518.7 154V166" stroke-width=".35"/><path d="M521.9 154V166" stroke-width=".35"/><path d="M525.1 154V166" stroke-width=".35"/><path d="M528.3 154V166" stroke-width=".35"/><path d="M531.5 154V166" stroke-width=".35"/><path d="M534.7 154V166" stroke-width=".35"/><path d="M537.9 154V166" stroke-width=".35"/><path d="M541.1 154V166" stroke-width=".35"/><path d="M544.3 154V166" stroke-width=".35"/><path d="M547.5 154V166" stroke-width=".35"/><path d="M550.7 154V166" stroke-width=".35"/><path d="M553.9 154V166" stroke-width=".35"/><path d="M557.1 154V166" stroke-width=".35"/><path d="M560.3 154V166" stroke-width=".35"/><path d="M563.5 154V166" stroke-width=".35"/><path d="M566.7 154V166" stroke-width=".35"/><path d="M569.9 154V166" stroke-width=".35"/><rect x="78.3" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M90.8 98V124" stroke-width=".45"/><rect x="120.0" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M132.5 98V124" stroke-width=".45"/><rect x="161.7" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M174.2 98V124" stroke-width=".45"/><rect x="203.3" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M215.8 98V124" stroke-width=".45"/><rect x="245.0" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M257.5 98V124" stroke-width=".45"/><rect x="286.7" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M299.2 98V124" stroke-width=".45"/><rect x="328.3" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M340.8 98V124" stroke-width=".45"/><rect x="370.0" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M382.5 98V124" stroke-width=".45"/><rect x="411.7" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M424.2 98V124" stroke-width=".45"/><rect x="453.3" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M465.8 98V124" stroke-width=".45"/><rect x="495.0" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M507.5 98V124" stroke-width=".45"/><rect x="536.7" y="98" width="25.0" height="26" fill="var(--grund)"/><path d="M549.2 98V124" stroke-width=".45"/><rect x="109.7" y="128" width="87.3" height="3" fill="var(--grund)"/><path d="M109.7 116H197.0" stroke-width=".7"/><path d="M111.7 116V128" stroke-width=".35"/><path d="M114.9 116V128" stroke-width=".35"/><path d="M118.1 116V128" stroke-width=".35"/><path d="M121.3 116V128" stroke-width=".35"/><path d="M124.5 116V128" stroke-width=".35"/><path d="M127.7 116V128" stroke-width=".35"/><path d="M130.9 116V128" stroke-width=".35"/><path d="M134.1 116V128" stroke-width=".35"/><path d="M137.3 116V128" stroke-width=".35"/><path d="M140.5 116V128" stroke-width=".35"/><path d="M143.7 116V128" stroke-width=".35"/><path d="M146.9 116V128" stroke-width=".35"/><path d="M150.1 116V128" stroke-width=".35"/><path d="M153.3 116V128" stroke-width=".35"/><path d="M156.5 116V128" stroke-width=".35"/><path d="M159.7 116V128" stroke-width=".35"/><path d="M162.9 116V128" stroke-width=".35"/><path d="M166.1 116V128" stroke-width=".35"/><path d="M169.3 116V128" stroke-width=".35"/><path d="M172.5 116V128" stroke-width=".35"/><path d="M175.7 116V128" stroke-width=".35"/><path d="M178.9 116V128" stroke-width=".35"/><path d="M182.1 116V128" stroke-width=".35"/><path d="M185.3 116V128" stroke-width=".35"/><path d="M188.5 116V128" stroke-width=".35"/><path d="M191.7 116V128" stroke-width=".35"/><path d="M194.9 116V128" stroke-width=".35"/><rect x="234.7" y="128" width="87.3" height="3" fill="var(--grund)"/><path d="M234.7 116H322.0" stroke-width=".7"/><path d="M236.7 116V128" stroke-width=".35"/><path d="M239.9 116V128" stroke-width=".35"/><path d="M243.1 116V128" stroke-width=".35"/><path d="M246.3 116V128" stroke-width=".35"/><path d="M249.5 116V128" stroke-width=".35"/><path d="M252.7 116V128" stroke-width=".35"/><path d="M255.9 116V128" stroke-width=".35"/><path d="M259.1 116V128" stroke-width=".35"/><path d="M262.3 116V128" stroke-width=".35"/><path d="M265.5 116V128" stroke-width=".35"/><path d="M268.7 116V128" stroke-width=".35"/><path d="M271.9 116V128" stroke-width=".35"/><path d="M275.1 116V128" stroke-width=".35"/><path d="M278.3 116V128" stroke-width=".35"/><path d="M281.5 116V128" stroke-width=".35"/><path d="M284.7 116V128" stroke-width=".35"/><path d="M287.9 116V128" stroke-width=".35"/><path d="M291.1 116V128" stroke-width=".35"/><path d="M294.3 116V128" stroke-width=".35"/><path d="M297.5 116V128" stroke-width=".35"/><path d="M300.7 116V128" stroke-width=".35"/><path d="M303.9 116V128" stroke-width=".35"/><path d="M307.1 116V128" stroke-width=".35"/><path d="M310.3 116V128" stroke-width=".35"/><path d="M313.5 116V128" stroke-width=".35"/><path d="M316.7 116V128" stroke-width=".35"/><path d="M319.9 116V128" stroke-width=".35"/><rect x="359.7" y="128" width="87.3" height="3" fill="var(--grund)"/><path d="M359.7 116H447.0" stroke-width=".7"/><path d="M361.7 116V128" stroke-width=".35"/><path d="M364.9 116V128" stroke-width=".35"/><path d="M368.1 116V128" stroke-width=".35"/><path d="M371.3 116V128" stroke-width=".35"/><path d="M374.5 116V128" stroke-width=".35"/><path d="M377.7 116V128" stroke-width=".35"/><path d="M380.9 116V128" stroke-width=".35"/><path d="M384.1 116V128" stroke-width=".35"/><path d="M387.3 116V128" stroke-width=".35"/><path d="M390.5 116V128" stroke-width=".35"/><path d="M393.7 116V128" stroke-width=".35"/><path d="M396.9 116V128" stroke-width=".35"/><path d="M400.1 116V128" stroke-width=".35"/><path d="M403.3 116V128" stroke-width=".35"/><path d="M406.5 116V128" stroke-width=".35"/><path d="M409.7 116V128" stroke-width=".35"/><path d="M412.9 116V128" stroke-width=".35"/><path d="M416.1 116V128" stroke-width=".35"/><path d="M419.3 116V128" stroke-width=".35"/><path d="M422.5 116V128" stroke-width=".35"/><path d="M425.7 116V128" stroke-width=".35"/><path d="M428.9 116V128" stroke-width=".35"/><path d="M432.1 116V128" stroke-width=".35"/><path d="M435.3 116V128" stroke-width=".35"/><path d="M438.5 116V128" stroke-width=".35"/><path d="M441.7 116V128" stroke-width=".35"/><path d="M444.9 116V128" stroke-width=".35"/><rect x="484.7" y="128" width="87.3" height="3" fill="var(--grund)"/><path d="M484.7 116H572.0" stroke-width=".7"/><path d="M486.7 116V128" stroke-width=".35"/><path d="M489.9 116V128" stroke-width=".35"/><path d="M493.1 116V128" stroke-width=".35"/><path d="M496.3 116V128" stroke-width=".35"/><path d="M499.5 116V128" stroke-width=".35"/><path d="M502.7 116V128" stroke-width=".35"/><path d="M505.9 116V128" stroke-width=".35"/><path d="M509.1 116V128" stroke-width=".35"/><path d="M512.3 116V128" stroke-width=".35"/><path d="M515.5 116V128" stroke-width=".35"/><path d="M518.7 116V128" stroke-width=".35"/><path d="M521.9 116V128" stroke-width=".35"/><path d="M525.1 116V128" stroke-width=".35"/><path d="M528.3 116V128" stroke-width=".35"/><path d="M531.5 116V128" stroke-width=".35"/><path d="M534.7 116V128" stroke-width=".35"/><path d="M537.9 116V128" stroke-width=".35"/><path d="M541.1 116V128" stroke-width=".35"/><path d="M544.3 116V128" stroke-width=".35"/><path d="M547.5 116V128" stroke-width=".35"/><path d="M550.7 116V128" stroke-width=".35"/><path d="M553.9 116V128" stroke-width=".35"/><path d="M557.1 116V128" stroke-width=".35"/><path d="M560.3 116V128" stroke-width=".35"/><path d="M563.5 116V128" stroke-width=".35"/><path d="M566.7 116V128" stroke-width=".35"/><path d="M569.9 116V128" stroke-width=".35"/><path d="M70 168H570" stroke-width=".6"/><path d="M70 130H570" stroke-width=".6"/><path d="M66 92H574" stroke-width="1.6"/><rect x="66" y="87" width="508" height="5" fill="var(--grund)"/><path d="M84 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M111 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M138 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M165 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M192 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M219 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M246 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M273 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M300 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M327 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M354 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M381 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M408 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M435 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M462 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M489 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M516 86l20 -7h4l-20 7z" stroke-width=".55" fill="var(--flaeche)"/><path d="M38 252V194M38 212l-9 -10M38 204l8 -9" stroke-width=".8"/><circle cx="34.2" cy="176.8" r="4.1" stroke-width=".45" opacity=".7"/><circle cx="52.5" cy="176.1" r="3.4" stroke-width=".45" opacity=".7"/><circle cx="52.6" cy="174.4" r="2.6" stroke-width=".45" opacity=".7"/><circle cx="32.7" cy="170.7" r="2.7" stroke-width=".45" opacity=".7"/><circle cx="20.2" cy="178.5" r="2.8" stroke-width=".45" opacity=".7"/><circle cx="40.9" cy="187.8" r="4.9" stroke-width=".45" opacity=".7"/><circle cx="25.7" cy="160.6" r="4.9" stroke-width=".45" opacity=".7"/><circle cx="57.5" cy="174.8" r="3.2" stroke-width=".45" opacity=".7"/><circle cx="42.7" cy="174.8" r="3.3" stroke-width=".45" opacity=".7"/><circle cx="41.8" cy="158.2" r="4.0" stroke-width=".45" opacity=".7"/><circle cx="29.4" cy="156.2" r="3.9" stroke-width=".45" opacity=".7"/><circle cx="43.0" cy="170.4" r="3.0" stroke-width=".45" opacity=".7"/><circle cx="31.9" cy="153.0" r="3.3" stroke-width=".45" opacity=".7"/><circle cx="25.3" cy="159.3" r="3.2" stroke-width=".45" opacity=".7"/><circle cx="43.1" cy="147.7" r="3.1" stroke-width=".45" opacity=".7"/><circle cx="23.8" cy="159.7" r="4.7" stroke-width=".45" opacity=".7"/><circle cx="36.5" cy="154.5" r="5.0" stroke-width=".45" opacity=".7"/><circle cx="48.5" cy="179.1" r="4.4" stroke-width=".45" opacity=".7"/><circle cx="46.9" cy="182.4" r="2.6" stroke-width=".45" opacity=".7"/><circle cx="28.5" cy="148.7" r="3.9" stroke-width=".45" opacity=".7"/><circle cx="46.7" cy="158.0" r="4.2" stroke-width=".45" opacity=".7"/><circle cx="24.1" cy="157.2" r="3.6" stroke-width=".45" opacity=".7"/><circle cx="49.5" cy="147.2" r="3.7" stroke-width=".45" opacity=".7"/><circle cx="35.2" cy="162.7" r="4.3" stroke-width=".45" opacity=".7"/><circle cx="24.8" cy="147.9" r="4.6" stroke-width=".45" opacity=".7"/><circle cx="35.1" cy="183.3" r="4.2" stroke-width=".45" opacity=".7"/><circle cx="52.8" cy="170.4" r="2.9" stroke-width=".45" opacity=".7"/><circle cx="42.0" cy="172.1" r="4.4" stroke-width=".45" opacity=".7"/><circle cx="45.5" cy="177.1" r="3.5" stroke-width=".45" opacity=".7"/><circle cx="42.3" cy="162.8" r="3.6" stroke-width=".45" opacity=".7"/><circle cx="18.3" cy="160.7" r="4.5" stroke-width=".45" opacity=".7"/><circle cx="45.6" cy="157.9" r="3.5" stroke-width=".45" opacity=".7"/><circle cx="24.9" cy="186.4" r="4.9" stroke-width=".45" opacity=".7"/><circle cx="43.4" cy="176.6" r="3.1" stroke-width=".45" opacity=".7"/><circle cx="39.6" cy="185.5" r="4.0" stroke-width=".45" opacity=".7"/><circle cx="37.9" cy="169.6" r="3.5" stroke-width=".45" opacity=".7"/><circle cx="26.7" cy="181.9" r="4.9" stroke-width=".45" opacity=".7"/><circle cx="32.2" cy="151.1" r="4.0" stroke-width=".45" opacity=".7"/><circle cx="35.7" cy="162.7" r="4.7" stroke-width=".45" opacity=".7"/><circle cx="41.9" cy="144.8" r="4.5" stroke-width=".45" opacity=".7"/><circle cx="27.2" cy="178.0" r="2.8" stroke-width=".45" opacity=".7"/><circle cx="34.4" cy="163.3" r="2.7" stroke-width=".45" opacity=".7"/><circle cx="40.3" cy="177.9" r="3.4" stroke-width=".45" opacity=".7"/><circle cx="38.3" cy="168.1" r="2.9" stroke-width=".45" opacity=".7"/><circle cx="48.7" cy="177.1" r="2.6" stroke-width=".45" opacity=".7"/><circle cx="50.1" cy="153.9" r="2.9" stroke-width=".45" opacity=".7"/><circle cx="600" cy="234.5" r="1.9" stroke-width=".7"/><path d="M600 236.5V245M600 245l-2 7M600 245l2 7M600 239l-3 5M600 239l3 5" stroke-width=".7"/></g><g font-size="7.5" fill="currentColor" font-family="inherit" letter-spacing=".02em"><path d="M584 252H594" stroke="currentColor" stroke-width=".6" vector-effect="non-scaling-stroke"/><path d="M589 252l-3 -4h6z" fill="currentColor"/><text x="598" y="254.6">±0.00</text><path d="M584 206H594" stroke="currentColor" stroke-width=".6" vector-effect="non-scaling-stroke"/><path d="M589 206l-3 -4h6z" fill="currentColor"/><text x="598" y="208.6">+3.20</text><path d="M584 92H594" stroke="currentColor" stroke-width=".6" vector-effect="non-scaling-stroke"/><path d="M589 92l-3 -4h6z" fill="currentColor"/><text x="598" y="94.6">+12.80</text></g></svg>
<figcaption class="meta"><span>Ansicht Süd</span><span>ohne Massstab</span></figcaption>
</figure>
<dl class="kenndaten" data-gd>
<div><dt>Bauherrschaft</dt><dd>Wohnbau­genossenschaft Aarefeld</dd></div>
<div><dt>Ort</dt><dd>Lerchenfeld, 3600 Thun</dd></div>
<div><dt>Typologie</dt><dd>Wohnen, 24 Wohnungen <em>2½ bis 5½ Zimmer</em></dd></div>
<div><dt>Verfahren</dt><dd>Offener Wettbewerb 2020, 1. Rang</dd></div>
<div><dt>Leistungen</dt><dd>SIA-Phasen 31 bis 53</dd></div>
<div><dt>Geschossfläche</dt><dd>3 480 m²</dd></div>
<div><dt>Bauzeit</dt><dd>2023 bis 2025</dd></div>
<div><dt>Tragwerk</dt><dd>Holzbau auf Sockel aus Recyclingbeton</dd></div>
<div><dt>Energie</dt><dd>Fernwärme, Photovoltaik auf dem Dach</dd></div>
</dl>
</article>
<!-- Variante 2: Werkverzeichnis mit Filter -->
<section class="variante v-werkliste werk" data-variante="werkliste" aria-labelledby="werk-titel" hidden>
<div class="listenkopf">
<h2 id="werk-titel">Werkverzeichnis <em>2017 bis 2025</em></h2>
<p>Wettbewerbe, Neubauten und Umbauten im Thuner Westamt und am rechten Seeufer. Laufende Projekte sind markiert.</p>
<div class="filter" role="group" aria-label="Nach Typologie filtern">
<button type="button" data-typ="alle" aria-pressed="true">Alle<sup>18</sup></button>
<button type="button" data-typ="wohnen" aria-pressed="false">Wohnen<sup>7</sup></button>
<button type="button" data-typ="bildung" aria-pressed="false">Bildung<sup>4</sup></button>
<button type="button" data-typ="kultur" aria-pressed="false">Kultur<sup>3</sup></button>
<button type="button" data-typ="umbau" aria-pressed="false">Umbau<sup>4</sup></button>
</div>
<p class="trefferzahl meta" aria-live="polite"><b data-treffer>18</b> Projekte</p>
</div>
<div class="tabkopf meta" aria-hidden="true"><span>Nr.</span><span>Projekt</span><span>Ort</span><span>Typologie</span><span class="k-stand">Stand</span><span class="k-jahr">Jahr</span></div>
<ol class="werkliste" data-gd>
<li data-typ="wohnen"><a href="#"><span class="nr">31</span><span class="titel">Wohnhaus Lerchenfeld</span><span class="info"><span>Thun</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2025</span></a></li>
<li data-typ="bildung"><a href="#"><span class="nr">30</span><span class="titel">Schulhaus Gwatt, Erweiterung</span><span class="info"><span>Thun</span><span>Bildung</span><span class="stand" data-stand="bau">Im Bau</span></span><span class="jahr">2026</span></a></li>
<li data-typ="umbau"><a href="#"><span class="nr">29</span><span class="titel">Altstadthaus Obere Hauptgasse</span><span class="info"><span>Thun</span><span>Umbau</span><span class="stand">Fertig</span></span><span class="jahr">2024</span></a></li>
<li data-typ="bildung"><a href="#"><span class="nr">28</span><span class="titel">Musikschule am Zulggraben</span><span class="info"><span>Steffisburg</span><span>Bildung</span><span class="stand">Fertig</span></span><span class="jahr">2024</span></a></li>
<li data-typ="wohnen"><a href="#"><span class="nr">27</span><span class="titel">Siedlung Allmendingen</span><span class="info"><span>Thun</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2023</span></a></li>
<li data-typ="kultur"><a href="#"><span class="nr">26</span><span class="titel">Garderobenhaus der Seebühne</span><span class="info"><span>Spiez</span><span>Kultur</span><span class="stand">Fertig</span></span><span class="jahr">2023</span></a></li>
<li data-typ="umbau"><a href="#"><span class="nr">25</span><span class="titel">Bauernhaus Goldiwil</span><span class="info"><span>Thun</span><span>Umbau</span><span class="stand">Fertig</span></span><span class="jahr">2022</span></a></li>
<li data-typ="bildung"><a href="#"><span class="nr">24</span><span class="titel">Kindergarten Dürrenast</span><span class="info"><span>Thun</span><span>Bildung</span><span class="stand">Fertig</span></span><span class="jahr">2022</span></a></li>
<li data-typ="wohnen"><a href="#"><span class="nr">23</span><span class="titel">Wohn- und Atelierhaus am See</span><span class="info"><span>Oberhofen</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2021</span></a></li>
<li data-typ="kultur"><a href="#"><span class="nr">22</span><span class="titel">Ausstellungspavillon Scherzligen</span><span class="info"><span>Thun</span><span>Kultur</span><span class="stand">Wettbewerb, 2. Rang</span></span><span class="jahr">2021</span></a></li>
<li data-typ="wohnen"><a href="#"><span class="nr">21</span><span class="titel">Mehrfamilienhaus Hünibach</span><span class="info"><span>Hilterfingen</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2020</span></a></li>
<li data-typ="umbau"><a href="#"><span class="nr">20</span><span class="titel">Pfarrhaus Amsoldingen</span><span class="info"><span>Amsoldingen</span><span>Umbau</span><span class="stand">Fertig</span></span><span class="jahr">2020</span></a></li>
<li data-typ="bildung"><a href="#"><span class="nr">19</span><span class="titel">Turnhalle Uetendorf</span><span class="info"><span>Uetendorf</span><span>Bildung</span><span class="stand">Fertig</span></span><span class="jahr">2019</span></a></li>
<li data-typ="wohnen"><a href="#"><span class="nr">18</span><span class="titel">Genossenschaft Hofstetten</span><span class="info"><span>Thun</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2019</span></a></li>
<li data-typ="kultur"><a href="#"><span class="nr">17</span><span class="titel">Gemeindebibliothek Heimberg</span><span class="info"><span>Heimberg</span><span>Kultur</span><span class="stand">Wettbewerb, Ankauf</span></span><span class="jahr">2018</span></a></li>
<li data-typ="wohnen"><a href="#"><span class="nr">16</span><span class="titel">Ferienhaus Sigriswil</span><span class="info"><span>Sigriswil</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2018</span></a></li>
<li data-typ="umbau"><a href="#"><span class="nr">15</span><span class="titel">Remise im Schwäbis</span><span class="info"><span>Thun</span><span>Umbau</span><span class="stand">Fertig</span></span><span class="jahr">2017</span></a></li>
<li data-typ="wohnen"><a href="#"><span class="nr">14</span><span class="titel">Reihenhäuser Strättligen</span><span class="info"><span>Thun</span><span>Wohnen</span><span class="stand">Fertig</span></span><span class="jahr">2017</span></a></li>
</ol>
<p class="leer" data-leer hidden>In dieser Typologie gibt es noch keine Projekte.</p>
</section>
<!-- Variante 3: Visitenkarte im Footer -->
<section class="variante v-karte" data-variante="karte" aria-labelledby="karte-titel" hidden>
<div class="kartenkopf">
<div>
<p class="meta">Kontakt</p>
<h2 id="karte-titel">Wir planen in Thun, <em>für das ganze Oberland.</em></h2>
</div>
<figure class="lage" aria-labelledby="lage-text">
<svg viewBox="0 0 420 260" aria-hidden="true">
<defs><clipPath id="see"><path d="M252 214 C 282 200, 320 186, 352 168 C 380 152, 400 140, 420 128 L420 260 L330 260 C 300 252, 272 244, 258 236 C 246 229, 244 220, 252 214 Z"/></clipPath></defs>
<g fill="none" stroke="currentColor" stroke-width="1" vector-effect="non-scaling-stroke">
<g clip-path="url(#see)" opacity=".28"><path d="M230 140H420"/><path d="M230 146H420"/><path d="M230 152H420"/><path d="M230 158H420"/><path d="M230 164H420"/><path d="M230 170H420"/><path d="M230 176H420"/><path d="M230 182H420"/><path d="M230 188H420"/><path d="M230 194H420"/><path d="M230 200H420"/><path d="M230 206H420"/><path d="M230 212H420"/><path d="M230 218H420"/><path d="M230 224H420"/><path d="M230 230H420"/><path d="M230 236H420"/><path d="M230 242H420"/><path d="M230 248H420"/><path d="M230 254H420"/><path d="M230 260H420"/></g>
<path d="M252 214 C 282 200, 320 186, 352 168 C 380 152, 400 140, 420 128 M420 260 L330 260 C 300 252, 272 244, 258 236 C 246 229, 244 220, 252 214" opacity=".55"/>
<path d="M252 222 C 214 204, 186 176, 150 150 S 80 92, 0 62" stroke-width="18" stroke="rgba(242,242,240,.09)" vector-effect="none"/>
<path d="M252 222 C 214 204, 186 176, 150 150 S 80 92, 0 62" opacity=".22" stroke-dasharray="1 6"/>
<ellipse cx="172" cy="166" rx="27" ry="4.2" transform="rotate(37 172 166)" fill="var(--dunkel)" opacity=".85"/>
<circle cx="172" cy="166" r="3.6" fill="currentColor" stroke="none"/>
<circle cx="172" cy="166" r="11" opacity=".4"/>
<path d="M398 24 V 54 M398 18 l-5 11 h10 z" opacity=".6"/>
</g>
<g fill="currentColor" font-size="11" letter-spacing=".01em">
<text x="190" y="186" opacity=".92">Bälliz 41</text>
<text x="336" y="226" opacity=".55" font-style="italic">Thunersee</text>
<text x="44" y="104" opacity=".55" font-style="italic">Aare</text>
<text x="394" y="68" opacity=".6" font-size="9">N</text>
</g>
</svg>
<figcaption class="meta" id="lage-text">Lage schematisch: Büro auf der Bälliz-Insel zwischen den beiden Aarearmen, fünf Gehminuten vom Bahnhof Thun.</figcaption>
</figure>
</div>
<div class="kartenrahmen" data-kartenrahmen>
<p class="meta"><span>Büro</span><span data-breite-anzeige></span></p>
<address class="karte" data-gd>
<span>Aaregg Architekten AG</span>
<span>Bälliz 41, 3600 Thun</span>
<a href="tel:+41332231840">+41 33 223 18 40</a>
<a href="mailto:buero@aaregg-architekten.ch">buero@aaregg-architekten.ch</a>
<span>Mo bis Fr, 8 bis 12 und 13.30 bis 17 Uhr</span>
<span>Mitglied SIA, REG A</span>
</address>
<ul class="links" data-gd aria-label="Weitere Seiten">
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Offene Stellen</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Barrierefreiheit</a></li>
</ul>
</div>
<div class="fuss meta"><span>© 2026 Aaregg Architekten AG</span><span>Handelsregister des Kantons Bern</span></div>
</section>
</main>
<div class="pult" role="region" aria-label="Steuerung der Demo">
<div class="zeile" role="group" aria-label="Variante">
<span>Variante</span>
<button type="button" data-v="kenndaten" aria-pressed="true">Kenndaten</button>
<button type="button" data-v="werkliste" aria-pressed="false">Werkliste</button>
<button type="button" data-v="karte" aria-pressed="false">Visitenkarte</button>
</div>
<div class="zeile" role="group" aria-label="Linien">
<span>Linien</span>
<button type="button" data-weg="nativ" aria-pressed="true">Gap Decorations</button>
<button type="button" data-weg="ersatz" aria-pressed="false">Ersatz</button>
<span class="status" data-status></span>
</div>
<label class="zeile" data-nur="karte"><span>Breite</span><input type="range" min="36" max="100" value="100" data-breite></label>
<p class="werte" data-werte aria-live="polite"></p>
</div>
<script>
(() => {
const html = document.documentElement;
const reduziert = () => html.classList.contains('reduziert');
const $ = (s, w = document) => w.querySelector(s), $$ = (s, w = document) => [...w.querySelectorAll(s)];
const VARIANTEN = ['kenndaten', 'werkliste', 'karte'];
const kannNativ = window.CSS && CSS.supports('row-rule', '1px solid') && CSS.supports('rule-break', 'intersection');
html.classList.toggle('gd-nativ', !!kannNativ);
const WERTE = {
kenndaten: 'rule: 1px solid #c5c7c7 · rule-break: intersection · Kreuzungslücke 10px, Hover 0 + #231f20 in 250 ms · Aufziehen 750 ms cubic-bezier(0.1, 0.9, 0.3, 1)',
werkliste: 'row-rule-width: repeat(4, 1px), 2px · row-rule-color: repeat(4, #d9dbdb), #231f20 · Filter zählt die Linien neu · Aufziehen 750 ms',
karte: 'flex-wrap + column-rule: 1px solid rgba(242,242,240,.26) · Striche nur zwischen Elementen derselben Zeile · Breite 1200 ms'
};
/* Variante aus der URL (?v=), Umschalter schreibt sie zurück */
let v = new URLSearchParams(location.search).get('v');
if (!VARIANTEN.includes(v)) v = VARIANTEN[0];
function aufziehen() {
if (reduziert()) return;
$$('[data-gd]', $(`[data-variante="${v}"]`)).forEach(el => { el.classList.remove('zieht'); void el.offsetWidth; el.classList.add('zieht'); });
}
function werte() {
const weg = html.classList.contains('gd-ersatz') || !kannNativ ? 'Ersatz: ::before/::after + overflow: clip' : 'nativ';
$('[data-werte]').textContent = `${WERTE[v]} · Weg: ${weg}`;
}
function setzeVariante(neu, url = true) {
v = neu;
$$('[data-variante]').forEach(s => { s.hidden = s.dataset.variante !== v; });
$$('[data-v]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.v === v)));
$$('[data-nur]').forEach(el => { el.hidden = el.dataset.nur !== v; });
if (url) {
const q = new URLSearchParams(location.search); q.set('v', v);
history.replaceState(null, '', location.pathname + '?' + q.toString().replace(/=(?=&|$)/g, '') + location.hash);
}
werte(); aufziehen();
}
$$('[data-v]').forEach(b => b.addEventListener('click', () => { pause(); setzeVariante(b.dataset.v); }));
/* Nativ oder Ersatz (zum Vergleichen) */
function setzeWeg(weg) {
html.classList.toggle('gd-ersatz', weg === 'ersatz');
$$('[data-weg]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.weg === weg)));
werte(); aufziehen();
}
const status = $('[data-status]');
status.innerHTML = kannNativ ? 'Browser: <b>nativ</b>' : 'Browser: <b>kein Support</b>, Ersatz aktiv';
$$('[data-weg]').forEach(b => {
if (b.dataset.weg === 'nativ' && !kannNativ) { b.disabled = true; b.title = 'Dieser Browser kennt row-rule und column-rule noch nicht'; }
b.addEventListener('click', () => setzeWeg(b.dataset.weg));
});
if (!kannNativ || new URLSearchParams(location.search).has('ersatz')) setzeWeg('ersatz');
/* Werkliste: Filter blendet Zeilen aus; die Linien sitzen in den Lücken und zählen neu */
const liste = $('.werkliste'), zeilen = $$('li', liste), treffer = $('[data-treffer]'), leer = $('[data-leer]');
function filtern(typ) {
const tun = () => {
let n = 0;
zeilen.forEach(li => { const an = typ === 'alle' || li.dataset.typ === typ; li.hidden = !an; n += an; });
treffer.textContent = n; leer.hidden = n > 0;
$$('[data-typ]', $('.filter')).forEach(b => b.setAttribute('aria-pressed', String(b.dataset.typ === typ)));
};
if (document.startViewTransition && !reduziert() && !$('.v-werkliste').hidden) document.startViewTransition(tun); else tun();
}
$$('.filter button').forEach(b => b.addEventListener('click', () => { pause(); filtern(b.dataset.typ); }));
/* Visitenkarte: Breite ändern, Umbruch beobachten */
const rahmen = $('[data-kartenrahmen]'), regler = $('[data-breite]'), anzeige = $('[data-breite-anzeige]');
function breite(p) { rahmen.style.setProperty('--breite', p + '%'); regler.value = p; anzeige.textContent = `Breite ${p} %`; }
regler.addEventListener('input', () => { pause(); breite(+regler.value); });
breite(100);
const menue = $('.menue'), nav = $('.kopf nav');
menue.addEventListener('click', () => { const auf = nav.classList.toggle('offen'); menue.setAttribute('aria-expanded', String(auf)); });
/* Kenndaten auf Touch: Tippen zeigt den Hover-Zustand */
const kd = $('.kenndaten');
kd.addEventListener('click', () => { if (matchMedia('(hover: none)').matches) kd.classList.toggle('zeigen'); });
/* Vorführung je Variante in einer Schleife */
let uhren = [];
const spaeter = (ms, f) => uhren.push(setTimeout(f, ms));
function pause() { uhren.forEach(clearTimeout); uhren = []; kd.classList.remove('zeigen'); }
function vorfuehren() {
pause();
scrollTo(0, 0);
if (v === 'kenndaten') {
aufziehen();
spaeter(1500, () => kd.classList.add('zeigen'));
spaeter(3300, () => kd.classList.remove('zeigen'));
spaeter(4800, vorfuehren);
} else if (v === 'werkliste') {
filtern('alle'); aufziehen();
spaeter(1700, () => filtern('wohnen'));
spaeter(3400, () => filtern('bildung'));
spaeter(5100, () => filtern('umbau'));
spaeter(6800, () => filtern('alle'));
spaeter(8400, vorfuehren);
} else {
breite(100); aufziehen();
spaeter(1300, () => breite(58));
spaeter(3300, () => breite(40));
spaeter(5100, () => breite(100));
spaeter(7000, vorfuehren);
}
}
function neustart() { pause(); scrollTo(0, 0); if (v === 'werkliste') filtern('alle'); if (v === 'karte') breite(100); aufziehen(); }
function weiter() { vorfuehren(); }
setzeVariante(v, false);
})();
</script>
</body>
</html>