/* 42 Takes · Fallseiten (Fassung v6). Baut auf site.css auf: Inter Tight, Grund #07080a, Schrift #f3f3ee, Lime #D4FF3A sparsam. */
.case .nav{background:rgba(7,8,10,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-l)}
.case .nav nav a.back{display:inline-flex;gap:8px}
.case .nav nav a.back::after{display:none}
.case .nav nav a.back span{transition:transform .35s var(--ease)}
.case .nav nav a.back:hover span{transform:translateX(-4px)}
.cs{max-width:1440px;margin:0 auto;padding:0 var(--gx)}
.cs-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.7);display:flex;gap:14px;align-items:center}
.cs-label b{font-weight:500;color:var(--lime)}

/* Kopf */
.cs-head{padding:150px 0 54px}
.cs-head .kicker{color:rgba(243,243,238,.7)}
.cs-title{font-size:clamp(64px,12vw,208px);line-height:.82;letter-spacing:-.065em;margin-top:4vh;overflow-wrap:anywhere}
.cs-line{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.03em;line-height:1.1;margin-top:3vh;max-width:22em;color:var(--ink)}
.cs-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:7vh;border-top:1px solid var(--line-l)}
.cs-facts div{padding:16px 18px 0 0}
.cs-facts div+div{padding-left:18px;border-left:1px solid var(--line-l)}
.cs-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs-facts dd{font-size:17px;margin-top:6px;color:var(--ink)}
.cs-facts a{border-bottom:1px solid rgba(243,243,238,.35);transition:border-color .3s var(--ease),color .3s var(--ease)}
.cs-facts a:hover{color:var(--lime);border-bottom-color:var(--lime)}

/* Der ganze Film */
.cs-film{padding:12px 0 0}
.cs-frame{position:relative;background:#000;aspect-ratio:16/9;box-shadow:14px 16px 0 -2px var(--lime)}
.cs-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.cs-cap{display:flex;justify-content:space-between;gap:20px;margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-l);padding-top:10px}

/* Kunde, Aufgabe, Idee */
.cs-story{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:0;margin-top:14vh;border-top:1px solid var(--line-l)}
.cs-block{padding:22px 32px 0 0}
.cs-block+.cs-block{padding-left:32px;border-left:1px solid var(--line-l)}
.cs-text{font-size:18px;line-height:1.5;color:rgba(243,243,238,.82);margin-top:20px;max-width:34em}
.cs-idea h2{font-size:clamp(34px,3.4vw,56px);line-height:.92;letter-spacing:-.05em;margin-top:20px;color:var(--ink)}
.cs-idea .cs-text{margin-top:16px}

/* Schleife für die Webseite */
.cs-loop{display:grid;grid-template-columns:5fr 7fr;gap:5vw;align-items:center;margin-top:16vh}
.cs-loop h2{font-size:clamp(32px,3.6vw,60px);line-height:.94;letter-spacing:-.05em;margin-top:22px}
.cs-frame-s{box-shadow:none;outline:1px solid var(--line-l);outline-offset:10px}

/* Weitere Fassungen (nur wenn geliefert) */
.cs-variants{margin-top:16vh;border-top:1px solid var(--line-l);padding-top:22px}
.cs-variants h2{font-size:clamp(32px,3.6vw,60px);line-height:.94;letter-spacing:-.05em;margin:22px 0 40px}
.cs-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px 28px;align-items:start}
.cs-var .cs-frame{box-shadow:none;outline:1px solid var(--line-l)}
.cs-var.tall .cs-frame{aspect-ratio:9/16;max-width:360px}
.cs-var figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}

/* Weiter */
.cs-next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:18vh 0 0;padding:26px 0 90px;border-top:1px solid var(--line-l)}
.cs-all{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.7);display:inline-flex;gap:10px;transition:color .3s var(--ease)}
.cs-all:hover{color:var(--ink)}
.cs-nextlink{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.cs-nextlink strong{font-family:var(--head);font-weight:850;font-size:clamp(40px,6vw,104px);letter-spacing:-.06em;line-height:.86;transition:color .35s var(--ease)}
.cs-nextlink strong span{display:inline-block;transition:transform .35s var(--ease)}
.cs-nextlink:hover strong{color:var(--lime)}
.cs-nextlink:hover strong span{transform:translateX(10px)}

@media (max-width:900px){
  .case .nav nav a.back{display:inline-flex;font-size:13px}
  .cs-head{padding:116px 0 36px}
  .cs-title{font-size:clamp(52px,17vw,96px)}
  .cs-facts{grid-template-columns:1fr 1fr}
  .cs-facts div{padding:14px 12px 14px 0}
  .cs-facts div+div{padding-left:0;border-left:0}
  .cs-facts div:nth-child(even){padding-left:14px;border-left:1px solid var(--line-l)}
  .cs-facts div:nth-child(n+3){border-top:1px solid var(--line-l)}
  .cs-facts dd{font-size:15px;overflow-wrap:anywhere}
  .cs-frame{box-shadow:8px 9px 0 -1px var(--lime)}
  .cs-frame-s{box-shadow:none;outline-offset:6px}
  .cs-story{grid-template-columns:1fr;margin-top:9vh}
  .cs-block,.cs-block+.cs-block{padding:22px 0 26px;border-left:0}
  .cs-block+.cs-block{border-top:1px solid var(--line-l)}
  .cs-text{font-size:16px}
  .cs-loop{grid-template-columns:1fr;gap:5vh;margin-top:9vh}
  .cs-variants{margin-top:9vh}
  .cs-vgrid{grid-template-columns:1fr}
  .cs-next{flex-direction:column;align-items:stretch;margin-top:10vh;padding-bottom:60px}
  .cs-nextlink{align-items:flex-start;text-align:left}
}

/* ================= v7 · Kino-Modus: Play füllt das Browserfenster, Pause bringt den Film zurück (case.js) ================= */
html.tp-lock{overflow:hidden}
.tp{position:absolute;inset:0;background:#000;overflow:hidden}
.tp-play{position:absolute;left:50%;top:50%;width:clamp(76px,9vw,132px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:var(--lime);color:var(--bg);cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 44px rgba(0,0,0,.5);transition:transform .35s var(--ease),background-color .3s var(--ease)}
.tp-play svg{width:40%;height:40%;margin-left:7%}
.tp-play:hover,.tp-play:focus-visible{transform:translate(-50%,-50%) scale(1.08);background:var(--ink);outline:none}
.cs-var .tp-play{width:clamp(56px,5vw,76px)}
.tp-ui{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.tp.on{position:fixed;inset:0;z-index:300;cursor:none}
.tp.on video{background:transparent;object-fit:contain}
.tp.on .tp-play{display:none}
.tp.on.show{cursor:pointer}
.tp.on.show .tp-ui{opacity:1;pointer-events:auto}
.tp-pause{position:absolute;left:50%;top:50%;width:clamp(96px,11vw,168px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:rgba(7,8,10,.62);color:var(--ink);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1.5px rgba(243,243,238,.5);transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.tp-pause svg{width:38%;height:38%}
.tp-pause:hover,.tp-pause:focus-visible{transform:translate(-50%,-50%) scale(1.06);background:var(--lime);color:var(--bg);box-shadow:none;outline:none}
.tp-hint{position:absolute;left:50%;top:calc(50% + clamp(48px,5.5vw,84px) + 22px);transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,243,238,.86);text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap}
.tp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:18px;padding:34px clamp(18px,3vw,44px) 22px;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0));cursor:default}
.tp-track{flex:1;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.tp-track i{display:block;position:relative;width:100%;height:3px;background:rgba(243,243,238,.28);overflow:hidden;transition:height .2s var(--ease)}
.tp-track:hover i,.tp-track:focus-visible i{height:6px}
.tp-track b{position:absolute;inset:0;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.tp-time{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink);min-width:9.5em;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .tp-bar{padding-bottom:calc(16px + env(safe-area-inset-bottom))} .tp-time{min-width:0} }
/* Der Hauptbereich liegt sonst unter der Kopfleiste (z-index 2 gegen 30): im Kino-Modus hebt er sich darüber, damit kein Rand der Webseite zu sehen ist */
html.tp-lock main{z-index:300}