# Bauplan: Architektur: ruhiges Raster

Rezept `architektur-ruhiges-raster` · Architekturbüro / Planungsbüro / Innenarchitektur · Stimmung: ruhig, präzise, zurückhaltend, sachlich · Stand 02.11.2026

Die Arbeit steht im Vordergrund, die Website tritt zurück: eine Schriftfamilie in einem Schnitt, weiße und hellgraue Flächen, Projektlisten statt Effekte. Bewegung ist kurz und ohne Show, Seitenwechsel laufen über native View Transitions. So arbeiten David Chipperfield, KAAN und Sauerbruch Hutton – kein Award-Feuerwerk.

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

## Schrift

- Headline: `hanken-grotesk` · Text: `hanken-grotesk`
- Größen: Stufen mit Faktor 1,25 wie bei Chipperfield (1 / 1.25 / 1.563 / 1.953 / 2.441 / 3.052rem). h1 clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500 (kein Bold), Laufweite -0.02em; Fließtext 1.0625–1.125rem, wght 400, Laufweite -0.012em, Zeilenhöhe 1.45, max-width 50ch; Bildunterschriften/Meta 0.8rem. Kursiv statt fett für Hervorhebungen (KAAN: Book + Book Italic).
- Techniken: [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`, [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`, [Optisch exakte Textabstände mit text-box-trim / text-box-edge](https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/demo) `text-box-trim`

## Farbe

Achromatisch, die Projektfotos liefern die Farbe. Weiß als Grund, ein kühles Hellgrau für Flächenwechsel, warmes Fast-Schwarz statt #000. Höchstens ein Interaktionston (Fokus/Links).

- `--farbe-grund` #FFFFFF (Grund)
- `--farbe-flaeche` #E1E3E3 (Fläche/Filter (KAAN bg-dim))
- `--farbe-text` #231F20 (Text (Chipperfield))
- `--farbe-text-2` #76767A (Sekundärtext/Meta)
- `--farbe-dunkle` #1F2323 (dunkle Sektion/Footer (KAAN bg-dark))
- `--farbe-fokus` #0022FF (Fokus/Interaktion (steht in beiden CSS-Dateien))

## Bewegung

- Animationsstil: [Animationsstil „Swiss knackig“](https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo) `token-swiss-knackig`
- Kurve: cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig, Eintritt); Austritt cubic-bezier(0.5, 0, 0.75, 0)
- Dauer: 125 (Farbe/Stroke), 250 (UI, Hover), 500 (Panels), 750–1000 (Bild-Einblendung)
- Regel: Eine Kurve für alles aus den Stil-Tokens: Öffnen und Einblenden mit der Eintrittskurve, Schließen mit der Austrittskurve in etwa 70 % der Dauer. Nur Deckkraft und Transform, keine Federn, keine Diagonalen. Unter prefers-reduced-motion: View Transitions aus.

## 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, 80, 128, 200
- Sektionsabstand: clamp(96px, 12vw, 200px)
- Dichte: luftig
- Hinweis: Weißraum statt Trennlinien (Regel). Große Sprünge zwischen Sektionen, kleine Abstände innerhalb einer Projektzeile: Titel, Ort und Jahr stehen 4 bis 8 px auseinander.
- Spalten: 12
- Seitenrand: clamp(20px, 4vw, 64px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: none
- Raster: Bilder randlos oder über 8 Spalten, Text in Spalte 1 bis 5 und höchstens 50ch. Projektliste als Liste oder Raster umschaltbar (3 Spalten Desktop, 1 mobil).
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px #E1E3E3, nur in Projektlisten und Filtern
- Schatten: keiner
- Form: Keine Pille: Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Nebenaktion als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken).

## Bildsprache

- Licht: Natürliches Tageslicht, Architekturfotografie in Originalfarbe, stürzende Linien korrigiert.
- Ausschnitt: Unbeschnitten im Original-Seitenverhältnis (Regel); Totale des Baus, dazu Details von Material und Fuge.
- Personen: Selten, höchstens klein als Maßstab im Raum, nie als Motiv.
- Formate: 3:2, 4:5, Original
- Nicht: Keine Renderings mit Lichtreflexen, keine Stockbilder, kein Zuschnitt auf ein einheitliches Kachelformat, keine Filter oder Duotone.

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

- Anrede: Sie
- Sätze: Kurz und sachlich, Substantive tragen. Projekte als „Titel • Ort • Jahr“, Beschreibungen in drei bis fünf Sätzen.
- Haltung: Die Arbeit spricht, die Website tritt zurück. Keine Superlative, keine Selbstbeschreibung.
- Tonproben: Wohnen am Kanal. Umbau eines Speichers, 2024., Wir planen Schulen, Wohnhäuser und Räume für Kultur.
- Nicht: „Wir leben Architektur“, „innovative Lösungen“, „visionär“, „ganzheitlich“, Ausrufezeichen.

## Hero

Ein Projektbild randlos mit Bürokopf und Titelzeile wie eine Ausgabe (editorial-magazin-layout, Variante cover), Bildunterschrift „Titel • Ort • Jahr“ und Meta-Labels in Textgröße (meta-labels-hud-typografie). Kein Video, kein Slider, aus der Demo kein Lenis. Template: ein starkes Projektfoto mit Büroname und Leistung.

- Raster: Bürokopf als Zeile oben wie der Titel einer Ausgabe, darunter ein Bild randlos über die volle Breite (editorial-magazin-layout, Variante cover).
- Bild: Ein Projektfoto, randlos, 3:2 oder Originalformat; kein Slider, kein Video.
- Überschrift: clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem), wght 450–500, unten links über Spalte 1 bis 6, unter dem Bild statt darauf.
- Handlung: Kein CTA-Paar. „Projekte“ als Textlink mit Pfeil unter der Titelzeile, „Kontakt“ im Kopf.
- Zusatz: Bildunterschrift „Titel • Ort • Jahr“ in 0.8rem, Meta-Labels in Textgröße (meta-labels-hud-typografie).

- Hero: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover) `editorial-magazin-layout` · Variante „Magazin-Cover als Hero“, [Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)](https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/demo) `meta-labels-hud-typografie`

## Sektionen in dieser Reihenfolge

1. **Projekte / Werkverzeichnis**: [Projektindex als Liste mit Hover-Bildvorschau](https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/demo) `projektindex-hover-vorschau`, [Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)](https://cecodesign.de/lab/fundus/galerien-slider/flip-zustandswechsel/demo?v=nativ) `flip-zustandswechsel` · Variante „Nativ: element-scoped View Transition“
2. **Leistungen / Typologien (Leistungsphasen, Wohnen, Bildung, Kultur …)**: [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“, [Bildvorschau beim Listen-Hover](https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/demo) `listen-hover-bildvorschau`
3. **Projekt-Detailseite**: [Case-Study-Gerüst auf Award-Niveau](https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/demo) `case-study-geruest`, [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“
4. **Büro / Team**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
5. **Aktuelles / Auszeichnungen**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“
6. **Kontakt (Anfrage, Adresse als Text, Anfahrt mit Karte per 2-Klick, „Termin nach Vereinbarung“)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [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“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“

## Signatur (Pflicht)

- [Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)](https://cecodesign.de/lab/fundus/hero-layouts/meta-labels-hud-typografie/demo) `meta-labels-hud-typografie`

## Buttons

- Haupthandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken) `kontur-button-zeichnen` · Variante „Eckklammern schließen sich“

## 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: [Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück](https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo) `hide-on-scroll-header`, [Menü-Button-Morph: Burger zu X und Label-Tausch „Menu/Close“](https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/demo) `menue-icon-und-label-morph`
- Hover: [Bildvorschau beim Listen-Hover](https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/demo) `listen-hover-bildvorschau`, [Hover-Absicht und Zeitlogik](https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo) `hover-absicht-timing`
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [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“
- Galerie: [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“
- 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“, [Kolophon: Schriften, Bildnachweis, Stand, Gewicht](https://cecodesign.de/lab/fundus/footer/kolophon-footer/demo) `kolophon-footer`

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

- smooth-scroll-lenis – Projekttexte und Pläne werden gelesen, Trägheit stört
- crosshair-coordinates-cursor – Architektur-Klischee, keine der Referenzen nutzt einen eigenen Cursor
- bildstapel-intro / prozent-zaehler – keine Referenz hat einen Preloader, Ladezeit geht vor
- webgl-bildverzerrung – verfälscht Architekturfotografie
- marquee-laufband – zu laut für die Haltung
- blueprint-raster-sichtbar als Deko – nur, wenn das Raster wirklich das Layout trägt

## Regeln

- Eine Familie, ein bis zwei Gewichte; Betonung über Kursiv oder Größe, nie über Fett.
- Projektbilder in Originalfarbe und unbeschnittenem Seitenverhältnis; Bildunterschrift 'Titel • Ort • Jahr' in Meta-Größe.
- Navigation mit höchstens 5 Punkten (Büro, Projekte, Team, Aktuelles, Kontakt); Header sticky, verschwindet beim Runterscrollen.
- Projektliste umschaltbar Liste/Raster mit Filter (Typologie, Jahr) – Umschalten per View Transition, nicht per Effekt.
- Textspalten höchstens 50ch, großzügiger Weißraum statt Trennlinien.
- Alle Übergänge mit einer Kurve aus den Tokens; UI 250 ms, Panels 500 ms; nichts dauert länger als 1 s.
- Kontakt als eigene Sektion (kurzes Anfrageformular, Karte per 2-Klick) und zusätzlich als Visitenkarte im Footer: Adresse, Telefon, E-Mail, Kammer-Eintrag.
- oeffnungszeiten-status als Terminbetrieb: „Termin nach Vereinbarung · Telefon erreichbar Mo–Fr 9–17 Uhr“ statt „Jetzt geöffnet“ (wann_nicht des Musters).
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Architektenkammer, Berufsbezeichnung und Kammer-Eintrag; Projektfotos nur mit Nutzungsrecht der Fotograf:innen und Zustimmung der Bauherren; Wettbewerbe und Auszeichnungen mit Jahr und Quelle – 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“.