/* Project-only editorial layout. Shared hero, navigation and footer stay unchanged. */
/* Stable destinations and service backlinks; no change to the project galleries. */
.projects-page [id^="project-"]{scroll-margin-top:110px}
.project-service-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:16px}
.project-service-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.68rem;line-height:1.5;color:inherit;text-decoration:underline;text-underline-offset:4px}
.project-service-links a:hover{color:var(--orange)}
.project-service-links a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.works-featured{background:var(--paper);padding:clamp(64px,7vw,100px) 0}
.works-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;margin-bottom:52px}
.works-heading h2{font-size:clamp(3rem,5.5vw,5.3rem);line-height:1;margin:0}
.works-heading>p{max-width:350px;justify-self:end;color:#57544e;font-size:.9rem;line-height:1.65;margin:0 0 4px}
.works-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 40px}
.work{min-width:0}
.work-1,.work-4{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.work-media{min-width:0}
/* Project series reuse the full-width editorial work layout, without phase columns. */
.series-projects{display:grid;gap:64px}
.series-project{display:grid;gap:28px;min-width:0}
.series-project .work-copy{padding:0}
.series-main{height:clamp(440px,60svh,600px);overflow:hidden}
.series-main-image{display:block;min-width:0;max-width:100%;height:100%;width:100%;padding:0;border:0;background:transparent;overflow:hidden;cursor:pointer}
.series-main-image img{display:block;width:100%;height:100%;object-fit:contain}
.series-main-image picture,.series-preview picture{display:block;width:100%;height:100%}
.series-main[data-display=result] img{object-fit:cover;object-position:var(--result-position)}
.series-previews{display:grid;grid-template-columns:repeat(var(--preview-count),minmax(0,1fr));gap:16px;list-style:none;margin:16px 0 0;padding:0}
.series-previews li{min-width:0}
.series-preview{display:grid;grid-template-rows:auto 1fr;gap:10px;width:100%;height:100%;padding:0 0 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:inherit;text-align:left;font:500 .75rem/1.5 var(--body);cursor:pointer}
.series-preview-image{display:block;aspect-ratio:4/3;overflow:hidden}
.series-preview img{display:block;width:100%;height:100%;object-fit:cover}
.series-preview[aria-pressed=true]{border-bottom-color:var(--orange)}
.series-preview:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
@media(max-width:900px){.series-project{gap:24px}.series-main{height:460px}}
@media(max-width:600px){
 .series-projects{gap:48px}.series-project{gap:22px}.series-project .work-copy{padding:0}
 .series-main{height:auto;aspect-ratio:var(--main-mobile-ratio)}
 .series-previews{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity}
 .series-previews li{flex:0 0 43%;scroll-snap-align:start}
}
.work-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.work-thumb{display:block;width:100%;min-width:0;padding:0;border:0;background:transparent;overflow:hidden;aspect-ratio:4/3;cursor:pointer}
.work-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.compact-works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.compact-work{min-width:0}
.compact-work h3{font:700 clamp(1.4rem,2vw,1.8rem)/1.1 var(--display);text-transform:uppercase;margin:18px 0 0}
.compact-work .work-open{color:var(--paper);width:100%;gap:12px;font-size:.6rem}
.works-supplemental{padding:48px 0 56px;background:var(--ink);color:var(--paper);border-top:1px solid var(--light-line)}
.works-supplemental .work-open{color:var(--paper)}
.supplement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.compact-work button:focus-visible,.work-thumb:focus-visible,.works-supplemental button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.work-image{display:block;position:relative;width:100%;padding:0;border:0;overflow:hidden;background:transparent;cursor:pointer;aspect-ratio:3/2;color:var(--paper)}
.work-1 .work-image{height:clamp(440px,60svh,600px);aspect-ratio:auto}
.work-4 .work-image{height:clamp(330px,42svh,420px);aspect-ratio:auto}
.work-image img,.work-glimpse-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.work-1 .work-image img,.work-2 .work-image img{object-position:50% 62%}
.work-image-count{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:24px;padding:10px 13px;background:var(--ink);font:700 .65rem var(--body);letter-spacing:.08em;text-transform:uppercase}
.work-image-count>span{color:var(--orange);font-size:1rem}
.work-copy{padding:24px 0 0;min-width:0}
.work-1 .work-copy,.work-4 .work-copy{padding:0}
.work-number{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#706b61;margin:0 0 20px}
.work h3{font-family:var(--display);font-size:clamp(2rem,3vw,3rem);line-height:1.05;text-transform:uppercase;margin:0 0 20px}
.work-copy>p:not(.work-number){font-size:.9rem;line-height:1.65;max-width:48ch;color:#57544e;margin:0 0 16px}
.work-service{display:inline-flex;gap:8px;align-items:center;font-size:.72rem;min-height:32px;color:#57544e}
.work-open{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:48px;margin-top:18px;padding:8px 0;border:0;background:transparent;color:var(--ink);font:800 .68rem var(--body);text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.work-open>span{color:var(--orange);font-size:1.15rem}
.works-more{background:var(--ink);color:var(--paper);padding:64px 0 72px}
.works-more-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}
.works-more-heading h2{font-family:var(--display);font-size:clamp(2rem,3.5vw,3.4rem);line-height:1;margin:0;text-transform:uppercase}
.works-more-heading>p{max-width:36ch;font-size:.8rem;line-height:1.6;color:rgba(241,239,233,.65);margin:0}
.works-more-heading .eyebrow{margin:0 0 18px}
.works-glimpses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.work-glimpse{display:block;min-width:0;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.work-glimpse-image{display:block;overflow:hidden;aspect-ratio:4/3}
.work button:focus-visible,.work-service:focus-visible,.work-glimpse:focus-visible,.project-gallery button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
@media(hover:hover){.work-glimpse:hover img{transform:scale(1.015)}.work-open:hover,.work-service:hover{color:var(--orange)}}

@media(max-width:900px){
 .work-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}.work-thumbs>:nth-child(n+4){display:none}
 .compact-works{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .works-heading{grid-template-columns:1fr;gap:22px;margin-bottom:36px}.works-heading>p{justify-self:start;max-width:48ch}
 .works-layout{gap:48px 28px}.work-1,.work-4{gap:24px}.work-1 .work-image{height:460px}
 .works-glimpses{grid-template-columns:repeat(2,minmax(0,1fr))}.works-more-heading{display:block}.works-more-heading>p{margin-top:14px}
}
@media(max-width:600px){
 .work-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.work-thumbs>:nth-child(n+3){display:none}
 .work-thumb{aspect-ratio:3/2}.compact-works{gap:36px 20px}.compact-work h3{font-size:1.35rem}.compact-work .work-open{font-size:.55rem;letter-spacing:.08em}
 .supplement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.works-supplemental{padding:40px 0 48px}
 .works-featured{padding:54px 0}.works-heading h2{font-size:2.8rem}.works-layout{grid-template-columns:1fr;gap:48px}
 .work-1,.work-4{display:block;grid-column:auto}
 .work .work-image{height:280px;aspect-ratio:auto}.work-1 .work-image{height:320px}.work-2 .work-image img{object-position:50% 59%}
 .work-copy,.work-1 .work-copy,.work-4 .work-copy{padding:22px 0 0}.work h3{font-size:2rem;margin-bottom:14px}.work-number{margin-bottom:12px}.work-open{width:100%;margin-top:12px}
 .works-more{padding:44px 0 50px}.works-glimpses{gap:12px}.work-glimpse-image{aspect-ratio:1}
}
@media(prefers-reduced-motion:reduce){.work-image img,.work-glimpse-image img,.work-thumb img{transition:none;transform:none!important}}

/* Quiet previews open the gallery; zoom gestures only exist inside the dialog. */
.project-image-trigger{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.project-image-trigger img{transition:transform 380ms ease}
@media(hover:hover) and (pointer:fine){
 .project-image-trigger:hover img{transform:scale(1.015)}
}
@media(prefers-reduced-motion:reduce){.project-image-trigger img{transition:none!important;transform:none!important}}

/* Shared native lightbox. Gestures are restricted to this image viewport. */
html.project-gallery-open{overflow:hidden;scrollbar-gutter:stable}
.project-gallery{position:fixed;inset:0;width:96vw;height:96svh;height:96dvh;max-width:none;max-height:none;margin:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border:1px solid var(--light-line);background:var(--ink);color:var(--paper);overflow:hidden}
.project-gallery[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
.project-gallery::backdrop{background:rgba(0,0,0,.92)}
.gallery-header{display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:0}
.gallery-header h2{min-width:0;font:700 clamp(1rem,1.6vw,1.5rem)/1.1 var(--display);text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.gallery-header-actions{display:flex;gap:10px;flex-shrink:0}
.project-gallery button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border:1px solid var(--light-line);padding:8px 12px;background:transparent;color:var(--paper);font:700 .7rem var(--body);cursor:pointer}
.project-gallery button:hover:not(:disabled){background:rgba(241,239,233,.05);color:var(--orange)}
.project-gallery button,.work-open{-webkit-tap-highlight-color:transparent}
.project-gallery button:disabled{opacity:.45;cursor:default}
.project-gallery .gallery-reset{border-color:transparent;font-weight:400}
.gallery-figure{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;min-width:0;margin:0}
.gallery-stage{position:relative;min-width:0;min-height:0;width:min(100%,92vw);justify-self:center;overflow:hidden;touch-action:none;overscroll-behavior:contain;cursor:zoom-in}
.gallery-stage.is-zoomed{cursor:grab}
.gallery-stage.is-dragging{cursor:grabbing}
.gallery-image{position:absolute;display:block;max-width:none;max-height:none;object-fit:contain;transform-origin:center;transition:none!important;user-select:none;-webkit-user-drag:none;visibility:hidden}
.gallery-stage.is-ready .gallery-image{visibility:visible;will-change:transform}
.gallery-stage[aria-busy=true]::after,.gallery-stage.is-error::after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ink);padding:10px 16px;font-size:.8rem;text-align:center}
.gallery-stage[aria-busy=true]::after{content:'Bild wird geladen …'}
.gallery-stage.is-error::after{content:'Bild konnte nicht geladen werden. Bitte weiterblättern.'}
.gallery-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.gallery-controls button:first-child{justify-self:start}
.gallery-controls button:last-child{justify-self:end}
.gallery-counter{font-size:.75rem;letter-spacing:.1em;margin:0}
.gallery-help{margin:8px 0 0;font-size:.65rem;line-height:1.4;color:rgba(241,239,233,.7);text-align:center}
.gallery-icon,.work-open>svg{display:block;width:20px;height:20px;flex-shrink:0}
.work-open>svg{color:var(--orange)}
@media(max-width:600px){
 .project-gallery{width:100%;height:100svh;height:100dvh;border:0;gap:8px}
 .gallery-header{gap:8px}.gallery-header-actions{gap:4px}
 .gallery-close .gallery-close-label{display:none}
 .project-gallery .gallery-reset{font-size:.6rem;padding:6px}
 .gallery-help{font-size:.6rem}.project-gallery button{padding:8px}
 .project-service-links{margin-top:10px;gap:2px 12px}
 .compact-work .project-service-links a{font-size:.62rem;opacity:.8}
}
@media(max-height:450px){
 .project-gallery{gap:4px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}
 .gallery-help{display:none}
 .gallery-header h2{font-size:1rem}
}
