Landing-Page-Cinematográfica

Site cinematográfico

Sie verleihen der Website das Gefühl eines gut inszenierten Films: Jeder Scroll-Schritt enthüllt etwas, jeder Button reagiert mit Gewicht, die Typografie hat Plakatmaßstab. Der Endkunde ist ein lokaler Geschäftsinhaber, und der Besucher ist oft mobil unterwegs, häufig im 4G-Netz. Deshalb sind die Bewegungen leichtgewichtig, nativ im Browser und stören weder das Lesen noch das Klicken auf WhatsApp.

Lebendige Referenz des Standards: die Vorlage aus der Skill fazer-site (fazer-site/template/). Bei Unsicherheit über Rhythmus, Skalierung oder Dichte öffnen Sie die Referenz und imitieren den Feinschliff, nicht den Inhalt.

Axiome

1. Die Identität gehört dem Kunden. Farbe und Typografie stammen vom Logo, der Geschäftsfassade und dem Instagram des Unternehmens. Keine fertigen Katalogpaletten. Nur wenn nirgendwo ein Logo existiert, wird eine provisorische Farbe verwendet, die als provisorisch deklariert wird.
2. Der Geschäftsname steht im Hero, groß. Ein Hero ohne Namen wurde abgelehnt.
3. Fotos stammen vom Geschäft, niemals von Bilddatenbanken. Fassade, Laden, Produkt, Ergebnis. Ohne ein echtes Foto eines Teils bleibt der Block als illustrativ markiert oder wird entfernt.
4. Bewegung dient dem Lesen. Wenn eine Animation den Inhalt verzögert, das Scrollen blockiert oder die Schaltfläche verschwinden lässt, wird sie entfernt.
5. Leichtgewicht als Standard. HTML, CSS und IntersectionObserver reichen aus. Eine Animationsbibliothek (GSAP und Ähnliche) kommt nur dann zum Einsatz, wenn ein genehmigter Effekt ohne sie nicht realisierbar ist, und niemals für etwas, das CSS erledigt.

Verboten (jeder Punkt wurde bereits in einem echten Projekt abgelehnt)

• Karten, die beim Scrollen gestapelt werden oder herabfallen (Sticky Stacking, pin mit Skalierung und Weichzeichner). Nicht erlaubt.
• Abgerundeter, bogen- oder kreisförmiger Zuschnitt bei Fotos von Laden, Fassade, Produkt oder Umgebung. Auch Container mit großem border-radius werden entfernt. Eckige Ecken oder diagonaler Schnitt (clip-path) sind der Standard.
• Hintergrundfoto hinter Bewertungen.
• Feine Serifenschrift und Kursiv als Überschrift sowie Gold als Standard-Akzent. Wirkt „delikat“. Der gewünschte Ton ist maskulin, aggressiv, modern, es sei denn, die Marke des Kunden sagt etwas anderes.
• Erfundene Preistabelle und erfundene Zahlen. Preis, Bewertung, Frist, Erfahrungsbericht und Anzahl werden nur dann aufgenommen, wenn sie öffentlich vom Geschäft selbst stammen.
• Sinnlose Software-Dekoration für lokale Unternehmen: Karten, die ein Live-Panel vortäuschen, „System Operational“, Cursor, der von selbst klickt, Log-Schreibmaschine.

Was den filmischen Effekt ausmacht

Plakattypografie. Eine komprimierte und fette Schriftfamilie für Überschriften (z.B. Barlow Condensed 800 kursiv), eine andere saubere für den Fließtext. Große Überschriften (clamp() bis ~90-140 px auf dem Desktop), kurze Zeilenabstände, text-wrap: balance. Der Skalenkontrast zwischen Überschrift und Text ist der Haupteffekt; er kostet nichts.

Hero. Riesiger Geschäftsname, ein konkreter Satz, was das Unternehmen tut und wo, kurze Nachweise (Note, Bewertungen, Follower, Öffnungszeiten) und der Haupt-CTA-Button. Auf dem Desktop Text und Foto nebeneinander. Auf dem Handy ist die Reihenfolge: Name, Satz, Nachweise, Button, Foto. Das Foto kann diagonal beschnittene Ecken und einen langsamen Zoom haben (scale von 1 auf 1.06 in ~20 s).

Gestaffelte Einblendung. Beim Laden steigen die Elemente des Hero um 16–40 px an und erscheinen nacheinander (mit einer Verzögerung von ~80 ms). Abschnitte darunter werden mit derselben Bewegung beim Eintritt in den Bildschirm durch IntersectionObserver mit niedrigem threshold sichtbar.

Textur. SVG-Rauschen <feTurbulence> mit 5% Deckkraft auf einfarbigen Hintergründen des Hero und der Highlights, um das Aussehen digitaler Verläufe zu vermeiden.

Buttons mit Gewicht. overflow: hidden mit einer Schicht, die zur Farbänderung beim Hovern gleitet, leichte scale(1.03) mit cubic-bezier(0.25, 0.46, 0.45, 0.94). Minimale Touch-Zielgröße von 44 px.

Highlight einer Bewertung auf breitem Bildschirm. Eine echte Bewertung in Manuskriptgröße, auf einfarbig dunklem Hintergrund, deren Wörter beim Scrollen nacheinander aufleuchten. Eine pro Seite; die restlichen Bewertungen in einem einfachen Raster.

Zählende Zahl. Die Note oder eine andere reale Zahl zählt beim Eintritt in den Bildschirm von 0 hoch zum tatsächlichen Wert.

Dienstleistungsstreifen im Kontrast. Ein heller Abschnitt in der Mitte der dunklen Website (oder umgekehrt), mit großen Ordnungszahlen (01, 02...), der den Rhythmus unterbricht und den Themenwechsel markiert.

Laufband (Marquee) mit Dienstleistungen oder Kategorien in Akzentfarbe, optional.

Technische Regeln

• Basis: Statisches HTML mit integriertem CSS, es sei denn, das Projekt hat bereits eine andere Basis. In einem bestehenden Projekt die Basis und die genehmigte Kopie erhalten; nur diese Schicht anwenden.
• Schriftarten über Google Fonts mit preconnect und display=swap.
• Hero-Bild mit fetchpriority="high"; der Rest mit loading="lazy", width und height deklariert.
• Alles innerhalb von @media (prefers-reduced-motion: reduce) deaktiviert Animationen und Übergänge.
• Mobil: Feste Leiste unten mit WhatsApp und Anruf, die verschwindet, wenn ein Formularfeld den Fokus erhält und solange der Hero-Button sichtbar ist. Kein horizontaler Scroll bei 360 px.

Abnahmekriterien

• Die Screenshots bei 360, 375 und 1440 px wurden geöffnet und überprüft, und kein Punkt der Verbotsliste ist vorhanden.
• Der Geschäftsname steht im Hero, und die Fotos sind vom Geschäft selbst oder als illustrativ gekennzeichnet.
• Bei aktiviertem prefers-reduced-motion ist die Website vollständig und lesbar, ohne versteckte Inhalte, die auf eine Animation warten.