# Bauplan: Kreativstudio: Studio-Bühne

Rezept `kreativstudio-buehne` · Kreativstudio, Digitalagentur, Agentur-Portfolio · Stimmung: laut, selbstbewusst, kinematisch, präzise · Stand 02.11.2026

Viel Lautstärke durch riesige Typo, Showreel-Video und harten Schwarz-Weiß-Kontrast, aber eine einzige, konsequente Bewegungskurve. Die drei Referenzen setzen alle auf eine neutrale Schweizer Grotesk (Suisse Intl, Lausanne). Den Charakter tragen Größe, Schnitt und Video, Deko-Effekte braucht es nicht. Award-nah, aber gebaut wie ein Produkt: Lenis, GSAP, View Transitions, kein Fake-Loader.

## 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 `kreativstudio-buehne`) und https://cecodesign.de/lab/fundus/rezepte/kreativstudio-buehne/
- 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/kreativstudio-buehne/index.html

## Schrift

- Headline: `tiktok-sans` · Text: `tiktok-sans` · Akzent: `dm-mono`
- Größen: h1 clamp(3.5rem, 10vw, 11rem) (K72 setzt 9–11vw), TikTok Sans wdth 75, wght 800, letter-spacing -0.03em, line-height 0.9 (Fantasy .9/.95). h2 clamp(2rem, 4.5vw, 4.5rem), wdth 100, wght 600, -0.02em. Fließtext 1.125rem/1.4, wght 400. Labels DM Mono 0.75rem, Versal, +0.04em. Zwei Breiten derselben Familie ersetzen den Schnittwechsel Suisse/Suisse Condensed bei Fantasy.
- Techniken: [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [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`, [Kondensierte Versal-Headlines auf volle Breite (fit-to-width)](https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo) `versal-kondensiert-fit-to-width`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`

## Farbe

Schwarz und Weiß tragen 90 % der Fläche, dazu genau eine Signalfarbe für CTA, Hover-Flächen und Seitenübergang (K72: #d3fd50 als einzige Farbe). Sektionen dürfen invertieren (Cuberto: -inverse). Kein Verlauf.

- `--farbe-grund` #0b0b0b (Grund dunkel / Text)
- `--farbe-grund-2` #f2f2f2 (Grund hell (Fantasy-Grau))
- `--farbe-text` #ffffff (Text auf Dunkel)
- `--farbe-leise` #8a8a8a (Meta und Labels)
- `--farbe-signal` #ff5a1f (Signalfarbe, nur CTA, Hover-Fläche, Übergangs-Panel)
- `--farbe-grund-3` #6B6B6B (Meta-Text barrierefrei auf hellem Grund (4,8 : 1 auf #f2f2f2; #8a8a8a nur auf dunklem Grund oder für Linien))

## Bewegung

- Animationsstil: [Animationsstil „Editorial langsam“](https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo) `token-editorial-langsam`
- 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: cubic-bezier(0.16, 1, 0.3, 1) (token-editorial-langsam); UI über animationsstil_ui (dieselbe Expo-Kurve)
- Dauer: Reveals und Bildmasken 750–1200, Seitenübergang 800–1000, Hover/UI 200–400, Fades 350
- Regel: Eine Out-Kurve für alles Sichtbare, wie bei allen drei Referenzen. Laut wird es über Größe und Schnitt, nicht über wildere Kurven. Menü-Overlay, FAQ und Formular über animationsstil_ui token-toggle-asymmetrisch (gleiche Öffnen-Kurve, Schließen schneller). Überschwingen höchstens auf kleinen Icons. prefers-reduced-motion: Reveals auf reine Opazität 200 ms.
- Hinweis: Bewusst token-editorial-langsam: Die drei Referenzen nutzen gemessen eine steile Out-Kurve (Cuberto .16,1,.3,1; Fantasy .19,1,.22,1; K72 easeOutCubic) mit 750–1200 ms – genau die Umsetzung dieses Tokens. Laut wird die Seite über Größe und Schnitt, nicht über die Kurve.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 6, 8, 12, 16, 24, 40, 56, 112, 176
- Sektionsabstand: clamp(88px, 12vw, 176px)
- Dichte: mittel
- Hinweis: Werte wie im Starter (starter/kreativstudio-buehne/tokens.css: --abschnitt, --rand, --spalte). Große Sektionssprünge, aber enge Spalten und Label-Zeilen mit 6 px Zeilenabstand.
- Spalten: 12
- Seitenrand: clamp(16px, 2.6vw, 40px)
- Spaltenabstand: clamp(12px, 1.6vw, 24px)
- Maximale Breite: none
- Raster: Volle Breite mit Rand, kein zentrierter Container. Leistungen als eigene Vollbild-Sektionen, Arbeiten als Index; Anfrage 6/6.
- Radius klein: 4px
- Radius groß: 12px
- Pillenform für Buttons: True
- Linie: 1px Linienfarbe auf Schwarz, als Oberkante von Datenzeilen
- Schatten: nur die Hover-Vorschau im Index (Starter: 0 24px 60px -20px rgb(0 0 0 / .6)), sonst keiner
- Form: Bilder und Showreel 4 px, Anfrage-Panel 12 px, Knöpfe als Pille (Starter --knopf-radius 999px; pfeil-icon-button, Variante kreis-expand).

## Bildsprache

- Licht: Hart und kontrastreich, Kundenarbeit in Originalfarbe; Showreel-Stills scharf.
- Ausschnitt: Case-Bilder formatfüllend, Details der Arbeit, Plakate und Screens im Anschnitt.
- Personen: Team als Porträtreihe im gleichen Licht; kein Teamfoto mit Laptops.
- Formate: 16:9, 4:5, 3:2
- Nicht: Keine Mockup-Laptops mit Stock-UI, keine Aurora- oder Glow-Hintergründe, keine verzerrten oder gewellten Case-Bilder, kein Stockvideo.

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

- Anrede: du
- Sätze: Sehr kurz, oft ein Satz pro Zeile, drei bis vier Wörter in der Headline. Cases mit Aufgabe, Idee, Ergebnis.
- Haltung: Selbstbewusst und präzise, Haltung statt Leistungskatalog.
- Tonproben: Wir machen Marken laut., Hast du etwas, das wir bauen sollen?
- Nicht: „Wir sind Ihr Partner für digitale Lösungen“, „360°“, „ganzheitlich“, „Full-Service“, Buzzword-Ketten.

## Hero

Schrift-Hero als Standard: Studio-Name bzw. ein kurzes Wort über die volle Breite (schrift-hero-viewportbreit, Variante basis), darunter ein Satz Haltung. cinematic-video-hero nur mit eigenem Showreel-Material in hoher Qualität (stumm, Poster, Pause-Knopf); sonst startet das Showreel als stumme Vorschau in der Sektion direkt danach. Kein Stockvideo.

- Raster: Wie im Starter: 12 Spalten über die volle Breite; oben eine Label-Zeile (Spalte 1–4, 5–7, 8–9, 10–12), unten rechts ein Satz Haltung, ganz unten die Wortmarke randbündig (schrift-hero-viewportbreit, Variante basis).
- Bild: Kein Bild im Hero; das Showreel 16:9 folgt direkt danach als stumme Vorschau. cinematic-video-hero nur mit eigenem Showreel.
- Überschrift: clamp(3.5rem, 10vw, 11rem), mindestens 9vw, TikTok Sans wdth 75 / 800, über die volle Breite, Grundlinie an der Unterkante.
- Handlung: Kein CTA-Paar im Hero; „Kontakt“ im Kopf, der große Kontakt-Satz und die Riesen-Wortmarke am Seitenende (footer-cta-riesen-wortmarke).
- Zusatz: Label-Zeile in DM Mono 0.75rem Versal (Studio, Disziplin, Ort, Status); Haltungssatz höchstens 22ch.

- Hero: [Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)](https://cecodesign.de/lab/fundus/hero-layouts/schrift-hero-viewportbreit/demo?v=basis) `schrift-hero-viewportbreit` · Variante „Wortmarke“, [Kinoreifer Vollbild-Video-Hero](https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo) `cinematic-video-hero`

## Sektionen in dieser Reihenfolge

1. **Showreel direkt nach dem Hero**: [Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)](https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo) `medien-expansion-scroll`, [Eigener Videoplayer](https://cecodesign.de/lab/fundus/sektionen/eigener-videoplayer/demo?v=showreel) `eigener-videoplayer` · Variante „Showreel auf dunkler Bühne“
2. **Leistungen (3–4 Felder)**: [Sections, die übereinander gleiten (Vorhang-Übergang)](https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/demo) `section-overlap-uebergang`
3. **Kunden-Logos (nur mit Freigabe und mindestens etwa 5 bekannten Kunden; Band mit Pause-Knopf)**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=laufband) `logo-wand-social-proof` · Variante „Kundenlogos als Laufband“
4. **Ausgewählte Arbeiten**: [Projektindex als Liste mit Hover-Bildvorschau](https://cecodesign.de/lab/fundus/hero-layouts/projektindex-hover-vorschau/demo) `projektindex-hover-vorschau`, [Case-Study-Gerüst auf Award-Niveau](https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/demo) `case-study-geruest`, [Lesereihenfolge im Raster](https://cecodesign.de/lab/fundus/zugang/reading-flow-reihenfolge/demo?v=zeilen) `reading-flow-reihenfolge` · Variante „Broken Grid mit grid-rows“
5. **Haltung / Warum wir**: [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`
6. **FAQ**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“
7. **Abschluss-CTA / Kontakt (Einladung als Satz, kurzes Anfrageformular oder Mail mit Kopier-Feedback; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)**: [Abschluss-Footer mit großem CTA und Riesen-Wortmarke](https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/demo) `footer-cta-riesen-wortmarke`, [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“

## Signatur (Pflicht)

- [Abschluss-Footer mit großem CTA und Riesen-Wortmarke](https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/demo) `footer-cta-riesen-wortmarke`
- [Text-Roll beim Hover (doppelte Zeile rollt durch)](https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/demo) `text-roll-hover`

## 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: [Text-Roll beim Hover (doppelte Zeile rollt durch)](https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/demo) `text-roll-hover`

## Weitere Bausteine

- Seitenwechsel: [Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)](https://cecodesign.de/lab/fundus/seitenuebergaenge/clip-path-reveal-seite/demo) `clip-path-reveal-seite`, [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Intro: [Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)](https://cecodesign.de/lab/fundus/preloader-intro/intro-ohne-wartezeit/demo) `intro-ohne-wartezeit`, [Intro nur beim ersten Besuch (Session-Gedächtnis)](https://cecodesign.de/lab/fundus/preloader-intro/einmal-intro-session/demo) `einmal-intro-session`
- Navigation: [Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau](https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/demo) `vollbild-overlay-menue-bildvorschau`, [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`, [Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück](https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo) `hide-on-scroll-header`
- Scroll: [Smooth Scroll mit Lenis](https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/demo) `smooth-scroll-lenis`, [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`, [Sections, die übereinander gleiten (Vorhang-Übergang)](https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/demo) `section-overlap-uebergang`
- Schrift: [Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)](https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/demo) `split-mask-reveal`, [Text-Roll beim Hover (doppelte Zeile rollt durch)](https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/demo) `text-roll-hover`, [Marquee-Laufband (optional scroll-gekoppelt)](https://cecodesign.de/lab/fundus/schrift-animationen/marquee-laufband/demo) `marquee-laufband`
- Hover: [Magnetische Buttons und Elemente](https://cecodesign.de/lab/fundus/hover/magnetische-elemente/demo) `magnetische-elemente`, [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“
- Cursor: [Kontextueller Cursor (wächst, dockt an, zeigt Label)](https://cecodesign.de/lab/fundus/cursor/kontextueller-cursor/demo) `kontextueller-cursor`
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Icon-Squash-and-Stretch (Pfeil dehnt sich)](https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo) `icon-squash-stretch`
- Galerie: [Video-Vorschau bei Hover / im Viewport](https://cecodesign.de/lab/fundus/galerien-slider/video-vorschau-hover-viewport/demo) `video-vorschau-hover-viewport`, [Drag-Slider mit Trägheit und Endlosschleife](https://cecodesign.de/lab/fundus/galerien-slider/drag-slider-traegheit-loop/demo) `drag-slider-traegheit-loop`
- Footer: [Abschluss-Footer mit großem CTA und Riesen-Wortmarke](https://cecodesign.de/lab/fundus/footer/footer-cta-riesen-wortmarke/demo) `footer-cta-riesen-wortmarke`, [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=buehne) `studio-visitenkarte-footer` · Variante „Studio-Bühne mit Riesen-Wortmarke“, [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

- cursor-follower-lerp – Cuberto nutzt einen kontextuellen Cursor mit Icons, keinen nachziehenden Punkt; der Lerp-Follower gilt im Katalog als 2020er-Award-Look
- prozent-zaehler – Fake-Ladezeit vor dem Showreel verschlechtert LCP; keine der drei Seiten hat einen
- Aurora-/Glow-Hintergrund (Anti-Muster) – liest sich als KI-Template, passt nicht zum Schwarz-Weiß-Kontrast
- velocity-skew-verzerrung und webgl-bildverzerrung auf Case-Bildern – verfälscht Kundenarbeit, die verkauft werden soll
- Manrope als Textschrift – Cuberto nutzt sie zwar, sie steht aber auf der Claude-Verbotsliste (SaaS-Standard)
- Mehr als eine Signalfarbe oder mehrere Easing-Kurven parallel – bricht die Konsequenz, die alle drei Referenzen auszeichnet

## Regeln

- h1 mindestens 9vw auf Desktop; nie mehr als 3–4 Wörter pro Zeile; line-height 0.9–0.95, letter-spacing -0.02 bis -0.04em.
- Showreel als stumm geloopte Video-Vorschau direkt nach dem Hero (autoplay muted playsinline loop), Ton nur per Klick im Vollbild.
- Eine Easing-Kurve, eine Signalfarbe, eine Schriftfamilie in zwei Breiten: Konsequenz statt Vielfalt.
- Arbeiten als Index mit Hover-Vorschau auf Desktop; auf Touch immer sichtbare Thumbnails.
- Seite endet mit großem Kontakt-CTA als Satz (Cuberto: „Have a product to build or rethink?“, Fantasy: „Let's talk.“) und einer Riesen-Wortmarke.
- Cursor zeigt nur Kontext (Pfeil, Play, Schließen), ersetzt nie den System-Cursor auf Formularen und Texten.
- Leistungen höchstens 3–4 Felder, jedes mit eigener Vollbild-Sektion statt Icon-Raster.
- marquee-laufband höchstens einmal pro Seite und nur mit echtem Inhalt (Kunden, Leistungen), mit Pause-Knopf; nie als reine Deko (wann_nicht: Template-Klischee 2026).
- Pflichtangaben und Recht (Leitfaden 8a): Kundenlogos, Arbeiten und Case Studies nur mit Freigabe der Kunden (Nutzungsrecht, ggf. NDA); Showreel-Musik lizenziert; fotorealistische KI-Bilder, die echt wirken könnten, kennzeichnen (Art. 50 KI-VO); Impressum, Datenschutz – 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“.