Immobilien: diskret und hochwertig

Immobilienmakler / Projektentwickler / Hausverwaltung mit Verkauf

Eine klassische Antiqua für Headlines, eine neutrale Grotesk für Fakten, warme helle Flächen und viel Platz für Objektfotos. Für Eigentümer zählt die Bewertung (Lead), für Käufer die Suche – beides ist ab dem ersten Bildschirm erreichbar. Bewegung ist leise: Bilder kommen mit langer Ausklang-Kurve, die UI reagiert in 400 ms.

Bauplan tokens.css Alle Techniken

Schrift

Diskret und hochwertig

Eine klassische Antiqua für Headlines, eine neutrale Grotesk für Fakten, warme helle Flächen und viel Platz für Objektfotos.

Headline: Libre Caslon Display
Text: Hanken Grotesk

Farbe

#FCFAF5
#EFE8DF
#02385C
#313131
#B5B2AF
#ED7F1A
#716F6D

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)

Stil: Animationsstil „Editorial langsam“
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: 200 (Hover/Farbe), 400 (Menü, Höhe, Header), 900–1100 (Bild-Einblendung)

Aufbau der Seite

SignaturRichtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · VollbildoderPrompt-Hero mit rotierenden Beispiel-Prompts

Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe Facettenfilter mit Ergebnisliste · Filterleiste Objekt-Steckbrief im Exposé · Anzeige Karussell-Steuerung und Anzeige · Daumen
Für Eigentümer: Verkaufen / Bewerten / Vermieten (je eine Leistungsseite, Antwort zuerst; auf der Startseite drei Stapelkarten nur mit je einem echten Foto und kurzem, gleich langem Text, sonst drei ruhige Spalten)Stapelkarten beim Scrollen (Stacking Cards)Leistungsseite: Antwort zuerst · Praxis
Marktzahlen der RegionZahlen-/Fakten-Sektion als Typo-Ereignis · Mit Mini-Diagramm
Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)Objekt-Steckbrief im Exposé · Kauf Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Titel und Karten Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Produktgalerie Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)
Referenzen / verkaufte ObjekteNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
Team / StandortTeam-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
Kontakt / Anfahrt / Büro (kurze Anfrage, Bürozeiten bzw. „Termin nach Vereinbarung“, Adresse als Text, Karte per 2-Klick)Kontakt- und Anfrageformular als eigene Sektion Öffnungszeiten mit Live-Status · Termin Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
Ratgeber / MagazinEditorial-/Magazin-Layout · Zeitung
Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · Ein großes Zitat Plattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille

Seitenwechsel: Vorschaubild wird zur Hero (Shared-Element-Morph)
Navigation: Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück
Scroll: Bild-Reveal per Clip-Path/Maske
Schrift: Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)
Hover: Bild-Zoom in der Maske · Rahmen schrumpft
Mikroanimation: Ein-/Ausblenden mit @starting-style Animiertes Auswahlmenü (anpassbares select)Toggle-Schalter
Galerie: Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Produktgalerie Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
Footer: Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Stille Visitenkarte Newsletter-Modul mit Persönlichkeit · Wochenzettel
Buttons: Pfeil-Icon-Button · Pfeil-Tausch Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)

Nicht verwenden

Gaussian Splats (gescannte Räume)Scroll-gesteuerte 3D-Szene / 3D-Modell (Kamerafahrt) 10–100 MB pro Objekt, Rundgang lieber als verlinkter 360°-Dienst im Exposé
WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)Zoom-Parallax / Zoom-through Objektfotos müssen unverfälscht wirken
Smooth Scroll mit Lenis Exposé-Daten werden gelesen und verglichen
Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis) Template-Deko
Marquee-Laufband (optional scroll-gekoppelt) mit Objekten – Angebote müssen vollständig lesbar sein
Animationsstil „Luxus weich“ in voller Länge (1,2–2,4 s) für UI – zu träge beim Durchklicken von Angeboten

Regeln

Erster Bildschirm mit zwei Wegen: Objektsuche (Kaufen/Mieten, Ort) und 'Was ist meine Immobilie wert?' – beide mit echter Funktion (Portal-Feed bzw. Bewertungsformular). Als Eingabefeld (prompt-hero-eingabefeld) nur, wenn diese Funktion läuft; sonst Foto-Hero mit zwei Knöpfen.
Serif nur für Headlines ab 2rem, alle Daten und Formulare in der Grotesk.
Objektkarten: Foto 4:3, Ort, Zimmer, m², Preis in Tabellenziffern; Karte → Exposé per Shared-Element-Übergang.
Exposé: Bilder links scrollen, Eckdaten und Kontaktformular rechts sticky; mobil Eckdaten oben, Anfrage-Button unten fest.
Ein CTA-Akzent pro Seite (Bewertung oder Anfrage), sonst nur Markenton und Sand.
Pflichtangaben sichtbar: Energieausweis-Daten in Anzeige und Exposé (GEG), Provisionshinweis, Impressum mit Erlaubnis nach § 34c GewO und zuständiger Behörde – vom Kunden prüfen lassen.
Suchauftrag/Newsletter als Footer-Angebot (Inigo 'Alerts').
Übergänge richtungsbewusst: Karte → Exposé tiefer (Shared Element), Exposé → nächstes Objekt seitlich, Zurück gespiegelt.
Pflichtangaben und Recht (Leitfaden 8a): Objektfotos und Grundrisse nur mit Nutzungsrecht; Plattform-Bewertungen nur mit Echtheitshinweis direkt daneben; KI-Suche oder Chat direkt beim Start kennzeichnen (Art. 50 KI-VO); Bewertungsformular mit Datenschutzhinweis – vom Kunden prüfen lassen.

Bild und Ton

Licht: Tageslicht oder blaue Stunde, ruhig und unverfälscht; keine übertriebene HDR-Bearbeitung.
Ausschnitt: Objekt in der Totale, Innenräume auf Augenhöhe mit geraden Linien, Details wie Parkett, Fenster, Treppe.
Personen: Nein in Objektfotos; Makler:innen als einheitliche Porträts im Team.
Formate: 4:3, 3:2, 16:9
Nicht: Keine Weitwinkelverzerrung, kein Himmeltausch, keine Handschlag- oder Schlüsselübergabe-Stockfotos, keine Zoom- oder WebGL-Effekte auf Objektfotos.
Anrede: Sie
Sätze: Ruhig und vollständig, Fakten mit Einheit. Lagebeschreibung in zwei bis drei Sätzen, keine Aufzählung von Adjektiven.
Haltung: Diskret und beratend, nie drängend. Eigentümer:innen und Käufer:innen werden getrennt angesprochen.
Tonproben: Häuser mit Geschichte zwischen Fluss und Altstadt., Was ist Ihre Immobilie wert? Wir schätzen sie vor Ort ein.
Nicht schreiben: „Traumimmobilie“, „exklusiv“ in jedem Satz, „Jetzt zuschlagen“, „provisionsfrei“ ohne Prüfung.

Hero, Raum und Form

Hero-Raster: Foto randlos über die volle Breite, Textblock unten links über Spalte 1 bis 6 auf einer ruhigen Bildzone.
Hero-Bild: Ein echtes Objekt- oder Regionsfoto, 16:9 Desktop, 4:5 mobil.
Überschrift: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, unten links.
Handlung: „Angebote ansehen“ (dunkle Pille) und „Was ist meine Immobilie wert?“ (#ED7F1A), nebeneinander unter der H1. Prompt-Feld nur als hero_variante mit echter Suche.
Zusatz: Kein Versal-Label über der H1 (C13): Region oder Leistung steht in der H1 oder als ruhige Zeile darunter in der Grundschrift. Suchauftrag erst im Footer. Umsetzung: foto-hero/randlos-unten-links.
Sektionsabstand: clamp(88px, 10vw, 152px)
Dichte: luftig
Raum: Viel Platz um Objektfotos; Objektdaten dagegen dicht in einer Zeile (Zimmer, m², Preis mit 16 px Abstand), damit man vergleichen kann.
Spalten: 12
Maximale Breite: 1440px
Raster: Objektkarten 3 Spalten, Foto 4:3. Exposé 7/5: Bilder links scrollen, Eckdaten und Formular rechts sticky; mobil Eckdaten oben.
Radius klein: 2px
Radius groß: 0
Schatten: keiner
Form: Bilder und Karten eckig, nur die Haupthandlung ist eine dunkle Pille (pfeil-icon-button, Variante tausch). Der Akzent #ED7F1A bleibt dem einen CTA vorbehalten.

Vorbilder