/* ---- Raum (3D-Canvas) ---- */
.raum-cv{position:absolute;inset:0;display:block}

/* ---- Backtesting: Das Netz ---- */
.bn{position:relative;height:520px;margin-bottom:14px;border-radius:16px;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:radial-gradient(70% 70% at 60% 62%,color-mix(in srgb,var(--act) 7%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--surface2) 94%,transparent),var(--surface))}
.bn::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,color-mix(in srgb,var(--text) 16%,transparent),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.bn-stage{position:absolute;inset:0;z-index:1;cursor:grab;touch-action:pan-y}
.bn-stage.grab{cursor:grabbing}
.bn-hd{position:relative;z-index:2;padding:22px 24px 0;pointer-events:none}
.bn-eb{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.bn-eb b{color:var(--text);font-weight:400}
.bn-figs{display:flex;gap:34px;margin-top:16px;flex-wrap:wrap}
.bn-figs span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bn-figs b{display:block;font-size:26px;font-weight:500;letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.bn-figs b.pos{color:var(--pos)}.bn-figs b.neg{color:var(--neg)}
.bn-figs small{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.bn-leg{position:absolute;left:24px;bottom:18px;z-index:2;display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--dim);pointer-events:none}
.bn-leg i{display:inline-block;width:14px;height:2px;border-radius:2px;vertical-align:middle;margin-right:7px}
.bn-leg i.r{background:var(--text);box-shadow:0 0 6px var(--text)}
.bn-leg i.f{background:var(--neg)}.bn-leg i.b{background:var(--pos)}
.bn-hint{position:absolute;right:20px;bottom:18px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);pointer-events:none}
@media (max-width:640px){
  .bn{height:560px}.bn-hd{padding:18px 16px 0}.bn-figs{gap:14px 22px}.bn-figs > div{min-width:40%}.bn-figs b{font-size:21px}
  .bn-leg{left:16px;right:16px;bottom:14px;gap:8px 14px}.bn-hint{display:none}
}

/* ---- Lab: Der Prüfstand ---- */
.lp{position:relative;height:500px;margin:0 0 14px;border-radius:16px;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:radial-gradient(70% 70% at 55% 65%,color-mix(in srgb,var(--act) 7%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--surface2) 94%,transparent),var(--surface))}
.lp::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,color-mix(in srgb,var(--text) 16%,transparent),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lp-stage{position:absolute;inset:0;z-index:1;cursor:grab;touch-action:pan-y}
.lp-stage.grab{cursor:grabbing}
.lp-hd{position:relative;z-index:2;padding:22px 24px 0;pointer-events:none}
.lp-eb{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.lp-eb b{color:var(--text);font-weight:400}
.lp-v{font-size:30px;font-weight:500;letter-spacing:-.035em;margin-top:12px}
.lp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lp-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);padding:5px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lp-chip b{font-family:var(--mono);font-weight:400;color:var(--text)}
.lp-chip i{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.lp-chip.ok i{background:var(--pos);box-shadow:0 0 6px var(--pos)}.lp-chip.no i{background:var(--neg);box-shadow:0 0 6px var(--neg)}
.lp-leg{position:absolute;left:24px;bottom:18px;z-index:2;display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--dim);pointer-events:none}
.lp-leg i{display:inline-block;width:14px;height:2px;border-radius:2px;vertical-align:middle;margin-right:7px}
.lp-leg i.s{background:var(--pos);box-shadow:0 0 6px var(--pos)}.lp-leg i.o{background:var(--act);opacity:.6}
.lp-leg i.e{background:var(--warn)}.lp-leg i.g{height:10px;width:2px;background:var(--act)}
.lp-hint{position:absolute;right:20px;bottom:18px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);pointer-events:none}
@media (max-width:640px){.lp{height:540px}.lp-hd{padding:18px 16px 0}.lp-v{font-size:24px}.lp-leg{left:16px;right:16px;bottom:14px;gap:8px 14px}.lp-hint{display:none}}

/* ---- v2: Glasscheiben ---- */
.bn-leg i.band{height:8px;background:color-mix(in srgb,var(--act) 30%,transparent);border:1px solid color-mix(in srgb,var(--act) 50%,transparent)}
.bn-leg i.dd{background:var(--neg)}
.bn-leg i.smp{background:var(--act);opacity:.45}
.lp-cmp{font-size:12.5px;color:var(--dim);margin-top:6px}
.lp-cmp b{font-family:var(--mono);font-weight:400}.lp-cmp b.pos{color:var(--pos)}.lp-cmp b.neg{color:var(--neg)}
.lp-chip em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);margin-left:2px}
.lp-leg i.z{height:8px;background:color-mix(in srgb,var(--pos) 25%,transparent);border:1px solid color-mix(in srgb,var(--pos) 55%,transparent)}
.bn{height:560px}
.lp{height:540px}
@media (max-width:640px){
  .bn,.lp{height:auto;display:flex;flex-direction:column}
  .bn-hd,.lp-hd{order:1}
  .bn-stage,.lp-stage{order:2;position:relative;inset:auto;height:250px;margin-top:2px}
  .bn-leg,.lp-leg{order:3;position:static;padding:4px 16px 16px}
  .bn-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px}.bn-figs > div{min-width:0}
  .bn-figs b{font-size:18px}.bn-figs small{display:none}
  .lp-chips{gap:6px}.lp-chip{font-size:11px;padding:4px 8px}
}

/* ---- v3: So liest du das ---- */
.raum-info{pointer-events:auto;margin-left:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  padding:4px 9px;border-radius:6px;border:1px solid color-mix(in srgb,var(--line-mid) 80%,transparent);background:color-mix(in srgb,var(--surface) 50%,transparent);cursor:pointer;transition:color .2s,border-color .2s}
.raum-info:hover,.raum-info[aria-expanded="true"]{color:var(--text);border-color:var(--text)}
.raum-explain{position:relative;z-index:3;margin:12px 24px 0;max-width:720px;font-size:12.5px;line-height:1.65;color:var(--muted);padding:12px 14px;border-radius:10px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (max-width:640px){.raum-explain{order:1;margin:10px 16px 0}.raum-info{display:inline-block;margin:8px 0 0}}