/* Seiten-eigene Demo-Bausteine; Palette und Typo kommen aus style.css */
.demo {
  background: var(--panel, #10131C);
  border: 1px solid var(--panel-edge, #1E2330);
  border-radius: 14px;
  padding: 18px;
  margin: 26px 0;
}
.demo canvas { background: #F2EFE9; display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; touch-action: manipulation; }
.demo .row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.demo label { font-size: 0.85rem; opacity: 0.75; min-width: 74px; }
.demo input[type=range] { flex: 1; min-width: 140px; accent-color: #4F86F7; height: 28px; }
.demo .val { font-variant-numeric: tabular-nums; font-size: 0.85rem; opacity: 0.75; min-width: 84px; text-align: right; }
.demo .hint { font-size: 0.85rem; opacity: 0.6; margin-top: 10px; }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatches button[aria-pressed=true] { border-color: #fff; }
#stage3d { position: relative; width: 100%; aspect-ratio: 4/5; max-height: 70vh; border-radius: 10px; overflow: hidden; background: #08090F; }
@media (min-width: 700px) { #stage3d { aspect-ratio: 16/10; } }
#stage3d .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
#stage3d .go {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(to top, rgba(8,9,15,0.75), rgba(8,9,15,0.25));
  color: #fff; border: 0; cursor: pointer; font-size: 1rem;
}
#stage3d .go .btn { background: #4F86F7; padding: 10px 22px; border-radius: 999px; font-weight: 600; }
#stage3d .go small { opacity: 0.8; }
#stage3d .busy { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #4F86F7; width: 0%; transition: width 0.3s; }
/* Pipeline-Diagramm: drei Panels, CSS-animiert, reduced-motion-fest */
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
@media (max-width: 560px) { .pipe { grid-template-columns: 1fr; } }
.pipe .step { background: var(--panel, #10131C); border: 1px solid var(--panel-edge, #1E2330); border-radius: 12px; padding: 12px; text-align: center; }
.pipe .step p { font-size: 0.85rem; opacity: 0.75; margin: 8px 0 0; }
.pipe svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pipe .cam { animation: orbit 6s linear infinite; transform-origin: 60px 60px; }
  .pipe .pt { animation: popin 3s ease-out infinite; }
  .pipe .bl { animation: swell 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes orbit { to { transform: rotate(360deg); } }
  @keyframes popin { 0%, 20% { opacity: 0; } 45%, 80% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes swell { 0%, 100% { transform: scale(0.55); opacity: 0.35; } 50% { transform: scale(1); opacity: 0.9; } }
}