# Bauplan: Kultur: Programm und Haltung

Rezept `kultur-programm-haltung` · Museum, Kunsthalle, Kulturzentrum, Festival, Veranstaltungshaus · Stimmung: sachlich, grafisch, zugänglich, selbstbewusst · Stand 02.11.2026

Eine starke Hausschrift, Schwarz auf Off-White und ein Farbsystem für Sparten oder Blöcke. Im Mittelpunkt stehen Programm, Termine und Tickets. Bewegung ist kurz und sachlich, Barrierefreiheit gehört fest dazu: Stedelijk respektiert reduzierte Bewegung an zehn Stellen und bietet Vorlesen an. Für Festivals kann die Headline lauter werden, die Struktur bleibt gleich.

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

## Schrift

- Headline: `schibsted-grotesk` · Text: `atkinson-hyperlegible-next` · Akzent: `ibm-plex-mono`
- Größen: Ausstellungs-/Festival-Titel clamp(2.75rem, 7vw, 7rem), Schibsted 800–900 (Festival auch Italic), -0.02em, line-height 1.0. Teaser-Titel clamp(1.375rem, 2.2vw, 2rem), 700. Fließtext Atkinson 1.125rem/1.6, max. 68ch (Stedelijk liegt bei ≈18–22px). Daten, Uhrzeiten, Räume in IBM Plex Mono 0.8125rem, tabular-nums. Für Festivals statt Schibsted die Paarung plakat-condensed (Big Shoulders 900).
- Techniken: [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`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [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`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`

## Farbe

Schwarz auf warmem Off-White als Grund (Stedelijk #0a0a0a/#ebeae8). Dazu ein Farbsystem mit 4–6 Tönen, je einer pro Sparte oder Programmreihe (Barbican), oder Blöcke, die im Rhythmus Fläche und Schrift tauschen (HKW .color-switch). Jede Spartenfarbe muss auf Off-White und als Fläche mit weißer Schrift WCAG AA erfüllen.

- `--farbe-text` #0b0b0b (Text, Linien)
- `--farbe-grund` #efede9 (Grund)
- `--farbe-sparte` #c4421a (Sparte Musik)
- `--farbe-sparte-2` #3d5f9a (Sparte Theater/Tanz)
- `--farbe-sparte-3` #2f7d4a (Sparte Kunst)
- `--farbe-sparte-4` #b0186b (Sparte Film)

## 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: UI und Hover 150–250, Filter/Ansichtswechsel 300–350, Bild-Reveal höchstens 500
- Regel: Kurze, klare Out-Kurve des Stils ohne Überschwingen, Abgang mit der Austrittskurve. Bewegung entlang des Rasters (nur x oder y). prefers-reduced-motion ist Pflicht: Smooth-Scroll, Reveals und Karussell-Autoplay entfallen dann ganz (Stedelijk koppelt scroll-behavior an no-preference).

## 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(56px, 7vw, 112px)
- Dichte: dicht
- Hinweis: Programm geht vor: Teaser dicht, Datum, Ort und Ticket mit 8 px Abstand. Laut werden darf nur der Titel, nicht der Weißraum.
- Spalten: 12
- Seitenrand: clamp(16px, 3vw, 40px)
- Spaltenabstand: clamp(16px, 2vw, 24px)
- Maximale Breite: 1600px
- Raster: Teaser 3 bis 4 Spalten, jeder dritte Block tauscht Fläche und Schrift (HKW). Sticky Navigation mit 1px Unterkante.
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px #0b0b0b als Unterkante der Navigation und zwischen Programmzeilen
- Schatten: keiner
- Form: Grafisch und eckig. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Tickets füllen sich in Pixeln (fuellung-vom-eintrittspunkt, Variante pixel).

## Bildsprache

- Licht: Dokumentarisch: Ausstellungsansichten in neutralem Licht, Künstlerfotos wie geliefert.
- Ausschnitt: Werk oder Raumansicht, Plakatmotiv; Bühnenfotos im Moment der Handlung.
- Personen: Künstler:innen und Publikum, nur mit Rechten und Bildnachweis.
- Formate: 4:5, 3:2, 1:1
- Nicht: Keine Stock-Konzertmengen, keine Bilder ohne Bildnachweis, keine Duotone oder Filter über Kunstwerken, keine Slideshow im Hero.

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

- Anrede: Sie
- Sätze: Kurz und klar; Leichte Sprache als eigene Fassung. Termine immer als Datum · Uhrzeit · Ort.
- Haltung: Einladend und selbstbewusst, ohne Kunstjargon. Ein Festival darf duzen, dann auf der ganzen Seite.
- Tonproben: Heute geöffnet bis 18 Uhr. Unter 18 Jahren frei., Die Ausstellung zeigt 40 Arbeiten aus fünf Jahrzehnten.
- Nicht: „Spannungsfeld“, „verhandelt“, „Diskurs“ als Füllwörter, „Ein Muss für jeden Kunstliebhaber“.

## Hero

Programm vor Image: aktuelle Ausstellung oder Saisontitel als Plakat-Satz (schrift-hero-viewportbreit, Variante textfit) über bzw. neben einem echten Motiv (editorial-magazin-layout, Variante cover), darunter sofort Öffnungsstatus heute, nächste Termine und Tickets. Kein Video, keine Slideshow, aus der Demo kein Lenis.

- Raster: 12 Spalten: Plakat-Satz über die volle Breite (schrift-hero-viewportbreit, Variante textfit), echtes Motiv über 7 Spalten daneben oder darunter (editorial-magazin-layout, Variante cover).
- Bild: Echtes Ausstellungs- oder Saisonmotiv, 4:5 oder 3:2; kein Video, keine Slideshow.
- Überschrift: clamp(2.75rem, 7vw, 7rem), Schibsted 800–900, oben links, per textfit auf Breite.
- Handlung: „Tickets“ (gefüllt, Pixel-Füllung) und „Programm“ (Kontur mit Ecken) direkt unter dem Titel.
- Zusatz: Öffnungsstatus heute und die nächsten drei Termine in IBM Plex Mono 0.8125rem; Spartenlabel mit Farbe und Wort.

- Hero: [Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)](https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo?v=textfit) `schrift-hero-viewportbreit` · Variante „text-fit, mehrzeilig“, [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover) `editorial-magazin-layout` · Variante „Magazin-Cover als Hero“

## Sektionen in dieser Reihenfolge

1. **Aktuelle Ausstellungen / Highlights**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“
2. **Programm-Kalender mit Filtern**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“
3. **Rubriken-Reihen (Musik, Film, Kunst …)**: [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“
4. **Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“, [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“, [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“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“
5. **Magazin / Hintergrund**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“
6. **Kontakt (Kasse, Führungen und Gruppen, Vermietung, Presse)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`
7. **Newsletter**: [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“

## Signatur (Pflicht)

- [Scrollspy-Kapitelnavigation (Sticky-Kapitelindex)](https://cecodesign.de/lab/fundus/navigation/scrollspy-kapitelnavigation/demo) `scrollspy-kapitelnavigation`

## Buttons

- Haupthandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=pixel) `fuellung-vom-eintrittspunkt` · Variante „Pixelraster vom Eintrittspunkt (Festivalprogramm)“
- 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

- Navigation: [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Mega-Menü mit morphendem gemeinsamem Viewport](https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo) `mega-menue-morphing-viewport`, [Scrollspy-Kapitelnavigation (Sticky-Kapitelindex)](https://cecodesign.de/lab/fundus/navigation/scrollspy-kapitelnavigation/demo) `scrollspy-kapitelnavigation`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=richtung) `bild-zoom-in-maske` · Variante „Richtungsabhängiger Clip mit farbiger Decke“
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Toast-Benachrichtigungen im Stapel](https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo) `toast-stapel`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`
- Galerie: [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“, [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“
- Footer: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`, [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`

## Optional (nur als Zusatz)

- [Text fließt um eine bewegte Form (Experiment)](https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/demo?v=css) `text-um-form` · Variante „Ruhende Form mit shape-outside“

## Nicht verwenden

- smooth-scroll-lenis – Programmlisten, Ticket-Widgets und iframes (Spektrix, Enviso) vertragen keine Scroll-Übernahme
- Jede Art von Cursor-Effekt – öffentliche Häuser haben ein breites Publikum, auch mit Screenreader und Tastatur
- prozent-zaehler und webgl-ladeszene-fortschritt – Besucher wollen Öffnungszeiten, keine Ladeshow
- fullpage-snap-slides – blockiert das schnelle Überfliegen des Programms
- Überschwing-Kurven im eigenen Design – bei Barbican stammen sie nur aus einer Tooltip-Bibliothek
- Farbe als einzige Unterscheidung der Sparten – immer zusätzlich ein Text-Label

## Regeln

- Programm vor Image: Termine, Ort, Uhrzeit und Ticket-Button auf jeder Teaser-Karte, Datum in Mono-Tabellenziffern.
- Spartenfarben als System, nicht als Deko; jede Farbe besteht den AA-Kontrast und trägt zusätzlich ein Label.
- Sticky-Navigation mit klarer Unterkante (HKW: 78px, 1px Linie); Ticket und Suche immer erreichbar.
- Teaser-Blöcke dürfen im Rhythmus Fläche und Schrift tauschen (HKW: jeder dritte Block).
- prefers-reduced-motion respektieren; Vorlesen bzw. Leichte Sprache und Barrierefreiheits-Infos fest in der Navigation.
- Fließtext mindestens 18px, max. 68ch; Headlines dürfen laut sein, Text bleibt ruhig.
- Filter wechseln die Ansicht per FLIP in ≤ 350 ms, ohne Seiten-Neuladen.
- text-um-form nur als Zusatz (optional, Priorität F): auf Kundenseiten Variante css (Umfluss ohne Bibliothek und ohne Bewegung) in einem einzelnen Magazin-Beitrag; Variante pretext nur für Eigenprojekte und Festival-Seiten.
- Pflichtangaben und Recht (Leitfaden 8a): Ticketpreise als Gesamtpreis inkl. Gebühren; für termingebundene Tickets gilt meist kein Widerrufsrecht, das klar sagen; öffentliche Häuser: BITV 2.0 mit Erklärung zur Barrierefreiheit und Feedback-Weg, ggf. Leichte Sprache und Gebärdensprache; Online-Ticketverkauf privater Häuser: Variante bfsg prüfen; Werkabbildungen nur mit Bildrechten (z. B. VG Bild-Kunst); Besucherfotos nur mit Einwilligung – 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“.