@layer animation{
.szene{--fortschritt:0;view-timeline-name:--szene;view-timeline-axis:block;position:relative}.werkbild{margin:var(--s24) 0;min-width:0;background:#14181b;color:#fbfaf7;border:1px solid #526067;position:relative}.zeichnung{padding:clamp(.75rem,2vw,2rem);overflow:hidden;aspect-ratio:640/470;display:grid;align-items:center;background-image:linear-gradient(90deg,#c9d0d30d 1px,transparent 1px);background-size:96px 100%}.zeichnung svg{width:100%;height:auto;overflow:visible}.werkbild figcaption{position:relative;padding:1rem 1.25rem;border-top:1px solid #526067;font-size:.875rem;line-height:1.45;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;color:#c9d0d3}.werkbild text,.hero-art text{font-family:var(--schrift);font-size:17px;fill:#c9d0d3;letter-spacing:.05em}.werkbild .svg-meta,.hero-art .svg-meta{font-size:14px;letter-spacing:.1em}.werkbild .svg-kern{font-size:22px}.strich,.kontur,.fuehrung,.fein{fill:none;stroke:#8c979c;stroke-width:1.2;vector-effect:non-scaling-stroke}.kontur{stroke:#c9d0d3;stroke-width:1.8}.fein{stroke:#526067;stroke-width:.8}.fuehrung{stroke:#c9d0d3;stroke-width:1;stroke-dasharray:3 5}.metall{fill:#3a474e;stroke:#8c979c;stroke-width:1}.holz{fill:#73563f;stroke:#a58a71;stroke-width:1}.daemmung{fill:#6d7767;stroke:#b4bba4;stroke-width:1}.folie{fill:#273d43;stroke:#7b9aa0;stroke-width:1}.glas{fill:#385e70;stroke:#8ec0d0;stroke-width:1.5}.szenen-medium{min-width:0}.foto-archiv{font-size:var(--text-klein);margin-top:var(--s16)}.foto-archiv .platzhalter-foto{min-height:180px}.foto-archiv summary{color:var(--sekundaer)}.redaktion>.werkbild{grid-column:1/-1;grid-row:auto;max-width:960px;width:100%}.redaktion.szene h2{position:static;grid-row:auto}
.deckung-raster{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;aspect-ratio:1.35;padding:2.5rem 2rem;overflow:hidden;clip-path:polygon(0 0,calc(100% - 96px) 0,100% 59.9875px,100% 100%,0 100%)}.dachbahn{display:block;position:relative;background:#3b484f;border-left:2px solid #aab5b8;border-bottom:1px solid #14181b}.dachbahn::after{content:'';position:absolute;inset:0 4px 0 auto;width:1px;background:#526067}.dachbahn:nth-child(3n){background:#46535a}.schicht-auswahl{padding:var(--s16) var(--s24);display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}.schicht-auswahl details{font-size:.875rem;border-color:#526067}.schicht-auswahl summary{font-weight:500}.schicht-auswahl p{font-size:1rem;color:#c9d0d3}.schicht-auswahl :focus-visible{outline-color:var(--signal)}.schicht-auswahl details[open]{grid-column:1/-1}.werkbild [data-lage][data-auswahl]{opacity:1!important}.werkbild:has(details[open]) [data-lage]:not([data-auswahl]){opacity:.25!important}.wasser-weg{fill:none;stroke:#8ec0d0;stroke-width:4;stroke-linecap:round}.ablaufband{list-style:none;display:grid;grid-template-columns:1fr;margin:0;padding:0;counter-reset:ablauf}.ablaufband li{border-top:1px solid #526067;padding:1rem 1.25rem;counter-increment:ablauf;font-size:.875rem}.ablaufband li::before{content:'0' counter(ablauf) ' / ';color:#8c979c}.blech-profil{fill:none;stroke:#b5c0c4;stroke-width:9;stroke-linejoin:round}.werkbild [data-faltung]{opacity:0}.werkbild [data-faltung="3"]{opacity:1}.pflanzen-stiel{fill:none;stroke:#a4c6b4;stroke-width:3}.pflanzen-blatt{fill:#58846d;stroke:#a4c6b4;stroke-width:1}.waerme-balken{stroke:#f2f0eb;stroke-width:15}.signal-strich{fill:none;stroke:var(--signal);stroke-width:3}.leiter-holm{stroke:#8c979c;stroke-width:7;fill:none}.leiter-sprosse{stroke:#c9d0d3;stroke-width:6;fill:none}.kartenraster{fill:none;stroke:#526067;stroke-width:.5}.ortspunkt{fill:#c9d0d3}.route-linie{fill:none;stroke:#a4c6b4;stroke-width:3}
.objekt-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s40)}.objekt-filter button{padding:.6rem 1rem;min-height:44px;border:1px solid var(--linie);background:var(--flaeche);color:var(--text);font-size:.875rem}.objekt-filter button[aria-pressed=true]{border-bottom:3px solid var(--signal);background:var(--schiefer);color:var(--papier)}[data-szene-modul=die-objektwand] .karte:nth-child(3n+2){min-height:280px}[data-szene-modul=die-objektwand] .karte{align-self:start}.filter-meldung{margin-top:var(--s24);min-height:1.6em}.vergleich{position:relative;aspect-ratio:2.2;background:var(--schiefer);color:var(--papier);overflow:hidden;border:1px solid var(--linie);margin-bottom:var(--s16);--anteil:50%}.vergleich-vorher,.vergleich-nachher{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;background:repeating-linear-gradient(90deg,#232a2f 0 95px,#526067 95px 96px)}.vergleich-vorher{place-items:center start}.vergleich-nachher{background:#3a474e;place-items:center end;clip-path:inset(0 0 0 var(--anteil))}.vergleich-label{font-size:.875rem;margin-bottom:var(--s40)}.vergleich-label input{display:block}
.chronik-jahr{font-family:var(--display);font-size:clamp(4rem,13vw,12rem);line-height:1;letter-spacing:-.065em;color:var(--akzent);margin-bottom:var(--s40)}.chronik-jahr small{display:block;letter-spacing:0;font-family:var(--schrift);margin-top:var(--s16);color:var(--sekundaer)}.timeline{border-left:1px solid var(--linie);padding-left:var(--s40)}.timeline article{padding-bottom:var(--s64);position:relative}.timeline article::before{content:'';position:absolute;left:calc(-1*var(--s40) - 2px);top:.4rem;width:3px;height:24px;background:var(--signal)}.timeline h2{font-size:clamp(1.75rem,3vw,3rem)}.portraet-rahmen{aspect-ratio:4/3;display:grid;place-items:center;background:var(--schiefer);color:#c9d0d3;margin-bottom:var(--s24);border-left:3px solid #8c979c;clip-path:var(--falz)}.portraet-rahmen span{font-size:.875rem}.karte:has(.portraet-rahmen):hover .portraet-rahmen{border-color:var(--signal)}.siegel-zeichen{width:96px;margin-bottom:var(--s24)}.siegel-zeichen .kontur{stroke:var(--akzent)}
.aufmass-rahmen{position:absolute;inset:0;pointer-events:none}.aufmass-rahmen i{position:absolute;background:var(--akzent)}.aufmass-rahmen i:nth-child(1){top:0;left:0;width:100%;height:1px}.aufmass-rahmen i:nth-child(2){top:0;right:0;width:1px;height:100%}.aufmass-rahmen i:nth-child(3){bottom:0;right:0;width:100%;height:1px}.aufmass-rahmen i:nth-child(4){bottom:0;left:0;width:1px;height:100%}.vorbereitet .aufmass-rahmen{border-bottom:3px solid var(--signal)}.service-anruf{display:none}
.turm-bild{position:relative;aspect-ratio:640/620;isolation:isolate;overflow:hidden;background:#14181b}.turm-poster,.turm-canvas{position:absolute;inset:0}.turm-canvas canvas{width:100%;height:100%;max-width:none}.turm-naht{stroke:#14181b;stroke-width:.65;fill:none}.turm-legende{position:absolute;inset:1rem 1.25rem auto;display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;color:#c9d0d3}.turm-zaehler{white-space:nowrap}.zeitachse{position:absolute;inset:auto 1.25rem 1.25rem;list-style:none;padding:0;margin:0;display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid #526067;font-size:.875rem}.zeitachse li{padding-top:.65rem;border-top:3px solid transparent}.zeitachse li[data-aktiv]{border-top-color:var(--signal);color:var(--papier)}.bildbeschreibung{font-size:.875rem;color:#c9d0d3;padding:1rem 1.25rem;margin:0}.turm-werk{margin-top:0}.turm-werk figcaption{font-size:.875rem}
@media(min-width:900px){[data-szene-modul=die-patina][data-webgl=aktiv]{min-height:280vh}.turm-sticky{position:sticky;top:2rem}.turm-sticky .zweispaltig{align-items:center}.turm-werk .bildbeschreibung{font-size:.875rem}[data-szene-modul=die-familienachse]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--s40)}.chronik-jahr{position:sticky;top:3rem;align-self:start;grid-column:1/6;grid-row:1/4}.timeline{grid-column:7/13;grid-row:1/5}[data-szene-modul=die-familienachse]>.platzhalter-foto,[data-szene-modul=die-familienachse]>.button{grid-column:7/13}.schicht-auswahl{grid-template-columns:1fr}.ablaufband{grid-template-columns:repeat(5,minmax(0,1fr))}.ablaufband li{padding:.75rem;font-size:.875rem}}
@media(max-width:639px){.deckung-raster{grid-template-columns:repeat(5,minmax(0,1fr));padding:1.5rem;aspect-ratio:1.15}.dachbahn[data-reihe="4"],.dachbahn[data-reihe="5"],.dachbahn[data-spalte="5"],.dachbahn[data-spalte="6"],.dachbahn[data-spalte="7"],.dachbahn[data-spalte="8"]{display:none}.zeichnung{padding:.25rem;min-height:210px}.werkbild text{font-size:20px}.werkbild .svg-meta{font-size:16px}.schicht-auswahl{grid-template-columns:1fr}.service-anruf{position:fixed;z-index:20;bottom:0;left:0;right:0;display:block;min-height:56px;text-align:center;padding:1rem;background:#14181b;color:#fbfaf7;border-top:3px solid var(--signal);font-size:.9375rem;text-decoration:none}.turm-bild{aspect-ratio:1}.turm-poster svg{height:100%;width:100%}.bildbeschreibung{padding:.75rem}.turm-legende{font-size:.75rem}.zeitachse{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}.turm-canvas{display:none!important}.turm-poster{visibility:visible!important}.szene{min-height:0!important}.turm-sticky,.chronik-jahr{position:static}.werkbild [data-faltung]{opacity:1}.werkbild [data-faltung="0"]{opacity:0}.werkbild [data-faltung="1"]{clip-path:inset(0 65% 0 0)}.werkbild [data-faltung="2"]{clip-path:inset(0 33% 0 33%)}.werkbild [data-faltung="3"]{clip-path:inset(0 0 0 66%)}[data-wasser]{opacity:.15}[data-morgen]{opacity:1}[data-waerme]{clip-path:inset(0 65% 0 0)}}
}
@layer animation{
/* Keep scroll space before lazy initialization; the actual canvas never changes page layout. */
@media(min-width:640px) and (prefers-reduced-motion:no-preference){[data-szene-modul=die-patina]{min-height:280vh}.turm-sticky{position:sticky;top:2rem}.turm-bild{height:min(60vh,620px);min-height:360px;aspect-ratio:auto}[data-szene-modul=die-patina][data-webgl]:not([data-webgl=aktiv]){min-height:0}}
.faltung-statisch text{font-size:18px}.werkbild [data-faltung]{display:none}.szene[data-bereit=ja] [data-faltung]{display:initial}.szene[data-bereit=ja] .faltung-statisch{display:none}
@media(prefers-reduced-motion:reduce){.szene[data-bereit=ja] .faltung-statisch{display:initial}.szene[data-bereit=ja] [data-faltung]{display:none}.turm-sticky{position:static}}
}
@layer animation{
[data-szene-modul=die-objektwand] .karten{display:block;columns:1;column-gap:var(--spaltenluft)}[data-szene-modul=die-objektwand] .karten>.karte{display:inline-block;width:100%;break-inside:avoid;margin-bottom:var(--s24);clip-path:polygon(0 0,calc(100% - 48px) 0,100% 29.9938px,100% 100%,0 100%)}[data-szene-modul=die-objektwand] .karten>.karte:focus-visible{clip-path:none}
@media(min-width:640px){[data-szene-modul=die-objektwand] .karten{columns:2}}@media(min-width:1200px){[data-szene-modul=die-objektwand] .karten{columns:3}}@media(min-width:1600px){[data-szene-modul=die-objektwand] .karten{columns:4}}
@media(min-width:900px){[data-szene-modul=die-familienachse]>.szenen-medium{grid-column:7/13}}
}