/* Projektseiten und Seitenübergänge · wird von build.py nach site/css/cases.css geschrieben */

/* ---------- Kopf ---------- */
.cs__head{padding-bottom:clamp(36px,4vw,64px)}
.cs__head h1{max-width:none}
.cs__name{display:block;font-size:clamp(3rem,9.5vw,10rem);line-height:.86}
.cs__claim{display:block;margin-top:clamp(14px,1.6vw,24px);font-weight:800;font-size:clamp(1.5rem,3.2vw,3.2rem);line-height:.98;max-width:22ch;color:var(--paper)}
.cs__intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.cs__tags{display:flex;flex-wrap:wrap;gap:8px;max-width:520px;margin:0}
.cs__tags li{padding:7px 12px;border:1px solid var(--rule-2);color:var(--paper)}

/* ---------- Großes Bild ---------- */
.cs__hero{margin:0;padding:0 var(--gut)}
.cs__hero img{width:100%;height:auto;max-height:86vh;object-fit:cover}
.cs__hero figcaption{margin-top:12px}

/* ---------- Fakten, Text ---------- */
.cs__facts{margin:0;align-self:start}
.cs__facts div{padding:16px 0;border-top:1px solid var(--rule)}
.cs__facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-2)}
.cs__facts dd{margin:6px 0 0;font-size:1.08rem;font-weight:500;color:var(--paper)}
.cs .prose p{font-size:clamp(1.05rem,.5vw + .9rem,1.25rem);line-height:1.6}
.cs__big{font-size:clamp(1.2rem,1vw + .8rem,1.6rem)!important;line-height:1.45!important;color:inherit!important}
.cs__steps p{max-width:56ch}
.cs__res{display:flex;flex-direction:column;gap:0}
.cs__res li{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2.4rem);line-height:1.02;padding:22px 0;border-top:1px solid var(--rule)}
.cs__res li::before{content:"";display:inline-block;width:.42em;height:.42em;background:var(--vinyl);margin-right:.5em;transform:translateY(-.12em)}
.cs__live{margin-top:clamp(24px,3vw,40px)}

/* ---------- Geräte-Vorschau: ganze Seite scrollt im Rahmen ---------- */
.dev{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,22%);gap:clamp(20px,3vw,48px);align-items:end}
.dev__laptop{background:#151517;padding:clamp(8px,1vw,14px);border-radius:14px 14px 4px 4px}
.dev__laptop .dev__screen{aspect-ratio:16/10}
.dev__phone{background:#151517;padding:9px;border-radius:30px}
.dev__phone .dev__screen{aspect-ratio:9/19.5;border-radius:22px}
.dev__screen{overflow:hidden;background:#000;position:relative}
.dev__screen img{width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:dev-scroll 26s cubic-bezier(.45,0,.55,1) infinite alternate}
.dev__phone .dev__screen img{animation-duration:30s}
@keyframes dev-scroll{0%,6%{object-position:50% 0}94%,100%{object-position:50% 100%}}
.dev:hover .dev__screen img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.dev__screen img{animation:none}}

/* ---------- Videos ---------- */
.cs__vids{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,32px);align-items:flex-start}
.cs__vid{flex:1 1 440px}
.cs__vid:has(video[width="720"]),.cs__vid:has(video[width="540"]){flex:0 1 300px}
.cs__vid{margin:0}
.cs__vid video{width:100%;height:auto;background:#0b0b0c;display:block}
.cs__vid figcaption{margin-top:10px}

/* ---------- Galerie ---------- */
.cs__gal{columns:2;column-gap:clamp(16px,2vw,32px)}
.cs__gal figure{break-inside:avoid;margin:0 0 clamp(16px,2vw,32px)}
.cs__gal img{width:100%;height:auto;display:block;background:var(--steel)}
.cs__gal figcaption{margin-top:10px}

/* ---------- Nächstes Projekt ---------- */
.cs__nextlink{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:12px clamp(24px,4vw,64px);align-items:end;color:inherit}
.cs__nextlink .data{grid-column:1/-1;margin:0}
.cs__nextlink .h-l{transition:color .3s}
.cs__nextlink:hover .h-l{color:var(--vinyl)}
.cs__nextimg{overflow:hidden;display:block;aspect-ratio:16/10;background:var(--steel)}
.cs__nextimg img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cs__nextlink:hover .cs__nextimg img{transform:scale(1.04)}

@media (max-width:860px){
  .cs__gal{columns:1}
  .dev{grid-template-columns:1fr}
  .dev__phone{width:62%;margin:0 auto}
  .cs__nextlink{grid-template-columns:1fr}
  .cs__hero{padding:0}
}
.cs{overflow-x:clip}

/* Kleine Labels brauchen Luft zur Überschrift darunter */
.cs .data + h2,.cs .data + .h-l,.cs .data + .h-m{margin-top:14px}
.cs h2 em{padding-top:.04em;display:inline-block}