/* REB-Massenrechner – nativ eingebettet, Farbwelt aus dem Theme (:root) geerbt.
   Tool-spezifische Variablen werden hier gemappt. */
#rebm{
  --paper:transparent; --card:#fff;
  --ink-2:var(--muted); --ink-3:#8a978d;
  --grid:#e9eee7; --amber-l:var(--green-bright);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --r:12px;
  font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.5;
}
#rebm *{box-sizing:border-box}
#rebm button{font-family:inherit;cursor:pointer}
#rebm input,#rebm textarea,#rebm select{font-family:inherit;font-size:inherit}
#rebm .rebm-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 22px 50px -32px rgba(20,40,12,.4)}
#rebm .rebm-foot{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}
#rebm input,#rebm textarea,#rebm select{font-family:inherit;font-size:inherit}
#rebm .rebm-wrap{display:grid;grid-template-columns:264px 1fr;min-height:560px}
@media(max-width:980px){
#rebm .rebm-wrap{grid-template-columns:1fr}
}
#rebm aside{background:var(--card);border-right:1px solid var(--line);padding:18px 0 28px}
#rebm .grp{margin-top:14px}
#rebm .grp h3{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:0 20px;margin-bottom:6px}
#rebm .fbtn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  text-align:left;padding:8px 20px;color:var(--ink-2);font-size:14px;border-left:3px solid transparent}
#rebm .fbtn:hover{background:#f4f8ee;color:var(--ink)}
#rebm .fbtn.active{background:var(--green-l);color:var(--navy-d);font-weight:600;border-left-color:var(--amber)}
#rebm .fbtn .no{font-family:var(--mono);font-size:12px;color:var(--ink-3);width:32px;flex:none}
#rebm .fbtn.active .no{color:var(--amber);font-weight:700}
#rebm .rebm-main{padding:24px 28px 40px;max-width:1280px}
#rebm .crumb{font-size:12.5px;font-family:var(--mono);color:var(--ink-3);margin-bottom:4px}
#rebm .rebm-main h2{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
#rebm .fdesc{color:var(--ink-2);font-size:14px;margin-bottom:20px;max-width:720px}
#rebm .cols{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:22px;align-items:start}
@media(max-width:1100px){
#rebm .cols{grid-template-columns:1fr}
}
#rebm .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
#rebm .card h4{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:13px 18px 0}
#rebm .card .body{padding:14px 18px 18px}
#rebm .field{margin-bottom:13px}
#rebm .field label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;
  color:var(--ink-2);margin-bottom:5px}
#rebm .field label .u{font-family:var(--mono);font-weight:500;color:var(--ink-3);font-size:12px}
#rebm .field input[type=text],#rebm .field textarea,#rebm .field select{width:100%;border:1.5px solid var(--line);border-radius:7px;padding:8px 11px;
  font-family:var(--mono);font-size:14px;background:#fbfcf8;color:var(--ink);
  transition:border-color .12s}
#rebm .field select{font-family:var(--sans)}
#rebm .field input:focus,#rebm .field textarea:focus,#rebm .field select:focus{outline:none;border-color:var(--navy);background:#fff}
#rebm .field textarea{resize:vertical;min-height:150px;line-height:1.6}
#rebm .hint{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.45}
#rebm .hint code{font-family:var(--mono);background:#eef3ea;padding:1px 5px;border-radius:4px;font-size:11.5px}
#rebm .err{color:#b3261e;font-size:12.5px;margin-top:6px;display:none}
#rebm .err.show{display:block}
#rebm .draw{position:relative}
#rebm .drawhead{display:flex;align-items:center;justify-content:space-between;padding-right:14px}
#rebm .viewtabs{display:none;gap:4px;background:#eef3ea;border-radius:8px;padding:3px;margin-top:10px}
#rebm .viewtabs.show{display:flex}
#rebm .viewtabs button{border:0;background:none;font-size:12.5px;font-weight:700;color:var(--ink-3);
  padding:4px 14px;border-radius:6px;letter-spacing:.03em}
#rebm .viewtabs button.active{background:#fff;color:var(--navy-d);box-shadow:0 1px 3px rgba(18,45,87,.14)}
#rebm .draw svg{display:block;width:100%;height:auto;background:
  repeating-linear-gradient(0deg,transparent,transparent 19px,var(--grid) 19px,var(--grid) 20px),
  repeating-linear-gradient(90deg,transparent,transparent 19px,var(--grid) 19px,var(--grid) 20px),
  #fff}
#rebm .draw svg.hide{display:none}
#rebm #canvas3d{display:none;width:100%;border-radius:6px;touch-action:none;cursor:grab;
  background:linear-gradient(180deg,#f8faf4 0%,var(--green-l) 100%)}
#rebm #canvas3d.show{display:block}
#rebm .draw .tag{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:11px;
  color:var(--ink-3);background:rgba(255,255,255,.88);padding:2px 8px;border-radius:5px;
  border:1px solid var(--line);max-width:80%}
#rebm .hint3d{display:none;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  text-align:right;margin-top:6px}
#rebm .hint3d.show{display:block}
#rebm .results{margin-top:22px}
#rebm .resgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
#rebm .res{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px 13px;
  border-top:3px solid var(--navy)}
#rebm .res.main{border-top-color:var(--amber)}
#rebm .res .lbl{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
#rebm .res .val{font-family:var(--mono);font-size:25px;font-weight:700;color:var(--navy-xd);margin-top:3px;
  letter-spacing:-.01em;word-break:break-all}
#rebm .res .val small{font-size:14px;color:var(--ink-3);font-weight:500;margin-left:4px}
#rebm .ansatz{background:var(--navy-xd);color:#e3eed3;border-radius:var(--r);padding:15px 18px;
  font-family:var(--mono);font-size:13.5px;line-height:1.75;position:relative;overflow-x:auto}
#rebm .ansatz .alabel{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#9ab07f;margin-bottom:6px}
#rebm .ansatz .aval{white-space:pre-wrap;color:#fff}
#rebm .ansatz .aval .hl{color:var(--amber-l)}
#rebm .copy{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.1);color:#d6e5bf;
  border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:12px;padding:5px 11px;
  font-family:var(--sans);font-weight:600}
#rebm .copy:hover{background:rgba(255,255,255,.18)}
#rebm .copy.done{background:#0e7c4a;border-color:#0e7c4a;color:#fff}
#rebm .rebm-foot{padding:18px 28px;color:var(--ink-3);font-size:12px;border-top:1px solid var(--line);
  font-family:var(--mono)}
