The poster wall gets rooms, not labels: three real sections

Oliver: the group headings were "sehr klein". Each group is a section now with
its posters inside it — the announcement face one size under the screen title,
a rule closing the header, and an inset band down the left. The canonical room
wears the primary's colour, because it is the one that moves your career.

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

src/main.js

@@ -145,13 +145,16 @@ function buildSub(top) {
 // the top posters are rebuilt on every visit so the LAST tag follows what was actually played
 function buildTops() {
   modeList.innerHTML = '';
+  let shelf = modeList;                       // posters land in the section they belong to
   for (const t of MENU) {
-    // a GROUP row is the heading over the posters under it — what that shelf is for (config MENU)
+    // A GROUP ROW OPENS A SECTION (2026-08-31, Oliver: the headings "sind sehr klein, vielleicht
+    // können wir daraus richtige sektionen machen"). The posters go INSIDE it — a heading that
+    // merely floats above a stack is a label, and the wall needs three rooms, not three labels.
     if (t.group) {
-      const h = document.createElement('div');
-      h.className = 'mgroup';
-      h.innerHTML = `<b>${t.group}</b><i>${t.sub}</i>`;
-      modeList.appendChild(h);
+      shelf = document.createElement('section');
+      shelf.className = 'mgroup';
+      shelf.innerHTML = `<header><b>${t.group}</b><i>${t.sub}</i></header>`;
+      modeList.appendChild(shelf);
       continue;
     }
     const b = banner(t.mode ? modeOf(t.mode) : t, 'mode', topOf(pickedMode) === t);
@@ -165,7 +168,7 @@ function buildTops() {
       summary();
       go(t.diffs || t.kids ? 'modesub' : 'setup');
     });
-    modeList.appendChild(b);
+    shelf.appendChild(b);
   }
 }
 buildTops();