# Bauplan: Musik und Kunst: Ära und Bühne

Rezept `musik-kuenstler-buehne` · Band / Musiker:in / DJ / Label / Chor und Ensemble / bildende Künstler:in mit Ausstellungen · Stimmung: laut, experimentell, eigenständig, direkt · Stand 02.11.2026

Jedes Release ist eine Ära mit eigener Farbe: Ein einziges Token aus dem Cover färbt Signal, Effekt und den Namen, der Rest ist Tinte und Papier. Zuerst kommen Hören und Tickets, dann Videos, Bio und ein Pressebereich, aus dem Veranstalter und Presse alles ohne Nachfrage holen. Bewegung ist Takt statt Kurve: Das Cover baut sich in Pixelstufen auf, Seiten schließen als Verschluss, der Hero-Clip läuft als Zeichenraster. Genau ein experimenteller Effekt pro Ansicht, immer mit Pause-Knopf und Standbild. Abgrenzung: kreativstudio-buehne verkauft Leistungen an Auftraggeber (Leistungen, Cases, Anfrage) und bleibt bei einer weichen Expo-Kurve; kultur-programm-haltung ist ein Haus mit vielen Terminen an einem Ort, Spartenfarben und „Besuch planen“. Hier steht eine Künstlerin, eine Band oder ein Label im Mittelpunkt, das an vielen Orten spielt, Releases veröffentlicht und mit jeder Ära anders aussieht.

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

## Schrift

- Headline: `science-gothic` · Text: `redaction` · Akzent: `martian-mono`
- Größen: Name im Hero Science Gothic clamp(3.5rem, 1rem + 11vw, 12rem), wdth 140–200 (je kürzer der Name, desto breiter), wght 800, CTRS 0, Versal, Laufweite -0.02em, Zeilenhöhe 0.86; h2 clamp(2rem, 1.2rem + 3.5vw, 4rem), wdth 120, wght 700, Versal, -0.01em, Zeilenhöhe 0.95. Stadt in der Terminliste Science Gothic 1.25rem, wdth 100, wght 700, Versal. Release- und Werktitel Redaction 400 clamp(1.75rem, 1rem + 2.5vw, 3rem), Werktitel kursiv; im Pixel-Moment einmal Redaction 100 → Redaction 20 → Redaction (3 Stufen à 80 ms). Fließtext (Bio, Presse, Texte) Redaction 1.1875rem/1.6, max. 64ch, nie in den verpixelten Schnitten. Datum, Uhrzeit, Preise und Katalognummern Martian Mono 0.9375rem, wdth 87.5, wght 500, tabular-nums; Status, Format, Credits und Rubriken Martian Mono 0.75rem, Versal, +0.08em; Knöpfe Martian Mono 0.875rem, wght 600, Versal, +0.04em.
- Techniken: [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [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`, [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`

## Farbe

Jede Ära hat eine Farbe. Grund ist Tinte, zum Lesen (Bio, Presse, Shop) Papier. Die Ära-Farbe kommt aus dem Cover des aktuellen Releases und ist der einzige Signalton: Haupthandlung, Echo des Namens, Farbe des Dither- bzw. Marmor-Effekts, Verschluss beim Seitenwechsel. Sie liegt als ein Token (--aera) im :root; mit dem nächsten Release wird nur dieses Token getauscht, kein Redesign. Bedingung: als Fläche mit Papier-Schrift mindestens 4,5 : 1. Auf Tinte nie als Textfarbe, nur als Fläche mit 2 px Papier-Kante bzw. Papier-Versatz. Kein Verlauf, kein Pastell-Lila, Pink oder Cyan als Standard (Leitfaden C2, C10). Ticketstatus immer als Wort, nie nur als Farbe.

- `--farbe-grund` #111113 (Tinte: Grund für Hero, Termine, Videos, Fußzeile)
- `--farbe-grund-2` #EEEBE3 (Papier: Text auf Tinte (15,8 : 1), Grund für Bio, Presse, Shop)
- `--farbe-grund-3` #2D3BFF (Ära-Farbe, Beispiel Ultramarin: Fläche mit Papier-Schrift 5,5 : 1; auf Tinte nur mit Papier-Kante (allein 2,9 : 1))
- `--farbe-aerafarbe` #C2361F (Ära-Farbe, Beispiel für das nächste Release (Zinnober): Fläche mit Papier-Schrift 4,6 : 1)
- `--farbe-leise` #9A9893 (Meta auf Tinte (6,5 : 1): Ort, Support, Format)
- `--farbe-grund-4` #5C5A55 (Meta auf Papier (5,8 : 1))
- `--farbe-fehler` #FF6B5E (Abgesagt und Fehler auf Tinte (6,8 : 1), immer mit Wort)

## Bewegung

- Animationsstil: [Animationsstil „Brutal hart“](https://cecodesign.de/lab/fundus/animationsstile/token-brutal-hart/demo) `token-brutal-hart`
- 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: linear bzw. steps(1, end), steps(6, jump-none) und steps(32, end) (token-brutal-hart: Takt statt Kurve)
- Dauer: 0 (harter Schnitt, Bildwechsel im Clip, Hover), 80 je Stufe (Cover-Pixelaufbau 6 Stufen = 480, Verschluss beim Seitenwechsel 6 Stufen = 480), 240 (Release-Titel in 3 Stufen); UI nach token-toggle-asymmetrisch: Öffnen 250–300 (Menü, Player-Platzhalter, Warenkorb, Filter), Schließen etwa 65 % davon (170–200)
- Regel: Was inszeniert, springt in ganzen Stufen auf einem 8-px-Raster; was bedient wird, öffnet mit dem UI-Stil und schließt schneller. Nichts federt, nichts gleitet nach. Termine, Preise und Ticketstatus stehen sofort, ohne Einblendung. Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1), harte Schnitte im Clip nicht zwischen Schwarz und Weiß. Alles, was länger als 5 s läuft (Dither-Clip, Marmor), hat einen sichtbaren Pause-Knopf. Bei prefers-reduced-motion: Standbilder statt Clip und Shader, alle Stufen sofort im Endzustand, Seitenwechsel ohne Verschluss.
- Hinweis: token-brutal-hart in den Spielarten Pixel-Render, Verschluss und harter Schnitt; der Stil nennt Musik ausdrücklich und ist an basement (Verschluss in 32 Stufen) und Jean Dawson (Schreibmaschine in Stufen) beobachtet. Abgrenzung zu fitness-studio-rhythmus, das denselben Stil nur mit Breiten-Stufen und Bildwechseln nutzt: Hier baut sich das Cover in Pixelstufen auf (48 → 1 px), der Seitenwechsel schließt als Verschluss in Spalten, der Hero-Clip schneidet hart. Terminal-Tippen höchstens für Credits oder Katalognummern, nie für Termine, Preise oder Ticketstatus. Menü, Player-Platzhalter, Filter, Newsletter, Kaufbox und Warenkorb laufen auf animationsstil_ui token-toggle-asymmetrisch, weil der Stil laut wann_nicht nicht zu Verträgen und Formularen passt; fitness nimmt dafür token-tech-praezise.

## 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, 192
- Sektionsabstand: clamp(64px, 10vw, 160px)
- Dichte: mittel
- Hinweis: Laute Sprünge zwischen Kapiteln, Terminliste dicht (Zeilen mindestens 44 px, 8 px Innenabstand). Platz für die volle Spreizung des Echos reservieren.
- Spalten: 12
- Seitenrand: clamp(12px, 2.4vw, 32px)
- Spaltenabstand: clamp(12px, 1.6vw, 24px)
- Maximale Breite: none
- Raster: Volle Breite. Termine als Zeilen über alle 12 Spalten (Datum, Stadt, Ort, Status, Ticket), Diskografie 4 Spalten, Pressefotos 3.
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 2px #EEEBE3 als Papier-Kante um Ära-Flächen auf Tinte
- Schatten: nur der harte Papier-Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal)
- Form: Eckig wie Plattenhülle und Plakat. Nebenaktionen als laufende Kontur (kontur-button-zeichnen, Variante laufend). Farbe nur aus Tinte, Papier und --aera.

## Bildsprache

- Licht: Wie vom Act geliefert; Live-Fotos mit Bühnenlicht, Pressefotos unverändert.
- Ausschnitt: Cover quadratisch und unverzerrt, Live-Bilder angeschnitten, Pressefotos in voller Auflösung zum Download.
- Personen: Ja: der Act; Publikum nur unscharf oder als Menge.
- Formate: 1:1, 16:9, 4:5
- Nicht: Kein Dither oder Pixel auf Cover, Pressefotos und Werkabbildungen; keine Stock- oder KI-Konzertbilder; keine Pastell-Verläufe.

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

- Anrede: du
- Sätze: Knapp, Fakten zuerst: Datum, Stadt, Status als Wort. Bio in drei Längen mit Wortzahl.
- Haltung: Eigenständig und direkt. Ein Chor, ein Ensemble oder eine Künstlerin mit Galerie-Publikum siezt, dann durchgehend.
- Tonproben: Neues Album am 14. März. Jetzt anhören., [Stadt], [Ort]: ausverkauft. Warteliste beim Veranstalter.
- Nicht: „Die Band, auf die alle gewartet haben“, Hype-Wörter, „Stay tuned!“, Status nur als Farbe oder durchgestrichen.

## Hero

Die aktuelle Ära auf einen Blick: der Name des Acts in Science Gothic, breit und versal, mit Echo in Ära-Farbe und Papier (echo-stacked-type, nur dieses eine Wort). Daneben bzw. darunter das aktuelle Cover als echtes Bild (unverzerrt, LCP) mit „Anhören“ als Haupthandlung und darunter die nächsten drei Termine als Zeilen mit Ticketlink. Hintergrund ist ein eigener kurzer Clip (Musikvideo, Visualizer, Live-Mitschnitt), der stumm durch den Zeichen- bzw. Dither-Pass läuft (ascii-dither-pixel-stil, Variante video); unter dem Zeiger erscheint das Original, auf Touch ruhige Kacheln. Pause-Knopf, Standbild bei reduzierter Bewegung, ohne WebGL und auf schwachen Geräten. Name, Cover und Termine stehen auf eigenen Tinte-Flächen, nie direkt auf dem Effekt. hero_variante fluessig-marmor-hintergrund (Variante tinte, Ära-Farbe als Tinte in Wasser) nur, wenn es keinen eigenen Clip gibt. Nie beide Effekte zugleich, nie Stock- oder KI-Material, das echt wirken soll.

- Raster: Tinte als Grund. Name oben über die volle Breite, darunter 12 Spalten: Cover über Spalte 1 bis 5, Termine über 6 bis 12; Name, Cover und Termine auf eigenen Tinte-Flächen über dem Clip.
- Bild: Cover 1:1 als echtes Bild (LCP); Hintergrund ein eigener Clip im Zeichen- bzw. Dither-Pass (ascii-dither-pixel-stil, Variante video), Standbild bei reduzierter Bewegung.
- Überschrift: clamp(3.5rem, 1rem + 11vw, 12rem), Science Gothic 800 Versal, wdth 140–200, oben randbündig, mit Echo (echo-stacked-type).
- Handlung: „Anhören“ (versatz-brutal in Ära-Farbe) unter dem Cover, „Tickets“ als laufende Kontur in der Terminliste.
- Zusatz: Die nächsten drei Termine in Martian Mono mit Status als Wort; Pause-Knopf „Bewegung anhalten“.

- Hero: [ASCII-, Dither- und Pixel-Stil (Render und Hover)](https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/demo?v=video) `ascii-dither-pixel-stil` · Variante „Video als Zeichen in Echtzeit“, [Echo-/Stapel-Typografie](https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo) `echo-stacked-type`
- Nur unter der Bedingung oben: [Flüssiger Marmor-Hintergrund](https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=tinte) `fluessig-marmor-hintergrund` · Variante „Tinte“

## Sektionen in dieser Reihenfolge

1. **Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen)**: [Tourdaten und Termine mit Ticketstatus](https://cecodesign.de/lab/fundus/sektionen/tourdaten-liste/demo?v=tour) `tourdaten-liste` · Variante „Tour eines Acts“, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“
2. **Musik: aktuelles Release (Cover unverzerrt, Titel, VÖ-Datum, Formate mit Preis oder Shop-Link, Trackliste als Text, „Anhören“ mit allen Plattformen als normale Links; eingebetteter Player erst nach Klick)**: [Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)](https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/demo) `player-einbettung-zwei-klick`
3. **Diskografie (alle Releases, neuestes zuerst; je Karte Cover, Titel, Jahr, Format; führt zur Release-Seite)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe) `css-native-karussell` · Variante „Produktreihe“
4. **Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache)**: [Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)](https://cecodesign.de/lab/fundus/sektionen/player-einbettung-zwei-klick/demo) `player-einbettung-zwei-klick`, [Video-Vorschau bei Hover / im Viewport](https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo) `video-vorschau-hover-viewport`, [Eigener Videoplayer](https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=ambilight) `eigener-videoplayer` · Variante „Raumlicht um den Film“
5. **Über: Bio und Besetzung (ein Satz, wer spielt was, kleine Porträts; Live-Besetzung und Gäste; bei Ensembles nach Stimmgruppe oder Instrument)**: [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“
6. **Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; Ansprechpersonen**: [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“, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste) `testimonials-neu-gedacht` · Variante „Kundenliste mit Hover-Zitat“
7. **Newsletter (benannter Brief mit konkretem Vorteil: neue Musik und Vorverkauf zuerst; Region für Termin-Hinweise freiwillig; Double-Opt-in)**: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“
8. **Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp)**: [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt) `produkt-kaufbox-varianten` · Variante „Schnellkauf“, [Warenkorb als Seitenpanel](https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer) `warenkorb-drawer` · Variante „Seitenpanel“
9. **Kontakt: Booking, Management, Label, Presse (je Rolle Name, Agentur, Gebiet und E-Mail zum Kopieren; Booking-Anfrage mit Datum, Ort, Art der Veranstaltung und Kapazität; Proberaum oder Atelier mit Karte per 2-Klick nur, wenn Besuch vorgesehen ist)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`
10. **Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)**: [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)

- [ASCII-, Dither- und Pixel-Stil (Render und Hover)](https://cecodesign.de/lab/fundus/3d-webgl/ascii-dither-pixel-stil/demo?v=video) `ascii-dither-pixel-stil` · Variante „Video als Zeichen in Echtzeit“
- [Echo-/Stapel-Typografie](https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo) `echo-stacked-type`

## Buttons

- Haupthandlung: [Tiefen-Taste (3D-Button)](https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo?v=versatz-brutal) `tiefen-taste-3d` · Variante „Harter Versatz (Brutalismus)“
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=laufend) `kontur-button-zeichnen` · Variante „Gestrichelte Kontur läuft“

## Weitere Bausteine

- Seitenwechsel: [Spalten-, Streifen- und Jalousie-Wipe](https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/demo) `spalten-shutter-wipe`
- Navigation: [Menü-Choreografie: Panel-Wipe bzw. Clip-Reveal mit asymmetrischem Schließen](https://cecodesign.de/lab/fundus/navigation/menue-choreografie-wipe-clip/demo) `menue-choreografie-wipe-clip`, [Sound-Umschalter und Einstiegsgate in der Navigation](https://cecodesign.de/lab/fundus/navigation/sound-umschalter/demo) `sound-umschalter`
- Schrift: [Echo-/Stapel-Typografie](https://cecodesign.de/lab/fundus/schrift-animationen/echo-stacked-type/demo) `echo-stacked-type`
- Mikroanimation: [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`
- Material: [Flüssiger Marmor-Hintergrund](https://cecodesign.de/lab/fundus/glas-material/fluessig-marmor-hintergrund/demo?v=tinte) `fluessig-marmor-hintergrund` · Variante „Tinte“
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe) `css-native-karussell` · Variante „Produktreihe“, [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“, [Video-Vorschau bei Hover / im Viewport](https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo) `video-vorschau-hover-viewport`
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“

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

- [Karussell mit verformten Karten](https://cecodesign.de/lab/fundus/galerien-slider/karussell-karten-verformen/demo?v=welle) `karussell-karten-verformen` · Variante „Welle nach Tempo“
- [Generatives Markenzeichen](https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/demo?v=team) `generatives-markenzeichen` · Variante „Team-Karten“

## Nicht verwenden

- cursor-follower-lerp / blend-difference-cursor – Award-Geste ohne Nutzen; im Dither-Hero ist der Zeiger schon das Werkzeug, das das Original freilegt
- prozent-zaehler / kinetische-typo-intro – Fans wollen Player und Termine, keine Ladeshow; der Name steht ab dem ersten Bild
- mesh-gradient-shader – Aurora-Klischee (C2); Farbe kommt aus dem Cover der Ära
- atmosphaere-partikel – Hotel-Stimmung (Staub, Glut); neben Dither-Clip oder Marmor wäre es der zweite bewegte Effekt in einer Ansicht (C4, C10)
- kinetic-3d-shader-type – zweite Wort-Inszenierung neben dem Echo-Namen und eine weitere WebGL-Szene; der Name bleibt echter Text
- webgl-bildverzerrung / velocity-skew-verzerrung – verzerren Cover, Pressefotos und Werke, die unverfälscht bleiben müssen
- glas-button / verlaufs-rahmen – Glas und Lichtkante neben Dither oder Marmor sind zwei Material-Effekte; die harte Taste reicht
- smooth-scroll-lenis – Terminlisten, Player-iframes und Shop vertragen keine Scroll-Übernahme
- marquee-laufband – „Neues Album“-Bänder sind Template-Deko; Termine und Titel nie in bewegten Bändern
- zahlen-odometer – hochgezählte Streams, Follower oder Countdowns sind Druck statt Information; echte Zahlen nur mit Quelle und Stand
- Termin-Widgets von Bandsintown oder Songkick als iframe – laden Dritte vor der Einwilligung und brechen die Gestaltung; Daten importieren und selbst als Liste setzen
- Spotify-, YouTube-, Bandcamp- oder SoundCloud-Player ohne Klick – übertragen Daten vor der Einwilligung (§ 25 TDDDG)
- Autoplay mit Ton – nie; Ton startet nur nach Klick (WCAG 1.4.2)

## Regeln

- Erster Bildschirm: Name des Acts, aktuelles Cover mit „Anhören“ und die nächsten drei Termine mit Ticketlink. Der Hero-Clip ist eigenes Material (Musikvideo, Visualizer, Live-Mitschnitt), nie Stock.
- Ära-Token: Eine CSS-Variable --aera, aus dem Cover gewählt, färbt Haupthandlung, Echo, Effekt und Verschluss. Sie hält als Fläche mit Papier-Schrift mindestens 4,5 : 1. Mit dem nächsten Release wird nur dieses Token getauscht.
- Experimentelle Effekte nach Leitfaden C10: genau ein bewegter Hintergrund pro Ansicht (ascii-dither-pixel-stil mit eigenem Clip oder fluessig-marmor-hintergrund ohne Clip), nie hinter Fließtext, nie neben einem zweiten Material-Effekt. Farben nur aus Tinte, Papier und Ära-Farbe. Sichtbarer Pause-Knopf „Bewegung anhalten“ (läuft länger als 5 s); Standbild als AVIF bei prefers-reduced-motion, ohne WebGL, auf schwachen Geräten (≤ 4 Kerne, Datensparen) und solange der Shader lädt.
- Dither-Hero: Zellen groß genug, dass nichts flimmert (mobil größer), die Canvas ist aria-hidden, Texte bleiben echtes HTML. Der Clip läuft stumm; Ton nur über sound-umschalter nach Klick, Zustand gemerkt, bei Tab-Wechsel aus. Den Ton-Schalter nur bauen, wenn der Clip wirklich Ton hat.
- echo-stacked-type nur auf dem Namen (bis etwa 12 Zeichen; bei längeren Namen auf dem kürzesten Wort), höchstens drei Kopien in Ära-Farbe, Papier und Meta-Grau, Telefon zwei; Platz für die volle Spreizung reservieren, Kopien aria-hidden. Im Footer darf der Name noch einmal als Echo stehen, sonst nirgends.
- Termine (tourdaten-liste): jede Zeile Datum in Martian Mono mit Tabellenziffern, Stadt und Land, Ort, Support, Status als Wort. „Ausverkauft“ nie nur grau oder durchgestrichen; Resale- oder Wartelisten-Link nur, wenn der Veranstalter ihn anbietet. „Verlegt“ zeigt altes und neues Datum. Ticketlink als normaler Link mit Anbietername, öffnet beim Anbieter. Daten aus einer Quelle (JSON oder Import), dazu .ics je Termin und strukturierte Daten nur für sichtbare Termine.
- Hören: Plattform-Links (Spotify, Apple Music, Bandcamp, YouTube Music, Deezer …) stehen immer als normale Links da; ein eingebetteter Player lädt erst nach Klick (player-einbettung-zwei-klick) mit Anbietername und Hinweis auf den Datenfluss. Trackliste als Text.
- Cover und Werke unverfälscht: Der Pixelaufbau (6 Stufen à 80 ms) liegt als Ebene über dem schon gemalten Bild und läuft einmal beim Eintritt; kein Dither, keine Verformung auf Cover, Pressefotos und Werkabbildungen.
- Buttons: tiefen-taste-3d (Variante versatz-brutal) nur für die eine Haupthandlung einer Ansicht („Anhören“, „Tickets“ im Hero, „In den Warenkorb“); in Terminlisten, Downloads und Nebenaktionen kontur-button-zeichnen (Variante laufend, Striche laufen nur bei Hover und Fokus). Ticketlinks in Zeilen mindestens 44 px hoch.
- Pressebereich ohne Login: Fotos mit Fotograf:in, Jahr, Auflösung und Nutzungsregel direkt am Bild („frei für redaktionelle Berichte über [Act] mit Nennung“), Bio in drei Längen mit Wortzahl und Stand zum Kopieren (kopieren-feedback), Rider und Stageplot mit Datum. Pressestimmen nur echt, mit Medium und Datum.
- Seitenwechsel: spalten-shutter-wipe in Ära-Farbe, 6 Stufen à 80 ms, nur zwischen Hauptseiten, nicht im Shop, nicht nach Formularen, nicht bei reduzierter Bewegung. Menü als Overlay mit menue-choreografie-wipe-clip über animationsstil_ui (öffnen 300 ms, schließen 200 ms).
- karussell-karten-verformen nur als Zusatz (optional, Priorität F) in der Diskografie auf Desktop mit Feinzeiger, Variante welle; die Grundlage bleibt css-native-karussell. generatives-markenzeichen (optional, Variante team) nur für Teilen-Bilder je Tourstadt, Saat ist die Stadt; die Termin-Liste bleibt Text.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG (Band als GbR mit allen Vertretungsberechtigten, Chor als e. V. mit Vereinsregister). Eigener Ticketverkauf: Gesamtpreis inkl. aller Gebühren; für termingebundene Konzerttickets gilt meist kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB, BGH 13.07.2022, VIII ZR 317/21), das klar sagen. Eigener Merch-Shop: Preise inkl. MwSt., Versand, Lieferzeit, Widerrufsbelehrung, Widerrufs-Button (§ 356a BGB), Herstellerangaben nach GPSR; BFSG prüfen. Eigene Songs auf der eigenen Seite: Als GEMA-Mitglied Lizenz für Eigenpräsentation (kostenlos, ein Jahr, ohne Werbung Dritter, Rechtehinweis sichtbar) oder Tarif. Eingebettete Player und Videos erst nach Klick (§ 25 TDDDG). Newsletter mit Double-Opt-in. Fotos von Publikum nur mit Einwilligung, Werkabbildungen mit Bildrecht (ggf. VG Bild-Kunst), KI-erzeugte Bilder oder Visuals, die echt wirken könnten, kennzeichnen (Art. 50 KI-VO) – vom Kunden prüfen lassen.

## Rezept-Varianten

- **Chor, Ensemble, Orchester (zeitgenössisches Profil)**: Für Chöre, Vokal- und Instrumentalensembles mit eigenem, zeitgenössischem oder experimentellem Profil (Neue Musik, Projektchöre). Klassische Kirchen- und Laienchöre passen besser zu verein-nonprofit-wirkung oder kultur-programm-haltung. Die Ära-Farbe ist die Farbe der Saison oder des Projekts. Der Dither-Hero bleibt Signatur, aber ruhiger: größere Zellen, nur mit eigenem Konzert- oder Probenclip, sonst Marmor in Tinte. Konzerte als tourdaten-liste mit Programm (Werke, Leitung, Solist:innen); bei vielen Terminen an wenigen Orten programm-kalender, Variante programm. Pressebereich nach dem Vorbild RIAS Kammerchor (Pressemappe je Saison, Fotos nach Anlass, Bio kurz und lang, Ansprechpersonen), aber mit Fotografen-Credit und Nutzungsregel sichtbar am Bild. Mitsingen bzw. Vorsingen als mehrschritt-anfrage (Variante leiste: Stimmlage, Erfahrung, Kontakt). Förderer als logo-wand-social-proof, Variante raster, nur mit Erlaubnis. Recht: e. V. mit Vereinsregister und Vertretungsberechtigten im Impressum; Kinder- und Jugendchöre: Fotos nur mit Einwilligung der Eltern; Abos oder Mitgliedschaften online mit Kündigungs-Button – vom Kunden prüfen lassen.
- **DJ, Producer, Label**: Label-Seiten nach dem Vorbild Ninja Tune: Events mit Filter nach Künstler:in und Stadt, Release-Seite mit Formaten, Katalognummer, Preis und Trackliste als Text. Roster als listen-hover-bildvorschau (ab fünf Acts; auf Touch feste Daumenbilder). Mixes über player-einbettung-zwei-klick mit Tracklist und Zeitmarken als Text. Ohne eigenen Clip darf webgl-fluid-cursor (Variante verzerrung über dem Namen, auf Touch autonom, mit Pause-Knopf und Standbild) statt fluessig-marmor-hintergrund die Hero-Fassung sein; nie beide und nie zusammen mit dem Dither-Clip. facettenfilter-ergebnisliste im Katalog erst ab etwa 15 Releases. Recht: Label mit Shop als Händler (PAngV, GPSR-Herstellerangaben je Tonträger, Widerruf und Widerrufs-Button); Mixes mit fremden Titeln nicht als eigene Datei hosten, nur über Plattformen einbinden, die das lizenzieren – vom Kunden prüfen lassen.
- **Bildende Künstler:in**: Vorbild Alicja Kwade: Navigation Ausstellungen, Werke, Publikationen, Presse, CV, Kontakt; Ausstellungen getrennt nach aktuell bzw. kommend und Auswahl vergangen, je Eintrag Titel, Haus, Stadt und Zeitraum (tourdaten-liste in der Fassung für Ausstellungen). Werke immer unverfälscht: kein Dither, kein Echo, keine Verformung auf Werkabbildungen; ascii-dither-pixel-stil nur auf einem eigenen Atelier- oder Aufbau-Clip im Hero. Werkschau als tiefenflug-galerie höchstens einmal pro Seite (Variante achse für Hochformate, flug für Ausstellungsansichten) mit Umschalter auf ein ruhiges Raster. Werkverzeichnis als projektindex-hover-vorschau (Titel, Jahr, Technik; auf Touch feste Daumenbilder). Recht: Werkabbildungen mit Fotograf:in und Bildrecht; bei Mitgliedschaft in der VG Bild-Kunst deren Copyright-Vermerk; Preise nur, wenn wirklich direkt verkauft wird; Galerie-Vertretung nur mit Absprache nennen – 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“.