Cockpit: Vermögenskachel so groß wie ihre Nachbarn, Legende darunter

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

Changes.md

@@ -20,6 +20,11 @@
 - Eigenes SVG, keine Diagrammbibliothek. Die Farben stehen als Klasse am Element und
   folgen damit dem hellen wie dem dunklen Thema; jedes Balkenstück trägt ein `<title>`
   als Tooltip, ohne eine Zeile JavaScript.
+- Die Kachel ist so groß wie ihre Nachbarn: Der Ausgriff über zwei Rasterspalten
+  (`.kachel.breit`) und das engere Cockpit-Raster (`.kachelraster.dicht`) entfallen wieder.
+- Die Legende steht unter der Zeichnung statt daneben und in kleinerer Schrift (.74rem);
+  sie füllt so viele Spalten, wie die Kachel hergibt. Der Schalter teilt sich die erste
+  Zeile mit der Überschrift, damit er in der schmaleren Kachel oben rechts bleibt.
 
 ## Budgetplaner: drei Ansichten und Verteilen über das Zahnrad (11.08.2026)
 

docs/cockpit.md

@@ -70,14 +70,15 @@ mal einer Zehnerpotenz und schließt die Null immer ein. Jedes Balkenstück trä
 Die Maße stehen in echten Bildpunkten: Ein Balken ist 18 Punkte breit, zwischen zwei
 Monaten bleiben 3. Damit das auch auf dem Schirm so ankommt, trägt das `<svg>` Breite und
 Höhe als Attribute und wird **nicht** auf die Kachel gestreckt; `max-width: 100%` lässt es
-erst mitschrumpfen, wenn die Kachel schmaler wird als die Zeichnung.
+erst mitschrumpfen, wenn die Kachel schmaler wird als die Zeichnung – in der dreispaltigen
+Kachel also auf gut 90 Prozent.
 
-Die Legende führt nur Farbe und Kontoname und steht neben der Zeichnung – die schmale
-Zeichnung ließe sonst die halbe Kachel leer. 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`). Unterhalb von 820 px fällt der
-Ausgriff weg, sonst erzwänge er im einspaltigen Raster einen waagerechten Rollbalken; dort
-rutscht auch die Legende unter die Zeichnung.
+Die Kachel ist eine gewöhnliche Kachel des Cockpit-Rasters, so breit wie ihre Nachbarn:
+Ein Ausgriff über zwei Spalten machte sie zum Fremdkörper zwischen den anderen dreien.
+
+Die Legende führt nur Farbe und Kontoname und steht darunter, in kleinerer Schrift und so
+vielen Spalten, wie die Kachel hergibt (`auto-fill`). Die Beträge stehen am Balken im
+Tooltip und in der Kachel *Kontostände*; in der Legende kosteten sie nur Breite.
 
 ## Tests
 

public/static/app.css

@@ -264,10 +264,6 @@ 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);
@@ -278,28 +274,22 @@ form.inline { display: inline; margin: 0; }
 
 .kachel.einzeln { max-width: 640px; }
 
-/* Ein Diagramm mit zwölf Balken braucht mehr als eine Spalte – aber nicht die
-   ganze Zeile: über zwei Spalten bleibt es lesbar und die Kachel handlich. Unter
-   der Umbruchbreite muss der Ausgriff weg, sonst erzwänge er eine zweite Spalte,
-   die dort nicht mehr hineinpasst (siehe Media Query am Dateiende). */
-.kachel.breit { grid-column: span 2; }
-
 .kachel header { margin-bottom: .6rem; }
 
 .kachel header.mitschalter {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
-    gap: 1rem;
+    gap: .5rem 1rem;
     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;
-}
+/* Der Schalter teilt sich die Zeile mit der Überschrift und bleibt oben rechts;
+   der erklärende Satz nimmt die ganze nächste Zeile. Stünde er in derselben
+   Zeile, drückte er den Schalter in einer schmalen Kachel nach unten. */
+.kachel header.mitschalter > h2 { min-width: 0; }
+
+.kachel header.mitschalter > .kachelhinweis { flex: 1 0 100%; margin: 0; }
 
 .kachelhinweis {
     margin: .25rem 0 0;
@@ -373,12 +363,13 @@ form.inline { display: inline; margin: 0; }
 
 /* Das SVG bringt seine Maße als Attribute mit und wird nicht auf die Kachel
    gestreckt: Nur so sind die 18 Punkte Balkenbreite auch 18 Bildpunkte. Erst
-   wenn die Kachel schmaler wird als die Zeichnung, skaliert sie mit. */
+   wenn die Kachel schmaler wird als die Zeichnung, skaliert sie mit – die
+   Legende darunter nimmt dann die volle Kachelbreite. */
 .diagrammbereich {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     align-items: flex-start;
-    gap: .5rem 1.5rem;
+    gap: .6rem;
 }
 
 .diagramm {
@@ -417,30 +408,30 @@ form.inline { display: inline; margin: 0; }
 
 .diagramm-beschriftung.schwach { opacity: .7; }
 
-/* Neben der Zeichnung statt darunter: Die schmale Zeichnung ließe sonst die
-   halbe Kachel leer. */
+/* Unter der Zeichnung und in kleiner Schrift: So bleibt die Kachel so breit wie
+   ihre Nachbarn, und zwölf Kontonamen passen in zwei Spalten darunter. */
 .diagrammlegende {
     list-style: none;
     margin: 0;
     padding: 0;
-    flex: 1 1 11rem;
+    align-self: stretch;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
-    gap: .1rem 1.2rem;
-    font-size: .88rem;
+    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+    gap: 0 1rem;
+    font-size: .74rem;
     align-content: start;
 }
 
 .diagrammlegende li {
     display: flex;
     align-items: center;
-    gap: .5rem;
-    padding: .15rem 0;
+    gap: .4rem;
+    padding: .1rem 0;
 }
 
 .legendenfarbe {
-    width: .8rem;
-    height: .8rem;
+    width: .65rem;
+    height: .65rem;
     border-radius: 2px;
     background: var(--farbe);
     flex: none;
@@ -1021,10 +1012,6 @@ body.schlicht {
 @media (max-width: 820px) {
     .rahmen { grid-template-columns: 1fr; }
 
-    /* Einspaltiges Raster: Ein Ausgriff über zwei Spalten erzwänge hier eine
-       zweite Spalte und damit den waagerechten Rollbalken. */
-    .kachel.breit { grid-column: auto; }
-
     .seitenleiste {
         position: static;
         height: auto;

src/Views/cockpit/index.php

@@ -14,14 +14,10 @@ include __DIR__ . '/../layout/kopf.php';
     <span class="tab aktiv">Cockpit</span>
 </div>
 
-<div class="kachelraster dicht">
-    <section class="kachel breit">
+<div class="kachelraster">
+    <section class="kachel">
         <header class="mitschalter">
-            <div>
             <h2>Vermögensentwicklung</h2>
-                <p class="kachelhinweis">Kontostände der letzten zwölf Monate, je Monatsende
-                    gestapelt – ein Farbton pro Konto.</p>
-            </div>
 
             <?php /* Ein Knopf, kein Ankreuzfeld: Ohne Inline-Skript könnte ein
                      Ankreuzfeld das Formular nicht selbst abschicken, und die
@@ -35,6 +31,9 @@ include __DIR__ . '/../layout/kopf.php';
                     <span class="schaltertext">nur aktive</span>
                 </button>
             </form>
+
+            <p class="kachelhinweis">Kontostände der letzten zwölf Monate, je Monatsende
+                gestapelt – ein Farbton pro Konto.</p>
         </header>
         <?php if (!$vermoegen['hatWerte']): ?>
             <p class="platzhalter">