.scene {
  --scene-glide: cubic-bezier(.65, 0, .35, 1);
  margin: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-large);
  background: var(--bg-page); box-shadow: var(--shadow-large);
}
:is(.scene svg, svg.scene) { inline-size: 100%; block-size: auto; color: var(--text); font-family: var(--font-sans); text-rendering: geometricPrecision; }
.scene text { fill: currentColor; }
.scene .mono { font-family: var(--font-mono); }
.scene use { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .house-mark { color: var(--bg-brand); stroke: var(--text-on-brand); }
.scene .ink { color: var(--text); }
.scene .muted { color: var(--text-muted); }
.scene .subtle { color: var(--text-subtle); }
.scene .accent { color: var(--text-accent); }
.scene .on-accent { color: var(--text-on-accent); }
.scene .danger { color: var(--text-danger); }
.scene .warning { color: var(--text-warning); }
.scene .success { color: var(--text-success); }
.scene .info { color: var(--text-info); }
.scene :is(.surface, .raised, .control, .rule, .tinted, .pill > rect, .focus-edge) { vector-effect: non-scaling-stroke; }
.scene .surface { fill: var(--bg-surface); stroke: var(--border-strong); }
.scene .raised { fill: var(--bg-raised); stroke: var(--border-strong); }
.scene .control { fill: var(--bg-control); stroke: var(--border-strong); }
.scene .rule { fill: none; stroke: var(--border-strong); }
.scene .well { fill: var(--bg-hover); }
.scene .current { fill: var(--bg-current); }
.scene .primary { fill: var(--bg-accent); }
.scene .dot { fill: currentColor; }
.scene .progress { fill: none; stroke: var(--bg-accent); stroke-width: 2; }
.scene .ring { fill: var(--bg-raised); stroke: var(--bg-accent); stroke-width: 2; }
.scene .tinted { fill: color-mix(in oklab, currentColor 9%, var(--bg-raised)); stroke: color-mix(in oklab, currentColor 40%, transparent); }
.scene .pill > rect { fill: color-mix(in oklab, currentColor 12%, transparent); stroke: color-mix(in oklab, currentColor 30%, transparent); }
.scene .pill > text { color: color-mix(in oklab, currentColor 90%, var(--text)); }
.scene .overlay { fill: var(--bg-backdrop); }
.scene stop { stop-color: var(--bg-backdrop); }
.scene .focus { opacity: 0; }
.scene .focus-halo { fill: none; stroke: var(--border-accent-soft); stroke-width: 3; }
.scene .focus-edge { fill: none; stroke: var(--bg-accent); }
.scene .cover { fill: var(--bg-control); }
.scene .caret { fill: var(--bg-accent); animation: scene-caret 1.06s step-end infinite; }
.scene .pointer { fill: var(--text); stroke: var(--bg-page); stroke-width: 1.2; stroke-linejoin: round; }
.scene :is(.pointer-x, .ripple, .typing, .ortana-typed, .ortana-thinking, .scanner-verdict-before, .scanner-before, .placeholder) { opacity: 0; }
.scene .ripple { fill: var(--bg-accent); }
.scene :is(.ripple, .ortana-dialog, .scanner-verdict-after) { transform-box: fill-box; transform-origin: center; }
.scene * { animation-iteration-count: infinite; animation-timing-function: var(--ease-out); animation-fill-mode: backwards; }
.scene .stagger-1 { animation-delay: .15s; }
.scene .stagger-2 { animation-delay: .3s; }
.scene .dot:nth-child(2) { animation-delay: .16s; }
.scene .dot:nth-child(3) { animation-delay: .32s; }
@keyframes scene-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes scene-dot { 0%, 70%, 100% { opacity: .35; } 35% { opacity: 1; } }

.scene-ortana * { animation-duration: 16s; }
.scene-ortana .camera { animation-name: ortana-camera; animation-timing-function: var(--scene-glide); }
.scene-ortana .pointer-x { animation-name: ortana-pointer-x; }
.scene-ortana .pointer-y { transform: translateY(27px); animation-name: ortana-pointer-y; }
.scene-ortana .pointer { animation-name: ortana-press; }
.scene-ortana .ripple { animation-name: ortana-ripple; }
.scene-ortana .ortana-button { animation-name: ortana-button; }
.scene-ortana .overlay { opacity: .65; animation-name: ortana-overlay; }
.scene-ortana .ortana-dialog { animation-name: ortana-dialog; animation-timing-function: var(--ease-out-cubic); }
.scene-ortana .focus { animation-name: ortana-focus; }
.scene-ortana .placeholder { opacity: 1; animation-name: ortana-placeholder; animation-timing-function: step-end; }
.scene-ortana .ortana-typed { animation-name: ortana-typed; animation-timing-function: step-end; }
.scene-ortana .typing { animation-name: ortana-typing; animation-timing-function: step-end; }
.scene-ortana .ortana-question { animation-name: ortana-question; }
.scene-ortana .ortana-thinking { animation-name: ortana-thinking; }
.scene-ortana .dot { animation: scene-dot .96s ease-in-out infinite; }
.scene-ortana .ortana-answer { animation-name: ortana-answer; }
.scene-ortana .ortana-row { animation-name: ortana-row; }
.scene-ortana .ortana-chips { animation-name: ortana-chips; }
@keyframes ortana-camera {
  0%, 5.625% { transform: translate(0, 0) scale(1); }
  14.375%, 15.9% { transform: translate(-130px, 0) scale(1.25); }
  21.25%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes ortana-pointer-x {
  0%, 2.5% { opacity: 0; transform: translateX(430px); }
  5%, 5.625% { opacity: 1; transform: translateX(430px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  14.375%, 18.125% { opacity: 1; transform: translateX(357px); }
  20.625%, 100% { opacity: 0; transform: translateX(357px); }
}
@keyframes ortana-pointer-y {
  0%, 5.625% { transform: translateY(300px); animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  14.375%, 100% { transform: translateY(27px); }
}
@keyframes ortana-press { 0%, 14.8% { transform: scale(1); } 15.3125% { transform: scale(.86); } 16.25%, 100% { transform: scale(1); } }
@keyframes ortana-ripple { 0%, 15.3125% { opacity: 0; transform: scale(.4); } 15.6% { opacity: .35; } 19.5%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ortana-button { 0%, 15% { fill: var(--bg-control); } 15.6%, 86.25% { fill: color-mix(in oklab, var(--bg-accent) 16%, var(--bg-control)); } 90%, 100% { fill: var(--bg-control); } }
@keyframes ortana-overlay { 0%, 16.25% { opacity: 0; } 20.625%, 86.25% { opacity: .65; } 89.375%, 100% { opacity: 0; } }
@keyframes ortana-dialog {
  0%, 17.5% { transform: translateX(320px); }
  23.125%, 86.25% { transform: translateX(0); }
  90.625%, 100% { transform: translateX(320px); }
}
@keyframes ortana-focus { 0%, 22.5% { opacity: 0; } 23.75%, 86.25% { opacity: 1; } 89.375%, 100% { opacity: 0; } }
@keyframes ortana-placeholder { 0% { opacity: 1; } 25% { opacity: 0; } 40.625%, 100% { opacity: 1; } }
@keyframes ortana-typed { 0% { opacity: 0; } 25% { opacity: 1; } 40.625%, 100% { opacity: 0; } }
@keyframes ortana-typing {
  0% { opacity: 0; transform: translateX(0); }
  23.75% { opacity: 1; transform: translateX(0); }
  25% { transform: translateX(9.81px); }
  25.594% { transform: translateX(15.71px); }
  26.094% { transform: translateX(21.25px); }
  26.781% { transform: translateX(24.2px); }
  27.719% { transform: translateX(26.74px); }
  28.25% { transform: translateX(32.28px); }
  28.719% { transform: translateX(35.72px); }
  29.375% { transform: translateX(38.67px); }
  30.375% { transform: translateX(44.88px); }
  30.875% { transform: translateX(50.99px); }
  31.438% { transform: translateX(57.2px); }
  31.875% { transform: translateX(60.53px); }
  32.406% { transform: translateX(66.65px); }
  33.094% { transform: translateX(69.6px); }
  34.531% { transform: translateX(73.32px); }
  35.281% { transform: translateX(79.21px); }
  35.781% { transform: translateX(81.75px); }
  36.25% { transform: translateX(84.29px); }
  36.813% { transform: translateX(86.84px); }
  37.344% { transform: translateX(93.27px); }
  38.531% { transform: translateX(98.63px); }
  40.625% { opacity: 0; }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes ortana-question { 0%, 41.25% { opacity: 0; transform: translateY(6px); } 45%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes ortana-thinking { 0%, 45.625% { opacity: 0; } 46.5%, 52.5% { opacity: 1; } 53.75%, 100% { opacity: 0; } }
@keyframes ortana-answer { 0%, 53.125% { opacity: 0; transform: translateY(6px); } 56.25%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes ortana-row { 0%, 55% { opacity: 0; transform: translateY(4px); } 58.125%, 93% { opacity: 1; transform: translateY(0); } 93.5%, 100% { opacity: 0; } }
@keyframes ortana-chips { 0%, 61.875% { opacity: 0; transform: translateY(4px); } 65%, 100% { opacity: 1; transform: translateY(0); } }

.scene-scanner * { animation-duration: 14s; }
.scene-scanner .pointer-x { animation-name: scanner-pointer-x; }
.scene-scanner .pointer-y { transform: translateY(191px); animation-name: scanner-pointer-y; }
.scene-scanner .pointer { animation-name: scanner-press; }
.scene-scanner .ripple { animation-name: scanner-ripple; }
.scene-scanner .focus { animation-name: scanner-focus; }
.scene-scanner .placeholder { animation-name: scanner-placeholder; }
.scene-scanner .scanner-content { animation-name: scanner-content; }
.scene-scanner .scanner-line { animation-name: scanner-line; }
.scene-scanner .typing { animation-name: scanner-typing; animation-timing-function: step-end; }
.scene-scanner .caret { animation: scene-caret 1.06s step-end infinite, scanner-caret 14s step-end infinite; }
.scene-scanner .scanner-verdict-before { animation-name: scanner-verdict-before; }
.scene-scanner .scanner-verdict-after { animation-name: scanner-verdict-after; }
.scene-scanner .scanner-panel { animation-name: scanner-panel; }
.scene-scanner .scanner-before { animation-name: scanner-before; }
.scene-scanner .scanner-after { animation-name: scanner-after; }
@keyframes scanner-pointer-x {
  0%, 21.43% { opacity: 0; transform: translateX(330px); }
  23.57%, 24.29% { opacity: 1; transform: translateX(330px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  31.43%, 35.71% { opacity: 1; transform: translateX(436px); }
  37.86%, 100% { opacity: 0; transform: translateX(436px); }
}
@keyframes scanner-pointer-y {
  0%, 24.29% { transform: translateY(352px); animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  31.43%, 100% { transform: translateY(191px); }
}
@keyframes scanner-press { 0%, 32% { transform: scale(1); } 32.5% { transform: scale(.86); } 33.57%, 100% { transform: scale(1); } }
@keyframes scanner-ripple { 0%, 32.5% { opacity: 0; transform: scale(.4); } 32.9% { opacity: .35; } 36.5%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes scanner-focus { 0%, 32.86% { opacity: 0; } 34.29%, 57.14% { opacity: 1; } 59.29%, 100% { opacity: 0; } }
@keyframes scanner-placeholder { 0%, 5% { opacity: 1; } 5.71%, 94.29% { opacity: 0; } 96.43%, 100% { opacity: 1; } }
@keyframes scanner-content { 0%, 4.29% { opacity: 0; } 5%, 90% { opacity: 1; } 94.29%, 100% { opacity: 0; } }
@keyframes scanner-line { 0%, 5.71% { opacity: 0; transform: translateY(4px); } 8.57%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes scanner-typing {
  0% { opacity: 1; transform: translateX(0); }
  38.571% { transform: translateX(3.04px); }
  39.429% { transform: translateX(5.98px); }
  40.929% { transform: translateX(11.77px); }
  41.571% { transform: translateX(17.89px); }
  42.179% { transform: translateX(21.83px); }
  42.75% { transform: translateX(27.37px); }
  43.393% { transform: translateX(33.5px); }
  43.929% { transform: translateX(39.69px); }
  44.607% { transform: translateX(45.23px); }
  45.214% { transform: translateX(51.66px); }
  45.786% { transform: translateX(57.95px); }
  46.321% { transform: translateX(62.08px); }
  46.929% { transform: translateX(68.26px); }
  47.786% { transform: translateX(71.22px); }
  49.5% { transform: translateX(80.7px); }
  50.5% { transform: translateX(86.85px); }
  51.286% { transform: translateX(91.47px); }
  52.357% { transform: translateX(94.22px); }
  53.286% { transform: translateX(100.69px); }
  100% { opacity: 1; transform: translateX(100.69px); }
}
@keyframes scanner-caret { 0% { visibility: hidden; } 33.57% { visibility: visible; } 56.43%, 100% { visibility: hidden; } }
@keyframes scanner-verdict-before { 0%, 12.14% { opacity: 0; transform: translateY(6px); } 15.71%, 55.71% { opacity: 1; transform: translateY(0); } 57.86%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes scanner-verdict-after { 0%, 56.43% { opacity: 0; transform: scale(.985); } 60%, 100% { opacity: 1; transform: scale(1); } }
@keyframes scanner-panel { 0%, 13.57% { opacity: 0; transform: translateY(6px); } 17.14%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes scanner-before { 0%, 55.71% { opacity: 1; } 57.86%, 100% { opacity: 0; } }
@keyframes scanner-after { 0%, 56.43% { opacity: 0; transform: translateY(3px); } 60%, 100% { opacity: 1; transform: translateY(0); } }

.scene-stimme { display: grid; justify-items: center; gap: var(--space-8); padding: clamp(var(--space-6), 5vw, var(--space-16)) clamp(var(--space-4), 4vw, var(--space-12)); text-align: center; }
.scene-stimme svg { max-inline-size: 720px; }
.scene-stimme figcaption { font-size: clamp(var(--t1), 3vw + 0.4rem, var(--t6)); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; max-inline-size: 28ch; }
.stimme-folien { display: grid; margin: 0; padding: 0; list-style: none; }
.stimme-folien li { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: var(--space-3); animation: stimme-folie 20s infinite; }
.stimme-folien li:nth-child(2) { animation-delay: -16s; }
.stimme-folien li:nth-child(3) { animation-delay: -12s; }
.stimme-folien li:nth-child(4) { animation-delay: -8s; }
.stimme-folien li:nth-child(5) { animation-delay: -4s; }
.stimme-folien .eyebrow { color: var(--text-accent); }
.scene-stimme .stimme-puls { fill: none; stroke: var(--bg-accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: stimme-puls 1.6s infinite; }
.scene-stimme .stimme-welle rect { fill: var(--bg-accent); transform-box: fill-box; transform-origin: center; animation: stimme-welle 1.1s ease-in-out infinite alternate; }
.scene-stimme .stimme-welle rect:nth-child(3n + 2) { animation-duration: .9s; animation-delay: -.35s; }
.scene-stimme .stimme-welle rect:nth-child(3n) { animation-duration: 1.3s; animation-delay: -.7s; }
@keyframes stimme-puls { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.85); } }
@keyframes stimme-welle { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes stimme-folie {
  0%, 17% { opacity: 1; transform: none; }
  20% { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
  97% { opacity: 0; transform: translateY(var(--space-2)); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 559px) {
  .scene-scanner svg { aspect-ratio: 410 / 400; }
  .scene-heute { aspect-ratio: 592 / 552; }
}
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .stimme-folien { gap: var(--space-6); }
  .stimme-folien li { grid-area: auto; }
}
@media (scripting: enabled) { .scene:not([data-play="running"]) * { animation-play-state: paused !important; } }