Der Aufmacher endet an der Leiste, und durch sie sieht man nur noch gedämpft

Vier Dinge, die zusammengehören:

Die Spiegelung ist weg. `backgroundExtensionEffect` füllt die Fläche unter der
Leiste, indem er den Bildrand gespiegelt weiterzeichnet — und je größer die zu
füllende Fläche wurde, desto mehr übernahm der Spiegel das Bild. Auf dem iPhone
legte er sich ohne jede Seitenleiste über den Statusbalken. Jetzt läuft das
Bild selbst weiter, über einen negativen Rand.

Es endet dabei an der **Kante der Leiste**, nicht am Fensterrand. Der
Unterschied sind zwölf Punkte, und die waren deutlich zu sehen: neben der
schwebenden Leiste stand ein heller Streifen Bild, den nichts abdeckte.

Das Seitenverhältnis im Karussell musste weichen. Es legte den Aufmacher auf
die Breite des Inhaltsbereichs fest; weil er nach links unter die Leiste
greift, blieb rechts genau so viel schwarz übrig, wie er links gewann.

Und die Maße, in denen das Hintergrundbild angefordert wird, richten sich jetzt
nach dem Rahmen, in dem es landet. Vorher wurden 900×1200 geholt — hochkant —
und in einem 16:9-Rahmen gezeigt: zu sehen war ein Streifen aus der Mitte, oben
und unten fehlte je ein Drittel.

Dazu: auf schmalen Geräten ist der Aufmacher hochkant. In 16:9 blieben auf
einem iPhone keine zweihundertzwanzig Punkte Höhe, und Schriftzug, Zeile,
Beschreibung und zwei Knöpfe lagen übereinander.

Und ein Schleier unter dem Glas der Leiste. Reines Glas zeigt alles, was
dahinter vorbeizieht, und beim Scrollen zieht die ganze Startseite vorbei — aus
den ruhigen Beschriftungen wurde ein unruhiger Brei. Der Schleier nimmt der
Bewegung die Schärfe, ohne die Fläche zuzumauern.

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

Packages/FlixyKit/Sources/FlixyDesign/ChromeInset.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+
+public extension EnvironmentValues {
+    /// Wie weit die Navigationsleiste von links in den Bildschirm hineinragt.
+    ///
+    /// Null, wo es keine gibt — auf dem iPhone, bei Leiste oben.
+    ///
+    /// Gebraucht, weil Bild und Inhalt zwei verschiedene Dinge wollen: der
+    /// **Inhalt** — Überschriften, Kacheln, Knöpfe — fängt rechts der Leiste
+    /// an, dafür sorgt der Sicherheitsrand. Das **Bild** des Aufmachers soll
+    /// dagegen darunter weiterlaufen und den Fensterrand erreichen, sonst
+    /// endet es an einer harten Kante und daneben steht ein schwarzer Streifen.
+    @Entry var flixyChromeInset: CGFloat = 0
+}

Packages/FlixyKit/Sources/FlixyDesign/Components/HeroBanner.swift

@@ -19,6 +19,14 @@ public struct HeroBanner<Actions: View>: View {
 
     @State private var logo: PlatformImage?
 
+    /// Wie weit die Navigationsleiste hereinragt.
+    ///
+    /// Nur das **Bild** greift danach; Titel, Beschreibung und Knöpfe nicht.
+    /// Die liegen in einer Überlagerung, und die sitzt auf dem ungedehnten
+    /// Rahmen — sie stehen also von selbst da, wo auch die Reihen darunter
+    /// anfangen.
+    @Environment(\.flixyChromeInset) private var chromeInset
+
     public init(
         title: String,
         metadata: String? = nil,
@@ -114,19 +122,18 @@ public struct HeroBanner<Actions: View>: View {
 
     public var body: some View {
         FlixyArtwork(url: artworkURL, aspectRatio: aspectRatio)
-            // Das Bild läuft über seinen Bereich hinaus — unter die
-            // Seitenleiste und bis an den Fensterrand. Dass es das darf, hängt
-            // daran, dass der Aufmacher **nicht** beschnitten wird; siehe
-            // `HeroCarousel`. Der Effekt spiegelt die
-            // Ränder und zeichnet sie weich weiter; hinter der Leiste steht
-            // damit ein anderer Ausschnitt desselben Plakats.
+            // Bis unter die Leiste und an den Fensterrand.
             //
-            // Das fiel unangenehm auf, solange der Aufmacher seitwärts
-            // durchblätterte: beim Weiterschieben wanderten der echte und der
-            // gespiegelte Ausschnitt gegeneinander, und die Naht dazwischen
-            // war nicht zu übersehen. Nicht der Effekt war falsch, sondern die
-            // Bewegung — siehe `HeroCarousel`.
-            .backgroundExtensionEffect()
+            // Hier stand `backgroundExtensionEffect()`. Der spiegelt den
+            // Bildrand und zeichnet ihn weichgezeichnet weiter — und je größer
+            // die Fläche wurde, die er füllen musste, desto mehr übernahm der
+            // Spiegel das Bild. Über die Seitenleiste hinaus war er nicht mehr
+            // Fortsetzung, sondern Hauptsache; auf dem iPhone legte er sich
+            // ohne jede Seitenleiste über den Statusbalken.
+            //
+            // Ein negativer Rand tut dasselbe ehrlicher: das Bild **selbst**
+            // läuft weiter. Eine Fläche, ein Ausschnitt, keine Naht.
+            .padding(.leading, -chromeInset)
             .overlay(alignment: .bottom) {
                 // Der Verlauf endet in der Hintergrundfarbe der Seite, nicht in
                 // Schwarz: sonst entsteht genau dort, wo der Aufmacher in die

Packages/FlixyKit/Sources/FlixyDesign/FlixyFont.swift

@@ -81,6 +81,15 @@ public enum FlixyAspectRatio {
     /// Der Aufmacher auf der Startseite — dasselbe wie `landscape`, weil Plex
     /// dafür `art` liefert.
     public static let hero: CGFloat = landscape
+    /// Der Aufmacher auf einem schmalen Bildschirm.
+    ///
+    /// Nicht 16:9: auf einem iPhone sind das keine zweihundertzwanzig Punkte
+    /// Höhe, und darin sollen Titel oder Schriftzug, Zeile mit Jahr und Länge,
+    /// ein Satz Beschreibung und zwei Knöpfe Platz finden. Sie fanden ihn
+    /// nicht und lagen übereinander. Hochkant ist hier auch die ehrlichere
+    /// Form — ein Handy hält man so.
+    public static let heroCompact: CGFloat = 3.0 / 4.0
+
     /// Sendersymbole. Breiter als hoch, weil Senderlogos Schriftzüge sind —
     /// quadratisch beschnitten fehlt der halbe Name.
     public static let channelLogo: CGFloat = 5.0 / 3.0