/* ===== mexXsoft REB 23.003 Rechner ===== */
.reb-app, .reb-modal{color-scheme:light;
  --reb-ink:#10241f; --reb-muted:#465248; --reb-line:#cdd8cc; --reb-bg:#f5f8f2;
  --reb-card:#ffffff; --reb-green:#69a42c; --reb-green-d:#4f8120; --reb-green-l:#eef4e1;
  --reb-blue:#2f6d8c; --reb-blue-l:#e6f0f4; --reb-accent:#e0922b; --reb-ink2:#1d3a32;
  --reb-rad:18px; --reb-sh:0 10px 30px rgba(16,36,31,.08);
}
.reb-app{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--reb-ink); line-height:1.5; max-width:1180px; margin:0 auto;
}
.reb-app *{box-sizing:border-box}

/* Toolbar */
.reb-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:22px}
.reb-search{flex:1 1 240px;position:relative;min-width:200px}
.reb-search input{width:100%;border:1px solid var(--reb-line);border-radius:12px;padding:12px 14px 12px 40px;font:inherit;font-size:15px;background:var(--reb-card);color:#10241f;color-scheme:light}
.reb-search input:focus{outline:none;border-color:var(--reb-green);box-shadow:0 0 0 3px rgba(105,164,44,.15)}
.reb-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--reb-muted)}
.reb-chips{display:flex;flex-wrap:wrap;gap:8px}
.reb-chip{border:1.5px solid var(--reb-line);background:var(--reb-card);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--reb-ink2);cursor:pointer;transition:.15s}
.reb-chip:hover{border-color:var(--reb-green)}
.reb-chip.on{background:var(--reb-green);border-color:var(--reb-green);color:#fff}

/* Grid of formula cards */
.reb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reb-tile{position:relative;background:var(--reb-card);border:1px solid var(--reb-line);border-radius:var(--reb-rad);padding:14px;cursor:pointer;transition:.18s;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column}
.reb-tile:hover{border-color:var(--reb-green);box-shadow:var(--reb-sh);transform:translateY(-3px)}
.reb-tile .reb-no{position:absolute;top:12px;left:12px;z-index:2;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--reb-green-d);background:var(--reb-green-l);border-radius:8px;padding:3px 9px}
.reb-tile.info .reb-no{color:var(--reb-blue);background:var(--reb-blue-l)}
.reb-thumb{position:relative;aspect-ratio:4/3;border-radius:12px;background:
   linear-gradient(180deg,#fbfdf8,#eef4e6);
   overflow:hidden;margin-bottom:11px;display:flex;align-items:center;justify-content:center}
.reb-thumb svg{width:100%;height:100%;display:block}
.reb-tile h4{font-size:14.5px;line-height:1.3;margin:0;color:var(--reb-ink)}
.reb-tile small{display:block;margin-top:3px;color:var(--reb-muted);font-size:12.5px}
.reb-badge-info{margin-top:9px;align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--reb-blue);background:var(--reb-blue-l);border-radius:7px;padding:3px 8px}

/* Detail modal */
.reb-modal{position:fixed;inset:0;z-index:99999;background:rgba(8,18,15,.82);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
.reb-modal.open{display:flex}
.reb-panel{background:#fff;color-scheme:light;color:var(--reb-ink);border-radius:22px;width:min(960px,100%);box-shadow:0 40px 90px rgba(0,0,0,.4);overflow:hidden;margin:auto}
.reb-phead{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;padding:22px 26px;background:#fff;border-bottom:2px solid var(--reb-line)}
.reb-phead .t b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#3c6b1e}
.reb-phead .t h3{margin:4px 0 0;font-size:24px;font-weight:800;color:#0c1f1a}
.reb-phead .t p{margin:7px 0 0;color:#3a4942;font-size:14.5px;line-height:1.45;max-width:60ch}
.reb-x{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:var(--reb-bg);color:var(--reb-ink);font-size:22px;line-height:1;cursor:pointer}
.reb-x:hover{background:var(--reb-green);color:#fff}
.reb-body{display:grid;grid-template-columns:1.2fr .9fr;gap:0}
.reb-canvas{position:relative;padding:22px;background:
   radial-gradient(circle at 1px 1px, rgba(16,36,31,.06) 1px, transparent 0) 0 0/22px 22px,
   linear-gradient(180deg,#ffffff,#f3f7ee);
   display:flex;align-items:center;justify-content:center;min-height:320px}
.reb-svg{width:100%;height:auto;max-height:420px}
.reb-form{padding:22px 24px;background:var(--reb-card);border-left:1px solid var(--reb-line)}
.reb-fields{display:flex;flex-direction:column;gap:13px}
.reb-field label{display:block;font-size:13.5px;font-weight:700;color:#13241f;margin-bottom:6px}
.reb-inwrap{position:relative;display:flex;align-items:center}
.reb-inwrap input{width:100%;border:1.5px solid var(--reb-line);border-radius:11px;padding:11px 44px 11px 13px;font:inherit;font-size:15.5px;color:#10241f;background:#fff;color-scheme:light}
.reb-inwrap input:focus{outline:none;border-color:var(--reb-green);box-shadow:0 0 0 3px rgba(105,164,44,.15)}
.reb-inwrap .u{position:absolute;right:13px;font-size:13px;color:#465248;font-weight:700}
.reb-expr input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* table input */
.reb-tbl{width:100%;border-collapse:collapse;margin-top:4px}
.reb-tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--reb-muted);text-align:left;padding:0 6px 6px;font-weight:700}
.reb-tbl td{padding:3px 4px}
.reb-tbl input{width:100%;border:1px solid var(--reb-line);border-radius:8px;padding:8px 9px;font:inherit;font-size:14px;color:#10241f;background:#fff;color-scheme:light}
.reb-tbl input:focus{outline:none;border-color:var(--reb-green)}
.reb-trow-del{border:0;background:transparent;color:var(--reb-muted);font-size:18px;cursor:pointer;line-height:1;padding:0 4px}
.reb-trow-del:hover{color:#c0392b}
.reb-addrow{margin-top:8px;border:1px dashed var(--reb-line);background:var(--reb-green-l);color:var(--reb-green-d);border-radius:10px;padding:9px;width:100%;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.reb-addrow:hover{border-color:var(--reb-green)}

/* results */
.reb-res{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.reb-rchip{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:13px;padding:13px 16px;background:var(--reb-green-l)}
.reb-rchip.vol{background:var(--reb-blue-l)}
.reb-rchip.len{background:#eef1ee}
.reb-rchip .rl{font-size:13.5px;font-weight:600;color:var(--reb-ink2)}
.reb-rchip .rv{font-size:22px;font-weight:800;color:var(--reb-green-d);letter-spacing:-.01em}
.reb-rchip.vol .rv{color:var(--reb-blue)}
.reb-rchip.len .rv{color:var(--reb-ink)}
.reb-rchip .rv small{font-size:13px;font-weight:700;color:var(--reb-muted);margin-left:3px}
.reb-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.reb-btn{border:0;border-radius:11px;padding:11px 16px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.reb-btn.primary{background:var(--reb-green);color:#fff}
.reb-btn.primary:hover{background:var(--reb-green-d)}
.reb-btn.ghost{background:#fff;border:1px solid var(--reb-line);color:var(--reb-ink2)}
.reb-btn.ghost:hover{border-color:var(--reb-green)}
.reb-btn.alt{background:var(--reb-green-l);color:var(--reb-green-d)}
.reb-btn.alt:hover{background:#e2eed0}
.reb-note{margin-top:16px;font-size:13px;color:#3a4942;line-height:1.55;border-top:1px solid var(--reb-line);padding-top:13px}
.reb-info-body{padding:26px;background:var(--reb-card);font-size:15px;color:var(--reb-ink2);line-height:1.6}
.reb-info-body .reb-svg{max-width:360px;margin:0 auto 18px;display:block}
.reb-copied{font-size:12.5px;color:var(--reb-green-d);font-weight:700;margin-left:8px}

/* SVG shape styling */
.reb-svg .reb-grid-bg{stroke:rgba(16,36,31,.06)}
.reb-shape{fill:url(#rebArea);stroke:var(--reb-green-d);stroke-width:2;stroke-linejoin:round}
.reb-shape.vol{fill:url(#rebVol);stroke:var(--reb-blue)}
.reb-vtx{fill:#fff;stroke:var(--reb-green-d);stroke-width:2}
.reb-aux{stroke:var(--reb-accent);stroke-width:1.6;stroke-dasharray:5 4;fill:none}
.reb-axis{stroke:var(--reb-muted);stroke-width:1.2}
.reb-dimtxt{font-size:13px;font-weight:700;fill:var(--reb-ink);text-anchor:middle;dominant-baseline:middle;font-family:Inter,sans-serif}
.reb-dimbg{fill:#fff;stroke:var(--reb-line);stroke-width:1}
.reb-rt{fill:none;stroke:var(--reb-accent);stroke-width:1.6}

@media(max-width:1000px){.reb-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.reb-grid{grid-template-columns:1fr 1fr}.reb-body{grid-template-columns:1fr}.reb-form{border-left:0;border-top:1px solid var(--reb-line)}}
@media(max-width:460px){.reb-grid{grid-template-columns:1fr}}


/* 3D-Bühne */
.reb-stage{width:100%;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}
.reb-stage svg{width:100%;height:auto;max-height:430px;display:block}
.reb-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12.5px;color:#3a4942;pointer-events:none;font-weight:600}

/* Einzelformel-Seite (inline, ohne Modal) */
.reb-inline{margin:0 auto;max-width:960px}
.reb-inline .reb-canvas{min-height:360px}