Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie
Fünf Objekte eines Jenaer Maklers als schmale Streifen; der gewählte wächst auf flex-grow 5 und deckt seine Szene auf, statt sie zu skalieren.
Mehrere schmale Bildstreifen stehen nebeneinander, alle mit flex: 1 1 0. Bei Hover oder Fokus wächst ein Streifen auf flex-grow 4 bis 6, die anderen werden schmaler. Das Bild ist mit object-fit: cover verankert und wird dadurch aufgedeckt statt skaliert. Im eingeklappten Zustand steht der Titel senkrecht, im aufgeklappten erscheint der Inhalt waagerecht mit kurzem Versatz. In der Klick-Variante bleibt der gewählte Streifen offen. In der Wellen-Variante wachsen auch die Nachbarn, abgestuft nach Abstand.
Alle Inhalte sind gleichzeitig angedeutet, einer steht im Fokus. Das ist kompakt und sehr direkt bedienbar. Weil das Bild aufgedeckt und nicht vergrößert wird, wirkt der Wechsel ruhig und edel. Die fließende Breitenänderung fühlt sich physisch an.
Wann einsetzen
Für 3 bis 7 gleichrangige Einträge mit starkem Bild: Projekte auf einer Startseite, Leistungen, Kategorien, Team, Standorte, ausgewählte Objekte.
Wann nicht
Bei mehr als etwa 6 bis 8 Einträgen. Wenn Text im Streifen gelesen werden muss, bevor er sich öffnet. Bei langen Texten in den Panels. Auf schmalen Bildschirmen ohne Umbau auf ein senkrechtes Akkordeon.
Varianten
- Horizontal mit Hover und Fokus (Desktop)
- Klick: der gewählte Streifen bleibt offen, Buttons mit aria-expanded
- Welle: Nachbarn wachsen abgestuft mit
- Senkrecht gestapelt für Mobil, Höhe per flex-grow, interpolate-size oder grid-template-rows 0fr → 1fr
- Natives details/summary mit ::details-content und interpolate-size: allow-keywords
- Vollbild-Hintergrund pro Eintrag beim Hover
- Als Inhalts-Sektion mit Text-Panels statt Bildern
Umsetzung
Reines CSS reicht: .panel { flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 0.7s cubic-bezier(0.625, 0.05, 0, 1) 50ms } .panel:is(:hover, :focus-within) { flex-grow: 5 }. Das Bild mit object-fit: cover und object-position: center füllen. Den Titel im eingeklappten Zustand mit writing-mode: sideways-lr setzen (Fallback vertical-rl plus Drehung). Den aufgeklappten Inhalt mit fester Breite anlegen, damit er beim Wachsen nicht neu umbricht, und 100 bis 150 ms gestaffelt einblenden. Fallstricke: ohne flex-basis 0 springen die Breiten je nach Inhalt; eine kurze transition-delay von 50 ms dämpft Sprünge beim schnellen Überfahren. Für Klick oder Welle setzt ein kleines Skript flex-grow pro Panel und aria-expanded. Die Produktion bei K72 arbeitet knapper: flex-grow 1 → 2 in 300 ms cubic-bezier(0.215, 0.61, 0.355, 1). Für ein senkrechtes FAQ: details name="gruppe" öffnet exklusiv, die Höhe animiert interpolate-size: allow-keywords mit ::details-content (Chromium).
Robust umsetzen
Telefon. Auf ein senkrechtes Akkordeon umstellen: Panels stapeln, das aktive wächst in der Höhe. Tippen statt Hover.
Ohne Bewegung. Breite sofort wechseln oder in höchstens 150 ms. Inhalte nur einblenden, ohne Versatz.
Barrierefrei. Jedes Panel braucht einen Button mit aria-expanded und aria-controls. :focus-within muss dasselbe auslösen wie :hover. Links in eingeklappten Panels mit inert aus der Tab-Reihenfolge nehmen. Gedrehten Text mit writing-mode statt rotate setzen, so bleibt er auswählbar. Bildinhalte nicht nur visuell vermitteln, die Eckdaten stehen als Text im Panel.
Code
<!DOCTYPE html>
<!--
Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie
Fundus · Galerien & Slider · https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/
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>Horizontale Akkordeon-Panels · 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: 'Libre Caslon Display'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/libre-caslon-display@latest/latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: '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; }
@font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
:root {
/* Welt: Saalbogen Immobilien, Jena (Rezept immobilien-diskret-hochwertig) */
--grund: #FBF9F4; --sand: #EFE8DF; --marke: #12364F; --text: #2F3133; --meta: #74716C; --linie: #D8D2C8;
--cta: #ED7F1A; --nacht: #0B1A26; --hell: #F7F2EA;
/* Akkordeon (Variante „Hover“; JS setzt die Werte je Variante) */
--kurve: cubic-bezier(0.625, 0.05, 0, 1);
--dauer: 700ms; --verz: 50ms; --text-verz: 120ms; --text-dauer: 600ms;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grund); color: var(--text); font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100svh; padding: clamp(18px, 2.6vw, 38px) clamp(16px, 3.6vw, 56px); display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 34px); }
.mono { font: 500 11px/1.45 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.label { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
/* Kopf der Seite */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: clamp(14px, 1.8vw, 22px); border-bottom: 1px solid var(--linie); }
.marke { display: flex; align-items: baseline; gap: 14px; color: var(--marke); text-decoration: none; }
.marke b { font-weight: 600; font-size: 15px; letter-spacing: .34em; }
.marke span { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--meta); }
.nav { display: flex; gap: clamp(18px, 2.4vw, 34px); list-style: none; font-size: 15px; }
.nav a { color: var(--text); text-decoration: none; }
.nav a:hover { color: var(--marke); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cta { font: 600 14px/1 'Hanken Grotesk', sans-serif; color: #1C1712; background: var(--cta); padding: 13px 18px; border-radius: 2px; text-decoration: none; white-space: nowrap; transition: background-color 200ms cubic-bezier(0.165, 0.84, 0.44, 1); }
.cta:hover { background: #F49447; }
.abschnitt { display: grid; grid-template-columns: 1fr minmax(0, 34ch); align-items: end; gap: 16px 48px; }
.abschnitt .label { color: var(--meta); margin-bottom: 14px; }
h2 { font: 400 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem)/1.04 'Libre Caslon Display', Georgia, serif; letter-spacing: -.005em; color: var(--marke); }
.intro { font-size: 1.0625rem; line-height: 1.55; color: var(--text); }
/* ===== Das Muster: horizontales Akkordeon ===== */
.akkordeon { list-style: none; display: flex; gap: 6px; height: clamp(360px, 57vh, 600px); }
.panel {
position: relative; overflow: hidden; border-radius: 2px; background: var(--nacht);
flex: 1 1 0; min-width: 0; /* Basis 0: Breiten hängen nur an flex-grow, nicht am Inhalt */
transition: flex-grow var(--dauer) var(--kurve) var(--verz);
}
/* Bild verankert: SVG mit „slice“ (wie object-fit: cover) – die Szene wird aufgedeckt, nicht skaliert */
.szene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(8, 20, 31, .92) 0%, rgba(8, 20, 31, .74) 30%, rgba(8, 20, 31, .3) 56%, rgba(8, 20, 31, 0) 76%); }
.panel::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background-color: rgba(8, 20, 31, .26); mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
transition: background-color var(--dauer) var(--kurve) var(--verz); }
.panel.offen::after { background-color: rgba(8, 20, 31, 0); }
.knopf {
position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
padding: clamp(18px, 2vw, 26px) 0; color: var(--hell); text-align: left; font: inherit;
}
.knopf:focus-visible { outline: 2px solid var(--hell); outline-offset: -8px; }
.knopf .nr { font-size: 12px; font-weight: 600; letter-spacing: .09em; font-variant-numeric: tabular-nums; }
.knopf .ort { font: 400 2rem/1 'Libre Caslon Display', Georgia, serif; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
@supports (writing-mode: sideways-lr) { .knopf .ort { writing-mode: sideways-lr; transform: none; } }
.knopf .art { display: none; }
.knopf > span { transition: opacity 200ms linear; }
.panel.offen .knopf > span { opacity: 0; }
.panel.offen .knopf { cursor: default; }
.info {
position: absolute; z-index: 3; left: clamp(22px, 2.4vw, 36px); bottom: clamp(22px, 2.4vw, 34px);
width: clamp(21rem, 30vw, 29rem); /* feste Breite: der Text bricht beim Aufklappen nicht neu um */
color: var(--hell); pointer-events: none; container-type: inline-size;
}
.info .z { opacity: 0; translate: 0 14px; transition: opacity 150ms linear, translate 0s linear 150ms; }
.panel.offen .info .z { opacity: 1; translate: 0 0;
transition: opacity 500ms linear, translate var(--text-dauer) var(--kurve);
transition-delay: calc(var(--verz) + var(--text-verz) * var(--k)); }
.info .z:nth-child(1) { --k: 1; } .info .z:nth-child(2) { --k: 2; } .info .z:nth-child(3) { --k: 3; } .info .z:nth-child(4) { --k: 4; } .info .z:nth-child(5) { --k: 4; }
.lage { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; opacity: .82; }
.titel { font: 400 clamp(2rem, 1.2rem + 1.6vw, 2.75rem)/1.06 'Libre Caslon Display', Georgia, serif; margin: 12px 0 18px; text-wrap: balance; }
.fakten { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 24px; padding-top: 14px; border-top: 1px solid rgba(247, 242, 234, .28); }
.fakten dt { font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.fakten dd { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; margin-top: 3px; white-space: nowrap; }
@container (max-width: 400px) { .fakten { grid-template-columns: repeat(2, auto); gap: 10px 32px; } }
.energie { font-size: 12px; line-height: 1.5; opacity: .66; margin-top: 12px; font-variant-numeric: tabular-nums; }
.expose { display: inline-flex; gap: 8px; margin-top: 14px; padding-block: 2px; font-size: 15px; font-weight: 600; color: var(--hell); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; pointer-events: auto; }
.expose:hover span { translate: 3px 0; }
.expose span { transition: translate 200ms cubic-bezier(0.165, 0.84, 0.44, 1); }
.expose:focus-visible { outline: 2px solid var(--hell); outline-offset: 4px; }
/* Tastatur: Fokus im Text des Panels zeigt ihn sofort, nicht erst nach der gestaffelten Einblendung */
.panel.offen .info:focus-within .z { opacity: 1; translate: 0 0; transition: none; }
@media (forced-colors: active) { button, [role=button], [role=tab], [role=switch] { border: 1px solid ButtonText !important; } }
/* Bedienleiste der Demo */
.regler { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: -8px; }
.modi { display: flex; align-items: center; gap: 6px; }
.modi > span { margin-right: 6px; }
.modi button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--meta); background: none; border: 1px solid var(--linie); border-radius: 999px; height: 28px; padding: 0 12px; cursor: pointer; transition: color 150ms, border-color 150ms; }
.modi button:hover { color: var(--marke); border-color: var(--marke); }
.modi button[aria-pressed='true'] { background: var(--marke); color: var(--grund); border-color: var(--marke); }
.werte b { font-weight: 500; color: var(--marke); }
.fuss { font-size: 12px; line-height: 1.5; color: var(--meta); border-top: 1px solid var(--linie); padding-top: 14px; }
/* Vorführung: gezeichneter Zeiger */
.zeiger { position: fixed; left: 0; top: 0; z-index: 9; width: 20px; height: 20px; pointer-events: none; display: none; }
.vorfuehrung .zeiger { display: block; }
.ring { position: fixed; left: 0; top: 0; z-index: 8; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid var(--hell); border-radius: 50%; pointer-events: none; opacity: 0; }
.ring.an { animation: ring 600ms cubic-bezier(0.215, 0.61, 0.355, 1); }
@keyframes ring { from { opacity: .9; scale: .3; } to { opacity: 0; scale: 1.2; } }
/* Vorschau 960 × 720: nur die Bühne */
.vorschau body { overflow: hidden; height: 100svh; padding: 26px 34px; gap: 20px; }
.vorschau .nav, .vorschau .intro, .vorschau .fuss, .vorschau .energie { display: none; }
.vorschau .abschnitt { grid-template-columns: 1fr; }
.vorschau .akkordeon { height: auto; flex: 1; min-height: 0; }
/* Telefon: senkrecht stapeln, Höhe statt Breite */
@media (max-width: 720px) {
.nav, .marke span { display: none; }
.cta { padding: 11px 14px; font-size: 13px; }
.abschnitt { grid-template-columns: 1fr; }
.akkordeon { flex-direction: column; height: 660px; }
.knopf { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 18px; }
.knopf .ort { writing-mode: horizontal-tb; transform: none; }
.knopf .art { display: block; margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; opacity: .8; }
.panel::before { background: linear-gradient(to top, rgba(8, 20, 31, .94) 0%, rgba(8, 20, 31, .78) 45%, rgba(8, 20, 31, .42) 78%, rgba(8, 20, 31, .2) 100%); }
.info { left: 18px; right: 18px; bottom: 18px; width: auto; }
.titel { font-size: 2rem; margin: 8px 0 12px; }
.fakten { gap: 8px 18px; }
.fakten dd { font-size: 16px; }
.expose { margin-top: 10px; }
.regler { flex-direction: column; align-items: flex-start; }
.modi { flex-wrap: wrap; }
}
/* Touch: kein Hover, Tippen öffnet; ohne Hover-Zittern braucht es keine Verzögerung */
@media (hover: none) {
.panel, .panel::after { transition-delay: 0s; }
.knopf { cursor: default; }
}
/* Reduzierte Bewegung: Breite springt, Text blendet in 150 ms ein */
.reduziert .panel, .reduziert .panel::after { transition: none; }
.reduziert .info .z, .reduziert .panel.offen .info .z { translate: none; transition: opacity 150ms linear; transition-delay: 0s; }
.reduziert .ring { display: none; }
</style>
</head>
<body>
<header class="kopf">
<a class="marke" href="#start"><b>SAALBOGEN</b><span>Immobilien · Jena</span></a>
<ul class="nav">
<li><a href="#kaufen">Kaufen</a></li><li><a href="#verkaufen">Verkaufen</a></li><li><a href="#markt">Marktbericht</a></li><li><a href="#buero">Büro</a></li>
</ul>
<a class="cta" href="#bewerten">Immobilie bewerten</a>
</header>
<section class="abschnitt" aria-labelledby="ueberschrift">
<div>
<p class="label">Aktuelle Angebote · 05 Objekte</p>
<h2 id="ueberschrift">Zwischen Saale und Kernbergen.</h2>
</div>
<p class="intro">Fünf Adressen, die wir gerade im Auftrag ihrer Eigentümer begleiten. Weitere Objekte zeigen wir nach einem persönlichen Gespräch, diskret und ohne Portal.</p>
</section>
<ul class="akkordeon" data-akkordeon>
<li class="panel" data-panel>
<svg class="szene" viewBox="0 0 1100 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><defs><linearGradient id="s1h" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#A9BCC6"/><stop offset=".55" stop-color="#D6D8D1"/><stop offset="1" stop-color="#ECE2CF"/></linearGradient><linearGradient id="s1f" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#EEE2CC"/><stop offset="1" stop-color="#DCCBAE"/></linearGradient><linearGradient id="s1g" x1="0" y1="0" x2="0.4" y2="1"><stop offset="0" stop-color="#8FA2AC"/><stop offset=".35" stop-color="#4E5E68"/><stop offset="1" stop-color="#2B363E"/></linearGradient><radialGradient id="s1l" cx=".15" cy=".05" r=".9"><stop offset="0" stop-color="#FFF4DC" stop-opacity=".55"/><stop offset="1" stop-color="#FFF4DC" stop-opacity="0"/></radialGradient></defs><rect width="1100" height="800" fill="url(#s1h)"/><path d="M0 520C150 476 290 492 420 474S690 430 820 458 1010 480 1100 452V800H0Z" fill="#9FAA9F" opacity=".55"/><circle cx="157.5" cy="512.7" r="58" fill="#7B8A70"/><circle cx="48.5" cy="452.3" r="64.4" fill="#64745E"/><circle cx="146.5" cy="483.9" r="74.9" fill="#64745E"/><circle cx="53.8" cy="421.3" r="58.7" fill="#6F7F68"/><circle cx="155.2" cy="473.6" r="73" fill="#64745E"/><circle cx="143.8" cy="357.4" r="49.7" fill="#7B8A70"/><circle cx="268.4" cy="464" r="70.2" fill="#64745E"/><circle cx="34.8" cy="454.7" r="71.7" fill="#7B8A70"/><circle cx="170.3" cy="378.8" r="67.7" fill="#7B8A70"/><circle cx="21.3" cy="474.4" r="71.7" fill="#6F7F68"/><circle cx="241.1" cy="455.4" r="55" fill="#7B8A70"/><circle cx="50.9" cy="471" r="56.1" fill="#7B8A70"/><circle cx="201.1" cy="374.9" r="62.4" fill="#64745E"/><circle cx="34.2" cy="390.1" r="66.4" fill="#6F7F68"/><circle cx="237.8" cy="358" r="66.1" fill="#6F7F68"/><circle cx="126.9" cy="389.1" r="62.6" fill="#7B8A70"/><circle cx="44.4" cy="403.9" r="53.7" fill="#7B8A70"/><circle cx="145.6" cy="469.9" r="61" fill="#7B8A70"/><circle cx="1009.7" cy="428.3" r="74.3" fill="#5E6E58"/><circle cx="989.8" cy="423.5" r="63.5" fill="#5E6E58"/><circle cx="993.7" cy="417.6" r="68.9" fill="#6A7A63"/><circle cx="913.4" cy="486.5" r="67.1" fill="#5E6E58"/><circle cx="852.7" cy="426.2" r="60.1" fill="#6A7A63"/><circle cx="1048.2" cy="478.4" r="78.5" fill="#5E6E58"/><circle cx="965.2" cy="478.6" r="71.1" fill="#5E6E58"/><circle cx="931.5" cy="530.5" r="77" fill="#5E6E58"/><circle cx="896.2" cy="502" r="62.3" fill="#788768"/><circle cx="966.3" cy="404.1" r="79.2" fill="#788768"/><circle cx="967.1" cy="514.5" r="71.8" fill="#5E6E58"/><circle cx="927.7" cy="449" r="59.9" fill="#5E6E58"/><circle cx="1055" cy="434.8" r="67.9" fill="#6A7A63"/><circle cx="913.7" cy="487.1" r="55" fill="#788768"/><circle cx="923.8" cy="379.2" r="70.8" fill="#5E6E58"/><circle cx="934.1" cy="397.1" r="65.3" fill="#788768"/><circle cx="1073.6" cy="462.9" r="78.9" fill="#5E6E58"/><circle cx="937.2" cy="390.9" r="68.5" fill="#6A7A63"/><polygon points="292,384 512,384 494,330 310,330" fill="#4F5963"/><rect x="300" y="384" width="200" height="290" fill="url(#s1f)"/><polygon points="628,364 872,364 850,298 650,298" fill="#4A535C"/><rect x="638" y="364" width="224" height="310" fill="#D3C2A5"/><rect x="726" y="250" width="44" height="54" fill="#4A535C"/><polygon points="720,252 776,252 748,226" fill="#3E474F"/><rect x="736" y="262" width="24" height="34" fill="#F4EDE0"/><rect x="741" y="267" width="14" height="24" fill="url(#s1g)"/><rect x="731" y="296" width="34" height="5" fill="#F4EDE0" opacity=".9"/><rect x="488" y="300" width="152" height="374" fill="#E9DCC4"/><polygon points="476,302 564,168 652,302" fill="#46505A"/><polygon points="564,168 652,302 600,302" fill="#3B444D"/><path d="M564 168V128" stroke="#3B444D" stroke-width="3"/><circle cx="564" cy="126" r="4" fill="#3B444D"/><rect x="300" y="384" width="200" height="7" fill="#F5EDDF"/><rect x="638" y="364" width="224" height="7" fill="#F5EDDF"/><rect x="488" y="300" width="152" height="7" fill="#F5EDDF"/><rect x="300" y="520" width="562" height="7" fill="#F5EDDF"/><rect x="296" y="650" width="570" height="7" fill="#F5EDDF"/><rect x="334" y="412" width="44" height="92" fill="#F4EDE0"/><rect x="339" y="417" width="34" height="82" fill="url(#s1g)"/><path d="M356 416V500M338 445.1H374" stroke="#F4EDE0" stroke-width="3"/><rect x="329" y="504" width="54" height="5" fill="#F4EDE0" opacity=".9"/><rect x="334" y="546" width="44" height="92" fill="#F4EDE0"/><rect x="339" y="551" width="34" height="82" fill="url(#s1g)"/><path d="M356 550V634M338 579.1H374" stroke="#F4EDE0" stroke-width="3"/><rect x="329" y="638" width="54" height="5" fill="#F4EDE0" opacity=".9"/><rect x="424" y="412" width="44" height="92" fill="#F4EDE0"/><rect x="429" y="417" width="34" height="82" fill="url(#s1g)"/><path d="M446 416V500M428 445.1H464" stroke="#F4EDE0" stroke-width="3"/><rect x="419" y="504" width="54" height="5" fill="#F4EDE0" opacity=".9"/><rect x="424" y="546" width="44" height="92" fill="#F4EDE0"/><rect x="429" y="551" width="34" height="82" fill="url(#s1g)"/><path d="M446 550V634M428 579.1H464" stroke="#F4EDE0" stroke-width="3"/><rect x="419" y="638" width="54" height="5" fill="#F4EDE0" opacity=".9"/><path d="M540 434V346A24 24 0 0 1 588 346V434Z" fill="#F4EDE0"/><path d="M545 429V346A19 19 0 0 1 583 346V429Z" fill="url(#s1g)"/><path d="M564 326V430M544 362.3H584" stroke="#F4EDE0" stroke-width="3"/><rect x="535" y="434" width="58" height="5" fill="#F4EDE0" opacity=".9"/><rect x="540" y="450" width="48" height="64" fill="#F4EDE0"/><rect x="545" y="455" width="38" height="54" fill="url(#s1g)"/><path d="M564 454V510M544 473H584" stroke="#F4EDE0" stroke-width="3"/><rect x="535" y="514" width="58" height="5" fill="#F4EDE0" opacity=".9"/><rect x="668" y="392" width="40" height="88" fill="#F4EDE0"/><rect x="673" y="397" width="30" height="78" fill="url(#s1g)"/><path d="M688 396V476M672 423.7H704" stroke="#F4EDE0" stroke-width="3"/><rect x="663" y="480" width="50" height="5" fill="#F4EDE0" opacity=".9"/><rect x="668" y="540" width="40" height="88" fill="#F4EDE0"/><rect x="673" y="545" width="30" height="78" fill="url(#s1g)"/><path d="M688 544V624M672 571.7H704" stroke="#F4EDE0" stroke-width="3"/><rect x="663" y="628" width="50" height="5" fill="#F4EDE0" opacity=".9"/><rect x="738" y="392" width="40" height="88" fill="#F4EDE0"/><rect x="743" y="397" width="30" height="78" fill="url(#s1g)"/><path d="M758 396V476M742 423.7H774" stroke="#F4EDE0" stroke-width="3"/><rect x="733" y="480" width="50" height="5" fill="#F4EDE0" opacity=".9"/><rect x="738" y="540" width="40" height="88" fill="#F4EDE0"/><rect x="743" y="545" width="30" height="78" fill="url(#s1g)"/><path d="M758 544V624M742 571.7H774" stroke="#F4EDE0" stroke-width="3"/><rect x="733" y="628" width="50" height="5" fill="#F4EDE0" opacity=".9"/><rect x="808" y="392" width="40" height="88" fill="#F4EDE0"/><rect x="813" y="397" width="30" height="78" fill="url(#s1g)"/><path d="M828 396V476M812 423.7H844" stroke="#F4EDE0" stroke-width="3"/><rect x="803" y="480" width="50" height="5" fill="#F4EDE0" opacity=".9"/><rect x="808" y="540" width="40" height="88" fill="#F4EDE0"/><rect x="813" y="545" width="30" height="78" fill="url(#s1g)"/><path d="M828 544V624M812 571.7H844" stroke="#F4EDE0" stroke-width="3"/><rect x="803" y="628" width="50" height="5" fill="#F4EDE0" opacity=".9"/><path d="M538 674V600A26 26 0 0 1 590 600V674Z" fill="#5A3F2E"/><path d="M564 600V674" stroke="#4A3324" stroke-width="2"/><rect x="526" y="662" width="76" height="8" fill="#CDBEA3"/><rect x="518" y="670" width="92" height="8" fill="#C4B496"/><rect x="296" y="656" width="570" height="20" fill="#C6B597"/><rect y="676" width="1100" height="124" fill="#8E9A7D"/><polygon points="530,678 598,678 700,800 430,800" fill="#D9CEB8"/><rect x="-20" y="700" width="460" height="46" rx="20" fill="#5D6C55"/><rect x="690" y="700" width="440" height="46" rx="20" fill="#5D6C55"/><g stroke="#2C322F" stroke-width="2.4" opacity=".85"><path d="M0 742H446M684 742H1100M0 712H446M684 712H1100"/><path d="M6 776V700"/><path d="M21 776V700"/><path d="M36 776V700"/><path d="M51 776V700"/><path d="M66 776V700"/><path d="M81 776V700"/><path d="M96 776V700"/><path d="M111 776V700"/><path d="M126 776V700"/><path d="M141 776V700"/><path d="M156 776V700"/><path d="M171 776V700"/><path d="M186 776V700"/><path d="M201 776V700"/><path d="M216 776V700"/><path d="M231 776V700"/><path d="M246 776V700"/><path d="M261 776V700"/><path d="M276 776V700"/><path d="M291 776V700"/><path d="M306 776V700"/><path d="M321 776V700"/><path d="M336 776V700"/><path d="M351 776V700"/><path d="M366 776V700"/><path d="M381 776V700"/><path d="M396 776V700"/><path d="M411 776V700"/><path d="M426 776V700"/><path d="M441 776V700"/><path d="M690 776V700"/><path d="M705 776V700"/><path d="M720 776V700"/><path d="M735 776V700"/><path d="M750 776V700"/><path d="M765 776V700"/><path d="M780 776V700"/><path d="M795 776V700"/><path d="M810 776V700"/><path d="M825 776V700"/><path d="M840 776V700"/><path d="M855 776V700"/><path d="M870 776V700"/><path d="M885 776V700"/><path d="M900 776V700"/><path d="M915 776V700"/><path d="M930 776V700"/><path d="M945 776V700"/><path d="M960 776V700"/><path d="M975 776V700"/><path d="M990 776V700"/><path d="M1005 776V700"/><path d="M1020 776V700"/><path d="M1035 776V700"/><path d="M1050 776V700"/><path d="M1065 776V700"/><path d="M1080 776V700"/><path d="M1095 776V700"/></g><rect width="1100" height="800" fill="url(#s1l)"/></svg>
<button class="knopf" type="button" id="knopf-01" aria-expanded="false" aria-controls="info-01">
<span class="nr">01</span><span class="ort">Damenviertel</span><span class="art">Villa</span>
</button>
<div class="info" id="info-01" role="region" aria-labelledby="knopf-01" inert>
<p class="z lage">01 · Jena-Ost · Damenviertel</p>
<h3 class="z titel">Gründerzeitvilla am Landgrafen</h3>
<dl class="z fakten"><div><dt>Zimmer</dt><dd>8</dd></div><div><dt>Wohnfläche</dt><dd>312 m²</dd></div><div><dt>Grundstück</dt><dd>1.140 m²</dd></div><div><dt>Kaufpreis</dt><dd>1.950.000 €</dd></div></dl>
<p class="z energie">Bedarfsausweis 168 kWh/(m²·a) · Klasse F · Gas · Baujahr 1903</p>
<a class="z expose" href="#expose-01">Exposé ansehen <span aria-hidden="true">→</span></a>
</div>
</li>
<li class="panel" data-panel>
<svg class="szene" viewBox="0 0 1100 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><defs><linearGradient id="s2h" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8F9CA5"/><stop offset="1" stop-color="#C8CCCA"/></linearGradient><pattern id="s2z" width="44" height="22" patternUnits="userSpaceOnUse"><rect width="44" height="22" fill="#93503B"/><rect x="1" y="1" width="20" height="9" fill="#9A5741"/><rect x="23" y="12" width="20" height="9" fill="#8A4936"/><path d="M0 10.5H44M0 21.5H44M22 0V11M0 11V22M44 11V22" stroke="#6E3829" stroke-width="1.4"/></pattern><linearGradient id="s2s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1C0F0B" stop-opacity=".45"/></linearGradient><linearGradient id="s2g" x1="0" y1="0" x2=".3" y2="1"><stop offset="0" stop-color="#9AA7AE"/><stop offset=".5" stop-color="#5B6870"/><stop offset="1" stop-color="#36414A"/></linearGradient><linearGradient id="s2w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#F1D29E"/><stop offset="1" stop-color="#B98451"/></linearGradient></defs><rect width="1100" height="800" fill="url(#s2h)"/><ellipse cx="663" cy="58" rx="221" ry="19" fill="#fff" opacity=".18"/><ellipse cx="148" cy="44" rx="213" ry="19" fill="#fff" opacity=".18"/><ellipse cx="1039" cy="74" rx="129" ry="20" fill="#fff" opacity=".18"/><ellipse cx="888" cy="127" rx="137" ry="25" fill="#fff" opacity=".18"/><ellipse cx="185" cy="128" rx="135" ry="21" fill="#fff" opacity=".18"/><ellipse cx="457" cy="35" rx="221" ry="19" fill="#fff" opacity=".18"/><rect x="528" y="34" width="54" height="170" fill="url(#s2z)"/><rect x="528" y="34" width="54" height="170" fill="#2A1510" opacity=".18"/><rect x="522" y="30" width="66" height="12" fill="#5E3024"/><rect x="528" y="96" width="54" height="6" fill="#6E3829"/><rect y="168" width="1100" height="632" fill="url(#s2z)"/><rect y="168" width="1100" height="632" fill="url(#s2s)"/><rect y="160" width="1100" height="26" fill="#6A3527"/><rect y="186" width="1100" height="6" fill="#5A2C20"/><rect x="392" y="222" width="316" height="42" fill="#CDBFA6"/><rect x="392" y="222" width="316" height="42" fill="none" stroke="#B3A386" stroke-width="2"/><text x="550" y="250" text-anchor="middle" font-family="Hanken Grotesk, sans-serif" font-size="17" font-weight="600" letter-spacing="7" fill="#5C4A39">WERK II · 1911</text><path d="M78 306Q212.0 262 346 306V314H78Z" fill="#7B3F2F"/><rect x="92" y="300" width="240" height="404" fill="#25292C"/><rect x="99" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="99" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="99" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="99" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="99" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="99" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="156.5" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="156.5" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="156.5" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="156.5" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="156.5" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="156.5" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="214" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="214" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="214" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="214" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="214" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="214" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="271.5" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="271.5" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="271.5" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="271.5" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="271.5" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="271.5" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="82" y="704" width="260" height="12" fill="#C9B89A"/><polygon points="112,305 182,305 112,460" fill="#fff" opacity=".1"/><path d="M212.0 300V704" stroke="#25292C" stroke-width="6"/><path d="M416 306Q550.0 262 684 306V314H416Z" fill="#7B3F2F"/><rect x="430" y="300" width="240" height="404" fill="#25292C"/><rect x="437" y="307" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="437" y="372.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="437" y="438.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="437" y="504" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="437" y="569.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="437" y="635.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="494.5" y="307" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="494.5" y="372.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="494.5" y="438.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="494.5" y="504" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="494.5" y="569.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="494.5" y="635.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="552" y="307" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="552" y="372.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="552" y="438.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="552" y="504" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="552" y="569.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="552" y="635.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="609.5" y="307" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="609.5" y="372.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="609.5" y="438.3" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="609.5" y="504" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="609.5" y="569.7" width="53.5" height="61.7" fill="url(#s2w)"/><rect x="609.5" y="635.3" width="53.5" height="61.7" fill="url(#s2w)"/><g opacity=".72"><path d="M500 300V430" stroke="#3A2A1C" stroke-width="2"/><path d="M478 450Q500 418 522 450Z" fill="#2E2118"/><ellipse cx="500" cy="456" rx="34" ry="8" fill="#FFE7B8" opacity=".9"/><path d="M570 480H656M570 540H656M570 600H656" stroke="#5B3F27" stroke-width="5"/><rect x="580" y="504" width="12" height="34" fill="#4B3422"/><rect x="596" y="512" width="9" height="26" fill="#6B4A2E"/><rect x="620" y="562" width="26" height="36" fill="#4B3422"/><path d="M460 704V630Q474 600 490 632V704Z" fill="#3D2B1D"/></g><rect x="420" y="704" width="260" height="12" fill="#D9C7A6"/><path d="M550.0 300V704" stroke="#25292C" stroke-width="6"/><path d="M754 306Q888.0 262 1022 306V314H754Z" fill="#7B3F2F"/><rect x="768" y="300" width="240" height="404" fill="#25292C"/><rect x="775" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="775" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="775" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="775" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="775" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="775" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="832.5" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="832.5" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="832.5" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="832.5" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="832.5" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="832.5" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="890" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="890" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="890" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="890" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="890" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="890" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="947.5" y="307" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="947.5" y="372.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="947.5" y="438.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="947.5" y="504" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="947.5" y="569.7" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="947.5" y="635.3" width="53.5" height="61.7" fill="url(#s2g)"/><rect x="758" y="704" width="260" height="12" fill="#C9B89A"/><polygon points="788,305 858,305 788,460" fill="#fff" opacity=".1"/><path d="M888.0 300V704" stroke="#25292C" stroke-width="6"/><rect y="752" width="1100" height="48" fill="#9F978C"/><rect y="750" width="1100" height="4" fill="#7E766C"/></svg>
<button class="knopf" type="button" id="knopf-02" aria-expanded="false" aria-controls="info-02">
<span class="nr">02</span><span class="ort">Werk II</span><span class="art">Loft</span>
</button>
<div class="info" id="info-02" role="region" aria-labelledby="knopf-02" inert>
<p class="z lage">02 · Jena-Zentrum · ehemaliges Optikwerk</p>
<h3 class="z titel">Loft hinter Stahlfenstern</h3>
<dl class="z fakten"><div><dt>Zimmer</dt><dd>3</dd></div><div><dt>Wohnfläche</dt><dd>164 m²</dd></div><div><dt>Raumhöhe</dt><dd>4,20 m</dd></div><div><dt>Kaufpreis</dt><dd>895.000 €</dd></div></dl>
<p class="z energie">Verbrauchsausweis 92 kWh/(m²·a) · Klasse C · Fernwärme · Baujahr 1911</p>
<a class="z expose" href="#expose-02">Exposé ansehen <span aria-hidden="true">→</span></a>
</div>
</li>
<li class="panel" data-panel>
<svg class="szene" viewBox="0 0 1100 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><defs><linearGradient id="s3h" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#232B45"/><stop offset=".42" stop-color="#5E4C6C"/><stop offset=".72" stop-color="#C47D6A"/><stop offset="1" stop-color="#EDB57F"/></linearGradient><radialGradient id="s3s" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#FCE3B6" stop-opacity=".95"/><stop offset=".25" stop-color="#F6C68E" stop-opacity=".55"/><stop offset="1" stop-color="#F6C68E" stop-opacity="0"/></radialGradient><linearGradient id="s3b" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3A3340"/><stop offset="1" stop-color="#1D1A22"/></linearGradient><linearGradient id="s3t" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#E8B486" stop-opacity=".22"/><stop offset="1" stop-color="#E8B486" stop-opacity="0"/></linearGradient></defs><rect width="1100" height="800" fill="url(#s3h)"/><circle cx="560" cy="452" r="230" fill="url(#s3s)"/><circle cx="560" cy="456" r="34" fill="#FDE8C2"/><path d="M0 492L90 468 200 440 300 430C360 428 400 446 450 468L520 486 600 484 690 448 770 420 900 410 1000 428 1100 442V800H0Z" fill="#7A5F70"/><path d="M80 466C260 440 340 448 440 476M700 450C800 424 940 422 1100 442" stroke="#E9C6B4" stroke-width="1.2" opacity="0.3" fill="none"/><path d="M100 476C260 450 340 458 440 486M700 460C800 434 940 432 1100 452" stroke="#E9C6B4" stroke-width="1.2" opacity="0.3" fill="none"/><path d="M120 486C260 460 340 468 440 496M700 470C800 444 940 442 1100 462" stroke="#E9C6B4" stroke-width="1.2" opacity="0.2" fill="none"/><path d="M140 496C260 470 340 478 440 506M700 480C800 454 940 452 1100 472" stroke="#E9C6B4" stroke-width="1.2" opacity="0.2" fill="none"/><path d="M160 506C260 480 340 488 440 516M700 490C800 464 940 462 1100 482" stroke="#E9C6B4" stroke-width="1.2" opacity="0.1" fill="none"/><path d="M0 540C120 520 260 528 380 516S640 520 760 506 980 512 1100 500V800H0Z" fill="#4A3E55"/><circle cx="501.4" cy="582.7" r="2.3" fill="#FFD79E" opacity="0.7"/><circle cx="558" cy="584.4" r="1.3" fill="#FFD79E" opacity="0.7"/><circle cx="682.5" cy="597.2" r="1.1" fill="#FFD79E" opacity="0.6"/><circle cx="132.5" cy="598.2" r="2" fill="#FFD79E" opacity="0.5"/><circle cx="1041.8" cy="607.8" r="1.9" fill="#FFD79E" opacity="0.8"/><circle cx="200.6" cy="548.9" r="1.7" fill="#FFD79E" opacity="0.5"/><circle cx="234" cy="563" r="1" fill="#FFD79E" opacity="0.7"/><circle cx="489.3" cy="600.2" r="1.7" fill="#FFD79E" opacity="0.8"/><circle cx="549.8" cy="589.1" r="1.6" fill="#FFD79E" opacity="0.6"/><circle cx="1057.6" cy="609.7" r="2.2" fill="#FFD79E" opacity="0.8"/><circle cx="361.6" cy="562.2" r="1.4" fill="#FFD79E" opacity="0.5"/><circle cx="821.6" cy="572.8" r="2.2" fill="#FFD79E" opacity="0.6"/><circle cx="1017.2" cy="600.5" r="1" fill="#FFD79E" opacity="0.6"/><circle cx="968.5" cy="577.1" r="2.4" fill="#FFD79E" opacity="0.6"/><circle cx="114.5" cy="587" r="2.1" fill="#FFD79E" opacity="0.6"/><circle cx="128.9" cy="568.6" r="2.3" fill="#FFD79E" opacity="0.8"/><circle cx="160.4" cy="563.3" r="1.1" fill="#FFD79E" opacity="0.5"/><circle cx="853" cy="559" r="1.8" fill="#FFD79E" opacity="0.7"/><circle cx="234.5" cy="593.4" r="1.2" fill="#FFD79E" opacity="0.8"/><circle cx="158.8" cy="574.1" r="1.3" fill="#FFD79E" opacity="0.6"/><circle cx="1030.3" cy="597.8" r="1.4" fill="#FFD79E" opacity="0.9"/><circle cx="254.9" cy="572.4" r="2.2" fill="#FFD79E" opacity="0.8"/><circle cx="142.3" cy="609.3" r="1.3" fill="#FFD79E" opacity="0.6"/><circle cx="828.1" cy="568.4" r="1.4" fill="#FFD79E" opacity="0.5"/><circle cx="131.9" cy="584.1" r="1.3" fill="#FFD79E" opacity="0.8"/><circle cx="419.1" cy="576.1" r="2.3" fill="#FFD79E" opacity="0.7"/><circle cx="626.1" cy="601.7" r="1.3" fill="#FFD79E" opacity="0.5"/><circle cx="966.6" cy="598.7" r="1.3" fill="#FFD79E" opacity="0.5"/><circle cx="794.2" cy="606.3" r="1.3" fill="#FFD79E" opacity="0.9"/><circle cx="939.8" cy="585.4" r="1.6" fill="#FFD79E" opacity="0.5"/><circle cx="79.5" cy="607.7" r="1.3" fill="#FFD79E" opacity="0.8"/><circle cx="302.1" cy="599.1" r="1.8" fill="#FFD79E" opacity="0.6"/><circle cx="218.9" cy="592.7" r="1.1" fill="#FFD79E" opacity="0.6"/><circle cx="610.6" cy="600.8" r="1.9" fill="#FFD79E" opacity="0.6"/><circle cx="975.7" cy="560.6" r="1" fill="#FFD79E" opacity="0.6"/><circle cx="494.6" cy="551.7" r="1.2" fill="#FFD79E" opacity="0.6"/><circle cx="623.6" cy="556.2" r="1.5" fill="#FFD79E" opacity="0.9"/><circle cx="1040.1" cy="588.7" r="2" fill="#FFD79E" opacity="0.7"/><circle cx="183.2" cy="550.2" r="1" fill="#FFD79E" opacity="0.9"/><circle cx="755" cy="607.7" r="1" fill="#FFD79E" opacity="0.8"/><circle cx="531.9" cy="593.3" r="1.4" fill="#FFD79E" opacity="0.9"/><circle cx="116.8" cy="581.9" r="2" fill="#FFD79E" opacity="0.9"/><circle cx="791.8" cy="591.6" r="2.1" fill="#FFD79E" opacity="0.9"/><circle cx="398.9" cy="590.5" r="2.3" fill="#FFD79E" opacity="0.9"/><circle cx="465.5" cy="597" r="2.2" fill="#FFD79E" opacity="0.7"/><circle cx="677.5" cy="571.7" r="1.8" fill="#FFD79E" opacity="0.8"/><circle cx="121.8" cy="587.6" r="2.4" fill="#FFD79E" opacity="0.9"/><circle cx="782.8" cy="572.1" r="2" fill="#FFD79E" opacity="0.7"/><circle cx="489.3" cy="600" r="1.1" fill="#FFD79E" opacity="0.8"/><circle cx="70.4" cy="585.3" r="1.7" fill="#FFD79E" opacity="0.6"/><circle cx="752.3" cy="578.8" r="1.9" fill="#FFD79E" opacity="0.9"/><circle cx="300.9" cy="548.7" r="1.4" fill="#FFD79E" opacity="0.8"/><circle cx="246.6" cy="558.5" r="2.3" fill="#FFD79E" opacity="0.8"/><circle cx="490.8" cy="603.3" r="1.5" fill="#FFD79E" opacity="0.8"/><circle cx="242.5" cy="574.7" r="2.1" fill="#FFD79E" opacity="0.9"/><circle cx="937.9" cy="571.8" r="1.8" fill="#FFD79E" opacity="0.6"/><circle cx="178.9" cy="578.8" r="2.2" fill="#FFD79E" opacity="0.9"/><circle cx="765.4" cy="606.9" r="1.4" fill="#FFD79E" opacity="0.5"/><circle cx="499.7" cy="565.1" r="1.3" fill="#FFD79E" opacity="0.7"/><circle cx="678.2" cy="578.6" r="1.4" fill="#FFD79E" opacity="0.9"/><circle cx="1041.7" cy="576.1" r="1.1" fill="#FFD79E" opacity="0.5"/><circle cx="930.3" cy="550.6" r="2" fill="#FFD79E" opacity="0.7"/><circle cx="355.2" cy="597.1" r="1" fill="#FFD79E" opacity="0.5"/><circle cx="503.9" cy="549.5" r="2.2" fill="#FFD79E" opacity="0.6"/><circle cx="183.7" cy="550.9" r="1.9" fill="#FFD79E" opacity="0.7"/><circle cx="682.6" cy="588.6" r="2.1" fill="#FFD79E" opacity="0.9"/><circle cx="738.2" cy="560.4" r="1.7" fill="#FFD79E" opacity="0.5"/><circle cx="51" cy="577.3" r="2" fill="#FFD79E" opacity="0.5"/><circle cx="317.8" cy="569.4" r="2" fill="#FFD79E" opacity="0.7"/><circle cx="666.7" cy="594.9" r="1.6" fill="#FFD79E" opacity="0.8"/><path d="M0 600C200 590 420 604 640 596S960 590 1100 598V800H0Z" fill="#2F2838"/><rect y="636" width="1100" height="164" fill="url(#s3b)"/><polygon points="0,636 1100,636 1100,800 0,800" fill="url(#s3t)"/><path d="M287.5 636L-200 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M319.0 636L-110 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M350.5 636L-20 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M382.0 636L70 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M413.5 636L160 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M445.0 636L250 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M476.5 636L340 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M508.0 636L430 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M539.5 636L520 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M571.0 636L610 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M602.5 636L700 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M634.0 636L790 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M665.5 636L880 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M697.0 636L970 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M728.5 636L1060 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M760.0 636L1150 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M791.5 636L1240 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><path d="M823.0 636L1330 800" stroke="#4B4350" stroke-width="1" opacity=".55"/><rect y="560" width="1100" height="76" fill="#D9D3E6" opacity=".07"/><rect y="556" width="1100" height="5" fill="#9B92A4"/><rect x="110" y="556" width="5" height="80" fill="#8B8295"/><rect x="400" y="556" width="5" height="80" fill="#8B8295"/><rect x="700" y="556" width="5" height="80" fill="#8B8295"/><rect x="990" y="556" width="5" height="80" fill="#8B8295"/><path d="M92 690L250 690 330 620 344 628 270 704 96 704Z" fill="#17141B"/><path d="M118 704V748M250 704V748" stroke="#17141B" stroke-width="6"/><rect x="838" y="664" width="170" height="96" fill="#1B181F"/><path d="M850 666Q872.7492711882269 564.3604829946466 893.2603827809162 563.342630589592" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M856 666Q835.2749555798483 582.6768077153254 868.5548175627931 574.5979215234786" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M862 666Q855.1009550601299 588.4407022046572 899.9320826401192 567.8060344544574" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M868 666Q892.878448391061 583.1853866303218 883.1322565841182 532.2936618770501" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M874 666Q886.4283964671557 600.9172768884548 888.1616306634475 563.0597173229534" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M880 666Q863.9446084318187 604.9991868399912 928.0493151305932 578.6415113403757" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M886 666Q888.0695696376109 599.5393565044812 868.0394726558649 574.5993831984408" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M892 666Q911.9238739078961 577.4253521504697 850.277258304607 546.4540715554598" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M898 666Q900.81690793931 598.4116747510644 896.7447492180453 521.7046217106109" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M904 666Q921.3118489428068 563.2028430808091 933.9859866761449 530.3737784325132" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M910 666Q900.7602423313906 599.395295797291 874.0500198830381 528.9205332099605" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M916 666Q916.9253953876478 596.178319349219 949.9976442440498 561.3622926653161" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M922 666Q946.9618542289478 584.6290648650196 966.9154374666982 525.1614104618903" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M928 666Q912.3991933510276 586.3331702197995 907.0169677370486 563.7305920846154" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M934 666Q941.7767839521439 586.1391362228301 968.3623399043173 553.5982653155238" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M940 666Q929.4550635039265 579.0608490090015 974.5260566995069 574.0315022808766" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M946 666Q929.6614160615916 602.5385617245548 992.8440365379394 551.4535566894542" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M952 666Q956.0873884846886 570.0483612757487 955.5903678195779 550.1904462299954" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M958 666Q963.8927539371974 561.3877758899038 1004.9404861658461 550.9610662984938" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M964 666Q958.432700324534 600.0534283330297 970.2866688683115 549.4624267935255" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M970 666Q980.6952586273788 563.2950114201105 973.8715440473965 544.8264452460928" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M976 666Q1001.5844443799709 606.1709366754291 952.9213790046256 548.3896899937257" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M982 666Q961.1101849900344 581.6838795322533 1013.5717055914473 574.0333281099877" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M988 666Q986.6858321234508 575.860732312729 957.1451716568613 557.0736928415661" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M994 666Q1017.8151579988933 566.4730725072721 1021.9288843104841 521.3671563724987" stroke="#2A2531" stroke-width="2.4" fill="none"/><path d="M1000 666Q982.869969730896 571.3629661544534 1018.7034035355456 539.3249349550617" stroke="#2A2531" stroke-width="2.4" fill="none"/><rect width="1100" height="34" fill="#18151C"/><ellipse cx="180" cy="34" rx="12" ry="3" fill="#FFE2B0" opacity=".8"/><ellipse cx="460" cy="34" rx="12" ry="3" fill="#FFE2B0" opacity=".8"/><ellipse cx="740" cy="34" rx="12" ry="3" fill="#FFE2B0" opacity=".8"/><ellipse cx="1020" cy="34" rx="12" ry="3" fill="#FFE2B0" opacity=".8"/></svg>
<button class="knopf" type="button" id="knopf-03" aria-expanded="false" aria-controls="info-03">
<span class="nr">03</span><span class="ort">Kernberge</span><span class="art">Penthouse</span>
</button>
<div class="info" id="info-03" role="region" aria-labelledby="knopf-03" inert>
<p class="z lage">03 · Jena-Ost · Blick auf die Kernberge</p>
<h3 class="z titel">Penthouse über dem Saaletal</h3>
<dl class="z fakten"><div><dt>Zimmer</dt><dd>4</dd></div><div><dt>Wohnfläche</dt><dd>148 m²</dd></div><div><dt>Dachterrasse</dt><dd>62 m²</dd></div><div><dt>Kaufpreis</dt><dd>1.240.000 €</dd></div></dl>
<p class="z energie">Bedarfsausweis 31 kWh/(m²·a) · Klasse A+ · Wärmepumpe · Baujahr 2025</p>
<a class="z expose" href="#expose-03">Exposé ansehen <span aria-hidden="true">→</span></a>
</div>
</li>
<li class="panel" data-panel>
<svg class="szene" viewBox="0 0 1100 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><defs><linearGradient id="s4h" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#121C33"/><stop offset=".55" stop-color="#2E4064"/><stop offset="1" stop-color="#6D7896"/></linearGradient><linearGradient id="s4w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#F8D9A2"/><stop offset="1" stop-color="#D8995A"/></linearGradient><radialGradient id="s4g" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#F2B670" stop-opacity=".42"/><stop offset="1" stop-color="#F2B670" stop-opacity="0"/></radialGradient><pattern id="s4b" width="14" height="40" patternUnits="userSpaceOnUse"><rect width="14" height="40" fill="#2B2522"/><path d="M13 0V40" stroke="#221D1B" stroke-width="2"/></pattern></defs><rect width="1100" height="800" fill="url(#s4h)"/><circle cx="181.4" cy="210" r="1.2" fill="#E8ECF5" opacity="0.5"/><circle cx="237.6" cy="239.9" r="1.3" fill="#E8ECF5" opacity="0.5"/><circle cx="555.6" cy="78.5" r="0.6" fill="#E8ECF5" opacity="0.5"/><circle cx="643.9" cy="30.1" r="1.3" fill="#E8ECF5" opacity="0.4"/><circle cx="256" cy="22.3" r="1.5" fill="#E8ECF5" opacity="0.7"/><circle cx="962.5" cy="188.6" r="0.6" fill="#E8ECF5" opacity="0.4"/><circle cx="547.3" cy="43.6" r="1.5" fill="#E8ECF5" opacity="0.5"/><circle cx="170.3" cy="247.1" r="0.7" fill="#E8ECF5" opacity="0.8"/><circle cx="498.4" cy="170.1" r="0.9" fill="#E8ECF5" opacity="0.5"/><circle cx="205.6" cy="20.8" r="1.4" fill="#E8ECF5" opacity="0.4"/><circle cx="858.3" cy="70.5" r="1.5" fill="#E8ECF5" opacity="0.7"/><circle cx="830.3" cy="231.2" r="1.1" fill="#E8ECF5" opacity="0.7"/><circle cx="134.7" cy="148.1" r="1.3" fill="#E8ECF5" opacity="0.4"/><circle cx="1015.5" cy="267.4" r="1" fill="#E8ECF5" opacity="0.5"/><circle cx="496.5" cy="121.9" r="1.5" fill="#E8ECF5" opacity="0.5"/><circle cx="29.5" cy="37" r="1.2" fill="#E8ECF5" opacity="0.8"/><circle cx="545.6" cy="152.5" r="1.1" fill="#E8ECF5" opacity="0.7"/><circle cx="244.2" cy="186.6" r="1.1" fill="#E8ECF5" opacity="0.6"/><circle cx="198.7" cy="59.3" r="0.9" fill="#E8ECF5" opacity="0.8"/><circle cx="381.3" cy="183.2" r="0.9" fill="#E8ECF5" opacity="0.3"/><circle cx="72.2" cy="246" r="1.3" fill="#E8ECF5" opacity="0.5"/><circle cx="751.7" cy="206" r="1.4" fill="#E8ECF5" opacity="0.8"/><circle cx="447.7" cy="296.8" r="1.5" fill="#E8ECF5" opacity="0.6"/><circle cx="971.5" cy="152.4" r="0.9" fill="#E8ECF5" opacity="0.4"/><circle cx="963.8" cy="57.1" r="0.7" fill="#E8ECF5" opacity="0.7"/><circle cx="851.3" cy="150.1" r="1.4" fill="#E8ECF5" opacity="0.3"/><circle cx="283.8" cy="94.1" r="1" fill="#E8ECF5" opacity="0.3"/><circle cx="76.4" cy="108" r="1.4" fill="#E8ECF5" opacity="0.8"/><circle cx="820.4" cy="148.9" r="0.8" fill="#E8ECF5" opacity="0.8"/><circle cx="578.2" cy="221.3" r="0.6" fill="#E8ECF5" opacity="0.4"/><circle cx="922.1" cy="240.6" r="1.4" fill="#E8ECF5" opacity="0.6"/><circle cx="468.7" cy="178.5" r="1.4" fill="#E8ECF5" opacity="0.4"/><circle cx="587.8" cy="90" r="1.3" fill="#E8ECF5" opacity="0.3"/><circle cx="753.8" cy="286.7" r="0.6" fill="#E8ECF5" opacity="0.6"/><circle cx="708.2" cy="257" r="1.1" fill="#E8ECF5" opacity="0.4"/><circle cx="446.2" cy="288" r="1.4" fill="#E8ECF5" opacity="0.3"/><circle cx="104.3" cy="37.2" r="0.6" fill="#E8ECF5" opacity="0.5"/><circle cx="154.9" cy="261.5" r="1.2" fill="#E8ECF5" opacity="0.3"/><circle cx="592.5" cy="104" r="1" fill="#E8ECF5" opacity="0.4"/><circle cx="182.7" cy="63.3" r="0.9" fill="#E8ECF5" opacity="0.6"/><circle cx="605" cy="23.4" r="1.2" fill="#E8ECF5" opacity="0.7"/><circle cx="851.7" cy="239.3" r="0.6" fill="#E8ECF5" opacity="0.5"/><circle cx="69.8" cy="231.5" r="0.8" fill="#E8ECF5" opacity="0.6"/><circle cx="278.2" cy="212.1" r="0.9" fill="#E8ECF5" opacity="0.3"/><circle cx="427.8" cy="99.7" r="1.4" fill="#E8ECF5" opacity="0.4"/><circle cx="553.4" cy="169.3" r="1.5" fill="#E8ECF5" opacity="0.3"/><path d="M0 470C160 430 300 456 460 440S760 400 900 420 1040 436 1100 430V800H0Z" fill="#232C42"/><path d="M0 560L300 590 700 606 1100 616V800H0Z" fill="#141923"/><polygon points="296,436 520,412 520,604 296,604" fill="url(#s4b)"/><polygon points="290,438 526,410 526,418 290,446" fill="#454B55"/><rect x="500" y="388" width="324" height="216" fill="url(#s4b)"/><rect x="494" y="380" width="336" height="10" fill="#454B55"/><rect x="824" y="466" width="140" height="138" fill="url(#s4b)"/><rect x="820" y="460" width="148" height="8" fill="#454B55"/><path d="M760 380V348" stroke="#3B4049" stroke-width="5"/><rect x="326" y="470" width="150" height="104" fill="url(#s4w)"/><g opacity=".6"><path d="M350 574V528H420V574" fill="#7A4F2C"/><rect x="430" y="490" width="6" height="84" fill="#7A4F2C"/><ellipse cx="433" cy="490" rx="16" ry="6" fill="#FFF0D0"/></g><rect x="536" y="434" width="200" height="146" fill="url(#s4w)"/><g opacity=".62"><path d="M560 580V546Q560 534 572 534H664Q676 534 676 546V580Z" fill="#6E4527"/><path d="M698 448H736M698 488H736M698 528H736" stroke="#7A4F2C" stroke-width="4"/><path d="M620 434V474" stroke="#5B3B22" stroke-width="2"/><ellipse cx="620" cy="482" rx="22" ry="9" fill="#FFF1D2"/></g><path d="M636 434V580" stroke="#2B2522" stroke-width="4"/><rect x="764" y="440" width="34" height="140" fill="url(#s4w)" opacity=".9"/><rect x="860" y="510" width="22" height="94" fill="#E9B676" opacity=".55"/><ellipse cx="600" cy="628" rx="300" ry="40" fill="url(#s4g)"/><ellipse cx="400" cy="620" rx="150" ry="26" fill="url(#s4g)"/><rect x="290" y="602" width="680" height="6" fill="#0E1118"/><path d="M150 640L144 520.1" stroke="#0C1018" stroke-width="9" stroke-linecap="round"/><path d="M144 520.1L142.7 434.8" stroke="#0C1018" stroke-width="5.9" stroke-linecap="round"/><path d="M142.7 434.8L132.8 367.7" stroke="#0C1018" stroke-width="3.9" stroke-linecap="round"/><path d="M132.8 367.7L145.3 318.7" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M145.3 318.7L158.7 284.8" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M158.7 284.8L168.2 261.9" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M168.2 261.9L179.4 249.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M168.2 261.9L162.3 247.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M158.7 284.8L174.3 267.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M174.3 267.8L190.2 258.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M174.3 267.8L182.9 252.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M174.3 267.8L181.6 253.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M145.3 318.7L133.5 289" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M133.5 289L141 267.9" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M141 267.9L152.4 256.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M141 267.9L145.6 253.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M133.5 289L116.1 275.3" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M116.1 275.3L107.3 261.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M116.1 275.3L102.1 274" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M116.1 275.3L101.5 269.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M132.8 367.7L104 323.3" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M104 323.3L77.2 295.3" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M77.2 295.3L73.4 265.1" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M73.4 265.1L82.2 246.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M73.4 265.1L69.8 242.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M73.4 265.1L57.3 253.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M77.2 295.3L65.7 267.4" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M65.7 267.4L71 248.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M65.7 267.4L53.6 249" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M77.2 295.3L53.8 277.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M53.8 277.8L35.2 274.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M53.8 277.8L35.5 266.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M104 323.3L83.1 291.2" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M83.1 291.2L79.4 261.1" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M79.4 261.1L83.8 237.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M79.4 261.1L64.2 242.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M79.4 261.1L70.7 243" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M83.1 291.2L59.4 275" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M59.4 275L39.7 270.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M59.4 275L41.2 264.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M142.7 434.8L148 379.4" stroke="#0C1018" stroke-width="3.9" stroke-linecap="round"/><path d="M148 379.4L162.5 345.2" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M162.5 345.2L186.4 327.9" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M186.4 327.9L207.2 321.9" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M207.2 321.9L219.6 331.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M207.2 321.9L222.4 326.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M207.2 321.9L216.7 311.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M186.4 327.9L207.3 324.2" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M207.3 324.2L218.7 316.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M207.3 324.2L220.3 321.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M162.5 345.2L178.9 323.8" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M178.9 323.8L192.5 313.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M192.5 313.8L204.8 309" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M192.5 313.8L203.4 308.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M178.9 323.8L183.7 304.9" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M183.7 304.9L184.9 292.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M183.7 304.9L185.6 292.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M183.7 304.9L175.9 292.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M178.9 323.8L179.1 306.2" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M179.1 306.2L181.3 293.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M179.1 306.2L176.7 294" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M148 379.4L136.4 339.9" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M136.4 339.9L144.4 314.4" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M144.4 314.4L159.5 301.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M159.5 301.8L168.9 293.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M159.5 301.8L173.6 296.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M144.4 314.4L152.8 298.2" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M152.8 298.2L165 293.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M152.8 298.2L154.1 284.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M144.4 314.4L151.2 298.7" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M151.2 298.7L158.7 289.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M151.2 298.7L153.4 286.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M151.2 298.7L151.9 287.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M136.4 339.9L116 322" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M116 322L99.6 310.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M99.6 310.8L96.6 297.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M99.6 310.8L85.9 304" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M116 322L102.3 312" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M102.3 312L94 304.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M102.3 312L89.6 308.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M102.3 312L89.5 308.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M144 520.1L85 462" stroke="#0C1018" stroke-width="5.9" stroke-linecap="round"/><path d="M85 462L24.6 437.2" stroke="#0C1018" stroke-width="3.9" stroke-linecap="round"/><path d="M24.6 437.2L-15.4 429.7" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M-15.4 429.7L-41 414.7" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-41 414.7L-61.3 406.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-61.3 406.8L-71.8 392.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-61.3 406.8L-76.2 403.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-41 414.7L-57 401" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-57 401L-69.4 390.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-57 401L-71.1 397.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-57 401L-66.1 389.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-15.4 429.7L-41.9 417.7" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-41.9 417.7L-60.4 403.5" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-60.4 403.5L-76.5 396.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-60.4 403.5L-77.9 402.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-60.4 403.5L-75.7 403" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-41.9 417.7L-60.5 410.2" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-60.5 410.2L-65.6 398" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-60.5 410.2L-73.5 403.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-60.5 410.2L-75 414.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-41.9 417.7L-61.2 419.3" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-61.2 419.3L-73.9 421.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-61.2 419.3L-73.4 420" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-61.2 419.3L-69.7 428.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M24.6 437.2L-19.5 442.9" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M-19.5 442.9L-49.3 439.8" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-49.3 439.8L-73.3 440.3" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-73.3 440.3L-84.3 430.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-73.3 440.3L-90.6 446.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-73.3 440.3L-91.6 441.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-49.3 439.8L-70.5 439.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-70.5 439.8L-83.7 438.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-70.5 439.8L-82.4 446.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-70.5 439.8L-84.9 441.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-19.5 442.9L-48.6 454.1" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-48.6 454.1L-67.2 468.5" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-67.2 468.5L-82.4 477.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-67.2 468.5L-79.6 477.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-67.2 468.5L-68.9 485.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-48.6 454.1L-71.4 461.6" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-71.4 461.6L-86.2 456.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-71.4 461.6L-86.7 472.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-71.4 461.6L-88.8 464.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M85 462L31.5 437.1" stroke="#0C1018" stroke-width="3.9" stroke-linecap="round"/><path d="M31.5 437.1L9.3 398.2" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M9.3 398.2L-0.5 371.9" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-0.5 371.9L-11 354.9" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-11 354.9L-11.2 342" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-11 354.9L-13.5 340.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-0.5 371.9L-4.9 354.5" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-4.9 354.5L-12.6 345.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-4.9 354.5L-12.7 344.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-0.5 371.9L-13.8 356.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-13.8 356.8L-21.7 344.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-13.8 356.8L-21 345.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-13.8 356.8L-28.2 353.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M9.3 398.2L-9.5 372.4" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-9.5 372.4L-17.5 352.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-17.5 352.8L-25.2 338.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-17.5 352.8L-29.9 342.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-17.5 352.8L-24.3 341" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-9.5 372.4L-13.3 351.4" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-13.3 351.4L-7 335.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-13.3 351.4L-15.2 337.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-13.3 351.4L-11.9 337.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M31.5 437.1L-0.8 409.5" stroke="#0C1018" stroke-width="2.6" stroke-linecap="round"/><path d="M-0.8 409.5L-9.7 379.6" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-9.7 379.6L-0.1 362" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-0.1 362L7.2 351.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-0.1 362L8.8 350.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-9.7 379.6L-5.4 359.5" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-5.4 359.5L2.3 345.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-5.4 359.5L-10.4 345.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-9.7 379.6L-28.9 369.5" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-28.9 369.5L-32 354.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-28.9 369.5L-44.2 367.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-28.9 369.5L-40.8 358.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-0.8 409.5L-28.5 403.9" stroke="#0C1018" stroke-width="1.7" stroke-linecap="round"/><path d="M-28.5 403.9L-48.1 398.9" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-48.1 398.9L-59 390.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-48.1 398.9L-61.5 397.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-28.5 403.9L-46.5 409.8" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-46.5 409.8L-58.6 408.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-46.5 409.8L-60.6 413.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-28.5 403.9L-45.1 411.5" stroke="#0C1018" stroke-width="1.1" stroke-linecap="round"/><path d="M-45.1 411.5L-57.3 411.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-45.1 411.5L-56.4 420.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M-45.1 411.5L-58.6 414.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1000 650L1008.8 540.4" stroke="#0C1018" stroke-width="8" stroke-linecap="round"/><path d="M1008.8 540.4L995.8 463.1" stroke="#0C1018" stroke-width="5.3" stroke-linecap="round"/><path d="M995.8 463.1L1024.7 407.9" stroke="#0C1018" stroke-width="3.5" stroke-linecap="round"/><path d="M1024.7 407.9L1065.3 381.3" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M1065.3 381.3L1088.7 361.7" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1088.7 361.7L1107.2 351.3" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1107.2 351.3L1120.7 347.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1107.2 351.3L1121.2 350" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1088.7 361.7L1097.1 342.7" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1097.1 342.7L1099.4 326.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1097.1 342.7L1104.7 330.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1088.7 361.7L1091.1 341.9" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1091.1 341.9L1091.8 327.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1091.1 341.9L1093.9 326.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1065.3 381.3L1077.6 352.5" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1077.6 352.5L1079.6 331.8" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1079.6 331.8L1088 320.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1079.6 331.8L1073.1 319.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1079.6 331.8L1078.1 316.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1077.6 352.5L1088.1 334.4" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1088.1 334.4L1093.3 318.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1088.1 334.4L1086.1 318.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1024.7 407.9L1012.9 365.3" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M1012.9 365.3L1001.8 335.8" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1001.8 335.8L993.3 315.5" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M993.3 315.5L987.1 301.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M993.3 315.5L996.1 299.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M993.3 315.5L981.1 308.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1001.8 335.8L1000.9 313.6" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1000.9 313.6L1000.2 299.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1000.9 313.6L997.8 299" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1012.9 365.3L1001.1 334.4" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1001.1 334.4L991.5 310" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M991.5 310L992.5 293.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M991.5 310L983.3 291.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1001.1 334.4L983.9 318.7" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M983.9 318.7L971 310.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M983.9 318.7L973.9 305.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M983.9 318.7L967.3 314.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1001.1 334.4L994.4 314" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M994.4 314L996.3 297.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M994.4 314L996.4 299.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M995.8 463.1L1000.5 409.8" stroke="#0C1018" stroke-width="3.5" stroke-linecap="round"/><path d="M1000.5 409.8L1019.4 382.3" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M1019.4 382.3L1027.6 362.2" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1027.6 362.2L1029.5 345.5" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1029.5 345.5L1031.1 334.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1029.5 345.5L1034 333.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1027.6 362.2L1032.5 348.3" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1032.5 348.3L1040.6 340.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1032.5 348.3L1038.9 338.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1032.5 348.3L1038 340" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1019.4 382.3L1037.5 364.1" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1037.5 364.1L1042.7 348.7" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1042.7 348.7L1050.4 339.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1042.7 348.7L1042.4 338" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1042.7 348.7L1040.9 335.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1037.5 364.1L1040.4 344.2" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1040.4 344.2L1037.7 330" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1040.4 344.2L1032.7 330.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1000.5 409.8L981.7 372.4" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M981.7 372.4L970.3 349" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M970.3 349L955.8 337.3" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M955.8 337.3L946.7 330" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M955.8 337.3L941.1 338" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M970.3 349L960.7 332.8" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M960.7 332.8L950 322.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M960.7 332.8L950.3 324.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M960.7 332.8L953.4 321.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M981.7 372.4L957.8 349.2" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M957.8 349.2L959.2 323.1" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M959.2 323.1L953.5 304.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M959.2 323.1L955.8 303.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M957.8 349.2L942.3 329.4" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M942.3 329.4L936.3 314.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M942.3 329.4L939.9 313.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M942.3 329.4L931.7 315.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M957.8 349.2L938.3 332.4" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M938.3 332.4L933.9 316.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M938.3 332.4L924.2 322.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M938.3 332.4L920.9 327.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1008.8 540.4L1010.2 467.6" stroke="#0C1018" stroke-width="5.3" stroke-linecap="round"/><path d="M1010.2 467.6L992.7 413.9" stroke="#0C1018" stroke-width="3.5" stroke-linecap="round"/><path d="M992.7 413.9L1000.5 377.9" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M1000.5 377.9L1009.7 350.2" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1009.7 350.2L1028 338" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1028 338L1040.1 328.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1028 338L1039.2 328.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1028 338L1036.6 327.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1009.7 350.2L1010.5 327.8" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1010.5 327.8L1006.7 312.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1010.5 327.8L1017.7 311.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1000.5 377.9L1010.7 357.3" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1010.7 357.3L1018.1 341.9" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1018.1 341.9L1029.2 335.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1018.1 341.9L1023.5 332.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1018.1 341.9L1022.5 331" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1010.7 357.3L1021.4 344.1" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1021.4 344.1L1026.9 333" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1021.4 344.1L1024.2 332.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1021.4 344.1L1024.6 331.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M992.7 413.9L995.5 375.3" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M995.5 375.3L1005.4 350.9" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1005.4 350.9L1016.7 337.3" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1016.7 337.3L1019.9 326.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1016.7 337.3L1026.2 330" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1005.4 350.9L1005.8 333.4" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1005.8 333.4L1010.7 322" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1005.8 333.4L998 323.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1005.4 350.9L1015.4 337.6" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1015.4 337.6L1021.8 327.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1015.4 337.6L1026.8 330.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1015.4 337.6L1020.6 327.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M995.5 375.3L982.3 347.4" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M982.3 347.4L984.6 325.2" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M984.6 325.2L997.4 313.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M984.6 325.2L988.2 311.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M984.6 325.2L977.9 310.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M982.3 347.4L965.6 337" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M965.6 337L963.7 321.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M965.6 337L952.4 334.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M965.6 337L951.8 331.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1010.2 467.6L1018 412.4" stroke="#0C1018" stroke-width="3.5" stroke-linecap="round"/><path d="M1018 412.4L1010.5 378.1" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M1010.5 378.1L1000.1 352.6" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1000.1 352.6L1007.3 334.3" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1007.3 334.3L1015.9 325.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1007.3 334.3L1012.1 320.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1000.1 352.6L985.5 337.7" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M985.5 337.7L978.1 324.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M985.5 337.7L979.6 323" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1000.1 352.6L985.1 342.1" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M985.1 342.1L980.5 329.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M985.1 342.1L974.6 335.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M985.1 342.1L971.7 345.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1010.5 378.1L1002.5 351.9" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M1002.5 351.9L1004.6 330.9" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M1004.6 330.9L1006 316.8" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1004.6 330.9L1007.4 314.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1004.6 330.9L1008.6 317.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1002.5 351.9L989.4 334.9" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M989.4 334.9L987.6 318.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M989.4 334.9L981.5 322.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M989.4 334.9L977.9 327.7" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1018 412.4L1002.1 379.8" stroke="#0C1018" stroke-width="2.3" stroke-linecap="round"/><path d="M1002.1 379.8L989 360.8" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M989 360.8L981.9 345.9" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M981.9 345.9L980.5 333.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M981.9 345.9L974.6 338.2" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M981.9 345.9L971.6 341.1" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M989 360.8L972.1 353.9" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M972.1 353.9L965.6 341.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M972.1 353.9L961.6 344.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M972.1 353.9L961.5 345.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M989 360.8L980.8 347.5" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M980.8 347.5L976.7 336.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M980.8 347.5L973.4 337.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M980.8 347.5L975.1 339.3" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1002.1 379.8L986.1 361.4" stroke="#0C1018" stroke-width="1.5" stroke-linecap="round"/><path d="M986.1 361.4L972.9 348.2" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M972.9 348.2L959.9 342.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M972.9 348.2L964 340.5" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M986.1 361.4L967.9 359.7" stroke="#0C1018" stroke-width="1" stroke-linecap="round"/><path d="M967.9 359.7L960.9 348.6" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M967.9 359.7L955.6 351.9" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M967.9 359.7L955.2 363.4" stroke="#0C1018" stroke-width="0.7" stroke-linecap="round"/><path d="M1080 600L1073 530.3" stroke="#141A26" stroke-width="5" stroke-linecap="round"/><path d="M1073 530.3L1087.9 480.2" stroke="#141A26" stroke-width="3.3" stroke-linecap="round"/><path d="M1087.9 480.2L1095.6 440" stroke="#141A26" stroke-width="2.2" stroke-linecap="round"/><path d="M1095.6 440L1102.4 413.4" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1102.4 413.4L1114.4 399.3" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1114.4 399.3L1121.1 389.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1114.4 399.3L1119.3 388.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1102.4 413.4L1113.6 399" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1113.6 399L1124.4 391.5" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1113.6 399L1115.7 384.6" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1095.6 440L1105.5 411.1" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1105.5 411.1L1108 390.4" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1108 390.4L1115.5 375.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1108 390.4L1118.1 377.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1108 390.4L1101.3 377.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1105.5 411.1L1108.1 390.4" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1108.1 390.4L1117.7 379.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1108.1 390.4L1104.8 375.5" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1087.9 480.2L1073.9 449.3" stroke="#141A26" stroke-width="2.2" stroke-linecap="round"/><path d="M1073.9 449.3L1066.7 426.4" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1066.7 426.4L1059 413.3" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1059 413.3L1058.4 403.8" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1059 413.3L1050.5 406" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1066.7 426.4L1067.4 407.6" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1067.4 407.6L1074.4 396.7" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1067.4 407.6L1066.3 395.8" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1066.7 426.4L1063.5 409" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1063.5 409L1066.8 395.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1063.5 409L1064.3 396.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1063.5 409L1061.6 395.6" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1073.9 449.3L1068.8 423.6" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1068.8 423.6L1063.4 408" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1063.4 408L1066.7 397.6" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1063.4 408L1058.6 396.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1063.4 408L1059.8 396.7" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1068.8 423.6L1068.9 404.7" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1068.9 404.7L1070 390.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1068.9 404.7L1072.7 391.2" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1068.8 423.6L1060.6 406.7" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1060.6 406.7L1059.8 392.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1060.6 406.7L1060.3 392.1" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1060.6 406.7L1052.2 398.5" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1073 530.3L1060 476.6" stroke="#141A26" stroke-width="3.3" stroke-linecap="round"/><path d="M1060 476.6L1036.1 446.4" stroke="#141A26" stroke-width="2.2" stroke-linecap="round"/><path d="M1036.1 446.4L1029.4 416.7" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1029.4 416.7L1021.7 398" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1021.7 398L1021.1 383" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1021.7 398L1023.6 384.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1021.7 398L1010.1 390.5" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1029.4 416.7L1033.6 394.4" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1033.6 394.4L1044.5 380.8" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1033.6 394.4L1042 379.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1033.6 394.4L1037.7 378.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1029.4 416.7L1024.5 395.1" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1024.5 395.1L1025.8 381.1" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1024.5 395.1L1011.7 384" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1036.1 446.4L1008.7 434.5" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1008.7 434.5L995.7 419" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M995.7 419L990.2 405.5" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M995.7 419L982 414.5" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1008.7 434.5L988.2 433.5" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M988.2 433.5L975.8 430.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M988.2 433.5L975.6 435.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M988.2 433.5L975 433.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1008.7 434.5L989.8 439.1" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M989.8 439.1L978.5 432.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M989.8 439.1L978.7 446.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1060 476.6L1025.8 453.9" stroke="#141A26" stroke-width="2.2" stroke-linecap="round"/><path d="M1025.8 453.9L1015.3 429" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M1015.3 429L1023.7 414.2" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1023.7 414.2L1032.5 408" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1023.7 414.2L1029.9 403.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1023.7 414.2L1024.7 403.2" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1015.3 429L1006 415.1" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1006 415.1L1000 404.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1006 415.1L999.3 404.3" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1015.3 429L1006 411.6" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M1006 411.6L1005 397.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1006 411.6L996.1 404" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M1025.8 453.9L996.2 444.3" stroke="#141A26" stroke-width="1.4" stroke-linecap="round"/><path d="M996.2 444.3L977.9 427.9" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M977.9 427.9L966.8 411.7" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M977.9 427.9L968 411.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M996.2 444.3L974.5 441.2" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M974.5 441.2L960.7 432.4" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M974.5 441.2L959.5 442.1" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M996.2 444.3L972.1 448.4" stroke="#141A26" stroke-width="0.9" stroke-linecap="round"/><path d="M972.1 448.4L955.3 444.6" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M972.1 448.4L957.1 459.9" stroke="#141A26" stroke-width="0.6" stroke-linecap="round"/><path d="M0 690C220 676 520 700 800 690S1040 684 1100 690V800H0Z" fill="#0D1017"/></svg>
<button class="knopf" type="button" id="knopf-04" aria-expanded="false" aria-controls="info-04">
<span class="nr">04</span><span class="ort">Ziegenhain</span><span class="art">Haus</span>
</button>
<div class="info" id="info-04" role="region" aria-labelledby="knopf-04" inert>
<p class="z lage">04 · Ziegenhain · Südhang</p>
<h3 class="z titel">Haus am Hang mit Talblick</h3>
<dl class="z fakten"><div><dt>Zimmer</dt><dd>5</dd></div><div><dt>Wohnfläche</dt><dd>196 m²</dd></div><div><dt>Grundstück</dt><dd>980 m²</dd></div><div><dt>Kaufpreis</dt><dd>1.380.000 €</dd></div></dl>
<p class="z energie">Bedarfsausweis 38 kWh/(m²·a) · Klasse A · Wärmepumpe · Baujahr 2017</p>
<a class="z expose" href="#expose-04">Exposé ansehen <span aria-hidden="true">→</span></a>
</div>
</li>
<li class="panel" data-panel>
<svg class="szene" viewBox="0 0 1100 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><defs><linearGradient id="s5w" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#EEE6D8"/><stop offset="1" stop-color="#DCD0BC"/></linearGradient><linearGradient id="s5h" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#C5D6DE"/><stop offset="1" stop-color="#ECEDE6"/></linearGradient><pattern id="s5p" width="56" height="56" patternUnits="userSpaceOnUse" patternTransform="scale(1 .42) rotate(45)"><rect width="56" height="56" fill="#B48655"/><rect width="28" height="14" fill="#BF9262"/><rect x="28" y="14" width="14" height="28" fill="#A97B4C"/><rect x="0" y="28" width="28" height="14" fill="#C49867"/><rect x="42" y="0" width="14" height="28" fill="#AE8050"/><path d="M0 14H28M28 0V42M0 42H56M42 0V56" stroke="#8E6438" stroke-width="1"/></pattern><linearGradient id="s5l" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFF6E2" stop-opacity=".55"/><stop offset="1" stop-color="#FFF6E2" stop-opacity="0"/></linearGradient></defs><rect width="1100" height="800" fill="url(#s5w)"/><rect width="1100" height="74" fill="#F4EEE3"/><rect y="74" width="1100" height="8" fill="#E6DCCB"/><rect y="82" width="1100" height="5" fill="#F7F2E9"/><rect y="87" width="1100" height="10" fill="#E9E0D0"/><rect y="97" width="1100" height="4" fill="#F7F2E9"/><rect y="101" width="1100" height="6" fill="#DED3C0"/><polygon points="376,136 724,136 704,156 396,156" fill="#D6C9B3"/><polygon points="376,136 396,156 396,626 376,640" fill="#CFC1A9"/><polygon points="724,136 704,156 704,626 724,640" fill="#E3D8C5"/><rect x="396" y="156" width="308" height="470" fill="url(#s5h)"/><rect x="396" y="300" width="308" height="326" fill="#DAD3C7"/><rect x="396" y="296" width="308" height="6" fill="#CFC6B8"/><rect x="420" y="330" width="28" height="62" fill="#A9B0B2"/><rect x="420" y="440" width="28" height="62" fill="#A9B0B2"/><rect x="420" y="550" width="28" height="62" fill="#A9B0B2"/><rect x="500" y="330" width="28" height="62" fill="#A9B0B2"/><rect x="500" y="440" width="28" height="62" fill="#A9B0B2"/><rect x="500" y="550" width="28" height="62" fill="#A9B0B2"/><rect x="580" y="330" width="28" height="62" fill="#A9B0B2"/><rect x="580" y="440" width="28" height="62" fill="#A9B0B2"/><rect x="580" y="550" width="28" height="62" fill="#A9B0B2"/><rect x="660" y="330" width="28" height="62" fill="#A9B0B2"/><rect x="660" y="440" width="28" height="62" fill="#A9B0B2"/><rect x="660" y="550" width="28" height="62" fill="#A9B0B2"/><polygon points="396,156 520,156 396,420" fill="#fff" opacity=".18"/><g fill="#F8F4EC"><rect x="396" y="156" width="308" height="12"/><rect x="396" y="614" width="308" height="12"/><rect x="396" y="156" width="12" height="470"/><rect x="692" y="156" width="12" height="470"/><rect x="544" y="156" width="12" height="470"/><rect x="396" y="282" width="308" height="10"/><rect x="408" y="440" width="136" height="6"/><rect x="556" y="440" width="136" height="6"/></g><rect x="380" y="626" width="340" height="12" fill="#F2ECE1"/><path d="M330 120H392V700H330C340 600 322 480 336 360S326 200 330 120Z" fill="#FBF8F2" opacity=".85"/><path d="M350 130V690M372 130V690" stroke="#E7DFD2" stroke-width="2"/><rect x="432" y="642" width="236" height="50" fill="#F1EBE0"/><rect x="438" y="644" width="7" height="46" fill="#E3DACB"/><rect x="450" y="644" width="7" height="46" fill="#E3DACB"/><rect x="462" y="644" width="7" height="46" fill="#E3DACB"/><rect x="474" y="644" width="7" height="46" fill="#E3DACB"/><rect x="486" y="644" width="7" height="46" fill="#E3DACB"/><rect x="498" y="644" width="7" height="46" fill="#E3DACB"/><rect x="510" y="644" width="7" height="46" fill="#E3DACB"/><rect x="522" y="644" width="7" height="46" fill="#E3DACB"/><rect x="534" y="644" width="7" height="46" fill="#E3DACB"/><rect x="546" y="644" width="7" height="46" fill="#E3DACB"/><rect x="558" y="644" width="7" height="46" fill="#E3DACB"/><rect x="570" y="644" width="7" height="46" fill="#E3DACB"/><rect x="582" y="644" width="7" height="46" fill="#E3DACB"/><rect x="594" y="644" width="7" height="46" fill="#E3DACB"/><rect x="606" y="644" width="7" height="46" fill="#E3DACB"/><rect x="618" y="644" width="7" height="46" fill="#E3DACB"/><rect x="630" y="644" width="7" height="46" fill="#E3DACB"/><rect x="642" y="644" width="7" height="46" fill="#E3DACB"/><rect x="654" y="644" width="7" height="46" fill="#E3DACB"/><rect x="666" y="644" width="7" height="46" fill="#E3DACB"/><rect x="74" y="210" width="168" height="486" fill="#F6F1E8"/><rect x="62" y="200" width="192" height="10" fill="#EEE7DA"/><rect x="94" y="232" width="128" height="200" fill="none" stroke="#E2D8C7" stroke-width="5"/><rect x="94" y="456" width="128" height="216" fill="none" stroke="#E2D8C7" stroke-width="5"/><rect x="216" y="452" width="16" height="5" rx="2" fill="#B59A6A"/><rect x="836" y="236" width="150" height="190" fill="#F4EFE5"/><rect x="848" y="248" width="126" height="166" fill="#C7B596"/><rect x="848" y="330" width="126" height="84" fill="#5F6F73"/><circle cx="930" cy="300" r="20" fill="#D9895A"/><rect y="696" width="1100" height="104" fill="url(#s5p)"/><rect y="690" width="1100" height="10" fill="#F4EFE6"/><polygon points="420,700 690,700 860,800 470,800" fill="url(#s5l)"/><polygon points="704,156 724,140 1100,560 1100,690 980,690" fill="#FFF6E2" opacity=".14"/><g stroke="#3B2F27" stroke-width="5" fill="none" stroke-linecap="round"><path d="M820 760V610Q820 560 850 560Q880 560 880 610V660"/><path d="M806 662H904"/><path d="M816 662L808 768M896 662L908 768M852 662V760"/><ellipse cx="850" cy="600" rx="22" ry="34"/></g><path d="M266 700L276 620H346L356 700Z" fill="#CDBDA2"/><path d="M311 622Q340.4 556.4 346.2 492.9" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="346.2" cy="492.9" rx="22" ry="9" transform="rotate(-74.5 346.2 492.9)" fill="#53694C"/><path d="M311 622Q343.8 564.7 349.4 509.4" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="349.4" cy="509.4" rx="22" ry="9" transform="rotate(-70.8 349.4 509.4)" fill="#5E7456"/><path d="M311 622Q318.6 552.3 357.1 484.6" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="357.1" cy="484.6" rx="22" ry="9" transform="rotate(-71.2 357.1 484.6)" fill="#6C8462"/><path d="M311 622Q333.7 583.3 388.3 546.5" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="388.3" cy="546.5" rx="22" ry="9" transform="rotate(-43.6 388.3 546.5)" fill="#5E7456"/><path d="M311 622Q260.4 597.2 227.5 574.4" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="227.5" cy="574.4" rx="22" ry="9" transform="rotate(-151.4 227.5 574.4)" fill="#6C8462"/><path d="M311 622Q250.3 570.3 218.5 520.5" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="218.5" cy="520.5" rx="22" ry="9" transform="rotate(-132.9 218.5 520.5)" fill="#53694C"/><path d="M311 622Q324.5 575.7 300.2 531.4" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="300.2" cy="531.4" rx="22" ry="9" transform="rotate(-97 300.2 531.4)" fill="#5E7456"/><path d="M311 622Q301.9 581.8 254.3 543.7" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="254.3" cy="543.7" rx="22" ry="9" transform="rotate(-126.6 254.3 543.7)" fill="#5E7456"/><path d="M311 622Q279.6 554.1 245.1 488.2" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="245.1" cy="488.2" rx="22" ry="9" transform="rotate(-116.6 245.1 488.2)" fill="#53694C"/><path d="M311 622Q342.4 575.4 336.3 530.8" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="336.3" cy="530.8" rx="22" ry="9" transform="rotate(-74.2 336.3 530.8)" fill="#5E7456"/><path d="M311 622Q363.9 583.1 433 546.2" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="433" cy="546.2" rx="22" ry="9" transform="rotate(-31.2 433 546.2)" fill="#6C8462"/><path d="M311 622Q288 548.5 283.9 477" stroke="#5E7456" stroke-width="3" fill="none"/><ellipse cx="283.9" cy="477" rx="22" ry="9" transform="rotate(-100.7 283.9 477)" fill="#6C8462"/></svg>
<button class="knopf" type="button" id="knopf-05" aria-expanded="false" aria-controls="info-05">
<span class="nr">05</span><span class="ort">Westviertel</span><span class="art">Wohnung</span>
</button>
<div class="info" id="info-05" role="region" aria-labelledby="knopf-05" inert>
<p class="z lage">05 · Westviertel · 3. Obergeschoss</p>
<h3 class="z titel">Altbauwohnung mit Stuck und Parkett</h3>
<dl class="z fakten"><div><dt>Zimmer</dt><dd>4</dd></div><div><dt>Wohnfläche</dt><dd>128 m²</dd></div><div><dt>Balkon</dt><dd>7 m²</dd></div><div><dt>Kaufpreis</dt><dd>640.000 €</dd></div></dl>
<p class="z energie">Verbrauchsausweis 121 kWh/(m²·a) · Klasse D · Gas · Baujahr 1899</p>
<a class="z expose" href="#expose-05">Exposé ansehen <span aria-hidden="true">→</span></a>
</div>
</li>
</ul>
<div class="regler">
<div class="modi mono" role="group" aria-label="Variante">
<span>Variante</span>
<button type="button" data-variante="hover" aria-pressed="true">Hover</button>
<button type="button" data-variante="welle" aria-pressed="false">Welle</button>
<button type="button" data-variante="klick" aria-pressed="false">Klick</button>
</div>
<p class="mono werte" data-werte aria-live="polite"></p>
</div>
<p class="fuss">Kaufpreise zuzüglich Käuferprovision 3,57 % inkl. MwSt. Energiekennwerte laut vorliegendem Ausweis. Saalbogen Immobilien GmbH, Erlaubnis nach § 34c GewO.</p>
<svg class="zeiger" data-zeiger viewBox="0 0 18 18" aria-hidden="true"><path d="M2 1.5 15.5 9.2l-6 1.3-2.9 5.6Z" fill="#FBF9F4" stroke="#12364F" stroke-width="1.2" stroke-linejoin="round"/></svg>
<div class="ring" data-ring aria-hidden="true"></div>
<script>
(() => {
const html = document.documentElement;
const reduziert = () => html.classList.contains('reduziert');
const liste = document.querySelector('[data-akkordeon]');
const panels = [...liste.querySelectorAll('[data-panel]')];
const werteZeile = document.querySelector('[data-werte]');
const zeiger = document.querySelector('[data-zeiger]');
const ring = document.querySelector('[data-ring]');
// Werte je Variante (Messwerte des Musters)
const VARIANTEN = {
hover: { stufen: [5], dauer: 700, kurve: 'cubic-bezier(0.625, 0.05, 0, 1)', verz: 50, text: 120, textDauer: 600 },
welle: { stufen: [5, 2, 1.3], dauer: 800, kurve: 'cubic-bezier(0.625, 0.05, 0, 1)', verz: 50, text: 120, textDauer: 600 },
klick: { stufen: [4], dauer: 300, kurve: 'cubic-bezier(0.215, 0.61, 0.355, 1)', verz: 0, text: 100, textDauer: 400 }
};
let variante = 'hover', aktiv = 0;
function setzen(i) {
aktiv = i;
const v = VARIANTEN[variante];
panels.forEach((p, j) => {
const d = Math.abs(j - i);
p.style.flexGrow = v.stufen[d] ?? 1;
const offen = d === 0;
p.classList.toggle('offen', offen);
p.querySelector('.knopf').setAttribute('aria-expanded', String(offen));
p.querySelector('.info').inert = !offen;
});
}
function varianteSetzen(name) {
variante = name;
const v = VARIANTEN[name];
[['--dauer', v.dauer + 'ms'], ['--kurve', v.kurve], ['--verz', v.verz + 'ms'], ['--text-verz', v.text + 'ms'], ['--text-dauer', v.textDauer + 'ms']]
.forEach(([k, w]) => document.body.style.setProperty(k, w));
document.querySelectorAll('[data-variante]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.variante === name)));
const breite = name === 'welle' ? 'flex-grow 5 · 2 · 1,3 · 1' : `flex-grow 1 → ${v.stufen[0]}`;
const ausloeser = name === 'klick' ? 'Klick' : 'Hover/Fokus';
werteZeile.innerHTML = `<b>${breite}</b> · ${v.dauer} ms · ${v.kurve}${v.verz ? ` · Verzögerung ${v.verz} ms` : ''} · Text +${v.text} ms · ${ausloeser}`;
setzen(aktiv);
}
// Bedienung: Maus-Hover und Fokus (nicht bei „Klick“), Klick/Tippen immer
panels.forEach((p, j) => {
const knopf = p.querySelector('.knopf');
p.addEventListener('pointerenter', e => { if (e.pointerType === 'mouse' && variante !== 'klick' && !html.classList.contains('vorfuehrung')) setzen(j); });
knopf.addEventListener('focus', () => { if (variante !== 'klick') setzen(j); });
knopf.addEventListener('click', () => setzen(j));
});
liste.addEventListener('click', e => { if (e.target.closest('.expose')) e.preventDefault(); });
document.querySelectorAll('[data-variante]').forEach(b => b.addEventListener('click', () => varianteSetzen(b.dataset.variante)));
// Ausgangszustand ohne Übergang
panels.forEach(p => p.style.transition = 'none');
varianteSetzen('hover');
requestAnimationFrame(() => requestAnimationFrame(() => panels.forEach(p => p.style.transition = '')));
// Vorführung: ein gedachter Zeiger fährt die Panels ab
const FOLGE = [1, 2, 3, 4, 3, 2, 1, 0];
const REIHE = ['hover', 'welle', 'klick'];
let uhr = null, rahmen = null, schritt = 0, zx = 0, zy = 0;
const weich = t => t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
function zeigerSetzen(x, y) { zx = x; zy = y; zeiger.style.transform = `translate(${x - 2}px, ${y - 1}px)`; }
function unterZeiger() {
return panels.findIndex(p => { const r = p.getBoundingClientRect(); return zx >= r.left && zx < r.right && zy >= r.top && zy < r.bottom; });
}
function fahren() {
const ziel = FOLGE[schritt];
const r = panels[ziel].getBoundingClientRect();
const senkrecht = getComputedStyle(liste).flexDirection === 'column';
const tx = r.left + r.width * (senkrecht ? .7 : .5), ty = r.top + r.height * (senkrecht ? .5 : .56);
const ax = zx, ay = zy, t0 = performance.now(), dauer = reduziert() ? 0 : 750;
const bild = t => {
const p = dauer ? Math.min(1, (t - t0) / dauer) : 1, e = weich(p);
zeigerSetzen(ax + (tx - ax) * e, ay + (ty - ay) * e);
if (variante !== 'klick') { const i = unterZeiger(); if (i >= 0 && i !== aktiv) setzen(i); }
if (p < 1) { rahmen = requestAnimationFrame(bild); return; }
if (variante === 'klick') {
ring.style.transform = `translate(${zx}px, ${zy}px)`;
ring.classList.remove('an'); void ring.offsetWidth; ring.classList.add('an');
setzen(ziel);
}
uhr = setTimeout(() => {
schritt = (schritt + 1) % FOLGE.length;
if (schritt === 0 && html.classList.contains('vorschau')) varianteSetzen(REIHE[(REIHE.indexOf(variante) + 1) % REIHE.length]);
fahren();
}, 1500);
};
rahmen = requestAnimationFrame(bild);
}
function vorfuehren() {
pause();
html.classList.add('vorfuehrung');
schritt = 0;
const r = panels[0].getBoundingClientRect();
zeigerSetzen(r.left + r.width * .5, r.top + r.height * .56);
setzen(0);
uhr = setTimeout(fahren, 900);
}
function pause() { clearTimeout(uhr); cancelAnimationFrame(rahmen); uhr = rahmen = null; }
function weiter() { if (!uhr && !rahmen && html.classList.contains('vorfuehrung')) fahren(); }
function neustart() { pause(); html.classList.remove('vorfuehrung'); varianteSetzen(variante); setzen(0); }
})();
</script>
</body>
</html>