/* ============================================================
   thereelthing.studio — case.css
   Case-Detailseiten (arbeiten/<kunde>.html). Baut auf design_tokens.css
   + site.css (Header/Footer/FAB/Reveals werden wiederverwendet).
   Rhythmus: Licht-aus-Hero (dunkel) → Fall (Creme) → Galerie (dunkel)
   → Nachbarn/CTA (Creme). Template 18 §6: Ausgangslage · Arbeit · Ergebnis.
   ============================================================ */

/* ---------- Zurück-Leiste über dem Hero ---------- */
.caseback{position:absolute;top:calc(20px + 44px);left:var(--trt-space-10);z-index:6;
  font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta)}
.caseback a{color:var(--trt-text-invert);text-decoration:none;display:inline-flex;align-items:center;gap:8px;opacity:.85;transition:opacity .25s var(--trt-ease),gap .25s var(--trt-ease)}
.caseback a:hover,.caseback a:focus-visible{opacity:1;gap:12px}

/* ---------- Hero (Licht-aus) ---------- */
.casehero{position:relative;min-height:82vh;min-height:82svh;display:flex;align-items:flex-end;
  overflow:hidden;background:#0b0a08;color:var(--trt-text-invert);padding:var(--trt-space-24) var(--trt-space-10) var(--trt-space-16)}
.casehero .bg{position:absolute;inset:0;z-index:0}
.casehero .bg img,.casehero .bg video{width:100%;height:100%;object-fit:cover}
.casehero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(11,10,8,.86) 0%,rgba(11,10,8,.42) 40%,rgba(11,10,8,.12) 72%,rgba(11,10,8,.28) 100%)}
.casehero .grain{opacity:.22}
.casehero .inner{position:relative;z-index:3;width:100%;max-width:var(--trt-maxw);margin:0 auto}
.casehero .seg{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);
  color:var(--trt-text-invert-dim);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.casehero .seg .no{color:var(--trt-signal)}
.casehero .seg .sep{color:var(--trt-line-invert)}
.casehero h1{font-weight:var(--trt-w-display);font-size:clamp(44px,8vw,120px);line-height:.9;
  letter-spacing:var(--trt-ls-display);margin:var(--trt-space-4) 0 0}
.casehero .zeile{font-weight:var(--trt-w-sub);font-size:var(--trt-fs-sub);letter-spacing:var(--trt-ls-sub);
  margin-top:var(--trt-space-6);max-width:36ch;color:var(--trt-text-invert)}

/* ---------- Fakten-Leiste ---------- */
.casefacts{background:var(--trt-bg);color:var(--trt-text);border-bottom:1px solid var(--trt-line)}
.casefacts .inner{max-width:var(--trt-maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--trt-space-6);padding:var(--trt-space-8) var(--trt-space-10)}
.casefacts dt{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.casefacts dd{font-weight:var(--trt-w-sub);font-size:var(--trt-fs-body);letter-spacing:-.01em;margin-top:6px}
.casefacts dd a{color:var(--trt-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--trt-line)}
.casefacts dd a:hover{text-decoration-color:var(--trt-signal)}
.casefacts dd .sep{color:var(--trt-text-dim);margin:0 6px}

/* Dezenter Kunden-Credit (bei der CTA) */
.casecredit{max-width:var(--trt-maxw);margin:0 auto;padding:0 var(--trt-space-10) var(--trt-space-12);
  font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.casecredit a{color:var(--trt-text);text-underline-offset:3px}
.casecredit a:hover{color:var(--trt-signal)}
@media (max-width:680px){ .casecredit{padding-left:var(--trt-space-6);padding-right:var(--trt-space-6)} }

/* ---------- Fall-Text (Creme, editorial) ---------- */
.casebody{padding:var(--trt-space-24) var(--trt-space-10)}
.casebody .inner{max-width:var(--trt-maxw);margin:0 auto}
.caselead{font-weight:var(--trt-w-sub);font-size:clamp(24px,3.4vw,44px);line-height:1.12;letter-spacing:-.02em;max-width:22ch}
.caselead .hl{color:var(--trt-highlight-on-light)} /* F2: Kobalt auf Creme, nie Coral */
.caseblocks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--trt-space-12);margin-top:var(--trt-space-24)}
.caseblocks .blk{border-top:2px solid var(--trt-charcoal);padding-top:var(--trt-space-4)}
.caseblocks .blk .k{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.caseblocks .blk h2{font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em;margin:10px 0 var(--trt-space-4)}
.caseblocks .blk p{color:var(--trt-text-dim);font-size:var(--trt-fs-body);line-height:var(--trt-lh-body)}
.caseblocks .blk p+p{margin-top:var(--trt-space-4)}

/* ---------- Galerie (Licht-aus) ---------- */
.casegallery{background:var(--trt-bg-invert);color:var(--trt-text-invert);padding:var(--trt-space-16) var(--trt-space-10) var(--trt-space-24)}
.casegallery .inner{max-width:var(--trt-maxw);margin:0 auto}
.casegallery .eyebrow{color:var(--trt-text-invert-dim);display:block;margin-bottom:var(--trt-space-8)}
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--trt-space-4);grid-auto-flow:dense}
.gal figure{position:relative;overflow:hidden;background:#000;grid-column:span 2;aspect-ratio:4/5}
.gal figure.wide{grid-column:span 4;aspect-ratio:16/9}
.gal figure.tall{grid-column:span 2;aspect-ratio:4/5}
.gal figure.full{grid-column:span 6;aspect-ratio:16/8}
.gal img,.gal video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--trt-ease)}
.gal figure:hover img,.gal figure:hover video{transform:scale(1.03)}
.gal figcaption{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--trt-font-mono);
  font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim);
  text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* Galerie-Videos: Hover (Desktop) / Auto-Play im Viewport (Touch) — ohne Button, volle Sättigung */
.gal figure.vid{cursor:pointer}
.gal figure.vid img.vidposter,.gal figure.vid video{position:absolute;inset:0}
.gal figure.vid video{opacity:0;transition:opacity .4s var(--trt-ease),transform .8s var(--trt-ease)}
.gal figure.vid video.ready{opacity:1}
.gal figure.vid .vtag{position:absolute;left:12px;top:10px;z-index:2;font-family:var(--trt-font-mono);
  font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim);
  text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---------- CTA-Zeile im Fall ---------- */
.casecta{background:var(--trt-bg);color:var(--trt-text);padding:var(--trt-space-16) var(--trt-space-10)}
.casecta .inner{max-width:var(--trt-maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--trt-space-8);
  align-items:center;justify-content:space-between}
.casecta .line{font-weight:var(--trt-w-head);font-size:clamp(24px,3.2vw,40px);letter-spacing:-.02em;max-width:20ch;line-height:1.02}
.casecta .acts{display:flex;flex-wrap:wrap;gap:12px}
.casecta .go,.casebody .applybtn{display:inline-flex;align-items:center;gap:8px;background:var(--trt-signal);color:var(--trt-ink-on-coral);
  font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);
  padding:13px 22px;border-radius:var(--trt-radius-pill);text-decoration:none;transition:filter .2s var(--trt-ease),transform .2s var(--trt-ease)}
.casecta .go:hover,.casebody .applybtn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.casecta .go.ghost{background:none;border:1px solid var(--trt-line);color:var(--trt-text)}
.casecta .go.ghost:hover{border-color:var(--trt-charcoal);background:none}

/* ---------- Nachbar-Cases ---------- */
.casenext{background:var(--trt-bg-invert);color:var(--trt-text-invert);padding:var(--trt-space-16) var(--trt-space-10) var(--trt-space-24);border-top:1px solid var(--trt-line-invert)}
.casenext .inner{max-width:var(--trt-maxw);margin:0 auto}
.casenext .eyebrow{color:var(--trt-text-invert-dim);display:block;margin-bottom:var(--trt-space-8)}
.nextgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--trt-space-4)}
.nexttile{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;text-decoration:none;color:var(--trt-text-invert)}
.nexttile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--trt-ease)}
.nexttile:hover img,.nexttile:focus-visible img{transform:scale(1.035)}
.nexttile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,10,8,.8) 0%,rgba(11,10,8,.1) 50%,transparent 72%)}
.nexttile .m{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.nexttile .m .seg{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.nexttile .m .kunde{font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em;margin-top:3px;line-height:1.02}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .casefacts .inner{grid-template-columns:1fr 1fr}
  .caseblocks{grid-template-columns:1fr;gap:var(--trt-space-8)}
  .gal figure.wide,.gal figure.full{grid-column:span 6;aspect-ratio:16/9}
  .casecta .inner{flex-direction:column;align-items:flex-start}
  .nextgrid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .caseback{left:var(--trt-space-6)}
  .casehero{padding:var(--trt-space-24) var(--trt-space-6) var(--trt-space-12)}
  .casefacts .inner{padding:var(--trt-space-6) var(--trt-space-6)}
  .casebody,.casegallery,.casecta,.casenext{padding-left:var(--trt-space-6);padding-right:var(--trt-space-6)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure,.gal figure.wide,.gal figure.tall,.gal figure.full{grid-column:span 2;aspect-ratio:4/5}
}