Golf-Template: Look „albatros“

Vorlage und Ergebnis

Vorlage Golfield — **Deine Vorlage (Golfield)**Weiß, Hellgrau und frisches Grün, schmale Schrift in Großbuchstaben, zweizeiliger Kopf, Bühne mit Bildwechsel, darunter die graue Leiste.

Unser Look albatros — **Unser Look „albatros“**Derselbe Aufbau mit unserem Lotsen: die Frage auf der Bühne, die fünf Antworten als Tafeln mit feinem Rahmen, die in das Foto hineinragen. Auf 1.440 × 900 ist alles ohne Rollen zu sehen.

Woran man den Look erkennt

Zeichen	Wo
Zweizeiliger Kopf	Oben Logo, Telefon, Adresse, darunter die Menüzeile mit den fünf Bereichen. Beim Rollen bleibt nur die Menüzeile stehen, wie in der Vorlage.
Titel mit grüner Linie	Über jeder Sektion, meist mittig. Die kurze Linie zeichnet sich, sobald der Titel ins Bild rollt.
Karten mit Doppelrahmen	Bild oben, darunter eine Tafel mit feiner Innenlinie, die ein Stück ins Bild ragt (Highlights, Unterseiten, Antworten, Preise).
Bilder mit Linienrahmen	Feiner weißer Rahmen im Bild, mit Titel darin (Bereiche, Foto-Kacheln, Abschluss, Footer).
Halbseitige Sektionen	Ein Foto bis an den Fensterrand, daneben eine graue oder dunkle Tafel mit dem Text.
Alles kantig	Keine runden Ecken, keine Pillen-Knöpfe. Rund sind nur Porträts.

Die Bewegung

Auf Bildern sieht man sie nicht, deshalb hier als Liste. In der Live-Demo läuft alles.

Bewegung	Wo
Bildwechsel der Bühne	Drei Fotos blenden weich ineinander und fahren dabei langsam aus leichter Vergrößerung heraus. Links und rechts die Pfeile, unten die Marken. Der Wechsel pausiert, wenn die Bühne nicht im Bild ist.
Einblenden von unten	Überschrift, Text und Knopf der Bühne nacheinander (wie die Slider-Texte der Vorlage); Karten, Spalten und Zeilen gestaffelt, sobald sie ins Bild rollen.
Linien zeichnen sich	Die grüne Linie unter jedem Titel, die Wegmarken-Linie im Ablauf, die gleitende Linie der Reiter.
Mouseover auf Bildern	Das Bild zoomt leicht und dunkelt ab, der weiße Linienrahmen erscheint bzw. zieht sich zusammen. Bei den Karten wird die Innenlinie grün.
Fotos wandern beim Rollen	In den halbseitigen Sektionen, im Seitenkopf und im Abschluss bewegt sich das Foto etwas langsamer als die Seite.
Aufklapp-Tafeln im Menü	Unter jedem Bereich klappt eine weiße Tafel mit den Unterseiten auf, mit derselben weichen Bewegung wie in der Vorlage.
Knöpfe	Beim Überfahren steigt von unten eine dunkle Fläche auf.
Zahlen zählen hoch	Im dunklen Zahlen-Band (Jahreszahlen bleiben stehen).
Wende-Kacheln	„Was du über Golf zu wissen glaubst“: Die dunkle Kachel blendet zur grünen Antwort um.
Pfeil nach oben	Grünes Quadrat unten rechts, fährt herein, sobald man gerollt hat.

Wer im Gerät „weniger Bewegung“ eingestellt hat, sieht alles sofort und ohne Bewegung. Nicht übernommen habe ich den Ladebildschirm, die Google-Karte im Footer und den Warenkorb der Vorlage.

Farbe, Schrift, Icons

Dunkle Schrift auf dem Grün. Die Vorlage setzt weiße Schrift auf ihre grünen Knöpfe. Das ist kaum lesbar (Kontrast 1,9 zu 1). Unsere Knöpfe haben dasselbe Grün mit dunkler Schrift. Grüne Schrift auf Weiß nimmt einen tieferen Grünton, damit sie lesbar bleibt.

Schriften wie im Original. Oswald (schmal, Großbuchstaben in Menü, Knöpfen und Kartentiteln) und Roboto für den Lesetext. Beide liegen auf unserem Server, nichts kommt von Google.

Icons aus deinem Ordner, eigene Serie. Die Vorlage zeigt gefüllte grüne Symbole. Dafür habe ich aus deinem Pool die Serie mit 36 gefüllten Zeichen genommen. Jeder Bereich hat sein festes Motiv (Entdecken: Ball auf dem Tee, Lernen: Golfer im Schwung, Mitglied werden: gekreuzte Schläger, Gastspieler: Golfcart, Erleben: Schirm).

Nichts kopiert. Code, Bilder und Icons sind unsere eigenen. Aus dem Kauf-Template stammt nichts, eine Lizenz brauchen wir nicht.

Der Unterschied zu „eagle“

Die Bausteine im Einzelnen

**Frage-Bildschirm**Zweizeiliger Kopf, Bühne mit Bildwechsel, die Frage mittig. Darunter das graue Band mit den fünf Antworten als Tafeln im Doppelrahmen.

**Startseite für Wiederkehrer**Derselbe Aufbau mit dem Foto des gewählten Bereichs, die Schnellwege als Tafeln.

**Über uns**Halbseitig wie „A Few Words About Our Club“ der Vorlage: Foto bis an den Rand, rechts die graue Tafel mit Titel, Text, Punkten und Knöpfen.

**Laufband und Zahlen**Ruhiges Laufband in Großbuchstaben, darunter das dunkle Band mit hochzählenden Zahlen im hellen Grün.

**Highlights**Karten mit Doppelrahmen wie „Main Services“ der Vorlage, seitlich rollend, der Knopf mittig darunter.

**Kundenstimmen**Zwei Stimmen nebeneinander, grünes Anführungszeichen, Zitat leicht und kursiv, Pfeile ganz außen.

**Abschluss**Foto-Band mit weißem Linienrahmen, darin Titel, Text und beide Knöpfe. Je Seite wechselt das Foto zwischen vier Motiven.

**Footer**Anthrazit mit grünen Links. Rechts, wo die Vorlage ihre Karte hat, ein Luftbild mit Linienrahmen und dem Weg zur Einstiegs-Beratung.

Seitenkopf der Unterseiten — **Seitenkopf**Flaches Foto über die volle Breite, Überschrift mittig, Text, Knöpfe, unten die Brotkrumen. Darunter klebt die Leiste des Bereichs.

**Aufklapp-Tafel im Menü**Unter jedem Bereich die Unterseiten, wie in der Vorlage.

**Ganzes Menü**Weiße Tafel von rechts mit allen Bereichen, unten der Hauptknopf.

**„Erkennst du dich wieder?“**Weiße Tafeln im Doppelrahmen mit grünem Anführungszeichen und Porträt.

**„Was du über Golf zu wissen glaubst“ als Wende-Kacheln**Dunkle Kacheln mit Linienrahmen. Beim Überfahren oder Antippen blendet die Kachel zur grünen Antwort um.

**Schnupperkurs-Bühne**Halbseitig auf Weiß: Titel, Liste, Preis groß, Knopf, rechts das Foto bis an den Rand.

**Ablauf**Vier Wegmarken auf einer Linie, die sich von links zeichnet.

**„Was dich erwartet“ als Reiter**Wie die Reiter der Vorlage: Die grüne Linie gleitet zum gewählten Punkt, Bild und Text wechseln. Auf dem Handy ein Akkordeon.

**Vorteile**Wie „Our Advantages“ der Vorlage: grünes Icon, Titel in Großbuchstaben, kurzer Strich, Text. Ohne Karten, mit viel Luft.

**Foto-Kacheln**Als Streifen ohne Abstände über die volle Breite, wie der Galerie-Streifen der Vorlage.

**Häufige Fragen**Eine ruhige Spalte, Zeilen mit feinem Rahmen, Frage in Grün, Plus und Minus.

**Preise**Karten im Doppelrahmen, die hervorgehobene in Anthrazit mit grüner Innenlinie.

**Unterseiten eines Bereichs**Karten mit Doppelrahmen in drei Spalten.

**„Mehr aus dem Bereich“**Spalten ohne Kasten: Bild, Titel, Text, Verweis.

**Brücke zur nächsten Stufe**Halbseitig mit dunkler Tafel links und Foto rechts.

**Mitgliederbereich**Heller Kopf, Karten mit feiner Linie, dunkle Karten in Anthrazit.

**Kontakt**Kontaktangaben als Paare mit grünen Zeichen, Formular als Tafel im Doppelrahmen.

Breiter Bildschirm — **Auf deinem breiten Bildschirm (2.400 px)**Bühne und halbseitige Sektionen gehen mit dem Fenster mit, der Inhalt bleibt in der Spalte.

Auf dem Handy

Handy: Frage-Bildschirm — **Frage: eine Tafel mit fünf Zeilen**

Handy: Bereichsseite — **Bereichsseite**

Handy: Wende-Kacheln — **Wende-Kacheln zum Wischen**

Schnell laden, flüssig rollen

Rollen: gemessen mit dem Mausrad über die ganze Seite auf vier Seiten: 60 Bilder pro Sekunde, keine einzige lange Aufgabe. Die Bewegung läuft nur über Verschieben und Ein- und Ausblenden, ohne Skript beim Rollen.
Bilder: Nur das erste Foto der Bühne lädt sofort, die weiteren erst nach dem Seitenaufbau, alle Bilder weiter unten erst beim Hinrollen.
Schlankeres Stylesheet für alle Golf-Vorlagen: Bisher lud jede Vorlage die Gestaltung aller Looks mit (rund 1,2 MB). Jetzt bündelt jede Fassung nur noch ihren eigenen Look: albatros 0,55 MB, modern 0,3 MB. Am Aussehen der fünf anderen Vorlagen ändert das nichts, das habe ich Element für Element nachgemessen.
Fund auf dem Mittwald-Server: Die Stylesheets gehen dort heute ungepackt über die Leitung (golf2: rund 1 MB). Ich habe die Server-Regeln so ergänzt, dass sie gepackt ausgeliefert werden (dann rund 80 kB) und die Dateien ein Jahr im Browser bleiben dürfen. Seit dem 03.10.2026 live geprüft: Stylesheet 48 kB statt 1 MB.

So bekommt ein Club diesen Look

In der Akte design.look = "albatros" setzen. Keine Repo-Kopie: Jede Verbesserung am Konzept landet in allen sechs Looks.
Zwei Clubfarben genügen: design.lookFarben mit akzent (statt Grün) und dunkel (statt Anthrazit). Bei einem dunklen Akzent kommt aufAkzent: "#ffffff" dazu, damit die Schrift auf den Knöpfen hell wird.
Drei gute Fotos der Anlage für die Bühne.

Geprüft

Alle 84 Seiten automatisch auf Handy- und Laptop-Breite: nichts läuft über den Rand, nichts wird abgeschnitten. Gefunden und behoben: Seitenkopf auf dem Handy (Überschrift und Knöpfe waren rechts abgeschnitten), zu lange Knöpfe auf dem Handy, Preiskarten und eine dunkle Karte im Mitgliederbereich mit unlesbarer Schrift, Namen auf den Golflehrer-Fotos, ein Hinweistext im Formular.
Startseite, Bereichsseiten, Kontakt, Mitgliederbereich angesehen auf 390, 1.440 und 2.400 px. Menü, Aufklapp-Tafeln, Wechsler und Dunkelmodus geprüft. Keine Skript-Fehler.
Die fünf anderen Looks sind unverändert: Ihr HTML ist vor und nach dem Bau gleich, auch gegen den heutigen Stand der Vorlage.
Die Sie-Fassung baut (2.166 Textstellen umgestellt, zwei alte Du-Reste, keine neuen).
Nicht geprüft: echte Geräte (nur der Browser im Handy-Maß), Safari und Firefox, echte Club-Farben, mehrere Standorte, die eingeschaltete Suche (nur vom Bau-Agenten kurz getestet).

Deine Entscheidungen (03.10.2026)

Übernahme in die Vorlage: erledigt. golf1 bis golf6 tragen die sechs Templates, golf7 die alte Homburg-Referenz, golf8 die erste Vorlage ohne Lotsen. Die Übersicht zeigt alle sechs.
Sterne bei den Stimmen: eingebaut, auf der Startseite und den Bereichsseiten.
Plakette in „Über uns“: zeigt jetzt „70 ha“ als Standard (in allen Looks).
mitfit-Shop: auf allen sechs Demos eingebaut (Schnupperkurs-Seite). Es ist der Live-Shop von Homburg: auf den Demos nur ansehen, nichts abschicken.
Runde Knöpfe bei Fairway und Eagle bleiben, Icons bei Eagle bleiben, eigenes Hero-Video später.
Fußballgolf: du würdest es „fast weglassen“. Das habe ich noch nicht umgesetzt: Fußballgolf steckt in 27 Dateien aller Looks (Menü, Footer, Erleben, Lotse-Antwort „Ausflugsgast“). Sag mir, ob es ganz aus dem Musterclub raus soll; dann baue ich es in einem Schritt für alle Looks aus.

Offen

Die Vorschau-Bühne p9 wird nicht mehr gebraucht (Live-Demo ist golf6).
Gesamtliste aller offenen Punkte zu den Looks: golf-looks-todo.html