:root{
  --dk-bg: #07070c;
  --dk-ink: #f0f3ff;
  --dk-muted: #a7b0d8;
  --dk-accent: 266 92% 62%;   /* violet */
  --dk-accent-2: 212 100% 61%;/* azul */
  --dk-glow: 266 100% 55%;

  /* Carousel Geometrie */
  --dk-cell-w: 320px;
  --dk-cell-h: 460px;
  --dk-radius: 520px;
  --dk-gap: 18px;
  --dk-spin-ease: cubic-bezier(.22,.61,.36,1);
  --dk-spin-duration: 900ms;
}

/* Abschnitt-Wrapper */
.dk-wrap{
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(18px,3vw,36px);
  color: var(--dk-ink);
  background:
    radial-gradient(1300px 600px at 70% -10%, hsl(var(--dk-accent)/.22), transparent),
    radial-gradient(1000px 800px at -10% 120%, hsl(var(--dk-accent-2)/.16), transparent);
  border-radius: 16px;
  overflow: clip;
}

.dk-title{
  font-size: clamp(1.4rem, 2.5vw + 1rem, 3rem);
  margin: 0 0 10px;
  letter-spacing:.4px;
  background: linear-gradient(90deg, hsl(var(--dk-accent)), hsl(var(--dk-accent-2)) 60%, hsl(var(--dk-accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 15px hsl(var(--dk-glow)/.35);
  animation: dkHue 6s ease-in-out infinite alternate;
}
.dk-subtitle{ color: var(--dk-muted); margin: 0 0 20px; }

@keyframes dkHue { from { filter: hue-rotate(-8deg) } to { filter: hue-rotate(8deg) } }

/* Bühne */
.dk-stage { display:grid; gap:18px; }
.dk-scene{
  position: relative;
  height: clamp(520px, 60vh, 760px);
  perspective: 1600px;
  perspective-origin: 50% 45%;
  isolation: isolate;
}

.dk-carousel{
  position: absolute; inset: 0; margin:auto;
  width: var(--dk-cell-w); height: var(--dk-cell-h);
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--dk-radius))) rotateY(0deg);
  transition: transform var(--dk-spin-duration) var(--dk-spin-ease);
  will-change: transform;
}

.dk-cell{
  position: absolute; inset: 0; margin:auto;
  width: var(--dk-cell-w); height: var(--dk-cell-h);
  padding: var(--dk-gap);
  box-sizing: border-box;
  border-radius: 20px;
  background: linear-gradient(180deg, #171a33, #0f1225 60%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 40px rgba(7,7,12,.65),
    0 0 40px hsl(var(--dk-glow)/.10);
  color: var(--dk-ink);
  overflow: hidden;
  display:flex; flex-direction: column; gap:12px; justify-content: flex-end;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* atmosphärischer Glow */
.dk-cell::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(220px 160px at 15% 8%, hsl(var(--dk-accent)/.18), transparent 60%),
    radial-gradient(260px 200px at 90% 10%, hsl(var(--dk-accent-2)/.20), transparent 65%),
    radial-gradient(600px 360px at 50% 115%, rgba(0,0,0,.65), transparent 70%);
  mix-blend-mode: screen; filter: blur(1px);
  transform: translateZ(1px);
  pointer-events:none;
  animation: dkDrift 14s ease-in-out infinite alternate;
}
@keyframes dkDrift { from { transform: translateZ(1px) translateX(-10px);} to { transform: translateZ(1px) translateX(10px);} }

.dk-badge{ font-size:.8rem; letter-spacing:.12em; opacity:.8; text-transform: uppercase; }
.dk-card-title{ font-size:1.35rem; line-height:1.25; margin:0; }
.dk-card-text{ color: var(--dk-muted); margin:0; }

.dk-btn{
  align-self:flex-start;
  padding:.7rem 1rem; border-radius: 12px; border:1px solid hsl(var(--dk-accent)/.45);
  background: linear-gradient(180deg, hsl(var(--dk-accent)/.16), hsl(var(--dk-accent-2)/.08));
  color: white; text-decoration: none; font-weight: 600; letter-spacing:.2px;
  box-shadow: 0 8px 20px hsl(var(--dk-glow)/.15), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.dk-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px hsl(var(--dk-glow)/.22), inset 0 1px 0 rgba(255,255,255,.12); }

/* Controls */
.dk-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; }
.dk-control-btn{
  -webkit-tap-highlight-color: transparent;
  width:46px; height:46px; border-radius:12px; border:1px solid hsl(var(--dk-accent)/.45);
  background: linear-gradient(180deg, hsl(var(--dk-accent)/.20), hsl(var(--dk-accent-2)/.10));
  color:#fff; display:grid; place-items:center; font-size:20px; cursor:pointer;
  box-shadow: 0 8px 20px hsl(var(--dk-glow)/.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.dk-control-btn:focus-visible{ outline:2px solid hsl(var(--dk-accent)); outline-offset:2px; }

.dk-progress{ height:3px; width: clamp(180px, 40vw, 380px); background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.dk-progress > i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, hsl(var(--dk-accent)), hsl(var(--dk-accent-2))); }

.dk-hint{ font-size:.85rem; color:var(--dk-muted); opacity:.8; text-align:center; margin-top:8px; }

/* Bewegungs-Reduktion */
@media (prefers-reduced-motion: reduce){
  .dk-title{ animation: none; }
  .dk-cell::before{ animation: none; }
  .dk-carousel{ transition-duration: 0ms; }
}

/* Responsiv */
@media (max-width: 860px){
  :root{ --dk-cell-w: 280px; --dk-cell-h: 420px; --dk-radius: 460px; }
}
@media (max-width: 540px){
  :root{ --dk-cell-w: 240px; --dk-cell-h: 360px; --dk-radius: 420px; }
  .dk-hint{ display:none; }
}