/* Motion edition: large cinematic chapters, native touch scrolling, deliberate pacing. */:root{--cinema:#040e1b;--nav-height:64px;--motion-ease:cubic-bezier(.2,.75,.2,1)}html{scroll-padding-top:84px}body{background:var(--cinema)}main{background:white}.button{min-height:54px;padding:15px 25px}.reveal-pending{transform:translateY(42px);opacity:0}.reveal-in{transition-duration:.95s;transition-timing-function:var(--motion-ease)}
/* The stage stays in place for a short scroll chapter; only media and text transform. */.motion-hero{padding:0;background:var(--cinema);color:white;position:relative}.js .motion-hero{height:170svh}.hero-stage{min-height:560px;height:calc(100svh - var(--nav-height));position:relative;isolation:isolate;overflow:hidden}.js .hero-stage{position:sticky;top:var(--nav-height)}.motion-hero .hero-media{position:absolute;inset:0;width:100%;max-width:none;height:100%;margin:0;border-radius:0;background:var(--cinema);z-index:-2;clip-path:inset(var(--hero-inset-y,16px) var(--hero-inset-x,clamp(12px,2.2vw,32px)) round var(--hero-radius,28px));will-change:clip-path}.motion-hero .hero-photo{width:100%;height:100%;object-position:64% 53%;transform:scale(var(--hero-image-scale,1.04));transform-origin:62% 55%;will-change:transform}.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,#020b19d9 0%,#020b1966 58%,#020b192d),linear-gradient(0deg,#020b19e6 0%,#020b1910 48%,#020b1966 100%)}.hero-copy{position:absolute;top:50%;left:0;right:0;padding:0;transform:translateY(calc(-50% + var(--hero-copy-y,0px)));opacity:var(--hero-copy-opacity,1);will-change:transform,opacity}.motion-hero h1{margin-left:-.04em;font-size:clamp(50px,8.6vw,124px);font-weight:600;line-height:.98;letter-spacing:-.05em}.motion-hero h1>span{display:block;color:#fff}.motion-hero h1>.hero-accent{color:#91b8ff}.hero-lead{margin:28px 0 0;max-width:540px;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#d9e4f2;text-wrap:pretty}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}.hero-actions .button{min-height:50px;padding:0 24px;gap:10px;justify-content:center;font-size:16px}.text-link.light{gap:6px;min-height:50px;font-size:16px;color:#fff;transition:color .2s}.text-link.light span{font-size:22px;line-height:1}.text-link.light:hover{color:#c9dcff}.hero-endline{position:absolute;left:0;right:0;bottom:18%;opacity:var(--hero-end-opacity,0);transform:translateY(var(--hero-end-y,30px));pointer-events:none}.hero-endline p{font-size:clamp(40px,6.5vw,96px);font-weight:600;line-height:1.06;letter-spacing:-.05em;color:#fff}.hero-copy:focus-within{opacity:1!important;transform:translateY(-50%)!important}.hero-copy:focus-within~.hero-endline{opacity:0!important}
/* Wide, switchable video cards with one active film at a time. Like every dark chapter it overlaps the chapter before by
   its corner radius, so the rounding shows that chapter's colour; the chapter before gets the overlap back as padding. */.films{position:relative;z-index:2;margin-top:-40px;border-radius:40px 40px 0 0;background:var(--cinema);color:#fff;overflow:visible;overflow-x:clip;padding:clamp(80px,10vw,144px) 0 clamp(64px,7vw,96px)}section:has(+ .films),section:has(+ .lift){padding-bottom:calc(clamp(80px,10vw,144px) + 40px)}.films .frame-heading p:not(.eyebrow){color:#b3c0cf}.film-gallery{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(clamp(20px,5vw,56px),calc((100% - min(1000px,88vw))/2));scrollbar-width:none;touch-action:pan-x pan-y;outline-offset:-6px}.film-gallery::-webkit-scrollbar{display:none}.film-track{display:flex;gap:20px;width:max-content;padding-inline:max(clamp(20px,5vw,56px),calc((100vw - min(1000px,88vw))/2))}.film-card{position:relative;isolation:isolate;flex:0 0 auto;width:min(1000px,88vw);height:clamp(520px,54vw,580px);scroll-snap-align:center;border-radius:28px;overflow:hidden;background:#102945;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));grid-auto-rows:auto minmax(0,1fr);opacity:1;transform:scale(1);transition:opacity .6s,transform .65s var(--motion-ease);border:1px solid #ffffff10}.motion-ready .film-card{opacity:.45;transform:scale(.97)}.motion-ready .film-card.is-active{opacity:1;transform:scale(1)}.film-card-copy{padding:clamp(24px,3vw,44px);position:relative;z-index:1;display:flex;align-items:start;flex-direction:column;background:linear-gradient(125deg,#12324f,#091b30)}.film-card-copy>.micro{margin:0 0 auto;color:#9ebff7}.film-card h3{margin:28px 0 16px;font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.04em}.film-card-copy>p:not(.micro){max-width:320px;font-size:16px;line-height:1.5;color:#c4d5f7}.film-badge{display:block;margin-top:auto;padding-top:28px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#99aec7}.film-picture{position:relative;height:100%;min-width:0;min-height:0;background:#18334b}.chapter-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 37%}.motion-ready .chapter-video{pointer-events:none}.film-glas .film-card-copy{background:linear-gradient(140deg,#163ba5,#0b214d)}.film-fassade .film-card-copy{background:linear-gradient(140deg,#263c4a,#0d1c29)}.film-fassade .chapter-video{object-position:50% 47%}.film-control-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;margin-top:28px}.film-controls{display:flex;align-items:center;gap:10px}.film-controls .round-button{background:#1b2a3b;color:#fff;width:44px;height:44px;font-size:15px}.film-controls .round-button:hover{background:#314258}.film-pills{display:flex;gap:4px;border-radius:999px;padding:5px;background:#1b2a3b}.film-select{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:#bcc8d8;min-height:40px;border-radius:999px;padding:0 20px;font-size:14px;font-weight:500;min-width:92px;transition:background .25s,color .25s}.film-select[aria-pressed=true]{color:#071a2f;background:#f1f5fc}.film-progress{position:absolute;inset:0;background:#b7d0ff;transform:scaleX(var(--film-progress,0));transform-origin:left;z-index:-1;will-change:transform}.film-select[aria-pressed=false] .film-progress{display:none}.film-play{font-weight:600;margin:0}.film-state{font-size:13px;color:#8fa0b5;text-align:center;margin:0;line-height:1.5;text-wrap:balance}.rail-animating{scroll-snap-type:none!important}.is-dragging{cursor:grabbing!important;user-select:none}.film-gallery{cursor:grab}.film-gallery button{cursor:pointer}
/* Phones: the film fills the whole card and the copy lies on it under a gradient, the label as a glass chip. 86vw cards let the next film peek in at the edge. */
@media(max-width:600px){.film-track{gap:14px;padding-inline:7vw}.film-gallery{scroll-padding-inline:7vw}.film-card{width:86vw;height:550px;display:block}.film-picture{position:absolute;inset:0;z-index:-1}.film-card-copy{min-height:100%;padding:28px;background:linear-gradient(0deg,#041326f2 0%,#041326a8 32%,#04132608 78%,#04132680 100%)}.film-glas .film-card-copy,.film-fassade .film-card-copy{background:linear-gradient(0deg,#041326f5 0%,#041326a8 34%,#04132605 75%,#04132690)}.film-card-copy>.micro{align-self:start;padding:7px 12px;border:1px solid #ffffff38;border-radius:999px;background:#071a2f7a;color:#e5edfa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.film-card h3{margin:150px 0 16px;font-size:46px}.film-card-copy>p:not(.micro){color:#d6e0ee}.film-badge{margin-top:0;padding-top:20px;color:#a6bad3}}
@media(max-width:360px){.film-card{height:510px}.film-card-copy{padding:25px}.film-card h3{margin-top:120px;font-size:42px}}
/* Oversized statement, with progressive word colour while reading. The light chapter overlaps the hero by its corner radius. */.intro{display:block;position:relative;z-index:2;margin-top:-40px;border-radius:40px 40px 0 0;background:white;padding:clamp(88px,11vw,150px) 0 clamp(72px,8vw,120px)}.scroll-statement{text-align:center;font-size:clamp(38px,6vw,92px);line-height:1.08;letter-spacing:-.05em}.scroll-statement>span{display:block;color:var(--ink)}.motion-ready .scroll-statement>span{width:fit-content;margin-inline:auto;padding-right:.06em;background:linear-gradient(90deg,var(--ink) var(--word-fill,100%),#b4beca var(--word-fill,100%));background-clip:text;-webkit-background-clip:text;color:transparent}.motion-ready .scroll-statement>span:last-child{background-image:linear-gradient(90deg,var(--blue) var(--word-fill,100%),#b4beca var(--word-fill,100%))}.intro .intro-columns{max-width:820px;margin:clamp(36px,4vw,56px) auto 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px 48px;font-size:17px;line-height:1.55}
/* Bigger photography, more distinct transitions between chapters. */.round-button{width:48px;height:48px}.contact form{margin-top:20px}footer{background:var(--cinema)}#detail-dialog[open]{animation:motion-dialog-in .55s var(--motion-ease) both}#detail-dialog::backdrop{background:#020b17cf;backdrop-filter:blur(14px)}@keyframes motion-dialog-in{from{opacity:0;transform:translateY(52px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:600px){.motion-hero .hero-media{clip-path:inset(var(--hero-inset-y,12px) var(--hero-inset-x,12px) round var(--hero-radius,28px))}.contact form{margin-top:0}.reveal-pending{transform:translateY(28px)}.reveal-in{transition-duration:.8s}#detail-dialog[open]{animation-duration:.45s}}
@media(prefers-reduced-motion:reduce){.js .motion-hero{height:auto}.js .hero-stage{position:relative;top:0;min-height:560px}.motion-hero .hero-media{clip-path:none!important}.motion-hero .hero-photo{transform:none!important}.hero-copy{opacity:1!important;transform:translateY(-50%)!important}.hero-endline{display:none}.scroll-statement>span{background:none!important;color:var(--ink)!important}.scroll-statement>span:last-child{color:var(--blue)!important}.film-card{transform:none!important}.reveal-pending{opacity:1;transform:none}#detail-dialog[open]{animation:none}.hero-media,.hero-photo,.hero-copy{will-change:auto}}
@media print{.js .motion-hero{height:auto}.js .hero-stage{position:relative;top:0;height:700px}.hero-copy{opacity:1!important;transform:translateY(-50%)!important}.hero-media{clip-path:none!important}.hero-endline,.film-controls{display:none!important}.hero-stage{print-color-adjust:exact}.films{print-color-adjust:exact}.film-gallery{overflow:visible}.film-track{display:block;width:100%;padding:0}.film-card{width:100%;opacity:1!important;transform:none!important;break-inside:avoid;margin-bottom:25px}.scroll-statement>span{background:none!important;color:var(--ink)!important}.intro{border-radius:0}}

/* Höhenarbeiten: the picture climbs the façade with the scroll – from the ground past the platform up to the roof, one step at a
   time, then the closing line. Without motion (reduced motion, no JS, print): one still picture with the three steps below it. */
.lift{position:relative;z-index:1;margin-top:-40px;border-radius:40px 40px 0 0;background:var(--cinema);color:#fff;padding-block:clamp(80px,10vw,144px)}
.lift .frame-heading h2 span,.lift-outro h3 span{color:#93b7ff}
.lift .frame-heading p:not(.eyebrow){color:#b3c0cf}
.lift-stage{position:relative;width:min(1200px,calc(100% - clamp(40px,10vw,112px)));margin-inline:auto}
.lift-media{position:relative;height:clamp(420px,56vw,680px);overflow:hidden;border-radius:28px;background:#0c1d31}
.lift-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.lift-shade,.lift-dim,.lift-meter,.lift-finale{display:none}
.lift-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;margin:40px 0 0;padding:0;list-style:none}
.lift-beat+.lift-beat{margin-top:0}
.lift-beat p{max-width:340px;font-size:17px;line-height:1.47;color:#a7b6c9}
.lift-beat strong{font-weight:600;color:#fff}
.lift-outro{margin-top:clamp(72px,9vw,128px);text-align:center}
.lift-outro h3{font-size:clamp(32px,4vw,56px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.lift-outro>p{max-width:540px;margin:22px auto 0;font-size:clamp(17px,1.5vw,19px);line-height:1.47;color:#a7b6c9;text-wrap:balance}
.lift-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;margin-top:36px}
.lift-film{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-size:17px;color:#93b7ff;transition:color .2s}
.lift-play{position:relative;flex-shrink:0;width:32px;height:32px;border:1.5px solid;border-radius:50%}
.lift-play::after{content:"";position:absolute;left:50%;top:50%;margin:-5px 0 0 -2.5px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
/* Height line beside the steps: it fills from the bottom dot (Zugang) to the top dot (Ausführung). */
.lift-track{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#ffffff40}
.lift-fill{position:absolute;inset:0;background:#fff;transform-origin:50% 100%;transform:scaleY(var(--lift-meter,0))}
.lift-mark{position:absolute;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#6f7f93;box-shadow:0 0 0 3px #040e1b59;transition:background-color .3s}
.lift-mark[data-step="0"]{top:100%}
.lift-mark[data-step="1"]{top:50%}
.lift-mark[data-step="2"]{top:0}
.lift-mark.is-on{background:#fff}
@media(hover:hover){.lift-film:hover{color:#c7d9ff}}

/* The scroll scene: a sticky stage; motion.js supplies the values. Until its first frame the photo rests on its lower edge. */
@media screen and (prefers-reduced-motion:no-preference){
.motion-ready .lift-scene{height:260svh}
.motion-ready .lift-stage{--edge:max(64px,calc((100% - 1200px)/2 + 48px));position:sticky;top:var(--nav-height);width:100%;height:calc(100svh - var(--nav-height));overflow:hidden}
.motion-ready .lift-media{position:absolute;inset:0;height:auto;border-radius:0;clip-path:inset(var(--lift-inset-y,28px) var(--lift-inset-x,max(20px,calc((100% - 1200px)/2))) round var(--lift-radius,28px));will-change:clip-path}
.motion-ready .lift-photo{inset:auto auto 0 0;width:var(--lift-img-w,100%);height:var(--lift-img-h,auto);min-height:100%;max-width:none;transform:translate3d(var(--lift-x,0px),var(--lift-y,0px),0);will-change:transform}
.motion-ready .lift-shade{display:block;position:absolute;inset:0;background:linear-gradient(0deg,#040e1bd9 0%,#040e1b66 32%,#040e1b00 60%);pointer-events:none}
.motion-ready .lift-dim{display:block;position:absolute;inset:0;background:#040e1b;opacity:var(--lift-dim,0);pointer-events:none}
.motion-ready .lift-beats{display:block;position:absolute;left:var(--edge);bottom:clamp(40px,9svh,96px);width:min(560px,calc(100% - 2*var(--edge)));margin:0}
.motion-ready .lift-beat{position:absolute;left:0;right:0;bottom:0;opacity:var(--lift-show,0);transform:translateY(var(--lift-shift,24px))}
.motion-ready .lift-beat p{max-width:none;font-size:clamp(21px,2.1vw,28px);line-height:1.28;letter-spacing:-.015em;color:#c3cfdd}
.motion-ready .lift-meter{display:block;position:absolute;left:calc(var(--edge) - 36px);bottom:clamp(44px,9svh,100px);width:2px;height:clamp(120px,22svh,190px);opacity:var(--lift-ui,0);pointer-events:none}
.motion-ready .lift-finale{display:block;position:absolute;left:var(--edge);right:var(--edge);bottom:20%;font-size:clamp(52px,7vw,108px);font-weight:600;line-height:1.04;letter-spacing:-.06em;color:#fff;opacity:var(--lift-end,0);transform:translateY(calc((1 - var(--lift-end,0))*30px));pointer-events:none}
}
@media(max-width:860px){.lift-beats{grid-template-columns:1fr;gap:16px;max-width:520px}}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:860px){.motion-ready .lift-stage{--edge:clamp(24px,5vw,48px)}.motion-ready .lift-meter{display:none}}
@media(max-width:600px){.lift-media{height:min(125vw,560px)}.lift-outro h3{font-size:34px}.lift-outro>p{font-size:16px}}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:600px){.motion-ready .lift-scene{height:230svh}.motion-ready .lift-beats{bottom:36px}.motion-ready .lift-beat p{font-size:19px;line-height:1.35}.motion-ready .lift-finale{bottom:22%;font-size:clamp(44px,13vw,60px)}}
/* Process chapter: a pinned drawing of one facade follows the four steps – read, sampled, cleaned pane by pane, protected. */
/* Registered as not inherited: motion.js changes both on .process in every frame of the entry and exit, and as plain
   custom properties they were inherited, so every element in the chapter was restyled each frame. Only .process reads them. */
@property --process-inset{syntax:'<length>';inherits:false;initial-value:0px}@property --process-radius{syntax:'<length>';inherits:false;initial-value:0px}
.process{--process-stage:min(760px,calc(100svh - var(--nav-height) - 64px));--process-step:max(60svh,400px);--process-hold:32svh;position:relative;background:var(--cinema);color:#fff;padding-block:clamp(80px,10vw,144px);clip-path:inset(0 var(--process-inset,0px) round var(--process-radius,0px))}.process-heading{margin-bottom:clamp(40px,5vw,64px)}.process-heading h2{font-size:clamp(36px,4.6vw,64px);line-height:1.06;letter-spacing:-.03em}.process-heading h2 span{color:#93b7ff}.process-heading p:not(.eyebrow){max-width:360px;margin-top:22px;font-size:17px;line-height:1.55;color:#b3c0cf}.process-chapters{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,110px);align-items:start}.process-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(44px,5vw,64px)}.process-step{will-change:opacity}.process-num{display:block;margin-bottom:18px;font-size:13px;font-weight:600;letter-spacing:.14em;color:#8ab0f8;font-variant-numeric:tabular-nums}.process-step h3{font-size:clamp(34px,3.5vw,52px);line-height:1.05;letter-spacing:-.055em}.process-step p{margin-top:18px;max-width:390px;font-size:17px;line-height:1.6;color:#b3c0cf}.process-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}.process-art{position:relative;width:100%;aspect-ratio:640/760}.process-drawing{display:block;width:100%;height:100%;overflow:visible}.process-drawing [pathLength]{stroke-dasharray:1}.process-label{position:absolute;left:var(--label-x);top:var(--label-y);transform:translateY(-50%);opacity:0;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#dce6f4;white-space:nowrap;pointer-events:none}.process-label[data-side=end]{transform:translate(-100%,-50%)}.process-label[data-label=schutz]{opacity:1;color:#b9d0ff}.process-meter{display:none;gap:8px;align-items:center;justify-content:center;height:26px}.process-meter>span{position:relative;width:8px;height:8px;border-radius:8px;background:#ffffff38;overflow:hidden;transition:width .5s var(--motion-ease)}.process-meter>span.is-current{width:40px}.process-meter>span::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(var(--meter-fill,0));transform-origin:left}.process-end{display:flex;justify-content:center;margin-top:clamp(64px,8vw,110px)}
/* With motion the drawing stays pinned while the steps pass its centre line. On wide screens the last step and the finished
   drawing then hold together for a moment, so the end reads as the end; phones pin the drawing below the navigation. */
@media(min-width:851px) and (prefers-reduced-motion:no-preference){.motion-ready .process-steps{display:block;padding-block:max(0px,calc((var(--process-stage) - var(--process-step))/2))}.motion-ready .process-steps::after{content:"";display:block;height:var(--process-hold)}.motion-ready .process-step{display:flex;flex-direction:column;justify-content:center;min-height:var(--process-step)}.motion-ready .process-step:last-child{position:sticky;top:calc((100svh + var(--nav-height) - var(--process-step))/2)}.motion-ready .process-stage{position:sticky;top:calc(var(--nav-height) + (100svh - var(--nav-height) - var(--process-stage))/2);height:var(--process-stage);justify-content:center}.motion-ready .process-art{width:min(100%,calc((var(--process-stage) - 40px)*640/760))}.motion-ready .process-meter{display:flex}}@media(max-width:1100px){.process-step p{font-size:16px}.process-label{font-size:13px}}@media(max-width:850px){.process{--process-stage:min(52svh,600px)}.process-chapters{grid-template-columns:minmax(0,1fr);gap:36px}.process-stage{order:-1}.process-art{width:min(100%,420px)}.process-label{font-size:12px}}@media(max-width:850px) and (prefers-reduced-motion:no-preference){.motion-ready .process-stage{position:sticky;top:var(--nav-height);z-index:1;height:var(--process-stage);padding-top:10px;background:var(--cinema)}.motion-ready .process-art{width:min(100%,calc((var(--process-stage) - 46px)*640/760))}.motion-ready .process-meter{display:flex}.motion-ready .process-steps{gap:0}.motion-ready .process-step{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--nav-height) - var(--process-stage))}}@media(max-width:600px){.process-num{margin-bottom:12px}.process-step h3{font-size:36px}.process-step p{margin-top:12px;font-size:15px}.process-label{font-size:12px}}@media(max-width:850px) and (max-height:700px){.process{--process-stage:46svh}.process-step h3{font-size:32px}}@media print{.process{clip-path:none;print-color-adjust:exact}.motion-ready .process-steps{display:grid;padding-block:0;gap:40px}.motion-ready .process-steps::after{display:none}.motion-ready .process-step{position:static;min-height:0;opacity:1!important}.motion-ready .process-stage{position:relative;top:0}}