Ein Aufmacher über die volle Breite

Die Startseite begann bei einer Reihe aus 150 px breiten Plakaten — das
grösste Element über dem Falz war 225 px hoch. Plex und Netflix öffnen mit
einem Bild über die ganze Breite, und das ist der grösste Einzelunterschied
im Eindruck. Ein Layout-, kein Farbproblem.

Bis zu sieben Titel, aus dem, was die Startseite ohnehin holt: erst
Angefangenes, dann Neuzugänge, dann Vorschläge. Kein zusätzlicher Abruf.

Nur mit Hintergrundbild. Ein Hero ohne Bild ist schlechter als keiner —
eine graue Fläche über den halben Bildschirm sagt nichts und nimmt den
Reihen den Platz. Gibt es keinen einzigen Titel mit Backdrop, entfällt er
ersatzlos.

Zwei Verläufe statt einem: der von unten lässt die erste Reihe sich
darüberschieben, der von links sorgt dafür, dass der Text trägt, auch wenn
das Bild dort hell ist.

Pause bei Mauszeiger und bei Tastaturfokus — wer gerade liest, soll nicht
nach neun Sekunden woanders landen. Bei "Bewegung reduzieren" wechselt er
gar nicht von selbst. Die Punkte sind echte Knöpfe mit Beschriftung; ein
div ist für Tastatur und Vorlesesoftware kein Bedienelement.

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

web/app/src/style.css

@@ -770,3 +770,95 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
   .kachel:hover .plakat,
   .kachel:focus-visible .plakat { transform: none; }
 }
+
+/* --- Hero ----------------------------------------------------------------
+ *
+ * Die Startseite begann bei einer Reihe aus 150 px breiten Plakaten; das
+ * grösste Element über dem Falz war 225 px hoch. Ein Bild über die volle
+ * Breite ist der grösste Einzelunterschied im Eindruck — und ein Layout-,
+ * kein Farbproblem. */
+
+.hero {
+  position: relative;
+  height: min(62vh, 560px);
+  /* 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);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+}
+
+.hero-buehne { position: absolute; inset: 0; }
+
+.hero-folie {
+  position: absolute; inset: 0;
+  background-size: cover;
+  background-position: center 20%;
+  opacity: 0;
+  transition: opacity .9s ease-in-out;
+}
+.hero-folie.an { opacity: 1; }
+
+/* **Zwei Verläufe, nicht einer.** Der von unten lässt die erste Reihe sich
+   darüberschieben; der von links sorgt dafür, dass der Text trägt, auch wenn
+   das Bild dort hell ist. */
+.hero-buehne::after {
+  content: '';
+  position: absolute; inset: 0;
+  background:
+    linear-gradient(to top, var(--canvas) 2%, rgba(11, 11, 13, .55) 45%, transparent 85%),
+    linear-gradient(to right, rgba(11, 11, 13, .88) 0%, rgba(11, 11, 13, .35) 45%, transparent 75%);
+}
+
+.hero-inhalt {
+  position: relative;
+  padding: var(--s-page);
+  max-width: 620px;
+  display: flex; flex-direction: column; gap: var(--s-regular);
+}
+
+.hero-schriftzug {
+  max-width: 380px; max-height: 120px;
+  object-fit: contain; object-position: left bottom;
+}
+
+.hero-titel {
+  margin: 0;
+  font-size: var(--t-hero); font-weight: 700; letter-spacing: -.03em;
+}
+
+.hero-meta { font-size: var(--t-normal); color: var(--text-dim); }
+
+/* Drei Zeilen, dann Schluss — eine volle Inhaltsangabe gehört auf die
+   Detailseite, nicht in den Aufmacher. */
+.hero-text {
+  margin: 0;
+  color: var(--text-dim);
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hero-knoepfe { display: flex; gap: var(--s-snug); margin-top: var(--s-tight); }
+.hero-knoepfe .btn { height: 40px; padding: 0 var(--s-section); gap: 6px; }
+
+.hero-punkte {
+  position: absolute; right: var(--s-page); bottom: var(--s-page);
+  display: flex; gap: 6px;
+}
+.hero-punkt {
+  width: 26px; height: 3px; padding: 0; border: 0; border-radius: 2px;
+  background: rgba(255, 255, 255, .28);
+  transition: background .2s ease;
+}
+.hero-punkt.an { background: var(--text); }
+.hero-punkt:hover { background: rgba(255, 255, 255, .6); }
+
+@media (max-width: 860px) {
+  .hero {
+    height: min(52vh, 420px);
+    margin: calc(var(--s-loose) * -1) calc(var(--s-loose) * -1) var(--s-section);
+  }
+  .hero-inhalt { padding: var(--s-loose); max-width: none; }
+  .hero-punkte { right: var(--s-loose); bottom: var(--s-loose); }
+}