/* Bewegung, Einblendungen und interaktive Demos der Startseite */

/* ---------- Einblenden beim Scrollen ---------- */
.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }
.split-in .wd { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); animation: wordIn .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes wordIn { to { opacity: 1; transform: none; } }

/* ---------- Hero-Konsole ---------- */
.console { transform: none; padding: 1rem; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.console::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 200px at var(--mx, 70%) -10%, rgba(255, 184, 0, .12), transparent 60%); transition: background .2s; }
.rec span { font-variant-numeric: tabular-nums; }
.previews { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .7rem; position: relative; }
.pv { position: relative; aspect-ratio: 16 / 8; background: #1A1A1A; border-radius: 10px; display: grid; place-items: center; overflow: hidden; transition: filter .4s; }
.pv b { position: absolute; left: .55rem; bottom: .45rem; font-size: .72rem; background: rgba(0, 0, 0, .6); padding: .1rem .45rem; border-radius: 4px; }
.pv .pv-net { position: absolute; right: .5rem; top: .4rem; font-style: normal; font-size: .66rem; color: var(--text-hell-2); }
.pv-face { width: 46px; height: 46px; border-radius: 50%; background: var(--pegel); color: #000; display: grid; place-items: center; font: 760 1.2rem var(--display); position: relative; }
.pv-face.guest { background: var(--funk); }
.pv-face .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; color: var(--pegel); opacity: 0; transform: scale(var(--lvl, 1)); transition: transform .08s linear, opacity .15s; }
.pv-face.guest .ring { color: var(--funk); }
.pv.talking .ring { opacity: .9; }
.pv-label { display: none; }
.console.bad .pv { filter: blur(3px) saturate(.4) contrast(1.3); }
.console.bad .pv::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, .06) 6px 8px); animation: glitch .25s steps(2) infinite; }
.console.bad .pv .pv-net { color: #FF8A80; }
@keyframes glitch { 50% { transform: translateX(4px); } }

.net { display: block; padding: .3rem .2rem .6rem; }
.net-head { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-hell-2); }
.net-head strong { font-weight: 700; transition: color .3s; }
.net-head strong.ok { color: var(--funk); }
.net-head strong.bad { color: #FF8A80; }
#netGraph { width: 100%; height: 40px; display: block; margin-top: .25rem; }

.lane { margin-top: .5rem; }
.lane-body { display: grid; grid-template-columns: 1fr 30px; gap: .6rem; align-items: stretch; }
.wave-live { width: 100%; height: 56px; display: block; }
.vu { display: flex; gap: 3px; height: 56px; }
.vu span { flex: 1; border-radius: 2px; background: linear-gradient(to top, var(--funk) 0 60%, var(--pegel) 60% 85%, var(--rot) 85%); -webkit-mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px); mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px); clip-path: inset(calc(100% - var(--v, 0%)) 0 0 0); transition: clip-path .06s linear; }
.up { margin-top: .1rem; }
.up-bar { flex: 1; height: 5px; border-radius: 5px; background: var(--regie-line); position: relative; overflow: hidden; display: block; }
.up-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 100%); background: var(--funk); border-radius: 5px; transition: width .3s, background .3s; }
.lane.buffering .up-bar i { background: var(--pegel); }
.lane.buffering .up-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); width: 40%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.up-txt { min-width: 11.5em; text-align: right; font-variant-numeric: tabular-nums; }
#disturb[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #fff; }

/* ---------- Kennzahlen ---------- */
.figures { background: var(--regie); color: #fff; padding: clamp(2rem, 5vw, 3.4rem) 0; }
.fig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.fig b { display: block; font: 760 var(--step-3)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fig:nth-child(odd) b { color: var(--pegel); }
.fig:nth-child(even) b { color: var(--funk); }
.fig span { color: var(--text-hell-2); font-size: var(--step--1); }
@media (max-width: 760px) { .fig-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Ablauf mit Fortschrittslinie ---------- */
.steps { position: relative; }
.steps-track { height: 3px; background: #E6E6E6; border-radius: 3px; margin: 2.2rem 0 -1.2rem; overflow: hidden; }
.steps-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pegel), var(--funk)); transition: width .15s linear; }
.steps li::after { display: none; }
.steps li::before { color: var(--tinte); transition: color .4s; }
.steps li.in::before { color: var(--pegel-dunkel); }

/* ---------- Dateien-Demo ---------- */
.files-visual { background: var(--regie); color: #fff; padding: 1.1rem; }
.fv-head { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--text-hell-2); margin-bottom: .7rem; }
.fv-total { color: var(--funk); font-weight: 700; font-variant-numeric: tabular-nums; }
.files-visual ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.files-visual li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; background: var(--regie-2); border-radius: 8px; padding: .5rem .7rem; font-size: var(--step--1); opacity: .35; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
.files-visual li.go { opacity: 1; transform: none; }
.files-visual .fs { color: var(--text-hell-2); }
.files-visual i { grid-column: 1 / -1; height: 3px; background: var(--regie-line); border-radius: 3px; overflow: hidden; }
.files-visual i b { display: block; height: 100%; width: var(--p, 0%); background: var(--pegel); transition: width .25s linear; }
.files-visual li.done i b { background: var(--funk); }
.files-visual li.done .fn::after { content: ' ✓'; color: var(--funk); }

/* ---------- Text-Demo ---------- */
.text-visual { display: grid; gap: .7rem; }
.tv-bar { display: flex; justify-content: space-between; align-items: center; font-size: var(--step--1); }
.tv-bar b { font-variant-numeric: tabular-nums; font-family: var(--display); font-size: 1.15rem; }
.tv-btn { border: 1.5px solid var(--tinte); background: #fff; border-radius: 999px; padding: .35rem .8rem; font: 700 .8rem var(--body); cursor: pointer; }
.tv-btn:hover { background: var(--tinte); color: #fff; }
.text-visual p[data-spk]::before { content: attr(data-spk); display: block; font-size: .74rem; font-weight: 700; color: var(--tinte-2); }
.text-visual .w { cursor: pointer; border-radius: 3px; transition: color .3s, background .3s; }
.text-visual .w:hover { background: #FFF1C2; }
.text-visual .w.f { background: #FFF4D6; }
.text-visual .w.cut { color: #B0B0B0; text-decoration: line-through; text-decoration-color: var(--rot); text-decoration-thickness: 2px; background: none; }
.text-visual .w.now { background: var(--pegel); color: #000; }
.ab { border-top: 1px solid #E6E6E6; padding-top: .7rem; display: grid; grid-template-columns: auto 1fr; gap: .5rem .8rem; align-items: center; font-size: var(--step--1); }
.ab > span { font-weight: 700; }
.ab-switch { justify-self: end; display: inline-flex; background: #EDEDED; border-radius: 999px; padding: 3px; }
.ab-switch button { border: 0; background: none; padding: .3rem .8rem; border-radius: 999px; font: 700 .78rem var(--body); cursor: pointer; }
.ab-switch button[aria-pressed="true"] { background: #000; color: #fff; }
#abWave { grid-column: 1 / -1; width: 100%; height: 44px; }
.lufs { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.lufs-bar { height: 8px; background: #EDEDED; border-radius: 8px; position: relative; }
.lufs-bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 8px; background: var(--tinte-2); transition: width .8s cubic-bezier(.2, .7, .2, 1), background .4s; }
.lufs-bar em { position: absolute; left: 72%; top: -4px; bottom: -4px; width: 2px; background: var(--funk); }
.lufs b { font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.text-visual.after .lufs-bar i { background: var(--funk); }

/* ---------- Live-Demo ---------- */
.live-visual { display: grid; gap: .9rem; align-content: start; color: #fff; background: var(--regie); }
.lv-top { display: flex; gap: 1rem; align-items: center; font-size: var(--step--1); color: var(--text-hell-2); font-variant-numeric: tabular-nums; }
.lv-top b { color: #fff; }
.live-tag { background: var(--rot); color: #fff; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(255, 59, 48, .2); } }
.lv-dest { display: grid; gap: .45rem; }
.lv-dest div { display: grid; grid-template-columns: 7.5em 1fr 5.5em; gap: .6rem; align-items: center; font-size: var(--step--1); }
.lv-dest em { font-style: normal; color: var(--text-hell-2); text-align: right; font-variant-numeric: tabular-nums; }
.lv-dest i, .lv-poll i { height: 6px; background: var(--regie-line); border-radius: 6px; overflow: hidden; display: block; }
.lv-dest i b { display: block; height: 100%; width: var(--p, 0%); background: var(--funk); transition: width .4s; }
.lv-poll { background: var(--regie-2); border-radius: 10px; padding: .7rem .8rem; display: grid; gap: .4rem; font-size: var(--step--1); }
.lv-poll > span { font-weight: 700; }
.lv-poll div { display: grid; grid-template-columns: 6.5em 1fr; gap: .6rem; align-items: center; }
.lv-poll em { font-style: normal; color: var(--text-hell-2); }
.lv-poll i b { display: block; height: 100%; width: 0; background: var(--pegel); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }

/* ---------- Statistik-Demo ---------- */
.stats-visual { background: var(--regie); color: #fff; display: grid; gap: 1rem; }
.sv-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--step--1); color: var(--text-hell-2); }
.sv-head b { font: 760 var(--step-2) var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.sv-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.sv-bars span { flex: 1; background: var(--pegel); border-radius: 2px 2px 0 0; height: 0; transition: height .8s cubic-bezier(.2, .7, .2, 1); }
.sv-bars span:nth-child(7n), .sv-bars span:nth-child(7n-1) { background: var(--funk); }
.sv-apps { display: flex; gap: 1rem; align-items: center; font-size: var(--step--1); }
.sv-apps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.sv-apps li i { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .4em; }
.donut { width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--pegel) 0 calc(var(--a, 0) * 46%), var(--funk) 0 calc(var(--a, 0) * 78%), #fff 0 calc(var(--a, 0) * 100%), var(--regie-line) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }

/* ---------- Datenfluss ---------- */
.flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .5rem; margin: 1.6rem 0 2rem; position: relative; padding-bottom: 3.2rem; }
.flow .node { border: 1.5px solid var(--regie-line); border-radius: 10px; padding: .55rem .8rem; font-size: var(--step--1); font-weight: 700; background: var(--regie-2); text-align: center; }
.flow .server { border-color: var(--funk); box-shadow: 0 0 0 0 rgba(0, 209, 178, .5); animation: serverPulse 2.4s ease-out infinite; }
.flow .server b { display: block; }
.flow .server span { font-weight: 400; color: var(--funk); font-size: .75rem; }
@keyframes serverPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 209, 178, .45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(0, 209, 178, 0); } }
.flow .pipe { height: 6px; background: linear-gradient(var(--regie-line), var(--regie-line)) center / 100% 2px no-repeat; position: relative; overflow: hidden; }
.flow .pipe i { position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--pegel); animation: packet 1.8s linear infinite; }
.flow .pipe i:nth-child(2) { animation-delay: .6s; } .flow .pipe i:nth-child(3) { animation-delay: 1.2s; }
@keyframes packet { from { left: -6px; } to { left: 100%; } }
.flow .us { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); opacity: .45; text-decoration: line-through; text-decoration-color: var(--rot); text-decoration-thickness: 2px; border-style: dashed; font-weight: 400; }

.privacy dl > div { transition-property: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .split-in .wd { opacity: 1 !important; transform: none !important; animation: none !important; }
}