/* ============================================================
   VIDEO DESIGN STUDIO – video-design-studio.css
   Sprint 1: Cockpit-Grundgerüst
   Prefix: vds-
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --vds-bg:          #07080b;
  --vds-surface:     #0d0f14;
  --vds-surface2:    #121520;
  --vds-card:        #141720;
  --vds-card-hover:  #1a1e2a;
  --vds-border:      rgba(255,255,255,.07);
  --vds-border-hi:   rgba(255,255,255,.18);

  --vds-teal:        #12c5bc;
  --vds-teal-dim:    rgba(18,197,188,.12);
  --vds-teal-glow:   rgba(18,197,188,.22);
  --vds-teal-rgb:    18,197,188;

  --vds-fg:          rgba(255,255,255,.92);
  --vds-muted:       rgba(255,255,255,.60);
  --vds-faint:       rgba(255,255,255,.35);

  --vds-r:           10px;
  --vds-r-lg:        16px;
  --vds-r-xl:        22px;

  --vds-font:        ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vds-font-mono:   ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.vds-body {
  background: var(--vds-bg);
  color: var(--vds-fg);
  font-family: var(--vds-font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vds-surface); }
::-webkit-scrollbar-thumb { background: rgba(var(--vds-teal-rgb),.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--vds-teal-rgb),.60); }

/* ── Focus ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   HEADER
   ============================================================ */
.vds-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(7,8,11,.88), rgba(7,8,11,.65));
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--vds-border);
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vds-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.vds-header__back {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vds-muted);
  text-decoration: none;
  transition: color .2s;
}
.vds-header__back:hover { color: var(--vds-teal); }

.vds-header__divider {
  width: 1px;
  height: 18px;
  background: var(--vds-border-hi);
}

.vds-header__title-wrap {
  display: flex;
  flex-direction: column;
}

.vds-header__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vds-fg);
  line-height: 1.1;
}

.vds-header__claim {
  font-size: 10px;
  letter-spacing: .10em;
  color: var(--vds-muted);
  text-transform: uppercase;
}

/* Sprint 21 – Content Design Studio Logo im Header (ersetzt Texttitel + Slogan).
   Kompakt (34px), blendet sich in den nahezu schwarzen Header ein; Text-Fallback
   via .vds-header__title falls die Datei fehlt. */
.vds-header__logo {
  height: 40px;
  width: auto;
  display: block;
}
@media (max-width: 540px) {
  .vds-header__logo { height: 32px; }
}

.vds-header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.vds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}

.vds-badge--mvp {
  background: var(--vds-teal-dim);
  border: 1px solid rgba(var(--vds-teal-rgb),.32);
  color: var(--vds-teal);
}

.vds-badge--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vds-teal);
  animation: vdsDotPulse 2.4s ease-in-out infinite;
}

@keyframes vdsDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}

.vds-header__hint {
  font-size: 10px;
  color: var(--vds-faint);
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ── Mobile: hide hint on small screens */
@media (max-width: 780px) {
  .vds-header__hint { display: none; }
}
@media (max-width: 540px) {
  .vds-header__meta { gap: 6px; }
}

/* ============================================================
   COCKPIT LAYOUT
   ============================================================ */
.vds-cockpit {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "assets stage props"
    "timeline timeline timeline";
  height: calc(100vh - 58px - 42px); /* header + footer */
  overflow: hidden;
}

/* ── Panel shared styles */
.vds-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--vds-border);
}

.vds-panel:last-child { border-right: none; }

.vds-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vds-border);
  background: var(--vds-surface);
  flex-shrink: 0;
}

.vds-panel__title {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vds-muted);
}

.vds-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* ============================================================
   ASSET LIBRARY (left)
   ============================================================ */
.vds-assets { grid-area: assets; }

.vds-asset-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vds-asset-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--vds-r);
  background: var(--vds-card);
  border: 1px solid var(--vds-border);
  cursor: default;
  transition: border-color .2s, background .2s;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.vds-asset-card:hover {
  border-color: rgba(var(--vds-teal-rgb),.28);
  background: var(--vds-card-hover);
}

.vds-asset-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.vds-asset-card__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--vds-fg);
  letter-spacing: .03em;
}

.vds-asset-card__type {
  font-size: 9px;
  color: var(--vds-faint);
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* coming soon overlay */
.vds-asset-card--locked::after {
  content: 'LOCKED';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: .14em;
  color: var(--vds-faint);
  font-weight: 700;
}

.vds-asset-card--active {
  border-color: rgba(var(--vds-teal-rgb),.38);
  background: rgba(var(--vds-teal-rgb),.07);
}
.vds-asset-card--active .vds-asset-card__icon {
  border-color: rgba(var(--vds-teal-rgb),.35);
  background: rgba(var(--vds-teal-rgb),.12);
}

.vds-asset-section-label {
  font-size: 8px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--vds-faint);
  padding: 8px 2px 4px;
  font-weight: 700;
}

/* ============================================================
   PREVIEW STAGE (center)
   ============================================================ */
.vds-stage-wrap {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--vds-surface);
  border-right: 1px solid var(--vds-border);
}

.vds-stage-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--vds-border);
  background: var(--vds-surface);
  flex-shrink: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

.vds-stage-toolbar__label {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vds-muted);
  font-weight: 700;
  margin-right: auto;
}

.vds-stage-toolbar__info {
  font-size: 9px;
  font-family: var(--vds-font-mono);
  color: var(--vds-faint);
  letter-spacing: .04em;
}

/* Sprint 13.2 – Stage-Zoom Selector */
.vds-zoom-select {
  background: var(--vds-card);
  color: var(--vds-muted);
  border: 1px solid var(--vds-border);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 10px;
  font-family: var(--vds-font-mono);
  cursor: pointer;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .2s, color .2s;
}
.vds-zoom-select:hover {
  border-color: rgba(var(--vds-teal-rgb),.35);
  color: var(--vds-fg);
}
.vds-zoom-select:focus {
  outline: 1px solid rgba(var(--vds-teal-rgb),.6);
  outline-offset: 1px;
}

/* Dark/Light Toggle */
.vds-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--vds-card);
  border: 1px solid var(--vds-border);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-size: 10px;
  color: var(--vds-muted);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
}

.vds-theme-toggle:hover {
  border-color: rgba(var(--vds-teal-rgb),.35);
  color: var(--vds-fg);
}

.vds-theme-toggle__icon { font-size: 12px; }

.vds-stage-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  /* subtle dot-grid background */
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Sprint 13.2 – wrapper clips visually scaled #vds-stage */
.vds-stage-outer {
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* The 1200×1200 export surface */
#vds-stage {
  width: 600px;   /* displayed at 50% of native 1200px */
  height: 600px;
  min-width: 600px;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transform-origin: top left; /* Sprint 13.2 – zoom via JS scale() */
  box-shadow:
    0 0 0 1px rgba(var(--vds-teal-rgb),.20),
    0 24px 80px rgba(0,0,0,.65),
    0 0 80px rgba(0,0,0,.45);

  /* Light mode defaults to dark-teal ibetmax look */
  background: linear-gradient(145deg, #07080b 0%, #0d1520 60%, #0b1a18 100%);
  transition: background .4s;
}

/* Stage light mode */
#vds-stage.vds-stage--light {
  background: linear-gradient(145deg, #e8eef4 0%, #f0f4f8 60%, #e4f0ef 100%);
}

/* ────────────────────────────────────────────────────────────────
   Sprint 16 – ANIMATED FRAMES LITE
   Nicht-interaktives Stage-Overlay. Liegt über Hintergrund + Inhalten
   am Rand der Stage, blockiert aber keine Bedienung (pointer-events:none).
   Rahmen werden aus Borders + Pseudo-Elementen gebaut (export-freundlich,
   html2canvas-kompatibel); box-shadow ergänzt nur den Bildschirm-Glow.
──────────────────────────────────────────────────────────────── */
.vds-stage-frame {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;   /* nie klick-/dragbar – normale Bedienung bleibt erhalten */
  z-index: 200;           /* über Inhalten; reine Dekoration am Rand */
  box-sizing: border-box;
}
.vds-stage-frame[data-frame="none"] { display: none; }

/* A) Glow Frame – dezent leuchtend, modern, leicht pulsierend */
.vds-stage-frame[data-frame="glow"] {
  display: block;
  border: 3px solid rgba(var(--vds-teal-rgb), .65);
  box-shadow:
    inset 0 0 22px rgba(var(--vds-teal-rgb), .30),
    0 0 26px rgba(var(--vds-teal-rgb), .25);
  animation: vds-frame-glow 3s ease-in-out infinite;
}
.vds-stage-frame[data-frame="glow"]::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  border: 6px solid rgba(var(--vds-teal-rgb), .12);
}
@keyframes vds-frame-glow {
  0%, 100% { border-color: rgba(var(--vds-teal-rgb), .45); }
  50%      { border-color: rgba(var(--vds-teal-rgb), .90); }
}

/* B) Crime Tape Frame – gelb/schwarzes Absperrband.
   Export-sichere Basis: solide Gelb/Schwarz-Ringe aus Borders – html2canvas
   rendert auf Overlay-Elementen nur solide Farben (keine Gradienten/border-image).
   Das echte diagonale Band liegt als ::after rein für den Bildschirm darüber
   (im PNG/Video erscheint die robuste Gelb/Schwarz-Variante). Mitte bleibt frei,
   Content bleibt lesbar. Leichtes Pulsieren über opacity. */
.vds-stage-frame[data-frame="crime"] {
  display: block;
  border: 14px solid #f4c500;                 /* gelber Warn-Rahmen (export-sicher) */
  animation: vds-frame-crime 1.4s ease-in-out infinite;
}
.vds-stage-frame[data-frame="crime"]::before { /* schwarzer Kontrast-Innenring (export-sicher) */
  content: "";
  position: absolute;
  inset: 7px;
  border: 7px solid #161616;
}
.vds-stage-frame[data-frame="crime"]::after {  /* echtes Diagonalband – nur Bildschirm */
  content: "";
  position: absolute;
  inset: 0;
  border: 14px solid transparent;
  border-image: repeating-linear-gradient(45deg, #f4c500 0 16px, #161616 16px 32px) 14;
}
@keyframes vds-frame-crime {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1;   }
}

/* C) Ocean Frame – biolumineszent/neon, tiefseeartig, leichtes Glimmen */
.vds-stage-frame[data-frame="ocean"] {
  display: block;
  border: 2px solid rgba(40, 226, 212, .60);
  box-shadow:
    inset 0 0 34px rgba(20, 160, 180, .45),
    inset 0 0 8px rgba(120, 90, 255, .35),
    0 0 24px rgba(40, 226, 212, .30);
  animation: vds-frame-ocean 4.5s ease-in-out infinite;
}
.vds-stage-frame[data-frame="ocean"]::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 3px;
  border: 4px solid rgba(120, 90, 255, .18);   /* violetter Bio-Lumen-Innenring */
}
.vds-stage-frame[data-frame="ocean"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid rgba(190, 255, 250, .50);  /* feine Neon-Kante */
}
@keyframes vds-frame-ocean {
  0%, 100% { border-color: rgba(40, 226, 212, .45); }
  50%      { border-color: rgba(120, 200, 255, .85); }
}

/* Reduced-Motion respektieren: Rahmen bleibt sichtbar, ohne Animation */
@media (prefers-reduced-motion: reduce) {
  .vds-stage-frame[data-frame="glow"],
  .vds-stage-frame[data-frame="crime"],
  .vds-stage-frame[data-frame="ocean"] {
    animation: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   Sprint 17 – STAGE-AMBIENT-EFFEKT: LUFTBLASEN
   Nicht-interaktives Overlay (erstes Stage-Kind) → über dem Hintergrund,
   unter den Inhalten. Export-freundlich: nur solide rgba-Flächen + Border
   + transform/opacity (keine Gradienten/border-image). overflow:hidden hält
   die Blasen innerhalb der Stage; pointer-events:none lässt Bedienung durch.
──────────────────────────────────────────────────────────────── */
.vds-stage-effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
  pointer-events: none;
}
.vds-stage-effects[data-effect="none"]          { display: none; }
.vds-stage-effects:not([data-effect="none"])    { display: block; }

/* Sprint 24 – je Effekt eine Gruppe; nur die zum aktiven Effekt passende
   Gruppe ist sichtbar (bubbles | diver | rockets) */
.vds-fx-group { display: none; }
.vds-stage-effects[data-effect="bubbles"] .vds-fx-group[data-fx="bubbles"],
.vds-stage-effects[data-effect="diver"]   .vds-fx-group[data-fx="diver"],
.vds-stage-effects[data-effect="rockets"] .vds-fx-group[data-fx="rockets"] { display: block; }

.vds-bubble {
  position: absolute;
  bottom: -40px;                 /* Start knapp unterhalb der Stage */
  border-radius: 50%;
  background: rgba(140, 222, 235, .10);          /* zarte cyan-teal Füllung */
  border: 1px solid rgba(150, 220, 255, .40);    /* Anlehnung an Startseiten-Blasen */
  box-shadow: inset 0 0 6px rgba(190, 245, 250, .18);  /* nur Bildschirm-Glanz */
  opacity: 0;
  will-change: transform, opacity;
  animation: vds-bubble-rise var(--dur, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes vds-bubble-rise {
  0%   { transform: translate(0, 0)               scale(.9);  opacity: 0;   }
  12%  {                                                       opacity: .75; }
  50%  { transform: translate(var(--drift, 14px), -310px) scale(1);          }
  88%  {                                                       opacity: .65; }
  100% { transform: translate(0, -640px)          scale(1.05); opacity: 0;   }
}

/* Reduced-Motion: Blasen bleiben sichtbar, aber statisch (keine Bewegung) */
@media (prefers-reduced-motion: reduce) {
  .vds-bubble {
    animation: none;
    opacity: .45;
    transform: translateY(-280px);
  }
}

/* ────────────────────────────────────────────────────────────────
   Sprint 24 – STAGE-AMBIENT-EFFEKT: TAUCHER
   CSS-Figur (Seitenansicht, schwimmt nach rechts) aus soliden rgba-Flächen
   + Border + transform/opacity – gleiche Export-Regeln wie die Luftblasen.
   Außenlayer .vds-diver zieht linear quer über die Stage, Innenlayer
   .vds-diver__float wippt (Bob) unabhängig davon. Beine kicken im Wechsel.
──────────────────────────────────────────────────────────────── */
.vds-diver {
  position: absolute;
  top: 36%;
  left: -160px;
  width: 130px;
  height: 70px;
  animation: vds-diver-cross 26s linear infinite;
  will-change: transform;
}
@keyframes vds-diver-cross {
  0%   { transform: translateX(0); }
  100% { transform: translateX(920px); }
}

.vds-diver__float {
  position: absolute;
  inset: 0;
  animation: vds-diver-bob 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes vds-diver-bob {
  0%, 100% { transform: translateY(0)     rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(3deg);  }
}

.vds-diver__float > i { position: absolute; display: block; }

/* Rumpf (Neoprenanzug, dunkles Teal) */
.vds-diver__body {
  left: 30px; top: 30px; width: 56px; height: 17px;
  border-radius: 9px;
  background: rgba(18, 62, 82, .95);
  border: 1px solid rgba(150, 220, 255, .35);
}
/* Kopf mit Haube */
.vds-diver__head {
  left: 82px; top: 25px; width: 21px; height: 21px;
  border-radius: 50%;
  background: rgba(18, 62, 82, .95);
  border: 1px solid rgba(150, 220, 255, .35);
}
/* Tauchermaske (helles Cyan-Glas) */
.vds-diver__visor {
  left: 94px; top: 31px; width: 9px; height: 10px;
  border-radius: 3px 4px 4px 3px;
  background: rgba(170, 235, 255, .85);
}
/* Pressluftflasche (Gold-Akzent) auf dem Rücken */
.vds-diver__tank {
  left: 38px; top: 20px; width: 36px; height: 10px;
  border-radius: 5px;
  background: rgba(255, 196, 60, .90);
  border: 1px solid rgba(255, 220, 130, .55);
}
/* Arm, leicht nach unten-vorn gestreckt */
.vds-diver__arm {
  left: 68px; top: 43px; width: 20px; height: 6px;
  border-radius: 3px;
  background: rgba(18, 62, 82, .95);
  transform: rotate(24deg);
  transform-origin: left center;
}
/* Beine + Flossen (helleres Teal), kicken gegenläufig */
.vds-diver__leg {
  left: 6px; top: 34px; width: 30px; height: 7px;
  border-radius: 6px 3px 3px 6px;      /* Flossen-Ende links breiter */
  background: rgba(64, 200, 220, .85);
  transform-origin: right center;
  animation: vds-diver-kick 1.1s ease-in-out infinite;
}
.vds-diver__leg--down { animation-delay: -.55s; }
@keyframes vds-diver-kick {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(12deg);  }
}

/* Atemblasen: steigen vom Kopf schräg nach hinten-oben auf */
.vds-diver-bubble {
  position: absolute;
  left: 96px; top: 20px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(140, 222, 235, .12);
  border: 1px solid rgba(150, 220, 255, .45);
  opacity: 0;
  animation: vds-diver-breath 2.7s linear infinite;
  animation-delay: var(--bdelay, 0s);
}
@keyframes vds-diver-breath {
  0%   { transform: translate(0, 0)       scale(.7);  opacity: 0;   }
  15%  {                                              opacity: .8;  }
  100% { transform: translate(-14px, -52px) scale(1.15); opacity: 0; }
}

/* Reduced-Motion: Taucher steht ruhig mitten in der Stage */
@media (prefers-reduced-motion: reduce) {
  .vds-diver,
  .vds-diver__float,
  .vds-diver__leg,
  .vds-diver-bubble {
    animation: none;
  }
  .vds-diver { transform: translateX(400px); }
  .vds-diver-bubble { opacity: .5; transform: translate(-8px, -26px); }
}

/* ────────────────────────────────────────────────────────────────
   Sprint 24 – STAGE-AMBIENT-EFFEKT: RAKETEN
   Kleine Raketen steigen von unten auf (Aufbau analog Luftblasen:
   left/--dur/--delay/--drift pro Instanz, --scale skaliert die Figur).
   Nur solide rgba-Flächen + Border + transform/opacity.
──────────────────────────────────────────────────────────────── */
.vds-rocket {
  position: absolute;
  bottom: -90px;                 /* Start knapp unterhalb der Stage */
  width: 18px;
  height: 62px;
  opacity: 0;
  transform: scale(var(--scale, 1));
  will-change: transform, opacity;
  animation: vds-rocket-launch var(--dur, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes vds-rocket-launch {
  0%   { transform: translate(0, 0)                 scale(var(--scale, 1)); opacity: 0;   }
  8%   {                                                                    opacity: .95; }
  50%  { transform: translate(var(--drift, 16px), -380px) scale(var(--scale, 1));         }
  90%  {                                                                    opacity: .85; }
  100% { transform: translate(0, -760px)            scale(var(--scale, 1)); opacity: 0;   }
}

.vds-rocket > i { position: absolute; display: block; }

/* Spitze (Gold) */
.vds-rocket__nose {
  left: 2px; top: 0; width: 14px; height: 14px;
  border-radius: 50% 50% 0 0;
  background: rgba(255, 176, 46, .95);
}
/* Rumpf (helles Grau-Blau) */
.vds-rocket__body {
  left: 2px; top: 12px; width: 14px; height: 30px;
  border-radius: 0 0 3px 3px;
  background: rgba(205, 222, 236, .92);
  border: 1px solid rgba(150, 220, 255, .40);
}
/* Bullauge (Teal-Glas) */
.vds-rocket__window {
  left: 6px; top: 19px; width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(64, 200, 220, .90);
}
/* Finnen (Gold), leicht nach außen gestellt */
.vds-rocket__fin {
  top: 32px; width: 6px; height: 14px;
  border-radius: 3px 3px 1px 1px;
  background: rgba(255, 176, 46, .95);
}
.vds-rocket__fin--l { left: -3px;  transform: rotate(14deg);  }
.vds-rocket__fin--r { right: -3px; transform: rotate(-14deg); }
/* Flamme (Amber, flackert über scaleY) */
.vds-rocket__flame {
  left: 5px; top: 44px; width: 9px; height: 16px;
  border-radius: 40% 40% 50% 50%;
  background: rgba(255, 150, 40, .90);
  transform-origin: center top;
  animation: vds-rocket-flame .32s ease-in-out infinite alternate;
}
@keyframes vds-rocket-flame {
  from { transform: scaleY(.7)  scaleX(.85); opacity: .75; }
  to   { transform: scaleY(1.2) scaleX(1);   opacity: 1;   }
}

/* Reduced-Motion: Raketen stehen ruhig verteilt in der Stage */
@media (prefers-reduced-motion: reduce) {
  .vds-rocket,
  .vds-rocket__flame {
    animation: none;
  }
  .vds-rocket { opacity: .6; transform: translateY(-380px) scale(var(--scale, 1)); }
}

/* Aktiv-Status der Effekt-Karte in der Asset Library */
.vds-asset-card--active {
  border-color: rgba(var(--vds-teal-rgb), .75) !important;
  box-shadow: 0 0 0 1px rgba(var(--vds-teal-rgb), .35), 0 0 12px rgba(var(--vds-teal-rgb), .18);
}
.vds-asset-card--active .vds-asset-card__type {
  color: var(--vds-teal);
}

/* Stage content zones */
.vds-stage__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
}

.vds-stage__headline {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vds-fg);
  line-height: 1.1;
  transition: color .4s;
}

#vds-stage.vds-stage--light .vds-stage__headline {
  color: #0d1520;
}

.vds-stage__subline {
  font-size: 14px;
  color: var(--vds-teal);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 10px;
  font-weight: 600;
}

/* Bullet area – lower third, left zone */
.vds-stage__bullets {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55%;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.28) 100%);
  border-top: 1px solid rgba(var(--vds-teal-rgb),.18);
  border-right: 1px solid rgba(var(--vds-teal-rgb),.10);
}

#vds-stage.vds-stage--light .vds-stage__bullets {
  background: linear-gradient(135deg, rgba(230,240,244,.82) 0%, rgba(210,228,236,.65) 100%);
  border-color: rgba(var(--vds-teal-rgb),.28);
}

.vds-stage__bullet-label {
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vds-teal);
  font-weight: 700;
  margin-bottom: 10px;
  opacity: .75;
}

.vds-stage__bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
  line-height: 1.4;
}

#vds-stage.vds-stage--light .vds-stage__bullet-item {
  color: rgba(10,20,30,.82);
}

.vds-stage__bullet-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vds-teal);
  margin-top: 5px;
  flex-shrink: 0;
}

/* Protected zone indicator */
.vds-stage__zone-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55%;
  height: 50%;
  border: 1px dashed rgba(var(--vds-teal-rgb),.20);
  pointer-events: none;
  border-radius: 2px;
}

.vds-stage__zone-label {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 8px;
  letter-spacing: .14em;
  color: rgba(var(--vds-teal-rgb),.40);
  font-family: var(--vds-font-mono);
  text-transform: uppercase;
  pointer-events: none;
}

/* Stage logo watermark */
.vds-stage__logo-mark {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--vds-teal-rgb),.40);
  font-weight: 700;
}

/* Stage scale indicator */
.vds-stage-scale-hint {
  font-size: 9px;
  font-family: var(--vds-font-mono);
  color: var(--vds-faint);
  text-align: center;
  padding: 5px;
  flex-shrink: 0;
  letter-spacing: .06em;
}

/* ============================================================
   PROPERTIES PANEL (right)
   ============================================================ */
.vds-props { grid-area: props; }

.vds-props-section {
  margin-bottom: 18px;
}

.vds-props-section__title {
  font-size: 8px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--vds-faint);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--vds-border);
}

.vds-prop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.vds-prop-label {
  font-size: 10px;
  color: var(--vds-muted);
  letter-spacing: .04em;
  flex-shrink: 0;
  min-width: 64px;
}

.vds-prop-value {
  font-size: 10px;
  font-family: var(--vds-font-mono);
  color: var(--vds-fg);
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border);
  border-radius: 5px;
  padding: 3px 8px;
  flex: 1;
  text-align: right;
  letter-spacing: .04em;
  cursor: default;
}

.vds-prop-value--empty {
  color: var(--vds-faint);
  font-style: italic;
}

/* Element-type chip */
.vds-prop-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--vds-teal-dim);
  border: 1px solid rgba(var(--vds-teal-rgb),.28);
  font-size: 10px;
  color: var(--vds-teal);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
}

.vds-props-placeholder {
  text-align: center;
  padding: 28px 12px;
  color: var(--vds-faint);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
}

.vds-props-placeholder__icon {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
  opacity: .4;
}

/* ── Extension point marker */
.vds-future-hook {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--vds-r);
  border: 1px dashed rgba(var(--vds-teal-rgb),.18);
  background: rgba(var(--vds-teal-rgb),.04);
  margin-top: 10px;
}

.vds-future-hook__label {
  font-size: 9px;
  color: rgba(var(--vds-teal-rgb),.50);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================================
   TIMELINE (bottom)
   ============================================================ */
.vds-timeline {
  grid-area: timeline;
  height: 120px;
  background: var(--vds-surface);
  border-top: 1px solid var(--vds-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vds-timeline__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--vds-border);
  background: var(--vds-surface2);
  flex-shrink: 0;
  height: 30px;
}

.vds-timeline__title {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vds-muted);
  font-weight: 700;
}

/* Sprint 13.2 – Timeline collapse toggle */
.vds-tl-collapse-btn {
  font-size: 13px;
  line-height: 1;
  padding: 2px 6px;
  transition: transform .2s;
  flex-shrink: 0;
}
.vds-timeline--collapsed .vds-tl-collapse-btn {
  transform: rotate(-90deg);
}
.vds-timeline--collapsed .vds-timeline__body {
  display: none;
}
.vds-timeline--collapsed {
  height: auto;
}

.vds-timeline__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.vds-tl-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--vds-card);
  border: 1px solid var(--vds-border);
  color: var(--vds-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: default;
  transition: border-color .2s, color .2s;
}
.vds-tl-btn:hover {
  border-color: rgba(var(--vds-teal-rgb),.35);
  color: var(--vds-teal);
}

.vds-timeline__duration {
  font-size: 9px;
  font-family: var(--vds-font-mono);
  color: var(--vds-faint);
  letter-spacing: .06em;
}

/* Timeline body */
.vds-timeline__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 0 80px; /* left gutter for layer labels */
  position: relative;
}

/* Layer label gutter */
.vds-tl-labels {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: var(--vds-surface2);
  border-right: 1px solid var(--vds-border);
  display: flex;
  flex-direction: column;
}

.vds-tl-label-spacer {
  height: 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--vds-border);
}

.vds-tl-label {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--vds-muted);
  border-bottom: 1px solid var(--vds-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ruler */
.vds-tl-ruler {
  height: 20px;
  flex-shrink: 0;
  background: var(--vds-surface2);
  border-bottom: 1px solid var(--vds-border);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

.vds-tl-ruler-mark {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vds-tl-ruler-mark__line {
  width: 1px;
  height: 6px;
  background: var(--vds-border-hi);
}

.vds-tl-ruler-mark__label {
  font-size: 8px;
  font-family: var(--vds-font-mono);
  color: var(--vds-faint);
  letter-spacing: .04em;
  margin-bottom: 2px;
  transform: translateX(-50%);
}

/* Track area */
.vds-tl-tracks {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.vds-tl-track {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--vds-border);
  display: flex;
  align-items: center;
}

.vds-tl-clip {
  position: absolute;
  height: 70%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
  border: 1px solid rgba(255,255,255,.12);
}

.vds-tl-clip--teal {
  background: rgba(var(--vds-teal-rgb),.22);
  border-color: rgba(var(--vds-teal-rgb),.40);
  color: var(--vds-teal);
}

.vds-tl-clip--purple {
  background: rgba(140,70,255,.18);
  border-color: rgba(140,70,255,.38);
  color: rgba(180,130,255,.90);
}

.vds-tl-clip--amber {
  background: rgba(245,168,40,.18);
  border-color: rgba(245,168,40,.38);
  color: rgba(245,200,80,.90);
}

.vds-tl-clip--blue {
  background: rgba(56,130,240,.18);
  border-color: rgba(56,130,240,.38);
  color: rgba(100,165,255,.90);
}

/* Playhead */
.vds-tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--vds-teal);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 6px rgba(var(--vds-teal-rgb),.55);
}

.vds-tl-playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: 9px;
  height: 9px;
  background: var(--vds-teal);
  border-radius: 2px 2px 50% 50%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ============================================================
   FOOTER / STATUS BAR
   ============================================================ */
.vds-statusbar {
  height: 42px;
  background: var(--vds-surface2);
  border-top: 1px solid var(--vds-border);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.vds-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-right: 1px solid var(--vds-border);
  height: 100%;
  font-size: 9px;
  letter-spacing: .10em;
  color: var(--vds-faint);
  white-space: nowrap;
}

.vds-status-item:first-child { padding-left: 0; }
.vds-status-item:last-child  { border-right: none; padding-right: 0; }

.vds-status-item__icon { font-size: 11px; opacity: .6; }

.vds-status-item--teal { color: rgba(var(--vds-teal-rgb),.65); }

.vds-status-item--frozen {
  margin-left: auto;
  color: rgba(245,200,80,.55);
  border-right: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Sprint 13.1 – Toolbar-Overflow-Fix
   Bei ≤1440 px (14–15"-Laptops) passen die vollen Beschriftungen
   und Status-Badges nicht mehr in die Stage-Spalte (~980 px).
   Lösung: Beschriftungen und rein informative Badges ausblenden →
   Buttons bleiben per Icon + aria-label weiterhin bedienbar. */
@media (max-width: 1440px) {
  .vds-tbar-label         { display: none; }
  .vds-theme-toggle__text { display: none; }
  .vds-save-status        { display: none; }
  .vds-export-status      { display: none; }
  .vds-undo-status        { display: none; }
}

@media (max-width: 1100px) {
  .vds-cockpit {
    grid-template-columns: 190px 1fr 210px;
  }
}

@media (max-width: 880px) {
  /* Stack panels vertically on tablet */
  .vds-cockpit {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "stage"
      "assets"
      "props"
      "timeline";
    height: auto;
    overflow: visible;
  }

  .vds-panel { border-right: none; border-bottom: 1px solid var(--vds-border); }
  .vds-stage-wrap { border-right: none; }
  .vds-stage-canvas { min-height: 380px; }
  #vds-stage { width: 320px; height: 320px; min-width: 320px; min-height: 320px; }

  .vds-timeline {
    height: 160px;
  }
}

@media (max-width: 540px) {
  .vds-header__title { font-size: 12px; }
  .vds-statusbar { flex-wrap: wrap; height: auto; padding: 6px 12px; gap: 4px; }
  .vds-status-item { padding: 2px 8px; height: auto; border: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vds-badge--dot::before { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   GLOW ACCENT LINE (top border of header)
   ============================================================ */
.vds-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--vds-teal-rgb),.35) 30%,
    rgba(var(--vds-teal-rgb),.55) 50%,
    rgba(var(--vds-teal-rgb),.35) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* ============================================================
   STAGE – ibetmax brand bar (bottom of stage)
   ============================================================ */
.vds-stage__brand-bar {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 55%; /* sits right of the protected bullet zone */
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--vds-teal-rgb),.55) 40%,
    rgba(var(--vds-teal-rgb),.85) 100%
  );
}

/* ============================================================
   SPRINT 2 – STAGE ELEMENTS (dynamic layers)
   ============================================================ */

/* Base layer element */
.vds-stage-element {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: default;
  user-select: none;
  transition: border-color .12s, box-shadow .12s;
  overflow: hidden;
  z-index: 20;
}

/* Selection state */
.vds-stage-element--selected {
  border-color: rgba(var(--vds-teal-rgb),.80) !important;
  box-shadow:
    0 0 0 2px rgba(var(--vds-teal-rgb),.25),
    0 0 14px rgba(var(--vds-teal-rgb),.18);
  z-index: 30;
}

/* Dashed outer ring on selection */
.vds-stage-element--selected::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px dashed rgba(var(--vds-teal-rgb),.55);
  border-radius: 5px;
  pointer-events: none;
}

/* Layer ID label (only visible when selected) */
.vds-stage-element__label {
  position: absolute;
  top: -17px;
  left: 0;
  font-size: 8px;
  font-family: var(--vds-font-mono);
  color: rgba(var(--vds-teal-rgb),.70);
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  background: rgba(7,8,11,.75);
  padding: 1px 4px;
  border-radius: 3px;
}

.vds-stage-element--selected .vds-stage-element__label {
  opacity: 1;
}

/* Content wrapper inside element */
.vds-stage-element__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  line-height: 1.35;
}

/* Text element */
.vds-stage-element--text {
  background: rgba(0,0,0,.15);
  border-color: rgba(255,255,255,.10);
}
.vds-stage-element--text .vds-stage-element__content {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  align-items: flex-start;
}

/* Bullet list element */
.vds-stage-element--bullets .vds-stage-element__content {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .03em;
  color: rgba(255,255,255,.82);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Logo / brand element */
.vds-stage-element--logo {
  background: rgba(var(--vds-teal-rgb),.08);
  border-color: rgba(var(--vds-teal-rgb),.28) !important;
}
.vds-stage-element--logo .vds-stage-element__content {
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vds-teal);
  gap: 8px;
}

/* Sprint 22 – Claude-Männchen (PixelMascot-Canvas).
   overflow:visible, damit Hüpfer (Headroom über dem Element) und
   Glitch-Slices nicht am Element-Rahmen abgeschnitten werden. */
.vds-stage-element--mascot {
  overflow: visible;
  background: transparent;
}
.vds-stage-mascot {
  width: 100%;
  height: 100%;
  pointer-events: none;   /* Drag/Select läuft über das Element-Div */
}

/* Sprint 23 – Morphende Masse (Living-Concept-Look).
   5 Blobs mit Goo-Filter verschmelzen organisch; Palette über
   Farbklassen (teal = Grün aus der Living-Concept-Präsentation). */
.vds-stage-element--blobmass {
  overflow: visible;
  background: transparent;
}
.vds-blobmass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  filter: url(#vds-goo-filter);
  isolation: isolate;
  pointer-events: none;
  --bm-light: #4be3da;
  --bm-base:  #12c5bc;
  --bm-glow:  rgba(18,197,188,.16);
}
.vds-blobmass--gold {
  --bm-light: #ffd479;
  --bm-base:  #f5a828;
  --bm-glow:  rgba(245,168,40,.16);
}
.vds-blobmass--blue {
  --bm-light: #9ab8ff;
  --bm-base:  #6490f0;
  --bm-glow:  rgba(100,144,240,.16);
}
.vds-blobmass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--bm-glow), transparent 72%);
}
.vds-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  mix-blend-mode: screen;
  will-change: transform;
  background: radial-gradient(circle at 40% 40%, var(--bm-light), var(--bm-base) 58%, transparent 78%);
}
.vds-blob--1 { width: 46%; height: 46%; left: 12%;  top: 18%;    animation: vds-blob-1 11s ease-in-out infinite; }
.vds-blob--2 { width: 38%; height: 38%; right: 10%; top: 38%;    animation: vds-blob-2 14s ease-in-out infinite; }
.vds-blob--3 { width: 32%; height: 32%; left: 30%;  bottom: 8%;  animation: vds-blob-3 9s  ease-in-out infinite; }
.vds-blob--4 { width: 26%; height: 26%; left: 8%;   bottom: 22%; animation: vds-blob-4 13s ease-in-out infinite; }
.vds-blob--5 { width: 22%; height: 22%; right: 22%; top: 12%;    animation: vds-blob-5 16s ease-in-out infinite; }

@keyframes vds-blob-1 {
  0%   { transform: translate( 0%,   0%) scale(1.00); }
  25%  { transform: translate(18%, -10%) scale(1.12); }
  50%  { transform: translate(28%,  18%) scale(0.92); }
  75%  { transform: translate( 6%,  26%) scale(1.06); }
  100% { transform: translate( 0%,   0%) scale(1.00); }
}
@keyframes vds-blob-2 {
  0%   { transform: translate(  0%,   0%) scale(1.00); }
  33%  { transform: translate(-22%,  14%) scale(0.88); }
  66%  { transform: translate(-12%, -22%) scale(1.18); }
  100% { transform: translate(  0%,   0%) scale(1.00); }
}
@keyframes vds-blob-3 {
  0%   { transform: translate(  0%,   0%) scale(1.00); }
  25%  { transform: translate(-18%, -22%) scale(1.20); }
  50%  { transform: translate( 14%, -10%) scale(0.86); }
  75%  { transform: translate( 22%,  12%) scale(1.04); }
  100% { transform: translate(  0%,   0%) scale(1.00); }
}
@keyframes vds-blob-4 {
  0%   { transform: translate(  0%,   0%) scale(1.00); }
  40%  { transform: translate( 26%,  -6%) scale(1.15); }
  70%  { transform: translate( 12%, -22%) scale(0.92); }
  100% { transform: translate(  0%,   0%) scale(1.00); }
}
@keyframes vds-blob-5 {
  0%   { transform: translate(  0%,   0%) scale(1.00); }
  30%  { transform: translate(-14%,  18%) scale(0.85); }
  60%  { transform: translate(-26%,   4%) scale(1.22); }
  100% { transform: translate(  0%,   0%) scale(1.00); }
}
@media (prefers-reduced-motion: reduce) {
  .vds-blob { animation: none; }
}

/* Sprint 23 – Galaxy-Raumschiff (Canvas-Animation im Element) */
.vds-stage-element--ship {
  background: transparent;
}
.vds-stage-ship {
  width: 100%;
  height: 100%;
  pointer-events: none;   /* Drag/Select läuft über das Element-Div */
}

/* Sprint 25 – Planeten-Orbit (Canvas-Host wie Maskottchen/Raumschiff) */
.vds-stage-orbit {
  width: 100%;
  height: 100%;
  pointer-events: none;   /* Drag/Select läuft über das Element-Div */
}

/* Sprint 23 – aktive Farb-Swatch der Morphenden Masse */
.vds-blobmass-swatch--active {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

/* Background element */
.vds-stage-element--background {
  border-radius: 0;
  background: linear-gradient(145deg, rgba(5,12,22,.85) 0%, rgba(8,20,18,.85) 100%);
  border-color: rgba(255,255,255,.06) !important;
  z-index: 10; /* behind normal elements */
}

/* Existing headline on stage – selectable */
.vds-stage__headline--selectable {
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: border-color .15s;
}
.vds-stage__headline--selectable:hover {
  border-color: rgba(var(--vds-teal-rgb),.30);
}
.vds-stage__headline--selectable[contenteditable="true"]:focus {
  outline: 2px solid rgba(var(--vds-teal-rgb),.65);
  outline-offset: 2px;
  border-color: transparent;
}

/* ============================================================
   SPRINT 2 – PROPERTIES PANEL INPUTS
   ============================================================ */

.vds-prop-input {
  font-family: var(--vds-font-mono);
  font-size: 11px;
  color: var(--vds-fg);
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border-hi);
  border-radius: 5px;
  padding: 4px 8px;
  flex: 1;
  min-width: 0;
  text-align: right;
  transition: border-color .18s;
  width: 100%;
}

.vds-prop-input:focus {
  border-color: var(--vds-teal);
  outline: none;
}

.vds-prop-input--textarea {
  resize: vertical;
  text-align: left;
  min-height: 58px;
  font-size: 10px;
  line-height: 1.45;
  padding: 5px 8px;
}

/* Full-width row (label stacked above input) */
.vds-prop-row--full {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.vds-prop-row--full .vds-prop-label {
  min-width: unset;
}

/* Delete button */
.vds-prop-delete-btn {
  width: 100%;
  padding: 7px 12px;
  background: rgba(220,50,50,.10);
  border: 1px solid rgba(220,50,50,.28);
  border-radius: var(--vds-r);
  color: rgba(255,110,110,.82);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  font-family: var(--vds-font);
}
.vds-prop-delete-btn:hover {
  background: rgba(220,50,50,.22);
  border-color: rgba(220,50,50,.55);
  color: rgba(255,130,130,.95);
}
.vds-prop-delete-btn:focus-visible {
  outline: 2px solid rgba(220,50,50,.60);
  outline-offset: 2px;
}

/* Layer count badge in panel header */
.vds-panel__count {
  font-size: 9px;
  font-family: var(--vds-font-mono);
  color: var(--vds-faint);
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border);
  border-radius: 100px;
  padding: 1px 7px;
  letter-spacing: .04em;
}

/* Add-to-stage hint on asset cards */
.vds-asset-card:not(.vds-asset-card--locked)::after {
  content: '+ Stage';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: .10em;
  color: rgba(var(--vds-teal-rgb),.45);
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s;
}
.vds-asset-card:not(.vds-asset-card--locked):hover::after {
  opacity: 1;
}

/* ── Light mode adjustments for stage elements */
#vds-stage.vds-stage--light .vds-stage-element--text .vds-stage-element__content {
  color: rgba(10,20,30,.90);
}
#vds-stage.vds-stage--light .vds-stage-element--logo {
  background: rgba(var(--vds-teal-rgb),.12);
}
#vds-stage.vds-stage--light .vds-stage-element--background {
  background: linear-gradient(145deg, rgba(210,228,240,.85) 0%, rgba(200,232,228,.85) 100%);
}

/* ── Reduced motion for Sprint 2 elements */
@media (prefers-reduced-motion: reduce) {
  .vds-stage-element { transition: none; }
  .vds-stage-element__label { transition: none; }
}

/* ============================================================
   SPRINT 3 – DRAG, LAYER CONTROLS, SAVE, GRID
   ============================================================ */

/* Drag cursor */
.vds-stage-element { cursor: grab; }
.vds-stage-element--dragging {
  cursor: grabbing;
  opacity: .92;
  box-shadow:
    0 0 0 2px rgba(var(--vds-teal-rgb),.70),
    0 8px 28px rgba(0,0,0,.55);
}

/* Prevent text selection on stage while dragging */
.vds-stage--dragging { user-select: none; }

/* Grid overlay */
#vds-stage.vds-stage--grid {
  background-image:
    linear-gradient(rgba(var(--vds-teal-rgb),.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--vds-teal-rgb),.07) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Active grid toggle */
.vds-theme-toggle--active {
  border-color: rgba(var(--vds-teal-rgb),.50) !important;
  background: rgba(var(--vds-teal-rgb),.12) !important;
  color: var(--vds-teal) !important;
}

/* Toolbar separator */
.vds-tbar-sep {
  width: 1px;
  height: 16px;
  background: var(--vds-border-hi);
  flex-shrink: 0;
}

/* Toolbar action buttons (Save / Reset) */
.vds-tbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  font-family: var(--vds-font);
  background: var(--vds-card);
  border: 1px solid var(--vds-border-hi);
  color: var(--vds-fg);
  white-space: nowrap;
}
.vds-tbar-btn:hover {
  background: var(--vds-card-hover);
  border-color: rgba(var(--vds-teal-rgb),.40);
}
.vds-tbar-btn:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}
.vds-tbar-btn--reset {
  color: var(--vds-muted);
}
.vds-tbar-btn--reset:hover {
  color: rgba(255,120,120,.90);
  border-color: rgba(220,50,50,.35);
}

/* Save status badge */
.vds-save-status {
  font-size: 9px;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color .25s, border-color .25s, background .25s;
}
.vds-save-status--neutral {
  color: var(--vds-faint);
  border-color: var(--vds-border);
  background: transparent;
}
.vds-save-status--saved {
  color: rgba(var(--vds-teal-rgb),.85);
  border-color: rgba(var(--vds-teal-rgb),.28);
  background: rgba(var(--vds-teal-rgb),.07);
}
.vds-save-status--unsaved {
  color: rgba(245,168,40,.82);
  border-color: rgba(245,168,40,.28);
  background: rgba(245,168,40,.06);
}

/* Layer control buttons */
.vds-prop-row--buttons {
  gap: 6px;
}
.vds-layer-btn {
  flex: 1;
  padding: 5px 8px;
  background: var(--vds-card);
  border: 1px solid var(--vds-border-hi);
  border-radius: var(--vds-r);
  color: var(--vds-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  font-family: var(--vds-font);
  text-align: center;
}
.vds-layer-btn:hover {
  background: var(--vds-card-hover);
  border-color: rgba(var(--vds-teal-rgb),.35);
  color: var(--vds-teal);
}
.vds-layer-btn:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}

/* Layer list (always-visible in panel) */
.vds-props-section--layer-list {
  border-top: 1px solid var(--vds-border);
  margin-top: 4px;
  padding-top: 12px;
}
.vds-layer-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.vds-layer-list__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--vds-card);
  border: 1px solid var(--vds-border);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 10px;
  color: var(--vds-muted);
  user-select: none;
}
.vds-layer-list__item:hover {
  border-color: rgba(var(--vds-teal-rgb),.28);
  color: var(--vds-fg);
}
.vds-layer-list__item--active {
  border-color: rgba(var(--vds-teal-rgb),.55) !important;
  background: rgba(var(--vds-teal-rgb),.08) !important;
  color: var(--vds-teal);
}
.vds-layer-list__icon {
  font-size: 11px;
  opacity: .65;
  flex-shrink: 0;
}
.vds-layer-list__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .04em;
}
.vds-layer-list__z {
  font-family: var(--vds-font-mono);
  font-size: 8px;
  color: var(--vds-faint);
  flex-shrink: 0;
}
.vds-layer-list-empty {
  font-size: 10px;
  color: var(--vds-faint);
  padding: 8px 0 2px;
  letter-spacing: .04em;
  display: none;
}
.vds-layer-list-empty.vds-visible {
  display: block;
}

/* @media adjustments */
@media (max-width: 880px) {
  .vds-tbar-btn span { display: none; }
  .vds-save-status   { display: none; }
}

/* ============================================================
   SPRINT 4 – EXPORT BUTTON & STATUS
   ============================================================ */

.vds-tbar-btn--export {
  color: var(--vds-teal);
  border-color: rgba(var(--vds-teal-rgb),.32);
  background: rgba(var(--vds-teal-rgb),.06);
}
.vds-tbar-btn--export:hover {
  background: rgba(var(--vds-teal-rgb),.14);
  border-color: rgba(var(--vds-teal-rgb),.55);
  color: var(--vds-teal);
}
.vds-tbar-btn--export:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.vds-export-status {
  font-size: 9px;
  letter-spacing: .07em;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color .25s, border-color .25s, background .25s;
}
.vds-export-status--idle {
  color: var(--vds-faint);
  border-color: var(--vds-border);
  background: transparent;
}
.vds-export-status--running {
  color: rgba(245,168,40,.82);
  border-color: rgba(245,168,40,.28);
  background: rgba(245,168,40,.06);
}
.vds-export-status--done {
  color: rgba(var(--vds-teal-rgb),.85);
  border-color: rgba(var(--vds-teal-rgb),.28);
  background: rgba(var(--vds-teal-rgb),.07);
}
.vds-export-status--error {
  color: rgba(255,100,100,.82);
  border-color: rgba(220,50,50,.28);
  background: rgba(220,50,50,.06);
}

@media (max-width: 880px) {
  .vds-export-status { display: none; }
}

/* ============================================================
   SPRINT 4 – OPACITY CONTROL
   ============================================================ */

.vds-opacity-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.vds-opacity-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border-hi);
  outline: none;
  cursor: pointer;
  accent-color: var(--vds-teal);
  min-width: 0;
}
.vds-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--vds-teal);
  border: 2px solid var(--vds-bg);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(var(--vds-teal-rgb),.45);
}
.vds-opacity-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--vds-teal);
  border: 2px solid var(--vds-bg);
  cursor: pointer;
}
.vds-opacity-slider:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.vds-opacity-value {
  font-family: var(--vds-font-mono);
  font-size: 10px;
  color: var(--vds-fg);
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border);
  border-radius: 5px;
  padding: 2px 6px;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   SPRINT 4 – RESET MODAL
   ============================================================ */

.vds-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vds-modal-overlay[hidden] { display: none; }

.vds-modal {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(145deg, #111520 0%, #0d1218 100%);
  border: 1px solid rgba(var(--vds-teal-rgb),.22);
  border-radius: var(--vds-r-xl);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.50),
    0 24px 64px rgba(0,0,0,.70),
    0 0 40px rgba(var(--vds-teal-rgb),.06);
  overflow: hidden;
}

.vds-modal__header {
  padding: 22px 24px 0;
}

.vds-modal__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vds-fg);
  line-height: 1.2;
}

.vds-modal__body {
  padding: 14px 24px 20px;
}

.vds-modal__text {
  font-size: 12px;
  color: var(--vds-muted);
  line-height: 1.6;
  letter-spacing: .03em;
}

.vds-modal__footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--vds-border);
  background: rgba(0,0,0,.25);
}

.vds-modal__btn {
  flex: 1;
  padding: 9px 16px;
  border-radius: var(--vds-r);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  font-family: var(--vds-font);
  border: 1px solid transparent;
}
.vds-modal__btn:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 3px;
}
.vds-modal__btn--cancel {
  background: var(--vds-card);
  border-color: var(--vds-border-hi);
  color: var(--vds-muted);
}
.vds-modal__btn--cancel:hover {
  background: var(--vds-card-hover);
  border-color: rgba(var(--vds-teal-rgb),.30);
  color: var(--vds-fg);
}
.vds-modal__btn--confirm {
  background: rgba(220,50,50,.12);
  border-color: rgba(220,50,50,.32);
  color: rgba(255,110,110,.85);
}
.vds-modal__btn--confirm:hover {
  background: rgba(220,50,50,.24);
  border-color: rgba(220,50,50,.58);
  color: rgba(255,140,140,.95);
}

@media (prefers-reduced-motion: reduce) {
  .vds-export-status { transition: none; }
  .vds-modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================
   SPRINT 5 – BULLET LIST STAGE ELEMENT
   ============================================================ */

.vds-stage-element--bulletlist {
  background: rgba(0,0,0,.32);
  border-color: rgba(var(--vds-teal-rgb),.22) !important;
}
.vds-stage-element--bulletlist .vds-stage-element__content {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .03em;
  overflow: hidden;
}

.vds-bullet-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.90);
  line-height: 1.4;
}

.vds-bullet-glow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vds-teal);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--vds-teal-rgb),.70);
}

.vds-bullet-empty-hint {
  font-size: 10px;
  color: rgba(255,255,255,.22);
  letter-spacing: .06em;
  font-style: italic;
}

#vds-stage.vds-stage--light .vds-stage-element--bulletlist {
  background: rgba(255,255,255,.38);
  border-color: rgba(var(--vds-teal-rgb),.30) !important;
}
#vds-stage.vds-stage--light .vds-bullet-line {
  color: rgba(10,20,30,.90);
}

/* ============================================================
   SPRINT 5 – COLOR CONTROLS
   ============================================================ */

.vds-color-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.vds-color-picker {
  width: 32px;
  height: 22px;
  padding: 1px 2px;
  border-radius: 4px;
  border: 1px solid var(--vds-border-hi);
  background: var(--vds-surface2);
  cursor: pointer;
  flex-shrink: 0;
}
.vds-color-picker:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}

.vds-color-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.vds-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.vds-color-swatch:hover {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255,255,255,.35);
}
.vds-color-swatch:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}

.vds-transp-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--vds-muted);
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
}

.vds-transp-check {
  width: 13px;
  height: 13px;
  accent-color: var(--vds-teal);
  cursor: pointer;
}

/* ============================================================
   SPRINT 5 – STAGE & SELECT STYLES
   ============================================================ */

.vds-props-section--stage {
  border-bottom: 1px solid var(--vds-border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.vds-prop-select {
  flex: 1;
  background: var(--vds-surface2);
  border: 1px solid var(--vds-border-hi);
  border-radius: 5px;
  color: var(--vds-fg);
  font-family: var(--vds-font);
  font-size: 10px;
  padding: 4px 6px;
  cursor: pointer;
  min-width: 0;
}
.vds-prop-select:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}
.vds-prop-select--sm {
  flex: none;
  min-width: 80px;
}

.vds-prop-input--sm {
  max-width: 55px;
  flex: none;
  text-align: right;
}

.vds-prop-unit {
  font-size: 9px;
  color: var(--vds-faint);
  flex-shrink: 0;
  letter-spacing: .06em;
}

.vds-future-hook--sm {
  padding: 5px 8px;
  margin-top: 6px;
}
.vds-future-hook--sm .vds-future-hook__label {
  font-size: 8px;
  color: rgba(var(--vds-teal-rgb),.40);
}

.vds-bullet-input {
  text-align: left;
  letter-spacing: .03em;
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vds-color-swatch { transition: none; }
}

/* ============================================================
   SPRINT 6 – BULLET REVEAL ANIMATION
   ============================================================ */

@keyframes vdsBulletRevealIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hidden state – before reveal or during reset */
.vds-bullet-line--hidden {
  opacity: 0;
  transform: translateX(-12px);
}

/* Visible state – triggered by JS one line at a time */
.vds-bullet-line--visible {
  animation: vdsBulletRevealIn 0.38s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .vds-bullet-line--hidden {
    opacity: 0;
    transform: none;
  }
  .vds-bullet-line--visible {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   SPRINT 6 – REVEAL TEST BUTTON
   ============================================================ */

.vds-reveal-test-btn {
  width: 100%;
  padding: 6px 10px;
  background: rgba(var(--vds-teal-rgb), .08);
  border: 1px solid rgba(var(--vds-teal-rgb), .30);
  border-radius: var(--vds-r);
  color: var(--vds-teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  font-family: var(--vds-font);
}
.vds-reveal-test-btn:hover:not(:disabled) {
  background: rgba(var(--vds-teal-rgb), .18);
  border-color: rgba(var(--vds-teal-rgb), .55);
}
.vds-reveal-test-btn:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}
.vds-reveal-test-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.vds-reveal-status {
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(var(--vds-teal-rgb), .72);
  text-align: center;
  padding: 4px 0 0;
  font-family: var(--vds-font-mono);
}

/* Sprint 25 – KI-Assistent-Styles (Sprint 6) entfernt */

@media (prefers-reduced-motion: reduce) {
  .vds-reveal-test-btn { transition: none; }
}

/* ============================================================
   SPRINT 7 – UNDO / REDO BUTTONS & STATUS
   ============================================================ */

.vds-tbar-btn--undo {
  color: var(--vds-muted);
}
.vds-tbar-btn--undo:hover:not(:disabled) {
  color: var(--vds-fg);
  border-color: rgba(var(--vds-teal-rgb), .38);
}
.vds-tbar-btn--undo:disabled {
  opacity: .32;
  cursor: not-allowed;
  pointer-events: none;
}

.vds-undo-status {
  font-size: 9px;
  letter-spacing: .08em;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
  color: rgba(var(--vds-teal-rgb), .80);
  border: 1px solid rgba(var(--vds-teal-rgb), .22);
  background: rgba(var(--vds-teal-rgb), .06);
  transition: opacity .25s;
}
.vds-undo-status[hidden] { display: none; }

@media (max-width: 880px) {
  .vds-undo-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vds-tbar-btn--undo { transition: none; }
  .vds-undo-status    { transition: none; }
}

/* ============================================================
   SPRINT 8 – DYNAMIC TIMELINE & ELEMENT TIMING
   ============================================================ */

/* Override: Tracks-Container wird zum Flex-Column */
.vds-tl-tracks {
  display: flex;
  flex-direction: column;
}

/* Override: Track-Zeile ist kein absolutes Element mehr */
.vds-tl-track {
  position: relative;
  flex: 1;
  left: auto;
  right: auto;
  top: auto;
  height: auto;
  min-height: 18px;
  border-bottom: 1px solid var(--vds-border);
  display: flex;
  align-items: center;
}

/* Clips sind jetzt Buttons */
.vds-tl-clip {
  cursor: pointer;
  font-family: var(--vds-font);
}
.vds-tl-clip:hover {
  filter: brightness(1.3);
}
.vds-tl-clip:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Aktiver Clip (ausgewähltes Element) */
.vds-tl-clip--active {
  box-shadow:
    0 0 0 1.5px rgba(var(--vds-teal-rgb), .90),
    0 0 10px rgba(var(--vds-teal-rgb), .35) !important;
  filter: brightness(1.2);
}

/* Grün-Clip für FX / Charakter */
.vds-tl-clip--green {
  background: rgba(60, 200, 100, .18);
  border-color: rgba(60, 200, 100, .40);
  color: rgba(110, 230, 140, .90);
}

/* Aktives Label in der linken Spalte */
.vds-tl-label--active {
  color: var(--vds-teal);
  font-weight: 700;
}

/* Timeline leer (keine Elemente) */
.vds-tl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 10px;
  color: var(--vds-faint);
  letter-spacing: .06em;
  padding: 8px;
  font-style: italic;
}

/* Stage-Element während Zeitvorschau ausgeblendet */
.vds-el--timeline-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Zeitvorschau-Controls in der Timeline-Header */
.vds-tl-preview-label {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--vds-faint);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}

.vds-tl-time-slider {
  width: 80px;
  accent-color: var(--vds-teal);
  cursor: pointer;
  flex-shrink: 0;
}
.vds-tl-time-slider:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.vds-tl-time-display {
  font-size: 9px;
  font-family: var(--vds-font-mono);
  color: rgba(var(--vds-teal-rgb), .70);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.vds-tl-reset-btn {
  font-size: 9px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .vds-tl-preview-label,
  .vds-tl-time-slider,
  .vds-tl-time-display,
  .vds-tl-reset-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vds-tl-clip { transition: none; filter: none; }
  .vds-tl-clip:hover { filter: none; }
}

/* ============================================================
   SPRINT 9 – PLAYBACK ENGINE STYLES
   ============================================================ */

/* Play/Pause/Stop Buttons – echte <button>-Elemente statt divs */
.vds-tl-btn {
  cursor: pointer;
  font-family: var(--vds-font);
  font-size: 11px;
}
.vds-tl-btn:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.vds-tl-btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  pointer-events: none;
}
.vds-tl-btn--play:not(:disabled):hover {
  background: rgba(var(--vds-teal-rgb), .18);
  border-color: rgba(var(--vds-teal-rgb), .55);
  color: var(--vds-teal);
}

/* Playback Status Badge */
.vds-pb-status {
  font-size: 9px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--vds-border);
  color: var(--vds-faint);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .2s, border-color .2s, background .2s;
}
.vds-pb-status--running {
  color: rgba(var(--vds-teal-rgb), .90);
  border-color: rgba(var(--vds-teal-rgb), .40);
  background: rgba(var(--vds-teal-rgb), .08);
  animation: vdsPbPulse 1.6s ease-in-out infinite;
}
.vds-pb-status--paused {
  color: rgba(245, 168, 40, .85);
  border-color: rgba(245, 168, 40, .35);
  background: rgba(245, 168, 40, .07);
}
.vds-pb-status--stopped {
  color: var(--vds-muted);
  border-color: var(--vds-border-hi);
  background: transparent;
}

@keyframes vdsPbPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Active-time clip: subtle brightness boost for clips visible at current time */
.vds-tl-clip--active-time {
  filter: brightness(1.35) saturate(1.2);
  border-width: 1.5px;
}

/* Don't stack active-time and active-selected oddly */
.vds-tl-clip--active.vds-tl-clip--active-time {
  filter: brightness(1.35) saturate(1.2);
}

/* Playhead line inside vds-tl-tracks */
.vds-tl-playhead-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--vds-teal);
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 8px rgba(var(--vds-teal-rgb), .65);
  transform: translateX(-1px);
}

.vds-tl-playhead-line::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: var(--vds-teal);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 1px;
}

@media (max-width: 880px) {
  .vds-pb-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vds-pb-status--running { animation: none; }
  .vds-tl-clip--active-time { filter: none; border-width: 1px; }
  .vds-tl-playhead-line { transition: none; box-shadow: none; }
}

/* ============================================================
   SPRINT 10 – VIDEO-EXPORT-PROTOTYP
   ============================================================ */

/* Toolbar-Button – Amber/Gold (unterscheidet sich vom PNG-Export-Teal) */
.vds-tbar-btn--video-export {
  color: #f5a828;
  border-color: rgba(245,168,40,.32);
  background: rgba(245,168,40,.06);
}
.vds-tbar-btn--video-export:hover {
  background: rgba(245,168,40,.14);
  border-color: rgba(245,168,40,.55);
  color: #f5a828;
}
.vds-tbar-btn--video-export:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Modal-Zeile (Label + Control) */
.vds-vex-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.vds-vex-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vds-muted);
  width: 56px;
  flex-shrink: 0;
}

/* Format-Badge */
.vds-vex-format-badge {
  font-size: 11px;
  font-family: var(--vds-font-mono);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--vds-border);
  background: transparent;
  color: var(--vds-muted);
}
.vds-vex-format-badge--ok {
  color: rgba(var(--vds-teal-rgb),.9);
  border-color: rgba(var(--vds-teal-rgb),.28);
  background: rgba(var(--vds-teal-rgb),.07);
}
.vds-vex-format-badge--error {
  color: rgba(255,100,100,.85);
  border-color: rgba(220,50,50,.28);
  background: rgba(220,50,50,.06);
}

/* Prototyp-Hinweis */
.vds-vex-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(245,168,40,.06);
  border: 1px solid rgba(245,168,40,.20);
  border-radius: var(--vds-r);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 11px;
  color: rgba(245,168,40,.82);
  line-height: 1.55;
}
.vds-vex-hint__icon { flex-shrink: 0; margin-top: 1px; }

/* Fortschrittsbalken */
.vds-vex-progress-wrap { margin-bottom: 10px; }

.vds-vex-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-bottom: 6px;
}
.vds-vex-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vds-teal), #f5a828);
  border-radius: 3px;
  transition: width .15s ease;
}
.vds-vex-progress-text {
  font-size: 10px;
  color: var(--vds-muted);
  font-family: var(--vds-font-mono);
}

/* Statuszeile */
.vds-vex-status {
  font-size: 11px;
  min-height: 18px;
  color: var(--vds-faint);
  margin-top: 2px;
}
.vds-vex-status--running { color: rgba(245,168,40,.85); }
.vds-vex-status--done    { color: rgba(var(--vds-teal-rgb),.88); }
.vds-vex-status--error   { color: rgba(255,100,100,.85); }
.vds-vex-status--aborted { color: var(--vds-muted); }

/* "Export starten"-Button – Amber statt Rot (überschreibt --confirm) */
.vds-vex-start-btn {
  background: rgba(245,168,40,.10);
  border-color: rgba(245,168,40,.38);
  color: #f5a828;
}
.vds-vex-start-btn:hover {
  background: rgba(245,168,40,.22);
  border-color: rgba(245,168,40,.60);
  color: #f7b733;
}
.vds-vex-start-btn:disabled {
  opacity: .40;
  cursor: not-allowed;
  pointer-events: none;
}

/* "⏸ Abbrechen"-Variante wenn Export läuft */
.vds-modal__btn--abort {
  color: rgba(255,100,100,.85) !important;
  border-color: rgba(220,50,50,.28) !important;
  background: rgba(220,50,50,.07) !important;
}
.vds-modal__btn--abort:hover {
  background: rgba(220,50,50,.16) !important;
  border-color: rgba(220,50,50,.50) !important;
}

@media (prefers-reduced-motion: reduce) {
  .vds-vex-progress-fill { transition: none; }
}

/* ============================================================
   SPRINT 11 – Asset Library & I BET MAX Branding
   ============================================================ */

/* ── ibetmax-Hinweis oben in der Asset Library ──────────────── */
.vds-asset-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-bottom: 8px;
  background: rgba(18,197,188,.07);
  border: 1px solid rgba(18,197,188,.18);
  border-radius: 6px;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vds-teal);
}
.vds-asset-hint__icon { font-style: normal; }

/* ── Kategorie-Filter ───────────────────────────────────────── */
.vds-asset-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.vds-asset-filter-btn {
  background: var(--vds-card);
  border: 1px solid var(--vds-border);
  border-radius: 14px;
  color: var(--vds-muted);
  cursor: pointer;
  font-size: 9px;
  font-family: var(--vds-font);
  letter-spacing: .04em;
  padding: 3px 9px;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.vds-asset-filter-btn:hover {
  background: var(--vds-card-hover);
  border-color: var(--vds-border-hi);
  color: var(--vds-fg);
}
.vds-asset-filter-btn--active {
  background: rgba(18,197,188,.12);
  border-color: rgba(18,197,188,.40);
  color: var(--vds-teal);
}
.vds-asset-filter-btn:focus-visible {
  outline: 2px solid var(--vds-teal);
  outline-offset: 2px;
}

/* ── ibetmax-Badge auf Asset-Karten ────────────────────────── */
.vds-asset-badge--ibetmax {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(18,197,188,.18);
  border: 1px solid rgba(18,197,188,.35);
  border-radius: 4px;
  color: var(--vds-teal);
  font-size: 7px;
  font-family: var(--vds-font-mono);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1px 3px;
  line-height: 1;
  pointer-events: none;
}

/* Asset-Karte braucht position:relative für den Badge */
.vds-asset-card {
  position: relative;
}

/* ── Vorschaubild in Asset-Karten ───────────────────────────── */
.vds-asset-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.vds-asset-card__icon {
  /* Höhe damit Thumbnails sichtbar sind */
  min-height: 32px;
  overflow: hidden;
  border-radius: 4px;
}

/* ── Image-Element auf der Stage ───────────────────────────── */
.vds-stage-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 2px;
  pointer-events: none; /* Klick geht an Stage-Element-Div */
}
.vds-stage-element--image {
  background: transparent;
  padding: 0;
}
.vds-stage-element__content--fallback {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  padding: 6px;
  text-align: center;
  font-style: italic;
}

/* ── "Bald verfügbar"-Karten ────────────────────────────────── */
.vds-asset-card--locked .vds-asset-card__type {
  color: rgba(255,255,255,.30);
  font-style: italic;
}

/* Tooltip via title-Attribut ist Browser-nativ; kein JS-Tooltip nötig */

@media (prefers-reduced-motion: reduce) {
  .vds-asset-filter-btn { transition: none; }
}