/* Videoturm-Szene auf der Startseite (2026-10-23), aus livetower.de. Abschnitt: #sb-home .sbs. */
#sb-home .sbs-fig { max-width: 1040px; margin: clamp(28px, 4vw, 44px) auto 0; }
#sb-home svg.scene__svg { display: block; width: 100%; height: auto; }
#sb-home .scene__step { margin: 0; }
#sb-home .scene__step strong { color: inherit; }
@media (max-width: 1100px) { #sb-home .scene__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { #sb-home .scene__steps { grid-template-columns: 1fr; } }

/* ---------- Home hero: animated system illustration ---------- */
.scene { margin: 0; }
.scene__svg { width: 100%; height: auto; border-radius: 18px; border: 1px solid #22314a; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.scene .sc-label { font: 600 15px 'Inter', system-ui, sans-serif; fill: #8a97ab; }
.scene .sc-brand { font: 900 17px 'Inter', system-ui, sans-serif; fill: #f7df03; letter-spacing: .04em; }
.scene .sc-room-title { font: 700 15px 'Inter', system-ui, sans-serif; fill: #e9edf2; letter-spacing: .08em; }
.scene .sc-mono { font: 600 12px ui-monospace, Menlo, monospace; fill: #ff4d3d; }
.scene .sc-bubble { font: 700 17px 'Inter', system-ui, sans-serif; fill: #0a0c0f; }
.scene .sc-tag { font: 800 13px 'Inter', system-ui, sans-serif; fill: #0a0c0f; }
.scene .sc-callouts circle { fill: #f7df03; stroke: #0a0c0f; stroke-width: 3; }
.scene .sc-callouts text { font: 900 17px 'Inter', system-ui, sans-serif; fill: #0a0c0f; text-anchor: middle; }
.scene__steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scene__step { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid #22314a; color: #c5cad1; font-size: .8rem; line-height: 1.35; }
.scene__step b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #22314a; color: #e9edf2; font-family: 'Inter', system-ui, sans-serif; font-size: .85rem; }
.scene__step strong { display: block; color: inherit; font-family: 'Inter', system-ui, sans-serif; font-size: .92rem; }
@media (max-width: 760px) { .scene__steps { grid-template-columns: 1fr; } .scene__step { padding: 9px 12px; } }

/* Static fallback = the "everything is happening" frame (also used with reduced motion) */
.sc-detect, .sc-voice, .sc-check, .sc-monitor-person, .sc-monitor-box, .sc-monitor-alert { opacity: 1; }
.sc-flood { opacity: .9; }
.sc-intruder { transform: translateX(1090px); }
.sc-car { transform: translateX(10px); }

@media (prefers-reduced-motion: no-preference) {
  .scene * { transform-box: view-box; }
  .sc-cone { transform-origin: 724px 206px; animation: sc-sweep 14s ease-in-out infinite; }
  @keyframes sc-sweep { 0%, 100% { transform: rotate(-9deg); } 12% { transform: rotate(4deg); } 22%, 66% { transform: rotate(0deg); } 80% { transform: rotate(-12deg); } }
  .sc-intruder { animation: sc-walk 14s linear infinite; }
  @keyframes sc-walk { 0%, 6% { transform: translateX(1240px); } 22% { transform: translateX(1090px); } 62% { transform: translateX(1090px); } 72%, 100% { transform: translateX(1300px); } }
  .sc-walker { animation: sc-bob .5s ease-in-out infinite alternate; }
  @keyframes sc-bob { to { transform: translateY(-3px); } }
  .sc-detect { animation: sc-detect 14s steps(1) infinite; }
  @keyframes sc-detect { 0% { opacity: 0; } 22% { opacity: 1; } 70% { opacity: 0; } }
  .sc-signal { animation: sc-sig 14s infinite; }
  @keyframes sc-sig { 0%, 26% { opacity: .15; } 30%, 40% { opacity: 1; } 44%, 100% { opacity: .15; } }
  .sc-route { animation: sc-dash 1s linear infinite, sc-route 14s infinite; }
  @keyframes sc-dash { to { stroke-dashoffset: -16; } }
  @keyframes sc-route { 0%, 28% { opacity: .15; } 30%, 42% { opacity: 1; } 46%, 100% { opacity: .15; } }
  .sc-packet { animation: sc-packet 14s steps(1) infinite; }
  @keyframes sc-packet { 0% { opacity: 0; } 30% { opacity: 1; } 41% { opacity: 0; } }
  .sc-route-label { animation: sc-route 14s infinite; }
  .sc-monitor-alert, .sc-monitor-person, .sc-monitor-box { animation: sc-mon 14s steps(1) infinite; }
  @keyframes sc-mon { 0% { opacity: 0; } 40% { opacity: 1; } 74% { opacity: 0; } }
  .sc-monitor-alert { animation: sc-mon 14s steps(1) infinite, sc-blink .6s steps(2) infinite; }
  @keyframes sc-blink { 50% { stroke-opacity: .2; } }
  .sc-check { animation: sc-check 14s infinite; }
  @keyframes sc-check { 0%, 46% { opacity: 0; } 50%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
  .sc-voice { animation: sc-voice 14s infinite; }
  @keyframes sc-voice { 0%, 54% { opacity: 0; transform: translateY(8px); } 57%, 70% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; } }
  .sc-flood { animation: sc-flood 14s infinite; }
  @keyframes sc-flood { 0%, 54% { opacity: 0; } 57%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
  .sc-lamp { animation: sc-lamp 14s steps(1) infinite; }
  @keyframes sc-lamp { 0% { fill: #3a4252; } 56% { fill: #fff3b0; } 88% { fill: #3a4252; } }
  .sc-car { animation: sc-car 14s cubic-bezier(.2,.7,.2,1) infinite; }
  @keyframes sc-car { 0%, 62% { transform: translateX(-260px); } 76%, 90% { transform: translateX(30px); } 100% { transform: translateX(-260px); } }
  .sc-blue { animation: sc-police .4s steps(2) infinite; }
  @keyframes sc-police { 50% { fill: #ff4d3d; } }
  .sc-camdot { animation: sc-camblink 1.2s steps(2, start) infinite; }
  .sc-call { opacity: .25; transition: opacity .3s; }
  .sc-call--1 { animation: sc-c1 14s infinite; } .sc-call--2 { animation: sc-c2 14s infinite; } .sc-call--3 { animation: sc-c3 14s infinite; }
  .sc-call--4 { animation: sc-c4 14s infinite; } .sc-call--5 { animation: sc-c5 14s infinite; }
  @keyframes sc-c1 { 0%, 20% { opacity: .2; } 22%, 30% { opacity: 1; } 32%, 100% { opacity: .2; } }
  @keyframes sc-c2 { 0%, 29% { opacity: .2; } 30%, 41% { opacity: 1; } 43%, 100% { opacity: .2; } }
  @keyframes sc-c3 { 0%, 41% { opacity: .2; } 42%, 54% { opacity: 1; } 56%, 100% { opacity: .2; } }
  @keyframes sc-c4 { 0%, 55% { opacity: .2; } 56%, 68% { opacity: 1; } 70%, 100% { opacity: .2; } }
  @keyframes sc-c5 { 0%, 69% { opacity: .2; } 70%, 88% { opacity: 1; } 90%, 100% { opacity: .2; } }
  .scene__step { transition: background .3s, color .3s, border-color .3s; }
  .scene__step--1 { animation: st1 14s infinite; } .scene__step--2 { animation: st2 14s infinite; } .scene__step--3 { animation: st3 14s infinite; }
  .scene__step--4 { animation: st4 14s infinite; } .scene__step--5 { animation: st5 14s infinite; }
  @keyframes st1 { 0%, 20% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } 22%, 30% { background: #f7df03; border-color: #f7df03; color: #0a0c0f; } 32%, 100% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } }
  @keyframes st2 { 0%, 29% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } 30%, 41% { background: #f7df03; border-color: #f7df03; color: #0a0c0f; } 43%, 100% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } }
  @keyframes st3 { 0%, 41% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } 42%, 54% { background: #f7df03; border-color: #f7df03; color: #0a0c0f; } 56%, 100% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } }
  @keyframes st4 { 0%, 55% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } 56%, 68% { background: #f7df03; border-color: #f7df03; color: #0a0c0f; } 70%, 100% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } }
  @keyframes st5 { 0%, 69% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } 70%, 88% { background: #f7df03; border-color: #f7df03; color: #0a0c0f; } 90%, 100% { background: rgba(255,255,255,.04); border-color: #22314a; color: #c5cad1; } }
}
@keyframes sc-camblink { 50% { opacity: 0; } }