Fix: Reset-SVG per appendChild, Satz-Zeile als kompaktes 5-Spalten-Grid

- Reset-Icon korrekt eingefuegt (war '[object HTMLSpanElement]' weil das
  SVG-Element als Text-Argument an el() ging)
- Satz-Zeile: display:grid mit auto 1fr 1fr auto auto, kg/reps-Inputs
  flexibel (1fr, min-width 0), Buttons als kleine Icons (26px) - passt
  komplett auf ein Handy-Display ohne horizontales Scrollen
- Label zurueck auf 'Set n' (klarer als 'S1')
- Tests: 169 Checks gruen (39+18+52+32+28)

app.js

@@ -910,7 +910,7 @@ function buildSetRow(a, model, ex, entry, i) {
   chk.type = "button";
   chk.setAttribute("aria-pressed", entry.done ? "true" : "false");
   chk.setAttribute("aria-label", t("set_done_aria", { n: i + 1 }));
-  chk.appendChild(el("span", "set-check-label", "S"));
+  chk.appendChild(el("span", "set-check-label", "Set"));
   chk.appendChild(el("span", "set-check-num", String(i + 1)));
   chk.appendChild(el("span", "set-check-box", entry.done ? "✓" : ""));
   chk.addEventListener("click", () => toggleSetDone(a, model, ex.key, i, chk));
@@ -932,9 +932,10 @@ function buildSetRow(a, model, ex, entry, i) {
   entry.wInput = wBox.querySelector("input");
   entry.rInput = rBox.querySelector("input");
 
-  const reset = el("button", "icon-btn", resetSvg());
+  const reset = el("button", "icon-btn", "");
   reset.type = "button";
   reset.setAttribute("aria-label", t("reset_set_title"));
+  reset.appendChild(resetSvg());
   reset.addEventListener("click", () => resetSet(a, model, ex.key, i, entry));
   row.appendChild(reset);
 

styles.css

@@ -251,16 +251,15 @@ h3 { font-size: 15px; font-weight: 700; }
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   border: 2px solid var(--border);
   background: transparent;
   color: var(--muted);
   font: inherit;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1;
   cursor: pointer;
-  flex-shrink: 0;
 }
 
 .icon-btn:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-hover); }
@@ -438,9 +437,8 @@ h3 { font-size: 15px; font-weight: 700; }
 .set-rows { padding: 0; }
 
 .set-row {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr 1fr auto auto;
   gap: 6px;
   align-items: center;
   padding: 6px 8px;

tests/test_ui.js

@@ -122,7 +122,7 @@ async function main() {
     const firstBlock = () => gymCard().querySelector(".ex-block");
     const chk1 = () => firstBlock().querySelectorAll(".set-check")[0];
     check("Set-Button mit Label 'Set' + Box",
-      chk1().querySelector(".set-check-label").textContent === "S"
+      chk1().querySelector(".set-check-label").textContent === "Set"
       && !!chk1().querySelector(".set-check-box"));
     check("Set-Button: Box leer (nicht abgehakt)", chk1().querySelector(".set-check-box").textContent === "");
     firstBlock().querySelectorAll(".set-check")[2].click();