# Bauplan: Immobilien: diskret und hochwertig

Rezept `immobilien-diskret-hochwertig` · Immobilienmakler / Projektentwickler / Hausverwaltung mit Verkauf · Stimmung: seriös, hochwertig, ruhig, vertrauensvoll · Stand 02.11.2026

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.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `immobilien-diskret-hochwertig`) und https://cecodesign.de/lab/fundus/rezepte/immobilien-diskret-hochwertig/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `libre-caslon-display` · Text: `hanken-grotesk`
- Größen: h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, Laufweite -0.005em, Zeilenhöhe 1.08 – nur ab 2rem einsetzen (Display-Schnitt). Zwischentitel und Fließtext in Hanken Grotesk 400/500, 1.0625rem, Zeilenhöhe 1.55. Labels Versal 0.75rem mit 0.09em (~1.5px wie Inigo). Objektdaten (m², Zimmer, Preis) mit tabellarischen Ziffern.
- Techniken: [Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)](https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/demo) `serif-grotesk-duotone`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`

## Farbe

Warme, fast weiße Flächen und ein Sandton als Bühne für Fotos, ein tiefer Markenton für Headlines und Footer, ein sparsamer Akzent ausschließlich für den Haupt-CTA (Bewertung anfragen).

- `--farbe-grund` #FCFAF5 (Grund (E&V white-linen))
- `--farbe-flaeche` #EFE8DF (Sandfläche/Karten (E&V brown-light, ähnlich Dahler #E8E2DB))
- `--farbe-marke` #02385C (Markenton für Headlines, Footer (Dahler))
- `--farbe-text` #313131 (Fließtext)
- `--farbe-linie` #B5B2AF (Linien/Meta (Inigo beige))
- `--farbe-signal` #ED7F1A (CTA-Akzent (Dahler) – nur Buttons)
- `--farbe-text-2` #716F6D (Meta-Text barrierefrei (4.8 : 1 auf #FCFAF5; #B5B2AF nur für Linien oder Schrift ab 24 px))

## Bewegung

- Animationsstil: [Animationsstil „Editorial langsam“](https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo) `token-editorial-langsam`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam), nur für Bilder; UI über animationsstil_ui
- Dauer: 200 (Hover/Farbe), 400 (Menü, Höhe, Header), 900–1100 (Bild-Einblendung)
- Regel: UI (Menü, Filter, Drawer, Formulare) über animationsstil_ui token-toggle-asymmetrisch: Öffnen mit der Expo-Kurve in etwa 400 ms, Schließen schneller mit cubic-bezier(0.7, 0, 0.84, 0). Nur Bilder dürfen die lange Landephase des Editorial-Stils nutzen (clip-path-Aufdeckung plus scale 1.06 → 1).

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 72, 112, 160
- Sektionsabstand: clamp(88px, 10vw, 152px)
- Dichte: luftig
- Hinweis: Viel Platz um Objektfotos; Objektdaten dagegen dicht in einer Zeile (Zimmer, m², Preis mit 16 px Abstand), damit man vergleichen kann.
- Spalten: 12
- Seitenrand: clamp(20px, 4vw, 64px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- 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
- Pillenform für Buttons: True
- Linie: 1px #B5B2AF für Linien und Meta-Trenner
- 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.

## Bildsprache

- 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.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- 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: „Traumimmobilie“, „exklusiv“ in jedem Satz, „Jetzt zuschlagen“, „provisionsfrei“ ohne Prüfung.

## Hero

Foto-Hero als Standard: ein echtes Objekt- oder Regionsfoto, ein Satz Positionierung und zwei Wege als Knöpfe: „Angebote ansehen“ (Kaufen/Mieten, Ort) und „Was ist meine Immobilie wert?“. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Objektsuche (Portal-Feed mit Filter) oder ein funktionierendes Bewertungsformular läuft; mit KI-Assistent dahinter direkt am Feld kennzeichnen (Art. 50 KI-VO). Kein Fake-Eingabefeld.

- Raster: Foto randlos über die volle Breite, Textblock unten links über Spalte 1 bis 6 auf einer ruhigen Bildzone.
- 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.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links) `foto-hero` · Variante „Vollbild, Satz unten links“
- Nur unter der Bedingung oben: [Prompt-Hero mit rotierenden Beispiel-Prompts](https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/demo) `prompt-hero-eingabefeld`

## Sektionen in dieser Reihenfolge

1. **Aktuelle Angebote (jede Karte mit der Pflichtzeile zum Energieausweis)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“, [Objekt-Steckbrief im Exposé](https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=anzeige) `objekt-steckbrief-expose` · Variante „Objektkarten in der Angebotsliste“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=daumen) `karussell-steuerung` · Variante „Daumen“
2. **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)](https://cecodesign.de/lab/fundus/scroll/stapelkarten/demo) `stapelkarten`, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
3. **Marktzahlen der Region**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=diagramm) `zahlen-fakten-section` · Variante „Mit Mini-Diagramm“
4. **Exposé (Objektseite; vorheriges/nächstes Objekt mit richtungsbewusstem Übergang)**: [Objekt-Steckbrief im Exposé](https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=kauf) `objekt-steckbrief-expose` · Variante „Kauf-Exposé mit Geschossen“, [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=titel) `split-screen-sticky-seiten` · Variante „Sticky-Titel und Karten“, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“, [Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)](https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/demo) `richtungsbewusste-uebergaenge`
5. **Referenzen / verkaufte Objekte**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
6. **Team / Standort**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement) `team-ueber-mich-layout` · Variante „Statement-Satz mit Inline-Bildern“
7. **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](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“
8. **Ratgeber / Magazin**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“
9. **Kundenstimmen (eigene Stimmen; Plattform-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat) `testimonials-neu-gedacht` · Variante „Ein großes Zitat“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“

## Signatur (Pflicht)

- [Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)](https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/demo) `richtungsbewusste-uebergaenge`

## Buttons

- Haupthandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch) `pfeil-icon-button` · Variante „Pfeil-Tausch“
- Nebenhandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`

## Weitere Bausteine

- Seitenwechsel: [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück](https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo) `hide-on-scroll-header`
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Schrift: [Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)](https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/demo) `split-mask-reveal`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen) `bild-zoom-in-maske` · Variante „Rahmen schrumpft, Bild zoomt gegenläufig“
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`, [Toggle-Schalter](https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/demo) `toggle-switch`
- Galerie: [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis) `studio-visitenkarte-footer` · Variante „Stille Visitenkarte“, [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=kultur) `footer-newsletter-mit-persoenlichkeit` · Variante „Wochenzettel mit Programmauswahl“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- gaussian-splats / scroll-3d-kamerafahrt – 10–100 MB pro Objekt, Rundgang lieber als verlinkter 360°-Dienst im Exposé
- webgl-bildverzerrung / zoom-parallax – Objektfotos müssen unverfälscht wirken
- smooth-scroll-lenis – Exposé-Daten werden gelesen und verglichen
- kreistext-siegel-rotierend – Template-Deko
- marquee-laufband mit Objekten – Angebote müssen vollständig lesbar sein
- token-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.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.