/* AB Bau — cinematic opening. Scoped to .cine-page; colours are the tokens of style.css
   (--paper #f6f8fb, --dark #17344f, --ink #233b50, --accent #b9d4ee, --muted #5b6d7e, --line #cbd7e2). */
.cine-page .header{position:absolute;inset:0 0 auto;z-index:30;background:transparent;color:var(--dark)}
.cine-page .header nav a{color:var(--dark)}
.cine-page .header .brand-place{color:var(--muted);border-left-color:var(--line)}
.cine-page .header .nav-contact{border-color:var(--line)}
@media(hover:hover) and (pointer:fine){.cine-page .header nav a:hover{color:var(--muted)}}
@media(max-width:700px){.cine-page .header .menu-toggle{color:var(--dark)}.cine-page .header nav{background:var(--dark)}.cine-page .header nav a{color:var(--paper)}}

.cine{position:relative;height:440vh;background:var(--paper)}
.cine-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.cine-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cine-stage::before{content:"";position:absolute;inset:0 0 auto;height:150px;z-index:1;pointer-events:none;background:linear-gradient(#f6f8fbf2 0,#f6f8fb99 55%,#f6f8fb00)}
.cine-stage>*:not(canvas){z-index:2}
.cine-stage::after{content:"";position:absolute;inset:auto 0 0;height:140px;z-index:1;pointer-events:none;background:linear-gradient(#f6f8fb00,#f6f8fbf0 70%,#f6f8fb)}   /* the sheet runs on into the page */
.cine-fallback{display:none}
.cine-nogl .cine-fallback{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* opening statement: right of the house, the drawing steps back behind it (see uQuiet in the shader) */
.cine-copy{--out:0;position:absolute;right:var(--gutter);top:50%;width:min(460px,34vw);transform:translateY(calc(-46% - var(--out) * 9vh));opacity:calc(1 - var(--out) * 1.15);color:var(--dark)}
.cine-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.cine-copy h1{font-family:Editorial,Georgia,serif;font-weight:400;font-size:clamp(48px,5.4vw,90px);line-height:.98;letter-spacing:-.01em;margin:18px 0 0}
.cine-copy h1 em{font-style:italic;color:var(--ink)}
.cine-copy h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.cine-copy h1 .l>span,.cine-copy h1 .l>em{display:inline-block}
.cine-lede{font-size:18px;line-height:1.55;margin:24px 0 30px;color:var(--ink)}
.cine-cta{display:inline-flex;align-items:center;gap:18px;padding:15px 22px;border-radius:40px;font-size:14px;color:var(--paper);background:var(--dark);transition:background-color 180ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.cine-cta:active,.cine-replay:active{transform:scale(.97)}
.cine-cta .arrow{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.cine-cta svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.cine-cta:hover{background:var(--ink)}.cine-cta:hover .arrow{transform:translate(2px,-2px)}}

.cine-final{--in:0;position:absolute;right:var(--gutter);bottom:58px;transform:translateY(calc((1 - var(--in)) * 12px));opacity:var(--in)}

/* discreet scroll indicator: one thin brand-blue line, no labels */
.cine-progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;height:1px;background:var(--line)}
.cine-progress i{position:absolute;inset:0;background:var(--dark);transform-origin:left;transform:scaleX(0)}
.cine-skip{position:absolute;right:var(--gutter);bottom:34px;font-size:12px;line-height:20px;letter-spacing:.06em;color:var(--muted);padding:10px 0;opacity:calc(1 - var(--end,0))}
.cine-note{position:absolute;left:var(--gutter);bottom:34px;margin:0;padding:10px 0;font-size:12px;line-height:20px;letter-spacing:.06em;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.cine-skip:hover{color:var(--dark)}}
.cine-skip{transition:color 150ms ease}
.cine-cta:focus-visible,.cine-replay:focus-visible,.cine-skip:focus-visible{outline:2px solid var(--dark);outline-offset:4px}

.cine-loading{--p:0;position:absolute;left:50%;top:50%;width:160px;height:1px;margin-left:-80px;background:var(--line);opacity:0;transition:opacity 300ms ease-out}
.cine-loading::after{content:"";position:absolute;inset:0;background:var(--dark);transform:scaleX(var(--p));transform-origin:left}
.is-loading .cine-loading{opacity:1}
.cine-replay{display:none}

/* mobile: the same scroll-driven sheet as desktop, full screen, no box. The drawing sits in a band that
   dissolves into the white page above and below; the headline rests on the paper above it and leaves on scroll. */
@media(max-width:820px),(pointer:coarse) and (orientation:portrait){   /* phones, and tablets held upright */
  .cine{height:370vh}
  .cine-copy{right:var(--gutter);left:var(--gutter);top:104px;width:auto;transform:none}
  .cine-copy h1{font-size:clamp(40px,11.5vw,60px);margin-top:12px}
  .cine-copy .cine-lede,.cine-copy .cine-cta{display:none}
  .cine-final{left:var(--gutter);right:var(--gutter);bottom:84px;display:flex;justify-content:center}
  .cine-note{font-size:11px}
  .cine-skip{font-size:11px}
}
/* reduced motion: no pinned scroll, finished state shown statically with the opening copy */
@media(prefers-reduced-motion:reduce){.cine{height:auto}.cine-stage{position:relative;height:100svh}.cine-copy h1 .l>*{transform:none;transition:none}}
.is-reduced.cine{height:auto}
.is-reduced .cine-stage{position:relative;height:100svh}
.is-reduced .cine-copy h1 .l>*{transform:none;transition:none}
.is-reduced .cine-skip,.is-reduced .cine-progress{display:none}

/* opening dimensions: thin ink lines, small tabular figures, always straight */
.cine-dims{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.cine-dims line{stroke:var(--ink);stroke-width:.9;opacity:.85}
.cine-dims line.ext{stroke:var(--ink);stroke-width:.6;opacity:.45;stroke-dasharray:3 3}
.cine-dims line.tk{stroke:var(--dark);stroke-width:1.3;opacity:1}
.cine-dims text{font:500 11px/1 Manrope,sans-serif;letter-spacing:.02em;fill:var(--dark);font-variant-numeric:tabular-nums}
.cine-dims text.mid{text-anchor:middle}.cine-dims text.end{text-anchor:end}.cine-dims text.start{text-anchor:start}

/* Leistungen: the three services as before the premium restyling (style.css values), static and always visible.
   Scoped to the demo page so premium.css (.premium-home .service-row) no longer turns them into scroll panels. */
.cine-page .services .service-row{display:grid;grid-template-columns:1fr 1.3fr .9fr;align-items:start;gap:5vw;padding:34px 0;border-top:1px solid var(--line)}
.cine-page .services .service-row h3{font-size:36px;margin:0}
.cine-page .services .service-row p{font-size:14px;line-height:inherit;margin:0;color:var(--muted)}
.cine-page .services .service-row .text-link{justify-self:end;white-space:nowrap;margin-top:3px}
@media(max-width:1000px){.cine-page .services .service-row{grid-template-columns:1fr 1.3fr;gap:25px}.cine-page .services .service-row .text-link{grid-column:2;justify-self:start}}
@media(max-width:700px){.cine-page .services .service-row{display:block;padding:26px 0}.cine-page .services .service-row h3{font-size:33px}.cine-page .services .service-row p{margin:15px 0}}

.cine-replay{transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 180ms ease}
@media(prefers-reduced-motion:reduce){.cine-cta,.cine-replay,.cine-cta .arrow{transition:background-color 180ms ease}}

/* ---- the rest of the page speaks the language of the drawing ---- */
/* the strip under the hero reads as the caption line of the sheet, not as a dark band */
.cine-page .service-strip{background:transparent;color:var(--ink);margin:0 var(--gutter);padding:22px 0;border-bottom:1px solid var(--line);font-size:13px}
.cine-page .service-strip>span:first-child{color:var(--muted)}
/* dimension lines (a rule with end ticks, as in the plan) instead of plain borders */
.cine-page .services .service-row,.cine-page .process li{border-top:0;background:linear-gradient(var(--line),var(--line)) 0 4px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 9px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 9px no-repeat}
/* small ink vignettes from the same drawing for each service */
.cine-page .service-sketch{width:min(260px,100%);height:auto;margin-top:24px;mix-blend-mode:multiply}
@media(max-width:700px){.cine-page .service-strip{padding:18px 0}.cine-page .service-sketch{width:min(320px,100%);margin:18px 0 4px}}
/* reduced motion, desktop: the finished house on the left fades out before the headline column */
@media(min-width:821px) and (pointer:fine){.is-reduced .cine-canvas{-webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 64%);mask-image:linear-gradient(90deg,#000 48%,transparent 64%)}}
/* project photos as sheets of a technical drawing — fine navy border, corner marks, title block */
.cine-page .project-grid figure{position:relative;padding:12px;border:1px solid #17344f33;background:#fbfcfd}
.cine-page .project-grid figure::after{content:"";position:absolute;inset:-6px;pointer-events:none;
  background:linear-gradient(var(--dark),var(--dark)) 0 0/16px 1px no-repeat,linear-gradient(var(--dark),var(--dark)) 0 0/1px 16px no-repeat,
  linear-gradient(var(--dark),var(--dark)) 100% 0/16px 1px no-repeat,linear-gradient(var(--dark),var(--dark)) 100% 0/1px 16px no-repeat,
  linear-gradient(var(--dark),var(--dark)) 0 100%/16px 1px no-repeat,linear-gradient(var(--dark),var(--dark)) 0 100%/1px 16px no-repeat,
  linear-gradient(var(--dark),var(--dark)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--dark),var(--dark)) 100% 100%/1px 16px no-repeat}
.cine-page .project-grid figcaption{flex-direction:row;justify-content:space-between;align-items:baseline;gap:20px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid #17344f33}
.cine-page .project-grid figcaption span:first-child{font-family:Editorial,serif;font-size:19px;color:var(--dark)}
.cine-page .project-grid figcaption span:last-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cine-page .phase-images{outline:1px solid #17344f33;outline-offset:11px}
@media(min-width:1000px){.cine-page .project-grid{margin-left:0;margin-right:0}}
.cine-page .project-grid figcaption{border-bottom:0;padding-bottom:0}
@media(max-width:700px){.cine-page .project-grid figure{padding:9px}.cine-page .project-grid figcaption{flex-direction:column;gap:4px}.cine-page .project-grid figcaption span:first-child{font-size:18px}}
.cine-page .project-window{clip-path:none}   /* sheets arrive with opacity + rise (motion-home.js), not a repainting mask */
.cine-page .portfolio .video-open{position:static;width:fit-content;margin:-25px 0 55px auto;border-color:var(--line)}   /* the film, formerly in the old hero, now opens from Einblicke */
@media(max-width:700px){.cine-page .portfolio .video-open{margin:0 0 34px}}
/* phone or tablet held sideways: the desktop layout (house left, headline right) on a short screen, compact header */
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .cine-page .header{padding:10px max(var(--gutter),env(safe-area-inset-right)) 10px max(var(--gutter),env(safe-area-inset-left))}
  .cine-page .brand-logo{width:96px;padding:6px 8px;border-radius:11px}
  .cine-page .brand-place{display:none}
  .cine-page .menu-toggle{display:flex;align-items:center;gap:14px;padding:10px 0;min-height:44px;border:0;background:transparent;color:var(--dark);font-size:14px}
  .cine-page .menu-toggle span{width:22px;height:9px;border-top:1px solid;border-bottom:1px solid}
  .cine-page .header nav{display:none;position:absolute;top:64px;left:0;right:0;z-index:5;background:var(--dark);padding:14px var(--gutter);flex-flow:row wrap;gap:6px 26px;align-items:center}
  .cine-page .header nav.open{display:flex}
  .cine-page .header nav a{color:var(--paper)}
  .cine-stage::before{height:64px}
  .cine-stage::after{height:56px}   /* the paper veils must not cover a short screen */
  .cine-copy{left:auto;right:max(var(--gutter),env(safe-area-inset-right));top:52%;width:min(40vw,400px)}
  .cine-copy h1{font-size:clamp(26px,9vh,42px);margin-top:6px}
  .cine-copy .cine-lede,.cine-copy .cine-cta{display:none}
  .cine-final{left:auto;right:max(var(--gutter),env(safe-area-inset-right));bottom:50px}
}
/* tablets held upright keep the full header (taller than on phones): the headline starts below it */
@media (pointer:coarse) and (orientation:portrait) and (min-width:701px){
  .cine-copy{top:142px}
}