Akkordeon mit Höhenanimation auf auto
Akkordeon-Einträge gleiten auf ihre natürliche Höhe auf, ohne JavaScript-Messung: per Grid 0fr → 1fr, interpolate-size oder calc-size.
Kurzes FAQ oder Leistungsdetails mit fünf bis acht Einträgen und einem Bild je Antwort; zeigt die drei CSS-Techniken am nativen <details> mit ::details-content.
- Akkordeon-Einträge öffnen sich mit weicher Höhenanimation von 0 auf die natürliche Höhe, ohne Messung per JavaScript.
- Drei Wege: ::details-content als Grid mit grid-template-rows 0fr → 1fr, interpolate-size: allow-keywords für Transitions auf height: auto oder calc-size(auto, size).
- Das Plus dreht sich zum Kreuz, der Inhalt blendet etwas länger ein, als die Höhe braucht.
- Mit <details name="gruppe"> ist immer nur ein Eintrag offen.
Lange galt: height: auto lässt sich nicht animieren. Jetzt geht es in CSS. Der Inhalt schiebt die Nachbarn sichtbar weg, statt zu springen. So bleibt klar, woher er kommt.
Wann einsetzen
FAQ, Leistungsdetails, „Mehr anzeigen“, Filter-Panels, mobile Navigation.
Wann nicht
Bei sehr langem Inhalt wirkt die Animation zäh: Dauer begrenzen oder ganz weglassen. Wenn Inhalte über die Seitensuche auffindbar sein müssen: <details> oder hidden="until-found" nutzen, keine eigene Lösung mit display: none.
Varianten
- ::details-content als Grid, grid-template-rows 0fr → 1fr (Cuberto; läuft auch in Safari 18.4+)
- block-size 0 → auto mit interpolate-size: allow-keywords auf :root (Webflow, Chrome-Leitfaden)
- height 0 → calc-size(auto, size) innerhalb von @supports, ohne globale Einstellung (Pangram Pangram); calc-size erlaubt auch Rechnungen wie calc-size(max-content, size + 20px)
- FAQ mit Suche und Sprunglinks: Suchfeld filtert live, Treffer per ::highlight() markiert, Themen-Anker und Direktlink je Frage; Filtern als element-scoped View Transition (Chrome 147+)
- Leistungsliste mit Bild: immer ein Eintrag offen, das Bild daneben wechselt per element-scoped View Transition; auf dem Telefon wandert es in den offenen Eintrag
- Akkordeon mit Motion (JS, Vue, Radix)
- Horizontales Panel-Akkordeon (siehe Layouts: akkordeon-panels-horizontal)
Umsetzung
Grid: details::details-content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease-out, opacity .4s ease-out, content-visibility .3s allow-discrete } details[open]::details-content { grid-template-rows: 1fr; opacity: 1 }. Das Kind braucht min-height: 0 und overflow: hidden, Polster gehört ins Innere.
interpolate-size: :root { interpolate-size: allow-keywords } details::details-content { block-size: 0; overflow: clip; transition: block-size .5s ease-in-out, content-visibility .5s allow-discrete } details[open]::details-content { block-size: auto; transition-duration: .4s; transition-timing-function: ease-out }. Die Transition am Zielzustand bestimmt die Richtung: auf 400 ms ease-out, zu 500 ms ease-in-out.
calc-size: in @supports (height: calc-size(auto, size)) height: 0 → calc-size(auto, size).
Icon: summary .zeichen { transition: rotate .3s ease-out } details[open] .zeichen { rotate: 45deg }. Exklusiv: <details name="faq">. Browser ohne Unterstützung klappen ohne Animation, die Funktion bleibt. Bei großen Inhalten höchstens 400 bis 500 ms.
Robust umsetzen
Telefon. Identisch. Große Trefferfläche für die ganze Summary-Zeile, Nebeninfos ausblenden.
Ohne Bewegung. transition: none: sofortiges Auf und Zu. Achtung: ::details-content wird von * nicht erfasst, die Regel braucht einen eigenen Selektor.
Barrierefrei. <details>/<summary> liefert Semantik und Tastaturbedienung. Bei eigenem Markup: button mit aria-expanded und aria-controls. Eingeklappter Inhalt darf nicht fokussierbar sein (hidden oder inert). Fokus auf der Summary sichtbar machen.
Code
<!DOCTYPE html>
<!--
Akkordeon mit Höhenanimation auf auto
Fundus · Mikroanimationen · https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/
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>Akkordeon mit Höhenanimation auf auto · 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: 'Bricolage Grotesque'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/bricolage-grotesque:vf@latest/latin-standard-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible-next:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 200 800; 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; }
@font-face { font-family: 'Geist'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@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-display: swap; }
/* Rezept „Fahrschule: freundlich und buchbar“: Navy für Text, Himmelblau sekundär, Kennzeichen-Gelb nur als Fläche */
:root {
--grund: #eef3f7; /* kühles Hellgrau, Fahrbahnmarkierung statt Creme */
--karte: #ffffff;
--navy: #142b50; --nacht: #0e1d38; --himmel: #3fbadf; --himmel-hell: #d6eef7; --gelb: #ffd60a;
--leise: #566175; --linie: rgba(20, 43, 80, .14);
/* gemessen (Cuberto, Chrome-Leitfaden) */
--aus: cubic-bezier(0, 0, 0.58, 1); /* ease-out */
--inaus: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out, nur Zuklappen in Variante interpolate-size */
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--navy); font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100svh; }
.welt--basis { min-height: 100svh; padding: clamp(20px, 4.5vw, 64px); display: grid; align-content: center; }
[hidden] { display: none !important; }
.mono { font: 500 11px/1.35 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.bg { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
.buehne { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
/* ── Einleitung: Marke, Frage, nächster Schritt ───────────── */
.einleitung { position: sticky; top: 32px; display: grid; gap: 24px; justify-items: start; }
.marke { display: flex; align-items: center; gap: 12px; }
.marke svg { width: 38px; height: 38px; flex: none; }
.marke b { display: block; font: 700 17px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; font-variation-settings: 'opsz' 24; }
.marke span { display: block; margin-top: 3px; }
.einleitung h1 { font: 700 clamp(40px, 4.9vw, 74px)/.98 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; font-optical-sizing: auto; hyphens: auto; text-wrap: balance; }
.einleitung h1 mark { background: var(--gelb); color: var(--navy); padding: 0 .12em; margin: 0 -.04em; border-radius: .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.einleitung p.lead { font-size: 18px; line-height: 1.6; color: var(--leise); max-width: 32ch; }
.einleitung p.lead b { color: var(--navy); font-weight: 650; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--gelb); color: var(--navy); text-decoration: none; font: 700 16px/1 'Atkinson Hyperlegible Next', sans-serif; padding: 15px 22px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--navy); transition: translate .15s var(--aus); }
.knopf:hover { translate: 0 -2px; }
.knopf:focus-visible { outline: 3px solid var(--himmel); outline-offset: 3px; }
.knopf-text { color: var(--navy); font-size: 15px; text-decoration: underline; text-decoration-color: var(--himmel); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Kennzeichen als Bildzeichen (Bricolage mit schmaler Breitenachse) */
.schild { display: inline-flex; align-items: stretch; height: 54px; border: 2.5px solid var(--nacht); border-radius: 8px; background: #fff; overflow: hidden; rotate: -3deg; box-shadow: 0 14px 28px -16px rgba(14, 29, 56, .45); margin-top: 4px; }
.schild .eu { width: 30px; background: #2a52be; color: #fff; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 6px 0 5px; font: 700 14px/1 'Bricolage Grotesque', sans-serif; }
.schild .eu svg { width: 18px; height: 18px; }
.schild .kz { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 12px; font: 650 38px/1 'Bricolage Grotesque', sans-serif; font-stretch: 75%; font-variation-settings: 'opsz' 48; letter-spacing: .02em; color: var(--nacht); }
.schild .plaketten { display: grid; gap: 4px; }
.schild .plaketten i { width: 13px; height: 13px; border-radius: 50%; background: var(--gelb); box-shadow: inset 0 0 0 2px #c79a00; }
.schild .plaketten i + i { background: #e9edf2; box-shadow: inset 0 0 0 2px #9aa4b2; }
/* ── Akkordeon ─────────────────────────────────────────── */
.liste { border-bottom: 1.5px solid var(--linie); }
.eintrag { border-top: 1.5px solid var(--linie); }
.eintrag summary {
list-style: none; cursor: pointer; position: relative;
display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto 36px; align-items: center; gap: 16px;
padding: clamp(16px, 1.8vw, 22px) 0; outline: none;
}
.eintrag summary::-webkit-details-marker { display: none; }
.eintrag .nr { justify-self: start; padding: 5px 7px 4px; border-radius: 6px; color: var(--leise); transition: background-color .3s var(--aus), color .3s var(--aus); }
.eintrag .titel { font: 600 clamp(20px, 2.05vw, 30px)/1.12 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; font-optical-sizing: auto; text-wrap: balance; transition: translate .15s var(--aus); }
.eintrag .art { font-size: 14px; color: var(--leise); white-space: nowrap; }
.eintrag summary:focus-visible .titel { text-decoration: underline; text-decoration-color: var(--himmel); text-decoration-thickness: 3px; text-underline-offset: .16em; }
@media (hover: hover) { .eintrag summary:hover .titel { translate: 6px 0; } }
/* Plus dreht zum Kreuz: 300 ms, dieselbe Kurve */
.zeichen { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--linie); background: var(--karte); transition: background-color .3s var(--aus), border-color .3s var(--aus), rotate .3s var(--aus); }
.zeichen::before, .zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--navy); transition: background-color .3s var(--aus); }
.zeichen::after { rotate: 90deg; }
.eintrag[open] .zeichen { rotate: 45deg; background: var(--navy); border-color: var(--navy); }
.eintrag[open] .zeichen::before, .eintrag[open] .zeichen::after { background: #fff; }
.eintrag[open] .nr { background: var(--gelb); color: var(--navy); } /* Gelb als Fläche hinter dunklem Text */
/* Inhalt: Polster nur innen, damit 0fr bzw. Höhe 0 wirklich 0 ist */
.inhalt { min-height: 0; overflow: hidden; }
.innen { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 16vw, 220px); gap: clamp(18px, 3vw, 40px); padding: 0 0 clamp(22px, 2.6vw, 30px) calc(3.4em + 16px); }
.innen p { font-size: 17px; line-height: 1.6; max-width: 46ch; }
.innen dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin-top: 18px; align-items: baseline; }
.innen dd { font-size: 15px; font-variant-numeric: tabular-nums; }
.innen dd b { font-weight: 700; }
.bild { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; display: block; overflow: hidden; }
.bild svg { width: 100%; height: 100%; display: block; }
.bild text { font-family: 'Bricolage Grotesque', sans-serif; }
/* Technik 1 · Grid (gemessen bei Cuberto): ::details-content wird Grid, Zeile 0fr → 1fr.
Werte als Variablen, damit jede Variante ihre Rezept-Kurve einsetzen kann; Vorgabe = Grundvariante. */
[data-liste][data-technik="grid"] details::details-content {
display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows var(--zu-ms, .3s) var(--zu-kurve, var(--aus)), opacity var(--zu-ms, .3s) var(--zu-kurve, var(--aus)), content-visibility var(--zu-ms, .3s) allow-discrete;
}
[data-liste][data-technik="grid"] details[open]::details-content {
grid-template-rows: 1fr; opacity: 1;
transition: grid-template-rows var(--auf-ms, .3s) var(--auf-kurve, var(--aus)), opacity var(--deck-ms, .4s) var(--auf-kurve, var(--aus)), content-visibility var(--auf-ms, .3s) allow-discrete;
}
/* Basis: Deckkraft auch beim Zuklappen 400 ms wie gemessen */
.welt--basis [data-liste][data-technik="grid"] details::details-content { transition: grid-template-rows .3s var(--aus), opacity .4s var(--aus), content-visibility .3s allow-discrete; }
/* Technik 2 · interpolate-size (Chrome-Leitfaden): auf 400 ms ease-out, zu 500 ms ease-in-out */
@supports (interpolate-size: allow-keywords) {
[data-liste][data-technik="interpolate"] { interpolate-size: allow-keywords; } /* im Einsatz: auf :root */
[data-liste][data-technik="interpolate"] details::details-content {
block-size: 0; overflow: clip;
transition: block-size var(--i-zu-ms, .5s) var(--i-zu-kurve, var(--inaus)), content-visibility var(--i-zu-ms, .5s) allow-discrete;
}
[data-liste][data-technik="interpolate"] details[open]::details-content {
block-size: auto;
transition: block-size var(--i-auf-ms, .4s) var(--auf-kurve, var(--aus)), content-visibility var(--i-auf-ms, .4s) allow-discrete;
}
}
/* Technik 3 · calc-size (Pangram Pangram): nur mit @supports, ohne globales interpolate-size */
@supports (height: calc-size(auto, size)) {
[data-liste][data-technik="calc"] details::details-content {
height: 0; overflow: clip; opacity: 0;
transition: height var(--zu-ms, .3s) var(--zu-kurve, var(--aus)), opacity var(--zu-ms, .3s) var(--zu-kurve, var(--aus)), content-visibility var(--zu-ms, .3s) allow-discrete;
}
[data-liste][data-technik="calc"] details[open]::details-content {
height: calc-size(auto, size); opacity: 1;
transition: height var(--auf-ms, .3s) var(--auf-kurve, var(--aus)), opacity var(--deck-ms, .4s) var(--auf-kurve, var(--aus)), content-visibility var(--auf-ms, .3s) allow-discrete;
}
.welt--basis [data-liste][data-technik="calc"] details::details-content { transition: height .3s var(--aus), opacity .4s var(--aus), content-visibility .3s allow-discrete; }
}
/* Ohne Unterstützung fallen 2 und 3 auf das Grid zurück */
@supports not (interpolate-size: allow-keywords) {
[data-liste]:is([data-technik="interpolate"], [data-technik="calc"]) details::details-content {
display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows var(--zu-ms, .3s) var(--zu-kurve, var(--aus)), opacity var(--deck-ms, .4s) var(--zu-kurve, var(--aus)), content-visibility var(--zu-ms, .3s) allow-discrete;
}
[data-liste]:is([data-technik="interpolate"], [data-technik="calc"]) details[open]::details-content { grid-template-rows: 1fr; opacity: 1; transition-duration: var(--auf-ms, .3s), var(--deck-ms, .4s), var(--auf-ms, .3s); }
}
/* ── Kopf der Grundvariante ──────────────────────────── */
.steuerung { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 20px; }
.kopf { display: flex; align-items: baseline; gap: 14px; }
.kopf h2 { font: 700 15px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -.005em; }
/* ── Pult: Variante, Technik, exklusiv, Werte (dezent, Geist Mono) ── */
.pult { position: fixed; z-index: 30; right: 14px; bottom: 14px; width: min(440px, calc(100vw - 28px)); display: grid; gap: 8px; padding: 10px 12px 11px; border-radius: 14px;
background: rgba(255, 255, 255, .9); color: #23252b; box-shadow: 0 0 0 1px rgba(20, 24, 32, .1), 0 12px 32px -14px rgba(20, 24, 32, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font: 500 10.5px/1.35 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.pult-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pult-zeile > span { width: 64px; color: #6b707c; }
.schalter { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20, 24, 32, .14); }
.schalter button, .exklusiv { font: inherit; letter-spacing: inherit; text-transform: inherit; color: #6b707c; background: none; border: 0; border-radius: 999px; padding: 6px 9px; cursor: pointer; transition: color .15s linear, background-color .15s linear; }
.schalter button[aria-pressed="true"] { color: #fff; background: #23252b; }
.schalter button:hover, .exklusiv:hover { color: #23252b; }
.schalter button[aria-pressed="true"]:hover { color: #fff; }
.exklusiv { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.exklusiv i { width: 24px; height: 14px; border-radius: 7px; border: 1.5px solid #6b707c; position: relative; transition: background-color .15s linear, border-color .15s linear; }
.exklusiv i::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 8px; height: 8px; border-radius: 50%; background: #6b707c; transition: translate .15s linear, background-color .15s linear; }
.exklusiv[aria-pressed="true"] { color: #23252b; }
.exklusiv[aria-pressed="true"] i { background: #23252b; border-color: #23252b; }
.exklusiv[aria-pressed="true"] i::after { translate: 10px 0; background: #fff; }
.schalter button:focus-visible, .exklusiv:focus-visible { outline: 2px solid #3f6fdf; outline-offset: 2px; }
.werte { display: flex; flex-wrap: wrap; gap: 3px 14px; text-transform: none; letter-spacing: .02em; color: #6b707c; padding-top: 7px; border-top: 1px solid rgba(20, 24, 32, .1); }
.werte b { font-weight: 500; color: #23252b; }
/* Vorführung: Tipp-Ring zeigt den gedachten Klick */
.tipp { position: absolute; inset: -1.5px; border-radius: 50%; border: 2px solid var(--himmel); opacity: 0; pointer-events: none; }
/* Reduzierte Bewegung: sofort auf und zu */
:root.reduziert * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
:root.reduziert .eintrag::details-content { transition: none !important; }
/* Vorschau: nur die Bühne */
.vorschau body { overflow: hidden; }
.vorschau .welt--basis { padding: 40px 48px; }
.vorschau .steuerung, .vorschau .werte, .vorschau .lead, .vorschau .aktionen { display: none; }
.vorschau .buehne { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 44px; align-items: center; }
.vorschau .einleitung { position: static; gap: 26px; }
.vorschau .einleitung h1 { font-size: 50px; }
.vorschau .eintrag .art { display: none; }
.vorschau .eintrag .titel { font-size: 23px; }
.vorschau .innen p { font-size: 16px; }
/* Telefon */
@media (max-width: 860px) {
.buehne { grid-template-columns: 1fr; gap: 40px; }
.einleitung { position: static; }
}
@media (max-width: 600px) {
.eintrag summary { grid-template-columns: 2.6em minmax(0, 1fr) 36px; gap: 12px; padding: 16px 0; }
.eintrag .art { display: none; }
.eintrag .titel { font-size: 19px; }
.innen { grid-template-columns: 1fr; padding-left: calc(2.6em + 12px); gap: 18px; }
.innen p { font-size: 16px; }
.bild { max-width: 240px; }
.steuerung { flex-direction: column; align-items: flex-start; }
.schild { height: 48px; }
.schild .kz { font-size: 33px; }
}
@media (hover: none) {
.eintrag summary { min-height: 64px; } /* große Trefferfläche */
}
/* ════════════════════════════════════════════════════════════
Variante „FAQ mit Suche und Sprunglinks“ · Rezept SaaS: präzise
Geist + Geist Mono, Graustufen, ein Markenton; easeOutQuad 200 ms
════════════════════════════════════════════════════════════ */
.welt--faq {
--f-grund: #fafafa; --f-karte: #ffffff; --f-text: #0d0e10; --f-text-2: #3b3f46; --f-leise: #6e737d; --f-linie: #e4e5e8; --f-marke: #5b59e0; --f-marke-hell: rgba(113, 112, 255, .14);
--f-kurve: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad wie Linear */
--auf-kurve: var(--f-kurve); --zu-kurve: var(--f-kurve); --auf-ms: .2s; --zu-ms: .2s; --deck-ms: .25s; --i-auf-ms: .2s; --i-zu-ms: .2s; --i-zu-kurve: var(--f-kurve);
min-height: 100svh; background: var(--f-grund); color: var(--f-text); font: 400 16px/1.6 'Geist', system-ui, sans-serif; letter-spacing: -.006em;
padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 56px) 120px;
}
.f-mono { font: 500 11px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--f-leise); }
.f-buehne { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.f-seite { position: sticky; top: 28px; display: grid; gap: 26px; }
.f-marke { display: flex; align-items: center; gap: 10px; font: 600 15px/1 'Geist', sans-serif; letter-spacing: -.01em; }
.f-marke svg { width: 26px; height: 26px; }
.f-marke .f-mono { margin-left: 4px; padding: 4px 7px 3px; border-radius: 6px; background: #f0f0f3; letter-spacing: .1em; }
.f-seite h1 { font: 600 clamp(34px, 1.6rem + 2.2vw, 54px)/1.02 'Geist', sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.f-seite h1 span { color: var(--f-leise); }
.f-suche { position: relative; }
.f-suche svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--f-leise); pointer-events: none; }
.f-suche input { width: 100%; height: 50px; padding: 0 52px 0 44px; border-radius: 12px; border: 1px solid var(--f-linie); background: var(--f-karte); color: var(--f-text); font: 400 16px/1 'Geist', sans-serif; letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(13, 14, 16, .04); outline: none; transition: border-color .15s var(--f-kurve), box-shadow .15s var(--f-kurve); }
.f-suche input::placeholder { color: #9a9ea6; }
.f-suche input:focus-visible { border-color: var(--f-marke); box-shadow: 0 0 0 4px var(--f-marke-hell); }
.f-suche input::-webkit-search-cancel-button { display: none; }
.f-suche kbd { position: absolute; right: 12px; top: 50%; translate: 0 -50%; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--f-linie); background: #f6f6f8; font: 500 11px/1 'Geist Mono', monospace; color: var(--f-leise); }
.f-suche button.f-leeren { position: absolute; right: 10px; top: 50%; translate: 0 -50%; height: 28px; padding: 0 9px; border-radius: 7px; border: 0; background: #f0f0f3; font: 500 10.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--f-text-2); cursor: pointer; }
.f-themen { display: grid; gap: 2px; }
.f-themen p { margin-bottom: 8px; }
.f-themen a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; margin-inline: -12px; border-radius: 9px; color: var(--f-text-2); text-decoration: none; font-weight: 500; transition: background-color .15s var(--f-kurve), color .15s var(--f-kurve), opacity .15s var(--f-kurve); }
.f-themen a:hover { background: #f0f0f3; color: var(--f-text); }
.f-themen a b { font: 500 11px/1 'Geist Mono', monospace; color: var(--f-leise); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.f-themen a[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.f-themen a:focus-visible, .f-oft button:focus-visible, .f-anker:focus-visible { outline: 2px solid var(--f-marke); outline-offset: 2px; }
.f-oft { display: flex; flex-wrap: wrap; gap: 6px; }
.f-oft p { width: 100%; margin-bottom: 2px; }
.f-oft button { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--f-linie); background: var(--f-karte); color: var(--f-text-2); font: 500 13.5px/1 'Geist', sans-serif; cursor: pointer; transition: border-color .15s var(--f-kurve), color .15s var(--f-kurve); }
.f-oft button:hover { border-color: #c9cbd1; color: var(--f-text); }
.f-oft button span { color: var(--f-marke); margin-right: 2px; }
.f-kontakt { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--f-karte); border: 1px solid var(--f-linie); font-size: 14px; line-height: 1.45; color: var(--f-text-2); }
.f-kontakt i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2fb36d; box-shadow: 0 0 0 4px rgba(47, 179, 109, .15); }
.f-kontakt b { color: var(--f-text); font-weight: 500; }
.f-inhalt { display: grid; gap: 34px; min-width: 0; }
.f-status { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--f-linie); }
.f-status b { color: var(--f-text); font-weight: 500; }
.f-thema { scroll-margin-top: 24px; }
.f-thema-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.f-thema-kopf h2 { font: 600 clamp(20px, 1.1rem + .5vw, 24px)/1.2 'Geist', sans-serif; letter-spacing: -.018em; }
.f-frage { border-bottom: 1px solid var(--f-linie); scroll-margin-top: 24px; }
.f-frage summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 16px; padding: 15px 0; outline: none; }
.f-frage summary::-webkit-details-marker { display: none; }
.f-frage summary > span:first-child { font: 500 16.5px/1.4 'Geist', sans-serif; letter-spacing: -.012em; transition: color .15s var(--f-kurve); }
.f-frage summary:hover > span:first-child { color: var(--f-marke); }
.f-frage summary:focus-visible { box-shadow: inset 0 0 0 2px var(--f-marke); border-radius: 8px; }
.f-pfeil { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--f-leise); transition: rotate .2s var(--f-kurve), background-color .15s var(--f-kurve), color .15s var(--f-kurve); }
.f-pfeil svg { width: 14px; height: 14px; }
.f-frage[open] .f-pfeil { rotate: 180deg; background: var(--f-marke-hell); color: var(--f-marke); }
.f-frage[open] summary > span:first-child { color: var(--f-text); }
.f-innen { padding: 0 44px 20px 0; display: grid; gap: 12px; color: var(--f-text-2); font-size: 15.5px; line-height: 1.62; }
.f-innen p { max-width: 62ch; }
.f-innen code { font: 500 13px/1 'Geist Mono', monospace; padding: 3px 6px; border-radius: 5px; background: #f0f0f3; color: var(--f-text); }
.f-innen ul { padding-left: 1.1em; display: grid; gap: 3px; }
.f-anker { justify-self: start; display: inline-flex; gap: 6px; align-items: center; color: var(--f-leise); text-decoration: none; font: 500 10.5px/1 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0; }
.f-anker:hover { color: var(--f-marke); }
.f-leer { padding: 28px; border: 1px dashed #cfd1d6; border-radius: 14px; text-align: center; color: var(--f-text-2); }
.f-leer b { display: block; font: 600 18px/1.3 'Geist', sans-serif; color: var(--f-text); margin-bottom: 6px; letter-spacing: -.015em; }
.f-leer button { border: 0; background: none; color: var(--f-marke); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Treffer per CSS Custom Highlight API: kein DOM-Umbau, nur Markierung */
::highlight(f-treffer) { background-color: #ffe27a; color: #0d0e10; }
/* Ziel eines Sprunglinks kurz markieren */
.f-frage.f-ziel summary > span:first-child { color: var(--f-marke); }
/* Verbesserung: element-scoped View Transition beim Filtern (Chrome 147+); ohne sie wird sofort gefiltert */
@supports (view-transition-name: match-element) {
.f-inhalt .f-frage, .f-inhalt .f-thema-kopf, .f-inhalt .f-leer { view-transition-name: match-element; view-transition-class: f-teil; }
}
::view-transition-group(.f-teil) { animation-duration: .2s; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
::view-transition-new(.f-teil):only-child { animation: f-rein .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
::view-transition-old(.f-teil):only-child { animation: f-raus .16s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@keyframes f-rein { from { opacity: 0; translate: 0 6px; } }
@keyframes f-raus { to { opacity: 0; } }
/* ════════════════════════════════════════════════════════════
Variante „Leistungsliste mit Bild“ · Rezept Architektur: ruhiges Raster
Hanken Grotesk, achromatisch, Panels 500 ms, Bild 750 ms
════════════════════════════════════════════════════════════ */
.welt--leistung {
--l-grund: #ffffff; --l-flaeche: #e1e3e3; --l-text: #231f20; --l-leise: #76767a; --l-linie: rgba(35, 31, 32, .9); --l-fokus: #0022ff;
--l-kurve: cubic-bezier(0.1, 0.6, 0.4, 1); /* Standard, auch Schließen */
--l-aus: cubic-bezier(0.1, 0.9, 0.3, 1); /* Ausklang für Öffnen und Einblenden */
--auf-kurve: var(--l-aus); --zu-kurve: var(--l-kurve); --auf-ms: .5s; --zu-ms: .5s; --deck-ms: .5s; --i-auf-ms: .5s; --i-zu-ms: .5s; --i-zu-kurve: var(--l-kurve);
min-height: 100svh; background: var(--l-grund); color: var(--l-text); font: 400 17px/1.45 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -.012em;
padding: clamp(20px, 3.4vw, 48px) clamp(16px, 3.4vw, 48px) 120px;
}
.l-meta { font-size: .8rem; line-height: 1.4; color: var(--l-leise); letter-spacing: 0; }
.l-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(12px, 2vw, 24px); align-items: baseline; padding-bottom: clamp(28px, 5vh, 56px); }
.l-kopf .l-buero { grid-column: 1 / 5; font-weight: 500; letter-spacing: -.01em; }
.l-kopf nav { grid-column: 5 / 13; display: flex; gap: 22px; flex-wrap: wrap; }
.l-kopf nav a { color: var(--l-leise); text-decoration: none; transition: color .25s var(--l-kurve); }
.l-kopf nav a:hover, .l-kopf nav a[aria-current] { color: var(--l-text); }
.l-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(12px, 2vw, 24px); align-items: start; }
.l-titel { grid-column: 1 / 8; display: grid; gap: 14px; margin-bottom: clamp(24px, 4vh, 44px); }
.l-titel h1 { font: 450 clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem)/1.08 'Hanken Grotesk', sans-serif; letter-spacing: -.02em; text-wrap: balance; max-width: 20ch; }
.l-titel h1 em { font-style: italic; font-weight: 400; }
.l-liste { grid-column: 1 / 8; grid-row: 2; border-bottom: 1px solid var(--l-linie); }
.l-eintrag { border-top: 1px solid var(--l-linie); }
.l-eintrag summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto 22px; align-items: baseline; gap: 14px; padding: 18px 0 20px; outline: none; }
.l-eintrag summary::-webkit-details-marker { display: none; }
.l-eintrag .l-nr { font-size: .8rem; color: var(--l-leise); font-variant-numeric: tabular-nums; }
.l-eintrag .l-name { font: 450 clamp(1.25rem, 1rem + .9vw, 1.953rem)/1.1 'Hanken Grotesk', sans-serif; letter-spacing: -.02em; transition: color .25s var(--l-kurve); }
.l-eintrag summary:hover .l-name { color: #4b4748; }
.l-eintrag summary:focus-visible .l-name { outline: 2px solid var(--l-fokus); outline-offset: 4px; }
.l-eintrag[open] .l-name { font-style: italic; }
/* Plus wird Minus: nur Transform, keine Diagonale (Rezeptregel) */
.l-zeichen { position: relative; width: 22px; height: 22px; align-self: center; }
.l-zeichen::before, .l-zeichen::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: currentColor; }
.l-zeichen::after { rotate: 90deg; transition: scale .5s var(--l-kurve); }
.l-eintrag[open] .l-zeichen::after { scale: 0 1; transition-timing-function: var(--l-aus); }
.l-innen { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 0 14px; padding-bottom: 28px; }
.l-innen > * { grid-column: 2; }
.l-innen p { max-width: 50ch; }
.l-innen dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #d6d8d8; font-size: .9rem; }
.l-innen dt { color: var(--l-leise); }
.l-innen a { justify-self: start; margin-top: 18px; color: var(--l-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-underline-offset .25s var(--l-kurve); }
.l-innen a:hover { text-underline-offset: 7px; }
.l-innen a:focus-visible { outline: 2px solid var(--l-fokus); outline-offset: 3px; }
.l-bildplatz:empty { display: none; }
.l-bildplatz { margin-top: 20px; }
.l-figur { grid-column: 9 / 13; grid-row: 1 / 3; position: sticky; top: 28px; display: grid; gap: 10px; }
.l-bild { position: relative; aspect-ratio: 4 / 5; background: var(--l-flaeche); overflow: hidden; view-transition-name: l-bild; }
.l-bild svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.l-bild svg:not([data-an]) { display: none; }
.l-figur figcaption { display: flex; justify-content: space-between; gap: 12px; view-transition-name: l-unterschrift; }
/* Bildwechsel als element-scoped View Transition auf der Figur: alt 500 ms Standardkurve aus, neu 750 ms Ausklang ein */
::view-transition-group(l-bild), ::view-transition-group(l-unterschrift) { animation-duration: .75s; animation-timing-function: cubic-bezier(0.1, 0.9, 0.3, 1); }
::view-transition-old(l-bild) { animation: l-aus .5s cubic-bezier(0.1, 0.6, 0.4, 1) both; }
::view-transition-new(l-bild) { animation: l-ein .75s cubic-bezier(0.1, 0.9, 0.3, 1) both; }
::view-transition-old(l-unterschrift) { animation: l-aus .25s cubic-bezier(0.1, 0.6, 0.4, 1) both; }
::view-transition-new(l-unterschrift) { animation: l-ein-text .5s cubic-bezier(0.1, 0.9, 0.3, 1) .15s both; }
@keyframes l-aus { to { opacity: 0; } }
@keyframes l-ein { from { opacity: 0; scale: 1.04; } }
@keyframes l-ein-text { from { opacity: 0; } }
/* Tipp-Ring der Vorführung in den neuen Varianten */
.f-pfeil, .l-zeichen { position: relative; }
.welt--faq .tipp { border-color: #5b59e0; }
.welt--leistung .tipp { border-color: #0022ff; inset: -6px; }
html:has(body[data-v="faq"]) { background: #fafafa; }
html:has(body[data-v="leistungen"]) { background: #fff; }
/* Reduzierte Bewegung: auch ::details-content und View Transitions ohne Animation */
:root.reduziert [data-liste] details::details-content { transition: none !important; }
:root.reduziert ::view-transition-group(*), :root.reduziert ::view-transition-old(*), :root.reduziert ::view-transition-new(*) { animation: none !important; }
/* Vorschau */
.vorschau .welt--faq, .vorschau .welt--leistung { padding-top: 34px; padding-bottom: 34px; }
.vorschau .f-kontakt, .vorschau .f-status, .vorschau .l-kopf nav { display: none; }
.vorschau .l-kopf { padding-bottom: 30px; }
@media (max-width: 860px) {
.f-buehne { grid-template-columns: 1fr; gap: 30px; }
.f-seite { position: static; gap: 20px; }
.f-kontakt { display: none; }
.l-titel, .l-liste { grid-column: 1 / -1; }
.l-figur { display: none; }
.l-kopf .l-buero { grid-column: 1 / -1; margin-bottom: 8px; }
.l-kopf nav { grid-column: 1 / -1; gap: 14px; }
}
@media (max-width: 600px) {
.f-innen { padding-right: 0; }
.f-themen a { padding-block: 7px; }
.l-eintrag summary { grid-template-columns: 2.2em minmax(0, 1fr) 22px; gap: 10px; }
.l-eintrag summary .l-meta { display: none; }
.l-innen { grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 10px; }
.l-bildplatz .l-bild { max-width: 300px; }
}
@media (hover: none) {
.f-frage summary, .l-eintrag summary { min-height: 64px; }
.f-suche kbd { display: none; }
}
</style>
</head>
<body data-v="basis">
<div class="welt welt--basis" data-welt="basis">
<div class="buehne">
<header class="einleitung">
<div class="marke">
<svg viewBox="0 0 40 40" aria-hidden="true"><rect width="40" height="40" rx="10" fill="#142b50"/><path d="M13 34 C13 24 27 20 27 6" fill="none" stroke="#ffd60a" stroke-width="5" stroke-linecap="round"/><path d="M13 34 C13 24 27 20 27 6" fill="none" stroke="#142b50" stroke-width="1.4" stroke-dasharray="3.2 3.6"/></svg>
<div><b>Fahrschule Spurwechsel</b><span class="mono">Augsburg · Göggingen</span></div>
</div>
<h1>Fragen vor dem <mark>Losfahren</mark></h1>
<p class="lead">Die fünf Fragen, die wir bei jeder Anmeldung hören. Theorie <b>dienstags und donnerstags ab 18:30</b>, Fahrstunden auch samstags. Unterricht auf Deutsch, Englisch und Türkisch.</p>
<div class="aktionen">
<a class="knopf" href="#anmelden">Probestunde buchen <span aria-hidden="true">→</span></a>
<a class="knopf-text" href="#theorie">Theorieplan ansehen</a>
</div>
<div class="schild" role="img" aria-label="Kennzeichen A SW 17">
<span class="eu"><svg viewBox="0 0 20 20" aria-hidden="true"><g fill="#ffd60a"><circle cx="10" cy="2.5" r="1.1"/><circle cx="13.75" cy="3.5" r="1.1"/><circle cx="16.5" cy="6.25" r="1.1"/><circle cx="17.5" cy="10" r="1.1"/><circle cx="16.5" cy="13.75" r="1.1"/><circle cx="13.75" cy="16.5" r="1.1"/><circle cx="10" cy="17.5" r="1.1"/><circle cx="6.25" cy="16.5" r="1.1"/><circle cx="3.5" cy="13.75" r="1.1"/><circle cx="2.5" cy="10" r="1.1"/><circle cx="3.5" cy="6.25" r="1.1"/><circle cx="6.25" cy="3.5" r="1.1"/></g></svg>D</span>
<span class="kz">A <span class="plaketten" aria-hidden="true"><i></i><i></i></span> SW 17</span>
</div>
</header>
<section aria-labelledby="faq-titel">
<div class="steuerung">
<div class="kopf"><h2 id="faq-titel">Häufige Fragen</h2><span class="mono">Klasse B · Stand 2026</span></div>
</div>
<div class="liste" data-technik="grid" data-liste>
<details class="eintrag" name="faq" open>
<summary><span class="mono nr">01</span><span class="titel">Welche Klasse brauche ich?</span><span class="art">B · B197 · A · BE</span><span class="zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="innen">
<div>
<p>Für das Auto reicht Klasse B, bis 3,5 Tonnen und mit kleinem Anhänger. Wer einen Wohnwagen ziehen will, macht BE gleich mit. Motorrad lernst du bei uns in A1, A2 und A.</p>
<dl><dt class="mono">Mindestalter</dt><dd>B mit 18, begleitet ab 17</dd><dt class="mono">Prüfungen</dt><dd>Theorie und Praxis beim TÜV</dd><dt class="mono">Kombi</dt><dd>B + BE spart Grundbetrag</dd></dl>
</div>
<div class="bild" role="img" aria-label="Piktogramme der Klassen B, A und BE auf gelbem Grund">
<svg viewBox="0 0 240 180">
<rect width="240" height="180" fill="#ffd60a"/>
<g fill="none" stroke="#142b50" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">
<!-- B: Auto -->
<path d="M18 74 h4 l8-15 q3-5 9-5 h22 q6 0 10 5 l9 11 l9 2 q4 1 4 5 v6 h-75 z"/>
<path d="M36 58 v12 M54 56 v14 M31 70 h45"/>
<circle cx="36" cy="83" r="7" fill="#ffd60a"/><circle cx="74" cy="83" r="7" fill="#ffd60a"/>
<!-- A: Motorrad -->
<circle cx="132" cy="82" r="10"/><circle cx="184" cy="82" r="10"/>
<path d="M132 82 l14-17 M184 82 l-10-24 l-6-6 M166 52 h10"/>
<path d="M146 64 q4-9 16-9 q6 0 9 5 l-2 6 z" fill="#142b50"/>
<path d="M150 70 h16 v10 h-14 z" fill="#142b50"/>
<path d="M140 63 h-8"/>
<!-- BE: Auto mit Anhänger -->
<path d="M30 146 h3 l6-11 q2-4 7-4 h16 q5 0 8 4 l6 8 l7 2 q3 1 3 4 v4 h-56 z"/>
<circle cx="43" cy="155" r="5.5" fill="#ffd60a"/><circle cx="72" cy="155" r="5.5" fill="#ffd60a"/>
<path d="M86 150 h14"/><rect x="100" y="126" width="62" height="26" rx="3"/><path d="M100 139 h62"/>
<circle cx="131" cy="157" r="5.5" fill="#ffd60a"/>
</g>
<g fill="#142b50" font-weight="800" font-size="26">
<text x="88" y="46" text-anchor="end">B</text>
<text x="210" y="46" text-anchor="end">A</text>
<text x="210" y="160" text-anchor="end">BE</text>
</g>
<path d="M0 110 H240" stroke="#142b50" stroke-width="1.5" stroke-dasharray="8 8" opacity=".35"/>
</svg>
</div>
</div></div>
</details>
<details class="eintrag" name="faq">
<summary><span class="mono nr">02</span><span class="titel">Was kostet der Führerschein?</span><span class="art">Preise Klasse B</span><span class="zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="innen">
<div>
<p>Die meisten brauchen bei uns 25 bis 30 Übungsstunden. Mit den 12 Sonderfahrten, der Prüfung und den TÜV-Gebühren landest du meist zwischen 3.300 und 3.900 Euro. Ratenzahlung ist möglich.</p>
<dl><dt class="mono">Grundbetrag</dt><dd><b>390 €</b> inkl. Lern-App</dd><dt class="mono">Übungsstunde</dt><dd><b>68 €</b> je 45 Minuten</dd><dt class="mono">Sonderfahrt</dt><dd><b>82 €</b> je 45 Minuten</dd></dl>
</div>
<div class="bild" role="img" aria-label="Rechenbeispiel: 25 Übungsstunden und 12 Sonderfahrten ergeben rund 3.425 Euro, als gestapelter Balken">
<svg viewBox="0 0 240 180">
<rect width="240" height="180" fill="#142b50"/>
<text x="20" y="34" fill="#3fbadf" font-size="11" font-weight="600" letter-spacing="1.4">RECHENBEISPIEL</text>
<text x="20" y="78" fill="#fff" font-size="40" font-weight="800" letter-spacing="-1" style="font-variant-numeric: tabular-nums">3.425 €</text>
<g transform="translate(20 100)">
<rect width="23" height="18" rx="3" fill="#ffd60a"/>
<rect x="25" width="98" height="18" rx="3" fill="#fff"/>
<rect x="125" width="56" height="18" rx="3" fill="#3fbadf"/>
<rect x="183" width="10" height="18" rx="3" fill="#ffd60a" opacity=".6"/>
<rect x="195" width="5" height="18" rx="2" fill="#fff" opacity=".45"/>
</g>
<g font-size="10.5" fill="#d6eef7" font-weight="500">
<circle cx="24" cy="137" r="4" fill="#ffd60a"/><text x="33" y="141">Grundbetrag</text>
<circle cx="126" cy="137" r="4" fill="#fff"/><text x="135" y="141">25 × Übung</text>
<circle cx="24" cy="157" r="4" fill="#3fbadf"/><text x="33" y="161">12 × Sonderfahrt</text>
<circle cx="126" cy="157" r="4" fill="#ffd60a" opacity=".6"/><text x="135" y="161">Prüfung, TÜV</text>
</g>
</svg>
</div>
</div></div>
</details>
<details class="eintrag" name="faq">
<summary><span class="mono nr">03</span><span class="titel">Wie läuft die Ausbildung ab?</span><span class="art">In fünf Schritten</span><span class="zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="innen">
<div>
<p>Anmelden, Sehtest und Erste-Hilfe-Kurs, dann 14 Doppelstunden Theorie. Parallel fährst du: erst Übungsstunden, dann 5 Überland-, 4 Autobahn- und 3 Nachtfahrten. Zum Schluss Theorie- und Praxisprüfung.</p>
<dl><dt class="mono">Dauer</dt><dd>meist 3 bis 6 Monate</dd><dt class="mono">Intensiv</dt><dd>Ferienkurs in 3 Wochen</dd><dt class="mono">Mitbringen</dt><dd>Passfoto, Sehtest, Erste Hilfe</dd></dl>
</div>
<div class="bild" role="img" aria-label="Gezeichnete Straße mit fünf nummerierten Stationen bis zur Zielflagge">
<svg viewBox="0 0 240 180">
<rect width="240" height="180" fill="#d6eef7"/>
<path d="M-10 150 C 50 150, 40 96, 110 96 S 170 40, 250 36" fill="none" stroke="#142b50" stroke-width="22" stroke-linecap="round"/>
<path d="M-10 150 C 50 150, 40 96, 110 96 S 170 40, 250 36" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="7 7"/>
<g font-size="12" font-weight="800" text-anchor="middle" fill="#142b50">
<circle cx="22" cy="148" r="11" fill="#ffd60a" stroke="#142b50" stroke-width="2.5"/><text x="22" y="152">1</text>
<circle cx="66" cy="121" r="11" fill="#ffd60a" stroke="#142b50" stroke-width="2.5"/><text x="66" y="125">2</text>
<circle cx="110" cy="96" r="11" fill="#ffd60a" stroke="#142b50" stroke-width="2.5"/><text x="110" y="100">3</text>
<circle cx="158" cy="66" r="11" fill="#ffd60a" stroke="#142b50" stroke-width="2.5"/><text x="158" y="70">4</text>
<circle cx="206" cy="40" r="11" fill="#ffd60a" stroke="#142b50" stroke-width="2.5"/><text x="206" y="44">5</text>
</g>
<g transform="translate(214 4)">
<path d="M0 26 V0" stroke="#142b50" stroke-width="2.5" stroke-linecap="round"/>
<g fill="#142b50"><rect x="1" y="0" width="6" height="5"/><rect x="13" y="0" width="6" height="5"/><rect x="7" y="5" width="6" height="5"/></g>
<rect x="1" y="0" width="18" height="10" fill="none" stroke="#142b50" stroke-width="1.5"/>
</g>
<text x="20" y="34" fill="#142b50" font-size="11" font-weight="600" letter-spacing="1.4" font-family="Geist Mono, monospace">START</text>
</svg>
</div>
</div></div>
</details>
<details class="eintrag" name="faq">
<summary><span class="mono nr">04</span><span class="titel">Automatik oder Schaltwagen?</span><span class="art">B197 erklärt</span><span class="zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="innen">
<div>
<p>Mit B197 lernst du auf dem Automatik-Auto und darfst danach trotzdem Schaltwagen fahren. Dafür brauchst du mindestens 10 Stunden auf dem Schalter und eine 15-minütige Testfahrt bei uns.</p>
<dl><dt class="mono">Prüfung</dt><dd>im Automatik-Auto</dd><dt class="mono">Schalter</dt><dd>mind. 10 Fahrstunden</dd><dt class="mono">Testfahrt</dt><dd>15 Minuten, ohne TÜV</dd></dl>
</div>
<div class="bild" role="img" aria-label="Schaltkulissen im Vergleich: Automatik mit P R N D und Schaltgetriebe mit sechs Gängen">
<svg viewBox="0 0 240 180">
<rect width="240" height="180" fill="#fff"/>
<rect x=".75" y=".75" width="238.5" height="178.5" rx="9.5" fill="none" stroke="rgba(20,43,80,.14)" stroke-width="1.5"/>
<!-- Automatik -->
<rect x="22" y="34" width="56" height="112" rx="24" fill="#eef3f7"/>
<path d="M58 50 V130" stroke="#142b50" stroke-width="3" stroke-linecap="round"/>
<g font-size="15" font-weight="800" fill="#142b50" text-anchor="middle"><text x="38" y="58">P</text><text x="38" y="83">R</text><text x="38" y="108">N</text><text x="38" y="133">D</text></g>
<circle cx="58" cy="128" r="8" fill="#ffd60a" stroke="#142b50" stroke-width="3"/>
<!-- Pfeil -->
<path d="M90 90 h26 m-8-7 l8 7 l-8 7" fill="none" stroke="#3fbadf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Schaltung H -->
<g stroke="#142b50" stroke-width="3" stroke-linecap="round" fill="none">
<path d="M140 90 H212 M140 54 V126 M176 54 V126 M212 54 V126"/>
</g>
<g fill="#142b50"><circle cx="140" cy="54" r="4"/><circle cx="140" cy="126" r="4"/><circle cx="176" cy="54" r="4"/><circle cx="176" cy="126" r="4"/><circle cx="212" cy="54" r="4"/></g>
<circle cx="212" cy="126" r="9" fill="#ffd60a" stroke="#142b50" stroke-width="3"/>
<g font-size="13" font-weight="800" fill="#142b50" text-anchor="middle"><text x="140" y="44">1</text><text x="140" y="146">2</text><text x="176" y="44">3</text><text x="176" y="146">4</text><text x="212" y="44">5</text><text x="212" y="155">6</text></g>
<text x="120" y="170" text-anchor="middle" font-size="11" font-weight="600" fill="#566175" letter-spacing="1.2" font-family="Geist Mono, monospace">B197</text>
</svg>
</div>
</div></div>
</details>
<details class="eintrag" name="faq">
<summary><span class="mono nr">05</span><span class="titel">Darf ich schon mit 17 fahren?</span><span class="art">Begleitetes Fahren</span><span class="zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="innen">
<div>
<p>Ja, mit BF17. Die Ausbildung beginnt mit 16 ½, die Theorieprüfung geht drei Monate vor dem 17. Geburtstag. Bis 18 fährt eine eingetragene Begleitperson mit, etwa Mama, Papa oder die Patentante.</p>
<dl><dt class="mono">Begleitung</dt><dd>ab 30 Jahre, 5 Jahre Führerschein</dd><dt class="mono">Punkte</dt><dd>höchstens 1 in Flensburg</dd><dt class="mono">Elternabend</dt><dd>jeden ersten Montag, 19 Uhr</dd></dl>
</div>
<div class="bild" role="img" aria-label="Große 17 neben einem Auto von oben mit zwei besetzten Vordersitzen">
<svg viewBox="0 0 240 180">
<rect width="240" height="180" fill="#ffd60a"/>
<text x="18" y="132" fill="#142b50" font-size="112" font-weight="800" letter-spacing="-6" style="font-stretch: 75%">17</text>
<g transform="translate(150 22)">
<rect x="0" y="0" width="70" height="136" rx="26" fill="#fff" stroke="#142b50" stroke-width="3.2"/>
<path d="M8 40 Q35 30 62 40 L58 58 Q35 52 12 58 Z" fill="#d6eef7" stroke="#142b50" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M12 112 Q35 118 58 112 L60 124 Q35 130 10 124 Z" fill="#d6eef7" stroke="#142b50" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M13 66 q9-4 18 0" fill="none" stroke="#142b50" stroke-width="3" stroke-linecap="round"/>
<circle cx="22" cy="80" r="9" fill="#142b50"/>
<circle cx="48" cy="80" r="9" fill="#3fbadf" stroke="#142b50" stroke-width="2.5"/>
</g>
<g font-size="10.5" font-weight="600" fill="#142b50" font-family="Geist Mono, monospace" letter-spacing="1">
<text x="22" y="160">DU + BEGLEITUNG</text>
</g>
</svg>
</div>
</div></div>
</details>
</div>
</section>
</div>
</div>
<!-- ═══ Variante: FAQ mit Suche und Sprunglinks ═══ -->
<div class="welt welt--faq" data-welt="faq" hidden>
<div class="f-buehne">
<aside class="f-seite">
<div class="f-marke"><svg viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" fill="#0d0e10"/><path d="M8 6.5h7l3.5 3.5v9.5H8z" fill="none" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M11 13.5h4.5M11 16.5h3" stroke="#7170ff" stroke-width="1.6" stroke-linecap="round"/></svg>Ordnerlos<span class="f-mono">Hilfe</span></div>
<h1>Fragen zu Ordnerlos. <span>Kurz beantwortet.</span></h1>
<form class="f-suche" role="search" data-f-form onsubmit="return false">
<label class="f-mono" for="f-suchfeld" style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">Fragen durchsuchen</label>
<svg viewBox="0 0 18 18" aria-hidden="true"><circle cx="7.6" cy="7.6" r="5.6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M11.8 11.8 16 16" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
<input id="f-suchfeld" type="search" placeholder="Suchen, z. B. DATEV oder Kündigung" autocomplete="off" spellcheck="false" data-f-suche aria-describedby="f-status">
<kbd aria-hidden="true" data-f-kbd>/</kbd>
<button type="button" class="f-leeren" data-f-leeren hidden>Leeren</button>
</form>
<nav class="f-themen" aria-label="Themen">
<p class="f-mono">Themen</p>
<a href="#thema-konto" data-f-sprung="thema-konto">Konto und Tarif <b data-f-zahl>3</b></a>
<a href="#thema-export" data-f-sprung="thema-export">Belege und Export <b data-f-zahl>3</b></a>
<a href="#thema-sicherheit" data-f-sprung="thema-sicherheit">Sicherheit und DSGVO <b data-f-zahl>3</b></a>
</nav>
<div class="f-oft">
<p class="f-mono">Oft gesucht</p>
<button type="button" data-f-ziel="frage-datev"><span>#</span>DATEV-Export</button>
<button type="button" data-f-ziel="frage-kuendigen"><span>#</span>Kündigen</button>
<button type="button" data-f-ziel="frage-server"><span>#</span>Serverstandort</button>
</div>
<p class="f-kontakt"><i aria-hidden="true"></i><span>Nicht dabei? Der Support antwortet werktags <b>in unter zwei Stunden</b>.</span></p>
</aside>
<div class="f-inhalt" data-f-inhalt data-liste data-technik="grid">
<p class="f-status f-mono" id="f-status" data-f-status aria-live="polite"><span><b>9</b> Fragen in 3 Themen</span><span>Stand 10/2026</span></p>
<section class="f-thema" id="thema-konto" aria-labelledby="h-konto">
<div class="f-thema-kopf"><h2 id="h-konto">Konto und Tarif</h2><span class="f-mono" data-f-thema-zahl>3 Fragen</span></div>
<details class="f-frage" id="frage-testen" name="f-konto">
<summary><span>Kann ich Ordnerlos kostenlos testen?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Ja, 30 Tage mit allen Funktionen und ohne Zahlungsdaten. Danach wählst du einen Tarif, oder das Konto pausiert. Deine Belege bleiben 90 Tage abrufbar.</p><a class="f-anker" href="#frage-testen">Link zu dieser Frage</a></div></div>
</details>
<details class="f-frage" id="frage-kuendigen" name="f-konto">
<summary><span>Wie kündige ich meinen Tarif?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Unter <code>Einstellungen → Tarif → Kündigen</code>. Monatstarife enden zum Ende des laufenden Monats, Jahrestarife zum Ende des Vertragsjahres. Die Bestätigung kommt per E-Mail.</p><a class="f-anker" href="#frage-kuendigen">Link zu dieser Frage</a></div></div>
</details>
<details class="f-frage" id="frage-team" name="f-konto">
<summary><span>Können mehrere Personen ein Konto nutzen?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Ab dem Tarif Team lädst du beliebig viele Kolleginnen und Kollegen ein. Es gibt drei Rollen:</p><ul><li>Inhaber: alles, auch Tarif und Rechnungen</li><li>Buchhaltung: Belege prüfen und exportieren</li><li>Hochladen: nur Belege fotografieren</li></ul><p>Deine Steuerberatung bekommt einen kostenlosen Lesezugang.</p><a class="f-anker" href="#frage-team">Link zu dieser Frage</a></div></div>
</details>
</section>
<section class="f-thema" id="thema-export" aria-labelledby="h-export">
<div class="f-thema-kopf"><h2 id="h-export">Belege und Export</h2><span class="f-mono" data-f-thema-zahl>3 Fragen</span></div>
<details class="f-frage" id="frage-belege" name="f-export">
<summary><span>Wie kommen Belege in Ordnerlos?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Per Foto in der App, als Weiterleitung an deine eigene Belegadresse oder per Drag-and-drop im Browser. Die Texterkennung liest Betrag, Datum und Steuersatz in wenigen Sekunden aus.</p><a class="f-anker" href="#frage-belege">Link zu dieser Frage</a></div></div>
</details>
<details class="f-frage" id="frage-datev" name="f-export">
<summary><span>Gibt es einen DATEV-Export?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Ja. Belege und Buchungsvorschläge gehen im DATEV-Format an deine Steuerberatung, monatlich automatisch oder auf Knopfdruck. Wer ohne DATEV arbeitet, lädt den Export als ZIP mit Tabelle herunter.</p><a class="f-anker" href="#frage-datev">Link zu dieser Frage</a></div></div>
</details>
<details class="f-frage" id="frage-aufbewahrung" name="f-export">
<summary><span>Wie lange werden Belege aufbewahrt?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>So lange, wie die gesetzliche Aufbewahrungsfrist es verlangt, unveränderbar nach GoBD. Gelöschte Belege liegen zuerst 30 Tage im Papierkorb. Kündigst du, bekommst du vorher den vollständigen Export.</p><a class="f-anker" href="#frage-aufbewahrung">Link zu dieser Frage</a></div></div>
</details>
</section>
<section class="f-thema" id="thema-sicherheit" aria-labelledby="h-sicherheit">
<div class="f-thema-kopf"><h2 id="h-sicherheit">Sicherheit und DSGVO</h2><span class="f-mono" data-f-thema-zahl>3 Fragen</span></div>
<details class="f-frage" id="frage-server" name="f-sicherheit">
<summary><span>Wo stehen die Server?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>In zwei Rechenzentren in Frankfurt am Main, betrieben von einem deutschen Anbieter mit ISO-27001-Zertifikat. Daten verlassen die EU nicht, auch nicht für Backups.</p><a class="f-anker" href="#frage-server">Link zu dieser Frage</a></div></div>
</details>
<details class="f-frage" id="frage-avv" name="f-sicherheit">
<summary><span>Bekomme ich einen AV-Vertrag?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Ja. Den Vertrag zur Auftragsverarbeitung nach Art. 28 DSGVO schließt du in den Einstellungen mit zwei Klicks ab. Er liegt danach als PDF in deinem Konto.</p><a class="f-anker" href="#frage-avv">Link zu dieser Frage</a></div></div>
</details>
<details class="f-frage" id="frage-2fa" name="f-sicherheit">
<summary><span>Wie schütze ich mein Konto zusätzlich?</span><span class="f-pfeil" aria-hidden="true"><svg viewBox="0 0 14 14"><path d="M3 5.2 7 9.2l4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="f-innen"><p>Mit Zwei-Faktor-Anmeldung per App oder mit einem Passkey. In Team-Konten kann der Inhaber die zweite Stufe für alle verpflichtend machen.</p><a class="f-anker" href="#frage-2fa">Link zu dieser Frage</a></div></div>
</details>
</section>
<div class="f-leer" data-f-leer hidden><b>Keine Treffer für „<span data-f-begriff></span>“</b>Versuch es mit einem anderen Wort, etwa <button type="button" data-f-vorschlag="Export">Export</button> oder <button type="button" data-f-vorschlag="Passkey">Passkey</button>, oder schreib dem Support.</div>
</div>
</div>
</div>
<!-- ═══ Variante: Leistungsliste mit Bild ═══ -->
<div class="welt welt--leistung" data-welt="leistungen" hidden>
<header class="l-kopf">
<p class="l-buero">Ostrand Architekten</p>
<nav aria-label="Hauptnavigation"><a href="#projekte">Projekte</a><a href="#leistungen" aria-current="page">Leistungen</a><a href="#buero">Büro</a><a href="#kontakt">Kontakt</a></nav>
</header>
<div class="l-raster">
<div class="l-titel">
<p class="l-meta">Leistungen · Leipzig seit 2009</p>
<h1>Wir bauen für den Alltag. <em>Und mit dem, was schon steht.</em></h1>
</div>
<div class="l-liste" data-liste data-technik="grid" data-l-liste>
<details class="l-eintrag" name="leistung" data-bild-schluessel="wohnen" data-abb="Abb. 1" data-unterschrift="Baugruppe Sellerhausen, Axonometrie" open>
<summary><span class="l-nr">01</span><span class="l-name">Wohnen</span><span class="l-meta">18 Projekte</span><span class="l-zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="l-innen"><p>Geförderter Wohnungsbau, Baugruppen und Reihenhäuser. Wir planen Grundrisse, die mit den Bewohnern älter werden: tragende Außenwände, freie Innenwände, Schalträume für später.</p><dl><dt>Leistungsphasen</dt><dd>1 bis 9</dd><dt>Zuletzt</dt><dd>Baugruppe Sellerhausen, 24 Wohnungen, 2025</dd><dt>Bauweise</dt><dd>Holz-Hybrid, Decken aus Brettsperrholz</dd></dl><div class="l-bildplatz" data-l-platz></div><a href="#wohnen">Projekte Wohnen</a></div></div>
</details>
<details class="l-eintrag" name="leistung" data-bild-schluessel="bildung" data-abb="Abb. 2" data-unterschrift="Grundschule am Wasserturm, Sheddach-Halle">
<summary><span class="l-nr">02</span><span class="l-name">Bildung</span><span class="l-meta">9 Projekte</span><span class="l-zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="l-innen"><p>Grundschulen, Horte und Kitas. Lernlandschaften statt Flure, Tageslicht von oben über Sheddächer und ein Außenraum für jede Lerngruppe.</p><dl><dt>Leistungsphasen</dt><dd>1 bis 8</dd><dt>Zuletzt</dt><dd>Grundschule am Wasserturm, vierzügig, 2024</dd><dt>Verfahren</dt><dd>Wettbewerb und VgV</dd></dl><div class="l-bildplatz" data-l-platz></div><a href="#bildung">Projekte Bildung</a></div></div>
</details>
<details class="l-eintrag" name="leistung" data-bild-schluessel="kultur" data-abb="Abb. 3" data-unterschrift="Stadtteilsaal Paunsdorf, Pultdach über dem Saal">
<summary><span class="l-nr">03</span><span class="l-name">Kultur und Versammlung</span><span class="l-meta">6 Projekte</span><span class="l-zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="l-innen"><p>Säle, Bibliotheken und Gemeindezentren. Ein großer Raum unter einem Dach, das man von Weitem liest, und ein Foyer, das sich zur Straße öffnet.</p><dl><dt>Leistungsphasen</dt><dd>2 bis 8</dd><dt>Zuletzt</dt><dd>Stadtteilsaal Paunsdorf, 420 Plätze, 2023</dd><dt>Akustik</dt><dd>mit Fachplanung ab Phase 2</dd></dl><div class="l-bildplatz" data-l-platz></div><a href="#kultur">Projekte Kultur</a></div></div>
</details>
<details class="l-eintrag" name="leistung" data-bild-schluessel="bestand" data-abb="Abb. 4" data-unterschrift="Gießerei Plagwitz, neuer Turm am alten Ziegelbau">
<summary><span class="l-nr">04</span><span class="l-name">Umbau und Bestand</span><span class="l-meta">21 Projekte</span><span class="l-zeichen" aria-hidden="true"><span class="tipp"></span></span></summary>
<div class="inhalt"><div class="l-innen"><p>Wir arbeiten zuerst mit dem, was schon steht. Gründerzeit, Industrie, Plattenbau: Bestandsaufnahme, Rückbau mit Bauteilkatalog, Aufstockung in Holz.</p><dl><dt>Leistungsphasen</dt><dd>0 bis 9, mit Bestandsanalyse</dd><dt>Zuletzt</dt><dd>Gießerei Plagwitz, Umnutzung zu Werkstätten, 2025</dd><dt>Graue Energie</dt><dd>für jedes Projekt bilanziert</dd></dl><div class="l-bildplatz" data-l-platz></div><a href="#bestand">Projekte im Bestand</a></div></div>
</details>
</div>
<figure class="l-figur" data-l-figur>
<div class="l-bild" role="img" aria-label="Axonometrische Zeichnung zum geöffneten Leistungsbereich" data-l-bild><svg data-bild="uebersicht" viewBox="-32 -59 464 580" aria-hidden="true"><polygon points="200.0,133.0 406.1,252.0 200.0,371.0 -6.1,252.0" fill="#eef0f0" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><line x1="229.4" y1="150.0" x2="23.3" y2="269.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="258.9" y1="167.0" x2="52.8" y2="286.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="288.3" y1="184.0" x2="82.2" y2="303.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="317.8" y1="201.0" x2="111.7" y2="320.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="347.2" y1="218.0" x2="141.1" y2="337.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="376.7" y1="235.0" x2="170.6" y2="354.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="170.6" y1="150.0" x2="376.7" y2="269.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="141.1" y1="167.0" x2="347.2" y2="286.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="111.7" y1="184.0" x2="317.8" y2="303.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="82.2" y1="201.0" x2="288.3" y2="320.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="52.8" y1="218.0" x2="258.9" y2="337.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="23.3" y1="235.0" x2="229.4" y2="354.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><polygon points="244.2,175.5 214.7,192.5 214.7,141.5 244.2,124.5" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="170.6,167.0 214.7,192.5 214.7,141.5 170.6,116.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="200.0,99.0 244.2,124.5 214.7,141.5 170.6,116.0" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="185.3,192.5 126.4,226.5 126.4,192.5 185.3,158.5" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="96.9,209.5 126.4,226.5 126.4,192.5 96.9,175.5" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="155.8,141.5 185.3,158.5 126.4,192.5 96.9,175.5" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="288.3,201.0 244.2,226.5 244.2,141.5 288.3,116.0" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="214.7,209.5 244.2,226.5 244.2,141.5 214.7,124.5" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="258.9,99.0 288.3,116.0 244.2,141.5 214.7,124.5" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="361.9,243.5 332.5,260.5 332.5,226.5 361.9,209.5" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="273.6,226.5 332.5,260.5 332.5,226.5 273.6,192.5" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="303.1,175.5 361.9,209.5 332.5,226.5 273.6,192.5" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="229.4,235.0 185.3,260.5 185.3,141.5 229.4,116.0" fill="#3a3536" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="141.1,235.0 185.3,260.5 185.3,141.5 141.1,116.0" fill="#2b2627" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="185.3,90.5 229.4,116.0 185.3,141.5 141.1,116.0" fill="#231f20" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="141.1,252.0 96.9,277.5 96.9,218.0 141.1,192.5" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="38.1,243.5 96.9,277.5 96.9,218.0 38.1,184.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="82.2,158.5 141.1,192.5 96.9,218.0 38.1,184.0" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="288.3,252.0 258.9,269.0 258.9,201.0 288.3,184.0" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="229.4,252.0 258.9,269.0 258.9,201.0 229.4,184.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="258.9,167.0 288.3,184.0 258.9,201.0 229.4,184.0" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="369.3" y1="256.2" x2="369.3" y2="229.1" stroke="#231f20" stroke-width=".8"/><circle cx="369.3" cy="225.5" r="11.9" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="191.2" y1="267.3" x2="191.2" y2="240.1" stroke="#231f20" stroke-width=".8"/><circle cx="191.2" cy="236.5" r="11.9" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="357.5" y1="269.8" x2="357.5" y2="242.6" stroke="#231f20" stroke-width=".8"/><circle cx="357.5" cy="239.1" r="11.9" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="60.1" y1="273.2" x2="60.1" y2="246.1" stroke="#231f20" stroke-width=".8"/><circle cx="60.1" cy="242.5" r="11.9" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><polygon points="332.5,277.5 273.6,311.5 273.6,269.0 332.5,235.0" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="244.2,294.5 273.6,311.5 273.6,269.0 244.2,252.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="303.1,218.0 332.5,235.0 273.6,269.0 244.2,252.0" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="185.3,277.5 126.4,311.5 126.4,277.5 185.3,243.5" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="96.9,294.5 126.4,311.5 126.4,277.5 96.9,260.5" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="155.8,226.5 185.3,243.5 126.4,277.5 96.9,260.5" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="244.2,311.5 200.0,337.0 200.0,243.5 244.2,218.0" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="155.8,311.5 200.0,337.0 200.0,243.5 155.8,218.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="200.0,192.5 244.2,218.0 200.0,243.5 155.8,218.0" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="155.8,328.5 147.0,333.6 147.0,323.4 155.8,318.3" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="132.3,325.1 147.0,333.6 147.0,323.4 132.3,314.9" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="141.1,309.8 155.8,318.3 147.0,323.4 132.3,314.9" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/></svg><svg data-bild="wohnen" data-an viewBox="-41 -71 513 641" aria-hidden="true"><polygon points="166.5,141.5 446.2,303.0 265.2,407.5 -14.5,246.0" fill="#eef0f0" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="192.8,194.7 110.5,242.2 110.5,177.6 192.8,130.1" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="67.7,217.5 110.5,242.2 110.5,177.6 67.7,152.9" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="78.4,214.2 88.3,219.9 88.3,204.6 78.4,198.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="182.1,191.4 172.2,197.1 172.2,181.8 182.1,176.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="160.7,203.7 150.8,209.4 150.8,194.1 160.7,188.4" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="139.3,216.1 129.4,221.8 129.4,206.5 139.3,200.8" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="78.4,189.5 88.3,195.2 88.3,179.9 78.4,174.2" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="182.1,166.7 172.2,172.4 172.2,157.1 182.1,151.4" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="160.7,179.0 150.8,184.7 150.8,169.4 160.7,163.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="139.3,191.4 129.4,197.1 129.4,181.8 139.3,176.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="150.0,105.4 171.4,91.1 89.1,138.6 67.7,152.9" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="171.4,91.1 192.8,130.1 110.5,177.6 89.1,138.6" fill="#f3f4f4" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="67.7,152.9 110.5,177.6 89.1,138.6" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="235.6,219.4 153.3,266.9 153.3,209.9 235.6,162.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="110.5,242.2 153.3,266.9 153.3,209.9 110.5,185.2" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="121.2,238.9 131.1,244.6 131.1,231.6 121.2,225.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="224.9,216.1 215.0,221.8 215.0,208.8 224.9,203.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="203.5,228.4 193.6,234.1 193.6,221.2 203.5,215.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="182.1,240.8 172.2,246.5 172.2,233.5 182.1,227.8" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="121.2,218.0 131.1,223.7 131.1,210.7 121.2,205.0" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="224.9,195.2 215.0,200.9 215.0,187.9 224.9,182.2" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="203.5,207.5 193.6,213.2 193.6,200.3 203.5,194.6" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="182.1,219.9 172.2,225.6 172.2,212.6 182.1,206.9" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="192.8,137.7 214.2,123.5 131.9,170.9 110.5,185.2" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="214.2,123.5 235.6,162.4 153.3,209.9 131.9,170.9" fill="#f3f4f4" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="110.5,185.2 153.3,209.9 131.9,170.9" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="51.3" y1="246.0" x2="51.3" y2="219.4" stroke="#231f20" stroke-width=".8"/><circle cx="51.3" cy="216.0" r="11.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><polygon points="278.3,244.1 196.1,291.6 196.1,219.4 278.3,171.9" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="153.3,266.9 196.1,291.6 196.1,219.4 153.3,194.7" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="164.0,263.6 173.9,269.3 173.9,251.6 164.0,245.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="267.6,240.8 257.8,246.5 257.8,228.8 267.6,223.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="246.3,253.1 236.4,258.8 236.4,241.2 246.3,235.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="224.9,265.5 215.0,271.2 215.0,253.5 224.9,247.8" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="164.0,235.1 173.9,240.8 173.9,223.1 164.0,217.4" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="267.6,212.3 257.8,218.0 257.8,200.3 267.6,194.6" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="246.3,224.6 236.4,230.3 236.4,212.7 246.3,207.0" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="224.9,237.0 215.0,242.7 215.0,225.0 224.9,219.3" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="235.6,147.2 257.0,133.0 174.7,180.5 153.3,194.7" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="257.0,133.0 278.3,171.9 196.1,219.4 174.7,180.5" fill="#f3f4f4" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="153.3,194.7 196.1,219.4 174.7,180.5" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="321.1,268.8 238.9,316.3 238.9,255.5 321.1,208.0" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="196.1,291.6 238.9,316.3 238.9,255.5 196.1,230.8" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="206.8,288.3 216.6,294.0 216.6,279.8 206.8,274.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="310.4,265.5 300.6,271.2 300.6,257.0 310.4,251.3" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="289.0,277.8 279.2,283.5 279.2,269.4 289.0,263.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="267.6,290.2 257.8,295.9 257.8,281.7 267.6,276.0" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="206.8,265.5 216.6,271.2 216.6,257.0 206.8,251.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="310.4,242.7 300.6,248.4 300.6,234.2 310.4,228.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="289.0,255.0 279.2,260.7 279.2,246.6 289.0,240.9" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="267.6,267.4 257.8,273.1 257.8,258.9 267.6,253.2" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="278.3,183.3 299.7,169.1 217.5,216.6 196.1,230.8" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="299.7,169.1 321.1,208.0 238.9,255.5 217.5,216.6" fill="#f3f4f4" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="196.1,230.8 238.9,255.5 217.5,216.6" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="100.6" y1="284.0" x2="100.6" y2="257.4" stroke="#231f20" stroke-width=".8"/><circle cx="100.6" cy="254.0" r="11.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><polygon points="363.9,293.5 281.6,341.0 281.6,272.6 363.9,225.1" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="238.9,316.3 281.6,341.0 281.6,272.6 238.9,247.9" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="249.5,313.0 259.4,318.7 259.4,302.2 249.5,296.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="353.2,290.2 343.3,295.9 343.3,279.4 353.2,273.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="331.8,302.5 321.9,308.2 321.9,291.7 331.8,286.0" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="310.4,314.9 300.6,320.6 300.6,304.1 310.4,298.4" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="249.5,286.4 259.4,292.1 259.4,275.6 249.5,269.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="353.2,263.6 343.3,269.3 343.3,252.8 353.2,247.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="331.8,275.9 321.9,281.6 321.9,265.1 331.8,259.4" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="310.4,288.3 300.6,294.0 300.6,277.5 310.4,271.8" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="321.1,200.4 342.5,186.1 260.2,233.6 238.9,247.9" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="342.5,186.1 363.9,225.1 281.6,272.6 260.2,233.6" fill="#f3f4f4" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="238.9,247.9 281.6,272.6 260.2,233.6" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="182.9" y1="322.0" x2="182.9" y2="295.4" stroke="#231f20" stroke-width=".8"/><circle cx="182.9" cy="292.0" r="11.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="347.5" y1="322.0" x2="347.5" y2="295.4" stroke="#231f20" stroke-width=".8"/><circle cx="347.5" cy="292.0" r="11.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="265.2" y1="360.0" x2="265.2" y2="333.4" stroke="#231f20" stroke-width=".8"/><circle cx="265.2" cy="330.0" r="11.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/></svg><svg data-bild="bildung" viewBox="-86 -49 495 619" aria-hidden="true"><polygon points="120.0,154.0 383.3,306.0 203.1,410.0 -60.1,258.0" fill="#eef0f0" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><line x1="161.6" y1="178.0" x2="-18.6" y2="282.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="203.1" y1="202.0" x2="23.0" y2="306.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="244.7" y1="226.0" x2="64.6" y2="330.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="286.3" y1="250.0" x2="106.1" y2="354.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="327.8" y1="274.0" x2="147.7" y2="378.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="369.4" y1="298.0" x2="189.3" y2="402.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="78.4" y1="178.0" x2="341.7" y2="330.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="36.9" y1="202.0" x2="300.1" y2="354.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="-4.7" y1="226.0" x2="258.6" y2="378.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><line x1="-46.3" y1="250.0" x2="217.0" y2="402.0" stroke="#9ea3a3" stroke-width="0.4" stroke-dasharray="2 3"/><polygon points="286.3,266.0 203.1,314.0 203.1,272.4 286.3,224.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="36.9,218.0 203.1,314.0 203.1,272.4 36.9,176.4" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="45.2,216.4 54.9,222.0 54.9,204.1 45.2,198.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="61.8,226.0 71.5,231.6 71.5,213.7 61.8,208.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="78.4,235.6 88.1,241.2 88.1,223.3 78.4,217.7" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="95.1,245.2 104.8,250.8 104.8,232.9 95.1,227.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="111.7,254.8 121.4,260.4 121.4,242.5 111.7,236.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="128.3,264.4 138.0,270.0 138.0,252.1 128.3,246.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="144.9,274.0 154.6,279.6 154.6,261.7 144.9,256.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="161.6,283.6 171.3,289.2 171.3,271.3 161.6,265.7" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="178.2,293.2 187.9,298.8 187.9,280.9 178.2,275.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="278.0,264.4 268.3,270.0 268.3,252.1 278.0,246.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="261.3,274.0 251.6,279.6 251.6,261.7 261.3,256.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="244.7,283.6 235.0,289.2 235.0,271.3 244.7,265.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="228.1,293.2 218.4,298.8 218.4,280.9 228.1,275.3" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="120.0,110.8 286.3,206.8 265.5,236.4 99.2,140.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="286.3,224.4 286.3,206.8 265.5,236.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="99.2,122.8 265.5,218.8 244.7,248.4 78.4,152.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="265.5,236.4 265.5,218.8 244.7,248.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="78.4,134.8 244.7,230.8 223.9,260.4 57.6,164.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="244.7,248.4 244.7,230.8 223.9,260.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="57.6,146.8 223.9,242.8 203.1,272.4 36.9,176.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="223.9,260.4 223.9,242.8 203.1,272.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="84.0,254.8 36.9,282.0 36.9,256.4 84.0,229.2" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="-18.6,250.0 36.9,282.0 36.9,256.4 -18.6,224.4" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="-11.6,249.2 -3.3,254.0 -3.3,243.1 -11.6,238.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="2.2,257.2 10.5,262.0 10.5,251.1 2.2,246.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="16.1,265.2 24.4,270.0 24.4,259.1 16.1,254.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="77.0,254.0 68.7,258.8 68.7,247.9 77.0,243.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="63.2,262.0 54.9,266.8 54.9,255.9 63.2,251.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="49.3,270.0 41.0,274.8 41.0,263.9 49.3,259.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="28.5,197.2 84.0,229.2 36.9,256.4 -18.6,224.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="92.3" y1="298.0" x2="92.3" y2="274.0" stroke="#231f20" stroke-width=".8"/><circle cx="92.3" cy="270.9" r="10.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><polygon points="355.6,306.0 272.4,354.0 272.4,283.6 355.6,235.6" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="211.5,318.8 272.4,354.0 272.4,283.6 211.5,248.4" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="221.2,273.2 235.0,281.2 235.0,272.3 221.2,264.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="240.6,284.4 254.4,292.4 254.4,283.5 240.6,275.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="345.9,260.4 332.0,268.4 332.0,259.5 345.9,251.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="326.5,271.6 312.6,279.6 312.6,270.7 326.5,262.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="307.1,282.8 293.2,290.8 293.2,281.9 307.1,273.9" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="294.6,200.4 355.6,235.6 272.4,283.6 211.5,248.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="106.1" y1="330.0" x2="106.1" y2="306.0" stroke="#231f20" stroke-width=".8"/><circle cx="106.1" cy="302.9" r="10.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="167.1" y1="350.8" x2="167.1" y2="326.8" stroke="#231f20" stroke-width=".8"/><circle cx="167.1" cy="323.7" r="10.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="196.2" y1="382.0" x2="196.2" y2="358.0" stroke="#231f20" stroke-width=".8"/><circle cx="196.2" cy="354.9" r="10.4" fill="#ffffff" stroke="#231f20" stroke-width=".8"/></svg><svg data-bild="kultur" viewBox="-64 -81 482 602" aria-hidden="true"><polygon points="170.0,154.0 391.7,282.0 183.9,402.0 -37.8,274.0" fill="#eef0f0" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="308.6,250.0 197.7,314.0 197.7,234.0 308.6,170.0" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="59.1,234.0 197.7,314.0 197.7,234.0 59.1,154.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="308.6,170.0 197.7,234.0 197.7,234.0 308.6,118.8" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="170.0,38.8 308.6,118.8 197.7,234.0 59.1,154.0" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="6.5" y1="280.4" x2="6.5" y2="256.4" stroke="#231f20" stroke-width=".8"/><circle cx="6.5" cy="253.0" r="11.2" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><polygon points="343.2,286.0 273.9,326.0 273.9,281.2 343.2,241.2" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="231.0,301.2 273.9,326.0 273.9,281.2 231.0,256.4" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="238.6,299.2 246.9,304.0 246.9,294.1 238.6,289.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="253.8,308.0 262.1,312.8 262.1,302.9 253.8,298.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="335.6,284.0 327.3,288.8 327.3,278.9 335.6,274.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="320.3,292.8 312.0,297.6 312.0,287.7 320.3,282.9" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="305.1,301.6 296.8,306.4 296.8,296.5 305.1,291.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="289.9,310.4 281.5,315.2 281.5,305.3 289.9,300.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="238.6,283.2 246.9,288.0 246.9,278.1 238.6,273.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="253.8,292.0 262.1,296.8 262.1,286.9 253.8,282.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="335.6,268.0 327.3,272.8 327.3,262.9 335.6,258.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="320.3,276.8 312.0,281.6 312.0,271.7 320.3,266.9" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="305.1,285.6 296.8,290.4 296.8,280.5 305.1,275.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="289.9,294.4 281.5,299.2 281.5,289.3 289.9,284.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="300.3,216.4 343.2,241.2 273.9,281.2 231.0,256.4" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="197.7,314.0 149.2,342.0 149.2,306.8 197.7,278.8" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="38.4,278.0 149.2,342.0 149.2,306.8 38.4,242.8" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="44.6,278.4 55.0,284.4 55.0,266.5 44.6,260.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="57.1,285.6 67.5,291.6 67.5,273.7 57.1,267.7" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="69.5,292.8 79.9,298.8 79.9,280.9 69.5,274.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="82.0,300.0 92.4,306.0 92.4,288.1 82.0,282.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="94.5,307.2 104.9,313.2 104.9,295.3 94.5,289.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="107.0,314.4 117.3,320.4 117.3,302.5 107.0,296.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="119.4,321.6 129.8,327.6 129.8,309.7 119.4,303.7" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="131.9,328.8 142.3,334.8 142.3,316.9 131.9,310.9" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="191.5,314.4 181.1,320.4 181.1,302.5 191.5,296.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="179.0,321.6 168.6,327.6 168.6,309.7 179.0,303.7" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="166.5,328.8 156.1,334.8 156.1,316.9 166.5,310.9" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="86.9,214.8 197.7,278.8 149.2,306.8 38.4,242.8" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="42.5" y1="307.6" x2="42.5" y2="283.6" stroke="#231f20" stroke-width=".8"/><circle cx="42.5" cy="280.2" r="11.2" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="86.9" y1="330.0" x2="86.9" y2="306.0" stroke="#231f20" stroke-width=".8"/><circle cx="86.9" cy="302.6" r="11.2" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="218.5" y1="342.0" x2="218.5" y2="318.0" stroke="#231f20" stroke-width=".8"/><circle cx="218.5" cy="314.6" r="11.2" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="208.8" y1="368.4" x2="208.8" y2="344.4" stroke="#231f20" stroke-width=".8"/><circle cx="208.8" cy="341.0" r="11.2" fill="#ffffff" stroke="#231f20" stroke-width=".8"/></svg><svg data-bild="bestand" viewBox="-53 -46 479 599" aria-hidden="true"><polygon points="150.0,158.0 400.3,302.5 223.6,404.5 -26.7,260.0" fill="#eef0f0" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="282.5,251.5 194.2,302.5 194.2,234.5 282.5,183.5" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="61.7,226.0 194.2,302.5 194.2,234.5 61.7,158.0" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="61.7" y1="214.7" x2="194.2" y2="291.2" stroke="#231f20" stroke-width="0.35"/><line x1="282.5" y1="240.2" x2="194.2" y2="291.2" stroke="#231f20" stroke-width="0.35"/><line x1="61.7" y1="203.3" x2="194.2" y2="279.8" stroke="#231f20" stroke-width="0.35"/><line x1="282.5" y1="228.8" x2="194.2" y2="279.8" stroke="#231f20" stroke-width="0.35"/><line x1="61.7" y1="192.0" x2="194.2" y2="268.5" stroke="#231f20" stroke-width="0.35"/><line x1="282.5" y1="217.5" x2="194.2" y2="268.5" stroke="#231f20" stroke-width="0.35"/><line x1="61.7" y1="180.7" x2="194.2" y2="257.2" stroke="#231f20" stroke-width="0.35"/><line x1="282.5" y1="206.2" x2="194.2" y2="257.2" stroke="#231f20" stroke-width="0.35"/><line x1="61.7" y1="169.3" x2="194.2" y2="245.8" stroke="#231f20" stroke-width="0.35"/><line x1="282.5" y1="194.8" x2="194.2" y2="245.8" stroke="#231f20" stroke-width="0.35"/><polygon points="72.7,218.8 84.5,225.6 84.5,211.9 72.7,205.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="94.8,231.5 106.6,238.3 106.6,224.6 94.8,217.8" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="116.9,244.3 128.7,251.1 128.7,237.4 116.9,230.6" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="139.0,257.0 150.7,263.8 150.7,250.1 139.0,243.3" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="161.0,269.8 172.8,276.6 172.8,262.9 161.0,256.1" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="271.5,244.3 259.7,251.1 259.7,237.4 271.5,230.6" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="249.4,257.0 237.6,263.8 237.6,250.1 249.4,243.3" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="227.3,269.8 215.5,276.6 215.5,262.9 227.3,256.1" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="72.7,196.7 84.5,203.5 84.5,189.8 72.7,183.0" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="94.8,209.4 106.6,216.2 106.6,202.5 94.8,195.7" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="116.9,222.2 128.7,229.0 128.7,215.3 116.9,208.5" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="139.0,234.9 150.7,241.7 150.7,228.0 139.0,221.2" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="161.0,247.7 172.8,254.5 172.8,240.8 161.0,234.0" fill="#8d9292" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="271.5,222.2 259.7,229.0 259.7,215.3 271.5,208.5" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="249.4,234.9 237.6,241.7 237.6,228.0 249.4,221.2" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="227.3,247.7 215.5,254.5 215.5,240.8 227.3,234.0" fill="#a9adad" stroke="#231f20" stroke-width="0.6" stroke-linejoin="round"/><polygon points="150.0,107.0 282.5,183.5 238.3,178.4 105.8,101.9" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="105.8,101.9 238.3,178.4 194.2,234.5 61.7,158.0" fill="#f3f4f4" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="282.5,183.5 194.2,234.5 238.3,178.4" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="126.4,273.6 91.1,294.0 91.1,273.6 126.4,253.2" fill="#e4e6e6" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="17.5,251.5 91.1,294.0 91.1,273.6 17.5,231.1" fill="#cfd2d2" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="52.8,210.7 126.4,253.2 91.1,273.6 17.5,231.1" fill="#ffffff" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="329.6,292.3 264.8,329.7 264.8,202.2 329.6,164.8" fill="#3a3536" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="205.9,295.7 264.8,329.7 264.8,202.2 205.9,168.2" fill="#2b2627" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><polygon points="215.5,284.2 225.8,290.2 225.8,274.4 215.5,268.4" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="234.7,295.3 245.0,301.2 245.0,285.4 234.7,279.5" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="320.0,280.8 309.7,286.8 309.7,271.0 320.0,265.0" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="300.9,291.9 290.6,297.8 290.6,282.0 300.9,276.1" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="281.8,302.9 271.5,308.9 271.5,293.1 281.8,287.1" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="215.5,258.7 225.8,264.7 225.8,248.9 215.5,242.9" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="234.7,269.8 245.0,275.7 245.0,259.9 234.7,254.0" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="320.0,255.3 309.7,261.3 309.7,245.5 320.0,239.5" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="300.9,266.4 290.6,272.3 290.6,256.5 300.9,250.6" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="281.8,277.4 271.5,283.4 271.5,267.6 281.8,261.6" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="215.5,233.2 225.8,239.2 225.8,223.4 215.5,217.4" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="234.7,244.3 245.0,250.2 245.0,234.4 234.7,228.5" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="320.0,229.8 309.7,235.8 309.7,220.0 320.0,214.0" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="300.9,240.9 290.6,246.8 290.6,231.0 300.9,225.1" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="281.8,251.9 271.5,257.9 271.5,242.1 281.8,236.1" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="215.5,207.7 225.8,213.7 225.8,197.9 215.5,191.9" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="234.7,218.8 245.0,224.7 245.0,208.9 234.7,203.0" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="320.0,204.3 309.7,210.3 309.7,194.5 320.0,188.5" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="300.9,215.4 290.6,221.3 290.6,205.5 300.9,199.6" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="281.8,226.4 271.5,232.4 271.5,216.6 281.8,210.6" fill="#f7f8f8" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/><polygon points="270.7,130.8 329.6,164.8 264.8,202.2 205.9,168.2" fill="#231f20" stroke="#231f20" stroke-width="1" stroke-linejoin="round"/><line x1="120.6" y1="311.0" x2="120.6" y2="285.5" stroke="#231f20" stroke-width=".8"/><circle cx="120.6" cy="282.2" r="11.1" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="329.6" y1="319.5" x2="329.6" y2="294.0" stroke="#231f20" stroke-width=".8"/><circle cx="329.6" cy="290.7" r="11.1" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="172.1" y1="332.2" x2="172.1" y2="306.8" stroke="#231f20" stroke-width=".8"/><circle cx="172.1" cy="303.4" r="11.1" fill="#ffffff" stroke="#231f20" stroke-width=".8"/><line x1="253.1" y1="353.5" x2="253.1" y2="328.0" stroke="#231f20" stroke-width=".8"/><circle cx="253.1" cy="324.7" r="11.1" fill="#ffffff" stroke="#231f20" stroke-width=".8"/></svg></div>
<figcaption class="l-meta" data-l-unterschrift><span>Abb. 1</span><span>Baugruppe Sellerhausen, Axonometrie</span></figcaption>
</figure>
</div>
</div>
<aside class="pult" aria-label="Steuerung der Demo">
<div class="pult-zeile"><span>Variante</span>
<div class="schalter" role="group" aria-label="Variante">
<button type="button" data-variante-wahl="basis" aria-pressed="true">Basis</button>
<button type="button" data-variante-wahl="faq" aria-pressed="false">FAQ + Suche</button>
<button type="button" data-variante-wahl="leistungen" aria-pressed="false">Leistungen</button>
</div>
</div>
<div class="pult-zeile"><span>Technik</span>
<div class="schalter" role="group" aria-label="Technik">
<button type="button" data-technik-wahl="grid" aria-pressed="true">Grid</button>
<button type="button" data-technik-wahl="interpolate" aria-pressed="false">interpolate-size</button>
<button type="button" data-technik-wahl="calc" aria-pressed="false">calc-size</button>
</div>
<button type="button" class="exklusiv" data-exklusiv aria-pressed="true"><i aria-hidden="true"></i>exklusiv</button>
</div>
<p class="werte" data-werte aria-live="polite"></p>
</aside>
<script>
(() => {
const html = document.documentElement;
const reduziert = () => html.classList.contains('reduziert');
const VARIANTEN = ['basis', 'faq', 'leistungen'];
const welten = Object.fromEntries([...document.querySelectorAll('[data-welt]')].map(w => [w.dataset.welt, w]));
const listen = [...document.querySelectorAll('[data-liste]')];
const alleDetails = [...document.querySelectorAll('[data-liste] details')];
alleDetails.forEach(d => { d.dataset.gruppe = d.getAttribute('name') || ''; });
const vKnoepfe = [...document.querySelectorAll('[data-variante-wahl]')];
const tKnoepfe = [...document.querySelectorAll('[data-technik-wahl]')];
const exklusivKnopf = document.querySelector('[data-exklusiv]');
const werteZeile = document.querySelector('[data-werte]');
// Weichen: was kann der Browser?
const kannInterpolate = CSS.supports('interpolate-size', 'allow-keywords');
const kannCalc = CSS.supports('height', 'calc-size(auto, size)');
const kannScoped = typeof Element.prototype.startViewTransition === 'function'; // element-scoped View Transitions, Chrome 147+
const kannMatch = CSS.supports('view-transition-name', 'match-element');
const kannHighlight = !!(window.CSS && CSS.highlights && typeof Highlight === 'function');
const tipp = { grid: true, interpolate: kannInterpolate, calc: kannCalc && kannInterpolate };
let variante = 'basis', technik = 'grid', exklusivAn = true;
// ── Werte-Anzeige je Variante und Technik ──
const WERTE = {
basis: {
grid: ['<b>::details-content</b> display: grid', 'grid-template-rows <b>0fr → 1fr</b>', 'Höhe <b>300 ms</b> ease-out', 'Deckkraft <b>400 ms</b> ease-out', 'content-visibility allow-discrete'],
interpolate: ['<b>interpolate-size: allow-keywords</b>', 'block-size <b>0 → auto</b>', 'auf <b>400 ms</b> ease-out', 'zu <b>500 ms</b> ease-in-out'],
calc: ['<b>@supports</b> (height: calc-size(auto, size))', 'height <b>0 → calc-size(auto, size)</b>', 'Höhe <b>300 ms</b> ease-out', 'Deckkraft <b>400 ms</b> ease-out'],
},
faq: {
grid: ['grid-template-rows <b>0fr → 1fr</b>', 'Höhe <b>200 ms</b>', 'Deckkraft <b>250 ms</b>', '<b>cubic-bezier(0.25, 0.46, 0.45, 0.94)</b>'],
interpolate: ['block-size <b>0 → auto</b>', 'auf und zu <b>200 ms</b>', '<b>cubic-bezier(0.25, 0.46, 0.45, 0.94)</b>'],
calc: ['height <b>0 → calc-size(auto, size)</b>', 'Höhe <b>200 ms</b>', 'Deckkraft <b>250 ms</b>', '<b>cubic-bezier(0.25, 0.46, 0.45, 0.94)</b>'],
},
leistungen: {
grid: ['grid-template-rows <b>0fr → 1fr</b>', 'auf <b>500 ms cubic-bezier(0.1, 0.9, 0.3, 1)</b>', 'zu <b>500 ms cubic-bezier(0.1, 0.6, 0.4, 1)</b>'],
interpolate: ['block-size <b>0 → auto</b>', 'auf <b>500 ms cubic-bezier(0.1, 0.9, 0.3, 1)</b>', 'zu <b>500 ms cubic-bezier(0.1, 0.6, 0.4, 1)</b>'],
calc: ['height <b>0 → calc-size(auto, size)</b>', 'auf <b>500 ms cubic-bezier(0.1, 0.9, 0.3, 1)</b>', 'zu <b>500 ms cubic-bezier(0.1, 0.6, 0.4, 1)</b>'],
},
};
function zeigeWerte() {
const teile = WERTE[variante][technik].slice();
if (!tipp[technik]) teile.push('<b>nicht unterstützt</b>: Grid-Rückfall');
if (variante === 'faq') {
teile.push(kannHighlight ? 'Treffer <b>::highlight()</b>' : 'Treffer: <b>ohne Markierung</b> (keine Highlight API)');
teile.push(kannScoped && kannMatch ? 'Filtern <b>element.startViewTransition 200 ms</b>' : 'Filtern: <b>sofort</b> (Rückfall ohne element-scoped View Transitions)');
}
if (variante === 'leistungen') teile.push(kannScoped ? 'Bild <b>figure.startViewTransition</b>, aus 500 ms, ein 750 ms + scale 1.04 → 1' : 'Bild: <b>Rückfall WAAPI</b>, 750 ms + scale 1.04 → 1');
if (reduziert()) teile.push('reduziert: <b>transition none</b>, keine View Transition');
werteZeile.innerHTML = teile.map(t => `<span>${t}</span>`).join('');
}
// ── Variante, Technik, exklusiv ──
function urlSchreiben() {
const u = new URL(location.href);
u.searchParams.set('v', variante);
history.replaceState(history.state, '', u);
}
function setzeVariante(v, schreiben = true) {
if (!VARIANTEN.includes(v)) v = VARIANTEN[0];
variante = v;
Object.entries(welten).forEach(([k, w]) => { w.hidden = k !== v; });
document.body.dataset.v = v;
vKnoepfe.forEach(k => k.setAttribute('aria-pressed', String(k.dataset.varianteWahl === v)));
exklusivKnopf.hidden = v === 'leistungen'; // Liste mit Bild ist immer exklusiv
if (v === 'leistungen') lPlatzieren();
if (schreiben) urlSchreiben();
zeigeWerte();
}
function setzeTechnik(t) {
technik = t;
listen.forEach(l => { l.dataset.technik = t; });
tKnoepfe.forEach(k => k.setAttribute('aria-pressed', String(k.dataset.technikWahl === t)));
zeigeWerte();
}
function namenSetzen() {
alleDetails.forEach(d => {
const g = d.dataset.gruppe;
const an = d.closest('[data-l-liste]') || (exklusivAn && !(d.closest('[data-f-inhalt]') && fSuchtGerade()));
if (an && g) d.setAttribute('name', g); else d.removeAttribute('name');
});
}
function exklusiv(an) { exklusivAn = an; exklusivKnopf.setAttribute('aria-pressed', String(an)); namenSetzen(); }
vKnoepfe.forEach(k => k.addEventListener('click', () => { const lief = html.classList.contains('vorfuehrung'); stoppen(); setzeVariante(k.dataset.varianteWahl); if (lief) vorfuehren(); }));
tKnoepfe.forEach(k => k.addEventListener('click', () => { stoppen(); setzeTechnik(k.dataset.technikWahl); }));
exklusivKnopf.addEventListener('click', () => { stoppen(); exklusiv(!exklusivAn); });
document.querySelectorAll('.aktionen a, .l-kopf a, .l-innen > a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
listen.forEach(l => l.addEventListener('pointerdown', e => { if (e.isTrusted) stoppen(); }));
// ── Variante FAQ: Suche, Treffer markieren, Sprunglinks ──
const fInhalt = document.querySelector('[data-f-inhalt]');
const fFeld = document.querySelector('[data-f-suche]');
const fLeeren = document.querySelector('[data-f-leeren]');
const fKbd = document.querySelector('[data-f-kbd]');
const fStatus = document.querySelector('[data-f-status]');
const fLeer = document.querySelector('[data-f-leer]');
const fThemen = [...fInhalt.querySelectorAll('.f-thema')];
const fFragen = [...fInhalt.querySelectorAll('.f-frage')];
const fSprung = [...document.querySelectorAll('[data-f-sprung]')];
const norm = t => t.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, ''); // ä → a, Länge bleibt gleich
const fSuchtGerade = () => !!(fFeld && fFeld.value.trim());
const ZAHL = n => n === 1 ? '1 Frage' : `${n} Fragen`;
function fMarkieren(woerter) {
if (!kannHighlight) return;
if (!woerter.length) { CSS.highlights.delete('f-treffer'); return; }
const bereiche = [];
fFragen.filter(d => !d.hidden).forEach(d => {
const gang = document.createTreeWalker(d, NodeFilter.SHOW_TEXT);
for (let n = gang.nextNode(); n; n = gang.nextNode()) {
if (n.parentElement.closest('.f-anker, .f-pfeil')) continue;
const t = norm(n.data);
woerter.forEach(w => {
for (let i = t.indexOf(w); i > -1; i = t.indexOf(w, i + w.length)) {
const r = new Range(); r.setStart(n, i); r.setEnd(n, i + w.length); bereiche.push(r);
}
});
}
});
CSS.highlights.set('f-treffer', new Highlight(...bereiche));
}
const fWoerter = begriff => norm(begriff).trim().split(/\s+/).filter(w => w.length > 1);
function fPlan(begriff) {
const woerter = fWoerter(begriff);
return new Set(fFragen.filter(d => woerter.every(w => norm(d.textContent).includes(w))));
}
function fFiltern(begriff) {
const woerter = fWoerter(begriff);
let treffer = 0, themen = 0;
fThemen.forEach(t => {
let n = 0;
t.querySelectorAll('.f-frage').forEach(d => {
const ok = woerter.every(w => norm(d.textContent).includes(w));
d.hidden = !ok; if (ok) n++;
});
t.hidden = n === 0;
t.querySelector('[data-f-thema-zahl]').textContent = ZAHL(n);
const link = fSprung.find(a => a.dataset.fSprung === t.id);
link.querySelector('[data-f-zahl]').textContent = n;
link.setAttribute('aria-disabled', String(n === 0));
treffer += n; if (n) themen++;
});
fLeer.hidden = treffer > 0;
fLeer.querySelector('[data-f-begriff]').textContent = begriff.trim();
fStatus.firstElementChild.innerHTML = woerter.length
? `<b>${treffer}</b> ${treffer === 1 ? 'Treffer' : 'Treffer'} in ${themen} ${themen === 1 ? 'Thema' : 'Themen'}`
: `<b>${treffer}</b> Fragen in ${themen} Themen`;
fLeeren.hidden = !begriff; fKbd.hidden = !!begriff;
namenSetzen();
fMarkieren(woerter);
return woerter.length && treffer <= 3 ? fFragen.filter(d => !d.hidden) : [];
}
let fUhr = null, fLauf = null;
function fSuchen(begriff, sofort) {
clearTimeout(fUhr);
const tun = () => {
let aufmachen = [];
const update = () => { aufmachen = fFiltern(begriff); if (!begriff.trim()) fFragen.forEach(d => { d.open = false; }); };
const oeffnen = () => aufmachen.forEach(d => { d.open = true; });
// Verbesserung: element-scoped View Transition nur auf der Fragenliste, Seite bleibt bedienbar
if (!reduziert() && kannScoped && kannMatch && variante === 'faq') {
if (fLauf) fLauf.skipTransition();
// Was gleich verschwindet, verliert vorher seinen Namen: es blendet mit dem Schnappschuss der Liste aus.
// (Chromium bricht element-scoped Übergänge sonst ab, wenn ein benanntes Element wegfällt.)
const bleibt = fPlan(begriff);
fFragen.forEach(d => { if (!d.hidden && !bleibt.has(d)) d.style.viewTransitionName = 'none'; });
fThemen.forEach(t => { if (!t.hidden && ![...t.querySelectorAll('.f-frage')].some(d => bleibt.has(d))) t.querySelector('.f-thema-kopf').style.viewTransitionName = 'none'; });
if (!fLeer.hidden && bleibt.size) fLeer.style.viewTransitionName = 'none';
const lauf = fLauf = fInhalt.startViewTransition(update);
lauf.ready.catch(() => {});
lauf.finished.then(oeffnen, oeffnen).finally(() => {
if (fLauf === lauf) fLauf = null;
fInhalt.querySelectorAll('[style*="view-transition-name"]').forEach(x => { x.style.viewTransitionName = ''; });
});
} else { update(); oeffnen(); }
};
if (sofort) tun(); else fUhr = setTimeout(tun, 140);
}
fFeld.addEventListener('input', () => { stoppen(); fSuchen(fFeld.value); });
fFeld.addEventListener('keydown', e => { if (e.key === 'Escape') { fFeld.value = ''; fSuchen('', true); } });
fLeeren.addEventListener('click', () => { fFeld.value = ''; fSuchen('', true); fFeld.focus(); });
document.querySelectorAll('[data-f-vorschlag]').forEach(b => b.addEventListener('click', () => { fFeld.value = b.dataset.fVorschlag; fSuchen(fFeld.value, true); }));
addEventListener('keydown', e => {
if (variante !== 'faq' || e.key !== '/' || e.target.closest('input, textarea')) return;
e.preventDefault(); fFeld.focus();
});
function hashSetzen(id) { const u = new URL(location.href); u.hash = id; history.replaceState(history.state, '', u); }
function hinScrollen(el) { el.scrollIntoView({ behavior: reduziert() ? 'auto' : 'smooth', block: 'start' }); }
fSprung.forEach(a => a.addEventListener('click', e => {
e.preventDefault(); stoppen();
const ziel = document.getElementById(a.dataset.fSprung);
hashSetzen(ziel.id); hinScrollen(ziel);
}));
function fZuFrage(id, scrollen = true) {
const d = document.getElementById(id);
if (!d) return;
if (d.hidden) { fFeld.value = ''; fSuchen('', true); }
d.open = true;
d.classList.add('f-ziel'); setTimeout(() => d.classList.remove('f-ziel'), 1600);
hashSetzen(id);
if (scrollen) hinScrollen(d);
}
document.querySelectorAll('[data-f-ziel]').forEach(b => b.addEventListener('click', () => { stoppen(); fZuFrage(b.dataset.fZiel); }));
document.querySelectorAll('.f-anker').forEach(a => a.addEventListener('click', e => { e.preventDefault(); hashSetzen(a.getAttribute('href').slice(1)); }));
// ── Variante Leistungen: ein Eintrag offen, Bild wechselt per element-scoped View Transition ──
const lListe = document.querySelector('[data-l-liste]');
const lEintraege = [...lListe.querySelectorAll('.l-eintrag')];
const lFigur = document.querySelector('[data-l-figur]');
const lBild = document.querySelector('[data-l-bild]');
const lUnterschrift = document.querySelector('[data-l-unterschrift]');
const schmal = matchMedia('(max-width: 860px)');
let lAktuell = 'wohnen';
function lPlatzieren() {
const offen = lEintraege.find(d => d.open);
if (schmal.matches && offen) offen.querySelector('[data-l-platz]').appendChild(lBild);
else if (!schmal.matches && lBild.parentElement !== lFigur) lFigur.prepend(lBild);
}
function lZeige(schluessel, abb, text) {
if (schluessel === lAktuell) return;
lAktuell = schluessel;
const tun = () => {
lBild.querySelectorAll('svg').forEach(s => s.toggleAttribute('data-an', s.dataset.bild === schluessel));
lUnterschrift.innerHTML = `<span>${abb}</span><span>${text}</span>`;
};
const imRaster = lBild.parentElement === lFigur;
if (reduziert()) tun();
else if (kannScoped && imRaster) lFigur.startViewTransition(tun);
else { // Rückfall: dieselbe Überblendung per WAAPI
tun();
const neu = lBild.querySelector('svg[data-an]');
neu.animate([{ opacity: 0, scale: 1.04 }, { opacity: 1, scale: 1 }], { duration: 750, easing: 'cubic-bezier(0.1, 0.9, 0.3, 1)' });
}
}
lEintraege.forEach(d => d.addEventListener('toggle', () => {
const offen = lEintraege.find(x => x.open);
if (offen) lZeige(offen.dataset.bildSchluessel, offen.dataset.abb, offen.dataset.unterschrift);
else lZeige('uebersicht', 'Lageplan', 'Alle Leistungen auf einen Blick');
lPlatzieren();
}));
schmal.addEventListener('change', lPlatzieren);
// ── Vorführung: ein gedachter Finger tippt, je nach Variante ──
let uhren = [];
const spaeter = (fn, ms) => uhren.push(setTimeout(fn, ms));
function ring(el) {
const r = el && el.querySelector('.tipp');
if (r && !reduziert() && r.animate) r.animate([{ opacity: .9, scale: .6 }, { opacity: 0, scale: 1.9 }], { duration: 600, easing: 'cubic-bezier(0, 0, 0.58, 1)' });
}
function antippen(e) {
ring(e);
const auf = !e.open;
if (auf && !e.hasAttribute('name')) e.parentElement.querySelectorAll('details').forEach(x => { if (x !== e) x.open = false; });
e.open = auf;
}
const ABLAUF = {
basis: { runde: 9800, schritte: [[400, 0], [2600, 1], [4600, 2], [6600, 3], [8600, -2]] },
leistungen: { runde: 9600, schritte: [[700, 1], [3000, 2], [5300, 3], [7600, 0]] },
};
function runde() {
if (variante === 'faq') return fRunde();
const a = ABLAUF[variante];
const eintraege = variante === 'basis' ? [...welten.basis.querySelectorAll('.eintrag')] : lEintraege;
a.schritte.forEach(([t, i]) => spaeter(() => {
if (i === -2) eintraege.forEach(e => { if (e.open) antippen(e); });
else antippen(eintraege[i]);
}, t));
spaeter(runde, a.runde);
}
function tippen(wort, start, schritt = 110) {
[...wort].forEach((_, i) => spaeter(() => { fFeld.value = wort.slice(0, i + 1); fSuchen(fFeld.value); }, start + i * schritt));
return start + wort.length * schritt;
}
function fRunde() {
const ende = tippen('export', 500);
spaeter(() => { fFeld.value = ''; fSuchen('', true); }, ende + 2800);
spaeter(() => fZuFrage('frage-server', false), ende + 3800);
spaeter(() => tippen('passkey', 0), ende + 6400);
spaeter(() => { fFeld.value = ''; fSuchen('', true); }, ende + 9600);
spaeter(fRunde, ende + 10400);
}
function stoppen() { uhren.forEach(clearTimeout); uhren = []; html.classList.remove('vorfuehrung'); }
function grundzustand() {
if (variante === 'basis') welten.basis.querySelectorAll('.eintrag').forEach((e, i) => { e.open = i === 0; });
if (variante === 'faq') { fFeld.value = ''; fSuchen('', true); fFragen.forEach(d => { d.open = false; }); }
if (variante === 'leistungen') lEintraege.forEach((e, i) => { e.open = i === 0; });
}
function neustart() { stoppen(); grundzustand(); setzeTechnik(technik); setzeVariante(variante, false); }
function vorfuehren() {
stoppen();
html.classList.add('vorfuehrung');
if (variante === 'basis') welten.basis.querySelectorAll('.eintrag').forEach(e => { e.open = false; });
if (variante === 'faq') { fFeld.value = ''; fSuchen('', true); fFragen.forEach(d => { d.open = false; }); }
if (variante === 'leistungen') lEintraege.forEach((e, i) => { e.open = i === 0; });
runde();
}
function pause() { uhren.forEach(clearTimeout); uhren = []; }
function weiter() { if (html.classList.contains('vorfuehrung') && !uhren.length) runde(); }
// Start: Variante aus der URL (?v=), sonst die erste
const v = new URLSearchParams(location.search).get('v');
setzeTechnik('grid');
exklusiv(true);
setzeVariante(VARIANTEN.includes(v) ? v : VARIANTEN[0], false);
if (variante === 'faq' && location.hash.startsWith('#frage-')) fZuFrage(location.hash.slice(1));
new MutationObserver(zeigeWerte).observe(html, { attributes: true, attributeFilter: ['class'] });
addEventListener('load', zeigeWerte);
})();
</script>
</body>
</html>