# Bauplan: Coworking und Räume: hell, offen, buchbar

Rezept `coworking-buero-raeume` · Coworking Space / Büros auf Zeit und Business Center / Meeting-, Seminar- und Workshopräume / Coworking im ländlichen Raum (auch Werkstatt- und Atelierplätze) · Stimmung: hell, offen, gesellig, unkompliziert · Stand 02.11.2026

Wer ein Coworking sucht, fragt: Kann ich heute kommen, was kostet ein Tag oder ein fester Platz, welche Räume gibt es für wie viele Leute, und wie komme ich rein? Deshalb steht unter dem Hero „Heute“: Tagespass, Öffnung und Zugang, freie Plätze nur aus dem Buchungssystem. Danach Arbeitsplätze und Preise mit Endpreisen, Räume mit Kapazität und Bestuhlung, das Haus Geschoss für Geschoss, Community-Termine, Firmensitz und Post nur mit ehrlichem Rahmen. Bricolage Grotesque für alles, Azeret Mono für Raumcodes, Zeiten und Preise. Beton hell, Kreidegrün und Graphit, Tomatenrot nur für „Tagespass buchen“. Signatur: Geschoss für Geschoss. Das Foto des Hauses ist in waagerechte Scheiben geschnitten, jede Scheibe ein Geschoss mit seinem Angebot; sie heben sich beim Laden einmal und folgen dem Zeiger (bild-scheiben-tiefe, waagerecht). Beim Seitenwechsel steigen fünf Stufen wie Etagen.

## 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 `coworking-buero-raeume`) und https://cecodesign.de/lab/fundus/rezepte/coworking-buero-raeume/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `bricolage-grotesque` · Text: `bricolage-grotesque` · Akzent: `azeret-mono`
- Größen: h1 Bricolage Grotesque clamp(2.5rem, 1.2rem + 5vw, 5.25rem), opsz 96, wdth 90, wght 700, Laufweite -0.03em, Zeilenhöhe 0.95; Kapitel-H2 clamp(1.75rem, 1.2rem + 2.2vw, 3rem), opsz 48, wght 650. H3 und Gebrauchsüberschriften Bricolage 600, opsz 14, 1.25rem. Fließtext Bricolage Grotesque 1.0625rem (17 px), opsz 14, wght 400, Zeilenhöhe 1.55, höchstens 64ch. Raumcodes, Uhrzeiten, Personenzahlen und Preise Azeret Mono 0.875rem bis 1rem, Versal, +0.06em, Tabellenziffern. Knöpfe Bricolage 600, 1rem.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`

## Farbe

Hell wie ein Raum mit großen Fenstern: Beton hell als Grund, Kreidegrün als Fläche für Preise und Räume, Graphit für Kapitel, Raumliste und Fuß. Tomatenrot nur für „Tagespass buchen“ und „Raum buchen“. Keine Neonfarben, kein Startup-Lila, keine Glasflächen.

- `--farbe-grund` #EEEDE8 (Grund Beton hell)
- `--farbe-text` #1A1A18 (Text (14,9 : 1 auf Grund))
- `--farbe-flaeche` #D7E2D9 (Fläche Kreidegrün: Preise, Räume, Heute (Text 13,1 : 1))
- `--farbe-dunkel` #232629 (Dunkel Graphit: Kapitel, Raumliste, Footer (Weiß darauf 15,2 : 1, Beton hell 13,0 : 1))
- `--farbe-signal` #B8361F (Signal Tomate: Tagespass buchen, Raum buchen (Weiß darauf 5,9 : 1; als Schrift auf Grund 5,0 : 1))
- `--farbe-leise` #595954 (Leise: Raumcodes, Stand-Daten (6,0 : 1 auf Grund, 5,3 : 1 auf Kreidegrün))

## Bewegung

- Animationsstil: [Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)](https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/demo) `token-studio-signatur`
- Kurve: cubic-bezier(0.625, 0.05, 0, 1) (token-studio-signatur)
- Dauer: 250 (Hover, Farbe), 400 (Reiter, Akkordeon, Dialog öffnen), 280 (schließen), 525 (H1-Zeilen einmal), 725 (Geschosse des Hausbilds heben sich einmal), 1100 (Seitenwechsel als fünf Stufen, zurück 740)
- Regel: Preise, Zeiten, Kapazitäten und Zugang stehen sofort. Die H1 steigt einmal aus der Maske; die drei Geschoss-Scheiben des Hausbilds heben sich einmal von unscharf zu scharf und folgen danach nur dem Zeiger. Knöpfe: Fläche fährt von unten ein, Text rollt. Beim Seitenwechsel steigen fünf Stufen wie Etagen, zurück fallen sie. Bei prefers-reduced-motion liegt das Bild flach, Seitenwechsel als Überblendung.
- Hinweis: Eine Kurve für alles: cubic-bezier(0.625, 0.05, 0, 1). Die Scheiben des Hausbilds heben sich einmal beim Laden (725 ms) und folgen dann nur dem Zeiger mit Lerp 0,08; auf Touch stehen sie gehoben. Für die fünf Stufen des Seitenwechsels gilt die Sonderkurve aus seitenwechsel-wachsende-form.

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

- Hauptkurve: `cubic-bezier(0.625, 0.05, 0, 1)` (--ease) für H1, Scheiben, Knöpfe, Reiter, Akkordeon; Ausnahme `cubic-bezier(0.37, 0, 0.63, 1)` nur für nur die fünf Stufen beim Seitenwechsel (seitenwechsel-wachsende-form, stufe)
- Dauern: klein 250 ms, mittel 400 ms, gross 725 ms, seitenwechsel 1100 ms, schliessen 280 ms (als `--dauer-klein` … in tokens.css)

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

1. Kopf mit „Tagespass buchen“: ab 0 ms, steht
2. Hausbild: ab 0 ms, steht (LCP, nie über Deckkraft)
3. H1 (zwei Zeilen): ab 0/40 ms, 525 ms, Zeilenmaske translateY 100 % → 0, --ease
4. Geschoss-Scheiben (bild-scheiben-tiefe, waagerecht): ab 120/160/200 ms, 725 ms, heben 0 → 1: Unschärfe 7 px → 0, scale bis 1,1, Schatten wächst; Marken der Geschosse stehen als Text daneben
5. Heute (Tagespass, Zugang): ab 0 ms, steht
- Ende nach 925 ms. Wiederholt: Scheiben stehen gehoben, H1 mit halbem Versatz (sessionStorage).

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

- Geschosse (`bild-scheiben-tiefe`): Das Haus (Kapitel je Geschoss); scrollgekoppelt, Versatz 0 ms, die Scheibe des Geschosses, um das es im Kapitel geht, hebt sich, die anderen sinken; höchstens 30 px Versatz; scrollgekoppelt (animation-timeline: view()), linear; ohne Unterstützung Endzustand
- 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, Preise und Endpreise, Kapazitäten und Bestuhlung, Zugang und Öffnungszeiten

**Hover** (400 ms ein, 280 ms aus, --ease; nur mit Zeiger):

- Link: Unterstreichung wächst aus der Mitte (unterstreichung-varianten mitte)
- Knopf: pfeil-icon-button kreis-expand: Kreis wächst zur Fläche, Text rollt; kontur-button-zeichnen zeichnen: Kontur zeichnet sich
- Karte: bild-zoom-in-maske basis: Bild 1,04 in fester Maske; Raumcode wechselt auf Tomate
- Bild: Zoom 1,04 nur in Raumkarten

**Signatur** `bild-scheiben-tiefe` (Variante waagerecht): Geschoss für Geschoss: drei waagerechte Scheiben aus dem Hausbild (Erdgeschoss, Obergeschoss, Dach) heben sich beim Laden einmal von unscharf zu scharf; daneben stehen als Text die Geschosse mit ihrem Angebot (Café und Tagespass, Flex Desks, Büros und Meetingraum). Danach folgen sie nur dem Zeiger (Lerp 0,08, höchstens 30 px); im Kapitel „Das Haus“ hebt sich die Scheibe des Geschosses, um das es gerade geht. Auslöser: Laden, danach Zeiger und Scroll; Wiederholung: einmal je Tab; Zeiger folgt, solange er sich bewegt.

**Seitenwechsel** `seitenwechsel-wachsende-form` (Variante stufe); dazu `vt-shared-element-morph`. Richtung: vorwaerts: fünf Stufen steigen von unten links wie Etagen und geben die neue Seite frei; zurueck: die Stufen fallen von rechts; gleiche Seite ohne Übergang. Geteilt: kopf, raumbild (Raumkarte → Kopfbild der Raumseite). Dauer 1100 ms, zurück 740 ms. Kurve: `cubic-bezier(0.37, 0, 0.63, 1) (--ease-stufe), Stagger 90 ms hin, 60 ms zurück`.

**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). Die Scheiben sind der eine Material- und Tiefeneffekt: kein Parallax, kein Glas, kein zweiter Bildeffekt in derselben Ansicht (wann_nicht von bild-scheiben-tiefe). Keine Gesichter und keine Schrift an den Schnittkanten. Zeigerfolge höchstens 30 px, auf Touch aus.

**Reduzierte Bewegung:** Hausbild flach mit den Geschossen als Textliste daneben; H1 steht; Knöpfe nur Farbwechsel; Seitenwechsel als Überblendung 150 ms ohne Stufen. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Glasflächen und Neon-Verläufe; Laufband mit Mitglieder-Logos; Zähler für Mitglieder oder Kaffeetassen.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Scheiben nach bild-scheiben-tiefe (waagerecht), Stufen nach seitenwechsel-wachsende-form (stufe: 1100/740 ms, cubic-bezier(0.37, 0, 0.63, 1)). 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, 96, 128
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: mittel
- Hinweis: Offen wie eine Etage: Preise und Raumliste dicht mit Haarlinien, Hero und Haus mit viel Luft.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 64px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1320px
- Raster: Hero 5/7 mit dem Hausbild rechts; Raumliste als Werkliste über 12 Spalten mit Haarlinien (gap-decorations-raster); Preise als drei ungleich breite Spalten.
- Radius klein: 6px
- Radius groß: 14px
- Pillenform für Buttons: True
- Linie: 1px #1A1A1824 als Haarlinie in Raumliste und Preisen (row-rule); Felder 1px in Leise (3:1)
- Schatten: nur an gehobenen Scheiben (aus bild-scheiben-tiefe)
- Form: Knöpfe als Pille, Karten 14 px, Raumliste ohne Kästen.

## Bildsprache

- Licht: Tageslicht, große Fenster, auch Abendlicht mit Lampen; kein Blitz.
- Ausschnitt: Haus von außen mit klaren Geschossen, Räume leer und in Benutzung, Details (Küche, Fahrradkeller, Telefonkabine).
- Personen: Mitglieder nur mit Einwilligung, gern von hinten oder angeschnitten.
- Formate: 4:5, 3:2, 16:9
- Nicht: Keine Stockbilder mit Laptops und Kaffee, keine KI-Büros, keine Fotos fremder Spaces.
- 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: du oder Sie, je nach Haus; eine Anrede für die ganze Seite
- Sätze: Kurz und praktisch: was kostet es, was ist dabei, wie komme ich rein.
- Haltung: Wie der Empfang am Morgen: unkompliziert, genau bei Preisen und Regeln.
- Tonproben: Tagespass 25 € inkl. MwSt. Kaffee, WLAN und ein Platz am Fenster., Zugang am Wochenende nur für Mitglieder mit fester Karte.
- Nicht: „Community first“, „New Work“, „inspirierende Atmosphäre“ ohne Inhalt, Anglizismen ohne Not.

## Hero

Bild-Scheiben-Hero (bild-scheiben-tiefe, Variante waagerecht): ein echtes Foto des Hauses (Fassade bei Tag oder Schnitt durch die Etagen) über 7 Spalten, drei waagerechte Scheiben an den Geschossdecken. Links daneben H1 (Name oder ein Satz zum Ort), darunter die Geschosse als Liste mit Angebot und „Tagespass buchen“. Ohne passendes Hausfoto (keine klaren Geschosslinien, Gesichter an den Kanten) foto-hero, Variante split-randabfallend, mit einem Raumfoto. Kein Stockfoto mit Laptops und Latte macchiato.

- Raster: H1, Geschossliste und Handlung über Spalte 1 bis 5; Hausbild mit drei Scheiben über Spalte 6 bis 12; mobil H1, Bild, Geschossliste untereinander.
- Bild: Eigenes Foto des Hauses mit klaren Geschosslinien, 4:5 Desktop, 4:5 mobil.
- Überschrift: clamp(2.5rem, 1.2rem + 5vw, 5.25rem), Bricolage Grotesque opsz 96; Name des Hauses oder ein Satz zum Ort, kein Label darüber.
- Handlung: „Tagespass buchen“ (Tomate, Pfeil-Pille) und „Räume ansehen“ als Kontur-Knopf.
- Zusatz: Geschosse als Liste in Azeret Mono (EG, 1. OG, DG) mit Angebot; direkt unter dem Hero „Heute“.

- Hero: [Bild-Scheiben in der Tiefe](https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=geschosse) `bild-scheiben-tiefe` · Variante „Geschosse (Hausbild mit Geschoss-Liste)“
- Nur unter der Bedingung oben: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend) `foto-hero` · Variante „Split, Foto bis an den Rand“

## Sektionen in dieser Reihenfolge

1. **Heute (direkt unter dem Hero: Tagespass mit Endpreis und Leistungen, Öffnung und Zugang, freie Plätze heute nur aus dem Buchungssystem, Anfahrt in einem Satz)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“
2. **Arbeitsplätze und Preise (Tagespass, Mehrfachkarte, Flex Desk, Fix Desk, Büro für Teams; Laufzeit, Kündigung, was enthalten ist; Endpreise für Verbraucher:innen, Netto nur mit Hinweis „nur für Unternehmen“)**: [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=mitgliedschaft) `preisseite-geruest` · Variante „Mitgliedschaft“, [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“
3. **Räume (Meetingraum, Seminarraum, Werkstatt, Telefonkabinen als Liste mit Raumcode, Personen, Bestuhlung, Technik, Preis je Stunde und Tag; Filter nach Gästezahl)**: [Räume mit Kapazitäten je Bestuhlung](https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo?v=tabelle) `raumkapazitaeten-bestuhlung` · Variante „Vergleichstabelle“, [Trennlinien im Raster (Gap Decorations)](https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=werkliste) `gap-decorations-raster` · Variante „Werkliste mit Filter“, [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“
4. **Raum-Detailseite (je Raum eine Seite: Fakten, Bestuhlung als Auswahl mit Platzzahl, Plan, Fotos, Barrierefreiheit ehrlich, Buchen)**: [Räume mit Kapazitäten je Bestuhlung](https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo?v=raum) `raumkapazitaeten-bestuhlung` · Variante „Ein Raum mit Plan“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter) `termin-buchung-zwei-klick` · Variante „Platzhalter mit 2-Klick“
5. **Das Haus (Geschoss für Geschoss: was wo ist, Küche, Duschen, Fahrradkeller, Aufzug und Stufen ehrlich; die Scheibe des Geschosses hebt sich im Kapitel)**: [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“
6. **Community und Termine (Frühstück, Vorträge, Workshops; ab etwa acht Terminen im Monat als Kalender, sonst Liste; je Termin eine Seite mit Anmeldung)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [Veranstaltung: Detailseite mit Zuständen](https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/demo?v=anmeldung) `veranstaltung-detailseite` · Variante „Anmeldung“
7. **Firmensitz und Post (Geschäftsadresse, Postannahme, Scan; nur mit ehrlichem Rahmen: was erlaubt ist, welche Prüfung nötig ist, was es kostet)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“
8. **Stimmen (Mitglieder mit Name, Beruf und Platzart; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste) `testimonials-neu-gedacht` · Variante „Kundenliste mit Hover-Zitat“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
9. **Fragen (Zugang am Wochenende, WLAN, Drucken, Hunde, Parken, Rechnung, Kündigung)**: [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=kurz) `faq-seite-suche` · Variante „Kurz“
10. **Anfrage für Teams und Büros (als Satz mit Lücken: Personen, ab wann, wie lange, Kontakt; Bestätigung mit Rückmeldezeit)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=satz) `kontakt-anfrage-formular` · Variante „Satz-Formular (Lückentext)“, [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“
11. **Anfahrt und Zugang (Eingang, Klingel, Fahrradkeller, Parken als Skizze; Empfangszeiten und Zugang für Mitglieder getrennt; Adresse als Text)**: [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“
12. **Vertrag widerrufen, kündigen und Barrierefreiheit (bei Online-Abschluss mit Verbraucher:innen; Mitgliedschaften als Dauervertrag mit Kündigungs-Button; Footer ohne Login)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Bild-Scheiben in der Tiefe](https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=geschosse) `bild-scheiben-tiefe` · Variante „Geschosse (Hausbild mit Geschoss-Liste)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Geschoss für Geschoss: drei waagerechte Scheiben aus dem Hausbild heben sich beim Laden einmal von unscharf zu scharf, daneben stehen die Geschosse mit ihrem Angebot.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß: Hausbild über 7 Spalten und 80 vh
- Muster: [Bild-Scheiben in der Tiefe](https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=geschosse) `bild-scheiben-tiefe` · Variante „Geschosse (Hausbild mit Geschoss-Liste)“
- 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: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=kreis-expand) `pfeil-icon-button` · Variante „Kreis wird Fläche“
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen) `kontur-button-zeichnen` · Variante „Linie zeichnet sich“

## Weitere Bausteine

- Seitenwechsel: [Seitenwechsel in wachsender Markenform](https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/demo?v=stufe) `seitenwechsel-wachsende-form` · Variante „Terrassen“, [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`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis) `mobile-bottom-navigation` · Variante „Menü-Leiste wird Sheet (Fotografin)“
- Scroll: [Bild-Scheiben in der Tiefe](https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo?v=geschosse) `bild-scheiben-tiefe` · Variante „Geschosse (Hausbild mit Geschoss-Liste)“
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Toggle-Schalter](https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/demo) `toggle-switch`
- 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“

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

- mehrschicht-parallax / zoom-parallax – nie zusammen mit den Bildscheiben auf einem Bild (wann_nicht von bild-scheiben-tiefe)
- frosted-glass-erweitert / liquid-glass-refraktion – Glas ist Startup-Kulisse, die Scheiben sind der eine Effekt
- bild-hotspots – Signatur von bau-unternehmen-projekt; Ausstattung steht als Liste
- zahlen-odometer – keine hochgezählten Mitglieder, Kaffees oder Quadratmeter
- marquee-laufband – keine durchlaufenden Mitglieder-Logos
- logo-wand-social-proof – Firmenlogos von Mitgliedern nur mit Erlaubnis, nicht als Beweis
- smooth-scroll-lenis – Preise und Zugang müssen schnell erreichbar sein
- Stockfotos mit Laptops, Latte macchiato und High five – eigene Fotos aus dem Haus

## Regeln

- Erster Bildschirm: Hausbild in Geschoss-Scheiben, H1, Geschosse mit Angebot und „Tagespass buchen“; direkt darunter „Heute“ mit Endpreis, Zugang und Öffnung. Mobil Leiste mit Tagespass / Räume / Anfahrt.
- Signatur (bild-scheiben-tiefe, Variante waagerecht): nur mit einem eigenen Hausfoto, dessen Geschossdecken die Schnitte tragen; keine Gesichter oder Schrift an den Kanten. Geschosse und Angebot stehen immer zusätzlich als Text. Auf Touch und bei reduzierter Bewegung liegt das Bild flach.
- Preise nach Preisangabenverordnung: Verbraucher:innen sehen Endpreise inkl. MwSt.; Netto-Preise nur mit dem Hinweis, dass das Angebot sich an Unternehmen richtet. Laufzeit, Kündigungsfrist und Leistungen stehen beim Preis.
- Online-Abschluss mit Verbraucher:innen (Mitgliedschaft, Mehrfachkarte): „Vertrag widerrufen“ und bei Dauerverträgen „Verträge hier kündigen“ im Footer ohne Login (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Vom Kunden prüfen lassen.
- Geschäftsadresse und Postservice: Wer Sitz-, Geschäfts- oder Postadressen für Firmen bereitstellt, kann nach dem Geldwäschegesetz als Dienstleister für Gesellschaften gelten (Identifizierung, Registrierung bei der Aufsicht). Angebot nur mit diesem Rahmen beschreiben. Vom Kunden prüfen lassen.
- Zugangssystem und Videoüberwachung: Hinweis an der Tür und in der Datenschutzerklärung; Buchungs- und Zugangsdaten nur, soweit nötig. Vom Kunden prüfen lassen.
- Barrierefreiheit der Räume ehrlich: Stufen, Aufzug, Türbreiten, WC je Geschoss; bei Online-Buchung die Erklärung nach BFSG prüfen lassen.
- Knöpfe: Pfeil-Pille in Tomate, deren Kreis zur Fläche wächst (pfeil-icon-button, Variante kreis-expand), für Tagespass und Raum buchen; Nebenwege mit zeichnender Kontur (kontur-button-zeichnen, Variante zeichnen). Alle Zustände nach button-zustaende.

## Rezept-Varianten

- **Seminar- und Tagungsräume (ohne Coworking)**: Schrift, Farbe, Stil und Signatur bleiben; die Scheiben zeigen die Räume statt Geschosse. Statt „Heute“ die Verfügbarkeit je Raum (termin-verfuegbarkeit-anfrage, Variante kalender) und Anfrage mit Datum, Personen und Form (Variante leiste). Räume mit raumkapazitaeten-bestuhlung (Variante tabelle) und je Raum eine Seite (Variante raum); Technik, Catering und Preise je Halbtag und Tag mit Endpreisen bzw. „zzgl. MwSt., nur für Unternehmen“. Storno klar nennen. Vom Kunden prüfen lassen.
- **Coworking im ländlichen Raum (Dorf, Gemeinde, Verein, Genossenschaft)**: Schrift, Farbe, Stil und Signatur bleiben; das Hausbild ist oft ein umgebautes Gebäude (Bahnhof, Schule, Hof), die Scheiben zeigen alte und neue Nutzung. Weniger Plätze, dafür Anfahrt mit Bus und Bahn, Kinderbetreuung in der Nähe und Gemeinschaftsräume. Träger (Gemeinde, Verein, Genossenschaft) im Impressum; Förderungen nur mit Bescheid und Stand. Preise oft niedriger und als Mehrfachkarte; Schlüssel- oder App-Zugang erklären. 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“.