/* Vollständige statische Darstellung ist die Grundlage. Bewegung ergänzt sie. */
.hero-image-window{height:490px;overflow:hidden;background:var(--ink-soft)}
.hero-image-window img{height:calc(100% + 28px);margin-top:-14px;transform:translate3d(0,var(--hero-shift,0px),0)}
.process-track{position:relative;padding-top:38px}
.process-line{position:absolute;top:0;left:0;width:100%;height:24px;fill:var(--red)}
.process-line path{fill:none;stroke-width:1.5}
.process-line-base{stroke:var(--rule)}
.process-line-draw{stroke:var(--red)}
.roof-story{padding-top:64px;margin-top:80px;border-top:1px solid var(--rule);scroll-margin-top:20px}
.roof-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:42px}
.roof-heading h3{font-size:clamp(38px,4.4vw,60px);line-height:1.05}
.roof-heading p{color:var(--muted);font-size:15px;max-width:490px}
.motion-toggle{border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--muted);font-size:11px;padding:5px 0;margin-top:16px;min-height:32px}
.motion-toggle[hidden]{display:none}
.roof-story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.roof-sticky{padding:24px 20px;background:var(--ink);color:var(--paper);border:1px solid rgba(255,255,255,.05)}
.roof-figure-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--light-muted);padding:0 6px 16px;border-bottom:1px solid var(--light-rule)}
.roof-diagram{display:block;width:100%;height:auto;max-height:min(530px,calc(100svh - 240px));overflow:visible}
.roof-sticky figcaption{font-size:10px;color:var(--light-muted);line-height:1.7;padding:0 6px}
.roof-alignment{fill:none;stroke:var(--paper);stroke-opacity:.18;stroke-width:1;stroke-dasharray:3 8}
.roof-layer{transform:translateY(var(--layer-shift,0px))}
.layer-outline{stroke:#17231c;stroke-width:1.5;stroke-linejoin:round}
.layer-guide{fill:none;stroke:var(--light-muted);stroke-width:1;stroke-opacity:.5}
.layer-marker{fill:var(--ink-soft);stroke:var(--light-muted);stroke-width:1}
.layer-number{fill:var(--paper);text-anchor:middle;font-family:var(--body);font-size:11px;font-weight:600}
.roof-layer.is-current .layer-outline{stroke:var(--red);stroke-width:2.5}
.roof-layer.is-current .layer-guide,.roof-layer.is-current .layer-marker{stroke:var(--red);stroke-opacity:1}
.roof-layer.is-current .layer-marker{fill:var(--red)}
.roof-steps{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.roof-step{display:grid;grid-template-columns:30px 1fr;gap:22px;border-bottom:1px solid var(--rule);padding:30px 0;position:relative}
.roof-step::before{content:'';position:absolute;width:3px;background:var(--red);top:26px;bottom:26px;left:-18px;opacity:0}
.roof-step.is-current::before{opacity:1}
.roof-step .number{padding-top:4px}
.roof-step h4{margin:0 0 10px;font-size:20px;font-weight:650;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.roof-step p{font-size:13px;color:var(--muted);line-height:1.65}
.roof-outro{display:flex;justify-content:space-between;gap:30px;align-items:start;border-bottom:1px solid var(--rule);padding:28px 0}
.roof-outro .text-link{max-width:430px}
.roof-sources{max-width:390px;font-size:11px;color:var(--muted)}
.roof-sources summary{cursor:pointer;min-height:28px;text-underline-offset:4px}
.roof-sources p{margin-top:8px}.roof-sources a{text-underline-offset:3px}
@media(min-width:981px) and (min-height:720px){html[data-motion="on"] .roof-sticky{position:sticky;top:104px}.roof-step{min-height:172px}}
@media(min-width:1600px){.hero-image-window{height:600px}}
@media(max-width:980px){.hero-image-window{height:485px}.roof-story-grid,.roof-heading{gap:40px}.roof-step{gap:14px;padding:24px 0}.roof-step h4{font-size:18px}.roof-diagram{max-height:480px}}
@media(max-width:700px){.hero-image-window{height:440px}.hero-image-window img{height:100%;margin-top:0;transform:none}.process-line{display:none}.process-track{padding-top:0}.roof-story{padding-top:42px;margin-top:55px}.roof-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.roof-heading h3{font-size:40px}.roof-story-grid{grid-template-columns:1fr;gap:28px}.roof-sticky{padding:18px 14px}.roof-diagram{max-height:none}.roof-step{gap:16px;padding:22px 0}.roof-step h4{font-size:18px}.roof-step p{font-size:13px}.roof-step::before{display:none}.roof-outro{display:block;padding-top:24px}.roof-sources{margin-top:20px}.roof-figure-top{font-size:8px;letter-spacing:.09em}}
@media(max-width:390px){.hero-image-window{height:370px}.roof-heading h3{font-size:36px}.roof-figure-top{letter-spacing:.05em}.roof-sticky{padding:16px 10px}}
@media(max-width:980px){.site-header:not(.nav-ready) .header-inner{flex-wrap:wrap}.site-header:not(.nav-ready) .site-nav{display:block;position:static;order:3;width:100%;padding:0 0 12px}.site-header:not(.nav-ready) .site-nav ul{display:flex;flex-wrap:wrap;gap:0 20px}.site-header:not(.nav-ready) .site-nav a{font-size:13px;padding:7px 0}.site-header:not(.nav-ready) .menu-button{display:none}}
html[data-motion="off"] .hero-image-window img,html[data-motion="off"] .roof-layer{transform:none}
html[data-motion="off"]{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){.hero-image-window img,.roof-layer{transform:none!important}.roof-sticky{position:static!important}.roof-step::before{display:none}}