/* =========================================================
   SQNZ Board – Display UI  (abgeleitet aus Website-V3/styles.css)
   Screen-Basis 360 × 640 pt (9:16, Hochformat am Board)
   ========================================================= */

:root {
  --blue: #233a8f;
  --blue-2: #2f4aa6;
  --blue-3: #3a57b8;
  --navy: #172560;
  --ink: #1b2a6b;
  --red: #e23d22;
  --red-dark: #c42e16;
  --coral: #ff6b4a;
  --green: #baf05e;
  --green-dark: #9fd43f;
  --lilac: #d3b9dc;
  --lilac-dark: #bb9ec6;
  --cream: #f0ede1;
  --sand: #e4e3d3;
  --beige: #ecd5b2;
  --muted: #4a5585;
  --led: #5aa0ff;
  --spring: cubic-bezier(.3, 1.7, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Manjari', system-ui, sans-serif; color: var(--ink); background: var(--cream); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ol { list-style: none; margin: 0; padding: 0; }
svg { overflow: visible; }
svg use { fill: currentColor; }
code { font-size: .9em; }

.wrap { width: min(100% - 32px, 1320px); margin-inline: auto; position: relative; }
.t-red { color: var(--red-dark); }
.t-coral { color: var(--coral); }
.c-green { color: var(--green); }
.c-lilac { color: var(--lilac); }
.c-sand { color: var(--beige); }
.center { text-align: center; }

.eyebrow { display: block; font-weight: 700; font-size: 11px; letter-spacing: .2em; }
.eyebrow-red { color: var(--red); }
.eyebrow-blue { color: var(--blue); }

/* =========================================================
   DOKUMENT-RAHMEN
   ========================================================= */
.doc-head { background: var(--blue); color: #fff; padding: 56px 0 64px; }
.doc-head .wrap { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.doc-logo { width: 180px; }
.doc-head .eyebrow { color: var(--green); margin-bottom: 14px; }
.doc-head h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: .12em; }
.doc-head p { margin-top: 16px; max-width: 640px; font-size: 18px; line-height: 1.45; opacity: .9; }

.doc-sec { padding: 72px 0; }
.doc-cream { background: var(--cream); }
.doc-blue { background: var(--blue); color: #fff; }
.h2 { font-weight: 700; font-size: clamp(26px, 3vw, 40px); letter-spacing: .12em; color: var(--blue); line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.h2-light { color: #fff; }
.tag { font-size: 12px; letter-spacing: .14em; padding: 8px 14px 5px; border-radius: 40px; color: var(--navy); }
.tag-green { background: var(--green); }
.tag-lilac { background: var(--lilac); }
.tag-sand { background: var(--beige); }

.rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 32px; }
.rule { background: #fff; border-radius: 28px; padding: 22px 24px 18px; }
.rule b { display: block; font-size: 16px; letter-spacing: .06em; color: var(--blue); margin-bottom: 8px; }
.rule p { font-size: 15px; line-height: 1.45; color: var(--muted); }
.tokens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tok { display: grid; grid-template-columns: 40px auto; column-gap: 10px; align-items: center; background: #fff; border-radius: 40px; padding: 6px 18px 6px 6px; }
.tok i { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tok b { font-size: 14px; padding-top: 4px; }
.tok span { font-size: 12px; color: var(--muted); }

.row { display: flex; flex-wrap: wrap; gap: 40px 32px; margin-top: 36px; }
figure { margin: 0; width: 360px; max-width: 100%; }
figcaption { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--muted); }
figcaption b { display: block; color: var(--blue); font-size: 15px; letter-spacing: .04em; margin-bottom: 2px; }
.doc-blue figcaption { color: rgba(255,255,255,.78); }
.doc-blue figcaption b { color: #fff; }

.leds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; }
.led { background: var(--blue-2); border-radius: 28px; padding: 20px; }
.led i { display: block; height: 10px; border-radius: 10px; background: var(--c); box-shadow: 0 0 18px 2px var(--c); margin-bottom: 16px; }
.led b { display: block; font-size: 16px; letter-spacing: .06em; }
.led span { font-size: 14px; opacity: .8; line-height: 1.4; }

/* =========================================================
   SCREEN-GRUNDLAGEN
   ========================================================= */
.scr {
  position: relative; width: 360px; height: 640px; max-width: 100%;
  border-radius: 22px; overflow: hidden;
  background: var(--blue); color: #fff;
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  /* Holzrahmen des Boards */
  box-shadow: 0 0 0 10px #e9d2ae, 0 0 0 11px #d5b98f, 0 24px 40px -10px rgba(23,37,96,.45);
  isolation: isolate;
}
.scr > * { position: relative; z-index: 2; }
.scr > .blob, .blob { position: absolute; z-index: 0; pointer-events: none; }
.scr-cream { background: var(--cream); color: var(--ink); }
.scr-green { background: var(--green); color: var(--navy); }
.scr-red { background: var(--red); color: #fff; }
.scr-lilac { background: var(--lilac); color: var(--navy); }
.scr-sand { background: var(--beige); color: var(--navy); }

/* Top-Bar */
.bar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.bar-logo { width: 92px; }
.bar-r { margin-left: auto; display: flex; gap: 8px; }
.bar-title { font-size: 15px; letter-spacing: .16em; padding-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title.dark { color: var(--blue); font-size: 13px; }
.chip { min-width: 44px; height: 44px; border-radius: 22px; background: var(--blue-2); display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .08em; padding-top: 3px; }
.back { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-2); display: grid; place-items: center; flex-shrink: 0; }
.back svg { width: 20px; height: 20px; }
.back.dark { background: var(--blue); color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 6px 26px 2px; border-radius: 40px;
  font-weight: 700; font-size: 15px; letter-spacing: .14em; color: #fff;
  transition: transform .25s var(--spring);
}
.btn:hover { transform: translateY(-3px) rotate(-2deg) scale(1.03); }
.btn svg { width: 18px; height: 18px; margin-top: -3px; }
.btn-wide { width: 100%; }
.btn-red { background: var(--red); }
.btn-blue { background: var(--blue); }
.btn-white { background: #fff; color: var(--red); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn-ghost-d { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.scr > .btn-wide:last-child { margin-top: auto; }
.link { text-align: center; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-decoration: underline; text-underline-offset: 4px; color: var(--blue); }

/* Tipp-Karte */
.tip { background: var(--blue-2); border-radius: 24px; padding: 16px 18px 12px; }
.tip .eyebrow { color: var(--green); margin-bottom: 6px; }
.tip p { font-size: 16px; line-height: 1.35; }
.tip-light { background: rgba(255,255,255,.55); color: var(--navy); }
.tip-light .eyebrow { color: var(--blue); }
.scr-red .tip-light { background: rgba(255,255,255,.2); color: #fff; }
.t-led { color: var(--led); }

/* Animationen */
@keyframes drift { 0%,100% { rotate: -3deg; translate: 0 0; } 50% { rotate: 3deg; translate: 0 -8px; } }
@keyframes pop { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes blink { 50% { opacity: .25; } }
.blob { animation: drift 12s ease-in-out infinite; }

/* =========================================================
   1.1 BOOT
   ========================================================= */
.scr-boot { justify-content: space-between; }
.boot-center { margin-top: 120px; display: grid; justify-items: center; gap: 22px; }
.boot-ape { width: 150px; animation: pop 3s ease-in-out infinite; }
.boot-logo { width: 220px; }
.boot-foot { display: grid; gap: 6px; text-align: center; }
.boot-foot b { font-size: 14px; letter-spacing: .2em; margin-top: 12px; }
.boot-foot span { font-size: 14px; opacity: .8; }
.led-bar { height: 12px; border-radius: 10px; background: var(--blue-2); overflow: hidden; }
.led-bar i { display: block; height: 100%; width: 40%; border-radius: 10px; background: linear-gradient(90deg, var(--green), var(--lilac), var(--coral)); animation: load 3.5s ease-in-out infinite; }
@keyframes load { 0% { width: 4%; } 100% { width: 100%; } }

/* =========================================================
   1.2 HOME
   ========================================================= */
.hello { font-weight: 700; font-size: 26px; line-height: 1.12; letter-spacing: .1em; margin-top: 4px; }
.hello.sm { font-size: 21px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; grid-template-rows: 1.25fr 1fr; }
.mode { position: relative; border-radius: 28px; padding: 16px 16px 14px; color: var(--navy); display: flex; flex-direction: column; overflow: hidden; transition: transform .25s var(--spring); }
.mode:hover { transform: rotate(-1.5deg) scale(1.02); }
.mode b { font-size: 18px; letter-spacing: .12em; margin-top: 4px; }
.mode span:not(.mode-no) { font-size: 13px; line-height: 1.3; max-width: 120px; color: var(--muted); }
.mode-no { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.mode img { position: absolute; right: 6px; bottom: 6px; width: 76px; }
.mode-train { grid-column: span 2; background: var(--green); overflow: visible; }
.mode-train b { font-size: 26px; }
.mode-train span:not(.mode-no) { max-width: 150px; font-size: 14px; color: var(--navy); }
/* Affe hängt mit der Kletterpfote an der Oberkante der Karte, Text bleibt frei */
.mode-train img { width: 132px; right: 14px; top: -16px; bottom: auto; transform-origin: 6% 4%; animation: hang 4s ease-in-out infinite; }
@keyframes hang { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.mode-blob { position: absolute; right: 6px; top: 10px; width: 170px; height: 150px; color: #d6f79e; z-index: 0; animation: drift 12s ease-in-out infinite; }
.mode-train > :not(.mode-blob):not(img) { position: relative; z-index: 1; }
.mode-train img { position: absolute; }
.mode-coach { background: var(--lilac); }
.mode-game { background: var(--beige); }
.home-strip { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.home-strip > div { border-radius: 22px; padding: 12px 14px 8px; display: grid; gap: 2px; }
.home-strip span { font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.home-strip b { font-size: 15px; }
.hs-score { background: var(--blue-2); }
.hs-score b { color: var(--coral); font-size: 19px; }
.hs-course { background: var(--cream); color: var(--navy); }
.hs-course span { color: var(--red); }

/* 1.3 Highscore */
.hs-tabs { display: flex; gap: 6px; }
.hs-tabs span { flex: 1; text-align: center; padding: 12px 0 8px; border-radius: 30px; background: var(--blue-2); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.hs-tabs .on { background: var(--red); }
.podium { position: relative; height: 170px; display: grid; place-content: center; text-align: center; color: var(--navy); }
.podium svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; animation: drift 12s ease-in-out infinite; }
.podium span { font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.podium b { font-size: 38px; color: var(--red-dark); letter-spacing: .02em; }
.podium small { font-size: 13px; }
.rank { display: grid; gap: 8px; }
.rank li { display: flex; align-items: center; gap: 12px; background: var(--blue-2); border-radius: 22px; padding: 10px 16px 6px 10px; font-size: 16px; }
.rank i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; font-weight: 700; font-size: 13px; padding-top: 3px; margin-top: -4px; }
.rank b { margin-left: auto; }
.rank .me { background: var(--red); }

/* =========================================================
   2.1 AUSWAHL
   ========================================================= */
.filters { display: flex; gap: 6px; }
.filters span { padding: 11px 12px 7px; border-radius: 30px; background: var(--blue-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.filters .on { background: var(--red); }
.cat { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cat b { font-size: 12px; letter-spacing: .2em; color: var(--green); }
.cat i { font-style: normal; font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-2); display: grid; place-items: center; padding-top: 2px; }
.wo { background: var(--cream); color: var(--navy); border-radius: 24px; padding: 14px 16px 10px; display: grid; gap: 4px; transition: transform .25s var(--spring); }
.wo:hover { transform: rotate(-1deg) scale(1.02); }
.wo-t { display: flex; align-items: center; justify-content: space-between; }
.wo-t b { font-size: 17px; }
.wo-m { display: flex; gap: 14px; font-size: 13px; color: var(--muted); align-items: center; }
.wo-m span { display: inline-flex; gap: 5px; align-items: center; }
.wo-m svg { width: 14px; height: 14px; margin-top: -3px; }
.rate { margin-left: auto; background: var(--green); color: var(--navy); padding: 4px 10px 1px; border-radius: 20px; font-weight: 700; font-size: 12px; }
.rate.new { background: var(--coral); color: #fff; letter-spacing: .1em; }
.diff { display: inline-flex; gap: 3px; }
.diff svg { width: 18px; height: 16px; color: var(--sand); }
.diff[data-d="1"] svg:nth-child(-n+1),
.diff[data-d="2"] svg:nth-child(-n+2),
.diff[data-d="3"] svg:nth-child(-n+3) { color: var(--red); }
.wo-course { justify-self: start; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--blue); background: var(--lilac); padding: 5px 10px 2px; border-radius: 20px; }

/* 2.2 VIDEO */
.skip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 3px 18px 0; border-radius: 30px; background: var(--blue-2); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.skip svg { width: 14px; height: 14px; margin-top: -3px; }
.video { position: relative; border-radius: 26px; overflow: hidden; height: 270px; background: #f1dcc0 url(assets/birke.jpg) center / cover; display: grid; place-items: center; box-shadow: inset 0 0 0 8px var(--beige); }
.video img { width: 88%; }
/* Play-Button – Varianten über html[data-play] umschaltbar (0, a, b, c, d) */
.play { position: absolute; display: grid; place-items: center; filter: drop-shadow(0 10px 14px rgba(23,37,96,.35)); }
.pv { display: none; position: relative; place-items: center; }
html:not([data-play]) .pv-c, [data-play="0"] .pv-0, [data-play="a"] .pv-a, [data-play="b"] .pv-b, [data-play="c"] .pv-c { display: grid; }
[data-play="d"] .pv-d { display: inline-flex; }
.pv svg { width: 100%; height: 100%; }
.pv-bg, .pv-0 > svg, .pv-b > svg { position: absolute; inset: 0; }
/* Jetzt: Play-Blob */
.pv-0 { width: 84px; height: 84px; margin-left: 8px; color: var(--red); animation: drift 6s ease-in-out infinite; }
/* A: roter Rund-Blob + weißes Dreieck */
.pv-a { width: 84px; height: 80px; animation: drift 7s ease-in-out infinite; }
.pv-a .pv-bg { color: var(--red); }
.pv-a .pv-ic { position: relative; width: 34px; height: 34px; margin-left: 5px; color: #fff; }
/* B: weiches Dreieck */
.pv-b { width: 78px; height: 84px; margin-left: 8px; color: var(--red); }
/* C: Creme-Blob + rotes Dreieck */
.pv-c { width: 104px; height: 98px; animation: drift 7s ease-in-out infinite; }
.pv-c .pv-bg { color: var(--cream); }
.pv-c .pv-ic { position: relative; width: 46px; height: 50px; margin-left: 8px; color: var(--red); }
/* D: Pille mit Text */
.pv-d { align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 40px; background: var(--red); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .14em; white-space: nowrap; }
.pv-d i { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pv-d i svg { width: 20px; height: 20px; color: var(--red); margin-left: 3px; }
.pv-d > span { padding-top: 4px; }

/* Umschalter (Doku + Prototyp) */
.play-switch { display: flex; align-items: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.play-switch span { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--blue); margin-right: 4px; padding-top: 2px; }
.play-switch button { min-width: 40px; height: 34px; padding: 3px 12px 0; border: 0; border-radius: 30px; background: #fff; color: var(--blue); font: 700 12px/1 'Manjari', sans-serif; letter-spacing: .1em; cursor: pointer; }
.play-switch button.on { background: var(--red); color: #fff; }
.proto .play-switch { margin: 0; }
.proto .play-switch span { color: #fff; opacity: .7; }
.proto .play-switch button { background: var(--blue-2); color: #fff; height: 32px; }
.proto .play-switch button.on { background: var(--red); }
.proto .play-switch[hidden] { display: none; }
.vid-info { display: grid; gap: 6px; }
.vid-info .eyebrow { color: var(--green); }
.vid-info b { font-size: 22px; letter-spacing: .06em; }
.vid-info p { font-size: 15px; line-height: 1.4; opacity: .9; }
.prog { height: 8px; border-radius: 8px; background: var(--blue-2); margin-top: 8px; }
.prog i { display: block; height: 100%; border-radius: 8px; background: var(--green); }

/* 2.3 LIVE */
.seq { display: flex; align-items: center; justify-content: center; gap: 6px; }
.seq span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; padding-top: 3px; background: var(--blue-2); }
.seq i { width: 22px; height: 3px; border-radius: 3px; background: var(--blue-2); }
.seq .done { background: var(--green); color: var(--navy); }
.seq .on { background: #fff; color: var(--blue); box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.seq.on-light span:not(.done) { background: rgba(255,255,255,.5); color: var(--navy); }
.seq.on-light i { background: rgba(23,37,96,.25); }
.seq.on-light .done { background: var(--navy); color: #fff; }
.timer { text-align: center; font-weight: 700; font-size: 34px; letter-spacing: .14em; color: var(--lilac); margin-bottom: -6px; }
.ring { position: relative; width: 210px; height: 210px; margin-inline: auto; }
.ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke: var(--blue-2); stroke-width: 10; }
.ring .ring-v { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: calc(276.5 * (1 - var(--p))); }
.ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; }
.ring b { font-size: 76px; line-height: 1; }
.ring span { font-size: 26px; font-weight: 700; opacity: .7; }
.ring small { grid-column: span 2; font-size: 11px; font-weight: 700; letter-spacing: .24em; opacity: .7; }
.hands { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.hand { width: 100px; height: 76px; border-radius: 26px; background: var(--blue-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .16em; padding: 8px 0 4px; opacity: .55; }
.hand svg { width: 32px; height: 32px; }
.hand svg.flip { scale: -1 1; }
.hand.on { background: var(--green); color: var(--navy); opacity: 1; box-shadow: 0 0 0 5px rgba(186,240,94,.3); }
.stop { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-2); display: grid; place-items: center; }
.stop svg { width: 20px; height: 20px; }

/* 2.4 / 2.5 FEEDBACK */
.scr-green, .scr-red { justify-content: flex-start; }
.fb { display: grid; justify-items: center; text-align: center; gap: 4px; margin-top: 24px; }
.fb img { width: 170px; animation: pop 2.4s ease-in-out infinite; margin-bottom: 10px; }
.fb b { font-size: 34px; letter-spacing: .12em; }
.fb span { font-size: 12px; font-weight: 700; letter-spacing: .2em; }
/* 2.5: Affe purzelt auf einem hellen Griff (wie in Figma) */
.fb-ape { position: relative; width: 220px; height: 180px; display: grid; place-items: center; margin-bottom: 10px; }
.fb-ape svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cream); }
.fb-ape img { position: relative; margin: 0; }
.scr-red .fb b { font-size: 26px; letter-spacing: .1em; }
/* Trainings-Karte: CTA unten */
.mode-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px 9px; border-radius: 40px; background: var(--blue); color: #fff !important; font-weight: 700; font-size: 13px; letter-spacing: .14em; max-width: none !important; }
.mode-cta svg { width: 14px; height: 14px; margin-top: -3px; }
.count { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.count b { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 24px; padding-top: 4px; }
.count span { font-size: 15px; font-weight: 700; }

/* 2.6 / 2.7 KURS */
.toggle { display: flex; background: var(--sand); border-radius: 30px; padding: 4px; align-self: center; }
.toggle span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px 6px; border-radius: 26px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.toggle svg { width: 15px; height: 15px; margin-top: -3px; }
.toggle .on { background: var(--blue); color: #fff; }
.course-ape { width: 120px; align-self: center; margin: 8px 0 4px; }
.course-h { font-size: 26px; letter-spacing: .1em; line-height: 1.12; color: var(--blue); margin-top: -6px; }
.course-h.sm { font-size: 20px; text-align: center; }
.course-p { font-size: 15px; line-height: 1.4; color: var(--muted); }
.scr-cream .course-p:has(+ .btn) { text-align: center; }
.course-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.course-meta span { background: var(--lilac); border-radius: 20px; padding: 7px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.course-meta span:first-child { background: var(--green); }
.qr-wrap { position: relative; width: 210px; height: 210px; align-self: center; margin: 36px 0 20px; }
.qr-wrap .blob { position: absolute; }
.qr { position: relative; z-index: 1; width: 100%; height: 100%; }
.qr svg { width: 100%; height: 100%; }

/* 2.8 COMPLETE */
.done-head { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: end; color: var(--navy); }
.done-head img { grid-row: span 2; width: 120px; animation: pop 2.6s ease-in-out infinite; }
.done-head .eyebrow { color: var(--red-dark); }
.done-head b { font-size: 25px; letter-spacing: .1em; line-height: 1.1; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.st { position: relative; height: 92px; display: grid; place-content: center; text-align: center; color: var(--navy); }
.st svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.st span { font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.st b { font-size: 21px; color: var(--red-dark); }
.lvl { display: flex; align-items: center; gap: 6px; background: var(--blue-2); border-radius: 22px; padding: 12px 16px 8px; }
.lvl span { font-size: 11px; font-weight: 700; letter-spacing: .16em; margin-right: 8px; }
.lvl i { flex: 1; height: 8px; border-radius: 8px; background: var(--blue); }
.lvl i.on { background: var(--green); }
.lvl b { margin-left: 8px; font-size: 14px; }
.rating { text-align: center; display: grid; gap: 6px; }
.rating .eyebrow { color: var(--green); }
.stars { display: flex; justify-content: center; gap: 8px; }
.stars svg { width: 36px; height: 36px; color: var(--blue-2); }
.stars svg.on { color: var(--coral); }
.rating small { font-size: 12px; opacity: .7; }

/* =========================================================
   3 COACH
   ========================================================= */
.coach-hero { position: relative; height: 190px; width: 260px; align-self: center; display: grid; place-items: center; margin-top: 6px; }
.coach-hero img { position: relative; width: 150px; }
.steps2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.steps2 > div { background: var(--blue-2); border-radius: 24px; padding: 14px 12px 10px; text-align: center; display: grid; gap: 4px; justify-items: center; }
.steps2 i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; background: var(--lilac); color: var(--navy); display: grid; place-items: center; font-weight: 700; padding-top: 3px; }
.steps2 b { font-size: 12px; letter-spacing: .14em; }
.steps2 span { font-size: 12px; line-height: 1.3; opacity: .8; }
.steps2 .arr { width: 18px; height: 18px; color: var(--lilac); }
.rec-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: currentColor; margin-top: -3px; animation: blink 1.2s infinite; }
.btn .rec-dot { background: #fff; }
.rec-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 3px 18px 0; border-radius: 30px; background: var(--red); color: #fff; font-weight: 700; letter-spacing: .2em; font-size: 14px; }
.rec-pill .rec-dot { background: #fff; }
.rec-hint { font-size: 16px; line-height: 1.35; text-align: center; padding: 0 12px; }
.rec-count { display: grid; justify-items: center; margin-top: 16px; }
.rec-count b { font-size: 120px; line-height: .9; color: var(--blue); }
.rec-count span { font-size: 13px; font-weight: 700; letter-spacing: .26em; color: var(--blue); }
.rec-trail { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.rec-trail i { width: 26px; height: 22px; background: var(--blue); border-radius: 50% 60% 45% 55%; }
.rec-trail i:nth-child(even) { rotate: 25deg; }
.rec-trail .last { background: var(--red); animation: blink 1.2s infinite; }
.rec-trail .ghost { background: none; box-shadow: inset 0 0 0 2px var(--blue); opacity: .5; }
.led-note { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.led-w { width: 28px; height: 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 10px #fff; }

/* =========================================================
   4 SPIELE
   ========================================================= */
.story { display: flex; gap: 4px; margin-bottom: -6px; }
.story i { flex: 1; height: 4px; border-radius: 4px; background: rgba(35,58,143,.2); }
.story i.on { background: var(--blue); }
.story-art { position: relative; height: 240px; margin-top: 8px; }
.story-art svg { position: absolute; left: 15px; top: 20px; width: 290px; height: 220px; }
/* Kletterpfote greift die Blob-Oberkante (Round-Blob: Kante bei 31 % / 8 %) */
.story-art img { position: absolute; width: 150px; left: 96px; top: 25px; transform-origin: 6% 6%; animation: hang 4s ease-in-out infinite; }
.story-no { font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--red-dark); }
.story-t { font-size: 22px; line-height: 1.25; color: var(--blue); font-weight: 700; margin-top: -6px; }
.story-nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.story-nav span { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.story-nav .btn { min-width: 150px; }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: -6px; }
.pick span { height: 72px; border-radius: 24px; background: var(--cream); display: grid; place-items: center; font-size: 30px; font-weight: 700; color: var(--blue); padding-top: 6px; grid-auto-flow: column; gap: 2px; justify-content: center; align-content: center; }
.pick .on { background: var(--blue); color: #fff; }
.pick-h span { padding-top: 0; }
.pick-h svg { width: 20px; height: 20px; color: var(--coral); }
.setup-ape { width: 130px; align-self: center; margin-top: 8px; }
.game-count { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; column-gap: 6px; margin-top: 18px; }
.game-count b { font-size: 120px; line-height: .9; color: var(--beige); }
.game-count > span { font-size: 40px; font-weight: 700; opacity: .5; }
.game-count small { grid-column: span 2; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--coral); display: flex; gap: 8px; justify-content: center; align-items: center; }
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; --aw: 120px; }
.players.p3 { grid-template-columns: repeat(3, 1fr); gap: 8px; --aw: 112px; }
.players.p4 { grid-template-columns: repeat(4, 1fr); gap: 6px; --aw: 110px; }
.pl { position: relative; border-radius: 24px; padding: 14px 14px 10px; background: var(--blue-2); display: grid; gap: 8px; }
.pl > b, .pl > .hearts { opacity: .6; }
.pl.on { background: var(--beige); color: var(--navy); }
.pl.on > b, .pl.on > .hearts { opacity: 1; }
.pl.out { opacity: .35; }
.pl b { font-size: 13px; letter-spacing: .14em; }
.p3 .pl, .p4 .pl { border-radius: 20px; padding: 12px 8px 8px; justify-items: center; gap: 6px; }
.p3 .pl b, .p4 .pl b { font-size: 11px; letter-spacing: .12em; }
.hearts { display: flex; gap: 4px; }
.hearts svg { width: 22px; height: 22px; color: var(--coral); }
.p3 .hearts svg, .p4 .hearts svg { width: 15px; height: 15px; }
.p4 .hearts { gap: 2px; }
.hearts svg.off { color: rgba(23,37,96,.2); }
.pl:not(.on) .hearts svg { color: #fff; }
.pl:not(.on) .hearts svg.off { color: rgba(255,255,255,.25); }
/* Affe hängt mit der Kletterpfote an der Unterkante der aktiven Karte (Pfote ≈ 6 % / 4 % im Bild) */
.pl-ape { position: absolute; width: var(--aw); max-width: none; left: calc(50% - var(--aw) * .095); top: calc(100% - var(--aw) * .09); transform-origin: 9.5% 8%; animation: hang 4s ease-in-out infinite; pointer-events: none; z-index: 3; }
/* letzte Karte: gespiegelt, damit der Affe im Screen bleibt */
.pl:last-child .pl-ape { transform: scaleX(-1); }
.pl-next { display: none; }

/* ---------- Spieler-Layout B · 2×2-Raster: Affe hängt IN der aktiven Karte an deren Oberkante ---------- */
[data-game="b"] .scr .players { grid-template-columns: 1fr 1fr; gap: 10px; --aw: 78px; }
[data-game="b"] .scr .players .pl { min-height: 100px; padding: 14px; justify-items: start; align-content: start; gap: 8px; border-radius: 24px; }
[data-game="b"] .scr .players .pl b { font-size: 14px; letter-spacing: .14em; }
[data-game="b"] .scr .players .hearts svg { width: 16px; height: 16px; }
[data-game="b"] .scr .players .pl-ape { left: auto; right: 6px; top: calc(var(--aw) * -.09); transform: none; transform-origin: 9.5% 8%; }

/* ---------- Spieler-Layout C · Fokus: aktiver Spieler groß, die anderen darunter in Zug-Reihenfolge ---------- */
[data-game="c"] .scr .players { grid-template-columns: repeat(3, 1fr); gap: 8px; --aw: 120px; }
[data-game="c"] .scr .players .pl { order: var(--o, 0); padding: 10px 8px 8px; justify-items: center; gap: 6px; border-radius: 20px; }
[data-game="c"] .scr .players .pl b { font-size: 11px; letter-spacing: .12em; }
[data-game="c"] .scr .players .hearts svg { width: 15px; height: 15px; }
[data-game="c"] .scr .players .pl.on { order: -1; grid-column: 1 / -1; margin-bottom: 128px; padding: 16px 18px 14px; justify-items: start; border-radius: 24px; }
[data-game="c"] .scr .players .pl.on b { font-size: 15px; letter-spacing: .14em; }
[data-game="c"] .scr .players .pl.on .hearts svg { width: 24px; height: 24px; }
[data-game="c"] .scr .players .pl-ape { left: calc(58% - var(--aw) * .095); transform: none; }
[data-game="c"] .scr .players .pl-next { display: block; order: 0; grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: #fff; opacity: .6; margin-bottom: -2px; }
.scr .players + .tip { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}
@media (max-width: 400px) {
  .scr { transform: scale(.9); transform-origin: top left; }
}

/* =========================================================
   PROTOTYP-MODUS (proto.js)
   ========================================================= */
.proto-start { margin-top: 24px; border: 0; font-family: inherit; cursor: pointer; }
.proto-open, .proto-open body { overflow: hidden; }
.proto {
  position: fixed; inset: 0; z-index: 100;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 16px 14px; color: #fff;
}
.proto[hidden] { display: none; }
.proto-bar { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 12px; }
.proto-bar img { width: 74px; }
.proto-name { font-size: 13px; letter-spacing: .16em; padding-top: 3px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-jump, .proto-btn {
  height: 40px; border: 0; border-radius: 30px; padding: 3px 16px 0;
  background: var(--blue-2); color: #fff; font: 700 12px/1 'Manjari', sans-serif; letter-spacing: .12em; cursor: pointer;
}
/* eigener Pfeil, damit er mit Abstand im Pill-Feld sitzt */
.proto-jump {
  -webkit-appearance: none; appearance: none; max-width: 190px; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
}
.proto-x { width: 40px; padding: 2px 0 0; font-size: 15px; }
.proto-stage { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.proto-device { width: calc(382px * var(--s, 1)); height: calc(662px * var(--s, 1)); position: relative; }
.proto-device .scr { position: absolute; left: 11px; top: 11px; transform: scale(var(--s, 1)); transform-origin: -11px -11px; max-width: none; }
.proto-device .proto-hot { cursor: pointer; }
.proto-in { animation: protoIn .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes protoIn { from { opacity: 0; translate: 18px 0; } }
.proto-flash .proto-hot { animation: protoHot .9s ease-out; }
@keyframes protoHot { 0%, 60% { outline: 3px solid var(--coral); outline-offset: 2px; } 100% { outline: 3px solid transparent; } }
.proto-hint { font-size: 12px; opacity: .6; text-align: center; max-width: 520px; }
@media (max-width: 560px) { .proto-bar img, .proto-hint { display: none; } }

/* Doku-Kopf: Prototyp-Button + Sprache */
.head-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.head-actions .proto-start { margin-top: 0; }
.doc-head .lang-switch { margin-top: 0; }
.doc-head .lang-switch span { color: #fff; opacity: .7; }
.doc-head .lang-switch button { background: var(--blue-2); color: #fff; }
.doc-head .lang-switch button.on { background: var(--red); }
.bar-r .chip:last-child { cursor: pointer; }