/* GENERIERT von scripts/overview/build-motion.mjs — nicht von Hand editieren.
   Quelle: scripts/overview/overview.html (Grafik) + scripts/overview/motion.css (Bewegung). */
.ov-stage .ov-h1, .ov-stage .ov-h2, .ov-stage .ov-h3 { display: block; font-weight: 700; }
.ov-stage { --ink: #172b34; --ink-soft: #4d6069; --paper: #ffffff; --wash: #f3f6f6; --teal: #2d5d6e; --teal-strong: #214a59; --teal-soft: #e4eef0; --line: #dce5e7; --night: #122c38; --orange: #f7931a; --orange-soft: #fff1df; --orange-line: #f6d3a6; --green: #2d8653; --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }
.ov-stage * { box-sizing: border-box; margin: 0; }
.ov-stage .canvas { width: 1600px; height: 960px; margin: 0 auto; position: relative; overflow: hidden; background: radial-gradient(900px 600px at 0% 0%, #fff4e6 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #e2eef1 0%, transparent 60%), var(--wash); padding: 56px 64px 48px; }
.ov-stage .head { text-align: center; margin-bottom: 46px; }
.ov-stage .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ov-stage .brand svg { width: 28px; height: 28px; }
.ov-stage .ov-h1 { font-size: 52px; line-height: 1.08; letter-spacing: -.02em; margin-top: 14px; font-weight: 750; }
.ov-stage .ov-h1 .h { color: var(--orange); }
.ov-stage .ov-h1 .a { color: var(--teal); }
.ov-stage .sub { margin-top: 12px; font-size: 19px; color: var(--ink-soft); }
.ov-stage .row { display: grid; grid-template-columns: 360px 1fr 640px 1fr 360px; align-items: center; }
.ov-stage .panel { border-radius: 22px; padding: 26px 26px 24px; height: 560px; position: relative; }
.ov-stage .human { background: var(--paper); border: 1.5px solid var(--orange-line); box-shadow: 0 18px 40px rgba(247,147,26,.12); }
.ov-stage .agent { background: var(--night); color: #e8f1f3; box-shadow: 0 18px 40px rgba(18,44,56,.28); }
.ov-stage .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; }
.ov-stage .human .tag { background: var(--orange-soft); color: #b9650a; }
.ov-stage .agent .tag { background: rgba(255,255,255,.08); color: #9fd0dd; }
.ov-stage .panel .ov-h2 { font-size: 26px; margin-top: 14px; letter-spacing: -.01em; }
.ov-stage .panel .lead { font-size: 15px; margin-top: 4px; color: var(--ink-soft); }
.ov-stage .agent .lead { color: #9bb3bb; }
.ov-stage .devices { position: relative; height: 206px; margin-top: 22px; }
.ov-stage .browser { position: absolute; left: 0; top: 14px; width: 232px; height: 180px; border-radius: 12px; background: var(--wash); border: 1px solid var(--line); overflow: hidden; }
.ov-stage .browser .bar { height: 22px; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 5px; align-items: center; padding-left: 9px; }
.ov-stage .browser .bar i { width: 7px; height: 7px; border-radius: 50%; background: #e4e1da; }
.ov-stage .mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px; }
.ov-stage .mini-board .col { display: flex; flex-direction: column; gap: 6px; }
.ov-stage .mini-board b { display: block; height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--line); }
.ov-stage .mini-board b.o { border-left: 3px solid var(--orange); }
.ov-stage .mini-board b.t { border-left: 3px solid var(--teal); }
.ov-stage .drag { position: absolute; left: 96px; top: 66px; width: 70px; height: 24px; border-radius: 5px; background: #fff; border: 1.5px solid var(--orange); border-left-width: 3px; transform: rotate(-6deg); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.ov-stage .cursor { position: absolute; left: 150px; top: 82px; font-size: 22px; }
.ov-stage .phone { position: absolute; right: 0; top: 4px; width: 106px; height: 196px; border-radius: 20px; background: #fff; border: 2px solid #1d1d1f; padding: 18px 9px 10px; display: flex; flex-direction: column; gap: 7px; }
.ov-stage .phone::before { content: ""; position: absolute; top: 6px; left: 36px; width: 30px; height: 6px; border-radius: 4px; background: #1d1d1f; }
.ov-stage .bubble { font-size: 9.5px; line-height: 1.3; padding: 6px 8px; border-radius: 10px; max-width: 86%; }
.ov-stage .bubble.me { align-self: flex-end; background: var(--orange); color: #fff; border-bottom-right-radius: 3px; }
.ov-stage .bubble.bot { background: var(--teal-soft); color: var(--teal-strong); border-bottom-left-radius: 3px; }
.ov-stage .mic { margin-top: auto; align-self: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(247,147,26,.18), 0 0 0 12px rgba(247,147,26,.08); }
.ov-stage .mic svg { width: 18px; height: 18px; }
.ov-stage .verbs { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 12px; }
.ov-stage .verbs li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 650; line-height: 1.25; }
.ov-stage .verbs .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; }
.ov-stage .human .verbs .ic { background: var(--orange-soft); }
.ov-stage .agent .verbs .ic { background: rgba(255,255,255,.07); }
.ov-stage .verbs small { display: block; color: var(--ink-soft); font-size: 12.5px; font-weight: 400; }
.ov-stage .verbs .ic svg { width: 17px; height: 17px; }
.ov-stage .agent .verbs small { color: #8aa5ad; }
.ov-stage .agent .verbs { margin-top: 18px; }
.ov-stage .term { white-space: nowrap; margin-top: 22px; background: #0b1d25; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; font-family: var(--mono); font-size: 11.6px; line-height: 1.85; }
.ov-stage .term .p { color: #6f8c95; }
.ov-stage .term .c { color: #58737c; }
.ov-stage .term .fn { color: #ffb86b; }
.ov-stage .term .s { color: #9fd0dd; }
.ov-stage .term .ok { color: #7fd1a0; }
.ov-stage .agents .av { width: 22px; height: 22px; font-size: 9.5px; }
.ov-stage .agents { display: flex; gap: 6px; margin-top: 16px; }
.ov-stage .chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 99px; background: rgba(255,255,255,.07); font-size: 12px; font-weight: 600; }
.ov-stage .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 750; color: #fff; }
.ov-stage .av.cc { background: #d97757; }
.ov-stage .av.cx { background: #3b7d91; }
.ov-stage .av.th { background: #6b5bd2; }
.ov-stage .av.m { background: var(--orange); }
.ov-stage .av.an { background: #e06a8c; }
.ov-stage .link { position: relative; height: 560px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.ov-stage .link svg { width: 64px; height: 30px; }
.ov-stage .link span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.4; }
.ov-stage .link span i { display: block; font-style: normal; }
.ov-stage .link.l span { color: #b9650a; }
.ov-stage .link.r span { color: var(--teal); }
.ov-stage .hub { background: var(--paper); border-radius: 26px; padding: 22px 22px 20px; height: 560px; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(23,43,52,.16); position: relative; }
.ov-stage .hub-head { display: flex; align-items: center; justify-content: space-between; }
.ov-stage .hub-head .t { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 20px; }
.ov-stage .hub-head .t svg { width: 30px; height: 30px; }
.ov-stage .presence { display: flex; }
.ov-stage .presence .av { border: 2px solid #fff; margin-left: -7px; width: 30px; height: 30px; }
.ov-stage .lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ov-stage .lane { background: var(--wash); border-radius: 14px; padding: 10px 8px; height: 446px; display: flex; flex-direction: column; gap: 8px; }
.ov-stage .lane .ov-h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 2px 4px 4px; display: flex; justify-content: space-between; }
.ov-stage .lane .ov-h3 em { font-style: normal; color: #9aa9ae; }
.ov-stage .card { background: #fff; border-radius: 10px; border: 1px solid var(--line); padding: 9px 9px 8px; font-size: 12.5px; line-height: 1.3; font-weight: 550; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ov-stage .card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ov-stage .card .meta .av { width: 20px; height: 20px; font-size: 8.5px; }
.ov-stage .pill { white-space: nowrap; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.ov-stage .pill.h { background: var(--orange-soft); color: #b9650a; }
.ov-stage .pill.a { background: var(--teal-soft); color: var(--teal-strong); }
.ov-stage .pill.g { background: #e3f3ea; color: var(--green); }
.ov-stage .card.hot { border: 2px solid var(--orange); box-shadow: 0 10px 24px rgba(247,147,26,.22); }
.ov-stage .card.gate { border: 1.5px dashed var(--green); }
.ov-stage .lock { font-size: 10.5px; color: var(--green); font-weight: 700; margin-top: 6px; display: flex; gap: 5px; align-items: center; }
.ov-stage .journey { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.ov-stage .journey .lbl { font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.35; }
.ov-stage .steps { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; }
.ov-stage .step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--line); }
.ov-stage .step .av { width: 34px; height: 34px; font-size: 12px; flex: none; }
.ov-stage .step b { display: block; font-size: 14.5px; }
.ov-stage .step div span { font-size: 12.5px; color: var(--ink-soft); }
.ov-stage .step.final { background: #fff; border: 1.5px solid var(--green); }
.ov-stage .arrow { text-align: center; color: #9aa9ae; font-size: 20px; }

/* ---- Bewegung (Quelle: scripts/overview/motion.css) ----
   Greift nur, wenn /assets/overview-motion.js die Live-Fassung eingesetzt hat (.ov-on).
   Ohne JS, bei reduzierter Bewegung und am Handy (≤ 760 px) bleibt das Standbild. */

/* Einbau in die Startseite: <figure class="overview-frame" data-ov-motion> */
.overview-frame.ov-live { position: relative; }
.overview-frame.ov-live > picture { display: none; }
@media (max-width: 760px) {
  .overview-frame .ov-stage, .overview-frame .ov-ctl { display: none; }
  .overview-frame.ov-live > picture { display: block; }
}
.ov-stage { position: relative; width: 100%; aspect-ratio: 1600 / 960; overflow: hidden;
  /* gegen Seiten-Styles abschirmen: die Grafik ist auf Browser-Defaults gebaut */
  font-family: var(--sans); color: var(--ink); line-height: normal; letter-spacing: normal; text-align: left; }
.ov-stage .canvas { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }

/* Terminal: Zeilen erscheinen wie getippt */
.ov-on .term > div { clip-path: inset(0 100% 0 0); opacity: 0; }
.ov-on .term > div.ov-typed { opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path .5s steps(24, end), opacity .05s; }
.ov-on .term > div.ov-caret::after { content: "▍"; color: #9fd0dd; margin-left: 2px; animation: ov-blink .8s steps(1) infinite; }
@keyframes ov-blink { 50% { opacity: 0; } }

/* Telefon: Sprechblasen und Mikrofon */
.ov-on .bubble { opacity: 0; transform: translateY(6px) scale(.94); transform-origin: right bottom;
  transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1.2); }
.ov-on .bubble.bot { transform-origin: left bottom; }
.ov-on .bubble.ov-show { opacity: 1; transform: none; }
.ov-on .mic.ov-live { animation: ov-pulse 1.2s ease-out infinite; }
@keyframes ov-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(247,147,26,.45), 0 0 0 0 rgba(247,147,26,.18); }
  100% { box-shadow: 0 0 0 14px rgba(247,147,26,0), 0 0 0 26px rgba(247,147,26,0); }
}

/* Verbindungspfeile: Striche fließen in Richtung Board */
.ov-on .link svg path:first-child { transition: opacity .3s; opacity: .55; }
.ov-on .link span { transition: opacity .3s; opacity: .6; }
.ov-on .link.ov-flow svg path:first-child { opacity: 1; animation: ov-dash .45s linear infinite; }
.ov-on .link.ov-flow span { opacity: 1; }
@keyframes ov-dash { to { stroke-dashoffset: -9; } }

/* Panels: wer gerade handelt, leuchtet */
.ov-on .panel { transition: box-shadow .5s, transform .5s; }
.ov-on .human.ov-glow { box-shadow: 0 0 0 3px rgba(247,147,26,.35), 0 22px 48px rgba(247,147,26,.22); }
.ov-on .agent.ov-glow { box-shadow: 0 0 0 3px rgba(159,208,221,.45), 0 22px 48px rgba(18,44,56,.42); }
.ov-on .verbs li { transition: transform .35s; }
.ov-on .verbs li.ov-hl { transform: translateX(6px); }
.ov-on .human .verbs li.ov-hl .ic { background: var(--orange); }
.ov-on .human .verbs li.ov-hl .ic svg { stroke: #fff; }

/* Reise-Leiste: aktueller Schritt hebt sich ab */
.ov-on .step { opacity: .5; transition: opacity .4s, transform .4s, box-shadow .4s, border-color .4s, background .4s; }
.ov-on .step.ov-past { opacity: .85; }
.ov-on .step.ov-now { opacity: 1; background: #fff; transform: translateY(-4px);
  border-color: var(--orange); box-shadow: 0 10px 24px rgba(23,43,52,.12); }
.ov-on .step.final.ov-now { border-color: var(--green); box-shadow: 0 10px 24px rgba(45,134,83,.2); }
.ov-on .arrow { transition: color .4s; }
.ov-on .arrow.ov-past { color: var(--ink-soft); }

/* Die reisende Karte */
.ov-on .ov-traveler { position: relative; z-index: 5; transition: border-color .35s, box-shadow .35s, background .35s; }
.ov-on .ov-traveler .pill, .ov-on .ov-traveler .meta .av { transition: background .3s, color .3s; }
.ov-on .ov-traveler .lock { animation: ov-in .45s cubic-bezier(.2,.8,.2,1.2); }
.ov-on .ov-traveler.ov-done { border-color: var(--green); box-shadow: 0 10px 24px rgba(45,134,83,.18); }
@keyframes ov-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ov-on .lane .ov-h3 em { transition: color .3s; }
.ov-on .lane .ov-h3 em.ov-bump { color: var(--orange); }

/* Pause: alles anhalten, was per CSS läuft */
/* Pause: CSS-Animationen samt Pseudoelementen; Transitions und Web-Animationen hält das Skript an */
.ov-paused *, .ov-paused *::after { animation-play-state: paused !important; }

/* Steuerknopf (außerhalb der skalierten Leinwand) */
.ov-ctl { position: absolute; right: 12px; bottom: 12px; z-index: 10; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #dce5e7; background: rgba(255,255,255,.92); color: #172b34; cursor: pointer; padding: 0;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(18,44,56,.12); }
.ov-ctl:hover { border-color: #2d5d6e; }
.ov-ctl:focus-visible { outline: 2px solid #2d5d6e; outline-offset: 2px; }
.ov-ctl svg { width: 14px; height: 14px; }