Interne Übersicht
Baukasten
Alle wichtigen Bausteine der Website auf einer Seite. Über jedem steht, wie er heißt, wofür er gedacht ist und woher seine Inhalte kommen. Diese Seite steht nicht im Menü und nicht im Suchergebnis.
Baustein 01
Kopfbereich mit Motiv
Der Einstieg einer Case-Seite. Text auf schwarzer Fläche, Motiv daneben — nicht darüber: Weiß auf Schwarz trägt bei jedem Bild, Schrift über einem Foto ist eine Wette je Motiv.
Titel, Kunde und Slogan kommen aus dem Case; das Motiv ist sein Kopfbild.
AMIRA-Welt · #unique
Ein Titel, der die Fläche trägt
Der Slogan steht darunter und fasst den Case in einem Satz.
Baustein 02
Kopfbereich ohne Motiv
Dieselbe Stelle, wenn kein Bild vorliegt. Die Schrift wird zur Fläche und rückt in die Mitte — kein halbes Band, keine graue Lücke.
Wird von selbst gewählt, sobald am Case kein Kopfbild hängt.
Engelhard Arzneimittel · #PR-Kampagnen
Wenn kein Bild da ist, trägt die Schrift
Baustein 03
Textabschnitt
Nummer und Titel links, Text rechts, darunter links bewusst leer. Diese Asymmetrie ist der Unterschied zur Textspalte, in der vorher alles untereinander stand.
Aus den Feldern eines Case: „Die Herausforderung“, „Unsere Strategie“.
01
Der Titel steht groß, der Text daneben
Der erste Absatz ist etwas größer gesetzt, damit der Blick einen Anfang findet. Er trägt die Kernaussage des Abschnitts.
Die folgenden Absätze stehen in gewöhnlicher Größe. Die Lesebreite ist auf 38 rem begrenzt — darüber wird jede Zeile mühsam, weil das Auge den Anfang der nächsten sucht.
Baustein 04
Textabschnitt auf Schwarz
Derselbe Baustein, andere Fläche. Der Wechsel gibt der Seite einen Takt. Er wird gerechnet, nicht gesetzt: Ein Abschnitt wird nur schwarz, wenn der vorige es nicht war.
Dieselben Felder — nur die Fläche entscheidet die Vorlage.
02
Auf Schwarz trägt Weiß
Weiß auf #111111 ergibt 18,88 : 1. Das ist der höchste Kontrast, den dieser Auftritt hat, und er gilt bei jeder Beleuchtung.
Die Nummer und die Ziffern der Schrittfolge stehen hier in der Akzentfarbe: Orange auf Schwarz sind 6,4 : 1. Auf hellem Grund wäre derselbe Ton 2,76 : 1 und damit unbrauchbar.
Baustein 05
Schrittfolge
Aus einer Aufzählung wird eine Folge. Die Ziffern erzeugt CSS, im Dokument steht eine gewöhnliche Liste — sortierbar im Editor, und Vorlesesoftware zählt ohnehin selbst.
Aus dem Feld „Umsetzung“ eines Case, wenn es Aufzählungspunkte enthält.
03
Die Umsetzung
- Der erste Schritt trägt die Nummer 01, ohne dass sie im Text steht
- Jeder Schritt bekommt eine Linie darüber und Luft darunter
- Die Zählung läuft weiter, auch wenn jemand einen Schritt einfügt
- Lange Schritte brechen um und bleiben an der Ziffer ausgerichtet
Baustein 06
Aussagen
Jeder Beleg steht für sich, größer gesetzt, mit einem orangen Strich davor. Vorher war das eine Aufzählung in Fließtextgröße — das Unauffälligste auf der Seite, obwohl es der Beweis ist.
Aus dem Feld „Wirkung“ eines Case.
04
Die Wirkung
- Vier Folgen an einem Produktionstag vor Live-Publikum realisiert
- Öffentliche Resonanz beschreibt das Format als modern und fachlich fundiert
- Vor Abschluss der ersten Staffel besteht bereits eine Warteliste
Baustein 07
Kennzahlenband, dunkel
Zahlen sind das Ergebnis, also bekommen sie ein eigenes Band. Die Aufteilung richtet sich nach der Anzahl: zwei bis drei sehr groß, vier bis fünf in einer Reihe, sechs in zwei Reihen zu dritt.
Aus dem Feld „kpis“ eines Case — zwei bis sechs Werte.
30 Min.
Sendelänge je Folge
4
Folgen der ersten Staffel
1
Produktionstag
live + on demand
Ausspielung
Baustein 08
Kennzahlenband, hell
Dieselben Zahlen auf heller Fläche — dann in Schwarz. Diese Fassung greift, wenn direkt davor schon etwas Dunkles steht.
Wird von der Vorlage gewählt, nicht eingestellt.
25 Jahre
Healthcare-PR-Expertise
10
Yupiks
Baustein 09
Bildstrecke
Kein gleichmäßiges Raster, sondern ein Mosaik nach Anzahl: ein Bild über die volle Breite, zwei nebeneinander, vier verwoben, fünf mit führendem Motiv. Ohne Überschrift — Bilder brauchen keine.
Aus dem Feld „bilder“ eines Case. Motive ohne geklärte Rechte bleiben weg.
Baustein 10
Kacheln
Für Aufzählungen gleichrangiger Dinge: Leistungen, Partner, Formate. Weißer Kasten mit Haarlinie, kein Schatten — der Styleguide verlangt scharfe Kanten.
Aus „services.ts“ beziehungsweise „netzwerk.ts“.
Yupik PR
Umsetzbare PR-Konzepte für gute Medienresonanz
Mehr erfahren
Yupik Social
Nicht einfach nur Instagram, sondern ganzheitliche Beratung
Mehr erfahren
Yupik Events
Nur was man emotional verankert, bleibt im Kopf
Mehr erfahren
Baustein 11
Hakenliste
Für Leistungsumfänge und Inhalte eines Workshops. Der Haken ist eine CSS-Maske, kein Zeichen im Text — er taucht in keinem Vorlesetext auf.
Aus den Leistungs- und Workshopdaten.
- Ein Punkt, der zum Angebot gehört
- Ein zweiter, etwas längerer Punkt, der über zwei Zeilen läuft und am Haken ausgerichtet bleibt
- Ein dritter Punkt
Baustein 12
Zitat
Eine Aussage von außen, groß gesetzt. Die Nennung steht daneben, nicht darin — der Zitatblock kennt kein Quellenfeld, und ein von Hand eingesetztes `cite` macht ihn im Editor ungültig.
Aus dem Feld „stimmen“ eines Case. Zurzeit liegt keine Kundenstimme vor (D-08).
Ein Satz, der etwas behauptet, das wir selbst nicht sagen könnten.
Vorname Nachname, Funktion
Baustein 13
Blättern
Vorheriger und nächster Case. Fehlt ein Nachbar, bleibt die Seite dort leer — statt einen Verweis zu zeigen, der ins Nichts führt.
Aus der Reihenfolge der Cases; steht in der Vorlage, nicht im Inhalt.
Vorheriger Case
PRophy – der Award für starke Gesundheitskommunikation
Nächster Case
Zoetis – Herpesimpfung beim Pferd
Baustein 14
Abschlussband, dunkel
Die Anschlusshandlung am Fuß einer Seite: Aussage links, Knopf rechts. Steht unter jedem Case gleich — so verlangt es das Briefing.
Aus „CASE_CTA“ in content.ts. Einmal gepflegt, überall eingesetzt.
Hier könnte Ihr nächster Case stehen.
Sie bringen die Herausforderung – wir liefern die Idee, die Strategie und die Umsetzung.
Baustein 15
Abschlussband, hell und zentriert
Die zweite Fassung: alles mittig, Knopf darunter, auf #F6F6F6. Für Anliegen, die keine zweite Spalte brauchen — die Stellenanzeige auf „Über uns“ ist so gebaut.
Aus „KARRIERE“ in content.ts.
Wir suchen Dich!
Ein Absatz, der die Sache erklärt. Die Lesebreite ist auf 46 rem begrenzt, weil zentrierter Text über die volle Breite mühsam wird.
Baustein 16
Knöpfe
Vier Ausprägungen. Schwarz ist die Grundform. Orange trägt weiße Schrift — auf Kundenanweisung, mit 2,76 : 1 unter der AA-Schwelle (D-24). Der Rahmenknopf ist der Zweitknopf, der helle steht auf dunklen Flächen.
Die Beschriftungen kommen aus den Daten, der Stil aus der Blockeinstellung.
Baustein 17
Kacheln mit Icon
Dieselbe Kachel, mit einem Motiv über der Überschrift. Das Icon steht in einem Rahmen, nicht auf einer Fläche: Es kündigt die Kachel an, es trägt sie nicht.
Das Icon kommt aus der Bibliothek unten; die Größe aus einer Zahl, weil die Maske 1 em breit ist.
TV-Qualität
Professionell produziert, mit Bühne, Licht und Ton.
Echtes Wissen
Fachlich geprüft, nicht nur unterhaltsam.
Für das Team
Zugeschnitten auf die, die damit arbeiten.
Baustein 18
Knöpfe mit Icon
Das Motiv steht vor oder hinter der Beschriftung. Es übernimmt die Schriftfarbe des Knopfes — ein orangefarbenes Icon auf einem orangen Knopf wäre unsichtbar.
Klasse `yupik-icon–<name>` am Knopf, dazu `yupik-icon` (davor) oder `yupik-icon-nach` (dahinter).
Baustein 19
Gegenüberstellung
Zwei Spalten: „so ist es sonst“ und „so ist es hier“. Links ein Strich, rechts ein Haken in der Akzentfarbe — ohne diesen Unterschied wären es zwei Listen nebeneinander, und man müsste die Überschriften vergleichen, um den Widerspruch zu bemerken.
Beide Listen kommen aus den Daten. Der Haken ist eine Maske, kein Zeichen im Text.
Wie es sonst läuft
- Einmalige Aktionen ohne Nachhaltigkeit
- Oberflächliche Produktpräsentation
- Hoher Aufwand, wenig Reichweite
Wie wir es machen
- Dauerhaft verfügbar statt einmalig
- Fachlich geprüft und redaktionell aufbereitet
- Messbare Reichweite in der Zielgruppe
Baustein 20
Häufige Fragen
Ein Akkordeon aus `<details>`, ohne JavaScript. Aufklappen ist Browserverhalten: Tastatur, Vorlesesoftware und die Suchfunktion der Seite finden auch den zugeklappten Text. Aus dem Plus wird beim Öffnen ein Minus — durch Drehung, nicht durch ein zweites Motiv.
Die Fragen kommen vom Kunden. Für die Auffindbarkeit gehört ein FAQPage-JSON-LD dazu (siehe offene Punkte).
Was kostet ein Workshop?
Die Antwort steht hier. Sie ist zugeklappt, bis jemand fragt.
Wie lange dauert eine Zusammenarbeit?
Die Antwort steht hier. Sie ist zugeklappt, bis jemand fragt.
Arbeiten Sie auch außerhalb von Köln?
Die Antwort steht hier. Sie ist zugeklappt, bis jemand fragt.
Baustein 21
Zitat über einem Motiv
Das Zitat liegt auf dem Bild, mit einer deckenden schwarzen Ebene dazwischen. Die ist keine Gestaltung, sondern Rechnung: Selbst über einem rein weißen Motiv bleibt die Fläche bei #545454, und Weiß darauf sind 7,57 : 1.
Zitat und Nennung aus dem Feld „stimmen“, das Motiv aus den Bildern des Case.
Ein Satz von außen wiegt schwerer als drei von uns. Deshalb steht er groß und allein.
Vorname Nachname, Funktion
Baustein 22
Anschlusshandlung mit Bildgrund
Eine Frage, ein Knopf, ein Gesicht — auf einem abgedunkelten Motiv. Der Text steht rechtsbündig und läuft auf das Porträt zu; linksbündig zeigte er von ihm weg. Auf schmalen Bildschirmen stehen beide untereinander, dort fällt die Ausrichtung weg.
Wortlaut aus dem Bestand (yupik.de/workshops/), Name und Rolle aus team.ts, das Motiv aus dem Bestand.
Sie haben Fragen zu unseren Workshops?
Schreiben Sie uns gerne an und ich melde mich umgehend bei Ihnen.
Angela Steere
Geschäftsführende Inhaberin
Baustein 23
Anschlusshandlung mit Bildgrund, ohne Gesicht
Dieselbe Fläche, wenn keine Ansprechpartnerin genannt wird: alles mittig, Knopf darunter. Die abgedunkelte Ebene ist dieselbe — sie ist gerechnet, nicht je Motiv eingestellt.
Für Anliegen ohne feste Zuständigkeit.
Reden wir über Ihr Vorhaben.
Ein Satz, der sagt, was als Nächstes passiert. Darunter genau eine Handlung — zwei nebeneinander sind eine Frage, keine Aufforderung.
Baustein 24
Kennzahlen als Liste
Die zweite Fassung: untereinander statt nebeneinander. Sie trägt, wo die Werte verschieden lang sind — „43.000+“ neben „0 €“ wirkt im Band ungleich gefüllt, untereinander stehen beide auf derselben Kante.
Dieselben Daten wie beim Band. Welche Fassung passt, entscheidet die Länge der Werte.
43.000+
verifizierte Mitglieder in der Community
3
Schwerpunktthemen je Folge
8+
Partner bereits an Bord
0 €
für Apothekenteams
Baustein 25
Die Icon-Bibliothek
Alle 44 Icons, nach Zweck geordnet. Jedes ist eine CSS-Maske in der Schriftfarbe — es gibt keine Icon-Schrift und keine Bibliothek zur Laufzeit. Ausgeliefert werden je Seite nur die, die dort vorkommen; diese Seite lädt als einzige alle.
Aus `src/lib/icons.ts`, Pfade von Lucide (ISC). Wer eines braucht, trägt es dort ein.
Richtung und Navigation
Kontakt
Medien und Produktion
PR, Beratung, Wirkung
Zustand und Hinweis
Inhalt und Werkzeug
Baustein 26
Schriftgrößen
Acht Stufen, alle als Kurve über die Fensterbreite. „Mega“ und „Kennzahl“ kamen am 07.09.2026 dazu — vorher war „Display“ mit 72 px die größte, und eine Kennzahl in Überschriftengröße liest sich wie eine Zwischenzeile.
Aus „global.css“; „theme.json“ wird daraus erzeugt.
Mega — Kopfzeilen und Zahlen, die als Fläche wirken
Display — die Überschrift einer Seite
Überschrift 1
Überschrift 2
Überschrift 3
Kennzahl
Fließtext, groß — der Einstieg eines Abschnitts
Fließtext in der Grundgröße, Extra Light 200.
Kicker — Versalien, weit gesperrt