/* This scene is entirely confined to the existing work section. */
#qualitaet.work-section{overflow:clip}
#qualitaet .cinema-story{--cinema-progress:0;--cinema-scale:1;position:relative;margin-top:28px;background:#f0f3ef}
#qualitaet .cinema-stage{position:sticky;top:64px;height:calc(100svh - 64px);min-height:630px;max-height:1000px;overflow:hidden;isolation:isolate;background:#f0f3ef;color:#173b35}
#qualitaet .cinema-stage.cinema-dark{background:#182923;color:#f0f5ed}
#qualitaet .cinema-topline,#qualitaet .cinema-bottom{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px}
#qualitaet .cinema-topline{top:24px;font-size:11px;letter-spacing:.08em;border-bottom:1px solid #839e9155;padding-bottom:14px}
#qualitaet .cinema-bottom{bottom:20px}
#qualitaet .cinema-title{position:absolute;top:80px;left:20px;right:20px;text-align:center;z-index:4;pointer-events:none}
#qualitaet .cinema-title p{font-size:10px;letter-spacing:.16em;margin:0 0 10px}
#qualitaet .cinema-title h3{font-size:clamp(32px,4.5vw,64px);font-weight:500;line-height:.98;letter-spacing:-.05em;margin:0}
#qualitaet .cinema-title h3 br{display:none}
#qualitaet .cinema-title h3 em{font-family:Georgia,serif;font-style:italic;font-weight:400;margin-left:.15em;color:inherit}
#qualitaet .cinema-scene{position:absolute;inset:185px 0 90px;display:flex;align-items:center;justify-content:center;transform:scale(var(--cinema-scale));transform-origin:center}
#qualitaet .cinema-story .project-video-grid.single-film{position:relative;width:auto;min-height:0;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:0;overflow:visible}
#qualitaet .cinema-story .project-video{position:relative;width:auto;height:100%;max-height:650px;aspect-ratio:9/16;flex:none;margin:0;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none;transform:scale(.97);transition:transform .55s cubic-bezier(.2,.7,.2,1);overflow:visible}
#qualitaet .cinema-story .project-video.video-preview-active{transform:scale(1)}
#qualitaet .cinema-story video{display:block;width:100%;height:100%;max-height:none;aspect-ratio:9/16;object-fit:contain;border-radius:0;background:#092b3b;box-shadow:0 20px 70px #092b3b18}
#qualitaet .cinema-glass{position:absolute;inset:-30px -70px;width:calc(100% + 140px);height:calc(100% + 60px);pointer-events:none;z-index:2}
#qualitaet .cinema-film-caption{position:absolute;inset:auto 0 -28px;padding:0;font-size:10px;letter-spacing:.05em;text-align:center;color:inherit;background:none;pointer-events:none}
#qualitaet .cinema-bottom button{min-height:44px;border:1px solid #73958b77;border-radius:999px;padding:10px 16px;background:transparent;color:inherit;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:0;width:auto;margin:0}
#qualitaet .cinema-bottom .video-sound[aria-pressed=true]{background:#b8e7d4;color:#143b2d}
#qualitaet .cinema-motion{display:inline-flex;align-items:center;gap:16px}
#qualitaet .cinema-contour{position:absolute;left:50%;top:52%;width:min(85vw,1200px);height:125%;border:1px solid currentColor;opacity:.07;border-radius:45%;transform:translate(-50%,-50%) rotate(-24deg);pointer-events:none}
#qualitaet .contour-two{height:80%;width:110%;transform:translate(-50%,-50%) rotate(20deg)}
#qualitaet .cinema-scroll-space{height:40svh;pointer-events:none}
#qualitaet .cinema-statement{position:relative;z-index:8;text-align:center;padding:100px 24px 110px;color:#f0f5ed;background:#182923}
#qualitaet .cinema-statement p{font-size:11px;letter-spacing:.12em;color:#bbd3c7;margin:0 0 24px}
#qualitaet .cinema-statement h3{font-size:clamp(38px,5.5vw,76px);line-height:1.03;font-weight:500;letter-spacing:-.05em;margin:0 0 36px}
#qualitaet .cinema-statement em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#b7e7cc}
#qualitaet .cinema-photos-link{font-size:14px;display:inline-flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid #f0f5ed66}
@media(max-width:600px){
 #qualitaet .cinema-stage{height:calc(100svh - 64px);min-height:550px}
 #qualitaet .cinema-topline{top:20px;font-size:10px;letter-spacing:.03em}
 #qualitaet .cinema-title{top:74px}
 #qualitaet .cinema-title p{font-size:10px;margin-bottom:11px}
 #qualitaet .cinema-title h3{font-size:35px}
 #qualitaet .cinema-title h3 br{display:block}
 #qualitaet .cinema-title h3 em{display:block;margin:4px 0 0}
 #qualitaet .cinema-scene{inset:190px 0 90px}
 #qualitaet .cinema-story .project-video{max-width:70vw}
 #qualitaet .cinema-glass{inset:-25px -45px;width:calc(100% + 90px);height:calc(100% + 50px)}
 #qualitaet .cinema-bottom{left:16px;right:16px;bottom:16px;gap:8px}
 #qualitaet .cinema-bottom button{font-size:11px;padding:10px 13px}
 #qualitaet .cinema-film-caption{font-size:10px;bottom:-26px}
 #qualitaet .cinema-scroll-space{height:32svh}
 #qualitaet .cinema-statement{padding:75px 24px 85px}
}
@media(max-height:580px) and (min-width:601px){#qualitaet .cinema-stage{position:relative;top:0;height:700px}#qualitaet .cinema-scroll-space{display:none}}
@media(prefers-reduced-motion:reduce){#qualitaet .cinema-stage{position:relative;top:0}#qualitaet .cinema-scroll-space{display:none}#qualitaet .cinema-scene{transform:none}#qualitaet .cinema-motion{display:none}#qualitaet .cinema-story .project-video{transition:none;transform:none}}
/* A continuous editorial chapter, built from the supplied project photographs. */
#qualitaet{padding-bottom:0;background:#f4f4ef}
#qualitaet>.section-intro{padding:40px 24px 12px}
#qualitaet .cinema-story{margin-top:0;background:#f4f4ef}
#qualitaet .cinema-stage{background:#f4f4ef;transition:background-color .65s,color .65s}
#qualitaet .cinema-title h3{font-size:clamp(36px,5vw,72px)}
#qualitaet .cinema-title{transform:translateY(calc(var(--cinema-progress,0) * -18px));opacity:calc(1 - var(--cinema-progress,0) * .45)}
#qualitaet .cinema-scene{transform:translateY(calc(var(--cinema-progress,0) * -14px)) scale(var(--cinema-scale));will-change:transform}
#qualitaet .cinema-statement{padding:120px 24px 135px;background:#182923}
#qualitaet .cinema-statement h3{font-size:clamp(42px,7vw,100px)}
#qualitaet .project-journal{background:#f4f4ef;color:#163c36;padding:110px clamp(22px,6vw,100px) 0;scroll-margin-top:80px}
#qualitaet .journal-intro{max-width:1400px;margin:auto auto 100px}
#qualitaet .journal-kicker,#qualitaet .journal-context>span,#qualitaet .journal-note>span,#qualitaet .journal-end>span{font-size:10px;letter-spacing:.14em}
#qualitaet .journal-intro h3{font-size:clamp(52px,8vw,116px);font-weight:500;line-height:.95;letter-spacing:-.065em;margin:35px 0 45px}
#qualitaet .journal-intro em,#qualitaet .journal-note em,#qualitaet .journal-end em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}
#qualitaet .journal-context{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;border-top:1px solid #163c3633;padding-top:20px}
#qualitaet .journal-context p{max-width:340px;font-size:15px;line-height:1.7;margin:0;color:#526861}
#qualitaet .journal-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:70px 9%;align-items:start}
#qualitaet .journal-photo{margin:0;min-width:0}
#qualitaet .journal-open{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:#dce3dc;overflow:hidden;cursor:zoom-in;color:white}
#qualitaet .journal-open img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s;transform:scale(1.015);filter:saturate(.8)}
#qualitaet .journal-open:hover img,#qualitaet .journal-open:focus-visible img{transform:scale(1.055);filter:saturate(1)}
#qualitaet .journal-open:focus-visible{outline:3px solid #0878b3;outline-offset:5px}
#qualitaet .journal-zoom{position:absolute;bottom:16px;right:16px;width:38px;height:38px;display:grid;place-items:center;border:1px solid #fff9;border-radius:50%;background:#163c364d;font-size:22px}
#qualitaet .journal-photo figcaption{position:static;background:none;color:inherit;padding:18px 0 0;display:block}
#qualitaet .journal-photo figcaption>span{font-size:10px;letter-spacing:.1em;color:#5a7067}
#qualitaet .journal-photo h4{font-size:clamp(18px,2vw,27px);font-weight:500;line-height:1.2;letter-spacing:-.035em;margin:8px 0 0}
#qualitaet .journal-photo-1{width:91%}
#qualitaet .journal-photo-1 img{aspect-ratio:16/10}
#qualitaet .journal-photo-2{margin-top:180px}
#qualitaet .journal-photo-2 img{aspect-ratio:4/5}
#qualitaet .journal-note{align-self:center;padding:20px 0 90px}
#qualitaet .journal-note p{font-size:clamp(27px,3.5vw,52px);line-height:1.08;letter-spacing:-.045em;margin:30px 0 0}
#qualitaet .journal-photo-3{width:82%;justify-self:end;margin-top:45px}
#qualitaet .journal-photo-4{grid-column:1 / 3;width:78%;margin-top:15px}
#qualitaet .journal-photo-4 img{aspect-ratio:16/10}
#qualitaet .journal-photo-5{width:78%;margin-top:100px}
#qualitaet .journal-photo-6{margin-top:15px}
#qualitaet .journal-photo-6 img{aspect-ratio:4/5}
#qualitaet .journal-end{max-width:1400px;margin:120px auto 0;padding:40px 0 100px;border-top:1px solid #163c3633}
#qualitaet .journal-end p{font-size:clamp(40px,6.5vw,88px);line-height:1.05;letter-spacing:-.055em;margin:35px 0}
#qualitaet .journal-end a{display:inline-flex;justify-content:space-between;gap:65px;align-items:center;min-height:48px;font-size:15px;border-bottom:1px solid #163c3666}
.project-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px clamp(20px,5vw,70px);border:0;background:#132b25;color:#f4f4ef;overflow:auto}
.project-viewer::backdrop{background:#132b25}
.project-viewer[open]{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.viewer-toolbar,.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}
.project-viewer button{border:1px solid #f4f4ef55;background:transparent;color:inherit;border-radius:30px;min-height:44px;min-width:48px;padding:10px 18px}
.project-viewer figure{margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;justify-content:center}
.project-viewer figure img{display:block;max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain}
.project-viewer figcaption{font-size:14px;text-align:center}
html.project-viewer-open{overflow:hidden}
@media(max-width:600px){
 #qualitaet .cinema-title h3{font-size:38px}
 #qualitaet .cinema-statement{padding:90px 22px 100px}
 #qualitaet .project-journal{padding:75px 20px 0}
 #qualitaet .journal-intro{margin-bottom:55px}
 #qualitaet .journal-intro h3{font-size:58px;margin:28px 0 32px}
 #qualitaet .journal-context{display:block}
 #qualitaet .journal-context p{font-size:14px;margin-top:18px;max-width:300px}
 #qualitaet .journal-grid{gap:38px 16px;grid-template-columns:1fr 1fr}
 #qualitaet .journal-photo-1{width:100%;grid-column:1 / 3;margin-right:12%;width:88%}
 #qualitaet .journal-photo-2{grid-column:2;margin-top:0}
 #qualitaet .journal-photo-2 img{aspect-ratio:3/4}
 #qualitaet .journal-note{grid-column:1;grid-row:2;padding:20px 0 0;align-self:start}
 #qualitaet .journal-note>span{font-size:8px;letter-spacing:.04em}
 #qualitaet .journal-note p{font-size:25px;margin-top:20px}
 #qualitaet .journal-photo-3{grid-column:1 / 3;justify-self:start;width:72%;margin-top:5px}
 #qualitaet .journal-photo-4{width:100%;margin-top:15px}
 #qualitaet .journal-photo-5{width:100%;margin-top:35px}
 #qualitaet .journal-photo-6{margin-top:85px}
 #qualitaet .journal-photo h4{font-size:17px}
 #qualitaet .journal-photo figcaption>span{font-size:8px;letter-spacing:.04em}
 #qualitaet .journal-photo figcaption{padding-top:12px}
 #qualitaet .journal-zoom{width:30px;height:30px;bottom:10px;right:10px;font-size:18px}
 #qualitaet .journal-end{margin-top:75px;padding:28px 0 70px}
 #qualitaet .journal-end p{font-size:43px}
}
@media(prefers-reduced-motion:reduce){#qualitaet .journal-open img,#qualitaet .cinema-stage{transition:none}#qualitaet .cinema-title,#qualitaet .cinema-scene{transform:none;opacity:1}}
/* The contour is a single morphing hairline underneath the entire photo story. */
#qualitaet .project-journal{position:relative;isolation:isolate;overflow:clip}
#qualitaet .journal-line{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
#qualitaet .journal-line path{fill:none;stroke:#4d7263;stroke-opacity:.24;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#qualitaet .project-journal>.journal-intro,#qualitaet .project-journal>.journal-grid,#qualitaet .project-journal>.journal-end{position:relative;z-index:1}
@media(max-width:600px){#qualitaet .journal-line path{stroke-width:1;stroke-opacity:.25}}
#qualitaet .journal-line path{stroke-opacity:.32}
#qualitaet .journal-motion{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;margin:0 0 8px;border:0;border-bottom:1px solid #163c3640;background:transparent;color:#526861;font-size:11px;letter-spacing:.02em;cursor:pointer}
#qualitaet .journal-motion:focus-visible{outline:2px solid #0878b3;outline-offset:5px}
/* One shared animated path, visible from the loader through every page chapter. */
.site-thread-source{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.site-thread-host{isolation:isolate}
.site-thread-position{position:relative}
.site-thread-content{z-index:1}
.site-thread-surface{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.site-thread-surface use{fill:none;stroke:#788276;stroke-opacity:.22;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cinema-stage.cinema-dark .site-thread-surface use,.cinema-statement .site-thread-surface use{stroke:#c3cfc6;stroke-opacity:.2}
.site-thread-surface use{vector-effect:non-scaling-stroke}
/* Titles approach first; photographs follow with a gap; the wide result rises last. */
.comparison-story{position:relative;height:210svh;margin:100px calc(-1 * clamp(22px,6vw,100px)) 0;z-index:1}
.comparison-stage{--pair-shift:110%;--title-shift:12%;--wide-lift:100%;position:relative;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate;background:#f4f4ef;color:#163c36}
.comparison-pair{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding-inline:12px;z-index:1}
.comparison-half{position:relative;min-width:0;height:100%;will-change:transform}
.comparison-before>img{transform:translate3d(calc(-1 * var(--pair-shift)),0,0)}
.comparison-before .comparison-heading{transform:translate3d(calc(-1 * var(--title-shift)),0,0)}
.comparison-after>img{transform:translate3d(var(--pair-shift),0,0)}
.comparison-after .comparison-heading{transform:translate3d(var(--title-shift),0,0)}
.comparison-heading{position:absolute;top:clamp(90px,14svh,150px);left:clamp(20px,6vw,100px);right:20px}
.comparison-heading>span{font-size:10px;letter-spacing:.13em}
.comparison-heading h3{font-size:clamp(45px,7.5vw,110px);font-weight:500;line-height:1;letter-spacing:-.065em;margin:15px 0}
.comparison-after h3{font-family:Georgia,serif;font-style:italic;font-weight:400}
.comparison-heading p{font-size:14px;max-width:220px;color:#526861}
.comparison-half>img{position:absolute;top:39%;left:0;display:block;width:100%;height:61%;object-fit:cover;object-position:center;filter:saturate(.85)}
.comparison-wide{position:absolute;z-index:3;inset:0;margin:0;overflow:hidden;transform:translate3d(0,var(--wide-lift),0);will-change:transform;background:#182923;display:flex;flex-direction:column}
.comparison-wide>img{display:block;width:100%;height:74%;flex:none;object-fit:cover;object-position:50% 60%}
.comparison-wide>figcaption{position:relative;inset:auto;padding:28px clamp(20px,5vw,80px);background:#182923;color:#f0f5ed;display:grid;grid-template-columns:1fr 1fr;gap:24px;flex:1;align-content:start}
.comparison-wide>figcaption strong{font-size:clamp(24px,3.3vw,48px);font-weight:500;line-height:1.05;letter-spacing:-.05em}
.comparison-wide>figcaption strong em{font-family:Georgia,serif;font-weight:400;font-style:italic;color:#c4ddce}
.comparison-wide>figcaption>span{font-size:14px;line-height:1.65;max-width:340px;letter-spacing:0}
@media(max-width:600px){
 .comparison-story{height:200svh;margin:75px -20px 0}
 .comparison-stage{min-height:560px}
 .comparison-heading{left:12px;right:8px;top:100px}
 .comparison-heading>span{font-size:8px;letter-spacing:.06em}
 .comparison-heading h3{font-size:clamp(28px,9vw,38px);margin:14px 0}
 .comparison-heading p{font-size:12px;max-width:150px;line-height:1.5}
 .comparison-half>img{top:40%;height:60%}
 .comparison-wide>figcaption{padding:24px 20px;gap:18px}
 .comparison-wide>figcaption>span{font-size:12px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.comparison-half,.comparison-wide{will-change:auto}}

/* The wide photograph becomes the next chapter rather than stopping below the titles. */
#qualitaet .journal-end{margin:0 calc(-1 * clamp(22px,6vw,100px));padding:65px clamp(22px,6vw,100px) 90px;max-width:none;background:#182923;color:#f0f5ed;border:0}
#qualitaet .journal-end a{border-color:#f0f5ed66}
#qualitaet .journal-end>span{color:#c4ddce}
#qualitaet .journal-end .site-thread-surface use{stroke:#c3cfc6;stroke-opacity:.2}
.site-header.on-dark .menu-toggle,.site-header.on-dark nav a{color:#f0f5ed}
.site-header.on-dark nav.open a{color:#163c36}
@media(max-width:600px){#qualitaet .journal-end{margin:0 -20px;padding:48px 20px 65px}}

.comparison-heading,.comparison-half>img,.comparison-wide{will-change:transform;backface-visibility:hidden}
.comparison-half{will-change:auto}