Hero mit Wolkenhimmel und Glas-Suche

Baue einen Hero-Bereich für [Produkt] als eigene Komponente.

Bild: ein fotografischer Himmel mit Haufenwolken füllt die ganze Fläche, Wolken an den Rändern, ruhige Mitte für den Text. Zwei Fassungen: quer (16:9) für Rechner, hoch (9:16) fürs Handy, per <picture> nach Ausrichtung gewählt, als WebP in drei Breiten, mit fetchpriority="high".

Lesbarkeit: darüber ein Verlauf von leicht dunkel (oben) zu fast schwarz (unten). Weiße Schrift muss überall mindestens 5:1 Kontrast halten. Miss das an den hellsten Stellen nach.

Inhalt von oben nach unten, mittig:
1. Eine kleine helle Plakette mit einem belegbaren Fakt (kein „nur heute“).
2. Titel in einer Serifenschrift (z. B. Instrument Serif), zwei Zeilen, ein Wort kursiv. Groß: am Handy rund 13vw, am Rechner bis 7,25rem.
3. Eine fette Zeile, was es ist, darunter eine leise Zeile, warum.
4. Ein weißer Knopf mit Pfeil.
5. Ein Eingabefeld aus Glas (dunkles Blau, 40 % Deckkraft, backdrop-filter blur 18px, feine weiße Kante), runder weißer Senden-Knopf rechts. Der Platzhalter tippt am Rechner drei Beispiele nacheinander, am Handy und bei „Bewegung reduzieren“ steht das erste fest.
6. Eine Zeile Hinweis darunter.
7. Zwei Auszeichnungen mit Lorbeerzweigen links und rechts (eigenes SVG, keine fremden Logos), oben Serife, unten klein.

Die Kopfzeile liegt transparent über dem Bild mit weißer Schrift und bekommt beim Scrollen eine Glasfläche.

Leistung: das Himmelbild ist das LCP-Element, vorladen. Keine Animation am Handy. Alle Inhalte müssen ohne JavaScript sichtbar sein.