/* Advisor Board — Second Screen "Broadcast" (GTA / Fight-Night).
   Rebuild des Claude-Design-Handoffs (Show 1b), framework-frei.
   Maße in cqw relativ zu #stage-root (fixe 16:9-Bühne) — 1:1 aus dem Design.
   Fonts lokal (offline-fest am Marktstand). */

@import "/assets/fonts/fonts.css";

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #0A0A0B;
  color: #F5F5F2;
  font-family: "Archivo", system-ui, sans-serif;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Fixe 16:9-Bühne, im Viewport zentriert (Letterbox = schwarz). */
#stage-root {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background: #0A0A0B;
  /* Live-gesteuerte Variablen (show.js setzt sie pro Event). */
  --sp: #FF3B30;      /* Sprecherfarbe */
  --pl: #FF3B30;      /* Farbfeld links */
  --pr: #23232a;      /* Farbfeld rechts */
  --spo: 1;           /* Speech-Opacity (dimmt bei Zwischenruf) */
  --spb: 0px;         /* Speech-Blur */
  --cshx: 0cqw;       /* Sprecher-Karte Shove X */
  --cshr: 0deg;       /* Sprecher-Karte Rotation */
  --rco: 0;           /* Runden-Slam-Overlay Opacity */
  --qrs: 1;           /* QR-Scale bei Session-Ende */
}

/* ===== Hintergrund ===== */
.bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-dots {
  position: absolute; inset: -2%; opacity: .5;
  /* Statische GTA-Textur (kein bcHue/bcDots mehr — die repainteten jeden Frame
     und haben Ticker + Phasenwechsel ausgebremst). Bewegung liefern die Sweeps. */
  background-color: #0A0A0B;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 2px, #0A0A0B 0 11px, transparent 11px),
    radial-gradient(circle at 50% 50%, transparent 2px, #0A0A0B 0 11px, transparent 11px),
    radial-gradient(circle at 50% 50%, #f00, transparent 60%),
    radial-gradient(circle at 50% 50%, #ff0, transparent 60%),
    radial-gradient(circle at 50% 50%, #0f0, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #00f, transparent 60%);
  background-size: 14px 24.2px, 14px 24.2px, 200% 200%, 200% 200%, 200% 200%, 200% 24.2px;
  background-position: 0 0, 7px 12.1px, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
.bg-sweep-l {
  position: absolute; left: -18%; top: -12%; width: 58%; height: 130%;
  will-change: transform; animation: bcSweep 18s ease-in-out infinite alternate;
  background: linear-gradient(105deg, color-mix(in srgb, var(--pl) 20%, transparent), transparent 78%);
}
.bg-sweep-r {
  position: absolute; right: -20%; top: -12%; width: 52%; height: 130%;
  will-change: transform; animation: bcSweep2 22s ease-in-out infinite alternate;
  background: linear-gradient(255deg, color-mix(in srgb, var(--pr) 15%, transparent), transparent 76%);
}
.bg-scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 4px); }
.bg-vig { position: absolute; inset: 0; background: radial-gradient(130cqw 56.25cqw at 50% 40%, transparent 48%, rgba(5,5,6,.92) 100%); }

/* ===== Broadcast-Chrome ===== */
.chrome { position: absolute; z-index: 12; display: flex; align-items: center; }
.chrome-status { left: 2.4cqw; top: 1.91cqw; gap: .9cqw; }
.chrome-status .dot { width: .9cqw; height: .9cqw; border-radius: 50%; background: #FF3B30; animation: bcBlink 1.6s steps(1) infinite; }
.chrome-status .txt { font-weight: 800; letter-spacing: .26em; font-size: .95cqw; text-transform: uppercase; }
.chrome-brand { right: 2.4cqw; top: 1.69cqw; gap: 1cqw; }
.chrome-brand .name { font-family: "Anton", sans-serif; font-size: 1.4cqw; letter-spacing: .06em; text-transform: uppercase; }
.chrome-brand .live { background: #FF3B30; color: #fff; font-weight: 900; font-size: .85cqw; letter-spacing: .18em; padding: .28cqw .7cqw; text-transform: uppercase; }

/* ===== Ticker ===== */
.ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; background: #F5F5F2; color: #0A0A0B; overflow: hidden; height: 2.59cqw; min-height: 20px; display: flex; align-items: center; }
.ticker .track { display: flex; width: max-content; animation: bcTicker 36s linear infinite; will-change: transform; transform: translateZ(0); }
.ticker .track span { font-weight: 800; font-size: 1.05cqw; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding-right: 2cqw; }

/* ===== Phasen ===== */
.phase { position: absolute; inset: 0; z-index: 5; display: none; }
.phase.on { display: flex; }

/* ---- ATTRACT ---- */
#attract { flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw; padding: 3cqw 5cqw 17cqw; }
.att-title { text-align: center; font-family: "Anton", sans-serif; text-transform: uppercase; line-height: .98; letter-spacing: .01em; }
.att-title div { font-size: 6.7cqw; }
.att-title .outline { color: transparent; -webkit-text-stroke: .12cqw #F5F5F2; }
.att-title .red { color: #FF3B30; }
.att-sub { font-size: 1.3cqw; font-weight: 500; color: #9d9da4; max-width: 80cqw; text-align: center; }
.att-cast { display: flex; gap: 1.1cqw; justify-content: center; }
.att-card { display: flex; flex-direction: column; align-items: center; gap: .45cqw; animation: bcFloat 4.5s ease-in-out infinite; }
.att-card .pf { position: relative; width: 7cqw; height: 7cqw; overflow: hidden; background: #131316; border: 1px solid rgba(255,255,255,.1); }
.att-card .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; }
.att-card .pf b { position: absolute; left: 0; right: 0; bottom: 0; height: .39cqw; }
.att-card .nm { font-size: .85cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #c4c4cc; }
.att-cta { display: flex; align-items: center; gap: 1cqw; font-family: ui-monospace, monospace; font-size: 1cqw; color: #9d9da4; border: 1px solid rgba(255,255,255,.14); padding: .51cqw 1.6cqw; background: rgba(255,255,255,.03); animation: bcPulse 2.6s ease-in-out infinite; }

/* ---- ATTRACT: Aktionen (Telegram-CTA + Erklär-Button) ---- */
.att-actions { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; flex-wrap: wrap; }
.att-explain { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .5cqw; font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: 1cqw; letter-spacing: .04em; text-transform: uppercase; color: #0A0A0B; background: #FF7A1A; padding: .55cqw 1.5cqw; box-shadow: .3cqw .35cqw 0 rgba(255,122,26,.35); transition: transform .15s ease; }
.att-explain:hover { transform: translateY(-.2cqw); }

/* ---- ATTRACT: Historie — bereits besprochene Thesen laufen als Quartettkarten durch ---- */
.att-history { position: absolute; left: 0; right: 0; bottom: 3.2cqw; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .7cqw; }
.att-history[hidden] { display: none; }
.att-hist-lead { font-weight: 900; font-size: .72cqw; letter-spacing: .3em; text-transform: uppercase; color: #6b6b78; }
.att-hist-viewport { position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.att-track { display: flex; width: max-content; gap: 1.1cqw; padding: .4cqw 0; animation: bcHistory 48s linear infinite; will-change: transform; }
.att-history:hover .att-track { animation-play-state: paused; }
.qcard { flex: none; width: 19cqw; display: flex; flex-direction: column; gap: .45cqw; padding: .7cqw .85cqw; background: #131316; border: 1px solid rgba(255,255,255,.1); border-top: .24cqw solid var(--qc, #FF7A1A); text-decoration: none; box-shadow: .25cqw .3cqw 0 rgba(0,0,0,.5); transition: transform .18s ease; }
.qcard:hover { transform: translateY(-.55cqw); }
.qcard-meta { display: flex; align-items: center; justify-content: space-between; font-family: ui-monospace, monospace; font-size: .6cqw; letter-spacing: .12em; text-transform: uppercase; color: #6b6b78; }
.qcard-meta .tag { color: #9d9da4; font-weight: 800; }
.qcard-thesis { font-family: "Anton", sans-serif; font-size: 1.05cqw; line-height: 1.08; text-transform: uppercase; color: #F5F5F2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1cqw; }
.qcard-cast { display: flex; align-items: center; gap: .4cqw; margin-top: auto; }
.qcard-cast .pf { position: relative; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; overflow: hidden; background: #0A0A0B; border: .14cqw solid var(--c, #888); }
.qcard-cast .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; }
@keyframes bcHistory { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- LIVE ---- */
#live { flex-direction: column; padding: 5.34cqw 3.5cqw 4cqw; }
.round-tag { display: flex; justify-content: center; }
.round-tag span { font-weight: 900; letter-spacing: .3em; font-size: .95cqw; text-transform: uppercase; color: #0A0A0B; background: var(--sp); padding: .39cqw 1.4cqw; }
.stage { flex: 1; display: flex; align-items: center; gap: 2.6cqw; margin-top: .84cqw; }

.sp-card { flex: none; display: flex; flex-direction: column; width: 21cqw; transform: translateX(var(--cshx)) rotate(var(--cshr)); }
.sp-card .pf { position: relative; width: 21cqw; height: 21cqw; overflow: hidden; background: #131316; border: .22cqw solid var(--sp); box-shadow: 0 0 4cqw color-mix(in srgb, var(--sp) 45%, transparent); }
.sp-card .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; }
.sp-card .pf b { position: absolute; left: 0; right: 0; bottom: 0; height: .34cqw; background: var(--sp); animation: bcBlink 1.2s steps(1) infinite; display: none; }
#stage-root.speaking .sp-card .pf b { display: block; }
.sp-card .plate { background: var(--sp); color: #0A0A0B; padding: .56cqw 1.2cqw; }
.sp-card .plate .nm { font-family: "Anton", sans-serif; font-size: 1.9cqw; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.sp-card .plate .tg { font-weight: 800; font-size: .8cqw; letter-spacing: .22em; text-transform: uppercase; margin-top: .28cqw; opacity: .8; }

.speech-wrap { flex: 1; min-width: 0; opacity: var(--spo); filter: blur(var(--spb)); }
.speech { font-weight: 700; font-size: 2.6cqw; line-height: 1.3; letter-spacing: -.01em; max-width: 52cqw; contain: content; }
.speech .caret { display: none; width: 1.1cqw; height: 2.2cqw; vertical-align: -.3cqw; background: var(--sp); animation: bcCaret 1s step-end infinite; }
#stage-root.speaking .speech .caret { display: inline-block; }

.vs { flex: none; display: flex; align-items: center; gap: 1.6cqw; width: 20cqw; animation: bcVsIn .45s cubic-bezier(.16,1.2,.3,1) both; }
.vs.hidden { display: none; }
.vs .lbl { font-family: "Anton", sans-serif; font-size: 3.4cqw; color: transparent; -webkit-text-stroke: .1cqw var(--sp); transform: skewX(-8deg); }
.vs .pf { position: relative; width: 13cqw; height: 13cqw; overflow: hidden; background: #131316; border: .18cqw solid; }
.vs .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; filter: saturate(.7) contrast(1.05); }
.vs .plate { color: #0A0A0B; padding: .39cqw .9cqw; }
.vs .plate .nm { font-family: "Anton", sans-serif; font-size: 1.15cqw; text-transform: uppercase; line-height: 1; white-space: nowrap; }

/* Sitz-Chips */
.chips { display: flex; justify-content: center; gap: 1.5cqw; padding: .9cqw 0 0; }
.chip { display: flex; align-items: center; gap: .8cqw; padding: .5cqw 1.05cqw; background: var(--bg, rgba(255,255,255,.02)); border: 1px solid var(--bd, rgba(255,255,255,.1)); opacity: var(--op, .5); transform: translateY(var(--lift, 0cqw)); }
.chip .pf { position: relative; width: 2.9cqw; height: 2.9cqw; overflow: hidden; flex: none; }
.chip .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; filter: saturate(var(--sat, 1)); }
.chip .meta { display: flex; flex-direction: column; gap: .14cqw; }
.chip .meta .nm { font-size: .92cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ncol, #8f8f98); white-space: nowrap; }
.chip .meta .bar { height: .2cqw; width: 2.4cqw; background: var(--bar, rgba(255,255,255,.18)); }
.chip.miro { margin-left: 1.2cqw; background: rgba(255,122,26,.06); border: 1px dashed rgba(255,122,26,.55); opacity: .8; }
.chip.miro .pen { width: 2.6cqw; height: 2.6cqw; flex: none; display: grid; place-items: center; background: #FF7A1A; color: #0A0A0B; font-family: "Anton", sans-serif; font-size: 1.5cqw; }
.chip.miro .nm { color: #F5F5F2; }
.chip.miro .sub { font-size: .62cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FF7A1A; white-space: nowrap; }
/* Live-Votum in Runde 3: Daumen ploppt am Sitz-Chip auf (farbcodierter Ring). */
.chip .vote-thumb { flex: none; width: 0; overflow: hidden; display: grid; place-items: center; font-size: 1.7cqw; line-height: 1; opacity: 0; transform: scale(.3); transition: width .25s ease, opacity .25s ease, transform .3s cubic-bezier(.2,1.5,.4,1); }
.chip .vote-thumb.show { width: 2.7cqw; height: 2.7cqw; margin-left: .45cqw; opacity: 1; transform: scale(1); border-radius: 50%; background: color-mix(in srgb, currentColor 22%, transparent); border: 1.5px solid currentColor; }
.chip .vote-thumb.dafuer { color: #3FB950; }
.chip .vote-thumb.dagegen { color: #E5484D; }
.chip .vote-thumb.differenziert { color: #E7B93B; }

/* Zwischenruf */
.interject { position: absolute; right: 0; top: 16.88cqw; width: 44cqw; z-index: 8; animation: bcSlamR .45s cubic-bezier(.16,1.2,.3,1) both; }
.interject.hidden { display: none; }
.interject .box { position: relative; background: #101014; border-left: .5cqw solid var(--ijc); box-shadow: -1cqw .84cqw 2.81cqw rgba(0,0,0,.6), 0 0 4cqw color-mix(in srgb, var(--ijc) 30%, transparent); padding: 1.13cqw 2.2cqw 1.24cqw 8.4cqw; }
.interject .pf { position: absolute; left: 1.4cqw; top: -1.12cqw; width: 6cqw; height: 6cqw; overflow: hidden; border: .18cqw solid var(--ijc); transform: rotate(-4deg); animation: bcShake .5s ease .1s; background: #131316; }
.interject .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; }
.interject .tag { display: inline-block; background: var(--ijc); color: #0A0A0B; font-weight: 900; font-size: .85cqw; letter-spacing: .22em; text-transform: uppercase; padding: .23cqw .8cqw; margin-bottom: .56cqw; }
.interject .txt { font-weight: 700; font-size: 1.9cqw; line-height: 1.28; }
.interject .txt .caret { display: inline-block; width: .9cqw; height: 1.6cqw; vertical-align: -.2cqw; background: var(--ijc); animation: bcCaret 1s step-end infinite; }

/* Runden-Slam */
.slam { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--sp) 12%, rgba(6,6,8,.94)); opacity: var(--rco); transition: opacity .3s ease; }
.slam .inner { text-align: center; }
.slam.show .inner { animation: bcStamp .55s cubic-bezier(.2,1.1,.3,1) both; }
.slam .rn { font-family: "Anton", sans-serif; font-size: 13cqw; line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: .16cqw #F5F5F2; }
.slam .rl { font-family: "Anton", sans-serif; font-size: 3.2cqw; text-transform: uppercase; letter-spacing: .08em; color: var(--sp); margin-top: .56cqw; }
.slam .stars { font-size: 2.4cqw; letter-spacing: .6cqw; color: #F5F5F2; margin-top: .56cqw; text-shadow: 0 0 2cqw color-mix(in srgb, var(--sp) 70%, transparent); }
/* Kapitel-Übergang (global über allen Phasen, z-index über Ticker): Debatte → Finale.
   VOLL deckend (radial gold auf near-black) — sonst scheint der Urteil-Aufbau durch. */
.chapter-slam { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; text-align: center; background: radial-gradient(62% 62% at 50% 44%, color-mix(in srgb, #E7B93B 17%, #0A0A0B), #060608 76%); opacity: 0; transition: opacity .3s ease; }
.chapter-slam.show { opacity: 1; }
.chapter-slam.show .inner { animation: bcStamp .6s cubic-bezier(.2,1.1,.3,1) both; }
.chapter-slam .big { font-family: "Anton", sans-serif; font-size: 11cqw; line-height: 1; text-transform: uppercase; color: #E7B93B; letter-spacing: .01em; text-shadow: 0 0 3cqw color-mix(in srgb, #E7B93B 50%, transparent); }
.chapter-slam .small { font-family: "Anton", sans-serif; font-size: 2.8cqw; text-transform: uppercase; letter-spacing: .16em; color: #F5F5F2; margin-top: 1cqw; }

/* ---- KONSENS ---- */
#consensus { flex-direction: column; justify-content: center; gap: 1.24cqw; padding: 5.63cqw 6cqw 4.5cqw; }
.urteil-head { display: flex; align-items: baseline; gap: 2cqw; animation: bcRiseIn .5s ease both; }
.urteil-head .h { font-family: "Anton", sans-serif; font-size: 4.6cqw; text-transform: uppercase; line-height: 1; }
.urteil-head .rule { flex: 1; height: .28cqw; background: repeating-linear-gradient(90deg, #F5F5F2 0 1.2cqw, transparent 1.2cqw 2cqw); opacity: .25; }
.c-title { font-size: 1.9cqw; font-weight: 700; line-height: 1.25; max-width: 70cqw; animation: bcRiseIn .5s ease .1s both; }
.c-tension { font-size: 1.2cqw; font-style: italic; color: #9d9da4; max-width: 64cqw; animation: bcRiseIn .5s ease .18s both; }
.c-positions { display: flex; flex-direction: column; gap: .68cqw; margin-top: .56cqw; }
.c-pos { display: flex; align-items: stretch; gap: 0; animation: bcBarIn .5s cubic-bezier(.2,1,.3,1) both; }
.c-pos .who { flex: none; display: flex; align-items: center; gap: .9cqw; color: #0A0A0B; padding: .45cqw 1.2cqw; width: 16cqw; }
.c-pos .who .pf { position: relative; width: 2.8cqw; height: 2.8cqw; overflow: hidden; flex: none; }
.c-pos .who .pf i { position: absolute; inset: 0; background-size: 122%; background-position: 50% 28%; background-repeat: no-repeat; }
.c-pos .who .nm { font-family: "Anton", sans-serif; font-size: 1.05cqw; text-transform: uppercase; line-height: 1.1; }
.c-pos .stance { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-left: none; padding: .45cqw 1.6cqw; font-size: 1.15cqw; font-weight: 500; line-height: 1.35; }
.c-foot { display: flex; align-items: flex-end; gap: 3cqw; margin-top: .79cqw; animation: bcRiseIn .6s ease 1.2s both; }
.c-foot .left { flex: 1; display: flex; flex-direction: column; gap: .68cqw; }
.c-verdict { font-size: 1.05cqw; line-height: 1.5; color: #c4c4cc; max-width: 66ch; }
.c-takeaway { font-family: "Anton", sans-serif; font-size: 2.9cqw; line-height: 1.08; text-transform: uppercase; }
.hl { background: #F5F5F2; color: #0A0A0B; padding: 0 .6cqw; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.qr-box { flex: none; display: flex; flex-direction: column; align-items: center; gap: .45cqw; transform: scale(var(--qrs)); transition: transform .4s ease; }
.qr-box .lead { font-weight: 900; font-size: .75cqw; letter-spacing: .26em; text-transform: uppercase; color: #9d9da4; }
.qr-box img, .qr-box .ph { width: 8cqw; height: 8cqw; background: #fff; display: grid; place-items: center; font-family: ui-monospace, monospace; font-weight: 700; color: #0A0A0B; font-size: 1.3cqw; object-fit: contain; }
.qr-box .url { font-family: ui-monospace, monospace; font-size: .72cqw; color: #9d9da4; max-width: 20cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Simuliertes Votum: großer Score „3:1" im Urteil-Kopf + Daumen pro Position. */
.c-tally { flex: none; font-family: "Anton", sans-serif; font-size: 4.6cqw; line-height: 1; white-space: nowrap; letter-spacing: .02em; animation: bcRiseIn .5s ease .12s both; }
.c-tally .for { color: #3FB950; }
.c-tally .against { color: #E5484D; }
.c-tally .sep { color: #9d9da4; margin: 0 .3cqw; }
.stance-badge { flex: none; align-self: stretch; display: grid; place-items: center; width: 2.8cqw; font-size: 1.3cqw; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-left: .34cqw solid currentColor; }
.stance-badge.dafuer { color: #3FB950; }
.stance-badge.dagegen { color: #E5484D; }
.stance-badge.differenziert { color: #E7B93B; }

/* ---- MIRO ZEICHNET ---- */
#drawing { flex-direction: column; padding: 4.78cqw 4cqw 4.22cqw; }
.draw-head { display: flex; align-items: baseline; gap: 1.8cqw; animation: bcRiseIn .5s ease both; }
.draw-head .h { font-family: "Anton", sans-serif; font-size: 3cqw; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.draw-head .h .outline { color: transparent; -webkit-text-stroke: .1cqw #F5F5F2; }
.draw-head .sub { font-size: 1.05cqw; font-weight: 800; color: #FF7A1A; text-transform: uppercase; letter-spacing: .2em; }
.draw-stage { flex: 1; position: relative; margin-top: 1.6cqw; }
.note { position: absolute; background: #101014; border-left: .3cqw solid var(--nc); border-top: 1px solid rgba(255,255,255,.12); box-shadow: .3cqw .35cqw 0 rgba(0,0,0,.55); padding: .55cqw .9cqw; animation: bcNoteIn .55s cubic-bezier(.16,1.2,.3,1) both; }
.note .nm { font-weight: 900; font-size: .62cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--nc); white-space: nowrap; }
.note .tx { font-size: .92cqw; font-weight: 700; line-height: 1.3; margin-top: .2cqw; }
.miro-box { position: absolute; left: 49cqw; top: 2cqw; width: 17cqw; display: flex; flex-direction: column; align-items: center; gap: .9cqw; }
.miro-box .sq { width: 10cqw; height: 10cqw; display: grid; place-items: center; background: #101014; border: .2cqw dashed #FF7A1A; box-shadow: .45cqw .5cqw 0 color-mix(in srgb, #FF7A1A 45%, transparent); animation: bcFloat 4s ease-in-out infinite; }
.miro-box .sq span { font-family: "Anton", sans-serif; font-size: 5cqw; color: #FF7A1A; line-height: 1; }
.miro-box .lbl { background: #FF7A1A; color: #0A0A0B; font-family: "Anton", sans-serif; font-size: 1.2cqw; text-transform: uppercase; padding: .25cqw 1.1cqw; }
.miro-box .ink { width: 16cqw; height: .65cqw; background: rgba(255,255,255,.1); overflow: hidden; }
.miro-box .ink b { display: block; height: 100%; width: 100%; background: #FF7A1A; transform-origin: left; will-change: transform; animation: bcInk 14s linear both; }
.miro-box .cap { font-family: ui-monospace, monospace; font-size: .72cqw; color: #9d9da4; text-align: center; }
.draw-qr { position: absolute; right: 0; top: 2cqw; width: 19cqw; display: flex; flex-direction: column; align-items: center; gap: .9cqw; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); padding: 1.3cqw 1.2cqw; animation: bcRiseIn .5s ease .3s both; }
.draw-qr .lead { font-weight: 900; font-size: .75cqw; letter-spacing: .24em; text-transform: uppercase; }
.draw-qr img, .draw-qr .ph { width: 8cqw; height: 8cqw; background: #fff; display: grid; place-items: center; font-family: ui-monospace, monospace; font-weight: 700; color: #0A0A0B; font-size: 1.2cqw; object-fit: contain; }
.draw-qr .hint { font-size: .8cqw; color: #9d9da4; text-align: center; line-height: 1.45; }

/* ---- GRAPHIC RECORD ---- */
#record { flex-direction: column; padding: 4.78cqw 4cqw 4.22cqw; }
.rec-head { display: flex; align-items: center; gap: 1.6cqw; animation: bcRiseIn .5s ease both; }
.rec-head .h { font-family: "Anton", sans-serif; font-size: 3.2cqw; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.rec-head .h .outline { color: transparent; -webkit-text-stroke: .1cqw #F5F5F2; }
.rec-head .badge { background: #FF7A1A; color: #0A0A0B; font-family: "Anton", sans-serif; font-size: 1cqw; text-transform: uppercase; padding: .3cqw .8cqw; transform: rotate(-2deg); }
.rec-head .spacer { flex: 1; }
.rec-head .stamp { background: #F5F5F2; color: #0A0A0B; font-family: "Anton", sans-serif; font-size: 1.05cqw; text-transform: uppercase; line-height: 1.2; padding: .45cqw 1.2cqw; transform: rotate(-1.2deg); box-shadow: .4cqw .45cqw 0 rgba(245,245,242,.22); max-width: 42cqw; }
.rec-body { flex: 1; display: flex; gap: 3cqw; margin-top: 1.5cqw; min-height: 0; }
.rec-img { flex: none; width: 26.8cqw; height: 35.75cqw; background: #0A0A0B; border: .2cqw solid #F5F5F2; box-shadow: .6cqw .6cqw 0 #FF7A1A; transform: rotate(-.8deg); animation: bcRiseIn .55s cubic-bezier(.2,1,.3,1) both; padding: .3cqw; display: grid; place-items: center; }
.rec-img img { width: 100%; height: 100%; object-fit: cover; }
.rec-img .ph { color: #9d9da4; font-family: ui-monospace, monospace; font-size: 1cqw; text-align: center; padding: 2cqw; }
.rec-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.3cqw; }
.rec-takeaway { font-family: "Anton", sans-serif; font-size: 2.3cqw; line-height: 1.1; text-transform: uppercase; animation: bcRiseIn .5s ease .15s both; }
.rec-pos-list { display: flex; flex-direction: column; gap: .7cqw; margin-top: .4cqw; }
.rec-pos { display: flex; align-items: center; gap: 1cqw; animation: bcBarIn .45s cubic-bezier(.2,1,.3,1) both; }
.rec-pos .sw { flex: none; width: 1.5cqw; height: 1.5cqw; }
.rec-pos .nm { flex: none; font-family: "Anton", sans-serif; font-size: .95cqw; text-transform: uppercase; width: 10cqw; line-height: 1.1; }
.rec-pos .st { font-size: .95cqw; font-weight: 500; line-height: 1.3; color: #c4c4cc; }
.rec-foot { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.rec-give { display: flex; align-items: center; gap: 2cqw; animation: bcRiseIn .6s ease 1.2s both; }
.rec-give img, .rec-give .ph { width: 9cqw; height: 9cqw; background: #fff; display: grid; place-items: center; font-family: ui-monospace, monospace; font-weight: 700; color: #0A0A0B; font-size: 1.4cqw; transform: scale(var(--qrs)); object-fit: contain; }
.rec-give .t1 { font-family: "Anton", sans-serif; font-size: 1.5cqw; text-transform: uppercase; }
.rec-give .t2 { font-size: .95cqw; color: #c4c4cc; max-width: 34ch; line-height: 1.4; }
.rec-give .url { font-family: ui-monospace, monospace; font-size: .75cqw; color: #9d9da4; }

/* ===== Keyframes (1:1 aus dem Design) ===== */
@keyframes bcTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bcBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes bcCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bcSweep { 0% { transform: translateX(-8%) skewX(-14deg); } 100% { transform: translateX(6%) skewX(-14deg); } }
@keyframes bcSweep2 { 0% { transform: translateX(6%) skewX(-14deg); } 100% { transform: translateX(-7%) skewX(-14deg); } }
@keyframes bcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.51cqw); } }
@keyframes bcStamp { 0% { transform: scale(2.6) rotate(-9deg); } 55% { transform: scale(.94) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes bcSlamR { 0% { transform: translateX(46cqw) rotate(6deg); } 60% { transform: translateX(-1.4cqw) rotate(-2deg); } 100% { transform: none; } }
@keyframes bcVsIn { from { transform: translateX(8cqw); } to { transform: none; } }
@keyframes bcRiseIn { from { transform: translateY(1.69cqw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bcBarIn { 0% { transform: translateX(-6cqw); } 60% { transform: translateX(.8cqw); } 100% { transform: none; } }
@keyframes bcShake { 0%, 100% { transform: none; } 20% { transform: translate(-.4cqw, 0.11cqw) rotate(-2deg); } 55% { transform: translate(.4cqw, -0.11cqw) rotate(2deg); } 80% { transform: translate(-.2cqw, 0) rotate(-1deg); } }
@keyframes bcPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes bcDots { from { background-position: 0 0, 7px 12.1px, 800% 400%, 1000% -400%, -1200% -600%, 400% 24.2px; } to { background-position: 0 0, 7px 12.1px, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } }
@keyframes bcNoteIn { 0% { transform: translate(7cqw, 5cqw) rotate(9deg) scale(.55); } 65% { transform: translate(-.3cqw, -.2cqw) rotate(-1deg) scale(1.03); } 100% { transform: none; } }
@keyframes bcInk { from { transform: scaleX(.03); } to { transform: scaleX(.94); } }
@keyframes bcHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }