Palette, Schrift, Bausteine und echte Anwendungen. Ein Design, das sich anfühlt wie eine Einladung.
Fühlt sich an, als würdest du bei einer Gastgeberin klingeln, die schon Kaffee gemacht hat: freundlich, unkompliziert, vertrauenswürdig.
Einstieg bis Mitte. Wirkt nahbar, nie billig.
| Format | Beispiel |
|---|---|
| Headline | Komm an. Bleib ein bisschen. |
| Button | Platz sichern |
| Betreff | Wir haben noch zwei Zimmer mit Seeblick |
| Post | 12 Frauen, 3 Tage, 1 See. Und ganz viel Zeit zum Reden. |
willkommen · gemeinsam · entspannt · Platz sichern · echt
exklusiv · Elite · Hacks · sofort · limitiert!!!
Jedes Angebot sieht aus wie ein Inserat: großes warmes Foto mit Herz, darunter Titel, Bewertung mit Stern, Datum und Preis. Dazu der Verlaufs-Button in Koralle bis Magenta. Alles wirkt wie eine Einladung.
Fast alles ist weiß oder hellgrau. Die Farbe kommt aus den Fotos und dem Verlaufs-Button. Nur der Schluss-Aufruf bekommt die volle Verlaufsfläche.
| AaHeadline auf Weiß | 15,9 : 1 · AAA |
| AaFließtext auf Weiß | 10,5 : 1 · AAA |
| AaNebentext auf Nebelgrau | 5,0 : 1 · AA |
| AaButton-Text auf Himbeere | 4,6 : 1 · AA |
| AaAkzenttext auf Weiß | 4,6 : 1 · AA |
| AaWeiß auf Koralle (nur groß) | 3,5 : 1 · nur große Schrift |
AA heißt: gut lesbar für Fließtext. Alles unter 4,5 : 1 nur für große Headlines oder Deko verwenden.
Reihenfolge der Farben: #E31C5F, #F2784B, #B83280, #00A699, #767676. Himbeere für die wichtigste Reihe. Türkis nur als Gegenfarbe in Diagrammen, nie für Buttons.
Jedes Angebot sieht aus wie ein Inserat: großes warmes Foto mit Herz, darunter Titel, Bewertung mit Stern, Datum und Preis. Dazu der Verlaufs-Button in Koralle bis Magenta. Alles wirkt wie eine Einladung.
Headlines dürfen persönlich sein („Komm an“). Lange Wörter in zwei Wörter auflösen, damit die runde Schrift nicht zu breit wird.
Hauptbutton mit Verlauf und leicht runden Ecken (10 px). Zweitbutton mit dunklem Rahmen. Textlinks in Himbeere.
Freitag: Abendessen und Kennenlernen.
Tag 1Samstag: Workshops und Spaziergang.
Tag 2Sonntag: Pläne und Abschied.
Tag 3Drei Monate Gruppe danach.
Danach„Ich bin als Fremde angereist und mit elf Freundinnen nach Hause gefahren.“
„Alles war liebevoll vorbereitet. Ich musste mich um nichts kümmern.“
pro Person, geteiltes Zimmer
pro Person, eigenes Zimmer
plus drei Monate Gruppe
0 von 4 erledigt
| Online-Netzwerk | Ankommen | |
|---|---|---|
| Kontakt | Kacheln auf dem Bildschirm | am selben Tisch |
| Zeit | eine Stunde | drei Tage |
| Danach | schnell vergessen | private Gruppe |
Ein warmes Foto ist der Hauptdarsteller, dazu eine kurze persönliche Headline. Die Bewertung mit Stern dient als Beweis. Stories auf der Verlaufsfläche mit Umfrage zum Mitmachen.
Weiße Folie mit weichem Schatten, Headline mit himbeerfarbenem Wort, drei Kacheln wie kleine Inserate. Viel Rundung, keine harten Kanten.
Hier steht alles, was du für das Wochenende brauchst. Die meisten Dinge hast du schon. Den Rest besorgen wir.
Bring etwas mit, das du gern zeigst: ein Produkt, eine Idee, ein Foto aus deinem Alltag.
Schreib eine Frage auf, die dich gerade in deinem Business beschäftigt. Wir nehmen sie mit in den Workshop.
Weißes Blatt, freundliche Headline, Tipp-Box in Rosé-Hauch, Kennzahlen in Kacheln mit dünnem Rahmen. Druckt hell und sauber.
Hallo Anna,
letzte Woche saßen wir zum ersten Mal mit allen Teilnehmerinnen im Video-Call. Zehn Frauen, zehn Geschichten, und nach zwanzig Minuten haben alle durcheinander gelacht.
Zwei Zimmer mit Seeblick sind noch frei. Wenn du schon länger überlegst: Bis 30 Tage vorher kannst du kostenlos stornieren. Du gehst also kein Risiko ein.
Und wenn du Fragen hast, antworte einfach auf diese Mail. Ich lese alles selbst.
Herzlich,
Jay
PS: Der Zug ab München braucht nur 45 Minuten.
Persönlich wie ein Brief: Anrede, drei kurze Absätze, ein Button mit Verlauf, Gruß mit Vornamen. Betreff mit einem konkreten Detail.
Hier findest du Ablauf, Anreise und Packliste. Tippe oben auf „Material“ oder „Schritte“.
Zug bis Herrsching, Abholung inklusive.
Einzel- oder Doppelzimmer mit Seeblick.
Regional, vegetarisch auf Wunsch.
Private Gruppe ab der Buchung.
Kopf auf der Verlaufsfläche, darunter Tabs in Nebelgrau, Inhalte als weiße Karten mit Rahmen. Schritte als Kreise in Himbeere.
Drei Tage am Ammersee mit zwölf Selbstständigen, die verstehen, wovon du redest.
ab 590 € pro Person · kostenlos stornierbar bis 30 Tage vorherDas Netzwerk-Wochenende für Selbstständige am Ammersee.
Freitag: Abendessen und Kennenlernen.
Samstag: Workshops und Spaziergang.
Sonntag: Pläne und Abschied.
Drei Monate Gruppe danach.
„Ich bin als Fremde angereist und mit elf Freundinnen nach Hause gefahren.“
pro Person, geteiltes Zimmer
pro Person, eigenes Zimmer
plus drei Monate Gruppe
Sichere dir deinen Platz. Stornieren geht bis 30 Tage vorher kostenlos.
Weißer Hero mit Bewertungs-Badge, Schmerz auf Nebelgrau, großes warmes Foto im Intro, Ablauf als Karten, Stimmen mit fünf Sternen, Preise als drei Inserat-Karten, Schluss auf der Verlaufsfläche.
Als Skill hochladen oder in einem Projekt unter „Projektwissen“ ablegen. Alternativ den Text an den Anfang eines Chats kopieren.
In einem Projekt oder eigenen GPT als Datei hochladen oder in die Anweisungen kopieren.
Ein Gem anlegen und den Text in die Anweisungen einfügen.
Die Datei in den Skill- oder Design-System-Ordner legen. Jede KI, die Text lesen kann, versteht sie.
---
name: gastgeberin-brand
description: Warmes, einladendes Design auf Weiß mit einem Verlauf von Koralle über Himbeere zu Magenta als Akzent, Plus Jakarta Sans, weichen Schatten und runden Karten wie Inserate (Foto, Titel, Sterne-Bewertung, Preis). Für Retreats, Events, Communitys und Dienstleistungen, die über Vertrauen und Nähe verkaufen. Trigger diesen Skill, wenn jemand sagt: "Gastgeberin", "Gastgeberin-Design", "im Gastgeberin-Stil", "wie Airbnb", "Airbnb-Look", "Gastgeberin-Design", "Airbnb-Stil", "einladendes Design", "warmes Event-Design", "Retreat-Design". Auch nutzen, wenn ein Angebot das Gefühl „Willkommen. Zu Hause. Sicher.“ auslösen soll.
---
# Gastgeberin · Brand-System
> Showcase mit allen Ansichten: https://8bd-3i1.pages.dev/gastgeberin-showcase.html
> Angelehnt an die Designsprache von Airbnb. Eigene Farben, Schriften und Namen: keine Logos, keine Markennamen und keine geschützten Elemente von Airbnb übernehmen.
## Kurzfassung (zuerst lesen)
- **Gefühl:** Willkommen. Zu Hause. Sicher. Fühlt sich an, als würdest du bei einer Gastgeberin klingeln, die schon Kaffee gemacht hat: freundlich, unkompliziert, vertrauenswürdig.
- **Farben:** Weiß #FFFFFF · Nebelgrau #F7F7F7 · Rosé-Hauch #FFF1F3 · Koralle #FF385C · Himbeere #E31C5F · Magenta #D70466
- **Schriften:** Plus Jakarta Sans (Headlines) · Plus Jakarta Sans (Fließtext) · Plus Jakarta Sans (Labels & Daten)
- **Formen:** Karten-Radius 20px, Button-Radius 10px, weiche Schatten 0 6px 20px rgba(0,0,0,.06), beim Darüberfahren 0 6px 16px rgba(0,0,0,.12)
- **Die 5 wichtigsten Regeln:**
1. Fotos machen die Wärme, Flächen bleiben weiß.
2. Der Verlauf nur auf dem wichtigsten Button.
3. Karten wie Inserate: Foto, Titel, Bewertung, Preis.
4. Weiche Schatten statt harter Kanten.
5. Persönlich und einladend schreiben, immer duzen.
---
## Wirkung & Einsatz
**So fühlt es sich an:** Willkommen. Zu Hause. Sicher.
Fühlt sich an, als würdest du bei einer Gastgeberin klingeln, die schon Kaffee gemacht hat: freundlich, unkompliziert, vertrauenswürdig.
**Nimm dieses Design, wenn:** Deine Kundin soll denken: Hier bin ich willkommen, und andere waren schon begeistert.
**Passt zu diesen Angeboten:**
- Retreats, Workshops und Events vor Ort
- Communitys und Mitgliedschaften
- Coaching und Dienstleistungen, die über Vertrauen verkaufen
**Branchen:** Coaching, Events, Reisen, Gastronomie, Ferienwohnungen, Kurse vor Ort
**Preisgefühl:** Einstieg bis Mitte. Wirkt nahbar, nie billig.
**Lieber nicht, wenn:**
- Du willst Exklusivität und Abstand ausstrahlen
- Du hast keine guten, warmen Fotos
- Dein Thema ist sehr sachliches B2B
---
## Tonalität
**Ton:** Herzlich, Einladend, Unkompliziert
- Duzen und persönlich ansprechen
- Konkrete Details nennen: Ort, Datum, Anzahl
- Bewertungen und Stimmen früh zeigen
- Sicherheit geben: Stornieren, Fragen, Ablauf
| Format | Beispiel |
|---|---|
| Headline | Komm an. Bleib ein bisschen. |
| Button | Platz sichern |
| Betreff | Wir haben noch zwei Zimmer mit Seeblick |
| Post | 12 Frauen, 3 Tage, 1 See. Und ganz viel Zeit zum Reden. |
- **Diese Wörter passen:** willkommen, gemeinsam, entspannt, Platz sichern, echt
- **Diese Wörter meiden:** exklusiv, Elite, Hacks, sofort, limitiert!!!
Allgemein für alle Texte: kurze, aktive Sätze. Verben statt Hauptwörter („du planst“ statt „die Planung“). Keine Gedankenstrich-Einschübe, keine „nicht X, sondern Y“-Formeln, keine Floskeln.
---
## Farben
| Name | Hex | Einsatz |
|---|---|---|
| Weiß | #FFFFFF | Hauptfläche |
| Nebelgrau | #F7F7F7 | zweite Fläche |
| Rosé-Hauch | #FFF1F3 | Tönung für Hinweise |
| Koralle | #FF385C | Herz, Icons, große Akzente |
| Himbeere | #E31C5F | Buttons, Textakzente |
| Magenta | #D70466 | Ende des Verlaufs |
| Anthrazit | #222222 | Headlines und Text |
| Graphit | #3F3F3F | Fließtext |
| Kieselgrau | #6A6A6A | Nebentext |
| Linie | #EBEBEB | Rahmen und Trenner |
### Farbregeln
- Der Verlauf von Koralle über Himbeere zu Magenta gehört nur auf den Hauptbutton und den Schluss-Aufruf.
- Koralle für Herz, Icons und große Akzente. Für kleinen Text Himbeere nehmen.
- Flächen fast immer Weiß oder Nebelgrau. Die Wärme kommt aus den Fotos.
- Türkis nur in Diagrammen als Gegenfarbe.
### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Weiß | #222222 auf #FFFFFF | 15,9 : 1 | Fließtext ok |
| Fließtext auf Weiß | #3F3F3F auf #FFFFFF | 10,5 : 1 | Fließtext ok |
| Nebentext auf Nebelgrau | #6A6A6A auf #F7F7F7 | 5,0 : 1 | Fließtext ok |
| Button-Text auf Himbeere | #FFFFFF auf #E31C5F | 4,6 : 1 | Fließtext ok |
| Akzenttext auf Weiß | #E31C5F auf #FFFFFF | 4,6 : 1 | Fließtext ok |
| Weiß auf Koralle (nur groß) | #FFFFFF auf #FF385C | 3,5 : 1 | nur große Schrift (ab 24 px) |
### Diagrammfarben (in dieser Reihenfolge)
1. #E31C5F
2. #F2784B
3. #B83280
4. #00A699
5. #767676
Himbeere für die wichtigste Reihe. Türkis nur als Gegenfarbe in Diagrammen, nie für Buttons.
---
## Typografie
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
```
| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Plus Jakarta Sans | 800 · 32–68 px · Laufweite −2 % · freundlich rund |
| Fließtext | Plus Jakarta Sans | 400 · 15–17 px · Zeilenhöhe 1,6 · Farbe Graphit |
| Labels & Daten | Plus Jakarta Sans | 600–700 · 12–15 px · normale Schreibweise |
### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | 64 / 1,1 / 800 | Das Netzwerk-Wochenende |
| H2 | 36 / 1,15 / 800 | Drei Tage am See |
| H3 | 22 / 1,25 / 700 | Was dich erwartet |
| Fließtext | 16 / 1,6 / 400 | Wir kochen zusammen und reden über Business. |
| Klein | 13 / 1,5 / 400 | Kostenlos stornierbar bis 30 Tage vorher. |
### Typografie-Regeln
- Eine Schriftfamilie für alles. Hierarchie entsteht über Stärke und Größe.
- Headlines in 800, nie in Großbuchstaben.
- Bewertungen und Zahlen fett, mit Stern davor.
- Duzen, warm und direkt.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. Headlines dürfen persönlich sein („Komm an“). Lange Wörter in zwei Wörter auflösen, damit die runde Schrift nicht zu breit wird.
---
## Abstände, Formen, Schatten
- **Raster:** 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px. Nur diese Werte für Abstände verwenden.
- **Container:** Text max. 760 px breit (rund 65 Zeichen pro Zeile), breite Layouts max. 1100 px.
- **Abschnitts-Abstand:** Desktop 96 px oben und unten, Handy 56 px. Seitenrand mindestens 16 px.
- **Radius:** Karten 20px · Kacheln 14px · Buttons 10px · Eingabefelder 10px · Bilder 14px
- **Schatten:** weiche Schatten 0 6px 20px rgba(0,0,0,.06), beim Darüberfahren 0 6px 16px rgba(0,0,0,.12)
- **Raster-Abstand zwischen Karten:** 16px
---
## Layout
**Abschnitts-Rhythmus einer Salespage:**
1. Hero: Hintergrund #FFFFFF
2. Schmerz: zweite Fläche #F7F7F7
3. Vorteile: Hintergrund #FFFFFF
4. Intro: Tönung #FFF1F3
5. Ablauf: Hintergrund #FFFFFF
6. Stimmen: zweite Fläche #F7F7F7
7. Preise: Hintergrund #FFFFFF
8. Ort: Tönung #FFF1F3
9. FAQ: zweite Fläche #F7F7F7
10. CTA: Akzentfläche linear-gradient(90deg,#E61E4D 0%,#E31C5F 50%,#D70466 100%)
Fast alles ist weiß oder hellgrau. Die Farbe kommt aus den Fotos und dem Verlaufs-Button. Nur der Schluss-Aufruf bekommt die volle Verlaufsfläche.
**Erkennungszeichen: Die Inserat-Karte.** Jedes Angebot sieht aus wie ein Inserat: großes warmes Foto mit Herz, darunter Titel, Bewertung mit Stern, Datum und Preis. Dazu der Verlaufs-Button in Koralle bis Magenta. Alles wirkt wie eine Einladung.
- Angebote als Karten wie Inserate: Foto oben, Text darunter.
- Karten mit weichem Schatten und dünnem Rahmen, nie mit harter Kante.
- Eine Such- oder Auswahl-Leiste als Pill ganz oben, wo es passt.
---
## Bausteine
### Buttons
```css
.btn { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 16px; font-weight: 600;
letter-spacing: 0; text-transform: none;
padding: 14px 24px; border-radius: 10px; transition: all .3s; }
.btn-primary { background: linear-gradient(90deg,#E61E4D 0%,#E31C5F 50%,#D70466 100%); color: #FFFFFF; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(227,28,95,.28); }
.btn-secondary { background: transparent; color: #222222; border: 1.5px solid #222222; }
```
Hauptbutton mit Verlauf und leicht runden Ecken (10 px). Zweitbutton mit dunklem Rahmen. Textlinks in Himbeere.
### Karten und Kacheln
```css
.card { background: #FFFFFF; border: none; border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding: 32px; }
.tile { background: #FFFFFF; border: 1px solid #EBEBEB; border-radius: 14px; padding: 22px; }
.tile:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
```
### Labels, Tags, Eingabefelder
```css
.label { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: 0; text-transform: none; color: #222222; }
.tag { background: #FFFFFF; color: #222222; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1px solid #B0B0B0; background: #FFFFFF; border-radius: 10px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #E31C5F; box-shadow: 0 0 0 3px rgba(34,34,34,.15); }
```
### Weitere Bausteine (alle im Showcase zu sehen)
- **Schmerzpunkte:** Liste mit feinen Trennlinien (#EBEBEB), links ein Kreis mit ✕ in #E31C5F. Beim Darüberfahren rückt die Zeile 6 px ein.
- **Vorher / nachher:** Kachel, oben das Vorher klein und durchgestrichen, darunter das Nachher kräftig.
- **Module:** Kachel mit großer Nummer in der Headline-Schrift (#E31C5F), Titel, kurzer Beschreibung und Tag. Nummern nur, wenn die Reihenfolge wirklich zählt.
- **Kundenstimmen:** Fünf Sterne, Zitat in Plus Jakarta Sans 17 px, darunter rundes Kürzel, Name und Beruf.
- **Preis-Pakete:** drei Kacheln nebeneinander, das empfohlene Paket mit 2 px Rahmen in #E31C5F und Tag „Gäste-Liebling“.
- **FAQ:** Zeilen mit Trennlinien, rechts ein Kreis mit +. Offen: Kreis gefüllt in #E31C5F, das + dreht sich zum ×.
- **Checkliste:** echte Checkboxen in #E31C5F, erledigte Punkte grau und durchgestrichen, darunter „2 von 4 erledigt“.
- **Hinweis-Box:** Fläche #FFF1F3, rundes i-Symbol in #E31C5F.
- **Formular (Freebie):** Vorname, E-Mail, Datenschutz-Checkbox (nicht vorausgewählt), Button. Fehlermeldungen sagen, was zu tun ist.
- **Tabelle:** Kopfzeile im Label-Stil, letzte Spalte in #E31C5F hervorgehoben.
---
## Formate
- **Social Media:** Ein warmes Foto ist der Hauptdarsteller, dazu eine kurze persönliche Headline. Die Bewertung mit Stern dient als Beweis. Stories auf der Verlaufsfläche mit Umfrage zum Mitmachen.
- **Folien (16:9):** Weiße Folie mit weichem Schatten, Headline mit himbeerfarbenem Wort, drei Kacheln wie kleine Inserate. Viel Rundung, keine harten Kanten.
- **Dokumente, Workbooks, PDF:** Weißes Blatt, freundliche Headline, Tipp-Box in Rosé-Hauch, Kennzahlen in Kacheln mit dünnem Rahmen. Druckt hell und sauber.
- **Newsletter:** Persönlich wie ein Brief: Anrede, drei kurze Absätze, ein Button mit Verlauf, Gruß mit Vornamen. Betreff mit einem konkreten Detail.
- **Artefakte und kleine Tools:** Kopf auf der Verlaufsfläche, darunter Tabs in Nebelgrau, Inhalte als weiße Karten mit Rahmen. Schritte als Kreise in Himbeere.
- **Salespage:** Weißer Hero mit Bewertungs-Badge, Schmerz auf Nebelgrau, großes warmes Foto im Intro, Ablauf als Karten, Stimmen mit fünf Sternen, Preise als drei Inserat-Karten, Schluss auf der Verlaufsfläche.
---
## Bildsprache
Warme, echte Fotos: Menschen beim Lachen, Essen, Reden. Orte mit Tageslicht, goldene Stunde, natürliche Farben, nichts Gestelltes. Immer so, dass man sich selbst dort sehen kann.
**Bild-Prompt-Stichworte:**
```
warm natural lifestyle photography, golden hour, real people laughing together,
cozy interiors, inviting places, soft sunlight, authentic moments,
welcoming hospitality, lakeside retreat
```
---
## Bewegung & Interaktion
- Karten heben sich beim Darüberfahren leicht an (2 px, weicher Schatten).
- Das Herz-Icon füllt sich beim Antippen.
- Bild-Karussells gleiten weich zur Seite.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #222222.
---
## Was dieses Design NICHT ist
- Keine kalten Farben als Flächen
- Keine Headlines in Großbuchstaben
- Keine harten Kanten ohne Rundung
- Keine Stockfotos mit gestellten Lächeln
- Kein Verlauf auf mehr als einem Button pro Ansicht
---
## CSS-Variablen (kopierfertig)
```css
:root {
--line-strong: #DDDDDD;
--on-accent2: rgba(255,255,255,.86);
--line-accent: rgba(255,255,255,.25);
--tile-accent: rgba(255,255,255,.16);
--line-dark: rgba(255,255,255,.14);
--tile-dark: #2F2F2F;
--tile-border-dark: none;
--tag-bg-dark: #FFFFFF;
--tag-ink-dark: #222222;
--card-border: none;
--tile-border: 1px solid #EBEBEB;
--shadow: 0 6px 20px rgba(0,0,0,.06);
--shadow-hover: 0 6px 16px rgba(0,0,0,.12);
--r-pill: 999px;
--r-icon: 50%;
--r-chip: 10px;
--r-bar: 999px;
--r-avatar: 50%;
--r-slide-tile: 10px;
--slide-gap: 1.2cqw;
--tab-w: 600;
--quote-size: 17px;
--tag-track: 0;
--wm-tf: none;
--focus-ring: rgba(34,34,34,.15);
--doc-border: none;
--strip-gap: 0px;
--bg: #FFFFFF;
--alt: #F7F7F7;
--soft: #FFF1F3;
--paper: #FFFFFF;
--card: #FFFFFF;
--tile: #FFFFFF;
--tile-on-bg: #FFFFFF;
--tile-on-soft: #FFFFFF;
--ink: #222222;
--ink2: #3F3F3F;
--ink3: #6A6A6A;
--line: #EBEBEB;
--accent: #E31C5F;
--accent-bg: linear-gradient(90deg,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--on-accent: #FFFFFF;
--sa-btn-ink: #D70466;
--accent-text: #E31C5F;
--label: #222222;
--dark: #222222;
--on-dark: #FFFFFF;
--on-dark2: #D6D6D6;
--label-dark: #FFFFFF;
--accent-text-dark: #FF8FA3;
--x-color: #E31C5F;
--tag-bg: #FFFFFF;
--tag-ink: #222222;
--focus: #222222;
--ticker-bg: #FFFFFF;
--dot: #FF385C;
--nav-bg: rgba(255,255,255,.92);
--tab-active: #222222;
--r-card: 20px;
--r-tile: 14px;
--r-btn: 10px;
--r-input: 10px;
--r-media: 14px;
--r-slide: 20px;
--r-doc: 16px;
--grid-gap: 16px;
--f-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--f-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--f-label: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--f-mono: ui-monospace, Menlo, Consolas, monospace;
--f-btn: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--f-quote: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--h-w: 800;
--h-track: -0.02em;
--h-lh: 1.12;
--h-tf: none;
--hero-size: clamp(38px,7vw,68px);
--l-size: 13px;
--l-w: 700;
--l-track: 0;
--l-tf: none;
--b-size: 16px;
--b-w: 600;
--b-track: 0;
--b-tf: none;
--b-pad: 14px 24px;
--btn-bg: linear-gradient(90deg,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--btn-ink: #FFFFFF;
--btn-shadow: 0 8px 20px rgba(227,28,95,.28);
--btn-sec-hover-ink: #FFFFFF;
--input-border: 1px solid #B0B0B0;
--input-bg: #FFFFFF;
--star: #222222;
--ph: linear-gradient(135deg,#FFD7C2 0%,#FFB4A2 45%,#E5989B 100%);
--ph-ink: #222222;
--ph-chip: rgba(255,255,255,.88);
--poll-bg: #FFFFFF;
--poll-ink: #222222;
--doc-shadow: 0 6px 24px rgba(0,0,0,.08);
--tile-hover: #FFFFFF;
--sa-ink: #FFFFFF;
--sa-ink2: rgba(255,255,255,.86);
--f-script: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--num-w: 800;
}
```
---
## Prüfliste vor der Abgabe
- [ ] Nur Farben aus der Palette oben verwendet
- [ ] Fließtext hat mindestens 4,5 : 1 Kontrast, kleinste Schrift 12 px
- [ ] Headlines in Plus Jakarta Sans, Fließtext in Plus Jakarta Sans
- [ ] Deutsche Headlines mit Silbentrennung, keine Wörter abgeschnitten
- [ ] Auf dem Handy (400 px) einspaltig, nichts scrollt seitlich
- [ ] Tastatur-Fokus sichtbar, Bewegungen abschaltbar
- [ ] Jede Angebotskarte hat Foto, Titel, Bewertung und Preis
- [ ] Verlauf nur auf dem Hauptbutton
- [ ] Stornierung oder Sicherheit wird irgendwo erwähnt
Eine Skill-Datei. Jede Ausgabe passt. Einmal festlegen, dann einfach beim Namen nennen: „Gastgeberin“.
Datei: gastgeberin-brand-SKILL.md