/* KInstinkt – Gestaltung nach TOOL-STIL.md (schule-kleinoeder.de). Block „Grundlagen“ unverändert aus tool-vorlage.html. */
/* ================================================================
   Grundlagen – identisch in allen Werkzeugen (nicht ändern)
   ================================================================ */
:root{
  /* Flächen und Text */
  --grund:#faf8f4; --flaeche:#f3efe7; --karte:#ffffff;
  --text:#22262b; --leise:#5f656c; --linie:#e2ddd3;
  /* Fachfarben */
  --inf:#1e5175; --inf-hell:#e8eef3;
  --wr:#9a4423;  --wr-hell:#f6e9e2;
  --akzent:#c8643b;                       /* Hervorhebung, nur für Flächen/Grafik und große Schrift */
  /* Rückmeldungen */
  --richtig:#2f7a4f; --richtig-hell:#e6f2ea;
  --falsch:#b3261e;  --falsch-hell:#fbe9e7;
  --hinweis:#8a6100; --hinweis-hell:#fbf3dc;
  /* Datenfarben für Diagramme, Kategorien, Markierungen – in dieser Reihenfolge */
  --d1:#1e5175; --d2:#c8643b; --d3:#2f7a4f; --d4:#7a4fa0; --d5:#b08a1e; --d6:#2a8a96;
  /* Schrift */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* Formen */
  --r-klein:6px; --r:10px; --r-rund:999px;
  --schatten:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
  --abstand:1rem;
}
:root[data-thema="dunkel"]{
  --grund:#16191c; --flaeche:#1c2024; --karte:#21262b;
  --text:#e8e5df; --leise:#a3a9b0; --linie:#363c43;
  --inf:#8db9d9; --inf-hell:#1f2d38;
  --wr:#e3997a;  --wr-hell:#3a261d;
  --akzent:#e08a62;
  --richtig:#7cc59a; --richtig-hell:#1c3226;
  --falsch:#f08a80;  --falsch-hell:#3a1f1c;
  --hinweis:#e2c06a; --hinweis-hell:#352c14;
  --d1:#8db9d9; --d2:#e08a62; --d3:#7cc59a; --d4:#b99be0; --d5:#e2c06a; --d6:#6cc3cc;
  --schatten:none;
}
:root[data-fach="informatik"]{ --fach:var(--inf); --fach-hell:var(--inf-hell); }
:root[data-fach="wr"]        { --fach:var(--wr);  --fach-hell:var(--wr-hell); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.tafel{font-size:125%}
body{margin:0;background:var(--grund);color:var(--text);font:1rem/1.55 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:1.5rem} h2{font-size:1.35rem} h3{font-size:1.1rem}
a{color:var(--fach);text-underline-offset:.2em}
code,kbd,.mono{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:3px solid var(--fach);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}

/* Kopfleiste */
.kopf{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1.25rem;border-bottom:1px solid var(--linie);background:var(--karte)}
.kopf .heim{font-family:var(--serif);color:var(--leise);text-decoration:none;font-size:.95rem;white-space:nowrap}
.kopf .heim:hover{color:var(--fach)}
.kopf .name{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.kopf .name small{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fach);font-weight:600}
.kopf .name strong{font-family:var(--serif);font-weight:400;font-size:1.35rem}
.kopf .schalter{display:flex;gap:.4rem}

/* Seitenrahmen */
main{max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.fuss{max-width:72rem;margin:0 auto;padding:1rem 1.25rem 2rem;border-top:1px solid var(--linie);color:var(--leise);font-size:.85rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.fuss a{color:inherit}

/* Bausteine */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--schatten)}
.knopf{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.45rem 1rem;border-radius:var(--r-klein);border:1px solid var(--fach);background:var(--fach);color:#fff;font-weight:600;cursor:pointer;text-decoration:none}
:root[data-thema="dunkel"] .knopf:not(.zweit):not(.leise){color:#111}
.knopf:hover{filter:brightness(1.08)}
.knopf.zweit{background:transparent;color:var(--fach)}
.knopf.leise{background:transparent;border-color:var(--linie);color:var(--text);font-weight:400}
.knopf[aria-pressed="true"]{background:var(--fach-hell);border-color:var(--fach);color:var(--fach);font-weight:600}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-block;padding:.1rem .55rem;border-radius:var(--r-rund);background:var(--fach-hell);color:var(--fach);font-size:.8rem;font-weight:600}
.kasten{border-radius:var(--r-klein);padding:.7rem 1rem;border-left:4px solid;margin:.8rem 0}
.kasten>b:first-child{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem}
.kasten.info{background:var(--fach-hell);border-color:var(--fach)}
.kasten.aufgabe{background:var(--flaeche);border-color:var(--fach)}
.kasten.richtig{background:var(--richtig-hell);border-color:var(--richtig)}
.kasten.falsch{background:var(--falsch-hell);border-color:var(--falsch)}
.kasten.hinweis{background:var(--hinweis-hell);border-color:var(--hinweis)}
input[type=text],input[type=number],select,textarea{min-height:2.5rem;padding:.4rem .6rem;border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--karte)}
table{border-collapse:collapse;background:var(--karte)}
th,td{border:1px solid var(--linie);padding:.45rem .7rem;text-align:left}
th{background:var(--flaeche);font-weight:600}
.markiert{background:var(--fach-hell);outline:2px solid var(--fach);outline-offset:-2px}
.tafel-aus{} html.tafel .tafel-aus{display:none}

@media (max-width:600px){
  .kopf{padding:.6rem 1rem} main{padding:1rem 1rem 2rem}
  .kopf .heim span{display:none}
}
@media print{
  .kopf .schalter,.knopf{display:none}
  body{background:#fff}
}
/* ================================================================
   Ab hier: Regeln dieses Werkzeugs (KInstinkt)
   ================================================================ */
/* Szenariofarbe – nur für Anzeigen im Spielfeld (wird von app.js gesetzt) */
:root { --szene: #d9502a; --szene-rgb: 217, 80, 42; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf: Werkzeugname mit Neuron-I, Szenario-Auswahl */
.kopf .name strong.logo { display: inline-flex; align-items: baseline; }
.kopf .logo .neuron-i { height: .95em; width: .42em; color: var(--fach); overflow: visible; margin: 0 .03em; }
.kopf .schalter { flex-wrap: wrap; align-items: center; }
.szenario { display: inline-flex; align-items: center; gap: .4rem; color: var(--leise); font-size: .9rem; }

main h1 { margin-top: .25rem; }
.lead { color: var(--leise); margin: 0 0 1rem; max-width: 62ch; }
.hint { color: var(--leise); margin: 0 0 .75rem; font-size: .95rem; }
.hint.small { font-size: .875rem; margin: .5rem 0 0; }
.pos { color: var(--fach); }
.neg { color: var(--leise); }

/* Modi */
.modes { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Steuerung kompakt in einer Zeile: Modi | Level – damit die Bühne am Beamer im ersten Bildschirm liegt */
.steuerung { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .75rem; }
.panel.levelbar { margin: 0; }
.panel.levelbar.hidden { display: none; }
.worum { margin: -.25rem 0 .75rem; color: var(--leise); border: 0; padding: 0; max-width: 46rem; }
.worum summary { cursor: pointer; font-size: .9rem; display: block; list-style: none; border: 0; padding: .1rem 0; color: var(--fach); }
.worum summary::-webkit-details-marker { display: none; }
.worum summary::before { content: ""; display: inline-block; width: .45em; height: .45em; margin: 0 .55em .12em .1em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.worum[open] > summary::before { transform: rotate(45deg); margin-bottom: .25em; }
.worum summary:hover { text-decoration: underline; }
.worum[open] { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-klein); padding: .4rem .8rem .6rem; }
.worum .lead { margin: .3rem 0 0; font-size: .95rem; line-height: 1.5; }
.knopf.mode.active { background: var(--fach-hell); border-color: var(--fach); color: var(--fach); font-weight: 600; }

.panel { margin-bottom: var(--abstand); }
.panel h2 { margin-bottom: .25rem; }

/* Level-Auswahl */
.levels { display: flex; flex-wrap: wrap; gap: .4rem; }
.lvl { display: inline-flex; align-items: baseline; gap: .35rem; text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-klein);
  padding: .35rem .7rem; cursor: pointer; min-height: 2.5rem; color: var(--text); }
.lvl:hover { border-color: var(--fach); }
.lvl b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--leise); }
.lvl small { color: var(--leise); font-size: .8125rem; }
.lvl.active { background: var(--fach-hell); outline: 2px solid var(--fach); outline-offset: -2px; border-color: var(--fach); }
.lvl.active b { color: var(--fach); }

/* Sinne als Chips zum Ankreuzen */
.sensors { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.sensor { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .25rem .75rem; border: 1px solid var(--linie);
  border-radius: var(--r-rund); cursor: pointer; font-family: var(--mono); font-size: .875rem; user-select: none; background: var(--karte); color: var(--leise); }
.sensor input { accent-color: var(--fach); margin: 0; width: 1.1rem; height: 1.1rem; }
.sensor.on { border-color: var(--fach); color: var(--fach); background: var(--fach-hell); font-weight: 600; }
.sensor.fixed { opacity: .75; cursor: default; }

.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; margin-top: 1rem; }
.gen { color: var(--leise); margin-left: auto; font-family: var(--mono); font-size: .9rem; }
.chart { width: 100%; height: 120px; display: block; margin-top: .75rem; }

/* Bühne: Spielfeld und Netz */
.stage { margin-bottom: var(--abstand); }
.title { font-family: var(--serif); font-size: 1.35rem; margin: .75rem 0 .5rem; text-align: center; }
.title .n { color: var(--fach); }
.title .of { color: var(--leise); }
.net { width: 100%; display: block; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); }
.brain-head { display: flex; align-items: center; gap: .45rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fach); font-weight: 600; margin: 0 0 .4rem 2px; }
/* dieselbe Markierung wie das beobachtete Tier im Spielfeld */
.brain-head .ring { width: .95rem; height: .95rem; border-radius: 50%; border: 2.5px solid var(--szene); flex: none; }
body.mode-build .brain-head .ring { display: none; }

.tank-wrap { position: relative; }
.tank { width: 100%; display: block; aspect-ratio: 3 / 2; background: var(--flaeche); border-radius: var(--r); border: 1px solid var(--linie); cursor: pointer; }
/* Anzeigen im Spielfeld: hier darf die Szenariofarbe vorkommen */
.hud { position: absolute; top: .6rem; right: .75rem; text-align: right; pointer-events: none;
  background: rgba(255, 255, 255, .9); color: #22262b; border-radius: var(--r-klein); padding: .35rem .75rem; }
.hud .count { font-family: var(--serif); font-size: 1.6rem; color: #5f656c; line-height: 1.1; }
.hud .count #left { color: var(--szene); }
.hud .sub { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.hud .time { font-family: var(--mono); font-size: .8125rem; color: #5f656c; }
.timebar { position: absolute; left: .75rem; right: .75rem; bottom: .5rem; height: 4px; background: rgba(255, 255, 255, .6); border-radius: 2px; overflow: hidden; }
.timebar div { height: 100%; width: 0; background: var(--szene); }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: color-mix(in srgb, var(--grund) 60%, transparent); border-radius: var(--r); }
.overlay .card { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem 1.25rem; text-align: center; max-width: 26rem; box-shadow: var(--schatten); }
.overlay .big { font-family: var(--serif); font-size: 1.35rem; margin-bottom: .25rem; }

.controls { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.speed { margin-left: auto; color: var(--leise); display: flex; gap: .4rem; align-items: center; }
.explain { margin: .75rem 2px 0; }
.explain:empty { display: none; }

/* Ergebnisse */
.results { display: grid; gap: .4rem; }
.res { display: grid; grid-template-columns: 15rem 1fr 4.5rem; gap: .75rem; align-items: center; font-size: .9375rem; }
.res .bar { height: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-klein); overflow: hidden; }
.res .bar div { height: 100%; background: var(--fach); }
.res .num { text-align: right; font-family: var(--mono); font-size: .875rem; color: var(--leise); }
@media (max-width: 520px) { .res { grid-template-columns: 6.5rem 1fr 3.5rem; } }

.info ol { padding-left: 1.2em; margin: .25rem 0 .6em; }
.info li { margin-bottom: .4em; }
.info p { margin: 0; }

/* Tooltip */
.net, .chart { cursor: help; }
.tip { position: fixed; z-index: 10; max-width: 18rem; pointer-events: none; background: var(--text); color: var(--grund);
  font-size: .875rem; line-height: 1.4; padding: .45rem .7rem; border-radius: var(--r-klein); }
.tip b { color: var(--grund); }
.tip .muted { opacity: .75; }

/* Expertenmodus */
.expert-only { display: none; }
body.expert .expert-only { display: block; }
.calc { margin-top: .75rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); padding: .75rem 1rem; box-shadow: var(--schatten); }
.calc-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.calc-head b { margin-right: auto; font-family: var(--serif); font-weight: 400; font-size: 1.1rem; }
.calc table { width: auto; min-width: 60%; font-size: .875rem; }
.calc td, .calc th { padding: .25rem .5rem; text-align: right; white-space: nowrap; }
.calc td { font-family: var(--mono); }
.calc td:first-child, .calc th:first-child { text-align: left; }
.calc tr.sum td { font-weight: 700; }
.calc tr.zero td { color: var(--leise); }
.calc .p { color: var(--fach); }
.calc .n { color: var(--leise); }
.calc .res-line { margin: .5rem 0 0; }
.calc .res-line b { color: var(--fach); }
.calc .why { color: var(--leise); font-size: .875rem; margin: .25rem 0 0; }
.calc-scroll { overflow-x: auto; }
.calc { container-type: inline-size; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem 1.5rem; }
.calc-big { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; color: var(--fach); margin-top: .5rem; }
.calc-side .res-line { margin-top: .25rem; }
@container (min-width: 460px) {
  .calc-grid { grid-template-columns: auto minmax(130px, 1fr); align-items: center; gap: .25rem 1.25rem; }
  .calc-grid .why { grid-column: 1 / -1; border-top: 1px solid var(--linie); padding-top: .4rem; }
  .calc-side { border-left: 1px solid var(--linie); padding-left: 1rem; }
  .calc-big { margin-top: 0; }
}

/* Anordnung: Spielfeld und Netz nebeneinander (Desktop), untereinander (Handy) */
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); align-items: start; }
.col-sim, .col-brain { min-width: 0; }
.col-brain { order: -1; }
@media (min-width: 900px) {
  .stage-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; }
  .col-brain { order: 0; }
  .tank-wrap { width: min(100%, calc((100vh - 150px) * 1.5)); }
  .col-sim .controls, .col-sim .explain { max-width: min(100%, calc((100vh - 150px) * 1.5)); }
  .title { text-align: left; }
}
.col-brain > .calc, .col-brain > .build-editor { margin-top: .75rem; }
/* Spielfeld bleibt sichtbar, während man rechts Regler bewegt oder den Rechenweg liest */
@media (min-width: 900px) { .col-sim { position: sticky; top: .5rem; } }
@media (max-width: 899px) { .col-brain { order: 0; } }
/* Ergebnisse direkt unter dem Spielfeld */
.ergebnisse { margin-top: .75rem; }
.ergebnisse-kopf { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fach); font-weight: 600; margin-bottom: .3rem; }
.ergebnisse-kopf .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .4rem; }
.ergebnisse .res { grid-template-columns: 13rem 1fr 4.5rem; }
@media (max-width: 520px) { .ergebnisse .res { grid-template-columns: 7rem 1fr 3.5rem; } }
/* Testwelt eingeschaltet: deutlicher Hinweis am Spielfeld */
body.testwelt .tank { outline: 3px dashed var(--hinweis); outline-offset: 3px; }
.tw-badge { display: none; position: absolute; top: .6rem; left: .75rem; pointer-events: none; background: var(--hinweis); color: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--r-klein); }
body.testwelt .tw-badge { display: block; }
.tw-info { display: none; margin: .4rem 0 0; padding: .45rem .7rem; font-size: .875rem; line-height: 1.45;
  border-left: 3px solid var(--hinweis); background: var(--karte); border-radius: 0 var(--r-klein) var(--r-klein) 0; }
body.testwelt .tw-info { display: block; }
#testweltBtn[aria-pressed="true"] { border-color: var(--hinweis); color: var(--hinweis); font-weight: 600; }

/* Gehirn-Baukasten */
.build-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: start; margin-bottom: .75rem; }
.build-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fach); font-weight: 600; padding-top: .7rem; }
@media (max-width: 560px) { .build-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; } .build-label { padding-top: 0; } }
.preset { flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
.preset small { display: block; color: var(--leise); font-size: .8125rem; font-weight: 400; }
.compare { margin: .25rem 0 .75rem; display: grid; gap: .4rem; max-width: 40rem; }
body:not(.mode-build) .compare { display: none; }
.col-sim .compare { margin-top: .75rem; }
.compare .res-head { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fach); font-weight: 600; }
.compare .bar { position: relative; }
.compare .bar .range { position: absolute; top: 3px; bottom: 3px; background: var(--leise); opacity: .35; border-radius: 2px; }
.compare .num small { display: block; font-size: .8125rem; }
.compare .res.test .bar div { background: var(--d1); }
.compare .res { grid-template-columns: 13rem 1fr 4.5rem; }
.compare .res.mine .bar div { background: var(--d1); }
.compare .res.evo .bar div { background: var(--d2); }
.compare .res.none .bar div { background: var(--leise); }
.compare .verdict { font-weight: 600; margin-top: .25rem; }
@media (max-width: 520px) { .compare .res { grid-template-columns: 7.5rem 1fr 3.5rem; } }

.build-editor { margin-top: .75rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: .75rem 1rem; }
.build-editor-head { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; padding-bottom: .5rem; border-bottom: 1px solid var(--linie); margin-bottom: .5rem; }
.build-editor-head > b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; }
.ntabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ntab { font: 600 .875rem var(--mono); color: var(--fach); background: var(--fach-hell); border: 1px solid transparent;
  border-radius: var(--r-rund); min-height: 2.5rem; min-width: 2.75rem; padding: .25rem .75rem; cursor: pointer; }
.ntab:hover { border-color: var(--fach); }
.ntab.active { color: #fff; background: var(--fach); border-color: var(--fach); }
:root[data-thema="dunkel"] .ntab.active { color: #111; }
.ntab.add { font-family: var(--sans); font-weight: 400; color: var(--text); border: 1px dashed var(--linie); background: transparent; }
.ntab:disabled { opacity: .45; cursor: not-allowed; }
.ncard { border-radius: var(--r-klein); transition: background .4s; }
.ncard.flash { background: var(--fach-hell); }
.ncard-head { display: flex; align-items: center; gap: .5rem; }
.ncard-head b { font-family: var(--mono); }
.ncard-head .nval { color: var(--leise); font-family: var(--mono); font-size: .8125rem; }
.ncard-head .knopf { margin-left: auto; }
.ncard-sec { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fach); font-weight: 600; margin: .5rem 0 .2rem; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .2rem 1.5rem; }
.wrow { display: grid; grid-template-columns: 5.5rem minmax(60px, 1fr) 2.5rem; gap: .5rem; align-items: center; font-size: .8125rem; min-height: 2.5rem; }
.wrow span { font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow output { text-align: right; font-family: var(--mono); color: var(--leise); }
.wrow output.p { color: var(--fach); }
/* Regler mit Mittelmarke: Füllung von 0 bis zum Wert */
.wrow input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  background:
    linear-gradient(var(--leise), var(--leise)) no-repeat center / 2px 100%,
    linear-gradient(to right, var(--linie) 0 min(50%, var(--p)), var(--fill) min(50%, var(--p)) max(50%, var(--p)), var(--linie) max(50%, var(--p)) 100%);
}
.wrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--karte); border: 3px solid var(--fill);
}
.wrow input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--karte); border: 3px solid var(--fill); }
.wrow input[type="range"]::-moz-range-track { background: transparent; }

/* Warnhinweis vor dem Überschreiben (wie .kasten.hinweis), oben mittig */
.confirm { position: fixed; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100% - 1.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1rem; background: var(--hinweis-hell);
  border: 1px solid var(--hinweis); border-left-width: 4px; border-radius: var(--r-klein); font-size: .9375rem; box-shadow: var(--schatten); }
.confirm.hidden { display: none; }

/* Speichern / Laden im Baukasten */
.file-actions { position: relative; margin: 0; }
.save-pop { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 25; width: 18rem; display: grid; gap: .4rem; font-size: .875rem; color: var(--leise); }
.save-pop.hidden { display: none; }
.save-pop input { width: 100%; }
.file-info { font-size: .875rem; }
.file-info.err { color: var(--falsch); }
.file-info.ok { color: var(--richtig); }

/* Tafelmodus: Spielfeld bleibt bildschirmfüllend */
html.tafel .modes .knopf { font-size: .9rem; }

/* ---- Baukasten: Werkzeugleiste + drei Spalten (Spielfeld | Netz | Regler) ---- */
.build-only { display: none; }
body.mode-build .build-only { display: block; }
.col-edit { min-width: 0; display: none; }
body.mode-build .col-edit { display: block; }
body.mode-build .col-edit > .build-editor { margin-top: 0; }
body.mode-build #levelTitle { display: none; }
.build-bar { margin-bottom: .75rem; }
.build-bar .worum { margin: 0 0 .5rem; }
.tb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tb .knopf small { font-weight: 400; opacity: .8; font-size: .8125rem; }
.tb-sep { width: 1px; align-self: stretch; background: var(--linie); margin: 0 .25rem; }
.tb-info:empty, .file-info:empty { display: none; }
.tb-info { margin: 0; }
.tb-menu { position: relative; }
.tb-menu > summary { list-style: none; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu > summary::after { content: ""; width: .4em; height: .4em; margin: 0 0 .2em .2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; }
.tb-menu[open] > summary { background: var(--fach-hell); }
.tb-menu[open] > summary::after { transform: rotate(-135deg); margin: .25em 0 0 .2em; }
.tb-count { font-family: var(--mono); font-size: .8125rem; font-weight: 400; }
.tb-pop { position: absolute; z-index: 20; left: 0; top: calc(100% + .35rem); width: max-content; max-width: min(34rem, calc(100vw - 2rem));
  padding: .75rem; box-shadow: var(--schatten); }
.tb-pop .sensors { margin-bottom: .5rem; }
.tb-pop .save-pop { position: static; margin-top: .6rem; padding: .6rem 0 0; border: 0; border-top: 1px solid var(--linie); box-shadow: none; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem; width: min(30rem, calc(100vw - 3.5rem)); }
@media (max-width: 600px) { .tb-pop { position: fixed; left: 1rem; right: 1rem; top: auto; width: auto; max-width: none; } .presets { width: auto; } }
.net-hint { margin: .4rem 2px 0; }
@media (min-width: 900px) {
  body.mode-build .stage-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  body.mode-build .col-edit { grid-column: 2; }
}
@media (min-width: 1000px) {
  body.mode-build .stage-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr); }
  body.mode-build .col-edit { grid-column: 3; grid-row: 1; position: sticky; top: .5rem; }
  body.mode-build .wgrid { grid-template-columns: minmax(0, 1fr); }
}
.wrow.flash { background: var(--fach-hell); border-radius: var(--r-klein); }
.wrow { transition: background .4s; }
.col-brain .compare { margin-top: .75rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); padding: .6rem .8rem; box-shadow: var(--schatten); }
.col-brain .compare .res { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 3.6rem; gap: .5rem; font-size: .875rem; }
.col-brain .compare .verdict { font-size: .9375rem; }
.ncard-head .knopf { white-space: nowrap; min-height: 2rem; padding: .25rem .6rem; }
body.mode-build .controls { gap: .4rem; }
body.mode-build .controls .knopf { padding: .4rem .7rem; }
body.mode-build .speed select { width: auto; }
@media (min-width: 1000px) { body.mode-build .col-edit { max-height: calc(100vh - 1rem); overflow-y: auto; border-radius: var(--r); } }

/* Messergebnisse: Punkte je Runde, Durchschnitt, Spannweite */
.res2 { display: grid; gap: .15rem; margin-top: .35rem; }
.res2-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; }
.res2-name { min-width: 0; }
.res2-num { font-family: var(--mono); font-size: .875rem; white-space: nowrap; cursor: help; }
.res2-num b { font-size: 1rem; }
.res2-num small { color: var(--leise); }
.res2-sub { font-size: .8125rem; color: var(--leise); }
.res2-sub span { cursor: help; border-bottom: 1px dotted var(--linie); }
.strip { position: relative; height: 22px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-klein); }
.strip i { position: absolute; display: block; }
.strip .band { top: 0; bottom: 0; background: var(--leise); opacity: .18; cursor: help; }
.strip .ci { top: 7px; height: 6px; background: var(--leise); opacity: .35; border-radius: 3px; pointer-events: none; }
.strip .dot { width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--karte); border: 1.5px solid var(--d1); cursor: help; }
.strip .mean { top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: var(--d1); border-radius: 2px; cursor: help; }
.strip .mean::before { content: ""; position: absolute; left: -6px; right: -6px; top: 0; bottom: 0; }
.res2.evo .dot { border-color: var(--d2); } .res2.evo .mean { background: var(--d2); }
.res2.none .dot { border-color: var(--leise); } .res2.none .mean { background: var(--leise); }
.res-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--leise); font-family: var(--mono); margin-top: -.1rem; }
.res-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .75rem; color: var(--leise); }
.res-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.res-legend i { display: inline-block; }
.lg-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--d1); }
.lg-mean { width: 4px; height: 12px; background: var(--d1); border-radius: 2px; }
.lg-range { width: 16px; height: 10px; background: var(--leise); opacity: .3; border-radius: 2px; }
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-left: .45rem; border-radius: 50%;
  border: 1px solid var(--fach); color: var(--fach); font: italic 600 .75rem var(--serif); text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; }
.lg-ci { width: 16px; height: 6px; background: var(--leise); opacity: .5; border-radius: 3px; }