/* OFFLIMITS MEDIA® – Konzeptprojekte: öffnen sich über der Startseite, ohne Seitenwechsel.
   Nutzt die Farben/Schriften aus style.css (var(--bg), var(--text) …), folgt also Hell/Dunkel. */
/* Hover-Zoom erst nach dem Intro: sonst zoomt die Karte unter dem Mauszeiger, während die Reihe einläuft */
.is-loaded:not(.intro-run) .sc-card button[data-case]:hover .sc-img img{transform:scale(1.04)}
.sc-tag{color:var(--muted)}

.cs{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--text);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:none}
.cs.on{display:block}
.cs-fly{position:fixed;z-index:75;overflow:hidden;pointer-events:none;background:var(--surface)}
.cs-fly img{width:100%;height:100%;object-fit:cover;object-position:top center}
.cs-bar{position:fixed;left:0;right:0;top:0;z-index:72;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;color:#fff;mix-blend-mode:difference;pointer-events:none}
.cs-bar>*{pointer-events:auto}
.cs-x{display:inline-flex;align-items:center;gap:10px;padding:10px 0;border:0;background:none;color:inherit;font:500 12px/1 "Geist",system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.cs-x i{position:relative;width:14px;height:14px}
.cs-x i::before,.cs-x i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.cs-x i::after{transform:rotate(-45deg)}
.cs-x:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.cs-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:0 var(--pad)}
.cs-tl{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:var(--pad)}
.cs-t{margin:0;font-family:"Bricolage",sans-serif;font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(48px,7.4vw,140px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.cs-t .ln{display:block;overflow:hidden;padding-bottom:.05em}
.cs-t .ln>span{display:block}
.cs-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);margin-top:22px;color:var(--muted)}
.cs-meta b{color:var(--text);font-weight:500}
.cs-hero{height:100vh;height:100svh;padding:64px 0 var(--pad) 18%}
.cs-hero .im{width:100%;height:100%;overflow:hidden;background:var(--surface)}
.cs-hero img{width:100%;height:100%;object-fit:cover}
.cs-intro{min-height:85vh;display:flex;align-items:center}
.cs-intro p{margin:0;font-family:"Bricolage",sans-serif;font-weight:600;font-variation-settings:"opsz" 72;font-size:clamp(24px,2.5vw,42px);line-height:1.1;letter-spacing:-.03em;text-wrap:pretty}
.cs-intro .w{display:inline-block;opacity:.14;transition:opacity .5s}
.cs-intro .w.on{opacity:1}

.cs-sec{padding-top:16vh}
.cs-lab{display:flex;gap:28px;padding:0 var(--pad);margin-bottom:12px}
.cs-ad{display:grid;gap:var(--pad);overflow:hidden}
.cs-ad .row{display:flex;gap:var(--pad);width:max-content;will-change:transform}
.cs-ad .row img{width:clamp(15vw,calc(118vw / var(--k,7)),25vw);aspect-ratio:3/4.3;object-fit:cover;background:var(--surface)}
.cs-shot{padding:0 var(--pad)}
.cs-shot .fr{position:relative;width:100%;transform-origin:50% 0;will-change:transform;background:#fff;box-shadow:0 40px 80px -50px rgba(0,0,0,.45)}
.cs-shot .fr img{display:block;width:100%;height:auto}
.cs-mks .fr{max-width:1080px;margin:0 auto;background:none;box-shadow:none}
.cs-bleed{position:relative;width:100%;overflow:hidden}
.cs-bleed img{display:block;width:100%;height:auto;will-change:transform}
.cs-mk+.cs-mk{margin-top:var(--pad)}
.cs-mkf{padding:0 var(--pad)}
.cs-mkf .fr{width:min(1080px,74vw);transform-origin:50% 0;will-change:transform}
.cs-mkf .fr img{display:block;width:100%;height:auto}
.cs-mkf.l .fr{margin-right:auto;transform-origin:0 0}
.cs-mkf.r .fr{margin-left:auto;transform-origin:100% 0}
@media (max-width:900px){.cs-mkf .fr{width:100%}}
.cs-print{display:grid;place-items:center;background:var(--surface);margin:0 var(--pad);padding:10vh 0}
.cs-print img{width:min(52vw,820px);height:auto;filter:drop-shadow(0 40px 50px rgba(40,30,20,.3))}

.cs-next{position:relative;height:100vh;height:100svh;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pad);padding:var(--pad);margin-top:16vh;cursor:pointer}
.cs-next h3{margin:0;font-family:"Bricolage",sans-serif;font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(44px,6.4vw,124px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.cs-next .nc{display:block;overflow:hidden;padding-bottom:.05em}
.cs-next .nc>span{display:block}
.cs-next .nc:first-child{font-size:.42em;letter-spacing:-.03em;color:var(--muted)}
.cs-next .thumb{width:12vw;aspect-ratio:4/5;overflow:hidden;background:var(--surface);flex:none}
.cs-next .thumb img{width:100%;height:100%;object-fit:cover}
.cs-next .bar{position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--line)}
.cs-next .bar i{display:block;height:100%;background:var(--text);transform-origin:0 50%;transform:scaleX(0)}

@media (max-width:900px){
  .cs-top{grid-template-columns:1fr}
  .cs-tl{position:relative;height:auto;padding-top:40vh}
  .cs-hero{height:70vh;padding:0}
  .cs-intro{min-height:auto;padding:12vh 0}
  .cs-ad .row img{width:38vw}
  .cs-print img{width:78vw}
  .cs-next .thumb{width:28vw}
}
@media (prefers-reduced-motion:reduce){.cs-intro .w{opacity:1;transition:none}}