{"v":41,"css":"/* ==========================================================================\n   KARLS LIVING \u2014 Ultra Edition\n   Farben & Schriften aus dem bestehenden Webflow-Auftritt \u00fcbernommen.\n   ========================================================================== */\n\n@font-face {\n  font-family: \"Daily Spark Sans\";\n  src: url(\"https://cdn.prod.website-files.com/6a97e2884291c0c32e3b2095/6aa917d194a1147298cdb15a_Daily%20Spark%20Sans.otf\") format(\"opentype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n:root {\n  --navy: #003049;\n  --navy-deep: #00243a;\n  --cream: #FAF5ED;\n  --cream-2: #F5EDD6;\n  --red: #C1111F;\n  --blue: #669BBC;\n  --teal: #2E6F8E;\n  --plan: #C9C9C9;\n  --map: #F6F8EB;\n\n  --f-display: \"Daily Spark Sans\", \"Arial Black\", Impact, sans-serif;\n  --f-body: \"Inter Tight\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n\n  --gutter: clamp(16px, 3.2vw, 56px);\n  --radius: clamp(20px, 2.4vw, 40px);\n  --nav-h: 84px;\n  --ease-out: cubic-bezier(.16, 1, .3, 1);\n  --ease-io: cubic-bezier(.76, 0, .24, 1);\n}\n/* Webflow Starter: Das Pflicht-Badge \u201eMade in Webflow\u201c (160 \u00d7 28 px, 12 px vom Rand) liegt fest unten rechts \u00fcber allem.\n   Nur wenn es da ist, r\u00fccken Hero-Zeile, Kartenhinweis, Footer-Leiste und die Projekt-Pille aus seinem Bereich\n   (Vercel und ein bezahlter Webflow-Tarif ohne Badge bleiben unver\u00e4ndert). */\nhtml:has(.w-webflow-badge) { --wf-badge: 44px; }\n\n/* ---------- Reset & Basis ---------- */\n*, *::before, *::after { box-sizing: border-box; }\n/* Webflow l\u00e4dt vorher sein Site-CSS, das p, h1-h6, li, label, a, strong, em und img eigene Werte gibt\n   (Kreis-Icon an li, graue p mit 2em Zeilenh\u00f6he, Inter 400 an \u00dcberschriften, fette label).\n   Hier zur\u00fcck auf Browser-Standard; lokal \u00e4ndert das nichts. Die eigenen Regeln folgen danach. */\nh1, h2, h3, h4, h5, h6, p, li, label, a, strong, em, blockquote, figure {\n  margin: revert; padding: revert; min-height: revert; display: revert; align-items: revert;\n  font-family: revert; font-size: revert; font-weight: revert; font-style: revert;\n  line-height: revert; letter-spacing: revert; text-align: revert; color: revert; background: revert;\n}\nimg { vertical-align: revert; }\n/* Chrome auf dem iPhone packt erkannte Jahreszahlen, Orte, Zeitangaben in <chrome_annotation> mit gepunkteter Linie.\n   Abgeschaltet per <meta name=\"chrome\" content=\"nointentdetection\"> im Kopf; falls eine Chrome-Fassung das nicht\n   beachtet, wenigstens ohne Linie */\nchrome_annotation { border-bottom-style: none !important; }\n/* scrollbar-gutter: Platz f\u00fcr die Windows-Scrollleiste bleibt frei; sonst sprang die Seite um 15 px, wenn Men\u00fc,\n   Lightbox oder Preloader das Scrollen sperren (Leiste weg) und wieder freigeben */\nhtml { scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overflow-anchor: none; background: var(--navy); }   /* kein Scroll-Anchoring: verhindert Spr\u00fcnge durch Pin-Spacer; Navy auch, solange body noch verborgen ist */\nhtml.lenis, html.lenis body { height: auto; }\n.lenis.lenis-smooth { scroll-behavior: auto !important; }\n.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }\n.lenis.lenis-stopped { overflow: hidden; }\nhtml.is-locked { overflow: hidden; }\n\nbody {\n  margin: 0;\n  background: var(--navy);\n  color: var(--navy);\n  font-family: var(--f-body);\n  font-size: clamp(15px, 1.05vw, 18px);\n  line-height: 1.55;\n  overflow-x: clip;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n\nimg, svg { display: block; }\nimg { max-width: none; user-select: none; -webkit-user-drag: none; }\na { color: inherit; text-decoration: none; }\nbutton { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }\nh1, h2, h3, h4, p, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; }\nul, ol { list-style: none; }\n::selection { background: var(--red); color: var(--cream); }\n:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 6px; }\n/* Sprungziele (main.js: focusIn, \u00dcberspringen) bekommen den Fokus nur, damit Tab dort weitergeht: kein Rahmen um den ganzen Abschnitt */\nmain [tabindex=\"-1\"]:focus-visible, main[tabindex=\"-1\"]:focus-visible { outline: none; }\n\n.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }\n.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }\n\n/* ---------- Bausteine ---------- */\n.kicker {\n  display: inline-flex; align-items: center; gap: .7em;\n  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;\n}\n.kicker svg { width: 1.25em; height: auto; color: var(--red); flex: none; }\n.kicker--light { color: var(--cream); }\n.kontakt .kicker svg { color: var(--cream); }\n\n.tag {\n  display: inline-flex; align-items: center;\n  padding: 9px 16px; border-radius: 99px;\n  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;\n  color: var(--cream); background: rgba(250, 245, 237, .14);\n  border: 1px solid rgba(250, 245, 237, .35);\n  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);\n}\n.tag--solid { background: var(--red); border-color: var(--red); }\n\n/* Roll-Hover (Buchstaben rollen einzeln) */\n.roll { position: relative; display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1.25; }\n.roll__a, .roll__b { display: inline-flex; white-space: pre; }\n.roll__b { position: absolute; left: 0; top: 0; }\n.roll .c { display: inline-block; white-space: pre; transition: transform .55s var(--ease-io); transition-delay: calc(var(--i) * 13ms); }\n.roll__b .c { transform: translateY(110%); }\n/* Hover-Effekte nur mit echter Maus: iOS h\u00e4lt :hover nach dem Antippen fest (Knopf blieb gef\u00fcllt, Men\u00fcpunkt rot,\n   Namens-Pille an der Punkte-Leiste stand bei jedem Wiedererscheinen da) */\n@media (hover: hover) {\n  :is(a, button):hover .roll__a .c { transform: translateY(-110%); }\n  :is(a, button):hover .roll__b .c { transform: translateY(0); }\n}\n\n/* Button */\n.btn {\n  position: relative; isolation: isolate; overflow: hidden;\n  display: inline-flex; align-items: center; gap: 14px;\n  padding: 19px 28px; border-radius: 99px; border: 1.5px solid currentColor;\n  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;\n  transition: color .5s var(--ease-io);\n}\n.btn__fill { position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--cream); transform: translateY(102%); transition: transform .6s var(--ease-io); }\n.btn svg { width: 20px; height: auto; transform: rotate(-90deg); transition: transform .5s var(--ease-io); }\n.btn--light { color: var(--cream); }\n@media (hover: hover) {\n  .btn:hover .btn__fill { transform: translateY(0); }\n  .btn:hover { color: var(--red); }\n  .btn:hover svg { transform: rotate(-90deg) translateY(4px); }\n  .btn--light:hover { color: var(--navy); }\n}\n\n/* Odometer-Zahlen */\n.odo { display: inline-flex; height: var(--oh, 1.1em); line-height: 1; overflow: hidden; vertical-align: top; }\n.odo__col { display: block; height: var(--oh, 1.1em); overflow: hidden; }\n.odo__strip { display: flex; flex-direction: column; will-change: transform; }\n.odo__strip > span { display: block; height: var(--oh, 1.1em); line-height: var(--oh, 1.1em); text-align: center; }\n.odo__static { line-height: var(--oh, 1.1em); }\n\n/* ==========================================================================\n   PRELOADER\n   ========================================================================== */\n.loader { position: fixed; inset: 0; z-index: 90; pointer-events: none; color: var(--cream); display: none; }\nhtml.is-loading .loader { display: block; }\n/* Bis main.js den Preloader startet (.loader-on), nur die Navy-Fl\u00e4che zeigen. Sonst sind Hero und Loader-Teile\n   gleichzeitig zu sehen, solange Schriften und Scripts noch laden (fiel auf Webflow auf). */\nhtml.is-loading:not(.loader-on) body { visibility: hidden; }\n/* Seite ohne Preloader freigegeben (Notausgang im Kopf): kein Flipbook-Fenster \u00fcber dem Hero */\nhtml:not(.is-loading) .hero__flip { display: none; }\n.loader__corner { position: absolute; top: calc(var(--gutter) * .8); }\n.loader__corner--tl { left: var(--gutter); }\n.loader__corner--tr { right: var(--gutter); display: grid; gap: 4px; text-align: right; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; overflow: hidden; }\n.loader__corner--tr span { display: block; }\n.loader__logo { width: clamp(34px, 3.4vw, 50px); height: auto; overflow: visible; }\n.loader__logo path { fill: rgba(250, 245, 237, 0); stroke: var(--cream); stroke-width: 1.2; }\n.loader__count { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 18px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }\n.loader__num { font-family: var(--f-display); font-size: clamp(96px, 18vw, 300px); line-height: 1.1; overflow: hidden; }\n.loader__odo { display: inline-flex; }\n.loader__label { display: grid; overflow: hidden; text-align: right; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding-bottom: .6em; }\n.loader__label span { display: block; }\n.loader__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); height: 2px; background: rgba(250, 245, 237, .16); overflow: hidden; }\n.loader__bar i { position: absolute; inset: 0; background: var(--cream); transform-origin: 0 50%; transform: scaleX(0); }\n.loader__skip {\n  position: absolute; left: 50%; top: calc(var(--gutter) * .8); transform: translateX(-50%); pointer-events: auto;\n  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 99px;\n  border: 1.5px solid rgba(250, 245, 237, .45); color: var(--cream);\n  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;\n  opacity: 0; animation: skipIn .8s var(--ease-out) 1.1s forwards; transition: background .3s ease, color .3s ease, border-color .3s ease;\n}\n.loader__skip svg { width: 14px; height: auto; transform: rotate(-90deg); }\n.loader__skip:hover, .loader__skip:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--navy); }\n@keyframes skipIn { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }\n\n/* \u00dcberspringen-Knopf f\u00fcr lange Scroll-Abschnitte */\n.skip {\n  position: fixed; left: 50%; bottom: calc(var(--gutter) * .5 + env(safe-area-inset-bottom, 0px)); z-index: 74;\n  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 99px;\n  background: rgba(0, 48, 73, .88); color: var(--cream); box-shadow: 0 14px 34px rgba(0, 20, 35, .28);\n  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);\n  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;\n  transform: translate(-50%, 16px); opacity: 0; visibility: hidden; pointer-events: none;\n  transition: transform .55s var(--ease-out), opacity .35s ease, visibility 0s linear .55s, background .3s ease, color .3s ease, left .6s var(--ease-io), bottom .6s var(--ease-io);\n}\n.skip.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }\n.skip[data-theme=\"light\"] { background: rgba(250, 245, 237, .9); color: var(--navy); }\n.skip:focus-visible { background: var(--red); color: var(--cream); }\n@media (hover: hover) { .skip:hover { background: var(--red); color: var(--cream); } }\n.skip__ring { width: 26px; height: 26px; flex: none; transform: rotate(-90deg); }\n.skip__ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; opacity: .22; }\n.skip__ring .skip__prog { opacity: 1; stroke: var(--red); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }\n.skip:focus-visible .skip__prog { stroke: var(--cream); }\n@media (hover: hover) { .skip:hover .skip__prog { stroke: var(--cream); } }\n.skip__txt b { font-weight: 700; }\n.skip__arrow { width: 13px; height: auto; flex: none; animation: skipBob 1.6s var(--ease-io) infinite; }\n@keyframes skipBob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }\n.skip[data-at=\"raum\"] { bottom: calc(26px + 16px + env(safe-area-inset-bottom, 0px)); }\n@media (min-width: 761px) {\n  .skip[data-at=\"projekt\"] { left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * .8); }   /* unter der Infospalte statt \u00fcber dem Bild */\n  /* rechts versetzt: unter ~1440 px Breite l\u00e4ge sie sonst auf dem Webflow-Badge */\n  html:has(.w-webflow-badge) .skip[data-at=\"projekt\"] { bottom: calc(var(--gutter) * .5 + var(--wf-badge) + env(safe-area-inset-bottom, 0px)); }\n}\n@media (max-width: 760px) {\n  .skip__txt b { display: none; }\n  .skip__txt { text-transform: uppercase; }\n}\nhtml.is-loading .skip, html.menu-open .skip { opacity: 0 !important; visibility: hidden !important; }\n\n/* ==========================================================================\n   NAV / MEN\u00dc / HUD / CURSOR\n   ========================================================================== */\n.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; pointer-events: none; color: var(--navy); transition: color .45s ease; }\n.nav[data-theme=\"light\"] { color: var(--cream); }\nhtml.menu-open .nav { color: var(--cream); }\nhtml.is-loading .nav { opacity: 0; }\nhtml.is-loading .nav * { pointer-events: none !important; }\n.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); transition: transform .7s var(--ease-io); }\n.nav__inner.is-hidden { transform: translateY(-130%); }\n.nav a, .nav button { pointer-events: auto; }\n.nav__logo { display: flex; align-items: center; gap: 12px; }\n.nav__logo svg { width: 32px; height: auto; }\n.nav__brand { font-family: var(--f-display); font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }\n.nav__links { display: flex; gap: clamp(18px, 2.2vw, 38px); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }\n.nav__right { display: flex; align-items: center; gap: 10px; }\n.nav__sound { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 99px; border: 1.5px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }\n.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }\n.eq i { width: 2px; height: 3px; border-radius: 1px; background: currentColor; transition: height .3s ease; }\n.nav__sound.is-on .eq i { animation: eq .8s ease-in-out infinite alternate; }\n.nav__sound.is-on .eq i:nth-child(2) { animation-delay: -.35s; }\n.nav__sound.is-on .eq i:nth-child(3) { animation-delay: -.6s; }\n.nav__sound.is-on .eq i:nth-child(4) { animation-delay: -.15s; }\n@keyframes eq { 0% { height: 3px; } 100% { height: 12px; } }\n.nav__sound.is-hint::after { content: \"\"; position: absolute; inset: -6px; border-radius: 99px; border: 1.5px solid var(--red); animation: hint 1.6s ease-out 3; pointer-events: none; }\n@keyframes hint { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }\n.nav__btn { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 20px; border-radius: 99px; border: 1.5px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }\n.nav__burger { position: relative; width: 18px; height: 9px; }\n.nav__burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .6s var(--ease-io); }\n.nav__burger i:first-child { top: 0; }\n.nav__burger i:last-child { bottom: 0; }\nhtml.menu-open .nav__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }\nhtml.menu-open .nav__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }\n\n.menu { position: fixed; inset: 0; z-index: 78; visibility: hidden; }\n.menu__panel {\n  position: absolute; inset: 0; overflow: hidden;\n  background: var(--navy); color: var(--cream);\n  clip-path: circle(0px at 100% 0%);\n  display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 40px;\n  padding: calc(var(--nav-h) + 4vh) var(--gutter) var(--gutter);\n}\n.menu__nav { display: grid; gap: .1em; position: relative; z-index: 2; }\n.menu__link { display: flex; align-items: flex-start; gap: 18px; width: fit-content; font-family: var(--f-display); font-size: clamp(34px, 6vw, 112px); line-height: .92; text-transform: uppercase; white-space: nowrap; overflow: hidden; padding-top: .04em; }\n.menu__idx { font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--blue); margin-top: .9em; min-width: 2ch; }\n.menu__txt { display: inline-block; transition: color .35s ease, transform .6s var(--ease-io); }\n@media (hover: hover) { .menu__link:hover .menu__txt { color: var(--red); transform: translateX(18px) skewX(-6deg); } }\n.menu__aside { position: relative; z-index: 2; display: grid; gap: 22px; font-size: 15px; color: rgba(250, 245, 237, .8); padding-bottom: 1em; }\n.menu__aside a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }\n.menu__shape { position: absolute; z-index: 1; height: auto; }\n.menu__shape--1 { width: clamp(90px, 12vw, 220px); right: 8%; top: 16%; color: var(--blue); }\n.menu__shape--2 { width: clamp(50px, 5vw, 90px); right: 30%; top: 8%; color: var(--red); }\n.menu__shape--3 { width: clamp(60px, 7vw, 130px); right: 4%; top: 48%; color: var(--cream-2); }\n.menu__shape--4 { width: clamp(80px, 10vw, 180px); right: 22%; top: 34%; color: rgba(102, 155, 188, .45); }\n\n/* Abschnitts-Leiste rechts (ersetzt das fr\u00fchere HUD): ein Punkt je Abschnitt, Klick springt hin */\n.secnav { position: fixed; right: clamp(6px, .6vw, 12px); top: 50%; z-index: 72; transform: translateY(-50%); transition: opacity .45s ease, transform .6s var(--ease-out); }\nhtml.menu-open .secnav { opacity: 0 !important; pointer-events: none !important; }   /* !important: schl\u00e4gt die Handy-Regeln (html.lite \u2026) */\n.secnav__list { display: flex; flex-direction: column; align-items: center; padding: 10px 0; border-radius: 99px; background: rgba(0, 48, 73, .5); border: 1px solid rgba(250, 245, 237, .16); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 20, 35, .16); }\nhtml.is-loading .secnav__list { opacity: 0; }\n.secnav__btn { position: relative; display: grid; place-items: center; width: 34px; height: 28px; }\n.secnav__btn::before { content: \"\"; width: 6px; height: 6px; border-radius: 50%; background: var(--cream); opacity: .62; transition: width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s ease, background-color .3s ease, box-shadow .3s ease; }\n.secnav__btn::after { content: \"\"; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .45s var(--ease-out); }\n.secnav__btn.is-active::before { width: 20px; height: 20px; opacity: 1; }\n.secnav__btn.is-active::after { transform: scale(1); }\n.secnav__btn:focus-visible::before, .secnav__btn.is-pick::before { width: 24px; height: 24px; opacity: 1; background: rgba(0, 36, 58, .55); box-shadow: 0 0 0 1.5px var(--red); }\n.secnav__btn:focus-visible::after, .secnav__btn.is-pick::after { transform: scale(.75); }\n.secnav__btn:focus-visible { outline: none; }\n.secnav__label { position: absolute; right: calc(100% + 10px); top: 50%; padding: 7px 13px 6px; border-radius: 99px; background: var(--cream); color: var(--navy); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(8px, -50%); transition: opacity .25s ease, transform .4s var(--ease-out); box-shadow: 0 6px 18px rgba(0, 20, 35, .18); }\n.secnav__btn:focus-visible .secnav__label, .secnav__btn.is-pick .secnav__label { opacity: 1; transform: translate(0, -50%); }\n/* Touch nutzt .is-pick (Finger abfahren); :hover nur mit Maus, sonst blieb am iPhone die Namens-Pille des zuletzt getippten Punkts stehen */\n@media (hover: hover) {\n  .secnav__btn:hover::before { width: 24px; height: 24px; opacity: 1; background: rgba(0, 36, 58, .55); box-shadow: 0 0 0 1.5px var(--red); }\n  .secnav__btn:hover::after { transform: scale(.75); }\n  .secnav__btn:hover .secnav__label { opacity: 1; transform: translate(0, -50%); }\n}\n/* Tablets und schmale Desktops: Der Seitenrand (--gutter) ist hier schmaler als die Leiste, sie lag auf Text\n   (Kiez-Einleitung, \u201e\u03a3\u201c-Pille im Projekt). Deshalb die schlanke Handy-Gr\u00f6\u00dfe, weiter dauerhaft sichtbar. */\n@media (min-width: 761px) and (max-width: 1180px) {\n  .secnav { right: 4px; }\n  .secnav__list { padding: 6px 0; }\n  .secnav__btn { width: 22px; height: 24px; }\n  .secnav__btn::before { width: 4px; height: 4px; }\n  .secnav__btn::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; }\n  .secnav__btn.is-active::before { width: 13px; height: 13px; }\n  .secnav__btn:focus-visible::before, .secnav__btn.is-pick::before { width: 19px; height: 19px; }\n  @media (hover: hover) { .secnav__btn:hover::before { width: 19px; height: 19px; } }\n}\n/* Handy: schmal, erscheint beim Scrollen; mit dem Finger abfahren, loslassen springt. An html.lite statt an der\n   Breite: Das Einblenden (main.js) h\u00e4ngt an LITE; lief die Breite nach dem Laden \u00fcber 760 px, blieb sie sonst unsichtbar */\nhtml.lite .secnav { right: 3px; opacity: 0; pointer-events: none; transform: translate(8px, -50%); touch-action: none; }\nhtml.lite .secnav.is-shown, html.lite .secnav.is-touch { opacity: 1; transform: translate(0, -50%); }\n/* antippbar erst, wenn das Bild steht (is-idle, main.js): solange es rollt, gehen Daumen-Wischer am rechten Rand\n   durch die Leiste hindurch, statt zu einem anderen Abschnitt zu springen */\nhtml.lite .secnav.is-shown.is-idle, html.lite .secnav.is-touch { pointer-events: auto; }\nhtml.lite .secnav::before { content: \"\"; position: absolute; inset: -12px -3px -12px -7px; }\nhtml.lite .secnav__list { padding: 6px 0; background: rgba(0, 48, 73, .42); }\nhtml.lite .secnav.is-touch .secnav__list { background: rgba(0, 48, 73, .72); }\nhtml.lite .secnav__btn { width: 22px; height: 21px; }\nhtml.lite .secnav__btn::before { width: 4px; height: 4px; }\nhtml.lite .secnav__btn::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; }\nhtml.lite .secnav__btn.is-active::before { width: 13px; height: 13px; }\nhtml.lite .secnav__btn.is-pick::before { width: 19px; height: 19px; }\nhtml.lite .secnav__label { right: calc(100% + 14px); padding: 8px 14px 7px; font-size: 12px; }\n\n.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .3s ease; --c: var(--red); --t: var(--cream); }\n.cursor.is-on { opacity: 1; }\n.cursor[data-accent=\"cream\"] { --c: var(--cream); --t: var(--red); }\n.cursor__dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c); }\n.cursor__ring { position: fixed; left: 0; top: 0; }\n.cursor__circle {\n  position: absolute; left: 0; top: 0; width: 40px; height: 40px; transform: translate(-50%, -50%);\n  border: 1.5px solid var(--c); border-radius: 50%;\n  display: grid; place-items: center;\n  transition: width .5s var(--ease-out), height .5s var(--ease-out), background-color .3s ease, border-color .3s ease, opacity .3s ease;\n}\n.cursor__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t); opacity: 0; transition: opacity .25s ease; white-space: nowrap; }\n.cursor.is-link .cursor__circle { width: 66px; height: 66px; background: color-mix(in srgb, var(--c) 14%, transparent); }\n.cursor.is-label .cursor__circle { width: 108px; height: 108px; background: var(--c); }\n.cursor.is-label .cursor__label { opacity: 1; }\n.cursor.is-label .cursor__dot { opacity: 0; }\n.cursor.is-down .cursor__circle { width: 30px; height: 30px; }\n.cursor.is-text .cursor__circle { opacity: 0; }\nhtml.has-cursor, html.has-cursor * { cursor: none !important; }\nhtml.has-cursor input, html.has-cursor textarea { cursor: text !important; }\n\n.grain {\n  position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 95; pointer-events: none; opacity: .065;\n  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\");\n  animation: grain .9s steps(5) infinite;\n}\n@keyframes grain {\n  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }\n  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }\n}\n\n.curtain { position: fixed; inset: 0; z-index: 92; display: none; place-content: center; justify-items: center; gap: 22px; background: var(--red); color: var(--cream); clip-path: inset(100% 0 0 0); }\n.curtain__logo { width: clamp(56px, 6vw, 96px); height: auto; }\n.curtain__label { overflow: hidden; padding-top: .3em; margin-top: -.3em; font-family: var(--f-display); font-size: clamp(48px, 9vw, 170px); line-height: 1; text-transform: uppercase; }\n.curtain__label span { display: block; }\n\n.burst { position: fixed; left: 0; top: 0; z-index: 96; pointer-events: none; }\n.burst svg { width: 100%; height: auto; }\n\n/* ==========================================================================\n   HERO\n   ========================================================================== */\n.hero { position: relative; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; background: #7cc4ee; --hb: max(40.2vw, 60svh); }\n.hero__stage { position: absolute; inset: 0; transform-origin: 50% 50%; }\n.hero__layer { position: absolute; inset: 0; will-change: transform; }\n.hero__m { position: absolute; inset: 0; }\n.hero__sky img { position: absolute; left: -4%; top: -6%; width: 108%; height: max(62%, calc(100% - var(--hb) * .92 + 24%)); object-fit: cover; object-position: 50% 30%; animation: skyDrift 46s ease-in-out infinite alternate; }\n@keyframes skyDrift { from { transform: translateX(-1.4%); } to { transform: translateX(1.4%); } }\n\n.hero__build img { position: absolute; bottom: -2px; left: 50%; height: var(--hb); width: auto; transform: translateX(-50%); }\n\n/* Zeitraffer (hero-sky.js): Himmel und H\u00e4user als WebGL, Wetter als 2D-Canvas */\n.hero__sky canvas { position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; }\n.hero__build .build__gl { position: absolute; bottom: -2px; left: 50%; height: var(--hb); width: calc(var(--hb) * 2.5911); transform: translateX(-50%); }\n.hero.has-sky .hero__sky img, .hero.has-sky .hero__build img { opacity: 0; }\n/* WebGL verloren (hero-sky.js): nur noch die Bilder, keine eingefrorenen Canvas-Reste dar\u00fcber */\n.hero.sky-lost :is(.sky__gl, .sky__birds, .build__gl, .wx__cv) { visibility: hidden; }\n.hero__wx { pointer-events: none; }\n.hero__wx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\n.hero.has-sky .hero__petals { filter: brightness(calc(1 - var(--night, 0) * .4)); }\n.hero__dim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 36, 58, .78) 0%, rgba(0, 36, 58, .1) 38%, transparent 55%); }\n/* Ganz leichte Vignette: R\u00e4nder und Ecken dunkeln ab, die H\u00e4user in der Mitte treten plastischer hervor */\n.hero__dim::before { content: \"\"; position: absolute; inset: 0; background: radial-gradient(ellipse 78% 72% at 50% 56%, transparent 52%, rgba(0, 0, 0, .1) 76%, rgba(0, 0, 0, .26) 100%); }\n.hero__dim::after { content: \"\"; position: absolute; inset: 0; background: var(--navy); opacity: var(--dim, 0); }\n.petal { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; overflow: visible; }\n\n.hero__flip { position: absolute; left: 50%; top: 50%; width: 300px; height: 390px; z-index: 12; overflow: hidden; border-radius: 20px; background: var(--navy); transform: translate(-50%, -50%); }\n.hero__flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }\n.hero__flip img:first-child { opacity: 1; }\n\n.hero__ui {\n  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;\n  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px;\n  padding: 0 var(--gutter) calc(var(--gutter) * .9 + var(--wf-badge, 0px));\n  color: var(--cream);\n}\n.hero__claim { font-family: var(--f-display); font-size: clamp(26px, 2.9vw, 52px); line-height: .92; text-transform: uppercase; }\n.hero__claim .line { display: block; overflow: hidden; padding-top: .3em; margin-top: -.3em; }\n.hero__claim .line > span { display: block; }\n.hero__badge { position: relative; display: grid; place-items: center; width: clamp(96px, 8.4vw, 136px); aspect-ratio: 1; justify-self: center; }\n.hero__badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }\n.hero__badge-ring text { font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: .06em; fill: var(--cream); text-transform: uppercase; }\n.hero__badge::before { content: \"\"; position: absolute; inset: 22%; border-radius: 50%; background: var(--red); transition: transform .5s var(--ease-out); }\n@media (hover: hover) { .hero__badge:hover::before { transform: scale(1.15); } }\n.hero__badge-arrow { position: relative; width: 30%; height: auto; color: var(--cream); animation: bob 1.8s var(--ease-io) infinite; }\n.hero__meta { justify-self: end; display: grid; gap: 4px; text-align: right; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; overflow: hidden; }\n.hero__meta span { display: block; }\n/* Karlshorst live: echte Uhrzeit und Temperatur, davor ein pulsierender roter Punkt (nur solange der Hero live ist) */\n.hero__meta span.is-live::before { content: \"\"; display: inline-block; width: 7px; height: 7px; margin: 0 .7em .1em 0; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(193, 17, 31, .6); vertical-align: middle; animation: livePulse 1.8s ease-out infinite; }\n@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(193, 17, 31, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(193, 17, 31, 0); } }\n@keyframes spin { to { transform: rotate(360deg); } }\n@keyframes bob { 0%, 100% { transform: translateY(-18%); } 50% { transform: translateY(18%); } }\n\n/* ==========================================================================\n   INTRO\n   ========================================================================== */\n.intro {\n  position: relative; z-index: 2; overflow: hidden; overflow: clip;   /* hidden: R\u00fcckfall f\u00fcr iOS 15 (kein clip) */\n  background: var(--cream); color: var(--navy);\n  border-radius: var(--radius) var(--radius) 0 0;\n  padding: clamp(96px, 15vh, 190px) var(--gutter) 0;\n  box-shadow: 0 -30px 90px rgba(0, 20, 35, .28);\n}\n.intro__title { display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(50px, 10.6vw, 210px); line-height: .86; margin: 30px 0 clamp(56px, 9vw, 140px); }   /* flex: die negativen R\u00e4nder der Zeilen addieren sich (kein Zusammenfallen), der Abstand bleibt wie vorher */\n.intro__title .ln { display: block; overflow: hidden; padding: .32em 0 .2em; margin: -.32em 0 -.2em; }   /* unten Platz f\u00fcr den Wurzel-Strich, sonst schnitt die Maske ihn halb ab */\n/* Die \u00c4-Punkte in \u201eschl\u00e4gt\u201c ragen weit \u00fcber die Gro\u00dfbuchstaben: Die letzte Zeile bekommt Luft,\n   sonst sto\u00dfen sie an \u201eWurzeln\u201c und dessen Wurzel-Strich */\n.intro__title .ln:last-child { margin-top: .06em; }\n.intro__title .ln__i { display: inline-flex; align-items: center; gap: .2em; }\n.intro__title em { position: relative; font-style: normal; color: var(--red); }\n.intro__root { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .2em; overflow: visible; }\n.intro__root path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }\n.pill { position: relative; display: inline-block; flex: none; width: 1.95em; height: .72em; border-radius: 999px; overflow: hidden; transform: translateY(-.03em); }\n.pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.pill--b img { object-position: 50% 60%; }   /* Innenhof (Rendering 03) statt des Bl\u00e4tter-Fotos: Fassade und Rasen im Streifen */\n.intro__cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 5vw; align-items: end; }\n.intro__big { font-size: clamp(24px, 3.1vw, 54px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }\n.intro__small { font-size: clamp(16px, 1.25vw, 20px); max-width: 30ch; padding-bottom: .4em; border-top: 1.5px solid rgba(0, 48, 73, .2); padding-top: 18px; }\n.garden { position: relative; height: clamp(260px, 50vh, 560px); margin: clamp(40px, 8vh, 100px) calc(var(--gutter) * -1) 0; }\n.plant { position: absolute; bottom: -3px; left: var(--x); height: var(--h); transform-origin: 50% 100%; }\n.plant svg { height: 100%; width: auto; transform-origin: 50% 100%; overflow: visible; }\n\n/* ==========================================================================\n   STATS\n   ========================================================================== */\n.stats { position: relative; z-index: 2; overflow: hidden; overflow: clip; background: var(--navy); color: var(--cream); padding: clamp(100px, 18vh, 220px) var(--gutter) clamp(90px, 14vh, 170px); }\n.stats__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 8.6vw, 170px); line-height: .86; margin-top: 26px; }\n.stats__title .char { display: inline-block; }\n.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 11vh, 150px); }\n.stat { position: relative; padding: 30px 24px 0 0; }\n.stat__line { position: absolute; top: 0; left: 0; right: 18px; height: 1.5px; background: rgba(250, 245, 237, .35); transform-origin: 0 50%; }\n.stat__num { display: flex; align-items: flex-start; gap: .08em; font-family: var(--f-display); font-size: clamp(64px, 8.2vw, 156px); line-height: 1.1; }\n.stat__pre, .stat__unit { font-family: var(--f-body); font-weight: 700; font-size: .2em; line-height: 1; margin-top: .55em; color: var(--blue); letter-spacing: .02em; }\n/* gr\u00f6\u00dfer auf Wunsch des Kumpels (vorher fest 12px) */\n.stat__label { margin-top: 16px; font-size: clamp(13.5px, 1.15vw, 18px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 245, 237, .78); }\n.stats__text { max-width: 30ch; margin: clamp(70px, 12vh, 150px) 0 0 auto; font-size: clamp(22px, 2.4vw, 42px); line-height: 1.16; font-weight: 500; letter-spacing: -.015em; }\n\n/* ==========================================================================\n   BANDS\n   ========================================================================== */\n.bands { position: relative; z-index: 2; height: clamp(230px, 36vh, 400px); overflow: hidden; background: linear-gradient(var(--navy) 50%, var(--cream) 50%); }\n.band { position: absolute; left: -8%; right: -8%; top: 50%; padding: clamp(12px, 1.4vw, 22px) 0; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 20, 35, .18); }\n.band--a { background: var(--red); color: var(--cream); transform: translateY(-50%) rotate(-4deg); z-index: 2; }\n.band--b { background: var(--blue); color: var(--navy); transform: translateY(-50%) rotate(3.2deg); }\n.band__track { display: flex; width: max-content; will-change: transform; }\n.band__group { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 44px); padding-right: clamp(22px, 2.6vw, 44px); font-family: var(--f-display); font-size: clamp(32px, 4.6vw, 84px); line-height: 1; text-transform: uppercase; white-space: nowrap; }\n.band__group svg { width: .78em; height: auto; flex: none; }\n\n/* ==========================================================================\n   R\u00dcCKZUGSORT\n   ========================================================================== */\n.retreat { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--cream); }\n.retreat__media { position: absolute; inset: 0; overflow: hidden; clip-path: inset(29% 33% 29% 33% round 32px); --shade: 0; }\n.retreat__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); }\n.retreat__media::after { content: \"\"; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0, 36, 58, .85) 0%, rgba(0, 36, 58, .25) 45%, rgba(0, 36, 58, 0) 70%); opacity: var(--shade); }\n.retreat__title {\n  position: absolute; inset: 0; pointer-events: none;\n  display: flex; flex-direction: column; justify-content: space-between; align-items: center;\n  padding: clamp(96px, 11vh, 130px) var(--gutter) 9vh; text-align: center;\n  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;\n  font-size: clamp(42px, 8.4vw, 170px); line-height: .86; color: var(--navy);\n}\n.retreat__title span { display: block; }\n/* h\u00f6chstens 55 % breit: zwischen 761 und ~1000 px (iPad hochkant, Handy quer) lagen die Schlagwort-Pillen rechts auf dem Text */\n.retreat__copy { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 8px); max-width: min(600px, 55%); color: var(--cream); font-size: clamp(17px, 1.55vw, 26px); line-height: 1.38; font-weight: 500; }\n.retreat__tags { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + 8px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: 40%; }\n.retreat__play { width: 11px; height: 13px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }\n\n/* ==========================================================================\n   RAUMKONZEPT (horizontal)\n   ========================================================================== */\n.raum { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--cream); color: var(--navy); }\n.raum__track { display: flex; align-items: center; gap: clamp(48px, 7vw, 150px); width: max-content; height: 100%; padding: 0 12vw 0 var(--gutter); will-change: transform; }\n.rp { position: relative; flex: none; }\n.rp--intro { width: min(88vw, 980px); }\n.raum__big { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(70px, 14vw, 270px); line-height: .82; margin: 26px 0 34px; }\n.raum__big span { display: block; }\n.raum__big .outline {\n  padding-top: .2em; margin-top: -.2em;   /* die Buchstaben ragen \u00fcber die Zeile: Die F\u00fcllung (Hintergrund) muss bis ganz oben reichen */\n  color: transparent; -webkit-text-stroke: 2px var(--navy);\n  background: linear-gradient(90deg, var(--navy) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;\n  -webkit-background-clip: text; background-clip: text;\n}\n.raum__big .solid { color: var(--red); }\n/* Umlaute in eng gesetzten \u00dcberschriften (main.js markiert die W\u00f6rter): Die Punkte von \u00c4, \u00d6, \u00dc stehen in der Markenschrift\n   weit \u00fcber den Gro\u00dfbuchstaben und rutschten sonst in die Zeile dar\u00fcber (\u201eF\u00fcr alle\u201c verschmolz mit \u201eEin Quartier\u201c) */\n.uml { display: inline-block; padding-top: .24em; }\n.raum__big .solid .char { display: inline-block; }\n.raum__lead { max-width: 24ch; font-size: clamp(19px, 1.8vw, 30px); line-height: 1.22; font-weight: 500; letter-spacing: -.01em; }\n.raum__hint { display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }\n.raum__hint svg { width: 34px; height: auto; color: var(--red); transform: rotate(-90deg); animation: nudge 1.6s var(--ease-io) infinite; }\n/* waagerecht in Pfeilrichtung (Wischen/Weiterfahren geht nach rechts); vorher wippte der nach rechts zeigende Pfeil hoch und runter */\n@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }\n\n.rp--img { width: clamp(300px, 44vw, 780px); }\n.rp--tall { width: clamp(270px, 30vw, 540px); }\n.rp--wide { width: clamp(320px, 58vw, 1040px); }\n.rp__img { position: relative; height: 60vh; height: 60svh; border-radius: var(--radius); overflow: hidden; background: var(--cream-2); }\n.rp--tall .rp__img { height: 70vh; height: 70svh; }\n.rp__img img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; object-fit: cover; }\n.rp figcaption { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin-top: 22px; max-width: 540px; }\n.rp__n { grid-row: span 2; font-family: var(--f-display); font-size: 22px; line-height: 1.1; color: var(--red); }\n.rp figcaption h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.3vw, 40px); line-height: .95; }\n.rp figcaption p { font-size: 15px; color: rgba(0, 48, 73, .78); }\n.rp--type { width: clamp(300px, 38vw, 660px); text-align: center; }\n.rp__rooms { display: flex; justify-content: center; align-items: center; gap: .12em; font-family: var(--f-display); font-size: clamp(130px, 22vw, 420px); line-height: 1.1; }\n.rp__rooms .dash { width: .34em; height: .09em; border-radius: .05em; background: var(--red); transform: translateY(-.06em); }\n.rp__rooms-label { font-family: var(--f-display); font-size: clamp(38px, 4.2vw, 78px); line-height: 1; text-transform: uppercase; margin-top: -.1em; }\n.rp__rooms-sub { max-width: 28ch; margin: 18px auto 0; font-size: 15px; color: rgba(0, 48, 73, .75); }\n.rp--features { width: clamp(330px, 62vw, 1060px); }\n.rp__ftitle { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 86px); line-height: .88; }\n.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }\n.feat { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: clamp(170px, 24vh, 250px); padding: clamp(20px, 2vw, 32px); border-radius: calc(var(--radius) * .8); background: var(--navy); color: var(--cream); }\n.feat:nth-child(2) { background: var(--blue); color: var(--navy); }\n.feat:nth-child(3) { background: var(--red); }\n.feat:nth-child(4) { background: var(--cream-2); color: var(--navy); }\n.feat svg { width: clamp(42px, 3.4vw, 54px); height: auto; }\n.feat h4 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.3vw, 40px); line-height: .95; }\n.feat p { margin-top: 10px; font-size: 14px; line-height: 1.45; opacity: .86; }\n.raum__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px; height: 2px; background: rgba(0, 48, 73, .12); }\n.raum__progress i { position: absolute; inset: 0; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }\n\n/* ==========================================================================\n   NACHHALTIGKEIT\n   ========================================================================== */\n.green { position: relative; z-index: 2; background: var(--navy); color: var(--cream); }\n.green__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }\n.green__eye { position: absolute; inset: 0; clip-path: circle(16% at 50% 50%); }\n.green__eye img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }\n.green__eye::after { content: \"\"; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 48, 73, .25), rgba(0, 48, 73, .78)); }\n.green__head { position: relative; z-index: 2; padding: 0 var(--gutter); text-align: center; }\n/* gr\u00f6\u00dfer auf Wunsch des Kumpels (27.09.; Handy s. u.): vorher 8,4vw bzw. 16\u201322px */\n.green__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 9.4vw, 190px); line-height: .86; max-width: 14ch; margin: 22px auto 26px; text-shadow: 0 .04em .2em rgba(0, 24, 38, .35); }\n.green__title .char { display: inline-block; }\n.green__sub { max-width: 40ch; margin: 0 auto; font-size: clamp(19px, 1.75vw, 30px); font-weight: 500; text-shadow: 0 .05em .4em rgba(0, 24, 38, .4); }\n.green__text { padding: clamp(110px, 18vh, 220px) var(--gutter) clamp(70px, 12vh, 140px); }\n.green__text p { max-width: 30ch; font-size: clamp(26px, 3.3vw, 58px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }\n\n.stack { position: relative; padding: 0 var(--gutter) 14vh; }\n.card { position: relative; height: min(78vh, 820px); margin-bottom: 7vh; }\n.card:last-child { margin-bottom: 0; }\n.card__inner {\n  position: relative; height: 100%; overflow: hidden; border-radius: var(--radius);\n  display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(20px, 3vw, 56px);\n  padding: clamp(22px, 3vw, 52px); transform-origin: 50% 0%;\n  box-shadow: 0 -20px 60px rgba(0, 16, 28, .28);\n}\n.card--cream .card__inner { background: var(--cream); color: var(--navy); }\n.card--blue .card__inner { background: var(--blue); color: var(--navy); }\n.card--red .card__inner { background: var(--red); color: var(--cream); }\n.card--navy .card__inner { background: #0b3d58; color: var(--cream); }\n.card__text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 0; }\n.card__top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 16px; border-bottom: 1.5px solid currentColor; }\n.card__n { font-family: var(--f-display); font-size: clamp(38px, 4vw, 70px); line-height: .9; letter-spacing: 0; }\n.card__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4.1vw, 80px); line-height: .88; margin-bottom: 20px; }\n.card__body > p { max-width: 46ch; font-size: clamp(15px, 1.1vw, 18px); opacity: .9; }\n.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }\n.chips li { padding: 8px 14px; border-radius: 99px; border: 1.5px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }\n.card__visual { position: relative; border-radius: calc(var(--radius) * .7); overflow: hidden; min-height: 0; }\n.card__visual--img img { width: 100%; height: 115%; object-fit: cover; }\n.card__shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #00121e; opacity: 0; pointer-events: none; }\n\n.card__visual--sun { display: grid; place-items: center; background: rgba(0, 48, 73, .12); }\n.sun { position: relative; width: min(64%, 46vh); aspect-ratio: 1; display: grid; place-items: center; }\n.sun__flower { width: 100%; height: 100%; color: var(--cream); animation: spin 22s linear infinite; }\n.sun__core { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(193, 17, 31, .5); animation: pulse 2.2s ease-out infinite; }\n.orbit { position: absolute; inset: 8%; animation: spin 14s linear infinite reverse; }\n.orbit svg { position: absolute; width: 13%; height: auto; color: var(--navy); }\n.orbit svg:nth-child(1) { left: 0; top: 44%; }\n.orbit svg:nth-child(2) { right: 4%; top: 6%; color: var(--cream-2); }\n.orbit svg:nth-child(3) { right: 12%; bottom: 0; color: var(--red); }\n@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(193, 17, 31, .55); } 100% { box-shadow: 0 0 0 36px rgba(193, 17, 31, 0); } }\n@keyframes pulseSm { 0% { box-shadow: 0 0 0 0 rgba(193, 17, 31, .55); } 100% { box-shadow: 0 0 0 9px rgba(193, 17, 31, 0); } }\n\n.card__visual--charge { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(12px, 2vh, 22px); padding: clamp(20px, 3vw, 48px); background: rgba(0, 0, 0, .12); }\n.charge__scene { display: block; width: 100%; max-width: 640px; height: auto; }\n.charge__road { stroke: rgba(250, 245, 237, .4); }\n.charge__stat { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); width: 100%; max-width: 640px; }\n.charge__num { display: flex; align-items: flex-start; justify-content: flex-end; flex: none; min-width: 2.3em; font-family: var(--f-display); font-size: clamp(44px, 4.4vw, 84px); line-height: 1; }\n.charge__pct { font-size: .5em; margin-left: .06em; line-height: 1.05; }\n.charge__label { font-size: 13px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; opacity: .85; }\n.battery { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: calc(100% - 10px); max-width: 630px; height: clamp(44px, 6vh, 64px); margin-right: 10px; padding: 7px; border: 2px solid currentColor; border-radius: 14px; }\n.battery::after { content: \"\"; position: absolute; right: -10px; top: 30%; width: 6px; height: 40%; border-radius: 0 4px 4px 0; background: currentColor; }\n.battery i { border-radius: 5px; background: var(--cream); transform-origin: 0 50%; }\n\n.card__visual--badges { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; place-items: center; background: rgba(255, 255, 255, .05); padding: clamp(16px, 2vw, 32px); }\n.stamp { display: grid; place-content: center; text-align: center; width: min(100%, 24vh); aspect-ratio: 1; border-radius: 50%; border: 2px dashed currentColor; font-family: var(--f-display); text-transform: uppercase; line-height: .9; }\n.stamp span { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .14em; }\n.stamp b { font-weight: 400; font-size: clamp(30px, 3vw, 54px); }\n.stamp--a { background: var(--red); border-color: var(--cream); border-style: solid; transform: rotate(-8deg); }\n.stamp--b { background: var(--cream); color: var(--navy); border-style: solid; transform: rotate(6deg); grid-column: 2; grid-row: 1 / 3; }\n.stamp--c { background: #fff; border: 0; overflow: hidden; transform: rotate(-4deg); }\n.stamp--c img { width: 78%; height: auto; margin: auto; }\n\n/* ==========================================================================\n   DAS PROJEKT\n   ========================================================================== */\n.projekt { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--cream); color: var(--navy); }\n.projekt__inner { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 3vh, 34px); padding: calc(var(--nav-h) + 6px) var(--gutter) var(--gutter); }\n.projekt__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }\n.projekt__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 5.4vw, 104px); line-height: .86; margin-top: 14px; }\n.plan__steps { display: flex; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }\n.plan__steps li { padding: 9px 14px; border-radius: 99px; border: 1.5px solid rgba(0, 48, 73, .25); transition: background .4s ease, color .4s ease, border-color .4s ease; white-space: nowrap; }\n.plan__steps li.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream); }\n.plan { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3.2vw, 60px); min-height: 0; }\n.plan__visual { position: relative; min-height: 0; border-radius: var(--radius); overflow: hidden; background: var(--plan); }\n.plan__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.plan__img:not([data-plan=\"base\"]) { clip-path: inset(0 100% 0 0); }\n.plan__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--red); box-shadow: 0 0 24px 4px rgba(193, 17, 31, .5); opacity: 0; }\n.plan__tag { position: absolute; left: 18px; bottom: 18px; max-width: 280px; padding: 12px 16px; border-radius: 16px; background: rgba(250, 245, 237, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; line-height: 1.35; }\n.plan__info { position: relative; display: grid; align-content: center; min-height: 0; }\n.phase { grid-area: 1 / 1; visibility: hidden; }\n.phase__status { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }\n.phase__status i { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 48, 73, .35); }\n.phase__status--live i { background: var(--red); animation: pulse 1.8s ease-out infinite; }\n.phase__name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 4.9vw, 96px); line-height: .86; margin: 16px 0 10px; }\n/* Farben der Bauabschnitte = Farben ihrer H\u00e4user im Lageplan (I & II graublau, III & IV rot, V & VI blau); das Graublau\n   etwas dunkler als im Bild (#869AAC), sonst zu blass als Schrift auf Creme */\n.projekt { --ph0: #6886A1; --ph1: var(--red); --ph2: var(--teal); }\n.phase--0 .phase__name { color: var(--ph0); }\n.phase--1 .phase__name { color: var(--ph1); }\n.phase--2 .phase__name { color: var(--ph2); }\n.phase__wa { font-size: 13px; font-weight: 600; letter-spacing: .08em; opacity: .7; }\n.phase__facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 22px; border-top: 1.5px solid rgba(0, 48, 73, .2); }\n.phase__facts div { padding: 16px 12px 0 0; }\n.phase__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }\n.phase__facts dd { font-family: var(--f-display); font-size: clamp(40px, 4.4vw, 84px); line-height: 1; margin-top: 8px; }\n.phase__text { max-width: 44ch; font-size: clamp(14px, 1.05vw, 17px); opacity: .85; }\n.sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .05em .22em; margin: 20px 0 18px; font-family: var(--f-display); font-size: clamp(56px, 6.6vw, 132px); line-height: .92; text-transform: uppercase; }\n.sum span { display: inline-block; }\n/* Summe: jede Zahl in der Farbe ihrer H\u00e4user (Spans aus initProjekt), das Ergebnis dunkel (rot h\u00e4tte nach III & IV ausgesehen) */\n.sum__n--0 { color: var(--ph0); }\n.sum__n--1 { color: var(--ph1); }\n.sum__n--2 { color: var(--ph2); }\n.sum__eq { width: 100%; color: var(--navy); font-size: 1.35em; }\n/* Hochformat ab Tablet (iPad hochkant): Lageplan \u00fcber die ganze Breite, Angaben darunter. Zweispaltig war der Plan so\n   schmal und hoch beschnitten, dass die H\u00e4user von I & II und V & VI au\u00dferhalb des Bildes lagen. */\n@media (min-width: 761px) and (orientation: portrait) {\n  .plan { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }\n  .plan__info { align-content: start; }\n}\n\n/* ==========================================================================\n   LAGE\n   ========================================================================== */\n.lage { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--map); color: var(--navy); }\n.lage__map { position: absolute; inset: 0; }\n.lage__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }\n.lage__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(246, 248, 235, .96) 0%, rgba(246, 248, 235, .7) 30%, rgba(246, 248, 235, 0) 55%); }\n.lage__copy { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 12px); }\n.lage__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(58px, 10vw, 200px); line-height: .84; margin-top: 16px; }\n.lage__title .char { display: inline-block; }\n/* Marker folgt dem Quartier (Position per JS), die Pop-Animation sitzt am inneren Element */\n.lage__marker { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; will-change: transform; }\n.lage__marker-in { position: absolute; left: 0; top: 0; }\n.lage__ring { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--red); animation: ring 2.4s var(--ease-out) infinite; }\n.lage__ring--2 { animation-delay: 1.2s; }\n@keyframes ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }\n.lage__pin { position: absolute; left: 0; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 99px; background: var(--navy); color: var(--cream); white-space: nowrap; font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 26px); line-height: 1; text-transform: uppercase; box-shadow: 0 16px 40px rgba(0, 30, 50, .35); }\n.lage__pin::after { content: \"\"; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--navy); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }\n.lage__pin svg { width: 22px; height: auto; color: var(--red); }\n.lage__labels { position: absolute; right: var(--gutter); bottom: var(--gutter); height: 1em; overflow: hidden; font-family: var(--f-display); font-size: clamp(38px, 6vw, 118px); line-height: 1; text-transform: uppercase; text-align: right; }\n.lage__ticker span { display: block; height: 1em; }\n.lage__ticker span:last-child { color: var(--red); }\n/* Schilder an den Zielen der Wege (Name in der Markenschrift, Minuten in Inter Tight) */\n.lage__dests { position: absolute; inset: 0; pointer-events: none; z-index: 2; }\n.lage__dest { position: absolute; left: 0; top: 0; will-change: transform; }\n.lage__dest-in { display: grid; gap: 5px; width: max-content; padding: 11px 15px 12px; border-radius: 14px; background: rgba(250, 245, 237, .95); color: var(--navy); white-space: nowrap; box-shadow: 0 12px 34px rgba(0, 30, 50, .16); visibility: hidden; opacity: 0; }\n.lage__dest b { font-family: var(--f-display); font-weight: 400; font-size: clamp(16px, 1.4vw, 23px); line-height: 1; text-transform: uppercase; padding-top: .14em; }\n.lage__dest span { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: rgba(0, 48, 73, .78); }\n.lage__dest span i { font-style: normal; color: var(--red); }\n.lage__dest--minor .lage__dest-in { padding: 8px 12px 9px; background: rgba(250, 245, 237, .9); }\n.lage__dest--minor b { font-size: clamp(13px, 1.05vw, 16px); }\n.lage__dest--minor span { font-size: 11.5px; }\n/* Quellenangabe der Karte (Pflicht: \u00a9 OpenStreetMap-Mitwirkende) */\n.lage__credit { position: absolute; left: var(--gutter); bottom: 12px; z-index: 3; font-size: 10.5px; line-height: 1.3; color: rgba(0, 48, 73, .62); }\n.lage__credit a { text-decoration: underline; text-underline-offset: 2px; }\n/* Minuten-Liste: am Desktop nur f\u00fcr Screenreader (Karte und Schilder sind aria-hidden), am Handy sichtbar */\n.lage__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }\n\n/* ==========================================================================\n   KIEZ\n   ========================================================================== */\n.kiez { position: relative; z-index: 2; background: var(--cream); color: var(--navy); padding: clamp(110px, 17vh, 210px) var(--gutter) clamp(110px, 17vh, 210px); }\n.kiez__head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 5vw; align-items: end; margin-bottom: clamp(60px, 11vh, 130px); }\n.kiez__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(50px, 8.2vw, 160px); line-height: .84; }\n.kiez__title .char { display: inline-block; }\n.kiez__lead { font-size: clamp(20px, 1.9vw, 32px); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; margin-bottom: 18px; }\n.kiez__text { max-width: 52ch; color: rgba(0, 48, 73, .8); }\n.places { border-top: 1.5px solid rgba(0, 48, 73, .18); }\n.place { position: relative; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 20px; padding: clamp(18px, 2.4vw, 34px) 0; border-bottom: 1.5px solid rgba(0, 48, 73, .18); overflow: hidden; }\n.place::before { content: \"\"; position: absolute; inset: 0; z-index: 0; background: var(--navy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .65s var(--ease-io); }\n.place > * { position: relative; z-index: 1; transition: color .55s var(--ease-io), transform .65s var(--ease-io); }\n.place__n { padding-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--red); }\n.place__name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 5.4vw, 104px); line-height: .92; }\n.place__tag { padding-right: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; text-align: right; }\n.place__thumb { display: none; }\n@media (hover: hover) {\n  .place:hover::before { transform: scaleY(1); }\n  .place:hover > * { color: var(--cream); }\n  .place:hover .place__name { transform: translateX(28px); }\n}\n/* Karte mit dem Foto des Ortes, l\u00e4uft am Desktop mit der Maus \u00fcber die Liste (Fotos quer, 4:3) */\n.places__float { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(240px, 24vw, 400px); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; pointer-events: none; transform: scale(0); box-shadow: 0 30px 70px rgba(0, 30, 50, .35); background: var(--navy); }\n.pslide { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }\n.pslide img { width: 100%; height: 100%; object-fit: cover; }\n.places__credit { max-width: 110ch; margin-top: 26px; font-size: 11px; line-height: 1.6; color: rgba(0, 48, 73, .62); }\n.places__credit a { text-decoration: underline; text-decoration-color: rgba(0, 48, 73, .28); text-underline-offset: 2px; transition: color .3s ease, text-decoration-color .3s ease; }\n.places__credit a:hover { color: var(--navy); text-decoration-color: var(--red); }\n/* Touch-Ger\u00e4te ab Tablet-Breite haben keine Maus-Karte: dort steht das Foto klein in der Zeile */\n@media (hover: none) and (min-width: 761px) {\n  .place { grid-template-columns: 70px 1fr auto auto; }\n  .place__thumb { display: block; width: 132px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--navy); }\n  .place__thumb img { width: 100%; height: 100%; object-fit: cover; }\n}\n\n/* ==========================================================================\n   GESCHICHTE\n   ========================================================================== */\n.history { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--navy); color: var(--cream); }\n.history__shape { position: absolute; right: -8vw; bottom: -18vh; width: clamp(300px, 46vw, 820px); height: auto; color: rgba(102, 155, 188, .16); transform-origin: 50% 70%; }\n.history__inner { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--nav-h) + 16px) var(--gutter) calc(var(--gutter) + 8px); }\n.history__big { align-self: center; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(64px, 14.5vw, 290px); line-height: .9; white-space: nowrap; }\n.history__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }\n.history__steps { display: grid; max-width: 560px; }\n.hstep { grid-area: 1 / 1; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.3; font-weight: 500; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .8s var(--ease-out); }\n.hstep.is-active { opacity: 1; transform: none; }\n.hstep b { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }\n.history__dots { display: flex; gap: 10px; }\n.history__dots i { width: 38px; height: 4px; border-radius: 4px; background: rgba(250, 245, 237, .2); transition: background .5s ease; }\n.history__dots i.is-active { background: var(--red); }\n.history__rail { position: absolute; right: calc(var(--gutter) * .5); top: 22vh; bottom: 22vh; width: 2px; background: rgba(250, 245, 237, .14); }\n.history__rail i { position: absolute; inset: 0; background: var(--red); transform-origin: 50% 0; transform: scaleY(0); }\n/* Fotos zu den Stationen (main.js baut sie aus data-img\u2026 der Stationen) */\n.hpic { margin: 0; }\n.hpic__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(250, 245, 237, .07); }\n.hpic__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.hpic__cap { display: flex; flex-direction: column; gap: 2px; margin-top: 9px; font-size: 11px; line-height: 1.4; color: rgba(250, 245, 237, .58); }\n.hpic__what { font-weight: 600; color: rgba(250, 245, 237, .86); }\n.hpic__by:empty { display: none; }\n.hpic a, .hline__credit a { text-decoration: underline; text-decoration-color: rgba(250, 245, 237, .3); text-underline-offset: 2px; transition: color .3s ease, text-decoration-color .3s ease; }\n.hpic a:hover, .hline__credit a:hover { color: var(--cream); text-decoration-color: var(--red); }\n/* Jahres-Wort am Desktop: Abz\u00fcge mit Rand, die sich rechts stapeln */\n.hpics { position: absolute; right: calc(var(--gutter) + 4.5vw); top: 50%; width: clamp(280px, 30vw, 520px); translate: 0 -56%; pointer-events: none; }\n.hpics::before { content: \"\"; display: block; padding-top: calc(75% + 70px); }\n.hpics__stack { position: absolute; inset: 0; transition: opacity .6s ease, transform .8s var(--ease-out); }\n.hpics.is-empty .hpics__stack { opacity: 0; transform: translateY(40px); }\n.hpic--print { position: absolute; left: 0; top: 0; width: 100%; padding: 10px 10px 0; background: var(--cream); box-shadow: 0 30px 60px rgba(0, 12, 22, .42), 0 2px 6px rgba(0, 12, 22, .2); pointer-events: auto; will-change: transform; }\n.hpic--print::after { content: \"\"; position: absolute; inset: 0; background: var(--navy); opacity: 0; transition: opacity .6s ease; pointer-events: none; }\n.hpic--print.is-under::after { opacity: .3; }\n.hpic--print .hpic__img { background: #e9e1d0; }\n.hpic--print .hpic__cap { min-height: 60px; margin: 0; padding: 10px 2px 12px; color: rgba(0, 48, 73, .62); }\n.hpic--print .hpic__what { color: var(--navy); }\n.hpic--print a { text-decoration-color: rgba(0, 48, 73, .3); }\n.hpic--print a:hover { color: var(--navy); }\n\n/* ==========================================================================\n   IMAGE TRAIL\n   ========================================================================== */\n.trail { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; text-align: center; background: var(--blue); color: var(--navy); }\n.trail__imgs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }\n.trail__img { position: absolute; left: 0; top: 0; width: clamp(160px, 19vw, 340px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; opacity: 0; box-shadow: 0 28px 60px rgba(0, 30, 50, .3); will-change: transform; }\n.trail__img img { width: 100%; height: 100%; object-fit: cover; }\n.trail__content { position: relative; z-index: 3; pointer-events: none; padding: 0 var(--gutter); }\n.trail__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 8.2vw, 160px); line-height: .86; color: var(--cream); margin: 22px 0 30px; text-shadow: 0 .03em .18em rgba(0, 48, 73, .35); }\n.trail__title .char { display: inline-block; }\n.trail__hint { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px; background: var(--navy); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }\n.trail__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.6s ease-out infinite; }\n.trail__hint-touch, .footer__hint-touch { display: none; }\n@media (hover: none), (pointer: coarse) {\n  .trail__hint-mouse, .footer__hint-mouse { display: none; }\n  .trail__hint-touch, .footer__hint-touch { display: inline; }\n}\n\n/* ==========================================================================\n   FILM (Baustelle aus der Luft): stummer Loop, Desktop mit Schrift-Maske (html[data-film])\n   ========================================================================== */\n.film { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: var(--cream); color: var(--cream); }\n.film__media { position: absolute; inset: 0; overflow: hidden; background: var(--navy); }\n.film__media picture { display: contents; }\n.film__poster, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.film__video { opacity: 0; transition: opacity .8s ease; }\n.film__video.is-playing { opacity: 1; }\n/* Spielt iOS nicht automatisch ab (Stromsparmodus), bliebe sonst ein Play-Symbol \u00fcber dem Film: dann steht das Poster */\n.film__video::-webkit-media-controls, .film__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }\n.film__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 36, 58, .8) 0%, rgba(0, 36, 58, .24) 38%, rgba(0, 36, 58, 0) 60%); opacity: 0; }\nhtml[data-film=\"karte\"] .film__shade { opacity: 1; }\n.film__mask { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; display: none; }\nhtml[data-film=\"schrift\"] .film__mask { display: block; }\n.film__copy { position: absolute; z-index: 4; left: var(--gutter); right: calc(var(--gutter) + 90px); bottom: calc(var(--gutter) + 8px); display: grid; justify-items: start; gap: 16px; }\n.film__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 7.4vw, 140px); line-height: .86; padding-top: .12em; text-shadow: 0 .04em .3em rgba(0, 20, 35, .35); }\n/* Schrift-Fassung: Der Titel steht gro\u00df in der Maske, hier nur f\u00fcr Screenreader */\nhtml[data-film=\"schrift\"] .film__title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }\n.film__btn { margin-top: 6px; padding: 16px 26px 16px 20px; background: rgba(0, 36, 58, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }\n.film__pause { position: absolute; z-index: 5; right: calc(var(--gutter) + 26px); bottom: calc(var(--gutter) + 12px); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--cream); background: rgba(0, 36, 58, .35); border: 1.5px solid rgba(250, 245, 237, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s ease, color .3s ease, border-color .3s ease; }\n.film__pause:focus-visible { background: var(--cream); color: var(--navy); border-color: var(--cream); }\n@media (hover: hover) { .film__pause:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); } }\n.film__pause i { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }\n.film__pause.is-paused i { width: 12px; margin-left: 3px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }\n\n/* Lightbox f\u00fcr den ganzen Film (Vimeo), main.js initLightbox. \u00dcber allem au\u00dfer dem eigenen Cursor (der ist dann aus) */\n.lightbox { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: max(64px, 7vh) var(--gutter); background: rgba(0, 20, 32, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s ease; }\n.lightbox.is-open { opacity: 1; }\n.lightbox:not(.is-open) { pointer-events: none; }\nhtml.lightbox-open { background: rgb(0, 20, 32); }   /* Streifen der freigehaltenen Scrollleiste wie der Hintergrund der Lightbox */   /* beim Aus- und Einblenden keine Klicks abfangen */\n.lightbox__frame { position: relative; width: min(100%, calc((100vh - 2 * max(64px, 7vh)) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: translateY(18px) scale(.97); transition: transform .6s var(--ease-out); }\n@supports (height: 100svh) { .lightbox__frame { width: min(100%, calc((100svh - 2 * max(64px, 7svh)) * 16 / 9)); } }\n.lightbox.is-open .lightbox__frame { transform: none; }\n.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }\n.lightbox__close { position: absolute; top: calc(max(12px, env(safe-area-inset-top, 0px)) + 4px); right: max(12px, var(--gutter)); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cream); color: var(--navy); transition: background .3s ease, color .3s ease; }\n.lightbox__close i { position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }\n.lightbox__close i + i { transform: rotate(-45deg); }\n.lightbox__close:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }\n@media (hover: hover) { .lightbox__close:hover { background: var(--red); color: var(--cream); } }\n/* solange der Film l\u00e4uft: normaler Mauszeiger (\u00fcber dem Vimeo-Player kommt der eigene nicht an), keine Leiste, keine Pille */\nhtml.has-cursor.lightbox-open .lightbox, html.has-cursor.lightbox-open .lightbox * { cursor: auto !important; }\nhtml.has-cursor.lightbox-open .lightbox__close { cursor: pointer !important; }\nhtml.lightbox-open .cursor, html.lightbox-open .secnav, html.lightbox-open .skip { opacity: 0 !important; pointer-events: none !important; }\n\n/* ==========================================================================\n   NEUIGKEITEN\n   ========================================================================== */\n.news { position: relative; z-index: 2; background: var(--cream); color: var(--navy); padding: clamp(110px, 17vh, 210px) var(--gutter) clamp(120px, 18vh, 230px); }\n.news__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(36px, 6vh, 64px); }\n.news__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(50px, 8.2vw, 160px); line-height: .84; margin-top: 16px; }\n.news__title .char { display: inline-block; }\n.news__card { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: var(--cream); will-change: transform; }\n.news__img { position: relative; min-height: clamp(320px, 60vh, 640px); overflow: hidden; }\n.news__img img { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; }\n.news__body { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 36px; padding: clamp(26px, 4vw, 64px); }\n.news__body h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 5.8vw, 112px); line-height: .86; }\n\n/* ==========================================================================\n   KONTAKT\n   ========================================================================== */\n.kontakt { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto 1fr; column-gap: 6vw; align-items: start; background: var(--red); color: var(--cream); border-radius: 0 0 var(--radius) var(--radius); padding: clamp(96px, 14vh, 160px) var(--gutter) clamp(70px, 10vh, 120px); box-shadow: 0 40px 90px rgba(0, 16, 28, .35); }\n.kontakt > .kicker { grid-column: 1; grid-row: 1; justify-self: start; }\n.kontakt__title { grid-column: 1; grid-row: 2; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 5.6vw, 104px); line-height: .86; margin: 18px 0 22px; }\n.kontakt__title .char { display: inline-block; }\n.kontakt__lead { grid-column: 1; grid-row: 3; max-width: 44ch; font-size: clamp(16px, 1.15vw, 19px); }\n.kontakt__grid { display: contents; }\n.kontakt__direct { grid-column: 1; grid-row: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: clamp(26px, 4.5vh, 46px); }\n.biglink { display: inline-block; font-family: var(--f-display); font-size: clamp(24px, 2.3vw, 42px); line-height: 1.15; text-transform: uppercase; }\n.biglink .roll { line-height: 1.12; }\n.kontakt address { margin-top: 16px; font-style: normal; opacity: .88; }\n.form { grid-column: 2; grid-row: 1 / span 4; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }\n.field { position: relative; }\n.field--full { grid-column: 1 / -1; }\n.field input, .field textarea {\n  display: block; width: 100%; padding: 24px 0 9px; border: 0; border-bottom: 1.5px solid rgba(250, 245, 237, .5); border-radius: 0;\n  background: transparent; color: var(--cream); font: inherit; font-size: 17px; outline: none; resize: none;\n}\n.field label { position: absolute; left: 0; top: 24px; font-size: 17px; color: rgba(250, 245, 237, .78); pointer-events: none; transform-origin: 0 0; transition: transform .5s var(--ease-out), color .4s ease; }\n.field input:focus + label, .field input:not(:placeholder-shown) + label,\n.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.7); color: var(--cream); }\n.field i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-io); }\n.field input:focus ~ i, .field textarea:focus ~ i { transform: scaleX(1); }\n.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--cream-2); }\n.field.is-invalid label { color: var(--cream-2); }\n.field.is-invalid::after { content: \"Pflichtfeld\"; position: absolute; right: 0; top: 30px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-2); }\n.check { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; font-size: 14px; cursor: pointer; }\n.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.check__box { position: relative; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--cream); border-radius: 7px; transition: background .3s ease; }\n.check input:checked + .check__box { background: var(--cream); }\n.check input:checked + .check__box::after { content: \"\"; position: absolute; left: 7.5px; top: 3.5px; width: 6px; height: 11px; border: solid var(--red); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }\n.check input:focus-visible + .check__box { outline: 2px solid var(--cream); outline-offset: 3px; }\n.check.is-invalid .check__box { border-color: var(--cream-2); box-shadow: 0 0 0 3px rgba(245, 237, 214, .35); }\n.check a { text-decoration: underline; text-underline-offset: 3px; }\n.form__foot { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; }\n.form__note { font-size: 14px; font-weight: 600; }\n\n/* ==========================================================================\n   FOOTER\n   ========================================================================== */\n.footer { position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 600px; margin-top: calc(var(--radius) * -1); overflow: hidden; background: var(--navy); color: var(--cream); }\n.footer__inner { position: absolute; inset: 0; display: flex; flex-direction: column; }\n.footer__stage { position: relative; flex: 1; overflow: hidden; }\n.footer__bg { position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 0%, #86b5d2 0%, var(--blue) 52%, #5b8fb0 100%); }\n.footer__render { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }\nhtml[data-footer=\"rendering\"] .footer__render { display: block; }\nhtml[data-footer=\"rendering\"] .footer__bg::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 36, 58, .62) 0%, rgba(0, 36, 58, .34) 34%, rgba(0, 36, 58, 0) 60%, rgba(0, 36, 58, .22) 100%); }\nhtml[data-footer=\"rendering\"] .footer__word { text-shadow: 0 .03em .28em rgba(0, 24, 40, .5); }\n.footer__word { position: absolute; left: 0; right: 0; top: calc(var(--radius) + 11vh); text-align: center; white-space: nowrap; font-family: var(--f-display); text-transform: uppercase; font-size: 15.4vw; line-height: .8; color: var(--cream); text-shadow: 0 .03em .12em rgba(0, 48, 73, .2); }\n.footer__word .char { display: inline-block; }\n.footer__world { position: absolute; inset: 0; z-index: 3; touch-action: pan-y; }\n.pbody { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }\n.pbody svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0, 30, 50, .22)); }\n.footer__hint { position: absolute; z-index: 4; right: var(--gutter); top: calc(var(--radius) + 20px); padding: 9px 16px; border-radius: 99px; background: rgba(0, 48, 73, .82); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }\n.footer__bar { position: relative; z-index: 5; display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; align-items: center; gap: 24px; padding: 26px var(--gutter) calc(26px + var(--wf-badge, 0px)); background: var(--navy); font-size: 13px; }\n.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }\n.footer__col--brand { flex-direction: row; align-items: center; gap: 16px; }\n.footer__col--brand svg { width: 34px; height: auto; flex: none; color: var(--cream); }\n.footer__col--brand p { opacity: .8; }\n.footer__col--brand .footer__credit { margin-top: 8px; font-size: 11px; line-height: 1.5; opacity: .55; }\n.footer__credit a { text-decoration: underline; text-decoration-color: rgba(250, 245, 237, .3); text-underline-offset: 2px; }\n.footer__top { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: var(--cream); }\n.footer__top svg { width: 26px; height: auto; transform: rotate(180deg); }\n\n/* ==========================================================================\n   RESPONSIVE\n   ========================================================================== */\n@media (max-width: 1180px) {\n  .nav__links { display: none; }\n}\n\n@media (max-width: 1000px) {\n  .menu__panel { grid-template-columns: 1fr; align-content: end; }\n  .kiez__head { grid-template-columns: 1fr; }\n  .kontakt { display: block; }\n  .kontakt__title { font-size: clamp(44px, 8vw, 80px); }\n  .kontakt__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 34px; }\n  .kontakt__direct { margin-top: 0; }\n  .kontakt__direct, .form { grid-column: auto; grid-row: auto; }\n  .footer__bar { grid-template-columns: 1fr 1fr; }\n  .footer__col--brand { grid-column: 1 / -1; }\n}\n\n@media (max-width: 760px) {\n  :root { --nav-h: 72px; }\n  /* auch nach der H\u00f6he begrenzt: auf kleinen iPhones (548 px) rutschte der erste Punkt sonst unter die Kn\u00f6pfe */\n  .menu__link { font-size: min(9.4vw, 5.6svh); gap: 12px; }\n  .menu__panel { gap: 26px; }\n  .nav__brand { display: none; }\n  .hero { --hb: max(40.2vw, 58svh); }\n  .hero__build img, .hero__build .build__gl { transform: translateX(-31%); }\n  .hero__ui { grid-template-columns: 1fr auto; }\n  .hero__meta { display: none; }\n  .hero__badge { width: 88px; }\n\n  .intro__title { font-size: 10vw; }\n  .intro__title .ln__i { gap: .16em; }\n  .pill { width: 1.4em; }\n  .intro__cols { grid-template-columns: 1fr; gap: 28px; }\n  .retreat__title { font-size: 9.4vw; }\n  .raum__big { font-size: 17vw; }\n  .history__big { font-size: 13vw; }\n  .trail__title { font-size: 9.6vw; }\n  .green__title { font-size: 12.6vw; }   /* Nachhaltigkeit: vorher 36px (Kumpel: \u201emuss gr\u00f6\u00dfer\u201c) */\n  .garden { height: 34vh; }\n\n  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }\n\n  /* \u00dcber Kreuz w\u00fcrden sich die B\u00e4nder auf schmalen Bildschirmen fast ganz verdecken: hier \u00fcbereinander */\n  .bands { height: 290px; }\n  .band--b { top: 30%; transform: translateY(-50%) rotate(2.6deg); }\n  .band--a { top: 70%; transform: translateY(-50%) rotate(-3deg); }\n  /* Der gro\u00dfe Pulsring l\u00e4ge wie ein Fleck \u00fcber Knopf und Text */\n  .trail__dot, .phase__status--live i { animation-name: pulseSm; }\n  /* Preloader: \u00dcberspringen unter die obere Zeile, sonst liegt der Knopf auf den Koordinaten */\n  .loader__skip { top: calc(var(--gutter) * .8 + 58px); }\n  /* Men\u00fc: Deko nur unten rechts neben der Adresse, nicht hinter den Men\u00fcpunkten */\n  .menu__shape--2, .menu__shape--4 { display: none; }\n  .menu__shape--1 { top: auto; bottom: 19%; right: 5%; width: 84px; }\n  .menu__shape--3 { top: auto; bottom: 5%; right: 7%; width: 54px; }\n\n  .retreat__copy { right: var(--gutter); max-width: none; font-size: 16px; }\n  .retreat__tags { display: none; }\n\n  .rp--intro { width: 86vw; }\n  .rp--img, .rp--tall, .rp--wide { width: 80vw; }\n  .rp__img, .rp--tall .rp__img { height: 52svh; }\n  .rp--type { width: 80vw; }\n  .rp--features { width: 88vw; }\n  .feats { grid-template-columns: 1fr 1fr; gap: 10px; }\n  .feat { min-height: 0; padding: 16px; gap: 12px; }\n  .feat svg { width: 34px; }\n  .feat p { font-size: 12px; }\n\n  .card { height: 84svh; }\n  .card__inner { display: flex; flex-direction: column; gap: 14px; padding: 18px; }\n  .card__visual { order: -1; flex: 1 1 auto; min-height: 16svh; }\n  .card__text { flex: none; min-height: auto; }\n  .card__title { font-size: 28px; margin-bottom: 12px; }\n  .card__n { font-size: 34px; }\n  .card__text { gap: 12px; }\n  .card__top { padding-bottom: 10px; }\n  .card__body > p { font-size: 13.5px; line-height: 1.45; }\n  .chips { margin-top: 12px; }\n  .chips li { padding: 6px 10px; font-size: 10px; }\n  .card__visual--charge { padding: 16px 18px; }\n  .battery { height: 34px; padding: 5px; gap: 4px; border-radius: 11px; }\n  .battery i { border-radius: 4px; }\n  .card__visual--badges { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }\n  .stamp { width: 100%; }\n  .stamp--b { grid-column: auto; grid-row: auto; }\n  .stamp b { font-size: 24px; }\n  .stamp span { font-size: 9px; }\n\n  .projekt__inner { gap: 14px; }\n  .plan__steps { display: none; }\n  .projekt__title { font-size: 34px; }\n  .plan { grid-template-columns: 1fr; grid-template-rows: 28svh minmax(0, 1fr); gap: 14px; }\n  .plan__tag { display: none; }\n  .plan__info { align-content: start; }\n  .phase__name { font-size: 34px; margin: 8px 0 4px; }\n  .phase__facts { margin: 14px 0 12px; }\n  .phase__facts div { padding-top: 10px; }\n  .phase__facts dd { font-size: 32px; }\n  .phase__text { font-size: 13px; line-height: 1.45; }\n  .sum { font-size: 54px; margin: 12px 0; }\n\n  .lage__veil { background: linear-gradient(180deg, rgba(246, 248, 235, .96) 0%, rgba(246, 248, 235, .6) 34%, rgba(246, 248, 235, 0) 55%); }\n  .place { grid-template-columns: 1fr auto; gap: 6px 14px; }\n  .place__n { display: none; }\n  .place__tag { grid-column: 1; grid-row: 2; text-align: left; padding: 0; font-size: 10px; }\n  /* Foto des Ortes quer (4:3) neben dem Namen, gro\u00df genug zum Erkennen */\n  .place__thumb { display: block; grid-column: 2; grid-row: 1 / 3; align-self: center; width: 96px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--navy); }\n  .place__thumb img { width: 100%; height: 100%; object-fit: cover; }\n  .places__credit { margin-top: 20px; font-size: 10.5px; }\n  .places__float { display: none; }\n\n  .history__foot { flex-direction: column; align-items: flex-start; }\n  .history__rail { display: none; }\n\n  .news__card { grid-template-columns: 1fr; }\n  .news__img { min-height: 42svh; }\n\n  .form { grid-template-columns: 1fr; }\n  .footer__bar { grid-template-columns: 1fr auto; gap: 18px; padding: 20px var(--gutter) calc(20px + var(--wf-badge, 0px)); font-size: 12px; }\n  .footer__col--brand { grid-column: 1 / -1; }\n  .footer__col:nth-child(3) { grid-column: 1; }\n  .footer__top { grid-column: 2; grid-row: 2 / 4; align-self: center; width: 54px; height: 54px; }\n  .footer__word { top: calc(var(--radius) + 13vh); }\n  .footer__hint { left: var(--gutter); right: auto; }\n}\n\n/* ==========================================================================\n   SCHLANKE HANDY-FASSUNG (html.lite, setzt main.js beim Laden unter 761 px)\n   Statt langer gepinnter Scroll-Szenen: kompakte Abschnitte und Wisch-Karussells.\n   ========================================================================== */\nhtml.lite .raum__track, html.lite .stack, html.lite .plan__info {\n  display: flex; gap: 14px; width: auto; height: auto; padding: 0 var(--gutter);\n  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);\n  scrollbar-width: none; will-change: auto;\n}\nhtml.lite .raum__track::-webkit-scrollbar, html.lite .stack::-webkit-scrollbar, html.lite .plan__info::-webkit-scrollbar { display: none; }\nhtml.lite .raum__track > *, html.lite .stack > .card, html.lite .plan__info > .phase { flex: 0 0 auto; scroll-snap-align: start; }\n\n/* Garten im Intro: am Handy 5 statt 9 Pflanzen, neu verteilt (Kumpel: \u201eweniger Pflanzen auf dem Handy\u201c, es war\n   gedr\u00e4ngt voll). Raus: kleine Tulpe, Vase, Schnecke, zweite Tulpe */\nhtml.lite .garden .plant:nth-child(2), html.lite .garden .plant:nth-child(4), html.lite .garden .plant:nth-child(7), html.lite .garden .plant:nth-child(8) { display: none; }\n/* !important, weil --x/--h im Markup inline stehen */\nhtml.lite .garden .plant:nth-child(1) { --x: -3% !important; --h: 58% !important; }\nhtml.lite .garden .plant:nth-child(3) { --x: 25% !important; --h: 70% !important; }\nhtml.lite .garden .plant:nth-child(5) { --x: 43% !important; --h: 88% !important; }\nhtml.lite .garden .plant:nth-child(6) { --x: 70% !important; --h: 44% !important; }\nhtml.lite .garden .plant:nth-child(9) { --x: 91% !important; --h: 36% !important; }\n\n/* R\u00fcckzugsort ohne Drohnenflug */\nhtml.lite .retreat { display: flex; flex-direction: column; height: auto; overflow: visible; padding: calc(var(--nav-h) + 20px) var(--gutter) 70px; }\nhtml.lite .retreat__title { order: -1; position: static; display: block; padding: 0; text-align: left; font-size: 12.4vw; pointer-events: auto; }\nhtml.lite .retreat__r { color: var(--red); }\nhtml.lite .retreat__media { position: relative; inset: auto; height: 58svh; margin: 24px 0 22px; border-radius: 24px; clip-path: inset(0 round 24px); }\nhtml.lite .retreat__media img { transform: none; }\nhtml.lite .retreat__media::after, html.lite .dive, html.lite .dive__canvas, html.lite .dive__img { display: none; }\nhtml.lite .retreat__copy { position: static; max-width: none; color: var(--navy); font-size: 17px; line-height: 1.45; }\nhtml.lite .retreat__tags { position: static; display: flex; justify-content: flex-start; max-width: none; margin-top: 20px; }\nhtml.lite .retreat__tags .tag { color: var(--navy); background: transparent; border-color: rgba(0, 48, 73, .3); }\n\n/* Raumkonzept als Karussell */\nhtml.lite .raum { height: auto; overflow: visible; padding: calc(var(--nav-h) + 10px) 0 64px; }\nhtml.lite .raum > .rp--intro { width: auto; padding: 0 var(--gutter); margin-bottom: 28px; }\nhtml.lite .raum__big { margin: 18px 0 20px; }\nhtml.lite .raum__hint { margin-top: 22px; }\nhtml.lite .raum__track { align-items: stretch; }\nhtml.lite .rp--img, html.lite .rp--tall, html.lite .rp--wide, html.lite .rp--type, html.lite .rp--features { width: 82vw; }\nhtml.lite .rp__img, html.lite .rp--tall .rp__img { height: 46svh; }\nhtml.lite .rp--type { display: flex; flex-direction: column; justify-content: center; padding: 24px 16px; border-radius: 24px; background: var(--cream-2); }\nhtml.lite .raum__progress { position: relative; left: auto; right: auto; bottom: auto; margin: 26px var(--gutter) 0; }\n\n/* Nachhaltigkeit: Kreis ohne Pin, Karten als Karussell */\nhtml.lite .green__pin { height: 92svh; }\nhtml.lite .green__text { padding: 64px var(--gutter) 40px; }\nhtml.lite .green__text p { font-size: 25px; }\nhtml.lite .stack { padding-bottom: 64px; }\n/* Karten so hoch wie ihr Inhalt (feste 72svh waren in Safari mit Leisten zu knapp: Zahl und Batterie wurden\n   abgeschnitten); im Karussell werden alle so hoch wie die h\u00f6chste, das Bild f\u00fcllt den Rest */\nhtml.lite .card { width: 84vw; height: auto; margin: 0; }\nhtml.lite .card__inner { box-shadow: none; }\nhtml.lite .card__visual { flex: 1 0 auto; min-height: 150px; }\nhtml.lite .card__visual--img { height: 26svh; }\nhtml.lite .card__visual--sun { min-height: 190px; }\nhtml.lite .card__visual--charge { gap: 8px; }\nhtml.lite .charge__num { font-size: 40px; }\nhtml.lite .charge__label { font-size: 11px; }\n\n/* Das Projekt: Plan oben, Bauabschnitte als Karussell */\nhtml.lite .projekt { height: auto; overflow: visible; }\nhtml.lite .projekt__inner { display: block; height: auto; padding: calc(var(--nav-h) + 10px) 0 60px; }\nhtml.lite .projekt__head { display: block; padding: 0 var(--gutter); }\nhtml.lite .plan__steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }\nhtml.lite .plan__steps li { padding: 7px 12px; font-size: 11px; cursor: pointer; }\nhtml.lite .plan { display: block; margin-top: 18px; }\nhtml.lite .plan__visual { height: 32svh; margin: 0 var(--gutter) 16px; }\nhtml.lite .phase { visibility: visible; grid-area: auto; width: 84vw; padding: 18px; border-radius: 20px; background: rgba(0, 48, 73, .06); }\n\n/* Lage: auf dem Handy reicht der Marker, der Stadtteil-Schriftzug w\u00fcrde die Karten-Beschriftung \u00fcberdecken */\nhtml.lite .lage__labels { display: none; }\n/* Lage am Handy: kein Pin, Titel \u00fcber der Karte, darunter die Minuten-Liste und die Quellenangabe */\nhtml.lite .lage { height: auto; overflow: visible; display: flex; flex-direction: column; }\nhtml.lite .lage__copy { position: static; order: -1; padding: calc(var(--nav-h) + 8px) var(--gutter) 18px; }\nhtml.lite .lage__map { position: relative; height: 84svh; overflow: hidden; }\nhtml.lite .lage__veil { display: none; }\nhtml.lite .lage__pin { font-size: 14px; gap: 7px; padding: 8px 12px 8px 10px; bottom: 16px; }\nhtml.lite .lage__pin svg { width: 16px; }\nhtml.lite .lage__ring { left: -30px; top: -30px; width: 60px; height: 60px; }\nhtml.lite .lage__dest-in { padding: 7px 10px 8px; border-radius: 11px; gap: 3px; }\nhtml.lite .lage__dest b { font-size: 14px; }\nhtml.lite .lage__dest span { font-size: 11px; }\nhtml.lite .lage__credit { position: static; padding: 14px var(--gutter) 34px; }\nhtml.lite .lage__list { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: grid; gap: 0; padding: 22px var(--gutter) 0; }\nhtml.lite .lage__list li { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px; padding: 13px 0 12px; border-top: 1px solid rgba(0, 48, 73, .14); }\nhtml.lite .lage__list li:last-child { border-bottom: 1px solid rgba(0, 48, 73, .14); }\nhtml.lite .lage__list b { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1; text-transform: uppercase; padding-top: .14em; }\nhtml.lite .lage__list span { font-size: 12.5px; font-weight: 600; color: rgba(0, 48, 73, .78); text-align: right; }\nhtml.lite .lage__list span small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 48, 73, .5); }\nhtml.lite .lage__list-head { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(0, 48, 73, .55); padding: 0 0 10px; }\n\n/* Geschichte als Zeitleiste */\nhtml.lite .history { height: auto; }\nhtml.lite .history__inner { display: block; height: auto; padding: calc(var(--nav-h) + 10px) var(--gutter) 70px; }\nhtml.lite .history__big, html.lite .history__dots, html.lite .history__rail { display: none; }\nhtml.lite .history__foot { display: block; margin-top: 26px; }\nhtml.lite .history__steps { display: grid; gap: 30px; max-width: none; }\nhtml.lite .hstep { grid-area: auto; opacity: 1; transform: none; transition: none; }\nhtml.lite .hstep::before { content: attr(data-word); display: block; margin-bottom: 8px; font-family: var(--f-display); font-size: 15vw; line-height: .9; text-transform: uppercase; color: var(--cream); }\nhtml.lite .hpic--inline { margin: 6px 0 18px; }\nhtml.lite .hpic--inline .hpic__img { border-radius: 14px; }\n.history__steps { list-style: none; margin: 0; padding: 0; }\n/* Geschichte als Zeitstrahl (?geschichte=zeitstrahl): Stationen auf einer Linie, die durchs Bild f\u00e4hrt */\n.hline { position: absolute; inset: 0; pointer-events: none; --gap: 50vw; --x0: calc(var(--gutter) + 5vw); }\n.hline__track { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--x0) + (var(--n) - 1) * var(--gap) + 100vw); will-change: transform; }\n.hline__base, .hline__fill { position: absolute; left: var(--x0); top: 60%; width: calc((var(--n) - 1) * var(--gap)); height: 2px; background: rgba(250, 245, 237, .16); }\n.hline__fill { background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }\n.hline__st { position: absolute; left: calc(var(--x0) + var(--i) * var(--gap)); top: 60%; width: 0; }\n.hline__year { position: absolute; left: -.04em; bottom: 30px; font-family: var(--f-display); font-size: clamp(80px, 13vw, 250px); line-height: .9; white-space: nowrap; text-transform: uppercase; color: var(--cream); opacity: .14; transform: translateY(12px); transition: opacity .6s ease, transform .8s var(--ease-out), color .6s ease; }\n.hline__dot { position: absolute; left: -9px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); border: 2px solid rgba(250, 245, 237, .45); transition: background .4s ease, border-color .4s ease, box-shadow .6s ease; }\n.hline__year--long { font-size: clamp(64px, 8.4vw, 160px); }\n.hline__txt { position: absolute; left: 0; top: 40px; width: min(470px, 38vw); font-size: clamp(17px, 1.35vw, 23px); line-height: 1.4; font-weight: 500; color: var(--cream); opacity: .14; transform: translateY(12px); transition: opacity .6s ease, transform .8s var(--ease-out); }\n.hline__txt b { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }\n.hline__st.is-past .hline__year { opacity: .3; transform: none; }\n.hline__st.is-past .hline__dot { background: var(--red); border-color: var(--red); }\n.hline__st.is-on .hline__year, .hline__st.is-on .hline__txt { opacity: 1; transform: none; }\n.hline__st.is-on .hline__dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 9px rgba(193, 17, 31, .2); }\n/* Foto \u00fcber der Jahreszahl: so hoch, wie \u00fcber der Zahl Platz ist; die Zahl ragt zur H\u00e4lfte hinein */\n.hline { --yfs: clamp(80px, 13vw, 250px); --pich: clamp(140px, calc(60svh - 110px - .5 * var(--yfs) - var(--nav-h)), 44vh); }\n.hline__year { z-index: 2; }\n.hline__pic { position: absolute; left: 0; bottom: calc(30px + .5 * var(--yfs)); z-index: 1; height: var(--pich); aspect-ratio: 4 / 3; opacity: .12; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--ease-out); }\n.hline__st--long .hline__pic { bottom: calc(30px + .5 * clamp(64px, 8.4vw, 160px)); }\n.hline__pic .hpic__img { height: 100%; }\n.hline__pic .hpic__img::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 36, 55, .72) 0%, rgba(0, 36, 55, 0) 42%); }\n.hline__st.is-past .hline__pic { opacity: .26; transform: none; }\n.hline__st.is-on .hline__pic { opacity: 1; transform: none; }\n.hline__credit { display: block; margin-top: 12px; font-size: 11px; line-height: 1.4; font-weight: 400; color: rgba(250, 245, 237, .55); }\n.hline__credit a { pointer-events: auto; }\nhtml[data-history=\"zeitstrahl\"] .history__big, html[data-history=\"zeitstrahl\"] .history__rail, html[data-history=\"zeitstrahl\"] .history__dots { display: none; }\nhtml[data-history=\"zeitstrahl\"] .history__steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }\n/* Handy: senkrechte Linie links, Stationen untereinander */\nhtml.lite[data-history=\"zeitstrahl\"] .hline { position: relative; inset: auto; margin-top: 30px; --x0: 0px; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__track { position: relative; width: auto; height: auto; }\nhtml.lite[data-history=\"zeitstrahl\"] :is(.hline__base, .hline__fill) { left: 8px; top: 12px; bottom: 40px; width: 2px; height: auto; transform-origin: 50% 0; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__fill { transform: scaleY(0); }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__st { position: relative; left: 0; top: 0; width: auto; padding: 0 0 40px 40px; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__year { position: static; display: block; font-size: 15vw; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__year--long { font-size: 12vw; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__dot { left: 0; top: 6px; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__txt { position: static; width: auto; margin-top: 12px; font-size: 16px; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__st.is-past .hline__txt { opacity: 1; transform: none; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__pic { position: relative; left: auto; bottom: auto; height: auto; width: 100%; margin-top: 14px; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__pic .hpic__img { height: auto; border-radius: 14px; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__pic .hpic__img::after { display: none; }\nhtml.lite[data-history=\"zeitstrahl\"] .hline__st.is-past .hline__pic { opacity: 1; }\n/* Geschichte auf der Karte (?geschichte=karte): links Jahr und Text, rechts die Vektorkarte im dunklen Thema */\n.hmap { position: absolute; inset: 0; }\n.hmap__view { position: absolute; right: 0; top: 0; width: 64%; height: 100%; }\n.hmap__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }\n.hmap__view::after { content: \"\"; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--navy) 0%, rgba(0, 48, 73, 0) 30%), linear-gradient(0deg, var(--navy) 0%, rgba(0, 48, 73, 0) 16%), linear-gradient(180deg, var(--navy) 0%, rgba(0, 48, 73, 0) 18%); }\n.hmap__pin { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; will-change: transform, opacity; }\n.hmap__pin .lage__ring { border-color: var(--red); }\n.hmap__tag { position: absolute; left: 18px; top: -46px; padding: 9px 14px 8px; border-radius: 99px; background: var(--cream); color: var(--navy); white-space: nowrap; font-family: var(--f-display); font-size: clamp(15px, 1.2vw, 20px); line-height: 1; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }\n.hmap__copy { position: absolute; left: var(--gutter); top: 30%; width: 38%; }\n.hmap__st { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .8s var(--ease-out); }\n.hmap__st.is-on { opacity: 1; transform: none; }\n.hmap__year { font-family: var(--f-display); font-size: clamp(72px, 9.4vw, 180px); line-height: .9; text-transform: uppercase; white-space: nowrap; }\n.hmap__year--long { font-size: clamp(56px, 6.4vw, 124px); }\n.hmap__txt { margin-top: 24px; max-width: 460px; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.4; font-weight: 500; }\n.hmap__txt b { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }\n.hmap__credit { position: absolute; right: var(--gutter); bottom: 12px; z-index: 3; font-size: 10.5px; color: rgba(250, 245, 237, .55); }\n/* OSM-Hinweis ist Pflicht: direkt \u00fcber das Webflow-Badge, b\u00fcndig mit ihm (links daneben stie\u00df er auf Tablets an die\n   \u00dcberspringen-Pille; Handy: steht im Fluss, s. u.) */\nhtml:has(.w-webflow-badge) .hmap__credit { right: 12px; bottom: 46px; }\n.hmap__credit a { text-decoration: underline; text-underline-offset: 2px; }\n/* Luftbild-Fenster bei 1909 und 2030: Stempel \u201eLuftbild 1928\u201c sitzt unten auf dem Ring (Lage per transform, Deckkraft aus\n   historyMap in main.js); solange das Fenster offen ist, pulsiert die Ortsmarke nicht (Ringe laufen per Animation \u00fcber\n   die Deckkraft, deshalb ausblenden statt opacity) */\n.hmap__lb { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; padding: 8px 13px 7px; border: 1px solid rgba(250, 245, 237, .32); border-radius: 99px; background: rgba(0, 48, 73, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(250, 245, 237, .78); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; line-height: 1; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform, opacity; }\n.hmap__lb:empty { display: none; }\n.hmap__pin.is-lens .lage__ring { visibility: hidden; }\n.hmap__lb b { margin-left: 5px; font-family: var(--f-display); font-size: 16px; font-weight: 400; letter-spacing: .02em; color: var(--cream); }\n/* Foto als Abzug unten rechts in der Karte */\n.hmap__pics { position: absolute; right: calc(var(--gutter) + 3.5vw); bottom: 76px; z-index: 3; width: clamp(220px, 21vw, 380px); }\n.hmap__pics::before { content: \"\"; display: block; padding-top: calc(75% + 62px); }\n.hmap__pic { position: absolute; left: 0; top: 0; width: 100%; padding: 8px 8px 0; background: var(--cream); box-shadow: 0 26px 54px rgba(0, 8, 16, .5); opacity: 0; transform: translateY(16px) rotate(2.5deg); transition: opacity .5s ease, transform .9s var(--ease-out); }\n.hmap__pic.is-on { opacity: 1; transform: rotate(-1.5deg); }\n.hmap__pic .hpic__img { background: #e9e1d0; }\n.hmap__pic .hpic__cap { min-height: 54px; margin: 0; padding: 8px 2px 10px; color: rgba(0, 48, 73, .62); }\n.hmap__pic .hpic__what { color: var(--navy); }\n.hmap__pic a { text-decoration-color: rgba(0, 48, 73, .3); }\n.hmap__pic a:hover { color: var(--navy); }\nhtml[data-history=\"karte\"] .history__big, html[data-history=\"karte\"] .history__rail, html[data-history=\"karte\"] .history__dots, html[data-history=\"karte\"] .history__shape { display: none; }\nhtml[data-history=\"karte\"] .history__steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }\n/* \u00dcberschrift \u00fcber die Karte legen: unter ~1000 px Breite beginnt die Karte (64 %) links von ihrem Ende und schnitt sie ab (\u201e\u2026GESCHICH\u201c) */\nhtml:not(.lite)[data-history=\"karte\"] .history__inner > .kicker { position: relative; z-index: 4; }\n/* Handy: Karte bleibt oben stehen, die Stationen scrollen darunter durch */\nhtml.lite[data-history=\"karte\"] .history { overflow: clip; }\n@supports not (overflow: clip) { html.lite[data-history=\"karte\"] .history { overflow: visible; } }   /* iOS 15: sonst klebte die Karte nicht */\nhtml.lite[data-history=\"karte\"] .hmap { position: relative; inset: auto; margin-top: 18px; }\nhtml.lite[data-history=\"karte\"] .hmap__view { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 2; width: auto; height: 38svh; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }\nhtml.lite[data-history=\"karte\"] .hmap__view::after { display: block; background: linear-gradient(0deg, rgba(0, 36, 55, .85) 0%, rgba(0, 36, 55, 0) 38%); }\n/* Vorhang \u00fcber der stehenden Karte: klebt oben, liegt unter der Karte und \u00fcber den Stationen. Ohne ihn tauchten Text und\n   Fotos, die unter der Karte durchgelaufen waren, im Spalt dar\u00fcber (Platz f\u00fcr die Nav) wieder auf. Reicht bis hinter\n   die runden Ecken der Karte (+16px), sonst blitzt dort Inhalt durch. */\nhtml.lite[data-history=\"karte\"] .hmap::before { content: \"\"; position: sticky; top: 0; z-index: 1; display: block; height: calc(var(--nav-h) + 22px); margin-bottom: calc(-1 * (var(--nav-h) + 22px)); background: var(--navy); pointer-events: none; }\n.hmap__now { display: none; }\n/* Jahreszahl in der Karte: Deckkraft = Anteil der gro\u00dfen Zahl der aktiven Station, der schon unter der Karte liegt\n   (Inline-Stil aus historyMap, main.js); die kurze \u00dcberblendung gl\u00e4ttet Scroll-Schritte und den Wechsel der Station */\nhtml.lite[data-history=\"karte\"] .hmap__now { display: block; position: absolute; left: 14px; bottom: 8px; z-index: 3; font-family: var(--f-display); font-size: 12vw; line-height: 1; text-transform: uppercase; color: var(--cream); opacity: 0; transform: translateY(10px); transition: opacity .2s linear, transform .2s linear; }\nhtml.lite[data-history=\"karte\"] .hmap__tag { left: 12px; top: -38px; padding: 7px 11px 6px; font-size: 13px; }\nhtml.lite[data-history=\"karte\"] .hmap__lb { padding: 6px 10px 5px; font-size: 9px; }\nhtml.lite[data-history=\"karte\"] .hmap__lb b { font-size: 13px; }\nhtml.lite[data-history=\"karte\"] .hmap__copy { position: relative; left: 0; top: 0; width: auto; padding-top: 10px; }\nhtml.lite[data-history=\"karte\"] .hmap__st { position: relative; min-height: 46svh; padding: 26px 0 10px; opacity: .3; transform: none; }\nhtml.lite[data-history=\"karte\"] .hmap__st.is-on { opacity: 1; }\nhtml.lite[data-history=\"karte\"] .hmap__year { font-size: 15vw; }\nhtml.lite[data-history=\"karte\"] .hmap__year--long { font-size: 12vw; }\nhtml.lite[data-history=\"karte\"] .hmap__txt { margin-top: 12px; font-size: 16px; }\nhtml.lite[data-history=\"karte\"] .hmap__credit { position: static; padding: 6px 0 0; text-align: left; }\nhtml.lite[data-history=\"karte\"] .hmap__st .hpic--inline { margin: 16px 0 0; }\n\n/* Film: Titel \u00fcber der Hochformat-Karte (4:5), Knopf darunter */\nhtml.lite .film { display: flex; flex-direction: column; align-items: flex-start; height: auto; overflow: visible; padding: calc(var(--nav-h) + 10px) var(--gutter) 70px; color: var(--navy); }\nhtml.lite .film__copy { display: contents; }\nhtml.lite .film .kicker { order: 1; color: var(--navy); }\nhtml.lite .film__title { order: 2; margin: 16px 0 22px; font-size: 12.4vw; text-shadow: none; }\nhtml.lite .film__media { order: 3; position: relative; inset: auto; align-self: stretch; aspect-ratio: 4 / 5; border-radius: 24px; clip-path: inset(0 round 24px); }\nhtml.lite .film__btn { order: 4; margin-top: 22px; color: var(--navy); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }\nhtml.lite .film__btn .btn__fill { background: var(--navy); }\n@media (hover: hover) { html.lite .film__btn:hover { color: var(--cream); } }\nhtml.lite .film__pause { right: 14px; bottom: 14px; width: 44px; height: 44px; }\n\n/* Ruhige Fassung f\u00fcr \u201eBewegung reduzieren\u201c. Derzeit abgeschaltet: Die Einstellung wird auf Wunsch ignoriert\n   (REDUCED = false in main.js), html.reduced wird also nie gesetzt. */\nhtml.reduced :is(.grain, .hero__badge-ring, .hero__badge-arrow, .sun__flower, .orbit, .raum__hint svg, .lage__ring, .hero__sky img, .dive__rec b, .nav__sound.is-on .eq i),\nhtml.reduced .nav__sound.is-hint::after { animation: none !important; }\n/* Laufb\u00e4nder ohne Bewegung: alle W\u00f6rter zeigen statt eines stehenden Ausschnitts \u2013 untereinander, Text umbrochen */\nhtml.reduced .bands { height: auto; display: grid; gap: clamp(18px, 3vw, 40px); padding: clamp(48px, 7vw, 100px) 0; }\nhtml.reduced .band { position: relative; top: auto; left: auto; right: auto; margin: 0 -8%; }\nhtml.reduced .band--b { transform: rotate(2deg); }\nhtml.reduced .band--a { transform: rotate(-2.4deg); }\nhtml.reduced .band__track { width: auto; justify-content: center; }\nhtml.reduced .band__group + .band__group { display: none; }\nhtml.reduced .band__group { flex-wrap: wrap; justify-content: center; row-gap: .2em; padding: 0 12%; white-space: normal; text-align: center; }\nhtml.reduced .band__group svg:last-child { display: none; }   /* Trenner am Ende gibt es nur f\u00fcr die Endlosschleife */\n@media (max-width: 760px) {\n  html.reduced .band__group { font-size: 24px; column-gap: 14px; padding: 0 9%; }\n}\n\n\n/* ==========================================================================\n   WEBGL, DROHNENFLUG, WURZELN, BL\u00dcTEN\n   ========================================================================== */\n.gl-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; pointer-events: none; }\n\n.dive__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; }\n.dive__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }\n.dive { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: var(--cream); visibility: hidden; opacity: 0; }\n.dive__frame i { position: absolute; width: clamp(26px, 3vw, 44px); height: clamp(26px, 3vw, 44px); border: 2px solid rgba(250, 245, 237, .9); }\n.dive__frame i:nth-child(1) { left: var(--gutter); top: calc(var(--nav-h) + 10px); border-right: 0; border-bottom: 0; }\n.dive__frame i:nth-child(2) { right: var(--gutter); top: calc(var(--nav-h) + 10px); border-left: 0; border-bottom: 0; }\n.dive__frame i:nth-child(3) { left: var(--gutter); bottom: var(--gutter); border-right: 0; border-top: 0; }\n.dive__frame i:nth-child(4) { right: var(--gutter); bottom: var(--gutter); border-left: 0; border-top: 0; }\n.dive__cross { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); opacity: .85; }\n.dive__cross::before, .dive__cross::after { content: \"\"; position: absolute; background: var(--cream); }\n.dive__cross::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }\n.dive__cross::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }\n.dive__top, .dive__bottom { position: absolute; display: flex; align-items: center; gap: 26px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 20, 35, .55); }\n.dive__top { left: calc(var(--gutter) + clamp(40px, 4vw, 62px)); top: calc(var(--nav-h) + 20px); }\n.dive__bottom { right: calc(var(--gutter) + clamp(40px, 4vw, 62px)); bottom: calc(var(--gutter) + 10px); }\n.dive__rec b { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--red); animation: rec 1.1s step-end infinite; }\n@keyframes rec { 50% { opacity: 0; } }\n.dive__zoom b { font-family: var(--f-display); font-size: 22px; font-weight: 400; letter-spacing: 0; margin: 0 2px; }\n.dive__meter { position: relative; width: clamp(80px, 12vw, 180px); height: 2px; background: rgba(250, 245, 237, .3); }\n.dive__meter i { position: absolute; inset: 0; background: var(--cream); transform-origin: 0 50%; transform: scaleX(0); }\n.dive__caption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16vh; height: 1em; font-family: var(--f-display); font-size: clamp(40px, 7.4vw, 140px); line-height: 1; text-transform: uppercase; text-shadow: 0 .04em .3em rgba(0, 20, 35, .5); }\n.dive__caption span { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; }\n\n.roots { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }\n.roots path { fill: none; stroke: var(--root-c, #003049); stroke-linecap: round; stroke-linejoin: round; }\n.roots .r-main { stroke-width: var(--root-w, 2.4px); }\n.roots .r-branch { stroke-width: calc(var(--root-w, 2.4px) * .62); }\n.roots .r-node { fill: var(--root-c, #003049); }\n.intro, .retreat, .raum, .projekt, .lage, .kiez, .news, .trail, .film { --root-c: #003049; }\n.film > .roots { z-index: 3; }   /* \u00fcber der Schrift-Maske (Desktop), unter Titel und Kn\u00f6pfen */\n.stats, .green, .history, .kontakt { --root-c: #FAF5ED; }\n.bands { --root-c: #669BBC; }\n\n.petals { position: fixed; inset: 0; z-index: 97; width: 100%; height: 100%; pointer-events: none; }\n\n/* \u00dcberg\u00e4nge als Welle (main.js initEdges, wie in v32): Die Form ragt aus einem Element mit H\u00f6he 0 nach oben \u00fcber\n   den vorigen Abschnitt; der Schatten wird unten abgeschnitten. .edge__root = St\u00fcck Wurzel in der Welle */\n.edge { position: relative; z-index: 4; height: 0; pointer-events: none; --edge-h: clamp(44px, 6vw, 110px); }\n.edge svg { position: absolute; left: 0; bottom: -2px; width: 100%; height: calc(var(--edge-h) + 2px); overflow: visible; filter: drop-shadow(0 -8px 18px rgba(0, 20, 35, .13)); clip-path: inset(-160px 0 0 0); }\n.edge path { fill: var(--edge-c); }\n.edge .edge__root { fill: none; stroke-linecap: butt; }\n\n@media (max-width: 760px) {\n  .nav__sound { padding: 12px 13px; }\n  .nav__sound-txt { display: none; }\n  .dive__caption { font-size: 10.5vw; bottom: 18vh; }\n  .dive__caption span { white-space: normal; }\n  .dive__top span:last-child, .dive__meter { display: none; }\n  .roots { --root-w: 1.6px; }\n}\n\n/* ==========================================================================\n   NIEDRIGE QUERFORMATE (Handy quer: ab 761 px breit, also Desktop-Fassung mit Pins, aber nur 360\u2013520 px hoch)\n   \u00dcberschriften, Pillen und Karten stie\u00dfen dort aneinander oder lagen unter dem Bildrand (v37)\n   ========================================================================== */\n@media (min-width: 761px) and (max-height: 520px) {\n  /* Nav schmaler: 84 px w\u00e4ren bei 360 px H\u00f6he fast ein Viertel des Bildes */\n  :root { --nav-h: 64px; }\n  .nav__inner { padding-top: 10px; padding-bottom: 10px; }\n  /* Men\u00fc: zweispaltig und nach der H\u00f6he begrenzt; einspaltig lagen vier der sechs Punkte oberhalb des Bildschirms */\n  .menu__panel { grid-template-columns: 1.4fr 1fr; align-items: center; align-content: center; gap: 28px; padding-top: calc(var(--nav-h) + 6px); padding-bottom: 14px; }\n  .menu__link { font-size: min(6vw, 8.6svh); }\n  .menu__aside { gap: 12px; font-size: 13px; padding-bottom: 0; }\n  /* \u00dcberspringen-Pille nur als Ring mit Pfeil: mit Text lag sie auf Inhalten */\n  .skip { gap: 0; padding: 6px; }\n  .skip__txt { display: none; }\n  /* Raumkonzepte: Ausstattung in einer Reihe statt 2 \u00d7 2 (die untere Reihe war abgeschnitten) */\n  .rp--features { width: min(96vw, 1060px); }\n  .rp__ftitle { font-size: 30px; }\n  .feats { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }\n  .feat { min-height: 0; gap: 10px; padding: 14px; }\n  .feat svg { width: 30px; }\n  .feat h4 { font-size: 19px; }\n  .feat p { margin-top: 6px; font-size: 12px; line-height: 1.4; }\n  /* Nachhaltigkeit: Titel nach der H\u00f6he begrenzen, die Unterzeile lag sonst unter dem Bildrand */\n  .green__title { font-size: min(9.4vw, 15svh); margin: 12px auto 14px; }\n  .green__sub { font-size: 16px; }\n  /* Karten-Stapel: so hoch, dass auch die vierte (am tiefsten angeheftete) Karte ganz ins Bild passt */\n  .card { height: calc(89svh - 58px); }\n  .card__inner { gap: 20px; padding: 16px 20px; }\n  .card__text { gap: 8px; }\n  .card__top { padding-bottom: 8px; }\n  .card__title { font-size: 24px; margin-bottom: 8px; }\n  .card__body > p { font-size: 12.5px; line-height: 1.4; }\n  .chips { display: none; }\n  /* Projekt: Die Pillen der Bauabschnitte lagen \u00fcber dem Namen des Abschnitts (auf dem Desktop nur Anzeige),\n     die Angaben rechts ragten nach oben in den Kopf */\n  .plan__steps, .plan__tag { display: none; }\n  .projekt__inner { gap: 10px; }\n  .projekt__title { font-size: 34px; margin-top: 8px; }\n  .plan { grid-template-columns: 1.25fr 1fr; gap: 22px; }\n  .plan__info { align-content: start; }\n  .phase__status { font-size: 11px; }\n  .phase__name { font-size: 28px; margin: 6px 0 2px; }\n  .phase__facts { margin: 8px 0 6px; }\n  .phase__facts div { padding-top: 6px; }\n  .phase__facts dd { font-size: 28px; margin-top: 2px; }\n  .phase__text { font-size: 12.5px; line-height: 1.4; }\n  .sum { font-size: 38px; margin: 8px 0 6px; }\n  /* Geschichte (Karte): Die gro\u00dfe Jahreszahl lag \u00fcber der \u00dcberschrift, das Foto unter den Kn\u00f6pfen der Nav */\n  .hmap__copy { top: calc(var(--nav-h) + 40px); }\n  .hmap__year { font-size: min(9.4vw, 17svh); }\n  .hmap__year--long { font-size: min(6.4vw, 13svh); }\n  .hmap__txt { margin-top: 10px; font-size: 15px; }\n  .hmap__pics { width: 170px; bottom: 56px; }\n  /* Lage: kleinere Schilder, sie lagen auf der kleinen Karte \u00fcbereinander */\n  .lage__dest-in { gap: 3px; padding: 6px 10px 7px; border-radius: 10px; }\n  .lage__dest b { font-size: 14px; }\n  .lage__dest span { font-size: 10.5px; }\n  .lage__dest--minor b { font-size: 12px; }\n  .lage__dest--minor span { font-size: 10px; }\n}\n\n/* Haarlinie an hellen Abschnittsgrenzen (Safari, iPhone): Die Grenzen liegen auf Bruchteilen von Pixeln (z. B. 2887,25 px\n   zwischen Laufb\u00e4ndern und R\u00fcckzugsort), die letzte Ger\u00e4tezeile war nur teilweise bemalt und der Navy-Hintergrund der\n   Seite schien als feine dunkle Linie durch. Helle Abschnitte, die an helle grenzen, decken die Zeile \u00fcber sich mit ihrer\n   eigenen Farbe ab (Schatten nach oben, verschiebt nichts). */\n.retreat, .raum, .kiez, .news { box-shadow: 0 -2px 0 var(--cream); }\n.lage { box-shadow: 0 -2px 0 var(--map); }\n","js":[{"name":"gl.js","code":"/* ==========================================================================\n   KARLS LIVING \u2014 WebGL\n   1) Bild-FX: Bilder biegen sich beim Scrollen, Wellen beim Hover, RGB-Split bei Tempo.\n      Ein gemeinsamer WebGL-Kontext rendert offscreen und kopiert in 2D-Canvas-Overlays,\n      damit Clip-Paths, Radien und DOM-Ebenen erhalten bleiben. In Ruhe zeigt das\n      Original-<img> (volle Qualit\u00e4t), das Canvas wird nur w\u00e4hrend der Bewegung eingeblendet.\n   2) Drohnenflug: scroll-gesteuerter Zoom durch mehrere Renderings mit Zoom-Blur.\n   ========================================================================== */\n(() => {\n  'use strict';\n  const KL = (window.KL = window.KL || {});\n\n  const VERT = `\n    attribute vec2 aPos;\n    varying vec2 vUv;\n    void main() { vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); }\n  `;\n\n  const FX_FRAG = `\n    precision highp float;\n    varying vec2 vUv;\n    uniform sampler2D uImage;\n    uniform vec2 uRes;      // Canvas in px\n    uniform vec4 uRect;     // Bild-Box im Canvas (x, y von oben links, w, h) in px\n    uniform vec2 uTexSize;\n    uniform float uVel;     // -1..1 Scroll-Tempo\n    uniform float uHover;   // 0..1\n    uniform vec2 uMouse;    // 0..1, oben links\n    uniform float uTime;\n    uniform float uHoriz;   // 1 = horizontale Bewegung\n\n    vec2 coverUv(vec2 p) {\n      vec2 local = (p - uRect.xy) / uRect.zw;\n      float boxR = uRect.z / uRect.w;\n      float texR = uTexSize.x / uTexSize.y;\n      vec2 s = boxR > texR ? vec2(1.0, texR / boxR) : vec2(boxR / texR, 1.0);\n      return (local - 0.5) * s + 0.5;\n    }\n\n    void main() {\n      vec2 uv = vec2(vUv.x, 1.0 - vUv.y);\n      vec2 p = uv * uRes;\n      vec2 c = uv - 0.5;\n\n      // Tuch-Biegung: die Mitte h\u00e4ngt der Bewegung hinterher\n      p.y -= (1.0 - 4.0 * c.x * c.x) * uVel * (1.0 - uHoriz) * 0.07 * uRes.y;\n      p.x -= (1.0 - 4.0 * c.y * c.y) * uVel * uHoriz * 0.05 * uRes.x;\n\n      // Wellen um den Cursor + leichter Zoom\n      vec2 m = uMouse * uRes;\n      vec2 dm = p - m;\n      float d = length(dm) / uRes.y;\n      float wave = sin(d * 42.0 - uTime * 6.0) * exp(-d * 6.0) * uHover;\n      p += normalize(dm + 0.0001) * wave * 0.012 * uRes.y;\n      p = m + (p - m) * (1.0 - 0.06 * uHover);\n\n      // RGB-Split\n      vec2 dir = mix(vec2(0.0, 1.0), vec2(1.0, 0.0), uHoriz);\n      float split = abs(uVel) * 0.009 * uRes.y + uHover * 0.0025 * uRes.y;\n      vec4 g = texture2D(uImage, coverUv(p));\n      float r = texture2D(uImage, coverUv(p + dir * split)).r;\n      float b = texture2D(uImage, coverUv(p - dir * split)).b;\n      gl_FragColor = vec4(r, g.g, b, 1.0);\n    }\n  `;\n\n  const DIVE_FRAG = `\n    precision highp float;\n    varying vec2 vUv;\n    uniform sampler2D uA;\n    uniform sampler2D uB;\n    uniform vec2 uSizeA;\n    uniform vec2 uSizeB;\n    uniform vec2 uRes;\n    uniform float uZoomA;\n    uniform float uZoomB;\n    uniform vec2 uFocusA;\n    uniform vec2 uFocusB;\n    uniform float uAimA;\n    uniform float uAimB;\n    uniform float uMix;\n    uniform float uBlur;\n\n    vec2 cover(vec2 uv, vec2 size) {\n      float sr = uRes.x / uRes.y, tr = size.x / size.y;\n      vec2 s = sr > tr ? vec2(1.0, tr / sr) : vec2(sr / tr, 1.0);\n      return (uv - 0.5) * s + 0.5;\n    }\n    // Zoom auf einen Fokuspunkt, der dabei zur Bildmitte wandert\n    vec2 dive(vec2 uv, vec2 size, float zoom, vec2 focus, float aim) {\n      vec2 c = cover(uv, size);\n      vec2 f = mix(focus, vec2(0.5), aim);\n      return focus + (c - f) / zoom;\n    }\n    vec3 blurred(sampler2D t, vec2 size, vec2 uv, float zoom, vec2 focus, float aim) {\n      vec3 acc = vec3(0.0);\n      float ws = 0.0;\n      vec2 dir = uv - 0.5;\n      // Dithering gegen sichtbare Stufen im Zoom-Blur\n      float jitter = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);\n      for (int i = 0; i < TAPS; i++) {\n        float k = (float(i) + jitter) / float(TAPS);\n        float w = 1.0 - 0.7 * k;\n        vec2 u = uv - dir * k * uBlur * 0.22;\n        acc += texture2D(t, dive(u, size, zoom, focus, aim)).rgb * w;\n        ws += w;\n      }\n      return acc / ws;\n    }\n    void main() {\n      vec2 uv = vec2(vUv.x, 1.0 - vUv.y);\n      vec3 col = blurred(uA, uSizeA, uv, uZoomA, uFocusA, uAimA);\n      if (uMix > 0.001) {\n        vec3 b = blurred(uB, uSizeB, uv, uZoomB, uFocusB, uAimB);\n        col = mix(col, b, uMix);\n      }\n      float vig = smoothstep(1.05, 0.25, length((uv - 0.5) * vec2(uRes.x / uRes.y, 1.0)));\n      col *= mix(1.0, mix(0.72, 1.0, vig), clamp(uZoomA - 1.0, 0.0, 1.0));\n      col += vec3(0.92, 0.96, 1.0) * uBlur * 0.07;\n      gl_FragColor = vec4(col, 1.0);\n    }\n  `;\n\n  const clamp01 = v => Math.min(1, Math.max(0, v));\n  const smooth = (a, b, v) => { const t = clamp01((v - a) / (b - a)); return t * t * (3 - 2 * t); };\n\n  // ---------- Grundger\u00fcst ----------\n  function createContext(canvas, opts = {}) {\n    const gl = canvas.getContext('webgl', { alpha: false, antialias: false, premultipliedAlpha: false, preserveDrawingBuffer: !!opts.preserve, powerPreference: 'high-performance' });\n    if (!gl) return null;\n    const buf = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n    const compile = (type, src) => {\n      const s = gl.createShader(type);\n      gl.shaderSource(s, src);\n      gl.compileShader(s);\n      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));\n      return s;\n    };\n    const program = frag => {\n      const p = gl.createProgram();\n      gl.attachShader(p, compile(gl.VERTEX_SHADER, VERT));\n      gl.attachShader(p, compile(gl.FRAGMENT_SHADER, frag));\n      gl.linkProgram(p);\n      if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));\n      const loc = {};\n      return {\n        use() {\n          gl.useProgram(p);\n          const a = gl.getAttribLocation(p, 'aPos');\n          gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n          gl.enableVertexAttribArray(a);\n          gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);\n        },\n        u(name) { if (!(name in loc)) loc[name] = gl.getUniformLocation(p, name); return loc[name]; }\n      };\n    };\n    const maxTex = gl.getParameter(gl.MAX_TEXTURE_SIZE);\n    // Bild -> Textur (auf maxSize herunterskaliert, CORS-Bild n\u00f6tig)\n    const texture = (img, maxSize) => {\n      const limit = Math.min(maxSize, maxTex);\n      const s = Math.min(1, limit / Math.max(img.naturalWidth, img.naturalHeight));\n      let source = img, w = img.naturalWidth, h = img.naturalHeight;\n      if (s < 1) {\n        w = Math.round(w * s); h = Math.round(h * s);\n        const c = document.createElement('canvas');\n        c.width = w; c.height = h;\n        const cx = c.getContext('2d');\n        cx.imageSmoothingQuality = 'high';\n        cx.drawImage(img, 0, 0, w, h);\n        source = c;\n      }\n      const t = gl.createTexture();\n      gl.bindTexture(gl.TEXTURE_2D, t);\n      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);\n      if (source !== img) source.width = source.height = 0;   // Zwischen-Canvas freigeben (Safari z\u00e4hlt es sonst weiter mit)\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n      return { t, w, h };\n    };\n    return { gl, program, texture, maxTex };\n  }\n\n  const whenLoaded = img => new Promise(res => {\n    if (img.complete && img.naturalWidth) { res(img); return; }\n    img.addEventListener('load', () => res(img), { once: true });\n    img.addEventListener('error', () => res(null), { once: true });\n  });\n\n  // ==========================================================================\n  // 1) Bild-FX\n  // ==========================================================================\n  function createFX({ mobile = false } = {}) {\n    const glc = document.createElement('canvas');\n    let ctx;\n    try { ctx = createContext(glc, { preserve: true }); } catch (e) { ctx = null; }\n    if (!ctx) return null;\n    const { gl } = ctx;\n    let prog;\n    try { prog = ctx.program(FX_FRAG); } catch (e) { console.warn('[KL gl] fx shader', e); return null; }\n    let lost = false;\n    glc.addEventListener('webglcontextlost', e => { e.preventDefault(); lost = true; items.forEach(hide); });\n\n    const items = [];\n    const io = new IntersectionObserver(entries => entries.forEach(en => {\n      const it = items.find(i => i.el === en.target);\n      if (it) { it.visible = en.isIntersecting; if (!it.visible) hide(it); }\n    }), { rootMargin: '10% 0px' });\n\n    const hide = it => { if (it.shown) { it.cv.style.opacity = '0'; it.shown = false; } };\n\n    function add(el, { horizontal = false } = {}) {\n      const img = el.querySelector('img');\n      if (!img) return;\n      const cv = document.createElement('canvas');\n      cv.className = 'gl-canvas';\n      cv.setAttribute('aria-hidden', 'true');\n      el.appendChild(cv);\n      const it = { el, img, cv, c2d: cv.getContext('2d'), tex: null, hover: 0, mx: 0.5, my: 0.5, visible: false, shown: false, horizontal };\n      const upload = () => { if (!it.tex && !lost && img.naturalWidth) { try { it.tex = ctx.texture(img, mobile ? 1280 : 2048); } catch (e) { console.warn('[KL gl] texture', e); } } };\n      whenLoaded(img).then(ok => { if (ok) upload(); });\n      img.addEventListener('load', upload);   // auch ein sp\u00e4ter getauschtes Bild (AVIF-R\u00fcckfall auf WebP, main.js)\n      el.addEventListener('pointerenter', () => gsap.to(it, { hover: 1, duration: 0.9, ease: 'power2.out', overwrite: 'auto' }));\n      el.addEventListener('pointerleave', () => gsap.to(it, { hover: 0, duration: 1.1, ease: 'power2.out', overwrite: 'auto' }));\n      el.addEventListener('pointermove', e => {\n        const r = el.getBoundingClientRect();\n        it.mx = (e.clientX - r.left) / r.width;\n        it.my = (e.clientY - r.top) / r.height;\n      });\n      io.observe(el);\n      items.push(it);\n    }\n\n    function draw(it, vel, time) {\n      const r = it.el.getBoundingClientRect();\n      const ir = it.img.getBoundingClientRect();\n      const dpr = Math.min(window.devicePixelRatio || 1, 2);\n      const W = Math.max(2, Math.round(r.width * dpr)), H = Math.max(2, Math.round(r.height * dpr));\n      if (it.cv.width !== W || it.cv.height !== H) { it.cv.width = W; it.cv.height = H; }\n      if (glc.width < W || glc.height < H) { glc.width = Math.max(glc.width, W); glc.height = Math.max(glc.height, H); }\n      gl.viewport(0, 0, W, H);\n      prog.use();\n      gl.activeTexture(gl.TEXTURE0);\n      gl.bindTexture(gl.TEXTURE_2D, it.tex.t);\n      gl.uniform1i(prog.u('uImage'), 0);\n      gl.uniform2f(prog.u('uRes'), W, H);\n      gl.uniform4f(prog.u('uRect'), (ir.left - r.left) * dpr, (ir.top - r.top) * dpr, ir.width * dpr, ir.height * dpr);\n      gl.uniform2f(prog.u('uTexSize'), it.tex.w, it.tex.h);\n      gl.uniform1f(prog.u('uVel'), vel);\n      gl.uniform1f(prog.u('uHover'), it.hover);\n      gl.uniform2f(prog.u('uMouse'), it.mx, it.my);\n      gl.uniform1f(prog.u('uTime'), time);\n      gl.uniform1f(prog.u('uHoriz'), it.horizontal ? 1 : 0);\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n      it.c2d.clearRect(0, 0, W, H);\n      it.c2d.drawImage(glc, 0, glc.height - H, W, H, 0, 0, W, H);\n    }\n\n    // pro Frame von main.js aufgerufen\n    function update(vel, time) {\n      if (lost) return;\n      for (const it of items) {\n        if (!it.visible || !it.tex) continue;\n        const amount = Math.abs(vel) + it.hover;\n        if (amount < 0.006) { hide(it); continue; }\n        draw(it, vel, time);\n        if (!it.shown) { it.cv.style.opacity = '1'; it.shown = true; }\n      }\n    }\n\n    return { add, update };\n  }\n\n  // ==========================================================================\n  // 2) Drohnenflug\n  // ==========================================================================\n  function createDive(canvas, stages, { mobile = false } = {}) {\n    let ctx;\n    try { ctx = createContext(canvas); } catch (e) { ctx = null; }\n    if (!ctx) return null;\n    const { gl } = ctx;\n    let prog;\n    try { prog = ctx.program(DIVE_FRAG.replace(/TAPS/g, mobile ? '8' : '14')); } catch (e) { console.warn('[KL gl] dive shader', e); return null; }\n    const tex = stages.map(() => null);\n    let lost = false;\n    canvas.addEventListener('webglcontextlost', e => { e.preventDefault(); lost = true; });\n\n    const n = stages.length;\n    // Zeitfenster je Bild: Bild k ist aktiv f\u00fcr pos \u2208 [k - 0.28, k + 1]\n    const windowU = (k, pos) => {\n      const start = k === 0 ? 0 : k - 0.28;\n      const len = k === 0 ? 1 : 1.28;\n      return clamp01((pos - start) / len);\n    };\n    const zoomOf = (k, pos) => { const s = stages[k]; return s.z0 + (s.z1 - s.z0) * Math.pow(windowU(k, pos), 1.6); };\n    const aimOf = (k, pos) => stages[k].aim * smooth(0.05, 0.9, windowU(k, pos));\n\n    // Texturen erst laden, wenn der Flug in die N\u00e4he kommt\n    let loading = false;\n    function prepare() {\n      if (loading) return;\n      loading = true;\n      stages.forEach((s, i) => {\n        const img = new Image();\n        img.crossOrigin = 'anonymous';\n        img.decoding = 'async';\n        img.src = s.src;\n        whenLoaded(img).then(ok => { if (ok && !lost) { try { tex[i] = ctx.texture(img, mobile ? 2560 : 3072); } catch (e) { console.warn('[KL gl] dive texture', e); } } });\n      });\n    }\n\n    function state(pos) {\n      const k = Math.min(n - 1, Math.max(0, Math.floor(pos)));\n      const t = pos - k;\n      const mix = k < n - 1 ? smooth(0.72, 1.0, t) : 0;\n      return { a: k, b: Math.min(n - 1, k + 1), mix };\n    }\n\n    function render(pos, velBlur = 0) {\n      if (lost) return false;\n      const st = state(pos);\n      const A = tex[st.a], B = tex[st.b];\n      if (!A || (st.mix > 0 && !B)) return false;\n      const dpr = Math.min(window.devicePixelRatio || 1, 1.5);   // auf dem Handy fr\u00fcher 1 \u2013 beim Heranzoomen zu weich\n      const W = Math.max(2, Math.round(canvas.clientWidth * dpr)), H = Math.max(2, Math.round(canvas.clientHeight * dpr));\n      if (canvas.width !== W || canvas.height !== H) { canvas.width = W; canvas.height = H; }\n      gl.viewport(0, 0, W, H);\n      prog.use();\n      gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.t); gl.uniform1i(prog.u('uA'), 0);\n      gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, (B || A).t); gl.uniform1i(prog.u('uB'), 1);\n      gl.uniform2f(prog.u('uSizeA'), A.w, A.h);\n      gl.uniform2f(prog.u('uSizeB'), (B || A).w, (B || A).h);\n      gl.uniform2f(prog.u('uRes'), W, H);\n      gl.uniform1f(prog.u('uZoomA'), zoomOf(st.a, pos));\n      gl.uniform1f(prog.u('uZoomB'), zoomOf(st.b, pos));\n      gl.uniform2f(prog.u('uFocusA'), stages[st.a].focus[0], stages[st.a].focus[1]);\n      gl.uniform2f(prog.u('uFocusB'), stages[st.b].focus[0], stages[st.b].focus[1]);\n      gl.uniform1f(prog.u('uAimA'), aimOf(st.a, pos));\n      gl.uniform1f(prog.u('uAimB'), aimOf(st.b, pos));\n      gl.uniform1f(prog.u('uMix'), st.mix);\n      gl.uniform1f(prog.u('uBlur'), Math.min(1.2, Math.sin(st.mix * Math.PI) * 0.95 + velBlur));\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n      return true;\n    }\n\n    return { prepare, render, state, zoomOf, get ready() { return !!tex[0]; }, get lost() { return lost; } };\n  }\n\n  KL.gl = { createFX, createDive };\n})();\n"},{"name":"hero-sky.js","code":"/* ==========================================================================\n   KARLS LIVING \u2014 Hero-Zeitraffer\n   Himmel (WebGL):  Verlauf, Sonne, Mond, Sterne, ziehende Wolken, Regenbogen, Blitze\n   H\u00e4user (WebGL):  Tages- und Nachtlicht, Fenster, Wandleuchten und Laternen gehen an,\n                    Jahreszeiten f\u00e4rben B\u00e4ume und Rasen (Bl\u00fcten, Laub, Schnee)\n   Wetter (2D):     V\u00f6gel hinter dem Schriftzug, Regen, Schnee, Laub und Bl\u00fcten vor den H\u00e4usern\n   Ein Tag dauert rund eine Minute (TEMPO), in jeder Nacht wechselt die Jahreszeit:\n   Sommer \u2192 Herbst \u2192 Winter \u2192 Fr\u00fchling \u2192 Sommer \u2026\n   ========================================================================== */\n(() => {\n  'use strict';\n  const KL = (window.KL = window.KL || {});\n\n  /* ---------- Vermessung des Geb\u00e4ude-Renderings (relativ 0..1, oben links) ---------- */\n  // Frontfenster: [x0, y0, x1, Unterkante links, Unterkante rechts, [[Sprosse von, bis], \u2026], Pflanzen davor]\n  // Nur die Glasfl\u00e4che innerhalb des Rahmens; die Unterkante folgt der Br\u00fcstung (im Dachgeschoss schr\u00e4g).\n  const FRONT = [[0.9406,0.0776,0.9836,0.1129,0.1136,[[0.9521,0.9531],[0.9674,0.9685]],0],[0.9474,0.2227,0.9919,0.2824,0.2818,[[0.9594,0.9604],[0.975,0.976]],0],[0.9474,0.3866,0.9932,0.454,0.4511,[[0.9594,0.9604],[0.975,0.976]],1],[0.9474,0.552,0.9919,0.6271,0.624,[[0.9594,0.9604],[0.975,0.976]],0],[0.1018,0.3104,0.1453,0.3522,0.3464,[[0.1148,0.1172],[0.1284,0.1307]],0],[0.1706,0.2908,0.1945,0.3429,0.3399,[[0.1807,0.1818]],0],[0.2276,0.2908,0.2797,0.3354,0.3284,[[0.2411,0.2435],[0.2552,0.2576],[0.269,0.2714]],0],[0.3307,0.2692,0.3703,0.3217,0.3163,[[0.3432,0.3443],[0.357,0.3594]],0],[0.4091,0.2692,0.4362,0.3111,0.3076,[[0.4224,0.4247]],0],[0.1018,0.4393,0.1453,0.486,0.483,[[0.1148,0.1172],[0.1284,0.1307]],0],[0.1706,0.4271,0.1945,0.4812,0.4796,[[0.1807,0.1818]],0],[0.2276,0.4278,0.2794,0.4773,0.4735,[[0.2411,0.2435],[0.2552,0.2576],[0.269,0.2714]],0],[0.3307,0.4143,0.3703,0.47,0.4675,[[0.3432,0.3443],[0.357,0.3594]],0],[0.4091,0.4143,0.4359,0.4643,0.4629,[[0.4224,0.4247]],0],[0.1018,0.5702,0.1453,0.6235,0.6233,[[0.1148,0.1172],[0.1284,0.1307]],0],[0.1706,0.5661,0.1932,0.6234,0.6235,[[0.1807,0.1818]],0],[0.2276,0.5661,0.2797,0.6228,0.6228,[[0.2411,0.2435],[0.2552,0.2576],[0.269,0.2714]],0],[0.3307,0.5614,0.3703,0.6229,0.6213,[[0.3432,0.3443],[0.357,0.3594]],0],[0.4091,0.5621,0.4359,0.6222,0.6222,[[0.4224,0.4247]],0],[0.1729,0.1532,0.1974,0.1936,0.1884,[[0.1833,0.1844]],0],[0.2484,0.1538,0.2737,0.1781,0.1732,[[0.2602,0.2612]],0],[0.3164,0.1451,0.3414,0.1646,0.1592,[[0.3289,0.3299]],0],[0.3648,0.1457,0.3896,0.1545,0.1498,[[0.3789,0.3799]],0]];\n  // \u00d6ffnungen an schr\u00e4gen Fassaden (Loggien rechts, hinteres Haus): [x0, x1, oben links, oben rechts, unten links,\n  // unten rechts, Pflanzen davor] \u2013 Parallelogramme, deren Ober- und Unterkante der Perspektive folgen\n  const SIDE = [[0.8591,0.8867,0.0963,0.0972,0.1148,0.1155,0],[0.8966,0.9031,0.0934,0.0845,0.1154,0.1154,0],[0.5047,0.5117,0.3592,0.3632,0.3843,0.3875,1],[0.5714,0.5768,0.3973,0.4003,0.4185,0.4215,1],[0.5857,0.5904,0.4681,0.4701,0.4947,0.4966,0],[0.5823,0.5898,0.5335,0.5348,0.5622,0.5637,1],[0.8263,0.8346,0.2413,0.231,0.3241,0.3154,1],[0.8263,0.8346,0.3957,0.3895,0.4781,0.4747,0],[0.8263,0.8346,0.5527,0.5506,0.6359,0.6355,0],[0.801,0.8089,0.2721,0.2626,0.3484,0.3416,1],[0.801,0.8089,0.4144,0.4087,0.4917,0.4865,0],[0.801,0.8089,0.5591,0.5572,0.636,0.6354,0],[0.7828,0.7893,0.2944,0.2865,0.4013,0.3961,1],[0.7828,0.7893,0.428,0.4233,0.5352,0.5327,0],[0.7828,0.7893,0.5636,0.5624,0.6712,0.6718,0],[0.7659,0.7773,0.315,0.3011,0.3703,0.3585,1],[0.7659,0.7773,0.4405,0.4323,0.4965,0.4965,0],[0.7659,0.7773,0.568,0.5654,0.6302,0.6302,1],[0.751,0.7609,0.3328,0.3211,0.3699,0.3599,0],[0.751,0.7609,0.4512,0.4444,0.4971,0.4962,1],[0.751,0.7609,0.5717,0.5695,0.6302,0.6302,1],[0.7359,0.7411,0.2794,0.2744,0.3352,0.3426,0],[0.7359,0.7411,0.3944,0.3894,0.4545,0.4508,0],[0.7359,0.7411,0.5072,0.5048,0.5677,0.5665,0],[0.7167,0.7219,0.3751,0.3688,0.4216,0.4162,1],[0.7094,0.7151,0.3827,0.3817,0.4191,0.4197,0],[0.7167,0.7219,0.4615,0.4615,0.5243,0.5241,1],[0.7039,0.7099,0.4863,0.4823,0.5241,0.5243,0],[0.7167,0.7219,0.5812,0.5793,0.6303,0.6288,1],[0.7039,0.7099,0.584,0.5826,0.6303,0.6314,1],[0.6943,0.7003,0.402,0.3952,0.4281,0.4225,0],[0.6943,0.7003,0.4934,0.4894,0.529,0.5258,0],[0.6943,0.7003,0.5861,0.5852,0.6316,0.6313,0],[0.7667,0.774,0.214,0.2026,0.2361,0.2245,0],[0.8154,0.8201,0.136,0.1289,0.1611,0.155,0],[0.7169,0.7211,0.2928,0.2874,0.3115,0.3047,0]];\n  const WINDOW_COUNT = FRONT.length + SIDE.length;\n  // Stra\u00dfenlaternen [x, y, Radius des Leuchtk\u00f6rpers]\n  const LAMPS = [[0.1958,0.5884,0.0135],[0.5898,0.61,0.0054],[0.6003,0.6086,0.0061],[0.6148,0.6046,0.0067],[0.6302,0.6005,0.0081],[0.6479,0.5958,0.0094],[0.681,0.587,0.0121]];\n  // Runde Wandleuchten neben den Fenstern [x, y]\n  const WALL = [[0.0932,0.3144],[0.2039,0.2942],[0.3201,0.2733],[0.4461,0.274],[0.0932,0.4426],[0.2039,0.4312],[0.3201,0.4177],[0.4461,0.4184],[0.0932,0.5756],[0.2039,0.5688],[0.3201,0.5655],[0.4461,0.5668],[0.2062,0.1606],[0.9299,0.0823],[0.9365,0.2281],[0.9365,0.392],[0.9365,0.5574],[0.85,0.1053]];\n  // Schnee-Kanten: Oberkanten von Br\u00fcstungen, Mauern, Balkonen und Laternenk\u00f6pfen, auf denen im Winter\n  // ein Schneepolster liegt: [x0, y0, x1, y1, Polsterh\u00f6he] (relativ). Im Rendering vermessen: Kante je Spalte\n  // gesucht, robuste Gerade angepasst. Dachkanten gegen den Himmel werden zur Laufzeit aus dem Umriss erkannt.\n  const SNOW = [[0.0307,0.365,0.4589,0.3079,0.0047],[0.0307,0.4944,0.4589,0.4645,0.0047],[0.0307,0.6273,0.4589,0.6253,0.0047],[0.0253,0.2298,0.468,0.133,0.0061],[0.9445,0.2856,1.0,0.2853,0.0047],[0.9445,0.4572,1.0,0.4545,0.0047],[0.9445,0.6291,1.0,0.6279,0.0047],[0.6945,0.419,0.7227,0.419,0.0034],[0.6945,0.5261,0.7227,0.5238,0.0034],[0.6945,0.6318,0.7227,0.6296,0.0034],[0.7427,0.3652,0.7773,0.365,0.0034],[0.7427,0.497,0.7773,0.4964,0.0034],[0.7427,0.6307,0.7773,0.63,0.0034],[0.8453,0.1147,1.0,0.1174,0.0054],[0.4674,0.6297,0.5951,0.6287,0.004],[0.4674,0.6905,0.6062,0.6935,0.004],[0.1877,0.5844,0.2039,0.5844,0.0061],[0.5866,0.6084,0.593,0.6084,0.0024],[0.5967,0.6068,0.6039,0.6068,0.0027],[0.6108,0.6026,0.6188,0.6026,0.003],[0.6254,0.5981,0.635,0.5981,0.0036],[0.6423,0.593,0.6535,0.593,0.0042],[0.6738,0.5834,0.6882,0.5834,0.0054]];\n  const IMG_ASPECT = 3840 / 1482;\n\n  /* ---------- Tempo ---------- */\n  // TEMPO: Uhrzeit, Jahreszeitenwechsel und Wolken (1 = urspr\u00fcnglich; zuletzt 0,625, auf Wunsch halbiert:\n  // ein Tag dauert jetzt 46\u201366 s je nach Jahreszeit, ein ganzes Jahr rund 3\u00be Minuten).\n  // CALM: Flug der V\u00f6gel, fallender Schnee, Laub und Bl\u00fcten. Fl\u00fcgelschlag und Regen bleiben nat\u00fcrlich,\n  // sonst wirken sie wie Zeitlupe.\n  const TEMPO = 0.3125, CALM = 0.625;\n\n  /* ---------- Hilfen ---------- */\n  const clamp01 = v => Math.min(1, Math.max(0, v));\n  const sstep = (a, b, v) => { const t = clamp01((v - a) / (b - a)); return t * t * (3 - 2 * t); };\n  const lerp = (a, b, t) => a + (b - a) * t;\n  const mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n  const bump = (h, a, b, c, d) => sstep(a, b, h) * (1 - sstep(c, d, h));\n  const hash = n => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };\n  const rnd = (a, b) => a + Math.random() * (b - a);\n\n  /* ==========================================================================\n     ZEIT, SONNE, WETTER\n     ========================================================================== */\n  const SEASONS = ['Fr\u00fchling', 'Sommer', 'Herbst', 'Winter'];\n  // Fr\u00fchling, Sommer, Herbst, Winter\n  const RISE = [6.0, 5.0, 7.2, 8.2];\n  const SET = [20.0, 21.4, 18.0, 16.2];\n  const PEAK = [0.7, 0.88, 0.52, 0.36];\n  // Wetter \u00fcber den Tag (h = Stunde)\n  const WX = [\n    // Fr\u00fchling: Quellwolken, mittags ein kurzer Schauer, danach ein Regenbogen, Bl\u00fcten fliegen\n    h => ({ cover: 0.34 + 0.36 * bump(h, 9.5, 11.5, 13.2, 14.6), dark: 0.4 * bump(h, 10.5, 11.8, 13, 14), rain: 0.8 * bump(h, 11.2, 12, 12.9, 13.7), snow: 0, fog: 0.2 * bump(h, 3.5, 5.2, 7, 9), wind: 0.45, bow: bump(h, 13.5, 14.2, 16.4, 17.6), petals: 1, leaves: 0, storm: 0 }),\n    // Sommer: klar, nachmittags Sch\u00f6nwetterwolken\n    h => ({ cover: 0.26 + 0.22 * bump(h, 10, 13, 17, 20), dark: 0, rain: 0, snow: 0, fog: 0.1 * bump(h, 3.5, 4.8, 6, 7.5), wind: 0.25, bow: 0, petals: 0, leaves: 0, storm: 0 }),\n    // Herbst: Morgennebel, sp\u00e4ter Regen mit Gewitter, Laub weht\n    h => ({ cover: 0.55 + 0.43 * bump(h, 8.5, 11, 17, 19.5), dark: 0.6 * bump(h, 10, 12, 16.5, 18.5), rain: bump(h, 11.5, 12.8, 16, 17.5), snow: 0, fog: 0.6 * bump(h, 2.5, 4.5, 8.5, 11), wind: 0.9, bow: 0, petals: 0, leaves: 1, storm: bump(h, 13, 13.8, 15.5, 16.3) }),\n    // Winter: grau mit Schneefall am Tag, nachts klar und frostig\n    h => { const d = bump(h, 6.5, 8.5, 16.5, 19); return { cover: 0.26 + 0.64 * d, dark: 0.22 * d, rain: 0, snow: bump(h, 7, 8.5, 15, 17), fog: 0.28 * d, wind: 0.35, bow: 0, petals: 0, leaves: 0, storm: 0 }; }\n  ];\n  const WX_KEYS = ['cover', 'dark', 'rain', 'snow', 'fog', 'wind', 'bow', 'petals', 'leaves', 'storm'];\n\n  function createClock({ season = 1, hour = 18.2 } = {}) {\n    // live: echte Werte aus Karlshorst (Jahreszeit, Sonne, Mond, Wetter); live.mix = ihr Anteil (1 ganz live, 0 Zeitraffer)\n    const c = { day: 0, hour, s0: season, live: null, moon0: 0.47, moonStep: 1 / 8 };\n    const sOf = k => ((c.s0 + k) % 4 + 4) % 4;\n    // Jahreszeiten-Anteile; der Wechsel passiert zwischen 22 und 7 Uhr\n    c.weights = () => {\n      const h = c.hour, w = [0, 0, 0, 0];\n      let a, b, t;\n      if (h >= 22) { a = sOf(c.day); b = sOf(c.day + 1); t = sstep(22, 31, h); }\n      else if (h < 7) { a = sOf(c.day - 1); b = sOf(c.day); t = sstep(22, 31, h + 24); }\n      else { a = b = sOf(c.day); t = 0; }\n      w[a] += 1 - t; w[b] += t;\n      const L = c.live;\n      return L && L.mix > 0 ? w.map((v, i) => lerp(v, L.w[i], L.mix)) : w;\n    };\n    c.season = () => { const w = c.weights(); return w.indexOf(Math.max(...w)); };\n    // Mondphase 0 \u2026 1 (0,5 = Vollmond). Im Zeitraffer schneller als echt (ein Umlauf in acht Tagen), damit auch mal\n    // Vollmond ist; die erste Nacht ist fast voll. Live die echte Phase.\n    c.moon = () => {\n      const L = c.live, t = ((c.moon0 + (c.day + c.hour / 24 - 0.75) * c.moonStep) % 1 + 1) % 1;\n      if (!L || L.mix <= 0) return t;\n      let d = L.phase - t;\n      d -= Math.round(d);\n      return ((t + d * L.mix) % 1 + 1) % 1;\n    };\n    return c;\n  }\n\n  /* ---------- Karlshorst live: echte Uhrzeit, Sonne, Mond, Jahreszeit und Wetter ---------- */\n  const HOME = { lat: 52.483, lon: 13.527 };\n  // Uhrzeit und Datum in Berlin, egal in welcher Zeitzone jemand die Seite \u00f6ffnet (off = Abstand zu UTC in Stunden)\n  function berlinNow(ms = Date.now()) {\n    const p = new Intl.DateTimeFormat('en-GB', { timeZone: 'Europe/Berlin', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hourCycle: 'h23' }).formatToParts(new Date(ms));\n    const v = k => +(p.find(x => x.type === k) || { value: 0 }).value;\n    const t = new Date(ms), utc = t.getUTCHours() + t.getUTCMinutes() / 60;\n    const h = v('hour') + v('minute') / 60 + v('second') / 3600;\n    return { y: v('year'), m: v('month'), d: v('day'), h, off: Math.round(((h - utc) % 24 + 24 + 12) % 24 - 12) };\n  }\n  // Sonnenaufgang und -untergang (Ortszeit) und h\u00f6chster Sonnenstand (als Sinus) f\u00fcr einen Tag (NOAA, vereinfacht)\n  function sunDay(y, m, d, off) {\n    const n = (Date.UTC(y, m - 1, d) - Date.UTC(y, 0, 0)) / 864e5;\n    const g = 2 * Math.PI / 365 * (n - 0.5);\n    const eqt = 229.18 * (0.000075 + 0.001868 * Math.cos(g) - 0.032077 * Math.sin(g) - 0.014615 * Math.cos(2 * g) - 0.040849 * Math.sin(2 * g));\n    const dec = 0.006918 - 0.399912 * Math.cos(g) + 0.070257 * Math.sin(g) - 0.006758 * Math.cos(2 * g) + 0.000907 * Math.sin(2 * g) - 0.002697 * Math.cos(3 * g) + 0.00148 * Math.sin(3 * g);\n    const phi = HOME.lat * Math.PI / 180;\n    const cosH = Math.cos(90.833 * Math.PI / 180) / (Math.cos(phi) * Math.cos(dec)) - Math.tan(phi) * Math.tan(dec);\n    const ha = Math.acos(Math.min(1, Math.max(-1, cosH))) * 180 / Math.PI;\n    const noon = (720 - 4 * HOME.lon - eqt) / 60 + off;\n    return { rise: noon - ha / 15, set: noon + ha / 15, peak: Math.sin((90 - Math.abs(HOME.lat - dec * 180 / Math.PI)) * Math.PI / 180) };\n  }\n  // Mondphase 0 \u2026 1 (0 Neumond, 0,5 Vollmond), gez\u00e4hlt ab einem bekannten Neumond\n  const moonPhaseAt = ms => (((ms - Date.UTC(2000, 0, 6, 18, 14)) / 864e5 / 29.530588853) % 1 + 1) % 1;\n  // So sehen B\u00e4ume und Rasen im jeweiligen Monat aus (Fr\u00fchling, Sommer, Herbst, Winter; je Monatsmitte), dazwischen\n  // gemischt. Schnee liegt live nur, w\u00e4hrend es wirklich schneit (Schneeregen nur um den Gefrierpunkt; snowCover).\n  const MONTHS = [[0, 0, 0, 1], [0, 0, 0, 1], [0.45, 0, 0, 0.55], [1, 0, 0, 0], [0.6, 0.4, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 0.85, 0.15, 0], [0, 0.25, 0.75, 0], [0, 0, 0.7, 0.3], [0, 0, 0, 1]];\n  function seasonOf(y, m, d) {\n    const pos = (m - 1) + (d - 0.5) / new Date(Date.UTC(y, m, 0)).getUTCDate() - 0.5;\n    const i = Math.floor(pos), t = sstep(0, 1, pos - i), a = MONTHS[(i + 12) % 12], b = MONTHS[(i + 13) % 12];\n    return a.map((v, k) => v + (b[k] - v) * t);\n  }\n  // Aktuelles Wetter vom Deutschen Wetterdienst (\u00fcber Bright Sky: offene DWD-Daten, auch f\u00fcr gewerbliche Seiten frei,\n  // mit Quellenangabe) -> Werte des Zeitraffers\n  function wxFromDWD(x, w) {\n    const cond = x.condition || '', icon = x.icon || '', has = re => re.test(cond) || re.test(icon);\n    const cover = x.cloud_cover != null ? x.cloud_cover / 100 : icon === 'cloudy' ? 0.9 : /partly/.test(icon) ? 0.5 : 0.15;\n    const mm = Math.max(x.precipitation_60 || 0, (x.precipitation_30 || 0) * 2, (x.precipitation_10 || 0) * 6);   // mm pro Stunde\n    const sleet = has(/sleet/) ? 0.5 : 1;\n    const rain = has(/rain|sleet|hail|thunder/) ? clamp01(0.3 + mm / 3) * sleet : 0;\n    const snow = has(/snow|sleet/) ? clamp01(0.35 + mm / 1.5) * sleet : 0;\n    const storm = has(/thunder/) ? 1 : 0;\n    const vis = x.visibility != null ? x.visibility : 20000;\n    const fog = has(/fog/) ? 0.35 + 0.5 * sstep(4000, 300, vis) : 0.35 * sstep(9000, 2000, vis);\n    const wind = clamp01((x.wind_speed_10 != null ? x.wind_speed_10 : x.wind_speed_30 || 8) / 38);\n    return {\n      cover: Math.max(cover, rain * 0.9, snow * 0.85, storm), dark: clamp01(rain * 0.5 + storm * 0.45 + sstep(0.85, 1, cover) * 0.15),\n      rain, snow, fog, wind, bow: 0, petals: w[0] * (1 - rain), leaves: w[2] * sstep(0.1, 0.5, wind), storm\n    };\n  }\n\n  // Live-Wetter, das gerade zu sehen ist: bis die Antwort des Wetterdienstes da ist (oder wenn sie ausbleibt) neutral\n  // und trocken (wxNone) statt des erfundenen Zeitraffer-Wetters f\u00fcr diese Stunde; neue Werte blenden in 1,6 s \u00fcber\n  // (wxFrom, wxAt), statt von einem Bild aufs n\u00e4chste umzuspringen\n  function liveWx(L) {\n    const tgt = L.wx || L.wxNone;\n    if (!L.wxFrom) return tgt;\n    const t = sstep(0, 1, (performance.now() - L.wxAt) / 1600);\n    if (t >= 1) { L.wxFrom = null; return tgt; }\n    const o = { snowCover: lerp(L.wxFrom.snowCover, tgt.snowCover, t) };\n    WX_KEYS.forEach(k => { o[k] = lerp(L.wxFrom[k], tgt[k], t); });\n    return o;\n  }\n\n  // Sonnenstand, Mond, Wetter und alle Farben f\u00fcr einen Zeitpunkt\n  function environment(clock) {\n    const w = clock.weights();\n    const dot = a => a[0] * w[0] + a[1] * w[1] + a[2] * w[2] + a[3] * w[3];\n    const L = clock.live, lf = L ? L.mix : 0;   // Anteil der echten Werte aus Karlshorst\n    const rise = lerp(dot(RISE), L ? L.rise : 0, lf), set = lerp(dot(SET), L ? L.set : 0, lf), peak = lerp(dot(PEAK), L ? L.peak : 0, lf), h = clock.hour;\n    const nightLen = 24 - (set - rise);\n    let e, sunT, moonT;\n    if (h >= rise && h <= set) { sunT = (h - rise) / (set - rise); e = Math.sin(Math.PI * sunT) * peak; moonT = -1; }\n    else { moonT = ((h - set + 24) % 24) / nightLen; e = -Math.sin(Math.PI * moonT) * 0.55; sunT = moonT < 0.5 ? 1 : 0; }\n\n    const wx = {};\n    WX_KEYS.forEach(k => { wx[k] = 0; });\n    WX.forEach((f, i) => { if (w[i] < 0.001) return; const v = f(h); WX_KEYS.forEach(k => { wx[k] += v[k] * w[i]; }); });\n    const LW = lf > 0 ? liveWx(L) : null;\n    if (LW) WX_KEYS.forEach(k => { wx[k] = lerp(wx[k], LW[k], lf); });\n    // Schnee am Boden und auf den D\u00e4chern: im Zeitraffer im Winter, live nur, w\u00e4hrend es wirklich schneit\n    const snowCover = lerp(w[3], LW ? LW.snowCover : 0, lf);\n    const moon = clock.moon(), moonLit = (1 - Math.cos(moon * Math.PI * 2)) / 2;\n\n    const day = sstep(-0.04, 0.25, e);\n    const night = 1 - sstep(-0.25, -0.03, e);\n    const gold = Math.exp(-(((e - 0.04) / 0.11) ** 2));\n    const over = clamp01(sstep(0.48, 0.95, wx.cover) * 0.9 + wx.dark * 0.25);\n\n    // Himmel\n    let zen = [0.012, 0.024, 0.07], hor = [0.04, 0.068, 0.15];\n    zen = mix3(zen, [0.1, 0.15, 0.33], sstep(-0.32, -0.08, e)); hor = mix3(hor, [0.36, 0.32, 0.5], sstep(-0.32, -0.08, e));\n    zen = mix3(zen, [0.22, 0.33, 0.6], sstep(-0.08, 0.03, e)); hor = mix3(hor, [1.0, 0.6, 0.36], sstep(-0.08, 0.02, e));\n    zen = mix3(zen, [0.24, 0.52, 0.86], sstep(0.05, 0.35, e)); hor = mix3(hor, [0.74, 0.88, 0.97], sstep(0.06, 0.36, e));\n    const grey = lerp(0.075, 0.66, day) * (1 - wx.dark * 0.55);\n    zen = mix3(zen, [grey * 0.84, grey * 0.89, grey * 0.97], over);\n    hor = mix3(hor, [grey * 1.1, grey * 1.12, grey * 1.16], over);\n    zen = mix3(zen, [0.46, 0.6, 0.78], w[3] * day * 0.35);   // Winterhimmel blasser\n\n    const sunCol = mix3([1.0, 0.42, 0.16], [1.0, 0.95, 0.86], sstep(0.0, 0.3, e));\n    let lit = [0.15, 0.17, 0.25], shade = [0.035, 0.045, 0.085];\n    lit = mix3(lit, [0.62, 0.5, 0.64], sstep(-0.28, -0.05, e)); shade = mix3(shade, [0.23, 0.22, 0.35], sstep(-0.28, -0.05, e));\n    lit = mix3(lit, [1.0, 0.72, 0.52], sstep(-0.06, 0.03, e)); shade = mix3(shade, [0.52, 0.42, 0.5], sstep(-0.06, 0.03, e));\n    lit = mix3(lit, [1.0, 0.99, 0.97], sstep(0.07, 0.32, e)); shade = mix3(shade, [0.63, 0.69, 0.8], sstep(0.07, 0.32, e));\n    lit = mix3(lit, [grey * 1.18, grey * 1.2, grey * 1.24], over * 0.75);\n    shade = mix3(shade, [grey * 0.72, grey * 0.75, grey * 0.8], over);\n    shade = shade.map(v => v * (1 - wx.dark * 0.35));\n    // Stadtlicht: Nachts leuchten tiefe Wolken \u00fcber Berlin warm von unten, statt schwarz zu sein\n    const city = night * sstep(0.35, 0.9, over);\n    zen = mix3(zen, [0.1, 0.085, 0.08], city * 0.55);\n    hor = mix3(hor, [0.26, 0.19, 0.15], city * 0.6);\n    lit = mix3(lit, [0.3, 0.23, 0.19], city * 0.5);\n    shade = mix3(shade, [0.16, 0.125, 0.11], city * 0.5);\n\n    // Licht auf den H\u00e4usern\n    let amb = [0.12, 0.14, 0.26];\n    amb = mix3(amb, [0.34, 0.37, 0.55], sstep(-0.32, -0.06, e));\n    amb = mix3(amb, [1.0, 0.88, 0.76], sstep(-0.06, 0.02, e));\n    amb = mix3(amb, [1.08, 1.06, 1.03], sstep(0.08, 0.36, e));\n    amb = mix3(amb, [lerp(0.12, 0.84, day), lerp(0.13, 0.87, day), lerp(0.2, 0.92, day)], over * 0.75);\n    const sat = clamp01(1.04 - over * 0.32 - night * 0.38);\n\n    const HZ = 0.72;   // Horizont im Himmels-Canvas\n    const sunX = lerp(0.1, 0.9, sunT), sunY = HZ - Math.max(e, -0.2) * 0.64;\n    const mT = moonT < 0 ? 0 : moonT;\n    const moonX = lerp(0.16, 0.84, mT), moonY = HZ - Math.sin(Math.PI * mT) * 0.62;\n\n    amb = mix3(amb, [0.15, 0.135, 0.14], city * 0.4);\n    // Vollmond hellt die Nacht etwas auf\n    amb = mix3(amb, amb.map(v => v * 1.3), night * moonLit * (1 - over) * sstep(-0.02, -0.14, e));\n\n    return {\n      w, h, e, day, night, gold, over, wx, rise, set, nightLen, snowCover, moon, moonLit,\n      zen, hor, sunCol, lit, shade, amb, sat, HZ, sunX, sunY, moonX, moonY,\n      sunVis: sstep(-0.05, 0.02, e) * (1 - over * 0.85),\n      moonVis: sstep(-0.02, -0.14, e) * (1 - over * 0.8),\n      stars: sstep(-0.1, -0.28, e) * (1 - over),\n      glow: gold * (1 - over * 0.8),\n      glowCol: mix3([0.95, 0.45, 0.42], [1.0, 0.58, 0.26], sstep(-0.06, 0.04, e)),\n      fogCol: mix3(mix3([0.07, 0.08, 0.12], [0.78, 0.8, 0.83], day), hor, 0.3)\n    };\n  }\n\n  // Zeitraffer-Tempo (Stunden pro Sekunde): D\u00e4mmerung langsam, Nacht schnell\n  const rate = env => {\n    const deep = Math.max(2.2, env.nightLen / 3.4);\n    const base = lerp(1.08, deep, sstep(0.0, -0.3, env.e));\n    return lerp(base, 0.52, Math.exp(-(((env.e - 0.01) / 0.1) ** 2)));\n  };\n\n  function weatherWord(env) {\n    const x = env.wx;\n    if (x.snow > 0.3) return 'Schnee';\n    if (x.storm > 0.4 && x.rain > 0.5) return 'Gewitter';\n    if (x.rain > 0.3) return 'Regen';\n    if (x.bow > 0.4 && env.day > 0.5) return 'Regenbogen';\n    if (x.fog > 0.35) return 'Nebel';\n    if (x.cover > 0.78) return 'Bedeckt';\n    if (x.cover > 0.55) return 'Wolkig';\n    if (env.night > 0.6) return 'Sternenklar';\n    if (env.gold > 0.45) return env.h > 12 ? 'Abendrot' : 'Morgenrot';\n    if (env.e < 0) return 'D\u00e4mmerung';\n    return x.cover < 0.3 ? 'Sonnig' : 'Heiter';\n  }\n\n  /* ==========================================================================\n     WEBGL-GRUNDGER\u00dcST\n     ========================================================================== */\n  const VERT = 'attribute vec2 aPos; varying vec2 vUv; void main(){ vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); }';\n  const NOISE = `\n    float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); }\n    float vnoise(vec2 p) {\n      vec2 i = floor(p), f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f);\n      return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y);\n    }`;\n\n  function glSetup(canvas, frag, alpha) {\n    const gl = canvas.getContext('webgl', { alpha, premultipliedAlpha: true, antialias: false, depth: false, stencil: false, preserveDrawingBuffer: false, powerPreference: 'high-performance' });\n    if (!gl) return null;\n    const sh = (type, src) => {\n      const s = gl.createShader(type);\n      gl.shaderSource(s, src);\n      gl.compileShader(s);\n      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));\n      return s;\n    };\n    const p = gl.createProgram();\n    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT));\n    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, frag));\n    gl.linkProgram(p);\n    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));\n    gl.useProgram(p);\n    const buf = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n    const a = gl.getAttribLocation(p, 'aPos');\n    gl.enableVertexAttribArray(a);\n    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);\n    const loc = {};\n    const u = name => (name in loc ? loc[name] : (loc[name] = gl.getUniformLocation(p, name)));\n    return { gl, u };\n  }\n  const texture = (gl, unit, filter) => {\n    const t = gl.createTexture();\n    gl.activeTexture(gl.TEXTURE0 + unit);\n    gl.bindTexture(gl.TEXTURE_2D, t);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n    return t;\n  };\n\n  /* ==========================================================================\n     HIMMEL\n     ========================================================================== */\n  const SKY_FRAG = (oct) => `\n    precision highp float;\n    varying vec2 vUv;\n    uniform vec2 uRes, uSun, uMoon, uDrift;\n    uniform float uTime, uHz, uCover, uDark, uFog, uStars, uBow, uFlash, uSunVis, uMoonVis, uEvolve, uNight, uGlow, uMoonK, uMoonWax, uMoonLit;\n    uniform vec3 uZen, uHor, uSunCol, uLit, uShade, uFogCol, uGlowCol;\n    uniform vec4 uShip;   // Luftschiff: Mitte (uv), halbe L\u00e4nge (in Bildh\u00f6hen), Richtung (1 = Bug rechts); z = 0: keins\n    uniform vec2 uShipB;  // Neigung (rad), Lichter (0 \u2026 1, nachts)\n    ${NOISE}\n    // Luftschiff (Anspielung auf die drehbare Luftschiffhalle von 1909 und die Adresse \u201eAm Alten Flugplatz\u201c): Rumpf als\n    // Zigarre mit schlankerem Heck und Ringspanten, Leitwerk oben und unten, F\u00fchrergondel vorn, Motorgondel hinten.\n    // Licht wie die Wolken (uLit/uShade), im Dunst, nachts Silhouette mit warmen Gondelfenstern und rotem Blinklicht.\n    float shipR(float x) {\n      float prof = sqrt(max(0.0, 1.0 - pow(abs(x), 2.6)));\n      return 0.17 * prof * (x < 0.0 ? 0.62 + 0.38 * smoothstep(-1.0, -0.25, x) : 1.0);\n    }\n    vec4 airship(vec2 uv, float asp, vec3 skyC) {\n      vec2 p = (uv - uShip.xy) * vec2(asp, 1.0);\n      p.y = -p.y;\n      float c = cos(uShipB.x), s = sin(uShipB.x);\n      p = vec2(c * p.x - s * p.y, s * p.x + c * p.y);\n      p.x *= uShip.w;\n      p /= uShip.z;\n      if (abs(p.x) > 1.06 || abs(p.y) > 0.34) return vec4(0.0);\n      float aa = 1.2 / (uRes.y * uShip.z);\n      float R = shipR(p.x);\n      float hull = 1.0 - smoothstep(-aa, aa, abs(p.y) - R);\n      float finH = 0.11 * (1.0 - smoothstep(-0.86, -0.6, p.x));\n      float fin = (1.0 - smoothstep(-aa, aa, abs(p.y) - R - finH)) * step(p.x, -0.58) * step(-0.985, p.x);\n      vec2 g1 = p - vec2(0.36, -0.209);\n      float gond = 1.0 - smoothstep(-aa, aa, max(abs(g1.x) - 0.12, abs(g1.y) - 0.026) - 0.012);\n      vec2 g2 = p - vec2(-0.42, -0.188);\n      float mot = 1.0 - smoothstep(-aa, aa, max(abs(g2.x) - 0.05, abs(g2.y) - 0.016) - 0.01);\n      float a = max(max(hull, fin), max(gond, mot));\n      if (a <= 0.0) return vec4(0.0);\n      float ny = clamp(p.y / max(R, 0.002), -1.0, 1.0);\n      vec3 n = vec3(0.0, ny, sqrt(max(0.0, 1.0 - ny * ny)));\n      vec2 toL = mix(uSun, uMoon, uNight) - uShip.xy;\n      vec3 L = normalize(vec3(toL.x * asp, -toL.y, 0.55));\n      float dif = clamp(dot(n, L), 0.0, 1.0);\n      vec3 hullC = mix(uShade * 0.82, uLit * 1.02, dif) * vec3(0.98, 0.96, 0.92);\n      hullC *= 1.0 - 0.07 * smoothstep(0.44, 0.5, abs(fract(p.x * 6.0) - 0.5));   // Ringspanten\n      hullC *= 1.0 - 0.18 * smoothstep(0.72, 1.0, abs(p.x));                       // Bug und Heck runden sich weg\n      hullC += uSunCol * pow(max(ny, 0.0), 10.0) * 0.18 * uSunVis;                 // Glanz oben\n      vec3 col = mix(mix(uShade, uZen, 0.3) * 0.62, hullC, hull);\n      col = mix(col, skyC * 0.5, uNight * 0.72);   // nachts Silhouette, etwas Mondlicht bleibt auf dem Rumpf\n      float win = gond * step(0.4, fract((g1.x + 0.12) * 22.0)) * (1.0 - smoothstep(0.004, 0.011, abs(g1.y - 0.003)));\n      col += vec3(1.0, 0.78, 0.45) * win * uShipB.y * 1.4;\n      float blink = step(0.82, fract(uTime * 0.9));\n      col += vec3(1.0, 0.16, 0.1) * (1.0 - smoothstep(0.012, 0.03, length(p - vec2(0.36, -0.245)))) * blink * uShipB.y * 2.0;\n      col = mix(col, skyC, 0.22 + 0.45 * uFog);\n      return vec4(col, a);\n    }\n    // Grobes Rauschen f\u00fcr Verwirbelung und Schichtwolken\n    float fbmW(vec2 p) {\n      float s = 0.0, a = 0.5;\n      mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n      for (int i = 0; i < 4; i++) { s += a * vnoise(p); p = m * p; a *= 0.5; }\n      return s;\n    }\n    // Feines Rauschen f\u00fcr die Wolken selbst: mehr Oktaven f\u00fcr scharfe Details. fw = Fl\u00e4che eines Pixels in\n    // Rausch-Einheiten; Oktaven, die feiner als ein Pixel w\u00e4ren, werden ausgeblendet (kein Flimmern am Horizont).\n    float fbm(vec2 p, float fw) {\n      float s = 0.0, a = 0.5, f = 1.0;\n      mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n      for (int i = 0; i < ${oct}; i++) { s += a * vnoise(p) * (1.0 - smoothstep(0.22, 0.45, f * fw)) + a * 0.5 * smoothstep(0.22, 0.45, f * fw); p = m * p; a *= 0.5; f *= 2.0; }\n      return s;\n    }\n    vec3 hue(float h) { return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); }\n\n    void main() {\n      vec2 uv = vec2(vUv.x, 1.0 - vUv.y);\n      float asp = uRes.x / uRes.y;\n      float t = clamp(uv.y / uHz, 0.0, 1.0);\n      vec3 sky = mix(uZen, uHor, pow(t, 1.45));\n      // Abend-/Morgenrot \u00fcber dem Horizont an der Stelle der Sonne\n      sky += uGlowCol * uGlow * exp(-abs(uv.x - uSun.x) * 2.2) * pow(t, 3.0) * 0.55;\n      vec3 skyBase = sky;   // ohne Sterne (f\u00fcr Silhouette und Dunst des Luftschiffs)\n\n      // Sterne\n      if (uStars > 0.01) {\n        vec2 g = gl_FragCoord.xy / 4.5;\n        vec2 id = floor(g), f = fract(g) - 0.5;\n        float h = hash(id);\n        vec2 o = vec2(hash(id + 7.1), hash(id + 3.3)) - 0.5;\n        float s = step(0.978, h) * smoothstep(0.36, 0.0, length(f - o * 0.5));\n        s *= 0.55 + 0.45 * sin(uTime * (1.3 + h * 4.0) + h * 60.0);\n        sky += vec3(0.88, 0.92, 1.0) * s * uStars * (1.0 - t * 0.85) * (0.6 + 0.8 * hash(id + 1.7));\n      }\n\n      // Sonne und Mond\n      vec2 ds = (uv - uSun) * vec2(asp, 1.0);\n      float dsun = length(ds);\n      vec3 sunGlow = uSunCol * (exp(-dsun * 6.5) * 0.42 + exp(-dsun * 26.0) * 0.55) * uSunVis;\n      float sunDisk = smoothstep(0.036, 0.03, dsun) * uSunVis;\n      vec2 dm = (uv - uMoon) * vec2(asp, 1.0);\n      float dmo = length(dm);\n      float moonDisk = smoothstep(0.026, 0.022, dmo);\n      // Mondphase: Die Schattengrenze ist eine Ellipse (k = cos 2\u03c0\u00b7Phase: 1 Neumond \u2026 -1 Vollmond); zunehmend ist\n      // rechts beleuchtet, abnehmend links. Der dunkle Teil bleibt ganz schwach sichtbar (Erdlicht).\n      vec2 mp = dm / 0.024;\n      float edge = (uMoonWax > 0.5 ? mp.x : -mp.x) - uMoonK * sqrt(max(0.0, 1.0 - mp.y * mp.y));\n      float moon = moonDisk * mix(0.05, 1.0, smoothstep(-0.07, 0.07, edge)) * uMoonVis;\n      vec3 moonGlow = vec3(0.55, 0.66, 0.9) * exp(-dmo * 12.0) * (0.08 + 0.22 * uMoonLit) * uMoonVis;\n\n      // Wolken als Ebene in Perspektive: oben gro\u00df, zum Horizont hin klein und dicht\n      float depth = max(uHz - uv.y, 0.0);\n      float pz = 1.0 / (depth + 0.16);\n      vec2 cp = vec2((uv.x - 0.5) * asp * pz * 0.55, pz * 0.9) * 3.2 + uDrift;\n      float fw = max(1.76 * pz, 2.88 * pz * pz) / uRes.y;   // Pixelgr\u00f6\u00dfe in Rausch-Einheiten (quer bzw. in die Tiefe)\n      vec2 q = vec2(fbmW(cp * 0.9 + vec2(1.7, 9.2) + uEvolve * 0.07), fbmW(cp * 0.9 + vec2(8.3, 2.8) - uEvolve * 0.05));\n      vec2 cq = cp + q * 1.15;\n      float n = fbm(cq, fw);\n      float thr = mix(0.62, 0.3, uCover);\n      float dens = smoothstep(thr, thr + mix(0.11, 0.26, uCover), n);\n      vec2 toL = mix(uSun, uMoon, uNight) - uv;\n      vec2 ld = toL / (length(toL) + 0.0001);\n      float n2 = fbm(cq + ld * 0.12, fw);\n      float litK = clamp(0.58 + (n - n2) * 4.2, 0.0, 1.0);\n      vec3 ccol = mix(uShade, uLit, litK);\n      ccol += uSunCol * exp(-dsun * 4.5) * (1.0 - dens) * 1.3 * uSunVis;   // Silberrand\n      float strat = smoothstep(0.56, 0.96, uCover) * (0.72 + 0.28 * fbmW(cp * 0.35 + uEvolve * 0.02));\n      float cloudA = max(dens * 0.96, strat);\n      vec3 cloudCol = mix(ccol, uShade * (0.9 + 0.14 * n), smoothstep(0.55, 1.0, uCover) * (1.0 - dens * 0.45));\n      cloudA *= smoothstep(-0.02, 0.06, depth);\n\n      vec3 col = sky + sunGlow * (1.0 - cloudA * 0.8) + uSunCol * sunDisk * 2.2 * (1.0 - cloudA) + (vec3(0.94, 0.95, 1.0) * moon + moonGlow) * (1.0 - cloudA * 0.9);\n      // Luftschiff zwischen Himmel und Wolken: dicke Wolken verdecken es, durch d\u00fcnne schimmert es (danach ein Rest)\n      vec4 ship = uShip.z > 0.0 ? airship(uv, asp, skyBase) : vec4(0.0);\n      col = mix(col, ship.rgb, ship.a);\n      col = mix(col, cloudCol, cloudA);\n      col = mix(col, ship.rgb, ship.a * cloudA * 0.22);\n\n      // Regenbogen gegen\u00fcber der Sonne\n      if (uBow > 0.01) {\n        vec2 bc = vec2(1.0 - uSun.x, uHz + 0.28);\n        float r = length((uv - bc) * vec2(asp, 1.0));\n        float x = (r - 0.66) / 0.055;\n        float band = max(0.0, 1.0 - x * x);\n        col += hue((1.0 - (x + 1.0) * 0.5) * 0.78) * band * uBow * 0.3 * (1.0 - cloudA * 0.7) * smoothstep(0.0, 0.12, depth);\n      }\n\n      col = mix(col, uFogCol, uFog * (0.25 + 0.75 * t) * 0.85);\n      col += vec3(0.75, 0.8, 1.0) * uFlash * (0.3 + cloudA * 0.9);\n      gl_FragColor = vec4(col, 1.0);\n    }`;\n\n  /* ==========================================================================\n     H\u00c4USER\n     ========================================================================== */\n  const BUILD_FRAG = `\n    precision highp float;\n    varying vec2 vUv;\n    uniform sampler2D uImg, uIds, uIds2, uWin, uMask, uSnow;\n    uniform vec2 uTex;\n    uniform float uDeep;\n    uniform vec3 uAmb, uFogCol;\n    uniform float uSat, uNight, uDay, uOver, uWet, uFog, uFlash, uLampDay, uSnowCover, uManual;\n    uniform vec4 uSeason;\n    uniform vec4 uLamps[${LAMPS.length}];\n    uniform vec3 uWall[${WALL.length}];\n    ${NOISE}\n    vec3 rgb2hsv(vec3 c) {\n      vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n      vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n      vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n      float d = q.x - min(q.w, q.y);\n      return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 1e-10)), d / (q.x + 1e-10), q.x);\n    }\n    vec3 hsv2rgb(vec3 c) {\n      vec3 p = abs(fract(c.xxx + vec3(1.0, 2.0 / 3.0, 1.0 / 3.0)) * 6.0 - 3.0);\n      return c.z * mix(vec3(1.0), clamp(p - 1.0, 0.0, 1.0), c.y);\n    }\n    // Schneedecke, die das Licht des Originals beh\u00e4lt: in der Sonne wei\u00df, im Schatten bl\u00e4ulich\n    vec3 snowLit(float Lb, float L) {\n      float sun = smoothstep(0.1, 0.42, Lb);\n      return mix(vec3(0.64, 0.71, 0.85), vec3(0.97, 0.985, 1.0), sun) * clamp(0.95 + (L - Lb) * 0.35, 0.85, 1.05);\n    }\n    void main() {\n      vec2 uv = vec2(vUv.x, 1.0 - vUv.y);\n      vec4 tx = texture2D(uImg, uv);\n      vec4 sn = texture2D(uSnow, uv);                 // Schneepolster: R Deckung, G Schatten, B H\u00f6he\n      float sA = sn.r * uSnowCover;\n      if (tx.a < 0.004 && sA < 0.004) { gl_FragColor = vec4(0.0); return; }\n      vec3 c = tx.rgb;\n      float L = dot(c, vec3(0.2126, 0.7152, 0.0722));\n      vec3 hsv = rgb2hsv(c);\n      vec2 ar = vec2(uTex.x / uTex.y, 1.0);\n\n      // Gegl\u00e4ttete Masken (einmal beim Laden berechnet): R Pflanzen, G ganze Baumkronen, A weiche Helligkeit\n      vec4 mk = texture2D(uMask, uv);\n      float veg = max(mk.r, mk.g * (1.0 - smoothstep(0.12, 0.3, L)));   // dunkle Schatten in den Kronen geh\u00f6ren dazu\n      float Lb = mk.a;\n      float lawnF = smoothstep(0.745, 0.785, uv.y);                      // unten: Rasen statt B\u00e4ume\n      float hedge = smoothstep(0.722, 0.742, uv.y) * (1.0 - lawnF);      // Hecken und Str\u00e4ucher am Stra\u00dfenrand\n      float ground = (1.0 - veg) * smoothstep(0.76, 0.8, uv.y);\n      // Streifen zwischen Hecke und Stra\u00dfe (Gehweg, Weg durch die Hecke) \u2013 ohne Ziegelsockel und ohne das Auto links\n      float strip = smoothstep(0.735, 0.765, uv.y) * (1.0 - mk.r) * (1.0 - smoothstep(0.03, 0.08, c.r - c.b)) * step(0.07, uv.x);\n      ground = max(ground, strip);\n\n      // Sommer: sattes Gr\u00fcn\n      vec3 summer = hsv2rgb(vec3(hsv.x, min(0.95, hsv.y * 1.1), hsv.z));\n      // Fr\u00fchling: frisches Hellgr\u00fcn, einzelne Kronen bl\u00fchen rosa-wei\u00df\n      vec3 spring = hsv2rgb(vec3(mix(hsv.x, 0.23, 0.35), min(0.9, hsv.y * 1.08), min(1.0, hsv.z * 1.06)));\n      float bloom = smoothstep(0.52, 0.74, vnoise(uv * vec2(8.0, 3.6) + 7.3)) * (1.0 - lawnF) * smoothstep(-0.02, 0.08, L - Lb);\n      spring = mix(spring, mix(vec3(1.0, 0.76, 0.86), vec3(1.0, 0.95, 0.97), smoothstep(0.25, 0.7, L)) * (0.62 + 0.55 * L), bloom * 0.8);\n      // Herbst: nur der Farbton wechselt, Helligkeit und Blattstruktur bleiben; ganze Kronen f\u00e4rben sich \u00e4hnlich\n      float tone = clamp(vnoise(uv * vec2(6.5, 3.0) + 3.1) * 1.3 - 0.2 + (L - Lb) * 2.0, 0.0, 1.0);\n      vec3 fall = hsv2rgb(vec3(mix(0.012, 0.12, tone), clamp(hsv.y * 0.75 + 0.5, 0.0, 0.92), min(1.0, hsv.z * 1.16 + 0.015)));\n      vec3 lawnFall = hsv2rgb(vec3(mix(hsv.x, 0.13, 0.5), hsv.y * 0.8, hsv.z * 1.02));\n      vec3 autumn = mix(fall, lawnFall, lawnF);\n      // Winter: Kronen k\u00fchl und ents\u00e4ttigt mit einem Hauch Raureif, der Rasen stumpf und br\u00e4unlich\n      vec3 treeW = mix(vec3(L) * vec3(0.84, 0.88, 0.96), vec3(0.8, 0.85, 0.92), 0.16 * smoothstep(0.04, 0.25, L));\n      vec3 lawnW = hsv2rgb(vec3(mix(hsv.x, 0.13, 0.45), hsv.y * 0.45, hsv.z * 0.92));\n      vec3 winter = mix(treeW, lawnW, lawnF);\n\n      vec3 seasonal = spring * uSeason.x + summer * uSeason.y + autumn * uSeason.z + winter * uSeason.w;\n      vec3 col = mix(c, seasonal, veg);\n\n      // Schnee (im Zeitraffer im Winter, live nur bei echtem Schnee): Hecken und Rasen tragen Schnee, Wege, Stra\u00dfe und\n      // Gehsteige liegen unter einer geschlossenen Schneedecke (Bordsteine und Schatten bleiben sichtbar)\n      col = mix(col, snowLit(Lb, L), uSnowCover * veg * max(lawnF, hedge * 0.82));\n      col = mix(col, snowLit(Lb, L), uSnowCover * ground * 0.92);\n\n      // Schneepolster auf D\u00e4chern, Br\u00fcstungen, Mauern und Laternen \u2013 mit leichter Schattierung f\u00fcr Volumen;\n      // \u00fcber dem Dachumriss (im Himmel) besteht der Pixel nur aus Schnee\n      col *= 1.0 - sn.g * 0.5 * uSnowCover;\n      vec3 snowC = mix(vec3(0.74, 0.8, 0.9), vec3(0.97, 0.985, 1.0), smoothstep(0.05, 0.8, sn.b));\n      col = mix(col, snowC, tx.a < 0.5 ? 1.0 : sA);\n\n      // N\u00e4sse nach Regen: dunkler, satter Boden\n      col = mix(col, col * 0.68, uWet * max(ground, veg * lawnF) * 0.8);\n\n      // Tags\u00fcber: die im Rendering leuchtenden Laternen ausschalten\n      float lampMask = 0.0;\n      for (int i = 0; i < ${LAMPS.length}; i++) {\n        vec4 lp = uLamps[i];\n        float d = length((uv - lp.xy) * ar) / lp.z;\n        lampMask = max(lampMask, smoothstep(1.9, 0.6, d));\n      }\n      col = mix(col, vec3(0.6, 0.62, 0.66) * (0.55 + 0.35 * L), lampMask * smoothstep(0.5, 0.85, L) * uLampDay);\n\n      // Grundlicht\n      vec3 lit = col * uAmb;\n      float Lg = dot(lit, vec3(0.2126, 0.7152, 0.0722));\n      lit = mix(vec3(Lg), lit, uSat);\n\n      // Kunstlicht (bei D\u00e4mmerung und Nacht; am Tag nur Fenster, die jemand per Fingertipp eingeschaltet hat)\n      if (uNight > 0.005 || uManual > 0.5) {\n        // Fenster: weiches Zimmerlicht statt harter Fl\u00e4chen. Die F\u00fcllung hat weiche Kanten, rundherum liegt ein\n        // warmer Schein auf Rahmen, Laibung und Wand; im Zimmer macht eine Lampe einen helleren Bereich\n        vec4 w1 = texture2D(uIds, uv), w2 = texture2D(uIds2, uv);\n        float id1 = floor(w1.r * 255.0 + 0.5), id2 = floor(w2.r * 255.0 + 0.5);\n        float inWin = 0.0;\n        if (id1 > 0.5) {\n          vec4 d1 = texture2D(uWin, vec2((id1 + 0.5) / 64.0, 0.25));\n          if (d1.a > 0.003) {\n            vec4 s1 = texture2D(uWin, vec2((id1 + 0.5) / 64.0, 0.75));\n            // Pflanzen vor dem Fenster bleiben als Silhouette stehen\n            float occ = 1.0 - step(0.5, s1.r) * smoothstep(0.25, 0.55, mk.r);\n            vec2 q = (vec2(w2.a, w1.a) - s1.gb) * vec2(1.9, 2.4);\n            // Grundhelligkeit h\u00f6her als vorher (0,52): Die Ecken der Scheibe fallen zur Lampe hin weniger ab\n            float b = 0.64 + 0.22 * (1.0 - w1.a) + 0.4 * exp(-dot(q, q));\n            b *= 0.9 + 0.22 * smoothstep(0.5, 0.85, L);                               // helle Vorh\u00e4nge leuchten mit\n            b *= mix(1.0, 0.72 + 0.4 * smoothstep(0.12, 0.45, L), s1.a);              // Loggien: Scheiben heller als Laibung\n            // In der D\u00e4mmerung spiegelt das Glas noch den Himmel, erst nachts wirkt das Zimmerlicht voll\n            inWin = w1.g * d1.a * occ * mix(0.5, 0.95, uDeep) * mix(1.35, 1.0, uNight);   // am Tag (nur per Fingertipp) kr\u00e4ftiger, sonst s\u00e4he man es kaum\n            lit = mix(lit, d1.rgb * b * 1.12, inWin);\n            lit += d1.rgb * (w1.b * d1.a * occ) * 0.4 * (1.0 - inWin);\n          }\n        }\n        if (id2 > 0.5) {\n          vec4 d2 = texture2D(uWin, vec2((id2 + 0.5) / 64.0, 0.25));\n          lit += d2.rgb * (w2.b * d2.a) * 0.4 * (1.0 - inWin);\n        }\n\n        vec3 light = vec3(0.0), glow = vec3(0.0);\n        for (int i = 0; i < ${LAMPS.length}; i++) {\n          vec4 lp = uLamps[i];\n          if (lp.w < 0.005) continue;\n          vec2 d = (uv - lp.xy) * ar;\n          float r = length(d) / lp.z;\n          glow += vec3(1.0, 0.78, 0.5) * lp.w * (1.3 / (1.0 + r * r * 1.6) + 0.12 / (1.0 + r * 0.35));\n          // Lichtkegel am Boden unter der Laterne\n          vec2 pd = vec2(d.x / (lp.z * 9.0), (d.y - lp.z * 12.5) / (lp.z * 5.0));\n          light += vec3(1.0, 0.74, 0.45) * lp.w * exp(-dot(pd, pd)) * 1.4;\n        }\n        for (int i = 0; i < ${WALL.length}; i++) {\n          vec3 wl = uWall[i];\n          if (wl.z < 0.005) continue;\n          vec2 d = (uv - wl.xy) * ar;\n          float r = length(d) * 260.0;\n          glow += vec3(1.0, 0.8, 0.55) * wl.z * (0.9 / (1.0 + r * r * 1.4));\n          // schmaler Lichtf\u00e4cher nach oben und unten an der Wand (q * q statt pow: pow mit negativer Basis ist in\n          // GLSL undefiniert und kann auf manchen GPUs NaN = schwarze Pixel liefern)\n          float q = d.x * 150.0;\n          light += vec3(1.0, 0.76, 0.5) * wl.z * exp(-q * q) * exp(-abs(d.y) * 26.0) * 0.9;\n        }\n        lit += col * light + glow;\n      }\n\n      lit = mix(lit, uFogCol, uFog * 0.5);\n      lit += col * uFlash * 0.55;\n      float outA = max(tx.a, sA);\n      gl_FragColor = vec4(lit * outA, outA);\n    }`;\n\n  /* ==========================================================================\n     ERZEUGEN\n     ========================================================================== */\n  function create({ hero, img, reduced = false, mobile = false, mode = 'zeitraffer', onChange, onFlash } = {}) {\n    if (!hero || !img) return null;\n    const skyHost = hero.querySelector('.hero__sky .hero__m');\n    const buildHost = hero.querySelector('.hero__build .hero__m');\n    const wxHost = hero.querySelector('.hero__wx');\n    if (!skyHost || !buildHost || !wxHost) return null;\n\n    const skyCv = document.createElement('canvas');\n    skyCv.className = 'sky__gl';\n    const birdCv = document.createElement('canvas');\n    birdCv.className = 'sky__birds';\n    const buildCv = document.createElement('canvas');\n    buildCv.className = 'build__gl';\n    const wxCv = document.createElement('canvas');\n    wxCv.className = 'wx__cv';\n    [skyCv, birdCv, buildCv, wxCv].forEach(c => c.setAttribute('aria-hidden', 'true'));\n\n    let S, B;\n    try {\n      S = glSetup(skyCv, SKY_FRAG(7), false);\n      B = glSetup(buildCv, BUILD_FRAG, true);\n    } catch (err) { console.warn('[KL sky]', err); return null; }\n    if (!S || !B) return null;\n    skyHost.appendChild(skyCv);\n    skyHost.appendChild(birdCv);\n    buildHost.appendChild(buildCv);\n    wxHost.appendChild(wxCv);\n    const b2 = birdCv.getContext('2d'), w2 = wxCv.getContext('2d');\n\n    // ---------- Texturen der H\u00e4user ----------\n    const g = B.gl;\n    const texImg = texture(g, 0, g.LINEAR), texIds = texture(g, 1, g.NEAREST), texWin = texture(g, 2, g.NEAREST), texMask = texture(g, 3, g.LINEAR), texIds2 = texture(g, 4, g.NEAREST), texSnow = texture(g, 5, g.LINEAR);\n    // Fenster-Tabelle (64 \u00d7 2): Zeile 1 wechselt jedes Bild (Farbe \u00d7 Helligkeit, Schaltzustand),\n    // Zeile 2 ist fest (Pflanzen davor, Lage der Lampe im Zimmer, schr\u00e4ge Fassade)\n    const winData = new Uint8Array(64 * 2 * 4);\n    for (let i = 0; i < WINDOW_COUNT; i++) {\n      const o = (64 + i + 1) * 4, side = i >= FRONT.length;\n      winData[o] = (side ? SIDE[i - FRONT.length][6] : FRONT[i][6]) ? 255 : 0;\n      winData[o + 1] = Math.round((0.18 + hash(i + 91) * 0.64) * 255);\n      winData[o + 2] = Math.round((0.2 + hash(i + 101) * 0.45) * 255);\n      winData[o + 3] = side ? 255 : 0;\n    }\n    g.activeTexture(g.TEXTURE2);\n    g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, 64, 2, 0, g.RGBA, g.UNSIGNED_BYTE, winData);\n    g.uniform1i(B.u('uImg'), 0); g.uniform1i(B.u('uIds'), 1); g.uniform1i(B.u('uWin'), 2); g.uniform1i(B.u('uMask'), 3); g.uniform1i(B.u('uIds2'), 4); g.uniform1i(B.u('uSnow'), 5);\n    let texW = 0, texH = 0, texReady = false;\n\n    // Bild in genau der Canvas-Aufl\u00f6sung hochladen (sauber verkleinert, kein Flimmern in den Lochblechen).\n    // Die weichen Hilfsdaten (Fensterlicht, Masken, Schnee) entstehen in h\u00f6chstens DATA_DPR: Der Shader liest alle\n    // Texturen \u00fcber dieselben relativen Koordinaten, und so bleibt die Vorberechnung beim Laden gleich schnell,\n    // auch wenn das Bild selbst auf dem Handy in 2\u00d7 gerendert wird.\n    let dataKey = '';\n    const drawScaled = (W, H) => {\n      const c = document.createElement('canvas');\n      c.width = W; c.height = H;\n      const cx = c.getContext('2d');\n      cx.imageSmoothingEnabled = true;\n      cx.imageSmoothingQuality = 'high';\n      cx.drawImage(img, 0, 0, W, H);\n      return c;\n    };\n    function uploadBuilding(W, H) {\n      if (!img.complete || !img.naturalWidth) return false;\n      const sc = drawScaled(W, H);\n      // Die Hilfsdaten h\u00e4ngen nur an der CSS-Gr\u00f6\u00dfe, nicht an der Qualit\u00e4tsstufe: Ein Stufenwechsel l\u00e4dt\n      // blo\u00df das Bild neu, statt Fensterlicht, Maske und Schnee (auf dem Handy sp\u00fcrbar langsam) neu zu rechnen.\n      const dd = Math.min(DATA_DPR, window.devicePixelRatio || 1);\n      const DW = Math.max(2, Math.round(buildCv.offsetWidth * dd)), DH = Math.max(2, Math.round(buildCv.offsetHeight * dd));\n      // Hilfs-Canvases nach dem Hochladen freigeben: Safari z\u00e4hlt sie sonst weiter gegen seine Canvas-Speichergrenze\n      let sd = null;\n      const free = () => { sc.width = sc.height = 0; if (sd) sd.width = sd.height = 0; };\n      try {\n        g.activeTexture(g.TEXTURE0); g.bindTexture(g.TEXTURE_2D, texImg);\n        g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, g.RGBA, g.UNSIGNED_BYTE, sc);\n        if (dataKey !== DW + 'x' + DH) {   // gleiche Datenaufl\u00f6sung: nichts neu rechnen\n          sd = DW === W && DH === H ? sc : drawScaled(DW, DH);\n          const ids = windowSoft(DW, DH);\n          g.activeTexture(g.TEXTURE1); g.bindTexture(g.TEXTURE_2D, texIds);\n          g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, DW, DH, 0, g.RGBA, g.UNSIGNED_BYTE, ids.t1);\n          g.activeTexture(g.TEXTURE4); g.bindTexture(g.TEXTURE_2D, texIds2);\n          g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, DW, DH, 0, g.RGBA, g.UNSIGNED_BYTE, ids.t2);\n          const mask = buildMask(sd, DW, DH);\n          flySpots = spotsFrom(mask);\n          g.activeTexture(g.TEXTURE3); g.bindTexture(g.TEXTURE_2D, texMask);\n          g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, mask.w, mask.h, 0, g.RGBA, g.UNSIGNED_BYTE, mask.data);\n          g.activeTexture(g.TEXTURE5); g.bindTexture(g.TEXTURE_2D, texSnow);\n          g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, DW, DH, 0, g.RGBA, g.UNSIGNED_BYTE, snowData(sd, DW, DH));\n          dataKey = DW + 'x' + DH;\n        }\n      } catch (err) { console.warn('[KL sky] texture', err); free(); return false; }\n      free();\n      texW = W; texH = H;\n      return true;\n    }\n\n    // Weiches Fensterlicht, einmal beim Laden berechnet: Jede Scheibe wird gerastert und zweimal\n    // weichgezeichnet \u2013 schwach f\u00fcr die F\u00fcllung (weiche Kanten, Sprossen nur angedeutet) und stark f\u00fcr den\n    // Lichtschein rundherum. Je Pixel werden die zwei n\u00e4chstgelegenen Fenster gemerkt, damit sich die\n    // Scheine benachbarter Fenster sauber \u00fcberlagern.\n    // t1: R Fenster-Nr., G F\u00fcllung, B Schein, A H\u00f6he im Fenster \u00b7 t2: R zweites Fenster, B dessen Schein, A Breite im Fenster\n    function windowSoft(W, H) {\n      const t1 = new Uint8Array(W * H * 4), t2 = new Uint8Array(W * H * 4);\n      const w1 = new Float32Array(W * H), w2 = new Float32Array(W * H);\n      const base = W / 2250;\n      const rFill = Math.max(1, Math.round(3 * base)), rHalo = Math.max(3, Math.round(11 * base));\n      const shapes = [];\n      FRONT.forEach((f, n) => {\n        const x0 = f[0] * W, y0 = f[1] * H, x1 = f[2] * W, ybl = f[3] * H, ybr = f[4] * H;\n        const mull = f[5].map(m => [m[0] * W, m[1] * W]);\n        // Oberkante waagerecht (Fenstersturz), Unterkante folgt der davorstehenden Br\u00fcstung\n        shapes.push({ id: n + 1, x0, x1, ymin: y0, ymax: Math.max(ybl, ybr), top: () => y0, bot: t => ybl + (ybr - ybl) * t, gap: cx => mull.some(m => cx >= m[0] && cx <= m[1]) });\n      });\n      SIDE.forEach((s, n) => {\n        // Schr\u00e4ge Fassaden: Parallelogramm mit perspektivischer Ober- und Unterkante\n        shapes.push({ id: FRONT.length + n + 1, x0: s[0] * W, x1: s[1] * W, ymin: Math.min(s[2], s[3]) * H, ymax: Math.max(s[4], s[5]) * H,\n          top: t => (s[2] + (s[3] - s[2]) * t) * H, bot: t => (s[4] + (s[5] - s[4]) * t) * H, gap: () => false });\n      });\n      for (const sh of shapes) {\n        const m = rHalo * 3 + 2;\n        const X0 = Math.max(0, Math.floor(sh.x0) - m), X1 = Math.min(W, Math.ceil(sh.x1) + m);\n        const Y0 = Math.max(0, Math.floor(sh.ymin) - m), Y1 = Math.min(H, Math.ceil(sh.ymax) + m);\n        const w = X1 - X0, h = Y1 - Y0, span = Math.max(1, sh.x1 - sh.x0);\n        if (w <= 0 || h <= 0) continue;\n        // Abdeckung je Pixel genau (4 Unterspalten, senkrecht exakt), damit das Licht bis an den Rahmen und in die Ecken\n        // reicht. Vorher ganze Pixel (je Rand bis zu 1 px weniger) und danach zweimal weichgezeichnet: In den Ecken kam\n        // nur ein Viertel an, man sah unbeleuchtetes Glas (Kumpel, 27.09.). Jetzt das Maximum aus scharfer F\u00fcllung (innen\n        // voll bis in die Ecken) und der weichen von vorher (au\u00dfen l\u00e4uft das Licht wie gehabt weich \u00fcber den Rahmen, das\n        // ist der warme Schein; nur scharf fehlte er, User 27.09.)\n        const cover = new Float32Array(w * h), SUB = 4;\n        for (let x = Math.max(X0, Math.floor(sh.x0)); x < Math.min(X1, Math.ceil(sh.x1)); x++) {\n          for (let k = 0; k < SUB; k++) {\n            const cx = x + (k + 0.5) / SUB;\n            if (cx < sh.x0 || cx > sh.x1 || sh.gap(cx)) continue;\n            const t = (cx - sh.x0) / span, yt = sh.top(t), yb = sh.bot(t);\n            for (let y = Math.max(Y0, Math.floor(yt)); y < Math.min(Y1, Math.ceil(yb)); y++) {\n              const c = Math.min(y + 1, yb) - Math.max(y, yt);   // senkrechter Anteil dieses Pixels innerhalb der Scheibe\n              if (c > 0) cover[(y - Y0) * w + (x - X0)] += c / SUB;\n            }\n          }\n        }\n        const fill = boxBlur(cover, w, h, 1), soft = boxBlur(boxBlur(cover, w, h, rFill), w, h, rFill);\n        for (let k = 0; k < fill.length; k++) if (soft[k] > fill[k]) fill[k] = soft[k];\n        const halo = boxBlur(boxBlur(boxBlur(cover, w, h, rHalo), w, h, rHalo), w, h, rHalo);\n        for (let yy = 0; yy < h; yy++) {\n          for (let xx = 0; xx < w; xx++) {\n            const li = yy * w + xx, fv = fill[li], hv = halo[li], wt = Math.max(fv, hv);\n            if (wt < 0.004) continue;\n            const x = X0 + xx, y = Y0 + yy, p = y * W + x, i = p * 4;\n            const t = clamp01((x + 0.5 - sh.x0) / span), yt = sh.top(t), yb = sh.bot(t);\n            const v = clamp01((y + 0.5 - yt) / Math.max(1, yb - yt));\n            if (wt > w1[p]) {\n              if (w1[p] > 0) { w2[p] = w1[p]; t2[i] = t1[i]; t2[i + 2] = t1[i + 2]; }\n              w1[p] = wt;\n              t1[i] = sh.id; t1[i + 1] = Math.round(fv * 255); t1[i + 2] = Math.round(hv * 255); t1[i + 3] = Math.round(v * 255);\n              t2[i + 3] = Math.round(t * 255);\n            } else if (wt > w2[p]) {\n              w2[p] = wt; t2[i] = sh.id; t2[i + 2] = Math.round(hv * 255);\n            }\n          }\n        }\n      }\n      return { t1, t2 };\n    }\n\n    // Masken f\u00fcr die Jahreszeiten, in halber Aufl\u00f6sung und gegl\u00e4ttet \u2013 damit Laub und Schnee\n    // sauber \u00fcber ganze Fl\u00e4chen laufen statt pixelweise zu flackern\n    // Gl\u00fchw\u00fcrmchen-Pl\u00e4tze: Pflanzen in der unteren Bildh\u00e4lfte (Hecken, Rasen, B\u00fcsche vor den H\u00e4usern), aus der Maske\n    // einmal gesammelt (relative Bildkoordinaten), gemischt und begrenzt\n    let flySpots = [];\n    function spotsFrom(mask) {\n      const { w, h, data } = mask, out = [];\n      for (let y = Math.floor(h * 0.6); y < h - 2; y += 3) {\n        for (let x = 2; x < w - 2; x += 3) if (data[(y * w + x) * 4] > 120) out.push([x / w, y / h]);\n      }\n      for (let i = out.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [out[i], out[j]] = [out[j], out[i]]; }\n      return out.slice(0, 900);\n    }\n    function buildMask(src, W, H) {\n      const w = Math.max(2, Math.round(W / 2)), h = Math.max(2, Math.round(H / 2)), N = w * h;\n      const cv = document.createElement('canvas');\n      cv.width = w; cv.height = h;\n      const cx = cv.getContext('2d', { willReadFrequently: true });\n      cx.imageSmoothingQuality = 'high';\n      cx.drawImage(src, 0, 0, w, h);\n      const px = cx.getImageData(0, 0, w, h).data;\n      cv.width = cv.height = 0;   // Hilfs-Canvas freigeben (Safari beh\u00e4lt es sonst im Canvas-Speicher)\n      const veg = new Float32Array(N), lum = new Float32Array(N), alpha = new Float32Array(N);\n      for (let i = 0; i < N; i++) {\n        const r = px[i * 4] / 255, gg = px[i * 4 + 1] / 255, b = px[i * 4 + 2] / 255, a = px[i * 4 + 3] / 255;\n        const mx = Math.max(r, gg, b), ch = mx - Math.min(r, gg, b);\n        let hue = 0;\n        if (ch > 1e-5) {\n          hue = mx === r ? ((gg - b) / ch) % 6 : mx === gg ? (b - r) / ch + 2 : (r - gg) / ch + 4;\n          hue /= 6;\n          if (hue < 0) hue += 1;\n        }\n        alpha[i] = a;\n        lum[i] = (0.2126 * r + 0.7152 * gg + 0.0722 * b) * a;\n        // Gr\u00fcnt\u00f6ne; bei dunklem Laub z\u00e4hlt die relative S\u00e4ttigung, weil der absolute Farbanteil klein ist\n        const colorful = Math.max(sstep(0.012, 0.05, ch), sstep(0.16, 0.32, ch / Math.max(mx, 1e-4)) * sstep(0.015, 0.05, mx));\n        veg[i] = a > 0.5 ? sstep(0.14, 0.2, hue) * (1 - sstep(0.47, 0.53, hue)) * colorful : 0;\n      }\n      // weiche Helligkeit nur aus Bildpixeln (der transparente Himmel z\u00e4hlt nicht mit \u2013 sonst leuchten Kronenr\u00e4nder)\n      const vegB = boxBlur(veg, w, h, 2), lumS = boxBlur(lum, w, h, 5), alphaS = boxBlur(alpha, w, h, 5);\n      const lumB = lumS.map((v, i) => v / Math.max(alphaS[i], 0.05));\n      // Pflanzenanteil nur unter Bildpixeln gemittelt \u2013 am Kronenrand z\u00e4hlt der Himmel nicht mit\n      const vegS = boxBlur(veg, w, h, 3), alphaV = boxBlur(alpha, w, h, 3);\n      // Baumkronen als Ganzes (auch dunkle Schattenpartien), damit Farbwechsel nicht fleckig wirken\n      const vegR = boxBlur(veg, w, h, 6), alphaR = boxBlur(alpha, w, h, 6);\n      const region = vegR.map((v, i) => sstep(0.2, 0.45, v / Math.max(alphaR[i], 0.05)) * (alpha[i] > 0.5 ? 1 : 0));\n      const data = new Uint8Array(N * 4);\n      for (let i = 0; i < N; i++) {\n        data[i * 4] = Math.round(vegB[i] * 255);\n        data[i * 4 + 1] = Math.round(region[i] * 255);\n        data[i * 4 + 3] = Math.round(Math.min(1, lumB[i]) * 255);\n      }\n      return { w, h, data };\n    }\n\n    // Schneepolster in voller Aufl\u00f6sung: R Deckung, G Schatten darunter, B H\u00f6he im Polster (0 unten \u2026 1 oben).\n    // Die Polster liegen auf den vermessenen Kanten (SNOW) und auf allen Dachkanten gegen den Himmel, die hier\n    // aus dem Umriss erkannt werden. Bei D\u00e4chern ragt der Schnee \u00fcber den Umriss hinaus in den Himmel.\n    function snowData(src, W, H) {\n      const d = new Uint8Array(W * H * 4);\n      const s = W / 2250;\n      const wave = x => 0.84 + 0.1 * Math.sin(x * 0.09 / s) + 0.06 * Math.sin(x * 0.031 / s + 1.7);\n      const pile = (xa, ya, xb, yb, hgt, below) => {\n        if (xb < xa) [xa, ya, xb, yb] = [xb, yb, xa, ya];\n        const len = Math.max(1, xb - xa), taper = Math.min(len * 0.5, Math.max(2, hgt * 1.6)), sh = Math.max(1.5, hgt * 0.45);\n        for (let x = Math.max(0, Math.floor(xa)); x <= Math.min(W - 1, Math.ceil(xb)); x++) {\n          const cx = x + 0.5;\n          if (cx < xa || cx > xb) continue;\n          const ye = ya + (yb - ya) * (cx - xa) / len;\n          const e = Math.min(1, Math.min(cx - xa, xb - cx) / taper);\n          const round = Math.sqrt(Math.max(0, 1 - (1 - e) * (1 - e)));   // abgerundete Enden\n          const top = ye - hgt * wave(x) * round, bot = ye + below;\n          for (let y = Math.max(0, Math.floor(top)); y <= Math.min(H - 1, Math.floor(bot)); y++) {\n            const cov = Math.max(0, Math.min(y + 1, bot) - Math.max(y, top));\n            if (cov <= 0) continue;\n            const i = (y * W + x) * 4, v = Math.round(cov * 255);\n            if (v > d[i]) { d[i] = v; d[i + 2] = Math.round(clamp01((bot - (y + 0.5)) / Math.max(1, bot - top)) * 255); }\n          }\n          for (let k = 0; k < sh; k++) {   // leichter Schatten unter dem Polster\n            const y = Math.floor(bot) + 1 + k;\n            if (y >= H) break;\n            const i = (y * W + x) * 4 + 1;\n            d[i] = Math.max(d[i], Math.round(110 * (1 - k / sh) * round));\n          }\n        }\n      };\n      // vermessene Kanten (DEPTH: Dicke der Polster, 1 = knapp 10 cm)\n      const DEPTH = 1.7;\n      for (const [x0, y0, x1, y1, h] of SNOW) pile(x0 * W, y0 * H, x1 * W, y1 * H, h * H * DEPTH, Math.max(1, 1.2 * s));\n\n      // Dachkanten gegen den Himmel: obere Umrisskanten, die gerade verlaufen (keine Baumkronen)\n      const cx = document.createElement('canvas');\n      cx.width = W; cx.height = H;\n      const c2 = cx.getContext('2d', { willReadFrequently: true });\n      c2.drawImage(src, 0, 0);\n      const px = c2.getImageData(0, 0, W, H).data;\n      cx.width = cx.height = 0;   // freigeben\n      const green = i => {\n        const r = px[i], g = px[i + 1], b = px[i + 2], mx = Math.max(r, g, b), ch = mx - Math.min(r, g, b);\n        return g >= r && g >= b && ch > 12 && ch / Math.max(1, mx) > 0.12;\n      };\n      const edges = Array.from({ length: W }, () => []);\n      for (let x = 0; x < W; x++) {\n        for (let y = 1; y < H - 3; y++) {\n          const i = (y * W + x) * 4;\n          if (px[i + 3] >= 128 && px[i - W * 4 + 3] < 128) {\n            let g = 0;\n            for (let k = 1; k <= 3; k++) if (green(i + k * W * 4)) g++;\n            if (g < 2) edges[x].push(y);\n          }\n        }\n      }\n      const runs = [], open = [];\n      for (let x = 0; x < W; x++) {\n        const next = [];\n        for (const y of edges[x]) {\n          let best = null;\n          for (const r of open) if (r.lx === x - 1 && Math.abs(r.ly - y) <= 1 && (!best || Math.abs(r.ly - y) < Math.abs(best.ly - y))) best = r;\n          if (best && !best.used) { best.used = true; best.pts.push([x, y]); best.lx = x; best.ly = y; next.push(best); }\n          else next.push({ pts: [[x, y]], lx: x, ly: y });\n        }\n        for (const r of open) if (!next.includes(r)) runs.push(r);\n        for (const r of next) r.used = false;\n        open.length = 0; open.push(...next);\n      }\n      runs.push(...open);\n      const minLen = Math.max(10, 14 * s), hRoof = 0.0061 * H * DEPTH;\n      for (const r of runs) {\n        const n = r.pts.length;\n        if (n < minLen) continue;\n        let sx = 0, sy = 0, sxx = 0, sxy = 0;\n        for (const [x, y] of r.pts) { sx += x; sy += y; sxx += x * x; sxy += x * y; }\n        const den = n * sxx - sx * sx, a = Math.abs(den) > 1e-9 ? (n * sxy - sx * sy) / den : 0, b = (sy - a * sx) / n;\n        let res = 0;\n        for (const [x, y] of r.pts) res += Math.abs(y - (a * x + b));\n        if (res / n > 0.9 || Math.abs(a) > 0.8) continue;   // ausgefranst oder zu steil: Baum, keine Dachkante\n        const x0 = r.pts[0][0], x1 = r.pts[n - 1][0] + 1;\n        pile(x0, a * x0 + b, x1, a * x1 + b, hRoof, Math.max(1, 1.5 * s));\n      }\n      return d;\n    }\n    function boxBlur(src, w, h, r) {\n      const tmp = new Float32Array(w * h), out = new Float32Array(w * h), inv = 1 / (2 * r + 1);\n      for (let y = 0; y < h; y++) {\n        const row = y * w;\n        let acc = 0;\n        for (let x = -r; x <= r; x++) acc += src[row + Math.min(w - 1, Math.max(0, x))];\n        for (let x = 0; x < w; x++) {\n          tmp[row + x] = acc * inv;\n          acc += src[row + Math.min(w - 1, x + r + 1)] - src[row + Math.max(0, x - r)];\n        }\n      }\n      for (let x = 0; x < w; x++) {\n        let acc = 0;\n        for (let y = -r; y <= r; y++) acc += tmp[Math.min(h - 1, Math.max(0, y)) * w + x];\n        for (let y = 0; y < h; y++) {\n          out[y * w + x] = acc * inv;\n          acc += tmp[Math.min(h - 1, y + r + 1) * w + x] - tmp[Math.max(0, y - r) * w + x];\n        }\n      }\n      return out;\n    }\n\n    // ---------- Gr\u00f6\u00dfen ----------\n    // Qualit\u00e4tsstufen: Obergrenze der Pixeldichte und Aufl\u00f6sung des Himmels (Anteil davon). Kommt das Ger\u00e4t nicht\n    // fl\u00fcssig mit, geht es eine Stufe runter (2 \u2192 1,5 \u2192 1). Fr\u00fcher Desktop h\u00f6chstens 1,5 und Himmel 50 %: Auf\n    // Retina-Bildschirmen wurden Wolken und Wetter dadurch mit gut einem Drittel der Aufl\u00f6sung gerechnet und wirkten weich.\n    // Die weichen Hilfsdaten des Geb\u00e4udes bleiben bei h\u00f6chstens DATA_DPR.\n    const TIERS = [{ dpr: 2, sky: 0.7 }, { dpr: 1.5, sky: 0.6 }, { dpr: 1, sky: 0.5 }];\n    const DATA_DPR = mobile ? 1.25 : 1.5;\n    let tier = 0, lowPower = false;   // lowPower: unterste Stufe erreicht\n    const DPR = () => Math.min(window.devicePixelRatio || 1, TIERS[tier].dpr);\n    let skyScale = TIERS[0].sky;\n    let SW = 0, SH = 0, BW = 0, BH = 0, WW = 0, WH = 0, cssW = 0, cssH = 0, wxW = 0, wxH = 0;\n    function resize() {\n      const d = DPR();\n      cssW = skyCv.offsetWidth; cssH = skyCv.offsetHeight;\n      SW = Math.max(2, Math.round(cssW * d * skyScale)); SH = Math.max(2, Math.round(cssH * d * skyScale));\n      if (skyCv.width !== SW || skyCv.height !== SH) { skyCv.width = SW; skyCv.height = SH; }\n      const bw = Math.round(cssW * d), bh = Math.round(cssH * d);\n      if (birdCv.width !== bw || birdCv.height !== bh) { birdCv.width = bw; birdCv.height = bh; }\n      BW = Math.max(2, Math.round(buildCv.offsetWidth * d)); BH = Math.max(2, Math.round(buildCv.offsetHeight * d));\n      if (buildCv.width !== BW || buildCv.height !== BH) { buildCv.width = BW; buildCv.height = BH; }\n      wxW = wxCv.offsetWidth; wxH = wxCv.offsetHeight;\n      skyOff.x = skyCv.offsetLeft; skyOff.y = skyCv.offsetTop;\n      WW = Math.max(2, Math.round(wxW * d)); WH = Math.max(2, Math.round(wxH * d));\n      if (wxCv.width !== WW || wxCv.height !== WH) { wxCv.width = WW; wxCv.height = WH; }\n      // L\u00e4dt Safari nach dem Drehen gerade ein anderes Bild aus dem srcset (img.complete ist dann false), schlug das\n      // Hochladen fehl und das Geb\u00e4ude verschwand: Das bisherige Bild bleibt stehen, das neue kommt mit seinem load\n      if (BW !== texW || BH !== texH) texReady = uploadBuilding(BW, BH) || texReady;\n    }\n\n    // ---------- Zustand ----------\n    const clock = createClock({ season: 1, hour: 18.3 });\n\n    // ---------- Karlshorst live ----------\n    // mode 'start': Der Hero beginnt mit der echten Uhrzeit, Jahreszeit, Sonne, Mondphase und dem echten Wetter in\n    // Karlshorst und geht nach release() in den Zeitraffer \u00fcber; das Echte blendet \u00fcber einige Zeitraffer-Stunden aus.\n    // mode 'live': bleibt echt (Uhr in Echtzeit, Wetter alle zehn Minuten neu). mode 'zeitraffer': wie fr\u00fcher (Sommer, 18:18).\n    // Wetter: Deutscher Wetterdienst \u00fcber Bright Sky (offene Daten, frei auch f\u00fcr gewerbliche Seiten, Quelle nennen).\n    // Open-Meteo w\u00e4re f\u00fcr gewerbliche Seiten kostenpflichtig.\n    let released = mode === 'zeitraffer', relT = 0, sinceRel = 0, liveTemp = null, nextSync = 0, liveDay = '';\n    const WX_URL = 'https://api.brightsky.dev/current_weather?lat=' + HOME.lat + '&lon=' + HOME.lon + '&tz=Europe%2FBerlin';\n    let wxAsked = 0;\n    function fetchWeather() {\n      if (!window.fetch) return;\n      wxAsked = Date.now();\n      // h\u00f6chstens 4 s warten, danach bleibt es beim neutralen Wetter (wxNone)\n      const ac = window.AbortController ? new AbortController() : null, to = ac && setTimeout(() => ac.abort(), 4000);\n      fetch(WX_URL, ac ? { signal: ac.signal } : undefined).then(r => (r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))).then(j => {\n        const x = j && j.weather, L = clock.live;\n        if (!x || !L) return;\n        const txt = (x.condition || '') + (x.icon || '');\n        const next = Object.assign(wxFromDWD(x, L.w), {\n          // Schneeregen deckt nur um den Gefrierpunkt wei\u00df zu (bei +3 \u00b0C bleibt der Boden gr\u00fcn)\n          snowCover: /snow/.test(txt) || (/sleet/.test(txt) && x.temperature != null && x.temperature <= 0.5) ? 1 : 0\n        });\n        L.wxFrom = liveWx(L); L.wxAt = performance.now();   // vom gerade Sichtbaren aus weich \u00fcberblenden\n        L.wx = next;\n        liveTemp = x.temperature;\n        lastLabel = ''; dirty = true;\n      }).catch(err => console.info('[KL sky] Live-Wetter nicht verf\u00fcgbar', err)).finally(() => clearTimeout(to));\n    }\n    // Echte Uhrzeit, Tag und Mond \u00fcbernehmen (einmal pro Sekunde reicht)\n    function syncLive(force) {\n      const L = clock.live;\n      if (!L || (!force && performance.now() < nextSync)) return;\n      nextSync = performance.now() + 1000;\n      // mit Zeitzonen-Versatz: am Tag der Zeitumstellung \u00e4ndern sich Sonnenauf- und -untergang um 3 Uhr um eine Stunde\n      const b = berlinNow(), key = b.y + '-' + b.m + '-' + b.d + '/' + b.off;\n      if (key !== liveDay) {\n        liveDay = key;\n        const sun = sunDay(b.y, b.m, b.d, b.off);\n        Object.assign(L, { w: seasonOf(b.y, b.m, b.d), rise: sun.rise, set: sun.set, peak: sun.peak });\n      }\n      L.phase = moonPhaseAt(Date.now());\n      clock.hour = b.h;\n    }\n    if (mode !== 'zeitraffer') {\n      clock.live = { mix: 1, w: [0, 1, 0, 0], rise: 6, set: 20, peak: 0.6, phase: 0.5, wx: null, wxNone: null, wxFrom: null, wxAt: 0 };\n      syncLive(true);\n      const w = clock.live.w;\n      // neutral: leicht bew\u00f6lkt, trocken, kaum Wind (bis echte Daten da sind oder falls sie ausbleiben)\n      clock.live.wxNone = Object.assign(wxFromDWD({ cloud_cover: 35, condition: 'dry', icon: 'partly-cloudy-day', visibility: 20000, wind_speed_10: 8 }, w), { snowCover: 0 });\n      clock.s0 = w.indexOf(Math.max(...w));   // danach geht der Zeitraffer mit der echten Jahreszeit weiter\n      clock.moon0 = clock.live.phase - (clock.hour / 24 - 0.75) * clock.moonStep;   // und mit der echten Mondphase\n      fetchWeather();\n      if (mode === 'live') setInterval(() => { if (!document.hidden) fetchWeather(); }, 10 * 60 * 1000);\n      // Seite lange im Hintergrund (Tab noch nicht angesehen): beim Zur\u00fcckkommen neues Wetter, solange es live ist\n      document.addEventListener('visibilitychange', () => {\n        if (!document.hidden && clock.live && (mode === 'live' || !released) && Date.now() - wxAsked > 10 * 60 * 1000) fetchWeather();\n      });\n    }\n\n    let env = environment(clock);\n    let playing = !reduced, active = true, time = 0, evolve = 0, flash = 0, nextFlash = 3, manualOn = false;\n    const drift = [0, 0];\n    const WIN = Array.from({ length: WINDOW_COUNT }, (_, i) => {\n      const k = hash(i + 61);\n      return {\n        thr: 0.12 + hash(i + 1) * 0.78,\n        off: 22.2 + hash(i + 11) * 3.8,\n        morning: hash(i + 21) < 0.42 ? 5.0 + hash(i + 31) * 2.4 : 99,\n        owl: hash(i + 41) < 0.08,\n        tv: hash(i + 51) < 0.07,\n        col: k < 0.62 ? [1.0, 0.76, 0.48] : k < 0.9 ? [1.0, 0.87, 0.7] : [0.84, 0.9, 1.0],\n        dim: 0.74 + hash(i + 81) * 0.3,   // jedes Zimmer etwas anders hell (Stehlampe, Deckenlicht \u2026)\n        lv: 0,\n        autoOn: false, man: null, manAuto: false   // man: per Fingertipp geschaltet (1 an, 0 aus)\n      };\n    });\n    const lampLv = LAMPS.map(() => 0), wallLv = WALL.map(() => 0);\n    const lampArr = new Float32Array(LAMPS.length * 4), wallArr = new Float32Array(WALL.length * 3);\n\n    function lights(dt, k) {\n      const dark = clamp01(sstep(0.1, -0.08, env.e) + env.wx.dark * env.day * 0.35);\n      const hour = clock.hour, H = hour < 12 ? hour + 24 : hour;\n      manualOn = false;\n      WIN.forEach((w, i) => {\n        let on;\n        if (w.owl || H < w.off) on = dark > w.thr;\n        else on = hour < 12 && hour >= w.morning && dark > 0.35;\n        w.autoOn = on;\n        // Per Fingertipp geschaltet: gilt, bis die Automatik von selbst umschalten w\u00fcrde (dann \u00fcbernehmen die Bewohner)\n        if (w.man != null) { if (on !== w.manAuto) w.man = null; else on = w.man === 1; }\n        if (w.man === 1) manualOn = true;\n        const target = on ? 1 : 0;\n        w.lv += (target - w.lv) * Math.min(1, (target > w.lv ? 0.3 : 0.1) * k);\n        // RGB = Farbe \u00d7 Helligkeit des Zimmers, A = Schaltzustand (0 aus \u2026 1 an)\n        let v = w.lv, col = w.col, bright = w.dim;\n        if (target === 1 && w.lv < 0.92 && w.man == null) v *= hash(Math.floor(time * 24) + i * 7) > 0.35 ? 1 : 0.25;   // Flackern beim Einschalten\n        if (w.tv) { const f = 0.5 + 0.5 * Math.sin(time * 7 + i) * Math.sin(time * 13.3 + i * 2); col = mix3([0.55, 0.7, 1.0], [0.9, 0.9, 1.0], f); bright *= 0.6 + 0.4 * f; }\n        winData[(i + 1) * 4] = Math.round(clamp01(col[0] * bright) * 255);\n        winData[(i + 1) * 4 + 1] = Math.round(clamp01(col[1] * bright) * 255);\n        winData[(i + 1) * 4 + 2] = Math.round(clamp01(col[2] * bright) * 255);\n        winData[(i + 1) * 4 + 3] = Math.round(clamp01(v) * 255);\n      });\n      LAMPS.forEach((l, i) => {\n        const target = dark > 0.28 + i * 0.035 ? 1 : 0;\n        lampLv[i] += (target - lampLv[i]) * Math.min(1, 0.12 * k);\n        let v = lampLv[i];\n        if (target && v < 0.9) v *= hash(Math.floor(time * 18) + i * 13) > 0.4 ? 1 : 0.15;\n        lampArr.set([l[0], l[1], l[2], v], i * 4);\n      });\n      WALL.forEach((p, i) => {\n        const target = dark > 0.4 + hash(i + 71) * 0.25 ? 1 : 0;\n        wallLv[i] += (target - wallLv[i]) * Math.min(1, 0.1 * k);\n        wallArr.set([p[0], p[1], wallLv[i]], i * 3);\n      });\n    }\n\n    // ---------- V\u00f6gel ----------\n    // Kleine 3D-Silhouetten statt Striche: K\u00f6rper, Kopf, Schwanz und zwei Fl\u00fcgel mit Arm und Hand, die beim\n    // Aufschlag einknicken. Gesehen von schr\u00e4g unten \u2013 je h\u00f6her am Himmel, desto steiler. Jede Art fliegt anders:\n    // Spatzen im Bogenflug, Mauersegler mit Sichelfl\u00fcgeln in schnellen Kurven, Tauben im lockeren Schwarm,\n    // Kr\u00e4hen mit gespreizten Handschwingen, G\u00e4nse in V-Formation, M\u00f6wen im Gleitflug mit abgeknickten Fl\u00fcgeln.\n    // Blickrichtung und Bewegung passen immer zusammen: Die V\u00f6gel fliegen quer \u00fcbers Bild, leicht zum Betrachter\n    // hin oder von ihm weg, mit sanften Kurven und Schr\u00e4glage \u2013 kein Kreisen auf der Stelle.\n    const WING = {   // Umriss eines Fl\u00fcgels: [Profil (vorn +), Spannweite 0 bis 1]\n      rund: [[0.3, 0], [0.36, 0.28], [0.32, 0.5], [0.18, 0.78], [0.02, 0.95], [-0.14, 1], [-0.3, 0.93], [-0.42, 0.75], [-0.45, 0.5], [-0.4, 0.25], [-0.34, 0]],\n      spitz: [[0.3, 0], [0.38, 0.3], [0.35, 0.48], [0.12, 0.8], [-0.1, 1], [-0.26, 0.86], [-0.4, 0.62], [-0.42, 0.35], [-0.34, 0]],\n      finger: [[0.3, 0], [0.36, 0.3], [0.33, 0.5], [0.22, 0.72], [0.14, 0.84], [0.08, 1], [0, 0.86], [-0.08, 0.99], [-0.15, 0.85], [-0.23, 0.96], [-0.29, 0.83], [-0.37, 0.9], [-0.42, 0.76], [-0.48, 0.55], [-0.44, 0.3], [-0.36, 0]],\n      sichel: [[0.25, 0], [0.35, 0.25], [0.3, 0.45], [0.06, 0.72], [-0.26, 0.93], [-0.46, 1], [-0.36, 0.88], [-0.28, 0.62], [-0.28, 0.3], [-0.25, 0]]\n    };\n    const TAIL = {   // Schwanz in der Draufsicht: [l\u00e4ngs, quer]\n      kurz: [[-0.4, 0.07], [-0.72, 0.1], [-0.76, 0], [-0.72, -0.1], [-0.4, -0.07]],\n      faecher: [[-0.4, 0.08], [-0.85, 0.2], [-0.95, 0.12], [-0.98, 0], [-0.95, -0.12], [-0.85, -0.2], [-0.4, -0.08]],\n      gabel: [[-0.4, 0.06], [-1.05, 0.2], [-0.78, 0.03], [-0.78, -0.03], [-1.05, -0.2], [-0.4, -0.06]],\n      rund: [[-0.4, 0.08], [-0.85, 0.16], [-0.93, 0.08], [-0.95, 0], [-0.93, -0.08], [-0.85, -0.16], [-0.4, -0.08]]\n    };\n    // Ma\u00dfe relativ zur K\u00f6rperl\u00e4nge \u00b7 hz Fl\u00fcgelschl\u00e4ge/s \u00b7 amp Schlagweite \u00b7 fold Einknicken beim Aufschlag\n    // glide Anteil Gleitflug \u00b7 dih/droop Haltung im Gleitflug (Arm / Hand) \u00b7 size K\u00f6rperl\u00e4nge in px (in der Bildmitte)\n    // L K\u00f6rperl\u00e4nge in m \u00b7 V Reisegeschwindigkeit in m/s \u00b7 GR Gleitzahl (Sinken im Gleitflug) \u00b7 turn gr\u00f6\u00dfte Wenderate\n    // in rad/s \u00b7 bank Schr\u00e4glage in Kurven \u00b7 path: Leitkurs des Schwarms \u00b7 ya/yw Kurven (Weite, Tempo)\n    // pa/pw Steigen und Sinken (m, Tempo) \u00b7 gap Abstand im Schwarm in m\n    const SPECIES = {\n      spatz: { girth: 0.38, head: 0.2, neck: 0, tail: 'kurz', wing: 'rund', span: 0.95, chord: 0.48, sweep: 0.08, hz: 10, amp: 0.95, fold: 0.6, glide: 0, hop: true, dih: 0.1, droop: 0, L: 0.15, V: 8.5, GR: 4, turn: 2.2, bank: 0.8, size: [6, 8.5], flock: [3, 7], tone: [0.22, 0.18, 0.15], path: { ya: 0.12, yw: 0.5, pa: 0.8, pw: 0.6, gap: 0.9 } },\n      segler: { girth: 0.3, head: 0.17, neck: 0, tail: 'gabel', wing: 'sichel', span: 1.45, chord: 0.32, sweep: 0.08, hz: 7, amp: 0.55, fold: 0.25, glide: 0.55, dih: 0.02, droop: -0.05, L: 0.17, V: 12, GR: 12, turn: 3.2, bank: 1, size: [6.5, 9.5], flock: [3, 8], tone: [0.07, 0.07, 0.09], path: { ya: 0.45, yw: 0.9, pa: 2.5, pw: 0.8, gap: 3 } },\n      taube: { girth: 0.42, head: 0.18, neck: 0, tail: 'faecher', wing: 'spitz', span: 1.12, chord: 0.46, sweep: 0.2, hz: 6, amp: 0.95, fold: 0.5, glide: 0.18, dih: 0.3, droop: -0.1, L: 0.32, V: 13, GR: 7, turn: 1.4, bank: 0.8, size: [8, 11], flock: [6, 14], tone: [0.34, 0.36, 0.4], path: { ya: 0.22, yw: 0.45, pa: 1.5, pw: 0.5, gap: 1.6 } },\n      kraehe: { girth: 0.38, head: 0.19, neck: 0, tail: 'rund', wing: 'finger', span: 1.25, chord: 0.52, sweep: 0.05, hz: 4.2, amp: 0.8, fold: 0.45, glide: 0.25, dih: 0.12, droop: -0.06, L: 0.46, V: 10.5, GR: 8, turn: 1.1, bank: 0.7, size: [10, 14], flock: [2, 5], tone: [0.05, 0.05, 0.06], path: { ya: 0.12, yw: 0.35, pa: 1, pw: 0.4, gap: 4 } },\n      gans: { girth: 0.36, head: 0.14, neck: 0.72, tail: 'kurz', wing: 'finger', span: 1.35, chord: 0.44, sweep: 0.1, hz: 3.1, amp: 0.7, fold: 0.35, glide: 0, dih: 0.05, droop: 0, L: 0.8, V: 15, GR: 9, turn: 0.4, bank: 0.5, size: [11, 15], flock: [5, 10], tone: [0.24, 0.22, 0.2], formation: true, path: { ya: 0.04, yw: 0.25, pa: 0.5, pw: 0.3, gap: 1.7 } },\n      moewe: { girth: 0.3, head: 0.17, neck: 0, tail: 'kurz', wing: 'spitz', span: 1.7, chord: 0.3, sweep: 0.28, hz: 3.4, amp: 0.62, fold: 0.7, glide: 0.65, dih: 0.24, droop: -0.5, L: 0.5, V: 9, GR: 14, turn: 0.8, bank: 1, size: [11, 15], flock: [1, 3], tone: [0.82, 0.84, 0.86], path: { ya: 0.3, yw: 0.3, pa: 2, pw: 0.35, gap: 8 } }\n    };\n    const flocks = [], nearFlocks = [];\n    let nextFlock = 1.2, nextNear = rnd(9, 16);\n\n    // Flug in einer echten Szene (Meter; Kamera im Ursprung, x nach rechts, y nach oben, z in die Tiefe), perspektivisch\n    // abgebildet: Wer auf die Kamera zufliegt, wird gr\u00f6\u00dfer und schneller, wer wegfliegt, kleiner und langsamer. Tempo,\n    // Fl\u00fcgelschlag und K\u00f6rpergr\u00f6\u00dfe passen zueinander (echte Reisegeschwindigkeiten, etwas gebremst: PACE). Vorher kamen\n    // die V\u00f6gel mit einem Zehntel ihres Tempos voran, w\u00e4hrend die Fl\u00fcgel echt schlugen, und blieben immer gleich gro\u00df \u2013\n    // das wirkte wie Treten auf der Stelle. Nicht zur\u00fcckbauen.\n    const TAU = Math.PI * 2, PACE = 0.7, GRAV = 9.81;\n    const angDiff = (a, b) => { let d = (a - b) % TAU; if (d > Math.PI) d -= TAU; if (d < -Math.PI) d += TAU; return d; };\n    // Kamera in Hero-Pixeln: Bildmitte, Horizont wie im Himmels-Shader, Brennweite\n    const cam = { cx: 0, yH: 0, f: 1 };\n    const skyOff = { x: 0, y: 0 }, noOff = { x: 0, y: 0 };   // Lage der Canvas im Hero (Himmel ragt \u00fcber den Rand)\n    const camera = () => { cam.cx = wxW / 2; cam.f = 0.9 * wxH; cam.yH = skyOff.y + env.HZ * cssH; };\n    // Punkt der Szene (m) -> Canvas-Pixel; k = Pixel pro Meter in dieser Tiefe\n    const project = (p, o) => { const k = cam.f / p[2]; return { x: cam.cx + p[0] * k - o.x, y: cam.yH - p[1] * k - o.y, k }; };\n\n    // Welche Art gerade unterwegs ist: nach Jahreszeit und Tageszeit (G\u00e4nse nur in der Ferne)\n    function pickSpecies(near) {\n      const w = env.w, dusk = env.day < 0.65;\n      const t = {\n        spatz: 0.28 * w[0] + 0.22 * w[1] + 0.12 * w[2] + 0.1 * w[3],\n        segler: (0.12 * w[0] + 0.45 * w[1]) * (dusk ? 1.8 : 1),\n        taube: 0.28 * w[0] + 0.22 * w[1] + 0.2 * w[2] + 0.25 * w[3],\n        kraehe: 0.06 * w[0] + 0.05 * w[1] + 0.26 * w[2] + 0.42 * w[3] * (dusk ? 1.8 : 1),\n        gans: near ? 0 : 0.1 * w[0] + 0.34 * w[2] + 0.05 * w[3],\n        moewe: 0.08 * w[0] + 0.06 * w[1] + 0.1 * w[2] + 0.24 * w[3]\n      };\n      let sum = 0;\n      for (const k in t) { if (env.day < (k === 'segler' || k === 'kraehe' ? 0.12 : 0.3)) t[k] = 0; sum += t[k]; }\n      if (sum <= 0) return null;\n      let r = Math.random() * sum;\n      for (const k in t) { r -= t[k]; if (r <= 0) return k; }\n      return 'taube';\n    }\n\n    // Neuer Schwarm: Tiefe aus der gew\u00fcnschten Gr\u00f6\u00dfe in der Bildmitte, H\u00f6he aus der Bildzeile, Kurs quer \u00fcbers Bild und\n    // leicht auf die Kamera zu (yaw < 0) oder von ihr weg (yaw > 0). Start au\u00dferhalb des Bildes, so dass der Schwarm\n    // ungef\u00e4hr durch die Mitte fliegt. at (0 \u2026 1) setzt ihn zum Testen direkt an diese Stelle.\n    function spawnFlock(kind, near, at, dir) {\n      const sp = SPECIES[kind], P = sp.path;\n      camera();\n      dir = dir || (Math.random() < 0.5 ? 1 : -1);\n      const o = near ? noOff : skyOff, W = near ? wxW : cssW, H = near ? wxH : cssH;\n      const n = near ? (Math.random() < 0.65 ? 1 : 2) : Math.round(rnd(sp.flock[0], sp.flock[1]));\n      const px = rnd(sp.size[0], sp.size[1]) * (near ? rnd(2.2, 3.1) : 1) * (mobile ? 0.85 : 1);\n      const Z = sp.L * cam.f / px;\n      // Ferne Schw\u00e4rme unterhalb der Navigation; nahe V\u00f6gel oben \u00fcber den D\u00e4chern oder unten vor den Fassaden\n      const row = near ? (Math.random() < 0.6 ? rnd(0.08, 0.28) : rnd(0.54, 0.66)) * H : rnd(sp.formation ? 0.24 : 0.13, 0.42) * H;\n      const Y = (cam.yH - (row + o.y)) * Z / cam.f;\n      // Nahe V\u00f6gel fliegen meist leicht weg (auf die Kamera zu stiegen sie sofort oben aus dem Bild); die V-Formation\n      // quer zum Blick, sonst st\u00fcnde ein Arm als senkrechte Reihe im Bild\n      let yaw = Math.random() < (near ? 0.2 : 0.45) ? -rnd(0.06, near ? 0.15 : 0.35) : rnd(0.08, near ? 0.45 : 0.5);\n      if (sp.formation) yaw *= 0.3;\n      const th = dir > 0 ? yaw : Math.PI - yaw, c = Math.cos(th), s = Math.sin(th);\n      let X, Zs = Z;\n      if (at != null) X = (at * W + o.x - cam.cx) * Z / cam.f;\n      else {\n        X = rnd(-0.12, 0.12) * W * Z / cam.f;\n        const m = px * 6 + 40;\n        for (let i = 0; i < 800; i++) {\n          const u = cam.cx + X * cam.f / Zs - o.x;\n          if (u < -m || u > W + m || Zs < 3) break;\n          X -= c * 0.5; Zs -= s * 0.5;\n        }\n      }\n      const V = sp.V * PACE;\n      const fl = { sp, near, t: 0, alt: Y, th0: th, p0: rnd(0, TAU), p1: rnd(0, TAU), seen: false, gone: 0, lead: { p: [X, Y, Zs], th, vy: 0 }, birds: [] };\n      // Pl\u00e4tze im Schwarm (m: l\u00e4ngs, H\u00f6he, seitlich): G\u00e4nse in V-Formation, sonst locker und gleichm\u00e4\u00dfig verteilt\n      const slots = [];\n      if (sp.formation) {\n        for (let i = 0; i < n; i++) { const r = Math.ceil(i / 2); slots.push([-r * P.gap * 1.1, rnd(-0.1, 0.1), (i % 2 ? 1 : -1) * r * P.gap]); }\n      } else {\n        const R = P.gap * Math.sqrt(n) * 0.9;\n        for (let i = 0; i < n; i++) {\n          let best = null;\n          for (let k = 0; k < 12; k++) {\n            const q = [rnd(-R, R), rnd(-R, R) * 0.35, rnd(-R, R)];\n            const d = slots.reduce((mn, o2) => Math.min(mn, Math.hypot(q[0] - o2[0], q[1] - o2[1], q[2] - o2[2])), 1e9);\n            if (!best || d > best.d) best = { q, d };\n          }\n          slots.push(best.q);\n        }\n      }\n      for (const off of slots) {\n        fl.birds.push({\n          p: [X + c * off[0] - s * off[2], Y + off[1], Zs + s * off[0] + c * off[2]], off, th, V, vy: 0, roll: 0, gam: 0,\n          L: sp.L * rnd(0.92, 1.08), n1: rnd(0, TAU), n2: rnd(0, TAU), size: px,\n          ph: rnd(0, TAU), hz: sp.hz * rnd(0.9, 1.1), mode: 'flap', modeT: rnd(0.2, 1.4), flap: 1, tuck: 0\n        });\n      }\n      (near ? nearFlocks : flocks).push(fl);\n      return fl;\n    }\n\n    // Schwarm um dt weiterbewegen: Der Leitkurs macht sanfte Kurven und steigt und sinkt leicht; jeder Vogel steuert\n    // seinen Platz an, der langsam wandert (lockerer Schwarm, der sich in Kurven dehnt), und h\u00e4lt Abstand zu den anderen.\n    function stepFlock(fl, dt) {\n      const sp = fl.sp, P = sp.path, Ld = fl.lead;\n      const t = (fl.t += dt), V = sp.V * PACE;\n      const thD = fl.th0 + P.ya * (Math.sin(P.yw * t + fl.p1) + 0.4 * Math.sin(P.yw * 2.3 * t + fl.p0));\n      Ld.th += Math.max(-sp.turn, Math.min(sp.turn, angDiff(thD, Ld.th) * 1.2)) * dt;\n      const yT = fl.alt + P.pa * Math.sin(P.pw * t + fl.p0);\n      Ld.vy += (Math.max(-1.5, Math.min(1.5, (yT - Ld.p[1]) * 0.7)) - Ld.vy) * Math.min(1, dt * 2);\n      const c = Math.cos(Ld.th), s = Math.sin(Ld.th);\n      Ld.p[0] += c * V * dt; Ld.p[2] += s * V * dt; Ld.p[1] += Ld.vy * dt;\n      const wob = sp.formation ? 0.12 : 0.6 * P.gap;\n      for (const b of fl.birds) {\n        const ox = b.off[0] + wob * Math.sin(t * 0.31 + b.n1), oz = b.off[2] + wob * Math.sin(t * 0.23 + b.n2);\n        const oy = b.off[1] + wob * 0.4 * Math.sin(t * 0.37 + b.n1 * 1.7);\n        const tx = Ld.p[0] + c * ox - s * oz, tz = Ld.p[2] + s * ox + c * oz;\n        stepBird(sp, b, dt, c * V + (tx - b.p[0]) * 0.8, s * V + (tz - b.p[2]) * 0.8, Ld.p[1] + oy, V);\n      }\n      const B = fl.birds, dmin = sp.L * sp.span * 2 + 0.3;\n      for (let i = 0; i < B.length; i++) {\n        for (let j = i + 1; j < B.length; j++) {\n          const a = B[i].p, q = B[j].p, dx = a[0] - q[0], dy = a[1] - q[1], dz = a[2] - q[2], d = Math.hypot(dx, dy, dz);\n          if (d >= dmin || d < 1e-4) continue;\n          const k = (dmin - d) / d * 0.5 * Math.min(1, dt * 6);\n          a[0] += dx * k; a[1] += dy * k; a[2] += dz * k; q[0] -= dx * k; q[1] -= dy * k; q[2] -= dz * k;\n        }\n      }\n    }\n\n    // Ein Vogel: Fl\u00fcgelschlag, Gleiten oder (Spatz) Bogenflug mit kurz angelegten Fl\u00fcgeln; Kurs mit begrenzter\n    // Wenderate und passender Schr\u00e4glage; im Gleitflug langsamer und sinkend (Gleitzahl), im Schlag zur\u00fcck auf die H\u00f6he\n    function stepBird(sp, b, dt, vx, vz, ty, V) {\n      b.modeT -= dt;\n      const low = ty - b.p[1] > 1.2;\n      if (b.modeT <= 0 || (b.mode === 'glide' && low)) {\n        if (b.mode === 'flap') {\n          if (sp.hop) { b.mode = 'tuck'; b.modeT = rnd(0.12, 0.22); }\n          else if (!low && Math.random() < sp.glide) { b.mode = 'glide'; b.modeT = rnd(0.8, 2.6); }\n          else b.modeT = rnd(0.5, 1.4);\n        } else { b.mode = 'flap'; b.modeT = sp.hop ? rnd(0.24, 0.42) : rnd(0.6, 1.8) * (1 - sp.glide * 0.5); }\n      }\n      const flapping = b.mode === 'flap', gliding = b.mode === 'glide';\n      if (flapping || b.flap > 0.02) b.ph += TAU * b.hz * dt;\n      b.flap += ((flapping ? 1 : 0) - b.flap) * Math.min(1, dt * 7);\n      b.tuck += ((b.mode === 'tuck' ? 1 : 0) - b.tuck) * Math.min(1, dt * 16);\n      const w = Math.max(-sp.turn * 1.4, Math.min(sp.turn * 1.4, angDiff(Math.atan2(vz, vx), b.th) * 2.5));\n      b.th += w * dt;\n      const Vd = Math.max(V * 0.7, Math.min(V * 1.35, Math.hypot(vx, vz)));\n      b.V += ((gliding ? Math.min(Vd, V * 0.92) : Vd) - b.V) * Math.min(1, dt * (gliding ? 0.4 : 1.2));\n      let vyT = Math.max(-1.6, Math.min(1.6, (ty - b.p[1]) * 0.9));\n      if (gliding) vyT = Math.min(vyT, 0) - b.V / sp.GR;\n      if (sp.hop) vyT += b.mode === 'tuck' ? -1.7 : 1.0;\n      b.vy += (vyT - b.vy) * Math.min(1, dt * 3);\n      b.roll += (Math.max(-0.85, Math.min(0.85, -Math.atan(b.V * w / GRAV) * sp.bank)) - b.roll) * Math.min(1, dt * 4);\n      b.gam = Math.atan2(b.vy, b.V) * 0.7;\n      b.p[0] += Math.cos(b.th) * b.V * dt; b.p[2] += Math.sin(b.th) * b.V * dt; b.p[1] += b.vy * dt;\n    }\n\n    // Achsen des Vogels in der Szene: vorw\u00e4rts (Kurs und Steigwinkel), rechts, oben; gerollt um die L\u00e4ngsachse\n    function axesOf(th, gam, roll) {\n      const cg = Math.cos(gam), F = [Math.cos(th) * cg, Math.sin(gam), Math.sin(th) * cg];\n      const rn = Math.hypot(F[0], F[2]) || 1, R = [-F[2] / rn, 0, F[0] / rn];\n      const U = [-R[2] * F[1], R[2] * F[0] - R[0] * F[2], R[0] * F[1]];   // oben = rechts \u00d7 vorw\u00e4rts\n      const cr = Math.cos(roll), sr = Math.sin(roll);\n      return { F, R: [R[0] * cr + U[0] * sr, U[1] * sr, R[2] * cr + U[2] * sr], U: [U[0] * cr - R[0] * sr, U[1] * cr, U[2] * cr - R[2] * sr] };\n    }\n    // Abbildung der Vogel-Achsen auf den Bildschirm an der Stelle p (Ableitung der Perspektive). bias: Blick etwas\n    // steiler von unten, damit die Fl\u00fcgelform lesbar bleibt (sonst in Augenh\u00f6he nur Striche)\n    function frameAt(ax, p, bias) {\n      const kx = p[0] / p[2], ky = p[1] / p[2] + bias, F = ax.F, U = ax.U, R = ax.R;\n      return { ax: F[0] - kx * F[2], ay: U[0] - kx * U[2], az: R[0] - kx * R[2], bx: F[1] - ky * F[2], by: U[1] - ky * U[2], bz: R[1] - ky * R[2] };\n    }\n    // Lage f\u00fcr den Katalog (birdSheet): Flugrichtung, Rollen, Blick von leicht unten (elev), ohne Perspektive\n    function frameOf(fx, fy, fz, roll, elev) {\n      const n = Math.hypot(fx, fy, fz) || 1;\n      fx /= n; fy /= n; fz /= n;\n      let rx = -fz, rz = fx;\n      const rn = Math.hypot(rx, rz) || 1;\n      rx /= rn; rz /= rn;\n      const ux = -rz * fy, uy = rz * fx - rx * fz, uz = rx * fy;\n      const cr = Math.cos(roll), sr = Math.sin(roll);\n      const Rx = rx * cr + ux * sr, Ry = uy * sr, Rz = rz * cr + uz * sr;\n      const Ux = ux * cr - rx * sr, Uy = uy * cr, Uz = uz * cr - rz * sr;\n      const ce = Math.cos(elev), se = Math.sin(elev);\n      return { ax: fx, ay: Ux, az: Rx, bx: fy * ce - fz * se, by: Uy * ce - Uz * se, bz: Ry * ce - Rz * se };\n    }\n\n    // Fl\u00fcgelhaltung: Abschlag mit gestreckter Hand, Aufschlag mit eingeknickter Hand, Gleiten, angelegt (Bogenflug).\n    // Der Abschlag dauert l\u00e4nger als der Aufschlag (58 zu 42 %), wie bei echten V\u00f6geln.\n    const warp = ph => { const p = (((ph % TAU) + TAU) % TAU) / TAU; return (p < 0.58 ? p / 0.58 * 0.5 : 0.5 + (p - 0.58) / 0.42 * 0.5) * TAU; };\n    function poseOf(sp, b, ph) {\n      const w = warp(ph), c = Math.cos(w), s = Math.sin(w), up = Math.max(0, -s);\n      let t1 = sp.amp * (0.28 + 0.72 * c);   // Schlag etwas nach oben verschoben: weit hoch, nur m\u00e4\u00dfig unter den K\u00f6rper\n      let t2 = t1 - sp.fold * up * 0.9 + sp.amp * 0.12 * Math.max(0, s);\n      let hand = 1 - sp.fold * up * 0.45, back = sp.fold * up * 0.35;\n      t1 = lerp(sp.dih, t1, b.flap); t2 = lerp(sp.dih + sp.droop, t2, b.flap); hand = lerp(1, hand, b.flap); back *= b.flap;\n      t1 = lerp(t1, -0.2, b.tuck); t2 = lerp(t2, -0.35, b.tuck);\n      return { t1, t2, hand, back, len: 1 - 0.72 * b.tuck };\n    }\n\n    function drawBird(ctx, sp, b, X, Y, fr, color) {\n      const S = b.size;\n      const P = (x, y, z) => [X + S * (fr.ax * x + fr.ay * y + fr.az * z), Y - S * (fr.bx * x + fr.by * y + fr.bz * z)];\n      const poly = pts => {\n        ctx.beginPath();\n        pts.forEach((p, i) => (i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])));\n        ctx.closePath(); ctx.fill(); ctx.stroke();\n      };\n      const wing = (pose, side) => {\n        const s1 = Math.sin(pose.t1), c1 = Math.cos(pose.t1), s2 = Math.sin(pose.t2), c2 = Math.cos(pose.t2), L = sp.span * pose.len;\n        poly(WING[sp.wing].map(([c, s]) => {\n          const arm = Math.min(s, 0.42), hand = Math.max(0, s - 0.42) * pose.hand;\n          const x = 0.06 + c * sp.chord - sp.sweep * s * s - pose.back * Math.max(0, s - 0.42);\n          return P(x, (arm * s1 + hand * s2) * L, side * (sp.girth * 0.3 + (arm * c1 + hand * c2) * L));\n        }));\n      };\n      ctx.fillStyle = ctx.strokeStyle = color;\n      // schneller Fl\u00fcgelschlag: leichte Bewegungsunsch\u00e4rfe\n      if (b.hz > 7 && b.flap > 0.5 && b.tuck < 0.5) {\n        ctx.globalAlpha = 0.28;\n        const gp = poseOf(sp, b, b.ph - 0.9);\n        wing(gp, 1); wing(gp, -1);\n        ctx.globalAlpha = 1;\n      }\n      const pose = poseOf(sp, b, b.ph);\n      wing(pose, 1); wing(pose, -1);\n      poly(TAIL[sp.tail].map(([x, z]) => P(x, 0, z * (1 + sp.girth * 0.3))));\n      // K\u00f6rper als Ellipse entlang der Flugrichtung\n      const p0 = P(-0.46, 0, 0), p1 = P(0.44, 0, 0), gir = sp.girth * S * 0.5;\n      const len = Math.hypot(p1[0] - p0[0], p1[1] - p0[1]) / 2;\n      ctx.beginPath();\n      ctx.ellipse((p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2, Math.max(len, gir) + gir * 0.2, gir, Math.atan2(p1[1] - p0[1], p1[0] - p0[0]), 0, 6.2832);\n      ctx.fill();\n      // Hals (Gans), Kopf und \u2013 wenn gro\u00df genug \u2013 Schnabel\n      const hx = 0.5 + sp.neck, hp = P(hx, 0.03, 0);\n      if (sp.neck) {\n        const n0 = P(0.3, 0, 0);\n        ctx.lineWidth = gir * 0.9;\n        ctx.beginPath(); ctx.moveTo(n0[0], n0[1]); ctx.lineTo(hp[0], hp[1]); ctx.stroke();\n        ctx.lineWidth = 0.7;\n      }\n      ctx.beginPath(); ctx.arc(hp[0], hp[1], sp.head * S * 0.5, 0, 6.2832); ctx.fill();\n      if (S > 12) { const bx = hx + sp.head * 0.4; poly([P(bx, 0.05, 0.03), P(bx + 0.14, 0.02, 0), P(bx, -0.01, -0.03)]); }\n    }\n\n    function birdColor(sp, y, H, near, size) {\n      const light = 0.35 + 0.65 * env.day * (1 - env.over * 0.4);\n      let c = sp.tone.map(v => v * light);\n      if (!near) {   // weiter weg: Farbe geht in den Himmel \u00fcber\n        const sky = mix3(env.zen, env.hor, Math.pow(clamp01(y / (H * env.HZ)), 1.45));\n        c = mix3(c, sky, 0.14 + 0.22 * (1 - clamp01((size / sp.size[1] - 0.7) / 0.6)));\n      }\n      return `rgb(${c.map(v => Math.round(clamp01(v) * 255)).join(',')})`;\n    }\n\n    // Schw\u00e4rme bewegen und zeichnen (o: Lage der Canvas im Hero, W \u00d7 H ihre Gr\u00f6\u00dfe). Ein Schwarm verschwindet, sobald\n    // er das Bild verlassen hat.\n    function drawFlocks(ctx, list, dt, o, W, H) {\n      ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineWidth = 0.7;\n      for (let f = list.length - 1; f >= 0; f--) {\n        const fl = list[f], sp = fl.sp;\n        if (dt > 0) stepFlock(fl, dt);\n        let vis = false;\n        for (const b of fl.birds) {\n          if (b.p[2] < 1.5) continue;\n          const q = project(b.p, o), S = b.L * q.k;\n          if (S < 0.8 || q.x < -S * 3 || q.x > W + S * 3 || q.y < -S * 3 || q.y > H + S * 3) continue;\n          vis = true;\n          b.size = S;\n          const fr = frameAt(axesOf(b.th, b.gam, b.roll), b.p, fl.near ? 0.12 : 0.05 + sp.glide * 0.12);\n          const bob = -Math.sin(warp(b.ph)) * 0.05 * S * b.flap;   // im Abschlag hebt sich der K\u00f6rper leicht\n          drawBird(ctx, sp, b, q.x, q.y + bob, fr, birdColor(sp, q.y, H, fl.near, S));\n        }\n        if (vis) { fl.seen = true; fl.gone = 0; } else fl.gone += dt;\n        if ((fl.seen && fl.gone > 0.6) || fl.t > 60 || (!fl.seen && fl.t > 15)) list.splice(f, 1);\n      }\n    }\n\n    function drawBirds(dt) {\n      const d = birdCv.width / Math.max(1, cssW);\n      b2.setTransform(1, 0, 0, 1, 0, 0);\n      b2.clearRect(0, 0, birdCv.width, birdCv.height);\n      camera();\n      const ok = env.wx.rain < 0.25 && env.wx.snow < 0.35 && env.wx.fog < 0.5;\n      nextFlock -= dt; nextNear -= dt;\n      if (autoBirds && ok && nextFlock <= 0 && flocks.length < 3) { const k = pickSpecies(false); if (k) spawnFlock(k, false); nextFlock = rnd(3, 9); }\n      if (autoBirds && ok && nextNear <= 0 && !nearFlocks.length) { const k = pickSpecies(true); if (k) spawnFlock(k, true); nextNear = rnd(18, 32); }\n      if (!flocks.length) return;\n      b2.setTransform(d, 0, 0, d, 0, 0);\n      drawFlocks(b2, flocks, dt, skyOff, cssW, cssH);\n    }\n\n    // ---------- Regen, Schnee, Laub, Bl\u00fcten ----------\n    const leafPath = (() => { const p = document.querySelector('#s-leaf path'); return p ? new Path2D(p.getAttribute('d')) : null; })();\n    const drops = [], flakes = [], leaves = [], petals = [];\n    const LEAF_COLS = ['#E0741F', '#C1461A', '#E8A628', '#B5301B', '#D98A2B'];\n    // Teilchen-Anzahl an das Wetter anpassen: neue blenden ein, \u00fcberz\u00e4hlige blenden aus (kein Aufploppen)\n    function settle(arr, target, dt, make) {\n      let alive = 0;\n      for (const p of arr) if (!p.out) alive++;\n      for (let i = 0; i < arr.length && alive > target; i++) if (!arr[i].out) { arr[i].out = true; alive--; }\n      while (alive < target) { const p = make(); p.a = 0; arr.push(p); alive++; }\n      for (let i = arr.length - 1; i >= 0; i--) {\n        const p = arr[i];\n        if (p.out) { p.a -= dt * 1.4; if (p.a <= 0) arr.splice(i, 1); }\n        else if (p.a < 1) p.a = Math.min(1, p.a + dt * 1.6);\n      }\n    }\n    function drawWeather(dt) {\n      const d = wxCv.width / Math.max(1, wxW);\n      w2.setTransform(1, 0, 0, 1, 0, 0);\n      w2.clearRect(0, 0, wxCv.width, wxCv.height);\n      w2.setTransform(d, 0, 0, d, 0, 0);\n      const x = env.wx, wind = x.wind * (mobile ? 0.8 : 1);\n      const area = (wxW * wxH) / (1440 * 900);\n      const less = mobile ? 0.6 : lowPower ? 0.7 : 1;\n\n      settle(drops, Math.round(x.rain * 420 * area * less), dt, () => ({ x: rnd(-0.1, 1.1) * wxW, y: rnd(-wxH, wxH), z: rnd(0.35, 1), l: rnd(14, 26) }));\n      w2.lineCap = 'round';\n      const rainRGB = env.night > 0.5 ? '170,185,215' : '215,226,240';\n      for (const p of drops) {\n        const vy = 1300 * p.z, vx = -wind * 260 * p.z;\n        p.x += vx * dt; p.y += vy * dt;\n        if (p.y > wxH + 30) { p.y = rnd(-80, -10); p.x = rnd(-0.1, 1.1) * wxW; }\n        w2.strokeStyle = `rgba(${rainRGB},${(0.18 + 0.32 * p.z) * p.a})`;\n        w2.lineWidth = 0.6 + p.z * 0.9;\n        w2.beginPath();\n        w2.moveTo(p.x, p.y);\n        w2.lineTo(p.x - vx * 0.018, p.y - p.l * p.z * 1.6);\n        w2.stroke();\n      }\n\n      const dc = dt * CALM;   // Schnee, Laub und Bl\u00fcten ruhiger, Regen bleibt echt\n      settle(flakes, Math.round(x.snow * 300 * area * less), dc, () => ({ x: rnd(-0.05, 1.05) * wxW, y: rnd(-wxH * 0.2, wxH), z: rnd(0.3, 1), ph: rnd(0, 6.28) }));\n      w2.fillStyle = '#fff';\n      for (const p of flakes) {\n        p.ph += dc * 1.4;\n        p.x += (-wind * 60 + Math.sin(p.ph) * 22) * p.z * dc;\n        p.y += (40 + 85 * p.z) * dc;\n        if (p.y > wxH + 10) { p.y = rnd(-40, -6); p.x = rnd(-0.05, 1.05) * wxW; }\n        w2.globalAlpha = (0.35 + 0.6 * p.z) * p.a;\n        w2.beginPath();\n        w2.arc(p.x, p.y, 0.8 + p.z * 2.4, 0, 6.2832);\n        w2.fill();\n      }\n      w2.globalAlpha = 1;\n\n      if (leafPath) {\n        settle(leaves, Math.round(x.leaves * env.day * 14), dc, () => ({ x: rnd(0, wxW), y: rnd(-wxH * 0.2, wxH * 0.7), s: rnd(14, 28), r: rnd(0, 6.28), vr: rnd(-2.4, 2.4), ph: rnd(0, 6.28), c: LEAF_COLS[Math.floor(Math.random() * LEAF_COLS.length)] }));\n        for (const p of leaves) {\n          p.ph += dc * 2;\n          p.x += (-wind * 90 + Math.sin(p.ph) * 55) * dc;\n          p.y += (55 + Math.cos(p.ph * 0.7) * 25) * dc;\n          p.r += p.vr * dc;\n          if (p.y > wxH + 40 || p.x < -80 || p.x > wxW + 80) { p.y = rnd(-80, -30); p.x = rnd(0.1, 1.2) * wxW; }\n          const sc = p.s / 124;\n          w2.setTransform(d * sc * Math.cos(p.r), d * sc * Math.sin(p.r), -d * sc * Math.sin(p.r) * Math.cos(p.ph), d * sc * Math.cos(p.r) * Math.cos(p.ph), p.x * d, p.y * d);\n          w2.translate(-62, -57);\n          w2.fillStyle = p.c;\n          w2.globalAlpha = 0.9 * p.a;\n          w2.fill(leafPath);\n        }\n        w2.globalAlpha = 1;\n        w2.setTransform(d, 0, 0, d, 0, 0);\n      }\n\n      settle(petals, Math.round(x.petals * env.day * 18), dc, () => ({ x: rnd(0, wxW), y: rnd(-wxH * 0.1, wxH), s: rnd(3, 6), r: rnd(0, 6.28), ph: rnd(0, 6.28), c: Math.random() < 0.5 ? '#F7C6D6' : '#FFF1F4' }));\n      for (const p of petals) {\n        p.ph += dc * 2.2;\n        p.x += (-wind * 70 + Math.sin(p.ph) * 40) * dc;\n        p.y += (32 + Math.cos(p.ph) * 18) * dc;\n        p.r += dc * 2;\n        if (p.y > wxH + 20 || p.x < -40 || p.x > wxW + 40) { p.y = rnd(-40, -10); p.x = rnd(0, 1.1) * wxW; }\n        w2.save();\n        w2.globalAlpha = p.a;\n        w2.translate(p.x, p.y);\n        w2.rotate(p.r);\n        w2.scale(1, Math.abs(Math.cos(p.ph)) * 0.8 + 0.2);\n        w2.fillStyle = p.c;\n        w2.beginPath();\n        w2.ellipse(0, 0, p.s, p.s * 0.62, 0, 0, 6.2832);\n        w2.fill();\n        w2.restore();\n      }\n\n      drawFlies(dt, d, x);\n\n      // gelegentlich ein Vogel nah vor den H\u00e4usern (gr\u00f6\u00dfer, mit allen Details)\n      if (nearFlocks.length) { w2.setTransform(d, 0, 0, d, 0, 0); drawFlocks(w2, nearFlocks, dt, noOff, wxW, wxH); }\n    }\n\n    // ---------- Gl\u00fchw\u00fcrmchen (Sommern\u00e4chte) ----------\n    // Die heimischen Johannisw\u00fcrmchen leuchten beim Fliegen ruhig und gleichm\u00e4\u00dfig (sie blinken nicht wie die\n    // amerikanischen) und schweben langsam \u00fcber Hecken und Wiesen; ein paar sitzen leuchtend im Gras. Geboren werden sie\n    // an echten Pflanzenstellen des Renderings (flySpots). Nur im Sommer, nachts, trocken und bei wenig Wind.\n    const flies = [];\n    let glow = null;\n    function glowSprite() {\n      if (glow) return glow;\n      glow = document.createElement('canvas');\n      glow.width = glow.height = 64;\n      const g = glow.getContext('2d'), gr = g.createRadialGradient(32, 32, 0, 32, 32, 32);\n      gr.addColorStop(0, 'rgba(252,255,220,1)');\n      gr.addColorStop(0.1, 'rgba(228,255,150,0.95)');\n      gr.addColorStop(0.3, 'rgba(196,242,96,0.38)');\n      gr.addColorStop(0.6, 'rgba(176,232,76,0.1)');\n      gr.addColorStop(1, 'rgba(170,228,70,0)');\n      g.fillStyle = gr;\n      g.fillRect(0, 0, 64, 64);\n      return glow;\n    }\n    function makeFly() {\n      const s = flySpots[Math.floor(Math.random() * flySpots.length)];\n      const b = buildCv.getBoundingClientRect(), r = wxCv.getBoundingClientRect();\n      const kx = wxW / Math.max(1, r.width), ky = wxH / Math.max(1, r.height);\n      const hx = (b.left + s[0] * b.width - r.left) * kx, hy = (b.top + s[1] * b.height - r.top) * ky;\n      const sit = Math.random() < 0.2;\n      return { hx, hy: hy - (sit ? 0 : rnd(6, 26)), sit, t: rnd(0, 60), r: rnd(8, 30), w1: rnd(0.14, 0.32), w2: rnd(0.2, 0.45), w3: rnd(0.12, 0.3),\n        a1: rnd(0, 6.28), a2: rnd(0, 6.28), a3: rnd(0, 6.28), gp: rnd(0, 6.28), gs: rnd(0.35, 0.9), vx: rnd(-4, 4), size: sit ? rnd(6, 8) : rnd(9, 14), x: hx, y: hy };\n    }\n    function drawFlies(dt, d, x) {\n      const want = flySpots.length ? env.w[1] * sstep(0.35, 0.85, env.night) * (1 - sstep(0.08, 0.35, x.rain)) * (1 - sstep(0.55, 0.9, x.wind)) : 0;\n      settle(flies, Math.round(want * (mobile ? 18 : 34)), dt * 0.35, makeFly);   // langsam auf- und abblenden\n      if (!flies.length) return;\n      const spr = glowSprite();\n      w2.setTransform(d, 0, 0, d, 0, 0);\n      w2.globalCompositeOperation = 'lighter';\n      for (const f of flies) {\n        f.t += dt;\n        if (!f.sit) {\n          f.hx += f.vx * dt;\n          f.x = f.hx + f.r * (0.8 * Math.sin(f.t * f.w1 + f.a1) + 0.35 * Math.sin(f.t * f.w2 + f.a2));\n          f.y = f.hy + f.r * 0.45 * Math.sin(f.t * f.w3 + f.a3);\n        }\n        // ruhiges Glimmen, das beim Wegdrehen schw\u00e4cher wird\n        const g = f.sit ? 0.8 + 0.12 * Math.sin(f.t * 0.6 + f.gp) : 0.45 + 0.55 * Math.max(0, Math.sin(f.t * f.gs + f.gp)) ** 0.7;\n        w2.globalAlpha = f.a * g;\n        const R = f.size;\n        w2.drawImage(spr, f.x - R, f.y - R, R * 2, R * 2);\n      }\n      w2.globalCompositeOperation = 'source-over';\n      w2.globalAlpha = 1;\n    }\n\n    // ---------- Rendern ----------\n    function renderSky() {\n      const gl = S.gl, u = S.u, E = env;\n      gl.viewport(0, 0, SW, SH);\n      gl.uniform2f(u('uRes'), SW, SH);\n      gl.uniform1f(u('uTime'), time);\n      gl.uniform1f(u('uHz'), E.HZ);\n      gl.uniform2f(u('uSun'), E.sunX, E.sunY);\n      gl.uniform2f(u('uMoon'), E.moonX, E.moonY);\n      gl.uniform2f(u('uDrift'), drift[0], drift[1]);\n      gl.uniform1f(u('uEvolve'), evolve);\n      gl.uniform1f(u('uCover'), E.wx.cover);\n      gl.uniform1f(u('uDark'), E.wx.dark);\n      gl.uniform1f(u('uFog'), E.wx.fog);\n      gl.uniform1f(u('uStars'), E.stars);\n      gl.uniform1f(u('uBow'), E.wx.bow * E.day * sstep(0.05, 0.2, E.e));\n      gl.uniform1f(u('uFlash'), flash);\n      gl.uniform1f(u('uSunVis'), E.sunVis);\n      gl.uniform1f(u('uMoonVis'), E.moonVis);\n      gl.uniform1f(u('uNight'), E.night);\n      gl.uniform1f(u('uGlow'), E.glow);\n      gl.uniform1f(u('uMoonK'), Math.cos(E.moon * Math.PI * 2));\n      gl.uniform1f(u('uMoonWax'), E.moon < 0.5 ? 1 : 0);\n      gl.uniform1f(u('uMoonLit'), E.moonLit);\n      gl.uniform3fv(u('uZen'), E.zen);\n      gl.uniform3fv(u('uHor'), E.hor);\n      gl.uniform3fv(u('uSunCol'), E.sunCol);\n      gl.uniform3fv(u('uLit'), E.lit);\n      gl.uniform3fv(u('uShade'), E.shade);\n      gl.uniform3fv(u('uFogCol'), E.fogCol);\n      gl.uniform3fv(u('uGlowCol'), E.glowCol);\n      if (ship.on) {\n        // quer \u00fcber die ganze Breite, knapp au\u00dferhalb beginnen und enden; sanftes Auf und Ab, leichtes Nicken\n        const m = ship.hl * 1.15 / (SW / SH), p = ship.t;\n        ship.cx = ship.dir > 0 ? -m + (1 + 2 * m) * p : 1 + m - (1 + 2 * m) * p;\n        ship.cy = ship.y + 0.004 * Math.sin(time * 0.6);\n        gl.uniform4f(u('uShip'), ship.cx, ship.cy, ship.hl, ship.dir);\n        gl.uniform2f(u('uShipB'), 0.014 * Math.sin(time * 0.45 + 1), clamp01(E.night * 1.3));\n      } else gl.uniform4f(u('uShip'), 0, 0, 0, 1);\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n    }\n    function renderBuild() {\n      if (!texReady) return false;\n      const gl = B.gl, u = B.u, E = env;\n      gl.viewport(0, 0, BW, BH);\n      gl.activeTexture(gl.TEXTURE2);\n      gl.bindTexture(gl.TEXTURE_2D, texWin);\n      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 64, 1, gl.RGBA, gl.UNSIGNED_BYTE, winData.subarray(0, 256));\n      gl.uniform2f(u('uTex'), texW, texH);\n      gl.uniform3fv(u('uAmb'), E.amb);\n      gl.uniform3fv(u('uFogCol'), E.fogCol);\n      gl.uniform1f(u('uSat'), E.sat);\n      gl.uniform1f(u('uNight'), 1 - sstep(0.02, 0.18, E.e) * (1 - E.wx.dark * 0.4));\n      gl.uniform1f(u('uDay'), E.day);\n      gl.uniform1f(u('uOver'), E.over);\n      gl.uniform1f(u('uWet'), wet);\n      gl.uniform1f(u('uFog'), E.wx.fog);\n      gl.uniform1f(u('uFlash'), flash);\n      gl.uniform1f(u('uLampDay'), sstep(-0.02, 0.12, E.e));\n      gl.uniform1f(u('uDeep'), clamp01(sstep(0.02, -0.2, E.e) + E.wx.dark * 0.4));\n      gl.uniform4fv(u('uSeason'), E.w);\n      gl.uniform1f(u('uSnowCover'), E.snowCover);\n      gl.uniform1f(u('uManual'), manualOn ? 1 : 0);\n      gl.uniform4fv(u('uLamps[0]'), lampArr);\n      gl.uniform3fv(u('uWall[0]'), wallArr);\n      gl.clearColor(0, 0, 0, 0);\n      gl.clear(gl.COLOR_BUFFER_BIT);\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n      return true;\n    }\n\n    let wet = 0, dirty = true, revealed = false, lastLabel = '', lastNight = -1;\n    let hold = false, manual = false, autoBirds = true;   // Debug: Uhr anhalten, Bild f\u00fcr Bild rendern, V\u00f6gel nur per Hand\n    function step(dt) {\n      const k = dt * 60;\n      if (playing) {\n        if (!hold) {\n          // live (auch beim Start bis release()): echte Uhr \u00fcbernehmen statt hochzuz\u00e4hlen. Sonst ging sie nach, wenn die\n          // Seite im Hintergrund-Tab lag (dann l\u00e4uft kein Bild, dt ist je Bild auf 0,05 s begrenzt)\n          if (mode === 'live' || (clock.live && !released)) syncLive();\n          else {\n            // Start: erst echte Zeit; nach release() beschleunigt die Uhr in 3,5 s auf Zeitraffer-Tempo\n            const sp = released ? sstep(0, 3.5, time - relT) : 0, fast = rate(env) * TEMPO * sp;\n            clock.hour += (fast + (1 - sp) / 3600) * dt;\n            if (clock.hour >= 24) { clock.hour -= 24; clock.day++; }\n            if (clock.live && released) {\n              sinceRel += fast * dt;\n              clock.live.mix = 1 - sstep(0.5, 5, sinceRel);   // das Echte blendet \u00fcber rund f\u00fcnf Zeitraffer-Stunden aus\n              if (clock.live.mix <= 0) clock.live = null;\n            }\n          }\n        }\n        time += dt;\n        const cloud = clock.live ? lerp(1, 0.3, clock.live.mix) : 1;   // live ziehen die Wolken langsamer\n        evolve += dt * (0.35 + env.wx.wind * 0.5) * TEMPO * cloud;\n        drift[0] += dt * (0.012 + env.wx.wind * 0.03) * TEMPO * cloud;\n        drift[1] -= dt * 0.004 * TEMPO * cloud;\n      }\n      env = environment(clock);\n      // N\u00e4sse bleibt nach dem Regen noch eine Weile\n      wet = Math.max(env.wx.rain, wet - dt * 0.05 * TEMPO);\n      // Blitze bei Gewitter\n      if (playing && env.wx.storm > 0.3) {\n        nextFlash -= dt;\n        if (nextFlash <= 0) {\n          gsap.timeline().to(fl, { v: 1, duration: 0.05 }).to(fl, { v: 0.15, duration: 0.08 }).to(fl, { v: 0.85, duration: 0.04 }).to(fl, { v: 0, duration: 0.45, ease: 'power2.out' });\n          nextFlash = rnd(2.5, 6) / TEMPO;\n          onFlash?.(env.wx.storm);   // Donner (sound.js)\n        }\n      }\n      flash = fl.v;\n      lights(dt, k);\n      if (playing) stepShip(dt);\n    }\n    const fl = { v: 0 };\n\n    // ---------- Luftschiff ----------\n    // Zieht selten und gem\u00e4chlich quer \u00fcber den Himmel: das erste Mal nach 20\u201335 s im Hero, danach alle 2,5\u20134 min;\n    // nie bei Gewitter, Starkregen oder dichtem Nebel. In Echtzeit (nicht im Zeitraffer), knapp eine Minute lang.\n    // Gezeichnet im Himmels-Shader (airship); Klick darauf f\u00fchrt in die Geschichte (main.js, shipAt).\n    const ship = { on: false, t: 0, dur: 50, dir: 1, y: 0.2, hl: 0.07, wait: rnd(20, 35), cx: -9, cy: 0 };\n    function launchShip(dir) {\n      const r = skyCv.getBoundingClientRect(), h = hero.getBoundingClientRect();\n      const y = r.height ? (h.top + h.height * rnd(0.17, 0.28) - r.top) / r.height : rnd(0.13, 0.22);\n      Object.assign(ship, { on: true, t: 0, dur: rnd(44, 56), dir: dir || (Math.random() < 0.5 ? 1 : -1), y, hl: rnd(0.062, 0.074) * (mobile ? 0.9 : 1) });\n    }\n    function stepShip(dt) {\n      if (!ship.on) {\n        ship.wait -= dt;\n        if (ship.wait > 0) return;\n        const x = env.wx;\n        if (x.storm > 0.2 || x.rain > 0.5 || x.fog > 0.6) { ship.wait = rnd(8, 16); return; }\n        launchShip();\n      }\n      ship.t += dt / ship.dur;\n      if (ship.t >= 1) { ship.on = false; ship.cx = -9; ship.wait = rnd(150, 240); }\n    }\n    // Liegt der Punkt (Bildschirm-Pixel) auf dem Luftschiff? Gro\u00dfz\u00fcgig, damit es auch am Handy gut zu treffen ist.\n    function shipAt(x, y) {\n      if (!ship.on || hero.classList.contains('sky-lost')) return false;\n      const r = skyCv.getBoundingClientRect();\n      if (!r.width || !r.height) return false;\n      const dx = ((x - r.left) / r.width - ship.cx) * (r.width / r.height), dy = (y - r.top) / r.height - ship.cy;\n      return Math.abs(dx) < ship.hl * 1.08 && Math.abs(dy) < ship.hl * 0.34 + 10 / r.height;\n    }\n\n    function frame(dt) {\n      if (!playing && !dirty) return;   // angehalten: nichts neu zeichnen\n      if (!SW) resize();\n      step(playing ? dt : 0);\n      renderSky();\n      const ok = renderBuild();\n      drawBirds(playing ? dt : 0);\n      drawWeather(playing ? dt : 0);\n      if (ok) dirty = false;\n      if (ok && !revealed) { revealed = true; hero.classList.add('has-sky'); }\n      // Schriftzug leuchtet nachts wie eine beleuchtete Werbeschrift\n      const nt = Math.round(env.night * 100) / 100;\n      if (nt !== lastNight) { lastNight = nt; hero.style.setProperty('--night', nt); }\n      const live = isLive();\n      const label = SEASONS[clock.season()] + '|' + (live ? Math.floor(clock.hour * 60) : fmt(clock.hour)) + '|' + weatherWord(env) + '|' + live;\n      if (label !== lastLabel) {\n        lastLabel = label;\n        const skyLum = 0.2126 * env.zen[0] + 0.7152 * env.zen[1] + 0.0722 * env.zen[2];\n        onChange?.({ season: SEASONS[clock.season()], clock: live ? hhmm(clock.hour) : fmt(clock.hour), weather: weatherWord(env), playing, night: env.night, dark: skyLum < 0.46, live, temp: live ? liveTemp : null });\n      }\n    }\n    // Echt ist nur, was nicht schon beschleunigt: Nach release() lief die Uhr sonst gut eine halbe Stunde vor, w\u00e4hrend\n    // Punkt und Temperatur noch \u201elive\u201c zeigten\n    const isLive = () => !!clock.live && clock.live.mix > 0.999 && (mode === 'live' || !released);\n    const fmt = h => { const m = Math.floor(h * 6) * 10; return String(Math.floor(m / 60) % 24).padStart(2, '0') + ':' + String(m % 60).padStart(2, '0'); };\n    const hhmm = h => { const m = Math.floor(h * 60); return String(Math.floor(m / 60) % 24).padStart(2, '0') + ':' + String(m % 60).padStart(2, '0'); };\n\n    // ---------- Licht per Fingertipp ----------\n    // Welches Fenster liegt unter diesem Punkt (Bildschirm-Pixel)? Gepr\u00fcft wird gegen die vermessenen Scheiben\n    // (Front: Rechteck mit schr\u00e4ger Unterkante, Seiten: Parallelogramm), mit ein paar Pixeln Spielraum. -1 = keins.\n    function windowAt(x, y) {\n      const r = buildCv.getBoundingClientRect();\n      if (!r.width || !r.height) return -1;\n      const u = (x - r.left) / r.width, v = (y - r.top) / r.height, tu = 6 / r.width, tv = 6 / r.height;\n      for (let i = 0; i < FRONT.length; i++) {\n        const f = FRONT[i];\n        if (u < f[0] - tu || u > f[2] + tu) continue;\n        const t = clamp01((u - f[0]) / (f[2] - f[0]));\n        if (v >= f[1] - tv && v <= f[3] + (f[4] - f[3]) * t + tv) return i;\n      }\n      for (let n = 0; n < SIDE.length; n++) {\n        const q = SIDE[n];\n        if (u < q[0] - tu || u > q[1] + tu) continue;\n        const t = clamp01((u - q[0]) / (q[1] - q[0]));\n        if (v >= q[2] + (q[3] - q[2]) * t - tv && v <= q[4] + (q[5] - q[4]) * t + tv) return FRONT.length + n;\n      }\n      return -1;\n    }\n    // Licht in diesem Fenster umschalten; liefert den neuen Zustand (true = an)\n    function toggleWindow(i) {\n      const w = WIN[i];\n      if (!w) return null;\n      const on = w.man != null ? w.man === 1 : w.autoOn;\n      w.man = on ? 0 : 1; w.manAuto = w.autoOn;\n      dirty = true;\n      return !on;\n    }\n\n    // Leistung beobachten: l\u00e4uft der Hero dauerhaft unter ~45 fps, wird eine Stufe gr\u00f6ber gerendert.\n    // Bringt die gr\u00f6bere Stufe nichts (Bildrate fest gedrosselt, z. B. Stromsparmodus am iPhone mit 30 Bildern/s),\n    // geht es zur\u00fcck auf die sch\u00e4rfere Stufe, und die Messung endet.\n    let perfN = 0, perfSum = 0, probe = null, settled = false;\n    const setTier = t => {\n      tier = t;\n      lowPower = tier === TIERS.length - 1;\n      skyScale = TIERS[tier].sky * (lowPower ? 0.7 : 1);\n      resize(); dirty = true;\n    };\n    const perf = ms => {\n      if (settled || !playing || document.hidden || document.documentElement.classList.contains('is-loading')) return;\n      perfSum += ms; perfN++;\n      if (perfN < 120) return;\n      const avg = perfSum / perfN;\n      perfN = 0; perfSum = 0;\n      if (probe) {\n        const gain = avg < probe.avg * 0.85;\n        if (!gain) { setTier(probe.tier); settled = true; }\n        probe = null;\n        if (settled) return;\n      }\n      if (avg > 22 && tier < TIERS.length - 1) { probe = { tier, avg }; setTier(tier + 1); }\n    };\n\n    let last = 0, running = false;\n    const tick = () => {\n      const now = performance.now();\n      const ms = now - last;\n      const dt = Math.min(0.05, ms / 1000 || 0.016);\n      last = now;\n      if (!active || manual) return;\n      // Leistung vor dem Zeichnen pr\u00fcfen: Eine neue Qualit\u00e4tsstufe \u00e4ndert die Canvas-Gr\u00f6\u00dfe und leert sie dabei.\n      // Danach muss im selben Bild gezeichnet werden, sonst blitzt der deckende Himmel ein Bild lang schwarz auf.\n      if (ms < 250) perf(ms);\n      frame(dt);\n    };\n    const start = () => { if (running) return; running = true; last = performance.now(); gsap.ticker.add(tick); };\n    const stop = () => { if (!running) return; running = false; gsap.ticker.remove(tick); };\n\n    let rt;\n    // nach dem Anpassen sofort zeichnen, damit keine geleerte Canvas zu sehen ist\n    const onResize = () => { clearTimeout(rt); rt = setTimeout(() => { resize(); dirty = true; frame(0); }, 150); };\n    addEventListener('resize', onResize);\n    // jedes neu geladene Bild \u00fcbernehmen: beim Start, aber auch, wenn der Browser sp\u00e4ter ein anderes aus dem srcset holt\n    img.addEventListener('load', () => { texW = 0; resize(); dirty = true; });\n\n    // WebGL weg (iOS unter Speicherdruck oder nach l\u00e4ngerem Hintergrund): ruhig auf die Bilder zur\u00fcckfallen. Auch\n    // V\u00f6gel und Wetter ausblenden, sonst standen sie mitten in der Bewegung eingefroren \u00fcber den Bildern.\n    for (const cv of [skyCv, buildCv]) cv.addEventListener('webglcontextlost', e => { e.preventDefault(); stop(); hero.classList.remove('has-sky'); hero.classList.add('sky-lost'); }, { once: true });\n\n    resize();\n    start();\n\n    return {\n      get playing() { return playing; },\n      // Zustand f\u00fcr die Ger\u00e4usche (sound.js): Anteile der Jahreszeiten, Tageszeit, Wetter\n      get state() {\n        const x = env.wx;\n        return { w: env.w, hour: clock.hour, rise: env.rise, day: env.day, night: env.night, rain: x.rain, snow: x.snow, wind: x.wind, storm: x.storm, leaves: x.leaves };\n      },\n      play() { playing = true; lastLabel = ''; },\n      // Karlshorst live: nach dem Start in den Zeitraffer \u00fcbergehen (mode 'start')\n      release() { if (!released) { released = true; relT = time; lastLabel = ''; } },\n      get mode() { return mode; },\n      get live() { return isLive(); },\n      windowAt, toggleWindow, shipAt,\n      // Konsole: KL.debug.sky.ship() l\u00e4sst das Luftschiff sofort losfahren (1 nach rechts, -1 nach links)\n      ship(dir) { launchShip(dir); },\n      get airship() { return ship; },\n      windowOn(i) { const w = WIN[i]; return !!w && (w.man != null ? w.man === 1 : w.autoOn); },\n      pause() { playing = false; lastLabel = ''; dirty = true; },\n      toggle() { playing ? this.pause() : this.play(); return playing; },\n      setActive(v) { active = v; if (v) last = performance.now(); },\n      // Konsole: KL.debug.sky.set({ hour: 21, season: 3 })\n      set({ hour, season, day } = {}) {\n        mode = 'zeitraffer'; released = true; clock.live = null;   // Konsole: ab hier ohne Live-Werte\n        if (hour != null) clock.hour = ((hour % 24) + 24) % 24;\n        if (season != null) { clock.s0 = season; clock.day = 0; }\n        if (day != null) clock.day = day;\n        dirty = true; lastLabel = '';\n        WIN.forEach(w => { w.lv = 0; });\n        drops.length = flakes.length = leaves.length = petals.length = flocks.length = nearFlocks.length = 0;\n        for (let i = 0; i < 90; i++) { env = environment(clock); lights(1 / 30, 2); }   // Lichter sofort einschwingen\n      },\n      // Konsole: KL.debug.sky.birds('kraehe') startet einen Schwarm (Arten: spatz, segler, taube, kraehe, gans, moewe);\n      // mit true als zweitem Wert fliegt ein einzelner Vogel nah vor den H\u00e4usern. at (0 \u2026 1) setzt ihn zum Testen direkt\n      // an diese Stelle im Bild, dir 1 fliegt nach rechts, -1 nach links. Mitschnitt als Video: webflow/birdfilm.py\n      birds(kind, near = false, at, dir) {\n        if (!SPECIES[kind]) return;\n        camera();\n        spawnFlock(kind, near, at, dir);\n      },\n      get flocks() { return { far: flocks, near: nearFlocks }; },\n      // Debug f\u00fcr Mitschnitte: Uhr anhalten (Wolken, Wetter und V\u00f6gel laufen weiter), von Hand Bild f\u00fcr Bild\n      // rendern (manual + advance) und die zuf\u00e4lligen V\u00f6gel abschalten\n      hold(v = true) { hold = v; },\n      manual(v = true) { manual = v; },\n      advance(dt = 1 / 30) { frame(dt); },\n      autoBirds(v = true) { autoBirds = v; },\n      // Debug: alle Arten in acht Phasen des Fl\u00fcgelschlags auf ein Canvas zeichnen\n      birdSheet(cv, size = 34, yaw = 0.35, elev = 0.25) {\n        const ctx = cv.getContext('2d'), kinds = Object.keys(SPECIES);\n        cv.width = 9 * size * 3.2; cv.height = kinds.length * size * 3.2;\n        ctx.fillStyle = '#8fbfe6'; ctx.fillRect(0, 0, cv.width, cv.height);\n        ctx.lineJoin = 'round'; ctx.lineWidth = 0.7;\n        kinds.forEach((k, r) => {\n          const sp = SPECIES[k];\n          for (let i = 0; i < 9; i++) {\n            const glide = i === 8, b = { size, flap: glide ? 0 : 1, tuck: 0, hz: 1 };\n            b.ph = glide ? 0 : i / 8 * 6.2832;\n            drawBird(ctx, sp, b, (i + 0.5) * size * 3.2, (r + 0.5) * size * 3.2, frameOf(Math.cos(yaw), 0, Math.sin(yaw), 0, elev), '#1d2733');\n          }\n        });\n      },\n      get env() { return env; },\n      get clock() { return clock; }\n    };\n  }\n\n  KL.heroSky = { create };\n})();\n"},{"name":"sound.js","code":"/* ==========================================================================\n   KARLS LIVING \u2014 Sound (nur nach Klick auf den Sound-Schalter)\n   Alle Kl\u00e4nge werden live mit Web Audio erzeugt \u2013 keine Audiodateien.\n   Im Hero folgt die Atmo dem Zeitraffer: Regen, Wind in B\u00f6en, Donner nach Blitzen,\n   V\u00f6gel am Tag (vor allem Fr\u00fchling und Sommer) und Grillen in warmen N\u00e4chten.\n   ========================================================================== */\n(() => {\n  'use strict';\n  const KL = (window.KL = window.KL || {});\n  const AC = window.AudioContext || window.webkitAudioContext;\n  const rand = (a, b) => a + Math.random() * (b - a);\n  const clamp01 = v => Math.min(1, Math.max(0, v));\n  const sstep = (a, b, v) => { const t = clamp01((v - a) / (b - a)); return t * t * (3 - 2 * t); };\n  const pick = weights => {\n    let r = Math.random() * Object.values(weights).reduce((a, b) => a + b, 0);\n    for (const [k, w] of Object.entries(weights)) { r -= w; if (r <= 0) return k; }\n    return Object.keys(weights)[0];\n  };\n\n  let ctx = null, master = null, noise = null, white = null, hall = null, birdWave = null;\n  let enabled = false, nature = 0, lastTick = 0, lastWhoosh = 0;\n  let scene = null, heroMix = 1, atmo = null, loop = null, suspendTimer = null;\n\n  function ensure() {\n    if (ctx || !AC) return !!ctx;\n    ctx = new AC();\n    const comp = ctx.createDynamicsCompressor();\n    comp.threshold.value = -18;\n    comp.ratio.value = 4;\n    master = ctx.createGain();\n    master.gain.value = 0;\n    master.connect(comp).connect(ctx.destination);\n    const sr = ctx.sampleRate, len = sr * 4;\n    // leicht gefiltertes (rosa-\u00e4hnliches) Rauschen und wei\u00dfes Rauschen, je 4 s (k\u00fcrzere Schleifen h\u00f6rt man)\n    noise = ctx.createBuffer(1, len, sr);\n    white = ctx.createBuffer(1, len, sr);\n    const d = noise.getChannelData(0), wd = white.getChannelData(0);\n    let b0 = 0, b1 = 0, b2 = 0;\n    for (let i = 0; i < len; i++) {\n      const w = Math.random() * 2 - 1;\n      b0 = 0.99765 * b0 + w * 0.099;\n      b1 = 0.963 * b1 + w * 0.2965;\n      b2 = 0.57 * b2 + w * 1.0527;\n      d[i] = (b0 + b1 + b2 + w * 0.1848) * 0.2;\n      wd[i] = Math.random() * 2 - 1;\n    }\n    // Hall f\u00fcr drau\u00dfen (V\u00f6gel, Donner): abklingendes Rauschen als Raumantwort\n    const irLen = Math.floor(sr * 1.6), ir = ctx.createBuffer(2, irLen, sr);\n    for (let c = 0; c < 2; c++) {\n      const id = ir.getChannelData(c);\n      for (let i = 0; i < irLen; i++) id[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / irLen, 3.4);\n    }\n    hall = ctx.createConvolver();\n    hall.buffer = ir;\n    const hallLp = ctx.createBiquadFilter();\n    hallLp.type = 'lowpass';\n    hallLp.frequency.value = 5200;\n    const hallOut = ctx.createGain();\n    hallOut.gain.value = 0.55;\n    hall.connect(hallLp).connect(hallOut).connect(master);\n    // Vogelstimme: fast reiner Sinus mit leisen Obert\u00f6nen\n    birdWave = ctx.createPeriodicWave(new Float32Array([0, 0, 0, 0]), new Float32Array([0, 1, 0.1, 0.03]));\n    return true;\n  }\n\n  const env = (g, t, peak, attack, dur) => {\n    g.gain.setValueAtTime(0.0001, t);\n    g.gain.exponentialRampToValueAtTime(Math.max(0.0002, peak), t + attack);\n    g.gain.exponentialRampToValueAtTime(0.0001, t + dur);\n  };\n  const filter = (type, f, q = 0.7) => { const b = ctx.createBiquadFilter(); b.type = type; b.frequency.value = f; b.Q.value = q; return b; };\n  const gainOf = (v = 0) => { const g = ctx.createGain(); g.gain.value = v; return g; };\n  const glide = (param, v, tc) => param.setTargetAtTime(v, ctx.currentTime, tc);\n  // Ausgang mit Stereo-Position und etwas Hall (rev: Vogel-Hall oder der Raum f\u00fcr Wetter-Ger\u00e4usche)\n  function out(node, pan = 0, wet = 0, dest = master, rev = hall) {\n    let o = node;\n    if (ctx.createStereoPanner) { const p = ctx.createStereoPanner(); p.pan.value = pan; node.connect(p); o = p; }\n    o.connect(dest);\n    if (wet > 0 && rev) { const s = gainOf(wet); o.connect(s).connect(rev); }\n  }\n\n  function tone({ f = 880, f2 = f, dur = 0.08, type = 'sine', gain = 0.1, attack = 0.004, pan = 0, when = 0 } = {}) {\n    if (!enabled) return;\n    const t = ctx.currentTime + when;\n    const o = ctx.createOscillator();\n    const g = ctx.createGain();\n    o.type = type;\n    o.frequency.setValueAtTime(f, t);\n    if (f2 !== f) o.frequency.exponentialRampToValueAtTime(f2, t + dur);\n    env(g, t, gain, attack, dur);\n    o.connect(g);\n    out(g, pan);\n    o.start(t);\n    o.stop(t + dur + 0.05);\n  }\n\n  function whoosh({ dur = 0.9, gain = 0.32, from = 280, peak = 2400, to = 420 } = {}) {\n    if (!enabled) return;\n    const now = performance.now();\n    if (now - lastWhoosh < 250) return;\n    lastWhoosh = now;\n    const t = ctx.currentTime;\n    const src = ctx.createBufferSource();\n    src.buffer = noise;\n    const bp = filter('bandpass', from, 0.8);\n    bp.frequency.setValueAtTime(from, t);\n    bp.frequency.exponentialRampToValueAtTime(peak, t + dur * 0.45);\n    bp.frequency.exponentialRampToValueAtTime(to, t + dur);\n    const g = ctx.createGain();\n    env(g, t, gain, dur * 0.4, dur);\n    src.connect(bp).connect(g).connect(master);\n    src.start(t, rand(0, 3));\n    src.stop(t + dur + 0.05);\n  }\n\n  const tick = () => {\n    const now = performance.now();\n    if (now - lastTick < 55) return;\n    lastTick = now;\n    tone({ f: rand(2100, 2500), f2: 1700, dur: 0.03, gain: 0.025 });\n  };\n  const click = () => tone({ f: 1150, f2: 480, dur: 0.08, type: 'triangle', gain: 0.09 });\n  const pop = () => { tone({ f: rand(240, 300), f2: rand(680, 820), dur: 0.12, gain: 0.16 }); tone({ f: 1400, f2: 900, dur: 0.05, gain: 0.03, when: 0.01 }); };\n  const chime = () => [784, 988, 1175, 1568].forEach((f, i) => tone({ f, dur: 0.9, gain: 0.05, attack: 0.01, when: i * 0.09, pan: (i - 1.5) * 0.3 }));\n  // Lichtschalter (Fingertipp auf ein Fenster im Hero): heller Kunststoff-Klick mit kurzem Nachklingen der Wippe und\n  // dumpfem Anschlag kurz danach; \u201ean\u201c klingt etwas heller als \u201eaus\u201c\n  function lightSwitch(on = true) {\n    if (!enabled) return;\n    const t = ctx.currentTime + 0.005, k = on ? 1.1 : 0.9;\n    const burst = (at, type, f, q, dur, peak) => {\n      const src = ctx.createBufferSource(), g = gainOf(0);\n      src.buffer = white;\n      g.gain.setValueAtTime(0, at);\n      g.gain.linearRampToValueAtTime(peak, at + 0.0007);\n      g.gain.exponentialRampToValueAtTime(0.0001, at + dur);\n      src.connect(filter(type, f, q)).connect(g);\n      out(g, 0);\n      src.start(at, rand(0, 3));\n      src.stop(at + dur + 0.02);\n    };\n    const ring = (at, f, dur, peak) => {\n      const o = ctx.createOscillator(), g = gainOf(0);\n      o.frequency.setValueAtTime(f, at);\n      o.frequency.exponentialRampToValueAtTime(f * 0.97, at + dur);\n      g.gain.setValueAtTime(0, at);\n      g.gain.linearRampToValueAtTime(peak, at + 0.001);\n      g.gain.exponentialRampToValueAtTime(0.0001, at + dur);\n      o.connect(g);\n      out(g, 0);\n      o.start(at);\n      o.stop(at + dur + 0.02);\n    };\n    burst(t, 'bandpass', 4200 * k, 1.1, 0.011, 0.26);\n    ring(t, 2650 * k, 0.03, 0.03);\n    ring(t, 5400 * k, 0.018, 0.012);\n    burst(t + 0.007, 'lowpass', 650 * k, 0.8, 0.035, 0.2);\n  }\n  // Z\u00e4hlwerk: Ticks, die langsamer werden (wie ein auslaufendes Rad)\n  const roll = (count = 18, duration = 2.2) => {\n    if (!enabled) return;\n    for (let i = 0; i < count; i++) {\n      const p = i / (count - 1);\n      tone({ f: rand(1500, 1900), f2: 1200, dur: 0.02, gain: 0.03, when: duration * (1 - Math.pow(1 - p, 2.2)) });\n    }\n  };\n\n  /* ---------- V\u00f6gel ---------- */\n  // Ein Pfiff: Tonh\u00f6he folgt den St\u00fctzpunkten, weiche H\u00fcllkurve ohne Knacken, auf Wunsch mit Vibrato\n  function note(t, dur, freqs, peak, v, vib = 0) {\n    const o = ctx.createOscillator(), g = ctx.createGain();\n    o.setPeriodicWave(birdWave);\n    o.frequency.setValueAtTime(freqs[0], t);\n    for (let i = 1; i < freqs.length; i++) o.frequency.linearRampToValueAtTime(freqs[i], t + dur * i / (freqs.length - 1));\n    if (vib) {\n      const l = ctx.createOscillator(), lg = gainOf(freqs[0] * 0.014);\n      l.frequency.value = vib;\n      l.connect(lg).connect(o.frequency);\n      l.start(t); l.stop(t + dur + 0.15);\n    }\n    g.gain.setValueAtTime(0, t);\n    g.gain.linearRampToValueAtTime(peak, t + Math.min(0.014, dur * 0.3));\n    g.gain.setTargetAtTime(0, t + dur * 0.6, dur * 0.16);\n    o.connect(g).connect(v);\n    o.start(t);\n    o.stop(t + dur + 0.15);\n  }\n  // Arten als Muster; jede liefert die Dauer ihrer Strophe\n  const SONGS = {\n    // Kohlmeise: \u201ezi-d\u00e4, zi-d\u00e4, zi-d\u00e4\u201c\n    meise(t, L, v) {\n      const hi = rand(5400, 6600), lo = hi * rand(0.6, 0.7), n = Math.round(rand(3, 5)), step = rand(0.23, 0.3);\n      for (let i = 0; i < n; i++) {\n        note(t + i * step, 0.08, [hi * 1.03, hi * 0.96], 0.068 * L, v);\n        note(t + i * step + 0.11, 0.1, [lo * 1.06, lo * 0.95], 0.062 * L, v);\n      }\n      return n * step;\n    },\n    // Amsel: langsame, fl\u00f6tende Strophe mit Gleitt\u00f6nen, am Ende ein leiser Schn\u00f6rkel\n    amsel(t, L, v) {\n      let x = 0, f = rand(1700, 2500);\n      const n = Math.round(rand(3, 6));\n      for (let i = 0; i < n; i++) {\n        const d = rand(0.13, 0.32), to = Math.min(3300, Math.max(1400, f * rand(0.78, 1.3)));\n        note(t + x, d, [f, (f + to) / 2 * rand(0.96, 1.05), to], 0.075 * L, v, rand(18, 28));\n        x += d + rand(0.05, 0.13);\n        f = Math.min(3200, Math.max(1500, to * rand(0.85, 1.2)));\n      }\n      const m = Math.round(rand(2, 5));\n      for (let i = 0; i < m; i++) { const q = rand(4800, 7000); note(t + x, 0.035, [q, q * 0.8], 0.03 * L, v); x += 0.05; }\n      return x;\n    },\n    // Spatz: kurze \u201etschilp\u201c-Rufe in unregelm\u00e4\u00dfigem Abstand\n    spatz(t, L, v) {\n      let x = 0;\n      const n = Math.round(rand(2, 6));\n      for (let i = 0; i < n; i++) {\n        const f = rand(2800, 4200);\n        note(t + x, rand(0.07, 0.11), [f * 0.88, f * 1.24, f * 0.95], 0.064 * L, v);\n        x += rand(0.16, 0.42);\n      }\n      return x;\n    },\n    // Rotkehlchen/Zaunk\u00f6nig: schnelles, perlendes Trillern, das abw\u00e4rts l\u00e4uft\n    triller(t, L, v) {\n      const n = Math.round(rand(10, 22)), rate = rand(16, 24), f0 = rand(5200, 6800), f1 = f0 * rand(0.6, 0.78);\n      for (let i = 0; i < n; i++) {\n        const p = i / (n - 1), f = f0 + (f1 - f0) * p;\n        note(t + i / rate, 0.032, [f * 1.06, f * 0.94], 0.054 * L * (0.25 + 0.75 * Math.sin(Math.PI * Math.min(1, p * 1.25))), v);\n      }\n      return n / rate;\n    }\n  };\n  // Ein Vogel irgendwo im Raum: n\u00e4her = lauter und trockener, weiter weg = leiser mit mehr Hall\n  function song(kind, L, dest, answer = true) {\n    const t = ctx.currentTime + 0.05, dist = rand(0.15, 1);\n    const v = gainOf(1 - dist * 0.55);\n    out(v, rand(-0.85, 0.85), 0.1 + dist * 0.35, dest);\n    const len = SONGS[kind](t, L, v);\n    setTimeout(() => v.disconnect(), (len + 2) * 1000);\n    // manchmal antwortet ein zweiter Vogel derselben Art von woanders\n    if (answer && Math.random() < 0.3) setTimeout(() => { if (enabled) song(kind, L * 0.8, dest, false); }, (len + rand(0.4, 1.2)) * 1000);\n  }\n  // Wer singt wann: Fr\u00fchling und Sommer viel, Herbst wenig, Winter kaum; morgens am meisten, bei Regen gar nicht\n  function birdLevel(s) {\n    const [sp, su, au, wi] = s.w;\n    const season = sp + su * 0.85 + au * 0.25 + wi * 0.18;\n    const dawn = Math.exp(-(((s.hour - (s.rise + 1)) / 1.6) ** 2));\n    return season * clamp01(s.day * 0.8 + dawn * 0.7) * (1 - clamp01(s.rain * 1.4)) * (1 - s.storm) * (1 - s.snow * 0.7);\n  }\n  function birdKind(s) {\n    if (!s) return pick({ meise: 3, spatz: 3, amsel: 2, triller: 2 });\n    const [sp, su, au, wi] = s.w, dusk = s.hour > 14 && s.day < 0.6 ? 1 : 0;   // abends singt vor allem die Amsel\n    return pick({\n      meise: sp * 3.5 + su * 2 + au * 3 + wi * 6,\n      spatz: sp * 2 + su * 3.5 + au * 2 + wi * 4,\n      amsel: (sp * 2.5 + su * 2.5 + au * 0.5) * (1 + dusk * 4),\n      triller: sp * 2 + su * 2 + au * 5\n    });\n  }\n\n  /* ---------- Raum f\u00fcr Wetter-Ger\u00e4usche ---------- */\n  // Eigener Hall f\u00fcr Regen und Donner (die V\u00f6gel behalten ihren abgenommenen Hall): ein paar fr\u00fche Reflexionen\n  // der Hausw\u00e4nde, dann ein Nachhall, der nach hinten dunkler wird (H\u00f6hen klingen schneller ab) \u2013 wie zwischen H\u00e4usern\n  let space = null;\n  function makeSpace() {\n    const sr = ctx.sampleRate, len = Math.floor(sr * 2.6), ir = ctx.createBuffer(2, len, sr);\n    for (let c = 0; c < 2; c++) {\n      const d = ir.getChannelData(c);\n      let lp = 0;\n      for (let i = 0; i < len; i++) {\n        const t = i / sr;\n        lp += (Math.random() * 2 - 1 - lp) * (0.1 + 0.8 * Math.exp(-t * 2.2));\n        d[i] = lp * Math.exp(-t * 2.4) * Math.min(1, t / 0.015);\n      }\n      [0.017, 0.029, 0.043, 0.061, 0.083, 0.11].forEach((dl, k) => { d[Math.floor((dl + c * 0.003 + Math.random() * 0.002) * sr)] += (0.5 - k * 0.06) * (Math.random() < 0.5 ? -1 : 1); });\n    }\n    space = ctx.createConvolver();\n    space.buffer = ir;\n    space.connect(filter('lowpass', 6500, 0.5)).connect(gainOf(0.55)).connect(master);\n  }\n\n  /* ---------- Regen ---------- */\n  // Tropfen als Schleifen: viele weiche Ticks (Laub, Rasen), einige h\u00e4rtere Aufschl\u00e4ge mit etwas Klang (Blech, Pflaster)\n  // und ab und zu ein \u201ePlink\u201c in einer Pf\u00fctze (Luftblase: kurzer Ton, der nach oben zieht). Die L\u00e4ngen passen nicht\n  // zueinander, damit man die Schleifen nicht heraush\u00f6rt.\n  function dropBuffer(sec, perSec) {\n    const sr = ctx.sampleRate, len = Math.floor(sr * sec);\n    const b = ctx.createBuffer(1, len, sr), d = b.getChannelData(0);\n    for (let k = 0, n = Math.floor(sec * perSec); k < n; k++) {\n      const at = Math.floor(Math.random() * len), kind = Math.random(), amp = 0.12 + Math.pow(Math.random(), 3.2) * 0.88;\n      if (kind < 0.7) {\n        const dec = rand(0.0015, 0.006), L = Math.floor(sr * dec * 6), a = rand(0.25, 0.7), q = sr * dec;\n        let y = 0;\n        for (let i = 0; i < L; i++) { y += (Math.random() * 2 - 1 - y) * a; d[(at + i) % len] += amp * y * Math.exp(-i / q) * Math.min(1, i / 6); }\n      } else if (kind < 0.93) {\n        const dec = rand(0.004, 0.014), w = 2 * Math.PI * rand(1800, 5200) / sr, L = Math.floor(sr * dec * 6), q = sr * dec;\n        for (let i = 0; i < L; i++) d[(at + i) % len] += amp * Math.exp(-i / q) * Math.min(1, i / 8) * ((Math.random() * 2 - 1) * 0.55 + Math.sin(w * i) * 0.45);\n      } else {\n        const dur = rand(0.02, 0.05), f0 = rand(900, 1700), f1 = f0 * rand(1.5, 2.3), L = Math.floor(sr * dur * 1.5), q = sr * dur;\n        let ph = 0;\n        for (let i = 0; i < L; i++) { const p = i / q; ph += 2 * Math.PI * (f0 + (f1 - f0) * Math.min(1, p)) / sr; d[(at + i) % len] += amp * 0.55 * Math.sin(ph) * Math.exp(-p * 3) * Math.min(1, i / 20); }\n      }\n    }\n    return normalize(b, 0.8);\n  }\n  // Wei\u00dfes Rauschen mit eigener L\u00e4nge je Kanal: So klingt der Regen breit statt aus der Mitte\n  function noiseBuf(sec) {\n    const sr = ctx.sampleRate, b = ctx.createBuffer(1, Math.floor(sr * sec), sr), d = b.getChannelData(0);\n    for (let i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1;\n    return b;\n  }\n  // Laub: k\u00f6rniges Rauschen in kleinen Sch\u00fcben, einzelne Bl\u00e4tter knistern (statt gleichm\u00e4\u00dfigem Zischen)\n  function rustleBuffer(sec) {\n    const sr = ctx.sampleRate, len = Math.floor(sr * sec), b = ctx.createBuffer(1, len, sr), d = b.getChannelData(0);\n    let e = 0, goal = 0;\n    for (let i = 0; i < len; i++) {\n      if (Math.random() < 0.0009) goal = Math.random() < 0.6 ? rand(0.3, 1) : 0;\n      e += (goal - e) * 0.0008;\n      d[i] = (Math.random() * 2 - 1) * e * (Math.random() < 0.02 ? rand(1, 3) : 1);\n    }\n    const f = Math.floor(sr * 0.05);   // weiche \u00dcberg\u00e4nge an den Schleifen-Enden\n    for (let i = 0; i < f; i++) { d[i] *= i / f; d[len - 1 - i] *= i / f; }\n    return normalize(b, 0.8);\n  }\n  function normalize(b, to) {\n    let pk = 0;\n    for (let c = 0; c < b.numberOfChannels; c++) { const d = b.getChannelData(c); for (let i = 0; i < d.length; i++) pk = Math.max(pk, Math.abs(d[i])); }\n    for (let c = 0; c < b.numberOfChannels; c++) { const d = b.getChannelData(c); for (let i = 0; i < d.length; i++) d[i] *= to / (pk || 1); }\n    return b;\n  }\n  const peaking = (f, q, db) => { const b = filter('peaking', f, q); b.gain.value = db; return b; };\n  // Einzelner Tropfen aus der Regenrinne oder vom Balkon: runder, tiefer \u201ePlopp\u201c, der nach oben zieht, mit Spritzer\n  function drip(level, dest) {\n    const t = ctx.currentTime + rand(0.01, 0.15), f = rand(380, 820), dur = rand(0.05, 0.1), pan = rand(-0.85, 0.85);\n    const o = ctx.createOscillator(), g = gainOf(0);\n    o.frequency.setValueAtTime(f, t);\n    o.frequency.exponentialRampToValueAtTime(f * rand(1.3, 1.8), t + dur * 0.6);\n    g.gain.setValueAtTime(0, t);\n    g.gain.linearRampToValueAtTime(level, t + 0.003);\n    g.gain.exponentialRampToValueAtTime(0.0001, t + dur);\n    o.connect(g);\n    out(g, pan, 0.25, dest, atmo ? atmo.rev : space);\n    o.start(t);\n    o.stop(t + dur + 0.02);\n    const s = ctx.createBufferSource(), sg = gainOf(0);\n    s.buffer = white;\n    sg.gain.setValueAtTime(0, t);\n    sg.gain.linearRampToValueAtTime(level * 0.45, t + 0.002);\n    sg.gain.exponentialRampToValueAtTime(0.0001, t + 0.03);\n    s.connect(filter('bandpass', rand(2500, 4500), 1.2)).connect(sg);\n    out(sg, pan, 0, dest);\n    s.start(t, rand(0, 3));\n    s.stop(t + 0.05);\n  }\n\n  /* ---------- Atmo im Hero ---------- */\n  function startAtmo() {\n    if (atmo) return;\n    if (!space) makeSpace();\n    const srcs = [];\n    const loopOf = (buf, offset) => { const s = ctx.createBufferSource(); s.buffer = buf; s.loop = true; s.start(ctx.currentTime, offset); srcs.push(s); return s; };\n    const bus = gainOf(0);\n    bus.connect(master);\n    // Hall-Zuleitung f\u00fcr Donner und Tropfen: folgt wie der Bus dem Hero (heroMix). Direkt in den Raum geschickt\n    // hallte ein Donner nach dem Wegscrollen noch sekundenlang in voller St\u00e4rke \u00fcber dem n\u00e4chsten Abschnitt nach.\n    const rev = gainOf(heroMix);\n    rev.connect(space);\n    // Regen: breites Rauschen (je Kanal eigenes, betont um 3 kHz wie echter Landregen), drei Tropfen-Schleifen und bei\n    // Starkregen das Rauschen der ganzen Fl\u00e4che, das langsam an- und abschwillt\n    const hiss = gainOf(0), drops = gainOf(0), body = gainOf(0);\n    [[noiseBuf(8.3), -0.8], [noiseBuf(7.1), 0.8]].forEach(([buf, pan]) => out(loopOf(buf, 0).connect(filter('highpass', 420, 0.5)).connect(peaking(3200, 0.9, 4)).connect(filter('lowpass', 9000, 0.5)), pan, 0, hiss));\n    [[7.3, -0.6], [9.1, 0.6], [8.2, 0]].forEach(([sec, pan]) => out(loopOf(dropBuffer(sec, 48), 0).connect(filter('lowpass', 9500)), pan, 0, drops));\n    const dropWet = gainOf(0);   // Hall erst hinter dem Pegel und mit dem Hero ausgeblendet, sonst hallt es auch ohne Regen\n    drops.connect(dropWet).connect(space);\n    const swell = gainOf(1), lfo = ctx.createOscillator(), lfoG = gainOf(0.25);\n    lfo.frequency.value = 0.13;\n    lfo.connect(lfoG).connect(swell.gain);\n    lfo.start();\n    srcs.push(lfo);\n    loopOf(noise, 0.9).connect(filter('highpass', 160)).connect(filter('lowpass', 1400)).connect(swell).connect(body);\n    // Wind als Luft in den B\u00e4umen (neu 27.09., Kumpel: \u201epenetrant, klingt eher nach einem vorbeifahrenden Zug\u201c: vorher\n    // kam 2/3 der Energie aus tiefem Brausen unter 200 Hz, dazu ein Band, das mit jeder B\u00f6e hoch- und runterzog, und ein\n    // Pfeifen). Jetzt zwei breite, leise Rauschb\u00e4nder um 0,7\u20132 kHz, links und rechts leicht versetzt, ohne Tiefen, die\n    // in langsamen B\u00f6en an- und abschwellen; dazu raschelt das Laub (im Winter kaum)\n    const wind = gainOf(0), windL = filter('bandpass', 700, 0.5), windR = filter('bandpass', 850, 0.5), rustle = gainOf(0);\n    out(loopOf(noiseBuf(9.7), 0).connect(filter('highpass', 260, 0.5)).connect(filter('lowpass', 3200, 0.5)).connect(windL), -0.55, 0, wind);\n    out(loopOf(noiseBuf(8.9), 0).connect(filter('highpass', 260, 0.5)).connect(filter('lowpass', 3200, 0.5)).connect(windR), 0.55, 0, wind);\n    [[6.7, -0.45], [5.9, 0.5]].forEach(([sec, pan]) => out(loopOf(rustleBuffer(sec), 0).connect(filter('highpass', 1500)).connect(filter('lowpass', 5500)), pan, 0, rustle));\n    [hiss, drops, body, wind, rustle].forEach(n => n.connect(bus));\n    // Grillen: Dauerton, der in kurzen Pulsen aufgeht (drei Pulse je Zirpen)\n    const crickets = [[4450, -0.45], [4700, 0.55]].map(([f, pan]) => {\n      const o = ctx.createOscillator(), g = gainOf(0);\n      o.frequency.value = f + rand(-60, 60);\n      o.connect(g);\n      out(g, pan, 0, bus);\n      o.start();\n      srcs.push(o);\n      return { g, next: 0, period: rand(0.5, 0.68) };\n    });\n    atmo = { bus, rev, hiss, drops, dropWet, body, wind, windL, windR, rustle, crickets, srcs, nextBird: 0, nextGust: 0, nextDrip: 0 };\n    prepareThunder();\n  }\n  function stopAtmo() {\n    if (!atmo) return;\n    const a = atmo;\n    atmo = null;\n    a.srcs.forEach(s => { try { s.stop(); } catch (e) { /* schon gestoppt */ } });\n    a.bus.disconnect();\n    a.rev.disconnect();\n  }\n\n  // Alle 200 ms: Pegel an das Wetter angleichen und die n\u00e4chsten V\u00f6gel, Tropfen und Grillen einplanen\n  function update() {\n    if (!enabled || !atmo) return;\n    const now = ctx.currentTime, s = scene ? scene() : null, a = atmo;\n    glide(a.bus.gain, heroMix, 0.3);\n    glide(a.rev.gain, heroMix, 0.3);\n    glide(a.dropWet.gain, 0.06 * heroMix, 0.3);\n    const rain = s ? s.rain : 0;\n    glide(a.hiss.gain, 0.076 * Math.pow(rain, 1.2), 0.8);\n    glide(a.drops.gain, 0.215 * sstep(0.02, 0.6, rain), 0.8);\n    glide(a.body.gain, 0.066 * sstep(0.5, 1, rain), 1.2);\n    // einzelne Tropfen aus Rinnen und von Balkonen\n    if (rain > 0.05 && heroMix > 0.05 && now >= a.nextDrip) { drip(0.05 * (0.4 + 0.6 * rain), a.bus); a.nextDrip = now + rand(0.15, 1.1) / (0.4 + rain); }\n    if (now >= a.nextGust) {\n      // B\u00f6en langsam wie echte Luftbewegung: alle 4\u20139 s ein neues Ziel, An- und Abschwellen \u00fcber mehrere Sekunden\n      // (vorher alle 1\u20133 s in gut einer Sekunde, das klang nach vorbeifahrenden Fahrzeugen)\n      const windy = s ? clamp01(sstep(0.45, 0.95, s.wind) + s.storm * 0.4) : 0;\n      const gust = windy * rand(0.3, 1), tc = rand(1.6, 3.2);\n      const canopy = s && s.w ? 1 - 0.75 * s.w[3] : 1;   // Laub an den B\u00e4umen, im Winter kaum\n      glide(a.wind.gain, 0.026 * gust, tc);\n      glide(a.windL.frequency, 520 + 650 * gust + rand(-60, 60), tc * 1.3);\n      glide(a.windR.frequency, 600 + 720 * gust + rand(-60, 60), tc * 1.5);\n      glide(a.rustle.gain, (0.0045 * canopy + 0.0035 * (s ? s.leaves : 0)) * gust, tc * 0.8);\n      a.nextGust = now + rand(4, 9);\n    }\n    // V\u00f6gel: im Hero nach Jahreszeit und Wetter, in den gr\u00fcnen Abschnitten immer ein paar\n    if (now >= a.nextBird) {\n      const hero = s ? birdLevel(s) * heroMix : 0, green = nature * 0.7;\n      const L = Math.max(hero, green);\n      if (L > 0.04) song(birdKind(hero >= green ? s : null), 0.55 + 0.45 * L, hero >= green ? a.bus : master);\n      a.nextBird = now + rand(2.5, 7) / (0.45 + L * 0.8);\n    }\n    // Grillen in warmen N\u00e4chten\n    const cr = s ? (s.w[1] + s.w[0] * 0.35) * s.night * (1 - clamp01(s.rain * 2)) * (1 - s.snow) : 0;\n    a.crickets.forEach(c => {\n      if (cr < 0.03) { c.next = 0; return; }\n      if (c.next < now) c.next = now + rand(0.05, 0.4);\n      while (c.next < now + 0.35) {\n        for (let k = 0; k < 3; k++) {\n          const t = c.next + k * 0.034;\n          c.g.gain.setValueAtTime(0, t);\n          c.g.gain.linearRampToValueAtTime(0.026 * cr, t + 0.006);\n          c.g.gain.linearRampToValueAtTime(0, t + 0.02);\n        }\n        c.next += c.period * rand(0.94, 1.06);\n      }\n    });\n  }\n\n  /* ---------- Donner ---------- */\n  // Echtes Grollen besteht aus vielen einzelnen Schl\u00e4gen, die aus verschiedenen Teilen des Blitzkanals zu verschiedenen\n  // Zeiten ankommen: am Anfang dicht, dann seltener, tief und rollend; nahe Blitze beginnen mit einem hellen Krachen.\n  // Die Aufnahmen werden einmal vorab berechnet (je zwei nahe und drei ferne, nacheinander, damit nichts ruckelt) und\n  // mit etwas anderem Tempo abgespielt, damit jeder Donner anders klingt. Dazu der Hall zwischen den H\u00e4usern.\n  const thunders = { near: [], far: [] };\n  let thunderPrep = false;\n  // Als Generator: Nach jedem Einzelschlag darf prepareThunder eine Pause machen (Rechnen in H\u00e4ppchen)\n  function* thunderGen(near) {\n    const sr = ctx.sampleRate, dur = near ? rand(6.5, 8.5) : rand(5.5, 7.5), len = Math.floor(sr * dur);\n    const b = ctx.createBuffer(2, len, sr), L = b.getChannelData(0), R = b.getChannelData(1);\n    for (let e = 0, n = Math.round(near ? rand(26, 40) : rand(16, 28)); e < n; e++) {\n      const at = (near ? 0.02 : 0.1) + Math.pow(Math.random(), 1.7) * dur * 0.7;\n      const amp = (0.3 + 0.7 * Math.random()) * Math.exp(-at / (dur * 0.33));\n      const dec = rand(0.2, 1.2), fc = rand(45, near ? 520 : 260), a = 1 - Math.exp(-2 * Math.PI * fc / sr);\n      const pan = rand(-0.8, 0.8), gl = Math.sqrt(0.5 * (1 - pan)), gr = Math.sqrt(0.5 * (1 + pan)), k = amp / Math.pow(a, 0.75);\n      const s0 = Math.floor(at * sr), m = Math.min(len - s0, Math.floor(dec * 5 * sr)), q = dec * sr, att = 0.03 * sr;\n      // Abklingen exp(-i / q) als laufendes Produkt: gleicher Klang, aber ohne Exponentialfunktion je Sample\n      const fall = Math.exp(-1 / q);\n      let y1 = 0, y2 = 0, env = k;\n      for (let i = 0; i < m; i++) {\n        y1 += (Math.random() * 2 - 1 - y1) * a;\n        y2 += (y1 - y2) * a;\n        const v = y2 * env * (i < att ? i / att : 1);\n        env *= fall;\n        L[s0 + i] += v * gl;\n        R[s0 + i] += v * gr;\n      }\n      yield;\n    }\n    if (near) {\n      for (let c = 0, n = Math.round(rand(3, 6)); c < n; c++) {\n        const s0 = Math.floor(rand(0, 0.18) * sr), q = rand(0.006, 0.03) * sr, amp = rand(0.5, 1.2), m = Math.floor(q * 6), wr = rand(0.7, 1);\n        let x0 = 0;\n        for (let i = 0; i < m; i++) { const x = Math.random() * 2 - 1, v = (x - x0) * amp * Math.exp(-i / q); x0 = x; L[s0 + i] += v; R[s0 + i] += v * wr; }\n      }\n    }\n    return normalize(b, 0.9);\n  }\n  function prepareThunder() {\n    if (thunderPrep) return;\n    thunderPrep = true;\n    const todo = [true, false, false, true, false];\n    let gen = null, near = false;\n    // in H\u00e4ppchen von gut 6 ms (vorher je Aufnahme ein Block von 30\u201385 ms, am Handy ein Vielfaches: Zeitraffer ruckelte\n    // nach dem Einschalten des Sounds)\n    const slice = () => {\n      if (!ctx) return;\n      const t0 = performance.now();\n      while (performance.now() - t0 < 6) {\n        if (!gen) { if (!todo.length) return; near = todo.shift(); gen = thunderGen(near); }\n        const r = gen.next();\n        if (r.done) { (near ? thunders.near : thunders.far).push(r.value); gen = null; }\n      }\n      setTimeout(slice, 16);\n    };\n    setTimeout(slice, 400);\n  }\n  function thunder(k = 1) {\n    if (!enabled || !atmo || heroMix < 0.05) return;\n    const near = Math.random() < 0.35, list = near ? thunders.near : thunders.far;\n    if (!list.length) return;\n    const strength = 0.6 + 0.4 * clamp01(k), t = ctx.currentTime + (near ? rand(0.25, 0.6) : rand(0.8, 2.2));\n    const src = ctx.createBufferSource(), g = gainOf((near ? 0.62 : 0.5) * strength);\n    src.buffer = list[Math.floor(Math.random() * list.length)];\n    src.playbackRate.value = rand(0.88, 1.08);\n    src.connect(g);\n    out(g, rand(-0.3, 0.3), near ? 0.3 : 0.5, atmo.bus, atmo.rev);\n    src.start(t);\n  }\n\n  // iPhone: Web Audio l\u00e4uft sonst als \u201eUmgebungs\u201c-Ton und bleibt bei Lautlos-Schalter stumm. Als Wiedergabe\n  // (wie ein Video) ist der Sound nach dem Einschalten h\u00f6rbar; beim Ausschalten zur\u00fcck auf automatisch.\n  const session = type => { try { if (navigator.audioSession) navigator.audioSession.type = type; } catch (e) { /* \u00e4lteres iOS */ } };\n  // Vor iOS 16.4 fehlt audioSession: Dort schaltet ein stummes <audio> in Dauerschleife den Ton auf Wiedergabe um\n  // (bekannter Umweg, wie das Paket \u201eunmute-ios-audio\u201c), dann ist Web Audio trotz Lautlos-Schalter zu h\u00f6ren. Nur auf\n  // iOS und nur, solange der Sound an ist. Abtastrate wie der AudioContext, sonst stellt iOS die Hardware um (Knacken).\n  const IOS = /iP(hone|ad|od)/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);\n  let silent = null;\n  const silentWav = rate => {\n    const n = Math.round(rate * 0.1), b = new DataView(new ArrayBuffer(44 + n));\n    const str = (o, s) => { for (let i = 0; i < s.length; i++) b.setUint8(o + i, s.charCodeAt(i)); };\n    str(0, 'RIFF'); b.setUint32(4, 36 + n, true); str(8, 'WAVE'); str(12, 'fmt ');\n    b.setUint32(16, 16, true); b.setUint16(20, 1, true); b.setUint16(22, 1, true);   // PCM, mono\n    b.setUint32(24, rate, true); b.setUint32(28, rate, true); b.setUint16(32, 1, true); b.setUint16(34, 8, true);   // 8 bit\n    str(36, 'data'); b.setUint32(40, n, true);\n    for (let i = 0; i < n; i++) b.setUint8(44 + i, 128);   // Stille (8 bit ohne Vorzeichen)\n    return URL.createObjectURL(new Blob([b.buffer], { type: 'audio/wav' }));\n  };\n  const unmute = on => {\n    if (!IOS || navigator.audioSession || !ctx) return;\n    try {\n      if (!on) { silent?.pause(); return; }\n      if (!silent) {\n        silent = document.createElement('audio');\n        silent.setAttribute('x-webkit-airplay', 'deny');\n        silent.setAttribute('playsinline', '');\n        silent.preload = 'auto';\n        silent.loop = true;\n        silent.src = silentWav(ctx.sampleRate);\n      }\n      const p = silent.play();\n      if (p && p.catch) p.catch(() => {});\n    } catch (e) { /* ohne Umweg: bleibt wie bisher stumm bei Lautlos-Schalter */ }\n  };\n  // Nach Anruf oder App-Wechsel steht der Kontext auf 'interrupted'/'suspended': beim Zur\u00fcckkommen wieder anwerfen,\n  // notfalls beim n\u00e4chsten Tippen (iOS l\u00e4sst resume() nur mit Nutzer-Geste zu)\n  const revive = () => { if (enabled && ctx && ctx.state !== 'running') { Promise.resolve(ctx.resume()).catch(() => {}); unmute(true); } };\n  // Verstecktes Tab: anhalten statt im Hintergrund weiterzuregnen (kein Dauerton), zur\u00fcck im Tab wieder an\n  document.addEventListener('visibilitychange', () => {\n    if (!document.hidden) revive();\n    else if (enabled && ctx && ctx.state === 'running') { Promise.resolve(ctx.suspend()).catch(() => {}); unmute(false); }\n  });\n  ['touchend', 'pointerup', 'keydown'].forEach(t => addEventListener(t, revive, { capture: true, passive: true }));\n\n  function enable() {\n    session('playback');\n    if (!ensure()) return false;\n    clearTimeout(suspendTimer);\n    ctx.resume();\n    unmute(true);   // noch in der Nutzer-Geste (Klick auf den Schalter), sonst verweigert iOS das Abspielen\n    enabled = true;\n    master.gain.cancelScheduledValues(ctx.currentTime);\n    master.gain.setTargetAtTime(0.9, ctx.currentTime, 0.25);\n    startAtmo();\n    update();\n    loop = setInterval(update, 200);\n    chime();\n    return true;\n  }\n  function disable() {\n    if (!ctx) return;\n    enabled = false;\n    clearInterval(loop);\n    master.gain.cancelScheduledValues(ctx.currentTime);\n    master.gain.setTargetAtTime(0, ctx.currentTime, 0.15);\n    // nach dem Ausblenden alles anhalten (spart Akku)\n    suspendTimer = setTimeout(() => { stopAtmo(); ctx.suspend(); session('auto'); unmute(false); }, 900);\n  }\n\n  KL.sound = {\n    supported: !!AC,\n    get enabled() { return enabled; },\n    toggle() { return enabled ? (disable(), false) : enable(); },\n    setNature(v) { nature = clamp01(v); },\n    // Hero-Atmo: Zustand des Zeitraffers (Funktion), Sichtbarkeit des Hero (0\u20131), Donner nach einem Blitz\n    scene(fn) { scene = fn; },\n    hero(v) { heroMix = clamp01(v); },\n    thunder,\n    tick, click, pop, chime, roll, whoosh, lightSwitch\n  };\n})();\n"},{"name":"lage-map.js","code":"/* ==========================================================================\n   KARLS LIVING \u2014 Lage-Karte (Vektor, Canvas 2D)\n   Daten: \u00a9 OpenStreetMap-Mitwirkende, ODbL (Anzeige des Hinweises \u00fcbernimmt die Seite)\n   Erzeugt von tools/map/build.py aus tools/map/lage-map.template.js \u2013 \u00c4nderungen am Renderer dort,\n   nicht hier; die Daten unten werden bei jedem Build neu geschrieben.\n\n   Jede Zoomstufe wird aus Vektordaten neu gezeichnet (scharf bei jedem Zoom, devicePixelRatio bis 2).\n   Zwei Detailstufen: \u00dcbersicht (ganz Berlin) und Nahbereich (Kreis um das Quartier); dazwischen\n   wird weich \u00fcberblendet \u2013 nach Zoom und r\u00e4umlich (der Nahbereich l\u00e4uft am Kreisrand weich aus).\n\n   API (siehe tools/map/README.md):\n     const map = KL.lageMap.create(canvas, { maxDpr: 2 })   Optionen: maxDpr (Standard 2), font,\n                                            theme: 'dark' (Navy-Thema, z. B. Abschnitt Geschichte; beide Themen\n                                            laufen gleichzeitig \u2013 gemeinsame Daten, getrennte Stile)\n     map.resize(cssW, cssH, dpr)            Gr\u00f6\u00dfe setzen (dpr wird auf 2 begrenzt)\n     map.draw(view)                         view = { cx, cy, zoom, routes: { sbahn: 0..1, \u2026 }, focus, labels,\n                                                     highlight: 'hallen', highlightAmount: 0..1, quarter: 0..1,\n                                                     photos: [{ img, b: [x0, y0, x1, y1], a, clip? }], photoKey,\n                                                     highlightSoft: 0..1, highlightOutline: 0..1 }\n                                            photos = Luftbilder (Geschichte), in Kartenmetern ausgerichtet, liegen \u00fcber\n                                            den Karten-Details und unter Grenzen, Quartier, Schrift und Hervorhebung;\n                                            photoKey muss sich \u00e4ndern, wenn sich photos \u00e4ndert (Standbild-Puffer)\n     map.fit(bounds, pad) \u2192 view            bounds [x0, y0, x1, y1] in Kartenmetern, pad in CSS-px\n     map.lerp(a, b, t) \u2192 view               Kamerafahrt (Zoom logarithmisch, Ziel gleitet ruhig zur Mitte)\n     map.toScreen(x, y) \u2192 {x, y}            Kartenmeter \u2192 CSS-px der zuletzt gezeichneten Ansicht\n     map.sample(id, stepPx, f, view) \u2192 [{x, y}]  Bildschirmpunkte entlang eines Wegs (z. B. damit Schilder ihn nicht verdecken)\n     map.project(lon, lat) \u2192 {x, y}         WGS84 \u2192 Kartenmeter (x Ost, y S\u00fcd, Ursprung = Karls Living I & II)\n     map.plot {x, y, outline, outlineSouth, bounds}, map.routes, map.places, map.bounds, map.local\n     map.history { kolonie, luftschiff, hallen, versuchsanstalt, museum, garnison, gartenstadt, rennbahn, quartier }\n                                            je { id, name, x, y, bounds, kind } \u2013 bounds f\u00fcr fit(), Beschriftung per DOM\n   ========================================================================== */\n(() => {\n  'use strict';\n  const KL = (window.KL = window.KL || {});\n\n  const D = {\"origin\":[52.486107,13.541625,67788.425,111319.4908],\"local\":[-550.0,-120.0,2600.0],\"bounds\":{\"berlin\":[-30720,-21090,14865,16455],\"lichtenberg\":[-5790,-12285,1770,2040],\"karlshorst\":[-2717,-1357,744,2034],\"quartier\":[-139,-121,190,290],\"routes\":[-1328,-1453,159,1209],\"routesAll\":[-1328,-1453,191,1209]}};\n  // Ebenen: [Raster in Metern, kodierte Linienz\u00fcge/Ringe]\n  const LAYERS = {\n    land: [15, 'R5dG|P#3$!*)#$)+#5:)$$%)$-*-$+0+&%,+$%%&!$,(0!*%%+*#%)%%%&%&$-4))&*>.*2-!&%)))%&&!%-%!#5%&(&!!*)2##-**,)%*(!%)!##&%#%$!%%+!#%).+&!((!)#%#&##($!%%)#&,$$!*)()45$+.)#Q#Q#D7/5L./3-!(59>k#a#BCQ#$1**V#)MW#0+_#+#!)-#)(1!;(-!B&!1k#-9.+2;4/*>#7:3,&:*.Y$0p#d#A.~!P#HR#^#@{#m$337:)-CW#4U#-+$152g#AB4?u%S#i#v$s#o#c#^#:-D;#(g#Mm%b#BP#@#{##&4-Or$2y#7#[#z$@e#|$*~!){%g##$q#W#S#~!FQ#BY#+7&$!(9$D*51+>D!5U##J)9&^#7D-B$F0W#h)y#W%7-+5!$7ES#6%,)2(.+:,+a#*++U#$%+&N(w#$W#/V$%1^#?@k$w#_#e#AU#Eu#4V$=m#5+F-}$R&.q#5&++Oc#D158H-#B-!!)!3(&1&&%(6$,9!(%)j#>$>8Q#2^#I)*Q#+e#B@;J73!>*$+;-[#~!7/JS#F1B$U#/7Y#!B-B%5^#+&0&A%C2%.d#=]#5$)-HBW#DL)NR$q#}#F)1(-$$)5-U#-1%L+J35;-%6~!>&2i#U#+!+*5T#*3n#V#$]#U#,s#M(#&_#.G4MC!)D;B5D-c#/,Y#;-%7%)?%_#R$&72N&1@N/B;/3H,+8/.J$5AD*)(*().*,-*#*12+?.2&%#(,,#01(/0)27%#,16&4;6&6D.+#*&.($%+%7b#g#2)(2%1*#(9+!+13(U#FD*0a#7%!&-!$&(;2@AQ#69$52$++4**!$$%&2$8::.=&E>I5.;0-2>*N&9.!*+,1%1$+(+!)81()!+2-%B(3!-:F6~!&Q#*-2+0!4**22!4A440:*A&6-#${$):#0&47C~!C+.$0%P#M,)?!l#z#5Mp#k&l$-G.A)*$*0?,,*488,2A*(.%.$2*%(0&I.6|#Ft%U#t(.(=&M1X#%,+#/Kt#U#A:2(=4V#4?-R#1i$;K/G&b#9(_#.K!,_#h%?~#K0M+I3h#LR%c#g$F(&%Nw#|)_#^%n#%$(=&k$2r#%,h%v#)l#%1t#i$j#p#f#j#j#$_#}&S%K>4;Z%T(+*#4E@i$_$KD2)?-G#=*A2:(O&C3,T#&T#4a$,ES$&8+l#*##l#@R#@X#5Z#-6#n*X&$~!2L!/Z$09*)D?7~#)T#0h#,4*(*!,.&d#W#KS#;;-!*7,#*&KG)AF#.3&&/8$$;?LE?%(2>*?..,,-P#B:%KO:E.#K=((#.:A-.##(%6#).1$5##01#%0.$%:4(($&3%D*)P#0#R#K--91-%-./_#C%,!62~#g#E58)8+()#1/@-+6/%-2~!I(P#3,BP#~!=-.!0A?*8!2C:Z#n#;Z#)R##620)?$?*?/?52!47?-:&_#s#652]&f(y%[&^$]#|#_#4%,:.*Z%Dz#)+X#-V%Ny$1f#(%U#Q&535;3-Q#&3&-!&(+#/:&8%M,A/.&O9G-E$.-*&A).!b#%82R#.,%*S$~!0#P#1*,.K(%0$/M*!&6F)>(>:Q#.W#CNZ#@Ai#2B>H-31N+>/7)-&-/D5;5s#7~!@/&)=H$[#/3]#%2(.==G??C8GAM*E+.;.30m#_%50>d#+Z#9!/#+$!#5/@${#(;(D1@#B$m#(F/-i$(66P##:i#1N*7!g#.)[$#*$$)d#A#+m$Q#1/#S#+m#$N(39#$--&!|#^#m#Y%+#$5%!$-,5!+*$!),$+B.&Dg#+F%!!)&$./V#9%$!)W#.N#W#7Q#)~!1F7&#F;3%$(D$)%)!&%;$L%&3&%)$&*/!$%@-$%&$!%)$).+&&(+!)*-%&))%#%%o(q)!#$!&!%!#$!!$'],\n    bez: [15, '4Z$T&M#&+]#,60x#b$t#e$,5T#=0!V#/CP#6f#I.C$.I4::!!2*6$G;.86%*/*=0284:(b#C**+0*(,!:2_#26+AF2!T#c#%//!!%&*.V%n#6(Q#j$2>=.k$:&>2;#L9!!P#0_#(%!!=l#!!1{$#!#9!!I(!!%/6)!!2-4p#=&*!O+0!2(!!($Z#0n#Cm$P#~!!!6#%.6$2(,*-8!*M6;0/,=*(*S#*$2.2%64$0*,,%4$E(224=0?$.+*3!>,/**CT%D*#%)(!.I)0X#k%K46$?,(p#S$]%*$!![)*d#!!!-%$)-@u#,Y#;3-BH77)2^#8%C9V##K&M5?&d#!?4#-)+)F#-h#?#&6%Z#)?%#&*$P#*:m#&q#&@)-.!#((-##8D,>)$!&,%%&*!.#?c#+DM;X#9G$A343#i#4>*@&D;N&>?^#-g#!H2!!=S%I~!EY#_##v#^#d#w#Z#S#P%701,%:),#=)*3DS0m-^#/5%+-&9/)/%-05*>$~!1N,k#$i#.F3k%~![#$;4+&$+7#t$8T$?++$*^%~!+(-)&%1/+#q#$A!!-!e#L/6-++,D(/673$#$3Y#[#>H#&1&!B3$5*+)&35!S%t+=9(!KP$W&f$&/#;&!E^29$%.%j#I=#R#/=t#),N4)==(@d#-Z#D|#;e$Fy$+$Bh#U#!22I:+43&#0,%%d#M+Ac&:1I*$**C&=Kp)a$~!H78y#k#7:h$|$*~!!-s#r$$3.B.3*Dl%(Q#b$3>[#U#g*{(^#>c#-4e#39&5/5!9+7*35/,9&)(-&&.U#=F$$:;&+,-!)5c*r:^#+F#9*$&1#&,[#G$&/OL873L4c%t$S###>@-$#~!v.P#(!,T#8K(!!K&!1A$0ES$08#E(($%4A:%I^$-0!V#1!%C222(R%%+h%*q$2M[#,~!:F.%%-(.GEf%2P#q#n#g#x#;*34u%f#5,$%%$18X#k/Z*b%Z$6>8^#2!#/,%(@#B+@(!#J&$(FB$#1Q#HGQ#&$#;7&*F$&3&F5Ha#)D,Q#p#:EL4&(##&-5*+|##:,#&>j$:@&$.>/+-7T#D:S#K3>JF5@);/77/51!!z#/f#6+4Gr#P#7Oh#CD%!*,g$7#&,!GFK!!L>9+!),$F;*;.%,9+)2N6Na#Y#6~!%#2+4&0#4*%+*$%/=.(1:.0C4/:A*)I:,7Q&3.0:i##$,08J%>.14n(~#Ka#714c#!m#&&(&!-$>![%I&!)i$!#_$&)%&#N9p%}>o#}$k#?i#4/,&.J&+)S#Kd$HV$$&7L,&Q#1#NGW#!/t#@(;2F&)(A!!+,0.&(P#M*&:((0*#=AG=f#b#!&%#MM,#T#R#86$%*!00J,u#(P$q$U#s$$T#,P#Et#Kx#:_&Q67@;7>U#3r$%7(/5%/e#,$-Q#3S#/($&)#&&>u#+)4B*LW#1J5J@5j-m#/;)$9[#-+#&0(%7+~!AU#&&6>,70a#L-T$_$m#[#%17^~!e7c$%R#.E8n%{$AK+I2=#:.=%A,22,AE*6$O=G$.+0-='],\n    lich: [15, 'Q%p0y-.:.466:.?(E4=IL2;R#U#C,6.*/=%#;?=i$$%;-}#$+*,4$%)$5%FKq#;-P#(CG_#E42%#%+E6%$:%#HP#P#G$0A#)E%#$I)!*?$A)?-&$.3!9]#7=c%Y$@e#|$*~!){%g##$q#W#S#~!FQ#BY#09&##&4-t%g#25:+f#y#p#o#3Q#Fg%/H,)&&E/O;Z#-3N+r$*i%S%&3)33&D0!!W#,1J_$;&5B#&))$F19FT$#10B%!!L)!9L-U#G#&+]#,60x#b$t#e$,5T#=0!V#/CP#6f#I.C$.I4:&0l#Z#S$^$K,1_#-67=%%BT#*O&61)$%,*8Z#'],\n    wat0: [15, 'ET)S67,8p#@MIl#%E/,.%1KA:G]#S$!r#?R#*8$_#JR##G8=P#I.^$l#Mz#h#b$V#LT#+W&*.-Q#f$>D_+l)J7}#5x&7)RD[$.[#N/D0&?(.Q%}$r-H!}#n%FP#S#EW#8GC,IR#b#g$,GKX#2:&01,$P#,=$2-4#=2&?;1>#CR#(5I%Q$JMBAL8/M:n#2b#+f#K.A!r#1f#9MG&?1S$d#T#8R#*n#-CJ8/4#(C6*?!4W#%JD)&;99!L:B#7/[#F/99+;*)-)%5@F$L*@Q#J9![#:S#9-7>$J9e#!;*J1>~!#>1;3);B-%/S#/6BD&7>-+N1/&7*U#+B-:*(!=D!(?/i$@.)0@4+p#B0(?/#1;(9:/.q#X#[#0U#+@*+&@,T$)395F8!IL~!J(3I5.,%+%!,&+L*,GHA1?1,a#,-AQ#,g,1+%(/*#2DE&2765&?.T%Id#0x#$R#DO*=S#=9#U#-BOY#,D25#@/f$M52B)>;,>7/^#7+76Fl#;=+_#~!G-M-05%&b#5A3*+8m#OB#~!D6c*3U$X#ECB+;;X$g#y#X${(y%P)b$H${,T#a%n#q#.r#3i$c#G/g-W#j(|#[)U&o#p#]-?D!/#$V#F*9T#g#P#9%S#)34m#DY#=$;&$).52#(3-+%5+5J*J7$U#)#(+33%>h#_#?)2(M&64:@:#?>t#-:(6226(?589/1D;+@.-A1!365&/27%34S#%/A>.Ej#;_#%C-T#>*5:7#FE-!&2)*[#K!*+4!.58L,-/=U2w$)S#*DV###T#E?/Ac#),+)&,;-+1()4-!#=3;D.$,m#:7%1+%/C#O92o#d?C?)C3(Q#5;G*MS#T#/)/;ED+~!.L:BC)n#w+~8!3W#)c#89+.*1#))(+518.O&61t#.I>,B&^#R#[#:7:D$+413S#7+9.5/H6))/(~!AY#l#@6?9(1R#a#Z#N4J_#w#8i#:B!-:-)X#6?),0($GS#0HT#9(-=Z#(GS$9(13W#R#S#Z#,P#9Z#/!%%@27?>81()2JIQ#(!+R#$EF%36-Er)o$(#GL.0P#/,-!1I>4#A=/AJ4F#&]#3Ek#R#;(;Z#98J0Y#99H4Q#+/**#3!=M):D(*$5:;C/ES#j=/.--.F)B.f$L11J=1#1/12+!557.!&/H(9B*7*%%80)V#E,G3R#8.&??.,.&f#12,h#+00T$U&:@)Y#(>:76!?7*.&.Q#R#%Z#Y#j#11,h~#g:HNY#f$9$H8+,E.0*b#~#j#g>u$$)q##}#8?/;-L6S#!0*8)&*E&f$Iy(b#/,(21/@:A*@#Y#;i#1i#.a#@d#8T#/O%l#:.$GD_%H.7NZ&%)P#k&Q$3f#9/@;l$u#>W##;1?*T#$t#=.6(R#8&)Hb#8,2Q#9;=)#/$0P#.*j#7P#.T#3x#!]#9V#&M(_#R#)(Q#HQ#3~!#*B{)X#*C0i$~#6_$);7-/s#j,,!?H(N4>!57!!*353**v#>2^*gD}-t)4g(#~+p#d$EU#GDR#9|#$4:0#.>/*X#A(#*+)7.$r#;y$2{$7V#8Ow$^$h#p#P#n#.#%23%/L;H{#X$j$R$H[#~$S&7X#HX#6,(*++5$+=%7)#W#r#FR%,g$)!1h$KY%Y#..M)1F,E--9(+]#78F)&61Mc#Es#AL;#=)?H!31)1E)$2F*$8.f#V$g#:85C&:;(H/p$:X&/h$Kv$-%&03)&G345]#)1/$0)&U#Ob$.U#P#g#d#9$7359$9H)G@4>T#99)@P#i#,&:4,&&5@5)D1&-5N31;:V$$o#*L-@S#~!9~!%LB(L-1,Bx#@85##=7Om#O$P#5(-)(97!#45E4(!6-(-A3*51-;.3-);%g#C>A0;+-4&!+,%R#71&@c#2q#-DG%..8+p#k#=X$.+(9E12#,>T#+8Jd#G.$&/m%|$S#@N+s.7Y#e#%&X#_#^$*x*.j(B2.*47g$f#]#G%%)-$:/0c#%N+U#*$+&*Q#,&$30@$52,2+2#+5(/1#!07#$(&+)*$+A$#3d#)(;y%@9+!+W$:f#([#>y#&)-%/#2v##U$Ch#^##U#Nw#)S#;E2O55)9(9ALAx$/4!&.>.&Jz%.T#4C#/*$(#6473/!&.=T#!8@KS#P#-6#?)#&@&*S#.=!#*!-6&*P#D%(0(-:)!H2#+4#476Hr#1M$T#@+9G!?96#63((*+$&.,.7A.AKR#&07(#(X#X#2b#=80:!4;0%?+8.6+G2.%0l#G4:.T#.0-X#HM)Z#BC2%K1/!(/..t#;i+o#p#s/kJ1).9)3!7%+*0(+#%.),#3/#-1(07).,&&2*%0>)&&.$+075!$0++)4>.&C*,5=#9+&*J65!7M/9-/2+-&./),36$23!*?%&%8O,_#3600;/),((-)-,(5(%$-&(/&!;(+0#%7+&&,3!&0;%#,A:3C9}(Ry#$:>&!58F+-#>(+8!*59>.a#63#D$C4%A7(*7E#]#Ff#%8AV#_+CJ2W#C3$L*383&;=%!7352-0#=?!4D8%4)652)=50IT#L/Nl#%_#-,;%9)--7q(w()O2O)6638*2+6#%/-310-92+#1R#@=~!!3+)5.D&,T-R(G:&?*C?$07!U#DB>%o(c%k$$90>l#%43.F0--H!h$^#S#$3n#Y%*+8*#/5-0!IFE/014#2/636J&V#H6N.k#_#h#?4A/?F:+_#6:!2M=?GE06&T#Q#Gc#2+6(2BP#52*,12)?$.2(5R#S#b#,A@!D=:C%2Q#R#m#0Hu#k#E#j#A(2/A~#P#,8$KI/I?(4+KK:(GC:GO=2&=6%GV#4B,$4*B7Z#&$.8$4(I8066%(52-AG6.^$.S$Ek$Z#z%:t#&!.l&/B(2-c#3i%m#W#/T$/I0T#!((2]#+U$0(1&-I72Y#1>%!*&);(J7/B2^#+-,)(j$O(c#5-(N-Y#@Y#8@)N4)2@0,0C0#.E?AI%K+MD0H;+30c#ND~!(;B&B,D89A.6B?#8599!.3&LQ#Q#@Ha#$F5@^#FB?5(7$D7H&@EQ#+LI#0M3*/T#*@%+O9A;31P#>,&?Z$d#y#.BZ#w#$52Bj#;!o#P#J]#3,c#*i#G)?(?/KDP#.z#>r#GQ$Bn#4V#i#^$(**)*0+K(=92D)7W#:B$1H@1*J1F6*,3l#U#!!,E.7?/77%Gq#:5-S#M@?HP#L*7.&#=/64#.H$@=;!Y#@U#$;Cy#Q#g%.5K92v$,;Fr1e2F9D+g#,@=&Ma#n#//_#W#.>!9|$k$$+V%|$K5]#&t#AG$r%T$z#;(52/]#,%,5,B$;2--u#8Q%t#!2)!%/J0W2U2k/MFX#R$p#V$%#q#U$[#S$>=>.N*w#+X$BD$;0S%o$[(S$i#(]$BH$u#:~$:Y#!8_#/G*LF[#U(+U#6DAY#U$$.4=*K-_#*]#4X#4:?(R#B6%Mb#Y$T#,*)02.v#:26O:x#_#w$g$X#C:#h#LA&?R#?j#GIO#A@T#5=.2E-!-D9+Q#2BAo#&H1Je#99N-S#%k#~!z$b$v&n$!-/-[#Da#;~!S#-*%=?E?0*2&2X#E(*-2;(~!B-BHS#>+9@3&&(#+HH/@N=MF-^#3B4m#5Y#;D7e#>>y#Y#D);33F@9L#F:Y#0B$l$Ha#,>3;S#Q#B+#.:).B(9133,>1/Y#O^#(c#&u#Hg#La#*@;W#MD%Q#)J,1.~!*r$BD$~!1/5+;(+1$,)&@)!!5+!*$-$%--+*/$;/(%0+0&-@)53#3(#);+!*$-LN?557&9,5!/I5&2##)5&6$!+5&6%(-+&,$>)&$-K^#3-/#B,3+9;$577*!6&5D5&-($480+&.:+FQ#B/3##K@Co#2S#15>B%!.5#U#=9R#DK#R#+8%46%%.$h#*A$*-$-/5i#---4$/1()52L+7*1+/5&)1,F*/4$,>#g#.U#)+a#Ba#(H+^##F,F8@+>2>3$M>29#L1S#059!;4BM)l#&*6?#04?5A(?7=+d#$Z#(%7/;L7%35$/,7-!8@($*$)%&?)&1#)%$4,,-6##%&0:(2..=$2O!f#E/Z#$f#-=V#!AY#E/(Dl#1&1#$((AQ#C5:%$2(#6HNP$>3-@BDD++-0^#;3&~!?N$B9/m#(@0^#)u#g#9B9!22@91@7&;,9++5(DB/!L@B(g#>5J.7);F@c#S#~!B/@0T$JL61@B8!E-,*/$BGB((*=832&U$I=3E0GC.4=_#8?6*?-.$0*2.-b#AE$I?,#0)6,66%:-2#((.=E(Y$S$Z#(A/n#+6,(GBK*P#861Z#G.EG0A80Kt#/M500,.HK@2N8>2!*)2)E/%)/32F-5#/7/;(5AS#*=-8!!+27:+:.$0*41C,0!*-(~!2+(3$)01.):-6/*x#LP#~!W$}%(/97@+-/$))#8+492$:>%,0&%DX#a#2)20?U#I/4@E;s(o#2*1v#*EF&{#S$KQ#J?&+F(-7:)R#%(/,!$*AD:~!&B,~!)92#Y#5#)R#29-=>((,&&..,C-4;*S#6#(-+;9,+),D=+X#6I-0429$/(!(LE9?Q#,%,E2!*B6@*[#2@4&)>1#)0-/.-=k#21#N:)..!0A34#8.0==,;^#335!)-#5?L+S#.B&H-+/4#O)27)7*)+*3)~!(%%9M^#$D930/0~!)+*$(@)F51&3,-)Q#HQ#2()3,*8f#,*)86R#R%U%A-@,~$X%/M)_#(v#,A2#6G-!7P##K2K$R#6E(E:G-=4:$h#2~#5A(:7Km#R#,(+h#-0%h#3&!9-/B3&85#)0.C*#+IE)d#j#(E7M62%I?,*AE#Z#K(4&0:E$O.4b#/I!288.C#:8T#,R#$Z#E0t#0=,V#V#X#t(S#t(:t#8o+P*=CKS$M=A!y$9~#@O(r#=z#)P(P$T%r$E3{$Et#*LyNz1W#NQ#C@AU#0#7S#FF9~!/v$0s#?L(k#/_$S#D$L,$+A-G#K.r#Mf#*e$Dw$1V#,]#P#E0p#k#8-4#P#IET#T#:8MK4(.U#$@B#7c#DQ%o)a$/F=@6Nj#U#,5-/E@$-,/D&g#F-@y%o%c#m#u#o%@s#W#_$!7.9.+7:$:R#W$Ax#p#Z%(6h#p#t%n%*:6%C20,E(/4*,&,,#P#1:D/-GF!BGH8#b#;*A96B%$..AIF)4,28U#R#&A>AS#2+,J977#)KDK3!;>.7(*/JE}#89:+27#U#,1z#n#*)R$u#4F2$2223)W#Oi#?7C#E;Z#$?0414#%(10!8>*4:2!NP#{#&;r#90&r#/.7+)%08)OQ#P#;z#J!)K7=N=.6$#/>Q#&>X#B$7/!4~!/D@@=&6FIa#,!A)%(#+#3K;04?1I~!C'],\n    riv0: [15, '(b&;,/%H$1--/!!LU#$7*5)>(NU#W#5Y#7D2NO)X#H)V$y#2&$/0J!N7>(!!;N%F4F3g#,!!~(W#v(=b#2O?U+g)6=I|#6CC!!_#(R%;v#>A%Q$?K#E&_(T$X%v$?/4!e$Ev#*O-=367X#R$l#P$j#e%29l#[#f%S%K1?!G*M8V#$A-V%{#R%H*p*EM&n#@m$3b#0j#V#?.(U-g$m$x$.5*DQ$g#,k?cHBU$Fj%.]#Gd#(E+616NC%!!7I(P#/0y#/*Q#(k#-R$9W#7T$k#F/c##[#4P$%^#2/!!H1~!4L!3F-i#-5~!-H3S##F+-($!!R#y&%!!k$@_#>$!!R#+%~&b#e%GY#K&!!6(O!6.$!!?G+!!CK40Z.6V#(E0E=~%X%4_%s5@T#;~#,g$&t#5W$,d%7O~$~%@j#T$R%FR%,m$Kv#,R#)KQ#Y$$f1z^#@H-y#5Q#5W#/>!W#,Z$Nq#v$!523!J:!!8+=BO7=94):(l#l#:(C+4N=B0+2!.*,2$G(68==.=&0-6U#)!!JF~!@5;5119$!!Y#9(!!(.202#2)4Y#9z$q#Q#0~!1N%@);3JQ#/;/-~!&[#7Y#%^%Ji#,e%q#3$+!!3^#i%Q%,_$MT$$39J)9%b%c-3.e#v#(DKi$l#]%o$O:E($,$P#($!!Q#))#&X#H=&AR#?h#KO*!!M$EBO3=00C?.&X&-;$H3U#o#&!!&//+W#+(w*v&c#BR$e#c#B513[4}#7E-K>Z#.4#6/GDCF(-0-]#IV#.ANV%!]#HK0.b>-/-$NI1(F!@(Q#&3&Q#9R$Y#a#,55+i,v$W#9+#-2;#)+-i#+/(!!.&E,?6:G&p$U#+.-#71+!!J/LL[#-U##W#g#;/>$(1U#v#LOJCS#t#a%%_(p)x&^#y#D$!!U#5%!!0,G*/U#5JDu#U#}#Z${({%B3e(R$F${,V#B*r$f#n$=Z#]*j%*+!FE>((!4(*,$232&S$I.$0/6*X#MIr#4:6(K-=4+d#AC$GA2&E,24(:-4#2CE%8?A4AI6.d#%:/l#)6,%EBM*O82!*/=$:..=%CE.?:2Kp#$8-8-,%p4p+6KP#C.!!p#p#6d#8=]*h#8?(b#2G0R#,2I?%]/R-5Q#S#>(!!/L#W#);g#c#*!!3q#GU#C5(1#q#X#W#(!!4D(@%;&m#-!!0q#9q#)N>S#+j$0[#DN$h$2{#%!!V%c%A+&v&62C*Z#6V#&V#g1@O)8,~#'],\n    rail0: [15, '%/[&:S$.Z%%($(;$Q#(!!#:024,E%(!!}$#m$>Z%r$?3%#!R#/M*%A$y#>g#~!%!!/5{#e#(+293i#Fy#s#S*W(%!!u%r$S#>&~#V#[#Jc#>b&-6!!{*7b/R$U#3J9B@;DJs#LNY#>Z$9S#D9Bl$r&LJa#DL+y(7Q4Q#%i/YNO!{1]$&!!q@f&_#&r,8$(#W$C%I&I1?$%+%H2;8($#-=$?:f#0d#*&NG_%=Z#Eb%(f#:Of#|#%{%y,9j#}(Z.&!!k%m);:d&T%$!!P$d#+!!U#G~!0h&)B(l-h(k%W$Y#4&!!b&_#g#f#u0W-,uBo>[3X>=>G7],q%M;r*|)KN|(x+&#&0B!D~!k#)!!~-T1>L9a#R$^,/X$()X$)A747#~!+)!!3@$H.;d#y#!H(!!g#Q%/Q#5U(,D%!$2~!!>%&+W#Z$-_$%!!w$P#U&W#$E$e$[$$~%U&f(|(+k#[&*BR#a#=a##a#?]&=@j#7-!!}&[#T%3V#4n#R#_#=M,|#(84.A%!![#n%+V%(!!18LG>Z##2*2U#3P#P#d#+U$/0Y#,-T#1)#;)B#S#AF%F.7$;1JNFk#Y#Fu#3}#Y#v&e#)9%[#U$#Z#R#o$22P#4,&!P#AS$_%=8r%[$T#KM=_#*R#$$6&f#-%+.f#&C-&!!C&C1e$q#%!!Q$i#|#3&>!Y/l$C9.F)!!D{%%DAy#!D/D(.)f#F2$M2=A*!!8l#V#O4:Kd%8?Z#Z#*a&V#/5&9?}#&}#3FJJ,!!71>&e%IN&3->FU#L>o#*a%Hp#781CLGa#V#S#?~!(!!DP#Q%c$c#O3?*9,W(X)JFL/h$$~$*Q#2&$!|({*T#Y#Q/|)/u*c&_*]&_#5K,m&]%A*=&Q$BS$e#IS#:c#ED*W#~#,Q#6>S&^%~#Q#:7T%j&+#!E@E/r,e#o&2}$4m&-K(%-^#7GL4%|#o*v)m(u(P&$!!r)V.$(-V$j%%*/o#q$c#d#%FR#W%^&|$t#+!!z$g$[#v#/R#;Ou,q/d$d%g#h#%v&_%{#KT$E1Q&U#q%V#S#!~$/9%30D_#;v#NZ#B.w#+;%y#h#>.(!!=b#f#W$E2]#+$^%w#S#o#(#-;$5+L~!g#3.$!14D,5]#.E:Gn#t#0I(t#;I>6%!!u#%B*(X#%D#7./8#A&!!*S$8T#]%V%2P#Kj(G]*/6(n#KP#Ez#e&On#A4W&h#n(a)R#p#:2n#8C?*2C2h#*[&,684:(:$(y#=h%S#S$[#o5m0{-m,(!!G>I1K&O($]#8YET1*g#3f#:08NX*-41*a%K&}$s,d&W#s#Hn$;(%#~$;o#BD&{*E)p3c#Dk#@x$#U#=d$$e#(!!EJ4Hj#V$h#w#(!&J,>&J;3B$!!f#b&)!!0S#)w#%B0JOo#+Z$_#8p##=De$1Y$+01*q#(%!!o#$a#7$q&p#=_$$%(KV&&!/W#u%o*i8g#l)$##;l$(!!g&i#r0R$U&5e&k#*!$I}%]#P+e#m+;^$>OY#A,l#;Q(^7Y#o&>r#Bf#JX#_)T*Nr#5X#%o#f*Y#h%/w$)$0!b#>U$&p#(CT#d%(k(m-)=16s(j(V)f,&4>-C(Ah#|#)LQ#T*i+n(d(b#Cr,f%Q&z#($!Z%l#E=V#f#*T#$%W#(_$/!$(g%>HN-H,>=-:1h#(?2?:2A*$!!l#)%#!g)P$V,p$&!!E76F#^%)%U&%R#4C~2j4e)p(})]%(VNy#7^#d&[2)e#,]$1(s%!N5BD3J#>.787n#18>4D%P$JW#Dg%[#&t.$8o*-Q#;N$Q#e#^(c*%(,R$r$|+P+&Q4R,@%;+~!~!/{#p*%M=Iu$h#_(S&?A4E(Z#JQ)(]#5|*!~%&#f#%6.4_#M+q#g#&85Gq#p#>V#i%c&o#V%)P#,r/jq#){#.B87K1j%%X#-M7Q$q#(i#V#j#[#K7C$?.(#!8,8!4-03%q#2=?,V#$R$f&}(]&*_%k$k#@~!$a(U$9:)=?e$%e#y.LQ#1u#&3E3/g#5N9)r#V&/|$BP$)J#[#8m#%%D1DHH%$#NLNU#4!!f&x&BQ#e%t+g#W(b$s()D!W#T#r&(r&){&U#g&#d#b#v%T#c$d#T(q$y)6Y$v%BH+;#B6>x(V$j#Y#r%[#CDKs#R#Fk)l$E)Z#%z#Cj#0f#8C!?+(%!Z-d*q*z(i#j#e#i$(!!-A#f#.:EI+P#V#[#[#3-N*B=-OGS$(v#$BEG_#&c$Z)Y&u&~#r#[)i)*9;:88(h%FA%Z#8j#1$z9u2S#g#6)7*U#I[#KNE7MW#T#>Z%H:/e$}#I7g+Z)05*9+F9;R&Y#c#*c%_#*r.&r%p$y$[#?)=,46,:$3o#m#=(!!E98H!@1s#$!!Q%n1&]%]28r#:0?&(i;F0B85?&K,(!!K!f#@=;0J(!!)~!BJJ1Q#(+u#=y$S#_(P&?3G+w)Iv(6p*]#,!!Q$,p%>r%5m&Kr#&M3E;{&l&*32q(Z(U#A|$_#F8BA^#t#&!!])Z&[#9T$5(x@e)L7;H&F0c#&8o7[(l#;218&d:bOp#$.*6=(!!Q$4A&f#;f#%&!!ZCl%U#-j)D()n,K:2G)IBG$!!Q$w#$bd$pW#g#F-U0zJ)654S#K@(X&c#s#+{#9W#!F0&5,~!=>(d&9'],\n    mot0: [15, '&c%z-+m%+H5J&h#m.P$~$$>*m#$!!.}#&!!*Y#2U#p#t$%Ew$d#Ho&{#%e*[25r)+S#::t**W&1g&,T#V#j%$o$*X#8_#Gd#o${$x#y$Q#}&4x%*8CAh#0K8|*a)AKCv#Kt#4.?$T#u#~*7Y#%^#9q#Cr$4@?7t#1V#&w$9G#I-O%_#4KOc$b#_%4E.f#MZ#+C(=4CI6,G#n#-t#!G%G4IGC6Q$g$MI2,A(.*Op##:7t#>]#$:(M?W$%P#/T#7IFAh)d#q#=+w*m%%B&>771H4w#;l$%D)n%Y,GY#b#Dj#R$E;p#_$$b%m&&f#B{)p*|%W(k$q%],R/*;0P$)7>B+55~$,U#k$w%CJO@Z%a#GHOl$!~$(J4@P#S#0H$a(2a#6FC>m&Z$GDe$u%v#h&(+:6@=5C-R#!,m)7S#:H*Q*3k%Mt&-w%9l$!}%;Y$g#)h$KD(T-;N0y%S$Y#0r$5w#&n&;W(Ep&&|&9t&&q%%^#0g.v%[#,t&1u,6U#3|$R$J1R&7q%*]$2t$If+_%D#n&-N,H=;OR$g-9t#Nv#Y%[&9O&K.S-;~#n$}&&O=]%=h#MX#a$v#j%[$IE:Z#4[&:V#j%W&c&|(u$h%w+[+ER#^$z%s)n*m$x#_#?b(X#Q)A[$6V(|#e$b#z%Oi$T#k$t#Q$Y$]#~#Q$q&Kl#Z#b#b#MS$Eq&8m$?z#E})f%t#?r#2z#%X(-z#%~#2d(d#Y$.g+$_(:l##v#+c&Dm$!l#*r#4U&V#V#:R#&$$*X$@%oE|$>g#Da#G:OH^#~![#x&z&~!i#@g#3i#+s#Ey*-Fe#w#$B9B#5?B$;;;k%T$HDS#7;9Li#b$q(3;Y#Q#-@)g#-/B9&o#(>e$n&Z#k%,/I3.p@~2/?r$U&~!]%$E*T#6My$P%?P#,O*x%&l9_+Q#1@!k#E,##U#A14-:W#u-)b%j#e)n%V.:W$({e#F!k#6a#AS#b#[#$52h#g#)e3e]#R%(z(r#x%/g$#f*3%[0~N_$P$3>@#-)^#9J^#L{%e%[#>W#-k(#B*Y#CF(B-g#S#[#5N$f$,^#+a#;i#S#B1i(i#u%7~!1J9@B3>&H-36*t3Dt#-l#.b(EZ%!g$3t#Y#v#;T#Bj%>O[#_#c#p#D6V$:Y#?783KDI3q2U(g%T+9;Q#9;H!>.W#&i##y#-DHW#-J%JAi#$D/H*ba#i&T$$^#/c(u#q(X$^#&e%0$eo%u%f#A'],\n    mid: [5, '-n,^+c#o%&Np#p+#Q#4R$,9|%Z)T#s#?D1!!m#Q#R$HV-W*x$s#}#@w#+w#J]$9~!!g%IB#N5JN%#)T$S%W#[#%!!S#b#H_#&!!BP#U#i$Lp#&d$[&_(t%46,C)!!(h#e$b(8_%+Mj$s&)!!Y#_%S#r*N]%c#Q&;^$&v#z*D%>.~&v%&S)V&d(&g$%G)&!!,M*(:%&Kg(#5+_$$s#,!!%|$c#y%4g#_#g%]#T9(+M5Y$*&!!4Le(},;_$+g*m%;%D&^%Q#i#!^#/r$+Q#0*%d#c#!B&}#~!F->!3,-!!i0}&j&-]&5{#/L/S#@[#[#D;[*a%3>Bp*2C/r#W#m$>h%!V#1O;8)o&(~#Bf#6T%Z#~#V#o&e$%4&k&q#(}$%m#)c#$!!)Y#%)#&g#*q#%!!,[(:{#,Q$_#q2{,~!HY%^%L@W#9l/P&F7s%e%,}3vKP$S/X$g$o#i$U#V#r$a$LM1:g#a&-!!1I!0CS$:T#;p#7~#In($,Q#b#,q$~#~$r(HKX$v#1A(MP#{$,R#t#Z($!!i$_,*!!i$y-52&0!_#2t#X#q$)3^(V$.^(b#k#=r-u&X$?$~*u.v(j%%A4C?0K%n(j$G@x(k,$2@P,i2)&H$o#+Y#Ba#?R$7h$,!!Hh$Ge#(7)s#]*b34U(*i#0[#(!!=@m$^#t#S#d#^#/!!,&27[$U%(5,b$d#r$T#w#[#v#e#o$/o$v$t%%}8]/q#*k(Q$$!!x;T,ET#_Ci/#X#1p#~!I5A)G!_#6I?l#f#T#:X0k$g$,z:4:(b#:X%d#x#R#M0T#!{$.f(CR*8t#%n#&R%>O$p,R#w+d#WHQ)P#$GAa&U$&-~%z$v%t-X2FE)52a#NY#;o#~!P$[#/5%&*#9f%q%-#%z&V+Jz$37c#Fr$Fa#BN1h$-n$%(>n%(e%&;$b$/T$$!!%^#$!!v#g%$)!Oi#$!!W$R&$!!Mm#$!!@S#%!!Nu#5-$!!Q#3%)$$7,F(}&V#.;&L:P$?s#-!!r#f$i$W%d@iCr&a(_$l$T$T$r/T1i#y#P+r+&j%U&o#Q$c#[$t$Y$%(!S#V#&4)Z&k))Y#e#h&,q(7v$9o#$!!o#T&$n2i&j#m#%!!V#L$&%G+h(4t%4%!!]#*=$$!!q$,$!!V#(&!!q$4:.*6)R+Ki#8]$l#^%b%o#P#+!$n%Y%{$V%&!!?=h,s-m$o&&2G(,),NR#$!!W#P#(EI)8W#|#.I$*$!!3b#%!!9p#,t#&!!4R%)=@K$!!u$S&%)!b%R(h#g&$!!g$~%$.2j%n(+!!S$V%d*j(}&Z#,&U([#c*k(b$i%$W3V(b%r#%!!y$f#i&|#&&%P%n#j#P#?=$!!S$k$$!!s$x#&%1Y$r#h#j#k$d#(n$m#~!Z#Ln#@n#/,$%O@S$$)&)|#$($W$!&+(:(T#=[$f#%:Z(x&Z0/R#*p(S(u%~!t$k#j$g#|&w%s%q(U%g*&5(/-*D9X$(.&W$R+]#c%=U#.5$*5GS#(##*-0&Z#2.$%!!67_(^#$O-a)/$3a%Q%q*%!!Q(|$[0x-%B;w#c#x$o#&!+~)i*D>_$Y#$B)g#9&!!e#F|$a#z$%$3#r$o$%%$B>o#_#&HV#5=D6l$C*w){&a#T#k#P#S#:Q#Cp%X$b#U#$!!o$l$$$&E~!.8GR0e1$2i%s$!0j#q$=4Z,k&,2&=W#h#$P#f$c&W$$!!l#l#$Q$|#GE$**^$|#$(([$z#$((w$~#$,([$l#%*(~#b#j%j#%P)c#4H#F$U#u$r$s#(Kk1o#%y#6k(q$]&t#,96i%X#n+V%U.T#T&,y.]#i#6t$_#5%(!!a%Z#L:q%P#y#M%!!1!r$d#*$(X&|#i#*Z$5i#%J,j$T#,&+d#|)f#}%4e#0l$-j$#~!n#V/Oh)0o-R#Lo)%b#0K8Oz#a$Gb#:d#Gp%(u$)u$7c$B~#$!4[#}$$-*e#y$(p/7%^#2[#v%i*.5)(*C/q$+C9.>?r&&+!([#*5./%#$A-j#&&!,i+7p##u&4%%X(3k(*V)$*!%|$$!!%R$$+~!#o%*,!&Q#-J1h$7k#Di%X$q($e7U=~%c(%%)k&Z)OS#)!!p#u#d#Z$C+V#&M*&!!02Kv#..%!!:#T%W#$2)k$B&%)^&)c$2b#&&%$l(/R(&o$D%{,R#Q#c#~!_$$c#X%}$v)))Q#@l$&W#/x)*Y%$W%$!!-T$)a%1S,t(a%z#]$Mk#2F?$x&V&p&o($H,n)a+&;Gd$Y$L=+!$!!Y#?+!!92/8&Z#5m$DKHj#HA$!!g#T#$9i)a#f#$!!q%[#%1&d$J9$$+!{#)$H$l1S(%!!3-i#7$$%U(o#%7+>(J$(!+r$/~!/V&j$HD&!!/-5&B3$dIm.(u#,lAp%CK=:S$l#h#P#}$s$f#V#X#]#U$R%%($.Cc$v,$!!Aj#$(,K|#$2I=]#$*4R#^$%!!.M8O$%$X&_#%!!J*Q#!)!!3!;*m#P#k#p#_$|#$t0W#3S%%w&Q%Gn#Ga$$!!2R#$!!=p#$(2R#b%$(46b#$(82d#%,M=m$#?$)>e$9%!!R#/U#(%Z$~##h#2z#%)Ae(R&W#e#%P$e%/71[#$+>;m#$$-/i#$|%{,H[%$/FU#f&%!!+9(>%j%X+l#~!m&k#$.&Y&g#&R/t8%E*4/W#$Y)c;B_#$,(]%S$%!h$L-u#H$X5f*{#P$$a1TC[$$&d>s/u#Id&k$n)p($r+Ge#c%&$)P&z++J)i#&j:f&Q$~(s${&R#m$$%&T#y&.mn#q2r#a((J&Y#Dt$/w#&0,d#E}$#Z#w#~()%!He$BO;:L:u(o$&!!Of*#G+P#(d&9z&a#p+Y#i#BU#&%w)x/b#Kt#A$!!k)[$(0)T#682.4KS$'],\n    wat1: [5, 'Y#|Be&2(%*%##*$(*(0&0,!(%,###$%*!,[#Q$;*+%!()!!%&)&#$*>*&&!%$&-#>.!%&$)/*&!)()#%?32>)+5$#$@1&),9!1&&$&*#,k#.)E#*&%(:f#P.@)D@*-&+%&%#*)?~!$&(&)+!)%+.-!-(+0(60*((.Jk$)*~!S?PO7+/-+J*5.&*,4)#0$8*46(,:,#.4%:((%0&8-2/%),%(!2+?.48((*)*-#5+/3#Q#1D#5,3!1&--+@&!54).3&&V#[$z(+>@)&)!/610!.(02*A0(20#0+=(*%6$:%.CC*6#P#16$0+4*0)2))&(>,#789+3(5&&43#-)5%31)5%)!)+)5%//D?9$+&);!-+$@T#v)k+?D4)(%#%7*BO501O-,-%B$/*+%&(;#).$0*:$*+$-/&$/#)*)&$-(9$9*;($%%&2%*%!?16!03R#)#+&&F#+&!)K#0&#>,>%&3ZQ$w..&t#)2(*.0&%278S#!>/>$H-)/4;%#!0-f*{_#/7;75&@2$0%(0*K.2!U#Z=y$5$+(%%!%/)+#~!8n&t(/0$$.3/2&${&]):;*3#D7P$+539n-~+MS*r#s%2(N~#+$Lz#!CBZ(6]#,,#$n,W+4:,88Q$=Cb,{&I4]#*A&P#>b#+$,[#*^#=J%H+W#7Q8~,xH}$B!6c#2k#,X$!~$@w%e#Y#)W#!q#0s%_#w%8U(T#N%p$+#T#R#x#2E#2$O-A9C&)=c##B&9-;k#r$591&o0@g#*P$?^#CD:e#h#f$W&a#e$!:%.28(&2C)#*0*&2V#*O%j#@k$$O=b%?Y$:_#T#j#R#42#=!O5U$i#4%4!:*GA8M*P#MT#42V#I~#?R#=M2j#OC:#%9A!%42($$#=62$#&Z#Em$K#$=*=!.2$00.#$686$?=z#P#P%a$m$n#?A!%P#E_#X#p#Z#(06*X%P%82($A4!(a$Z#Z#,4$~#Q#%)d#HP#DC/:&C#Z#S$!2Y#P$/+5&H(D0s#V#;C2,A*6.G#8,66Od#!*V#t#0A!?>~!#&)-&!@U#JW#13F>^#7g#-U#%F*9&&,H&5;>-]$Y#~!D7/x$l$n$w#W%r$r&z$q#F%)i#Dl)c%#@++$%5/&&#&+-T$S#o#S#J7&%#)5+{#;#&&!!#7)1+@>e#{#LD5$/?$6:T#-(*.,!C:04&%:Mx#P#26*:!2/2%0$%A6O8z#]#2:9=$4&(&#5/&#/(&,@,9+!&h$u##@Fa#>B93#7/-&/)!J^#9#/&7-19-,$)%&&))&)#U#c#5,B>34&)05&))%))#&a#c#/;5&&&#9Ja#L6{#]#)1l#Q##%0-K@#/7k#7R$*/Q#k#$3(a#2Y#Gq#+^#Q#z$Y#g#7FDT$+L#$;Y#;Ho#^#R$Q#k#Nk#a#U#5;!7%o#W#;@7g#W#Y#D5N)w#,X$l#V$Gi#*R$&c#;>$7)c#Dw#Do#+3&$$~!!@%R$:@$H5D@BS#Dm#/7B>c#7Q#Q#7(%2282E9I-%u#.e#~!;@#&-$51%-,&-&$/%-.!#%#*)0*)([#/3>5-!/(g#Z#3=#(&&B=B2[%!-%/*!()!!&c#$S#-9%>&@!H-e#~!q#7Q#D5$!%k#^#&&/#k#D@5//w#=g#%D&>--+!+)///1+#&&)&#$&&#))(*)%+&-%$*J=a#Z#H8a#0H!}#3U#&l$EB0#.+%$%$+D.B$).F&;%&*)-/))%&-)$)!&*1#---,+!-)B-a%>J3>$/-1&&%$)-$;#/$!%+$)%F)1//#[#1Q#5;;3D7k#!)0&%1-/5.-$&)!&8!(/-L/5*)%9)&/($5+3.))/%$>$=&>$&&!/0&)5)+-(&$-3#5(-4+)7$>%7&)>#).$600!,54)=53(+!++!)((+&&&%&&&%&$!w%,&(!#%0&!%-(0(C-%&,(%$$0-%J*)&,.0*A(00=1&+8$Hm#-!5+c#S#3&!N=-2$4#(%.$:7C1E#E.P#A,2#0&,/,&.,?&(1&H9515&^#!!0T#W$.4?=#&&)%+!1%!%5,)C&M*2*:!C5.!A96$]#@~#@G3C7IHM9./,14BEU#?@83M3E2%2~#K=!8#?,V##:,($:(K40&4#8&^$;?%.%Q$n#K24#640($#I~#(h#(2!~#1T#(,)!)=%2+0Dk$(,$4i#S$)8*,V#/(-2%E%=9M50$2*f#Z#l#E.0=.Q$f#l#6t#T#r#%f#6G)X#3Q$$G+G;05.+.3%3!/89$!%&(%2$8).+!)$&(+(%*$=.4-!8,8%R#%%]#?R#/224)#&+;?[#8m#.##&!3-$!&0J(W#/)w#-$7+>!)(!+7&!)1>7DD#p$($O[#4D,a#/J)L-!!&,$7}#11H$Y#7BN1&-1-)-7/S#8&$37#!7-!#5.;#/3/3;~!Q#/7-c##>($)1#5,L4D!/7;F>)#%$c#W#)#!&5+7$!%$!!&3!$(&))!!%&$-#!%$$;4o#A!%k#2N1J+95J;->37&51$@*J-B99)D9B3S#+B*N&F.H-;0S#.J&5/a#;/-5J+$$&$3339S#$>(-$+*7!/@;!+)##+->$//+!&+#$)+*-+-#1L@5>F3#)2+$153Bu&!.(.)z#!-?#(2*0.22,8.I%b#-T##4%*.!0.(=!*.#?)G!R#9P#)0)t#&E*6.?T#=!OIP#$R#,l#d#b%CX%)!%0%V#?M?($X#G(6$K,4*(*8(K$%,_#!.)%#2,:(#?V#4~#0C)A#(22*2$#08|#Q$#$?0I#u&Q#,)r#3.#u)c#0)e$-6(r,I(/(.u):_#,v#:.$(*_#?:!%2?4T(Q&(,:4,%Z#P#A?X(Q&v%V%IA0(MG(*S)y&?AR#j#2G#.h#r%Id#OIR#?_#0b#!](U#u$1X#-a&k#f#)K#l#2]#4Y$KO,C(R#d$Z9(-+)+!)*)&!),3155*)27#&%--!//*#(1!+110%0/+&+85,!0(%3-52@8$6*%$#5*$0.%)($*,$80%+%-400!0,4)0-#}$pT$c*F,/8,z#*)#%+(:60A%0#E(,#?7P#W#b#+6.?C=(?Ij#=d#!X#,R#9!!*/%!2,%8&!,Lq$,2O4EI48Cb#=b#044.6*6#C/t#!K+~#*M0A(l%f#r#0f#(X#$.&d#[#_#H?+A1h#-p#4P#6C6A=6?.=4Z#=?6*M(:*?.o$~#o$j#l#Z#022?f#h%,$#(-#$,.A*,.%2&h%R)CQ#Z#W#I@b#Jt#;j#$g/:6&49!5N{#Fy#)))1#)W#l$HU#NQ#t&w%u#c#+$a#U#)+S%f$3+l$R$-1W%h$/&U*o(m#N~!9d$Db$/U#-|+Fd$)1)z$/w#%Q#*e%A)*s%C5!Q#,!(T&G/(/{%Q7k#H$%(Z#4IEA:2b#$,-#D+>+3LfW#hQ##a#i$!e#K!6-4(:)6#6&#!*&((,#O/T#-23,S#.5*4l#)85,//5>1B#!)5&#$+*-(J(7:7M-%~!(70-!F(5(&'],\n    kh: [2, 'h#j3vBk$&w$Ah#$Dc#n,n#_%a$T*U,U&e(m$Q%n,r0r%c&v#x$R*z%=,E(d#%K&i+R$X(v*t#Z(t#j(Af#$*b)k$,I_+3F.p$Z#P$h#1+N?$:A?+MK?1f#j.g+W$A!.)&x$;T$&P$(u#*Z$:UO]4>&|$S(4B+>H;>e(%+&$V$k%]$Z)k%^,)F8w#X#u#X#U%=%#t)L$m%v)u#T+'],\n    wood: [2, ')}+~%.U%($T%U$d$!&T#0X%y1)f#U#).[%d###F,!$0.!#1.!/y$-1.]+p*V$K3>(c#Q$*G(#3l#(!*+!a#6(n(d%2&2(7,@!(b(g$70+1#)*+W$*l#0A$%)!#,+2/*/&!&/$#F33&/-&5#%,/%36Y#7-,NQ#&9)-!@&!13O9,/8)A;+),96!.>)+(1$-*&6R#U$H28k$q#p#g#~#1A#-V#IAIK%&A2(,7?,0*#%,7*&/+&#)3&12q#=+0&8,E-#1D;+&571DC/K.C>*>3F#,36/%+$/+)7%!3&++)7&J!L,78J2g#/&K**l#*2I+%*.-u$|&S##)($60%,.E%.1!/$-1i$u#,/F33(-/54)2**102,C!:7-5%/-C(0#%5=;5/&*%%98/#&%&0]#$/7(%.u#o#[-(-#18,(*!8.P#%EO;-J!D;H);21#+&)D91#1194+,7/>*$$%7$&+(+D&)$@.)E*0$2)0+2$.3+-1!$!#.$%725((~!%)l#7$*)#g$h*-%;)>0H*&*#8-0-%1&317-$&./;),.1*3!3/)/-!)1#&&-,B$1(+((2D(%%-/P&I)&(N(-*$#((!!*2.&?3#/),~!r##;G#=/8E)(U#!5!&)&&k$D9&LI!H%]%.)C.2,%+3-%1*%,3)&$/7;01($&*.4K$EK64!()(#(30(*+?-!!0*!.6$*&(D%)./&%H&17l&P$;D2)+F19&D,5-H0)682!=/:(&,!R#,V#9!6V#7$J0a#)s+7-&)0a#/a#^#_&@9/7#;l$,3,1,18Ac&*l%$a$a$U$d%*(32*$Gw*>!X$1g#l&{2)P$*k#OW%Ia#_#e#C@M>l%o#o-]&Q&q#.Aq%f#$)x)i$$$|$X#Mn#p$O*~#y#S$=T#CA*:1f#)Z##AIQ$?=Gd#,T#Ix#=V#.MAn%$f#/u*o$,]#$h#b$)FT+9q%Lw%m#|&1a#1T$%$V#X%/{*r,1A$Fc$|$e$k%.#%($%R$u$3M5=1?~!{#%GH?B,7.@]#Z$$-6L4W#%&.!*82+$/*$/)#38;15(++&,1=+*+$+/!9,!+?J!;,-)B6&(.(R#&T#+K>d#a#x#;(!Ew#o$q%c&/)5.]$*o#:i#,-#5KP&*(!2+%#0+=FP%/A&$-E1[$3T#-51r$i%+)%Y#.!!S#.&5[&*G.8+#7a#)!#U#*)09a(Iz#13-%Q#]$Y$N*#V#3*!(*$,|$P#+,&h&]#Jg#%$Mh#+;.Ji#.)Kh#)#1;&#2:0w*](H@T%z$R%Z$(%EZ#>23>5.19k#T#i#b#:h#&^%)++MJ((:l6{6>3,3N@6B9;3+N$%a#7g#E1z%h*Z#m$X#{$1(s#}%55H$#Y#7$#JJ$,1X$h(|(Y#0S#j$^#t$q*|1;W#7o#c#b)+e#&H*f&!i#{#}4~!_-$~!(i#R#z$V#0C0v#_#,#BINIDOBV##(;]#V#2|#(X#&:(K&,b#2I!%e##X$71:S#-$4(G#CZ#|(%$EG1(P#c$(?Gf#$0;!,P#AP#_#,!%+l(;$Mp(!2(6z#+#_#=z%&P#0h#,0%-A&#2?$%Kr#1![$=#*_#1]%:o&|$.=V(0!0h#d#)x#3(2#2/-;)7#Cr((%3(.,3,-$L2+*+5Z#1/04C)k)x$w#KY#R#e#p#DX#5M7v#)l#+&]$i(8y>|.)!)/D0^#q#)$+-#)6/8>E!,%?v#$*(#(&*,4R#7$)-+%&w3n%@N:3?M/]$Y63h#g#*Q#$7&(U#+[%?+*86*T#*;r#&_#n+-)B+C//e#T$d$O-;6+#(p#B$&A1.G)#)3+#(s-d$,;K0-?J/(Y$V#F+.S#?,%%-s$~!.7g$R#U&f#T#=MACC-!t$e#v$Y#/i2s4P%a#%!~$h#{#_#-&#$)+&#)+,+:**v#i#/1,(x#B%(4)r$V#+5$*#-0Q#C-/A5%%83&R#c*1;1*2:-s#g#:086.$*+%3+@w#a#,8*G+{#HM[#h%i$-EG,>S$[#m#-&(t%u,1*@EJBCQ#.}&j(2!#@(+!M.p#+%9H!1-7(&8Ak,4N^#>:~!K+,!%%}&f*n#u&)#1+%,6.V#l%)#1+;>a#k%f$a#4D5U#.y(i2+$!+Y$D#(@2)-F4-*#%5)z$s079Ox$a&~&z)j%z$u%Y(73J$9(H?D%@;A@f$e%Q##>:1P#[#K)4#4.8=:48/6{$Y&t#[$Or#KBd#e$GP#A&:..,(O2.8-*##*&.,?280*4).(^#x#LL3-c#m#F7FW#&@Y#g#J;15NH7Ha#o#DW#DDX$k%9#Q#@W#d#7f#k#x#$GJ5d${$v$l%F7~!t#r#T%M_#CE$.32a0m,f$T$l$Q%Lk#>a#5q#,&Go#X#Y#,;,K==l%~#O.V#$l#9P#7q$g#R#HES#l#]&*%%/+$EV$0$9c$1j%U$Am$w(P$~!R%)7R#|(o$f#e%b%6e-d*Q&f#S&g$&4U#]#r$[&+*L;>K.*$%=2%-5-*/4,,1!*Y#T$S#$*6!!1-!$*&!!)/&())+)%$$2/.2%$?Io$}#HW#F:>H+#/+/#/*)$)+>.D6@!7*!2:-(%%0%!.+#%3.-7)$>412-4$4%24:.,=#C+6/#%*1)+/t#}##+&1(!08B:&2/0-5,-%/($0_)Y(708C!0NA*.0$?GMB-12U#-5B&&W(_)+W#{#.*V#A{,G5&37)11&FV#!(%(80n#6G4%?0(*)%5E!0(d##=(#)J/5D35^#@+3J/1#&*!0)X$S$*3H33$!.,,,a#y$A,6+2D0[#;1D(3,/O.2x##)Q%~!Y#x%w)Y$2)c$Q%+5X$D[#/$%Dp1DN)S#7P#0M$P#5?>4@j%m**D^&@781/DM3#&.1&-EX#61O##$(7C##8>1E(%@n#DR#~!G|$n#o#?6z+q#Bd#&%+$)$&>&L![#(Z$s$[#,6#8&81$+0)E0%)A/44|$P$6-+S$!V#,x#m#I&!+/+(%*&##*/(!*/89,z#S(){#>Y$Y#/Oc#h%$c#/W#+f&v#t#W#r#_%#,$*9;/&@>,n#My#k%~#Y#4V#*p#&R#7b#/)%+(Ht#%D*/803I;.%0F[-]*^)m&14w#[#_+i#&U#V#&*1O:E:OY#NB-,Q#D*1b$o#)%5F@Ds#[#^#JF//v#%.913-.-#.;b#W#0EMt#l#U$V#_#[%_$5s%T#&)6L,(0/LFW#>H[$)P#$K*i$=(Aw#@N:9,,(&!>2d-Q%9%!$e$X$_%j$f%g$&%$&&(%%@Cf$)f$$7%s#EOw,a-T#o#c$Q%t#(d#1A3f#/#d$N!)?%6n$%Y$Z$0$A1T###5*-h#HC/i&._#2Br#7x#!h#r#s5x)#!&a#$~!T+y$,*v$S#$%Z$a#$!+-!#JL$%W#x$#c%8k#:&e*[1]$[&:y#P#S%-|#W+Y#8S#,s#%5)6V$P%m(($Q&x%R${$+P%z6.*#$$$*1**(+53*T#R#$Cj$)b#Z$_#!EM-K+W7X-*r#V#T#]#Q$0+g#s%JU%>+.&e.%[#9B@f#T#c&T#Y$2%:Y#Bw#Je#&Q#DU%u#$U#>!%w#4)M^+%x#$t((U$]#a)8r#8Z#!:g#@$u#W#!(r&5-e#)*~)I)%&%y#N$({#(!#V$2!+i#@q#+!%S#+S&]$E-#177u#(&:*6T#%2d$V+6G*G#E,62(:+%7B{#+S#)o#3S#>#/R#$K^#q)q=Y$Lq$Lq$FT%B+A&$+0&$-4(#)0%#a#w$3)3G)(W#63*%(L:?I638)#/>D&%$&0-T#5*+0F0%{#Q&>?L:N(S#-n$a#F7311>&;2m#E#*?!.6=C%KQ#g#^#@-)OF&#$*##++$/t?xA!L*1!3(-%#=?%T#+6/%-$$/+y$w$?2P##,&#L73J-+#Oi$p#-&-0(%),08!%i#-y#c#Oe#(#:DQ#F)>P#H.D6(%:I2*&!/,;2)#0*$&(+&/26..1++%).(,)%%~!n#!01r#,#+I2%$%1(1Jl+2!*(*O&,).>0D#-)--&5#3.52/FQ/x$u#^#9C5/-.3-S&Z)x#X#6!z#Z#V#s#h#b$b$q%H7Z#{#21s$U&n#Q$n(g+c(b#*A#6/C3)/IB-3!9M6.3AU#9y%$-(7c#/h:x21,>Lb%Et#EQ$$%8@#7.S#&;)T$L'],\n    park: [2, '+c#u$#)Y$,-g$Z$+*T$,#!3,g&z#!%*!(($GD&!.+!(Q#&u)]%Q#&2T&P#%=#e/h#+E!3|%T#((g#E$,09b(h&v##B$Ag#=(R$J$!&S$(2_&)_#1!(g#0!2}%,$9z(&!T&-$%i#.!&+v#&j#/!(k#*}#n%#/E#!-2#24!((X%Z*70?!6-3)([&i$+*$(*061V$-]#+%+/*&3Jm#+++%Lf#.I369K-I!6%*(%*!26&*(#.&*7.-2E$=2=+/D.LCD60%4:*0C,$-F%9*1p#>032%$(*%%.6+&-+$-16@)-B3&%JLJB,W#B$P$0q#f#l$p#39V$G7S#+%#,)0(*/=7!-8*(B:9(-.~!802%!!?(,%8MP#,-X#627.&&-4$,%%.22$E.#!%.%*&.7$-*$*q#w$!#4,*0($/3/+/%|#(+.(2$%@3/!+)!$)+#),)M,Dn#*!%(h#!()9F>.H$&0)(u$%[#&$#&J!%KIIc$A?f#R#%0&G.%(/C&%)#+/7+!!1,!*@)+21$)()!)75FLL#/5%+)#106:#.(%-2+&&02,&*J7-$7r$+.%I16#7W#8!-W#!S#%-;)>.3!791(,G-4%C08*E3(w#i+s(N)&,)&3C)))*#0-A%,$%(0,!(..,.%0&*+-+!$:(/.#%6,200%,&,1$9%+G+=1:(,&h$i*($#+m#6&()O4)63#&$/#!0!*,/23#1*3(1#F+/(#?%(*C*)#%&6##=+6.*-85000$C8%($*30(::G!C,I~!:&F/Q#!9)+9-$08x%_((!#.*&(,6#5S#+-)%)$#+@w#-&F!9=7.$(*,(#]#p#C1T$V(o#Z#-Ct%8h#@,#%3%*:7()7$#$&H..C&##,/#2X#90o#6(./*/19*$6)2-(k#=!1l$V#f&X#z&#!m$M!FI1Ie%+b$V$%b$)m%Fd&090-2-k$-$:.6?8]#^&._#1_#%(6,67#g#Bo%/N>W#Jy#-U#He#@>JR$$B([#0g#+;DB>U#x#T$+P$o$~!No#{$Y###w)j$#(p%g#z#u&*A)%AR#0P#)(Ct#*&P#k$N2#%)#$)z$OQ$W)^$F*j#!7c#,-4j#?d%2X#-%)n#P)2v#:&%4S#,9]$&l#X#-~!T#OD*.t#A&#.X#%#)*+&%&/c#&!$)%$(V#C$%9!);#&&q(P%$)S#4#(7_%r%&3+!a#Q(~!v&#++N%&,$_#e)($,V#)#2_#:l#%$*:0(!(&%&_,F$/Z#S#+f#47e#+J)!;Z$Ch$O.#(+:N/5r#6,$,%!&0##)Cj#8-j#h$#)*!:(1?FE&-*;*!*@&}#u#Q#1(;P#0&r(V#,Jv#=R$=*9c&Q#K4k%)BE+=-!K&}&p$m#t#X$W$?Q%^#k$^*)66($0?,:{#(#X#R&A0>|#(z#&6x#?R#q%*(&.EKP$T%&$%/o#9)?-$S#n%4%LT#X$A0{#2%4e#B+#)i%Q##)Y#30U#A0E,4*($P#6d#6*$(30%(;m#7(7o#98m#>+,Bo$G3V#,($0=($*&BH0U#0%3T#,v#j&)?3&(3q%[#$,>-,F*).S)4!X$5)%-A,0r#]#2-I>+;r#S#;,i&m%j#6*!/Kj$F#+/$(7P#.-T$[%#(:G(8%K)Ax$HGr$K2%)/e%%A*)4=*%5%,+=V$@:}#4()86()f$l#$.c#5,F0%)8&,J1&*>0%*a#f#@-n#u(4./R#W#~%*#;Nm#$*.%$,1&&0%#!%7)&2K.-?&!%/w#9?]$/&%3,%$,0%#-E,/O-_%b$)+(5OA(*!43P#^#1.S#*#9e%c%*~!D19x##(:(#)##&2b$F(54%2U#3)$)#(I.,@F/Q$E%#%(,i#a$1]#:(!,T$1!3()(U#)-+3S$w#%&R$7#!Dt#($l#=#+n$s$+9G/v#3l#$!(A,>|#+q(]$1w#.%p#/&*!G(%%?)f&-f#>%-*!4v#i#?-T$F24:Z#D6)$+J&#/@.&/D(3!.!(0n&v#&/+X%a%U#4&-4+%5t#D,:N2,Gk#)/#)2-^$N,=.&z$X#&+){$R#U#87S#&!$&X#9&T%6k#0/Jn#1+IR#/q#2!#*)(%G(!#=15Y%#27%(I6&!(v$8#&4)3L2)#%|#>!&8Z%3G,*(+?+$3V#%#!(&#;)_$&$3%$+~!+!$1%)#%8&!)P#)*z#r$#-)!#,-!#BI?(Z%U*?018NF*&+c#T)1&--)BZ#!%4&./,/N-,..(2!0-((@,;+19-$*;%#&t%57#p&)!&13Y%+AS&!2+*.-An&!5d#>&8m#t$F*Bs$E*@,3i(Q#751$%;)Ab$*$ICM.&[(m&0:/*3;-c#N$9+H-9v#_#*?&21,1)11)!n%&(~!D6@(%3:(g#U+AC/KS#F(;&S#$3*5L80(Om$]$JI>*&*#+l%q))$5J%&G?-,&&&%1a*o&!&L-)4J-*N(#)84(#%2+|%T#Kz$H}$-x&y(!+(&K$&8&#&!!&;)&%&j$,C&/j#D+&h%f&:9(#-O(|-z$1p###Ny&)$(e#P&@C+$9[#6-&?x%D7*/0#+n#P%(!!G(OZ#Z%)%W#Q%+D&;M@,+1A1&s$U$+M+#5S#&a$Ms#%,JX#*,v#G$0,#$.Q#/*!$+)!!1,~$i$6&(%8d#>,7S#%15!.$,]%~%(=&!5S#%(h#,0$$,a#)&2o$+#V$[((!(e&]()1}$W#(%%,.P$f#[$J#(s#?Ar#f#>$),&*6l$ODy#8Y&.b#;*!*)Z#9(0%#e%d#%0/(&&+92+Q#t$5*$1A/0E)%2K*#)p#_$H$$&E3(.)%&r%r#M3(0N21;=&%5%9!A1;g#F./>73!)t#DG~#&(-())O*%$(F0+7:!(26#(L2)/E/&U$H7U#C/6R#>6T%(9+$&+0c#1U#I3(*&%,4A*&8-&-(Dq$,%-M&!*F3&+3-%-$-M&!2g#*b#^$e$6#%+AL/#&k#9(p#^#&4q#7%7,,&t#2j#4$,k#50*l$-!$(&!#18(;W$9)%3(#&,*#%&:!T$)6)!!%1$&00%$%(#/M&!#)D+$%*D,##--$#&(#%-+$*D.p%M#&%!#($(+!&.H-!+S#/%/(k$CA*5f#94/&+z#x$-E/!(5m%~!#){#9%/-|(Q$*5K,)8+!7h#)#&.+$:P$-g$=q#9%/O._#?%(9p#1&6k#9)&^$#T$~![$A&.-.,$)X#2!*j#6()4(%(&2+#~!m)X-#%&,((4!!,P#&P#P#;Z#.A$0A=-CH-$,+&%-5-L-;$4HX$W#$%+!/4&$7E%#&,9/:Hw%m#0DJ3+:&$#717(/$)l$m#0U#~%_#}&~#&R%r;h$r#;F|#c#(T&X)3C1~!//($)O(+#R$Y#$+W$_#,3.g#%#()$-42P#:0-0%#/4Hj$4)({8o*[#2t#p(C)=-)])x$*-|#t#=+%8/4&{%g%*-V#P#+,&v$h$*-d#]#+,)t$e%*(/2b#Z#),k#c#)i#f#,(9I/K)$2W#&Y%+P#:+%J30Mw%+)3!B*3./4$2%4624!0$=1,9i#}(P$38-92>Bs#S#a#c#z#Nl#?838S#Hv#f$R#{#Bo#Q#e#361@0;Bi#U#S#s#^$U%[$@G84$#++/2**)(+)7=*($%A85=e$v#DM1(FLNa#s#U%Ou#E6u$m%c$|$I4OT#$*]#_#W)y/CEP#=-=Q#G(=X$2HR#_&[%,/e$v#_#u#;5,1;5.3v#b#?J>e#,{#m#,6;A7E=6/2l$}#.3p#]#&(P%D;*-C:/_#Z#2,#.,#.&*7&U#>@&$),!2+0&X&Lf$w#(-e$x#2t$g#$#z#d##$EA!#_(~%%,,*)0q.h+:7*$|#f#%$&A,f$w#,/e$v#+R$w$6%&()!3=++!1%+1G4#$,%P#8q$|#/0,*)*-+-2r$}#NQ#$)*/)Y#,%$%%IR#-*)#)]%m.a#^$;5z#l$Oo#0:7u&V#A@8/E&G*4,??{$e)!G+=-4;8H2~!$3)>513z$X)+@%FP#&p/.759>;/9$5(5Z#L4859!)0L=;P#$e$d%B??:C&G@8)I#62t%X(k%y$}&y)-2/)5(1+39-@%/$++$9,3/)~!/-;/B%HQ#e#f$LA~!s#u#]$@k*V++(1)&@/+X$B91&/EW#0%(0264%:$!1%+0$I.*2]#?244CI.$(>)e#$1)F!,q%K1Z#3C7*B-&L.~!2-C)(X*h&}(p$6S#z%%R%,&r%o&+W#z#/*V#&.p$&$s#U#4#&t#?),~!D=(&W)P(&(k({%%).x*f(q$K,(#($%1&l$JF7Q#H!)(!0|$U)+/MB!19D6146A%,43T#,0NA@H6e&h%3=(,4&(,6!.4+,H25%>$/-5;&3#5,5?@.)(#+z#K.+.2B8/3*)((*)&Y$[#2/6A3.+c&b&T#u#2S#%!$4-=Jh#56+Mb#$#BN#)2#$4(!&%&T*T#!>IAB8*&8$(B8@S#0%?+(%BU0W;IE:F^#P&~!07~!K9@Q#>HU#U#f$s#FR#)&x#x$2,LZ#Q$f#EAOV#If#]#@]#5(4~!0Q$e)^#4$P#KG+,Y%x$)t&h(0$0*(.&0H@&W(}#3!*i#K?)c#c#:S%*#!+%!@Z%,W((+!X$g#U(o%g#~!0;s$[$x(Y&(!(z$_%V#U#T#G&,N&+c#j%2I6+0Gn$P#e#m%z#FE|#&x%E:-(C3)&y$-9w$&$4j$,;T%(#1j#&!+C($7W$.g#&!%P&i#)O3F-^&w@2),-./&&%+4.>:&41$1+!-.15&.,4;6D!3-01++(345,.2),]$U$..#8/0F&-/1&#7())],#[$z(/#DX$V$k(0&)m$s)S#z$,=.)Oi$+#,(24&!%+!*G%$0h#-#)&(Q$z&4P#$(Y#65U#)}++$*7)0L8(-Cx#f#a$~$B&*++n&Bo#:$,3$$+(&[$Jm$0!$C#=*4a#>S#3)).+$&0)!!*Y#-!m#W#!f$C&7!D#$]#9$&%$(%(.=+!;+>.)$N$&>,&-s$S#*Z%)T#O(t#)_#7(>*$0(#%Dg$7)$)2%8u#-&+%5b#9);p#6()8T%M*>d#4M16(!$j#6,BX#2%(Z#2#(7h#a%JL&3X#n$F%5&z1P%)7A)%8%uCb%;K!F,r+.-7,&02(4/%!R#/!!-)u%-Lo#%-Mt#2!!%,$d#3W#%)(!#(&!4d##:+$&,]#+&$U#,%|#w&{&3#S#$)+(w#>s#(!6_#*$4.M*E8(&&/%),42U#0]$,F%#.BEQ%*>$1*&#+$++)&9J3Y#-3(#-)++!W#2n%g#R#m$v#)I%!..!([#)+%U#P#&%9$J3N.&.%O7*G)/7%(A-,!:@I!*8-.!#*+*>*-0*%)*049:$2.(+##.3*+9/!&%5V#7K#,^#Y$9R#@AHGe#x#c#j#(o0h$/-&@0$(K+W*z))+!).&R#%$21!#&+DU%I3/B($.GQ#4;c#($)AS#(4N2%*)!+;&Ll&(0[#C+1,U#?#(i#=)#+/g$c#Cp#&!7Y#3U(g(,%7]#Hu#.H#B/_$7o#[#%)BA~$n#4!W$=W$0{$&GH@Y.+A%]#-6p#.$(c#+P$92c#6~!(!45GZ$:W#AJL>=^#8o#O04d$2W#F-%1E*d#Q%)&4HC2^#o$>h#1V#HY&/CLZ#B_#&G;b#q%HR#7Ce#l%>:-:$A,%(,0#*-%1);#/T#Y%Gq#KY#,@OY(=a#d#|$)$c#s$@f#+n%p(,#AG$(U#K)!BH$+&[%W,9t#b$@)w#)O.),!(,%.$&/-e%l%)!&c#R$C*W$)!+V$%)Q$D((&X$S&-l$%#*i$&7T+S$56Q&X$C&GW,9e#0,0X#-j(-g#C$$h#Fu#s#g#:083;j#;r#r#7p(R).]#/y$/]##P%(!(/A3EY#%38r&!S#+a#9J137/$-1!!%-!b$k$Z#%R#R#!!6N#%T#):)Z#(Z#G$#.J!+]#-G=#7:;V#)!$?F!!37*/*Y#b#;IF38DR#W#)>@36H(B)F!S#?m#%Y#)Y%#3+!(>!k#5N>Jd&R&9B1B,54O?EQ&n%M_#0R##:.!#,(!%/.(OO.4%6,|#;f(1G7=U#K)&!-)!#:7AS#V#)0(%4BGJ4;d#[#=~!*@6|&![#+Q#-D;@W#Q#;^#7H13T&o%9>@S#&5,52R#AMe&~%&#?MK,!EG#!6/(.A8:2k1t+3c##L.S#=$2R#(n#*R#Az#&6;*3)-7$F+H?z#4&#7{#HR&$D)H#5R#,0;W$6d#$g&[+&##=.+b%W)N=Jk#U#,+--!}(3#5Hg#)@Q#d$0).X#Y1;X#3&U#Z$U#d&?g#8A&Z#8G%P#Id#+Z#b2^#R$W#U#+s##_$=*IT%f#r%)x1R4+y$&%^#$([%b#%/y&V.(T#?r#&!T#v#92U#{#3L1F+k#Kc4A#+]*Z0&)%v$%$x#($d#)f#+#,W6be#u#)t#R$h%)!Q#%!$c$g#.B2+s7p/D&7>!/+9(U#?,f#]#'],\n    allot: [2, '0S#k.+%q#U%X(l$a&]$d#N8?V%Q+s%b#{#j&{(V%Mt#N8+m#R)c%V)&!j&d+l*f#Y+|(l#Q$L?Ef5V%Y)2,!*,T#-Ij#L*N##,&!T#g-$:Ec)5(0{$o#.&L@#$3B%&,-11i#%Q#>{%$a#B])*o(u#$!/~!$!3;$3a(u4:^#$)AW#C~!MJAJG?22Eb#,T#(Y$L%;)Y#%}#)5H_&&E)%--;8?MBv#>)+j$#L(Q#G]$V#=KE1.-)7K%(0a+h%MA~!X#F;~!;+0W#%)]$1^#(&a$n#+0P#C-X.R*NZ#-/d&W%y*k#))7U#^+h#v#Z#050oHu)^#?Jg#~!W#FBR$g#T#i#4.8Dt#]#f#h#n#z#0O(~!b#v#p(>,D(u#q(,f.i0+9+#&;>,k#_$#)f%W#3W&&R#BC/1HD.&r#D0)/J3(&e$T#1H1(0G4l$Y%IDCA/%*::+S$Q$%,%$.0q#T#>.~!4/!d$E6j&R#7&d$^$5#*M4&&p*w$2043/3403>S#.&R#Z#r#[$Z#r#i%K!N%#=5+/7,%P$~!:Q#i#8302&Q&i&/!$?.!&6P#!AA#%B&7E!C.!!D&W#$!E,!!F&~!f#%8A!$7)o#b#6$$3:$!1~!%&#}$0!$@3#&g$H1#$?0#&%k#!F1!!E/~#Z#(i%=#!3AV#1!$**!!82!!1Z#g$)_$[##7C#!9W#&$OH)j$5!!;7$#C*!!0=#$GB$$6C!$0Y#!!4X#$!%@!!2?!$E@!!4=!$T#q#%!7e#)1#%Ak#(1D(V&t%h$MDAT#2c(v#%W%C-!=4#!Dq$BAP#54N?!>1!$=L$#I,W%R%@4h$q%%@U&Q#-b*)#Q#i#A55v#],GS$n$T#y#e%>V$&U#.7H^##+/;:Y#l#g$4T#5Ce$_#*=@*2K2[#a&/(~!N5k#BJ~!u#&#B@K{#*##M+*.,.]#P#f#/{*Q-A,LV%;&J5)2s#S#En$|#~!6&-AE,)z$_*BP#Y%_$4a#/+.L(s$T(Q#d#{#c#L;={#+c#y&(92!,F3$(5G,7j#/t+z,h#X)I,(5K,!%V%CG|$I.Q#n%s$S#8X#)h.{#h$w#05P%W$M:$(&.a$2Y#R%V#1T#9n1RA+#(P#+#&1/3@4T$W%;s#/i#.~$-;0P$#!%+}$A*%Hl(I.1Q$(_#8$-zLX5#4/!!%^#&3s%b#%$R#4!&S$*k#^#y#2e#(1i#1!>z&r%11k$z#k#%#4A$$C3#$OD$3R&?$%II&#GE!&i2j(b$)%i#c$(&o)b.3Ji&w#2G3_&n%H*+5X#90Gf%e##I&8Q#%&T#h$#D(+;I+!+)$-e4V9%d$h%$%n${$*R%En#p(i(7k(&!Q#(^4Q#7O3b#L-P#]$-T*^89C=4;IH7Y#$1>V$T$M3:H'],\n    sport: [2, '&[-k4052.14Kh2T&7K5)H]#3S#Z$U#Q#>599Q#)Dc(W.^#a##+~!U##Hj#y#6g#V#e#P#?8$W$j%CCCV#_#n#6GMG04I:X#f#%?EV#E6b#l#2,KK70DP#(4>O;c)t/37+*7$;81(~!(5)57/>#1.D8;!36+?!C7A1K&.%$%?KE;GV#&w&}$90>J:1&]#a>/*3;0+)7_#,,34;7.1..&Z#T28D0,7C&~+u&@+(7?*&z&|%@)*~!?(&o%u&)?9&(B&Fd#;*7U#:-&}&v*5(+74)({&T#_#&!d#%l#[#$&=]#>!$~!?!-x%g(F.$))#)5%$&/R#7(61(&{)JB)*;?*&r*)*@I.+?&+8L/(5K.0x,Z%+!i#7%13).N3)(9%!0Q#R#*K,4,/]-[3#:)(.!!2F!!30!&&$)(7%$%i#o$R#,e#h#(/R$6%7W$)*1&&c,,3#$D0!&u(j#@(+L?)*xW#p#q$(4]#(4k#&/{$s#)+U6d5K56X#>.5~!a#=$&R#7&l.y6N!!7M!&g$k##5A%$4&k4s,;)%3:('],\n    water: [2, ')u#k#307&,@*&62)V*q#+%7F?-*A)#(Z#[#(07(&3*&(U#g%-!+;A/,?&h$a#9.-58/)_*o&d#>0Aa#I;#)@*Z#T$4O^#8+!)3%>01(m@V*(=)!1-$-+W5u&-,Y#>93!&:@#$82L{+z9.LV#R%@8(I$0-!$.0,#,,*0).#0$%+KV%?s$8u$2w$,X%;,+!q#T#3#D6%(T&k$7DS&l$%(C7,1S$a#%@W#{%U#U(6BF~!u#|$)L*iZ#fD2#G2$,)(F/--&]&U)Gf$*#Fe$&1&-&Gd$,#s#r~!|6(-%4?R#8=S&n%026G:]#V#P#:?,C*P#!Z#7{&+?1?/2D?70o#|#u#n%>_#7W$;P%-?LX#Hp#U#X%$.(:&0+,1$)--&#B,;25,)6~!:i#6U#6DGS#R#a((;?g#n#e%05EF6B&1#-(!!,#%%!T#L6>*3,N6~&!9-g#&7/5W#U#)#$,)!$-/!$;1S#Na#R&o%@F:[)U53*).)!$J%3&w#.^#.z$/^##d$,!!&0!#,6.028I*_#!R#9q&-A@K9c9WU#+n#&09K%.)%F9N+5//9+H4]&~!_$!-#)d%[#X#,I2%?Lx%$4-,&#]%4;0,5:)j6Z)=%$,$(/%53=&i#-/%/#!$.*,#4*,(&(/:3#%;0)2(*2#.1##+.)%-!-)$)-!+/-4W##%&%-#!))!!+6)(!!(,n%u$,%()#!#.)0-!$%+5W#w$o##,0%61.&%,),(.;*/03/#3+7!J->+Y#%>.D#5,F,-O7G*6$=7%-&)2!*,)%).3#1*3(1#F+7.9*-.)8$E3=%%2((,)*7)!*!.,6#6*G/[#e#*2#2&0))%1$-1+!+)!!)*!6k$x(#)))!+#!((%,+0!(8(,0:(,,!*+()!BH@-&)(X#E.2*)-/-$.p%E0$*,&,3*/.3!)/%1%&6!+.*%)&&&(9%$#%.,+.#h$)#+(1#7;%&%#*,%)0$*,&b%Y$)1O1#0w$7^%&(+!P$A&&#)@w#)&F$)%;?3*$(**$%;#;,91+#54!*:A.(6%0(2%6:#*58&218&+27!1-&-#+,$6&#$$!3(/*+*$2%*&%1+13)/+/&;&+4,K&2$!$$#-!3-D#-())/1/)1+&/#92)&(!61:&,+(1+$+1>!31+//!/,*2#*&*/*1#)%$(*,&!))$)#+?-(&$1+34/2!*28,0&*)$)+&!$.(.!/08.20,%0&*+%1&1%+G+0).+:(,&h$i*($V%l,%#|#D5+l-,-#)(!$*/%&2+*$858!8&%&&!/*325$1.5KH[#)*9%D)-%)=(822$()%&)$+++&D*;.&2(4!()&-(&2*6#.2!%103G3b#)*-%)&0&(+0a#4H0/!)+++&3]&v$+(7%3)//!&(!((*%.!,+-1(&,&**&*)s*h#,!%6&(+$)+1w#R4),$9*-*#.*#*)0!0)!$+(>/)&('],\n    track: [1, 'DiU#dS#$J/Fo(T/>FB;F7H/H)D!F,S#850LP#;V#)j#.Z#j(|.,4?EX#GC.E%?!:$M1E5?9496F,>(>F_-q4G$P#%n#AV#OGP#r(^/,E(E!A-Z#3O;I>A@:^#C~!,i#(J+~!5H9B>;B;HY(U.1J/J&F#L(LCo#T#[#O@K5?|0S.>9e(c*1;)5&F%@*@4@CFR#B?)G$C(:.?=](X*6E*4#O-C/?9=NCN4>%7!?Q*o.3=+=&?#4,Al(p*:8E0K%:$K5MD492B(B!>-D7FW(Q*@;7-D+D#>(@27.&_6id$U(^##)T(Z#&uLk7e#w&&$b#x&&U/r=J{$-&G|$'],\n    stream: [2, '$:})Z$-%T0_:G#C3%Z6t%x#Bo&?$!!P#(*!!{$ER#%W$/I#n#*]#034%V#8l#M8*E(K&8$M5C>.34J#B$L!~!*~!2~!(,;.@*J#^#+e#*$3$@(7,/:7.1.7+(/01.@E@2&u$ICP#GG$P&l5l*z&*V$d)1&9%U#&9)X$L_$@4!!U#%P&/k#a#)5+~!)1BF@Q#9Bl$b$s#JY#e#~!c#X$y#Y#/q#!.l-S(~!a#R$f$X&b&}#|$s#R$Y#Z$c#a#.~!*-&&(1--&BEe#9F9&!!Y#7NDH/$q$W$~!W$&n(p407,#?T#$j)}$}%W%$?x#i#T#.wKr(6.R#T#,0(:*_#!A9V(+E7Eg#Z#1!!>CHK}#~%7V#1]#>j%/KDM9G9R#Nm$~!t#&.$!!1P#,)4&8*C,0V#]#2Z#.k$&8Bx#&a#~+4#(+#1-P,SE///J3F7@>@a%x$FJ7D-@%[Bgg#,#=6$d#Z#y#e$&oF$V#j%n#;W#m%'],\n    rail: [2, '-X$zCC|#.O6q$,I_#|%Cq$6e$4X%Ez*@8k,h$d+1^#-k##c#(L4i#8Y#Ke#IQ#P#NG>R#@l#D_.p&r(h$o&u#}/Y(|#>K+v#/t#!W$*l#0f#6a&l#d#?n%v#$EFU=X5&!!a%h$y0{,e?y6.!!}#k#NJQ#Q#o#V$~!q#HR$7{#&U#!Q#*X$%B29h#V$r($)(b&W%&-(C=c$t#b#G1!!^#h%/_#!EOZ.x#~4#f#&P(0k$f#a)6Z#Q+n2]#q$r#c&-!!0M*T#%b#-d#5R#7EW%s&JR#X)d*:br#pFq#o#i#Ng#@w%a#k#Dk#Nh$q#P&~$a#W#[#^#z&e(NN[#Q#V$o#r)x&b&Q%T+w(y#e#W%h$i%l$i8k2T$e#(*F6i#%a#+a#5[#'],\n    tram: [2, '(o9c#j#l+4l$(q#Cw%$!!2g#-!!.L4LY)c,w$l&a&r)4;]#[#Os#,L&|3w>!2#.86)!!k3|.{$n#2(A%_%(,!!s$%K$i)r$,$.#.,]#x#|%U)/u2g(6.(6$,+,7*1&-+)1$5)/5)5h>e$X$V.$G%P#*EU$n(Oi$Gr#U$h(?x#[$Q)Ev%6n#G~%P#f%*V#=u&8W$'],\n    r2: [2, '*yO[.m$z&0F*F%L!9+Y#@a9R>t#]%%.!*&*BK1GQ#+}%1;!;(u#I10$*T$rGDV07a)&6a#T%}#T(+:FR%#2b%T,#0!8$x#)~#Bgc#X(@Z$HT&9k#Fw%3^#X$k(R$g(l$f)s#n&1W#$k#i$U0T#P)=n$#B$N%NI]&2e#0D.5I^#?Fx#x$^&r)Gi#v%P)b#u#01$!!01(!!89:D:~!0S#(2,/IBZ#18BE(!!MZ#z%x(GP#X#v#&!!a$k#[$S#x#Y#&((y#X#X$R#f$n#+!!W$d%S)V,4Ml#y&h#w&0Cu$U&.]%t(S#o#Z$m%_$a%>U#5N7o#r$Z+1B]&h)V&X)$!!.$$!!)-$!!).)!!j$w%k#{#V$[%5@53$!!0/$!!11+!!95k%_$F3Q%~!H1w#[#k*a(+F)g+U)d#MX#:q$K]#AT#CY$h#$!!0.>!!/0l+X0Y(v*;R#/O~!T(&=!P#9y$^%T43U$!E%C(?b%o+Ch#d#j%GY$8p#U$h(b#^)8m$KP%,M*M'],\n    r3: [2, '=u7d,B&&&r+b9d$T)/@-3m#R$FFw*m(3)^*e#3)+-+51L+[%)B)>-59DBB_$m#~!7X$>-j-vM5$_)Q%_$U#B/N)9%~&V#>%9#*_#x4f#2Z#4C*U$.v*b#2(2vZ#p(T({#r#Dp(j$:+,!0#6(,*.0d#_%(,*,2,K0%!!=#,*%!!o)t#v#G%!!}&[$}&m$(_)w+n)Q$W#8-#7!&!!a&|10S#(1&h+l$/!+$3+%g&T65Ag#Z#%!!(,$8$!!57$!!0/$1.P$t#$Y$&*[#%U+yT#o)r$:7%&){#G[(W$$!!#0(!!>%z)-5+35(!!I*]#%f(*=$&X+5S%q#X3s.L5'],\n    r4: [2, '%Y#3d#D^$+(0(K4(**8.(&!!#&.+Y$~!%!!h%g#T#>&!!X#NC5R%[#$!!z#D$!!Q$J%!!26?2%!!)B)5%!!S$HM*&+H;&/)i#S#$!!Z#s#%!!,%f#P#%9X#=(S$f#$!!U$h#$!!h#T#$!!n#X#$!!j#T#$!!l#X#$!!h#V#&!!%$(%:4%/AIb#V#V#$!!B[$%!!K8G=%!!v(Y&#%%!!X%)*&(!!i$t#~#C#(;x#$!!}#@$!!j$~!(!!~!1D$a#(U#,&!!6c$%q$.K%!!X#/R#+&!!P#$G#4($!!I|$$!!|#=$!!:s#$;r#8.(!!U$_#02!23Z#*!!i&|#808A4T#$P#):$!!v)}#$!!R#o%$S#n%v$H$!!t#V)$f$J:u#(j$~!@x#3]#)T##]#$Y$(~!]%$!!2($!!U$?$e#4>z#$!!A*$B+L/$!!Ep$$3)Ho$$!!4(%5)9p#s#7$!!}%S#$s#L~!f$%!!V#;q$S#$!!^$L%_$K-;3P$%!!/a#JR$%!!M1[$B$}#/Bg#$!!v%N$b%-Z-c*$!!8i#&c#y#$(H=1%$!!9U#$8T#r$z#&!!&-Am%(3&m#Y#&(Lk&)%$!!Kd#$!!T#J$U#I!0&!!z#4T#2U$O$!![#c&%!!q&n#($$!!(0$!!z&~#%P#U$:1s$U#%6Q%R$r&(-)|$_%Fq$)%)#o%S#9!$u%!4y#$!!*L$+KR$5$>s#x#-$!!Z#+$!!e$/)!!$,%%K*%$(D$!!:~$$!!3$$!!2/$3.f$9$!!A[%$!!Z#Q$$:p#z$q$%!!)+=Q%$!!u#3$!!P#U($!!d#Y$%!!As%()%o#Y#&*9o$$!!q#3%!!Ae%%+%V$i#&(Ji&$!!^$6$!!Q#V($!!p#0$!!Hk&$Z#+KJ%j#=*)O)$h&{&y#3$[#C{$=(!!z#2*(!(7c$$!!?%$@&S(L$!!8r$%!!EV&(-$!!OU($!!_$7$!!P#W($!!p&L%!!(F%e#$/S#D.(!!5J;[#)B%^#$!!P#,$!!X#I$Y#JJ@$!!a#Q#$!!X#q#$!!d%e$$^%.+4&!!^#&W#,$&%!!KJ6@$!!b$o#$!!B9%!!&%.G$!!V#{$$!!t#m&$!!Ar#$!!U$4$!!3|#$!!R$5%!!*N%Q#$/|#)4%!!)!@,$!!6T#$!!?p#%!!,$P#,$!!m&K%!!Q#l(!.$!!a$1&b$0D%R$o$/#$]#AV#,%!!4T$!7$5i$3|#(e#85*-!S%)Q%!$!!.P&$!!S$*%!!M(Z#S$$b$!%L%!!%&$5$!!#J$!!2q%%!!MHj#s#%!!,%(+$!!Z#.%[#/&++$$!!S#t$(!!~$V#H6F=FG$!!v#Z#$!!|#b#%!!r#X#*$$6Z#G)&k%[$&*$*%(%P$i#4v&%&$}#c#k#S#%!!K~!KF$!!R#@%S#?U#m#W#]$$Z$p%q$z#%j#R#)*7Z(%!!#2&(%!!$3%)$$AS$*$T$+j&3$!!=P)%!!*j$(+$!!d$o#&!!U#~!NY#R$w%$!!d$f&%c$e&{(Z%50%d(b($?#%$!!R#%$!!!-$!,)p#$!!T#%$!!*T$$!!{$=$!!z#2${#3;Y)$!!x#()!!/]%o#&)&$+,S%$!!~$/$!!1|%$!!m#%%!!$)2T&$!!l#($!!4d&$U#&)p#$!!Y#&$!!#7%!!()*b$$!!#7$$6~!&$-i$K#$$6&T#$!!V#%$!!0#%!!*!2)$;(&E&!!i#)$&#B$!!1$$!!7$%6#&I_$-).GB$)&!&?Q*h(8%!!%[#%/$+h#$A$e#p%)T#$,G!.$J8k#)$!!k#)$!!3m&$!!j#!%!!]#$0&$l#&-Q$$!!k#(&!!+&g#()%&!!(%h#)(&$j#)+k$$!!}$5$!!v#/&!!(j$Y&7:%$!!Y$&$)]#&V#$!!O$%!!I!]#%(!!R#*C*2,8:(!!8+4&6!,%$k#*GQ$$!!k$Q#$l$P#;,$!!?h#$@i#u#C%!!#08Z#%;k#a#:)!$!!2n&$V$&B|*$[$g#*u#$t$p&X$!$!!*b$$!!4]&%>m)F!p$2%!!5}&g#)$!!m#)$!!2]&$v#/]#+$y#w&-_%$c#g%|$3$!!0i%$!!y%0$!!1h$$!!P#)$Q#(+Z$$j#!2h&$e#X,u%2$S(2T$*%!!#q#T&3%!!T$1u#!$!!+}$$!!x%1$!!Y&1$!!)m$$!!X&/$!!%R$$!!*b$$y%1g(&%!!$).l)$!!n(2$!!~#(*!!n#6%)*{(!&)$m#$$!!+t($P$)*s($!!v#%$!!,c*$!!R##$S#$w#$$!!*}($!!^$%$h$&,s(%!!d##=*%P$-j$&D/%!!t$U#[#$$!!Gf*%!!]#1n#$$!!]%($^%)C~($!!k$%$!!-_*$!!p$&$!!0a*&!!^#$7#a#/*!!e%@V$)-()(-z%Jt%)!!X%*M$2#*#U$%$!!{$%$|$&%g#$!!#a#%!)({%&B$!!>c(,!!_$=a#$&>4[#(Q#$>/[#.m%$!!e$.$f$/Y#&%!!2b$)9$!!$J%!!s$(b#1$e#s#p$)%!!BS#BH(!!(&_#9n#&R##&(r$}#&X$.Z$R#$!!,.$!!j#h#$!!.0$/1i#b#$$z$^%]%(!!o$e$*2%#h%6$$J#R$$c%}%^#a#$!!>Q#)!!V#>p#;_#-~#-Y$$*w*m$R$t#Q#R#-%+.%,l#f#&q%0X#b#b%R%*0(c$3E!%%#]#x##&c(f#I8Z#=#W&%!!k%P$))$!!j#U%%!!a(X&-#$^#Y$](P(&!!R$}$)%S#2%!!(.n#l#)!!68.=&8(S$$**4R%X%c(,D%9+J!@#+$!!Aw#$Bv#y#^#%n$m$)%R$O$!!a#d$&!!R#1.)4&%s#:F(i#%$!!3$$!!(,$!!Ci$&!!|#&:)?1$3y$*Y$%!!M(i$=$!!@Y$$!!p$B$!!+]$%*[$#n%-h#$!!b#?$!!f#U(%p$B9#s#2$!!6y&$!!l#)$b#?e#P%$!!c#5$!!_$B$!!/&$!!B+%A*#)7b)$!!a$F&!!7m(&93W#$!!i#$$Gh$,+$a#Q)*^$$!!*a$$!!@,$#j$4$%}$g),y$$,$b#4^#y$$!!z$~!$!!8~$%c$|%[#m$9x#%?~#4*=s$$0Il#+$K_#s$8$!!*~!$!!l%A%+EI%{&.$!!(a%$!!]##$!!.#$!!R(,$!!(R$$!!x%($!!-Q&$!!U&($!!.u%*!!x%.0,%*$4d$|%)2$!!!.*!!e&.P#(=h#46*6y(^$$!!*8%+9Bw#33%!!*D%Z$$!/P$)$!!#g#$$f#+V%%!!l#%0%%1R#+1L&%!!$8Cr#$!!r#D$s#Cg#=)!!/@(//D!J&5$!!]##$;JD$$!!g%+$!!.j&%!!U%/F%$!!%}#$&|#&d#$!!S(/$!!*a%$/$(U%$!!b(.$!!#;$$:$R#$1d(+T%$!!x%*$!!)z%%!!(G0C$!!l%k#$9x$#J$m%r%}%:&!!*V#.M4G$!!j%{#$k%z#g%[$$!!J[#$!!2S($!!T%*$!!,o%$!!f)3$!!(S%$!!d##$k#P%[(/$!!H($%,C3$5V#l$d#%!!Fu#7P$%!!&[#*Y#&*~!V#]),@6R$$!!Z(M$!&v%($!!)_%%!!f&->)%Y#T%*#m&.$+e))n%$!!Z%*$T%*!O$g%z%Y%+$!!0S(%!!V&-7#$GW$u%l#$h#Q$V%^#$*?c$%$!!1u&&!!,&_#Y#u$T$%u$m$E]#.?$!!_#;$!!f#>%!!*&l%,%!!%^#[#p$$!!W)j$$!!s&{#&Jg&c#$k#(~!p$(X)i$u#Ko#K)*Mx#&!!4]#%6#j#$!!R%*%!!:p#&z#$7m%*a%$[%V%&U$&k#S##P$+Q#-F&a#:,K%:$r#%e#.#w#-U#$!!_#9$a#8n$P#$!!2~#$3P$]$K$T${#(o#%V$j$c#$7*$i(s*~#S#$Y#u%D%(!!s#5&2!0*4$!!n#B%o#A-#2I$J~$4m#(!!+X$Bx$![#*g#$b#**n$$!!x%E$!!EU%$!!u&.(S%S%S&$E!,(r#%$!!,k($%g#e%&$g%Z#h$>$!!OT&$~!S&@m$$!!g$?$!!x%*$y%+?p$$@o$9z#$!!KT#$!!c#T#$!!JS#%!!!&_#S#$a#V#k#!$!!Kq%$Lp%m#k$$!!n%*$!!2q#%P&h#Lf#&R#%z2u:*z&%S#$p/k0/9$!!3B$2AY#?%m+d-P#9E$$bEP,T%a$$!!R#G&!!l#V#!*9A$!!_#O$!!b#R#$!!f#T#$!!CQ#%!!]#O#)%a#J4FJ}#(!!Bi#1-HR#BZ#(!!_#O8B8H(&$f$=BO$a#~!;A$!!W#J$!!H>)!!(+($?8#%),$H>H@$!!T#e#$R#GG^#)!!b#P#49Kk#5U#;5%!!%/S#P$(!!B[#1-^#p#_$r#(!!W$l#R#c#X#T$(&%O[$~!]#FZ#%~$z#S%_$R#g#%!!25G>%Is&Q#d#!(&!!#(|#f#=:$!!o$U$$!!l(U&)!!E,e$t#b#,T#.f#R#%!!S)d+CD%!!IX#8P#&!!R#X%$6]&|(&!!,4$0&($!!l#V#$!![&}($R%DY&}$$!!4m#%!!Z#27j#$!!w$G%!!6k#u#9$!!El$&!!C2.,Gd#)!!=O0A4Z#0d#Ad#&!!Od#4O0V#%q#k%+%y%!%!!l#q(*)$j$=N/$a#;:s#%!!0W#%&%!!OKT#0$_#y#?g#$!!e#B%!!U#;/-$!!U#;$!!Ag#&!!()4L#-$!!0@$!!C0%!!b#|$$+$!![-j$$p#m$-Q)%3g)&?/E%!!5$^#F%!!9/-#$!6C-(U#J)!-$l)q%J5$!!Gs#%!!l$W#Gy#)!!A200IX#%A)8$b$M7O%u#+05:W#$U#;U#B$!!+5&!!$+KR$.L&!!+L#)z%N$a#T%G2$i#Bs#J&d#f#)*5K$*&u#G+%-8HV#%!!i#^#W#%%!!OP%,*$!!Z%[$&4[#>W#7F[#~!$!!c#x#$!!~!b#$!!p%m$$7r#J{$&!!O02,o$E$!!6k#$!!6k#%7j#x$J6i#&R$m$o#r(&%$.$J6c#G&!!I=~#e#R%g#%!!0+*/(96++)#~$_#m#R#$Q##S#F$!!V%b&$-Y%n&a)$!!p#X#$q#Y#o#Y#$!!w&r)$*c%2;$!!?J%@I11k#~&$!![$)$]$(9k#&u%e$H0H?Q(P*$!!f#R#$!!k&b)(Fz&FJHB+&h&W)$>i&h#R#$f#R#R#E$!!MA&&J7&/%)*%i$v#82Ed#$!!S)f+$~%Q*6(&]%a.8U(*H&&$!!C;$!!MB$NA;J%!!&;#;&#R#J,)$]$s%%Q%@(%t%^)%!!_#5I7%X$Iy#=+()a%i(3/$+7U%%3)/$!!K2$L3d&u#%!!*}$$,$)Y%y%m#$!!07$16y#Y#$x#X#y#m$$r(Q#$>$^&U$(,$i2R)BK$w.~?9A$!!X#K$!!G=$!!E=&!!T#I0+E=$!!47&!!LB;-D9$!!:F$;E7=$!!7=%!!~#h#?J%474@;5$z$G38)#o#%-!&@7&!+*$Y#LDO$l$V$7($k#X#93$!!73$62@I%w$T%,$,(*!!.;2-0!C,M6]%a$$!!{&j%$)f$C~!$!!X#K$;S#@%(!!!50-:#=2$m(t%94$+L}#e#$!!Z#q#&[#p#Y%b$DBDN$m&|%S#f#(!!AC=M6OG~#%!!P#5I7$!!2-$Z$R#.A$/B}#E$9Y#g#:$!!0E$1F/D$.CY#8(&)9*#.%#8+$!!.C$5Q#+9%v#[%,)IY#$Y&T,d#l%$E-)I$!!Q$6$!!(B$!!x#4$y#5(@$/]#3z#%+k$)(#*%m#t&%$%7$n({/T#,(9q$),&#X$(9*$^)r$*N$f(r((0$!!e&u#$!!V#u$%!!.?$0%-NL2&,$c$Bv#F(^%U&9^#+)u%f#/(%!!g#);a#&!!Cf$(3*+$!!Z#R%)/b#=,00GY$1,o%d#%!!k#P&3F$!!]#%$?>.@&X$T#q%1&,GS$%/%6t#Og$%!!R%Y#A5$%.*6$!!&:$!!6+$!!*4%$#!$>,$!!&-$!!%-$&,U#6$!!#,$!!V#7$!#=-%!!##>,$!!W#6%!!>,!$$!!=-$!!T#7%W#4>,##$$!0I()/&!-9(!*8$171$$!!*/$!!o#E$!!G%$!!=+%!!%,(,(!!,%()!5+3$()&-$!!?/%~!=&*!,$>*N2$!!(7$!!77$,&,:$!!$>$#=@!$86(0$+##3$Ed#T#P%(!!K)!1%+b#;&!!V#3z#*.&(a%.U#Q%#~!(&S$H%i(-L27%$W$~(M+$!!8q$$!!*G(!!Z#/0#*(X#n#$!!f#_#%!!MK0h#%!!C_%(j#%Z&-;k#7]$$!!a&J)[#d$&%D*/!&&1i#$|$k#]#U)$r&x$+>(!!M/%&!+;b$$!!{$@$9r$,!(p$_%/Y#1H/&S#,%!!(G]#|%$e#t&&B$m1f)E**!!Hq$!(%(g$E(9q$G$!!Q&V#%n#]%a#e&%:&8)*G!A7^$$V$:.n$$!!>1%=0#1)B$BP$|$L$!!:{#$!!}$I&~$JN/J&w#;$2b%^$C)!!/P#x#=1X#!(.0$T#x#V#%$!!+d#$o%n)4^#$KU*Gv$$!!T#0$!!_(j#$!!m$E$!!z#v)$b%$c#q&${%U$B^$$}#S%0Q#$!!,L$!!b$D$J-.L$!!P$>%!!/K~#=%!!/KT$@$!!#/$$.1P#$U#1m#7$!!Ic%%R%8|#=-K%K%^$I/K$-Kd$D$_$l$.L$!!,L$S&l#Il$$S,s&w%H%V)wE-)Ji#$f0[#0%&_.Q%,-P#s#%/%aZ#iF3t%z$/$!!*l$$!!(^#$)]#b$)%W$q$):/_%$Q%r.+x#*!!3!L850;C;d#3c$$k$+8W($P#c&1P%'],\n    bld: [1, '&j#f#$8c#)#7/,b%=#%~!Y#&#;,!#&b#*+U$o#)%B?#/s#)?#$Ao#+*V$d#%!%,#$:W#)&P#:#-W%NE%!#,#$*#!&=+!!#H$-$4G%!#*#!,#!&:-!!#H$)c#~!&!#4-#!>,!+^#4!%)#!)&!$12$!0&r$-7#!+6$&9G.$#2/!&+G0$#21#)i#4#./#!))#$+)!7&#!)2&#./%*1Q#($!&*!%##.7!&4^$*6-#+5&^$$#,5#$-&M0$90$#6)NC(!$3.$%A5#)X#p#2$#,(!!%9#+P#)&!!%/#$5.$!%%!)4&%!$)*!#4/#&O5#2/#$3-t#GG%!%*!!,#!&=-$!%H$-,h$G%!%*!!,#!)=+$!%H$-,b$E%!%,!$,#!&:+!!#H$&a#S#!.1#$1);;&!!,/#&54$);C!((!#.1#$5&C4$1.$#2&?y##,5#$--|#!G%!%,!$,#!&=+$$%F$-*d$G%!#*#!*##&:-!!#H$-6Y(G%!%*!!,#!&:-!!%H&),]$G%!%,#&EQ#!75R$$.+!!#>&!#-!!&-!#/#!!96$$%2!!$,!!%,!!87h#45#!&3!!#-!!&+!!/#!!96$!%0!!$.!!%*!!:$!&w%N#23#$3&N!4$#25#+.8)!!-0$!((!!*1#)#R#!(3#!14$#*)0T#!&(!#.B%$-*Y%(-!$&-#!58$#2-{#8/#!+G&!%-!!*(!!.7#&CS%A&#*D%)MN1#$3&!!&4$))>#.3#!&&!%+))@0$#0-!!%&!-;c#!+.$$&(!!%2$$05#!)&)g#2$#43#):Q##21#!)$#!/))>A&#0J%$+*$&J=8&!,9#)H&8&#.5###)#&%%%8-!$7&,d$.!#21#+OH$!#2/#$3,$$&($&.8$/4&%.)FY#3!$+C&%:3#)0a##23#&)+!!-&![#4$!03#),@##3##/2$!,,3~!!*-#$+,$#)*!#.-!++B#!!7(!!%*!#85#&;=/!!5,$)&d#!*5#!%&!$/&{#a#*R#r$6+Q#&s$h$(GX$4)H)}&@%!$)0!#65#&&u#2$#43#-@J!5*$!)*!!.$!!%)!!,&N7.$!4/#)]#S#0!!0&!!*+!)2#!$2$#0;#!-)X#4#,3#!1,!!#)T#}#($#45!#9*#&X#01!#3,!)A8&-%!!/4#!6&Jf#!03!!1)E,,!!%*!!0/!&CP#!,5#$-+6P#-#$/)!!+,!!*(!+>8!)+#$9*$#2%$#0&Q#32$#45%)&0($!&2$#09#+?A3!$5*!#(,!!(&!-+=$$2!!2+%$))!!)&!$)&=:#49%$7&ID0$#41#&S#b#$5=$#4-$Z#!-.$!%,&!,/##%)!$&)(.=&!0+#$+3#+=2#43##%+!!&&!!5+P#%2$#23#$)&#!+%!&.B2$#.3#+V$A7%$-*$$&*$!)%!&$a$:&#2>#)P#=!&*&(+.*-.)!F($!*7#$10$):4($!(,!!2/#*0B$32$!(%!&#%*+,K#.7#$/%$!$,$!%&c#d#0$#03#&0*#23#!3)%I$)4$#2/!!-&i#{#2$!03!(q%k$,!#01#$/&*=,!#=-#)u#q*#.%$#,F(&7.3U#)!$)1#-a#R#+%##,&!*R#>%)Nv##,($#0N(&9&!Q%6i$>%5h$&@r&0z#-#3{#&);5d$G+6c$&AW%5!!U#6!&V#t#4S$m#03V$&T#x$$A5$!@&T#>!0;!!1&?U#4!$T#5!&z#k#$*;!!-+]#:/!!/+$!)*!!&0#)4M!+2$#:1!!1&2X##8/#&7)/M!%+!!/6!!,)D%)!!/0!$4)$&@@!09!&5+^$C$,)!!%/!#7,#!%)u$D!&,!!03$!+)*J4!!,&!!(1!+6J.!!(2#!%)!#%;!)/o#!23!$/%$!$+$/!72!#*&!!%%!!,)-H!%7!$30#!,&!L$23!!3&0>!05$!/+I1.!$:($$,/!!+&!-9q#5!!)+$!+*!!),!!2*!&g#L2!!.3!+!c#,!#8-#$/&!$+(!)m#%!,+!!()!!3&.C!.3!!/&4T#-!#7*#-S#d#!-#!!&*!!%*%$0-$!)-7!,$!%%!!(#!!(7!!&%!&[#D$GX$$#H&d#y#6!&_#7!)_#T)0!!),#)47#&Z%P$0!!01#):d#!29!!5.$!#+d#V#)!!&&!!-4$!,+#)6H+!$32$!:)!+s$p$#41#!)&#$-.!$)+9W#!21!!+&!!&%!!&)^&9)/,)#%(&%(&!?.&(.-()M1&)4-(,1*$)),:)#$)8/%,3*)E:(,-%$&)%)+)I5,)#%,&#%7.))J#%*&#(5,)-+*;(,1*$&&#&-,)%%)R#@&#)-2+,21()d#&##/(-50)*0)1|#$#&)2+(,1*)d#%($!#3,-7.))]#;1./;(&*0*&)d#$.)%,(&%,5*+[$*(0)#$$3(%(+%+5&}$f#.*&,1+&S#d#,!$4-$&I*#7,!$8&G0*!$8-$&R#U#$2-!#5):!4#$0)!!#/$+R#(#36#$%(#$(*!!*)M1$4@&#5(!!%&A!.#$4-$+K,+!!;4#$*$!$%$!&KI$.9$!-)3Q$!&*!!,9#!)&&W$!43!!5&S&|#1+*/0.)EJ3.+1.)#%%&&b#f#%*9.&+&X#E8+*:9*&9,9*+;8+&8b#7*-;8+&V#%7*-98+&Cv#9*+98+&+P#8+*87*&J@9*+96+&:_#9*+98+&^#P#7*-98+&~!4(6L2+7&T#g#6+,89*&!c#7*-98+&)39,-;8+&HE*6N2+7,c#0#,+,/#+&&)!/*+.$+6s$@k#=-=f#*&(09,&-3Z$,Z#%%%!%1:Y#)1(FMD)#)T#^#,}#C/((!%3l#&s%N&-g&w#%.&Q(:,8}#V#1;&p#}#F4Jm#E3+NT##$*.&!Ed#9.Y#V$:1&7^#0=F41>&4@;.Lo#:/&k$l#F2~!u#E5)d#W#Mp#~!:>Y#&!/;&6g%!41$#3&Z$Z$*&.4-()T$i#1()-4-#*$!)B-1*/B,&*4%$&s#4(./()/&+6-(+3,)&;n#1*)/0+&Q#m$(0-(+1+Q$,&)23*,-,%(&,/1+O4,(%&*(-.&)&(/-):O%/*%$%*%&**P&y$,47*)-)%$)8-++/&#)/?1,4-($&1()9%&+*&,8-%)/+!S#(.%$%(3,&&+#+1)(N.:1($&)#+7-+))-($&-)#)+6-.8-(%(&^#T#8/4C9.&/T#_#k$J6c#l$+^#e#CDCC&#**-,++76&U$Z&*0/*+3-;Q#$)($$&*&###!*.>.$)&+3-50+.4)/N#%)%%*/(+1)*~!=1*0/*)-/*&b#8(.7.)/)^$X&.85.&+(&-/)Ac#,&%(*&#(5,)+7)/*)#(,)%(&~!,(.3*)-(e#-+5(&,0!%&v#o//;8),6&*40+(01*&Mf#8-*49.&8b#f#H0=g#G-}#h#$##%H6$$)%&+(&e#l$I9&Ox%K7_#o$L6&-_#.)(./(&]#r#*2J4)3/d#)a#n$K72A%$(,)%Kp#%$%.B2)/&^#V%6-(27*)q$2k#U%K7f#y$B2%*&y${#2-:O3*+/i#(,;.5Dp#N8K;0-3&$p#]#D.8^#C&:6089019&n#-2/V#_#30&{#)17G;061$x#?#G)(D.30.-?!25##,D(D$D)(7)Ei$0/.2$#%(-(*B0-+#%&%/-4522)@E3+*380&*)$)+8*#!0;&!32!)#I((&%9$!16#&)=$03$#1&,C6#$:7$)O+!%2#&4;&(9&X#0&45$%7)b#.&63&!1%!!&+A=%9*#$%.#!(&$$.&5M4#$25!&D>4!$43#)3-7!#50$$#*!&(l#8#$29$+1&5$#3*!!&*!$%%!&U#b#!03!!1&$D!32!!2&J2$:B$#;&2T#$27!#3&)G8#$49!(2=#%&03$#5&&K2#!05$)%6!&.#$83!#7&_#C!/2#$,&;I#34!$4&W#)9!#78!&@T#Q$*$6R$+&)X##/=%!,+-E!(-$!&+$#36!$4&T#)$45!!5&4;#-6#!,&s#k$!87$#9&&O6#&?7$&!24!$45!&$:4#$65!&!06#$87$&V#/6#!69&&44$45$!5)4M$(%!!.9$!3+S#+2#$6*#!(1$!)-!&!H!32!!2&g#/;$#3:#&#/>$#3:#&!-9$!3:#&#/;$!3=#&#@$2>$#3&%@:#$2;$&+S#?#$6>$&=@;$#3:#&k#&$29$!3,(;#>Y$*$=/!!&~!&D$!%&5T#:#$09$&&.8#!2;$&D7$6;&#5&:;$2;$#3&%>:#$0;$&s#)#18#!0&>,:#!0;$&$?!1:#$0&;.:#$0;$&8?;$#/8#&>M#58#!2&>=!3:#$2&;*:#$4;$&$=#3:#$2,;=.#!%O%C#!&.#$=Z$+-W#Y#$!!3%!!)2!!8$!$*1$&![#8#!29$&#@!38#!2&7@!3:#$2&7B#38#$0&5~!8#$29$&#@#38#$2&5~!8#$09$&#>#38#!2&u#%$2;$#3&$?:#$09$&).?%$2>$&F);!#3:#&&?!0;$#1&6O>$#3=%&$=$2;$!3&Z#%?#$4>$&!*?#$4@$&F$;$#3:#&$?$0;$#1&8A!2>$#3&6G$?3$#@+f#!!%p#(!&.#$=Z$+#>&?U#$4>$#5&C}#$0;$#1&?;$2>$#3&B^#$09!!3+A9&!!(7$#1#!#)6%&$D;$#3:#&!-;$#3:#,G*[$*$=1!!&~!&D$!%/$&&::#$2;$,X%@#>[$*$?1$!&~!&B$!%+S$P$%#$4i#+#7%!!)b#(+t#4%!$4i#)#9%#!+b#()8)*S#8#)d#9$#3&[#i#$?{#+#@&l%@@$*d$A#&X%O$:7!#>+8w#$!!#-!!&&!#52#)25>$#-(!!+6#&^$q#5$#54#&G!!67!!9+f#C)!#>6#$((!$C5$&4U#5$#74#&,6#54#$4+4e#%9(!!&*#!%#!&6)Q#>(##$2#&6;&&Q#@8%&47&-;>!)*#$((!!0$$$*5&%7&/b#2!$:3$)%Y%$!$(5$#76%&G,&23&#3)T#36($*&!$(3&,)~!)%+$05(%#).*-0-+)K#%#()0*-05/&K62#$.3$&O7#5=%&2&$6!:7$#;&-M=#!0>$+6X#$45$!5%!#)*#!(&{#P$6%&67&&|#T$!5:#$4*L[##$(%!%163/07+GJ,12.%&(%&%#!-2+FU#*-%#+.(%/21-.3&H!.10,-0+@L%&,*-0/+%&&$%)).H(2/($)+%&/-f#%#$%*5($&&#&+($$&0)-h#+*2N4)3%!&-:1##*$%*&272).?3(,O11(-;.+*##*%$*4+%)@p##&((/43/,1+G=#&*%143/%&##(-&M08C-(7D&j#F.)(,/*&%l#2.1211)E6(%(+,2-.55&;K2./23/&K%0,/21-)A8,30,&(%#-*)]#M73054.&(##+E,$%##/651.5%#%&&::0./23-&I#:2/293)IF&$*+4:/,35&430/221.)6Q#&)2/4:B8/5&l#Q#04@6/5+a#]$,2B8-1%&$&63#%&.74/.65,&>w#.47./5&_#D*03,+3&T#J,:9./;&&w#0+*41(&;~!2+*05*&Y#,,21(+3&E8,43,-7&W#K4/,03.&,00-,01.+H=)#%(&#&&&%-10-&%T#2-*.1,)J,&&*+26-*/1&72.+../,-).;:73#$$$*-*(*+)&()&V#P#0/.0/,&!4*+8:+(&$w#02-,13&43.+24-*)}#a%%&%%*),01,/S#c#-(&+,)#%(&##%$$$*)8G9.&Hk#4+*25*&Kc#8-*29,&3L+76+,4&6X#*05,+1&4=0+,23*&v#v$,:>,+;&I3=-,=>,&8V$:-,=;*&>e#:-,=;,&D+,=>,+>&Gg#0)*61(&Fe#4+*65*&W#!4+,:5*&;30=9.1>&;K-56/,2&Q#K370/46+i#82-%*%$#%$#2G5,+Hd$3,)+$#&)%!)+21&0+2-.63,&G;+(J[#*)/OA(&$$(&#%#$*01*$&&#&)%$-89%)$&*&#%#$.61*)+&#+CS#*&2A5*/1%$&-*&&O3R#9,8Q#8&([#3*-92+&i%|#E9(,F6&V$Z%/;.).:)F#*.1*/9.)%*0e#2%$!&,&!#($$$.&.?~!4->!&,&&1I5*-76+*Y#T#/#-9I1#%%$(4)k##$)($.=;,+7))A>,+72)$&*&+J4,8;,&-#!$+,&$))@4*45*&-)%&-+[#>01**%&,,$#**12)m#d$)1&!)92&.G&,Z(,87*+;&M.->6+,=&.E2./23/*EW#%)&$*-8*&,-,+5L$.+(-!)+!/*),!)p#]#141/#)$$*-)4I05*((+((5=&c#(,*3:/+&q#F8+*69*&L)2+,=3()Hi#$34)(63(&)+/{$%3.##),#!(*#&4)P#1&49!!&)!%7*X$y$%+(!!#?#$8H$&>&$67$!5&$E4#$65!&m#I2#$21$&&O0#!23$6w#;-!-a$W#)#;4#*V$$!!+!)%!({#$!#+3$#;V#%+a$,!&Q%,A#)Q$D&&MX&+x#;$(y#&G;D$*Z$C%+M=%!!+b#*$*%!$4i#)&g$HA#-c$@&-9c(K30EQ#4(,@.;Y#&#)/K5&Y%V.+W$F&*X$1y#+!%P##+U$o#)#;*!!&P#(#~!W#&#;,#!&3^#$!&4#!%,!$:W#&&OO!!%*#$:o#)*V$4!!%-z$R%G%!%*!!,#!&:-!!#H$-$=G%!#*#!,#!&:-!!#H$&R*R$&Er&5#F&^)u)!4;$!5&:A$2;$#3&6A$2;$#3&6?!4>$#5&8R#;$#3:#&@::#$2;$,b#%0#!%M%C#!&0!$?]$-&?U#;$!3:#&%@$2>$#3&%>:#$4;$&C~!$4@$#5&=>$2;$#3+s&T#,!$87$!7#!!),!&CR#0#$M3!-.k%.!!$p#*!$C#$A[%/#B=#/z#Q#!#g#&!&-$!%D$%BX%.$A>$!&&h#=?#$:@$&(^##56#$4+M-!:3$!&)$!)&!%/)V#E>$!90!!).!&;M8#$69$&&E:#$6;$/M3#+*#!(#!!)*!!*%!$8>$#9&5E$69$#7&d#($6;$#7&&X#8#$69$&$2:#$6;$&J98#$69$);B!+.!!47$!-+!8$%*#!(+#!%9$#5/Z#~!#!#-*#!(#!!),#$(%!$8>$/e#H%!!+6#!%(!$,)!!%1!!$+$&(U#=#$4>#*=i#&$$,3!#52#%#&i$B!6;$#7/%H!+*!!(%!!&*!!(%!$8>$#7)%y#!%:#$=U#&#B&%LX#%$6W#&&B=$63!!9)F&,#!&*!$:3$)0}#$%4#!2@$#7+8@$27$#3(!!&.#$%+*7&$!%3$!34#!%%!&!J$45$!5-#3#32#!%%!!*.#!*5!#)&*B9$!78!)n#_##3C#$81!!)&JIR#%$:S#&&R#=$:U#&#;&y$Q$2!!.3!+F2!(5$!56#!%%!!,*+l#9!#98#!%%!$2)$E>!!98#!%(!&BI4#!67$+EE)$!%@$#7?#!%(!&,l#$8D&#7&~#{#8#$89$&%o#6#&C7$/LW#!+&!!/(!!&4!!,%!!*&!!(&K>$89&#5&h#%8#$89$&,=$E7&#D&p#L$85$#7&R#S#%FC#&EJq#c#%!!%&V#/$!(5$#[#(+U#&%*)Z#3!!&/$(q#,!!+$)%U#A%$T#$%+$!,]#%#++$$&%~!#&A!$V#)%!*.!$49$)_(R&$.5$!9:%!*)*S#$.-!!.5$#;&#F6#!89!&=^#!89$#7-4;!#+!!&+!#7,!!)0#$=&?-!34#$0&)v$:01691&=D210210):T)($$)4+,6;.&4e(*:;,->&,U#*:;*+;&p$J=+*:>,&}#2*27.-57}#-.8(&.8+%2C(&,8)#,89.-9#$&-&#>[#%$&+&#/;&Y#S)16@707)?R#4;(($#((16)A/((&%,(/43/&V$i#*10.+.-J>1-%&$!.3%#%&(%&(%#+b&w+/!!))$%36#!4)!*/A&!$1#$4#!21#),?!%7!#5:%!,8z$P(B&#75$#@4#*V$-$!&)$!+#)(!!).#*V$7$%@4##9A#&&r*0!$E1$(*q+4$#,$07$.P#2/$#/*!!54$$#%!$6-!$*+[(t#+$$%/!#;.#!&,!+5B!D%!!+?#$2&$!=&Y#1$87$#9&#H8!$89$&$_#4#&=1$&g#Dk#)#Jl#(&1x#!16#!0&g#)#16#!0)Q#$-#!$)!#52!&Dl#1#$;0$&J?$90$#:+e#X$!#1!!>~#!!=1!!$+l$9!:1!!$c#!!#/!$;&/X#8$#09#&#.6$%A7#&NB#0;#!1&8/;#!38$&9-$38&#2&@L8$#29#S#X?s4$,C(&j#S$($?L$!)D$$,5$!*>$!+&!({#1!!(-!$(/$!)-!!&@$)]#0!!((!$P#;!!&3!!53$$l#;$%H)!(q#K#(c#L&#1:##;8#$8)l&]9R$G9^#z#D%*($/t&,=-.E%$#*$!4R#>*3N&#)1%$&e#^#P$G3J~#H-->-%)3N2#*F0&+&#-@~#H&l$d#F0-;G1&V#{$;*Bs#8-)Oe$)%$&B*+3G1&.Z#(05()1&n#7%0@,)/+M8?n#@,HR$?/(0.&#(7j&@1FJ6%*>05D~#S#a$a&P$R#3B?3#(G5Lg#%$+1$%/7%$+3&H4P#|#@0Q#}#&#R+?3j#w$@2)a#w%~!{#5,5F^$Y#b#m$)=Y$(,)%2C/(9N)k)c0$23$$-*#!)/j.d2%0P#5,=w#C)1t$T#)1~!4->^$L%.)yCd##4/!!+#!&-&_+u(=!!:>!&n+i+&a#?$%_#){#;A&!8)!#E>#'],\n    kl12: [1, '+R%X$/V%z$$&_#z$10e%6Mu$c#'],\n    kl36: [1, '*a$j$P$,]$R#e%n)]%{#Ov#$%'],\n    h_hallen: [1, ')[$w*K7f#y$B2%*-(/w#w(Kp#%$%.B2)//(a#n$K72A%$(,&}#c#a#p$K7_#o$&R&m(I9d#m$J6&^%X)K7_#k$J6+P$^%BDCDCC&#**-,++'],\n    h_halle3: [1, '&D{2J6e#l$I9'],\n    h_museum: [1, '+r(?P#50EQ#4(,@.;Y#?/'],\n    h_kolonie: [2, 'e#ca#m*$*Z)i$&**C_+3H.n$Z#P$h#3+;2NNi#^#P/x+(y#Z#R)8~!j(b+Y)f%=,h#*h#$T%D*T#-?-&)#/E>+7#9M#(2,1?OE),#*0%K?+%!*A]#(#0)X#_#x#IC9Ko#%*A06F$+D35CX#p$R$e%0B!)Q#>8J&1O-X(v*j%u-'],\n    h_garnison: [2, '/U%Mo#c2t#)r#R%.*T#z#T#>b%^)6Cl#z#l$T#R#n#'],\n    h_gartenstadt: [2, '(u$b4u%0}#t1j#w#h(8'],\n    h_rennbahn: [2, 'Mg;a63S#Z$U#Q#>599Q#)Dc(W.^#a##+~!U##Hj#y#6g#V#e#P#?8$W$j%CCCV#_#n#6GMG04I:X#f#%?EV#E6b#l#2,KK70DP#(4>OU#d#HZ#BX#5)-.'],\n  };\n  // Wege: Minuten, Meter, Sekunden je [zu Fu\u00df] und [Rad]; g = kodierte Linie (Raster 1 m)\n  const ROUTES = [\n    {\"id\":\"sbahn\",\"name\":\"S-Bahnhof Karlshorst\",\"short\":\"S-Bahn Karlshorst\",\"entrance\":\"Zugang Treskowallee (Westende des Bahnsteigs)\",\"foot\":[18,1383,1108],\"bike\":[8,1399,473],\"end\":[-1061,563],\"g\":'7!!p(Z$K2I602,)E#,*.=h.v&C3]#Fo$P$_#F^$NX4t)6$?(d#[*k#U#'},\n    {\"id\":\"tierpark\",\"name\":\"Tierpark Berlin\",\"short\":\"Tierpark\",\"entrance\":\"Haupteingang B\u00e4renschaufenster (Am Tierpark)\",\"foot\":[29,2151,1720],\"bike\":[10,2137,625],\"end\":[-1213,-1354],\"g\":'D!!p(Z$K2I602,)E#,*.=i&{#]0],+,j.~*%%x#w&*,(v#2_#f#x%*AY+_8Er#V#y$#,)*IU$,(?n#.R#2O@,-;'},\n    {\"id\":\"wuhlheide\",\"name\":\"Volkspark Wuhlheide\",\"short\":\"Wuhlheide\",\"entrance\":\"Waldrand hinter der Bahnunterf\u00fchrung Am Carlsgarten / Verl\u00e4ngerte Waldowallee\",\"foot\":[23,1749,1400],\"bike\":[7,1710,449],\"end\":[-339,1119],\"g\":'=!!p(Z$K2I602,)E#,*.=h.v&~#U#o$P$_#F^$Ng%Q,}(z1s#h&>[#7Bo#V$*)p$g%3&y$g%+)'},\n    {\"id\":\"trabrennbahn\",\"name\":\"Trabrennbahn Karlshorst\",\"short\":\"Trabrennbahn\",\"entrance\":\"Eingang Treskowallee (Ecke Ehrlichstra\u00dfe)\",\"foot\":[23,1714,1373],\"bike\":[10,1728,621],\"end\":[-1099,879],\"g\":'C!!p(Z$K2I602,)E#,*.=h.v&C3]#Fo$P$_#F^$NX4t)6$?(]#n)0{#&9(Q%%F(),a#e#/!5)u%(o#4Q#8Q#'},\n    {\"id\":\"biesenhorst\",\"name\":\"Biesenhorster Sand\",\"short\":\"Biesenhorster Sand\",\"entrance\":\"Zugang am Nordende der Regener Stra\u00dfe\",\"foot\":[6,454,363],\"bike\":[2,464,149],\"end\":[101,-378],\"g\":')!!f$//e$1![#m1-!'},\n    {\"id\":\"supermarkt\",\"name\":\"Supermarkt\",\"short\":\"Supermarkt\",\"entrance\":\"im Bau\",\"foot\":[5,0,300],\"bike\":[0,0,0],\"end\":[-124,-3],\"planned\":1,\"g\":'$!!h(('},\n  ];\n  const PLACES = {\"tierpark\":[\"Tierpark Berlin\",-753,-1956],\"wuhlheide\":[\"Wuhlheide\",-530,2245],\"trabrennbahn\":[\"Trabrennbahn\",-1076,1187],\"biesenhorst\":[\"Biesenhorster Sand\",450,-53],\"museum\":[\"Museum Berlin-Karlshorst\",-135,-22],\"sbahn\":[\"S-Bahnhof Karlshorst\",-972,628]};\n  const BEZIRKE = [[\"Steglitz-Zehlendorf\",-17924,5045],[\"Spandau\",-23749,-6762],[\"Charlottenburg-Wilmersdorf\",-18203,-1406],[\"Reinickendorf\",-17608,-11690],[\"Mitte\",-11906,-4938],[\"Tempelhof-Sch\u00f6neberg\",-10629,2465],[\"Pankow\",-7444,-12800],[\"Friedrichshain-Kreuzberg\",-6244,-2604],[\"Neuk\u00f6lln\",-6732,5498],[\"Treptow-K\u00f6penick\",7080,6859],[\"Lichtenberg\",-1786,-9823],[\"Marzahn-Hellersdorf\",2916,-3304]];\n  // Stra\u00dfennamen: [Name, x, y, Winkel, L\u00e4nge des geraden St\u00fccks in Metern]\n  const STREETS = [[\"H\u00f6nower Stra\u00dfe\",-1232,-320,-0.122,389],[\"Treskowallee\",-1355,1219,-0.993,655],[\"Andernacher Stra\u00dfe\",-668,469,-0.413,203],[\"Am Tierpark\",-1200,-1228,1.203,631],[\"Ehrlichstra\u00dfe\",-1533,573,0.617,942],[\"Blockdammweg\",-2223,197,0.053,306],[\"Zwieseler Stra\u00dfe\",-128,-742,-1.483,1095],[\"Am Carlsgarten\",-625,951,0.658,616],[\"K\u00f6penicker Allee\",-567,-122,0.608,737],[\"Waldowallee\",-654,220,1.199,1303],[\"Rheinsteinstra\u00dfe\",-821,290,-0.374,471],[\"D\u00f6nhoffstra\u00dfe\",-1401,222,0.633,623],[\"Stolzenfelsstra\u00dfe\",-806,704,0.616,737],[\"Hentigstra\u00dfe\",-1238,-14,-1.373,635],[\"Patersdorfer Stra\u00dfe\",-62,-61,0.091,251],[\"Regener Stra\u00dfe\",76,-210,-1.49,323]];\n  // Orte der Geschichte: [Name, Beschriftungspunkt x, y, Ausschnitt, Ebene, Art (area|bld|circle), Radius, Mitte x, y]\n  const HIST = {\"kolonie\":[\"Villenkolonie Carlshorst (Prinzenviertel)\",-1600,741,[-2837,-68,-1013,1445],\"h_kolonie\",\"area\"],\"luftschiff\":[\"Drehbare Luftschiffhalle (1909)\",375,-33,[137,-203,612,272],null,\"circle\",67.5,375,34],\"hallen\":[\"Flugzeughallen der Fliegerstation (1917-18)\",-78,106,[-214,-4,248,645],\"h_hallen\",\"bld\"],\"versuchsanstalt\":[\"Versuchsanstalt f\u00fcr Wasserbau (Halle 3, ab 1934)\",42,348,[-154,178,237,587],\"h_halle3\",\"bld\"],\"museum\":[\"Offizierskasino, heute Museum Berlin-Karlshorst\",-136,-42,[-289,-172,17,125],\"h_museum\",\"bld\"],\"garnison\":[\"Kasernengel\u00e4nde (Pionierschule, sowjetische Garnison)\",-22,127,[-390,-166,305,746],\"h_garnison\",\"area\"],\"gartenstadt\":[\"Gartenstadt Karlshorst\",-24,-204,[-277,-887,223,41],\"h_gartenstadt\",\"area\"],\"rennbahn\":[\"Rennbahn Karlshorst (1894)\",-1076,1187,[-1445,771,-452,2064],\"h_rennbahn\",\"area\"],\"quartier\":[\"Karls Living I & II\",0,-51,[-179,-161,230,330],\"kl12\",\"bld\"]};\n\n  /* ---------- Dekodieren ---------- */\n  // 89 Zeichen: 44 End- und 45 Fortsetzungsziffern (siehe build.py); Zickzack f\u00fcr Vorzeichen\n  const ALPHA = '!#$%&()*+,-./0123456789:;=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuvwxyz{|}~';\n  const DIG = new Int8Array(128).fill(-1);\n  for (let i = 0; i < ALPHA.length; i++) DIG[ALPHA.charCodeAt(i)] = i;\n\n  function decode(str, q) {\n    const out = [];\n    let i = 0, cx = 0, cy = 0;\n    const num = () => {\n      let v = 0, m = 1;\n      for (;;) {\n        const d = DIG[str.charCodeAt(i++)];\n        if (d < 44) return v + d * m;\n        v += (d - 44) * m;\n        m *= 45;\n      }\n    };\n    const sint = () => { const z = num(); return (z & 1) ? -(z + 1) / 2 : z / 2; };\n    while (i < str.length) {\n      const n = num();\n      const a = new Float32Array(n * 2);\n      for (let k = 0; k < n; k++) {\n        cx += sint(); cy += sint();\n        a[2 * k] = cx * q; a[2 * k + 1] = cy * q;\n      }\n      out.push(a);\n    }\n    return out;\n  }\n\n  const toPath = (rings, closed) => {\n    const p = new Path2D();\n    for (const a of rings) {\n      p.moveTo(a[0], a[1]);\n      for (let k = 2; k < a.length; k += 2) p.lineTo(a[k], a[k + 1]);\n      if (closed) p.closePath();\n    }\n    return p;\n  };\n\n  // Fl\u00e4chen-Ebenen (geschlossen, F\u00fcllregel nonzero \u2013 Ringe sind ausgerichtet: au\u00dfen gegen, L\u00f6cher mit dem Uhrzeigersinn)\n  const AREAS = { land: 1, lich: 1, wat0: 1, wat1: 1, kh: 1, wood: 1, park: 1, allot: 1, sport: 1, water: 1, track: 1, bld: 1, kl12: 1, kl36: 1,\n    h_hallen: 1, h_halle3: 1, h_museum: 1, h_kolonie: 1, h_garnison: 1, h_gartenstadt: 1, h_rennbahn: 1 };\n  let P = null, RT = null;   // Path2D je Ebene, Wege (einmalig beim ersten create)\n\n  const ring = k => { const a = decode(LAYERS[k][1], LAYERS[k][0])[0], out = []; for (let i = 0; i < a.length; i += 2) out.push([a[i], a[i + 1]]); return out; };\n\n  function prepare() {\n    if (P) return;\n    P = {};\n    for (const k in LAYERS) P[k] = toPath(decode(LAYERS[k][1], LAYERS[k][0]), !!AREAS[k]);\n    RT = ROUTES.map(r => {\n      const a = decode(r.g, 1)[0];\n      const n = a.length / 2, cum = new Float32Array(n);\n      for (let k = 1; k < n; k++) cum[k] = cum[k - 1] + Math.hypot(a[2 * k] - a[2 * k - 2], a[2 * k + 1] - a[2 * k - 1]);\n      return {\n        id: r.id, name: r.name, short: r.short, entrance: r.entrance,\n        foot: { min: r.foot[0], m: r.foot[1], s: r.foot[2] },\n        bike: { min: r.bike[0], m: r.bike[1], s: r.bike[2] },\n        end: { x: r.end[0], y: r.end[1] }, pts: a, cum, length: cum[n - 1],\n        planned: !!r.planned   // noch im Bau (Supermarkt): ohne echten Weg, Linie gestrichelt\n      };\n    });\n  }\n\n  /* ---------- Farben (Marke: Navy #003049, Creme #FAF5ED, Rot #C1111F, Blau #669BBC) ---------- */\n  // Zwei Themen mit denselben Daten: hell (Lage-Karte) und dunkel (Navy, Abschnitt Geschichte).\n  // Farben f\u00fcr Verl\u00e4ufe (Rand des Nahbereichs) als #RRGGBB; *A = Deckkraft-Faktoren.\n  const THEMES = {\n    light: {\n      out: '#ECEEDF',          // Umland (etwas dunkler, damit Berlin als Fl\u00e4che liest)\n      land: '#F6F8EB',         // Berlin = Abschnittsfarbe (--map)\n      edge: '#669BBC',         // Landesgrenze\n      bez: 'rgba(0,48,73,.34)',          // Bezirksgrenzen (gestrichelt)\n      lich: 'rgba(102,155,188,.13)',\n      water: '#AFCBDD',\n      waterEdge: '#95B8CF',\n      rail: '#5E7482',                   // Bahn im Nahbereich (neutral, damit Wege sich abheben)\n      rail0: 'rgba(0,48,73,.36)',\n      road0: '#8DB1C9',        // Autobahnen/Hauptstra\u00dfen in der \u00dcbersicht\n      street: '#FFFFFF',\n      casing: '#D8DDCD',\n      park: '#DEE8D1',\n      wood: '#CCDDBF',\n      allot: '#E5ECDA',\n      sport: '#E8ECDF',\n      bld: '#E1DED3',\n      bldEdge: '#D0CCBF',\n      track: '#003049', trackA: 0.28,\n      tram: '#003049', tramA: 0.22,\n      red: '#C1111F',\n      khA: 1, khLineA: 1,\n      halo: '#F6F8EB',\n      bezLabel: 'rgba(0,48,73,.55)', bezLabelHi: '#003049',\n      areaLabel: '#4E6A4B', streetLabel: 'rgba(0,48,73,.62)',\n      route: '#003049', routeCasing: '#FFFFFF',\n      hlArea: 0.16, hlLine: '#C1111F', hlEdge: '#7A0A13',\n      lens: '#003049'                   // Ring um ein Luftbild-Fenster\n    },\n    dark: {\n      out: '#00253A',\n      land: '#003049',         // Navy = Abschnittsfarbe\n      edge: '#4D82A6',\n      bez: 'rgba(250,245,237,.26)',\n      lich: 'rgba(102,155,188,.10)',\n      water: '#1B5577',\n      waterEdge: '#27668A',\n      rail: '#6F95AC',\n      rail0: 'rgba(250,245,237,.2)',\n      road0: '#2C5F80',\n      street: '#214F67',\n      casing: '#00283D',\n      park: '#093F4A',\n      wood: '#0C464E',\n      allot: '#073A48',\n      sport: '#083C4C',\n      bld: '#0C3F58',\n      bldEdge: '#175470',\n      track: '#FAF5ED', trackA: 0.22,\n      tram: '#FAF5ED', tramA: 0.14,\n      red: '#C1111F',\n      khA: 0.62, khLineA: 0.7,\n      halo: '#003049',\n      bezLabel: 'rgba(250,245,237,.5)', bezLabelHi: 'rgba(250,245,237,.92)',\n      areaLabel: 'rgba(250,245,237,.55)', streetLabel: 'rgba(250,245,237,.5)',\n      route: '#FAF5ED', routeCasing: '#003049',\n      hlArea: 0.18, hlLine: '#E8434E', hlEdge: '#FAF5ED',\n      lens: '#FAF5ED'\n    }\n  };\n\n  /* ---------- Hilfen ---------- */\n  const clamp = (a, b, v) => Math.min(b, Math.max(a, v));\n  const RGB = {};\n  const rgb = hex => RGB[hex] || (RGB[hex] = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16)).join(','));\n  const sstep = (a, b, v) => { const t = clamp(0, 1, (v - a) / (b - a)); return t * t * (3 - 2 * t); };\n\n  function create(canvas, opts) {\n    prepare();\n    opts = opts || {};\n    const C = Object.assign({}, THEMES.light, THEMES[opts.theme] || {});\n    const ctx = canvas.getContext('2d');\n    let W = 1, H = 1, dpr = 1, last = null;\n    const hasLS = 'letterSpacing' in ctx;\n    const DPR_MAX = opts.maxDpr || 2;         // z. B. 1,5 f\u00fcr schwache Ger\u00e4te\n    const font = opts.font || '\"Inter Tight\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif';\n\n    function resize(cssW, cssH, ratio) {\n      W = Math.max(1, cssW); H = Math.max(1, cssH);\n      dpr = Math.min(ratio || window.devicePixelRatio || 1, DPR_MAX);\n      const cw = Math.round(W * dpr), ch = Math.round(H * dpr);\n      if (canvas.width !== cw || canvas.height !== ch) { canvas.width = cw; canvas.height = ch; }\n      cacheKey = prevKey = '';\n      if (last) draw(last);\n    }\n\n    /* ---------- Kamera ---------- */\n    // Ansicht so w\u00e4hlen, dass bounds in den Bereich innerhalb von pad passt\n    function fit(b, pad) {\n      const p = typeof pad === 'number' ? { t: pad, r: pad, b: pad, l: pad } : Object.assign({ t: 0, r: 0, b: 0, l: 0 }, pad || {});\n      // Mindestens gut ein Drittel der H\u00f6he/Breite bleibt Kartenfl\u00e4che: Auf niedrigen Bildschirmen (Handy quer, 360 px)\n      // lie\u00dfen die festen R\u00e4nder sonst fast nichts \u00fcbrig, die Karte zoomte weit hinaus und die Schilder lagen \u00fcbereinander\n      const keep = (a, c, size) => { const room = size * 0.35, s = a + c; return s > 0 && size - s < room ? Math.max(0, size - room) / s : 1; };\n      const kv = keep(p.t, p.b, H), kh = keep(p.l, p.r, W);\n      p.t *= kv; p.b *= kv; p.l *= kh; p.r *= kh;\n      const aw = Math.max(40, W - p.l - p.r), ah = Math.max(40, H - p.t - p.b);\n      const zoom = Math.min(aw / (b[2] - b[0]), ah / (b[3] - b[1]));\n      const sx = p.l + aw / 2, sy = p.t + ah / 2;\n      return { cx: (b[0] + b[2]) / 2 - (sx - W / 2) / zoom, cy: (b[1] + b[3]) / 2 - (sy - H / 2) / zoom, zoom };\n    }\n\n    // Kamerafahrt a \u2192 b: Zoom logarithmisch; beim Hineinzoomen gleitet der Zielpunkt gleichm\u00e4\u00dfig zur\n    // Bildmitte (kein Wegdriften), beim Herauszoomen umgekehrt. Weitere Felder (routes, labels \u2026) werden von b \u00fcbernommen.\n    function lerp(a, b, t) {\n      const z = a.zoom * Math.pow(b.zoom / a.zoom, t);\n      let cx, cy;\n      if (b.zoom >= a.zoom) {\n        const k = (1 - t) * a.zoom / z;\n        cx = b.cx - (b.cx - a.cx) * k; cy = b.cy - (b.cy - a.cy) * k;\n      } else {\n        const k = t * b.zoom / z;\n        cx = a.cx + (b.cx - a.cx) * k; cy = a.cy + (b.cy - a.cy) * k;\n      }\n      return Object.assign({}, b, { cx, cy, zoom: z });\n    }\n\n    const project = (lon, lat) => ({ x: (lon - D.origin[1]) * D.origin[2], y: -(lat - D.origin[0]) * D.origin[3] });\n    const toScreen = (x, y, v) => {\n      v = v || last || { cx: 0, cy: 0, zoom: 1 };\n      return { x: (x - v.cx) * v.zoom + W / 2, y: (y - v.cy) * v.zoom + H / 2 };\n    };\n\n    /* ---------- Zeichnen ---------- */\n    // Standbild-Puffer: Bleibt die Kamera zwei Bilder lang stehen (z. B. w\u00e4hrend die Wege wachsen), wird die\n    // Grundkarte einmal gemerkt; danach kopiert jedes Bild nur noch diesen Puffer und zeichnet die Wege dar\u00fcber.\n    let cache = null, cacheKey = '', prevKey = '';\n    function draw(v) {\n      last = v;\n      const z = v.zoom, S = z * dpr;\n      const cw = canvas.width, ch = canvas.height;\n      const tx = cw / 2 - v.cx * S, ty = ch / 2 - v.cy * S;\n      const px = n => n / z;               // CSS-px \u2192 Kartenmeter (f\u00fcr Linienbreiten)\n      const key = [v.cx, v.cy, z, v.labels, v.areaLabels, v.quarter, v.photoKey, cw, ch].join('|');\n      if (cache && key === cacheKey) {\n        ctx.setTransform(1, 0, 0, 1, 0, 0);\n        ctx.globalAlpha = 1;\n        ctx.drawImage(cache, 0, 0);\n      } else {\n        drawBase(v, z, S, tx, ty, px);\n        if (key === prevKey) {\n          if (!cache) cache = document.createElement('canvas');\n          if (cache.width !== cw || cache.height !== ch) { cache.width = cw; cache.height = ch; }\n          const c = cache.getContext('2d');\n          c.setTransform(1, 0, 0, 1, 0, 0);\n          c.clearRect(0, 0, cw, ch);\n          c.drawImage(canvas, 0, 0);\n          cacheKey = key;\n        }\n      }\n      prevKey = key;\n      ctx.setTransform(S, 0, 0, S, tx, ty);\n      ctx.lineJoin = 'round'; ctx.lineCap = 'round';\n      drawHighlight(v, px);\n      drawRoutes(v, z, px);\n    }\n\n    function drawBase(v, z, S, tx, ty, px) {\n      const lz = Math.log2(z);\n      const cw = canvas.width, ch = canvas.height;\n\n      // Sichtbarkeit je Zoom. lz = log2(px/m) steuert die Detaildichte (Stra\u00dfen, Geb\u00e4ude, Schrift passt?),\n      // ls = lz bezogen auf eine Desktop-Fl\u00e4che von 1440 \u00d7 900 steuert das \u201eWas zeige ich gerade\u201c\n      // (Bezirke, Karlshorst-Fl\u00e4che): ein Handy zeigt bei gleichem px/m weniger Fl\u00e4che, ist also \u201en\u00e4her dran\u201c.\n      // Desktop-Werte: Berlin \u2248 \u22125,8 \u00b7 Lichtenberg \u2248 \u22124,2 \u00b7 Karlshorst \u2248 \u22122,3 \u00b7 Wege \u2248 \u22121,8 \u00b7 Quartier \u2248 +1\n      const ls = lz - Math.log2(Math.sqrt(W * H) / 1138);\n      const aBez = 1 - sstep(-3.4, -2.4, ls);\n      const aBezLabel = 1 - sstep(-5.1, -4.4, ls);\n      const aMid = sstep(-5.3, -4.4, lz);           // im Nahbereich deckt die Abdeckscheibe sie ab\n      const aLocal = sstep(-3.6, -2.6, lz);\n      const aBld = sstep(-1.4, -0.5, lz);\n      const aKhFill = (0.85 - 0.79 * sstep(-3.5, -2.3, ls)) * (1 - sstep(-1.4, -0.2, ls));\n      const aKhLine = sstep(-3.4, -2.5, ls);\n      const aLich = 1 - 0.7 * sstep(-3.5, -2.5, ls);\n      const aQuarter = sstep(-4.6, -3.2, lz);\n      const aStreetLabel = sstep(-1.25, -0.6, lz) * (v.labels == null ? 1 : v.labels);\n      const aAreaLabel = sstep(-2.8, -2.1, ls) * (v.areaLabels == null ? 1 : v.areaLabels);\n\n      ctx.setTransform(1, 0, 0, 1, 0, 0);\n      ctx.globalAlpha = 1;\n      ctx.fillStyle = C.out;\n      ctx.fillRect(0, 0, cw, ch);\n      ctx.setTransform(S, 0, 0, S, tx, ty);\n      ctx.lineJoin = 'round'; ctx.lineCap = 'round';\n\n      const fill = (k, col, a) => { if (a <= 0.003) return; ctx.globalAlpha = a; ctx.fillStyle = col; ctx.fill(P[k]); };\n      const stroke = (k, col, w, a) => {\n        if (a <= 0.003) return;\n        ctx.globalAlpha = a; ctx.strokeStyle = col; ctx.lineWidth = w; ctx.stroke(P[k]);\n      };\n\n      // \u00dcbersicht: Gew\u00e4sser, Hauptstra\u00dfen, Bahn; das Umland danach mit einer Fl\u00e4che abged\u00e4mpft (Fokus auf Berlin)\n      fill('land', C.land, 1);\n      const aW1 = sstep(-4.9, -4.2, lz);             // feinere Gew\u00e4sser ab Lichtenberg-Zoom\n      fill('wat0', C.water, 1 - aW1);\n      fill('wat1', C.water, aW1);\n      stroke('riv0', C.water, px(clamp(1.4, 3.2, 70 * z)), 1 - aW1 * 0.6);\n      stroke('mid', C.road0, px(clamp(1, 1.6, 6 * z)), 0.8 * aMid);\n      stroke('mot0', C.road0, px(clamp(1.3, 2.4, 60 * z)), 0.95);\n      stroke('rail0', C.rail0, px(1.1), 0.9);\n      const vx0 = v.cx - W / 2 / z, vy0 = v.cy - H / 2 / z;\n      // nur n\u00f6tig, wenn eine Bildecke au\u00dferhalb Berlins liegt (spart beim Hineinzoomen eine bildschirmf\u00fcllende Fl\u00e4che)\n      if (!(ctx.isPointInPath(P.land, 0, 0) && ctx.isPointInPath(P.land, cw, 0) && ctx.isPointInPath(P.land, 0, ch) && ctx.isPointInPath(P.land, cw, ch))) {\n        const out = new Path2D();\n        out.rect(vx0 - 10, vy0 - 10, W / z + 20, H / z + 20);\n        out.addPath(P.land);\n        ctx.globalAlpha = 0.55; ctx.fillStyle = C.out; ctx.fill(out, 'evenodd');\n        ctx.globalAlpha = 1;\n      }\n\n      // Nahbereich: \u00dcbersichts-Details im Kreis sanft abdecken, dann die Details dar\u00fcber\n      const R = D.local[2], lcx = D.local[0], lcy = D.local[1];\n      if (aLocal > 0.003) {\n        const g = ctx.createRadialGradient(lcx, lcy, R * 0.78, lcx, lcy, R);\n        g.addColorStop(0, 'rgba(' + rgb(C.land) + ',' + aLocal + ')');\n        g.addColorStop(1, 'rgba(' + rgb(C.land) + ',0)');\n        ctx.fillStyle = g;\n        ctx.fillRect(vx0 - 10, vy0 - 10, W / z + 20, H / z + 20);\n      }\n      fill('lich', C.lich, aLich);\n      // Karlshorst: in der \u00dcbersicht als rote Fl\u00e4che (wie die alte Karte), beim Hineinzoomen nur noch ein Hauch \u2013\n      // UNTER den Details, damit Stra\u00dfen und Gr\u00fcn sauber bleiben\n      fill('kh', C.red, aKhFill * C.khA);\n\n      if (aLocal > 0.003) {\n        // Weicher Rand des Nahbereichs ohne Zwischenleinwand: liegt eine Bildecke au\u00dferhalb des inneren Kreises,\n        // bekommt jede Ebene statt der Farbe einen radialen Verlauf (Farbe \u2192 durchsichtig) als F\u00fcll-/Linienstil\n        let edge = false;\n        for (const [qx, qy] of [[vx0, vy0], [vx0 + W / z, vy0], [vx0, vy0 + H / z], [vx0 + W / z, vy0 + H / z]]) {\n          if (Math.hypot(qx - lcx, qy - lcy) > R * 0.78) edge = true;\n        }\n        const style = col => {\n          if (!edge) return col;\n          const c = rgb(col), g = ctx.createRadialGradient(lcx, lcy, R * 0.78, lcx, lcy, R);\n          g.addColorStop(0, 'rgba(' + c + ',1)');\n          g.addColorStop(1, 'rgba(' + c + ',0)');\n          return g;\n        };\n        drawLocal(z, px, aBld, aLocal, style, fill, stroke);\n      }\n\n      // Luftbilder (Geschichte), ganze Fl\u00e4che: \u00fcber den Karten-Details, unter Grenzen, Quartier und Schrift\n      if (v.photos && v.photos.length) drawPhotos(v, px, false);\n\n      // Bezirksgrenzen (gestrichelt), Landesgrenze, Karlshorster Grenze\n      if (aBez > 0.003) {\n        ctx.setLineDash([px(4), px(3)]);\n        stroke('bez', C.bez, px(1), aBez);\n        ctx.setLineDash([]);\n      }\n      ctx.globalAlpha = 1;\n      ctx.strokeStyle = C.edge; ctx.lineWidth = px(1.5);\n      ctx.stroke(P.land);\n      if (aKhLine > 0.003) {\n        ctx.setLineDash([px(5), px(4)]);\n        stroke('kh', C.red, px(1.4), 0.75 * aKhLine * C.khLineA);\n        ctx.setLineDash([]);\n      }\n\n      // Quartier: Karls Living I & II kr\u00e4ftig, weitere Bauabschnitte (Baufelder WA 6/7) heller\n      const aQ = aQuarter * (v.quarter == null ? 1 : clamp(0, 1, v.quarter));\n      if (aQ > 0.003) {\n        fill('kl36', C.red, 0.28 * aQ);\n        stroke('kl36', C.red, px(1.2), 0.7 * aQ);\n        fill('kl12', C.red, 0.95 * aQ);\n      }\n\n      // Luftbild-Fenster (clip): liegt als Fenster \u00fcber Grenzen und Quartier, unter der Schrift\n      if (v.photos && v.photos.length) drawPhotos(v, px, true);\n\n      // Beschriftungen (in CSS-px, damit Schrift unabh\u00e4ngig vom Zoom scharf bleibt; die Wege liegen dar\u00fcber)\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n      if (aBezLabel > 0.003) drawBezirke(aBezLabel, v);\n      if (aAreaLabel > 0.003) drawAreas(aAreaLabel, v);\n      if (aStreetLabel > 0.003) drawStreets(aStreetLabel, v);\n      ctx.globalAlpha = 1;\n      if (hasLS) ctx.letterSpacing = '0px';\n    }\n\n    // Luftbilder: view.photos = [{ img, b: [x0, y0, x1, y1] (Kartenmeter), a, clip? }]. Ohne clip ganzfl\u00e4chig (Rand l\u00e4uft im\n    // Bild weich aus), mit clip = { x, y, r } nur in einem runden Fenster (\u201eBlick in die Vergangenheit\u201c): Rand leicht\n    // abgedunkelt wie eine Linse, dazu ein feiner heller Ring. lens = true zeichnet nur die Fenster, sonst nur die Fl\u00e4chen.\n    function drawPhotos(v, px, lens) {\n      ctx.imageSmoothingEnabled = true;\n      ctx.imageSmoothingQuality = 'high';\n      for (const ph of v.photos) {\n        if (!(ph.a > 0.003) || !!ph.clip !== lens) continue;\n        ctx.globalAlpha = Math.min(1, ph.a);\n        if (!ph.clip) { ctx.drawImage(ph.img, ph.b[0], ph.b[1], ph.b[2] - ph.b[0], ph.b[3] - ph.b[1]); continue; }\n        const c = ph.clip;\n        if (!(c.r > 0)) continue;\n        ctx.save();\n        ctx.beginPath(); ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2); ctx.clip();\n        ctx.drawImage(ph.img, ph.b[0], ph.b[1], ph.b[2] - ph.b[0], ph.b[3] - ph.b[1]);\n        const g = ctx.createRadialGradient(c.x, c.y, c.r * 0.7, c.x, c.y, c.r);\n        g.addColorStop(0, 'rgba(' + rgb(C.land) + ',0)');\n        g.addColorStop(1, 'rgba(' + rgb(C.land) + ',.5)');\n        ctx.fillStyle = g;\n        ctx.fillRect(c.x - c.r, c.y - c.r, 2 * c.r, 2 * c.r);\n        ctx.restore();\n        ctx.globalAlpha = Math.min(1, ph.a) * 0.9;\n        ctx.strokeStyle = C.lens; ctx.lineWidth = px(1.5);\n        ctx.beginPath(); ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2); ctx.stroke();\n      }\n      ctx.globalAlpha = 1;\n    }\n\n    function drawLocal(z, px, aBld, aL, st, fill, stroke) {\n      fill('allot', st(C.allot), aL);\n      fill('park', st(C.park), aL);\n      fill('sport', st(C.sport), aL);\n      fill('wood', st(C.wood), aL);\n      // gleiche Farbe als Haarlinie \u00fcber die Kanten \u2013 verhindert helle N\u00e4hte zwischen Nachbarfl\u00e4chen\n      stroke('wood', st(C.wood), px(0.6), aL);\n      stroke('park', st(C.park), px(0.6), aL);\n      stroke('track', st(C.track), px(clamp(0.6, 1.4, 1.6 * z)), C.trackA * aL);\n      fill('water', st(C.water), aL);\n      stroke('water', st(C.waterEdge), px(0.7), 0.7 * aL);\n      stroke('stream', st(C.water), px(clamp(0.8, 2, 3 * z)), aL);\n      // Stra\u00dfen: erst alle R\u00e4nder, dann alle Fl\u00e4chen \u2013 Kreuzungen verschmelzen sauber\n      const w4 = clamp(1.0, 17, 7.5 * z), w3 = clamp(1.6, 21, 10 * z), w2 = clamp(2.2, 27, 13 * z);\n      const cs = st(C.casing), sw = st(C.street);\n      stroke('r4', cs, px(w4 + 1.3), aL);\n      stroke('r3', cs, px(w3 + 1.4), aL);\n      stroke('r2', cs, px(w2 + 1.5), aL);\n      stroke('r4', sw, px(w4), aL);\n      stroke('r3', sw, px(w3), aL);\n      stroke('r2', sw, px(w2), aL);\n      stroke('tram', st(C.tram), px(0.8), C.tramA * aL);\n      // Bahn: dunkle Linie, ab mittlerem Zoom mit hellen Querstrichen (klassische Signatur)\n      const rw = clamp(1.3, 3.4, 3.2 * z);\n      stroke('rail', st(C.rail), px(rw), 0.75 * aL);\n      if (z > 0.35) {\n        ctx.setLineDash([px(5), px(5)]);\n        stroke('rail', st(C.land), px(rw * 0.45), 0.9 * sstep(0.35, 0.6, z) * aL);\n        ctx.setLineDash([]);\n      }\n      if (aBld > 0.003) {\n        fill('bld', st(C.bld), aBld * aL);\n        stroke('bld', st(C.bldEdge), px(0.6), aBld * aL);\n      }\n      ctx.globalAlpha = 1;\n    }\n\n    function partial(r, f) {\n      const L = r.length * f, a = r.pts, cum = r.cum, p = new Path2D();\n      p.moveTo(a[0], a[1]);\n      let hx = a[0], hy = a[1];\n      for (let k = 1; k < cum.length; k++) {\n        if (cum[k] <= L) { p.lineTo(a[2 * k], a[2 * k + 1]); hx = a[2 * k]; hy = a[2 * k + 1]; continue; }\n        const t = (L - cum[k - 1]) / Math.max(1e-6, cum[k] - cum[k - 1]);\n        hx = a[2 * k - 2] + (a[2 * k] - a[2 * k - 2]) * t;\n        hy = a[2 * k - 1] + (a[2 * k + 1] - a[2 * k - 1]) * t;\n        p.lineTo(hx, hy);\n        break;\n      }\n      return { p, hx, hy };\n    }\n\n    function drawRoutes(v, z, px) {\n      const on = v.routes || {};\n      const w = clamp(3.6, 5.6, 3.3 + z * 1.4);\n      // erst alle wei\u00dfen S\u00e4ume, dann die Linien \u2013 wo Wege gemeinsam laufen, verschmelzen sie sauber\n      const drawn = [];\n      for (const r of RT) {\n        const f = clamp(0, 1, on[r.id] || 0);\n        if (f <= 0) continue;\n        drawn.push({ r, f, dim: v.focus && v.focus !== r.id ? 0.55 : 1, part: partial(r, f) });\n      }\n      for (const d of drawn) {\n        ctx.globalAlpha = 0.95;\n        ctx.strokeStyle = C.routeCasing; ctx.lineWidth = px(w + 5); ctx.stroke(d.part.p);\n      }\n      for (const d of drawn) {\n        ctx.globalAlpha = d.dim;\n        ctx.strokeStyle = C.route; ctx.lineWidth = px(w);\n        if (d.r.planned) ctx.setLineDash([px(w * 1.1), px(w * 0.9)]);\n        ctx.stroke(d.part.p);\n        ctx.setLineDash([]);\n      }\n      // Spitze (rot, w\u00e4hrend der Weg w\u00e4chst) bzw. Zielpunkt (Navy-Ring mit wei\u00dfem Kern)\n      for (const d of drawn) {\n        const done = d.f >= 0.999, r = d.r;\n        const ex = done ? r.pts[r.pts.length - 2] : d.part.hx, ey = done ? r.pts[r.pts.length - 1] : d.part.hy;\n        ctx.globalAlpha = 1;\n        ctx.beginPath(); ctx.arc(ex, ey, px(done ? 9 : 7.5), 0, Math.PI * 2);\n        ctx.fillStyle = C.routeCasing; ctx.fill();\n        ctx.beginPath(); ctx.arc(ex, ey, px(done ? 6.5 : 5), 0, Math.PI * 2);\n        ctx.fillStyle = done ? C.route : C.red; ctx.fill();\n        if (done) { ctx.beginPath(); ctx.arc(ex, ey, px(2.6), 0, Math.PI * 2); ctx.fillStyle = C.routeCasing; ctx.fill(); }\n      }\n      ctx.globalAlpha = 1;\n    }\n\n    function text(s, x, y, size, weight, col, a, spacing, halo) {\n      ctx.globalAlpha = a;\n      ctx.font = weight + ' ' + size + 'px ' + font;\n      if (hasLS) ctx.letterSpacing = spacing + 'px';\n      if (halo) { ctx.lineWidth = 3; ctx.strokeStyle = C.halo; ctx.strokeText(s, x, y); }\n      ctx.fillStyle = col;\n      ctx.fillText(s, x, y);\n    }\n\n    function drawBezirke(a, v) {\n      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n      for (const [n, x, y] of BEZIRKE) {\n        const s = toScreen(x, y, v);\n        if (s.x < -80 || s.y < -20 || s.x > W + 80 || s.y > H + 20) continue;\n        const hi = n === 'Lichtenberg';\n        const parts = n.split('-');\n        const lines = parts.length > 1 ? [parts[0] + '-', parts.slice(1).join('-')] : [n];\n        lines.forEach((l, i) => text(l.toUpperCase(), s.x, s.y + (i - (lines.length - 1) / 2) * 12, 9.5, hi ? 700 : 600,\n          hi ? C.bezLabelHi : C.bezLabel, a, 1.2, true));\n      }\n    }\n\n    function drawAreas(a, v) {\n      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n      ctx.font = '700 9.5px ' + font;\n      if (hasLS) ctx.letterSpacing = '1.6px';\n      for (const k of ['tierpark', 'wuhlheide', 'trabrennbahn', 'biesenhorst']) {\n        const pl = PLACES[k], label = pl[0].toUpperCase();\n        const s = toScreen(pl[1], pl[2], v);\n        const hw = ctx.measureText(label).width / 2 + 6;\n        if (s.x - hw < 0 || s.x + hw > W || s.y < 10 || s.y > H - 10) continue;   // nie angeschnitten\n        text(label, s.x, s.y, 9.5, 700, C.areaLabel, a * 0.9, 1.6, true);\n      }\n    }\n\n    function drawStreets(a, v) {\n      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n      ctx.font = '600 9.5px ' + font;\n      if (hasLS) ctx.letterSpacing = '0.8px';\n      for (const [n, x, y, ang, seg] of STREETS) {\n        const s = toScreen(x, y, v);\n        if (s.x < -60 || s.y < -30 || s.x > W + 60 || s.y > H + 30) continue;\n        const tw = ctx.measureText(n.toUpperCase()).width;\n        if (seg * v.zoom < tw + 24) continue;             // passt nicht auf das gerade St\u00fcck\n        ctx.save();\n        ctx.translate(s.x, s.y); ctx.rotate(ang);\n        text(n.toUpperCase(), 0, 0, 9.5, 600, C.streetLabel, a, 0.8, true);\n        ctx.restore();\n      }\n    }\n\n    // Orte der Geschichte hervorheben (view.highlight = id aus map.history, view.highlightAmount 0..1):\n    // Geb\u00e4ude rot gef\u00fcllt, Fl\u00e4chen dezent rot mit Rand, Luftschiffhalle als Kreis der einstigen Drehbewegung\n    function drawHighlight(v, px) {\n      const h = v.highlight && HIST[v.highlight];\n      if (!h) return;\n      // highlightSoft 0..1: Hervorhebung zur\u00fccknehmen (z. B. wenn ein Luftbild-Fenster den echten Ort zeigt)\n      const a = clamp(0, 1, v.highlightAmount == null ? 1 : v.highlightAmount) * (1 - clamp(0, 1, v.highlightSoft || 0));\n      if (a <= 0.003) return;\n      if (v.highlight === 'versuchsanstalt') {         // die \u00fcbrigen Hallen als Umriss dazu\n        ctx.globalAlpha = 0.6 * a; ctx.strokeStyle = C.hlLine; ctx.lineWidth = px(1.2); ctx.stroke(P.h_hallen);\n      }\n      if (h[5] === 'circle') {\n        const c = new Path2D();\n        c.arc(h[7], h[8], h[6], 0, Math.PI * 2);\n        ctx.globalAlpha = C.hlArea * a; ctx.fillStyle = C.red; ctx.fill(c);\n        ctx.globalAlpha = a; ctx.strokeStyle = C.hlLine; ctx.lineWidth = px(2);\n        ctx.setLineDash([px(6), px(4)]); ctx.stroke(c); ctx.setLineDash([]);\n        ctx.beginPath(); ctx.arc(h[7], h[8], px(4), 0, Math.PI * 2); ctx.fillStyle = C.red; ctx.fill();   // Drehpunkt\n      } else if (h[5] === 'area') {\n        ctx.globalAlpha = C.hlArea * a; ctx.fillStyle = C.red; ctx.fill(P[h[4]]);\n        ctx.globalAlpha = a; ctx.strokeStyle = C.hlLine; ctx.lineWidth = px(2); ctx.stroke(P[h[4]]);\n      } else {\n        // highlightOutline 0..1: Umriss statt Fl\u00e4che (\u00fcber einem Luftbild-Fenster sieht man so, was darunter liegt)\n        const o = clamp(0, 1, v.highlightOutline || 0);\n        ctx.globalAlpha = a * (1 - 0.82 * o); ctx.fillStyle = C.red; ctx.fill(P[h[4]]);\n        if (o > 0.003) {\n          ctx.globalAlpha = a * o; ctx.strokeStyle = C.hlLine; ctx.lineWidth = px(2.6); ctx.stroke(P[h[4]]);\n          if (v.highlight === 'quartier') {           // die \u00fcbrigen Bauabschnitte (III\u2013VI) gestrichelt dazu\n            ctx.globalAlpha = a * o * 0.9; ctx.lineWidth = px(1.8);\n            ctx.setLineDash([px(6), px(4)]); ctx.stroke(P.kl36); ctx.setLineDash([]);\n          }\n        }\n        ctx.globalAlpha = a; ctx.strokeStyle = C.hlEdge; ctx.lineWidth = px(1); ctx.stroke(P[h[4]]);\n      }\n      ctx.globalAlpha = 1;\n    }\n\n    // Bildschirmpunkte entlang eines Wegs (f\u00fcr Kollisionspr\u00fcfung von Beschriftungen), Abstand step in CSS-px\n    function sample(id, step, f, v) {\n      const r = RT.find(q => q.id === id);\n      v = v || last;\n      if (!r || !v) return [];\n      const out = [], a = r.pts, cum = r.cum, L = r.length * (f == null ? 1 : f), dm = (step || 24) / v.zoom;\n      let k = 1;\n      for (let d = 0; d <= L; d += dm) {\n        while (k < cum.length - 1 && cum[k] < d) k++;\n        const t = clamp(0, 1, (d - cum[k - 1]) / Math.max(1e-6, cum[k] - cum[k - 1]));\n        out.push(toScreen(a[2 * k - 2] + (a[2 * k] - a[2 * k - 2]) * t, a[2 * k - 1] + (a[2 * k + 1] - a[2 * k - 1]) * t, v));\n      }\n      return out;\n    }\n\n    const map = {\n      resize, draw, fit, lerp, project, toScreen, sample,\n      redraw: () => { cacheKey = prevKey = ''; if (last) draw(last); },\n      get view() { return last; },\n      // Marker-Punkt = Mitte von Karls Living I & II; Umrisse: I & II (kl12) und die Baufelder s\u00fcdlich davon (kl36)\n      plot: {\n        x: 0, y: 0, name: 'Karls Living I & II', bounds: D.bounds.quartier,\n        outline: ring('kl12'), outlineSouth: ring('kl36')\n      },\n      routes: RT.map(r => ({ id: r.id, name: r.name, short: r.short, entrance: r.entrance, foot: r.foot, bike: r.bike, end: r.end, length: r.length })),\n      // Orte der Geschichte: Beschriftungspunkt x, y (Geb\u00e4ude/Kreis: oberer Rand, Fl\u00e4chen: Mitte) und Ausschnitt f\u00fcr fit()\n      history: Object.keys(HIST).reduce((o, k) => {\n        const h = HIST[k];\n        o[k] = { id: k, name: h[0], x: h[1], y: h[2], bounds: h[3], kind: h[5] };\n        if (h[5] === 'circle') Object.assign(o[k], { r: h[6], cx: h[7], cy: h[8] });   // Luftschiffhalle: Kreis der Drehung\n        return o;\n      }, {}),\n      places: Object.keys(PLACES).reduce((o, k) => { o[k] = { name: PLACES[k][0], x: PLACES[k][1], y: PLACES[k][2] }; return o; }, {}),\n      bounds: D.bounds,\n      local: { x: D.local[0], y: D.local[1], r: D.local[2] }\n    };\n    return map;\n  }\n\n  KL.lageMap = { create, attribution: '\u00a9 OpenStreetMap-Mitwirkende', attributionUrl: 'https://www.openstreetmap.org/copyright' };\n})();\n"},{"name":"main.js","code":"/* ==========================================================================\n   KARLS LIVING \u2014 Ultra Edition\n   GSAP 3.15 (ScrollTrigger, SplitText, DrawSVG, ScrambleText, CustomEase)\n   + Lenis Smooth Scroll + Matter.js (Footer-Physik)\n   ========================================================================== */\n(() => {\n  'use strict';\n  window.__kl = true;\n  window.__klBoot = Date.now();   // f\u00fcr den Notausgang im Kopf: Das Script l\u00e4uft (h\u00e4ngt es danach, gibt er die Seite frei)\n\n  const $ = (s, c = document) => c.querySelector(s);\n  const $$ = (s, c = document) => Array.from(c.querySelectorAll(s));\n  const root = document.documentElement;\n  // \u201eBewegung reduzieren\u201c wird auf Wunsch des Auftraggebers ignoriert: Alle sehen die Animationen.\n  // Wieder einschalten: matchMedia('(prefers-reduced-motion: reduce)').matches statt false.\n  const REDUCED = false;\n  if (REDUCED) root.classList.add('reduced');   // die ruhige Fassung im CSS h\u00e4ngt an html.reduced\n  const TOUCH = matchMedia('(hover: none), (pointer: coarse)').matches;\n  const mobile = () => innerWidth < 761;\n  const SKIP_LOADER = new URLSearchParams(location.search).has('skip');   // Entwicklung: ?skip \u00fcberspringt den Preloader (nicht ?skipper)\n  // Schlanke Handy-Fassung: statt langer gepinnter Scroll-Szenen kompakte Abschnitte und Wisch-Karussells.\n  // Einmal beim Laden festgelegt, damit CSS (html.lite) und Animationen auch nach dem Drehen zusammenpassen.\n  const LITE = mobile();\n  if (LITE) root.classList.add('lite');\n\n  if (typeof gsap === 'undefined') { root.classList.remove('is-loading', 'is-locked'); return; }\n\n  gsap.registerPlugin(ScrollTrigger, SplitText, DrawSVGPlugin, ScrambleTextPlugin, CustomEase);\n  CustomEase.create('kl', '0.76,0,0.24,1');\n  gsap.defaults({ ease: 'expo.out', duration: 1.2 });\n  ScrollTrigger.config({ ignoreMobileResize: true });\n  // Scroll-Wiederherstellung aus: ScrollTrigger merkt sich den Wert beim Laden und schreibt ihn nach jedem Refresh\n  // zur\u00fcck, deshalb \u00fcber seine eigene Funktion (setzt beides). Der Kopf in index.html setzt es schon vorher.\n  ScrollTrigger.clearScrollMemory('manual');\n\n  const rand = gsap.utils.random;\n  const clamp = gsap.utils.clamp;\n\n  // Marken-Formen: id -> viewBox-Gr\u00f6\u00dfe\n  const SHAPES = {\n    'logo': [85, 92], 'flower-big': [590, 758], 'tulip': [641, 707], 'snail': [97, 114], 'leaf': [124, 114],\n    'tulip-sm': [186, 205], 'vase': [132, 223], 'flower': [195, 192], 'leaf2': [225, 206], 'bloom': [356, 391], 'sprout': [176, 465]\n  };\n  const shapeSVG = id => `<svg viewBox=\"0 0 ${SHAPES[id][0]} ${SHAPES[id][1]}\" aria-hidden=\"true\"><use href=\"#s-${id}\"/></svg>`;\n\n  const CDN = 'https://cdn.prod.website-files.com/6a97e2884291c0c32e3b2095/';\n  // Bilderspur: alle Renderings (960 px, WebP), Au\u00dfen- und Innenansichten im Wechsel\n  const TRAIL = [\n    '6ab7dc59af1f33cb5f8d372c_kl-rendering-01-960.webp',\n    '6ab7dc852418910eb456eefb_kl-rendering-04-960.webp',\n    '6ab7dc5b3064e8572721e51f_kl-rendering-03-960.webp',\n    '6ab7dcb3104b8364dcc203b7_kl-rendering-10-960.webp',\n    '6ab7dcb4faa1e1f58a136813_kl-rendering-14-960.webp',\n    '6ab7dc852d8ae8136cc1e980_kl-rendering-07-960.webp',\n    '6ab7dc59af1f33cb5f8d3754_kl-rendering-02-960.webp',\n    '6ab7dc85af1f33cb5f8d4e09_kl-rendering-06-960.webp',\n    '6ab7dcb4b8684bdee1259cee_kl-rendering-13-960.webp',\n    '6ab7dc858a6ac06f5fb90a81_kl-rendering-09-960.webp',\n    '6ab7dcb43064e857272204e2_kl-rendering-12-960.webp',\n    '6ab7dc85af1f33cb5f8d4de4_kl-rendering-05-960.webp',\n    '6ab7dcb3e5d9f17124f5b59a_kl-rendering-11-960.webp'\n  ].map(f => CDN + f);\n\n  // AVIF zeigt Safari erst ab iOS 16: Auf \u00e4lteren iPhones/iPads (6s, 7, SE 1, iPad Air 2 \u2026) blieben diese drei Bilder\n  // leer (Raumkonzept 01, Nachhaltigkeit Karte 01, Neuigkeiten, dazu drei Bilder im Preloader). Schl\u00e4gt ein AVIF fehl,\n  // schaltet avifFallback() auf eine WebP-Fassung um. Schl\u00fcssel = Webflow-ID des AVIF-Originals, Werte = eigene\n  // Webflow-Assets (seit 27.09., Quelle assets/drive/web/, IDs in tools/webflow-assets.json)\n  const AVIF_WEBP = {\n    '6a97e2884291c0c32e3b20d9': CDN + '6ab8dadb2dd40080e1dc8a0e_kl-nachhaltigkeit-01-1200.webp',\n    '6a97e2884291c0c32e3b2084': CDN + '6ab8dadbcbe0606f57a65f2f_kl-raum-01-1600.webp',\n    '6a97e2884291c0c32e3b20e2': CDN + '6ab8dadc54a31c2411a39006_kl-neuigkeiten-01-1200.webp'\n  };\n  function avifFallback() {\n    const swap = img => {\n      if (img.dataset.webp) return;\n      const key = Object.keys(AVIF_WEBP).find(k => (img.getAttribute('src') || '').includes(k) || (img.getAttribute('srcset') || '').includes(k));\n      if (!key) return;\n      img.dataset.webp = '1';\n      img.removeAttribute('srcset');\n      img.removeAttribute('sizes');\n      img.src = AVIF_WEBP[key];\n    };\n    $$('img').forEach(img => {\n      if (!/\\.avif/i.test((img.getAttribute('src') || '') + (img.getAttribute('srcset') || ''))) return;\n      if (img.complete && img.getAttribute('src') && !img.naturalWidth) swap(img);   // schon fehlgeschlagen\n      else img.addEventListener('error', () => swap(img), { once: true });\n    });\n  }\n\n  const KL = window.KL || {};\n  let chromeCheck = () => {};   // Nav-/HUD-Farbe neu bestimmen (wird in initChrome gesetzt)\n  let velocity = 0;   // gegl\u00e4ttetes Scroll-Tempo (-1..1) f\u00fcr WebGL\n  let initialHeight = 0;\n  let fx = null;      // WebGL-Bild-FX\n\n  const safe = (name, fn) => { try { return fn(); } catch (err) { console.warn('[Karls Living] ' + name, err); } };\n  const split = (el, type, vars = {}) => SplitText.create(el, { type, ...vars });\n\n  /* ---------- Lenis ---------- */\n  let lenis = null;\n  function initLenis() {\n    if (REDUCED || typeof Lenis === 'undefined') return;\n    // respectReducedMotion: Lenis sprang sonst bei \u201eBewegung reduzieren\u201c (iPhone des Users) hart statt weich (Entscheidung: alles l\u00e4uft)\n    lenis = new Lenis({ lerp: 0.085, smoothWheel: true, wheelMultiplier: 0.95, touchMultiplier: 1.3, respectReducedMotion: REDUCED });\n    lenis.on('scroll', ScrollTrigger.update);\n    gsap.ticker.add(t => lenis.raf(t * 1000));\n    gsap.ticker.lagSmoothing(0);\n  }\n  const onScroll = fn => (lenis ? lenis.on('scroll', fn) : addEventListener('scroll', fn, { passive: true }));\n  function scrollToTarget(target, opts = {}) {\n    if (lenis) { lenis.scrollTo(target, { duration: 1.9, easing: t => 1 - Math.pow(1 - t, 4), ...opts }); return; }\n    if (opts.onComplete) setTimeout(opts.onComplete, REDUCED ? 0 : 900);\n    if (typeof target === 'number') { scrollTo({ top: target, behavior: REDUCED ? 'auto' : 'smooth' }); return; }\n    (typeof target === 'string' ? $(target) : target)?.scrollIntoView({ behavior: REDUCED ? 'auto' : 'smooth' });\n  }\n\n  // Tastatur und Screenreader: Nach einem Sprung steht der Fokus im Ziel, Tab geht dort weiter (vorher blieb er auf dem\n  // Punkt der Leiste bzw. dem Men\u00fc-Link). Abschnitte bekommen daf\u00fcr tabindex -1, ohne Fokusrahmen (CSS).\n  function focusIn(el) {\n    if (!el || !el.isConnected) return;\n    if (!el.matches('a[href], button, input, select, textarea, [tabindex]')) el.setAttribute('tabindex', '-1');\n    el.focus({ preventScroll: true });\n  }\n  // Alles au\u00dfer den genannten Elementen (und deren Vorfahren) inert setzen: nicht klickbar, nicht per Tab erreichbar,\n  // f\u00fcr Screenreader weg. Geht in die Tiefe, weil Webflow die Teile in eigene Embed-H\u00fcllen packt. Gibt die R\u00fccknahme zur\u00fcck.\n  function inertExcept(...keep) {\n    const set = [];\n    const walk = parent => {\n      for (const c of parent.children) {\n        if (keep.includes(c) || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(c.tagName)) continue;\n        if (keep.some(k => c.contains(k))) { walk(c); continue; }\n        if (!c.inert) { c.inert = true; set.push(c); }\n      }\n    };\n    walk(document.body);\n    return () => set.forEach(c => { c.inert = false; });\n  }\n  const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, [tabindex]:not([tabindex=\"-1\"])';\n  const tabbable = box => $$(FOCUSABLE, box).filter(el => el.getClientRects().length && getComputedStyle(el).visibility !== 'hidden');\n\n  /* ---------- Hilfen ---------- */\n  function buildStrip(total) {\n    const strip = document.createElement('span');\n    strip.className = 'odo__strip';\n    let html = '';\n    for (let i = 0; i < total; i++) html += `<span>${i % 10}</span>`;\n    strip.innerHTML = html;\n    return strip;\n  }\n\n  // Zahl als \"Slot-Machine\": rollt einmal auf den Zielwert\n  function buildOdo(el, spins = 1) {\n    const text = (el.dataset.odo || el.textContent).trim();\n    el.textContent = '';\n    el.classList.add('odo');\n    el.setAttribute('aria-hidden', 'true');\n    const cols = [];\n    for (const ch of text) {\n      const col = document.createElement('span');\n      col.className = 'odo__col';\n      if (/\\d/.test(ch)) {\n        const total = 10 * (spins + 1);\n        const strip = buildStrip(total);\n        col.appendChild(strip);\n        cols.push({ strip, target: +ch + 10 * spins, total });\n      } else {\n        col.textContent = ch;\n        col.classList.add('odo__static');\n      }\n      el.appendChild(col);\n    }\n    const strips = cols.map(c => c.strip);\n    return {\n      roll: (vars = {}) => gsap.to(strips, { yPercent: i => -(cols[i].target / cols[i].total) * 100, duration: 2.4, ease: 'expo.out', stagger: 0.1, overwrite: true, ...vars }),\n      reset: () => gsap.set(strips, { yPercent: 0, overwrite: true })\n    };\n  }\n\n  // Z\u00e4hler f\u00fcr den Preloader (setzt fortlaufend neue Werte)\n  function buildCounter(el, n = 3) {\n    el.classList.add('odo');\n    el.textContent = '';\n    const strips = [];\n    for (let i = 0; i < n; i++) {\n      const col = document.createElement('span');\n      col.className = 'odo__col';\n      const strip = buildStrip(10);\n      col.appendChild(strip);\n      el.appendChild(col);\n      strips.push(strip);\n    }\n    const current = [];\n    return {\n      set(v) {\n        const s = String(v).padStart(n, '0');\n        strips.forEach((strip, i) => {\n          const d = +s[i];\n          if (current[i] === d) return;\n          current[i] = d;\n          gsap.to(strip, { yPercent: -d * 10, duration: 0.32, ease: 'power2.out', overwrite: true });\n        });\n      }\n    };\n  }\n\n  // Einmal ausl\u00f6sen, sobald ein Element sichtbar wird \u2013 auch wenn es seitlich in ein Wisch-Karussell kommt\n  function whenSeen(el, fn, threshold = 0.45) {\n    if (!el) return;\n    if (!('IntersectionObserver' in window)) { fn(); return; }\n    const io = new IntersectionObserver(es => { if (es.some(e => e.isIntersecting)) { io.disconnect(); fn(); } }, { threshold });\n    io.observe(el);\n  }\n\n  // Wisch-Karussell (Handy): meldet Fortschritt 0..1 und die Karte, die gerade vorne steht\n  function carousel(track, items, onChange) {\n    const pad = () => parseFloat(getComputedStyle(track).paddingLeft) || 0;\n    const update = () => {\n      const max = track.scrollWidth - track.clientWidth, x = track.scrollLeft;\n      let idx = 0, best = Infinity;\n      items.forEach((it, i) => { const d = Math.abs(it.offsetLeft - pad() - x); if (d < best) { best = d; idx = i; } });\n      onChange(max > 0 ? x / max : 0, idx);\n    };\n    track.addEventListener('scroll', update, { passive: true });\n    return { update, go: i => track.scrollTo({ left: items[i].offsetLeft - pad(), behavior: REDUCED ? 'auto' : 'smooth' }) };\n  }\n\n  // W\u00f6rter leuchten beim Scrollen nacheinander auf\n  function revealWords(el, start = 'top 85%', end = 'bottom 50%') {\n    const s = split(el, 'words');\n    gsap.fromTo(s.words, { opacity: 0.13 }, { opacity: 1, duration: 1, ease: 'none', stagger: 0.1, scrollTrigger: { trigger: el, start, end, scrub: true } });\n  }\n\n  // \u00dcberschrift: Buchstaben fallen/rollen einmalig herein\n  function charsIn(el, vars = {}, start = 'top 82%') {\n    const s = split(el, 'words,chars');\n    gsap.from(s.chars, {\n      yPercent: 90, rotate: () => rand(-18, 18), opacity: 0, duration: 1.3, ease: 'expo.out',\n      stagger: { each: 0.028, from: 'start' },\n      scrollTrigger: { trigger: el, start },\n      ...vars\n    });\n    return s;\n  }\n\n  function burst(originEl, n = 18) {\n    KL.sound?.pop();\n    const r = originEl.getBoundingClientRect();\n    const cx = r.left + r.width / 2, cy = r.top + r.height / 2;\n    const ids = ['flower', 'leaf', 'logo', 'tulip-sm', 'bloom', 'leaf2', 'snail'];\n    const colors = ['#FAF5ED', '#669BBC', '#003049', '#F5EDD6', '#C1111F'];\n    for (let i = 0; i < n; i++) {\n      const el = document.createElement('div');\n      el.className = 'burst';\n      el.innerHTML = shapeSVG(ids[i % ids.length]);\n      el.style.color = colors[i % colors.length];\n      el.style.width = rand(26, 62) + 'px';\n      document.body.appendChild(el);\n      const ang = rand(0, Math.PI * 2), dist = rand(110, 320);\n      gsap.set(el, { x: cx, y: cy, xPercent: -50, yPercent: -50, scale: 0, rotate: rand(-180, 180) });\n      gsap.timeline({ onComplete: () => el.remove() })\n        .to(el, { scale: 1, duration: 0.35, ease: 'back.out(3)' }, 0)\n        .to(el, { x: cx + Math.cos(ang) * dist, duration: 1.7, ease: 'power2.out' }, 0)\n        .to(el, { y: cy + Math.sin(ang) * dist - 130, duration: 0.7, ease: 'power2.out' }, 0)\n        .to(el, { y: `+=${rand(320, 620)}`, duration: 1, ease: 'power2.in' }, 0.7)\n        .to(el, { rotate: `+=${rand(-360, 360)}`, duration: 1.7, ease: 'none' }, 0)\n        .to(el, { autoAlpha: 0, duration: 0.4 }, 1.3);\n    }\n  }\n\n  // Umlaute in den gro\u00dfen \u00dcberschriften: W\u00f6rter mit \u00c4, \u00d6 oder \u00dc bekommen oben Luft (CSS .uml), sonst sto\u00dfen die Punkte in\n  // die Zeile dar\u00fcber. L\u00e4uft vor SplitText, damit die W\u00f6rter danach wie gewohnt zerlegt werden.\n  function markUmlauts() {\n    const UML = /[\u00e4\u00f6\u00fc\u00c4\u00d6\u00dc]/;\n    $$('.stats__title, .retreat__title, .green__title, .card__title, .projekt__title, .kiez__title, .trail__title, .news__title, .kontakt__title, .lage__title, .film__title').forEach(title => {\n      const walker = document.createTreeWalker(title, NodeFilter.SHOW_TEXT), nodes = [];\n      while (walker.nextNode()) if (UML.test(walker.currentNode.nodeValue)) nodes.push(walker.currentNode);\n      nodes.forEach(node => {\n        const frag = document.createDocumentFragment();\n        node.nodeValue.split(/(\\s+)/).forEach(part => {\n          if (!part) return;\n          if (!UML.test(part)) { frag.appendChild(document.createTextNode(part)); return; }\n          const w = document.createElement('span');\n          w.className = 'uml';\n          w.textContent = part;\n          frag.appendChild(w);\n        });\n        node.parentNode.replaceChild(frag, node);\n      });\n    });\n  }\n\n  /* ---------- Roll-Text ---------- */\n  function initRolls() {\n    $$('[data-roll]').forEach(el => {\n      const text = el.textContent.trim();\n      el.textContent = '';\n      el.classList.add('roll');\n      const layer = cls => {\n        const s = document.createElement('span');\n        s.className = cls;\n        s.setAttribute('aria-hidden', 'true');\n        [...text].forEach((ch, i) => {\n          const c = document.createElement('span');\n          c.className = 'c';\n          c.style.setProperty('--i', i);\n          c.textContent = ch;\n          s.appendChild(c);\n        });\n        return s;\n      };\n      const sr = document.createElement('span');\n      sr.className = 'sr-only';\n      sr.textContent = text;\n      el.append(sr, layer('roll__a'), layer('roll__b'));\n    });\n  }\n\n  /* ---------- Cursor ---------- */\n  function initCursor() {\n    if (TOUCH || REDUCED) return;\n    const cur = $('.cursor');\n    if (!cur) return;\n    root.classList.add('has-cursor');\n    const dot = $('.cursor__dot'), ring = $('.cursor__ring'), label = $('.cursor__label');\n    const dx = gsap.quickTo(dot, 'x', { duration: 0.08, ease: 'power3' });\n    const dy = gsap.quickTo(dot, 'y', { duration: 0.08, ease: 'power3' });\n    const rx = gsap.quickTo(ring, 'x', { duration: 0.5, ease: 'power3' });\n    const ry = gsap.quickTo(ring, 'y', { duration: 0.5, ease: 'power3' });\n    let shown = false;\n    addEventListener('pointermove', e => {\n      if (e.pointerType === 'touch') return;\n      if (!shown) { shown = true; gsap.set([dot, ring], { x: e.clientX, y: e.clientY }); }\n      cur.classList.add('is-on');\n      dx(e.clientX); dy(e.clientY); rx(e.clientX); ry(e.clientY);\n    }, { passive: true });\n    document.addEventListener('pointerover', e => {\n      const t = e.target;\n      if (!(t instanceof Element)) return;\n      const lab = t.closest('[data-cursor]');\n      const link = t.closest('a, button, label, [data-magnetic]');\n      const isLabel = !!lab && !link;\n      cur.classList.toggle('is-label', isLabel);\n      cur.classList.toggle('is-link', !!link);\n      cur.classList.toggle('is-text', !!t.closest('input, textarea, .secnav'));\n      if (isLabel) label.textContent = lab.dataset.cursor;\n      const acc = t.closest('[data-accent]');\n      cur.dataset.accent = acc ? acc.dataset.accent : '';\n    });\n    addEventListener('pointerdown', () => cur.classList.add('is-down'));\n    addEventListener('pointerup', () => cur.classList.remove('is-down'));\n    document.addEventListener('pointerleave', () => cur.classList.remove('is-on'));\n    root.addEventListener('mouseleave', () => cur.classList.remove('is-on'));\n  }\n\n  /* ---------- Magnet-Buttons ---------- */\n  function initMagnetic() {\n    if (TOUCH || REDUCED) return;\n    $$('[data-magnetic]').forEach(el => {\n      const xTo = gsap.quickTo(el, 'x', { duration: 0.8, ease: 'elastic.out(1, 0.4)' });\n      const yTo = gsap.quickTo(el, 'y', { duration: 0.8, ease: 'elastic.out(1, 0.4)' });\n      const strength = el.classList.contains('biglink') ? 0.18 : 0.35;\n      el.addEventListener('pointermove', e => {\n        const r = el.getBoundingClientRect();\n        xTo((e.clientX - (r.left + r.width / 2)) * strength);\n        yTo((e.clientY - (r.top + r.height / 2)) * strength);\n      });\n      el.addEventListener('pointerleave', () => { xTo(0); yTo(0); });\n    });\n  }\n\n  /* ---------- Men\u00fc ---------- */\n  let closeMenu = () => Promise.resolve();\n  function initMenu() {\n    const btn = $('.nav__btn'), menu = $('#menu'), panel = $('.menu__panel');\n    if (!btn || !menu) return;\n    const chars = $$('.menu__txt').flatMap(el => split(el, 'words,chars').chars);\n    let isOpen = false, anim = null;\n    const origin = () => { const r = btn.getBoundingClientRect(); return { x: r.left + r.width / 2, y: r.top + r.height / 2 }; };\n    // Fokusfalle: Solange das Men\u00fc offen ist, laufen Tab und Screenreader nur durch Kopfzeile (Logo, Sound, Schlie\u00dfen)\n    // und Men\u00fc, der Rest der Seite ist inert. Vorher sprang der Fokus mit Tab aus dem Men\u00fc in die Seite dahinter.\n    const header = btn.closest('header') || btn;\n    let release = null;\n    const onTab = e => {\n      if (!isOpen || e.key !== 'Tab') return;\n      const f = [...tabbable(header), ...tabbable(menu)];\n      if (!f.length) return;\n      const i = f.indexOf(document.activeElement);\n      if (i < 0 || (e.shiftKey ? i === 0 : i === f.length - 1)) { e.preventDefault(); f[e.shiftKey ? (i <= 0 ? f.length - 1 : i - 1) : 0].focus(); }\n    };\n    addEventListener('keydown', onTab);\n    // iOS 15: Wischen auf dem offenen Men\u00fc schob die Seite dahinter mit (overflow: hidden am Dokument wirkt dort nicht\n    // beim Wischen). Das Men\u00fc selbst scrollt nie (overflow: hidden), Tippen auf die Links bleibt davon unber\u00fchrt.\n    menu.addEventListener('touchmove', e => { if (isOpen) e.preventDefault(); }, { passive: false });\n\n    const open = () => {\n      isOpen = true;\n      root.classList.add('menu-open');\n      btn.setAttribute('aria-expanded', 'true');\n      menu.setAttribute('aria-hidden', 'false');\n      release?.();\n      release = inertExcept(menu, header);\n      lenis?.stop();\n      KL.sound?.whoosh({ dur: 1.1 });\n      const o = origin();\n      const R = Math.hypot(Math.max(o.x, innerWidth - o.x), Math.max(o.y, innerHeight - o.y)) + 40;\n      anim?.kill();\n      // sofort sichtbar (die Fl\u00e4che ist per clipPath noch zu): Im Timeline-Schritt kam es bei langsamen Ger\u00e4ten erst nach\n      // dem Fokus-Setzen, und der Fokus auf einem unsichtbaren Link ging ins Leere\n      gsap.set(panel, { clipPath: `circle(0px at ${o.x}px ${o.y}px)` });\n      gsap.set(menu, { visibility: 'visible' });\n      anim = gsap.timeline()\n        .fromTo(panel, { clipPath: `circle(0px at ${o.x}px ${o.y}px)` }, { clipPath: `circle(${R}px at ${o.x}px ${o.y}px)`, duration: 1.1, ease: 'kl' }, 0)\n        .fromTo(chars, { yPercent: 115 }, { yPercent: 0, duration: 1.1, stagger: 0.012, ease: 'expo.out' }, 0.35)\n        .fromTo('.menu__idx', { opacity: 0 }, { opacity: 1, duration: 0.6, stagger: 0.05 }, 0.6)\n        .fromTo('.menu__aside > *', { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, stagger: 0.08 }, 0.6)\n        .fromTo('.menu__shape', { scale: 0, rotate: -120 }, { scale: 1, rotate: 0, duration: 1.6, stagger: 0.08, ease: 'elastic.out(1, 0.6)' }, 0.45);\n      setTimeout(() => { if (isOpen) $('.menu__link')?.focus({ preventScroll: true }); }, 400);\n    };\n\n    const close = () => new Promise(resolve => {\n      if (!isOpen) { resolve(); return; }\n      isOpen = false;\n      btn.setAttribute('aria-expanded', 'false');\n      menu.setAttribute('aria-hidden', 'true');\n      release?.(); release = null;\n      KL.sound?.whoosh({ dur: 0.8, from: 2200, peak: 900, to: 220 });\n      const o = origin();\n      anim?.kill();\n      anim = gsap.timeline({\n        onComplete: () => { gsap.set(menu, { visibility: 'hidden' }); root.classList.remove('menu-open'); lenis?.start(); resolve(); }\n      })\n        .to(chars, { yPercent: -115, duration: 0.5, stagger: 0.005, ease: 'expo.in' }, 0)\n        .to('.menu__shape', { scale: 0, duration: 0.5, ease: 'expo.in' }, 0)\n        .to(panel, { clipPath: `circle(0px at ${o.x}px ${o.y}px)`, duration: 0.9, ease: 'kl' }, 0.2);\n    });\n\n    btn.addEventListener('click', () => {\n      if (root.classList.contains('is-loading')) return;\n      isOpen ? close() : open();\n    });\n    addEventListener('keydown', e => { if (e.key === 'Escape' && isOpen) close().then(() => btn.focus()); });\n    closeMenu = close;\n  }\n\n  /* ---------- Anker-Links ---------- */\n  const targetY = el => {\n    if (el.id === 'top') return 0;\n    const box = el.parentElement && el.parentElement.classList.contains('pin-spacer') ? el.parentElement : el;\n    return box.getBoundingClientRect().top + scrollY;\n  };\n  const jumpNow = (el, to) => {\n    const y = to != null ? to : targetY(el);\n    // Lenis neu messen lassen: Direkt nach dem Start (Sprungmarke in der Adresse) kannte es noch die Seitenl\u00e4nge vor den\n    // Pins und kappte den Sprung (#kontakt landete mitten in der Seite)\n    if (lenis) { lenis.resize?.(); lenis.scrollTo(y, { immediate: true, force: true }); }\n    else scrollTo(0, y);\n    ScrollTrigger.update();\n  };\n\n  // Vorhang statt 30.000 px Scroll-Fahrt: zudecken, springen, aufdecken\n  let curtainBusy = false;\n  // to: eigenes Sprungziel in Pixeln (z. B. eine Station in einem gepinnten Abschnitt), sonst der Anfang von el\n  function curtainJump(el, label, to) {\n    const curtain = $('.curtain');\n    if (!curtain || REDUCED) { jumpNow(el, to); focusIn(el); return; }\n    curtainBusy = true;\n    KL.sound?.whoosh({ dur: 1.4, peak: 2800 });\n    $('.curtain__label span').textContent = label || '';\n    gsap.timeline({ onComplete: () => { curtainBusy = false; } })\n      .set(curtain, { display: 'grid' })\n      .fromTo(curtain, { clipPath: 'inset(100% 0% 0% 0%)' }, { clipPath: 'inset(0% 0% 0% 0%)', duration: 0.75, ease: 'kl' })\n      .fromTo('.curtain__logo', { scale: 0, rotate: -120 }, { scale: 1, rotate: 0, duration: 0.8, ease: 'back.out(2)' }, 0.3)\n      .fromTo('.curtain__label span', { yPercent: 110 }, { yPercent: 0, duration: 0.7 }, 0.4)\n      .add(() => { jumpNow(el, to); focusIn(el); }, 0.9)\n      .to('.curtain__label span', { yPercent: -110, duration: 0.5, ease: 'expo.in' }, 1.15)\n      .to(curtain, { clipPath: 'inset(0% 0% 100% 0%)', duration: 0.85, ease: 'kl' }, 1.3)\n      .set(curtain, { display: 'none' });\n  }\n\n  function initAnchors() {\n    document.addEventListener('click', e => {\n      const a = e.target.closest('a[href^=\"#\"]');\n      if (!a) return;\n      const id = a.getAttribute('href');\n      if (id.length < 2) return;\n      const target = $(id);\n      if (!target) return;\n      e.preventDefault();\n      if (curtainBusy) return;\n      if (a.classList.contains('nav__logo') && scrollY < 50) { burst(a, 14); return; }\n      const label = target.dataset.label || a.textContent.trim();\n      if (root.classList.contains('menu-open')) {\n        // Hinter dem offenen Men\u00fc springen, dann Men\u00fc schlie\u00dfen\n        jumpNow(target);\n        closeMenu().then(() => focusIn(target));\n        return;\n      }\n      goTo(target, label);\n    });\n    // Sprungmarke in der Adresse von Hand ge\u00e4ndert (Links auf der Seite \u00e4ndern sie nicht, siehe oben): Der Browser ist\n    // schon selbst hingesprungen, nur genau ausrichten (gepinnte Abschnitte: Anfang des Platzhalters) und Lenis angleichen\n    addEventListener('hashchange', () => {\n      const t = hashTarget();\n      if (t && !root.classList.contains('is-loading')) { jumpNow(t); focusIn(t); }\n    });\n  }\n\n  // Ziel einer Sprungmarke in der Adresse (#kontakt, #lage \u2026); #top ist ohnehin der Anfang\n  function hashTarget() {\n    let id = '';\n    try { id = decodeURIComponent(location.hash.slice(1)); } catch (e) { return null; }\n    const el = id && id !== 'top' ? document.getElementById(id) : null;\n    return el && el.closest('main, footer') ? el : null;\n  }\n\n  // Nah: weich hinscrollen. Weit: Vorhang zu, springen, Vorhang auf (statt 30.000 px Scroll-Fahrt).\n  function goTo(target, label) {\n    if (curtainBusy) return;\n    const dist = Math.abs(targetY(target) - scrollY);\n    if (dist > innerHeight * 2.5) curtainJump(target, label === 'Start' ? 'Karls Living' : label);\n    else scrollToTarget(targetY(target), { onComplete: () => focusIn(target) });\n  }\n\n  /* ==========================================================================\n     HERO\n     ========================================================================== */\n  function initHero() {\n    const hero = $('.hero');\n    const petals = $$('.petal');\n    petals.forEach(p => gsap.set(p, { rotate: +p.dataset.r || 0 }));\n\n    if (!REDUCED) {\n      petals.forEach((p, i) => gsap.to(p, {\n        y: () => rand(-22, 22), x: () => rand(-12, 12), rotate: `+=${rand(-14, 14)}`,\n        duration: rand(4.8, 8), ease: 'sine.inOut', yoyo: true, repeat: -1, delay: i * 0.2   // gleiches Tempo wie der Zeitraffer (62,5 %)\n      }));\n    }\n\n    // Tiefenwirkung beim Scrollen: Himmel bleibt zur\u00fcck, die H\u00e4user kommen n\u00e4her\n    gsap.timeline({\n      scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true, pin: true, pinSpacing: false }\n    })\n      .to('.hero__sky', { yPercent: 16, scale: 1.12, ease: 'none' }, 0)\n      .to('.hero__build', { yPercent: -3, scale: 1.12, transformOrigin: '50% 100%', ease: 'none' }, 0)\n      .to('.hero__petals', { yPercent: -45, ease: 'none' }, 0)\n      .to('.hero__ui', { yPercent: -30, autoAlpha: 0, ease: 'none' }, 0)\n      .to('.hero__dim', { '--dim': 0.55, ease: 'none' }, 0);\n\n    // Maus-Parallax\n    const DEPTH = [['.hero__sky .hero__m', 14], ['.hero__build .hero__m', 46], ['.hero__petals .hero__m', 90]];\n    if (!TOUCH && !REDUCED) {\n      const layers = DEPTH.map(([sel, d]) => ({ d, x: gsap.quickTo(sel, 'x', { duration: 1.3, ease: 'power3' }), y: gsap.quickTo(sel, 'y', { duration: 1.3, ease: 'power3' }) }));\n      hero.addEventListener('pointermove', e => {\n        const nx = e.clientX / innerWidth - 0.5, ny = e.clientY / innerHeight - 0.5;\n        layers.forEach(l => { l.x(-nx * l.d); l.y(-ny * l.d * 0.55); });\n      });\n    }\n\n    // Handy kippen = 3D: Die Neigung verschiebt die Ebenen wie die Maus am Desktop. iPhones fragen beim ersten\n    // Fingertipp im Hero einmal nach der Erlaubnis (Bewegung und Ausrichtung), Android braucht keine. Die Ruhelage\n    // wandert langsam mit, damit das Bild nicht verschoben bleibt, wenn jemand das Handy anders h\u00e4lt.\n    if (TOUCH && !REDUCED && 'DeviceOrientationEvent' in window) {\n      const layers = DEPTH.map(([sel, d]) => ({ d, x: gsap.quickTo(sel, 'x', { duration: 0.9, ease: 'power3' }), y: gsap.quickTo(sel, 'y', { duration: 0.9, ease: 'power3' }) }));\n      let base = null, running = false, seen = true;\n      ScrollTrigger.create({ trigger: hero, start: 'top bottom', end: 'bottom top', onToggle: self => { seen = self.isActive; } });\n      const onTilt = e => {\n        if (e.beta == null || e.gamma == null || !seen) return;\n        const ang = (screen.orientation && screen.orientation.angle) || +window.orientation || 0;\n        let tx = e.gamma, ty = e.beta;   // gamma: nach links/rechts gekippt, beta: nach vorn/hinten\n        if (ang === 90) { tx = e.beta; ty = -e.gamma; } else if (ang === 270 || ang === -90) { tx = -e.beta; ty = e.gamma; }\n        if (!base) base = { x: tx, y: ty };\n        base.x += (tx - base.x) * 0.006; base.y += (ty - base.y) * 0.006;\n        const nx = clamp(-1, 1, (tx - base.x) / 16), ny = clamp(-1, 1, (ty - base.y) / 16);\n        layers.forEach(l => { l.x(-nx * l.d * 0.55); l.y(-ny * l.d * 0.35); });\n      };\n      const start = () => { if (running) return; running = true; addEventListener('deviceorientation', onTilt, { passive: true }); };\n      const DOE = window.DeviceOrientationEvent;\n      if (typeof DOE.requestPermission === 'function') {\n        // Chrome gibt die Erlaubnis ohne Nachfrage; iOS verlangt eine echte Geste (Tippen, nicht Wischen) und fragt dann einmal\n        const ask = () => DOE.requestPermission().then(r => { hero.removeEventListener('click', ask); if (r === 'granted') start(); }).catch(() => {});\n        DOE.requestPermission().then(r => (r === 'granted' ? start() : hero.addEventListener('click', ask))).catch(() => hero.addEventListener('click', ask));\n      } else start();\n    }\n\n    // Licht an: Klick oder Fingertipp auf ein Fenster schaltet das Zimmerlicht (hero-sky.js kennt die Scheiben).\n    // Am Desktop zeigt der Cursor \u00fcber einem Fenster \u201eLicht an\u201c bzw. \u201eLicht aus\u201c.\n    let downX = 0, downY = 0, downT = 0;\n    hero.addEventListener('pointerdown', e => { downX = e.clientX; downY = e.clientY; downT = performance.now(); }, { passive: true });\n    hero.addEventListener('pointerup', e => {\n      if (e.button !== 0) return;   // nur Haupttaste/Finger (Rechtsklick schaltete sonst das Licht und \u00f6ffnete das Kontextmen\u00fc)\n      if (!heroSky || (e.target instanceof Element && e.target.closest('a, button'))) return;\n      if (Math.hypot(e.clientX - downX, e.clientY - downY) > 12 || performance.now() - downT > 700) return;   // gewischt, nicht getippt\n      // Luftschiff angetippt: Zeitreise in die Geschichte, Station 1909 (drehbare Luftschiffhalle)\n      if (heroSky.shipAt?.(e.clientX, e.clientY)) {\n        const hist = $('.history');\n        if (hist && !curtainBusy) { KL.sound?.whoosh({ dur: 1.4, peak: 2200 }); curtainJump(hist, 'Zeitreise 1909', historyStationY?.(1)); }\n        if (!TOUCH) showWindowCursor(-1);\n        return;\n      }\n      const i = heroSky.windowAt(e.clientX, e.clientY);\n      if (i < 0) return;\n      const on = heroSky.toggleWindow(i);\n      KL.sound?.lightSwitch(on);\n      if (!TOUCH) showWindowCursor(i);\n    });\n    const cur = $('.cursor'), curLabel = $('.cursor__label');\n    let overWin = -1, px = 0, py = 0, raf = 0;\n    // i: Fenster-Nummer, -1 nichts, -2 das Luftschiff\n    const showWindowCursor = i => {\n      overWin = i;\n      if (!cur) return;\n      cur.classList.toggle('is-label', i >= 0 || i === -2);\n      if (i >= 0) curLabel.textContent = heroSky.windowOn(i) ? 'Licht aus' : 'Licht an';\n      else if (i === -2) curLabel.textContent = 'Zeitreise 1909';\n    };\n    if (!TOUCH) {\n      hero.addEventListener('pointermove', e => {\n        px = e.clientX; py = e.clientY;\n        if (raf) return;\n        raf = requestAnimationFrame(() => {\n          raf = 0;\n          const free = heroSky && !(document.elementFromPoint(px, py)?.closest('a, button'));\n          const hit = !free ? -1 : heroSky.shipAt?.(px, py) ? -2 : heroSky.windowAt(px, py);\n          if (hit !== overWin) showWindowCursor(hit);\n        });\n      }, { passive: true });\n      hero.addEventListener('pointerleave', () => { if (overWin !== -1) showWindowCursor(-1); });\n    }\n  }\n\n  // Zeitraffer im Hero: Himmel, Wetter, Tag und Nacht, Jahreszeiten (hero-sky.js).\n  // Karlshorst live: Der Hero startet mit der echten Uhrzeit, Jahreszeit, Mondphase und dem echten Wetter (Deutscher\n  // Wetterdienst) und geht nach ein paar Sekunden in den Zeitraffer \u00fcber. ?hero=live bleibt dauerhaft echt,\n  // ?hero=zeitraffer startet wie fr\u00fcher im Sommer um 18:18.\n  const HERO_MODE = (location.search.match(/[?&]hero=(live|start|zeitraffer)\\b/) || [])[1] || 'start';\n  let heroSky = null;\n  function initSky() {\n    const hero = $('.hero'), meta = $('.hero__meta span');\n    if (!KL.heroSky || !hero) return;\n    const place = meta ? meta.textContent : '';\n    heroSky = KL.heroSky.create({\n      hero, img: $('.hero__build img'), reduced: REDUCED, mobile: TOUCH || mobile(), mode: HERO_MODE,\n      onChange: s => {\n        // Nachts ist der Himmel dunkel: Navigation und HUD auf helle Schrift umschalten\n        const theme = s.dark ? 'light' : 'dark';\n        if (hero.dataset.nav !== theme) { hero.dataset.nav = theme; chromeCheck(); }\n        // Live: unten rechts steht die echte Uhrzeit und Temperatur in Karlshorst, danach wieder nur der Ort\n        if (meta) {\n          meta.classList.toggle('is-live', s.live);\n          meta.textContent = s.live ? `Karlshorst \u00b7 ${s.clock}` + (s.temp != null ? ` \u00b7 ${Math.round(s.temp)} \u00b0C` : '') : place;\n        }\n      },\n      onFlash: k => KL.sound?.thunder(k)\n    });\n    if (!heroSky) return;\n    // Nur rendern, solange der Hero zu sehen ist\n    ScrollTrigger.create({ trigger: hero, start: 'top bottom', end: 'bottom top', onToggle: self => heroSky.setActive(self.isActive) });\n    // Die Atmo (sound.js) folgt dem Zeitraffer und wird leiser, je weiter der n\u00e4chste Abschnitt den Hero verdeckt\n    if (KL.sound) {\n      KL.sound.scene(() => heroSky.state);\n      ScrollTrigger.create({ trigger: hero, start: 'top top', end: 'bottom top', onUpdate: self => KL.sound.hero(1 - self.progress) });\n    }\n  }\n\n  function heroIntro() {\n    return gsap.timeline({ paused: true })\n      .from('.hero__build .hero__m', { yPercent: 16, duration: 2.1, ease: 'expo.out' }, 0)\n      .from('.petal', { scale: 0, duration: 1.4, ease: 'back.out(2.2)', stagger: 0.07 }, 0.4)\n      .from('.hero__claim .line > span', { yPercent: 110, duration: 1.2, stagger: 0.09 }, 0.6)\n      .from('.hero__badge', { scale: 0, rotate: -120, duration: 1.4, ease: 'back.out(1.7)' }, 0.75)\n      .from('.hero__meta span', { yPercent: 110, duration: 1.1, stagger: 0.08 }, 0.75)\n      .fromTo('.nav', { yPercent: -140 }, { yPercent: 0, duration: 1.3 }, 0.7)\n      .fromTo('.secnav__list', { autoAlpha: 0, x: 24 }, { autoAlpha: 1, x: 0, duration: 1.2 }, 1.1);\n  }\n\n  /* ---------- Preloader ---------- */\n  let deepLink = null;   // Abschnitt aus der Sprungmarke der Adresse (init)\n  function runLoader(intro) {\n    const loader = $('.loader'), hero = $('.hero'), stage = $('.hero__stage');\n    const flips = $$('.hero__flip img');\n    // Hat der Notausgang im Kopf schon aufgegeben (Script hing oder kam gar nicht), ist der Loader unsichtbar: dann kein\n    // Preloader mehr (sonst stand der Hero als kleines Fenster ohne Z\u00e4hler da) und nicht nach oben springen\n    const late = !root.classList.contains('is-loading');\n    const finish = () => {\n      root.classList.remove('is-loading', 'is-locked');\n      if (late) { lenis?.start(); return; }\n      if (lenis) { lenis.start(); lenis.scrollTo(0, { immediate: true, force: true }); } else scrollTo(0, 0);\n    };\n\n    // Ohne Preloader auch bei einer Sprungmarke in der Adresse (/redesign#kontakt): direkt in den Abschnitt (init)\n    if (REDUCED || SKIP_LOADER || deepLink || late || !loader || !intro) {\n      intro?.progress(1);\n      loader?.remove(); $('.hero__flip')?.remove(); finish();\n      return Promise.resolve();\n    }\n    // F\u00fcr Screenreader nur die Deko verstecken: Der Knopf \u201eIntro \u00fcberspringen\u201c lag im aria-hidden-Bereich des Loaders\n    loader.removeAttribute('aria-hidden');\n    [...loader.children].forEach(c => { if (!c.classList.contains('loader__skip')) c.setAttribute('aria-hidden', 'true'); });\n\n    const counter = buildCounter($('.loader__odo'), 3);\n    counter.set(0);\n    const bar = $('.loader__bar i');\n    const logo = $('.loader__logo path');\n\n    // Rahmen in der Mitte: Flipbook und Hero-Clip teilen sich dieselbe Fl\u00e4che. Das Flipbook ist 2 px je Seite gr\u00f6\u00dfer\n    // (der Clip schneidet es ohnehin zu): Bei exakt gleicher Gr\u00f6\u00dfe blieb durch Pixel-Rundung am Rand ein Haar vom\n    // hellblauen Himmel sichtbar (fiel live am iPhone auf, v40)\n    const w = Math.min(innerWidth * (mobile() ? 0.58 : 0.21), 400);\n    const h = Math.min(w * 1.3, innerHeight * 0.5);\n    const x = (innerWidth - w) / 2, y = (innerHeight - h) / 2;\n    gsap.set('.hero__flip', { width: w + 4, height: h + 4 });\n    gsap.set(hero, { clipPath: `inset(${y}px ${x}px ${y}px ${x}px round 18px)` });\n    gsap.set(stage, { scale: 1.32 });\n    gsap.fromTo(logo, { drawSVG: '0%' }, { drawSVG: '100%', duration: 2.4, ease: 'power2.inOut' });\n    gsap.from('.loader__corner--tr span', { yPercent: 110, duration: 1.1, stagger: 0.1, delay: 0.2 });\n    gsap.from('.loader__label span', { yPercent: 110, duration: 1.1, stagger: 0.08, delay: 0.3 });\n    gsap.from('.loader__odo', { yPercent: 100, duration: 1.2, delay: 0.1 });\n    root.classList.add('loader-on');   // Hero ist jetzt beschnitten: ab hier darf die Seite sichtbar werden (siehe CSS)\n\n    const critical = [...flips, $('.hero__sky img'), $('.hero__build img')].filter(Boolean);\n    let done = 0;\n    critical.forEach(img => {\n      if (img.complete) { done++; return; }   // auch schon fehlgeschlagene Bilder z\u00e4hlen, sonst wartete er 5,5 s\n      const f = () => { done++; };\n      img.addEventListener('load', f, { once: true });\n      img.addEventListener('error', f, { once: true });\n    });\n\n    let fi = 0;\n    const flipper = setInterval(() => {\n      flips[fi].style.opacity = 0;\n      fi = (fi + 1) % flips.length;\n      flips[fi].style.opacity = 1;\n    }, 150);\n\n    // Intro \u00fcberspringen: Knopf, Esc, Enter oder Leertaste\n    let skipped = false;\n    const skipBtn = $('.loader__skip');\n    const skip = () => { skipped = true; };\n    skipBtn?.addEventListener('click', skip);\n    const onKey = e => { if (['Escape', 'Enter', ' '].includes(e.key)) { e.preventDefault(); skip(); } };\n    addEventListener('keydown', onKey);\n\n    return new Promise(resolve => {\n      const t0 = performance.now();\n      const MIN = 2400, MAX = 5500;\n      let v = 0;\n      const tick = (time, dt) => {\n        const t = performance.now() - t0;\n        const target = skipped || t > MAX ? 1 : Math.min(done / critical.length, t / MIN);\n        v += (target - v) * (1 - Math.pow(skipped ? 0.7 : 0.93, Math.min(dt, 100) / 16.67));   // framerate-unabh\u00e4ngig\n        if (target === 1 && v > 0.997) v = 1;\n        counter.set(Math.round(v * 254));\n        bar.style.transform = `scaleX(${v})`;\n        if (v === 1) { gsap.ticker.remove(tick); clearInterval(flipper); removeEventListener('keydown', onKey); outro(); }\n      };\n      gsap.ticker.add(tick);\n\n      function outro() {\n        skipBtn?.blur();\n        gsap.to(skipBtn, { autoAlpha: 0, duration: 0.3 });\n        gsap.timeline({\n          onComplete: () => { loader.remove(); gsap.set(hero, { clearProps: 'clipPath' }); finish(); resolve(); }\n        }).timeScale(skipped ? 1.6 : 1)\n          .to(logo, { fill: '#FAF5ED', strokeWidth: 0, duration: 0.5, ease: 'power2.out' }, 0)\n          .to('.loader__odo', { yPercent: -105, duration: 0.9, ease: 'expo.in' }, 0.1)\n          // zwei Zeilen hoch: bei nur einer rutschte \u201ewerden gebaut\u201c auf den Platz von \u201eWohnungen\u201c und blieb stehen,\n          // bis der ganze \u00dcbergang vorbei war (\u00fcber der Live-Zeile im Hero)\n          .to('.loader__label span', { yPercent: -220, duration: 0.7, ease: 'expo.in', stagger: 0.05 }, 0.1)\n          .to(['.loader__corner', '.loader__bar'], { autoAlpha: 0, duration: 0.6, ease: 'power2.out' }, 0.35)\n          .to('.hero__flip', { autoAlpha: 0, duration: 0.35, ease: 'power1.out' }, 0.2)\n          .set('.hero__flip', { display: 'none' }, 0.6)\n          .to(hero, { clipPath: 'inset(0px 0px 0px 0px round 0px)', duration: 1.7, ease: 'kl' }, 0.5)\n          .to(stage, { scale: 1, duration: 2.1, ease: 'expo.inOut' }, 0.5)\n          .add(() => intro.play(), 1.1);\n      }\n    });\n  }\n\n  /* ==========================================================================\n     INTRO\n     ========================================================================== */\n  function initIntro() {\n    const title = $('.intro__title');\n    const st = () => ({ trigger: title, start: 'top 78%' });\n    gsap.from('.intro__title .ln__i', { yPercent: 112, duration: 1.5, stagger: 0.12, scrollTrigger: st() });\n    $$('.intro .pill').forEach((p, i) => {\n      gsap.from(p, { width: 0, duration: 1.5, ease: 'expo.inOut', delay: 0.4 + i * 0.2, scrollTrigger: st() });\n      gsap.from(p.querySelector('img'), { scale: 1.7, duration: 2, delay: 0.4 + i * 0.2, scrollTrigger: st() });\n    });\n    gsap.from('.intro__root path', { drawSVG: '0%', duration: 1.4, ease: 'power2.inOut', delay: 0.9, scrollTrigger: st() });\n    revealWords($('.intro__big'), 'top 82%', 'bottom 45%');\n    gsap.from('.intro__small', { y: 50, opacity: 0, duration: 1.4, scrollTrigger: { trigger: '.intro__small', start: 'top 92%' } });\n\n    // Garten w\u00e4chst aus dem Boden\n    const plants = $$('.plant');\n    gsap.from(plants, {\n      scaleY: 0, scaleX: 0.3, duration: 2.2, ease: 'elastic.out(1, 0.45)', stagger: { each: 0.09, from: 'random' },\n      scrollTrigger: { trigger: '.garden', start: 'top 95%' }\n    });\n    if (REDUCED) return;\n    plants.forEach(p => gsap.to(p.querySelector('svg'), { rotate: rand(-5, 5), duration: rand(2.2, 3.8), ease: 'sine.inOut', yoyo: true, repeat: -1 }));\n    if (TOUCH) return;\n    // Pflanzen weichen der Maus aus\n    const setters = plants.map(p => gsap.quickTo(p, 'rotation', { duration: 1.1, ease: 'elastic.out(1, 0.35)' }));\n    const intro = $('.intro');\n    intro.addEventListener('pointermove', e => {\n      plants.forEach((p, i) => {\n        const r = p.getBoundingClientRect();\n        const dx = e.clientX - (r.left + r.width / 2);\n        const dy = e.clientY - (r.top + r.height * 0.35);\n        const force = Math.max(0, 1 - Math.hypot(dx, dy) / 420);\n        setters[i](-Math.sign(dx) * force * 20);\n      });\n    });\n    intro.addEventListener('pointerleave', () => setters.forEach(s => s(0)));\n  }\n\n  /* ==========================================================================\n     STATS\n     ========================================================================== */\n  function initStats() {\n    const title = $('.stats__title');\n    const s = split(title, 'words,chars');\n    gsap.from(s.chars, {\n      yPercent: 70, rotateX: -95, opacity: 0, transformOrigin: '50% 100%', transformPerspective: 600,\n      duration: 1.3, stagger: 0.022, scrollTrigger: { trigger: title, start: 'top 80%' }\n    });\n    gsap.from('.stat__line', { scaleX: 0, duration: 1.7, ease: 'expo.inOut', stagger: 0.12, scrollTrigger: { trigger: '.stats__grid', start: 'top 86%' } });\n    gsap.from('.stat__label, .stat__pre, .stat__unit', { y: 20, opacity: 0, duration: 1, stagger: 0.05, scrollTrigger: { trigger: '.stats__grid', start: 'top 80%' } });\n    const odos = $$('.stats [data-odo]').map(el => buildOdo(el, 2));\n    ScrollTrigger.create({\n      trigger: '.stats__grid', start: 'top 80%', once: true,\n      onEnter: () => { odos.forEach((o, i) => o.roll({ delay: i * 0.18, duration: 2.8 })); KL.sound?.roll(22, 2.9); }\n    });\n    revealWords($('.stats__text'), 'top 85%', 'bottom 55%');\n  }\n\n  /* ==========================================================================\n     B\u00c4NDER (Marquee mit Scroll-Velocity)\n     ========================================================================== */\n  function initBands() {\n    if (REDUCED) return;   // ohne Bewegung zeigt das CSS alle W\u00f6rter umbrochen und still\n    const tracks = $$('.band__track');\n    const tweens = tracks.map(track => {\n      const dir = +track.dataset.dir || 1;\n      track.innerHTML += track.innerHTML;\n      return gsap.fromTo(track, { xPercent: dir > 0 ? 0 : -50 }, { xPercent: dir > 0 ? -50 : 0, duration: 42, ease: 'none', repeat: -1 });\n    });\n    // Schr\u00e4glage nur mit Maus: Ein ung\u00fcltiger Wert (Safari liefert beim Wischen gelegentlich keinen) bliebe\n    // sonst im Transform stecken, und das Band st\u00fcnde f\u00fcr immer still.\n    const skews = TOUCH ? [] : tracks.map(t => gsap.quickTo(t, 'skewX', { duration: 0.5, ease: 'power3' }));\n    let idle;\n    ScrollTrigger.create({\n      trigger: '.bands', start: 'top bottom', end: 'bottom top',\n      onUpdate(self) {\n        const v = self.getVelocity();\n        if (!Number.isFinite(v)) return;\n        const dir = TOUCH ? 1 : self.direction;   // am Handy nur schneller, nie r\u00fcckw\u00e4rts\n        const boost = 1 + Math.min(Math.abs(v) / 220, 8);\n        tweens.forEach(t => gsap.to(t, { timeScale: dir * boost, duration: 0.2, overwrite: true, onComplete: () => gsap.to(t, { timeScale: dir, duration: 1.4, ease: 'power2.out' }) }));\n        if (!skews.length) return;\n        skews.forEach(s => s(clamp(-12, 12, v / -160)));\n        clearTimeout(idle);\n        idle = setTimeout(() => skews.forEach(s => s(0)), 140);\n      }\n    });\n  }\n\n  /* ==========================================================================\n     R\u00dcCKZUGSORT (Bild w\u00e4chst auf Vollbild) + DROHNENFLUG\n     Der Flug zoomt vom Luftbild in den Innenhof und weiter ins Wohnzimmer \u2013\n     gebaut aus den echten Renderings (WebGL mit Zoom-Blur, sonst DOM-\u00dcberblendung).\n     ========================================================================== */\n  const DIVE = [\n    { src: CDN + '6ab7dc313064e8572721d46c_kl-rendering-14-3072.webp', focus: [0.57, 0.6], z0: 1, z1: 2.3, aim: 1 },\n    { src: CDN + '6a97e2884291c0c32e3b20a2_13%20(1)%202-s.jpeg', focus: [0.56, 0.55], z0: 1.04, z1: 2.5, aim: 1 },\n    { src: CDN + '6a97e2884291c0c32e3b208d_3%202.jpeg', focus: [0.56, 0.38], z0: 1.04, z1: 2.1, aim: 0.9 },\n    // \u201eLichtdurchflutet\u201c: das volle Rendering 10 (ganzer Raum mit Sofa) statt des engen Webflow-Ausschnitts, damit die\n    // Station weiter ausgezoomt beginnt (Kumpel, 27.09.)\n    { src: CDN + '6ab855eb35b7f14765ce08e6_kl-rendering-10-3072.webp', focus: [0.8, 0.4], z0: 1.0, z1: 2.4, aim: 0.8 },\n    { src: CDN + '6ab7dc593df629b7afb9576e_kl-rendering-06-3072.webp', focus: [0.62, 0.42], z0: 1.03, z1: 1.3, aim: 0.5 }\n  ];\n  let dive = null;\n  function initRetreat() {\n    const sec = $('.retreat');\n    const media = $('.retreat__media');\n    const baseImg = $('.retreat__media img');\n    const canvas = $('.dive__canvas');\n    const zoomEl = $('.dive__zoom b'), meter = $('.dive__meter i');\n    const caps = $$('.dive__caption span');\n    if (LITE) {\n      // Handy: kein Drohnenflug. Das Luftbild \u00f6ffnet sich beim Hineinscrollen, Titel und Text kommen dazu.\n      gsap.fromTo(media, { clipPath: 'inset(10% 7% 10% 7% round 24px)' }, { clipPath: 'inset(0% 0% 0% 0% round 24px)', ease: 'none', scrollTrigger: { trigger: media, start: 'top 95%', end: 'top 35%', scrub: true } });\n      gsap.fromTo(baseImg, { scale: 1.3 }, { scale: 1, ease: 'none', scrollTrigger: { trigger: media, start: 'top bottom', end: 'bottom top', scrub: true } });\n      gsap.from(['.retreat__l', '.retreat__r'], { yPercent: 70, opacity: 0, stagger: 0.12, duration: 1.2, scrollTrigger: { trigger: sec, start: 'top 75%' } });\n      gsap.from('.retreat__copy p, .retreat__tags .tag', { y: 30, opacity: 0, stagger: 0.07, duration: 1.1, scrollTrigger: { trigger: '.retreat__copy', start: 'top 90%' } });\n      return;\n    }\n    const clipFrom = () => (mobile() ? 'inset(30% 9% 30% 9% round 24px)' : 'inset(29% 33% 29% 33% round 32px)');\n    // L\u00e4nge richtet sich nach der Zahl der Stationen (je Station etwa 1,5 Bildschirmh\u00f6hen Scrollweg)\n    const POS_END = DIVE.length - 0.45, D0 = 1.35, DLEN = POS_END * 1.333;\n    const PIN = Math.round((D0 + DLEN + 0.35) * 108);\n    dive = !REDUCED && KL.gl ? KL.gl.createDive(canvas, DIVE, { mobile: TOUCH || mobile() }) : null;\n\n    // Ohne WebGL: einfache \u00dcberblendung mit Zoom. Auch, wenn WebGL unterwegs verloren geht (iOS unter Speicherdruck,\n    // lange im Hintergrund): Vorher blieb der Flug dann auf dem Luftbild stehen, nur die Untertitel liefen weiter.\n    const makeFallback = () => DIVE.slice(1).map(s => {\n      const im = document.createElement('img');\n      im.className = 'dive__img';\n      im.src = s.src; im.alt = ''; im.decoding = 'async'; im.loading = 'lazy';\n      canvas.before(im);\n      return im;\n    });\n    let fallback = !dive && !REDUCED ? makeFallback() : null;\n    const sm = (a, b, v) => { const t = clamp(0, 1, (v - a) / (b - a)); return t * t * (3 - 2 * t); };\n\n    const state = { pos: 0 };\n    let lastCap = -2, lastStage = 0, canvasOn = false;\n    const render = () => {\n      const pos = state.pos;\n      // (Der Knopf zum ganzen Film am Ende des Flugs ist raus, Wunsch des Kumpels 27.09.: der Film hat seinen\n      // eigenen Abschnitt \u201eBaustelle\u201c mit \u201eMehr anschauen\u201c)\n      zoomEl.textContent = (1 + pos * 2.4).toFixed(1);\n      meter.style.transform = `scaleX(${pos / POS_END})`;\n      const cap = pos < 0.02 ? -1 : Math.min(caps.length - 1, Math.floor(pos + 0.15));\n      if (cap !== lastCap) {\n        lastCap = cap;\n        caps.forEach((c, i) => gsap.to(c, { autoAlpha: i === cap ? 1 : 0, yPercent: i === cap ? 0 : (i < cap ? -60 : 60), duration: 0.7, ease: 'expo.out', overwrite: true }));\n      }\n      const stage = Math.floor(pos + 0.14);\n      if (stage !== lastStage) { lastStage = stage; if (pos > 0.1) KL.sound?.whoosh({ dur: 1.1 }); }\n      if (dive && dive.lost && !fallback) { fallback = makeFallback(); canvas.style.opacity = '0'; canvasOn = false; }\n      if (dive && !dive.lost) {\n        const ok = pos > 0.001 && dive.render(pos, Math.min(0.35, Math.abs(velocity) * 0.5));\n        if (ok !== canvasOn) { canvas.style.opacity = ok ? '1' : '0'; canvasOn = ok; }\n      } else if (fallback) {\n        gsap.set(baseImg, { scale: 1 + Math.min(1, pos) * 0.7 });\n        fallback.forEach((im, i) => {\n          im.style.opacity = sm(i + 0.72, i + 1, pos);\n          im.style.transform = `scale(${1 + Math.max(0, pos - (i + 0.72)) * 0.4})`;\n        });\n      }\n    };\n\n    gsap.timeline({\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: '+=' + PIN + '%', pin: true, scrub: 1, invalidateOnRefresh: true,\n        onUpdate: self => { sec.dataset.nav = self.progress > 0.12 ? 'light' : 'dark'; },\n        onEnter: () => dive?.prepare()\n      }\n    })\n      .fromTo(media, { clipPath: clipFrom }, { clipPath: 'inset(0% 0% 0% 0% round 0px)', ease: 'power1.inOut', duration: 1 }, 0)\n      .fromTo(baseImg, { scale: 1.45 }, { scale: 1, ease: 'power1.inOut', duration: 1 }, 0)\n      .to('.retreat__l', { yPercent: -280, ease: 'power1.in', duration: 0.8 }, 0)\n      .to('.retreat__r', { yPercent: 280, ease: 'power1.in', duration: 0.8 }, 0)\n      .to(media, { '--shade': 1, duration: 0.3, ease: 'none' }, 0.7)\n      .from('.retreat__copy p', { yPercent: 40, autoAlpha: 0, duration: 0.3, ease: 'power2.out' }, 0.8)\n      .from('.retreat__tags .tag', { y: 30, autoAlpha: 0, stagger: 0.05, duration: 0.25, ease: 'power2.out' }, 0.86)\n      // Drohnenflug\n      .to(['.retreat__copy', '.retreat__tags'], { autoAlpha: 0, y: -40, duration: 0.2, ease: 'power2.in' }, D0 - 0.12)\n      .to(media, { '--shade': 0.4, duration: 0.25, ease: 'none' }, D0 - 0.12)\n      .fromTo('.dive', { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.15, ease: 'none' }, D0)\n      .fromTo(state, { pos: 0 }, { pos: POS_END, duration: DLEN, ease: 'none', onUpdate: render }, D0)\n      .to({}, { duration: 0.35 });\n  }\n\n  /* ==========================================================================\n     RAUMKONZEPT (Horizontal-Scroll)\n     ========================================================================== */\n  function initRaum() {\n    const sec = $('.raum'), track = $('.raum__track');\n    const dist = () => Math.max(0, track.scrollWidth - innerWidth);\n    const bar = $('.raum__progress i');\n    // Die Bilder laden erst beim N\u00e4herkommen (loading=\"lazy\" im Markup; vorher luden \u00fcber 1 MB gleich beim Start und\n    // bremsten auf langsamen Verbindungen das Code-Paket aus). 1,5 Bildschirme vorher holen, damit nichts leer auftaucht.\n    ScrollTrigger.create({ trigger: sec, start: 'top bottom+=150%', once: true,\n      onEnter: () => $$('img[loading=\"lazy\"]', sec).forEach(im => { im.loading = 'eager'; }) });\n    if (LITE) {\n      // Handy: Kopf \u00fcber dem Karussell, die R\u00e4ume werden seitlich gewischt statt gepinnt gescrollt\n      const intro = $('.rp--intro');\n      sec.insertBefore(intro, track);\n      const hint = $('.raum__hint span', intro);\n      if (hint) hint.textContent = 'Zum Wischen';\n      carousel(track, Array.from(track.children), p => gsap.set(bar, { scaleX: p })).update();\n      gsap.to('.raum__big .outline', { backgroundPosition: '0% 0', ease: 'none', scrollTrigger: { trigger: sec, start: 'top 85%', end: 'top 20%', scrub: true } });\n      const solidL = split('.raum__big .solid', 'chars');\n      gsap.from(solidL.chars, { yPercent: 100, rotate: () => rand(-25, 25), opacity: 0, duration: 1.2, stagger: 0.04, ease: 'back.out(2)', scrollTrigger: { trigger: sec, start: 'top 65%' } });\n      gsap.from(track.children, { x: 70, opacity: 0, duration: 1.1, stagger: 0.08, scrollTrigger: { trigger: track, start: 'top 88%' } });\n      const roomsL = $$('.rp__rooms [data-odo]').map(el => buildOdo(el, 2));\n      whenSeen($('.rp--type'), () => { roomsL.forEach((o, i) => o.roll({ delay: i * 0.25, duration: 2.6 })); KL.sound?.roll(14, 2.4); }, 0.6);\n      whenSeen($('.rp--features'), () => gsap.from('.feat', { y: 60, rotate: i => [5, -4, 4, -6][i % 4], opacity: 0, duration: 1.1, stagger: 0.08, ease: 'expo.out' }), 0.35);\n      return;\n    }\n    const h = gsap.to(track, {\n      x: () => -dist(), ease: 'none',\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: () => '+=' + dist(), pin: true, scrub: 1, invalidateOnRefresh: true,\n        onUpdate: self => gsap.set(bar, { scaleX: self.progress })\n      }\n    });\n\n    // Outline f\u00fcllt sich, \"Konzepte\" springt rein\n    gsap.to('.raum__big .outline', { backgroundPosition: '0% 0', ease: 'none', scrollTrigger: { trigger: sec, start: 'top 75%', end: 'top 5%', scrub: true } });\n    const solid = split('.raum__big .solid', 'chars');\n    gsap.from(solid.chars, { yPercent: 100, rotate: () => rand(-25, 25), opacity: 0, duration: 1.2, stagger: 0.04, ease: 'back.out(2)', scrollTrigger: { trigger: sec, start: 'top 55%' } });\n\n    $$('.rp__img').forEach(box => {\n      const img = box.querySelector('img');\n      gsap.fromTo(box, { clipPath: 'inset(10% 0% 10% 100% round 32px)' }, {\n        clipPath: 'inset(0% 0% 0% 0% round 32px)', ease: 'none',\n        scrollTrigger: { trigger: box, containerAnimation: h, start: 'left 100%', end: 'left 45%', scrub: true }\n      });\n      gsap.fromTo(img, { xPercent: -8, scale: 1.18 }, {\n        xPercent: 8, scale: 1, ease: 'none',\n        scrollTrigger: { trigger: box, containerAnimation: h, start: 'left right', end: 'right left', scrub: true }\n      });\n    });\n    $$('.rp figcaption').forEach(cap => {\n      gsap.from(cap.children, { y: 40, opacity: 0, duration: 1, stagger: 0.08, scrollTrigger: { trigger: cap, containerAnimation: h, start: 'left 88%', toggleActions: 'play none none reverse' } });\n    });\n\n    const rooms = $$('.rp__rooms [data-odo]').map(el => buildOdo(el, 2));\n    ScrollTrigger.create({\n      trigger: '.rp--type', containerAnimation: h, start: 'left 80%',\n      onEnter: () => { rooms.forEach((o, i) => o.roll({ delay: i * 0.25, duration: 2.6 })); KL.sound?.roll(14, 2.4); },\n      onLeaveBack: () => rooms.forEach(o => o.reset())\n    });\n    gsap.from('.rp__rooms-label, .rp__rooms-sub', { y: 40, opacity: 0, stagger: 0.1, scrollTrigger: { trigger: '.rp--type', containerAnimation: h, start: 'left 70%', toggleActions: 'play none none reverse' } });\n\n    gsap.from('.feat', {\n      y: 140, rotate: i => [7, -6, 5, -8][i % 4], opacity: 0, duration: 1.3, stagger: 0.1, ease: 'expo.out',\n      scrollTrigger: { trigger: '.rp--features', containerAnimation: h, start: 'left 72%', toggleActions: 'play none none reverse' }\n    });\n    gsap.from('.rp__ftitle', { x: 80, opacity: 0, scrollTrigger: { trigger: '.rp--features', containerAnimation: h, start: 'left 80%', toggleActions: 'play none none reverse' } });\n\n    // Bilder neigen sich bei schnellem Scrollen (mit WebGL \u00fcbernimmt das der Shader)\n    if (REDUCED || fx) return;\n    const skews = $$('.rp__img').map(b => gsap.quickTo(b, 'skewX', { duration: 0.6, ease: 'power3' }));\n    let idle;\n    ScrollTrigger.create({\n      trigger: sec, start: 'top top', end: () => '+=' + dist(),\n      onUpdate: self => {\n        const v = clamp(-7, 7, self.getVelocity() / -320);\n        skews.forEach(s => s(v));\n        clearTimeout(idle);\n        idle = setTimeout(() => skews.forEach(s => s(0)), 150);\n      }\n    });\n  }\n\n  /* ==========================================================================\n     NACHHALTIGKEIT\n     ========================================================================== */\n  // Mobilit\u00e4t: Ein kleines Auto f\u00e4hrt zur Lades\u00e4ule, das Kabel steckt sich ein, der Akku l\u00e4dt auf 100 %\n  function chargeScene() {\n    const box = $('.card__visual--charge');\n    if (!box) return null;\n    const car = $('.charge__car', box), body = $('.car__body', box), wheels = $$('.car__wheel', box);\n    const cable = $('.charge__cable', box), plug = $('.charge__plug', box), bolt = $('.charge__bolt', box), light = $('.car__light', box);\n    const cells = $$('.battery i', box), val = $('.charge__val', box);\n    if (!car || !cable) return null;\n    const DRIVE = 440;                                   // Anfahrt in Szenen-Einheiten (startet links au\u00dferhalb)\n    const TURNS = (DRIVE / (2 * Math.PI * 19)) * 360;    // R\u00e4der rollen passend zur Strecke (Radius 19)\n    const pct = { v: 0 };\n    const showPct = () => { val.textContent = Math.round(pct.v); };\n    const start = () => {\n      gsap.set(car, { x: -DRIVE });\n      gsap.set(wheels, { rotation: 0, transformOrigin: '50% 50%' });\n      gsap.set(body, { rotation: 0, transformOrigin: '22% 100%' });\n      gsap.set(cable, { drawSVG: '0%' });\n      gsap.set(plug, { scale: 0, transformOrigin: '50% 50%' });\n      gsap.set(bolt, { opacity: 0.3 });\n      gsap.set(cells, { scaleX: 0, backgroundColor: '#FAF5ED' });\n      pct.v = 0; showPct();\n    };\n    start();\n    const tl = gsap.timeline({ paused: true })\n      .to(car, { x: 0, duration: 2.1, ease: 'power3.out' }, 0)\n      .to(wheels, { rotation: TURNS, duration: 2.1, ease: 'power3.out' }, 0)\n      .to(body, { rotation: 1.6, duration: 0.24, ease: 'power2.out' }, 1.3)            // Bremsen: Nase taucht kurz ein\n      .to(body, { rotation: 0, duration: 0.9, ease: 'elastic.out(1, 0.35)' }, 1.54)\n      .to(cable, { drawSVG: '100%', duration: 0.75, ease: 'power2.inOut' }, 2.05)\n      .to(plug, { scale: 1, duration: 0.45, ease: 'back.out(3)' }, 2.72)\n      .add(() => KL.sound?.pop(), 2.72)\n      .to(bolt, { opacity: 1, duration: 0.24, repeat: 7, yoyo: true, ease: 'sine.inOut' }, 2.9)\n      .to(cells, { scaleX: 1, duration: 0.3, stagger: 0.16, ease: 'power2.out' }, 2.95)\n      .to(pct, { v: 100, duration: 1.75, ease: 'none', onUpdate: showPct }, 2.95)\n      .to(bolt, { opacity: 1, duration: 0.2 }, 4.85)\n      .to(light, { opacity: 0.15, duration: 0.12, repeat: 3, yoyo: true, ease: 'none' }, 4.95)   // voll: Scheinwerfer blinken\n      .to(cells, { backgroundColor: '#F5EDD6', duration: 0.3, stagger: 0.04, repeat: 1, yoyo: true }, 4.95);\n    if (REDUCED) tl.progress(1);\n    return { play: () => { if (!REDUCED) tl.restart(); }, reset: () => { if (!REDUCED) { tl.pause(0); start(); } } };\n  }\n\n  function initGreen() {\n    const pin = $('.green__pin');\n    const s = split('.green__title', 'words,chars');\n    if (LITE) {\n      // Handy: der Kreis \u00f6ffnet sich im Vorbeiscrollen (ohne Pin), die vier Karten werden seitlich gewischt\n      gsap.timeline({ scrollTrigger: { trigger: pin, start: 'top 85%', end: 'bottom 70%', scrub: true } })\n        .fromTo('.green__eye', { clipPath: 'circle(18% at 50% 50%)' }, { clipPath: 'circle(75% at 50% 50%)', ease: 'none', duration: 1 }, 0)\n        .fromTo('.green__eye img', { scale: 1.4, rotate: -12 }, { scale: 1.05, rotate: 4, ease: 'none', duration: 1 }, 0);\n      gsap.from(s.chars, { yPercent: 80, rotate: () => rand(-30, 30), opacity: 0, duration: 1.1, stagger: { each: 0.012, from: 'random' }, scrollTrigger: { trigger: pin, start: 'top 45%' } });\n      gsap.from('.green__head .kicker, .green__sub', { y: 30, opacity: 0, duration: 1, stagger: 0.08, scrollTrigger: { trigger: pin, start: 'top 35%' } });\n      revealWords($('.green__text p'), 'top 90%', 'bottom 60%');\n      gsap.from('.card', { x: 70, opacity: 0, duration: 1.1, stagger: 0.08, scrollTrigger: { trigger: '.stack', start: 'top 88%' } });\n      // Die Karten-Visuals starten erst, wenn ihre Karte ins Bild gewischt wird\n      whenSeen($('.card--blue'), () => gsap.from('.sun', { scale: 0, rotate: -180, duration: 1.8, ease: 'elastic.out(1, 0.5)' }));\n      const sceneL = chargeScene();\n      if (sceneL) whenSeen($('.card--red'), () => sceneL.play(), 0.6);\n      whenSeen($('.card--navy'), () => gsap.from('.stamp', { scale: 0, rotate: () => rand(-200, 200), duration: 1.6, stagger: 0.15, ease: 'elastic.out(1, 0.55)' }));\n      return;\n    }\n    gsap.timeline({ scrollTrigger: { trigger: pin, start: 'top top', end: '+=140%', pin: true, scrub: 1 } })\n      .fromTo('.green__eye', { clipPath: 'circle(16% at 50% 50%)' }, { clipPath: 'circle(75% at 50% 50%)', ease: 'power1.inOut', duration: 1 }, 0)\n      .fromTo('.green__eye img', { scale: 1.5, rotate: -18 }, { scale: 1.05, rotate: 6, ease: 'none', duration: 1 }, 0)\n      .from(s.chars, {\n        x: () => rand(-45, 45) + 'vw', y: () => rand(-40, 40) + 'vh', rotate: () => rand(-140, 140), scale: () => rand(0.3, 2.4),\n        opacity: 0, ease: 'power2.out', duration: 0.62, stagger: { each: 0.005, from: 'random' }\n      }, 0)\n      .from('.green__head .kicker, .green__sub', { y: 30, opacity: 0, duration: 0.2, stagger: 0.05 }, 0.66)\n      .to({}, { duration: 0.15 });\n\n    revealWords($('.green__text p'), 'top 85%', 'bottom 55%');\n\n    // Gestapelte Karten\n    const cards = $$('.card');\n    const top = () => (mobile() ? 70 : Math.round(innerHeight * 0.11));\n    cards.forEach((card, i) => {\n      ScrollTrigger.create({\n        trigger: card, start: () => `top ${top() + i * 16}px`, endTrigger: '.stack', end: 'bottom bottom',\n        pin: true, pinSpacing: false, invalidateOnRefresh: true\n      });\n      const next = cards[i + 1];\n      if (next) {\n        const st = { trigger: next, start: 'top bottom', end: () => `top ${top() + (i + 1) * 16}px`, scrub: true, invalidateOnRefresh: true };\n        gsap.to(card.querySelector('.card__inner'), { scale: 0.9, ease: 'none', scrollTrigger: { ...st } });\n        gsap.to(card.querySelector('.card__shade'), { opacity: 0.55, ease: 'none', scrollTrigger: { ...st } });\n      }\n      gsap.from(card.querySelectorAll('.card__title, .card__body > p, .chips li'), {\n        y: 50, opacity: 0, duration: 1.1, stagger: 0.06, scrollTrigger: { trigger: card, start: 'top 70%' }\n      });\n    });\n\n    // Karten-Visuals\n    const img = $('.card__visual--img img');\n    if (img) gsap.fromTo(img, { yPercent: -12 }, { yPercent: 0, ease: 'none', scrollTrigger: { trigger: img.closest('.card'), start: 'top bottom', end: 'top top', scrub: true } });\n    gsap.from('.sun', { scale: 0, rotate: -180, duration: 1.8, ease: 'elastic.out(1, 0.5)', scrollTrigger: { trigger: '.card--blue', start: 'top 60%' } });\n\n    const scene = chargeScene();\n    if (scene) ScrollTrigger.create({ trigger: '.card--red', start: 'top 55%', onEnter: () => scene.play(), onLeaveBack: () => scene.reset() });\n    gsap.from('.stamp', { scale: 0, rotate: () => rand(-200, 200), duration: 1.6, stagger: 0.15, ease: 'elastic.out(1, 0.55)', scrollTrigger: { trigger: '.card--navy', start: 'top 60%' } });\n  }\n\n  /* ==========================================================================\n     DAS PROJEKT (Bauabschnitte)\n     ========================================================================== */\n  function initProjekt() {\n    const sec = $('.projekt');\n    const imgs = [0, 1, 2, 3].map(i => $(`.plan__img[data-plan=\"${i}\"]`));\n    const phases = $$('.phase');\n    const steps = $$('.plan__steps li');\n    const scan = $('.plan__scan');\n    const kids = el => Array.from(el.children);\n    const labels = ['p0', 'p1', 'p2', 'p3'];\n    // Summe \u201e142 + 72 + 40\u201c: jede Zahl in der Farbe ihrer H\u00e4user im Lageplan (Wunsch des Users), das Plus bleibt dunkel.\n    // Per Script statt im Markup, damit die Webflow-Embeds gleich bleiben (Farben: .sum__n--0..2 im CSS).\n    $$('.sum > span:not(.sum__eq)').forEach((s, i) => {\n      const m = s.textContent.match(/^(\\D*)(\\d+)\\s*$/);\n      if (!m) return;\n      s.textContent = m[1];\n      const n = document.createElement('span');\n      n.className = 'sum__n sum__n--' + i;\n      n.textContent = m[2];\n      s.appendChild(n);\n    });\n\n    // Bilder in der Gr\u00f6\u00dfe laden, in der sie wirklich erscheinen: object-fit: cover schneidet zu, in hohen\n    // Fenstern wird das Bild also breiter als die Box. Leicht \u00fcberabgetastet (1,25\u00d7) f\u00fcr scharfe Kanten.\n    const planImgs = $$('.plan__img'), visual = $('.plan__visual');\n    const fitSizes = () => {\n      const bw = visual?.clientWidth, bh = visual?.clientHeight;\n      if (!bw || !bh) return;\n      const need = Math.ceil(Math.max(bw, bh * (5000 / 3253)) * 1.25);\n      planImgs.forEach(im => { im.sizes = need + 'px'; });\n    };\n    fitSizes();\n    ScrollTrigger.addEventListener('refreshInit', fitSizes);\n\n    if (LITE) {\n      // Handy: Lageplan oben, darunter die Bauabschnitte als Wisch-Karten. Die vorne stehende Karte f\u00e4rbt ihr\n      // Haus im Plan ein; die Pillen zeigen den Stand und springen per Tippen zur Karte.\n      const info = $('.plan__info');\n      let cur = -1, seen = false;\n      const show = idx => {\n        if (idx === cur) return;\n        cur = idx;\n        steps.forEach((st, i) => st.classList.toggle('is-active', i === idx));\n        imgs.forEach((im, i) => gsap.to(im, { clipPath: i <= idx ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)', duration: 0.8, ease: 'power2.inOut', overwrite: true }));\n        if (idx === phases.length - 1) gsap.fromTo('.sum > span', { scale: 0.4, opacity: 0, rotate: -8 }, { scale: 1, opacity: 1, rotate: 0, duration: 0.5, stagger: 0.12, ease: 'back.out(2.2)', overwrite: true });\n        KL.sound?.click();\n      };\n      const car = carousel(info, phases, (p, idx) => { if (seen) show(idx); });\n      steps.forEach((st, i) => st.addEventListener('click', () => car.go(i)));\n      whenSeen($('.plan__visual'), () => { seen = true; car.update(); }, 0.4);\n      gsap.from('.phase', { x: 70, opacity: 0, duration: 1.1, stagger: 0.08, scrollTrigger: { trigger: info, start: 'top 90%' } });\n      return;\n    }\n\n    let lastIdx = 0;\n    const tl = gsap.timeline({\n      defaults: { ease: 'power2.inOut' },\n      // Timeline-Callback (nicht ScrollTrigger), damit die Pills auch w\u00e4hrend des Scrub-Nachlaufs stimmen\n      onUpdate: () => {\n        const t = tl.time();\n        let idx = 0;\n        labels.forEach((l, i) => { if (t >= tl.labels[l] - 0.55) idx = i; });\n        if (idx === lastIdx) return;\n        lastIdx = idx;\n        steps.forEach((s, i) => s.classList.toggle('is-active', i === idx));\n        KL.sound?.click();\n      },\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: '+=340%', pin: true, scrub: 1,\n        snap: { snapTo: 'labelsDirectional', duration: { min: 0.4, max: 1 }, delay: 0.15, ease: 'power2.inOut', inertia: false }\n      }\n    });\n\n    const wipe = (img, at) => {\n      tl.fromTo(img, { clipPath: 'inset(0% 100% 0% 0%)' }, { clipPath: 'inset(0% 0% 0% 0%)', duration: 0.9 }, at)\n        .fromTo(scan, { left: '0%', opacity: 1 }, { left: '100%', opacity: 1, duration: 0.9, immediateRender: false }, at)\n        .to(scan, { opacity: 0, duration: 0.1 }, at + 0.9);\n    };\n    const phaseIn = (el, at) => {\n      tl.set(el, { visibility: 'visible' }, at)\n        .fromTo(kids(el), { yPercent: 45, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.55, stagger: 0.07, ease: 'power3.out' }, at);\n    };\n    const phaseOut = (el, at) => {\n      tl.fromTo(kids(el), { yPercent: 0, opacity: 1 }, { yPercent: -35, opacity: 0, duration: 0.4, stagger: 0.04, ease: 'power2.in', immediateRender: false }, at)\n        .set(el, { visibility: 'hidden' }, at + 0.6);\n    };\n\n    wipe(imgs[0], 0.05); phaseIn(phases[0], 0.25);\n    tl.addLabel('p0', 1.1);\n    phaseOut(phases[0], 1.6); wipe(imgs[1], 1.6); phaseIn(phases[1], 2.1);\n    tl.addLabel('p1', 2.9);\n    phaseOut(phases[1], 3.4); wipe(imgs[2], 3.4); phaseIn(phases[2], 3.9);\n    tl.addLabel('p2', 4.7);\n    phaseOut(phases[2], 5.2); wipe(imgs[3], 5.2); phaseIn(phases[3], 5.7);\n    tl.fromTo('.sum > span', { scale: 0.4, opacity: 0, rotate: -8 }, { scale: 1, opacity: 1, rotate: 0, duration: 0.35, stagger: 0.14, ease: 'back.out(2.2)' }, 5.85);\n    tl.addLabel('p3', 6.6);\n    tl.to({}, { duration: 0.4 });\n  }\n\n  /* ==========================================================================\n     LAGE (Vektorkarte aus OpenStreetMap-Daten: Zoom auf das Quartier, dann Wege mit echten Minuten)\n     ========================================================================== */\n  let lageDebug = null;\n  function initLage() {\n    const sec = $('.lage'), box = $('.lage__map'), cv = $('.lage__cv');\n    if (!sec || !box || !cv || !KL.lageMap) return;\n    const title = split('.lage__title', 'words,chars');\n    gsap.from(title.chars, { yPercent: 100, opacity: 0, rotate: () => rand(-20, 20), duration: 1.2, stagger: 0.04, scrollTrigger: { trigger: sec, start: LITE ? 'top 80%' : 'top 60%' } });\n    const map = KL.lageMap.create(cv);\n    const marker = $('.lage__marker'), pin = $('.lage__marker-in'), dests = $('.lage__dests'), list = $('.lage__list');\n\n    // Drei Hauptwege, danach die Extras (leiser); der Supermarkt ist noch im Bau (Wunsch des Kumpels): gestrichelte\n    // Linie, nur Fu\u00dfweg-Minuten (seine Angabe), keine Rad-Zeit\n    const MAIN = ['sbahn', 'tierpark', 'wuhlheide'], EXTRA = ['trabrennbahn', 'biesenhorst', 'supermarkt'];\n    const R = {};\n    map.routes.forEach(r => { R[r.id] = r; });\n    // Beschriftung: Name in der Markenschrift (nur ASCII-Bindestrich), Minuten in Inter Tight\n    const TITLE = { sbahn: 'S-Bahn Karlshorst', tierpark: 'Tierpark', wuhlheide: 'Wuhlheide', trabrennbahn: 'Trabrennbahn', biesenhorst: 'Biesenhorster Sand', supermarkt: 'Supermarkt' };\n    const tags = {};\n    [...MAIN, ...EXTRA].forEach(id => {\n      const r = R[id];\n      // .lage__dest wird per JS positioniert, die Karte darin (.lage__dest-in) per GSAP eingeblendet\n      const el = document.createElement('div');\n      el.className = 'lage__dest' + (EXTRA.includes(id) ? ' lage__dest--minor' : '');\n      el.innerHTML = '<div class=\"lage__dest-in\">' + (!r.bike.min\n        ? `<b>${TITLE[id]}</b><span>${r.foot.min} Min. zu Fu\u00df</span>`\n        : LITE\n          ? `<b>${TITLE[id]}</b><span>${r.foot.min} Min. <i>\u00b7</i> Rad ${r.bike.min}</span>`\n          : `<b>${TITLE[id]}</b><span>${r.foot.min} Min. zu Fu\u00df <i>\u00b7</i> ${r.bike.min} Min. mit dem Rad</span>`) + '</div>';\n      dests.appendChild(el);\n      // Wunschseite: in Richtung des Wegs weiter (vom Quartier zum Ziel), damit das Schild den Weg nicht verdeckt\n      const dx = r.end.x, dy = r.end.y;\n      const pref = Math.abs(dx) > Math.abs(dy) * 1.1 ? (dx < 0 ? 'l' : 'r') : (dy < 0 ? 't' : 'b');\n      tags[id] = { el, card: el.firstChild, r, pref, side: pref, w: 0, h: 0 };\n    });\n    if (list) {\n      list.innerHTML = '<li class=\"lage__list-head\">Ab Karls Living</li>' + [...MAIN, ...EXTRA].map(id => {\n        const r = R[id];\n        return `<li><b>${TITLE[id]}</b><span>${r.foot.min} Min.<small>zu Fu\u00df</small></span>` + (r.bike.min ? `<span>${r.bike.min} Min.<small>Rad</small></span>` : '<span></span>') + '</li>';\n      }).join('');\n    }\n\n    // Kamera-Stationen (werden bei jeder Gr\u00f6\u00dfen\u00e4nderung neu berechnet)\n    const V = [];\n    const st = { p: 0, sbahn: 0, tierpark: 0, wuhlheide: 0, trabrennbahn: 0, biesenhorst: 0, supermarkt: 0, labels: 1 };\n    const measure = () => { Object.values(tags).forEach(t => { t.w = t.card.offsetWidth; t.h = t.card.offsetHeight; }); planned = false; };\n    const views = () => {\n      const W = box.clientWidth, H = box.clientHeight;\n      const nav = parseFloat(getComputedStyle(root).getPropertyValue('--nav-h')) || 84;\n      const b = map.bounds;\n      if (LITE) {\n        V[0] = map.fit(b.berlin, { t: nav + 10, r: 12, b: 20, l: 12 });\n        V[1] = map.fit(b.karlshorst, { t: nav + 30, r: 26, b: 40, l: 26 });\n        V[2] = map.fit(b.routesAll, { t: nav + 70, r: 18, b: 70, l: 18 });\n      } else {\n        V[0] = map.fit(b.berlin, { t: nav + 24, r: W * 0.05, b: 40, l: W * 0.3 });     // Berlin rechts vom Titel\n        V[1] = map.fit(b.lichtenberg, { t: nav + 40, r: W * 0.22, b: 60, l: W * 0.22 });\n        V[2] = map.fit(b.karlshorst, { t: nav + 70, r: W * 0.24, b: 110, l: W * 0.24 });\n        V[3] = map.fit(b.quartier, { t: nav + 110, r: W * 0.3, b: 120, l: W * 0.3 });\n        V[4] = map.fit(b.routesAll, { t: nav + 120, r: W * 0.2, b: 150, l: W * 0.24 });   // Platz f\u00fcr die Schilder\n      }\n    };\n    const ease = t => t * t * (3 - 2 * t);\n    const viewAt = p => {\n      const i = Math.min(V.length - 2, Math.floor(p));\n      return map.lerp(V[i], V[i + 1], ease(clamp(0, 1, p - i)));\n    };\n    // Schilder: Seite je Ziel einmal w\u00e4hlen (Wunschseite zuerst), so dass sie sich nicht mit anderen Schildern,\n    // dem Karls-Living-Pin, fremden Zielpunkten oder dem Bildrand \u00fcberschneiden \u2013 danach bleibt die Seite stehen\n    const SIDES = ['l', 'r', 't', 'b', 'tl', 'tr', 'bl', 'br'];\n    const ORIGIN = { l: '100% 50%', r: '0% 50%', t: '50% 100%', b: '50% 0%', tl: '100% 100%', tr: '0% 100%', bl: '100% 0%', br: '0% 0%' };\n    const rectOf = (t, side, s) => {\n      const g = 16, d = 10;\n      const x = { l: s.x - t.w - g, r: s.x + g, t: s.x - t.w / 2, b: s.x - t.w / 2, tl: s.x - t.w - d, tr: s.x + d, bl: s.x - t.w - d, br: s.x + d }[side];\n      const y = { l: s.y - t.h / 2, r: s.y - t.h / 2, t: s.y - t.h - g, b: s.y + g, tl: s.y - t.h - d, tr: s.y - t.h - d, bl: s.y + d, br: s.y + d }[side];\n      return { x, y, w: t.w, h: t.h };\n    };\n    const overlap = (a, b) => Math.max(0, Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x)) * Math.max(0, Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y));\n    // Seiten einmal f\u00fcr die Endansicht planen (alle Wege, Zielpunkte, Schilder und der Pin), unabh\u00e4ngig davon,\n    // wo die Kamera gerade steht; danach folgen die Schilder nur noch ihren Zielpunkten\n    let planned = false;\n    const plan = () => {\n      const W = box.clientWidth, H = box.clientHeight, top = LITE ? 70 : 90, vEnd = V[V.length - 1];\n      const busy = [], lines = [];\n      const pinEl = $('.lage__pin', pin);\n      if (pinEl) {                                  // Pin-Kasten aus dem Layout (ohne die Pop-Animation)\n        const m = map.toScreen(0, 0, vEnd), w = pinEl.offsetWidth, h = pinEl.offsetHeight;\n        busy.push({ x: m.x + pinEl.offsetLeft - w / 2 - 6, y: m.y + pinEl.offsetTop - 6, w: w + 12, h: h + 18 });\n      }\n      for (const id in tags) {\n        const e = map.toScreen(tags[id].r.end.x, tags[id].r.end.y, vEnd);\n        busy.push({ x: e.x - 12, y: e.y - 12, w: 24, h: 24, id });\n        map.sample(id, 22, 1, vEnd).forEach(q => lines.push({ x: q.x - 6, y: q.y - 6, w: 12, h: 12 }));\n      }\n      for (const id of [...MAIN, ...EXTRA]) {\n        const t = tags[id], s = map.toScreen(t.r.end.x, t.r.end.y, vEnd);\n        let best = null;\n        for (const side of [t.pref, ...SIDES.filter(x => x !== t.pref)]) {\n          const r = rectOf(t, side, s);\n          let score = side === t.pref ? 0 : (side.length === 1 ? 300 : 600);\n          for (const b of busy) if (b.id !== id) score += overlap(r, b) * 4;\n          for (const b of lines) score += overlap(r, b) * 1.5;\n          // angeschnittene Schilder gehen gar nicht: Rand-\u00dcberstand z\u00e4hlt weit mehr als jede \u00dcberdeckung\n          score += 1e5 * (Math.max(0, 8 - r.x) + Math.max(0, r.x + r.w - W + 8) + Math.max(0, top - r.y) + Math.max(0, r.y + r.h - H + 30));\n          if (!best || score < best.score) best = { side, score, r };\n        }\n        t.side = best.side;\n        t.card.style.transformOrigin = ORIGIN[t.side];\n        busy.push({ x: best.r.x - 6, y: best.r.y - 6, w: best.r.w + 12, h: best.r.h + 12 });   // etwas Luft zum Nachbarn\n      }\n      planned = true;\n    };\n    const layout = () => {\n      let any = false;\n      for (const id in tags) if (st[id] > 0) any = true;\n      if (!any) return;\n      if (!planned) plan();\n      for (const id of [...MAIN, ...EXTRA]) {\n        const t = tags[id];\n        if (st[id] <= 0) continue;\n        const r = rectOf(t, t.side, map.toScreen(t.r.end.x, t.r.end.y));\n        t.el.style.transform = `translate3d(${Math.round(r.x)}px, ${Math.round(r.y)}px, 0)`;\n      }\n    };\n    // Aktiver Weg (der gerade gezeichnet wird) im Vordergrund, fertige Wege bleiben kr\u00e4ftig\n    const focusOf = () => { for (const id of [...MAIN, ...EXTRA]) if (st[id] > 0 && st[id] < 1) return id; return null; };\n    const apply = () => {\n      if (!V.length) return;\n      const v = viewAt(st.p);\n      v.routes = { sbahn: st.sbahn, tierpark: st.tierpark, wuhlheide: st.wuhlheide, trabrennbahn: st.trabrennbahn, biesenhorst: st.biesenhorst, supermarkt: st.supermarkt };\n      v.focus = focusOf();\n      v.areaLabels = st.labels;\n      map.draw(v);\n      const m = map.toScreen(0, 0);\n      marker.style.transform = `translate3d(${m.x}px, ${m.y}px, 0)`;\n      layout();\n    };\n    const size = () => {\n      map.resize(box.clientWidth, box.clientHeight);\n      measure();\n      views();\n      apply();\n    };\n    size();\n    ScrollTrigger.addEventListener('refreshInit', size);\n    // Beim Neuberechnen rendert GSAP die Zeitachse kurz am Ende und springt ohne R\u00fcckmeldung zur\u00fcck \u2013 danach die Karte\n    // mit dem echten Stand neu zeichnen (sonst stand am Anfang schon das Endbild mit allen Wegen)\n    ScrollTrigger.addEventListener('refresh', apply);\n    if (document.fonts) document.fonts.ready.then(() => { measure(); apply(); });   // Schriftbreiten f\u00fcr die Schilder\n\n    // Schild einblenden, wenn der Weg ankommt (auch r\u00fcckw\u00e4rts wieder aus)\n    const tagIn = (tl, id, at) => tl.fromTo(tags[id].card, { autoAlpha: 0, scale: 0.86 }, { autoAlpha: 1, scale: 1, duration: 0.18, ease: 'back.out(2)' }, at);\n\n    if (LITE) {\n      // Handy: Zoom beim Hineinscrollen (ohne Pin), fertig, wenn die Karte den Bildschirm f\u00fcllt\n      gsap.timeline({ scrollTrigger: { trigger: box, start: 'top 75%', end: 'top 16%', scrub: 1, invalidateOnRefresh: true } })\n        .fromTo(st, { p: 0 }, { p: V.length - 1, ease: 'none', duration: 1, onUpdate: apply }, 0)\n        .fromTo(pin, { scale: 0, y: -40, autoAlpha: 0 }, { scale: 1, y: 0, autoAlpha: 1, duration: 0.18, ease: 'back.out(3)' }, 0.72)\n        .call(() => KL.sound?.pop(), null, 0.73);\n      // Wege laufen einmal ab, sobald die Karte ganz zu sehen ist (zeitgesteuert, ruhig, nicht gescrubbt)\n      const run = gsap.timeline({ paused: true, defaults: { ease: 'power2.inOut' }, onUpdate: apply });\n      run.to(st, { labels: 0, duration: 0.4, ease: 'none' }, 0);\n      [...MAIN, ...EXTRA].forEach((id, i) => {\n        const at = i * 0.9;\n        run.fromTo(st, { [id]: 0 }, { [id]: 1, duration: EXTRA.includes(id) ? 0.9 : 1.1 }, at);   // apply \u00fcber onUpdate der Zeitachse\n        tagIn(run, id, at + (EXTRA.includes(id) ? 0.8 : 1.0));\n      });\n      ScrollTrigger.create({ trigger: box, start: 'top 12%', once: true, onEnter: () => run.play() });\n      lageDebug = { map, st, run, apply };\n      return;\n    }\n\n    // Desktop: gepinnt, gescrubbt; Zeitachse in \u201eStationen\u201c (0 Berlin \u00b7 1 Lichtenberg \u00b7 2 Karlshorst \u00b7 3 Quartier \u00b7 4 Wege)\n    const tl = gsap.timeline({ scrollTrigger: { trigger: sec, start: 'top top', end: '+=400%', pin: true, scrub: 1, invalidateOnRefresh: true } });\n    tl.to(st, { p: 1, duration: 1, ease: 'none', onUpdate: apply }, 0.15)\n      .to('.lage__copy', { yPercent: -25, autoAlpha: 0, duration: 0.35, ease: 'power2.in' }, 0.3)\n      .to('.lage__veil', { autoAlpha: 0, duration: 0.35 }, 0.35)\n      .to('.lage__ticker', { yPercent: -33.333, duration: 0.16, ease: 'power3.inOut' }, 0.65)\n      .to(st, { p: 2, duration: 0.9, ease: 'none', onUpdate: apply }, 1.15)\n      .to('.lage__ticker', { yPercent: -66.666, duration: 0.16, ease: 'power3.inOut' }, 1.55)\n      .to(st, { p: 3, duration: 0.8, ease: 'none', onUpdate: apply }, 2.05)\n      .fromTo(pin, { scale: 0, y: -60, autoAlpha: 0 }, { scale: 1, y: 0, autoAlpha: 1, duration: 0.22, ease: 'back.out(3)' }, 2.55)\n      .call(() => KL.sound?.pop(), null, 2.56)\n      .to(st, { p: 4, duration: 0.6, ease: 'none', onUpdate: apply }, 3.1)\n      .to('.lage__labels', { autoAlpha: 0, duration: 0.25 }, 3.3)\n      .to(st, { labels: 0, duration: 0.3, ease: 'none', onUpdate: apply }, 3.55);   // Fl\u00e4chennamen weichen den Schildern\n    let at = 3.75;\n    MAIN.forEach(id => {\n      tl.fromTo(st, { [id]: 0 }, { [id]: 1, duration: 0.6, ease: 'power1.inOut', onUpdate: apply }, at);\n      tagIn(tl, id, at + 0.55);\n      at += 0.72;\n    });\n    EXTRA.forEach(id => {\n      tl.fromTo(st, { [id]: 0 }, { [id]: 1, duration: 0.45, ease: 'power1.inOut', onUpdate: apply }, at);\n      tagIn(tl, id, at + 0.42);\n    });\n    tl.to({}, { duration: 1.3 }, at + 0.45);   // fertiges Bild eine Weile stehen lassen, bevor der \u00dcbergang zum Kiez dar\u00fcberl\u00e4uft\n    lageDebug = { map, st, tl, apply };\n  }\n\n  /* ==========================================================================\n     KIEZ (Hover-Liste mit fliegendem Bild)\n     ========================================================================== */\n  function initKiez() {\n    charsIn($('.kiez__title'));\n    gsap.from('.kiez__lead, .kiez__text', { y: 40, opacity: 0, duration: 1.2, stagger: 0.1, scrollTrigger: { trigger: '.kiez__head', start: 'top 75%' } });\n    gsap.from('.place', { yPercent: 50, opacity: 0, duration: 1.1, stagger: 0.07, scrollTrigger: { trigger: '.places', start: 'top 85%' } });\n    if (TOUCH) return;\n\n    const float = $('.places__float'), slides = $$('.pslide', float), list = $('.places');\n    gsap.set(float, { xPercent: -50, yPercent: -50, scale: 0 });\n    const fx = gsap.quickTo(float, 'x', { duration: 0.7, ease: 'power3' });\n    const fy = gsap.quickTo(float, 'y', { duration: 0.7, ease: 'power3' });\n    const fr = gsap.quickTo(float, 'rotation', { duration: 0.9, ease: 'power3' });\n    let lastX = 0, current = -1, z = 1, entered = false;\n\n    list.addEventListener('pointermove', e => {\n      if (!entered) { entered = true; fx(e.clientX, e.clientX); fy(e.clientY, e.clientY); }\n      fx(e.clientX); fy(e.clientY);\n      fr(clamp(-14, 14, (e.clientX - lastX) * 0.9));\n      lastX = e.clientX;\n    });\n    $$('.place').forEach((row, i) => row.addEventListener('pointerenter', () => {\n      if (current === i) return;\n      current = i;\n      const s = slides[i];\n      if (!s) return;\n      s.style.zIndex = ++z;\n      gsap.fromTo(s, { clipPath: 'inset(100% 0% 0% 0%)' }, { clipPath: 'inset(0% 0% 0% 0%)', duration: 0.8, ease: 'expo.out', overwrite: true });\n      gsap.fromTo(s.firstElementChild, { scale: 1.4 }, { scale: 1, duration: 1.1, ease: 'expo.out', overwrite: true });\n      gsap.to(float, { scale: 1, duration: 0.6, ease: 'expo.out', overwrite: 'auto' });\n    }));\n    list.addEventListener('pointerleave', () => {\n      current = -1; entered = false;\n      gsap.to(float, { scale: 0, duration: 0.5, ease: 'expo.in', overwrite: 'auto' });\n    });\n  }\n\n  /* ==========================================================================\n     GESCHICHTE\n     ========================================================================== */\n  // Drei Gestaltungen aus derselben Liste im Markup; gew\u00e4hlt ist die Karte (User, 26.09.), die anderen bleiben per\n  // ?geschichte=jahr | zeitstrahl erreichbar: karte = die Orte der Geschichte auf der Vektorkarte (lage-map.js, dunkles\n  // Thema); jahr = gro\u00dfes Jahres-Wort, das sich beim Scrollen umschreibt; zeitstrahl = waagerechter Zeitstrahl\n  const HISTORY = (location.search.match(/[?&]geschichte=(jahr|zeitstrahl|karte)\\b/) || [])[1] || 'karte';\n  // Luftbild-Fenster in der Geschichtskarte (v41, Wahl des Users: rund, Dunkelblau/Creme, bei 1909 und 2030): An diesen\n  // Stationen \u00f6ffnet sich ein runder \u201eBlick in die Vergangenheit\u201c \u2013 1928 mit dem Ring der Luftschiffhalle, 2026 mit der\n  // Baustelle; sonst bleibt die ruhige Karte. ?luftbild=aus zeigt die Karte ohne. Geoportal Berlin, Datenlizenz Deutschland\n  // Zero 2.0; erzeugt von tools/history/luftbilder.py (ins Kartenraster von lage-map.js umgerechnet, 0,5 m/px).\n  // b = Ausschnitt [x0, y0, x1, y1] und c = Mitte des Fensters in Kartenmetern, k = Gr\u00f6\u00dfe. outline: Die Hervorhebung bleibt\n  // als Umriss \u00fcber dem Foto (2030: die Grundst\u00fccke), sonst tritt sie zur\u00fcck (1909: Das Foto zeigt den echten Ring, gemessen\n  // ~25 m s\u00fcdlich des Kartenkreises; das Fenster ist auf ihn zentriert).\n  const LUFTBILD = !/[?&]luftbild=aus\\b/.test(location.search);\n  const LENSES = [\n    { place: 'luftschiff', year: 1928, src: CDN + '6ab9437cea0e1f450c8d39f0_kl-luftbild-1928-fenster-duo.webp', b: [55, -286, 695, 354], c: [368, 56], k: 1 },\n    { place: 'quartier', year: 2026, src: CDN + '6ab9437d69460bf14495b282_kl-luftbild-2026-fenster-duo.webp', b: [-275, -215, 325, 385], c: [25, 85], k: 1.1, outline: true }\n  ];\n  let historyDebug = null;\n  let historyStationY = null;   // Scroll-Position, an der Station i der Geschichte steht (Luftschiff im Hero \u2192 1909)\n  // Fotos zu den Stationen, je Ort (data-place): Bild in 960/480 px (4:3, Duoton), Bildunterschrift, Nachweis mit Links.\n  // Stehen hier statt im Markup, weil embed-2 bei Webflow sonst \u00fcber 50.000 Zeichen k\u00e4me.\n  /* HPICS: erzeugt von tools/history/fotos.py (Auswahl des Users), nicht von Hand \u00e4ndern */\n  const HPICS = {\n    kolonie: { src: CDN + '6ab8335f520e05a190543f90_kl-geschichte-kolonie-960.webp', sm: CDN + '6ab8335fd513fb650cf98137_kl-geschichte-kolonie-480.webp', alt: \"Postkarte mit dem Hotel F\u00fcrstenhaus an der Rennbahn Karlshorst\", cap: \"Gru\u00df aus dem F\u00fcrstenhaus an der Rennbahn, Postkarte von 1899\", by: \"Postkarte: R. Hanow, Berlin\", url: \"https://commons.wikimedia.org/wiki/File:BPK00257-_F%C3%BCrstenhof_an_der_Rennbahn_Karlshorst.jpg\", lic: \"gemeinfrei\", licUrl: \"\", mod: \"\" },\n    luftschiff: { src: CDN + '6ab8335fd8bd41f7f2e89cca_kl-geschichte-luftschiff-960.webp', sm: CDN + '6ab8335fd513fb650cf98178_kl-geschichte-luftschiff-480.webp', alt: \"Die drehbare Luftschiffhalle in Biesdorf mit einem Luftschiff darin\", cap: \"Drehbare Luftschiffhalle in Biesdorf (1909\u20131919)\", by: \"Foto: unbekannt\", url: \"https://commons.wikimedia.org/wiki/File:Luftschiffhalle-Biesdorf.jpg\", lic: \"gemeinfrei\", licUrl: \"\", mod: \"\" },\n    museum: { src: CDN + '6ab83360d513fb650cf981ef_kl-geschichte-museum-960.webp', sm: CDN + '6ab83360d513fb650cf981b5_kl-geschichte-museum-480.webp', alt: \"Generalfeldmarschall Keitel unterzeichnet die Kapitulationsurkunde\", cap: \"Keitel unterzeichnet die Kapitulation in Karlshorst, 8. Mai 1945\", by: \"Foto: U.S. Army (Lt. Moore), restauriert von Adam Cuerden\", url: \"https://commons.wikimedia.org/wiki/File:Field_Marshal_Keitel_signs_German_surrender_terms_in_Berlin_8_May_1945_-_Restoration.jpg\", lic: \"gemeinfrei\", licUrl: \"\", mod: \"\" },\n    garnison: { src: CDN + '6ab8335ed2b39298b206d24d_kl-geschichte-garnison-960.webp', sm: CDN + '6ab8335ed2b39298b206d236_kl-geschichte-garnison-480.webp', alt: \"Bus der Sowjetarmee vor dem Museum in Karlshorst, 1991\", cap: \"Bus der Sowjetarmee vor dem Kapitulationsmuseum, 1991\", by: \"Foto: Bundesarchiv, B 145 Bild-F088847-0004 / Joachim F. Thurn\", url: \"https://commons.wikimedia.org/wiki/File:Bundesarchiv_B_145_Bild-F088847-0004,_Berlin-Karlshorst,_Bus_der_Sowjetarmee.jpg\", lic: \"CC BY-SA 3.0 DE\", licUrl: \"https://creativecommons.org/licenses/by-sa/3.0/de/deed.en\", mod: \"zugeschnitten, eingef\u00e4rbt\" },\n    gartenstadt: { src: CDN + '6ab8335f274b9663fab7cd24_kl-geschichte-gartenstadt-960.webp', sm: CDN + '6ab8335f35b7f14765c65348_kl-geschichte-gartenstadt-480.webp', alt: \"Neubauten an der Patersdorfer Stra\u00dfe in der Gartenstadt Karlshorst\", cap: \"Patersdorfer Stra\u00dfe in der Gartenstadt Karlshorst, 2018\", by: \"Foto: GodeNehler\", url: \"https://commons.wikimedia.org/wiki/File:PatersdorferStra%C3%9Fe.jpg\", lic: \"CC BY-SA 4.0\", licUrl: \"https://creativecommons.org/licenses/by-sa/4.0\", mod: \"zugeschnitten, eingef\u00e4rbt\" },\n    quartier: { src: CDN + '6ab83360e5e7add3865d9387_kl-geschichte-quartier-960.webp', sm: CDN + '6ab83360d513fb650cf98210_kl-geschichte-quartier-480.webp', alt: \"Visualisierung von Karls Living aus der Luft, dahinter Berlin\", cap: \"Karls Living aus der Luft, dahinter Berlin\", by: \"Visualisierung: Karls Living\", url: \"\", lic: \"\", licUrl: \"\", mod: \"\" },\n  };\n  /* HPICS Ende */\n  const escHTML = s => String(s).replace(/[&<>\"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;' }[c]));\n  const picOf = el => HPICS[el.dataset.place] || null;\n  // tab: Links in aria-hidden-Kopien nicht per Tastatur anspringbar machen\n  const linkTo = (text, href, tab) => !text ? '' : href ? `<a href=\"${escHTML(href)}\" target=\"_blank\" rel=\"noopener\"${tab ? ' tabindex=\"-1\"' : ''}>${escHTML(text)}</a>` : escHTML(text);\n  const creditHTML = (p, tab) => p ? [linkTo(p.by, p.url, tab), linkTo(p.lic, p.licUrl, tab), escHTML(p.mod)].filter(Boolean).join(', ') : '';   // mod: z. B. \u201ezugeschnitten\u201c (Pflicht bei CC)\n  const picHTML = (p, cls, sizes, { tab = false, cap = true } = {}) => !p ? '' : `<figure class=\"hpic ${cls}\"><span class=\"hpic__img\"><img src=\"${escHTML(p.sm)}\" srcset=\"${escHTML(p.sm)} 480w, ${escHTML(p.src)} 960w\" sizes=\"${sizes}\" alt=\"${escHTML(p.alt)}\" loading=\"lazy\" decoding=\"async\"></span>`\n    + (cap ? `<figcaption class=\"hpic__cap\"><span class=\"hpic__what\">${escHTML(p.cap)}</span><span class=\"hpic__by\">${creditHTML(p, tab)}</span></figcaption>` : '') + '</figure>';\n  function initHistory() {\n    const sec = $('.history');\n    if (!sec) return;\n    const mode = HISTORY === 'karte' && !(KL.lageMap && KL.lageMap.create) ? 'jahr' : HISTORY;\n    root.dataset.history = mode;\n    const steps = $$('.hstep', sec).map(el => ({ el, word: el.dataset.word, place: el.dataset.place, title: $('b', el).textContent, text: el.lastChild.textContent.trim(), pic: picOf(el) }));\n    const shape = () => gsap.fromTo('.history__shape', { rotate: -35, scale: 0.8 }, { rotate: 40, scale: 1.1, ease: 'none', scrollTrigger: { trigger: sec, start: 'top bottom', end: 'bottom top', scrub: true } });\n    if (mode === 'zeitstrahl') historyLine(sec, steps, shape);\n    else if (mode === 'karte') historyMap(sec, steps, shape);\n    else historyWord(sec, steps, shape);\n    // Fotos rechtzeitig laden: Abz\u00fcge und Zeitstrahl liegen verschoben au\u00dferhalb des Bildes, \u201elazy\u201c k\u00e4me dort zu sp\u00e4t\n    ScrollTrigger.create({ trigger: sec, start: 'top bottom+=120%', once: true, onEnter: () => $$('.hpic img', sec).forEach(im => { im.loading = 'eager'; }) });\n  }\n\n  // Jahres-Wort: gepinnt, je Station schreibt sich das gro\u00dfe Wort um (ScrambleText), Text und Punkte wechseln mit\n  function historyWord(sec, steps, shape) {\n    const word = $('.history__word', sec), dotsBox = $('.history__dots', sec);\n    dotsBox.innerHTML = steps.map(() => '<i></i>').join('');\n    const stepEls = steps.map(s => s.el), dots = $$('i', dotsBox), words = steps.map(s => s.word);\n    if (LITE) {\n      // Handy: alle Stationen als Zeitleiste untereinander (Jahreszahl per CSS aus data-word), Foto unter der Jahreszahl\n      steps.forEach(s => s.pic && s.el.insertAdjacentHTML('afterbegin', picHTML(s.pic, 'hpic--inline', 'calc(100vw - 32px)')));\n      stepEls.forEach(st => gsap.from(st, { y: 40, opacity: 0, duration: 1.1, scrollTrigger: { trigger: st, start: 'top 88%' } }));\n      shape();\n      return;\n    }\n    // Desktop: die Fotos als Abz\u00fcge rechts, je Station landet einer auf dem Stapel (r\u00fcckw\u00e4rts fliegt er wieder weg)\n    const TILT = [-3.2, 2.6, -1.8, 3.2, -2.6, 1.6, -3.4, 2.4];\n    let prints = [], pics = null;\n    if (steps.some(s => s.pic)) {\n      pics = document.createElement('div');\n      pics.className = 'hpics';\n      pics.innerHTML = '<div class=\"hpics__stack\">' + steps.map(s => picHTML(s.pic, 'hpic--print', 'clamp(280px, 30vw, 520px)') || '<i hidden></i>').join('') + '</div>';\n      $('.history__inner', sec).appendChild(pics);\n      prints = [...pics.firstChild.children].map(el => el.tagName === 'FIGURE' ? el : null);\n      prints.forEach((p, k) => p && gsap.set(p, { zIndex: k + 1, y: innerHeight, x: 60, rotation: TILT[k % TILT.length] + 10, autoAlpha: 0 }));\n      gsap.from(pics, { y: 90, rotation: 5, autoAlpha: 0, duration: 1.3, ease: 'power3.out', scrollTrigger: { trigger: sec, start: 'top 55%' } });\n    }\n    const showPic = i => {\n      if (pics) pics.classList.toggle('is-empty', !prints[i]);   // Station ohne Foto: Stapel kurz beiseite\n      prints.forEach((p, k) => {\n      if (!p) return;\n      p.classList.toggle('is-under', k < i);\n      if (k <= i) gsap.to(p, { y: 0, x: 0, rotation: TILT[k % TILT.length], autoAlpha: k < i - 2 ? 0 : 1, duration: k === i ? 1.05 : 0.6, ease: k === i ? 'power3.out' : 'power2.out', overwrite: true });\n      else gsap.to(p, { y: innerHeight, x: 60, rotation: TILT[k % TILT.length] + 10, autoAlpha: 0, duration: 0.7, ease: 'power2.in', overwrite: true });\n      });\n    };\n    let idx = -1;\n    const setStep = i => {\n      if (i === idx) return;\n      idx = i;\n      stepEls.forEach((s, j) => s.classList.toggle('is-active', j === i));\n      dots.forEach((d, j) => d.classList.toggle('is-active', j <= i));\n      showPic(i);\n      if (REDUCED) { word.textContent = words[i]; return; }\n      [0, 90, 180].forEach(d => setTimeout(() => KL.sound?.tick(), d));\n      gsap.to(word, { duration: 1.1, ease: 'none', overwrite: true, scrambleText: { text: words[i], chars: 'ABCDEFGHKLMNPRSTUVWXYZ0123456789', speed: 0.6, revealDelay: 0.25 } });\n    };\n    setStep(0);\n    gsap.timeline({\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: '+=' + Math.round(steps.length * 50) + '%', pin: true, scrub: 1,\n        onUpdate: self => setStep(Math.min(words.length - 1, Math.floor(self.progress * words.length * 0.999)))\n      }\n    })\n      .fromTo('.history__rail i', { scaleY: 0 }, { scaleY: 1, ease: 'none', duration: 1 }, 0)\n      .fromTo('.history__shape', { rotate: -35, scale: 0.8 }, { rotate: 55, scale: 1.12, ease: 'none', duration: 1 }, 0)\n      .fromTo('.history__big', { xPercent: 2 }, { xPercent: -2, ease: 'none', duration: 1 }, 0);   // mehr schneidet lange W\u00f6rter links an\n  }\n\n  // Zeitstrahl: Desktop gepinnt, die Stationen ziehen auf einer Linie von rechts nach links durchs Bild, die rote Linie\n  // w\u00e4chst mit; die Station links im Blick ist hell, die anderen ged\u00e4mpft. Handy: senkrechte Linie, die beim Scrollen\n  // w\u00e4chst, die Stationen leuchten nacheinander auf.\n  function historyLine(sec, steps, shape) {\n    const inner = $('.history__inner', sec), n = steps.length;\n    const box = document.createElement('div');\n    box.className = 'hline';\n    box.setAttribute('aria-hidden', 'true');   // lesbar bleibt die Liste (f\u00fcr Screenreader)\n    box.style.setProperty('--n', n);\n    // Foto \u00fcber der Jahreszahl (die Zahl ragt unten ins Foto), Nachweis klein unter dem Text\n    box.innerHTML = '<div class=\"hline__track\"><i class=\"hline__base\"></i><i class=\"hline__fill\"></i>' + steps.map((s, i) =>\n      `<div class=\"hline__st${s.word.length > 5 ? ' hline__st--long' : ''}\" style=\"--i:${i}\"><span class=\"hline__year${s.word.length > 5 ? ' hline__year--long' : ''}\">${s.word}</span><span class=\"hline__dot\"></span>`\n      + picHTML(s.pic, 'hline__pic', LITE ? 'calc(100vw - 72px)' : 'clamp(190px, 30vw, 520px)', { tab: true, cap: false })\n      + `<p class=\"hline__txt\"><b>${s.title}</b>${s.text}${s.pic ? `<span class=\"hline__credit\">${creditHTML(s.pic, true)}</span>` : ''}</p></div>`).join('') + '</div>';\n    inner.appendChild(box);\n    const track = $('.hline__track', box), fill = $('.hline__fill', box), sts = $$('.hline__st', box);\n    let on = -1;\n    const setOn = i => {\n      if (i === on) return;\n      on = i;\n      sts.forEach((el, j) => { el.classList.toggle('is-on', j === i); el.classList.toggle('is-past', j < i); });\n      if (!LITE) KL.sound?.tick();\n    };\n    if (LITE) {\n      gsap.fromTo(fill, { scaleY: 0 }, { scaleY: 1, ease: 'none', scrollTrigger: { trigger: track, start: 'top 70%', end: 'bottom 70%', scrub: true } });\n      sts.forEach((el, i) => ScrollTrigger.create({ trigger: el, start: 'top 72%', onEnter: () => setOn(i), onLeaveBack: () => setOn(i - 1) }));\n      shape();\n      historyDebug = { mode: 'zeitstrahl' };\n      return;\n    }\n    setOn(0);\n    // Je Station ein St\u00fcck Scrollweg: erst stehen bleiben (lesen), dann z\u00fcgig zur n\u00e4chsten gleiten\n    const gap = () => sts.length > 1 ? sts[1].offsetLeft - sts[0].offsetLeft : 0;\n    const tl = gsap.timeline({\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: '+=' + Math.round(n * 45) + '%', pin: true, scrub: 1, invalidateOnRefresh: true,\n        onUpdate: self => setOn(Math.min(n - 1, Math.floor(self.progress * tl.duration() + 0.25)))\n      }\n    });\n    tl.set(fill, { scaleX: 0 }, 0);\n    for (let i = 1; i < n; i++) {\n      tl.to(track, { x: () => -gap() * i, duration: 0.42, ease: 'power2.inOut' }, i - 0.42)\n        .to(fill, { scaleX: i / (n - 1), duration: 0.42, ease: 'power2.inOut' }, i - 0.42);\n    }\n    tl.to({}, { duration: 0.6 }, n - 1)\n      .fromTo('.history__shape', { rotate: -35, scale: 0.8 }, { rotate: 55, scale: 1.12, ease: 'none', duration: n - 0.4 }, 0);\n    historyDebug = { mode: 'zeitstrahl', tl };\n  }\n\n  // Karte: links Jahr, Titel und Text, rechts die Vektorkarte im dunklen Thema; je Station fliegt die Kamera zum Ort und\n  // hebt ihn rot hervor (lage-map.js: history, view.highlight). Desktop gepinnt: je Station stehen bleiben, dann z\u00fcgig\n  // weiterfliegen. Handy: Die Karte bleibt oben stehen (sticky), die Stationen scrollen darunter durch und lenken die Kamera.\n  function historyMap(sec, steps, shape) {\n    const inner = $('.history__inner', sec), n = steps.length;\n    const box = document.createElement('div');\n    box.className = 'hmap';\n    // Desktop: Fotos als Abzug unten rechts in der Karte (die Karte zeigt wo, das Foto was); Handy: Foto in der Station unter dem Text\n    const hasPics = !LITE && steps.some(s => s.pic);\n    box.innerHTML = '<div class=\"hmap__view\" aria-hidden=\"true\"><canvas class=\"hmap__cv\"></canvas><div class=\"hmap__pin\"><span class=\"lage__ring\"></span><span class=\"lage__ring lage__ring--2\"></span><span class=\"hmap__tag\"></span></div><p class=\"hmap__now\"></p>'\n      + (hasPics ? '<div class=\"hmap__pics\">' + steps.map(s => picHTML(s.pic, 'hmap__pic', 'clamp(220px, 21vw, 380px)', { tab: true }) || '<i hidden></i>').join('') + '</div>' : '') + '</div>'\n      + '<div class=\"hmap__copy\" aria-hidden=\"true\">' + steps.map((s, i) => `<div class=\"hmap__st\" style=\"--i:${i}\"><p class=\"hmap__year${s.word.length > 5 ? ' hmap__year--long' : ''}\">${s.word}</p><p class=\"hmap__txt\"><b>${s.title}</b>${s.text}</p>`\n        + (LITE ? picHTML(s.pic, 'hpic--inline', 'calc(100vw - 32px)', { tab: true }) : '') + '</div>').join('') + '</div>'\n      + '<p class=\"hmap__credit\">Karte: \u00a9 <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" rel=\"noopener\">OpenStreetMap-Mitwirkende</a>'\n      + (LUFTBILD ? ' \u00b7 Luftbilder 1928, 2026: Geoportal Berlin' : '') + '</p>';\n    inner.appendChild(box);\n    const view = $('.hmap__view', box), cv = $('.hmap__cv', box), pin = $('.hmap__pin', box), tag = $('.hmap__tag', box), now = $('.hmap__now', box), sts = $$('.hmap__st', box);\n    const mpics = hasPics ? [...$('.hmap__pics', box).children].map(el => el.tagName === 'FIGURE' ? el : null) : [];\n    const map = KL.lageMap.create(cv, { theme: 'dark' });\n    // Luftbild-Fenster (LENSES): \u00f6ffnet sich beim Ankommen an der Station wie die rote Hervorhebung und schlie\u00dft sich beim\n    // Weiterfliegen; Radius in Bildschirm-px (Desktop 17 % der kleineren Kartenseite, max. 170 px, frei vom Foto-Abzug\n    // unten rechts; Handy 32 %, max. 120 px), w\u00e4chst von 55 auf 100 %. Solange offen treten Stra\u00dfen- und Gebietsschilder\n    // und die pulsierenden Ringe der Ortsmarke zur\u00fcck; Stempel \u201eLuftbild 1928\u201c unten am Ring.\n    const lenses = LUFTBILD ? LENSES.map(l => Object.assign({ i: steps.findIndex(s => s.place === l.place), img: null }, l)).filter(l => l.i >= 0) : [];\n    const lbStamp = lenses.length ? view.appendChild(Object.assign(document.createElement('p'), { className: 'hmap__lb' })) : null;\n    let lensOpen = 0, stampYear = 0, vw = 1, vh = 1;\n    const lensLoad = () => lenses.forEach(l => {\n      if (l.img) return;\n      l.img = new Image();\n      l.img.crossOrigin = 'anonymous';\n      l.img.decoding = 'async';\n      l.img.onload = () => apply();\n      l.img.src = l.src;\n    });\n    const lensPhotos = v => {\n      let l = null, e = 0;\n      for (const c of lenses) {\n        const k = clamp(0, 1, 1 - Math.abs(st.p - c.i) * 2.2), ek = k * k * (3 - 2 * k);\n        if (ek > e) { e = ek; l = c; }\n      }\n      const on = !!l && e > 0.003 && !!l.img && l.img.complete && l.img.naturalWidth > 0;\n      lensOpen = on ? e : 0;\n      if (lbStamp) lbStamp.style.opacity = on ? e.toFixed(3) : 0;\n      if (!on) { v.photoKey = 'lens:0'; return; }\n      const rPx = (LITE ? clamp(64, 0.32 * Math.min(vw, vh), 120) : clamp(64, 0.17 * Math.min(vw, vh), 170)) * l.k;\n      const rM = Math.min(rPx / v.zoom, 320) * (0.55 + 0.45 * e);\n      v.photos = [{ img: l.img, b: l.b, a: e, clip: { x: l.c[0], y: l.c[1], r: rM } }];\n      v.photoKey = 'lens:' + l.year + ':' + e.toFixed(3) + ':' + rM.toFixed(1);\n      if (l.outline) v.highlightOutline = e; else v.highlightSoft = e;\n      const f = +(1 - e).toFixed(2);\n      v.labels = f; v.areaLabels = f;\n      const q = map.toScreen(l.c[0], l.c[1] + rM, v);\n      if (stampYear !== l.year) { stampYear = l.year; lbStamp.innerHTML = 'Luftbild <b>' + l.year + '</b>'; }\n      lbStamp.style.transform = `translate3d(${q.x.toFixed(1)}px, ${q.y.toFixed(1)}px, 0) translate(-50%, -50%)`;\n    };\n    if (lenses.length) ScrollTrigger.create({ trigger: sec, start: 'top bottom+=150%', once: true, onEnter: lensLoad });\n    const H = map.history || {};\n    // kurze Namen f\u00fcr die Schilder\n    const TAG = { kolonie: 'Villenkolonie', luftschiff: 'Luftschiffhalle', hallen: 'Flugzeughallen', versuchsanstalt: 'Halle 3', museum: 'Museum Karlshorst', garnison: 'Kasernengel\u00e4nde', gartenstadt: 'Gartenstadt', quartier: 'Karls Living' };\n    const placeOf = s => { const p = H[s.place] || (s.place === 'quartier' ? { x: 0, y: 0, bounds: map.bounds.quartier } : null); return p && Object.assign({}, p, { name: TAG[s.place] || p.name }); };\n    let V = [];\n    const views = () => {\n      // mit Foto-Abzug unten rechts: den Ort weiter oben bzw. links im Bild halten\n      const pad = LITE ? { t: 36, r: 24, b: 30, l: 24 } : (hasPics ? { t: 130, r: 90, b: 320, l: 150 } : { t: 150, r: 90, b: 120, l: 150 });\n      V = steps.map(s => { const p = placeOf(s); return map.fit(p ? (p.bounds || [p.x - 250, p.y - 250, p.x + 250, p.y + 250]) : map.bounds.karlshorst, pad); });\n    };\n    const st = { p: 0 };\n    let on = -1;\n    // Handy: Die gro\u00dfe Jahreszahl gleitet aus der Station unter die Karte und taucht dabei unten in der Karte auf, je\n    // weiter verdeckt, desto deutlicher (`hid` = verdeckter Anteil). Fr\u00fcher standen beide gleichzeitig untereinander,\n    // danach kam die Karten-Zahl erst, wenn die der Station ganz verdeckt war: Dazwischen war keine Zahl lesbar.\n    const hid = steps.map(() => 0);\n    let nowF = -1;\n    const syncNow = () => {\n      const f = on >= 0 ? hid[on] : 0;\n      if (f === nowF) return;\n      nowF = f;\n      now.style.opacity = f;\n      now.style.transform = `translateY(${((1 - f) * 10).toFixed(1)}px)`;\n    };\n    const setOn = i => {\n      if (i === on) return;\n      on = i;\n      sts.forEach((el, j) => el.classList.toggle('is-on', j === i));\n      mpics.forEach((el, j) => el && el.classList.toggle('is-on', j === i));\n      if (LITE) {\n        gsap.to(now, { duration: 0.7, ease: 'none', overwrite: 'auto', scrambleText: { text: steps[i].word, chars: '0123456789', speed: 0.6 } });\n        syncNow();\n      }\n      KL.sound?.tick();\n    };\n    const apply = () => {\n      if (!V.length) return;\n      const i = Math.max(0, Math.min(n - 2, Math.floor(st.p))), t = clamp(0, 1, st.p - i), e = t * t * (3 - 2 * t);\n      const v = n > 1 ? map.lerp(V[i], V[i + 1], e) : V[0];\n      v.zoom *= Math.pow(0.7, Math.sin(Math.PI * t));   // unterwegs etwas herauszoomen: man sieht, wohin es geht\n      const cur = Math.round(st.p), s = steps[cur], p = placeOf(s);\n      v.highlight = s.place;\n      v.highlightAmount = clamp(0, 1, 1 - Math.abs(st.p - cur) * 2.2);\n      v.quarter = s.place === 'quartier' ? 0.25 + 0.75 * v.highlightAmount : 0.25;   // Karls Living nur zur Orientierung, am Ende kr\u00e4ftig\n      if (lenses.length) lensPhotos(v);\n      map.draw(v);\n      if (p) {\n        const q = map.toScreen(p.x, p.y);\n        pin.style.transform = `translate3d(${q.x}px, ${q.y}px, 0)`;\n        pin.style.opacity = v.highlightAmount;\n        pin.classList.toggle('is-lens', lensOpen > 0.4);   // pulsierende Ringe weg, solange das Luftbild-Fenster offen ist\n        if (tag.textContent !== p.name) tag.textContent = p.name;\n      } else pin.style.opacity = 0;\n    };\n    const size = () => { vw = view.clientWidth; vh = view.clientHeight; map.resize(vw, vh); views(); apply(); };\n    size();\n    ScrollTrigger.addEventListener('refreshInit', size);\n    ScrollTrigger.addEventListener('refresh', apply);   // GSAP rendert beim Neuberechnen kurz das Ende, danach richtig zeichnen\n    if (document.fonts) document.fonts.ready.then(apply);\n    setOn(0);\n    if (LITE) {\n      // aktiv, sobald die Station unter der stehenden Karte auftaucht (auch bei schnellem Wischen \u00fcber sie hinweg)\n      const go = i => { setOn(i); gsap.to(st, { p: i, duration: 1.3, ease: 'power2.inOut', overwrite: true, onUpdate: apply }); };\n      sts.forEach((el, i) => ScrollTrigger.create({ trigger: el, start: 'top 58%', end: 'bottom 58%', onEnter: () => go(i), onEnterBack: () => go(i) }));\n      // Anteil der gro\u00dfen Zahl unter der stehenden Karte: 0, solange ihre Oberkante unter der Kartenunterkante liegt, 1,\n      // sobald auch ihre Unterkante dahinter ist\n      const mapBottom = () => (parseFloat(getComputedStyle(view).top) || 0) + view.offsetHeight;\n      const track = i => self => { hid[i] = self.progress; syncNow(); };\n      sts.forEach((el, i) => ScrollTrigger.create({ trigger: $('.hmap__year', el),\n        start: () => 'top ' + Math.round(mapBottom()), end: () => 'bottom ' + Math.round(mapBottom()),\n        onUpdate: track(i), onRefresh: track(i) }));\n      historyStationY = i => { const el = sts[i]; return el ? el.getBoundingClientRect().top + scrollY - innerHeight * 0.5 : null; };\n      historyDebug = { mode: 'karte', map, st, apply };\n      return;\n    }\n    const tl = gsap.timeline({\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: '+=' + Math.round(n * 45) + '%', pin: true, scrub: 1, invalidateOnRefresh: true,\n        onUpdate: self => setOn(Math.min(n - 1, Math.floor(self.progress * tl.duration() + 0.25)))\n      }\n    });\n    tl.set(st, { p: 0, onComplete: apply }, 0);\n    for (let i = 1; i < n; i++) tl.to(st, { p: i, duration: 0.5, ease: 'none', onUpdate: apply }, i - 0.5);\n    tl.to({}, { duration: 0.6 }, n - 1);\n    historyStationY = i => { const s = tl.scrollTrigger; return s ? s.start + (s.end - s.start) * Math.min(1, (i + 0.02) / tl.duration()) : null; };\n    historyDebug = { mode: 'karte', map, st, tl, apply };\n  }\n\n  /* ==========================================================================\n     IMAGE-TRAIL\n     ========================================================================== */\n  function initTrail() {\n    const sec = $('.trail'), box = $('.trail__imgs');\n    charsIn($('.trail__title'), { stagger: { each: 0.02, from: 'random' } }, 'top 70%');\n    const pool = TRAIL.map(src => {\n      const d = document.createElement('div');\n      d.className = 'trail__img';\n      d.innerHTML = `<img src=\"${src}\" alt=\"\" loading=\"lazy\" decoding=\"async\">`;\n      box.appendChild(d);\n      return d;\n    });\n    if (REDUCED) {\n      // Ohne Bewegung: vier Bilder fest um den Titel; der Hinweis \u201eEinfach zuschauen\u201c entf\u00e4llt\n      $('.trail__hint')?.remove();\n      [[0.18, 0.2, -8], [0.84, 0.24, 6], [0.2, 0.82, 5], [0.8, 0.78, -7]].forEach(([x, y, r], k) =>\n        gsap.set(pool[k], { left: x * 100 + '%', top: y * 100 + '%', xPercent: -50, yPercent: -50, rotate: r, autoAlpha: 1 }));\n      return;\n    }\n    let i = 0, z = 1, last = null, lastMove = 0;\n    const spawn = (x, y) => {\n      const el = pool[i++ % pool.length];\n      gsap.killTweensOf(el);\n      el.style.zIndex = ++z;\n      gsap.timeline()\n        .set(el, { x, y, xPercent: -50, yPercent: -50, scale: 0.2, rotate: rand(-18, 18), autoAlpha: 1 })\n        .to(el, { scale: 1, duration: 0.6, ease: 'back.out(1.8)' })\n        .to(el, { scale: 0.3, y: y + 170, rotate: `+=${rand(-30, 30)}`, autoAlpha: 0, duration: 0.95, ease: 'power3.in' }, 0.8);\n    };\n    const move = (x, y) => {\n      if (!last) { last = { x, y }; return; }\n      if (Math.hypot(x - last.x, y - last.y) > (mobile() ? 70 : 100)) { last = { x, y }; spawn(x, y); }\n    };\n    if (!TOUCH) {\n      sec.addEventListener('pointermove', e => {\n        const r = sec.getBoundingClientRect();\n        lastMove = performance.now();\n        move(e.clientX - r.left, e.clientY - r.top);\n      });\n    }\n    // Autopilot: auf Touch-Ger\u00e4ten oder wenn die Maus ruht\n    let t = 0;\n    const auto = (time, dt) => {\n      if (!TOUCH && performance.now() - lastMove < 2200) return;\n      t += dt / 1000;\n      const w = sec.clientWidth, h = sec.clientHeight;\n      move(w / 2 + Math.sin(t * 1.05) * w * 0.36, h / 2 + Math.sin(t * 1.9 + 1) * h * 0.3);\n    };\n    // L\u00e4uft, solange der Abschnitt zu sehen ist. IntersectionObserver statt Scroll-Punkten: Verschiebt sich\n    // die Seite nachtr\u00e4glich (Schrift, Bilder), bleibt die Bilderspur trotzdem nicht leer.\n    // letzter Eintrag z\u00e4hlt: nach schnellem Weg- und Zur\u00fcckwischen kommen mehrere, der erste ist der \u00e4lteste\n    new IntersectionObserver(es => (es[es.length - 1].isIntersecting ? gsap.ticker.add(auto) : gsap.ticker.remove(auto))).observe(sec);\n  }\n\n  /* ==========================================================================\n     FILM: Baustelle aus der Luft (stummer Loop, der ganze Film liegt auf Vimeo)\n     Desktop: Der Film l\u00e4uft in den Buchstaben von \u201eEs wird gebaut.\u201c, beim Scrollen geht es durch das I\n     ins Vollbild (vom User so entschieden; die Karten-Fassung bleibt nur als R\u00fcckfall ohne Canvas).\n     Handy: Hochformat-Fassung (4:5) als Karte, die sich beim Hineinscrollen \u00f6ffnet.\n     ========================================================================== */\n  // Creme-Fl\u00e4che mit ausgeschnittener Schrift (Canvas), durch die Buchstaben sieht man den Film.\n  // zoom(p): 0 = Schrift in Ruhe, 1 = der Strich des Ankerbuchstabens f\u00fcllt den ganzen Bildschirm.\n  function filmMask(canvas, lines, anchor) {\n    const c2d = canvas.getContext('2d');\n    if (!c2d) return null;\n    const LH = 0.86;\n    const font = fs => `400 ${fs}px \"Daily Spark Sans\", \"Arial Black\", sans-serif`;\n    const g = { p: -1 };\n    const layout = () => {\n      const W = canvas.clientWidth || innerWidth, H = canvas.clientHeight || innerHeight;\n      const dpr = Math.min(window.devicePixelRatio || 1, 2);\n      canvas.width = Math.round(W * dpr);\n      canvas.height = Math.round(H * dpr);\n      c2d.font = font(100);\n      const cap = (c2d.measureText('E').actualBoundingBoxAscent || 70) / 100;\n      const wMax = Math.max(...lines.map(l => c2d.measureText(l).width)) / 100;\n      const fs = Math.min(W * 0.84 / wMax, H * 0.66 / (cap + LH * (lines.length - 1)));\n      c2d.font = font(fs);\n      const top = (H - fs * (cap + LH * (lines.length - 1))) / 2 + H * 0.02;\n      const rows = lines.map((text, i) => ({ text, x: (W - c2d.measureText(text).width) / 2, y: top + fs * (cap + LH * i) }));\n      // Den Strich des Ankerbuchstabens (das I) im gerenderten Text vermessen: Mitte und schmalste Stelle.\n      // Die Markenschrift ist unregelm\u00e4\u00dfig geschnitten, deshalb zeilenweise statt aus den Schriftmetriken.\n      const off = document.createElement('canvas');\n      off.width = Math.ceil(W); off.height = Math.ceil(H);\n      const o = off.getContext('2d', { willReadFrequently: true });\n      const r = rows[anchor.line];\n      o.font = font(fs);\n      o.fillText(r.text, r.x, r.y);\n      const px = o.getImageData(0, 0, off.width, off.height).data;\n      const ink = (x, y) => x >= 0 && y >= 0 && x < off.width && y < off.height && px[(y * off.width + x) * 4 + 3] > 127;\n      const gx = Math.round(r.x + o.measureText(r.text.slice(0, anchor.char)).width + o.measureText(r.text[anchor.char]).width / 2);\n      let minW = Infinity, sum = 0, n = 0;\n      for (let y = Math.round(r.y - cap * fs * 0.92); y <= r.y - cap * fs * 0.08; y += 2) {\n        if (!ink(gx, y)) continue;\n        let a = gx, b = gx;\n        while (ink(a - 1, y)) a--;\n        while (ink(b + 1, y)) b++;\n        minW = Math.min(minW, b - a + 1); sum += (a + b) / 2; n++;\n      }\n      const cx = n ? sum / n : gx;\n      let t = Math.round(r.y - cap * fs / 2), b = t;\n      while (ink(Math.round(cx), t - 1)) t--;\n      while (ink(Math.round(cx), b + 1)) b++;\n      const sw = n ? minW : fs * 0.15, sh = Math.max(b - t, cap * fs * 0.8);\n      off.width = off.height = 0;   // Hilfs-Canvas freigeben (Safari beh\u00e4lt es sonst bis zur Speichergrenze, je Neuberechnung eins)\n      Object.assign(g, { W, H, dpr, fs, rows, ax: cx, ay: (t + b) / 2, sEnd: Math.max(W / (sw * 0.86), H / (sh * 0.86)) * 1.06, p: -1 });\n    };\n    const zoom = p => {\n      p = clamp(0, 1, p);\n      if (!g.rows || p === g.p) return;\n      g.p = p;\n      const { W, H, dpr } = g;\n      c2d.setTransform(1, 0, 0, 1, 0, 0);\n      if (p >= 1) { c2d.clearRect(0, 0, canvas.width, canvas.height); canvas.style.visibility = 'hidden'; return; }\n      canvas.style.visibility = '';\n      // Gleichm\u00e4\u00dfig wirkender Zoom (exponentiell); der Anker wandert dabei in die Bildmitte\n      const s = Math.exp(Math.log(g.sEnd) * p), k = p * p * (3 - 2 * p);\n      const ax = g.ax + (W / 2 - g.ax) * k, ay = g.ay + (H / 2 - g.ay) * k;\n      c2d.globalCompositeOperation = 'source-over';\n      c2d.fillStyle = '#FAF5ED';\n      c2d.fillRect(0, 0, canvas.width, canvas.height);\n      c2d.globalCompositeOperation = 'destination-out';\n      c2d.setTransform(dpr * s, 0, 0, dpr * s, dpr * (ax - s * g.ax), dpr * (ay - s * g.ay));\n      c2d.font = font(g.fs);\n      c2d.fillStyle = '#000';\n      g.rows.forEach(row => c2d.fillText(row.text, row.x, row.y));\n      c2d.globalCompositeOperation = 'source-over';\n    };\n    return { layout, zoom, get p() { return g.p; }, get info() { return { ...g, rows: undefined }; } };\n  }\n\n  let filmDebug = null;\n  function initFilm() {\n    const sec = $('.film');\n    if (!sec) return;\n    const media = $('.film__media', sec), video = $('.film__video', sec), poster = $('.film__poster', sec);\n    const shade = $('.film__shade', sec), pauseBtn = $('.film__pause', sec);\n    const kicker = $('.film__copy .kicker', sec), title = $('.film__title', sec), btn = $('.film__btn', sec);\n    // Desktop: Schrift-Zoom (entschieden); ohne 2D-Canvas als R\u00fcckfall die Karte, die sich auf Vollbild \u00f6ffnet\n    let mode = LITE ? 'lite' : 'schrift';\n    const mask = mode === 'schrift' ? filmMask($('.film__mask', sec), ['ES WIRD', 'GEBAUT.'], { line: 0, char: 4 }) : null;\n    if (mode === 'schrift' && !mask) mode = 'karte';\n    root.dataset.film = mode;\n\n    // Video: Handy im Hochformat, sonst quer. Es l\u00e4dt erst kurz vor dem Abschnitt und l\u00e4uft nur, solange er zu\n    // sehen ist. Spielt der Browser nicht automatisch ab (iOS-Stromsparmodus), bleibt das Poster stehen.\n    let loaded = false, visible = false, paused = false;\n    const play = () => {\n      if (!loaded || paused || !visible) return;\n      const p = video.play();\n      if (p && p.catch) p.catch(() => {});\n    };\n    const load = () => {\n      if (loaded) return;\n      loaded = true;\n      video.src = LITE ? video.dataset.hoch : video.dataset.quer;\n      video.preload = 'auto';\n      play();\n    };\n    if (video) {\n      video.muted = true;\n      video.addEventListener('playing', () => video.classList.add('is-playing'));\n      if ('IntersectionObserver' in window) {\n        new IntersectionObserver(es => { if (es.some(e => e.isIntersecting)) load(); }, { rootMargin: '150% 0px' }).observe(sec);\n        new IntersectionObserver(es => { visible = es[es.length - 1].isIntersecting; if (visible) play(); else video.pause(); }).observe(sec);   // letzter Eintrag = aktueller Stand\n      } else { visible = true; load(); }\n      // Der Knopf zeigt, was der Film wirklich tut: Spielte der Browser nicht von selbst ab (iOS-Stromsparmodus),\n      // stand er auf \u201eanhalten\u201c, obwohl nichts lief, und erst der zweite Tipp startete den Film\n      const sync = () => {\n        pauseBtn?.classList.toggle('is-paused', video.paused);\n        pauseBtn?.setAttribute('aria-pressed', String(video.paused));\n        pauseBtn?.setAttribute('aria-label', video.paused ? 'Film abspielen' : 'Film anhalten');\n      };\n      video.addEventListener('play', sync);\n      video.addEventListener('pause', sync);\n      sync();\n      pauseBtn?.addEventListener('click', () => {\n        paused = !video.paused;   // l\u00e4uft er, anhalten; steht er (auch ohne automatisches Abspielen), starten\n        if (paused) video.pause(); else play();\n      });\n    }\n    const layers = [poster, video].filter(Boolean);\n\n    if (mode === 'lite') {\n      gsap.fromTo(media, { clipPath: 'inset(8% 7% 8% 7% round 24px)' }, { clipPath: 'inset(0% 0% 0% 0% round 24px)', ease: 'none', scrollTrigger: { trigger: media, start: 'top 95%', end: 'top 30%', scrub: true } });\n      gsap.fromTo(layers, { scale: 1.25 }, { scale: 1, ease: 'none', scrollTrigger: { trigger: media, start: 'top bottom', end: 'bottom 40%', scrub: true } });\n      charsIn(title, {}, 'top 88%');\n      gsap.from(kicker, { y: 24, opacity: 0, duration: 1, scrollTrigger: { trigger: sec, start: 'top 85%' } });\n      gsap.from(btn, { y: 30, opacity: 0, duration: 1.1, scrollTrigger: { trigger: btn, start: 'top 96%' } });\n      return;\n    }\n    if (mode === 'karte') {\n      sec.dataset.nav = 'light';\n      const st = { trigger: sec, start: 'top bottom', end: 'top top', scrub: true };\n      gsap.fromTo(media, { clipPath: 'inset(14% 18% 14% 18% round 40px)' }, { clipPath: 'inset(0% 0% 0% 0% round 0px)', ease: 'none', scrollTrigger: { ...st } });\n      gsap.fromTo(layers, { scale: 1.3 }, { scale: 1, ease: 'none', scrollTrigger: { ...st } });\n      charsIn(title, {}, 'top 35%');\n      gsap.from([kicker, btn, pauseBtn], { y: 30, opacity: 0, stagger: 0.08, duration: 1.1, scrollTrigger: { trigger: sec, start: 'top 30%' } });\n      return;\n    }\n\n    // Schrift: Die Buchstaben zeigen den Film, dann geht es durch das I ins Vollbild (gepinnt)\n    const z = { p: 0 };\n    mask.layout(); mask.zoom(0);\n    ScrollTrigger.addEventListener('refreshInit', () => { mask.layout(); mask.zoom(z.p); });\n    // Kam die Markenschrift erst nach dem Start (fontsReady wartet h\u00f6chstens 3,5 s), standen die Buchstaben in der\n    // Ersatzschrift und das I f\u00fcr den Zoom war an der falschen Stelle vermessen: neu setzen, sobald sie da ist\n    const BRAND = '400 100px \"Daily Spark Sans\"';\n    if (document.fonts?.check && !document.fonts.check(BRAND)) {\n      document.fonts.load(BRAND).then(f => { if (f.length) { mask.layout(); mask.zoom(z.p); } }).catch(() => {});\n    }\n    gsap.set([kicker, btn, pauseBtn], { autoAlpha: 0, y: 30 });\n    gsap.timeline({\n      scrollTrigger: {\n        trigger: sec, start: 'top top', end: '+=150%', pin: true, scrub: 1, invalidateOnRefresh: true,\n        onUpdate: self => { const n = self.progress > 0.45 ? 'light' : 'dark'; if (sec.dataset.nav !== n) sec.dataset.nav = n; }\n      }\n    })\n      .to(z, { p: 1, duration: 0.62, ease: 'power1.in', onUpdate: () => mask.zoom(z.p) }, 0)\n      .fromTo(layers, { scale: 1.18 }, { scale: 1, duration: 0.72, ease: 'power1.out' }, 0)\n      .call(() => KL.sound?.whoosh({ dur: 1.3, peak: 2400 }), null, 0.3)\n      .to(shade, { opacity: 1, duration: 0.2, ease: 'none' }, 0.6)\n      .to([kicker, btn, pauseBtn], { autoAlpha: 1, y: 0, stagger: 0.05, duration: 0.2, ease: 'power2.out' }, 0.64)\n      .to({}, { duration: 0.25 });\n    filmDebug = { mask, z };\n  }\n\n  /* ==========================================================================\n     LIGHTBOX: \u201eMehr anschauen\u201c im Film-Abschnitt spielt den ganzen Film (Vimeo) \u00fcber der Seite ab statt in einem\n     neuen Tab (Wunsch des Kumpels, 27.09.). Der Link zu Vimeo bleibt als R\u00fcckfall (ohne JS, Mittel-/Strg-Klick).\n     dnt=1: Vimeo setzt keine Tracking-Cookies.\n     ========================================================================== */\n  const VIMEO = 'https://player.vimeo.com/video/1199676005?h=112fa36252&autoplay=1&title=0&byline=0&portrait=0&dnt=1&color=C1111F';\n  function initLightbox() {\n    const links = $$('[data-lightbox=\"vimeo\"]');\n    if (!links.length) return;\n    let box = null, lastFocus = null, resumeVideo = null;\n    const onKey = e => {\n      if (!box) return;\n      if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); }\n      else if (e.key === 'Tab') {   // Fokus im Dialog halten (Schlie\u00dfen-Knopf und Film)\n        const f = [...box.querySelectorAll('button, iframe')], i = f.indexOf(document.activeElement);\n        if (e.shiftKey ? i <= 0 : i === f.length - 1) { e.preventDefault(); f[e.shiftKey ? f.length - 1 : 0].focus(); }\n      }\n    };\n    let inerted = [], fading = null, openedAt = 0;\n    const close = () => {\n      if (!box) return;\n      const b = box;\n      box = null;\n      removeEventListener('keydown', onKey, true);\n      inerted.forEach(el => { el.inert = false; });\n      inerted = [];\n      b.classList.remove('is-open');\n      fading = b;\n      setTimeout(() => { b.remove(); if (fading === b) fading = null; }, 450);   // nach dem Ausblenden entfernen, das stoppt den Film\n      root.classList.remove('lightbox-open');\n      lenis?.start();\n      if (resumeVideo) { resumeVideo.play().catch(() => {}); resumeVideo = null; }\n      lastFocus?.focus({ preventScroll: true });\n    };\n    const open = a => {\n      if (box) return;\n      if (fading) { fading.remove(); fading = null; }   // gleich wieder ge\u00f6ffnet: den alten Film nicht weiterlaufen lassen\n      lastFocus = a;\n      openedAt = performance.now();\n      const v = $('.film__video');   // der stumme Loop dahinter pausiert solange\n      if (v && !v.paused) { v.pause(); resumeVideo = v; }\n      box = document.createElement('div');\n      box.className = 'lightbox';\n      box.setAttribute('role', 'dialog');\n      box.setAttribute('aria-modal', 'true');\n      box.setAttribute('aria-label', 'Film: Karls Living \u2013 Ein Quartier f\u00fcr alle Lebensformen');\n      box.innerHTML = '<button class=\"lightbox__close\" type=\"button\" aria-label=\"Film schlie\u00dfen\"><i></i><i></i></button>'\n        + `<div class=\"lightbox__frame\"><iframe src=\"${VIMEO}\" title=\"Karls Living \u2013 Ein Quartier f\u00fcr alle Lebensformen\" allow=\"autoplay; fullscreen; picture-in-picture\"></iframe></div>`;\n      document.body.appendChild(box);\n      // Rest der Seite solange unerreichbar: Mit der Tabulatortaste lief der Fokus sonst aus dem Dialog in die Nav dahinter\n      inerted = [...document.body.children].filter(el => el !== box && !el.inert);\n      inerted.forEach(el => { el.inert = true; });\n      // iOS 15 ignoriert overflow: hidden am Dokument beim Wischen: Wischen neben dem Film schob die Seite dahinter mit.\n      // Im Film selbst kommt das Wischen hier gar nicht an (eigenes Dokument im iframe).\n      box.addEventListener('touchmove', e => e.preventDefault(), { passive: false });\n      // Klick neben den Film oder auf \u00d7; ein Doppelklick auf \u201eMehr anschauen\u201c schloss sie sonst sofort wieder\n      box.addEventListener('click', e => {\n        if (e.target.closest('.lightbox__frame')) return;\n        if (e.target.closest('.lightbox__close') || performance.now() - openedAt > 400) close();\n      });\n      addEventListener('keydown', onKey, true);\n      root.classList.add('lightbox-open');\n      lenis?.stop();\n      requestAnimationFrame(() => box?.classList.add('is-open'));\n      $('.lightbox__close', box).focus({ preventScroll: true });\n    };\n    links.forEach(a => a.addEventListener('click', e => {\n      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;   // neuer Tab wie gewohnt\n      e.preventDefault();\n      open(a);\n    }));\n  }\n\n  /* ==========================================================================\n     NEUIGKEITEN\n     ========================================================================== */\n  function initNews() {\n    charsIn($('.news__title'));\n    const card = $('.news__card');\n    gsap.fromTo('.news__img img', { yPercent: -7 }, { yPercent: 7, ease: 'none', scrollTrigger: { trigger: card, start: 'top bottom', end: 'bottom top', scrub: true } });\n    // Perspektive fest setzen, nicht mit animieren: In from() lief sie von 1400 gegen 0 px, und lag die Maus beim\n    // Einfahren auf der Kachel, kam die Maus-Neigung dazu \u2013 bei wenigen Pixeln Perspektive wurde die Kachel extrem\n    // verzerrt (vom User gemeldet). Die Neigung startet deshalb auch erst, wenn die Kachel steht.\n    gsap.set(card, { transformPerspective: 1400 });\n    let tilt = false;\n    gsap.from(card, { y: 140, rotateX: -14, transformOrigin: '50% 0%', opacity: 0, duration: 1.5, scrollTrigger: { trigger: card, start: 'top 90%' }, onComplete: () => { tilt = true; } });\n    gsap.from('.news__body > *', { y: 40, opacity: 0, stagger: 0.1, duration: 1.2, scrollTrigger: { trigger: card, start: 'top 70%' } });\n    if (TOUCH || REDUCED) return;\n    const rx = gsap.quickTo(card, 'rotationX', { duration: 0.9, ease: 'power3' });\n    const ry = gsap.quickTo(card, 'rotationY', { duration: 0.9, ease: 'power3' });\n    card.addEventListener('pointermove', e => {\n      if (!tilt) return;\n      const r = card.getBoundingClientRect();\n      ry(clamp(-6, 6, ((e.clientX - r.left) / r.width - 0.5) * 8));\n      rx(clamp(-6, 6, -((e.clientY - r.top) / r.height - 0.5) * 8));\n    });\n    card.addEventListener('pointerleave', () => { rx(0); ry(0); });\n  }\n\n  /* ==========================================================================\n     KONTAKT\n     ========================================================================== */\n  function initKontakt() {\n    const s = split('.kontakt__title', 'words,chars');\n    gsap.from(s.chars, { yPercent: 110, rotate: () => rand(-24, 24), opacity: 0, duration: 1.3, stagger: 0.03, scrollTrigger: { trigger: '.kontakt__title', start: 'top 80%' } });\n    gsap.from('.kontakt__lead', { y: 40, opacity: 0, duration: 1.2, scrollTrigger: { trigger: '.kontakt__lead', start: 'top 90%' } });\n    gsap.from('.kontakt__direct > *', { y: 60, opacity: 0, stagger: 0.1, duration: 1.2, scrollTrigger: { trigger: '.kontakt__grid', start: 'top 85%' } });\n    gsap.from('.form > *', { y: 40, opacity: 0, stagger: 0.05, duration: 1.1, scrollTrigger: { trigger: '.form', start: 'top 85%' } });\n\n    const form = $('.form'), note = $('.form__note');\n    if (!form) return;\n    form.addEventListener('submit', e => {\n      e.preventDefault();\n      const invalid = $$('input, textarea', form).filter(f => !f.checkValidity());\n      $$('.is-invalid', form).forEach(el => el.classList.remove('is-invalid'));\n      if (invalid.length) {\n        note.textContent = 'Bitte f\u00fcllen Sie die markierten Felder aus.';\n        invalid.forEach(f => {\n          const box = f.closest('.field, .check');\n          if (!box) return;\n          box.classList.add('is-invalid');\n          gsap.fromTo(box, { x: -14 }, { x: 0, duration: 0.8, ease: 'elastic.out(1, 0.25)' });\n        });\n        invalid[0].focus({ preventScroll: true });\n        return;\n      }\n      burst($('.btn', form), 22);\n      KL.sound?.chime();\n      note.textContent = 'Danke! Das ist ein Prototyp \u2013 es wurden keine Daten \u00fcbertragen.';\n      form.reset();\n    });\n    form.addEventListener('input', e => e.target.closest('.field, .check')?.classList.remove('is-invalid'));\n    form.addEventListener('change', e => e.target.closest('.field, .check')?.classList.remove('is-invalid'));\n  }\n\n  /* ==========================================================================\n     FOOTER (Parallax-Reveal + Physik-Garten)\n     ========================================================================== */\n  function initFooter() {\n    const footer = $('.footer');\n    // Hintergrund zum Vergleichen: Standard nur Farbe mit Blumen, ?footer=rendering zeigt den Innenhof\n    const variant = /[?&]footer=render/.test(location.search) ? 'rendering' : 'farbe';\n    root.dataset.footer = variant;\n    const render = $('.footer__render');\n    if (render && variant === 'rendering') {\n      render.loading = 'lazy';\n      render.src = render.dataset.src;\n      gsap.fromTo(render, { scale: 1.14 }, { scale: 1, ease: 'none', scrollTrigger: { trigger: footer, start: 'top bottom', end: 'bottom bottom', scrub: true } });\n    }\n    gsap.fromTo('.footer__inner', { yPercent: -28 }, { yPercent: 0, ease: 'none', scrollTrigger: { trigger: footer, start: 'top bottom', end: 'bottom bottom', scrub: true } });\n    const s = split('.footer__word', 'chars');\n    gsap.from(s.chars, { yPercent: 120, scaleY: 0.4, duration: 1.6, ease: 'elastic.out(1, 0.6)', stagger: 0.05, scrollTrigger: { trigger: footer, start: 'top 45%' } });\n\n    $('.footer__top')?.addEventListener('click', () => {\n      if (lenis) lenis.scrollTo(0, { duration: 3.2, easing: t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2) });\n      else scrollTo({ top: 0, behavior: REDUCED ? 'auto' : 'smooth' });\n    });\n\n    let world = null;\n    ScrollTrigger.create({\n      trigger: footer, start: 'top 55%', end: 'bottom top',\n      onEnter: () => { world = world || physics(); world.start(); },\n      onEnterBack: () => world?.start(),\n      onLeaveBack: () => world?.stop()\n    });\n  }\n\n  function physics() {\n    const noop = { start() {}, stop() {} };\n    if (typeof Matter === 'undefined') return noop;\n    const { Engine, Bodies, Body, Composite, Mouse, MouseConstraint, Query } = Matter;\n    const el = $('.footer__world');\n    if (!el) return noop;\n\n    const engine = Engine.create();\n    engine.gravity.y = 1.05;\n    let W = el.clientWidth, H = el.clientHeight;\n    const walls = [];\n    const buildWalls = () => {\n      walls.forEach(w => Composite.remove(engine.world, w));\n      walls.length = 0;\n      const t = 400;\n      walls.push(\n        Bodies.rectangle(W / 2, H + t / 2, W * 4, t, { isStatic: true }),\n        Bodies.rectangle(-t / 2, H / 2 - 1500, t, H + 5000, { isStatic: true }),\n        Bodies.rectangle(W + t / 2, H / 2 - 1500, t, H + 5000, { isStatic: true })\n      );\n      Composite.add(engine.world, walls);\n    };\n    buildWalls();\n\n    const DEF = [\n      ['flower', '#FAF5ED', 'c'], ['tulip-sm', '#669BBC', 'r'], ['leaf', '#FAF5ED', 'r'], ['bloom', '#C1111F', 'c'],\n      ['vase', '#003049', 'r'], ['logo', '#FAF5ED', 'r'], ['snail', '#F5EDD6', 'c'], ['flower', '#C1111F', 'c'],\n      ['leaf2', '#003049', 'r'], ['sprout', '#FAF5ED', 'r'], ['tulip', '#003049', 'r'], ['flower', '#003049', 'c'],\n      ['bloom', '#FAF5ED', 'c'], ['logo', '#C1111F', 'r'], ['flower-big', '#669BBC', 'r'], ['leaf', '#C1111F', 'r'],\n      ['flower', '#669BBC', 'c'], ['snail', '#C1111F', 'c'], ['tulip-sm', '#FAF5ED', 'r'], ['leaf2', '#FAF5ED', 'r']\n    ];\n    const items = [];\n    const unit = () => clamp(44, 150, Math.min(W, H * 1.7) * 0.085);\n\n    const add = (def, x, y, pop = false) => {\n      const [id, color, kind] = def;\n      const [vw, vh] = SHAPES[id];\n      const base = unit() * rand(0.8, 1.35);\n      let w, h;\n      if (vw >= vh) { w = base * 1.15; h = w * vh / vw; } else { h = base * 1.35; w = h * vw / vh; }\n      const node = document.createElement('div');\n      node.className = 'pbody';\n      node.style.width = w + 'px';\n      node.style.height = h + 'px';\n      node.style.color = color;\n      node.innerHTML = shapeSVG(id);\n      el.appendChild(node);\n      const opts = { restitution: 0.35, friction: 0.5, frictionAir: 0.012, density: 0.0016 };\n      const body = kind === 'c'\n        ? Bodies.circle(x, y, Math.min(w, h) * 0.46, opts)\n        : Bodies.rectangle(x, y, w * 0.8, h * 0.88, { ...opts, chamfer: { radius: Math.min(w, h) * 0.28 } });\n      Body.setAngle(body, rand(-0.8, 0.8));\n      if (pop) {\n        KL.sound?.pop();\n        Body.setVelocity(body, { x: rand(-5, 5), y: rand(-15, -9) });\n        gsap.from(node, { scale: 0, duration: 0.6, ease: 'back.out(3)' });\n      }\n      Composite.add(engine.world, body);\n      items.push({ node, body, w, h });\n      if (items.length > 46) {\n        const old = items.shift();\n        Composite.remove(engine.world, old.body);\n        gsap.to(old.node, { opacity: 0, duration: 0.4, onComplete: () => old.node.remove() });\n      }\n    };\n\n    const count = mobile() ? 13 : 22;\n    for (let i = 0; i < count; i++) add(DEF[i % DEF.length], rand(W * 0.08, W * 0.92), -rand(80, H * 1.8));\n\n    const bodies = () => items.map(it => it.body);\n    const localPoint = e => { const r = el.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; };\n    const randomDef = () => DEF[Math.floor(Math.random() * DEF.length)];\n\n    if (!TOUCH) {\n      const mouse = Mouse.create(el);\n      ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(ev => mouse.element.removeEventListener(ev, mouse.mousewheel));\n      mouse.element.removeEventListener('touchstart', mouse.mousedown);\n      mouse.element.removeEventListener('touchmove', mouse.mousemove);\n      mouse.element.removeEventListener('touchend', mouse.mouseup);\n      Composite.add(engine.world, MouseConstraint.create(engine, { mouse, constraint: { stiffness: 0.18, damping: 0.1, render: { visible: false } } }));\n      let down = null;\n      el.addEventListener('pointerdown', e => { down = { x: e.clientX, y: e.clientY, t: performance.now() }; });\n      el.addEventListener('pointerup', e => {\n        if (!down) return;\n        const moved = Math.hypot(e.clientX - down.x, e.clientY - down.y);\n        const p = localPoint(e);\n        if (moved < 6 && performance.now() - down.t < 350 && !Query.point(bodies(), p).length) add(randomDef(), p.x, p.y, true);\n        down = null;\n      });\n    } else {\n      el.addEventListener('click', e => {\n        const p = localPoint(e);\n        const hits = Query.point(bodies(), p);\n        if (hits.length) { hits.forEach(b => Body.setVelocity(b, { x: rand(-7, 7), y: -17 })); KL.sound?.pop(); }\n        else add(randomDef(), p.x, p.y, true);\n      });\n    }\n\n    const FIX = 1000 / 60;\n    let acc = 0, running = false;\n    const render = () => {\n      for (const it of items) {\n        const { x, y } = it.body.position;\n        if (y > H + 600 || x < -400 || x > W + 400) {\n          Body.setPosition(it.body, { x: rand(W * 0.2, W * 0.8), y: -200 });\n          Body.setVelocity(it.body, { x: 0, y: 0 });\n        }\n        it.node.style.transform = `translate3d(${x - it.w / 2}px, ${y - it.h / 2}px, 0) rotate(${it.body.angle}rad)`;\n      }\n    };\n    const step = (time, dt) => {\n      acc += Math.min(dt, 100);\n      let n = 0;\n      while (acc >= FIX && n < 4) { Engine.update(engine, FIX); acc -= FIX; n++; }\n      if (n === 4) acc = 0;\n      render();\n    };\n    let rt;\n    addEventListener('resize', () => {\n      clearTimeout(rt);\n      rt = setTimeout(() => { W = el.clientWidth; H = el.clientHeight; buildWalls(); }, 200);\n    });\n    return {\n      start() { if (!running) { running = true; acc = 0; gsap.ticker.add(step); } },\n      stop() { if (running) { running = false; gsap.ticker.remove(step); } }\n    };\n  }\n\n  /* ==========================================================================\n     \u00dcBERG\u00c4NGE zwischen den Abschnitten als Welle (wie in v32; v33\u2013v35 Farbverlauf, auf Wunsch des Users\n     27.09. wieder die Welle): Der n\u00e4chste Abschnitt schiebt sich mit einer sanften Welle \u00fcber den vorigen, die\n     sich beim Scrollen leicht bewegt. Die Form ist ein eigenes Element vor dem Abschnitt (H\u00f6he 0, ragt nach oben),\n     damit sie auch \u00fcber gepinnte Abschnitte gleitet und nicht vom overflow abgeschnitten wird.\n     Neu: In jeder Welle l\u00e4uft ein St\u00fcck Wurzel in der Farbe des n\u00e4chsten Abschnitts weiter (auf die Wellenform\n     zugeschnitten). Die Welle deckt das Ende der Wurzel des vorigen Abschnitts ab, in v32 riss die Linie dort ab.\n     ========================================================================== */\n  const EDGES = [];   // f\u00fcr die Farbe der Navigation: welche Welle liegt gerade unter ihr?\n  const edgeAt = y => {\n    for (const e of EDGES) {\n      const r = e.box.getBoundingClientRect();\n      if (y <= r.top || y >= r.bottom) continue;\n      if (y >= r.top + (e.surface(0.5) / 100) * r.height) return e.nav;\n    }\n    return null;\n  };\n  const ROOT_ON = { navy: '#FAF5ED', red: '#FAF5ED', cream: '#003049', blue: '#003049' };   // Wurzelfarbe je Fl\u00e4che\n  function initEdges() {\n    // Abschnitt, der die Welle oben bekommt | seine Farbe | Nav-Thema darauf | nur wenn\n    const list = [\n      ['.stats', 'navy', 'light'],\n      ['.raum', 'cream', 'dark', !LITE],   // Handy: R\u00fcckzugsort ist ebenfalls creme\n      ['.green', 'navy', 'light'],\n      ['.projekt', 'cream', 'dark'],\n      ['.kiez', 'cream', 'dark'],\n      ['.history', 'navy', 'light'],\n      ['.trail', 'blue', 'dark'],\n      ['.film', 'cream', 'dark'],\n      ['.news', 'cream', 'dark', !LITE],   // Handy: Film-Abschnitt ist creme\n      ['.kontakt', 'red', 'light']\n    ];\n    const NS = 'http://www.w3.org/2000/svg';\n    const el = (tag, attrs) => { const n = document.createElementNS(NS, tag); Object.entries(attrs).forEach(([k, v]) => n.setAttribute(k, v)); return n; };\n    list.forEach(([sel, color, nav, ok = true], i) => {\n      const sec = $(sel);\n      if (!sec || !ok) return;\n      const box = document.createElement('div');\n      box.className = 'edge';\n      box.setAttribute('aria-hidden', 'true');\n      box.style.setProperty('--edge-c', `var(--${color})`);\n      sec.before(box);\n      const svg = el('svg', { viewBox: '0 0 1000 100', preserveAspectRatio: 'none' });\n      const path = el('path', { id: 'kl-edge-' + i });\n      // Wurzelst\u00fcck: senkrecht an der Stelle der Hauptwurzel, nur innerhalb der Welle sichtbar (clipPath = Welle)\n      const clip = el('clipPath', { id: 'kl-edge-clip-' + i });\n      clip.appendChild(el('use', { href: '#kl-edge-' + i }));\n      const defs = el('defs', {});\n      defs.appendChild(clip);\n      const rootSeg = el('path', { class: 'edge__root', 'clip-path': `url(#kl-edge-clip-${i})` });\n      rootSeg.style.stroke = ROOT_ON[color];\n      svg.append(defs, path, rootSeg);\n      box.appendChild(svg);\n      const placeRoot = () => {\n        const W = Math.max(1, box.clientWidth || innerWidth);\n        const x0 = clamp(16, 56, innerWidth * 0.032) * 0.5;   // wie in initRoots\n        rootSeg.setAttribute('d', `M${(x0 / W * 1000).toFixed(1)},0V102`);\n        // Die Welle ist nicht proportional skaliert (1000 \u00d7 100 auf ganze Breite): Strichst\u00e4rke so umrechnen, dass sie\n        // wie die \u00fcbrigen Wurzeln aussieht (2,4 px, Handy 1,6 px)\n        rootSeg.style.strokeWidth = ((innerWidth <= 760 ? 1.6 : 2.4) / (W / 1000)).toFixed(2);\n      };\n      placeRoot();\n      addEventListener('resize', placeRoot);\n      // Jede Welle etwas anders: L\u00e4nge, Lage und leichte Neigung aus einem festen Startwert\n      const rnd = (s => () => { s = (s * 16807) % 2147483647; return s / 2147483647; })(9173 + i * 7919);\n      const w = { n: 0.8 + rnd() * 0.5, ph: rnd() * Math.PI * 2, tilt: (rnd() - 0.5) * 26, a2: 0.1 + rnd() * 0.14, dir: rnd() < 0.5 ? -1 : 1 };\n      let t = 0;\n      const surface = x => {\n        const k = Math.PI * 2 * w.n, m = t * 1.4 * w.dir;\n        const s = (Math.sin(k * x + w.ph + m) + w.a2 * Math.sin(2 * k * x + w.ph * 1.7 - m)) / (1 + w.a2);\n        return clamp(3, 97, 52 + s * 38 * (0.82 + 0.18 * Math.cos(t * Math.PI)) + w.tilt * (x - 0.5));\n      };\n      const draw = () => {\n        const N = 24, pts = [];\n        for (let j = 0; j <= N; j++) pts.push([j / N * 1000, surface(j / N)]);\n        let d = `M0,100L${pts[0][0]},${pts[0][1].toFixed(1)}`;\n        for (let j = 0; j < N; j++) {   // Catmull-Rom als B\u00e9zier: glatt durch alle Punkte\n          const p0 = pts[j - 1] || pts[j], p1 = pts[j], p2 = pts[j + 1], p3 = pts[j + 2] || p2;\n          d += `C${(p1[0] + (p2[0] - p0[0]) / 6).toFixed(1)},${(p1[1] + (p2[1] - p0[1]) / 6).toFixed(1)} ${(p2[0] - (p3[0] - p1[0]) / 6).toFixed(1)},${(p2[1] - (p3[1] - p1[1]) / 6).toFixed(1)} ${p2[0]},${p2[1].toFixed(1)}`;\n        }\n        path.setAttribute('d', d + 'L1000,100Z');\n      };\n      draw();\n      EDGES.push({ box: svg, nav, surface });\n      // Wurzelst\u00fcck w\u00e4chst mit dem Scroll wie die \u00fcbrigen Wurzeln: Spitze auf 65 % der Bildh\u00f6he (vom oberen Rand der\n      // Welle bis zu ihrem Fu\u00df). Ohne REDUCED-Bewegung steht es fertig da.\n      const eh = () => svg.getBoundingClientRect().height || 80;\n      if (REDUCED) return;\n      gsap.fromTo(rootSeg, { drawSVG: '0%' }, { drawSVG: '100%', ease: 'none', scrollTrigger: {\n        trigger: box, start: () => 'top ' + Math.round(innerHeight * 0.65 + eh()) + 'px', end: () => 'top ' + Math.round(innerHeight * 0.65) + 'px',\n        scrub: true, refreshPriority: -1, invalidateOnRefresh: true\n      } });\n      // Bewegung an den Scroll koppeln: 0 = Welle taucht unten auf, 1 = sie erreicht den oberen Rand\n      // refreshPriority -1: erst nach den Pins berechnen, die weiter oben liegen, aber sp\u00e4ter angelegt werden\n      ScrollTrigger.create({\n        trigger: box, start: 'top bottom', end: 'top top', refreshPriority: -1,\n        onUpdate: self => { t = self.progress; draw(); }\n      });\n    });\n  }\n\n  /* ==========================================================================\n     NAV-Theme, Nav ausblenden\n     ========================================================================== */\n  function initChrome() {\n    const nav = $('.nav'), navInner = $('.nav__inner');\n    const sectionAt = (x, y, attr) => {\n      for (const el of document.elementsFromPoint(x, y)) {\n        const s = el.closest(`[${attr}]`);\n        if (s) return s;\n      }\n      return null;\n    };\n    const check = () => {\n      // Liegt die Welle des n\u00e4chsten Abschnitts schon unter der Navigation, gilt dessen Farbe\n      const e = edgeAt(36);\n      if (e) { nav.dataset.theme = e; return; }\n      const s = sectionAt(innerWidth / 2, 36, 'data-nav');\n      if (s) nav.dataset.theme = s.dataset.nav;\n    };\n    let queued = false;\n    const req = () => { if (queued) return; queued = true; requestAnimationFrame(() => { queued = false; check(); }); };\n    onScroll(req);\n    addEventListener('resize', req);\n    check();\n    chromeCheck = req;\n\n    ScrollTrigger.create({\n      start: 0, end: 'max',\n      onUpdate: self => {\n        if (root.classList.contains('menu-open')) return;\n        if (self.direction === 1 && self.scroll() > innerHeight * 0.7) navInner.classList.add('is-hidden');\n        else if (self.direction === -1) navInner.classList.remove('is-hidden');\n      }\n    });\n  }\n\n  /* ==========================================================================\n     ABSCHNITTS-LEISTE rechts: ein Punkt je Abschnitt, der aktuelle ist markiert.\n     Klick springt hin (weite Spr\u00fcnge mit dem Vorhang). Am Handy erscheint die Leiste beim Scrollen\n     und l\u00e4sst sich mit dem Finger abfahren: Der Name des Abschnitts steht daneben, Loslassen springt.\n     ========================================================================== */\n  function initSecnav() {\n    const nav = $('.secnav'), list = $('.secnav__list');\n    if (!nav || !list) return;\n    // Gepinnte Abschnitte stecken in einem .pin-spacer, deshalb nicht nur direkte Kinder von <main>\n    const main = $('main');\n    const secs = $$('section[data-label]', main).filter(sec => sec.parentElement === main || sec.parentElement.classList.contains('pin-spacer'));\n    const items = secs.map((sec, i) => {\n      const name = sec.dataset.dot || sec.dataset.label;\n      const li = document.createElement('li');\n      const btn = document.createElement('button');\n      btn.type = 'button';\n      btn.className = 'secnav__btn';\n      btn.setAttribute('aria-label', name);\n      btn.innerHTML = `<span class=\"secnav__label\" aria-hidden=\"true\">${name}</span>`;\n      li.appendChild(btn);\n      list.appendChild(li);\n      return { sec, btn, name, top: 0, i };\n    });\n    if (!items.length) return;\n\n    const jump = it => {\n      if (!it || root.classList.contains('menu-open') || root.classList.contains('is-loading')) return;\n      goTo(it.sec, it.name);\n    };\n    let lastTouch = 0;\n    items.forEach(it => it.btn.addEventListener('click', () => { if (performance.now() - lastTouch > 700) jump(it); }));\n\n    // Aktiver Abschnitt: der letzte, dessen Anfang \u00fcber der Bildschirmmitte liegt\n    const measure = () => items.forEach(it => { it.top = targetY(it.sec); });\n    let active = null;\n    const update = () => {\n      const y = (lenis ? lenis.scroll : scrollY) + innerHeight * 0.5;\n      let a = items[0];\n      for (const it of items) if (it.top <= y) a = it;\n      if (a === active) return;\n      if (active) { active.btn.classList.remove('is-active'); active.btn.removeAttribute('aria-current'); }\n      active = a;\n      a.btn.classList.add('is-active');\n      a.btn.setAttribute('aria-current', 'true');\n    };\n    let queued = false;\n    const req = () => { if (queued) return; queued = true; requestAnimationFrame(() => { queued = false; update(); }); };\n    ScrollTrigger.addEventListener('refresh', () => { measure(); update(); });\n    addEventListener('kl:relayout', () => { measure(); update(); });\n    measure(); update();\n\n    // Handy: Leiste nur beim Scrollen zeigen. Antippbar erst, wenn das Bild kurz steht (is-idle): Sie erscheint genau\n    // beim Wischen, und ein Daumen-Wischer, der zuf\u00e4llig auf ihr begann, sprang sonst zu einem anderen Abschnitt.\n    let hideT = 0, idleT = 0, picking = false;\n    const show = () => {\n      if (!LITE) return;\n      nav.classList.add('is-shown');\n      nav.classList.remove('is-idle');\n      clearTimeout(hideT); clearTimeout(idleT);\n      idleT = setTimeout(() => nav.classList.add('is-idle'), 350);\n      hideT = setTimeout(() => { if (!picking) nav.classList.remove('is-shown', 'is-idle'); }, 1900);\n    };\n    let lastY = 0;\n    onScroll(() => {\n      req();\n      const y = lenis ? lenis.scroll : scrollY;\n      if (Math.abs(y - lastY) > 3 && !root.classList.contains('is-loading')) show();   // nur bei echtem Scrollen\n      lastY = y;\n    });\n\n    // Mit dem Finger abfahren: der Punkt unter dem Finger zeigt seinen Namen, Loslassen springt\n    let pick = null, sx = 0, sy = 0, t0 = 0;\n    const pickAt = y => {\n      let best = null, bd = Infinity;\n      for (const it of items) {\n        const r = it.btn.getBoundingClientRect();\n        const d = Math.abs(r.top + r.height / 2 - y);\n        if (d < bd) { bd = d; best = it; }\n      }\n      if (best === pick) return;\n      pick?.btn.classList.remove('is-pick');\n      pick = best;\n      pick.btn.classList.add('is-pick');\n      KL.sound?.tick();\n    };\n    nav.addEventListener('pointerdown', e => {\n      if (e.pointerType === 'mouse') return;\n      picking = true;\n      sx = e.clientX; sy = e.clientY; t0 = performance.now();\n      clearTimeout(hideT);\n      nav.classList.add('is-touch', 'is-shown');\n      try { nav.setPointerCapture(e.pointerId); } catch (err) { /* \u00e4ltere Browser */ }\n      pickAt(e.clientY);\n    });\n    nav.addEventListener('pointermove', e => { if (picking) pickAt(e.clientY); });\n    const end = e => {\n      if (!picking) return;\n      picking = false;\n      lastTouch = performance.now();\n      nav.classList.remove('is-touch');\n      const it = pick;\n      pick?.btn.classList.remove('is-pick');\n      pick = null;\n      // Wer eigentlich ein Karussell wischen wollte (waagerecht) oder schnell senkrecht gewischt hat (Scrollen, kein\n      // Abfahren der Punkte), springt nicht weg\n      const dx = Math.abs(e.clientX - sx), dy = Math.abs(e.clientY - sy), flick = performance.now() - t0 < 250 && dy > 30;\n      if (e.type === 'pointerup' && !(dx > 24 && dx > dy) && !flick) jump(it);\n      show();\n    };\n    nav.addEventListener('pointerup', end);\n    nav.addEventListener('pointercancel', end);\n  }\n\n  /* ==========================================================================\n     \u00dcBERSPRINGEN: In langen, gepinnten Abschnitten erscheint unten ein Knopf,\n     der direkt zum n\u00e4chsten Abschnitt f\u00e4hrt (f\u00fcr alle, denen das zu viel ist).\n     ========================================================================== */\n  function initSkip() {\n    const btn = $('.skip');\n    if (!btn) return;\n    const nameEl = $('[data-skip-name]', btn), prog = $('.skip__prog', btn);\n    const pinOf = el => ScrollTrigger.getAll().find(st => st.pin === el);\n    const cards = $$('.card');\n    const defs = [\n      { el: $('.retreat'), name: 'Drohnenflug', next: '.raum' },\n      { el: $('.raum'), name: 'Raumkonzepte', next: '.green', at: 'raum' },\n      { el: $('.green__pin'), name: 'Bl\u00e4tterdach', next: '.green__text' },   // hie\u00df \u201eIntro\u201c wie der Preloader-Knopf\n      { el: cards[0], name: 'Karten', next: '.projekt', last: cards[cards.length - 1] },\n      { el: $('.projekt'), name: 'Bauabschnitte', next: '.lage', at: 'projekt' },\n      { el: $('.lage'), name: 'Karte', next: '.kiez' },\n      { el: $('.history'), name: 'Geschichte', next: '.trail' },\n      { el: $('.film'), name: 'Film', next: '.news' }\n    ].filter(d => d.el && $(d.next));\n    const range = d => {\n      const a = pinOf(d.el), b = d.last ? pinOf(d.last) : a;\n      return a && b ? { start: a.start, end: Math.max(a.end, b.end) } : null;\n    };\n\n    // Helle Pille auf dunklen Abschnitten, dunkle auf hellen (data-nav=\"light\" = dunkler Hintergrund)\n    const themeBelow = () => {\n      const e = edgeAt(innerHeight - 30);\n      if (e) return e === 'light' ? 'light' : 'dark';\n      for (const el of document.elementsFromPoint(innerWidth / 2, innerHeight - 30)) {\n        if (el.closest('.skip')) continue;\n        const s = el.closest('[data-nav]');\n        if (s) return s.dataset.nav === 'light' ? 'light' : 'dark';\n      }\n      return '';\n    };\n\n    let current = null, skipping = false;\n    const show = d => {\n      if (d === current) return;\n      current = d;\n      btn.classList.toggle('is-on', !!d);\n      btn.tabIndex = d ? 0 : -1;\n      btn.setAttribute('aria-hidden', d ? 'false' : 'true');\n      if (!d) return;\n      nameEl.textContent = d.name;\n      btn.setAttribute('aria-label', d.name + ' \u00fcberspringen');\n      if (d.at) btn.dataset.at = d.at; else delete btn.dataset.at;\n    };\n    const update = () => {\n      if (root.classList.contains('is-loading')) return;\n      if (skipping) { show(null); return; }   // w\u00e4hrend des eigenen Sprungs nicht wieder einblenden\n      const y = lenis ? lenis.scroll : scrollY;\n      let hit = null, p = 0;\n      for (const d of defs) {\n        const r = range(d);\n        if (!r) continue;\n        const len = Math.max(1, r.end - r.start);\n        const t = (y - r.start) / len;\n        if (t > 0.03 && t < 0.9) { hit = d; p = t; break; }\n      }\n      show(hit);\n      if (!hit) return;\n      prog.style.strokeDashoffset = String(100 - p * 100);\n      const th = themeBelow();\n      if (th && btn.dataset.theme !== th) btn.dataset.theme = th;\n    };\n    let queued = false;\n    const req = () => { if (queued) return; queued = true; requestAnimationFrame(() => { queued = false; update(); }); };\n    onScroll(req);\n    addEventListener('resize', req);\n\n    btn.addEventListener('click', e => {\n      const d = current;\n      if (!d) return;\n      const next = $(d.next);\n      const y = targetY(next);\n      const from = lenis ? lenis.scroll : scrollY;\n      KL.sound?.whoosh({ dur: 0.9, from: 900, peak: 2600, to: 300 });\n      show(null);\n      skipping = true;\n      setTimeout(() => { skipping = false; }, 2200);   // R\u00fcckfall, falls onComplete nicht kommt\n      const done = () => {\n        skipping = false;\n        // Fokus in den neuen Abschnitt (der Knopf verschwindet, der Fokus fiele sonst auf die Seite zur\u00fcck)\n        focusIn(next);\n      };\n      if (lenis) lenis.scrollTo(y, { duration: clamp(0.8, 1.6, 0.55 + Math.abs(y - from) / 5000), easing: t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2), onComplete: done });\n      else { scrollTo({ top: y, behavior: REDUCED ? 'auto' : 'smooth' }); setTimeout(done, 900); }\n    });\n  }\n\n  /* ==========================================================================\n     WEBGL-BILDER: Scroll-Tempo messen und an die Shader geben\n     ========================================================================== */\n  function initGLFX() {\n    if (REDUCED || TOUCH || !KL.gl) return;\n    fx = KL.gl.createFX({ mobile: mobile() });\n    if (!fx) return;\n    root.classList.add('has-gl');\n    $$('[data-gl]').forEach(el => fx.add(el, { horizontal: el.dataset.gl === 'x' }));\n  }\n  function initMotion() {\n    let lastY = scrollY;\n    gsap.ticker.add((time, dt) => {\n      const y = scrollY;\n      const raw = ((y - lastY) / Math.max(1, dt)) * 16.67;   // px pro 60-fps-Frame\n      lastY = y;\n      velocity += (clamp(-1, 1, raw / 55) - velocity) * 0.14;\n      if (Math.abs(velocity) < 0.0005) velocity = 0;\n      if (fx) fx.update(velocity, time);\n    });\n    // Drohnenflug-Texturen im Leerlauf vorbereiten, bevor jemand dort ankommt\n    const idle = window.requestIdleCallback || (cb => setTimeout(cb, 1500));\n    idle(() => dive?.prepare(), { timeout: 5000 });\n  }\n\n  /* ==========================================================================\n     WURZELN: wachsen beim Scrollen durch die ganze Seite\n     Jeder Abschnitt bekommt ein eigenes Segment im linken Rand; die Segmente\n     schlie\u00dfen nahtlos aneinander an und treffen die Blatt-Icons der Kicker.\n     ========================================================================== */\n  function initRoots() {\n    if (REDUCED) return;\n    const NS = 'http://www.w3.org/2000/svg';\n    // .film fehlte seit v32 (Wurzel riss \u00fcber den ganzen Film-Abschnitt ab); dort direkt hinter .film__media, per CSS\n    // \u00fcber der Schrift-Maske und unter dem Text\n    const list = [['.intro'], ['.stats'], ['.bands'], ['.retreat'], ['.raum'], ['.green'], ['.projekt'], ['.lage', '.lage__veil'], ['.kiez'], ['.history'], ['.trail'], ['.film', '.film__media'], ['.news'], ['.kontakt']]\n      .map(([sel, after]) => ({ sec: $(sel), after: after ? $(after) : null }))\n      .filter(o => o.sec);\n    const seeded = seed => () => {\n      seed = (seed + 0x6D2B79F5) | 0;\n      let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n    };\n    const f = n => n.toFixed(1);\n    const smoothPath = pts => {\n      let d = `M${f(pts[0][0])},${f(pts[0][1])}`;\n      for (let i = 0; i < pts.length - 1; i++) {\n        const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;\n        d += ` C${f(p1[0] + (p2[0] - p0[0]) / 6)},${f(p1[1] + (p2[1] - p0[1]) / 6)} ${f(p2[0] - (p3[0] - p1[0]) / 6)},${f(p2[1] - (p3[1] - p1[1]) / 6)} ${f(p2[0])},${f(p2[1])}`;\n      }\n      return d;\n    };\n    const el = (tag, attrs) => { const n = document.createElementNS(NS, tag); Object.entries(attrs).forEach(([k, v]) => n.setAttribute(k, v)); return n; };\n    let built = [];\n\n    const build = () => {\n      built.forEach(b => { b.tl.scrollTrigger?.kill(); b.tl.kill(); b.svg.remove(); });\n      built = [];\n      const gutter = clamp(16, 56, innerWidth * 0.032);\n      const x0 = gutter * 0.5;\n      const reach = mobile() ? gutter * 0.8 : Math.min(150, gutter * 2.8);\n      const vh = innerHeight;\n      list.forEach(({ sec, after }, si) => {\n        const H = sec.offsetHeight;\n        if (H < 60) return;\n        const rnd = seeded(97 + si * 131);\n        const W = Math.ceil(x0 + reach + 40);\n        const svg = el('svg', { class: 'roots', width: W, height: H, viewBox: `0 0 ${W} ${H}`, 'aria-hidden': 'true' });\n        // Hauptwurzel. Die letzten 120 px laufen senkrecht auf der Linie x0: Dort schiebt sich die Welle des n\u00e4chsten\n        // Abschnitts dar\u00fcber, und deren Wurzelst\u00fcck (senkrecht bei x0) setzt genau am sichtbaren Ende an. Vorher lag die\n        // Wurzel dort bis zu ~7 px neben der Linie (Grenze Raumkonzept \u2192 Nachhaltigkeit: 16 statt 22 px).\n        const raw = [[x0, 0]];\n        for (let y = 150; y < H - 80; y += 150) raw.push([x0 + (rnd() - 0.5) * gutter * 0.6, y + (rnd() - 0.5) * 40]);\n        const pts = raw.filter((q, k) => k === 0 || q[1] <= H - 170);\n        if (H > 240) pts.push([x0, H - 120]);\n        pts.push([x0, H]);\n        const main = el('path', { class: 'r-main', d: smoothPath(pts) });\n        svg.appendChild(main);\n        // Seitenwurzeln: feine Ranken, die im Rand bleiben (kein Text wird \u00fcberdeckt); sie wachsen nur aus Punkten der\n        // geschwungenen Strecke, nicht aus dem senkrechten Ende\n        const parts = [];\n        const nb = Math.max(1, Math.round(H / (mobile() ? 700 : 380)));\n        const bases = pts.slice(1, H > 240 ? -2 : -1);\n        for (let b = 0; b < nb; b++) {\n          const [bx, by] = bases[Math.floor(rnd() * Math.max(1, bases.length))] || pts[0];\n          const ex = clamp(1.5, gutter - 3, bx + (rnd() - 0.35) * gutter * 0.9);\n          const drop = 60 + rnd() * 140;\n          const ey = by + drop;\n          const bend = (rnd() - 0.5) * gutter * 0.5;\n          svg.appendChild(el('path', { class: 'r-branch', d: `M${f(bx)},${f(by)} C${f(bx + bend)},${f(by + drop * 0.35)} ${f(ex - bend)},${f(ey - drop * 0.45)} ${f(ex)},${f(ey)}` }));\n          parts.push({ node: svg.lastChild, t: by / H, len: 0.14 });\n          if (rnd() < 0.55) {\n            const sy = by + drop * 0.5, sx = (bx + ex) / 2, tx = clamp(1.5, gutter - 3, sx + (rnd() - 0.5) * gutter * 0.6), ty = sy + 40 + rnd() * 50;\n            svg.appendChild(el('path', { class: 'r-branch', d: `M${f(sx)},${f(sy)} Q${f((sx + tx) / 2 + (rnd() - 0.5) * 8)},${f((sy + ty) / 2)} ${f(tx)},${f(ty)}` }));\n            parts.push({ node: svg.lastChild, t: sy / H, len: 0.08 });\n          }\n        }\n        // Verbindung zum Blatt-Icon des Kickers\n        const kicker = sec.querySelector('.kicker');\n        if (kicker) {\n          const kr = kicker.getBoundingClientRect(), sr = sec.getBoundingClientRect();\n          const ky = kr.top - sr.top + kr.height / 2, kx = kr.left - sr.left - 7;\n          if (kx > x0 + 4 && kx < W && ky > 0 && ky < H) {\n            const sy = Math.max(0, ky - 70);\n            svg.appendChild(el('path', { class: 'r-branch', d: `M${f(x0)},${f(sy)} C${f(x0)},${f(sy + 45)} ${f(kx - 24)},${f(ky)} ${f(kx)},${f(ky)}` }));\n            parts.push({ node: svg.lastChild, t: sy / H, len: 0.1 });\n            svg.appendChild(el('circle', { class: 'r-node', cx: f(kx), cy: f(ky), r: 3.2 }));\n            parts.push({ node: svg.lastChild, t: sy / H + 0.08, dot: true });\n          }\n        }\n        if (after) after.after(svg); else sec.prepend(svg);\n\n        // Wachstum an den Scroll koppeln: Die Spitze steht immer auf 65 % der Bildh\u00f6he. Gepinnte Abschnitte wachsen beim\n        // Hereinscrollen genauso bis dorthin (65 % ihrer H\u00f6he) und erst den Rest \u00fcber die Pin-Dauer. Vorher verteilte sich\n        // alles gleichm\u00e4\u00dfig \u00fcber den oft sehr langen Pin, an jeder Grenze zu einem gepinnten Abschnitt endete die\n        // Wurzel (Kumpel: \u201ebei \u00dcberg\u00e4ngen abgeschnitten\u201c, 27.09.)\n        const pinST = ScrollTrigger.getAll().find(st => st.pin === sec);\n        const tl = gsap.timeline({\n          scrollTrigger: pinST\n            ? { trigger: sec, start: () => pinST.start - vh * 0.65, end: () => pinST.end + vh * 0.35, scrub: true }\n            : { trigger: sec, start: 'top 65%', end: 'bottom 65%', scrub: true }\n        });\n        const lead = pinST ? clamp(0.02, 0.9, vh * 0.65 / Math.max(1, pinST.end - pinST.start + vh)) : 0;\n        const when = t => !pinST ? t : (t <= 0.65 ? t / 0.65 * lead : lead + (t - 0.65) / 0.35 * (1 - lead));\n        const pace = t => !pinST ? 1 : (t <= 0.65 ? lead / 0.65 : (1 - lead) / 0.35);   // Zweige im selben Tempo wie die Hauptwurzel\n        if (pinST) tl.fromTo(main, { drawSVG: '0%' }, { drawSVG: '0% 65%', ease: 'none', duration: lead }, 0).to(main, { drawSVG: '0% 100%', ease: 'none', duration: 1 - lead }, lead);\n        else tl.fromTo(main, { drawSVG: '0%' }, { drawSVG: '100%', ease: 'none', duration: 1 }, 0);\n        parts.forEach(p => {\n          const at = Math.min(0.95, when(p.t)), k = pace(p.t);\n          if (p.dot) tl.fromTo(p.node, { scale: 0, transformOrigin: '50% 50%' }, { scale: 1, ease: 'back.out(4)', duration: 0.05 * k }, at);\n          else tl.fromTo(p.node, { drawSVG: '0%' }, { drawSVG: '100%', ease: 'power1.out', duration: p.len * k }, at);\n        });\n        built.push({ svg, tl });\n      });\n    };\n    build();\n    // Nur neu aufbauen, wenn sich die Seitenh\u00f6he nach dem Laden wirklich ge\u00e4ndert hat\n    const h0 = document.documentElement.scrollHeight;\n    if (document.readyState !== 'complete') addEventListener('load', () => { if (Math.abs(document.documentElement.scrollHeight - h0) > 2) { build(); ScrollTrigger.refresh(); } }, { once: true });\n    addEventListener('kl:relayout', build);   // Seitenh\u00f6he hat sich nach dem Start ge\u00e4ndert (siehe unten)\n    // Neu aufbauen bei echten Breiten\u00e4nderungen; am Desktop auch bei reiner H\u00f6hen\u00e4nderung (Fenster aufziehen): Die\n    // 65-%-Linie, die Pin-L\u00e4ngen und die Abschnittsh\u00f6hen h\u00e4ngen an der Fensterh\u00f6he, die Wurzel lief sonst versetzt.\n    // Touch-Ger\u00e4te nicht: Dort \u00e4ndert die Adressleiste beim Scrollen st\u00e4ndig die H\u00f6he.\n    let rt, lastW = innerWidth, lastH = innerHeight;\n    addEventListener('resize', () => {\n      if (innerWidth === lastW && (TOUCH || innerHeight === lastH)) return;\n      lastW = innerWidth; lastH = innerHeight;\n      clearTimeout(rt);\n      rt = setTimeout(() => { build(); ScrollTrigger.refresh(); }, 450);\n    });\n  }\n\n  /* ==========================================================================\n     BL\u00dcTEN-CURSOR: Die Maus verliert Bl\u00fctenbl\u00e4tter mit Schwerkraft\n     ========================================================================== */\n  function initPetals() {\n    if (REDUCED || TOUCH) return;\n    const cv = document.createElement('canvas');\n    cv.className = 'petals';\n    cv.setAttribute('aria-hidden', 'true');\n    document.body.appendChild(cv);\n    const c = cv.getContext('2d');\n    let W = 0, H = 0;\n    const resize = () => {\n      const dpr = Math.min(window.devicePixelRatio || 1, 2);\n      W = innerWidth; H = innerHeight;\n      cv.width = W * dpr; cv.height = H * dpr;\n      c.setTransform(dpr, 0, 0, dpr, 0, 0);\n    };\n    resize();\n    addEventListener('resize', resize);\n    const shapes = ['leaf', 'flower', 'logo', 'leaf2', 'tulip-sm', 'snail'].map(id => ({\n      w: SHAPES[id][0], h: SHAPES[id][1],\n      paths: $$(`#s-${id} path`).map(p => new Path2D(p.getAttribute('d')))\n    }));\n    const palettes = { dark: ['#003049', '#C1111F', '#669BBC'], light: ['#FAF5ED', '#669BBC', '#C1111F'] };\n    const parts = [];\n    let theme = 'dark', running = false, last = null, acc = 0;\n    // Menge der Bl\u00fctenbl\u00e4tter (auf Wunsch halbiert): ein Blatt pro 88 px Mausweg, 5 pro Klick, h\u00f6chstens 55 gleichzeitig\n    const STEP = 88, BURST = 5, MAX = 55;\n\n    document.addEventListener('pointerover', e => {\n      const s = e.target.closest && e.target.closest('[data-nav], [data-theme]');\n      if (s) theme = s.dataset.nav || s.dataset.theme || theme;\n    });\n    const spawn = (x, y, vx, vy) => {\n      if (parts.length > MAX) parts.shift();\n      const pal = palettes[theme] || palettes.dark;\n      parts.push({\n        x, y, vx, vy, r: rand(0, 6.28), vr: rand(-0.09, 0.09), s: rand(11, 21), life: 0, max: rand(1.2, 2.2), wob: rand(0, 6.28),\n        shape: shapes[Math.floor(Math.random() * shapes.length)], color: pal[Math.floor(Math.random() * pal.length)]\n      });\n      if (!running) { running = true; gsap.ticker.add(frame); }\n    };\n    const blocked = t => t.closest && t.closest('input, textarea, .footer__world, .menu');\n    addEventListener('pointermove', e => {\n      if (e.pointerType !== 'mouse' || blocked(e.target)) { last = null; return; }\n      if (!last) { last = { x: e.clientX, y: e.clientY }; return; }\n      const dx = e.clientX - last.x, dy = e.clientY - last.y;\n      acc += Math.hypot(dx, dy);\n      last = { x: e.clientX, y: e.clientY };\n      while (acc > STEP) { acc -= STEP; spawn(e.clientX, e.clientY, dx * 0.05 + rand(-0.6, 0.6), dy * 0.05 + rand(-1.6, -0.4)); }\n    }, { passive: true });\n    addEventListener('pointerdown', e => {\n      if (e.pointerType !== 'mouse' || blocked(e.target)) return;\n      for (let i = 0; i < BURST; i++) {\n        const a = rand(0, Math.PI * 2), v = rand(1.5, 4.2);\n        spawn(e.clientX, e.clientY, Math.cos(a) * v, Math.sin(a) * v - 1.5);\n      }\n    });\n    function frame(time, dt) {\n      const k = Math.min(dt, 50) / 16.67;\n      c.clearRect(0, 0, W, H);\n      for (let i = parts.length - 1; i >= 0; i--) {\n        const p = parts[i];\n        p.life += dt / 1000;\n        if (p.life > p.max) { parts.splice(i, 1); continue; }\n        p.vy += 0.07 * k;\n        p.vx *= Math.pow(0.985, k);\n        p.x += (p.vx + Math.sin(p.life * 3.2 + p.wob) * 0.45) * k;\n        p.y += p.vy * k;\n        p.r += p.vr * k;\n        const sc = (p.s / Math.max(p.shape.w, p.shape.h)) * Math.min(1, p.life * 8);\n        c.save();\n        c.globalAlpha = 1 - Math.pow(p.life / p.max, 2);\n        c.translate(p.x, p.y);\n        c.rotate(p.r);\n        c.scale(sc, sc);\n        c.translate(-p.shape.w / 2, -p.shape.h / 2);\n        c.fillStyle = p.color;\n        p.shape.paths.forEach(path => c.fill(path));\n        c.restore();\n      }\n      if (!parts.length) { running = false; gsap.ticker.remove(frame); c.clearRect(0, 0, W, H); }\n    }\n  }\n\n  /* ==========================================================================\n     SOUND: Schalter in der Navigation + Natur-Atmosph\u00e4re in den gr\u00fcnen Abschnitten\n     ========================================================================== */\n  function initSound() {\n    const btn = $('.nav__sound');\n    const S = KL.sound;\n    if (!btn) return;\n    if (!S || !S.supported) { btn.remove(); return; }\n    const setUI = on => {\n      btn.classList.toggle('is-on', on);\n      btn.setAttribute('aria-pressed', String(on));\n      btn.setAttribute('aria-label', on ? 'Sound ausschalten' : 'Sound einschalten');\n    };\n    btn.addEventListener('click', () => { btn.classList.remove('is-hint'); setUI(!!S.toggle()); });\n    if (!REDUCED) {\n      setTimeout(() => { if (!S.enabled) btn.classList.add('is-hint'); }, 4200);\n      setTimeout(() => btn.classList.remove('is-hint'), 9400);\n    }\n    document.addEventListener('pointerover', e => { if (e.target.closest && e.target.closest('a, button, [data-magnetic]')) S.tick(); });\n    document.addEventListener('click', e => { if (e.target.closest && e.target.closest('a, button') && !e.target.closest('.nav__sound')) S.click(); });\n    const active = new Set();\n    ['.intro', '.green', '.kiez', '.trail'].forEach(sel => ScrollTrigger.create({\n      trigger: sel, start: 'top 70%', end: 'bottom 30%',\n      onToggle: self => { if (self.isActive) active.add(sel); else active.delete(sel); S.setNature(active.size ? 1 : 0); }\n    }));\n  }\n\n  /* ---------- Fonts abwarten (f\u00fcr saubere Splits) ---------- */\n  function fontsReady() {\n    if (!document.fonts || !document.fonts.load) return Promise.resolve();\n    const load = Promise.all([\n      document.fonts.load('400 1em \"Daily Spark Sans\"'),\n      document.fonts.load('500 1em \"Inter Tight\"'),\n      document.fonts.load('600 1em \"Inter Tight\"')\n    ]).then(() => document.fonts.ready).catch(() => {});\n    return Promise.race([load, new Promise(r => setTimeout(r, 3500))]);\n  }\n\n  /* ==========================================================================\n     START\n     ========================================================================== */\n  async function init() {\n    // Solange der Preloader l\u00e4uft, oben bleiben: Stellte der Browser die alte Position doch noch her (Chrome nach\n    // \u201eload\u201c), lief der Preloader \u00fcber einem Abschnitt weiter unten und dessen Einblendungen spielten dahinter ab.\n    // capture: l\u00e4uft vor ScrollTrigger (lauscht am document), sonst w\u00e4ren Einblendungen dort schon ausgel\u00f6st.\n    // Hat der Notausgang im Kopf schon aufgegeben (Seite ohne Script sichtbar), nichts mehr verschieben, aber die\n    // Preloader-Reste sofort entfernen statt erst nach dem ganzen Aufbau (sonst standen Flipbook und \u201eIntro \u00fcberspringen\u201c\n    // \u00fcber dem offenen Hero).\n    if (!root.classList.contains('is-loading')) { $('.loader')?.remove(); $('.hero__flip')?.remove(); }\n    if (root.classList.contains('is-loading')) {\n      scrollTo(0, 0);\n      const keepTop = () => {\n        if (!root.classList.contains('is-loading')) removeEventListener('scroll', keepTop, true);\n        else if (scrollY !== 0) scrollTo(0, 0);\n      };\n      addEventListener('scroll', keepTop, { passive: true, capture: true });\n    }\n    safe('avif', avifFallback);   // vor dem Preloader: drei seiner Bilder sind AVIF\n    initLenis();\n    lenis?.stop();\n    safe('rolls', initRolls);\n    safe('cursor', initCursor);\n    safe('magnetic', initMagnetic);\n    safe('menu', initMenu);\n    safe('anchors', initAnchors);\n    safe('sound', initSound);\n    safe('petals', initPetals);\n\n    await fontsReady();\n\n    safe('umlauts', markUmlauts);   // vor allen SplitText-Zerlegungen\n    safe('edges', initEdges);   // vor den Pins: die Wellen m\u00fcssen vor den Pin-Spacern im DOM stehen\n    safe('glfx', initGLFX);\n    safe('hero', initHero);\n    safe('sky', initSky);\n    const intro = REDUCED ? null : safe('heroIntro', heroIntro);\n    safe('intro', initIntro);\n    safe('stats', initStats);\n    safe('bands', initBands);\n    safe('retreat', initRetreat);\n    safe('raum', initRaum);\n    safe('green', initGreen);\n    safe('projekt', initProjekt);\n    safe('lage', initLage);\n    safe('kiez', initKiez);\n    safe('history', initHistory);\n    safe('trail', initTrail);\n    safe('film', initFilm);\n    safe('lightbox', initLightbox);\n    safe('news', initNews);\n    safe('kontakt', initKontakt);\n    safe('footer', initFooter);\n    safe('chrome', initChrome);\n    safe('secnav', initSecnav);\n    safe('skip', initSkip);\n\n    ScrollTrigger.refresh();\n    safe('roots', initRoots);\n    ScrollTrigger.refresh();\n    // Klappt am Handy (quer) oder Android-Tablet die Browserleiste beim Scrollen ein, wird das Fenster h\u00f6her, ohne dass\n    // ScrollTrigger neu rechnet (ignoreMobileResize): Unter hellen gepinnten Abschnitten lag dann ein Streifen im Navy\n    // des Seitenhintergrunds. Der Platzhalter um jeden Pin bekommt deshalb die Farbe seines Abschnitts.\n    // Nicht beim Hero: Sein Platzhalter lag im Preloader hellblau um das beschnittene Fenster statt Navy (v37\u2013v39, vom\n    // Kumpel gemeldet als \u201eIntro l\u00e4dt nicht\u201c); oben auf der Seite gibt es den Streifen ohnehin nicht.\n    ScrollTrigger.getAll().forEach(st => {\n      const sp = st.pin && st.pin.parentElement;\n      if (sp && sp.classList.contains('pin-spacer') && !st.pin.classList.contains('hero')) sp.style.backgroundColor = getComputedStyle(st.pin).backgroundColor;\n    });\n    safe('motion', initMotion);\n    deepLink = hashTarget();\n    await runLoader(intro);\n    // Karlshorst live: ein paar Sekunden das echte Jetzt zeigen, dann in den Zeitraffer \u00fcbergehen\n    if (heroSky && HERO_MODE === 'start') setTimeout(() => heroSky.release(), 4500);\n    ScrollTrigger.refresh();\n    // Sprungmarke in der Adresse: Die Seite landete oben (Scroll-Wiederherstellung ist aus, der Preloader h\u00e4lt oben).\n    // Noch vor dem ersten Bild springen, die Seite ist bis hierher unsichtbar.\n    if (deepLink) { jumpNow(deepLink); focusIn(deepLink); }\n    initialHeight = document.documentElement.scrollHeight;\n    // Handy-Fassung: Die Abschnitte wachsen mit ihrem Inhalt. Kommen Schrift oder Bilder erst sp\u00e4ter an, rutscht alles\n    // darunter \u2013 dann Wurzeln und Scroll-Punkte neu berechnen, sonst starten Animationen an der falschen Stelle.\n    if (LITE && window.ResizeObserver) {\n      let last = initialHeight, rt;\n      new ResizeObserver(() => {\n        const h = document.documentElement.scrollHeight;\n        if (Math.abs(h - last) < 3) return;\n        last = h;\n        clearTimeout(rt);\n        rt = setTimeout(() => { dispatchEvent(new Event('kl:relayout')); ScrollTrigger.refresh(); }, 250);\n      }).observe(document.body);\n    }\n  }\n\n  // Refresh nach dem Laden nur, wenn sich das Layout verschoben hat (vermeidet sichtbares Nachspringen der Scrub-Animationen)\n  addEventListener('load', () => { if (!initialHeight || Math.abs(document.documentElement.scrollHeight - initialHeight) > 2) ScrollTrigger.refresh(); });\n\n  // Kleine Debug-Hilfe f\u00fcr die Konsole: KL.debug.dive, KL.debug.fx, KL.debug.velocity, KL.debug.sky\n  KL.debug = { get dive() { return dive; }, get fx() { return fx; }, get velocity() { return velocity; }, get lenis() { return lenis; }, get sky() { return heroSky; }, get film() { return filmDebug; }, get lage() { return lageDebug; }, get history() { return historyDebug; } };\n\n  // Bricht der Aufbau mit einem Fehler ab, die Seite sofort zeigen statt bis zum Notausgang Navy\n  const boot = () => init().catch(err => {\n    console.error('[Karls Living] Start', err);\n    $('.loader')?.remove();\n    $('.hero__flip')?.remove();\n    root.classList.remove('is-loading', 'is-locked');\n  });\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);\n  else boot();\n})();\n"}]}