feat(responsive): Breakpoints für 375–1920 px

Der Prototyp war auf Schreibtischbreiten gebaut. Bei 375 px lief die Seite um
306 px seitlich über, und dem Inhalt blieben 135 px, weil die Seitenleiste ihre
vollen 240 px behielt.

Seitenleiste (an HiveGrid abgeglichen, nicht erfunden):
- Unterhalb 768 px faehrt sie als Schublade ueber den Inhalt. Derselbe
  Breakpoint, den die Software als MOBILE_BREAKPOINT fuehrt.
- Hamburger links in der Kopfzeile, FeatherMenu, 32x32, md:hidden, vor dem
  Breadcrumb — wie SubframeAppShell ihn rendert.
- Abdeckung dahinter, Escape schliesst, Fokus wandert beim Oeffnen auf den
  ersten Eintrag und kehrt beim Schliessen zum Ausloeser zurueck.
- Fokusfalle mit Tab und Umschalt+Tab: Der Rahmen traegt role=dialog und
  aria-modal, ohne Falle waere das gegenueber einem Screenreader unwahr.
- Der Einklapp-Knopf ist unterhalb md ausgeblendet. Er ragt bauartbedingt
  17 px nach rechts heraus und blieb sonst als angeschnittener, wirkungsloser
  Rest bei x = -16 am Bildrand stehen — der gemeldete Fehler.

Inhalte: Raster einspaltig ab 375 px, Seitenkopf mit Aktionen unter dem Titel
und Icon-only, Zeitraum-Segment und Reiterstreifen waagerecht scrollend statt
umbrechend (ein Segment ueber zwei Zeilen liest sich als zwei Steuerelemente),
Filter-Panel auf volle Zeilenbreite, Tabellen mit eigenem Scrollbereich.

Zwei abgeschnittene Fehler mitbehoben, die der Prueferer nicht sieht:
- KPI-Label lief bei 1280 px um 5 px aus seinem Kasten; bricht jetzt um. Die
  Karte wird dadurch eine Zeile hoeher — der Preis fuer eine vollstaendig
  lesbare Beschriftung.
- Randmarken der Auslastungsachse ragten je rund 10 px ueber die Spur. In sehr
  schmalen Karten entfaellt die Achse ganz; dort bleibt nur rund 40 px Spur,
  auf der selbst zwei Marken aneinanderstossen.

verify-layout deckt jetzt 375-1920 px ab (vorher ab 1024) und meldet zusaetzlich
Seitenueberlauf: ein waagerechter Scrollbalken auf Dokumentebene ist immer ein
Fehler, nie ein Kompromiss. 7 Seiten x 9 Breiten gruen.

Ab 1024 px ist der abgenommene Stand unveraendert — numerisch geprueft ueber die
Bounding-Boxen aller Karten, Raster, Tabellen und Kopfelemente.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX

scripts/verify-layout.mjs

@@ -27,7 +27,10 @@ const SEITEN = [
   "/analytics/team",
   "/komponenten",
 ];
-const BREITEN = [1024, 1152, 1280, 1366, 1440, 1600, 1920];
+// Von Handy bis großem Schirm. Die schmalen Breiten sind die interessanten:
+// Dort fährt die Seitenleiste über den Inhalt, das Raster wird einspaltig und
+// die Filterleiste bricht um.
+const BREITEN = [375, 414, 640, 768, 834, 1024, 1280, 1440, 1920];
 const MIN_ABSTAND = 8;
 
 const EXE =
@@ -89,6 +92,11 @@ const messen = (MIN) => {
     }
   }
 
+  // Die Seite selbst darf nie seitlich scrollen — ein waagerechter
+  // Scrollbalken auf Dokumentebene ist immer ein Fehler, kein Kompromiss.
+  const doc = document.documentElement;
+  const seitenUeberlauf = doc.scrollWidth > doc.clientWidth + 1 ? doc.scrollWidth - doc.clientWidth : 0;
+
   // Text, der aus seinem eigenen Kasten läuft
   const ueberlauf = [...document.querySelectorAll("body *")]
     .filter((el) => {
@@ -99,7 +107,7 @@ const messen = (MIN) => {
     })
     .map((el) => ({ text: el.textContent.trim().slice(0, 30), wo: pfad(el), um: el.scrollWidth - el.clientWidth }));
 
-  return { treffer, ueberlauf };
+  return { treffer, ueberlauf, seitenUeberlauf };
 };
 
 const browser = await chromium.launch({ executablePath: EXE });
@@ -115,7 +123,18 @@ for (const breite of BREITEN) {
       process.exit(1);
     }
     await seite.waitForTimeout(500);
-    const { treffer, ueberlauf } = await seite.evaluate(messen, MIN_ABSTAND);
+    const { treffer, ueberlauf, seitenUeberlauf } = await seite.evaluate(messen, MIN_ABSTAND);
+    if (seitenUeberlauf > 0) {
+      const key = `S|${pfad}|${breite}`;
+      gesammelt.set(key, {
+        art: "Seitenüberlauf",
+        text: `${pfad} läuft um ${seitenUeberlauf}px seitlich über`,
+        wo: "document",
+        um: seitenUeberlauf,
+        seiten: new Set([pfad]),
+        breiten: new Set([breite]),
+      });
+    }
     for (const t of treffer) {
       const key = `K|${t.a}|${t.b}|${t.wo}`;
       if (!gesammelt.has(key)) gesammelt.set(key, { art: "Kollision", ...t, seiten: new Set(), breiten: new Set() });
@@ -136,9 +155,12 @@ await browser.close();
 
 const liste = [...gesammelt.values()].sort((a, b) => (a.luecke ?? -99) - (b.luecke ?? -99));
 for (const f of liste) {
-  const kopf = f.art === "Kollision"
-    ? `${f.ueberlappt ? "ÜBERLAPPT" : "zu eng"} (${f.luecke}px): "${f.a}" ⟷ "${f.b}"`
-    : `ÜBERLAUF (+${f.um}px): "${f.text}"`;
+  const kopf =
+    f.art === "Kollision"
+      ? `${f.ueberlappt ? "ÜBERLAPPT" : "zu eng"} (${f.luecke}px): "${f.a}" ⟷ "${f.b}"`
+      : f.art === "Seitenüberlauf"
+        ? `SEITE SCROLLT (+${f.um}px): ${f.text}`
+        : `ÜBERLAUF (+${f.um}px): "${f.text}"`;
   console.log(`  ${kopf}`);
   console.log(`      ${f.wo}`);
   console.log(`      ${[...f.seiten].join(" ")} · ${[...f.breiten].join(" ")}`);
@@ -148,4 +170,4 @@ if (liste.length) {
   console.error(`\n✗ ${liste.length} Layoutfehler. Mindestabstand ist ${MIN_ABSTAND} px (Carbon $spacing-03).`);
   process.exit(1);
 }
-console.log(`✓ Kein kollidierender oder überlaufender Text — ${SEITEN.length} Seiten × ${BREITEN.length} Breiten.`);
+console.log(`✓ Kein kollidierender Text, kein Überlauf — ${SEITEN.length} Seiten × ${BREITEN.length} Breiten (${BREITEN[0]}–${BREITEN.at(-1)} px).`);