# Bauplan: Hausverwaltung: geordnet und erreichbar

Rezept `hausverwaltung-weg` · Hausverwaltung / WEG-Verwaltung / Mietverwaltung / Sondereigentumsverwaltung (auch Gewerbeobjekte und kleine Verwaltungen mit Inhaber:in) · Stimmung: geordnet, erreichbar, sachlich, bodenständig · Stand 02.11.2026

Zur Hausverwaltung kommen drei Gruppen mit drei Fragen: Mieter:innen mit einem Schaden („Wen rufe ich an?“), Eigentümer:innen mit Unterlagen („Wo ist die Abrechnung, wann ist die Versammlung?“) und Gemeinschaften, die eine neue Verwaltung suchen („Was kostet das pro Einheit, wie läuft der Wechsel?“). Deshalb ist die Startseite ein Klingelbrett: vier gleich große Schilder (Schaden melden, Mieter:in, Eigentümer:in, Verwaltung anfragen), Notfallnummern immer zuerst. Danach Schadenmeldung in Schritten mit Fotos, Bereiche für Eigentümer und Mieter, Leistungen mit Preis je Einheit, Verwaltungswechsel, freie Wohnungen mit Energieausweis-Angaben, Zuständigkeiten und Bürozeiten. Source Serif 4 für Überschriften, Geist für Text. Putz, Messing und Schiefer, Ziegelrot nur für „Schaden melden“. Signatur: das Klingelbrett. Zeigt man auf ein Schild, macht es Platz und nennt den nächsten Schritt, die Nachbarn treten zurück (nachbarn-reagieren-hover).

## 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 `hausverwaltung-weg`) und https://cecodesign.de/lab/fundus/rezepte/hausverwaltung-weg/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt
- Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/hausverwaltung-weg/index.html

## Schrift

- Headline: `source-serif-4` · Text: `geist`
- Größen: h1 Source Serif 4 clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), opsz 60, wght 600, Laufweite -0.015em, Zeilenhöhe 1.05; Kapitel-H2 clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem), opsz 36. H3, Klingelschilder und Gebrauchsüberschriften Geist 600, 1.25rem. Fließtext Geist 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Telefonnummern, Objektnummern, Fristen und Preise Geist 500 mit Tabellenziffern. Knöpfe Geist 600, 1rem.
- Techniken: [Deutscher Satz für Zahlen, Datum, Telefon und Preise](https://cecodesign.de/lab/fundus/typo-techniken/zahlen-datum-telefon-satz/demo) `zahlen-datum-telefon-satz`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Silbentrennung für deutsche Komposita](https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/demo) `silbentrennung-komposita`

## Farbe

Wie ein gepflegtes Treppenhaus: Putz als Grund, Messing hell als Fläche für Klingelschilder, Zuständigkeiten und Fristen, Schiefer für Kapitel und Fuß. Ziegelrot nur für „Schaden melden“ und Notfallnummern. Keine Hausdach-Icons, kein Schlüssel-Logo, kein Immobilienblau.

- `--farbe-grund` #F2F0EB (Grund Putz)
- `--farbe-text` #1D2024 (Text (14,4 : 1 auf Grund))
- `--farbe-flaeche` #E8DFC9 (Fläche Messing hell: Klingelschilder, Zuständigkeiten, Fristen (Text 12,3 : 1))
- `--farbe-dunkel` #2B3138 (Dunkel Schiefer: Kapitel, Footer (Weiß darauf 13,1 : 1))
- `--farbe-signal` #9E3B22 (Signal Ziegel: Schaden melden, Notfallnummern (Weiß darauf 6,8 : 1; als Schrift auf Grund 5,9 : 1))
- `--farbe-leise` #5A5D61 (Leise: Objektnummern, Stand-Daten (5,8 : 1 auf Grund, 5,0 : 1 auf Messing))

## Bewegung

- Animationsstil: [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-toggle-asymmetrisch, öffnen); schließen cubic-bezier(0.7, 0, 0.84, 0)
- Dauer: 150 (Hover, Farbe), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 220 (Klingelschild macht Platz, Nachbarn treten zurück; 150 zurück), 450 (Seitenwechsel, Klingelschild wird Kopfzeile)
- Regel: Notfallnummern, Bürozeiten und Zuständigkeiten stehen sofort und bewegen sich nie. Das Klingelbrett reagiert auf Zeiger und Fokus: das gewählte Schild wird breiter und zeigt eine Zeile mit dem nächsten Schritt, die Nachbarn werden schmaler und ihr Grund heller, die Schrift bleibt bei mindestens 4,5 : 1. Beim Seitenwechsel wird das Klingelschild zur Kopfzeile der Bereichsseite. Bei prefers-reduced-motion wechselt nur die Farbe. Seit 05.11.2026: ein minimales Intro einmal je Sitzung (Klingelknöpfe leuchten nacheinander), die Seite bleibt ab 0 ms bedienbar.
- Hinweis: Kein Auftritt: Die Startseite steht. Bewegung nur als Antwort auf Zeigen und Bedienen: Klingelschild macht Platz (220 ms auf, 150 ms zurück), Akkordeon und Dialoge öffnen 300 ms und schließen 200 ms mit der Anlauf-Kurve.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.16, 1, 0.3, 1)` (--ease) für Klingelbrett, Akkordeon, Reiter, Dialoge, Seitenwechsel; Ausnahme `cubic-bezier(0.45, 0, 0.2, 1)` nur für nur Seitenwechsel: weich hinein und hinaus, ohne Überschwingen (ruhig heißt weich, nicht kurz)
- Dauern: klein 150 ms, mittel 300 ms, gross 300 ms, seitenwechsel 500 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Notfallnummer und „Schaden melden“: ab 0 ms, steht
2. Hausfoto mit Bildunterschrift: ab 0 ms, steht (LCP)
3. Klingelbrett: ab 0 ms, steht und ist bedienbar (Knöpfe: siehe Moment)
4. Moment: Klingelknöpfe: ab 120/200/280/360 ms, 300 ms, einmal je Sitzung: die vier Knöpfe leuchten nacheinander kurz auf wie beim Drücken (Farbe, kein Weg); Schilder stehen und sind bedienbar
- Ende nach 660 ms. Wiederholt: alles steht.
- Minimales Intro (05.11.2026, Jury-Lehre): Die Seite ist ab 0 ms bedienbar und steht; nur der Moment (rezept.moment) läuft einmal je Sitzung (sessionStorage), Klick, Taste oder Scroll beenden ihn sofort im Endzustand. Wiederholt steht alles.

**Scrollen** (höchstens drei Reveal-Arten):

- keine Reveals
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Notfallnummern und Schadenmeldung, Bürozeiten und Zuständigkeiten, Preise je Einheit

**Hover** (220 ms ein, 150 ms aus, --ease-ein / --ease-aus; nur mit Zeiger):

- Link: Unterstreichung kehrt wieder (unterstreichung-varianten wiederkehr)
- Knopf: button-zustaende: Ziegel wird eine Stufe dunkler; pfeil-icon-button linie: Pfeil 4 px
- Karte: Klingelschild macht Platz (nachbarn-reagieren-hover); Listen-Karten karte-ganzflaechig-klickbar liste
- Bild: kein Zoom

**Signatur** `nachbarn-reagieren-hover`: Das Klingelbrett: vier gleich große Messing-Schilder (Schaden melden, Mieter:in, Eigentümer:in, Verwaltung anfragen) mit Namen in Geist 600 und einem Klingelknopf als Kreis. Zeiger oder Fokus auf einem Schild: es wächst von 1 auf 1,4 Anteile und zeigt eine Zeile mit dem nächsten Schritt; die Nachbarn werden schmaler und ihr Messing heller. Auf Touch stehen alle Schilder gleich groß mit ihrer Zeile. Auslöser: Zeiger oder Fokus (nur hover: hover und :focus-visible); Wiederholung: je Zeigen.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen); dazu `vt-shared-element-morph`. Richtung: vorwaerts (Klingelbrett → Bereich): das Schild wird zur Kopfzeile der Bereichsseite, der Inhalt rückt 8 px nach; zurueck: die Kopfzeile wird wieder Schild; gleiche Ebene ohne Übergang; weich, keine Federn. Geteilt: kopf, schild (Klingelschild → Kopfzeile des Bereichs). Dauer 500 ms. Kurve: `--ease-seite cubic-bezier(0.45, 0, 0.2, 1)`.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Kein Element bewegt sich ohne Eingabe. Das Klingelbrett dimmt nie die Schrift unter 4,5 : 1 (wann_nicht von nachbarn-reagieren-hover).

**Reduzierte Bewegung:** Klingelschilder wechseln nur die Farbe, keine Breitenänderung; Akkordeon ohne Weg; Seitenwechsel als Überblendung 150 ms ohne Morph. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Schlüssel- oder Haus-Animationen; Zähler für verwaltete Einheiten; Laufband mit Objekten.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Klingelbrett nach nachbarn-reagieren-hover (Platz machen, ohne Dimmen der Schrift). Begrenzungen eigene Festlegung.

## 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, 64, 88, 120
- Sektionsabstand: clamp(56px, 7vw, 120px)
- Dichte: mittel
- Hinweis: Geordnet: Klingelbrett mit 12 px Fugen, Zuständigkeiten und Fristen dicht, Kapitel mit klarem Abstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(14px, 2vw, 28px)
- Maximale Breite: 1200px
- Raster: Hero 7/5: Hausfoto über 7 Spalten, Klingelbrett über 5 als 2 × 2-Raster (mobil vier Zeilen). Formulare über 7 Spalten, Hinweise rechts.
- Radius klein: 4px
- Radius groß: 10px
- Pillenform für Buttons: False
- Linie: 1px #1D202424 in Listen; Klingelschild mit 1px Rand in Leise; Felder 1px in Leise (3:1)
- Schatten: keiner; Klingelknopf als flacher Kreis mit Innenlinie
- Form: Gerade wie ein Briefkasten: kleine Radien, Messing-Schilder mit Rand, keine Karten-Schatten.

## Bildsprache

- Licht: Tageslicht, ehrlich, auch bedeckt; keine Weitwinkel-Verzerrung.
- Ausschnitt: Häuser frontal und unbeschnitten, Treppenhaus, Hof, Technikraum; Team im Büro.
- Personen: Team mit Einwilligung; Bewohner:innen nicht.
- Formate: 3:2, 4:5
- Nicht: Keine Schlüsselübergabe, keine Stock-Hochhäuser, keine Häuser ohne Erlaubnis der Gemeinschaft.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

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

- Anrede: Sie
- Sätze: Kurz und genau: wer ist zuständig, bis wann, was ist zu tun.
- Haltung: Wie eine gute Verwalterin am Telefon: freundlich, sortiert, verbindlich bei Fristen.
- Tonproben: Wasser tritt aus? Rufen Sie sofort an: [Nummer], rund um die Uhr., Die Jahresabrechnung 2026 liegt ab 30. April im Portal.
- Nicht: „Rundum-sorglos-Paket“, „wir kümmern uns um alles“, Paragrafen ohne Erklärung.

## Hero

Foto-Hero mit Bildunterschrift (foto-hero, Variante bildunterschrift): ein echtes Foto eines verwalteten Hauses, unbeschnitten, mit Erlaubnis der Gemeinschaft, darunter die Bildunterschrift mit Straße und Ort oder nur dem Viertel. Rechts daneben bzw. mobil direkt darunter das Klingelbrett mit vier Schildern; über allem in der Kopfzeile die Notfallnummer. Kein Stockfoto mit Schlüsselübergabe.

- Raster: Hausfoto mit Bildunterschrift über Spalte 1 bis 7, H1 darüber; Klingelbrett über Spalte 8 bis 12 als 2 × 2; mobil H1, Klingelbrett, Foto.
- Bild: Echtes Foto eines verwalteten Hauses (mit Erlaubnis), unbeschnitten, 3:2.
- Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), Source Serif 4; Name der Verwaltung oder ein Satz zu Ort und Aufgabe, kein Label darüber.
- Handlung: Klingelschild „Schaden melden“ in Ziegel, die anderen drei in Messing; Telefon im Kopf.
- Zusatz: Notfallnummer im Kopf jeder Seite; mobil untere Leiste Anrufen / Schaden melden.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=bildunterschrift) `foto-hero` · Variante „Bildunterschrift als Gestaltung“

## Sektionen in dieser Reihenfolge

1. **Klingelbrett (vier gleich große Schilder: Schaden melden, Mieter:in, Eigentümer:in, Verwaltung anfragen; je Schild der nächste Schritt als Zeile)**: [Nachbarn reagieren auf Hover](https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/demo?v=klingelbrett) `nachbarn-reagieren-hover` · Variante „Klingelbrett (vier Schilder als Weiche)“
2. **Schaden melden (zuerst Notfälle mit Nummern: Wasser, Heizung, Aufzug, Strom; bei Gasgeruch Versorger und 112; dann Formular in Schritten: Objekt, Lage, Beschreibung, Fotos, Erreichbarkeit; Bestätigung mit Vorgangsnummer)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=weiche) `kontakt-anfrage-formular` · Variante „Anliegen-Weiche“, [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=senkrecht) `mehrschritt-anfrage` · Variante „Senkrechter Stepper“, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=kompakt-mobil) `datei-upload-ablage` · Variante „Ein Knopf und Kacheln“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=anfrage) `danke-seite-naechste-schritte` · Variante „Offene Anfrage“
3. **Für Eigentümer:innen (Eigentümerversammlung und Fristen, Jahresabrechnung und Wirtschaftsplan, Beschlusssammlung, Sonderumlagen; Zugang zum Portal; Unterlagen nur im Portal, nie öffentlich)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“
4. **Für Mieter:innen (Ansprechperson je Haus, Hausordnung, Nebenkostenabrechnung erklärt, Umzug und Wohnungsgeberbestätigung, Kündigung; Fragen mit Suche)**: [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=suche) `faq-seite-suche` · Variante „Mit Suche“
5. **Leistungen und Preise (WEG-Verwaltung, Mietverwaltung, Sondereigentumsverwaltung; je Leistung eine Seite mit Antwort zuerst: was enthalten ist, Preis je Einheit und Monat als Spanne, Einzugsgebiet; Zusatzleistungen getrennt)**: [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk) `leistungsseite-antwort-zuerst` · Variante „Handwerk“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=liste) `karte-ganzflaechig-klickbar` · Variante „Liste: Klick-Weiterleitung“
6. **Verwaltungswechsel: so läuft es (Anfrage → Objektbegehung → Angebot → Beschluss der Gemeinschaft → Übergabe der Unterlagen → erste Versammlung; Dauer ehrlich)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=unterstrich) `prozess-timeline-wachsende-linie` · Variante „Unterstrich je Schritt“
7. **Anfrage für eine neue Verwaltung (Kommen wir zu Ihnen? PLZ zuerst, dann Objektart, Einheiten, Baujahr, heutige Verwaltung; Rückmeldung mit Termin)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz) `mehrschritt-anfrage` · Variante „PLZ zuerst“
8. **Freie Wohnungen (nur bei eigener Vermietung: Kaltmiete, Nebenkosten, Kaution, Energieausweis-Pflichtangaben auf jeder Karte und im Exposé)**: [Objekt-Steckbrief im Exposé](https://cecodesign.de/lab/fundus/sektionen/objekt-steckbrief-expose/demo?v=miete) `objekt-steckbrief-expose` · Variante „Miet-Exposé“
9. **Team und Zuständigkeit (wer ist für welches Haus zuständig, nach Objekt oder Straße suchbar; Vertretung im Urlaub; Rückruf innerhalb eines Werktags)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=liste) `team-ueber-mich-layout` · Variante „Namensliste, ohne Fotos tauglich“, [Ansprechperson-Band](https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo?v=kanzlei) `ansprechperson-band` · Variante „Kanzlei“
10. **Aktuelles für die Häuser (Wartungstermine, Rauchmelderprüfung, Heizungsumstellung, Bürozeiten an Feiertagen; mit Datum)**: [News-Übersicht mit Kategorien und Jahr-Archiv](https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/demo?v=mehr) `news-uebersicht-archiv` · Variante „Weitere laden“, [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=meldung) `artikel-seite` · Variante „Meldung“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste) `oeffnungszeiten-status` · Variante „Hinweisleiste über dem Kopf“
11. **Büro und Erreichbarkeit (Telefonzeiten mit Status, Sprechzeiten nach Termin, Adresse als Text, Karte per 2-Klick; Notfallnummern außerhalb der Bürozeiten)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“, [Anruf-Knopf mit Erreichbarkeit](https://cecodesign.de/lab/fundus/buttons/erreichbarkeits-button/demo?v=knopf) `erreichbarkeits-button` · Variante „Knopf mit Status und Rückruf“, [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“
12. **Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Diensten für Verbraucher:innen nach BFSG prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Nachbarn reagieren auf Hover](https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/demo?v=klingelbrett) `nachbarn-reagieren-hover` · Variante „Klingelbrett (vier Schilder als Weiche)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Das Klingelbrett groß im ersten Bildschirm: vier Messingschilder (Schaden melden, Mieter:in, Eigentümer:in, Verwaltung anfragen); einmal je Sitzung leuchten die Klingelknöpfe nacheinander kurz auf, danach reagieren die Nachbarschilder auf Zeiger und Fokus.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Schilder je mindestens 3 Spalten und 120 px hoch
- Muster: [Nachbarn reagieren auf Hover](https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/demo?v=klingelbrett) `nachbarn-reagieren-hover` · Variante „Klingelbrett (vier Schilder als Weiche)“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

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

## 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`, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“
- Hover: [Nachbarn reagieren auf Hover](https://cecodesign.de/lab/fundus/hover/nachbarn-reagieren-hover/demo?v=klingelbrett) `nachbarn-reagieren-hover` · Variante „Klingelbrett (vier Schilder als Weiche)“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=liste) `karte-ganzflaechig-klickbar` · Variante „Liste: Klick-Weiterleitung“
- Mikroanimation: [Absenden wird Bestätigung](https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/demo?v=karte) `absenden-zu-bestaetigung` · Variante „Karte: Formular wird Bestätigungskarte“, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

## 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`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=anfrage) `danke-seite-naechste-schritte` · Variante „Offene Anfrage“
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- stapelkarten – Signatur von umzug-transport-logistik
- richtungsbewusste-uebergaenge – Signatur von immobilien-diskret-hochwertig; die Hausverwaltung verkauft nicht
- zahlen-odometer – keine hochgezählten Einheiten oder Objekte
- marquee-laufband – keine durchlaufenden Objekte
- smooth-scroll-lenis – der Weg zur Notfallnummer muss sofort gehen
- logo-wand-social-proof – Zertifikate nur mit Nachweis im Text, keine Deko-Logos
- Hausdach-Icons, Schlüsselübergabe-Fotos, Immobilienblau – Klischee statt Ordnung
- Öffentliche Listen verwalteter Objekte ohne Erlaubnis der Gemeinschaften, Unterlagen zum Herunterladen ohne Login – Datenschutz

## Regeln

- Erster Bildschirm: Hausfoto mit Bildunterschrift, H1 und das Klingelbrett mit vier gleich großen Schildern; die Notfallnummer steht im Kopf jeder Seite. Mobil untere Leiste Anrufen / Schaden melden.
- Signatur (nachbarn-reagieren-hover): genau vier Schilder, gleich groß in Ruhe; das gewählte Schild macht Platz und nennt den nächsten Schritt, die Nachbarn werden schmaler und heller, die Schrift bleibt bei mindestens 4,5 : 1. Auf Touch alle Zeilen sichtbar; bei reduzierter Bewegung nur Farbwechsel.
- Notfälle zuerst: Notfallnummern je Gewerk bzw. Dienstleister außerhalb der Bürozeiten, bei Gasgeruch Versorger und 112; im Formular steht über dem ersten Feld „Im Notfall anrufen“. Nummern aus einer Quelle (firmendaten-strukturiert) und regelmäßig prüfen.
- Erlaubnis nach § 34c Abs. 1 Satz 1 Nr. 4 GewO (Wohnimmobilienverwalter) mit zuständiger Behörde im Impressum (§ 5 DDG); Berufshaftpflicht und Weiterbildungspflicht nach der Makler- und Bauträgerverordnung, auf Anfrage nachweisen. „Zertifizierter Verwalter“ (§ 26a WEG) nur mit Bescheinigung. Vom Kunden prüfen lassen.
- Datenschutz: Abrechnungen, Protokolle und Beschlüsse nur im Portal mit Login, nie als offene PDFs; Schadenmeldung fragt nur, was zur Bearbeitung nötig ist. Objektlisten und Hausfotos nur mit Erlaubnis der Gemeinschaft. Vom Kunden prüfen lassen.
- Freie Wohnungen nur mit den Pflichtangaben zum Energieausweis in der Anzeige (Gebäudeenergiegesetz) und ohne Provision für Mieter:innen, wo das Bestellerprinzip gilt (objekt-steckbrief-expose, Variante miete). Vom Kunden prüfen lassen.
- Preise als Spanne je Einheit und Monat mit Stand-Datum und dem Satz, wovon sie abhängen; Zusatzleistungen (Sonderverwaltung, Baubetreuung) getrennt.
- Knöpfe: Ziegel gefüllt (button-zustaende) nur für „Schaden melden“; Nebenwege als Textlink mit Pfeil (pfeil-icon-button, Variante linie).

## Rezept-Varianten

- **Mietverwaltung für private Vermieter:innen (wenige Häuser)**: Schrift, Farbe, Stil und Signatur bleiben; das Klingelbrett hat drei Schilder (Schaden melden, Mieter:in, Vermieter:in werden). Statt Eigentümerversammlung: Mieterauswahl, Mietvertrag, Nebenkostenabrechnung, Mieterhöhung nach Mietspiegel, Instandhaltung. Preise als Prozent der Miete oder je Einheit, mit Rechenbeispiel. Erlaubnis nach § 34c GewO bleibt Pflicht. 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“.