/* ============================================================
   MINT-Material — Interaktive Übungs-Widgets (Klasse 10)
   Eigenentwicklung, Palette der Nuklidkarte, semantisch gesetzt.
   blau #5b8bd8/#2c5fb5 · grün #4a7530/#67b05f · orange #e79a3a
   rot #e2574c · violett #7c5fb5 · gelb #f4d03f · dunkel #2f2f2f
   ============================================================ */

.ux{
  --ux-blue:#5b8bd8; --ux-blue-d:#2c5fb5;
  --ux-green:#67b05f; --ux-green-d:#4a7530;
  --ux-orange:#e79a3a; --ux-red:#e2574c;
  --ux-violet:#7c5fb5; --ux-yellow:#f4d03f;
  --ux-dark:#2f2f2f; --ux-paper:#faf6ee; --ux-line:#d9cdb8;
  margin:14px 0 2px;
}
.ux *{box-sizing:border-box}

/* ---------- gemeinsame Bausteine ---------- */
.ux-lead{
  font-size:14px; line-height:1.55; color:#6b5f53;
  margin:0 0 10px; padding-left:11px; border-left:3px solid var(--ux-line);
}
.ux-lead kbd{
  font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fff; border:1px solid var(--ux-line); border-bottom-width:2px;
  border-radius:4px; padding:2px 5px; color:var(--ux-dark);
}
.ux-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:12px;
}
.ux-btn{
  font:600 13.5px/1 inherit; cursor:pointer;
  padding:9px 16px; border-radius:9px; border:1.5px solid var(--ux-blue-d);
  background:var(--ux-blue-d); color:#fff;
}
.ux-btn:hover{filter:brightness(1.08)}
.ux-btn:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-btn.ghost{background:#fff; color:var(--ux-dark); border-color:var(--ux-line)}
.ux-btn.ghost:hover{background:#f3ece0}
.ux-btn[disabled]{opacity:.45; cursor:default; filter:none}
.ux-out{
  font-size:13px; font-weight:600; color:#6b5f53; min-height:19px;
}
.ux-out.ok{color:var(--ux-green-d)}
.ux-out.bad{color:var(--ux-red)}
.ux-note{
  margin-top:10px; padding:10px 13px; border-radius:9px; font-size:13.5px; line-height:1.6;
  background:#eef3fb; border:1px solid #cfdcf1; color:#24405f; display:none;
}
.ux-note.show{display:block}

/* ---------- 1) Kategorien-Körbe (cat) ---------- */
.ux-pool{
  display:flex; flex-wrap:wrap; gap:8px; min-height:46px;
  padding:10px; border-radius:11px;
  background:var(--ux-paper); border:1.5px dashed var(--ux-line);
}
.ux-pool:empty::after{content:'Alle Karten verteilt.'; font-size:13px; color:#9a8d7d}
.ux-chip{
  font:600 13.5px/1.2 inherit; cursor:grab;
  padding:8px 13px; border-radius:20px;
  background:#fff; border:1.5px solid var(--ux-line); color:var(--ux-dark);
}
.ux-chip:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-chip.picked{
  background:var(--ux-violet); border-color:var(--ux-violet); color:#fff;
  transform:translateY(-2px);
}
.ux-chip.drag{opacity:.4}
.ux-chip.ok{background:#e8f4e4; border-color:var(--ux-green); color:var(--ux-green-d)}
.ux-chip.bad{background:#fbe6e4; border-color:var(--ux-red); color:#96271e}
.ux-baskets{display:grid; gap:10px; margin-top:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ux-basket{
  border-radius:11px; padding:10px; background:#fff;
  border:1.5px solid var(--ux-line); border-top-width:4px;
}
.ux-basket.b0{border-top-color:var(--ux-blue)}
.ux-basket.b1{border-top-color:var(--ux-green)}
.ux-basket.b2{border-top-color:var(--ux-orange)}
.ux-basket.b3{border-top-color:var(--ux-violet)}
.ux-basket.over{background:#f1f6ff; border-color:var(--ux-blue)}
.ux-bh{
  display:flex; align-items:center; gap:7px;
  font:700 13px/1 inherit; color:var(--ux-dark); margin-bottom:8px;
}
.ux-key{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:5px; flex:0 0 19px;
  background:var(--ux-dark); color:#fff; font:700 11px/1 ui-monospace,Menlo,monospace;
}
.ux-drop{display:flex; flex-wrap:wrap; gap:7px; min-height:36px}

/* ---------- 2) Reihenfolge (sort) ---------- */
.ux-sort{display:flex; flex-direction:column; gap:8px}
.ux-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:10px; background:#fff;
  border:1.5px solid var(--ux-line); cursor:grab;
  font-size:14px; line-height:1.45; color:var(--ux-dark);
}
.ux-item:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-item.drag{opacity:.4}
.ux-item.ok{background:#e8f4e4; border-color:var(--ux-green)}
.ux-item.bad{background:#fbe6e4; border-color:var(--ux-red)}
.ux-rank{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  background:var(--ux-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 inherit;
}
.ux-item.ok .ux-rank{background:var(--ux-green-d)}
.ux-item.bad .ux-rank{background:var(--ux-red)}
.ux-txt{flex:1}
.ux-moves{display:flex; flex-direction:column; gap:2px}
.ux-mv{
  width:24px; height:16px; padding:0; cursor:pointer; line-height:1;
  border:1px solid var(--ux-line); background:#f7f2e8; border-radius:5px;
  font-size:9px; color:var(--ux-dark);
}
.ux-mv:hover{background:var(--ux-blue); color:#fff; border-color:var(--ux-blue)}
.ux-mv:focus-visible{outline:2px solid var(--ux-yellow); outline-offset:1px}

/* ---------- 3) Lückentext mit Wortbank (bank) ---------- */
.ux-cloze{
  font-size:15px; line-height:2.15; color:var(--ux-dark);
  background:var(--ux-paper); border:1.5px solid var(--ux-line);
  border-radius:11px; padding:13px 15px;
}
.ux-gap{
  font:600 13.5px/1 inherit; cursor:pointer; vertical-align:baseline;
  min-width:96px; padding:6px 10px; border-radius:7px;
  background:#fff; border:1.5px dashed var(--ux-blue); color:var(--ux-blue-d);
}
.ux-gap:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-gap.filled{border-style:solid; background:#eef3fb}
.ux-gap.sel{background:var(--ux-violet); border-color:var(--ux-violet); color:#fff}
.ux-gap.ok{background:#e8f4e4; border-color:var(--ux-green); color:var(--ux-green-d)}
.ux-gap.bad{background:#fbe6e4; border-color:var(--ux-red); color:#96271e}

/* ---------- 4) Paare finden / Memory (pair) ---------- */
.ux-mem{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media(max-width:560px){.ux-mem{grid-template-columns:repeat(3,1fr)}}
.ux-card{
  position:relative; min-height:70px; padding:8px 6px; cursor:pointer;
  border-radius:10px; border:1.5px solid var(--ux-line); background:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:600 12.5px/1.35 inherit; color:var(--ux-dark);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.ux-card:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-card .ux-face{visibility:hidden}
.ux-card.up .ux-face,.ux-card.got .ux-face{visibility:visible}
.ux-card::after{
  content:'?'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:700 20px/1 inherit; color:#b9ac9a;
  background:var(--ux-paper); border-radius:9px;
}
.ux-card.up::after,.ux-card.got::after{display:none}
.ux-card.up{background:#eef3fb; border-color:var(--ux-blue); transform:translateY(-2px)}
.ux-card.got{background:#e8f4e4; border-color:var(--ux-green); cursor:default}
.ux-card.miss{background:#fbe6e4; border-color:var(--ux-red)}
.ux-pair .ux-card{min-height:76px}
.ux-tries{
  font:700 12.5px/1.3 inherit; color:var(--ux-dark);
  background:var(--ux-paper); border:1.5px solid var(--ux-line);
  border-radius:999px; padding:4px 11px; white-space:nowrap;
}
.ux-pair.ux-over .ux-tries{background:#fbe6e4; border-color:var(--ux-red); color:#96271e}
.ux-pair.done .ux-tries{background:#e8f4e4; border-color:var(--ux-green); color:var(--ux-green-d)}
.ux-pair.ux-over .ux-mem{opacity:.55; filter:grayscale(.4)}
.ux-pair.ux-over .ux-card{cursor:not-allowed}

/* ---------- 5) Mehrfachauswahl (multi) ---------- */
.ux-multi{display:flex; flex-direction:column; gap:8px}
.ux-opt{
  display:flex; align-items:flex-start; gap:10px; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:10px; background:#fff;
  border:1.5px solid var(--ux-line); font-size:14px; line-height:1.5; color:var(--ux-dark);
}
.ux-opt:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-box{
  flex:0 0 19px; width:19px; height:19px; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--ux-line); background:var(--ux-paper);
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 inherit; color:#fff;
}
.ux-opt.on{border-color:var(--ux-blue); background:#eef3fb}
.ux-opt.on .ux-box{background:var(--ux-blue-d); border-color:var(--ux-blue-d)}
.ux-opt.on .ux-box::after{content:'\2713'}
.ux-opt.ok{border-color:var(--ux-green); background:#e8f4e4}
.ux-opt.ok .ux-box{background:var(--ux-green-d); border-color:var(--ux-green-d)}
.ux-opt.bad{border-color:var(--ux-red); background:#fbe6e4}
.ux-opt.bad .ux-box{background:var(--ux-red); border-color:var(--ux-red)}
.ux-opt.miss{border-color:var(--ux-orange); background:#fdf1e0}

/* ---------- 6) Wahr/Falsch mit Serie (tf) ---------- */
.ux-tf{background:var(--ux-paper); border:1.5px solid var(--ux-line); border-radius:11px; padding:15px}
.ux-tf-meta{display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; color:#6b5f53; margin-bottom:9px}
.ux-streak{display:flex; gap:4px}
.ux-pip{width:9px; height:9px; border-radius:50%; background:#e2dccf}
.ux-pip.hit{background:var(--ux-green)}
.ux-pip.fail{background:var(--ux-red)}
.ux-stmt{font-size:15.5px; line-height:1.6; color:var(--ux-dark); min-height:52px}
.ux-tf-btns{display:flex; gap:9px; margin-top:11px}
.ux-tf-btns .ux-btn{flex:1; max-width:170px}
.ux-item-tf{display:none}
.ux-count{font-weight:700}
.ux-why{
  display:none; margin-top:11px; padding:9px 12px; border-radius:8px;
  font-size:13.5px; line-height:1.6; background:#fff; border:1px solid var(--ux-line); color:#4a4038;
}
.ux-why.show{display:block}
.ux-btn.yes{background:var(--ux-green-d); border-color:var(--ux-green-d)}
.ux-btn.no{background:var(--ux-red); border-color:var(--ux-red)}

/* ---------- 7) Zahleneingabe (num) ---------- */
.ux-numrow{display:flex; flex-wrap:wrap; align-items:center; gap:9px}
.ux-input{
  font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  width:150px; padding:10px 12px; border-radius:9px;
  border:1.5px solid var(--ux-line); background:#fff; color:var(--ux-dark);
}
.ux-input:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-input.ok{border-color:var(--ux-green); background:#e8f4e4}
.ux-input.bad{border-color:var(--ux-red); background:#fbe6e4}
.ux-unit{font-size:14px; font-weight:600; color:#6b5f53}

/* ---------- 8) Schätzregler (slider) ---------- */
.ux-slide{background:var(--ux-paper); border:1.5px solid var(--ux-line); border-radius:11px; padding:15px}
.ux-range{width:100%; accent-color:var(--ux-blue-d); margin:6px 0}
.ux-scale{display:flex; justify-content:space-between; font-size:11.5px; color:#9a8d7d}
.ux-read{
  font:700 26px/1 inherit; color:var(--ux-blue-d); margin:4px 0 2px;
}
.ux-read.ok{color:var(--ux-green-d)}
.ux-read.bad{color:var(--ux-red)}
.ux-track{position:relative; height:9px; border-radius:5px; background:#e7e0d2; margin:10px 0 4px; overflow:hidden}
.ux-band{position:absolute; top:0; bottom:0; background:#cfe6c9; display:none}
.ux-track.reveal .ux-band{display:block}
.ux-mark{position:absolute; top:-3px; width:3px; height:15px; background:var(--ux-dark); border-radius:2px}

/* ---------- 9) Fehlersuche (bug) ---------- */
.ux-lines{display:flex; flex-direction:column; gap:6px}
.ux-line{
  display:flex; gap:10px; align-items:flex-start; text-align:left; cursor:pointer;
  padding:9px 12px; border-radius:9px; background:#fff;
  border:1.5px solid var(--ux-line); font-size:14px; line-height:1.55; color:var(--ux-dark);
}
.ux-line:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-ln{flex:0 0 20px; font:700 12px/1.4 ui-monospace,Menlo,monospace; color:#a99c8a}
.ux-line.on{border-color:var(--ux-orange); background:#fdf1e0}
.ux-line.ok{border-color:var(--ux-green); background:#e8f4e4}
.ux-line.bad{border-color:var(--ux-red); background:#fbe6e4}
.ux-fix{display:none; margin-top:5px; font-size:13px; color:var(--ux-green-d); font-weight:600}
.ux-line.ok .ux-fix{display:block}

/* ---------- 10) Bit-Raster (grid) ---------- */
.ux-grid-wrap{background:var(--ux-paper); border:1.5px solid var(--ux-line); border-radius:11px; padding:15px}
.ux-cells{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.ux-cell{
  width:46px; cursor:pointer; border-radius:9px; padding:7px 0 6px;
  background:#fff; border:1.5px solid var(--ux-line); text-align:center;
}
@media(max-width:520px){.ux-cell{width:38px}}
.ux-cell:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-bit{font:700 19px/1 ui-monospace,Menlo,monospace; color:#b9ac9a}
.ux-cell.on{background:var(--ux-blue-d); border-color:var(--ux-blue-d)}
.ux-cell.on .ux-bit{color:#fff}
.ux-w{display:block; margin-top:4px; font-size:10px; color:#9a8d7d}
.ux-cell.on .ux-w{color:#d8e4f7}
.ux-sum{text-align:center; font:700 24px/1 inherit; color:var(--ux-blue-d); margin-top:12px}
.ux-sum.ok{color:var(--ux-green-d)}
.ux-target{text-align:center; font-size:13px; color:#6b5f53; margin-top:5px}

/* ---------- 11) Klick-Schema (hot) ---------- */
.ux-scheme{background:var(--ux-paper); border:1.5px solid var(--ux-line); border-radius:11px; padding:13px}
.ux-scheme svg{display:block; width:100%; height:auto}
.ux-hot rect{fill:#fff; stroke:var(--ux-line); stroke-width:1.6; rx:9}
.ux-hot text{font:600 12px/1 'Inter',sans-serif; fill:var(--ux-dark)}
.ux-task{display:none}
.ux-hot{cursor:pointer}
.ux-hot:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-hot:hover rect{stroke:var(--ux-blue); stroke-width:2.4}
.ux-hot.ok rect{fill:#e8f4e4; stroke:var(--ux-green); stroke-width:2.4}
.ux-hot.bad rect{fill:#fbe6e4; stroke:var(--ux-red); stroke-width:2.4}
.ux-hot.done{cursor:default}
.ux-ask{font-size:14.5px; line-height:1.55; color:var(--ux-dark); margin:0 0 10px; font-weight:600}

/* ---------- Bewegungsreduktion ---------- */
@media (prefers-reduced-motion: reduce){
  .ux-card{transition:none}
  .ux-chip.picked{transform:none}
  .ux-card.up{transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .ux-bar,.ux-mv,.ux-moves{display:none !important}
  .ux-card::after{display:none}
  .ux-card .ux-face{visibility:visible}
  .ux-note{display:block}
  .ux-pool,.ux-basket,.ux-item,.ux-opt,.ux-line,.ux-cell{box-shadow:none}
}

/* ============ 12) Zuordnungslinien ============ */
.ux-link{position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) 170px minmax(0,1fr);
  grid-auto-flow:row dense;gap:12px 16px;align-items:center}
.ux-col{display:contents}
.ux-left .ux-node{grid-column:1;justify-self:stretch;text-align:left}
.ux-right .ux-node{grid-column:3;justify-self:end;text-align:right}
.ux-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ux-wire{fill:none;stroke:var(--ux-blue);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ux-wire.ok{stroke:var(--ux-green-d)}
.ux-wire.bad{stroke:var(--ux-red)}
.ux-wire-bg{fill:none;stroke:#fff;stroke-width:7.5;stroke-linecap:round;opacity:.92}
.ux-dot{fill:var(--ux-blue);stroke:#fff;stroke-width:1.6}
.ux-dot.ok{fill:var(--ux-green-d)}
.ux-dot.bad{fill:var(--ux-red)}
.ux-node{position:relative;z-index:1;text-align:left;font:inherit;font-size:13.5px;line-height:1.35;
  background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:9px;padding:9px 11px;cursor:pointer}
.ux-node:hover{border-color:var(--ux-blue)}
.ux-node.picked{border-color:var(--ux-blue-d);box-shadow:0 0 0 3px rgba(91,139,216,.22)}
.ux-node.linked{background:#fff}
.ux-node.ok{border-color:var(--ux-green-d);background:#eef7ea}
.ux-node.bad{border-color:var(--ux-red);background:#fdeeed}
.ux-node:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:2px}

/* ============ 13) Ablauf-Simulator ============ */
.ux-stage{background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:12px 13px}
.ux-scene{font-weight:600;font-size:14.5px;margin-bottom:10px;color:var(--ux-dark)}
.ux-choices{display:flex;flex-wrap:wrap;gap:8px}
.ux-choice{font:inherit;font-size:13.5px;background:#fff;border:1.5px solid var(--ux-line);
  border-radius:9px;padding:8px 12px;cursor:pointer;text-align:left}
.ux-choice:hover:not(:disabled){border-color:var(--ux-blue)}
.ux-choice.ok{border-color:var(--ux-green-d);background:#eef7ea}
.ux-choice.bad{border-color:var(--ux-red);background:#fdeeed;opacity:.65}
.ux-choice:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:2px}
.ux-log{margin:10px 0 0;padding-left:20px;font-size:13px;color:#5a5148}
.ux-log li{margin:3px 0}

/* ============ 14) Rechenkette ============ */
.ux-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ux-crow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--ux-paper);
  border:1.5px solid var(--ux-line);border-left:4px solid var(--ux-blue);border-radius:9px;padding:9px 11px}
.ux-crow.locked{opacity:.5;border-left-color:var(--ux-line)}
.ux-crow.ok{border-left-color:var(--ux-green-d);background:#eef7ea}
.ux-crow.bad{border-left-color:var(--ux-red);background:#fdeeed}
.ux-cq{flex:1 1 240px;font-size:13.5px}
.ux-in{width:96px;font:inherit;font-size:14px;padding:6px 8px;border:1.5px solid var(--ux-line);border-radius:7px;background:#fff}
.ux-in:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:1px}
.ux-cu{font-size:12.5px;color:#6a6055;min-width:34px}
.ux-go{font:inherit;font-size:12.5px;padding:6px 10px;border:1.5px solid var(--ux-line);
  border-radius:7px;background:#fff;cursor:pointer}
.ux-go:hover{border-color:var(--ux-blue)}
.ux-fbk{font-weight:700;min-width:14px}

/* ============ 15) Venn-Zuordnung ============ */
.ux-venn{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ux-vz{border:1.5px solid var(--ux-line);border-radius:11px;padding:9px;background:var(--ux-paper);min-height:96px}
.ux-vz[data-z="0"]{border-color:var(--ux-blue);background:#eef3fb}
.ux-vz[data-z="1"]{border-color:var(--ux-violet);background:#f2eefa}
.ux-vz[data-z="2"]{border-color:var(--ux-orange);background:#fdf3e6}
.ux-vh{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ux-dark);margin-bottom:7px;text-align:center}
.ux-vdrop{display:flex;flex-wrap:wrap;gap:6px;min-height:44px}

/* ============ 16) Einschätz-Skala ============ */
.ux-lvl{display:flex;flex-direction:column;gap:8px}
.ux-lvl-head{display:flex;justify-content:space-between;font-size:11.5px;color:#6a6055;padding:0 2px}
.ux-lvl-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;background:var(--ux-paper);
  border:1.5px solid var(--ux-line);border-radius:9px;padding:9px 11px}
.ux-lvl-row.ok{border-color:var(--ux-green-d);background:#eef7ea}
.ux-lvl-row.bad{border-color:var(--ux-red);background:#fdeeed}
.ux-lvl-txt{flex:1 1 230px;font-size:13.5px;order:0}
.ux-lvl-opts{display:flex;gap:5px;order:2;margin-left:auto}
.ux-lvl-opt{width:32px;height:32px;font:inherit;font-size:13px;border:1.5px solid var(--ux-line);
  border-radius:8px;background:#fff;cursor:pointer}
.ux-lvl-opt:hover{border-color:var(--ux-blue)}
.ux-lvl-opt.on{background:var(--ux-blue);border-color:var(--ux-blue-d);color:#fff;font-weight:700}
.ux-lvl-opt:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:2px}
.ux-lvl-fb{font-size:12px;font-weight:600;min-width:0;order:1;text-align:right;white-space:nowrap;margin-left:auto}

/* ============ 17) Baukasten ============ */
.ux-slots{display:flex;flex-wrap:wrap;gap:7px;padding:11px;background:var(--ux-paper);
  border:1.5px dashed var(--ux-line);border-radius:11px;min-height:56px;align-items:center}
.ux-slot{min-width:104px;min-height:36px;border:1.5px dashed var(--ux-line);border-radius:8px;
  background:#fff;display:flex;align-items:center;justify-content:center;padding:2px}
.ux-slot.ok{border-style:solid;border-color:var(--ux-green-d);background:#eef7ea}
.ux-slot.bad{border-style:solid;border-color:var(--ux-red);background:#fdeeed}
.ux-parts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ux-part{font:inherit;font-size:13px;background:#fff;border:1.5px solid var(--ux-line);
  border-radius:8px;padding:7px 11px;cursor:pointer}
.ux-part:hover{border-color:var(--ux-blue)}
.ux-part:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:2px}
.ux-slot .ux-part{border-color:var(--ux-blue);background:#eef3fb}

/* ============ 18) Entscheidungsbaum ============ */
.ux-tree{background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:12px 13px}
.ux-tq{font-weight:600;font-size:14.5px;color:var(--ux-dark);min-height:22px}
.ux-tbtns{display:flex;gap:8px;margin-top:10px}
.ux-tpath{margin:10px 0 0;padding-left:20px;font-size:12.5px;color:#5a5148}
.ux-tpath li{margin:3px 0}
.ux-tnode{display:none}

/* ============ 19) Kreuztabelle ============ */
.ux-matrix{border-collapse:collapse;width:100%;font-size:13px;background:var(--ux-paper);
  border:1.5px solid var(--ux-line);border-radius:11px;overflow:hidden}
.ux-matrix th,.ux-matrix td{border:1px solid var(--ux-line);padding:6px 8px;text-align:center}
.ux-matrix th[scope="row"]{text-align:left;font-weight:600;background:#fff}
.ux-matrix thead th{background:#fff;font-size:12px;line-height:1.25}
.ux-xcell{width:30px;height:30px;font:inherit;font-size:14px;font-weight:700;border:1.5px solid var(--ux-line);
  border-radius:7px;background:#fff;cursor:pointer;color:var(--ux-blue-d)}
.ux-xcell:hover{border-color:var(--ux-blue)}
.ux-xcell.on{background:#eef3fb;border-color:var(--ux-blue-d)}
.ux-xcell.ok{background:#eef7ea;border-color:var(--ux-green-d);color:var(--ux-green-d)}
.ux-xcell.bad{background:#fdeeed;border-color:var(--ux-red);color:var(--ux-red)}
.ux-xcell.miss{background:#fdf3e6;border-color:var(--ux-orange)}
.ux-xcell:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:2px}

@media (max-width:640px){
  .ux-link{grid-template-columns:1fr;gap:8px}
  .ux-left .ux-node,.ux-right .ux-node{grid-column:1;justify-self:stretch;text-align:left}
  .ux-wires{display:none}
  .ux-venn{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .ux-node{transition:none}
  .ux-choice{transition:none}
  .ux-lvl-opt{transition:none}
  .ux-part{transition:none}
  .ux-xcell{transition:none}
}
@media print{
  .ux-choices,.ux-tbtns,.ux-go{display:none}
  .ux-wires{display:none}
}

/* ============ 20) Skip-Link ============ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#2f2f2f;color:#fff;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;padding:12px 20px;
  border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}
[tabindex="-1"]:focus{outline:none}

/* ============ 21) Fortschritt zurücksetzen ============ */
.progress-reset{font-family:'Fredoka',sans-serif;font-weight:600;font-size:11.5px;
  color:#6b6b6b;background:none;border:1px solid #d9d2c6;border-radius:8px;
  padding:4px 10px;cursor:pointer;white-space:nowrap;transition:border-color .18s,color .18s}
.progress-reset:hover{border-color:#2f2f2f;color:#2f2f2f}
.progress-reset:focus-visible{outline:2px solid #5b8bd8;outline-offset:2px}

/* ============ 22) Druckansicht (seitenweit) ============ */
@media print{
  header,footer,.m-burger,.m-menu,.progress-sticky,.dotnav,.skip-link,
  .back-link,.breadcrumb,.hilfe-btn,.ux-check,.ux-reset,.ux-go,.ux-btn,
  .swt-ctrl,.dvs-ctrl{display:none !important}

  .topic-hero,.subject-hero{background:none !important;color:#000 !important;
    padding:0 0 8px !important;border-bottom:2px solid #000}
  .topic-hero::after,.subject-hero::after{display:none !important}
  .topic-hero h1,.subject-hero h1{color:#000 !important;font-size:22pt}

  body{background:#fff !important;color:#000;font-size:10.5pt;line-height:1.45}
  .container{max-width:none;padding:0}
  .panel,.phase,.aufgabe,.ux,.definition,.hinweis-box,.glossar{
    background:#fff !important;box-shadow:none !important;border:1px solid #999;
    break-inside:avoid;page-break-inside:avoid}
  .phase,.aufgabe{margin:0 0 10px}

  /* Reveal-Animation darf im Druck nichts verstecken */
  .reveal{opacity:1 !important;transform:none !important}

  /* Lösungen und Hilfen ausklappen, damit das Blatt vollständig ist */
  details{display:block}
  details > summary{list-style:none;font-weight:600}
  details[open] > summary::marker{content:''}
  .hilfe-content{display:block !important;border-left:3px solid #999;padding-left:10px}

  /* Externe Ziele sichtbar machen */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  a{color:#000;text-decoration:underline}

  h2,h3{break-after:avoid;page-break-after:avoid}
  img,svg,table{break-inside:avoid;page-break-inside:avoid;max-width:100%}
}

/* ============ 23) Kurzer Inline-Hinweis im Fließtext ============ */
.hinweis-inline{background:#faf6ee;border-left:3px solid #e79a3a;border-radius:0 8px 8px 0;
  padding:9px 14px;margin:14px 0;font-size:15px;color:#4a4036}
.hinweis-inline b{color:#2f2f2f}

/* ============ 24) AFB-III-Begründungsteil unter einem Widget ============ */
.afb3-frage{margin-top:18px;padding-top:16px;border-top:1px dashed #d6cbb8}
.afb3-frage > p.q{margin:0 0 4px;font-size:15.5px;line-height:1.6}
.afb3-frage > p.q b{color:#a05a12}
.afb3-frage details.loesung summary svg{flex-shrink:0}
@media print{
  .afb3-frage{border-top:1px solid #999}
}

/* ============ 25) Hinweis unter den Weiterschauen-Links ============ */
.reslinks-note{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:13px 16px;
  background:#fdf6e8;border:1px solid #e7d2a8;border-left:4px solid #e79a3a;border-radius:11px;
  font-size:14px;line-height:1.6;color:#5a4a30}
.reslinks-note svg{width:19px;height:19px;stroke-width:2;color:#e79a3a;flex-shrink:0;margin-top:2px}
.reslinks-note b{color:#a05a12}
@media print{ .reslinks-note{background:none;border:1px solid #999} }

/* ============================================================
   Typografie-Harmonisierung mit den Lernseiten
   Fredoka = Label, Button, Tabellenkopf, Bedienelement
   Inter   = Lesetext, angeglichen an .aufgabe .q (15–16px)
   ============================================================ */
.ux-btn,.ux-bh,.ux-vh,.ux-lvl-head,.ux-lvl-fb,.ux-tf-meta,.ux-out,.ux-scene,.ux-tq,.ux-ask,
.ux-sum,.ux-num,.ux-rank,.ux-unit,.ux-cu,.ux-go,.ux-target,.ux-w,.ux-scale,.ux-pool:empty::after,
.ux-matrix thead th,.ux-lvl-opt,.ux-fix,.ux-fbk{
  font-family:'Fredoka',Inter,sans-serif;
}
.ux-btn{font-size:14.5px;font-weight:600}
.ux-out{font-size:14px}
.ux-lead{font-size:15px}
.ux-note{font-size:15px;line-height:1.65}
.ux-opt{font-size:15.5px;line-height:1.55}
.ux-node{font-size:15px;line-height:1.4;padding:11px 13px}
.ux-item{font-size:15px}
.ux-chip{font-size:14.5px}
.ux-part,.ux-choice,.ux-cq{font-size:14.5px}
.ux-lvl-txt{font-size:15px;line-height:1.45}
.ux-lvl-opt{font-size:14px;font-weight:600}
.ux-bh{font-size:14.5px;font-weight:600}
.ux-vh{font-size:13.5px}
.ux-matrix{font-size:14px}
.ux-matrix th[scope="row"]{font-size:14.5px;line-height:1.45;font-weight:400}
.ux-matrix thead th{font-size:13.5px;font-weight:600;line-height:1.3}
.ux-cloze{font-size:15.5px}
.ux-gap{font-size:14.5px}
.ux-log,.ux-tpath{font-size:14px;line-height:1.55}
@media(max-width:640px){
  .ux-opt{font-size:15px}
  .ux-matrix{font-size:13px}
  .ux-matrix th[scope="row"]{font-size:13.5px}
  .ux-matrix thead th{font-size:12.5px}
}

/* Kleinteilige Meta-Labels: minimal angehoben, damit nichts winzig wirkt */
.ux-target{font-size:14px}
.ux-fix{font-size:13.5px}
.ux-cu,.ux-go{font-size:13px}
.ux-lvl-fb{font-size:13px}
.ux-lvl-head{font-size:12.5px}
.ux-tf-meta{font-size:12.5px}
.ux-scale{font-size:12px}
.ux-w{font-size:11px}

/* Formularelemente erben die Seitenschrift nicht automatisch (UA-Default).
   Ohne diese Regel rendern Buttons/Inputs in der System-Schrift statt Fredoka. */
.ux button,.ux input,.ux select,.ux textarea,.ux option,
.ux [role="button"],.ux [role="checkbox"],.ux [role="radio"]{
  font-family:'Fredoka',Inter,sans-serif;
}

/* ================= Video-Einbettung (YouTube, klick-to-load) ================= */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;margin:6px 0 4px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--accent-deep);box-shadow:var(--sh-md)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;display:block;cursor:pointer;font:inherit;color:#fff}
.vplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;image-rendering:auto;transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.vposter{position:absolute;inset:0;display:block;background:
  radial-gradient(120% 130% at 14% 6%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 58%),
  linear-gradient(140deg,var(--accent-deep) 0%,var(--accent-strong) 100%);
  transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.vposter::after{content:"";position:absolute;inset:0;opacity:.17;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(95% 85% at 72% 26%,#000 0%,rgba(0,0,0,0) 74%);
  mask-image:radial-gradient(95% 85% at 72% 26%,#000 0%,rgba(0,0,0,0) 74%)}
.vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.58) 78%,rgba(0,0,0,.82) 100%)}
.vbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:var(--accent-strong);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.42);transition:transform .25s cubic-bezier(.2,.8,.25,1),background .25s}
.vposter ~ .vbtn{background:rgba(255,255,255,.16);backdrop-filter:blur(2px);border:2px solid rgba(255,255,255,.75)}
.vbtn svg{width:34px;height:34px;margin-left:4px;color:#fff}
.vtitle{position:absolute;left:22px;right:22px;bottom:18px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:19px;line-height:1.25;text-align:left;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.vchan{display:block;margin-top:5px;font-family:inherit;font-weight:400;font-size:13px;letter-spacing:.02em;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vplay:hover img,.vplay:hover .vposter{transform:scale(1.045)}
.vplay:hover .vbtn{transform:translate(-50%,-50%) scale(1.09);background:var(--accent-deep)}
.vplay:hover .vposter ~ .vbtn{background:rgba(255,255,255,.28)}
.vplay:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}
.video-cap{font-size:13.5px;color:var(--ink-soft);margin-top:10px}
@media(max-width:560px){.vbtn{width:58px;height:58px}.vbtn svg{width:26px;height:26px}.vtitle{font-size:16px;left:16px;right:16px;bottom:14px}.vchan{font-size:12px}}
@media(prefers-reduced-motion:reduce){.vplay img,.vposter,.vbtn{transition:none}}

/* Diagramm-Figur innerhalb eines Uebungs-Widgets */
.ux-fig{margin:14px 0 18px}
.ux-fig svg{width:100%;max-width:560px;height:auto;display:block;margin:0 auto;border:1px solid var(--rule,#e3dcd0);border-radius:12px;background:#fff}

/* ============ 23) Tabelle / Mehrfach-Eingabe (table) ============ */
.ux-tabwrap{overflow-x:auto;background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:10px}
.ux-tab{border-collapse:collapse;min-width:100%;font-size:14px}
.ux-tab th,.ux-tab td{border:1px solid var(--ux-line);padding:6px 8px;text-align:center;background:#fff}
.ux-tab th{font-weight:700;color:var(--ux-dark);background:#f3ece0}
.ux-tab th[scope="row"]{text-align:left;white-space:nowrap}
.ux-tin{width:84px;max-width:100%;font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:7px 8px;border-radius:7px;
  border:1.5px solid var(--ux-line);background:#fff;color:var(--ux-dark);text-align:center}
.ux-tin.wide{width:170px;text-align:left}
.ux-tin:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:2px}
.ux-tin.ok{border-color:var(--ux-green);background:#e8f4e4}
.ux-tin.bad{border-color:var(--ux-red);background:#fbe6e4}
.ux-fields{display:flex;flex-wrap:wrap;gap:10px 18px;background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:12px 13px}
.ux-field{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ux-dark)}
.ux-field .ux-flab{font-weight:600;min-width:0}
.ux-tab .katex,.ux-field .katex{font-size:1.02em}

/* ============ 24) Punkte im Koordinatensystem (point) ============ */
.ux-plane{background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:10px;max-width:420px}
.ux-psvg{display:block;width:100%;height:auto;cursor:crosshair;border-radius:8px;background:#fff;touch-action:manipulation}
.ux-psvg:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:2px}
.ux-pgrid line{stroke:#e6e0d4;stroke-width:1}
.ux-paxes line{stroke:var(--ux-dark);stroke-width:1.8}
.ux-parrow{fill:var(--ux-dark)}
.ux-plab{font:600 12px/1 'Inter',sans-serif;fill:var(--ux-dark)}
.ux-plab.ok{fill:var(--ux-green-d)}
.ux-ptick{font:500 10.5px/1 'Inter',sans-serif;fill:#6b5f53}
.ux-pcurve{fill:none;stroke:var(--ux-blue-d);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ux-pfix{fill:var(--ux-orange);stroke:#fff;stroke-width:1.6}
.ux-pcursor line{stroke:var(--ux-violet);stroke-width:1;stroke-dasharray:4 3;opacity:.7}
.ux-pcursor circle{fill:none;stroke:var(--ux-violet);stroke-width:2}
.ux-pok{fill:var(--ux-green);stroke:#fff;stroke-width:1.8}
.ux-pbad line{stroke:var(--ux-red);stroke-width:2.6;stroke-linecap:round}
.ux-pread{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6b5f53;background:#fff;border:1px solid var(--ux-line);border-radius:7px;padding:6px 9px}
.ux-ptask,.ux-pfixed{display:none}

/* ============ 25) Intervall auf der Zahlengeraden (ival) ============ */
.ux-ivbox{background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:10px 12px 8px}
.ux-ivsvg{display:block;width:100%;height:auto;overflow:visible;touch-action:none}
.ux-ivaxis{stroke:var(--ux-dark);stroke-width:1.8}
.ux-ivarrow{fill:var(--ux-dark)}
.ux-ivtick{font:500 11px/1 'Inter',sans-serif;fill:#6b5f53}
.ux-ivtick.inf{font-size:13px;fill:#9a8d7d}
.ux-ivband{fill:var(--ux-blue);opacity:.35}
.ux-ivband.ok{fill:var(--ux-green);opacity:.55}
.ux-ivband.bad{fill:var(--ux-red);opacity:.45}
.ux-ivh{cursor:grab}
.ux-ivh:focus-visible{outline:none}
.ux-ivh:focus-visible .ux-ivgrip{stroke:var(--ux-yellow);stroke-width:3}
.ux-ivgrip{fill:#fff;stroke:var(--ux-blue-d);stroke-width:1.8}
.ux-ivh:hover .ux-ivgrip{fill:#eef3fb}
.ux-ivh.inf .ux-ivgrip{stroke:#9a8d7d;stroke-dasharray:3 2}
.ux-ivbr{font:700 22px/1 'Inter',sans-serif;fill:var(--ux-blue-d);pointer-events:none}
.ux-ivh.inf .ux-ivbr{fill:#9a8d7d}
.ux-ivname{font:700 12px/1 'Inter',sans-serif;fill:var(--ux-dark);pointer-events:none}
.ux-ivctl{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px;font-size:12.5px;color:#6b5f53}
.ux-ivgrp{display:inline-flex;align-items:center;gap:4px}
.ux-ivbtn{font:600 12.5px/1 inherit;width:30px;height:28px;border:1.5px solid var(--ux-line);border-radius:7px;background:#fff;cursor:pointer;color:var(--ux-dark)}
.ux-ivbtn.br{width:auto;padding:0 9px}
.ux-ivbtn:hover{border-color:var(--ux-blue)}
.ux-ivbtn:focus-visible{outline:2px solid var(--ux-blue-d);outline-offset:2px}
.ux-ivread{font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ux-blue-d);margin-top:8px}
@media (prefers-reduced-motion: reduce){.ux-tin,.ux-ivgrip,.ux-ivbtn{transition:none}}
@media print{.ux-pcursor,.ux-ivctl{display:none}}
.ux-input.wide{width:min(100%,260px);text-align:left}
.ux-in.wide{width:200px}
/* hot: freie Trefferzonen (Kreise/Rechtecke) über Zeichnungen */
.ux-hot .ux-hz{fill:rgba(255,255,255,.3);stroke:var(--ux-line);stroke-width:1.4;stroke-dasharray:3 2;rx:6}
.ux-hot:hover .ux-hz{stroke:var(--ux-blue);stroke-width:2.2}
.ux-hot.ok .ux-hz{fill:rgba(103,176,95,.28);stroke:var(--ux-green);stroke-dasharray:none;stroke-width:2.2}
.ux-hot.bad .ux-hz{fill:rgba(226,87,76,.25);stroke:var(--ux-red);stroke-dasharray:none;stroke-width:2.2}

/* ---------- 20) Bruch-Eingabe (frac) ---------- */
.ux-fracrow{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.ux-fracbox{display:inline-flex; flex-direction:column; align-items:center; gap:4px}
.ux-fn,.ux-fd{
  font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center;
  width:86px; padding:8px 10px; border-radius:9px;
  border:1.5px solid var(--ux-line); background:#fff; color:var(--ux-dark);
}
.ux-fn:focus-visible,.ux-fd:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-fn.ok,.ux-fd.ok{border-color:var(--ux-green); background:#e8f4e4}
.ux-fn.bad,.ux-fd.bad{border-color:var(--ux-red); background:#fbe6e4}
.ux-fbar{display:block; width:86px; height:3px; border-radius:2px; background:var(--ux-dark)}
.ux-fraclbl{font-size:14.5px; font-weight:600; color:var(--ux-dark)}

/* ---------- 21) Mehrere Eingabefelder (fill) ---------- */
.ux-fill{display:flex; flex-direction:column; gap:9px; font-size:14.5px; line-height:1.7}
.ux-fill p,.ux-fill li{margin:0}
.ux-fi{
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center;
  width:82px; padding:7px 8px; border-radius:8px; margin:0 3px;
  border:1.5px solid var(--ux-line); background:#fff; color:var(--ux-dark); vertical-align:middle;
}
.ux-fi.wide{width:130px}
.ux-fi:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}
.ux-fi.ok{border-color:var(--ux-green); background:#e8f4e4}
.ux-fi.bad{border-color:var(--ux-red); background:#fbe6e4}
.ux-fill table{border-collapse:collapse; width:auto}
.ux-fill th,.ux-fill td{padding:6px 10px; border:1px solid var(--ux-line); text-align:center; background:#fff}
.ux-fill th{background:var(--ux-paper); font-weight:600}
.ux-fill-wrap{overflow-x:auto}

/* ---------- 22) Term-Eingabe (term) ---------- */
.ux-termrow{display:flex; flex-wrap:wrap; align-items:center; gap:9px}
.ux-termrow .ux-input{width:min(100%,360px); font-weight:500}
.ux-termrow .ux-eq{font-size:15px; font-weight:600; color:var(--ux-dark)}

/* ============ 20) Mehrfach-Eingabe (vec / mat) — 2026-09-02 ============ */
.ux-vec{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:12px 14px}
.ux-vf{display:inline-flex;align-items:center;gap:7px}
.ux-vl{font-size:14.5px;font-weight:600;color:var(--ux-dark);white-space:nowrap}
.ux-vin.wide{width:212px;text-align:left}
.ux-vin{width:96px;font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:8px 10px;border:1.5px solid var(--ux-line);border-radius:8px;background:#fff;color:var(--ux-dark)}
.ux-vin:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:2px}
.ux-vin.ok{border-color:var(--ux-green);background:#e8f4e4}
.ux-vin.bad{border-color:var(--ux-red);background:#fbe6e4}
.ux-vin[disabled]{opacity:.85}
.ux-vfb{font-weight:700;min-width:14px;font-size:14px}
.ux-vf-in .ux-vin{width:74px;padding:6px 8px;margin:0 3px}
.ux-vec-inline{display:block;font-size:17px;line-height:2.2}
.ux-vec-inline .ux-vf{vertical-align:middle}
.ux-mat{display:grid;gap:0 8px;align-items:center;justify-items:center;max-width:520px}
.ux-mat .ux-vf{position:relative;padding:4px 0}
.ux-mat .ux-vin{width:64px;text-align:center;padding:7px 4px}
.ux-mat .ux-vfb{position:absolute;right:-2px;top:-9px;font-size:12px}
.ux-mat .ux-mat-rhs{border-left:2px solid var(--ux-dark);padding-left:12px;align-self:stretch;display:flex;align-items:center}
.ux-mat-head{display:grid;gap:8px;max-width:520px;margin:0 0 4px;justify-items:center;font-size:13px;font-weight:600;color:#6a6055}
.ux-mat-head span:last-child{padding-left:12px}
@media(max-width:560px){
  .ux-mat{gap:0 4px;max-width:100%}
  .ux-mat .ux-vin{width:clamp(32px,11.5vw,64px);padding:7px 2px;font-size:14px}
  .ux-mat .ux-vfb{right:0}
  .ux-mat .ux-mat-rhs{padding-left:6px}
  .ux-mat-head{gap:4px;max-width:100%;font-size:11.5px}
  .ux-mat-head span:last-child{padding-left:6px}
}
@media(prefers-reduced-motion:reduce){.ux-vin{transition:none}}

/* ============ 27) Fehler finden und korrigieren (fixit) — 2026-09-02 ============ */
.ux-fixlist{display:flex;flex-direction:column;gap:8px}
.ux-fixrow{border:1.5px solid var(--ux-line);border-radius:11px;background:#fff;overflow:hidden}
.ux-fixrow.marked{border-color:var(--ux-violet);background:#f7f4fd}
.ux-fixrow.ok{border-color:var(--ux-green);background:#e8f4e4}
.ux-fixrow.bad{border-color:var(--ux-red);background:#fbe6e4}
.ux-fixline{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:0;background:transparent;padding:10px 13px;font:500 15px/1.5 inherit;color:var(--ux-dark)}
.ux-fixline:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:-3px}
.ux-fixln{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:6px;background:var(--ux-paper);border:1px solid var(--ux-line);
  font:700 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6b5f53;flex:none}
.ux-fixrow.marked .ux-fixln{background:var(--ux-violet);border-color:var(--ux-violet);color:#fff}
.ux-fixrow.ok .ux-fixln{background:var(--ux-green-d);border-color:var(--ux-green-d);color:#fff}
.ux-fixrow.bad .ux-fixln{background:var(--ux-red);border-color:var(--ux-red);color:#fff}
.ux-fixtxt{flex:1}
.ux-fixmark{font:700 12px/1 inherit;color:var(--ux-violet);opacity:0;flex:none}
.ux-fixrow.marked .ux-fixmark{opacity:1}
.ux-fixfix{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 13px 12px 46px}
.ux-fixfix[hidden]{display:none}
.ux-fixfix .ux-fixlab{font-size:13.5px;font-weight:600;color:#6b5f53}
.ux-fixin{width:min(100%,240px);font:600 14.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:8px 10px;border:1.5px solid var(--ux-line);border-radius:8px;background:#fff;color:var(--ux-dark)}
.ux-fixin:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:2px}
.ux-fixin.ok{border-color:var(--ux-green);background:#fff}
.ux-fixin.bad{border-color:var(--ux-red);background:#fff}
@media(max-width:560px){.ux-fixfix{padding-left:13px}}
@media(prefers-reduced-motion:reduce){.ux-fixrow,.ux-fixmark{transition:none}}

/* ============ 21) Graph-Auswahl (pick) + Auswahlmenues (sel) — 2026-09-02 ============ */
.ux-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:4px 0 14px}
.ux-pcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px 10px;background:#fff;border:2px solid var(--ux-line);border-radius:14px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.ux-pcard:hover{border-color:var(--ux-blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,34,60,.10)}
.ux-pcard:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:2px}
.ux-pcard svg{width:100%;height:auto;max-width:210px;display:block}
.ux-pcap{font-family:'Fredoka',Inter,sans-serif;font-size:14px;font-weight:600;color:var(--ux-dark)}
.ux-pcard.on{border-color:var(--ux-blue);box-shadow:0 0 0 3px rgba(91,139,216,.28)}
.ux-pcard.ok{border-color:var(--ux-green);background:#eef7ea}
.ux-pcard.bad{border-color:var(--ux-red);background:#fdeeed}
.ux .done .ux-pcard,.ux.done .ux-pcard{cursor:default}
.ux.done .ux-pcard:hover{transform:none;box-shadow:none;border-color:var(--ux-line)}
.ux.done .ux-pcard.ok:hover{border-color:var(--ux-green)}

.ux-selbody{font-size:16.5px;line-height:2.35;color:var(--ux-dark);margin:2px 0 14px}
.ux-selbody p{margin:0 0 6px;line-height:2.35}
.ux-sel{font:600 15px/1.2 'Fredoka',Inter,sans-serif;color:var(--ux-dark);background:#fff;border:1.5px solid var(--ux-line);border-radius:8px;padding:6px 8px;margin:0 3px;vertical-align:middle;max-width:100%}
.ux-sel:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:2px}
.ux-sel.ok{border-color:var(--ux-green);background:#e8f4e4}
.ux-sel.bad{border-color:var(--ux-red);background:#fbe6e4}
.ux-sel[disabled]{opacity:.9}
.ux-seltab{width:100%;border-collapse:collapse;margin:2px 0 14px}
.ux-seltab th,.ux-seltab td{border:1px solid var(--ux-line);padding:9px 10px;text-align:center;font-size:15px}
.ux-seltab th{background:var(--ux-soft,#f4ede0);font-weight:600}
@media(max-width:560px){.ux-pick{grid-template-columns:1fr 1fr;gap:10px}.ux-selbody{font-size:15.5px}}
@media(prefers-reduced-motion:reduce){.ux-pcard{transition:none}.ux-pcard:hover{transform:none}}

/* ===== 26) Histogramm bauen (hist) ===== */
.ux-histbox{background:var(--ux-paper);border:1.5px solid var(--ux-line);border-radius:11px;padding:12px 10px 8px}
.ux-hsvg{width:100%;height:auto;display:block;max-width:640px;margin:0 auto;touch-action:none}
.ux-hsvg:focus-visible{outline:3px solid var(--ux-yellow);outline-offset:3px;border-radius:8px}
.ux-hgrid{stroke:var(--ux-line);stroke-width:1;stroke-dasharray:3 4}
.ux-haxisline{stroke:var(--ux-dark);stroke-width:1.8}
.ux-htick{font-family:Inter,sans-serif;font-size:12px;fill:#6b6156}
.ux-hlab{font-family:Inter,sans-serif;font-size:11.5px;fill:var(--ux-dark)}
.ux-haxis{font-family:Inter,sans-serif;font-size:12px;font-weight:600;fill:#6b6156}
.ux-hval{font-family:Inter,sans-serif;font-size:12px;font-weight:700;fill:var(--ux-blue-d)}
.ux-hrect{fill:var(--ux-blue);stroke:var(--ux-blue-d);stroke-width:1.4;transition:y .12s,height .12s}
.ux-hcap{fill:var(--ux-blue-d);opacity:.85;cursor:ns-resize}
.ux-hb{cursor:ns-resize}
.ux-hb:focus-visible{outline:none}
.ux-hb:focus-visible .ux-hcap{fill:var(--ux-yellow);opacity:1}
.ux-hb:focus-visible .ux-hrect{stroke:var(--ux-violet);stroke-width:2.4}
.ux-hrect.ok{fill:var(--ux-green);stroke:var(--ux-green-d)}
.ux-hrect.bad{fill:var(--ux-red);stroke:#96271e}
.ux-hread{margin-top:8px;font-family:Inter,sans-serif;font-size:13px;color:#6b6156;text-align:center}
.ux.done .ux-hb{cursor:default}
@media (prefers-reduced-motion: reduce){.ux-hrect{transition:none}}

/* ============================================================ Statistik-Widgets (dots, bars) */
.ux-dbox,.ux-bbox{background:#faf6ee;border:1px solid var(--rule,#e6ddcc);border-radius:12px;padding:10px 12px;margin:12px 0 8px;overflow-x:auto}
.ux-dsvg,.ux-bsvg{display:block;width:100%;min-width:420px;height:auto;touch-action:manipulation}
.ux-dsvg:focus-visible,.ux-bsvg:focus-visible{outline:2px solid #e79a3a;outline-offset:2px;border-radius:8px}
.ux-dot{cursor:pointer}
.ux-dot circle{transition:r .12s ease,stroke-width .12s ease}
.ux-dot:hover circle{r:9}
.ux-dot:focus-visible{outline:none}
.ux-dot:focus-visible circle{stroke:#e79a3a;stroke-width:3}
.ux-bar-g{cursor:pointer}
.ux-bar-g:focus-visible{outline:none}
.ux-bar-g:focus-visible rect:last-of-type{stroke:#e79a3a;stroke-width:2.6}
.ux-dstat,.ux-bstat{font-family:Inter,sans-serif;font-size:13.5px;line-height:1.75;color:#2f2f2f;background:#f4ede0;border-radius:9px;padding:8px 12px;margin-bottom:10px}
.ux-dhint{font-family:Inter,sans-serif;font-size:12.5px;color:#6b6257;margin:2px 0 0}
@media (prefers-reduced-motion:reduce){.ux-dot circle{transition:none}.ux-dot:hover circle{r:7.5}}
@media print{.ux-dbox,.ux-bbox{break-inside:avoid}}
.stat-fig{display:block;width:100%;max-width:640px;height:auto;margin:12px auto;background:#faf6ee;border:1px solid var(--rule,#e6ddcc);border-radius:12px;padding:8px}
.aufgabe-text .fakten.txt{margin:12px 0}

/* ====== 28) Einheitskreis-Zeiger (circ) — 2026-09-02 ====== */
.ux-cbox{background:var(--ux-paper); border:1.5px solid var(--ux-line); border-radius:12px; padding:10px 12px 6px; overflow-x:auto}
.ux-csvg{display:block; width:100%; max-width:420px; height:auto; margin:0 auto; touch-action:none; cursor:crosshair}
.ux-csvg:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:3px; border-radius:10px}
.ux-cgrid circle,.ux-cgrid line{stroke:#e0d6c6; stroke-width:1}
.ux-caxes line{stroke:#8a7f70; stroke-width:1.4}
.ux-carrow{fill:#8a7f70}
.ux-clab{font:600 13px/1 Inter,system-ui,sans-serif; fill:#6a6055}
.ux-clab.ok{fill:var(--ux-green); font-weight:700}
.ux-ctick{font:500 12px/1 Inter,system-ui,sans-serif; fill:#8a7f70}
.ux-carc{stroke:var(--ux-orange); stroke-width:2.6; stroke-linecap:round}
.ux-cproj line{stroke:var(--ux-blue); stroke-width:2.2; stroke-dasharray:5 4}
.ux-cproj line:first-child{stroke:var(--ux-green)}
.ux-cray{stroke:var(--ux-dark); stroke-width:2.6; stroke-linecap:round}
.ux-cdot{fill:var(--ux-violet); stroke:#fff; stroke-width:2}
.ux-cok{fill:none; stroke:var(--ux-green); stroke-width:3}
.ux-cread{margin-top:6px; text-align:center; font:600 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ux-dark)}
.ux-cjumps{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:8px}
.ux-cjump{font:600 13px/1 Inter,system-ui,sans-serif; padding:6px 11px; border-radius:999px;
  border:1.5px solid var(--ux-line); background:#fff; color:var(--ux-dark); cursor:pointer}
.ux-cjump:hover{background:var(--ux-paper)}
.ux-cjump:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:2px}

/* ====== 29) Sinuskurve: Stellen anklicken (wave) — 2026-09-02 ====== */
.ux-wbox{background:var(--ux-paper); border:1.5px solid var(--ux-line); border-radius:12px; padding:10px 12px 6px; overflow-x:auto}
.ux-wsvg{display:block; width:100%; min-width:460px; height:auto; touch-action:none; cursor:crosshair}
.ux-wsvg:focus-visible{outline:3px solid var(--ux-yellow); outline-offset:3px; border-radius:10px}
.ux-wgrid line{stroke:#e6ddcd; stroke-width:1}
.ux-waxes line{stroke:#8a7f70; stroke-width:1.4}
.ux-warrow{fill:#8a7f70}
.ux-wlab{font:600 13px/1 Inter,system-ui,sans-serif; fill:#6a6055}
.ux-wlab.ok{fill:var(--ux-green); font-weight:700}
.ux-wtick{font:500 12px/1 Inter,system-ui,sans-serif; fill:#8a7f70}
.ux-wcurve{stroke:var(--ux-red); stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round}
.ux-wref{stroke:#b9b0a3; stroke-width:2; stroke-dasharray:6 5}
.ux-wcursor line{stroke:var(--ux-violet); stroke-width:1.6; stroke-dasharray:4 4}
.ux-wcursor circle{fill:var(--ux-violet); stroke:#fff; stroke-width:2}
.ux-wok{fill:none; stroke:var(--ux-green); stroke-width:3}
.ux-wread{margin-top:6px; text-align:center; font:600 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ux-dark)}
@media(prefers-reduced-motion:reduce){.ux-cray,.ux-cdot,.ux-wcursor{transition:none}}
.ux-dsvg{max-width:660px;margin:0 auto}
.ux-bsvg{max-width:680px;margin:0 auto}

/* ---- bx: Boxplot bauen (Mathe K11 Stochastik 6.5) ---- */
.bx-task{font-family:Inter,sans-serif;font-size:14px;line-height:1.7;color:#2f2f2f;background:#f4ede0;border-radius:9px;padding:9px 13px;margin:0 0 12px}
.bx-stage{background:#faf6ee;border:1px solid #c9bb9a;border-radius:12px;padding:10px 10px 12px}
.bx-svg{width:100%;height:auto;display:block;touch-action:pan-y;cursor:pointer}
.bx-svg:focus-visible{outline:2px solid #e79a3a;outline-offset:2px;border-radius:8px}
.bx-mark circle{cursor:grab}
.bx-mark.fixed circle{cursor:default}
.bx-ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center}
.bx-grp{display:inline-flex;align-items:center;gap:3px}
.bx-sel,.bx-nudge{font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;color:#15294a;background:#fff;border:1.5px solid #c9bb9a;border-radius:8px;padding:5px 9px;cursor:pointer;line-height:1.2}
.bx-sel.on{background:#e79a3a;border-color:#b86a2c;color:#fff}
.bx-nudge{padding:5px 7px;color:#5b4f43}
.bx-sel:hover,.bx-nudge:hover{border-color:#2c5fb5}
.bx-sel:focus-visible,.bx-nudge:focus-visible{outline:2px solid #e79a3a;outline-offset:2px}
.bx-read{font-family:Inter,sans-serif;font-size:13px;line-height:1.7;color:#4a4239;margin-top:9px;text-align:center}
.ux.bx-w.ok .bx-stage{border-color:#4a7530}
.ux.bx-w.bad .bx-stage{border-color:#e2574c}
@media (max-width:640px){.bx-ctl{gap:7px}.bx-sel,.bx-nudge{font-size:11.5px;padding:4px 7px}}
@media print{.bx-stage{break-inside:avoid}.bx-ctl{display:none}}

/* vec mobil (2026-09-24): lange Beschriftung + breites Feld duerfen umbrechen */
@media(max-width:560px){.ux-vf{flex-wrap:wrap;max-width:100%}.ux-vl{white-space:normal}.ux-vin.wide{width:100%;max-width:212px}}