Hinter der Insel läuft jetzt das Wasser durch

Der schwarze Streifen über der Navigation war kein gezeichneter Balken,
sondern fehlender Inhalt: der gesamte Baum saß innerhalb des
Sicherheitsrands. Deshalb erreichte kein noch so gut gesetzter Rand
weiter unten die Fläche darüber — Inhalt kam dort nie hin.

Jetzt reißt der HStack den Rand oben auf und gibt den Platz kontrolliert
zurück: Seitenleiste und Insel bekommen ihren Abstand zur Statusleiste
explizit, der Inhalt bekommt ihn als Sicherheitsrand. Der Aufmacher
nimmt ihn sich wieder — um genau diese Strecke höher und um genau diese
Strecke größer, sodass unten alles bleibt, wo es war. Dazu ein knapper
Verlauf oben, damit Uhrzeit und Batterie auch über einem hellen Bild
lesbar bleiben.

Und die Leiste oben fährt beim Scrollen weg. Nur sie: der
Sicherheitsrand darunter bleibt stehen, sonst ruckte die Seite bei jedem
Ein- und Ausblenden unter dem Finger weg.

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

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

@@ -144,6 +144,24 @@ public struct HeroBanner<Actions: View>: View {
                 .frame(maxHeight: .infinity, alignment: .bottom)
                 .allowsHitTesting(false)
             }
+            .overlay(alignment: .top) {
+                // Oben liegen Uhrzeit, Batterie und die Navigationsinsel — auf
+                // dem Bild, seit der Aufmacher bis an den Bildschirmrand
+                // reicht. Über einem dunklen Aufmacher geht das gut; über
+                // einem hellen verschwinden sie.
+                //
+                // Deshalb ein Verlauf, aber ein knapper: er reicht nur so
+                // weit, wie die Insel baut, und läuft schnell aus. Ein
+                // großzügigerer deckte das Bild zu, und genau das Bild ist der
+                // Grund, warum es randlos sein soll.
+                LinearGradient(
+                    colors: [.black.opacity(0.45), .clear],
+                    startPoint: .top,
+                    endPoint: .bottom
+                )
+                .frame(height: 150)
+                .allowsHitTesting(false)
+            }
             .overlay(alignment: .bottomLeading) {
                 GeometryReader { geometry in
                     let scale = scale(for: geometry.size.width)