Styleguide
Alle Design-Tokens, Farben, Typografie und Komponenten im Poster-Editorial-Stil.
Farbsystem
4 Brand-Farben + Warmgrau + Schwarz/Weiß. Jede Palette hat 11 Abstufungen (50–950). Der Alias-Token (fett markiert) verweist auf die Basis-Stufe.
Gelb
oklch(87.3% 0.179 92) — Accent, HighlightsAlias: --color-gelb = --color-gelb-300
50
100
200
300
400
500
600
700
800
900
950
Magenta
oklch(82.6% 0.170 327) — TransformationAlias: --color-magenta = --color-magenta-300
50
100
200
300
400
500
600
700
800
900
950
Grün
oklch(69.2% 0.160 159) — Future Skills, Primary AccentAlias: --color-gruen = --color-gruen-500
50
100
200
300
400
500
600
700
800
900
950
Orange
oklch(71.9% 0.192 49) — LeadershipAlias: --color-orange = --color-orange-400
50
100
200
300
400
500
600
700
800
900
950
Grau
oklch(92.3% 0.009 85) — Backgrounds, Borders (warm)Alias: --color-grau = --color-grau-200
50
100
200
300
400
500
600
700
800
900
950
Schwarz & Weiß
Schwarz
oklch(0% 0 0)
Weiß
oklch(100% 0 0)
Schriften & Typografie
Spectral
Serif, editorial. Weight: 500 Medium. Zeilenabstand 110–130%.
Medium 500 — Hauptüberschrift
Medium 500 — Unterüberschriften
Medium 500 Italic — Zitate
h1-h6: 500 Medium · tracking -0.01em · leading 1.1–1.25
Inter
Variable font, 100-900 normal + italic. Luftig gesetzt (145–160% Zeilenhöhe).
700 — Bold für Hervorhebungen & Display
600 — Semibold für Labels, Badges & Buttons
400 — Regular für Fließtext
400 Italic — Editorial-Auszeichnungen
18px base · leading 1.55 body / 1.6 p · tracking -0.01em
Schriftgrößen
Headline Eins
Headline Zwei
Headline Drei
Headline Vier
Wir verbinden Techniken aus der Schauspielausbildung mit aktueller Organisationsentwicklung.
Ergänzender Text für Beschreibungen und Metadaten.
Eigene CSS-Klassen
Wiederverwendbare Klassen aus global.css — fertig gestylt, direkt einsetzbar.
Inter · 600 · 0.18em tracking · uppercase
500+
Textfarbe
Eine Textfarbe: Schwarz
Alle Texte verwenden text-schwarz (reines Schwarz, oklch(0% 0 0)). Es gibt keine grauen Textvarianten.
Alle Texte, Bullet-Points, Nummerierungen, Linien, Tabellenrahmen
Verboten
text-grau-*als Textfarbetext-schwarz/*mit reduzierter Deckkraft (z.B. /60, /80)text-white/80oder niedriger auf farbigem Hintergrund
Responsive Typografie
Skalierungsstufen für Headlines und Body. Breakpoints: sm 640, md 768, lg 1024, xl 1280.
text-4xl → 5xl → 6xl
text-5xl → 6xl → 7xl → 8xl
text-5xl → 6xl → 7xl
text-xl → 2xl
text-2xl → 3xl
Truncation
Silbentrennung
Automatische Silbentrennung mit konservativen Schwellwerten. Nur Wörter ab 12 Zeichen werden getrennt — mindestens 6 Zeichen vor und nach dem Trennstrich.
Regeln
hyphens: auto · hyphenate-limit-chars: 12 6 6
Gilt für alle Textelemente (Body, Labels, Buttons, Nav etc.). Durch den hohen Schwellwert von 12 Zeichen werden kurze UI-Texte in der Praxis nie getrennt.
hyphens: auto · hyphenate-limit-chars: 12 6 6
Gleiche Regeln wie Body. Zusätzlich text-wrap: balance für gleichmäßige Zeilenverteilung.
-webkit-hyphenate-limit-before: 6 · -webkit-hyphenate-limit-after: 6
Safari unterstützt hyphenate-limit-chars nicht. Stattdessen werden die Legacy-WebKit-Properties gesetzt. 6 + 6 = effektiv 12 Zeichen Minimum.
Live-Beispiele
Organisationsentwicklung und Transformationsbegleitung
Lange Wörter werden bei 12+ Zeichen getrennt. Kurze Wörter bleiben intakt.
Wir verbinden Schauspielausbildung mit Organisationsentwicklung und Kommunikationsstrategien für nachhaltige Veränderungsprozesse.
Gleiche Regeln: nur Wörter ab 12 Zeichen werden getrennt.
Iconoir Icons
Iconoir (@iconify-json/iconoir). Konsistent Outline-Varianten verwenden.
Navigation
Kontakt & Kommunikation
Social Media
UI & Feedback
Business & Theater
Größen
Favicon
Das inszenio-Ringzeichen in Weiß auf schwarzem Hintergrund mit ca. 10 % Rand.
Schwarz
oklch(0% 0 0)
favicon.svg
- Ringzeichen (inszenio „o") in Weiß, 10 % Rand, abgerundetes Quadrat (rx 14)
favicon.svgals einziges Faviconfavicon.ico+apple-touch-icon.pngbleiben unverändert
Interaktive Zustände
Alle interaktiven Elemente in ihren vier Zuständen. Die erste Spalte (Normal) ist interaktiv — hover, klicken und fokussieren möglich. Die anderen Spalten zeigen den jeweiligen Zustand statisch.
| Element | Normal | Hover | Active | Focus |
|---|---|---|---|---|
Logo .logo-mark |  | | | |
Button Primary .btn-primary | Kontakt | Kontakt | Kontakt | |
Button Secondary .btn-secondary | Kontakt | Kontakt | Kontakt | |
Button Circle .btn-circle | ||||
Link (underlined) .link .link-primary | Mehr erfahren | Mehr erfahren | Mehr erfahren | Mehr erfahren |
Nav Link .nav-link | Leadership | |||
Back-Link .back-link | Zurück | Zurück | Zurück | Zurück |
Footer Link .footer-link | Impressum | |||
Icon Button .icon-btn | ||||
Text Input .input | Name | Name | Name | |
Select .select | Auswählen | Auswählen | Auswählen | |
Textarea .textarea | Nachricht | Nachricht | Nachricht | |
Checkbox .checkbox | | | | |
Badge .badge | BADGE | BADGE | BADGE |
Badges & Tags
Formulare
Bereichs-Karten
Portrait 3:4 Bild via .card-image mit aspect-ratio: 3/4, schwarze Typografie darunter. Kein farbiger Karten-Hintergrund. Button: .btn-secondary.
Act Leadership
Szenisches Führungskräftetraining mit professionellen Schauspielern.
Mehr erfahrenPitch IT
Überzeugend präsentieren mit Techniken aus dem Theater.
Mehr erfahrenSpiegeltheater
Unternehmensrealität sichtbar machen und Wandel anstoßen.
Mehr erfahrenStatische Karten
.static-cards-grid — Nicht verlinkt, kein Hover. Eyebrow + Titel + Excerpt. Bereichsseiten.
Act Leadership
Szenisches Führungskräftetraining mit professionellen Schauspielern.
Pitch IT
Überzeugend präsentieren mit Techniken aus dem Theater.
Spiegeltheater
Unternehmensrealität sichtbar machen und Wandel anstoßen.
Team-Karten
<PersonCard> — 4:3 Landscape-Bild, Name/Rolle/Bio/LinkedIn darunter. Kontakt-Variante mit Region, Telefon, E-Mail.
Dr. Claudia Weber
Gründerin & Geschäftsführung
Regisseurin, Organisationsberaterin und systemischer Coach mit über 20 Jahren Erfahrung.
Info-Karten
Icon oben-links, Titel + Beschreibung darunter. Kein Hintergrund, keine Borders, keine Hover-Effekte. Nicht verlinkt.
Szenische Trainings
Schauspieler als Sparringspartner für realitätsnahes Üben.
Unternehmenstheater
Ihre Themen auf der Bühne — als Spiegel und Katalysator.
Coaching & Beratung
Systemische Beratung trifft theatrale Methoden.
Hero-Varianten
Standard: VE Hero (1fr + 2fr Grid).
Alternativ: simple,
background (B&W + grain),
split (wider text)
Jede Geschäftssituation ist eine Bühne
Theaterprofis trainieren Ihre Führungskräfte in Präsenz, Wirkung und Kommunikation.
Jede Geschäftssituation ist eine Bühne
Theaterprofis trainieren Ihre Führungskräfte in Präsenz, Wirkung und Kommunikation.
CTA-Sections
Neutraler Hintergrund, schwarzer Text, Standard-Buttons. Steht typischerweise nach einem Teaser Block.
Welches Format passt zu Ihnen?
Wir beraten Sie gern und entwickeln ein individuelles Konzept für Ihre Organisation.
Referenzen
2px schwarze Linie links, Zitat rechts. Em-Dash vor Autorname, Rolle · Firma darunter.
„Die Kombination aus Schauspiel-Expertise und Business-Know-how ist einzigartig.“
„Unsere Führungskräfte treten jetzt mit einer ganz anderen Präsenz auf.“
„inszenio hat unseren Change-Prozess auf ein neues Level gehoben.“
- Linie: 2px schwarz, volle Höhe des Zitats
- Markdoc:
{% quote quote={...} author="..." /%} - Attribution: Em-Dash vor Autorname, Rolle · Firma darunter
Stats & Trust-Logos
Stats / Counter
Trust-Logo-Leiste
Prozess-Steps
Schritt-Nummer oben, Titel + Beschreibung darunter. Gleicher Stil wie Info-Karten.
Erstgespräch
Wir verstehen Ihre Situation und Ziele.
Konzeption
Massgeschneidertes Format-Design.
Durchführung
Erlebnisorientiertes Training vor Ort.
Transfer
Nachhaltige Wirkung im Alltag.
FAQ-Accordion
Wie läuft das Erstgespräch ab?
In einem 30-minütigen Video-Call lernen wir uns kennen und klären, wie wir Sie unterstützen können.
Für wen eignen sich die Trainings?
Für Führungskräfte, Teams und Organisationen, die ihre Kommunikation und Wirkung verbessern wollen.
Was kostet ein Training?
Die Kosten richten sich nach Format, Dauer und Teilnehmerzahl. Wir erstellen Ihnen ein individuelles Angebot.
Rich Text Komponenten
Infobox
Informations-Hinweis
Dies ist ein Informations-Hinweis mit wichtigen Details für den Leser.
Ohne Icon
Infobox ohne Icon — nur grauer Rahmen mit Inhalt.
Seitenverhältnisse
Landscape
Team-Karten, PersonCard
Portrait
.card-image mit aspect-ratio: 3/4
Banner
Hero-Image, Teaser-Blöcke
Hero-Bild
HeroSection image-left/right
Video
YouTube/Vimeo Embeds
Video Embed
IframeManager data-service Pattern — Cookie-Consent-kompatibel. Grid: 1→2→3 Spalten.
Szenisches Training
Kurze Beschreibung zum Video.
Pitch Workshop
Kurze Beschreibung zum Video.
Spiegeltheater
Kurze Beschreibung zum Video.
Artikel-Header
Back-Link, Titel, Excerpt, Tags-Bar. Verwendet auf Blog-Detailseiten.
Artikel-Überschrift in Spectral
Kurze Zusammenfassung des Artikels — ein bis zwei Sätze, die den Leser zum Weiterlesen einladen.
Toast Notification
Schwarzer Toast, zentriert unten. Erscheint 2.5s nach Aktion, animiert ein/aus.
Skip Link
.skip-link — Accessibility. Unsichtbar, erscheint bei Tab-Navigation. Schwarz auf Weiß.
Statische Vorschau — normalerweise nur per Tab sichtbar.
Linien & Trennelemente
Eyebrow / Label
- Section-Eyebrow:
.font-label+text-sm mb-6odermb-8 - Immer
text-schwarz— keine farbigen Eyebrows - Keine Akzentlinien — nur Text
Trennlinien
Standard-Trennlinie
- FAQ-Accordion:
border-t border-schwarzzwischen Items - Tags-Separator:
border-t border-schwarz pt-6 - Prose
<hr>: 2px grau-200 background - Keine dekorativen Linien zwischen Sections