Cockpit: Legende ohne Beträge, Kachel ein Viertel schmaler

Die Beträge stehen am Balken im Tooltip und in der Kachel Kontostände –
in der Legende kosteten sie nur Breite. Ohne sie kommen die Namen mit
schmalen Spalten aus, und die Kachel greift im engeren Cockpit-Raster
über zwei Spalten statt über zwei breite: 602 statt 808 Pixel.

Dazu zwei Anpassungen an die schmalere Kachel: Der Kopftext gibt nach,
damit der Schalter oben rechts stehen bleibt, und die Schrift im SVG
wächst, weil sie mit dem viewBox schrumpft.

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

docs/cockpit.md

@@ -63,6 +63,12 @@ Die Achse rundet über `Vermoegensentwicklung::skala()` auf Schritte von 1, 2, 2
 mal einer Zehnerpotenz und schließt die Null immer ein. Jedes Balkenstück trägt ein
 `<title>` mit Konto, Monat und Betrag – das ist der Tooltip, ohne eine Zeile JavaScript.
 
+Die Legende führt nur Farbe und Kontoname. Die Beträge stehen am Balken im Tooltip und in
+der Kachel *Kontostände*; in der Legende kosteten sie nur Breite. Die Kachel greift über
+zwei Spalten des Cockpit-Rasters (`.kachelraster.dicht`) – schmal genug, um die übrigen
+Kacheln danebenstehen zu lassen, breit genug für zwölf Balken. Unterhalb von 820 px fällt
+der Ausgriff weg, sonst erzwänge er im einspaltigen Raster einen waagerechten Rollbalken.
+
 ## Tests
 
 * `tests/13_VermoegensentwicklungTest.php` – Zeitraum, Fortschreibung der Stände,

public/static/app.css

@@ -264,6 +264,10 @@ form.inline { display: inline; margin: 0; }
     gap: 1rem;
 }
 
+/* Engere Spalten für das Cockpit: Die Diagrammkachel greift über zwei davon und
+   bleibt damit schmal, ohne dass eine Lücke zur Nachbarkachel entsteht. */
+.kachelraster.dicht { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
+
 .kachel {
     background: var(--flaeche);
     border: 1px solid var(--rand);
@@ -290,6 +294,13 @@ form.inline { display: inline; margin: 0; }
     flex-wrap: wrap;
 }
 
+/* Der Text gibt nach, damit der Schalter oben rechts stehen bleibt und nicht
+   unter die Überschrift rutscht; erst ganz schmal bricht die Zeile um. */
+.kachel header.mitschalter > div {
+    flex: 1 1 11rem;
+    min-width: 0;
+}
+
 .kachelhinweis {
     margin: .25rem 0 0;
     color: var(--text-gedaempft);
@@ -379,11 +390,13 @@ form.inline { display: inline; margin: 0; }
     stroke-width: 1.5;
 }
 
+/* Die Schrift skaliert mit dem viewBox: In der schmalen Kachel schrumpft sie um
+   ein Viertel, deshalb hier größer als im Fließtext angesetzt. */
 .diagramm-achse,
 .diagramm-beschriftung {
     fill: var(--text-gedaempft);
     font-family: var(--schrift);
-    font-size: 11px;
+    font-size: 14px;
 }
 
 .diagramm-achse { font-family: var(--schrift-zahl); }
@@ -395,7 +408,7 @@ form.inline { display: inline; margin: 0; }
     margin: .9rem 0 0;
     padding: 0;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
     gap: .1rem 1.2rem;
     font-size: .88rem;
 }
@@ -421,12 +434,6 @@ form.inline { display: inline; margin: 0; }
     white-space: nowrap;
 }
 
-.legendenwert {
-    margin-left: auto;
-    font-family: var(--schrift-zahl);
-    font-variant-numeric: tabular-nums;
-}
-
 /* ── Ein/Aus-Schalter ────────────────────────────────────────────────────────
 
    Die Bahn mit dem laufenden Knopf, wie man ihn von Mobilgeräten kennt. Ein

src/Views/cockpit/index.php

@@ -14,7 +14,7 @@ include __DIR__ . '/../layout/kopf.php';
     <span class="tab aktiv">Cockpit</span>
 </div>
 
-<div class="kachelraster">
+<div class="kachelraster dicht">
     <section class="kachel breit">
         <header class="mitschalter">
             <div>

src/Views/cockpit/vermoegensdiagramm.php

@@ -49,7 +49,7 @@ $hoehe  = 250;
 $links  = 82;
 $rechts = 10;
 $oben   = 12;
-$unten  = 34;
+$unten  = 40;
 
 $plotB  = $breite - $links - $rechts;
 $plotH  = $hoehe - $oben - $unten;
@@ -121,10 +121,10 @@ $zeitraum = $monate[0]['kuerzel'] . ' ' . $monate[0]['jahrKurz']
             </rect>
         <?php endforeach; ?>
 
-        <text class="diagramm-beschriftung" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 14 ?>"
+        <text class="diagramm-beschriftung" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 22 ?>"
               text-anchor="middle"><?= View::h($monat['kuerzel']) ?></text>
         <?php if ($monat['monat'] === 1 || $nummer === 0): ?>
-            <text class="diagramm-beschriftung schwach" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 3 ?>"
+            <text class="diagramm-beschriftung schwach" x="<?= $mitte($nummer) ?>" y="<?= $hoehe - 6 ?>"
                   text-anchor="middle"><?= View::h($monat['jahrKurz']) ?></text>
         <?php endif; ?>
     <?php endforeach; ?>
@@ -132,12 +132,11 @@ $zeitraum = $monate[0]['kuerzel'] . ' ' . $monate[0]['jahrKurz']
 
 <ul class="diagrammlegende">
     <?php foreach ($konten as $index => $konto): ?>
+        <?php /* Nur Farbe und Name: Die Beträge stehen am Balken im Tooltip und in
+                 der Kachel „Kontostände“ – in der Legende kosteten sie nur Breite. */ ?>
         <li>
             <span class="legendenfarbe <?= $serie($index) ?>" aria-hidden="true"></span>
             <span class="legendenname"><?= View::h($konto['name']) ?></span>
-            <span class="legendenwert <?= View::betragKlasse($konto['werte'][$anzahl - 1]) ?>">
-                <?= View::betrag($konto['werte'][$anzahl - 1]) ?>
-            </span>
         </li>
     <?php endforeach; ?>
 </ul>