/* SpreeGlanz Startseite v3, Dramaturgie nach Referenz. Themes on body[data-theme]. Breakpoints 1024/768/480 at the end. */
:root{--bg:#161a1f;--ink:#f4f7fa;--ink-soft:rgba(244,247,250,.72);--line:rgba(244,247,250,.16);--cyan:#49bee8;--on-cyan:#07202b;--sky:#cfe3f2;--paper:#f4f7fa;
--serif:"Bodoni Moda",Georgia,"Times New Roman",serif;--logo:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;--script:"Pinyon Script",cursive;--sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
--t-h2:clamp(1.7rem,1.05rem + 2.2vw,3.1rem);--t-h3:clamp(1.25rem,1rem + 1vw,1.9rem);--t-big:clamp(2.8rem,1.2rem + 5.4vw,6.4rem);--t-huge:clamp(4rem,1rem + 15vw,15rem);
--t-lead:clamp(1rem,.95rem + .3vw,1.2rem);--t-body:clamp(.96rem,.93rem + .18vw,1.05rem);--t-small:clamp(.75rem,.72rem + .12vw,.82rem);
--s-section:clamp(4rem,3rem + 6vw,9rem);--s-block:clamp(1.5rem,1.1rem + 1.6vw,3rem);--wrap:min(100% - 3rem,1280px);--ease:cubic-bezier(.22,.8,.2,1);
--ease-out:cubic-bezier(.22,.8,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--d-press:.12s;--d-fast:.25s;--d-med:.45s;--d-slow:.9s}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;overflow-x:clip;transition:background-color 1.1s var(--ease),color 1.1s var(--ease)}
.js body.loading{overflow:hidden}
body[data-theme=light]{--bg:#f4f7fa;--ink:#0f1f3d;--ink-soft:rgba(15,31,61,.7);--line:rgba(15,31,61,.14);--cyan:#0b6f8f;--on-cyan:#fff}
body[data-theme=blue]{--bg:#161a1f;--ink:#f4f7fa;--ink-soft:rgba(244,247,250,.75);--line:rgba(244,247,250,.18);--cyan:#49bee8}
body[data-theme=sky]{--bg:#cfe3f2;--ink:#0f1f3d;--ink-soft:rgba(15,31,61,.72);--line:rgba(15,31,61,.16);--cyan:#0b6f8f;--on-cyan:#fff}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}p{margin:0}h1,h2,h3{margin:0;font-weight:500;line-height:1.05}h2{font-size:var(--t-h2)}h3{font-size:var(--t-h3)}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:.01em}.caps{text-transform:uppercase;letter-spacing:.06em}.serif.caps{letter-spacing:.05em;font-weight:600}
.script{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;font-size:1.25em;line-height:.8;color:var(--cyan);display:inline-block;margin:0 .14em 0 .1em;transform:translateY(.06em)}
.wrap{width:var(--wrap);margin-inline:auto}.narrow{max-width:66rem}.center{text-align:center}
.kicker{margin:0 0 1.2rem;font-size:var(--t-small);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.lead{margin-top:1.6rem;font-size:var(--t-lead);color:var(--ink-soft);max-width:54ch;text-wrap:pretty}.center .lead{margin-inline:auto}
.mark-small{display:block;margin:2rem auto 0;color:var(--cyan);font-size:1.1rem}
.link{font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:.2em}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.5rem;border-radius:999px;font-weight:600;font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;transition:box-shadow var(--d-med) var(--ease-out),background-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),scale var(--d-press) var(--ease-out)}
.btn.primary{background:var(--cyan);color:var(--on-cyan)}.btn.wa{background:#25d366;color:#08290f}
.image-note{display:none;position:absolute;right:.7rem;bottom:.5rem;z-index:6;font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.5);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.25)}
::selection{background:var(--cyan);color:var(--on-cyan)}

/* cover */
.cover{position:fixed;inset:0;z-index:100;background:#161a1f;color:#f4f7fa;overflow:hidden}html:not(.js) .cover,.intro-seen .cover{display:none}
.cover-badge{position:absolute;z-index:4;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);opacity:0}.cover-badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
.ring-text{font-family:var(--sans);font-size:14.5px;letter-spacing:.3em;font-weight:600;fill:#f4f7fa}.mark{stroke:#49bee8;stroke-width:3;stroke-linecap:round}@keyframes spin{to{transform:rotate(360deg)}}
.cover-type{position:absolute;z-index:4;inset:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8vw;opacity:0}
.side{font-size:var(--t-small);letter-spacing:.45em;text-transform:uppercase;color:rgba(244,247,250,.75)}.side-l{justify-self:start}.side-r{justify-self:end}
.pane{position:relative;justify-self:center;width:min(56vw,780px);will-change:transform}.cover-logo{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 30px rgba(0,0,0,.35))}
.fog{position:absolute;inset:0;background:linear-gradient(135deg,rgba(214,224,232,.92),rgba(180,196,210,.86) 50%,rgba(214,224,232,.92));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:inset(0 0 0 0%);border-radius:6px}
.fog::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 6px,transparent 6px 22px);mix-blend-mode:overlay}
.squeegee{position:absolute;top:50%;left:-8%;height:108%;width:auto;transform:translate(0,-50%) rotate(-3deg);filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));opacity:0}
.cover-line{position:absolute;z-index:4;left:50%;bottom:20vh;width:1px;height:0;background:rgba(244,247,250,.45)}
.cover-cap{position:absolute;z-index:4;left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;font-size:var(--t-small);letter-spacing:.3em;text-transform:uppercase;color:rgba(244,247,250,.7);line-height:1.9;opacity:0}
/* the arch is a clip window over the very same tall image the hero shows at scroll 0 */
.arch-win{position:absolute;z-index:3;inset:0;--t:100%;--s:36%;--r:800px;clip-path:inset(var(--t) var(--s) 0% var(--s) round var(--r) var(--r) 0px 0px)}.arch-win img{width:100%;height:auto;display:block}

/* header, index, cursor, grain, glint, progress */
body{--nav-ink:var(--ink)}body[data-nav=dark],body[data-nav=blue]{--nav-ink:#f4f7fa}body[data-nav=light],body[data-nav=sky]{--nav-ink:#0f1f3d}.top{position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.9rem clamp(1.2rem,3vw,2.6rem);color:var(--nav-ink);transition:color .35s var(--ease);font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.brand{display:flex;align-items:center}.brand-word{font-family:var(--logo);font-weight:300;font-size:1.5rem;letter-spacing:.24em;line-height:1;text-transform:none;color:var(--ink)}.js body.loading .nav,.js body.loading .top-right{opacity:0}.nav,.top-right{transition:opacity .9s var(--ease)}.brand img{height:66px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}body[data-nav=light] .brand img,body[data-nav=sky] .brand img{filter:invert(1) hue-rotate(180deg)}.brand img{transition:filter .35s var(--ease)}
.nav{display:flex;gap:1.8rem}.top-right{display:flex;justify-content:flex-end;gap:1.6rem;align-items:center}
.nav a,.tel{position:relative}.nav a::after,.tel::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}.nav a:hover::after,.tel:hover::after{transform:scaleX(1);transform-origin:left}
.index{position:fixed;left:clamp(1rem,2.4vw,2.4rem);bottom:6vh;z-index:40;display:grid;gap:.5rem;justify-items:center;color:var(--ink);font-size:var(--t-small);letter-spacing:.3em;text-transform:uppercase;transition:color 1.1s var(--ease)}
.idx-line{width:1px;height:48px;background:currentColor;opacity:.4}.idx-name{writing-mode:vertical-rl;transform:rotate(180deg);opacity:.7}
.cursor{display:none;position:fixed;inset:0 auto auto 0;z-index:200;pointer-events:none}
/* the native pointer is hidden only while the custom cursor really runs: main.js sets has-cursor after the cover, for fine pointers only */
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor summary{cursor:none}html.has-cursor .cursor{display:block}
.cur-dot,.cur-ring{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}.cur-dot{width:6px;height:6px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.35)}.cur-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.18);transition:width .35s var(--ease),height .35s var(--ease)}
.cursor.is-link .cur-ring{width:64px;height:64px}.cursor.is-link .cur-dot{width:4px;height:4px}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:150;background:var(--cyan);transform-origin:left;transform:scaleX(0);pointer-events:none}
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none;opacity:.55;mix-blend-mode:overlay}
.glint{display:none;position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen}.g-layer{position:absolute;inset:-10%;will-change:transform}
.g-layer i{position:absolute;width:38vmin;height:38vmin;border-radius:50%;background:radial-gradient(circle,rgba(127,208,242,.55),rgba(127,208,242,0) 60%);filter:blur(10px)}
.g-far i{width:52vmin;height:52vmin;opacity:.35}.g-mid i{opacity:.5}.g-near i{width:26vmin;height:26vmin;opacity:.7;filter:blur(4px)}
.streak{position:absolute;width:2px;height:120vh;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.55) 45%,rgba(127,208,242,.7) 55%,transparent);transform:rotate(24deg);filter:blur(1px);opacity:.6}
body[data-theme=light] .glint,body[data-theme=sky] .glint{mix-blend-mode:multiply;opacity:.35}

/* entrance reveals run in main.js (GSAP, motion only); picture windows (.clip) open when JS runs (html.js from the inline head script) */
.letters .ch,.lt .ch,.ch{display:inline-block;font-style:normal}.letters>span,.lt>span,.lt .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.clip{overflow:hidden}.js .clip img{transform:translateY(101%) scale(1.12);transition:transform 1.4s var(--ease)}.js .clip.in img{transform:none}

/* 1 hero: tall image, wordmark in the sky, cut-out house in front */
.stage{position:relative}.hero{position:sticky;top:calc(100vh - 124.11vw);top:calc(100svh - 124.11vw);overflow:hidden;container-type:inline-size}
.hero-img{width:100%;height:auto;display:block;filter:saturate(.8) contrast(.92) brightness(1.04)}
.hero-cut{position:absolute;inset:0;z-index:2;width:100%;height:auto;filter:saturate(.8) contrast(.92) brightness(1.04)}
.hero-word{position:absolute;z-index:1;left:50%;top:max(calc(100vh + 2vw),52vw);top:max(calc(100svh + 2vw),52cqw);transform:translateX(-50%);font-family:var(--logo);font-weight:300;font-size:12.6vw;font-size:12.6cqw;line-height:.9;letter-spacing:.12em;padding-left:.12em;white-space:nowrap;color:rgba(255,255,255,.55);-webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.4) 100%);mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.4) 100%)}
.hero-sky{position:absolute;z-index:3;left:4vw;right:4vw;top:9vh;height:calc(100vh - 9vh - 14vw);height:calc(100svh - 9vh - 14cqw);display:grid;align-content:center;justify-items:center;gap:.4rem;text-align:center;color:#fff}.sky-sub{max-width:52ch;text-align:center;color:rgba(255,255,255,.88);font-size:var(--t-lead);line-height:1.6;margin:0 auto .6rem;text-shadow:0 1px 14px rgba(20,50,90,.3)}.sky-contact{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.scroll-cue{position:absolute;z-index:3;left:50%;bottom:4vh;bottom:4svh;transform:translateX(-50%);display:grid;justify-items:center;gap:.6rem;color:rgba(255,255,255,.85);font-size:var(--t-small);letter-spacing:.3em;text-transform:uppercase;font-weight:600}.scroll-cue i{display:block;width:1px;height:3.2rem;background:rgba(255,255,255,.7);transform-origin:top;animation:cue 2.2s var(--ease) infinite}@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}.btn.glass{gap:.7em;padding:.9rem 1.7rem;color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.18em;transition:background-color var(--d-med) var(--ease-out),border-color var(--d-med) var(--ease-out),color var(--d-med) var(--ease-out),box-shadow var(--d-med) var(--ease-out),scale var(--d-press) var(--ease-out)}.btn.glass svg{width:1.05em;height:1.05em;fill:currentColor}.sky-claim{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,1.2rem + 3.4vw,5.2rem);line-height:1.04;letter-spacing:.01em;text-align:center;margin:0 0 1.2rem;text-shadow:0 2px 24px rgba(20,50,90,.35)}.sky-kicker{display:flex;align-items:center;gap:1.4rem;font-size:var(--t-small);letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:.6rem}.sky-kicker::before,.sky-kicker::after{content:"";width:clamp(2rem,5vw,4.5rem);height:1px;background:rgba(255,255,255,.5)}.hero::after{content:"";position:absolute;inset:auto 0 0;height:34vh;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(7,22,42,.55),rgba(7,22,42,0))}.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.36;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.95%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23g)%22/%3E%3C/svg%3E");background-size:260px 260px}.hero-haze{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(235,242,250,.10),rgba(235,242,250,.04) 40%,rgba(235,242,250,0) 70%)}
.hero-line{position:absolute;z-index:3;left:clamp(1.5rem,6vw,7rem);right:clamp(1.5rem,6vw,7rem);bottom:6vh;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.hero-claim{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);text-transform:uppercase;letter-spacing:.06em;line-height:1.1;max-width:18ch;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.hero-meta{display:flex;gap:2rem;flex-wrap:wrap;font-size:var(--t-small);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-meta a{position:relative}.hero-meta a::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}.hero-meta a:hover::after{transform:scaleX(1);transform-origin:left}
.hero.lit::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%);animation:sweep 2.2s var(--ease) .2s 1 forwards;pointer-events:none}@keyframes sweep{to{transform:translateX(120%)}}

/* 2 dome with curved text, then reasons slider */
.dome-area{height:200vh;height:200svh;position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;pointer-events:none}.dome{pointer-events:auto}.dome-screen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* the dome is a clip circle on a screen-sized sky layer; arc text and caption follow its crown by transform only (no layout shift) */
.dome{position:absolute;inset:0;background:#cfe3f2;clip-path:circle(95vmax at 50% calc(100% + 95vmax))}
.dome-text{position:absolute;left:50%;top:0;width:240vmax;height:48vmax;overflow:visible;transform-origin:50% 0;transform:translate(-50%,100vh) scale(.79)}.dome-text text{font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:0;word-spacing:.9em;text-transform:uppercase;fill:#0f1f3d}.dome-inner{position:absolute;left:50%;top:clamp(16rem,30vh,22rem);transform:translate(-50%,100vh);z-index:2;display:grid;justify-items:center;gap:1.6rem;text-align:center;color:#0f1f3d;width:min(80vw,40rem)}.dome-mark{display:flex;align-items:center;gap:2.2rem;margin:0;font-size:var(--t-small);letter-spacing:.32em;text-transform:uppercase;font-weight:600}.dome-mark svg{width:2.6rem;height:2.6rem;fill:currentColor}.dome-line{width:1px;height:clamp(3rem,9vh,7rem);background:rgba(15,31,61,.45)}.dome-cap{margin:0;font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;font-weight:600;line-height:1.9;color:rgba(15,31,61,.85)}
.five-screen{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:center;gap:2rem;padding:12vh clamp(1.5rem,5vw,6rem) 6vh}.five-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2.2vw,2.6rem)}.five-card{display:grid;gap:.5rem;color:var(--ink);align-content:start}.five-fig{margin:0 0 .6rem;aspect-ratio:3/4;overflow:hidden;position:relative}.five-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(.95);transition:transform 1s var(--ease)}.five-n{font-size:var(--t-small);letter-spacing:.24em;font-weight:600;color:var(--ink-soft)}.five-title{font-size:clamp(1.15rem,.9rem + .9vw,1.7rem);line-height:1.15}.five-text{color:var(--ink-soft);font-size:var(--t-small);letter-spacing:.02em;line-height:1.6;text-transform:none;font-weight:400}.five-link{margin-top:.4rem;justify-self:start;transition:opacity .3s}.five-more{text-align:center;font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}.five-more a{border-bottom:1px solid currentColor;color:var(--ink)}
.reasons-area{margin-top:-48vh;margin-top:-48svh;position:relative;z-index:3;background:#cfe3f2;color:#0f1f3d;--ink:#0f1f3d;--ink-soft:rgba(15,31,61,.72);--cyan:#0b6f8f;--line:rgba(15,31,61,.25)}
/* 4 concept */
.concept{padding:var(--s-section) 0;background:#f4f7fa;position:relative;z-index:3;--ink:#0f1f3d;--ink-soft:rgba(15,31,61,.72);--cyan:#0b6f8f;color:var(--ink)}

/* 5 horizontal */
.hz-area{height:300vh;height:300svh;position:relative}.hz-screen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.hz-track{display:flex;gap:9vw;padding:0 9vw;will-change:transform}.hz-slide{flex:none;display:flex;flex-direction:column;justify-content:center}
.hz-words{width:46vw}.hz-words h2{font-size:var(--t-big);line-height:.95}.stagger span{display:block}.stagger span:nth-child(2){margin-left:1.1em}.stagger span:nth-child(3){margin-left:2.2em}
.hz-img{width:24vw;position:relative}.hz-img img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}.hz-note{margin-top:1rem;font-size:var(--t-small);letter-spacing:.06em;color:var(--ink-soft);max-width:30ch}
.hz-map{width:58vw}.map{width:100%;height:auto;overflow:visible}.ring{fill:none;stroke:var(--ink);stroke-opacity:.14;stroke-width:1;stroke-dasharray:3 6}.river{fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;opacity:.9}.rivername{font-family:var(--script);font-size:26px;fill:var(--cyan);opacity:.85}.spoke{stroke:var(--ink);stroke-opacity:.22;stroke-width:1;stroke-dasharray:2000;stroke-dashoffset:2000}.town circle{fill:var(--ink)}.town text{fill:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.town .min{font-size:11px;letter-spacing:.12em;fill:var(--ink-soft);font-weight:500}.hubdot{fill:var(--cyan)}.pulse{fill:none;stroke:var(--cyan);stroke-width:2;animation:pulse 2.4s ease-out infinite}@keyframes pulse{0%{r:10;opacity:.9}100%{r:40;opacity:0}}.hubt{font-family:var(--serif);font-size:34px;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink);font-weight:600}.map-note{margin-top:1.2rem;font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:right}
/* 6 cloud gate: page white flows into cloud tops, then the land */
.cloud-gate{position:relative;margin-top:-1px;z-index:3;background:#cfe3f2;height:calc(100vw * 2600 / 1800 * .72);overflow:hidden;overflow:clip}.cloud-gate img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}.cloud-gate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(7,22,42,.35),rgba(7,22,42,0));pointer-events:none}.gate-quote{position:sticky;z-index:2;top:40vh;margin:45vh 0 0 clamp(1.5rem,6vw,7rem);width:min(44rem,84vw);font-size:clamp(2rem,1.2rem + 2.6vw,4.2rem);line-height:1.05;letter-spacing:.02em;color:#fff;mix-blend-mode:difference;text-shadow:none}.gate-kicker{display:block;font-family:var(--sans);font-size:var(--t-small);letter-spacing:.3em;font-weight:600;color:#fff;margin-bottom:1.2rem}.cloud-gate img{width:100%;height:auto;display:block}


/* 7 service register: all seven at once, one active */
.register{position:relative;overflow:hidden}.reg-screen{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:center;padding:12vh clamp(1.5rem,6vw,7rem) 10vh}.reg-ghost{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-family:var(--serif);font-size:clamp(6rem,24vw,26rem);line-height:.8;text-transform:uppercase;letter-spacing:.04em;color:rgba(15,31,61,.06);pointer-events:none;white-space:nowrap}.reg-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,22rem) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center}.reg-tabs{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}.lt-tab{display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;padding:.45em 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1rem + 1.1vw,2.1rem);line-height:1.15;color:var(--ink-soft);transition:color .35s var(--ease),transform .5s var(--ease)}.lt-tab small{font-family:var(--sans);font-size:max(.5em,.75rem);letter-spacing:.2em;font-weight:600}.lt-tab span{position:relative;padding-bottom:.08em}.lt-tab span::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.lt-tab.is-on{color:var(--ink);transform:translateX(.35em)}.lt-tab.is-on span::after,.lt-tab:hover span::after{transform:scaleX(1)}.lt-tab:hover{color:var(--ink)}.reg-fig{margin:0;position:relative;aspect-ratio:3/4;max-height:64vh;max-height:64svh;overflow:hidden}.reg-fig img{width:100%;height:100%;object-fit:cover}.reg-copy{max-width:30ch}.reg-title{font-size:var(--t-h2);margin-bottom:1rem}.reg-text{color:var(--ink-soft);line-height:1.75}.reg-cta{display:flex;gap:.7rem;margin-top:1.6rem;flex-wrap:wrap}.btn.outline{border-color:var(--ink);color:var(--ink);background:transparent}
/* 9 why */
.why-stage{height:200vh;height:200svh;position:relative}.why{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#161a1f}.mosaic{position:absolute;inset:0 36% 0 0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:6px;padding:6px}.mosaic figure{margin:0;overflow:hidden;position:relative}.mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(.95);transform:scale(1.04)}.mo-solar{grid-column:1/3;grid-row:1/3}.mo-florian-dach{grid-column:3/5;grid-row:1/3}.mo-innen{grid-column:1/2;grid-row:3/5}.mo-boden{grid-column:2/3;grid-row:3/5}.mo-wintergarten{grid-column:3/5;grid-row:3/5}.mo-anlage{display:none}
.why::before{content:"";position:absolute;inset:0 0 0 64%;z-index:1;background:#161a1f}.mosaic::after{content:"";position:absolute;inset:0;background:rgba(7,22,42,.18);pointer-events:none}
.why-list{position:absolute;z-index:2;left:calc(64% + clamp(1.5rem,3vw,4rem));right:clamp(1.5rem,3vw,4rem);top:16vh;color:#fff;display:grid;gap:.35rem;font-size:var(--t-h3);text-shadow:0 2px 24px rgba(0,0,0,.45)}.why-list .kicker{color:rgba(255,255,255,.7);margin-bottom:.8rem}
.why-cap{position:absolute;z-index:2;left:calc(64% + clamp(1.5rem,3vw,4rem));right:clamp(1.5rem,3vw,4rem);bottom:9vh;color:rgba(255,255,255,.85);font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;line-height:2}

/* 10 circle */
.circle{position:absolute;z-index:3;left:50%;top:100%;width:60vmax;height:60vmax;border-radius:50%;background:#f4f7fa;transform:translate(-50%,-10%) scale(.2)}
.circle-word{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#0f1f3d;font-size:clamp(2.4rem,1rem + 4.6vw,5.6rem);line-height:1;white-space:nowrap}.js .circle-word{opacity:0}.circle-word span,.circle-word em{display:block}.circle-word .script{color:#0b6f8f}

/* 11 details */
.details{padding:0 0 var(--s-section)}.details-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);background:#161a1f;color:#f4f7fa}.js .details-panel{clip-path:inset(0 0 100% 0)}
.details-img{margin:0;position:relative;aspect-ratio:3/4;max-height:100vh;max-height:100svh;overflow:hidden}.details-img img{width:100%;height:100%;object-fit:cover}
.details-copy{padding:clamp(3rem,7vw,7rem)}.details-copy .kicker{color:rgba(244,247,250,.7)}
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:2rem}.step-list li{padding-top:1.4rem;border-top:1px solid rgba(244,247,250,.2)}.step-list b{display:block;font-size:var(--t-small);letter-spacing:.3em;color:#9fd8f2;margin-bottom:.6rem}.step-list p{margin-top:.5rem;color:rgba(244,247,250,.72);max-width:44ch}
.faq{padding-top:var(--s-section);max-width:60rem}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{list-style:none;display:grid;grid-template-columns:3rem 1fr 2rem;align-items:center;gap:1rem;padding:1.4rem 0;cursor:pointer}.faq-item summary::-webkit-details-marker{display:none}.faq-n{font-size:var(--t-small);letter-spacing:.2em;color:var(--ink-soft);font-weight:600}.faq-q{font-size:var(--t-h3);line-height:1.2}.faq-x{position:relative;width:1.1rem;height:1.1rem;justify-self:end}.faq-x::before,.faq-x::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);transition:transform .45s var(--ease)}.faq-x::after{transform:rotate(90deg)}.faq-item[open] .faq-x::after{transform:rotate(0)}.faq-a{padding:0 0 0 4rem;overflow:hidden;color:var(--ink-soft);max-width:56ch;line-height:1.7}.faq-a>:last-child{padding-bottom:1.6rem}

/* 16 contact, footer */
.contact{padding:var(--s-section) 0 var(--s-block)}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-block) 5rem;align-items:start}
.big-tel{display:block;font-size:clamp(2.4rem,1rem + 5vw,6rem);letter-spacing:.02em;line-height:1;margin:1.2rem 0 1.6rem}
.cta{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}.form{display:grid;gap:.9rem}.form label{display:grid;gap:.35rem;font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.form input,.form textarea{font:inherit;font-size:16px;padding:.9rem 1rem;border-radius:8px;border:1px solid rgba(244,247,250,.3);background:rgba(244,247,250,.1);color:#fff}
.foot{padding:var(--s-block) 0 3rem;border-top:1px solid var(--line)}.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--t-small);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.foot-logo{height:40px;width:auto}.foot-sub{margin-top:.8rem;color:var(--ink-soft);font-size:var(--t-small);letter-spacing:.1em}.muted{margin-top:1rem;line-height:1.6;text-transform:none;letter-spacing:0}

/* still mode: reduced motion (html.still from main.js), no JS (html:not(.js)) or no GSAP; every set piece becomes a plain, readable page */
@media (prefers-reduced-motion:reduce){body{transition:none}.glint,.cursor,.grain{display:none}.scroll-cue i,.pulse,.cover-badge svg{animation:none}}
:is(html:not(.js),.still) .clip img{transition:none;transform:none;opacity:1}
:is(html:not(.js),.still) .details-panel{clip-path:none}:is(html:not(.js),.still) .letters .ch,:is(html:not(.js),.still) .lt .ch{transform:none}
:is(html:not(.js),.still) .circle,:is(html:not(.js),.still) .circle-word{display:none}:is(html:not(.js),.still) .why-stage{height:auto}
:is(html:not(.js),.still) .hz-area{height:auto}:is(html:not(.js),.still) .hz-screen{position:static;height:auto;overflow:visible;display:block;padding:var(--s-section) 0}
:is(html:not(.js),.still) .hz-track{flex-direction:column;align-items:center;gap:2.5rem;padding:0 clamp(1.5rem,6vw,7rem)}:is(html:not(.js),.still) .hz-words{width:min(100%,60rem)}:is(html:not(.js),.still) .hz-img{width:min(100%,26rem)}:is(html:not(.js),.still) .hz-map{width:min(100%,60rem)}
:is(html:not(.js),.still) .river,:is(html:not(.js),.still) .spoke{stroke-dashoffset:0}
/* the dome as a still sky panel: arc headline flat on top, caption below */
:is(html:not(.js),.still) .dome-area{height:auto;margin-top:0;pointer-events:auto}:is(html:not(.js),.still) .reasons-area{margin-top:0}:is(html:not(.js),.still) .dome-screen{position:relative;height:auto}
:is(html:not(.js),.still) .dome{position:relative;clip-path:none;padding:var(--s-section) 0}
:is(html:not(.js),.still) .dome-text{position:relative;left:50%;display:block;width:max(100%,34rem);height:auto;transform:translateX(-50%)}
:is(html:not(.js),.still) .dome-inner{position:relative;left:auto;top:auto;margin:1.5rem auto 0;transform:none}

/* focus, hover and press pass 09/2026 (tokens in :root): skip link, one focus ring, states that ease instead of snapping */
.skip{position:fixed;left:50%;top:.8rem;z-index:300;padding:1rem 1.5rem;border-radius:999px;background:rgba(22,26,31,.84);color:#f4f7fa;border:1px solid rgba(244,247,250,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:var(--sans);font-size:var(--t-small);font-weight:600;line-height:1;letter-spacing:.2em;text-transform:uppercase;transform:translate(-50%,-160%);transition:transform var(--d-med) var(--ease-out)}
.skip:focus-visible{transform:translate(-50%,0)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* the ring colour follows the ground it sits on (sub pages fall back to their tone's --cyan) */
:focus-visible{outline:2px solid var(--focus,var(--cyan));outline-offset:3px}
section[data-theme=light],section[data-theme=sky],div[data-theme=sky]{--focus:#0b6f8f}section[data-theme=dark],div[data-theme=dark],footer[data-theme=dark]{--focus:#49bee8}
.top{--focus:#49bee8}body[data-nav=light] .top,body[data-nav=sky] .top{--focus:#0b6f8f}
.scroller-in :focus-visible{outline-offset:-3px}
.ck-field input:focus-visible,.ck-field select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.nav a:focus-visible::after,.tel:focus-visible::after,.hero-meta a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.five-card:focus-visible .five-fig img{transform:scale(1.06)}
/* H1: the kicker line sits inside the heading, looking as before */
.sky-claim .sky-kicker{justify-content:center;margin:0 0 1rem;font-family:var(--sans);font-weight:400;line-height:1.6;text-wrap:balance}
/* text links: colour eases on hover and focus */
.five-more a,.hz-note a,.form-note a,.foot a,.big-tel,.map-list a,.faq-q{transition:color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}.top .link{transition:opacity var(--d-fast) var(--ease-out)}
.map a text{transition:fill var(--d-fast) var(--ease-out)}
.hz-note a{position:relative;border-bottom:1px solid currentColor;color:var(--ink)}.hz-note a::before{content:"";position:absolute;left:-.2rem;right:-.2rem;top:50%;height:44px;transform:translateY(-50%)}
.form-hint{margin-top:-.35rem;font-size:var(--t-small);letter-spacing:.02em;line-height:1.6;color:rgba(244,247,250,.6)}
.five-card{transition:scale var(--d-press) var(--ease-out)}
.btn:active{scale:.97}.five-card:active{scale:.985}
@media (hover:hover){
.top .link:hover{opacity:.65}.five-more a:hover,.hz-note a:hover,.map-list a:hover,.big-tel:hover{color:var(--cyan)}.form-note a:hover,.foot a:hover{color:var(--ink)}
.map a:hover text{fill:var(--cyan)}.faq-item summary:hover .faq-q{color:var(--cyan)}}

/* mobile, same selector depth */
/* nav, phone and CTA need about 1240px side by side; below that the phone number stays in the hero and contact block */
@media (max-width:1279px){.top-right .tel{display:none}}
@media (max-width:1024px){.nav{display:none}.top{grid-template-columns:1fr auto}.top-right .tel{display:inline}.brand img{height:48px}.glint,.index{display:none}.reg-grid{grid-template-columns:1fr 1fr}.reg-copy{grid-column:span 2;max-width:none}.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.nav,.top-right .link{display:none}.top{grid-template-columns:1fr auto}.hero-word{display:none}.hero-sky{top:12vh;height:auto}.sky-contact{flex-wrap:wrap;gap:1.2rem}.hero-line{flex-direction:column;align-items:flex-start}.brand img{height:28px}.hz-area{height:auto}.hz-screen{position:static;height:auto;display:block;padding:var(--s-section) 0}.hz-track{flex-direction:column;gap:2.5rem;padding:0 1.5rem}.hz-words,.hz-img,.hz-map{width:100%}.reg-grid{grid-template-columns:1fr}.reg-copy{grid-column:auto}.reg-screen{min-height:0;padding:var(--s-section) 1.5rem}.reg-fig{max-height:none}.reasons-area{margin-top:0}.details-panel{grid-template-columns:1fr}.contact-grid,.foot-grid{grid-template-columns:1fr}.why-list{right:1.5rem;left:1.5rem}}
@media (max-width:480px){.cta{flex-direction:column;align-items:stretch}.cover-type{grid-template-columns:1fr}.side{display:none}.pane{width:80vw}}


.five-grid>*{min-width:0}.five-card,.five-card>*{min-width:0}.five-title{font-size:min(clamp(1rem,.8rem + .7vw,1.4rem),1.6vw);-webkit-hyphens:auto;hyphens:auto}.five-link{white-space:nowrap}

.hero-word{font-weight:500;opacity:.62;letter-spacing:.1em}

/* form states, consent */
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}.form-note{font-size:var(--t-small);letter-spacing:.02em;color:rgba(244,247,250,.6);line-height:1.6;text-transform:none}.form-note a{border-bottom:1px solid currentColor}.form-state{min-height:1.4em;font-size:var(--t-small);letter-spacing:.06em;color:var(--cyan)}.form-state.is-error{color:#ff8a8a}.form.is-busy .btn{opacity:.6;pointer-events:none}.consent{position:fixed;left:clamp(1rem,2vw,2rem);bottom:clamp(1rem,2vw,2rem);z-index:160;max-width:26rem;padding:1.2rem 1.3rem;background:rgba(22,26,31,.92);color:#f4f7fa;border:1px solid rgba(244,247,250,.15);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:var(--t-small);letter-spacing:.02em;line-height:1.6}.consent p{margin:0 0 .9rem}.consent a{border-bottom:1px solid currentColor}.consent-btns{display:flex;gap:.6rem;justify-content:flex-end}.consent .btn{padding:.6rem 1.1rem}.consent .btn.outline{border-color:rgba(244,247,250,.5);color:#f4f7fa}

/* header: hides on scroll down, returns on scroll up with a glass strip */
.top{transition:color .35s var(--ease),transform .55s var(--ease),background-color .4s var(--ease),backdrop-filter .4s var(--ease)}
.top.is-hidden{transform:translateY(-110%)}
.top.is-glass{background:rgba(244,247,250,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(15,31,61,.06)}
body[data-nav=dark] .top.is-glass,body[data-nav=blue] .top.is-glass{background:rgba(22,26,31,.66);box-shadow:0 1px 0 rgba(244,247,250,.08)}

.five-more{margin-top:2.2rem}
/* consent: both answers equally weighted (no nudging towards yes) */
.consent .consent-btn{flex:1;justify-content:center;background:transparent;border:1px solid rgba(244,247,250,.55);color:#f4f7fa;padding:.7rem 1rem}
.consent .consent-btn:hover{background:#f4f7fa;color:#0f1f3d;box-shadow:none}
.consent[hidden]{display:none}
@media (max-width:480px){.consent{left:.75rem;right:.75rem;bottom:.75rem;max-width:none}}


/* layout pass 09/2026: shared */
.top .tel,.top .link{white-space:nowrap}.top-right a,.five-more a,.brand{position:relative}
/* 44px hit areas for small text links, without moving the layout */
.nav a::before,.top-right a::before,.hero-meta a::before,.five-more a::before,.brand::before{content:"";position:absolute;left:-.4rem;right:-.4rem;top:50%;height:44px;transform:translateY(-50%)}
.contact .big-tel{padding-block:.1em}
/* hero text sits on a soft dark halo, the header zone gets a light shade, so white text keeps AA on bright sky */
.hero-sky::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:max(100%,calc(100% + 40vw));height:130%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(7,22,42,.5),rgba(7,22,42,.36) 62%,rgba(7,22,42,0));pointer-events:none}
.hero-haze{background:linear-gradient(to bottom,rgba(7,22,42,.36),rgba(7,22,42,0) 8.5rem),linear-gradient(to bottom,rgba(235,242,250,.10),rgba(235,242,250,.04) 40%,rgba(235,242,250,0) 70%)}
.sky-kicker{color:#fff;text-shadow:0 0 2px rgba(7,22,42,.8),0 0 9px rgba(7,22,42,.6),0 0 20px rgba(7,22,42,.35)}.btn.glass{background:rgba(7,22,42,.36)}.hero-sky{grid-template-columns:minmax(0,1fr)}
.why-list{font-size:min(var(--t-h3),2.4vw)}
.hz-words h2.stagger{font-size:min(var(--t-big),6.5vw)}.letters>span,.letters>em{white-space:nowrap}
/* map labels grow with --lk (set in main.js) so they never render below 12px; scaled around the town dot, so name and minutes keep their spacing */
.town text{transform:scale(var(--lk,1))}.rivername{font-size:calc(26px * min(var(--lk,1),2))}
.map-list{display:none;list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line)}.map-list li{border-bottom:1px solid var(--line);font-size:.875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.map-list a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;padding:.7rem 0}.map-list li span+span{color:var(--ink-soft);font-weight:500;letter-spacing:.1em}

/* portrait screens (taller than 1.2411 x wide): the 1800x2234 hero image would end above the fold, so the hero is exactly one screen tall and the dome starts below it */
@media (max-aspect-ratio:1800/2234){.hero{top:0;height:100vh;height:100svh}.hero-img,.hero-cut{height:100%;object-fit:cover;object-position:50% 100%}.arch-win img{height:100%;object-fit:cover;object-position:50% 100%}.hero-word{display:none}.hero::after{height:50%;background:linear-gradient(to top,rgba(7,22,42,.72),rgba(7,22,42,.5) 40%,rgba(7,22,42,0))}.hero-sky{top:9vh;height:calc(52vh - 9vh);height:calc(52svh - 9vh)}}

@media (max-width:1024px){
.five-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.five-card{grid-column:span 2}.five-card:nth-child(4){grid-column:2/span 2}.five-title{font-size:clamp(1rem,.8rem + .7vw,1.4rem)}
.mosaic{inset:0 50% 0 0}.why::before{inset:0 0 0 50%}.why-list,.why-cap{left:calc(50% + clamp(1.5rem,3vw,4rem))}.why-list{font-size:var(--t-h3)}
.hero-line{flex-direction:column;align-items:center;gap:1.1rem;text-align:center;bottom:calc(4vh + 6.5rem);bottom:calc(4svh + 6.5rem)}.hero-claim{max-width:none}.hero-meta{justify-content:center;gap:1rem 2rem}
.hero::after{height:62vh;background:linear-gradient(to top,rgba(7,22,42,.74),rgba(7,22,42,.55) 45%,rgba(7,22,42,0))}}
/* touch sizes for the footer lists */
@media (max-width:1024px),(hover:none){.foot ul{gap:0}.foot li{min-height:2.75rem;display:flex;align-items:center}.foot ul a{display:flex;align-items:center;min-height:2.75rem}}

@media (max-width:768px){
.hero-sky{top:max(10vh,4.6rem);top:max(10svh,4.6rem);height:auto}.hero-sky::before{width:260%;height:135%;background:radial-gradient(closest-side,rgba(7,22,42,.56),rgba(7,22,42,.5) 55%,rgba(7,22,42,0))}.hero-haze{background:linear-gradient(to bottom,rgba(7,22,42,.46),rgba(7,22,42,0) 8.5rem)}.hero::after{height:56%;background:linear-gradient(to top,rgba(7,22,42,.8),rgba(7,22,42,.6) 45%,rgba(7,22,42,0))}.sky-contact{gap:.8rem 1rem}
.five-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.five-card,.five-card:nth-child(4){grid-column:auto}
.five-card:nth-child(5){grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;column-gap:clamp(1rem,2.2vw,2.6rem)}.five-card:nth-child(5)>*{grid-column:2;align-self:start}.five-card:nth-child(5) .five-fig{grid-column:1;grid-row:1/-1}
.why{display:flex;flex-direction:column}.mosaic{position:relative;inset:auto;flex:1 1 0;min-height:0}.why::before{display:none}
.why-list,.why-cap{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding-inline:1.5rem}.why-list{padding-top:1.4rem}.why-cap{margin-top:auto;padding-top:1.2rem;padding-bottom:max(5vh,1.5rem);padding-bottom:max(5svh,1.5rem);letter-spacing:.12em;line-height:1.8}
.hz-words h2.stagger{font-size:min(var(--t-big),calc((100vw - 3rem) / 7))}
.map .town text{display:none}.map-list{display:block}.hubt{font-size:34px}.rivername{font-size:30px}
.lt-tab{padding:.55em 0}}

@media (max-width:480px){.hero-meta{display:none}.hubt,.rivername{font-size:46px}.dome-text text{word-spacing:.4em}}

/* small phones: kicker and both call buttons stay compact, so the hero copy never reaches the claim */
@media (max-width:380px){.sky-kicker{letter-spacing:.24em;gap:.8rem}.sky-kicker::before,.sky-kicker::after{width:1.2rem}.sky-contact{flex-wrap:nowrap;gap:.6rem}.sky-contact .btn{padding:.9rem 1rem;letter-spacing:.1em}.hero-line{bottom:calc(4vh + 5.5rem);bottom:calc(4svh + 5.5rem)}}

/* landscape phones: slim header, hero copy below it, why list and caption stay apart */
@media (max-height:500px) and (min-aspect-ratio:1/1){.top{padding-block:.4rem}.hero::after{height:100vh;height:100svh;background:linear-gradient(to top,rgba(7,22,42,.78),rgba(7,22,42,.62) 62%,rgba(7,22,42,0))}.brand img{height:32px}.hero-sky{top:3.4rem;height:calc(100vh - 4.4rem);height:calc(100svh - 4.4rem)}.sky-claim{margin-bottom:.6rem}.why-list{top:10vh;font-size:min(var(--t-h3),5.4vh);font-size:min(var(--t-h3),5.4svh);line-height:1.25}.why-cap{bottom:6vh;line-height:1.8}}
/* small landscape phones: the stacked why layout does not fit 375px of height, so mosaic and list sit side by side again */
@media (max-width:768px) and (max-height:500px) and (min-aspect-ratio:1/1){.why{display:block}.mosaic{position:absolute;inset:0 50% 0 0}.why::before{display:block;inset:0 0 0 50%}.why-list,.why-cap{position:absolute;left:calc(50% + 1.5rem);right:1.5rem;padding:0}.why-list{top:10vh;bottom:auto}.why-cap{top:auto;bottom:6vh;margin:0}}

/* focus and anchors: focused elements stay clear of the fixed header, section jumps still land on the section start */
html{scroll-padding-top:6.5rem}section[id]{scroll-margin-top:-6.5rem}
/* hover-only decoration, so a tap on touch screens leaves nothing behind */
@media (hover:hover){
.btn:hover{box-shadow:0 14px 34px -14px rgba(73,190,232,.7)}.btn.glass:hover{background:rgba(255,255,255,.92);color:#0f1f3d;border-color:#fff;box-shadow:none}.btn.outline:hover{background:var(--ink);color:#fff;box-shadow:none}
.five-card:hover .five-fig img{transform:scale(1.06)}.five-card:hover .five-link{opacity:.7}}
@media (max-width:768px){html{scroll-padding-top:5rem}section[id]{scroll-margin-top:-5rem}}
/* region map: on phones the town names live in the list below the map, so the map's own links step aside */
@media (max-width:768px){.map a{display:none}}
/* reduced motion: no slide-in for the skip link, no press scale */
@media (prefers-reduced-motion:reduce){.skip{transition:none}.btn:active,.five-card:active{scale:none}}

/* menu for phones and tablets (nav.js): glass pill in the header, full-screen dark glass panel; hidden from 1025px */
.menu-btn{display:none;align-items:center;gap:.65rem;min-height:44px;padding:0 1.05rem 0 .95rem;border-radius:999px;border:1px solid rgba(244,247,250,.3);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:inherit;font:inherit;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background-color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
body[data-nav=light] .menu-btn,body[data-nav=sky] .menu-btn{border-color:rgba(15,31,61,.22);background:rgba(15,31,61,.04)}
.menu-lines{position:relative;width:18px;height:10px;flex:none}.menu-lines i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease-out),top .45s var(--ease-out)}
.menu-lines i:first-child{top:1px}.menu-lines i:last-child{top:7.5px}
.menu-btn[aria-expanded=true] .menu-lines i:first-child{top:4.25px;transform:rotate(45deg)}.menu-btn[aria-expanded=true] .menu-lines i:last-child{top:4.25px;transform:rotate(-45deg)}
.menu-btn:active{scale:.96}
.menu{position:fixed;inset:0;z-index:125;display:none;overflow-y:auto;overscroll-behavior:contain;padding:calc(4.75rem + env(safe-area-inset-top,0px)) 1.5rem calc(2rem + env(safe-area-inset-bottom,0px));background:rgba(12,17,24,.9);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);color:#f4f7fa;font-family:var(--sans);--focus:#49bee8}
.menu-in{width:min(100%,44rem);margin:0 auto;display:grid;gap:1.8rem}
.menu-cols{display:grid;gap:1.8rem}
.menu-k{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#49bee8}
.menu ul{list-style:none;margin:0;padding:0}
.menu-list a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid rgba(244,247,250,.1);font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem);line-height:1.15;letter-spacing:.01em;transition:color var(--d-fast) var(--ease-out),padding-left var(--d-med) var(--ease-out)}
.menu-towns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
.menu-towns a,.menu-anchors a{display:flex;align-items:center;min-height:46px;border-bottom:1px solid rgba(244,247,250,.1);font-size:.9375rem;font-weight:500;letter-spacing:.06em;color:rgba(244,247,250,.86);transition:color var(--d-fast) var(--ease-out)}
.menu a[aria-current=page]{color:#49bee8}
.menu-anchors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
.menu-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.menu-cta .btn{min-height:48px;font-size:.875rem}
.menu-tel{text-align:center;font-size:.875rem;letter-spacing:.14em;color:rgba(244,247,250,.6)}
/* open: page frozen behind the panel, header on top of it in light ink (inline z-index from main.js, hence !important) */
html.nav-open,html.nav-open body{overflow:hidden}
html.nav-open body .top{z-index:126!important;transform:none;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#f4f7fa;--nav-ink:#f4f7fa;--focus:#49bee8}
html.nav-open body .top .brand img{filter:none}
html.nav-open body[data-nav=light] .menu-btn,html.nav-open body[data-nav=sky] .menu-btn{border-color:rgba(244,247,250,.3);background:rgba(255,255,255,.08)}
html.nav-open .consent{visibility:hidden}
@media (hover:hover){.menu-btn:hover{background:rgba(255,255,255,.16)}.menu-list a:hover{color:#49bee8;padding-left:.35rem}.menu-towns a:hover,.menu-anchors a:hover{color:#fff}}

/* legal pages and 404: permanent glass header (no main.js there), quiet entrance of the first lines */
.legal{padding:calc(6rem + 8vh) 0 var(--s-section);max-width:46rem}.legal h1{font-family:var(--serif);font-weight:500;font-size:var(--t-big);line-height:1;margin:0 0 2.5rem}.legal h2{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);margin:2.6rem 0 .8rem}
.legal p,.legal li{color:var(--ink-soft);line-height:1.75}.legal ul{padding-left:1.2rem}.legal .todo{background:rgba(73,190,232,.14);border-left:3px solid var(--cyan);padding:.1em .5em;color:var(--ink);border-radius:3px}.legal address{font-style:normal;color:var(--ink);line-height:1.7}
.legal a{border-bottom:1px solid currentColor;overflow-wrap:anywhere}
.legal>.kicker,.legal>h1,.legal>.recht{animation:sg-rise .8s var(--ease-out) both}.legal>h1{animation-delay:.08s}.legal>.recht{animation-name:sg-fade;animation-delay:.2s}
.err-main{min-height:100vh;min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:7rem 1.5rem 3rem}
.err-main .kicker{color:var(--cyan)}.err-main h1{margin:0 0 1rem;text-wrap:balance;font:500 clamp(2rem,1.2rem + 3vw,3.4rem)/1.1 var(--serif)}
.err-text{margin:0 auto 2rem;max-width:34ch;color:var(--ink-soft)}
.err-links{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.err-main>*{animation:sg-rise .8s var(--ease-out) both}.err-main>:nth-child(2){animation-delay:.08s}.err-main>:nth-child(3){animation-delay:.16s}.err-main>:nth-child(4){animation-delay:.24s}
.foot-mini{padding:1rem 0 calc(1rem + env(safe-area-inset-bottom,0px))}.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.8rem}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}.foot-legal a[hidden]{display:none}
@keyframes sg-rise{from{opacity:0;transform:translateY(18px)}}@keyframes sg-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.legal>.kicker,.legal>h1,.legal>.recht,.err-main>*{animation:none}.menu-lines i,.menu-list a{transition:none}}

/* menu button from tablet down, mobile overrides at the end */
@media (max-width:1024px){.menu-btn{display:inline-flex}.menu:not([hidden]){display:block}}
/* tablets: services and towns side by side, on the same two columns as the links and buttons below */
@media (max-width:1024px) and (min-width:769px){.menu-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}.menu-cta{gap:1.5rem}}
@media (max-width:480px){.top-right{gap:.9rem}.err-links{flex-direction:column;align-items:stretch;width:min(100%,20rem)}.foot-legal{flex-direction:column;align-items:center}}
@media (max-width:380px){.menu-btn{padding:0 .8rem;gap:.55rem;letter-spacing:.12em}.menu-towns,.menu-anchors{column-gap:1rem}}
/* narrowest phones: the button keeps its lines, the word stays for screen readers */
@media (max-width:340px){.menu-btn{width:44px;justify-content:center;padding:0}.menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* print: a plain document in dark ink on white; motion states, set pieces and screen-only controls step aside
   (!important against GSAP's inline styles and the deeper screen selectors) */
@media print{
@page{margin:1.6cm 1.5cm}
html,body,body[data-theme]{overflow:visible!important;height:auto!important;background:#fff!important;color:#111!important;--ink:#111;--ink-soft:#333;--line:#bbb;--cyan:#0b6f8f;--bg:#fff}
body *{color:#111!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
main,main *,.top,.top *,.foot,.foot *{container-type:normal!important;will-change:auto!important;opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;visibility:visible!important}
.hero::before,.hero::after,.why::before,.why::after,.stage::before,.stage::after,.why-stage::before,.why-stage::after,
.cover,.cursor,.progress,.glint,.grain,.index,.skip,.menu,.menu-btn,.nav,.top-right,.consent,.scroll-cue,.image-note,.hp,.form,.cta,.sky-contact,.hero-img,.hero-cut,.hero-haze,.hero-grain,.hero-word,.hero-line,.dome-area,.cloud-gate,.mosaic,.circle,.circle-word,.hz-img,.map,.reg-grid,.reg-ghost,.five-fig,.five-link,.details-img,.mark-small,.form-hint,.form-note,.foot-legal a[data-consent-open],.foot a[data-consent-open]{display:none!important}
.top{position:static!important;display:block!important;padding:0 0 1.2rem!important}.brand img{height:34px!important;width:auto!important;filter:invert(1) hue-rotate(180deg)!important}
.stage,.hero,.reasons-area,.five-screen,.concept,.hz-area,.hz-screen,.hz-track,.register,.reg-screen,.why-stage,.why,.details,.details-panel,.contact,.foot{position:static!important;height:auto!important;min-height:0!important;margin:0!important;padding:0 0 1rem!important;overflow:visible!important;display:block!important;border:0!important}
.hero-sky{position:static!important;display:block!important;height:auto!important;padding:0 0 1rem!important;text-align:left!important}.hero-sky::before{display:none!important}
.sky-claim{font-size:24pt!important;text-align:left!important;margin:0 0 .5rem!important}.sky-kicker{display:block!important}
h2,.kicker,.five-title,.reg-t,.step-list h3,.faq-q{break-after:avoid}
.five-grid{display:block!important}.five-card{display:block!important;margin:0 0 .7rem!important;break-inside:avoid}.five-n{display:none!important}
.hz-slide{width:auto!important;padding:0!important}.hz-words h2{font-size:16pt!important}
.map-list{display:block!important}.reg-data{display:block!important;list-style:none;padding:0;margin:0 0 1rem}.reg-data li{margin:0 0 .6rem;break-inside:avoid}.reg-data b{display:block}
.why-list,.why-cap{position:static!important;padding:0!important;font-size:12pt!important}.why-list span{display:inline!important}.why-list span+span::before{content:" · "}
.details-copy{padding:0!important}.faq-item{break-inside:avoid}.faq-item::details-content{content-visibility:visible!important;height:auto!important}.faq-a{height:auto!important;display:block!important}
.big-tel{font-size:22pt!important;margin:.5rem 0!important}
.foot-grid{display:block!important}.foot ul{display:block!important;margin:0 0 .6rem!important}.foot li,.foot ul a{display:inline!important;min-height:0!important}.foot li+li::before{content:" · "}.foot-logo{display:none!important}
.legal{padding:0!important;max-width:none}.legal h1{font-size:26pt!important;margin-bottom:1rem!important}.legal .todo{border:1px dashed #999!important}
.err-main{min-height:0!important;padding:0!important}
img{max-height:9cm;break-inside:avoid}
a[href^="tel:"]::after,a[href^="https://wa.me"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* homepage, top of the page: clouds can drift behind the white header text, a soft dark veil keeps it readable (fades out once the header turns to glass) */
body:not(.lp) .top::before{content:"";position:absolute;inset:0 0 -2.5rem;z-index:-1;pointer-events:none;background:linear-gradient(rgba(8,20,38,.42),rgba(8,20,38,0));transition:opacity .4s var(--ease)}
body:not(.lp) .top.is-glass::before{opacity:0}

/* side index over the bright sky: a dark glass capsule keeps "01 HAUS" readable on any cloud */
.index{padding:.9rem .55rem;border-radius:999px;background:rgba(8,20,38,.34);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);box-shadow:inset 0 0 0 1px rgba(244,247,250,.1)}
.index{transition:color 1.1s var(--ease),background-color 1.1s var(--ease),box-shadow 1.1s var(--ease)}
body[data-theme=light] .index,body[data-theme=sky] .index{background:rgba(244,247,250,.6);box-shadow:inset 0 0 0 1px rgba(15,31,61,.08)}

/* desktop hero (Yuriy 25.09.): content about 10% lower, light veil behind the text */
@media (min-width:1025px) and (min-aspect-ratio:1/1){
.hero-sky{top:19vh;top:19svh}
.hero-sky::before{background:radial-gradient(closest-side,rgba(7,22,42,.18),rgba(7,22,42,.11) 62%,rgba(7,22,42,0))}
}
/* hidden footer entries stay hidden, also where mobile rules give links a display value (cookie link without Clarity) */
.foot [hidden],.foot-legal [hidden]{display:none}
.foot ul{align-content:start}   /* short lists stay together at the top instead of spreading over the height of the longest column */

/* touch screens and tablets: the full-screen grain (SVG noise blended over the page) makes Safari repaint everything on every scroll frame */
@media (hover:none),(max-width:1024px){.grain{display:none}}

/* phones: services as a stack of full-width cards (like Heßlich), each one slides over the previous */
@media (max-width:768px){
.five-area .five-screen{min-height:0;padding:3vh 1.25rem 10vh}
.five-area .five-grid{display:block;max-width:34rem;margin:0 auto}
.five-area .five-card{position:sticky;top:5rem;display:grid;grid-template-columns:none;gap:.45rem;margin:0 0 1.5rem;padding:.9rem .9rem 1.4rem;border-radius:20px;background:#f4f7fa;box-shadow:0 -10px 30px rgba(15,31,61,.14),0 0 0 1px rgba(15,31,61,.06);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.five-area .five-card:nth-child(2){top:calc(5rem + 10px)}.five-area .five-card:nth-child(3){top:calc(5rem + 20px)}.five-area .five-card:nth-child(4){top:calc(5rem + 30px)}
.five-area .five-card:nth-child(5){top:calc(5rem + 40px)}.five-area .five-card:nth-child(6){top:calc(5rem + 50px)}.five-area .five-card:nth-child(7){top:calc(5rem + 60px)}
.five-area .five-fig{grid-column:auto;grid-row:auto;aspect-ratio:16/10;margin:0 0 .5rem;border-radius:12px}
.five-area .five-fig img{width:100%;height:100%;object-fit:cover}
.five-area .five-title{font-size:clamp(1.45rem,1.2rem + 1.2vw,1.8rem);hyphens:manual;-webkit-hyphens:manual}
.five-area .five-text{font-size:.98rem;letter-spacing:0}
.five-area .five-link{opacity:1}
}

/* phones and portrait tablets (Yuriy 25.09.): same journey as on desktop, first sky with the message, then scrolling brings the house.
   The photo sits at the bottom of a hero that is taller than the screen; above it the sky continues in the photo's own top colour.
   lvh: the hero reaches the bottom of the largest viewport, so no dark gap opens when the browser bar slides away. */
@media (max-aspect-ratio:1800/2234){
.hero{--leiste:0px;--leiste:calc(100lvh - 100svh);top:-74.11vw;height:calc(74.11vw + 100vh);height:calc(74.11vw + 100lvh);--fuss:min(var(--leiste),26vw);background:linear-gradient(to bottom,#2f5f9f,#4a74ac)}
/* portrait screens get hero-tall-lang: the same photo with 26vw of real lawn added below (outpainted).
   The original part ends where the browser bar begins (--fuss), the added lawn sits under the bar,
   so hiding the bar reveals more lawn, never a flat strip or a dark gap */
.hero-img,.hero-cut{position:absolute;left:0;right:0;top:auto;bottom:calc(var(--fuss,0px) - 26vw);width:100%;height:auto;aspect-ratio:1800/2702;object-fit:fill;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 11.6%);mask-image:linear-gradient(to bottom,transparent,#000 11.6%)}
.hero::after{display:block;height:calc(24vw + var(--leiste,0px));background:linear-gradient(to top,rgba(7,22,42,.62),rgba(7,22,42,0))}
.hero-sky{top:12vh;top:12svh;height:76vh;height:76svh}
.sky-claim{font-size:min(8.4vw,3.2rem)}
.sky-claim>span:not(.sky-kicker){white-space:nowrap}
/* the wordmark behind the roof, as on desktop: the cut-out house in front covers its lower edge */
.hero-word{display:block;top:auto;bottom:calc(124.11vw * .47 + var(--fuss,0px));font-size:13.2vw;opacity:.55;transform:translateX(-50%)}
/* the claim sits on the lawn below the house, calls and scroll cue are already in the first screen */
.hero-line{left:1.25rem;right:1.25rem;bottom:calc(3.2vw + var(--leiste,0px));flex-direction:row;justify-content:center;text-align:center}
.hero-line .hero-meta,.scroll-cue{display:none}
.hero-claim{font-size:min(5.6vw,1.7rem);max-width:none}
/* the dome is a curved sheet that scrolls over the house with the page itself: no scrubbed clip-path, smooth on every phone */
.dome-area{height:auto;margin-top:45vh;margin-top:45svh;pointer-events:auto}   /* the house stays in view a while before the sheet comes */
.dome-screen{position:relative;height:auto;overflow:hidden}
.dome{position:relative;clip-path:none;border-radius:50% 50% 0 0/9vw 9vw 0 0;padding:14vw 0 4vw}
.dome-text{position:relative;left:50%;top:auto;display:block;width:150vw;height:auto;transform:translateX(-50%);margin-top:-2vw}
.dome-inner{position:relative;left:auto;top:auto;margin:0 auto;transform:none;gap:1.2rem}
}

/* phones (Yuriy 25.09.): */
@media (max-width:768px){
/* every Bodoni text a touch stronger, the hairlines were hard to read on light backgrounds */
.serif,.sky-claim,.hero-claim,.concept h2,.hz-words h2,.five-title{font-weight:600}
/* the fifth card is a card like the others (older tablet rules made it a wide two-column card) */
.five-area .five-card:nth-child(5){grid-column:auto;grid-template-columns:none;grid-template-rows:none;column-gap:0}
.five-area .five-card:nth-child(5)>*{grid-column:auto}
.five-area .five-card:nth-child(5) .five-fig{grid-column:auto;grid-row:auto}
/* service area moves sideways as on desktop: the screen stays, the track slides (transform only, smooth) */
.hz-area{height:340vh;height:340svh}
.hz-screen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;padding:0}
.hz-track{flex-direction:row;align-items:center;gap:10vw;padding:0 8vw}
.hz-words{width:84vw}.hz-img{width:78vw}.hz-map{width:84vw}
.hz-img img{max-height:58svh;object-fit:cover}
.hz-map svg.map{max-height:22svh;width:100%}
.hz-map .map-list{margin-top:.6rem}.hz-map .map-list li{min-height:0;padding:.42rem 0}
/* footer: logo centred, services and places in two equal columns, legal links centred below */
.foot-grid{grid-template-columns:1fr 1fr;column-gap:1.5rem;row-gap:2.2rem;text-align:left}
.foot-grid>div:first-child{grid-column:1/-1;text-align:center;display:grid;justify-items:center}
.foot-grid>ul:last-child{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.8rem;text-align:center;border-top:1px solid var(--line);padding-top:1rem}
.foot-grid>ul:last-child li.muted{flex-basis:100%;justify-content:center;text-transform:none;letter-spacing:.02em;font-size:.8rem;line-height:1.5;min-height:0;margin-top:.4rem}
.foot ul li{min-height:2.75rem}
.foot-grid>ul:nth-child(2),.foot-grid>ul:nth-child(3){justify-self:center}
}
/* the quote's top margin must stay inside the cloud section (overflow:clip does not contain margins):
   otherwise it pushes the section down and a dark gap opens between the service cards and the sky */
.cloud-gate{display:flow-root}
@media (max-width:768px){.gate-quote{margin-top:14vw;top:16vh;top:16svh}}   /* phones: the cloud section is short, the quote starts near its top */

/* line breaks (Yuriy 25.09.): headings get even lines, running text never ends on one or two lone words */
h1,h2,h3,h4,.kicker,.lead,.sky-claim,.hero-claim,blockquote,.dome-cap,.five-more{text-wrap:balance}
p,li,dd,figcaption,.five-text,.hz-note,.sky-sub{text-wrap:pretty}
/* service-area map (#gebiet), generated by leistungen/_karte.py from real coordinates.
   Everything inside .s is scaled by --k (viewBox units per drawn pixel, set in main.js), so labels,
   dots and strokes keep their pixel size from phone to desktop. The defaults cover the no-JS case. */
.hz-map{width:min(58vw,92vh)}
.karte{display:block;width:100%;height:auto;overflow:visible;color:var(--cyan);--k:1.2}
.karte .s{transform:scale(var(--k))}
.karte .gebiet{fill:url(#karte-glanz);stroke:var(--cyan);stroke-opacity:.45;stroke-width:calc(1.5px * var(--k));stroke-linejoin:round}
.karte .polen{fill:var(--ink);fill-opacity:.045}
.karte .river{stroke-width:calc(2px * var(--k))}
.karte text{paint-order:stroke;stroke:#f4f7fa;stroke-width:4px;stroke-linejoin:round}
.karte .ort text{fill:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.karte .dot{fill:var(--ink);stroke:#f4f7fa;stroke-width:2px}
.karte .hit{fill:transparent}
.karte a:focus-visible{outline:none}.karte a:focus-visible text{fill:var(--cyan);text-decoration:underline}
.karte .hubt{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink)}
.karte .fluss{font-family:var(--script);font-size:22px;fill:var(--cyan)}
.karte .region{font-family:var(--script);font-size:25px;fill:var(--ink-soft)}
.karte .land{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;fill:var(--ink-soft)}
.map-note{text-align:left;margin-top:1.4rem}
@media (hover:hover){.karte a:hover text{fill:var(--cyan)}}
@media (max-width:768px){.karte{--k:3}.hz-map{width:88vw}.map-note{letter-spacing:.1em}.karte .ort text{font-size:12.5px;letter-spacing:.12em}.karte .hubt{font-size:19px}}
/* dome title on portrait screens: two lines on a gentle arc parallel to the sheet edge, 21px+ instead of one steep 13px arc */
.dome-text-m{display:none}
@media (max-aspect-ratio:1800/2234){.dome .dome-text{display:none}.dome-text-m{display:block;width:min(100%,34rem);height:auto;margin:-3vw auto 0;overflow:visible}.dome-text-m text{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:.07em;word-spacing:.12em;text-transform:uppercase;fill:#0f1f3d}}
/* intro window on portrait screens: same geometry as the hero at scroll 0 (sky gradient, photo from 100svh - 50vw),
   so the small arch shows sky and clouds, never the house (the old rule fitted the photo to the bottom) */
@media (max-aspect-ratio:1800/2234){.arch-win{background:linear-gradient(to bottom,#2f5f9f,#4a74ac)}.arch-win img{position:absolute;left:0;top:calc(100vh - 50vw);top:calc(100svh - 50vw);width:100%;height:auto;aspect-ratio:1800/2702;object-fit:fill;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 11.6%);mask-image:linear-gradient(to bottom,transparent,#000 11.6%)}}
/* Bodoni Moda has an optical-size axis: left on auto, phones pick the display cut with hairlines that vanish (Yuriy 25.09.).
   Fixed values instead: sturdy text cut for small titles, a middle cut for headlines. Fonts without the axis ignore it. */
html{font-optical-sizing:none;font-variation-settings:'opsz' 12}
h1,h2,.sky-claim,.hero-claim,.big-tel,.reg-ghost,.gate-quote{font-variation-settings:'opsz' 16}
h3,.faq-q,.five-title,.reg-title,.hubt,.dome-text text,.dome-text-m text{font-variation-settings:'opsz' 9}
/* phones: the sideways service-area block slides 30svh up under "Der Betrieb" (same background, concept has z-index 3),
   so its vertically centred content follows the text without a half-screen gap, and stays centred once pinned (Yuriy 25.09.) */
@media (max-width:768px){.hz-area{margin-top:-30vh;margin-top:-30svh}.concept{padding-bottom:2.5rem}}
/* hero polish (Yuriy 25.09., visual audit): closes the W-i gap, calmer veils, air around the headline, bigger logo, scroll hint */
.kern{letter-spacing:-.075em}
@media (max-width:768px){
.hero-sky{left:1.25rem;right:1.25rem}
.sky-claim .sky-kicker::before,.sky-claim .sky-kicker::after{width:1.6rem}
.hero-sky::before{background:radial-gradient(closest-side,rgba(7,22,42,.2),rgba(7,22,42,.13) 55%,rgba(7,22,42,0))}
.hero-haze{background:linear-gradient(to bottom,rgba(7,22,42,.26),rgba(7,22,42,0) 7rem)}
.sky-claim>span:not(.sky-kicker),.sky-sub{text-shadow:0 1px 14px rgba(7,22,42,.28)}
}
@media (min-width:381px) and (max-width:768px){.brand img{height:34px}.top .tel{letter-spacing:.1em}}
@media (max-aspect-ratio:1800/2234){.sky-claim{font-size:min(7.7vw,3.1rem)}
.hero-sky::after{content:"";position:absolute;left:50%;bottom:-4.5rem;width:1px;height:2.6rem;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.85));transform-origin:50% 0;animation:cue-drop 2.4s var(--ease) infinite}}
@keyframes cue-drop{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-sky::after{animation:none}}
.hero-sky .sky-sub{text-wrap:balance}   /* the no-orphan binding plus pretty left "Ansprechpartner," alone at 375px */
/* phones: service cards with the photo flush to the card's top, left and right edge (Yuriy 25.09.) */
@media (max-width:768px){
.five-area .five-card{padding:0 0 1.5rem;overflow:hidden}
.five-area .five-card>:not(.five-fig){margin-left:1.25rem;margin-right:1.25rem}
.five-area .five-fig{margin:0 0 .9rem;border-radius:0}
}
/* homepage contact (Yuriy 25.09.): no form, one centred glass box with the number and the two buttons */
.contact-box{max-width:52rem;margin:0 auto;padding:clamp(2.6rem,1.6rem + 4vw,5rem) clamp(1.4rem,1rem + 3vw,4rem);border-radius:28px;background:rgba(244,247,250,.045);border:1px solid rgba(244,247,250,.1);text-align:center;display:grid;justify-items:center}
.contact-box .kicker{margin:0}
.contact-box .big-tel{margin:1.4rem 0 1.2rem}
.contact-box .lead{margin:0;color:rgba(244,247,250,.72)}
.contact-box .cta{justify-content:center;margin-top:2.2rem}
@media (max-width:480px){.contact-box .cta{flex-direction:column;width:100%}.contact-box .cta .btn{justify-content:center;width:100%}}
/* hero sub line as three points with line icons (Yuriy 25.09.): one row with fine dividers, on phones three columns, icon above */
.sky-points{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;row-gap:.8rem}
.sky-points li{display:flex;align-items:center;gap:.65rem;padding:0 clamp(1rem,.6rem + 1vw,1.6rem);font-size:clamp(.95rem,.9rem + .2vw,1.08rem);font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.94);text-shadow:0 1px 14px rgba(7,22,42,.3)}
.sky-points li+li{border-left:1px solid rgba(255,255,255,.3)}
.sky-points svg{flex:none;width:1.3rem;height:1.3rem;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:768px){
.sky-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:1.3rem}
.sky-points li{flex-direction:column;gap:.55rem;padding:0 .5rem;text-align:center;font-size:.875rem;line-height:1.35;text-wrap:balance}
.sky-points svg{width:1.5rem;height:1.5rem}
}
@media (max-width:400px){.sky-points li{font-size:.8125rem;padding:0 .3rem}}   /* 375px: "Ansprechpartner" fits its column */
/* homepage hero points on every screen: icon above the text, three columns with dividers (Yuriy 25.09.) */
.sky-points{display:grid;grid-template-columns:repeat(3,minmax(0,13rem));justify-content:center;margin-top:1.4rem}
.sky-points li{flex-direction:column;gap:.6rem;text-align:center;line-height:1.35;text-wrap:balance}
.sky-points svg{width:1.6rem;height:1.6rem}
.sky-contact{margin-top:clamp(2.2rem,1.6rem + 1.4vh,3rem)}   /* buttons as far from the points as the points from the headline (Yuriy 25.09.) */
/* footer (Yuriy 25.09.: symmetric, calmer): brand and call on top, two equal halves of 2 x 4 links, one small bottom line */
.foot{padding:clamp(3rem,2rem + 3vw,5rem) 0 0}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:1.6rem 2rem;padding-bottom:clamp(2rem,1.4rem + 2vw,3rem);border-bottom:1px solid var(--line)}
.foot-top .foot-logo{height:44px}
.foot-top .foot-sub{margin-top:.9rem;letter-spacing:.04em}
.foot-cta{display:flex;align-items:center;gap:1.4rem}
.foot-tel{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);letter-spacing:.01em;color:var(--ink)}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem clamp(2rem,1rem + 4vw,6rem);padding:clamp(2.4rem,1.6rem + 2vw,3.6rem) 0}
.foot-k{margin:0 0 1.2rem;font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.foot .foot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:.75rem 1.5rem;font-size:.9375rem;letter-spacing:.01em;text-transform:none}
.foot .foot-list a{color:var(--ink-soft)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem 2rem;padding:1.4rem 0 calc(1.6rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-soft)}
.foot .foot-legal-list{display:flex;flex-wrap:wrap;align-items:center;gap:0;font-size:.8125rem;letter-spacing:.02em;text-transform:none}
.foot .foot-legal-list li+li::before{content:"·";margin:0 .75rem;opacity:.6}
.foot .foot-legal-list a{color:var(--ink-soft)}
.foot-note{margin:0;max-width:46ch;text-align:right;line-height:1.5}
@media (hover:hover){.foot .foot-list a:hover,.foot .foot-legal-list a:hover,.foot-tel:hover{color:var(--ink)}}
@media (max-width:768px){
  .foot-top{flex-direction:column;text-align:center}
  .foot-top .foot-brand{display:grid;justify-items:center}
  .foot-cta{flex-direction:column;gap:1rem}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .foot-bottom{flex-direction:column;text-align:center}
  .foot .foot-legal-list{justify-content:center}
  .foot-note{text-align:center}
}
/* footer top: only the brand, centred; number and WhatsApp stay in the contact box right above (Yuriy 25.09.: no doubling) */
.foot-top{justify-content:center;text-align:center}
.foot-top .foot-brand{display:grid;justify-items:center}
/* explainer film under "Der Betrieb" (Yuriy 29.09.): calm still as poster, one pill button bottom left, plays on click only */
.film{width:min(100%,56rem);margin:clamp(3rem,2rem + 3vw,5rem) auto 0}
.film-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0f1f3d;box-shadow:0 40px 80px -40px rgba(15,31,61,.45),0 0 0 1px rgba(15,31,61,.08)}
.film-frame img,.film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.film-frame video{object-fit:contain;background:#000}
.film-play{position:absolute;left:clamp(.8rem,.5rem + 1.2vw,1.6rem);bottom:clamp(.8rem,.5rem + 1.2vw,1.6rem);display:inline-flex;align-items:center;gap:.65rem;padding:.6rem 1.15rem .6rem .6rem;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(7,22,42,.3);color:#0f1f3d;font-size:.9rem;font-weight:600;letter-spacing:.01em;transition:transform .35s var(--ease),background-color .35s var(--ease)}
.film-play i{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:#0f1f3d}
.film-play svg{width:.95rem;height:.95rem;margin-left:.15rem;fill:#fff}
.film-play small{font-size:.9rem;font-weight:500;color:rgba(15,31,61,.6)}
.film-frame:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media (hover:hover){.film-frame:hover .film-play{transform:translateY(-2px);background:#fff}}
@media (max-width:768px){.film{margin-top:2.6rem}.film-frame{border-radius:16px}.film-play{gap:.5rem;padding:.4rem .85rem .4rem .4rem;font-size:.8125rem}.film-play i{width:1.9rem;height:1.9rem}.film-play svg{width:.75rem;height:.75rem}.film-play small{font-size:.8125rem}}
/* hero: a quiet link to the film below (Yuriy 29.09.), on the centre axis under the two buttons; hangs below them without taking space, so the hero keeps its tuned position */
.sky-contact{position:relative}
.sky-film{position:absolute;left:50%;top:calc(100% + 1.1rem);transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .8rem .3rem .3rem;border-radius:999px;color:#fff;font-size:.875rem;font-weight:500;letter-spacing:.02em;text-shadow:0 1px 10px rgba(7,22,42,.35)}
.sky-film i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .3s var(--ease)}
.sky-film svg{width:.75rem;height:.75rem;margin-left:.12rem;fill:#fff}
.sky-film small{font-size:.875rem;opacity:.72}
.sky-film:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover){.sky-film:hover i{background:rgba(255,255,255,.3)}}