Die Höhe des Aufmachers ist jetzt einstellbar

Vier Stufen unter Einstellungen → Verwaltung → Übersicht: niedrig, mittel,
hoch, sehr hoch. Mittel ist, was gestern fest verdrahtet war.

**Keine Pixelzahl.** Eine einzustellen hiesse, sie an jedem Bildschirm neu
einzustellen — der Aufmacher misst sich an der Fensterhöhe, nicht an einer
festen Grösse. Gemessen bei 800 Bildpunkten Fensterhöhe: 496, 576, 656,
736. Oben ist Schluss, bevor von der ersten Plakatreihe nichts mehr übrig
bleibt; sie soll zeigen, dass unten noch etwas kommt. Am Telefon bleibt es
flacher, dort wäre auch das weg.

**Sie reist mit der Systemauskunft mit**, nicht in einer eigenen Abfrage.
Die holt der Client ohnehin als Erstes, noch vor der Anmeldung; käme die
Höhe später, stünde der Aufmacher einen Augenblick in der Vorgabe und
spränge dann — genau das, was eine einstellbare Höhe vermeiden soll.
Gesetzt wird sie als Marke am `<html>`, das Regelwerk hängt vier Werte
daran.

Serverweit und nur für Admins, dieselbe Linie wie bei den
Wiedergaberegeln: eine Entscheidung des Gastgebers, nicht des Gastes.
Unbekanntes in der Spalte wird zur Vorgabe statt zu einem Fehler — eine
Startseite, die an einem alten Eintrag scheitert, wäre die schlechtere
Antwort.

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

web/app/src/main.ts

@@ -37,6 +37,10 @@ async function hochfahren(): Promise<void> {
     const auskunft = await systemauskunft();
     hinweise = auskunft.attributions;
     serverName = auskunft.serverName ?? 'Flaro';
+    // **So früh wie möglich.** Die Höhe des Aufmachers steht als Marke am
+    // `<html>`; käme sie später, stünde er einen Augenblick in der Vorgabe
+    // und spränge dann — genau das, was eine einstellbare Höhe vermeiden soll.
+    document.documentElement.dataset.aufmacher = auskunft.heroHeight ?? 'mittel';
 
     if (auskunft.needsSetup) { zeigeAnmeldung(einrichtung(() => location.reload())); return; }
 

web/app/src/style.css

@@ -498,6 +498,33 @@ svg { width: 20px; height: 20px; display: block; flex: none; }
 .strip::-webkit-scrollbar { display: none; }
 .strip > * { scroll-snap-align: start; }
 
+/* **Ein Text, der beim Überfahren einen anderen zeigt.**
+ *
+ * Für die Auflösung: in Ruhe steht „Full HD" da, beim Überfahren „1080p ·
+ * 1920 × 800". Ein Tooltip täte dasselbe, aber verzögert, über der
+ * Nachbarzeile und am Finger gar nicht.
+ *
+ * **Beide liegen übereinander, nicht nacheinander.** Das Feld ist so breit
+ * wie der breitere der beiden — sonst rückte beim Überfahren die halbe
+ * Tabelle. Gerastert statt absolut positioniert, damit die Zeilenhöhe von
+ * selbst stimmt. */
+.wechseltext { display: inline-grid; }
+.wechseltext > span { grid-area: 1 / 1; transition: opacity .15s ease; }
+.wechseltext > .genau { opacity: 0; color: var(--text-dim); }
+
+@media (hover: hover) {
+  .wechseltext:hover > span { opacity: 0; }
+  .wechseltext:hover > .genau { opacity: 1; }
+}
+
+/* Ohne Zeiger lässt sich nichts überfahren — dort steht das Genaue
+   dauerhaft daneben, statt unerreichbar zu sein. */
+@media (hover: none) {
+  .wechseltext { display: inline; }
+  .wechseltext > .genau { opacity: 1; }
+  .wechseltext > .genau::before { content: ' · '; }
+}
+
 /* ---------- Detailseite ---------- */
 
 .detail { position: relative; }
@@ -1137,9 +1164,24 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
  * Breite ist der grösste Einzelunterschied im Eindruck — und ein Layout-,
  * kein Farbproblem. */
 
+/* **Vier Stufen, serverweit eingestellt.**
+ *
+ * Eine Pixelzahl einzustellen hiesse, sie für jeden Bildschirm neu
+ * einzustellen — der Aufmacher misst sich an der Fensterhöhe. Vier Wörter
+ * sind das, was man dazu zu sagen hat, und `main.ts` setzt sie als Marke am
+ * `<html>`, sobald die Systemauskunft da ist.
+ *
+ * Die Mitte ist, was vorher fest verdrahtet war. Oben ist Schluss, bevor die
+ * erste Plakatreihe ganz unter den Falz rutscht: sie soll zeigen, dass unten
+ * noch etwas kommt. */
+:root { --hero-hoehe: min(72vh, 640px); }
+html[data-aufmacher="niedrig"]  { --hero-hoehe: min(62vh, 560px); }
+html[data-aufmacher="hoch"]     { --hero-hoehe: min(82vh, 720px); }
+html[data-aufmacher="sehrhoch"] { --hero-hoehe: min(92vh, 800px); }
+
 .hero {
   position: relative;
-  height: min(72vh, 640px);
+  height: var(--hero-hoehe);
   /* Randlos: der Inhaltsbereich hat seitlich Polster, das Bild soll es
      nicht haben. Negative Ränder statt eines eigenen Containers. */
   margin: calc(var(--s-page) * -1) calc(var(--s-page) * -1) var(--s-section);
@@ -1334,6 +1376,9 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
 
 @media (max-width: 860px) {
   .hero {
+    /* Am Telefon eine Stufe tiefer als gewählt: dort ist der Aufmacher im
+       Verhältnis zum Bildschirm ohnehin höher, und über 60 vh bleibt von der
+       ersten Reihe nichts mehr übrig. */
     height: min(52vh, 420px);
     margin: calc(var(--s-loose) * -1) calc(var(--s-loose) * -1) var(--s-section);
   }

web/app/src/views/einstellungen/uebersicht.ts

@@ -1,5 +1,5 @@
 import {
-  doppelteZusammenlegen, metadatenEinstellung, metadatenSetzen, servernameSetzen,
+  doppelteZusammenlegen, metadatenEinstellung, metadatenSetzen, servernameSetzen, aufmacherhoeheSetzen,
   systemauskunft, laufendeWiedergaben, serverzustand, bildAdresse, speicherorte,
   bildspeicherLeeren, type Wiedergabe,
 } from '../../api';
@@ -144,6 +144,30 @@ export function serverbereich(geaendert: () => void): HTMLElement {
           tun: async wert => { await servernameSetzen(wert('name')); location.reload(); },
         })));
 
+      const stufen = [
+        { wert: 'niedrig', text: 'Niedrig' },
+        { wert: 'mittel', text: 'Mittel' },
+        { wert: 'hoch', text: 'Hoch' },
+        { wert: 'sehrhoch', text: 'Sehr hoch' },
+      ];
+      const jetzige = auskunft.heroHeight ?? 'mittel';
+      liste.appendChild(zeile(
+        'Höhe des Aufmachers',
+        stufen.find(s => s.wert === jetzige)?.text ?? 'Mittel',
+        'Das grosse Bild oben auf der Startseite. Gemessen wird in '
+        + 'Fensterhöhe, nicht in Bildpunkten — sonst müsste man es an jedem '
+        + 'Bildschirm neu einstellen. Am Telefon bleibt es flacher: dort '
+        + 'wäre von der ersten Plakatreihe sonst nichts mehr zu sehen.',
+        () => dialog({
+          titel: 'Höhe des Aufmachers',
+          text: 'Gilt für alle auf diesem Server.',
+          felder: [{
+            name: 'stufe', beschriftung: 'Höhe', auswahl: stufen, wert: jetzige,
+          }],
+          bestaetigen: 'Übernehmen',
+          tun: async wert => { await aufmacherhoeheSetzen(wert('stufe')); location.reload(); },
+        })));
+
       // **Wartung, nicht Alltag.** Nach jedem Scan passiert das von selbst;
       // dieser Knopf ist für den Fall, dass doch wieder Dubletten auftauchen —
       // etwa nachdem eine Zuordnung von Hand geändert wurde.