CI-Guide Emma Woelk
(für KI-Nutzung)

Drei Festlegungen, die dieser Guide durchsetzt

• Ein Gelb, kein zweites. #FFF700 führt. Violett #8075D9 ist die Sekundärfarbe, Magenta Fläche und Verlauf. Höchstens eine Signalfarbe pro Fläche.
• Gelb ist Schrift auf Schwarz und Fläche auf Weiß. Auf Schwarz 18,5 : 1, auf Weiß 1,1 : 1.
• Zwei Familien, drei Rollen. Barlow Condensed ruft, Barlow betont, Inter erklärt.

Zwei Entscheidungen pro Datei

Lockup und Grund. light heißt: für hellen Grund, schwarze Zeichnung. dark: für dunklen Grund, weiße Zeichnung. Der Name beschreibt den Untergrund, nicht die Zeichnung.

Programm-Lockups

Je ein Lockup mit Balken: KI-Werkstatt auf Gelb #FFF700, Inner Circle auf Violett #8075D9. Ein Angebot in zwei Größen, keine zwei Marken. Kommen beide Stufen vor, ist die Wortmarke der Absender.

• Nie auf der Website, dort gilt nur die Wortmarke. Lockups gehören in den Mitgliederbereich, auf Slides, in Social und Anzeigen im Kontext ihres Programms.
• Balkenschrift ist #000000, auf beiden Balken. Schwarz auf #8075D9 erreicht 5,5 : 1, Weiß nur 3,8 : 1.
• Farben nie tauschen. Und beide nur im Balken (Abschnitt 03).

logo-emmawoelk-ki-werkstatt-black-yellow.png
logo-emmawoelk-ki-werkstatt-white-yellow.png
icon-emmawoelk-ki-werkstatt-black-yellow.png
icon-emmawoelk-ki-werkstatt-white-yellow.png

logo-emmawoelk-inner-circle-black-violet.png
logo-emmawoelk-inner-circle-white-violet.png
icon-emmawoelk-inner-circle-black-violet.png
icon-emmawoelk-inner-circle-white-violet.png

Welches Lockup, in welcher Größe

Absolute Minima: Schriftzug 110 px am Bildschirm, 28 mm im Druck. Monogramm 28 px. Row-Lockups 320 px, nie in einer Kopfzeile für logo.

Die Dateien

Jede als SVG und als PNG in drei Größen: -1x ohne Zusatz, -400 für Signatur und Folie, -4x für Druck und große Flächen. Hell und Dunkel sind pixelgleich. Index mit Maßen und Bytes: /logos/index.json.

Wortmarkeheller Grund · Seitenverhältnis 2,31 : 1

SVG · 4,1 KBPNG 1092 × 473 · 54,1 KBPNG 275 × 120 · 5,2 KB

Wortmarkedunkler Grund · Seitenverhältnis 2,31 : 1

SVG · 4,5 KBPNG 1092 × 473 · 57,6 KBPNG 275 × 120 · 5,5 KB

Monogrammheller Grund · Seitenverhältnis 1,54 : 1

SVG · 1,9 KBPNG 835 × 541 · 43,8 KBPNG 213 × 138 · 4,0 KB

Monogrammdunkler Grund · Seitenverhältnis 1,54 : 1

SVG · 2,0 KBPNG 835 × 541 · 46,8 KBPNG 212 × 137 · 4,3 KB

Wortmarke + Firmierungheller Grund · Seitenverhältnis 1,74 : 1

SVG · 7,0 KBPNG 1092 × 626 · 72,0 KBPNG 275 × 159 · 7,2 KB

Wortmarke + Firmierungdunkler Grund · Seitenverhältnis 1,74 : 1

SVG · 7,4 KBPNG 1092 × 626 · 77,1 KBPNG 276 × 160 · 7,7 KB

Monogramm + Firmierungheller Grund · Seitenverhältnis 6,59 : 1

SVG · 5,1 KBPNG 2527 × 383 · 66,0 KBPNG 635 × 99 · 8,1 KB

Monogramm + Firmierungdunkler Grund · Seitenverhältnis 6,59 : 1

SVG · 5,2 KBPNG 2527 × 383 · 69,3 KBPNG 635 × 99 · 8,7 KB

SVG oder PNG

SVG, immer, wenn das Werkzeug es annimmt. PNG ist die Ausweichdatei, transparent und nie mit weißem Kasten.

Favicon

Der Satz ist gebaut: Monogramm schwarz auf Gelb, für jede Größe einzeln, 16 und 32 ohne Speedlines und mit verstärktem Strich. Die alte Datei favicon.png (weiß auf Schwarz, 850 × 850) bleibt als Herkunft liegen.

• Das Favicon ist das Monogramm, nie der Schriftzug.
• Schwarzes Quadrat, randlos. Kein Kreis, keine Rundung, kein Rahmen: die Systeme schneiden selbst.
• Kein Freiraum im Favicon. Das Monogramm füllt rund 70 % der Kante.
• Keine Transparenz im Apple-Touch-Icon.

Freiraum

Auf allen vier Seiten ein Viertel der Logohöhe. Nichts betritt diese Zone: kein Text, keine Linie, keine Bildkante, kein zweites Logo.

Violette Linie = Bounding-Box der Datei. Gestrichelt = Freiraum.

Was nicht geht

NeinBalken umfärben

NeinVerzerren oder stauchen

NeinSchatten oder Glow

NeinDrehen oder kippen

NeinFalsche Grundversion

NeinAuf unruhigem Bild ohne Panel

NeinLockup selbst zusammenbauen

KI-WERKSTATT

NeinSchriftzug in einer Schrift setzen

Emma WOELK

• Niemals „Emma Woelk“ in einer Systemschrift setzen. Schleife, Verbindung und Speedlines gibt keine Schrift her.
• Der gelbe Balken ist #FFF700, der violette #8075D9. Kein Orange, kein Zitronengelb, keine Deckkraft unter 100 %.
• Kein Lockup selbst bauen. Die Datei hat eigene Abstände, Balkenhöhe und Sperrung.
• Nie zwei Lockups derselben Familie in einem Layout. Das liest sich als zwei Absender.
• Das Logo nie direkt auf ein Foto, nur mit deckendem oder stark abgedunkeltem Panel.
• Die Speedlines gehören nur zum Logo. Kein Zierelement, kein Trenner.

Markenfarben

Sekundärfarben

Violett ist die Sekundärfarbe. Magenta ist Fläche, Verlauf und Akzent auf hellem Grund.

Abgeleitet und Status

Statusfarben gehören in die Oberfläche und in keine Anzeige. Zwei Ausnahmen im Web: der durchgestrichene alte Preis (Element 50) in Fehler-Rot und die Sicherheitsbox (53) in Grün.

Violett-Stufen, nur Web

Nur im Web, nur in diesen Rollen. Keine neue Stufe: weniger Violett heißt Deckkraft. Die früheren Einzelwerte der Website sind auf diese Stufen zusammengeführt.

Kontrast, nachgerechnet

Regeln

• Gelb ist Schrift auf Schwarz und Fläche auf Weiß. Nie umgekehrt. Gelb zum Lesen auf Papier ist Ocker #5C5100.
• Aus zehn Metern gelb-auf-schwarz. Als Fläche oder Akzentwort. Funktioniert eine Seite ohne Gelb, gehört sie nicht zu dieser Marke.
• Höchstens eine Signalfarbe pro Fläche. Gelb und Magenta dürfen auf derselben Seite stehen, nicht im selben Button, derselben Karte, derselben Kachel.
• Programmfarben gelten nur für die Lockup-Balken. Nie als Flächenfarbe für Seiten, Slides oder Kampagnen.
• Verläufe nur Violett → Magenta, 180°, unter 20 % der Fläche. Gelb nie. Ausnahmen im Web: die große Aussage (Element 07), auch waagerecht, und die großen Zahlen.

• Kein Neon-Glow hinter Gelb. In Print, Deck und Anzeige ohne Ausnahme, im Web in den Grenzen aus Abschnitt 10.
• Kein zweites Gelb. Kein Orange, kein blasses Gelb, keine 60-%-Deckkraft. Weniger Gelb heißt weniger Fläche.
• Magenta ist keine Knopffarbe.
• Keine neue Farbe pro Kampagne. Dann braucht die Kampagne eine andere Idee.
• Kein Gelb auf Magenta und kein Magenta auf Gelb. 3,1 : 1.
• Keine Markenfarbe für Fehler. Fehler tragen #FF5A5F. Im HubSpot-Theme sind --errors-bg, --field-error und der blaue Sliderschatten rgba(8,0,255,.5) noch umzustellen, der Schatten auf #8075D9.

Die Skala

Für Folie, PDF, Anzeige und Druck. Genau diese Werte, keine gerundeten.

Die Web-Skala

Die Stellen, an denen das Web abweicht.

Fließtext und Knopf wie oben. Versalien stehen immer per CSS, nie getippt: getippte liest ein Screenreader buchstabenweise, und ohne CSS stehen sie als Geschrei da.

Die Handschrift

Caveat 400, SIL OFL 1.1, als Teilmenge unter fonts/caveat-400.woff2. Das Herz ist ein SVG-Umriss .hand__herz in derselben Farbe.

• Ein Akzent, keine Textschrift. Nur in .hand, nur in Violett hell #B7AEF0, nur im Web.
• Höchstens zweimal pro Seite. Nie zweimal im selben Bildschirm.
• Immer aria-hidden="true". Die Handschrift trägt nie eine Information.

Sperrung und diese Seite

Die schmale Versal-Schrift braucht Luft: 0,005em oben, 0,02em beim Zwischenkopf, 0,025em beim Knopf. Fließtext bleibt bei null.

Der Guide selbst setzt H3 auf 24 statt 32 px und H4 auf 17 statt 24, sonst wäre er doppelt so lang. Überall sonst gilt die Skala.

Die Schriftdateien

Barlow und Barlow Condensed (Jeremy Tribby), Inter (Rasmus Andersson), SIL OFL 1.1, unverändert. 16 woff2-Dateien, 412 KB, im Regelfall lädt der Browser 253 KB.

Regeln mit unicode-range: /fonts/fonts.css, Lizenzen daneben. Schick den Link, nicht den Anhang. Handschrift: /fonts/caveat-400.woff2, Regel in Abschnitt 11.

Zeichen und Anführungszeichen

Deutsch und Spanisch liegen im latin-Subset, erst Polnisch, Tschechisch oder Rumänisch laden latin-ext.

• Deutsch nimmt „…“, nicht "…" und nicht “…”.
• Versal-ß gibt es nicht. In Versalien wird ß zu SS: GRÖSSE.
• Das Halbgeviert – ist ein Gedankenstrich, kein Bindestrich. Wie oft: Abschnitt 08.

Regeln

• Versalien enden bei H3. H1, H2, CTA-Headline, H3, Button, Menü versal, ab H4 gemischt. Einzige Ausnahme: Kartentitel im Web (.titel-ruhig).
• Höchstens drei Zeilen Versalien am Stück.
• Betonung ist Schnitt, nicht Kursiv. Kursiv nur für einen benannten Gegenstand: KI-Werkstatt, ein Toolname, ein neu definierter Begriff.
• Zwei Schriftgrößen pro Fläche.
• Höchstens ein gelber Marker pro Ansicht (Abschnitt 06).

• Keine dritte Textfamilie. Kein Montserrat, Poppins, Roboto, Oswald, auch nicht in fremd gebauten Decks.
• Barlow Condensed nie im Fließtext.
• Keine Sperrung auf Kleinbuchstaben.
• Kein Farbwechsel in der Headline, kein Verlauf im Text. Ausnahmen im Web: große Aussage (07) und große Zahlen.
• Kein Blocksatz.

Schreibweisen

Themen sind keine Marken

Marketing, Website, KI-Tools, Sales, Automatisierung, SEO bekommen kein Logo, keine Farbe, kein Icon-Set, keine eigene Landingpage-Optik.

• Der Programmname steht bei der ersten Nennung vollständig, in jedem Dokument, Deck und auf jeder Seite. Nie abgekürzt.
• Themen bleiben kleingeschrieben im Satz: „die Beratung zu Automatisierung“.
• Kein ®, kein ™, kein „by Emma Woelk“.
• Kein neuer Name ohne Not. Neues geht in ein bestehendes Angebot.
• Keine Preise in diesem Guide. Sie stehen auf den Angebotsseiten.

Zahlen und Verknappung

Zahlen sind die Stärke der Marke und ihr größtes Risiko: über 20 Jahre, über 250 Projekte, +500.000 € in 7 Monaten, 50 % mehr Aufträge in zwei Wochen.

• Jede Zahl braucht einen Besitzer. Name, Firma, Zeitraum: +500.000 € in 7 Monaten steht mit Hermann Hacker und nk neue kommunikation. Eine Statistik ohne Quelle kommt raus.
• Keine Zahl, die nicht gemessen wurde. Kein „10× mehr Leads“, kein „bis zu 300 %“.
• Keine erfundene Verknappung, beim Inner Circle gar keine.
• Abgelaufene Countdowns werden sofort entfernt.

Der Marker

• Ein Marker pro Ansicht. Folie, Karte, Hero, nicht Absatz. Im Fließtext der Website erlaubt (Element 10), nie im selben Bildschirm wie der Merksatz mit gelber Fläche (09) oder die gelbe CTA-Box (71).
• Hinter zwei bis vier Wörtern. Eine ganz markierte Zeile ist das Logo.
• Rechteckig, deckend, einfarbig. Kein Radius, Verlauf, Schatten, keine Neigung.
• Von der Oberkante der Umlautpunkte bis knapp unter die Grundlinie. In Barlow Condensed 0,08 em bis 1,04 em ab Oberkante der Schriftbox, nie als Polsterung.
• Auf Schwarz markiert der Marker, auf Weiß trägt er. Auf Papier ist das die einzige Verwendung von Gelb.

Die Space-Bildwelt

• Space ist Ästhetik, keine Aussage. Sie gehört keinem Programm.
• Auf dunklen Space-Flächen trägt Violett die Tiefe und Gelb den Akzent. Pink gehört auf helle Flächen.
• Die Rakete ist Hintergrund, nicht Motiv. Als Motiv verspricht sie einen Raketenstart, und die Zusammenarbeit beginnt mit einem Termin.
• 🚀 ist keine Ersatzrakete. Emojis: Abschnitt 08.

Fotografie

Das stärkste Bild ist Emma Woelk in einer echten Situation: Bühne, Kamera, Bildschirm, Gespräch. Dann Kunden, die etwas gebaut haben.

• Menschen vor Metaphern. Kein Wachstum als Balkendiagramm mit Pfeil.
• Screenshots sind das zweitstärkste Asset. Ein echtes Dashboard schlägt jede Abbildung.
• Vor dem Screenshot aufräumen. Keine Kundennamen, E-Mail-Adressen, Umsätze Dritter. Deckend abdecken, nie weichzeichnen.
• Text auf Foto bekommt ein Panel oder einen Verlauf von rgba(0,0,0,.92) nach transparent.
• Haupt- und Angebotsseiten zeigen Emma im Hero, Text links auf dem dunklen Teil. Auf dem Telefon ohne Foto. Space bleibt für Bänder und Seiten ohne Porträt.
• Ein Video steht nie allein. Violetter Rahmen, Text daneben.

• Keine Stockfotos mit Handschlag, Headset oder Teambesprechung.
• Keine Partikelfelder, leuchtenden Kugeln oder Netzwerkgrafiken. Ausnahmen: die pulsierenden Punkte im Spotlight (Element 63) und die Schlagwort-Wolke (13). Das Sternenfeld ist Grund (Abschnitt 07).
• Keine Verläufe von Violett nach Blau.

KI-generierte Bilder

• KI-Bilder von Emma werden immer gekennzeichnet. Jedes KI-erzeugte oder KI-veränderte fotorealistische Bild von Emma trägt das EU-Icon (Social, Abschnitt 20), auch der digitale Zwilling, weil Artikel 50 der KI-Verordnung die realistische Darstellung einer echten Person erfasst.
• Keine synthetische Person als Kunde oder Referenz. Keine KI-Gesichter von Kunden, auch nicht gekennzeichnet.
• Kein KI-Bild, wo ein echtes existiert.
• Assistenz wird nicht gekennzeichnet: umgeschriebener Entwurf, Farbkorrektur, Freisteller, Untertitel.

Persönliche Note und Kundenlogos

Im Web schreibt Emma von Hand dazu: eine Notiz mit Pfeil auf den wichtigsten Knopf (Element 18) oder ein Übergangssatz zwischen Kapiteln (11), nach den Regeln aus Abschnitt 04.

• Kundenlogos nur mit schriftlicher Freigabe. Eine gute Zusammenarbeit ist keine Nutzungserlaubnis.
• Einfarbig weiß auf Schwarz, auf gleiche optische Größe, nicht gleiche Breite.
• Keine Kundenlogos neben dem gelben Marker.

Icons

2066 Icons aus Lucide 1.41.0, ISC, unverändert: 24×24, fill:none, stroke-width:2, runde Enden. 217 sind kuratiert. Ein Klick kopiert das SVG. Index: /icons/index.json.

Icons werden geladen …

Dazu passt nichts.

/* das Icon nimmt die Farbe seines Kontexts */
.icon{ width:20px; height:20px; stroke-width:2; }

/* Standard auf Schwarz */
.icon         { color:#FFF700; }
/* im Fließtext, wo Gelb zu laut wäre */
.icon--ruhig  { color:#FFFFFF; }
/* im gelben Button ist das Icon schwarz */
.btn .icon    { color:#000000; }

/* der Mask-Weg: externe Datei, die trotzdem ihre Farbe nimmt */
.icon--datei{ width:20px; height:20px; background-color:currentColor;
              -webkit-mask:url("/icons/target.svg") center/contain no-repeat;
                      mask:url("/icons/target.svg") center/contain no-repeat; }

• Eine Größe pro Fläche. 20 px neben Fließtext, 24 px in Kartenüberschriften, 16 px in dichten Tabellen.
• stroke-width bleibt auf 2.
• Ein Icon beschriftet, es schmückt nicht.
• Dekorative Icons bekommen aria-hidden="true", bedeutungstragende ein Label.

• Keine gefüllten oder zweifarbigen Icons.
• Keine zweite Icon-Bibliothek.
• Keine Emoji als Icons. Jedes System zeichnet sie anders.
• Kein gelbes Icon auf hellem Grund.

Das Bildarchiv

Jedes Bild, das auf emmawoelk.com liegt, liegt auch hier: 632 Dateien, 20,0 MB, WebP. Maschinenlesbar mit Gruppe und Bytegröße: /web/bilder/index.json.

• Gepflegt wird auf der Website, hier liegt ein Abzug. node bau-bilder.js spiegelt den Bestand und schreibt den Index. Nichts wird hier von Hand hineinkopiert.
• Kein Stockfoto. Was im Archiv liegt, ist echtes Material oder folgt den Regeln oben.
• Ein Kundenlogo, ein Zitat und ein Kundenfoto brauchen die Freigabe des Kunden. Für den Bestand liegt sie vor; für alles Neue vor der Veröffentlichung einholen.
• Bilder werden nie hochskaliert. Reicht die Auflösung nicht, wird das Bild nicht benutzt.

Die Stapelfolge

• Das Porträt im Hero liegt über den Sternen. .hero .hero__bild und .hero::after auf Ebene 1, .hero > .huelle auf 2. Porträts nie auf einem Band.
• Zwischen body und den Bildern kein eigener Stapelkontext: kein z-index auf dem Inhaltscontainer, kein transform, filter, opacity unter 1, isolation, will-change. Sonst sind die negativen Ebenen gefangen.

Das Sternenfeld

Im Web erzeugt, nicht geladen: <sternen-feld>, ohne Abhängigkeiten, 27 KB (gzip 9,9 KB), fest über die ganze Seite. Kein Partikelfeld im Sinne von Abschnitt 06, sondern dieselbe Schicht wie bgstars.webp.

<!-- einmal je Seite -->
<script src="/effects/sternenfeld.js" defer></script>

<!-- als Grund der ganzen Seite, direkt nach <body> -->
<sternen-feld></sternen-feld>

<style>
  sternen-feld{ position:fixed; inset:0; z-index:0; pointer-events:none }
  /* Bilder unter die Sterne, Lesbares darüber */
  .band::after { content:""; position:absolute; inset:0; z-index:-2; background-image:var(--band) }
  .band::before{ content:""; position:absolute; inset:0; z-index:-1 }   /* Ausblenden nach Schwarz */
  .band>*      { position:relative; z-index:1 }
  /* .inhalt bekommt KEINEN z-index, kein transform, filter, opacity,
     isolation oder will-change — siehe „Die Falle“ */
</style>

<!-- auf Seiten, auf denen das Feld über die ganze Länge läuft -->
<sternen-feld staerke="2.1"></sternen-feld>

• Das Funkeln ist ein Aufblitzen, kein Pulsieren. Sinus hoch drei, Takt 7 bis 17 Sekunden. Auffälliger heißt größerer Hub, nicht schnellerer Takt.
• Das Feld als Ganzes wird nicht heller.
• Sternschnuppen laufen wie bgmeteors: links oben nach rechts unten, 16 bis 34 Grad flach, im Mittel alle 15 Sekunden.
• Bei prefers-reduced-motion steht alles still. Das Feld bleibt.
• Ohne Browser gilt das Bild: Canva, Decks, Druck, Social nehmen bgstars.webp.
• Das Kopfbild scrollt weg. Nur das Sternenfeld bleibt fest.

Warum weißer Text ohne Panel funktioniert

Gemessen wird nur, was heller ist als Luminanz 10, also das Bild.

• 99,9 % der Fläche bleiben unter Luminanz 100.
• Das hellste Zehntel ist zu mindestens 30 % farbig. Gemessen dort, wo das Auge hinsieht.
• Blau liegt mindestens 13 Punkte über Grün, und Rot nicht darunter. Ausgenommen bgstars, von der Farbigkeit zusätzlich die beiden Heros.

node messe-hintergrund.js content/backgrounds/*.png prüft alle drei.

Die Formate

Ein Band nie in 16:9 zwingen: aus Sternen werden Striche.

Die Themenwelt

Neunzehn Bänder, eine Grundschicht, zwei Heros, zusammengehalten von den Messregeln, nicht vom Motiv. Gewählt wird danach, wo der Text steht.

Alle zweiundzwanzig

WebP, zusammen 634 KB. Als PNG wären es 8,0 MB. Index mit Maßen, PSNR und Helligkeitswerten: /backgrounds/index.json.

22 von 22

GrundschichtSternenfeldbgstars.webpDie Konstante. Feine weiße Punkte auf reinem Schwarz, sonst nichts. Liegt unter allem anderen und ist der einzige Hintergrund ohne Violett.1126 × 319 · 4 KB · 99.3 % schwarz

Beispieltext

Band · flächigNebelbgnebula.webpViolette Nebelwolke, eines der lautesten Bänder. Nur dort, wo darüber wenig Text steht.1126 × 319 · 56 KB · 0.2 % schwarz

Beispieltext

Band · flächigNebelbogenbguniverse1.webpEin flacher violetter Bogen am unteren Rand, darüber Sterne. Das ruhigste der Bänder.1126 × 319 · 8 KB · 39.1 % schwarz

Beispieltext

Band · flächigNebelfeldbgnebula2.webpViolette Schwaden mit Sternen dazwischen, unregelmäßiger als der Nebel. Zweite Wahl, wenn Nebel zu laut ist.1126 × 319 · 5 KB · 35.2 % schwarz

Beispieltext

Band · flächigStaubbahnenbgdust.webpSternfeld mit violetten Staubbahnen quer hindurch. Das dichteste Band — darüber nur kurze Zeilen.1126 × 319 · 150 KB · 5.9 % schwarz

Beispieltext

Band · flächigSternentstehungbgstarbirth.webpFlächiges violettes Gas über die volle Breite, ohne Motiv. Trägt Text überall gleich gut — das Arbeitspferd im Satz.1126 × 319 · 5 KB · 33.7 % schwarz

Beispieltext

Band · mit HorizontMilchstraßebguniverse2.webpMilchstraße über einem Horizont mit Silhouetten. Das erzählerischste Band, deshalb sparsam.1126 × 319 · 12 KB · 19.7 % schwarz

Beispieltext

Band · mit HorizontMond vor Planetbgmoon.webpEin Mond im Vordergrund vor der Sichel eines größeren Planeten. Der Mond sitzt links, die freie Fläche liegt rechts oben.1126 × 319 · 6 KB · 53.9 % schwarz

Beispieltext

Band · mit HorizontPlanetenrandbgplanet.webpDie Kante eines dunklen Planeten mit einem dünnen Atmosphärensaum. Das ruhigste der erzeugten Bänder.1126 × 319 · 4 KB · 50.8 % schwarz

Beispieltext

Band · mit HorizontPolarlichtbgaurora.webpViolette Vorhänge über einem Planetenrand. Das Licht steht oben, der untere Rand ist frei.1126 × 319 · 5 KB · 11.9 % schwarz

Beispieltext

Band · mit HorizontRingplanetbgringplanet.webpEin Planet mit Ring, angeschnitten. Der hellste Bogen läuft diagonal durch das Bild, deshalb keine lange Zeile darüber.1126 × 319 · 4 KB · 72.6 % schwarz

Beispieltext

Band · mit HorizontZwei Mondebgmoons.webpZwei Monde über einem Planetenrand im violetten Dunst. Das gedämpfteste der neuen Bänder, gut unter viel Text.1126 × 319 · 3 KB · 38 % schwarz

Beispieltext

Band · mit RichtungAsteroidenbgasteroids.webpGesteinsfeld, das in ein Sternenfeld läuft. Licht von links, deshalb Text nach rechts setzen.1126 × 319 · 84 KB · 25.6 % schwarz

Beispieltext

Band · mit RichtungDunkelnebelbgdarknebula.webpEine schwarze Staubbahn schräg durch violetten Dunst. Die Diagonale hat eine Richtung — nicht spiegeln.1126 × 319 · 4 KB · 31.7 % schwarz

Beispieltext

Band · mit RichtungMeteorebgmeteors.webpSchräge Leuchtspuren auf Schwarz. Die Diagonale gibt dem Band eine Richtung — nicht spiegeln.1126 × 319 · 43 KB · 0 % schwarz

Beispieltext

Band · mit RichtungStaubsäulenbgpillars.webpDunkle Säulen vor leuchtendem Gas. Die Silhouetten stehen links — Text nach rechts.1126 × 319 · 5 KB · 54.7 % schwarz

Beispieltext

Band · mit MotivGalaxienkantebggalaxy2.webpEine Galaxie von der Kante, ein schmaler heller Strich im violetten Dunst. Sehr ruhig, trägt Text über die volle Breite.1126 × 319 · 90 KB · 0.1 % schwarz

Beispieltext

Band · mit MotivSpiralgalaxiebggalaxy1.webpEine Spiralgalaxie von vorn, mittig, alles andere schwarz. Das symmetrischste Band — Text gehört darüber oder darunter, nicht daneben.1126 × 319 · 59 KB · 46.9 % schwarz

Beispieltext

Band · mit MotivTriebwerkbgrocket1.webpUnterseite einer Rakete in violetten Wolken. Trägt am meisten Bedeutung, also nicht neben ein Hero-Bild.1126 × 319 · 11 KB · 52.1 % schwarz

Beispieltext

Band · mit MotivWolkendeckebgclouds.webpWolkenbank von oben, violett hinterleuchtet. Verwandt mit dem Triebwerk-Band, also nicht daneben.1126 × 319 · 4 KB · 52.8 % schwarz

HeroHero Startseitehero-home.webpDie Rakete mit dem großen Emma-Wasserzeichen dahinter. 16:9, für den ersten Bildschirm.1920 × 1080 · 42 KB · 29.8 % schwarz

HeroHero Unterseitehero-pages.webpDieselbe Rakete angeschnitten und gedreht, flacher. Für alles außer der Startseite.1920 × 754 · 30 KB · 27.1 % schwarz

Dazu passt nichts.

Regeln

• Ein Motiv pro Fläche. Ein Band oder ein Hero, nie beides, nie zwei Bänder übereinander.
• Jede Seite trägt oben genau ein Bild, das nach unten in Schwarz ausläuft: ein Band oder das Porträt im Hero (Element 01). Nie zwei Seiten mit demselben Kopfbild.
• Jedes Band läuft in Schwarz aus: seitlich ab etwa 18 %, nach unten ab etwa 55 %.
• Text steht auf der dunklen Seite. Bei bgasteroids kommt das Licht von links, der Text sitzt rechts.
• Weiß für den Satz, Gelb als Fläche.
• Verwandte Bänder nicht nebeneinander: bgclouds und bgrocket1.

• Kein Hintergrund unter Tabelle, Formular oder Screenshot. Dort Schwarz oder #191919.
• Nicht aufhellen. Dann ist es das falsche Band.
• Nicht spiegeln.
• Kein zweiter Bildraum. Keine abstrakten Verläufe, kein Bokeh, keine Netzwerkgrafiken.

Wenn ein neuer Hintergrund gebraucht wird

• Beschreib die Struktur, nicht die Dunkelheit. Motiv deutlich sichtbar, Zielton als RGB: 40 22 55.
• Messen, nicht ansehen: node messe-hintergrund.js.
• Auf Zielwert ziehen: 99,9. Perzentil bei etwa 90. Ab etwa 60 % Bildfläche ein Gamma über 1.
• Blau nach Violett: colorchannelmixer=rr=1.30:gg=0.88:bb=0.95.
• Farbigkeit nachziehen: node lila-nachziehen.js <name>, lässt bgstars und die Heros aus.
• Zu bunt ist auch falsch. 80 bis 130 Punkte Blauabstand: mit dem eigenen Grauwert zurückmischen.
• Auf 3,53 : 1 beschneiden, aus der Mitte, dann 1126 × 319.
• Komprimieren: verlustfrei, wenn kleiner als q85, sonst q85 bis q99, bis PSNR 40 dB.
• Nur content/backgrounds/ wird gepflegt. Dann node build-backgrounds.js und node bau-galerie.js.

Ton

Direkt · Mutig · Machend · Praxisnah · Energetisch.

• Praktikerin, keine Anbieterin. Schreib wie jemand, der die Arbeit gemacht hat.
• Klartext darüber, was dir gehört und was nicht. Der Gegner ist der Zustand, nicht der Lieferant: Dinge, die dir nicht gehören, die du nicht selbst ändern kannst, die ohne dich stillstehen.
• Benenn das Ding. „HubSpot, Semrush, Zapier“, nicht „ein moderner Marketing-Stack“.
• Beschreib den Tag des Lesers körperlich. „Drei Browserfenster und ein Kopiervorgang“, nicht „Reibungsverlust“.
• Zweite Person, Präsens, aktiv. „Du schreibst die Nachfassmail selbst.“
• Sag die Grenze laut. „Die Umsetzung kostet dich pro Woche zwei Stunden.“
• Kurz, dann lang. Variier die Satzlänge mit Absicht.
• Die Headline ist ein Satz, mit Punkt oder als Frage. Auch in Versalien.

Stilmuster

• Du, durchgehend. Siehe Anrede.
• Frage-Überschriften. Mindestens jede zweite Hauptsektion beginnt mit einer Frage, auf die der Leser Ja sagt: „Wem gehört dein Marketing eigentlich?“
• Bullets mit fettem Vorspann. Schlagwort, Gedankenstrich, ein erklärender Satz.
• Dreier-Rhythmus. Drei Probleme, drei Gründe, drei Bullets. Nie zwei, selten fünf.
• Ergebnis-Abschlusssatz. Jeder Block endet mit dem Ergebnis: „Jetzt weißt du, wo du einsteigst.“
• CTAs in der Ich-Form des Kunden. „Ich buche meine Stunde.“
• Saloppe Wendungen, zwei bis drei pro Seite. „Butter bei die Fische“.
• Kurze Absätze, Fettungen im Satz. Ein bis drei Sätze.
• Negativ-Abgrenzung. Eine Sektion sortiert aus: „Das ist nichts für dich, wenn du …“
• Emojis nur 🚀 und 💜. Höchstens eines pro Abschnitt, nie im Fließtext.
• Kein Kicker über der Überschrift (Abschnitt 10).

Tonalität, gemessen

Vier Seiten von emmawoelk.com, 338 Sätze.

Mittel und Median liegen nur 0,4 Wörter auseinander: ein eingeebneter Rhythmus, das verlässlichste Merkmal generierter Prosa.

Anrede

Deutsch, durchgehend du, in jedem Asset.

• Niemals im Funnel wechseln. „Du“ in der Anzeige und „Sie“ im Angebot liest sich, als sei niemand zuständig.
• Englisch: you, britische Schreibung. Spanisch: tú.
• Auch in Formularen und Fehlermeldungen. „Bitte gib deine E-Mail-Adresse ein.“
• „Ich“, wo die Person gemeint ist. „Wir“ nur für ein konkretes Team.

Muster, die raus sind

• Agenturen als Gegner. Keine Sätze gegen Dienstleister.
• Statistiken ohne Quelle (Abschnitt 05).
• Verknappung beim Inner Circle.
• „Wir“, wo „ich“ gemeint ist.
• Drei Adjektive in jedem Satz. „effizient, modern und unabhängig“, 18-mal auf vier Seiten. Drei Bullets sind Struktur, das ist ein Tick.
• „X statt Y“ als Satzmotor. Einmal pro Seite ist eine Entscheidung. Viermal ist ein Verrat.
• Der Gedankenstrich als Taktgeber. Heute in 26 % aller Sätze. Höchstens einer pro 150 Wörter Fließtext, der Strich im Bullet zählt nicht.
• Gleichlange Sätze. Mittel und Median eines Absatzes unter zwei Wörtern auseinander: umschreiben.
• Fragen als Dauerton. 31 Fragesätze auf vier Seiten. Frage-Überschriften ja, nicht jeder Absatz.
• Ausrufezeichen als Verstärker. Im Fließtext eines pro Seite.

Wörter

FernUSG-Wortliste

Ein Begriff aus „Raus“ blockiert die Veröffentlichung.

Website-Header und Hero

• Headline in Weiß, ein gelber Button, kein Eyebrow, kein Kicker.
• Ein Button pro Hero. Der zweite Weg ist ein Textlink.
• Kein Marker im Hero, wenn der Button gelb ist.
• Vorspann unter 55 Zeichen Zeilenmaß und unter drei Zeilen.

E-Mail-Signatur

Signatur · PapierRichtig

Liebe Grüße,

Emma Woelk

Marketing & Sales

emma@emmawoelk.com · +34 722 84 03 84
emmawoelk.com

Termin buchen

Emma Woelk — Marketing & Sales
ein Unternehmen der roboconsulting SL
Carrer de Lluís el Piadós 7, 08003 Barcelona · USt-IdNr. ESB70935457

• Die Reihenfolge steht fest: Grußformel, dann Porträt links neben Name, Firmierung, Kontakt und Termin, darunter eine Linie, darunter Logo und Pflichtangaben in drei Zeilen. Was ein Mensch zuerst liest, steht oben.
• logo-claim-light-400.png, 96 px breit, in der Fußzeile neben den Pflichtangaben. Die Firmierung gehört wegen dieser Angaben hierher — und das PNG, weil Outlook kein SVG zeigt.
• Ein Porträt, rund, 72 px, Gesicht mittig. Ein echtes Foto, nie ein KI-Bild und nie ein zweites daneben. Neben dem Logo, nicht darüber.
• Der Avatar ist ein eigener Anschnitt, kein skaliertes Porträt. web/bilder/signatur/emma-woelk-avatar-288.webp, quadratisch auf Kopf und Schultern, 288 px für scharfe Darstellung auf Retina. Ein halbes Ganzkörperbild im Kreis zeigt bei 72 px kein Gesicht mehr. Neu schneiden: node bau-avatar.js.
• Jede Angabe steht auch als Text. Viele Programme laden Bilder erst auf Klick — eine Signatur, die dann leer ist, ist keine.
• Genau ein Handlungsweg: „Termin buchen“ auf emmawoelk.com/meet/emma, auf schwarzer Fläche mit weißer Schrift, 21 : 1. Kein zweiter Link daneben — zwei Wege sind keiner.
• Die Fläche ist eine Tabellenzelle mit bgcolor, kein Bild und kein Inline-Hintergrund. Outlook rechnet mit der Word-Engine und verschluckt Hintergründe an Inline-Elementen; der gelbe Marker der Website lässt sich in einer Mail deshalb gar nicht bauen.
• Kein Gelb in der Signatur — auch nicht als Marker. Auf hellem Grund wäre Gelb ohnehin nur Fläche, und eine gelbe Fläche neben dem Logo streitet mit der Wortmarke.
• Kein Bildbanner, kein Zitat, keine Social-Icon-Reihe, kein „Denk an die Umwelt“.

Folie

TitelfolieRichtig

Was dir gehört
und was nicht

InhaltsfolieRichtig

B2B-Potenzialanalyse

Ich sehe mir Funnel, Website und CRM an und sage dir, welche drei Hebel in deinem Fall zuerst greifen.

• Das Monogramm sitzt in der Ecke, 20–24 px hoch, in der Grundversion der Folie.
• Programm-Lockups nur auf Folien im Kontext ihres Programms.
• Zwei Schriftgrößen pro Folie.
• Ein Marker pro Deck, nicht pro Folie.

Anzeige und Key Visual

Statement, 4:5 · SchwarzRichtig

Sieben Tools,
ein Marketer,
und niemand,
der nachfasst.

emmawoelk.com

Formate, Carousel-Typen und Videoframes: Social-Teil.

Dokument auf Papier

• Kopf: logo-claim-light, 150 px breit, links oben. Kein zweites Logo, kein Balken.
• Text: Inter 400, 10,5 pt, Zeilenabstand 1,5, Tinte #000000. Überschriften Barlow 900 in Versalien.
• Der gelbe Marker darf einmal pro Dokument vorkommen, beim Preis, Termin oder der Zusage.
• Fußzeile: Firmierung, Anschrift, USt-IdNr.
• Keine farbige Fläche über eine ganze Druckseite.

Bevor du veröffentlichst

• Lies es laut. Was du im Termin nie sagen würdest, fliegt raus.
• Zähl die Gedankenstriche. Mehr als einer pro 150 Wörter: streichen.
• Miss einen Absatz. Mittel und Median unter zwei Wörtern auseinander: einen Satz kürzer, einen länger.
• Such das konkrete Detail. Keine Zahl, kein Toolname, keine echte Situation: nicht fertig.
• Prüf jede Zahl auf ihren Besitzer.
• Gegen die FernUSG-Wortliste geprüft? (Abschnitt 08)
• Steht „ich“ statt „wir“, wo kein konkretes Team gemeint ist?
• Programm-Balken richtig? KI-Werkstatt gelb, Inner Circle violett, Schrift schwarz, nie auf der Website.

Die Signatur zum Einsetzen

Tabellen statt Rastern, feste Stilangaben statt Klassen, Inter mit Arial als Rückfall: so und nicht anders überlebt eine Signatur den Weg durch Outlook, Gmail und Apple Mail. Bilder liegen absolut auf emmawoelk.com — eine Datei, die lokal liegt, verschwindet beim Empfänger.

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;font-family:Inter,Arial,sans-serif;font-size:13.5px;color:#000000;line-height:1.55">
  <tr>
    <td style="padding-right:16px;vertical-align:top">
      <img src="https://emmawoelk.com/bilder/signatur/emma-woelk-avatar-288.jpg" width="72" height="72" alt="Emma Woelk" style="border-radius:50%;display:block">
    </td>
    <td style="vertical-align:top">
      <div style="font-weight:700;font-size:16px">Emma Woelk</div>
      <div style="color:rgba(0,0,0,.6);padding-bottom:10px">Marketing &amp; Sales</div>
      <div><a href="mailto:emma@emmawoelk.com" style="color:#000000;text-decoration:none">emma@emmawoelk.com</a> · <a href="tel:+34722840384" style="color:#000000;text-decoration:none">+34 722 84 03 84</a></div>
      <div style="padding-bottom:12px"><a href="https://emmawoelk.com" style="color:#000000;text-decoration:none">emmawoelk.com</a></div>
      <table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse">
        <tr><td bgcolor="#000000" style="background-color:#000000;padding:5px 12px">
          <a href="https://emmawoelk.com/meet/emma" style="color:#FFFFFF;font-weight:700;font-size:13px;text-decoration:none">Termin buchen</a>
        </td></tr>
      </table>
    </td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;width:100%;margin-top:16px;border-top:1px solid rgba(0,0,0,.14)">
  <tr>
    <td style="padding-top:12px;padding-right:14px;vertical-align:middle;width:110px">
      <img src="https://emmawoelk.com/logos/logo-claim-light-400.png" width="96" alt="Emma Woelk — Marketing &amp; Sales" style="display:block">
    </td>
    <td style="padding-top:12px;vertical-align:middle;font-family:Inter,Arial,sans-serif;font-size:11.5px;line-height:1.5;color:rgba(0,0,0,.5)">
      Emma Woelk — Marketing &amp; Sales<br>
      ein Unternehmen der roboconsulting SL<br>
      Carrer de Lluís el Piadós 7, 08003 Barcelona · USt-IdNr. ESB70935457
    </td>
  </tr>
</table>

• Die beiden Bilder müssen auf der Website liegen, nicht als Anhang. Ein eingebettetes Bild wird zum Anhang-Symbol an jeder Mail.
• Zwei Knöpfe, zwei Wege. HTML kopieren legt den Quelltext auf die Zwischenablage — für jedes Feld mit Quelltextansicht. Für Gmail kopieren legt dieselbe Signatur als formatierten Inhalt ab, weil Gmails Signaturfeld nur ein Textfeld ist und Quelltext dort als Quelltext stehen bliebe.
• Kein SVG und kein WebP in der Mail. Outlook unter Windows zeigt beides nicht an. Deshalb logo-claim-light-400.png für das Logo und emma-woelk-avatar-288.jpg für das Porträt — 21 KB, und ein Foto ist als JPEG ohnehin richtig aufgehoben. Auf der Seite hier läuft die WebP-Fassung.
• Beide Dateien liegen auf emmawoelk.com, nicht hier: /bilder/signatur/emma-woelk-avatar-288.jpg und /logos/logo-claim-light-400.png. Sie sind im Website-Projekt abgelegt und gehen mit dem nächsten Deploy der Website live.
• Keine Media Queries, keine Klassen, keine externen Stile. Was nicht im style-Attribut steht, wird unterwegs entfernt.
• Die Grautöne entstehen aus Deckkraft, wie überall in diesem System. Outlook rechnet keine Deckkraft: dort wird die Firmierung schwarz statt grau und die Trennlinie fällt weg. Beides ist ein Verlust an Feinheit, kein Fehler — ein eigener Grauwert wäre eine zehnte Farbe.

Regeln für jedes Element

• Keine Eyebrows. Nirgends, auch nicht als Kicker. Die Nummernmarke der Bibliothek ist Katalog.
• Höchstens ein Marker pro Ansicht (Abschnitt 06).
• Ein Knopf im Hero. Daneben höchstens ein Play-Link.
• Kein Band unter Tabellen und Formularen.
• Keine Programm-Lockups auf der Website (Abschnitt 02).
• Texte nur aus den Inhaltsdateien. Keine erfundenen Tatsachen.
• Kundenzitate, -fotos und -logos nur mit Freigabe, auch Standbilder aus Kundenvideos.
• Keine KI-Gesichter von Kunden.
• „Häufigkeit“ ist eine Obergrenze pro Seite. „Nicht zusammen mit …“ schließt aus.

Nur im Web: Glas

Glas, Lichtband, leuchtende Knöpfe und Bewegung gehen nie in Print, Deck, Anzeige oder Social.

Karten, Tabellen, Preis-, Stimmen-, Termin-, Etappen- und Formularkarten stehen auf --glas oder --glas-leicht statt #191919, mit --glas-rand oder --rand-lila, oben --glas-kante, teils backdrop-filter:blur(14px). Werte in Abschnitt 11.

Das Lichtband

Ein Lichtpunkt läuft in vier Sekunden im Uhrzeigersinn um den Rahmen einer Karte.

• Dauerhaft nur an fünf Stellen: CTA-Karte (69), hervorgehobener Weg (54), Kontaktkarte (72), empfohlene Preiskarte (46), Formular (75). Sonst nur bei Hover und Fokus.
• Die Farbe folgt der Karte. Standard Lila #A594FF. Gelb bei Karten mit Symbol links (22), Link-Karten (26), Angebots-Karussell (55). Pink, Magenta zu 85 % mit Weiß, bei den Stimmen-Karten (37, 38). Der Kern in der eigenen Farbe.
• Das Formular leuchtet leiser. Rahmen 1,5 px im Verlauf Lila nach Pink, Lichtpunkt bei 60 % und 9 Sekunden, Schein im 4-Sekunden-Takt.
• Die Grundregel steht in :where(), damit die Ausnahmen greifen.

Technik: @property --lb-winkel, @keyframes lb-dreh, conic-gradient auf ::after, per Maske als 2-px-Rahmen. Auf ::before derselbe Punkt 9 px breit mit blur(4px), außer bei nummerierten und Link-Karten.

Die Knöpfe

Im Web leuchtet jeder Knopf auf und ab wie eine Glühbirne, innen treiben drei Blasen wie in einer Lavalampe. Code in Abschnitt 11.

• Gelb ist der Hauptweg. Pro Kapitel ist ein gelber Knopf der wichtigste, im Hero der einzige.
• Lila nur in lila Karten. .knopf--lila, Violett mit weißer Schrift, in CTA-Karte (69) und hervorgehobenem Weg (54).
• Rand ist die zweite Wahl. .knopf--rand in der nicht hervorgehobenen Karte oder neben einem gelben Knopf.
• Der Textlink bleibt der Standard-Nebenweg.
• Grün nur in der Sicherheitsbox (53), Schwarz mit gelber Schrift nur in der gelben CTA-Box (71).
• Pfeil und klein für Karten und Preise. Der Pfeil wird beim Hover länger.
• Mehrere Knöpfe untereinander laufen versetzt.

• Kein Knopf in Magenta.
• Lava nie in Weiß oder einer fremden Farbe. --lava-1 ein Hauch heller, --lava-2 ein Hauch dunkler als die Fläche.
• Kein Glanzband von links nach rechts, kein stiller Lichtfleck.
• Keine zwei Varianten gleichrangig nebeneinander.

Bewegung

Die Skripte liegen unter /effects/ und laden nur, wenn die Seite das Merkmal trägt.

• Bei prefers-reduced-motion steht alles still. Lichtpunkt, Wabern, Lava, Laufbänder, Auto-Lauf, Hochzählen, Parallaxe, Sternenfeld. Die Elemente bleiben vollständig sichtbar.
• Animationen nicht per Augenschein im Vorschaufenster abnehmen. Dort liefert requestAnimationFrame keine Bilder.

Die Tokens

/* Emma Woelk — Marketing & Sales · Marken-Tokens v2.0 */
:root{
  /* Marke — damit wird geführt */
  --gelb:#FFF700;        /* Signalgelb. Schrift auf Schwarz, Fläche auf Weiß. */
  --schwarz:#000000;     /* Grund für Web, Social, Video */
  --weiss:#FFFFFF;       /* Fließtext auf Schwarz, Papier für Print */
  --tinte:#000000;       /* Text auf Papier. Wie die Buchstaben im Logo. */
  --flaeche:#191919;     /* Karten und Panels auf Schwarz */

  /* Sekundär — Fläche, Schatten, Verlauf. Nie ein zweiter Akzent. */
  --magenta:#DF579D; --violett:#8075D9;
  --verlauf:linear-gradient(180deg,#8075D9,#DF579D);

  /* Abgeleitet und Status */
  --ocker:#5C5100;       /* Gelb als Schriftfarbe auf Papier */
  --erfolg:#35C88A; --fehler:#FF5A5F;   /* nur Oberfläche */

  /* Schrift — zwei Familien, drei Rollen */
  --ruf:"Barlow Condensed",Impact,sans-serif;   /* H1, H2, CTA, Menü — VERSAL */
  --stark:"Barlow",Helvetica,sans-serif;        /* H3, Zitat — VERSAL bzw. gemischt */
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;   /* alles ab H4 — gemischt */

  /* Sperrung wächst nach unten, nicht nach oben */
  --sp-h1:.005em; --sp-h2:.01em; --sp-h3:.02em;
  --sp-text:0; --sp-button:.025em;

  /* Button */
  --btn-radius:50px; --btn-padding:20px 40px; --btn-border:2px;

  /* ── Nur Web (v2.0) ── nicht in Print, Deck, Anzeige, Social ── */
  --verlauf-quer:linear-gradient(90deg,#8075D9,#DF579D);   /* nur große Aussage und große Zahlen */
  --karte-grund:#100d1a;                                   /* dunkler Violett-Schwarz-Grund */
  --linie:rgba(255,255,255,.09);
  --text-leise:rgba(255,255,255,.76);
  --violett-hell:#B7AEF0;                                  /* Handschrift, Hover-Lila, Ränder */
  --lila-text:#C9BFFF;
  --rand-lila:rgba(157,140,255,.36);

  /* Glas statt Fläche */
  --glas:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),rgba(18,15,30,.52);
  --glas-leicht:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(18,15,30,.30);
  --glas-rand:rgba(255,255,255,.1);
  --glas-kante:inset 0 1px 0 rgba(255,255,255,.08);
  --glas-schatten:0 24px 60px rgba(0,0,0,.35);

  /* Lichtband */
  --lb-lila:#A594FF;
  --lb-pink:color-mix(in srgb,var(--magenta) 85%,#fff);
  --lb-gelb:#FFF700;

  /* Zahlen und Handschrift */
  --zahl-schrift:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;   /* Inter 300 */
  --hand:"Caveat","Segoe Script","Bradley Hand",cursive;                          /* nur .hand */
}

Der Button

Gelbe Fläche, schwarze Schrift, Versalien, voller Radius. Hover ändert den Schein, nicht die Farbe. Varianten: Abschnitt 10.

.knopf{
  display:inline-block;
  font-family:var(--text); font-weight:700; font-size:16px; line-height:1.25;
  letter-spacing:var(--sp-button); text-transform:uppercase; text-decoration:none;
  background:var(--gelb); color:var(--schwarz);
  padding:var(--btn-padding);
  border:var(--btn-border) solid transparent; border-radius:var(--btn-radius);
  cursor:pointer;
}
.knopf:focus-visible{ outline:2px solid var(--weiss); outline-offset:3px; }

/* Zweitrangig: Textlink, der Standard-Nebenweg */
.knopf-sek{
  display:inline-block;
  color:var(--weiss); text-decoration:underline; text-underline-offset:4px;
  text-transform:uppercase; font-weight:700; font-size:16px;
  letter-spacing:var(--sp-button);
}

/* Schein und Glanz */
.knopf{
  background-image:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.7) 50%,transparent 68%);
  background-size:260% 100%; background-repeat:no-repeat; background-position:130% 0;
  box-shadow:0 0 0 1px rgba(255,247,0,.22),0 4px 14px rgba(255,247,0,.16);
  transition:box-shadow .35s,background-position .8s cubic-bezier(.2,.7,.2,1);
}
.knopf:hover{ background-position:-30% 0;
  box-shadow:0 0 0 1px rgba(255,247,0,.38),0 5px 18px rgba(255,247,0,.22),0 0 36px rgba(255,247,0,.08); }

/* Varianten */
.knopf--rand{ background:transparent; color:var(--weiss); border-color:rgba(255,255,255,.7);
  background-image:none; box-shadow:none; }
.knopf--rand:hover{ border-color:var(--gelb); color:var(--gelb); box-shadow:0 0 14px rgba(255,247,0,.13); }
.knopf--lila{ background-color:var(--violett); color:var(--weiss);
  background-image:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.38) 50%,transparent 68%);
  box-shadow:0 0 0 1px rgba(183,174,240,.4),0 4px 16px rgba(128,117,217,.3); }
.knopf--lila:hover{
  box-shadow:0 0 0 1px rgba(200,190,255,.55),0 5px 20px rgba(128,117,217,.36),0 0 40px rgba(128,117,217,.12); }
.knopf--klein{ padding:11px 22px; font-size:13px; }
.knopf--pfeil{ display:inline-flex; align-items:center; gap:10px; }
.knopf--pfeil .sym{ width:22px; overflow:visible; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.knopf--pfeil .sym path:first-child{ transform-box:fill-box; transform-origin:right center; transform:scaleX(1);
  transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.knopf--pfeil:hover .sym{ transform:translateX(7px); }
.knopf--pfeil:hover .sym path:first-child{ transform:scaleX(1.7); }

/* Außen eine Glühbirne: zwei Schein-Lagen, über filter statt box-shadow,
   damit die Hover-Schatten unberührt bleiben */
@keyframes knopf-wabern{
  0%,100%{ filter:drop-shadow(0 0 5px var(--wabern)) drop-shadow(0 0 8px transparent); }
  50%{ filter:drop-shadow(0 0 13px var(--wabern)) drop-shadow(0 0 34px var(--wabern)); }
}
/* Innen eine Lavalampe: drei Blasen mit eigener Bahn, 9, 11 und 13 s */
@property --l1x{ syntax:"<percentage>"; inherits:false; initial-value:18%; }
@property --l1y{ syntax:"<percentage>"; inherits:false; initial-value:30%; }
@property --l2x{ syntax:"<percentage>"; inherits:false; initial-value:82%; }
@property --l2y{ syntax:"<percentage>"; inherits:false; initial-value:70%; }
@property --l3x{ syntax:"<percentage>"; inherits:false; initial-value:50%; }
@property --l3y{ syntax:"<percentage>"; inherits:false; initial-value:110%; }
@keyframes lava-1{
  0%,100%{ --l1x:18%; --l1y:30%; }
  25%{ --l1x:40%; --l1y:88%; }
  50%{ --l1x:68%; --l1y:45%; }
  75%{ --l1x:34%; --l1y:8%; }
}
@keyframes lava-2{
  0%,100%{ --l2x:82%; --l2y:70%; }
  33%{ --l2x:56%; --l2y:12%; }
  66%{ --l2x:24%; --l2y:82%; }
}
@keyframes lava-3{
  0%,100%{ --l3x:50%; --l3y:115%; }
  50%{ --l3x:62%; --l3y:-15%; }
}
/* Farben immer in der Knopffarbe: --lava-1 ein Hauch heller, --lava-2 ein Hauch dunkler */
.knopf{ --wabern:rgba(255,247,0,.42); --lava-1:rgba(255,252,170,.42); --lava-2:rgba(222,212,0,.34);
  position:relative; isolation:isolate; overflow:hidden; animation:knopf-wabern 4s ease-in-out infinite; }
.knopf::before{ content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none; filter:blur(4px);
  background:
    radial-gradient(34% 95% at var(--l1x) var(--l1y),var(--lava-1),transparent 70%),
    radial-gradient(30% 85% at var(--l2x) var(--l2y),var(--lava-2),transparent 70%),
    radial-gradient(24% 75% at var(--l3x) var(--l3y),var(--lava-1),transparent 70%);
  animation:lava-1 9s ease-in-out infinite,lava-2 11s ease-in-out infinite,lava-3 13s ease-in-out infinite; }
.knopf--lila{ --wabern:rgba(128,117,217,.58); --lava-1:rgba(160,150,238,.44); --lava-2:rgba(104,94,196,.4); }
.knopf--rand{ --wabern:rgba(255,255,255,.24); --lava-1:rgba(255,255,255,.05); --lava-2:rgba(0,0,0,.24); }
.abschnitt--gelb .knopf{ --wabern:rgba(0,0,0,.32); --lava-1:rgba(62,62,62,.5); --lava-2:rgba(26,26,26,.5); }
/* Mehrere Knöpfe untereinander nicht im Gleichschritt */
.knopfreihe>.knopf:nth-child(2)::before,.knopf-stapel>.knopf:nth-child(2)::before{ animation-delay:-3s,-5s,-7s; }
.knopf-stapel>.knopf:nth-child(3)::before{ animation-delay:-6s,-2s,-10s; }

/* Bei prefers-reduced-motion stehen Wabern und Lava still —
   die Regel steht im Stylesheet der Website, web/website.css. */

Der Scrollbalken

Jede Fläche dieser Marke setzt ihn, sonst zeichnet der Browser ihn grau.

/* Zwei Syntaxen, weil beide gebraucht werden. scrollbar-color deckt Firefox
   und Chrome ab 121 ab, ::-webkit-scrollbar den Rest. Wo eine Engine
   scrollbar-color versteht, ignoriert sie die WebKit-Regeln. Beide Wege
   führen zum selben Gelb, und scrollbar-color vererbt sich — es gilt also
   in jedem verschachtelten Scrollbereich ohne weiteres Zutun. */
html{ scrollbar-color:#FFF700 #191919; }

::-webkit-scrollbar       { width:13px; height:13px; }
::-webkit-scrollbar-track { background:#191919; }
::-webkit-scrollbar-thumb { background:#FFF700; border-radius:99px;
                            border:3px solid #191919; }
::-webkit-scrollbar-corner{ background:#191919; }

Gelb gegen #191919: 15,5 : 1, verlangt sind 3 : 1. Ein Hover-Zustand entfällt, Gelb hat keine hellere Stufe. Gilt auch in Icon-Raster (06) und Galerie (07), dort schmaler.

Schrift einbinden

Die woff2-Dateien nach /fonts/, Regeln aus fonts.css. Im HubSpot-Theme ersetzen sie /_hcms/googlefonts/, --primary-font und --secondary-font zeigen auf die lokalen Familien, die Sperrungen aus Abschnitt 04 kommen auf die Überschriften. Das Theme setzt --h1-transform:uppercase: Headlines nie in Versalien tippen.

Die Handschrift gilt nur mit ihrer Regel:

@font-face{ font-family:"Caveat"; font-style:normal; font-weight:400; font-display:swap;
            src:url(/fonts/caveat-400.woff2) format("woff2"); }
.hand{ font-family:var(--hand); font-weight:400; color:#B7AEF0; font-size:40px; line-height:1.1;
       display:inline-block; transform:rotate(-7deg); transform-origin:left center; margin:44px 0 0 6px; }
.hero--person .hand,.kopf-mitte .hand{ transform:rotate(-3.5deg); }