/* =====================================================================
   Migs Space – „Wummel-Express“ (V41): HUD, Steuerung, Räder, Depot, Rückblick (game/wummel-play.js)
   Alle Klassen mit Präfix wm-. Schriftgröße über --fs (JS: 1,25 % der Höhe, ≥ 12 px; 5K ≥ 24 px).
   Kein Spielknopf unter 52 px · touch-action:none · Glow-/Weltraum-Stil wie das übrige Migs Space.
   ===================================================================== */
.wm-root { position: relative; overflow: hidden; }
.wm-stage { position: absolute; inset: 0; overflow: hidden; background: #070818; color: #fff; outline: none;
  font-family: 'Fredoka', system-ui, sans-serif; font-size: var(--fs, 14px); line-height: 1.25;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
.wm-cv { position: absolute; left: 0; top: 0; display: block; }
.wm-stage [hidden] { display: none !important; }
.wm-hud { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.wm-hud button, .wm-hud .wm-fp, .wm-hud .wm-dmg, .wm-hud .wm-radio { pointer-events: auto; }

/* ---------- Oberleiste ---------- */
.wm-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: .8em; padding: .55em .9em 0; }
.wm-tl { display: flex; align-items: center; gap: .45em; flex: 0 0 auto; }
.wm-tc { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: .35em; min-width: 0; }
.wm-tr { flex: 0 0 auto; display: flex; align-items: center; gap: .5em; }
.wm-menubtn { width: 2.6em; height: 2.6em; min-width: 40px; min-height: 40px; border-radius: 50%; border: 1px solid rgba(130,150,255,.55); background: rgba(16,18,48,.75);
  color: #fff; font: inherit; font-size: 1.1em; cursor: pointer; }
.wm-netinfo { font: 600 .8em/1 ui-monospace, Consolas, monospace; color: #8fffd0; opacity: .8; }

.wm-ring { position: relative; width: 3.3em; height: 3.3em; }
.wm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wm-ring circle { fill: none; stroke-width: 3.6; }
.wm-ring .bg { stroke: rgba(255,255,255,.14); }
.wm-ring .fg { stroke: #7dfcff; stroke-linecap: round; transition: stroke-dasharray .25s; filter: drop-shadow(0 0 3px rgba(125,252,255,.6)); }
.wm-ring[data-k="bauch"] .fg { stroke: #b06cff; filter: drop-shadow(0 0 3px rgba(176,108,255,.7)); }
.wm-ring[data-k="herz"] .fg { stroke: #ff5fb8; }
.wm-ring[data-k="glow"] .fg { stroke: #ffd23f; }
.wm-ring.warn .fg { stroke: #ff4f6a; }
.wm-ring.warn { animation: wm-blink 1s steps(2, start) infinite; }
.wm-ring .ico { position: absolute; left: 0; right: 0; top: .42em; text-align: center; font-size: 1em; }
.wm-ring .val { position: absolute; left: 0; right: 0; bottom: .45em; text-align: center; font-weight: 700; font-size: .78em; }
.wm-tacho { position: relative; width: 4.6em; height: 3.1em; }
.wm-tacho svg { width: 100%; height: 100%; overflow: visible; }
.wm-tacho path { fill: none; stroke-width: 4.5; }
.wm-tacho .bg { stroke: rgba(255,255,255,.14); }
.wm-tacho .fg { stroke: #8fff7a; stroke-linecap: round; transition: stroke-dasharray .2s; }
.wm-tacho .zone { stroke: transparent; stroke-width: 7; }
.wm-tacho.appr .zone { stroke: rgba(143,255,120,.35); stroke-dasharray: 3 2; }
.wm-tacho.appr .fg { stroke: #ff8a4f; }
.wm-tacho.appr.ok .fg { stroke: #8fff7a; }
.wm-tacho .val { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-weight: 700; font-size: .8em; }
.wm-tacho .win { position: absolute; left: 0; right: 0; top: -1.1em; text-align: center; font-size: .75em; color: #ffd23f; font-weight: 700; }
.wm-waage { display: flex; flex-direction: column; align-items: center; gap: .1em; height: 3.4em; font-size: .9em; }
.wm-waage .s { color: #ffd23f; line-height: 1; } .wm-waage .m { color: #7fb8ff; line-height: 1; }
.wm-waage .bar { position: relative; width: .7em; flex: 1; border-radius: .4em; background: linear-gradient(#ffd23f33, #ffffff10 50%, #7fb8ff33); border: 1px solid rgba(255,255,255,.25); }
.wm-waage .bar i { position: absolute; left: -.2em; right: -.2em; height: 1px; background: rgba(255,255,255,.55); }
.wm-waage .m15.a { top: 35%; } .wm-waage .m15.b { top: 65%; }
.wm-waage .m20.a { top: 30%; background: #ff8a4f; } .wm-waage .m20.b { top: 70%; background: #ff8a4f; }
.wm-waage .mk { position: absolute; left: 50%; top: calc(50% + var(--u, 0) * 50%); width: 1.05em; height: 1.05em; margin: -.52em 0 0 -.52em; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff; transition: top .2s, left .2s; }
.wm-waage.warn .mk { background: #ffd23f; } .wm-waage.block .mk { background: #ff4f6a; box-shadow: 0 0 8px #ff4f6a; }
.wm-rot .wm-waage { flex-direction: row; height: auto; width: 4.6em; }
.wm-rot .wm-waage .bar { width: auto; height: .7em; flex: 1; background: linear-gradient(90deg, #ffd23f33, #ffffff10 50%, #7fb8ff33); }
.wm-rot .wm-waage .bar i { top: -.2em !important; bottom: -.2em; width: 1px; height: auto; left: auto; right: auto; }
.wm-rot .wm-waage .m15.a { left: 35%; } .wm-rot .wm-waage .m15.b { left: 65%; } .wm-rot .wm-waage .m20.a { left: 30%; } .wm-rot .wm-waage .m20.b { left: 70%; }
.wm-rot .wm-waage .mk { top: 50%; left: calc(50% + var(--u, 0) * 50%); }

/* Fahrplan-Leiste: Strecke + nächste 20 s */
.wm-fp { position: relative; width: min(46em, 100%); padding: .25em .6em .3em; border-radius: .9em; background: rgba(16,18,48,.78); border: 1px solid rgba(130,150,255,.35);
  box-shadow: 0 0 14px rgba(80,110,255,.25); cursor: pointer; }
.wm-fp .route { position: relative; height: .45em; border-radius: .3em; background: rgba(255,255,255,.12); margin: .25em .4em .2em; }
.wm-fp .prog { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .3em; background: linear-gradient(90deg, #4fe3ff, #b48cff); }
.wm-fp .wm-wu { position: absolute; top: 50%; transform: translate(-50%, -55%) scaleX(-1); font-size: 1.1em; line-height: 1; }
.wm-fp .stp { position: absolute; top: -.35em; transform: translateX(-50%); font-size: .62em; font-weight: 700; background: #ffd23f; color: #111; border-radius: .5em; padding: 0 .3em; }
.wm-fp .win { position: relative; height: 1.75em; margin: .1em .4em 0; border-top: 1px dashed rgba(255,255,255,.2); }
.wm-fp .ev { position: absolute; top: .1em; transform: translateX(-50%); font-size: 1em; line-height: 1; white-space: nowrap; transition: left .25s linear; }
.wm-fp .ev i { display: block; font-style: normal; font-size: .62em; text-align: center; font-weight: 700; color: #cfe6ff; }
.wm-fp .ev.st i { color: #ff8a8a; }
.wm-fp .lbl { font-size: .78em; text-align: center; color: #cfe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wm-crew { display: flex; gap: .3em; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.wm-chip { display: inline-flex; align-items: center; gap: .3em; height: 2.2em; min-height: 26px; padding: 0 .55em 0 .2em; border-radius: 1.2em; background: rgba(16,18,48,.72);
  border: 1px solid var(--c); font-size: .8em; white-space: nowrap; }
.wm-chip b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c); color: #111; }
.wm-chip.me { box-shadow: 0 0 8px var(--c); }
.wm-chip .nm { max-width: 8em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.wm-chip .sc { opacity: .65; }
.wm-chip.azubi { border-style: dashed; }

/* Schadensplan (PC 240 × 90, Handy 96 × 36) */
.wm-dmg { position: absolute; left: .9em; top: calc(3.9em + .6em); width: 17.5em; min-width: 150px; aspect-ratio: 240 / 90; cursor: pointer; }
.wm-dmg svg { width: 100%; height: 100%; overflow: visible; }
.wm-dmg .body { fill: rgba(42,32,88,.85); stroke: rgba(180,140,255,.55); stroke-width: 1.5; }
.wm-dmg .sec { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: var(--c); stroke-width: .8; stroke-opacity: .6; }
.wm-dmg .sec.hot { fill: rgba(255,79,106,.32); stroke: #ff4f6a; stroke-width: 1.6; animation: wm-blinkf 1s steps(2, start) infinite; }
.wm-dmg text { text-anchor: middle; font-family: inherit; font-weight: 700; }
.wm-dmg .ic { font-size: 14px; } .wm-dmg .sun { fill: #ffd23f; font-size: 11px; } .wm-dmg .moon { fill: #7fb8ff; font-size: 11px; }
.wm-dmg .bd circle { fill: #ff4f6a; } .wm-dmg .bd text { fill: #fff; font-size: 10px; }
.wm-dmg .me { fill: #fff; stroke: #111; stroke-width: 1; }
.wm-rot .wm-dmg { width: 6.5em; min-width: 60px; aspect-ratio: 90 / 240; }
.wm-rot .wm-dmg svg.rot { width: calc(100% * 240 / 90); height: calc(100% * 90 / 240); transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%); }

/* Gruppen-Tickets (rechts) */
.wm-tickets { position: absolute; right: .9em; top: 4.2em; display: flex; flex-direction: column; gap: .3em; align-items: flex-end; max-height: 60%; }
.wm-tk { display: flex; align-items: center; gap: .35em; padding: .25em .55em; border-radius: .8em; background: rgba(16,18,48,.8); border-left: .35em solid var(--c); font-size: .85em; white-space: nowrap; }
.wm-tk .sym { color: var(--c); font-size: 1.25em; line-height: 1; }
.wm-tk .ziel { min-width: 20px; font-weight: 700; font-size: 1.05em; padding: 0 .25em; border-radius: .4em; background: rgba(255,210,63,.18); }
.wm-tk .n { font-weight: 700; } .wm-tk .pref i { font-style: normal; margin-left: .2em; } .wm-tk .pref .ht { opacity: .8; }
.wm-tk .bub { font-size: 1.1em; } .wm-tk .hint { font-size: .8em; color: #ffd23f; }
.wm-tk.exit { box-shadow: 0 0 10px #8fff7a; border-left-color: #8fff7a; } .wm-tk.panic { box-shadow: 0 0 10px #ff4f6a; } .wm-tk.wait { opacity: .85; border-left-style: dashed; }
.wm-tk.more { border-left-color: #888; }

/* Telegraph (Bildmitte oben) */
.wm-tele { position: absolute; left: 50%; top: 7.4em; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4em; width: min(36em, 92%); }
.wm-tg { display: flex; align-items: center; gap: .7em; padding: .45em 1.1em .45em .5em; border-radius: 1.4em; background: rgba(40,8,24,.86); border: 2px solid #ff5a6e;
  box-shadow: 0 0 22px rgba(255,90,110,.45); font-size: 1.15em; }
.wm-tg.z { background: rgba(40,28,8,.86); border-color: #ffb04f; box-shadow: 0 0 16px rgba(255,176,79,.4); font-size: 1em; }
.wm-tg.d { background: rgba(8,30,40,.86); border-color: #7dfcff; } .wm-tg.h { background: rgba(8,40,24,.86); border-color: #8fff7a; font-size: 1em; }
.wm-tg .ring { flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#ffd23f calc(var(--p, 1) * 360deg), rgba(255,255,255,.12) 0); }
.wm-tg .ring b { display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 50%; background: #120a2c; font-size: 1.1em; }
.wm-tg .tx b { display: block; font-size: 1.05em; letter-spacing: .02em; }
.wm-tg .tx i { display: block; font-style: normal; font-size: .72em; color: #ffd9de; }
.wm-tg.now { animation: wm-pop .3s ease-out; }
.wm-tg.chip { padding: .2em .7em; font-size: .85em; border-width: 1px; }

/* Banner, Ticker, Funkzeile */
.wm-banners { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3em; width: 90%; text-align: center; }
.wm-bn { padding: .3em .9em; border-radius: 1em; background: rgba(16,18,48,.8); font-weight: 700; font-size: 1.2em; animation: wm-pop .35s ease-out; text-shadow: 0 0 10px rgba(0,0,0,.6); }
.wm-bn.big { font-size: 1.6em; color: #7dfcff; } .wm-bn.good { color: #8fff7a; } .wm-bn.warn { color: #ffb04f; } .wm-bn.boom { color: #ff5a6e; font-size: 1.7em; }
.wm-bn.fun { color: #ff7ad9; } .wm-bn.chain { color: #ffd23f; font-size: 2em; letter-spacing: .04em; } .wm-bn.shout { color: #fff; font-weight: 600; border: 1px solid #7dfcff; }
.wm-ticker { position: absolute; right: .9em; bottom: .7em; display: flex; flex-direction: column; align-items: flex-end; gap: .15em; max-width: 34%; font-size: .85em; }
.wm-ticker div { padding: .15em .55em; border-radius: .6em; background: rgba(16,18,48,.7); animation: wm-in .3s ease-out; }
.wm-radio { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); max-width: 78%; padding: .25em .7em; border-radius: .8em; background: rgba(16,18,48,.82);
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
.wm-radio.on { opacity: 1; }

/* eigener Kasten unten links: Helfer, Getragenes, Aktion-Vorschau */
.wm-mebox { position: absolute; left: .9em; bottom: .7em; display: flex; flex-direction: column; gap: .2em; font-size: .9em; max-width: 40%; }
.wm-mebox > div { padding: .2em .6em; border-radius: .6em; background: rgba(16,18,48,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-mebox .hl b { font-size: 1.2em; color: #8fffd0; } .wm-mebox .du { opacity: .75; font-size: .85em; } .wm-mebox .lost { color: #ff8a8a; }
.wm-mebox kbd, .wm-help kbd { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: .35em; background: #283090; border: 1px solid #6c7cff; font: inherit; font-size: .85em; text-align: center; }

/* Spur-Radar am Zügel */
.wm-radar { position: absolute; left: 50%; bottom: 1em; transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3em .6em;
  padding: .5em .8em; border-radius: 1em; background: rgba(16,18,48,.88); border: 1px solid #7dfcff; width: min(30em, 80%); }
.wm-radar .end { font-weight: 700; font-size: .85em; } .wm-radar .end.s { color: #ffd23f; } .wm-radar .end.m { color: #7fb8ff; }
.wm-radar .lanes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2em; }
.wm-radar .ln { position: relative; height: 2.4em; border-radius: .5em; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: .95em; }
.wm-radar .ln em { position: absolute; bottom: .05em; font-style: normal; font-size: .55em; opacity: .55; }
.wm-radar .ln i { font-style: normal; font-size: .65em; font-weight: 700; color: #ff8a8a; margin-left: .1em; }
.wm-radar .ln.tg { outline: 2px solid #8fff7a; } .wm-radar .ln.dg { background: rgba(255,79,106,.3); }
.wm-radar .wu { position: absolute; top: -.6em; left: calc(var(--sp) * 80% + 10%); transform: translateX(-50%) scaleX(-1); font-size: 1.1em; transition: left .15s linear; }
.wm-radar .info { grid-column: 1 / -1; text-align: center; font-size: .78em; color: #cfe6ff; }
.wm-radar .keys { grid-column: 1 / -1; text-align: center; font-size: .7em; opacity: .7; }
/* hochkant: Sonne links ↔ Mond rechts – Leiste bleibt waagrecht (passt zur Drehung) */

.wm-bigcount { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3.4em; font-weight: 700; color: #ffd23f; text-shadow: 0 0 18px #ff5a6e; }
.wm-new { animation: wm-new 1.5s ease-out; }
.wm-pulse { animation: wm-edge .5s steps(2, start) infinite; }

/* ---------- Handy (15.3): eine Oberleiste à 44 px, 3 Tickets, Funkzeile ---------- */
.wm-phone .wm-top { height: 44px; padding: 4px 8px; gap: 6px; align-items: center; }
.wm-phone .wm-ring { width: 28px; height: 28px; } .wm-phone .wm-ring .ico { display: none; } .wm-phone .wm-ring .val { bottom: 8px; font-size: 10px; }
.wm-phone .wm-tacho { width: 38px; height: 26px; } .wm-phone .wm-tacho .win { display: none; }
.wm-phone .wm-waage { height: 34px; font-size: 10px; } .wm-phone .wm-waage .s, .wm-phone .wm-waage .m { display: none; } .wm-phone.wm-rot .wm-waage { width: 46px; height: auto; }
.wm-phone .wm-tl { gap: 3px; } .wm-phone .wm-tc { min-width: 0; } .wm-phone .wm-netinfo { display: none; }
.wm-phone .wm-fp { width: 100%; padding: 2px 6px; } .wm-phone .wm-fp .lbl { font-size: 11px; } .wm-phone .wm-fp .win { height: 22px; }
.wm-phone .wm-crew, .wm-phone .wm-ticker { display: none; }
.wm-phone .wm-dmg { top: 50px; left: 8px; width: 96px; min-width: 96px; }
.wm-phone.wm-rot .wm-dmg { width: 36px; min-width: 36px; }
.wm-phone .wm-tickets { top: 50px; right: 8px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 72%; }
.wm-phone .wm-tk { height: 40px; padding: 0 4px; gap: 2px; font-size: 12px; border-radius: 10px; }
.wm-phone .wm-tele { top: 78px; width: 94%; } .wm-phone .wm-tg { max-height: 64px; font-size: 15px; padding: 4px 10px 4px 4px; }
.wm-phone .wm-tg .tx b { font-size: 28px; line-height: 1; } .wm-phone .wm-tg .tx i { font-size: 11px; }
.wm-phone .wm-banners { top: 34%; } .wm-phone .wm-bn { font-size: 16px; } .wm-phone .wm-bn.chain { font-size: 22px; }
.wm-phone .wm-mebox { bottom: auto; top: 92px; left: 8px; font-size: 12px; } .wm-phone.wm-rot .wm-mebox { top: 50px; left: 50px; }
.wm-phone .wm-radar { bottom: auto; top: 140px; font-size: 12px; }
.wm-touch .wm-mebox { bottom: auto; top: calc(3.9em + 7.5em); }
.wm-mini .wm-top, .wm-mini .wm-tickets, .wm-mini .wm-mebox, .wm-mini .wm-radar, .wm-mini .wm-ticker, .wm-mini .wm-banners { display: none; }
.wm-mini .wm-dmg { top: 4px; left: 4px; width: 96px; min-width: 96px; }

/* ---------- Touch-Steuerung (14.2 Handy) ---------- */
.wm-touchlay { position: absolute; inset: 0; pointer-events: none; }
.wm-joyzone { position: absolute; left: 0; top: 18%; bottom: 0; width: 45%; pointer-events: auto; touch-action: none; }
.wm-joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(125,252,255,.55); background: rgba(125,252,255,.08); pointer-events: none; }
.wm-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(125,252,255,.55); box-shadow: 0 0 12px #7dfcff; }
.wm-tbtn { position: absolute; min-width: 52px; min-height: 52px; border-radius: 50%; border: 2px solid rgba(130,150,255,.7); background: rgba(24,28,80,.72); color: #fff;
  display: grid; place-content: center; justify-items: center; font: inherit; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wm-tbtn .ico { font-size: 26px; line-height: 1; } .wm-tbtn .lb { font-size: 10px; opacity: .8; margin-top: 1px; }
.wm-tbtn.down { background: rgba(80,110,255,.85); transform: scale(.94); }
.wm-tbtn.dim { opacity: .65; }
.wm-t-aktion { border-color: #ffd23f; } .wm-t-aktion .ico { font-size: 34px; }
.wm-t-krallen { border-color: #ff7a7a; } .wm-tbtn.pulse { animation: wm-claw .5s ease-in-out infinite alternate; border-color: #ff4f6a; box-shadow: 0 0 16px #ff4f6a; }
.wm-t-fan .ico { font-size: 20px; } .wm-t-muschel { border-color: #7dfcff; }
.wm-ctx { border-color: #ffd23f; } .wm-ctx .ico { font-size: 40px; }

/* ---------- Räder ---------- */
.wm-wheelhost { position: absolute; inset: 0; pointer-events: none; }
.wm-wheel { position: absolute; width: 0; height: 0; pointer-events: auto; animation: wm-pop .18s ease-out; }
.wm-wheel::before { content: ''; position: absolute; left: -11em; top: -11em; width: 22em; height: 22em; border-radius: 50%; background: radial-gradient(rgba(10,10,40,.75), rgba(10,10,40,0) 70%); pointer-events: none; }
.wm-wsec { position: absolute; transform: translate(-50%, -50%); min-width: 56px; min-height: 56px; padding: .3em .5em; border-radius: 1.2em; border: 2px solid rgba(130,150,255,.6);
  background: rgba(24,28,80,.9); color: #fff; font: inherit; font-size: .9em; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; max-width: 9em; }
.wm-wsec .ico { font-size: 1.5em; line-height: 1.1; } .wm-wsec .lb { font-size: .75em; text-align: center; line-height: 1.1; }
.wm-wsec.sel { background: #3a44c0; border-color: #ffd23f; box-shadow: 0 0 14px #ffd23f; transform: translate(-50%, -50%) scale(1.08); }
.wm-wsec.off { opacity: .4; }
.wm-wcenter { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.wm-wcenter .wm-wsec { position: static; transform: none; }
.wm-wtitle { display: block; font-weight: 700; font-size: .85em; color: #7dfcff; text-shadow: 0 0 6px #000; white-space: nowrap; }
.wm-wclose { position: absolute; left: 7.2em; top: -8em; width: 2.2em; height: 2.2em; min-width: 40px; min-height: 40px; border-radius: 50%; border: 1px solid #888; background: rgba(16,18,48,.9); color: #fff; font: inherit; cursor: pointer; }

/* ---------- Fenster ---------- */
.wm-modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4,4,20,.55); pointer-events: auto; z-index: 5; }
.wm-mbox { width: min(40em, 94%); max-height: 92%; overflow: auto; padding: 1em 1.2em; border-radius: 1.2em; background: rgba(16,18,48,.97); border: 1px solid rgba(130,150,255,.45);
  box-shadow: 0 0 40px rgba(80,110,255,.35); -webkit-user-select: text; user-select: text; }
.wm-mbox h2 { margin: 0 0 .3em; font-size: 1.5em; color: #7dfcff; }
.wm-mbox h2.ok { color: #8fff7a; } .wm-mbox h2.bad { color: #ff5a6e; }
.wm-mbox .sub { opacity: .75; font-size: .85em; margin: .2em 0 .6em; }
.wm-mbox .row { display: flex; flex-wrap: wrap; gap: .5em; margin: .6em 0 .2em; align-items: center; }
.wm-mbox button { min-height: 44px; padding: .45em .9em; border-radius: .8em; border: 1px solid #6c7cff; background: #283090; color: #fff; font: inherit; cursor: pointer; }
.wm-mbox button:focus-visible, .wm-mbox button:focus { outline: 3px solid #ffd23f; outline-offset: 2px; }
.wm-mbox button.go { background: #12a86a; border-color: #8fffd0; font-weight: 700; } .wm-mbox button.bad { background: #6a1830; border-color: #ff7a8a; }
.wm-mbox button[disabled] { opacity: .45; cursor: default; }
.wm-mbox .opts { display: flex; flex-direction: column; gap: .35em; margin: .5em 0; }
.wm-opt { display: flex; align-items: center; gap: .5em; min-height: 32px; } .wm-opt small { opacity: .65; }
.wm-opt input[type="checkbox"] { width: 1.3em; height: 1.3em; } .wm-opt input[type="text"], .wm-opt select { font: inherit; padding: .2em .4em; border-radius: .5em; border: 1px solid #555a9a; background: #0d0f2a; color: #fff; }
.wm-help { width: 100%; border-collapse: collapse; font-size: .85em; } .wm-help td, .wm-help th { padding: .25em .4em; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.wm-fplist { list-style: none; margin: 0; padding: 0; } .wm-fplist li { display: flex; gap: .6em; padding: .3em 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.wm-fplist .t { width: 3em; text-align: right; font-weight: 700; color: #ffd23f; } .wm-fplist .i { width: 2em; text-align: center; }
.wm-text { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); display: flex; align-items: center; gap: .5em; padding: .5em .7em; border-radius: 1em;
  background: rgba(16,18,48,.95); border: 1px solid #7dfcff; width: min(30em, 92%); z-index: 6; }
.wm-text input { flex: 1; min-width: 0; font: inherit; padding: .4em .6em; border-radius: .6em; border: 1px solid #555a9a; background: #0d0f2a; color: #fff; -webkit-user-select: text; user-select: text; }
.wm-text button { min-height: 44px; font: inherit; padding: .3em .8em; border-radius: .7em; border: 1px solid #6c7cff; background: #283090; color: #fff; }

/* ---------- Depot ---------- */
.wm-dtop { align-items: center; }
.wm-dinfo { flex: 1; display: flex; flex-wrap: wrap; gap: .4em .9em; align-items: center; padding: .4em .8em; border-radius: 1em; background: rgba(16,18,48,.78); border: 1px solid rgba(130,150,255,.35); font-size: .9em; }
.wm-dinfo b { color: #7dfcff; } .wm-dinfo .on { color: #8fff7a; } .wm-dinfo .off { opacity: .7; } .wm-dinfo .code b { color: #ffd23f; letter-spacing: .1em; }
.wm-dbtn { min-height: 40px; padding: .3em .8em; border-radius: 1em; border: 1px solid #6c7cff; background: rgba(40,48,144,.85); color: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wm-dbtn.go { background: #12a86a; border-color: #8fffd0; } .wm-dbtn.wm-ready.on { background: #2f8f3a; border-color: #8fff7a; box-shadow: 0 0 10px #8fff7a; }
.wm-phone .wm-dbtn, .wm-phone .wm-invite { padding: .2em .5em; font-size: 12px; }
.wm-invite { min-height: 40px; padding: .3em .8em; border-radius: 1em; border: 1px solid #8fffd0; background: #12a86a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.wm-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: .4em; }
.wm-line { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; gap: .1em; }
.wm-line b { font-size: 1.3em; color: #ffd23f; } .wm-line span { font-size: .85em; } .wm-line i { font-style: normal; font-size: .72em; opacity: .7; }
.wm-line.sel { background: #3a44c0 !important; border-color: #ffd23f !important; box-shadow: 0 0 10px #ffd23f; }

/* ---------- Rückblick (Ersatz, D liefert das Panel) ---------- */
.wm-m-result { width: min(44em, 96%); }
.wm-m-result.has-panel .wm-rfallback { display: none; }
.wm-stars { font-size: 2.4em; color: #ffd23f; letter-spacing: .1em; text-shadow: 0 0 14px rgba(255,210,61,.6); } .wm-stars small { font-size: .35em; letter-spacing: 0; opacity: .8; }
.wm-zaehl { font-size: 1.15em; font-weight: 700; margin: .2em 0; }
.wm-urs { display: flex; flex-wrap: wrap; gap: .4em .9em; font-size: .9em; opacity: .9; }
.wm-groups { width: 100%; border-collapse: collapse; margin: .5em 0; font-size: .9em; } .wm-groups td { padding: .2em .4em; border-bottom: 1px solid rgba(255,255,255,.08); }
.wm-groups .st { color: #ffd23f; letter-spacing: .05em; } .wm-groups .st i { color: rgba(255,255,255,.25); font-style: normal; }
.wm-reviews .rv { margin: .3em 0; padding: .4em .6em; border-radius: .7em; background: rgba(255,255,255,.05); font-size: .9em; } .wm-reviews b { color: #ffd23f; } .wm-reviews i { opacity: .7; }
.wm-awards { display: flex; flex-wrap: wrap; gap: .3em .8em; font-size: .88em; margin: .4em 0; }
.wm-chainsum { color: #ffd23f; font-weight: 700; } .wm-pts { margin-top: .4em; font-size: .9em; } .wm-pts small { opacity: .6; } .wm-hook { color: #8fffd0; font-weight: 600; margin-top: .2em; }
.wm-votes .cd { margin-left: .3em; font-weight: 700; color: #ffd23f; } .wm-voted { font-size: .85em; opacity: .8; min-height: 1.2em; }

.wm-recap { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: auto; }
.wm-rcard { position: absolute; left: .9em; top: .9em; z-index: 4; max-width: min(30em, 42%); display: flex; flex-direction: column; gap: .3em; pointer-events: none; }
.wm-rcard .rv { padding: .35em .6em; border-radius: .7em; background: rgba(16,18,48,.85); font-size: .85em; } .wm-rcard .rv b { color: #ffd23f; } .wm-rcard .rv i { opacity: .7; }
.wm-rcard .keys { font-size: .72em; opacity: .65; padding: 0 .4em; }

/* ---------- Animationen (≤ 3 Hz, keine Vollbild-Blitze) ---------- */
@keyframes wm-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wm-banners .wm-bn, .wm-tele .wm-tg.now { transform-origin: center; }
@keyframes wm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wm-blink { 50% { opacity: .55; } }
@keyframes wm-blinkf { 50% { fill-opacity: .4; } }
@keyframes wm-claw { from { transform: scale(1); } to { transform: scale(1.15); } }
@keyframes wm-new { 0%, 60% { filter: drop-shadow(0 0 10px #ffd23f) brightness(1.35); transform: scale(1.12); } 100% { filter: none; transform: none; } }
@keyframes wm-edge { 50% { box-shadow: inset 0 0 0 6px rgba(255,90,110,.55); } }
@media (prefers-reduced-motion: reduce) {
  .wm-ring.warn, .wm-dmg .sec.hot, .wm-tbtn.pulse, .wm-pulse { animation: none; }
  .wm-bn, .wm-tg.now, .wm-wheel, .wm-new { animation: none; }
}
/* V41-Integration: Titel und Rückblick-Zeilen aus wummel-reviews.js */
.wm-rcard .ttl { padding: .35em .6em; border-radius: .7em; background: rgba(16,18,48,.9); font-weight: 700; color: #ffe9a8; }
.wm-title { font-size: 1.05em; font-weight: 700; color: #ffe9a8; margin: .2em 0 .4em; }
.wm-recapl { list-style: none; margin: .4em 0; padding: 0; display: flex; flex-direction: column; gap: .2em; font-size: .88em; }
.wm-recapl li { padding: .25em .55em; border-radius: .6em; background: rgba(255,255,255,.04); }
.wm-recapl li.k-chain { color: #ffb36b; } .wm-recapl li.k-award { color: #b9f2ff; } .wm-recapl li.k-fail, .wm-recapl li.k-failwhy { color: #ff9a9a; }

/* =====================================================================
   I2-Nachträge (Prüf-Runde): sichere Bereiche, kompakte Leiste in festen Zeilen, Schrift-Untergrenzen,
   große Schlagseite-Waage, Telegraph-Ausweichplatz, Depot-Leiste am Handy
   ===================================================================== */
.wm-stage { --st: env(safe-area-inset-top, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); }
.wm-safeprobe { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.wm-hud { top: var(--st); right: var(--sr); bottom: var(--sb); left: var(--sl); }
.wm-touchlay { top: var(--st); right: var(--sr); left: var(--sl); }
/* PC: kein HUD-Text unter .9em */
.wm-fp .stp, .wm-fp .ev i, .wm-fp .lbl, .wm-ring .val, .wm-tk, .wm-tg .tx i, .wm-tacho .val, .wm-tacho .win, .wm-ticker, .wm-mebox .du { font-size: .9em; }
.wm-fp .nx { display: none; }
/* Telegraph: Info-Karte grau, Ausweichplatz, wenn der eigene Mig darunter steht */
.wm-tg.i { background: rgba(26,28,52,.86); border-color: #8a90b8; box-shadow: none; font-size: .95em; }
.wm-tg.d.ok { border-color: #8fff7a; box-shadow: 0 0 16px rgba(143,255,122,.45); }
.wm-tgl { display: flex; flex-direction: column; align-items: center; gap: .4em; width: 100%; }
.wm-tele.alt { top: auto; bottom: 14%; }
/* große Quer-Waage (Doppel-Asteroid, Treiben, |Schlagseite| ≥ 10 %) */
.wm-bigwaage { display: flex; align-items: center; gap: .45em; padding: .3em .8em; border-radius: 1em; background: rgba(16,18,48,.88); border: 1px solid rgba(130,150,255,.5); font-size: 1.05em; }
.wm-bigwaage .s { color: #ffd23f; font-size: 1.3em; } .wm-bigwaage .m { color: #7fb8ff; font-size: 1.3em; }
.wm-bigwaage .bar { position: relative; width: 14em; height: .9em; border-radius: .5em; background: linear-gradient(90deg, #ffd23f44, #ffffff10 50%, #7fb8ff44); border: 1px solid rgba(255,255,255,.3); }
.wm-bigwaage .tg { position: absolute; top: -.35em; bottom: -.35em; width: 2px; background: #ff8a4f; } .wm-bigwaage .tg.a { left: 25%; } .wm-bigwaage .tg.b { left: 75%; }
.wm-bigwaage .goal { position: absolute; top: -.2em; bottom: -.2em; width: 25%; border-radius: .4em; background: rgba(143,255,122,.25); border: 1px dashed #8fff7a; }
.wm-bigwaage .goal.s { left: 0; } .wm-bigwaage .goal.m { right: 0; }
.wm-bigwaage .mk { position: absolute; top: 50%; left: calc(50% + var(--u, 0) * 50%); width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
.wm-bigwaage .mk.ok { background: #8fff7a; box-shadow: 0 0 12px #8fff7a; }
.wm-bigwaage .pc { font-weight: 700; min-width: 3.6em; } .wm-bigwaage .msg { font-weight: 700; color: #ffd23f; } .wm-bigwaage .msg.ok { color: #8fff7a; }
/* kompakt (min(B, H) < 560, auch ohne Touch): Zeile 1 (0–44 px) Ringe + einzeiliger Fahrplan · Zeile 2 (48–88 px) Schadensplan + Tickets ·
   Telegraph ab 92 px (höchstens 64 px) · Funkzeile über der Steuerzone */
.wm-phone .wm-ring .val { font-size: 12px; font-weight: 800; bottom: 7px; } .wm-phone .wm-tacho .val { font-size: 12px; }
.wm-phone .wm-tbtn .lb { font-size: 12px; }
.wm-phone .wm-fp { height: 36px; padding: 2px 8px; display: flex; align-items: center; gap: 6px; }
.wm-phone .wm-fp .route, .wm-phone .wm-fp .win { display: none; }
.wm-phone .wm-fp .lbl { flex: 1; font-size: 13px; font-weight: 700; text-align: left; }
.wm-phone .wm-fp .nx { display: inline-block; font-size: 13px; font-weight: 700; color: #ff8a8a; white-space: nowrap; }
.wm-phone .wm-tele { top: 92px; } .wm-phone .wm-tg { max-height: 64px; } .wm-phone .wm-tg .tx i { font-size: 12px; }
.wm-phone .wm-tele.alt { top: auto; bottom: calc(30% + 8px); }
.wm-phone .wm-bigwaage { font-size: 12px; } .wm-phone .wm-bigwaage .bar { width: 9em; }
.wm-phone .wm-dmg { top: 48px; } .wm-phone .wm-tickets { top: 48px; height: 40px; overflow: hidden; }
.wm-phone .wm-radio { top: auto; bottom: calc(30% + 60px); font-size: 12px; }
.wm-phone .wm-mebox { top: auto; bottom: calc(30% + 8px); left: 8px; }
.wm-phone .wm-radar { top: auto; bottom: calc(30% + 96px); }
.wm-phone.wm-teleon .wm-radio { opacity: 0; }
/* kompakt quer: Telegraph direkt unter der Leiste, Tickets als Spalte rechts über dem Knopf-Bogen */
.wm-phone:not(.wm-rot) .wm-tele { top: 48px; }
.wm-phone:not(.wm-rot) .wm-tickets { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; height: auto; max-height: calc(100% - 270px); top: 48px; }
.wm-phone:not(.wm-rot) .wm-radio { bottom: 8px; }
.wm-phone:not(.wm-rot) .wm-mebox { bottom: 8px; }
.wm-phone:not(.wm-touch) .wm-mebox, .wm-phone:not(.wm-touch) .wm-radio { bottom: 8px; }
.wm-phone:not(.wm-touch) .wm-tele.alt { bottom: 12%; }
/* Depot am Handy: Titel oben quer, Info einzeilig gekürzt, Icon-Knöpfe ≥ 44 px */
.wm-phone .wm-dtop { flex-direction: column; align-items: stretch; height: auto; gap: 4px; }
.wm-phone .wm-dinfo { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; padding: 4px 8px; }
.wm-phone .wm-dinfo > * { flex: 0 0 auto; }
.wm-phone .wm-dtop .wm-tr { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.wm-phone .wm-dbtn, .wm-phone .wm-invite { min-width: 44px; min-height: 44px; padding: 0 .4em; font-size: 20px; }
.wm-phone .wm-dbtn .lb, .wm-phone .wm-invite .lb { display: none; }
@media (prefers-reduced-motion: reduce) { .wm-bigwaage .mk { transition: none; } }
/* I2: Feinschliff nach Messung (rb-views): Telegraph kollidiert nicht mit Schadensplan/Tickets, HUD-Budget quer ≤ 18 %, Schrift ≥ 12 px */
.wm-tbtn .lb { font-size: 12px; }
.wm-dmg .sun, .wm-dmg .moon { font-size: 13px; } .wm-dmg .bd text { font-size: 12px; }
.wm-phone .wm-menubtn { min-width: 44px; min-height: 44px; }
.wm-phone.wm-rot .wm-tele { left: 52px; right: 8px; width: auto; transform: none; }
.wm-phone:not(.wm-rot) .wm-tele { width: min(24em, 46%); }
.wm-phone:not(.wm-rot) .wm-fp { width: min(100%, 22em); }
.wm-phone .wm-mebox { max-width: 34%; font-size: 12px; } .wm-phone:not(.wm-rot) .wm-mebox > div:nth-child(n+3) { display: none; }
.wm-phone .wm-mebox * { font-size: 12px !important; }

/* ---- Einbau V41 (game/app.js): Spielen-Seite „🤝 Koop“, Menü-Kachel, Ebenen über #wummel-root ---- */
.pl-tag-beta { letter-spacing: .12em; color: #05060f; border-color: transparent; background: linear-gradient(90deg, #7dfcff, #b98cff); box-shadow: 0 0 12px rgba(125, 252, 255, .45); }
.pl-k-wummel .pl-pv { background: radial-gradient(ellipse 60% 40% at 50% 46%, rgba(125, 252, 255, .32), transparent 70%),
  radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .5) 0 1px, transparent 2px), radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .45) 0 1px, transparent 2px),
  radial-gradient(circle at 62% 76%, rgba(255, 255, 255, .35) 0 1px, transparent 2px), radial-gradient(circle at 30% 70%, rgba(185, 140, 255, .5) 0 1px, transparent 2px),
  linear-gradient(160deg, #141a46, #05060f 72%); }
.pl-k-wummel .pl-pv-ico { animation: wmPlFloat 4.5s ease-in-out infinite; }
@keyframes wmPlFloat { 0%, 100% { translate: 0 -16%; rotate: -3deg; } 50% { translate: 0 -22%; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .pl-k-wummel .pl-pv-ico { animation: none; } }
.tile-wummel { --tc: #7dfcff; }
/* Während einer Fahrt liegt #wummel-root (z 900) über #ui (z 20): Hinweise (Toasts) und das Rückfrage-Fenster trotzdem zeigen */
body.wummel-on #ui { z-index: 950; }
body.wummel-on #ui > :not(#toasts):not(#modal-confirm.open) { visibility: hidden !important; pointer-events: none !important; }

/* =====================================================================
   „In 30 Sekunden verständlich“: Abfahrt-Leiste im Depot, „So geht’s“-Karte, Probefahrt-Blase + Erstes-Mal-Hinweise
   ===================================================================== */
/* Depot: großer LOSFAHREN-Knopf unten (PC mittig, Handy als Daumen-Leiste wie PLAY auf der Spielen-Seite) */
.wm-dbar { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); display: flex; align-items: stretch; gap: .7em;
  pointer-events: auto; z-index: 3; max-width: calc(100% - 32px); }
.wm-dgo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  min-width: clamp(250px, 21em, 460px); min-height: 72px; padding: .35em 1.6em; border-radius: 22px; cursor: pointer;
  border: 2px solid #ffe9a0; border-bottom: 6px solid #b5650a; background: linear-gradient(180deg, #ffe066, #ffad1f); color: #2a1400;
  font: inherit; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.wm-dgo .l { font-size: clamp(24px, 2.1em, 48px); font-weight: 800; letter-spacing: .03em; line-height: 1.05; white-space: nowrap; }
.wm-dgo .s { font-size: clamp(12px, .85em, 22px); font-weight: 600; opacity: .85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-dgo:hover { filter: brightness(1.06); } .wm-dgo:active { transform: translateY(2px); border-bottom-width: 4px; }
.wm-dgo:focus-visible { outline: 3px solid #7dfcff; outline-offset: 3px; }
.wm-dgo::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 28px rgba(255,196,50,.75); opacity: .3; animation: wm-goglow 2.2s ease-in-out infinite; }
@keyframes wm-goglow { 50% { opacity: .9; } }
.wm-dready { border-color: #b8c2ff; border-bottom-color: #2b2f8a; background: linear-gradient(180deg, #8ea0ff, #4b5bd6); color: #fff; }
.wm-dready.on { border-color: #c9ffd0; border-bottom-color: #1d6b2c; background: linear-gradient(180deg, #8fff7a, #2fae4a); color: #06200b; }
.wm-dready::after { display: none; }
.wm-dalt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; width: 5.2em; min-width: 64px; min-height: 72px;
  border-radius: 20px; border: 1px solid #6c7cff; background: rgba(40,48,144,.92); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.wm-dalt .i { font-size: 1.6em; line-height: 1; } .wm-dalt .l { font-size: .85em; }
.wm-phone .wm-dbar { left: 0; right: 0; bottom: 0; transform: none; max-width: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(16,18,48,.94); border-top: 1px solid rgba(130,150,255,.45); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 28px rgba(0,0,0,.5); }
.wm-phone .wm-dgo { flex: 1 1 auto; min-width: 0; min-height: 66px; padding: 6px 12px; }
.wm-phone .wm-dgo .l { font-size: 26px; } .wm-phone .wm-dgo .s { font-size: 12px; }
.wm-phone .wm-dalt { width: 64px; min-height: 66px; font-size: 13px; }
/* Handy im Depot: Spielknöpfe und Joystick-Zone rücken über die Leiste */
.wm-touchlay.wm-hasbar .wm-tbtn { margin-bottom: 92px; }
.wm-touchlay.wm-hasbar .wm-joyzone { bottom: 92px; }
.wm-line.tut { grid-column: 1 / -1; background: #1f6e4a !important; border-color: #8fffd0 !important; }
.wm-line.tut b { font-size: 1.5em; }
/* „So geht’s“ */
.wm-m-howto { position: relative; text-align: center; width: min(32em, 94%); }
.wm-mbox .wm-x { position: absolute; top: .45em; right: .45em; min-height: 40px; width: 40px; padding: 0; border-radius: 50%; background: rgba(40,48,144,.6); }
.wm-howart { display: flex; justify-content: center; align-items: flex-end; gap: .35em; font-size: 2.2em; line-height: 1; margin: .1em 0 .3em; }
.wm-howart .w { font-size: 1.6em; } .wm-howart .c { font-size: .7em; margin-left: -.9em; margin-bottom: .55em; } .wm-howart .a { color: #ffd23f; font-size: .8em; }
.wm-howto { list-style: none; margin: .4em 0 .8em; padding: 0; display: flex; flex-direction: column; gap: .45em; text-align: left; }
.wm-howto li { display: flex; align-items: center; gap: .6em; padding: .45em .7em; border-radius: .9em; background: rgba(40,48,144,.45); font-size: 1.12em; font-weight: 600; }
.wm-howto .i { font-size: 1.5em; flex: 0 0 auto; }
.wm-howbtns { justify-content: center; }
.wm-mbox .wm-howbtns button.go { display: flex; flex-direction: column; align-items: center; font-size: 1.15em; padding: .5em 1.2em; }
.wm-howbtns button small { font-size: .7em; font-weight: 600; opacity: .85; }
/* Probefahrt-/Hinweis-Blase */
.wm-tut { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 11%; width: max-content; max-width: min(36em, calc(100% - 32px)); z-index: 2;
  padding: .55em 1.1em .6em; border-radius: 1.1em; background: rgba(12,14,40,.94); border: 2px solid #ffd23f; box-shadow: 0 0 0 4px rgba(255,210,63,.18), 0 10px 30px rgba(0,0,0,.55);
  text-align: center; animation: wm-in .3s ease-out; }
.wm-tut .hd { font-size: .78em; font-weight: 700; color: #ffd23f; letter-spacing: .03em; opacity: .95; }
.wm-tut .tx { display: flex; align-items: center; justify-content: center; gap: .45em; margin-top: .15em; }
.wm-tut .tx .ic { font-size: 1.7em; line-height: 1; } .wm-tut .tx b { font-size: 1.3em; line-height: 1.2; }
.wm-tut .sb { font-size: .85em; opacity: .85; margin-top: .2em; }
.wm-tut .ky { margin-top: .35em; display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .7em; font-weight: 600; }
.wm-tut kbd { display: inline-block; min-width: 1.6em; padding: .05em .45em; border-radius: .4em; background: #ffd23f; color: #241600; border: 1px solid #fff2b8; border-bottom-width: 3px;
  font: inherit; font-weight: 800; text-align: center; }
.wm-tut .dots { display: flex; justify-content: center; gap: .3em; margin-top: .45em; }
.wm-tut .dots i { width: .6em; height: .6em; border-radius: 50%; background: rgba(255,255,255,.22); }
.wm-tut .dots i.on { background: #8fff7a; } .wm-tut .dots i.cur { background: #ffd23f; box-shadow: 0 0 6px #ffd23f; }
.wm-tut.ok { border-color: #8fff7a; box-shadow: 0 0 0 4px rgba(143,255,122,.2), 0 10px 30px rgba(0,0,0,.55); }
.wm-tut.ok .tx b { color: #8fff7a; font-size: 1.7em; } .wm-tut.ok .tx .ic { color: #8fff7a; }
.wm-tut.jit { border-color: #7dfcff; box-shadow: 0 0 0 4px rgba(125,252,255,.15), 0 10px 30px rgba(0,0,0,.55); }
.wm-tut.jit .hd { color: #7dfcff; } .wm-tut.jit .tx b { font-size: 1.1em; }
.wm-tut.done { border-color: #8fff7a; }
.wm-phone .wm-tut { top: 92px; bottom: auto; font-size: 13px; padding: 6px 12px 8px; }
.wm-phone.wm-teleon .wm-tut.jit { top: 164px; }
.wm-phone .wm-tut .tx b { font-size: 16px; } .wm-phone .wm-tut.ok .tx b { font-size: 20px; } .wm-phone .wm-tut .tx .ic { font-size: 22px; }
/* hervorgehobener Handy-Knopf / Joystick-Zone (Probefahrt) */
.wm-tbtn.wm-tutglow { border-color: #ffd23f !important; box-shadow: 0 0 0 4px rgba(255,210,63,.35), 0 0 22px #ffd23f; animation: wm-tutb 1s ease-in-out infinite alternate; }
@keyframes wm-tutb { to { box-shadow: 0 0 0 9px rgba(255,210,63,.18), 0 0 30px #ffd23f; } }
.wm-joyzone.wm-tutglow::after { content: "👆"; position: absolute; left: 40px; bottom: 60px; width: 112px; height: 112px; display: grid; place-items: center; font-size: 34px;
  border-radius: 50%; border: 3px dashed #ffd23f; background: rgba(255,210,63,.1); }
/* Probefahrt geschafft */
.wm-tutres { text-align: center; }
.wm-tutres .big { font-size: 3em; line-height: 1; }
.wm-tutres .ready { font-size: 1.35em; font-weight: 800; color: #ffd23f; margin: .5em 0 .2em; }
.wm-learned { list-style: none; padding: 0; margin: .3em 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35em; }
.wm-learned li { padding: .2em .6em; border-radius: 1em; background: rgba(47,174,74,.25); border: 1px solid rgba(143,255,122,.5); font-weight: 600; }
.wm-learned li span { margin-right: .3em; }
.wm-m-result .wm-votes { justify-content: center; }
/* Hilfe: Rest eingeklappt */
.wm-more { margin-top: .5em; }
.wm-more summary { cursor: pointer; font-weight: 700; color: #7dfcff; padding: .3em 0; }
@media (prefers-reduced-motion: reduce) {
  .wm-dgo::after { animation: none; opacity: .55; }
  .wm-tut { animation: none; }
  .wm-tbtn.wm-tutglow { animation: none; box-shadow: 0 0 0 6px rgba(255,210,63,.45), 0 0 18px #ffd23f; }
}
.wm-tut.alt { top: 11.5em; bottom: auto; }
.wm-phone .wm-tut.alt, .wm-phone.wm-teleon .wm-tut.jit.alt { top: auto; bottom: 36%; }