/**
 * DEKAII Cases – Landing (Fullscreen Video Scroll, milledollars-Stil)
 * Alles gescoped unter .dk-cases. Keyframes-Praefix dkc-.
 */

.dk-cases{
  /* Signature Gold */
  --pink:#DC3261; --cyan:#9FFAE7; --violet:#75D5FB; --blue:#75D5FB;
  --fg:#fff; --muted:rgba(255,255,255,.55); --edge:clamp(20px,5vw,90px);
}
.dk-cases *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
.dk-cases{
  background:#070816;color:var(--fg);font-family:'Chakra Petch',sans-serif;
  position:relative;overflow-x:hidden;line-height:1.5;
}
.dk-cases h2{color:var(--fg)}
/* Theme-Content-Top-Padding killen -> erstes Slide startet bündig unter dem Header */
#qodef-page-inner{padding-top:0 !important}

/* ---------- Aura + Grain (fixer Hintergrund) ---------- */
.dk-cases .aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(82px);opacity:.38}
.dk-cases .aura span{position:absolute;width:46vmax;height:46vmax;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.dk-cases .aura .b1{background:radial-gradient(circle at 50% 50%,#75D5FB,transparent 62%);animation:dkc-d1 26s ease-in-out infinite}
.dk-cases .aura .b2{background:radial-gradient(circle at 50% 50%,#DC3261,transparent 62%);animation:dkc-d2 32s ease-in-out infinite}
.dk-cases .aura .b3{background:radial-gradient(circle at 50% 50%,#9FFAE7,transparent 62%);animation:dkc-d3 30s ease-in-out infinite}
.dk-cases .aura .b4{background:radial-gradient(circle at 50% 50%,#20305E,transparent 62%);animation:dkc-d4 36s ease-in-out infinite}
@keyframes dkc-d1{0%,100%{transform:translate(-10vw,-5vh)}50%{transform:translate(40vw,30vh)}}
@keyframes dkc-d2{0%,100%{transform:translate(70vw,60vh)}50%{transform:translate(20vw,10vh)}}
@keyframes dkc-d3{0%,100%{transform:translate(60vw,-10vh)}50%{transform:translate(10vw,50vh)}}
@keyframes dkc-d4{0%,100%{transform:translate(0vw,70vh)}50%{transform:translate(60vw,20vh)}}
.dk-cases .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Fortschritt / Zaehler ---------- */
.dk-cases .dkc-count{position:fixed;top:50%;right:clamp(14px,2.2vw,34px);transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-family:'Michroma',sans-serif;font-size:.66rem;letter-spacing:.14em;color:var(--muted);
  writing-mode:vertical-rl}
.dk-cases .dkc-count .dkc-cur{color:var(--fg)}
.dk-cases .dkc-count .dkc-sep{opacity:.5}

/* ---------- Slides ---------- */
.dk-cases .dkc-slides{position:relative;z-index:2}
.dk-cases .dkc-slide{position:relative;display:flex;align-items:flex-end;
  height:100svh;overflow:hidden;text-decoration:none;color:var(--fg);
  scroll-snap-align:start;scroll-snap-stop:always;
  padding:0 var(--edge) clamp(60px,10vh,120px)}
.dk-cases .dkc-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.dk-cases .dkc-bg img,.dk-cases .dkc-bg video,.dk-cases .dkc-bg iframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.dk-cases .dkc-bg-img{z-index:0}
.dk-cases .dkc-bg .dkc-bg-media{z-index:1;opacity:0;transition:opacity .8s ease}
.dk-cases .dkc-bg .dkc-bg-media.show{opacity:1}
/* iframe (YT/Vimeo) orientierungssicheres 16:9-Cover mit Overscan.
   !important schlaegt Theme-iframe-Regeln (#qodef-page-inner iframe ...), die
   sonst die Cover-Groesse kappen -> iframe blieb als kleine 16:9-Box oben links. */
.dk-cases .dkc-bg iframe.dkc-bg-media{position:absolute !important;
  width:231.11vh !important;height:130vh !important;min-width:130vw !important;min-height:73.125vw !important;
  max-width:none !important;max-height:none !important;
  top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;
  transform:translate(-50%,-50%) !important;pointer-events:none}
.dk-cases .dkc-tint{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(5,6,18,.92) 0%,rgba(5,6,18,.45) 34%,rgba(5,6,18,.12) 60%,rgba(5,6,18,.35) 100%)}

/* ---------- Overlay ---------- */
.dk-cases .dkc-overlay{position:relative;z-index:3;max-width:60ch;
  transform:translateY(24px);opacity:0;transition:opacity .8s ease,transform .8s ease}
.dk-cases .dkc-slide.in .dkc-overlay{opacity:1;transform:none}
.dk-cases .dkc-index{display:block;font-family:'Michroma',sans-serif;
  font-size:clamp(.9rem,1.6vw,1.35rem);line-height:1;letter-spacing:.12em;
  background:linear-gradient(100deg,#9FFAE7,#DC3261);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:.9;margin-bottom:.7rem}
.dk-cases .dkc-client{font-family:'Michroma',sans-serif;font-weight:400;
  font-size:clamp(1.5rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.01em;
  text-shadow:0 2px 40px rgba(0,0,0,.6)}
.dk-cases .dkc-film{display:block;margin-top:.5rem;font-weight:300;color:rgba(255,255,255,.82);
  font-size:clamp(.9rem,1.6vw,1.25rem);letter-spacing:.01em}
.dk-cases .dkc-role{display:block;margin-top:.7rem;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan)}
.dk-cases .dkc-view{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  padding:.8rem 1.9rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;
  background:rgba(0,0,0,.25);backdrop-filter:blur(4px);transition:all .35s ease}
.dk-cases .dkc-slide:hover .dkc-view{border-color:var(--pink);box-shadow:0 0 30px rgba(220,50,97,.5);background:rgba(220,50,97,.14)}

.dk-cases .dkc-empty{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  height:100svh;color:var(--muted);letter-spacing:.1em}

/* ---------- Mobile ---------- */
@media(max-width:1024px){
  .dk-cases .dkc-count{display:none}
}
@media(prefers-reduced-motion:reduce){
  .dk-cases .aura span{animation:none}
}