/* Animated repair workflow (#ablauf) - pure CSS scenes driven by data-scene on #flow */
#ablauf .flow { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { #ablauf .flow { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.5fr); align-items: start; } }

/* ── step list ── */
#ablauf .flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(9, minmax(0, 1fr)); }
#ablauf .flow-step { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; background: var(--c64-navy); border: 2px solid var(--c64-mid); color: #8890b8; padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; overflow: hidden; min-height: 44px; }
#ablauf .flow-step:hover { border-color: var(--c64-light); color: var(--c64-pale); }
#ablauf .flow-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid currentColor; font-family: 'Press Start 2P', monospace; font-size: 0.55rem; }
#ablauf .flow-name { font-size: 0.78rem; line-height: 1.3; min-width: 0; }
#ablauf .flow-step.done { color: var(--c64-pale); border-color: #3a3f8a; }
#ablauf .flow-step.done .flow-num { background: #2e8b57; border-color: #2e8b57; color: #fff; }
#ablauf .flow-step.on { background: var(--c64-mid); border-color: var(--c64-amber); color: #fff; }
#ablauf .flow-step.on .flow-num { background: var(--c64-amber); border-color: var(--c64-amber); color: var(--c64-dark); }
#ablauf .flow-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--c64-amber); }
#ablauf .flow.playing .flow-step.on .flow-bar { animation: flowbar var(--flow-ms, 7000ms) linear forwards; }
@keyframes flowbar { to { width: 100%; } }
@media (min-width: 900px) { #ablauf .flow-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  #ablauf .flow-steps { order: 2; }
  #ablauf .flow-step { justify-content: center; padding: 6px 0; }
  #ablauf .flow-name { display: none; }
}

/* ── stage ── */
#ablauf .flow-stage { background: var(--c64-deep); border: 3px solid var(--c64-light); padding: 12px; min-width: 0; box-shadow: 0 0 40px rgba(112, 112, 255, 0.18); }
#ablauf .flow-hud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
#ablauf .flow-role, #ablauf .flow-status { font-family: 'Press Start 2P', monospace; font-size: 0.55rem; padding: 5px 8px; line-height: 1.4; }
#ablauf .flow-role { background: var(--c64-amber); color: var(--c64-dark); }
#ablauf .flow-status { border: 2px solid var(--c64-mid); color: var(--c64-light); }
#ablauf .flow-screen { position: relative; width: 100%; padding-top: 85%; background: radial-gradient(ellipse at center, #1c1c5a 0%, #0b0b24 80%); border: 2px solid var(--c64-mid); overflow: hidden; }
#ablauf .flow-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
#ablauf .flow-board { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; transition: opacity .5s, filter .5s; }
#ablauf .flow-board .chip rect { fill: #14142b; stroke: #8890b8; stroke-width: 1.5; stroke-dasharray: 2 2; }
#ablauf .flow-board .ram rect { fill: #14142b; stroke: #6870a8; stroke-width: 1.5; }
#ablauf .ov { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
#ablauf .flow[data-scene="1"] .ov-1, #ablauf .flow[data-scene="2"] .ov-2, #ablauf .flow[data-scene="3"] .ov-3, #ablauf .flow[data-scene="4"] .ov-4,
#ablauf .flow[data-scene="5"] .ov-5, #ablauf .flow[data-scene="6"] .ov-6, #ablauf .flow[data-scene="7"] .ov-7, #ablauf .flow[data-scene="8"] .ov-8,
#ablauf .flow[data-scene="9"] .ov-9 { display: flex; }
#ablauf .flow[data-scene="1"] .flow-board, #ablauf .flow[data-scene="2"] .flow-board, #ablauf .flow[data-scene="8"] .flow-board, #ablauf .flow[data-scene="9"] .flow-board { opacity: .18; filter: blur(1px); }
#ablauf .flow.is-quiet .ov * { animation: none !important; }

#ablauf .o-tag { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); white-space: nowrap; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; padding: 5px 8px; background: rgba(8, 8, 30, .85); border: 2px solid var(--c64-amber); color: var(--c64-amber); max-width: 96%; overflow: hidden; text-overflow: ellipsis; animation: oPop .5s both; }
@keyframes oPop { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
#ablauf .o-card { width: min(62%, 280px); background: #0f0f33; border: 2px solid var(--c64-light); padding: 10px; font-size: 0.7rem; color: var(--c64-pale); box-shadow: 0 0 24px rgba(112,112,255,.35); animation: oRise .6s both; }
@keyframes oRise { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
#ablauf .o-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; opacity: 0; animation: oIn .4s forwards; }
#ablauf .o-row:nth-child(2) { animation-delay: .5s; }
#ablauf .o-row:nth-child(3) { animation-delay: .9s; }
@keyframes oIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
#ablauf .o-tick { width: 12px; height: 12px; border: 2px solid var(--c64-amber); display: inline-block; position: relative; }
#ablauf .o-tick::after { content: ''; position: absolute; left: 1px; top: -3px; width: 4px; height: 8px; border: solid var(--c64-amber); border-width: 0 2px 2px 0; transform: rotate(40deg); }
#ablauf .o-total { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--c64-mid); opacity: 0; animation: oIn .4s 1.4s forwards; }
#ablauf .o-count { color: var(--c64-amber); font-family: 'Press Start 2P', monospace; font-size: 0.6rem; }
#ablauf .o-btn { margin-top: 8px; text-align: center; padding: 6px; background: var(--c64-mid); border: 2px solid var(--c64-light); font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: #fff; }
#ablauf .ov-1 .o-btn { opacity: 0; animation: oIn .4s 2s forwards, oPulse 1.4s 2.4s infinite; }
@keyframes oPulse { 50% { box-shadow: 0 0 14px var(--c64-amber); border-color: var(--c64-amber); } }

/* box + route (2 and 9) */
#ablauf .o-route { position: absolute; left: 8%; right: 8%; top: 68%; border-top: 3px dashed var(--c64-light); opacity: .6; }
#ablauf .o-box { position: absolute; left: 50%; top: 28%; width: 22%; aspect-ratio: 5 / 4; background: #b07a3c; border: 3px solid #7a5224; box-shadow: 0 0 0 2px #0b0b24; }
#ablauf .o-box i { position: absolute; left: 42%; top: 0; bottom: 0; width: 16%; background: #e8d9a8; }
#ablauf .ov-2 .o-box { animation: boxIn 4.5s ease-in-out both; }
@keyframes boxIn { from { transform: translateX(-340%) rotate(-8deg); } 55% { transform: translateX(-60%) rotate(2deg); } to { transform: translateX(-50%) rotate(0); } }
#ablauf .ov-9 .o-box { animation: boxOut 5s ease-in both; }
@keyframes boxOut { from { transform: translateX(-50%); } 25% { transform: translateX(-50%) translateY(-6px); } to { transform: translateX(260%) rotate(6deg); } }

/* 3 intake photos */
#ablauf .o-frame { position: absolute; inset: 12% 16%; }
#ablauf .o-frame i { position: absolute; width: 18px; height: 18px; border: solid var(--c64-amber); animation: oPulse 1.2s infinite; }
#ablauf .o-frame i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; }
#ablauf .o-frame i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; }
#ablauf .o-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; }
#ablauf .o-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
#ablauf .o-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 2.4s infinite; }
@keyframes flash { 0%, 55% { opacity: 0; } 58% { opacity: .85; } 70%, 100% { opacity: 0; } }

/* 4 diagnosis */
#ablauf .o-scan { position: absolute; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, transparent, #5cff9d, transparent); box-shadow: 0 0 14px 4px rgba(92, 255, 157, .6); animation: scan 2.6s ease-in-out infinite; }
@keyframes scan { 0% { top: 8%; } 50% { top: 86%; } 100% { top: 8%; } }
#ablauf .o-pin { position: absolute; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; padding: 3px 6px; opacity: 0; animation: oPin .4s forwards; }
#ablauf .o-pin.ok { background: #2e8b57; color: #fff; animation-delay: .8s; }
#ablauf .o-pin.bad { background: #c0392b; color: #fff; animation-delay: 1.6s; }
#ablauf .o-pin + .o-pin.ok { animation-delay: 2.2s; }
@keyframes oPin { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
#ablauf .flow[data-scene="4"] #chip-sid rect { animation: chipBad 1s 1.6s infinite alternate; }
@keyframes chipBad { from { fill: #14142b; } to { fill: #7a1f1f; } }

/* 5 offer */
#ablauf .o-h { font-family: 'Press Start 2P', monospace; font-size: 0.55rem; color: var(--c64-amber); margin-bottom: 6px; }
#ablauf .o-btns { display: flex; gap: 6px; }
#ablauf .o-btns .o-btn { flex: 1; }
#ablauf .o-yes { animation: oPulse 1.2s .8s 2, yesGone .3s 3.1s forwards; }
#ablauf .o-no { opacity: .6; animation: yesGone .3s 3.1s forwards; }
@keyframes yesGone { to { opacity: 0; transform: scale(.8); } }
#ablauf .o-ok { position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: center; padding: 8px; background: #2e8b57; color: #fff; font-family: 'Press Start 2P', monospace; font-size: 0.55rem; opacity: 0; animation: oRise .5s 3.1s forwards; }

/* 6 repair */
#ablauf .flow[data-scene="6"] #chip-sid rect { animation: chipHot .6s infinite alternate; }
@keyframes chipHot { from { fill: #14142b; stroke: #8890b8; } to { fill: #6a3d00; stroke: var(--c64-amber); } }
#ablauf .o-iron { position: absolute; left: 60%; top: -20%; width: 6px; height: 36%; background: linear-gradient(#ccc, #777); transform-origin: 50% 100%; transform: rotate(35deg); animation: iron 1.6s ease-in-out infinite; }
#ablauf .o-iron::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 6px; height: 10px; background: #ff7a00; box-shadow: 0 0 12px 4px #ff9d3c; }
@keyframes iron { 50% { transform: rotate(28deg) translateY(4px); } }
#ablauf .o-spark { position: absolute; left: 60%; top: 16%; width: 4px; height: 4px; background: #ffd26b; box-shadow: 0 0 6px #ff9d3c; opacity: 0; animation: spark 1s infinite; }
#ablauf .o-spark:nth-of-type(1) { --dx: -26px; --dy: -22px; animation-delay: .1s; }
#ablauf .o-spark:nth-of-type(2) { --dx: 10px; --dy: -34px; animation-delay: .3s; }
#ablauf .o-spark:nth-of-type(3) { --dx: 30px; --dy: -14px; animation-delay: .5s; }
#ablauf .o-spark:nth-of-type(4) { --dx: -12px; --dy: -40px; animation-delay: .7s; }
#ablauf .o-spark:nth-of-type(5) { --dx: 22px; --dy: -30px; animation-delay: .2s; }
#ablauf .o-spark:nth-of-type(6) { --dx: -34px; --dy: -8px; animation-delay: .6s; }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -20px)); } }

/* 7 test */
#ablauf .o-bars { position: absolute; left: 14%; right: 14%; top: 12%; height: 52%; display: flex; border: 3px solid var(--c64-pale); animation: oRise .5s both; }
#ablauf .o-bars i { flex: 1; animation: barsOn .15s both; }
#ablauf .o-bars i:nth-child(1) { background: #000; } #ablauf .o-bars i:nth-child(2) { background: #fff; } #ablauf .o-bars i:nth-child(3) { background: #883932; }
#ablauf .o-bars i:nth-child(4) { background: #67b6bd; } #ablauf .o-bars i:nth-child(5) { background: #8b5429; } #ablauf .o-bars i:nth-child(6) { background: #70a445; }
#ablauf .o-bars i:nth-child(7) { background: #3e31a2; } #ablauf .o-bars i:nth-child(8) { background: #bfce72; }
#ablauf .o-bars i:nth-child(2) { animation-delay: .1s; } #ablauf .o-bars i:nth-child(3) { animation-delay: .2s; } #ablauf .o-bars i:nth-child(4) { animation-delay: .3s; }
#ablauf .o-bars i:nth-child(5) { animation-delay: .4s; } #ablauf .o-bars i:nth-child(6) { animation-delay: .5s; } #ablauf .o-bars i:nth-child(7) { animation-delay: .6s; } #ablauf .o-bars i:nth-child(8) { animation-delay: .7s; }
@keyframes barsOn { from { opacity: 0; } to { opacity: 1; } }
#ablauf .o-progress { position: absolute; left: 14%; right: 14%; top: 72%; height: 12px; border: 2px solid var(--c64-pale); }
#ablauf .o-progress b { display: block; height: 100%; width: 0; background: var(--c64-amber); animation: prog 4s .6s linear forwards; }
@keyframes prog { to { width: 100%; } }
#ablauf .ov-7 .o-tag { animation-delay: 4.4s; opacity: 0; animation-fill-mode: both; }

/* 8 report */
#ablauf .o-doc { position: relative; width: 28%; aspect-ratio: 3 / 4; background: #f2f2ff; padding: 8% 9%; box-shadow: 0 0 26px rgba(112,112,255,.45); animation: docUp .7s both; }
@keyframes docUp { from { opacity: 0; transform: translateY(40px) rotate(-6deg); } to { opacity: 1; transform: none; } }
#ablauf .o-doc b { display: block; height: 5px; background: #4040a0; margin-bottom: 9%; width: 0; animation: line .5s forwards; }
#ablauf .o-doc b:nth-of-type(1) { animation-delay: .5s; } #ablauf .o-doc b:nth-of-type(2) { animation-delay: .9s; } #ablauf .o-doc b:nth-of-type(3) { animation-delay: 1.3s; } #ablauf .o-doc b:nth-of-type(4) { animation-delay: 1.7s; }
@keyframes line { to { width: 100%; } }
#ablauf .o-doc em { position: absolute; right: -14%; bottom: 10%; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 0.55rem; background: #c0392b; color: #fff; padding: 5px 7px; transform: rotate(-10deg) scale(2); opacity: 0; animation: stamp .35s 2.3s forwards; }
@keyframes stamp { to { opacity: 1; transform: rotate(-10deg) scale(1); } }

/* ── text + log ── */
#ablauf .flow-text { padding: 12px 2px 4px; min-height: 92px; }
#ablauf .flow-text h3 { font-family: 'Press Start 2P', monospace; font-size: 0.75rem; color: var(--c64-amber); margin: 0 0 8px; line-height: 1.5; }
#ablauf .flow-text p { font-size: 0.85rem; line-height: 1.6; color: var(--c64-pale); margin: 0; }
#ablauf .flow-log-wrap { margin-top: 8px; border: 2px solid var(--c64-mid); background: #07071c; }
#ablauf .flow-log-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; background: var(--c64-mid); font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--c64-pale); }
#ablauf .flow-play { background: none; border: 2px solid var(--c64-light); color: var(--c64-pale); padding: 3px 8px; font: inherit; font-family: inherit; cursor: pointer; font-size: 0.5rem; }
#ablauf .flow-play:hover { border-color: var(--c64-amber); color: var(--c64-amber); }
#ablauf .flow-log { height: 118px; overflow: hidden; padding: 8px; display: flex; flex-direction: column; justify-content: flex-end; font: 0.72rem/1.55 'Courier New', monospace; color: #8ff0b0; }
#ablauf .flow-log div { white-space: pre-wrap; overflow-wrap: anywhere; }
#ablauf .flow-log .t { color: #6870a8; }
#ablauf .flow-log .cur::after { content: '█'; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }


/* wide screens: picture left, text + log right -> whole story in one view */
@media (min-width: 1100px) {
  #ablauf .flow { grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.9fr); align-items: stretch; }
  #ablauf .flow-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 16px; grid-template-rows: auto 1fr; grid-template-areas: "hud hud" "screen side"; }
  #ablauf .flow-hud { grid-area: hud; }
  #ablauf .flow-screen { grid-area: screen; }
  #ablauf .flow-side { grid-area: side; display: flex; flex-direction: column; min-height: 0; }
  #ablauf .flow-text { padding-top: 0; min-height: 0; }
  #ablauf .flow-log-wrap { margin-top: 8px; flex: 1 1 0; min-height: 150px; display: flex; flex-direction: column; }
  #ablauf .flow-log { flex: 1 1 0; height: auto; min-height: 0; contain: size; }
  #ablauf .flow-steps { grid-auto-rows: 1fr; }
}

/* step-change animation + lively list */
#ablauf .flow-text.swap h3 { animation: txtIn .5s both; }
#ablauf .flow-text.swap p { animation: txtIn .6s .1s both; }
@keyframes txtIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#ablauf .flow-role { animation: rolePop .45s both; }
@keyframes rolePop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
#ablauf .flow-step { transition: transform .3s, background .3s, border-color .3s, color .3s; }
#ablauf .flow-step.on { transform: translateX(8px); box-shadow: 0 0 18px rgba(255, 160, 0, .35); }
#ablauf .flow-step.on .flow-num { animation: numPulse 1.1s infinite; }
@keyframes numPulse { 50% { transform: scale(1.18); } }
#ablauf .flow-step.done .flow-num { animation: numDone .5s both; }
@keyframes numDone { from { transform: scale(1.5); } to { transform: none; } }
#ablauf .flow:not(.entered) .flow-step { opacity: 0; }
#ablauf .flow.entered .flow-step { animation: stepIn .5s both; }
#ablauf .flow.entered li:nth-child(2) .flow-step { animation-delay: .08s; } #ablauf .flow.entered li:nth-child(3) .flow-step { animation-delay: .16s; }
#ablauf .flow.entered li:nth-child(4) .flow-step { animation-delay: .24s; } #ablauf .flow.entered li:nth-child(5) .flow-step { animation-delay: .32s; }
#ablauf .flow.entered li:nth-child(6) .flow-step { animation-delay: .4s; } #ablauf .flow.entered li:nth-child(7) .flow-step { animation-delay: .48s; }
#ablauf .flow.entered li:nth-child(8) .flow-step { animation-delay: .56s; } #ablauf .flow.entered li:nth-child(9) .flow-step { animation-delay: .64s; }
@keyframes stepIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; } }

/* ambient life: board floats, chips breathe, LED blinks, packets of light run along the traces */

@keyframes boardFloat { 50% { transform: translateY(-4px); } }
#ablauf .flow-board .chip rect { animation: chipBreath 3s ease-in-out infinite; }
#ablauf .flow-board #chip-vic rect { animation-delay: .5s; } #ablauf .flow-board #chip-sid rect { animation-delay: 1s; } #ablauf .flow-board #chip-cia rect { animation-delay: 1.5s; }
@keyframes chipBreath { 50% { stroke: #bfc8ff; } }
#ablauf .flow-board .caps circle { animation: capPulse 2.4s ease-in-out infinite; }
#ablauf .flow-board .caps circle:nth-child(odd) { animation-delay: 1.2s; }
@keyframes capPulse { 50% { fill: #55599a; } }
#ablauf .flow-board path { stroke-dasharray: 6 8; animation: traceRun 1.8s linear infinite; }
@keyframes traceRun { to { stroke-dashoffset: -28; } }
#ablauf .flow-screen::before { content: ''; position: absolute; left: 0; right: 0; height: 22%; top: -22%; z-index: 2; pointer-events: none; background: linear-gradient(transparent, rgba(160, 170, 255, .08), transparent); animation: crt 6s linear infinite; }
@keyframes crt { to { top: 110%; } }
#ablauf .flow-log-head::before { content: ''; width: 8px; height: 8px; margin-right: 8px; background: #ff4d4d; border-radius: 50%; animation: blink 1s steps(2) infinite; }
#ablauf .flow-log-head { justify-content: flex-start; } #ablauf .flow-log-head .flow-play { margin-left: auto; }
#ablauf .flow-log div { animation: logIn .3s both; }
@keyframes logIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
#ablauf .flow-step.on::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); animation: shine 2.4s infinite; }
@keyframes shine { to { transform: translateX(100%); } }

/* picture area has the board's own aspect ratio (400:340); on narrow/stacked layouts keep it from getting huge */
@media (max-width: 1099px) { #ablauf .flow-screen { max-width: 520px; margin: 0 auto; width: 100%; } }

/* community message (last section) */
.community-heart { width: 44px; height: 44px; margin: 0 auto 18px; display: block; color: var(--c64-amber); fill: var(--c64-amber); filter: drop-shadow(0 0 12px rgba(255, 160, 0, .6)); animation: heartBeat 1.4s ease-in-out infinite; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }