feat(rechner): Grundwerte-Karten mit grossen Credits-Saetzen ueber dem Rechner

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/static/js/app.js

@@ -1051,6 +1051,6 @@ document.addEventListener("DOMContentLoaded", () => {
 // --- Verbrauchsrechner nachladen (eigenstaendiges Modul, siehe rechner.js) ---
 (function () {
   var s = document.createElement("script");
-  s.src = "/static/js/rechner.js?v=20260724a";
+  s.src = "/static/js/rechner.js?v=20260724b";
   document.head.appendChild(s);
 })();

src/static/js/rechner.js

@@ -198,9 +198,16 @@
   }
 
   var STYLES =
-    ".vr-kopf { margin-bottom: 20px; }" +
+    ".vr-kopf { margin-bottom: 16px; }" +
     ".vr-kopf h2 { margin: 0 0 4px; font-size: 20px; }" +
-    ".vr-kopf p { margin: 0; font-size: 13px; color: var(--text-secondary); }" +
+    ".vr-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 10px; }" +
+    ".vr-karte { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }" +
+    ".vr-karte-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 6px; }" +
+    ".vr-karte-titel { font-size: 14px; font-weight: 600; margin-bottom: 6px; }" +
+    ".vr-karte-wert { font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1.1; }" +
+    ".vr-karte-wert small { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }" +
+    ".vr-karte-hinweis { font-size: 12px; color: var(--text-muted); margin-top: 6px; }" +
+    ".vr-basis { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px; }" +
     ".vr-calc { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }" +
     "@media (max-width: 900px) { .vr-calc { grid-template-columns: 1fr; } }" +
     ".vr-block { margin-bottom: 24px; }" +
@@ -237,11 +244,26 @@
     ".vr-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }" +
     ".vr-sep { margin: 12px 0; border: none; border-top: 1px solid var(--border); }";
 
+  function karteHtml(kicker, titel, credits, hinweis) {
+    return '<div class="vr-karte">' +
+      '<div class="vr-karte-kicker">' + kicker + "</div>" +
+      '<div class="vr-karte-titel">' + titel + "</div>" +
+      '<div class="vr-karte-wert">' + credits + " <small>Credits</small></div>" +
+      '<div class="vr-karte-hinweis">' + hinweis + "</div>" +
+    "</div>";
+  }
+
   function sektionHtml() {
     return '<div class="vr-kopf">' +
       "<h2>Verbrauchsrechner</h2>" +
-      "<p>Sätze = Live-Lauf 45, Recherche anlegen 120, Aktualisierung 40, Nebenkosten 1 Credit. 1 Credit = 0,20 USD Selbstkosten.</p>" +
       "</div>" +
+      '<div class="vr-karten">' +
+        karteHtml("Live-Monitoring", "Jeder Lauf", 45, "Anlegen und jede Aktualisierung einer Live-Lage") +
+        karteHtml("Recherche", "Anlegen", 120, "Der erste Lauf fährt automatisch drei Durchläufe zu je 40") +
+        karteHtml("Recherche", "Jede Aktualisierung", 40, "Wird von Hand gestartet und zählt als einzelner Durchlauf") +
+        karteHtml("Nebenkosten", "Je Aufruf", 1, "Chat oder Beschreibungs-Assistent") +
+      "</div>" +
+      '<p class="vr-basis">1 Credit = 0,20 USD Selbstkosten.</p>' +
       '<div class="vr-calc">' +
         "<div>" +
           '<div class="vr-block"><h3 class="vr-block-title">Live-Monitoring</h3><div id="vr-liste-live"></div>' +