/* Startseite (start.html) und Rechtsseiten. Eigenes Stylesheet, damit app.css
   (Dashboard, Gast-Seite) unberuehrt bleibt.
   Schriften liegen in /fonts (siehe fonts/LIESMICH.md), nicht bei Google. */
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
/* Konzept: Neon-Regie. Ein Sendeplatz bei Nacht — Multiview, Tally-Lampen, Timecode,
   Farbbalken; Licht kommt aus den Bildschirmen und faerbt alles darum herum. */
:root {
  --bg: #0a0614;          /* Violett-Schwarz */
  --bg-2: #120a22;
  --panel: #171029;
  --line: #2c2048;
  --text: #f3eeff;
  --muted: #ab9fcb;
  --violet: #9146ff;      /* Twitch-Lila wie in der App */
  --violet-hi: #b892ff;
  --pink: #ff3ea5;
  --cyan: #2ee6ff;
  --tally: #ff4b3e;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-3: clamp(2.7rem, 5.4vw, 4rem);
  --step-4: clamp(3.4rem, 8vw, 6.9rem);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* hidden muss gewinnen, auch gegen display:flex/grid der Bausteine */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--step-0)/1.6 var(--font-body); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--violet-hi); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 0.93; text-wrap: balance; margin: 0; text-transform: uppercase; letter-spacing: 0.005em; }
p { margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; }
.eyebrow { color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
.lead { color: var(--muted); font-size: var(--step-1); line-height: 1.5; max-width: 36ch; }
.glow-pink { color: var(--pink); text-shadow: 0 0 22px color-mix(in srgb, var(--pink) 70%, transparent); }
.glow-cyan { color: var(--cyan); text-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 70%, transparent); }
section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 860px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }
.sec-head h2 { font-size: var(--step-3); margin-top: 0.9rem; }
.sec-head p { color: var(--muted); max-width: 52ch; }

/* Farbbalken, SMPTE-Reihenfolge */
.bars { display: grid; grid-template-columns: repeat(7, 1fr); }
.bars i { display: block; }
.bars i:nth-child(1) { background: #c0c0c0; } .bars i:nth-child(2) { background: #c0c000; }
.bars i:nth-child(3) { background: #00c0c0; } .bars i:nth-child(4) { background: #00c000; }
.bars i:nth-child(5) { background: #c000c0; } .bars i:nth-child(6) { background: #c00000; }
.bars i:nth-child(7) { background: #0000c0; }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tally); flex: none; animation: puls 1.8s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tally) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0 1.4rem; border-radius: 12px; font: 600 1rem var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 0 0 1px #a774ff inset, 0 10px 30px -8px color-mix(in srgb, var(--violet) 80%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #c09cff inset, 0 14px 40px -6px color-mix(in srgb, var(--pink) 55%, transparent); }
.btn-ghost { border-color: var(--line); color: var(--text); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.btn-ghost:hover { border-color: var(--cyan); box-shadow: 0 0 24px -6px var(--cyan); }

/* ---------- Kopf ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bg); }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); }
header.top .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.85rem; flex-wrap: wrap; }
header.top .bars { height: 3px; opacity: 0.9; }
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-weight: 700; }
.logo b { width: 34px; height: 34px; border-radius: 9px; background: var(--violet); display: grid; place-items: center; font: 700 0.85rem var(--font-mono); color: #fff; box-shadow: 0 0 18px -2px var(--violet); }
nav.main { display: flex; gap: 1.5rem; margin-left: auto; flex-wrap: wrap; }
nav.main a { color: var(--muted); text-decoration: none; font-size: var(--step--1); font-weight: 500; }
nav.main a:hover { color: var(--text); }
header.top .btn { min-height: 42px; padding: 0 1.05rem; font-size: 0.95rem; }
@media (max-width: 820px) { nav.main { display: none; } header.top .btn { margin-left: auto; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: auto -10% 0; height: 46%; z-index: -1;
  background:
    linear-gradient(transparent 0 0) ,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--pink) 32%, transparent) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--pink) 32%, transparent) 0 1px, transparent 1px 44px);
  transform: perspective(500px) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(transparent, #000 60%); opacity: 0.55; animation: boden 3.2s linear infinite; }
@keyframes boden { to { background-position: 0 0, 0 0, 0 44px; } }
.hero::after { content: ""; position: absolute; left: 50%; top: 38%; width: 70vw; height: 50vw; max-width: 1100px; max-height: 700px; transform: translate(-50%, -50%); z-index: -2; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 32%, transparent), transparent 70%); }
.hero-text { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .hero-text { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: var(--step-4); font-weight: 900; margin-top: 1rem; }
.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.hero .ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* Die Buehne: Dashboard, Gast-Laptop und Stream-Monitor; alles in Prozent und cqw,
   damit die Leitungen dazwischen bei jeder Breite passen. */
.buehne { position: relative; aspect-ratio: 16 / 9.4; container-type: inline-size; }
@media (max-width: 640px) { .buehne { aspect-ratio: 16 / 11; } }
.buehne .leitungen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.leitungen path { fill: none; stroke-width: 0.35; stroke-linecap: round; }
.leitungen .spur { stroke: color-mix(in srgb, var(--violet-hi) 30%, transparent); stroke-dasharray: 1 1.2; }
.leitungen .fluss { stroke: var(--cyan); stroke-dasharray: 2 2.4; opacity: 0; filter: drop-shadow(0 0 0.6px var(--cyan)); }
.buehne.strom .leitungen .fluss { opacity: 1; animation: fliessen 0.8s linear infinite; }
@keyframes fliessen { to { stroke-dashoffset: -4.4; } }
.leitungen .paket { fill: var(--pink); opacity: 0; filter: drop-shadow(0 0 1.2px var(--pink)); }
.leitungen .etikett { font: 700 2.1px var(--font-mono); letter-spacing: 0.1px; fill: var(--muted); text-transform: uppercase; }

.geraet { position: absolute; z-index: 2; }
.dash { left: 0; top: 2%; width: 31%; background: var(--panel); border: 1px solid var(--line); border-radius: 1.4cqw; padding: 1.4cqw; box-shadow: 0 2cqw 4cqw -2cqw #000; }
.dash .kopf { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 600 1.05cqw var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.dash .neu { margin-top: 1cqw; display: flex; align-items: center; gap: 0.7cqw; padding: 0.8cqw 1cqw; border-radius: 0.9cqw; border: 1px dashed var(--line); color: var(--muted); font-size: 1.25cqw; transition: border-color .3s, color .3s, background .3s; }
.buehne.s1 .dash .neu { border-color: var(--violet-hi); color: var(--text); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.dash .eintrag { margin-top: 0.8cqw; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3cqw 0.9cqw; align-items: center; padding: 0.8cqw 1cqw; border-radius: 0.9cqw; background: var(--bg-2); font-size: 1.25cqw; opacity: 0.25; transition: opacity .4s; }
.dash .eintrag.da { opacity: 1; }
.dash .eintrag .ava { grid-row: span 2; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.dash .eintrag .name { font-weight: 600; white-space: nowrap; overflow: hidden; }
.dash .eintrag .name .cursor { display: inline-block; width: 1px; height: 1.1em; background: var(--text); vertical-align: -0.15em; animation: blink 0.8s steps(2) infinite; }
.dash .eintrag .lnk { font: 500 0.95cqw var(--font-mono); color: var(--violet-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .eintrag .status { grid-column: 2; font: 600 0.9cqw var(--font-mono); color: var(--muted); text-transform: uppercase; }
.dash .eintrag.live .status { color: var(--tally); }
@keyframes blink { 50% { opacity: 0; } }

.laptop { left: 1%; top: 47%; width: 33%; }
.laptop .schirm { position: relative; aspect-ratio: 16 / 10.5; background: #05030a; border: 0.6cqw solid #241a3a; border-bottom-width: 0.9cqw; border-radius: 1.2cqw 1.2cqw 0.4cqw 0.4cqw; overflow: hidden; box-shadow: 0 0 5cqw -1.5cqw color-mix(in srgb, var(--pink) 60%, transparent); }
.laptop .fuss { height: 1.1cqw; margin: 0 -6%; background: linear-gradient(#2e2449, #171127); border-radius: 0 0 1.4cqw 1.4cqw; }
.laptop .seite { position: absolute; inset: 0; padding: 1cqw; display: flex; flex-direction: column; gap: 0.8cqw; opacity: 0.15; transition: opacity .5s; background: var(--bg-2); }
.buehne .laptop.an .seite { opacity: 1; }
.laptop .seite .titel { font: 700 1.05cqw var(--font-body); }
.laptop .seite .cam { flex: 1; border-radius: 0.6cqw; }
.laptop .seite .knopf { align-self: flex-start; padding: 0.5cqw 1.2cqw; border-radius: 0.6cqw; background: var(--violet); color: #fff; font: 600 1cqw var(--font-body); transition: transform .15s, box-shadow .3s; }
.laptop.klick .seite .knopf { transform: scale(0.94); box-shadow: 0 0 0 0.5cqw color-mix(in srgb, var(--violet) 40%, transparent); }
.laptop .geraet-label, .monitor .geraet-label { position: absolute; top: -2.4cqw; left: 0; color: var(--muted); font: 600 1cqw var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }

.monitor { left: 39%; top: 2%; width: 61%; }
.monitor .rahmen { position: relative; padding: 0.7cqw; border-radius: 1.4cqw; background: linear-gradient(160deg, #2a1f45, #120b20 60%); box-shadow: 0 0 0 1px #3a2c5e, 0 4cqw 8cqw -3cqw #000, 0 0 9cqw -3cqw color-mix(in srgb, var(--cyan) 50%, transparent); }
.monitor .mv-kopf { display: flex; justify-content: space-between; padding: 0.2cqw 0.4cqw 0.6cqw; color: var(--muted); font: 600 0.95cqw var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.monitor .tc { color: var(--text); font-variant-numeric: tabular-nums; }
.pgm { position: relative; aspect-ratio: 16 / 9; border-radius: 0.6cqw; overflow: hidden; outline: 0.25cqw solid var(--tally); }
.pgm canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pgm .glas { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.09) 0 18%, transparent 30% 100%); }
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #e9f5e4; font-family: var(--font-mono); text-shadow: 0 1px 2px #000; }
.hud .onair { position: absolute; left: 2%; top: 3%; display: flex; align-items: center; gap: 0.5cqw; padding: 0.25cqw 0.6cqw; background: rgba(0,0,0,.6); border-radius: 0.4cqw; font-size: 0.95cqw; font-weight: 700; letter-spacing: 0.08em; }
.hud .onair .live-dot { width: 0.7cqw; height: 0.7cqw; }
.hud .kompass { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); font-size: 0.9cqw; letter-spacing: 0.5em; opacity: 0.85; }
.hud .karte { position: absolute; right: 2.5%; top: 4%; width: 8%; aspect-ratio: 1; border-radius: 50%; border: 0.15cqw solid rgba(233,245,228,.6); background: radial-gradient(circle at 55% 45%, rgba(130,180,110,.45), rgba(20,30,20,.8)); }
.hud .karte::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.6cqw; height: 0.6cqw; background: var(--cyan); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0.6cqw var(--cyan); }
.hud .werte { position: absolute; left: 2.5%; bottom: 5%; display: grid; gap: 0.4cqw; width: 18%; }
.hud .wert { height: 0.55cqw; background: rgba(0,0,0,.55); border-radius: 1cqw; overflow: hidden; }
.hud .wert i { display: block; height: 100%; }
.hud .wert.hp i { width: 72%; background: #e2554b; }
.hud .wert.st i { width: 54%; background: #e5c45a; animation: ausdauer 5s ease-in-out infinite; }
@keyframes ausdauer { 50% { width: 30%; } }
.hud .munition { position: absolute; left: 2.5%; bottom: 12%; font-size: 1.5cqw; font-weight: 700; }
.hud .munition small { font-size: 0.8cqw; opacity: 0.7; }
.hud .titel { position: absolute; left: 2.5%; top: 14%; }
.hud .titel span { font-size: 0.85cqw; opacity: 0.8; letter-spacing: 0.1em; }
.hud .titel strong { display: block; font: 900 3cqw/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: #fff; }
.slots { position: absolute; right: 2.2%; bottom: 4%; z-index: 4; display: flex; gap: 1cqw; width: 52%; }
.slot { flex: 1; position: relative; }
.slot .cam { border-radius: 0.6cqw; outline: 0.2cqw solid rgba(255,255,255,.12); transform: scale(0.94); opacity: 0; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .3s, outline-color .3s; }
.slot.live .cam { opacity: 1; transform: scale(1); outline-color: var(--pink); box-shadow: 0 0 2.4cqw -0.4cqw var(--pink); }
.slot.zwei.live .cam { outline-color: var(--cyan); box-shadow: 0 0 2.4cqw -0.4cqw var(--cyan); }
.slot .cam .nosignal { animation-delay: 0.05s; }
.schritte-chips { position: absolute; left: 39%; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; }
.chip { display: flex; align-items: center; gap: 0.8cqw; padding: 1cqw 1.2cqw; border-radius: 1cqw; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); font-size: 1.35cqw; font-weight: 600; transition: border-color .3s, color .3s, box-shadow .3s; }
.chip b { font: 900 2.4cqw/1 var(--font-display); color: var(--line); transition: color .3s, text-shadow .3s; }
.buehne.s1 .chip.c1, .buehne.s2 .chip.c2, .buehne.s3 .chip.c3 { border-color: var(--pink); color: var(--text); box-shadow: 0 0 2.5cqw -1cqw var(--pink); }
.buehne.s1 .chip.c1 b, .buehne.s2 .chip.c2 b, .buehne.s3 .chip.c3 b { color: var(--pink); text-shadow: 0 0 1.2cqw var(--pink); }
.buehne.fertig .chip b { color: var(--violet-hi); }
@media (max-width: 640px) { .schritte-chips { left: 0; } .chip { font-size: 2.2cqw; } .chip b { font-size: 3.4cqw; } }

/* ---------- Gast-Kamera: Hintergrund + Figur + Bauchbinde ---------- */
.cam { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #241b38 center / cover; isolation: isolate; }
.cam .bg { position: absolute; inset: 0; background: center / cover; transition: opacity .7s, filter .7s; }
.cam .bg.zimmer { z-index: 0; }
.cam .bg.vorlage { z-index: 1; opacity: 0; }
.cam.getauscht .bg.vorlage { opacity: 1; }
.cam .figur { position: absolute; left: 50%; bottom: -3%; width: 64%; transform: translateX(-50%); z-index: 2; filter: drop-shadow(-0.25em 0 0.5em var(--rim, var(--pink))) drop-shadow(0.25em 0 0.5em var(--rim2, var(--cyan))); font-size: 0.6cqw; }
.cam .third { position: absolute; left: 5%; bottom: 9%; z-index: 3; display: flex; align-items: center; gap: 0.5em; background: rgba(10,6,20,.85); color: #fff; padding: 0.25em 0.7em 0.25em 0.6em; border-left: 0.25em solid var(--rim, var(--pink)); font: 700 var(--third, 0.62rem)/1.4 var(--font-body); white-space: nowrap; }
.cam .pegel { display: inline-flex; gap: 0.12em; align-items: flex-end; height: 0.8em; }
.cam .pegel i { width: 0.18em; background: var(--cyan); animation: pegel 0.6s ease-in-out infinite alternate; }
.cam .pegel i:nth-child(2) { animation-delay: .15s; } .cam .pegel i:nth-child(3) { animation-delay: .3s; }
@keyframes pegel { from { height: 20%; } to { height: 100%; } }
.cam .nosignal { position: absolute; inset: 0; z-index: 5; animation: verbinden 0.45s ease-out forwards; animation-delay: var(--d, 0.6s); }
.cam .nosignal .bars { height: 100%; }
@keyframes verbinden { to { opacity: 0; visibility: hidden; } }

/* Figuren leben: atmen, nicken, blinzeln, sprechen */
.figur .koerper { transform-origin: 100px 180px; animation: atmen 4.2s ease-in-out infinite; animation-delay: var(--v, 0s); }
.figur .kopf { transform-origin: 100px 104px; animation: nicken 7s ease-in-out infinite; animation-delay: var(--v, 0s); }
.figur .augen { transform-box: fill-box; transform-origin: center; animation: blinzeln 5.3s infinite; animation-delay: var(--v, 0s); }
.figur .mund { transform-box: fill-box; transform-origin: top center; }
.figur.spricht .mund { animation: sprechen 0.32s ease-in-out infinite alternate; }
.figur .led { animation: led 2.4s ease-in-out infinite; }
@keyframes atmen { 50% { transform: translateY(-1.2px) scale(1.012, 1.008); } }
@keyframes nicken { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-3deg) translateY(1px); } 60% { transform: rotate(2.5deg); } 80% { transform: rotate(0.5deg) translateY(-1px); } }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes sprechen { from { transform: scaleY(0.35); } to { transform: scaleY(1.25); } }
@keyframes led { 50% { opacity: 0.45; } }

/* ---------- Ablauf ---------- */
.ablauf { border-top: 1px solid var(--line); }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .schritte { grid-template-columns: minmax(0, 1fr); } }
.schritt { position: relative; background: linear-gradient(170deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: 18px; padding: 1.8rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; overflow: hidden; transition: border-color .3s, transform .3s; }
.schritt:hover { border-color: color-mix(in srgb, var(--pink) 60%, var(--line)); transform: translateY(-3px); }
.schritt .nr { font: 900 5.5rem/0.8 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px var(--pink); text-shadow: 0 0 26px color-mix(in srgb, var(--pink) 45%, transparent); }
.schritt:nth-child(2) .nr { -webkit-text-stroke-color: var(--violet-hi); text-shadow: 0 0 26px color-mix(in srgb, var(--violet) 55%, transparent); }
.schritt:nth-child(3) .nr { -webkit-text-stroke-color: var(--cyan); text-shadow: 0 0 26px color-mix(in srgb, var(--cyan) 45%, transparent); }
.schritt h3 { font-size: 1.9rem; }
.schritt p { color: var(--muted); }
.link-pill { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 0.85rem 0.95rem; border-radius: 12px; background: #0b0717; border: 1px solid var(--line); min-width: 0; }
.link-pill .mono { color: var(--muted); font-size: 0.66rem; }
.link-pill code { font: 500 0.84rem var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.link-pill.gast code b { color: var(--pink); }
.link-pill.obs code b { color: var(--cyan); }
.link-pill .zeile { display: flex; align-items: center; gap: 0.5rem; }

/* ---------- Hintergruende ---------- */
.tausch .grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 980px) { .tausch .grid { grid-template-columns: minmax(0, 1fr); } }
.vergleich { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); user-select: none; container-type: inline-size; box-shadow: 0 30px 70px -30px #000, 0 0 80px -30px color-mix(in srgb, var(--pink) 70%, transparent); }
.vergleich .ebene { position: absolute; inset: 0; background: center / cover; }
.vergleich .nachher { clip-path: inset(0 0 0 var(--pos, 50%)); transition: background-image .5s; }
.vergleich .figur { position: absolute; left: 50%; bottom: -3%; width: 42%; transform: translateX(-50%); z-index: 2; pointer-events: none; filter: drop-shadow(-6px 0 14px var(--pink)) drop-shadow(6px 0 14px var(--cyan)); }
.vergleich .naht { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; z-index: 3; transform: translateX(-1px); background: #fff; box-shadow: 0 0 14px var(--cyan), 0 0 3px #fff; pointer-events: none; }
.vergleich .naht::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #120a22; display: grid; place-items: center; font: 700 1rem var(--font-mono); box-shadow: 0 0 20px var(--cyan); }
.vergleich .tag { position: absolute; top: 14px; z-index: 3; padding: 4px 10px; border-radius: 6px; background: rgba(10,6,20,.75); color: #fff; }
.vergleich .tag.links { left: 14px; } .vergleich .tag.rechts { right: 14px; color: var(--cyan); }
.vergleich input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 9px; margin-top: 1.1rem; }
.vorlage { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 16 / 9; min-height: 44px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.vorlage img { width: 100%; height: 100%; object-fit: cover; }
.vorlage:hover { transform: translateY(-2px); border-color: var(--line); }
.vorlage[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 18px -4px var(--cyan); }
.fakten { display: flex; flex-direction: column; gap: 1.7rem; }
.fakt { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.fakt strong { display: block; font: 900 2.8rem/1 var(--font-display); text-transform: uppercase; }
.fakt:nth-child(1) strong { color: var(--pink); text-shadow: 0 0 20px color-mix(in srgb, var(--pink) 50%, transparent); }
.fakt:nth-child(2) strong { color: var(--violet-hi); }
.fakt:nth-child(3) strong { color: var(--cyan); text-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 40%, transparent); }
.fakt p { color: var(--muted); margin-top: 0.4rem; }

/* ---------- Direktverbindung ---------- */
.direkt { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%), var(--bg-2); border-block: 1px solid var(--line); }
.netz { position: relative; aspect-ratio: 16 / 6.2; container-type: inline-size; margin-top: 0.5rem; }
@media (max-width: 760px) { .netz { aspect-ratio: 16 / 12; } }
.netz svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.netz path { fill: none; stroke-linecap: round; }
.netz .bildweg { stroke: var(--cyan); stroke-width: 0.5; stroke-dasharray: 2.4 2; animation: fliessen 0.7s linear infinite; filter: drop-shadow(0 0 0.8px var(--cyan)); }
.netz .vermittlung { stroke: color-mix(in srgb, var(--violet-hi) 55%, transparent); stroke-width: 0.3; stroke-dasharray: 0.6 1; }
.netz .paket { fill: #fff; filter: drop-shadow(0 0 1px var(--cyan)); }
.netz .ping { fill: var(--violet-hi); filter: drop-shadow(0 0 1px var(--violet)); }
.netz .etikett { font: 700 1.9px var(--font-mono); fill: var(--cyan); letter-spacing: 0.12px; text-transform: uppercase; }
.netz .etikett.leise { fill: var(--muted); }
.knoten { position: absolute; z-index: 2; background: var(--panel); border: 1px solid var(--line); border-radius: 1.6cqw; padding: 1.4cqw 1.6cqw; display: flex; gap: 1.4cqw; align-items: center; box-shadow: 0 2cqw 4cqw -2cqw #000; }
.knoten .cam { width: 11cqw; border-radius: 0.8cqw; flex: none; }
.knoten .mono { color: var(--muted); font-size: max(0.6rem, 0.95cqw); }
.knoten h3 { font-size: max(1.05rem, 2.2cqw); margin-top: 0.3cqw; }
.knoten p { color: var(--muted); font-size: max(0.72rem, 1.15cqw); margin-top: 0.3cqw; line-height: 1.35; }
.knoten.gast { left: 0; top: 4%; width: 34%; }
.knoten.obs { right: 0; top: 4%; width: 34%; border-color: color-mix(in srgb, var(--tally) 50%, var(--line)); }
.knoten.server { left: 50%; bottom: 0; transform: translateX(-50%); width: 26%; flex-direction: column; align-items: flex-start; gap: 0.2cqw; }
@media (max-width: 760px) {
  .knoten { flex-direction: column; align-items: flex-start; }
  .knoten.gast, .knoten.obs { width: 42%; } .knoten.server { width: 46%; }
  .knoten .cam { width: 100%; }
}
.zusagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; }
@media (max-width: 860px) { .zusagen { grid-template-columns: minmax(0, 1fr); } }
.zusagen h3 { font-size: 1.5rem; }
.zusagen p { color: var(--muted); margin-top: 0.5rem; }

/* ---------- Windows-Programm ---------- */
.vergleich-fps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 760px) { .vergleich-fps { grid-template-columns: minmax(0, 1fr); } }
.fenster { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; container-type: inline-size; }
.fenster .leiste { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.fenster .leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.fenster .leiste span { margin-left: 0.4rem; }
.fenster .inhalt { padding: 1rem; display: grid; gap: 0.9rem; }
.fenster .cam { border-radius: 10px; --third: 0.7rem; }
.fenster .cam .figur { font-size: 1cqw; }
.fps { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fps strong { font: 900 3.4rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fenster.browser .fps strong { color: var(--tally); text-shadow: 0 0 20px color-mix(in srgb, var(--tally) 50%, transparent); }
.fenster.app .fps strong { color: var(--cyan); text-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 50%, transparent); }
.fps span { color: var(--muted); }
/* So sieht ein gedrosseltes Bild aus: ein Bild pro Sekunde */
.ruckelt .figur .koerper { animation-timing-function: steps(4, end); }
.ruckelt .figur .kopf { animation-timing-function: steps(7, end); }
.ruckelt .figur .augen { animation: none; }
.ruckelt .pegel i { animation-timing-function: steps(1, end); animation-duration: 1s; }
.programm-punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; }
@media (max-width: 860px) { .programm-punkte { grid-template-columns: minmax(0, 1fr); } }
.programm-punkte .punkt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1rem; }
.programm-punkte svg { width: 32px; height: 32px; color: var(--cyan); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent)); }
.programm-punkte h3 { font-size: 1.45rem; }
.programm-punkte p { color: var(--muted); margin-top: 0.3rem; }
.quelle { margin-top: 1rem; color: var(--muted); font-size: 0.7rem; }

/* ---------- Fragen ---------- */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .faq .wrap { grid-template-columns: minmax(0, 1fr); } }
.faq h2 { font-size: var(--step-3); margin-top: 0.9rem; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 1.2rem 0; font-weight: 600; font-size: 1.12rem; display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.5rem/1 var(--font-mono); color: var(--pink); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); padding-bottom: 1.3rem; max-width: 62ch; }

/* ---------- Anmelden ---------- */
.anmelden { border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.anmelden::before { content: ""; position: absolute; right: -10%; top: 10%; width: 60%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 18%, transparent), transparent); }
.anmelden .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .anmelden .wrap { grid-template-columns: minmax(0, 1fr); } }
.anmelden h2 { font-size: var(--step-4); font-weight: 900; margin-block: 1rem 1.2rem; }
.karte { background: linear-gradient(170deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: 20px; padding: 1.7rem; box-shadow: 0 30px 70px -30px #000, 0 0 0 1px color-mix(in srgb, var(--violet) 25%, transparent); }
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.tabs button { min-height: 42px; padding: 0 0.9rem; border-radius: 10px; border: 0; background: none; color: var(--muted); font: 500 0.95rem var(--font-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--violet) 22%, transparent); color: var(--text); font-weight: 600; }
.feld { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.feld label { font-weight: 600; font-size: 0.95rem; }
.feld input { min-height: 48px; padding: 0 0.95rem; border-radius: 12px; border: 1px solid var(--line); background: #0b0717; color: var(--text); font: 400 1rem var(--font-body); transition: border-color .2s, box-shadow .2s; }
.feld input:focus { border-color: var(--violet-hi); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 25%, transparent); }
.karte .btn { width: 100%; margin-top: 0.4rem; }
.karte .hinweis { color: var(--muted); font-size: 0.86rem; margin-top: 1rem; }

footer { border-top: 1px solid var(--line); padding-block: 2rem 2.6rem; color: var(--muted); font-size: 0.86rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer .bars { width: 84px; height: 10px; border-radius: 2px; overflow: hidden; }

/* Abschnitte schalten sich beim Erreichen ein wie ein Monitor (Grundzustand: sichtbar) */
.js .einschalten { animation: anschalten 0.7s ease-out both; animation-play-state: paused; }
.js .einschalten.sichtbar { animation-play-state: running; }
@keyframes anschalten { 0% { opacity: 0.35; transform: translateY(14px); filter: brightness(1.8) saturate(0.4); } 100% { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .cam .nosignal { display: none; }
  .slot .cam { opacity: 1; transform: none; }
}

/* ---------- Echte Anmeldung (Formulare wie zuvor in index.html) ---------- */
.tabs button.active { background: color-mix(in srgb, var(--violet) 22%, transparent); color: var(--text); font-weight: 600; }
.feld label small { color: var(--muted); font-weight: 400; margin-left: 0.4rem; }
.karte .notice { padding: 0.8rem 0.95rem; margin-bottom: 1rem; border-radius: 12px; background: color-mix(in srgb, var(--cyan) 8%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.fehler { color: #ff8a80; font-size: 0.92rem; margin-top: 0.8rem; min-height: 1.4em; }
.fehler:empty { margin: 0; min-height: 0; }

/* Notfall-Code nach dem Registrieren: eine Karte allein auf der Buehne */
.code-ansicht { min-height: 100vh; display: grid; place-items: center; padding-block: 3rem; background: radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--violet) 22%, transparent), transparent), var(--bg); }
.code-ansicht .karte { max-width: 520px; width: 100%; display: grid; gap: 1rem; }
.code-ansicht h1 { font-size: 2.6rem; }
.code-ansicht p { color: var(--muted); }
.code-box { padding: 1rem; border-radius: 12px; background: #0b0717; border: 1px dashed var(--pink); text-align: center; }
.code-box code { font: 700 clamp(1rem, 4vw, 1.35rem) var(--font-mono); letter-spacing: 0.06em; color: var(--text); overflow-wrap: anywhere; }
.code-ansicht .reihe { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.code-ansicht .reihe .btn { flex: 1; min-width: 10rem; width: auto; margin: 0; }

/* ---------- Rechtsseiten ---------- */
.recht { padding-block: clamp(3rem, 6vw, 5rem); }
.recht .wrap { max-width: 820px; }
.recht nav.reiter { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.recht nav.reiter a { padding: 0.5rem 0.9rem; border-radius: 10px; color: var(--muted); text-decoration: none; border: 1px solid var(--line); }
.recht nav.reiter a[aria-current="page"] { color: var(--text); border-color: var(--violet-hi); background: color-mix(in srgb, var(--violet) 18%, transparent); }
.recht h1 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.recht h2 { font-size: 1.6rem; margin: 2.2rem 0 0.6rem; }
.recht p, .recht li { color: color-mix(in srgb, var(--text) 82%, var(--muted)); max-width: 68ch; }
.recht p + p { margin-top: 0.8rem; }
.recht ul { padding-left: 1.2rem; margin: 0.6rem 0; display: grid; gap: 0.35rem; }
.recht code { font: 500 0.9em var(--font-mono); color: var(--cyan); }
.recht .stand { color: var(--muted); }