Apotheke.
Mit Sorgfalt gemacht.

Deine Kundin soll denken: Hier geht es um Qualität, nicht um Show. Hier bin ich gut aufgehoben.

• →Langsam schreiben: ganze Sätze, keine Schlagworte
• →Sinne ansprechen: Duft, Textur, Licht
• →Fachwissen leise zeigen, nie belehren
• →Kein Verkaufsdruck, keine Fristen

Pergament, Leinen und Büttenweiß wechseln sich leise ab. Tinte als dunkle Fläche nur zweimal: für das Ritual selbst und den Termin-Aufruf. Keine bunten Flächen.

AA heißt: gut lesbar für Fließtext. Alles unter 4,5 : 1 nur für große Headlines oder Deko verwenden.

Hauttypen in der Sprechstunde

Reihenfolge der Farben: #252119, #8A5A1E, #6E7556, #B5823A, #978B72. Erdige Töne in fester Reihenfolge. Diagramme ohne Gitter, nur mit einer feinen Grundlinie.

In Großbuchstaben-Labels lange Wörter vermeiden, mit Sperrung werden sie sehr breit. Serifen-Headlines vertragen lange Wörter besser. Silbentrennung trotzdem einschalten.

Rechteckige Buttons ohne Rundung in Tinte, Schrift in Großbuchstaben mit Sperrung. Zweitbutton mit 1 px Rahmen. Keine Schatten.

Erhalte den Herbst-Leitfaden für deine Haut.

0 von 4 erledigt

So nutzt du „Apotheke“ in deiner KI

1. 1Auf „Skill-Text kopieren“ tippen.
2. 2In deiner KI einfügen (siehe unten) oder als Datei apotheke-brand-SKILL.md speichern.
3. 3Danach reicht ein Satz wie: „Bau mir eine Salespage im Apotheke-Design.“

---
name: apotheke-brand
description: Ruhiges, edles Design in Pergament, Leinen und Tinte mit Tabak und Bernstein als leisen Akzenten. Cormorant Garamond mit kursivem Wort für Headlines, Hanken Grotesk für Text, Etiketten-Labels in Großbuchstaben. Keine Rundungen, keine Schatten, feine Haarlinien. Für hochwertige Beratung, Naturkosmetik, Wellness und Premium-Angebote. Trigger diesen Skill, wenn jemand sagt: "Apotheke", "Apotheke-Design", "im Apotheke-Stil", "wie Aesop", "Aesop-Look", "Apotheke-Design", "Aesop-Stil", "Apotheker-Look", "Quiet Luxury", "edles Naturkosmetik-Design". Auch nutzen, wenn ein Angebot das Gefühl „Ruhig. Edel. Wissend.“ auslösen soll.
---

# Apotheke · Brand-System

> Showcase mit allen Ansichten: https://8bd-3i1.pages.dev/apotheke-showcase.html

> Angelehnt an die Designsprache von Aesop. Eigene Farben, Schriften und Namen: keine Logos, keine Markennamen und keine geschützten Elemente von Aesop übernehmen.

## Kurzfassung (zuerst lesen)

- **Gefühl:** Ruhig. Edel. Wissend. Fühlt sich an wie eine alte Apotheke mit Holzregalen und Glasflaschen: Hier nimmt sich jemand Zeit, und jedes Detail hat einen Grund.
- **Farben:** Pergament #F2EEE6 · Leinen #EAE4D8 · Sand #E4DCCB · Büttenweiß #FBF9F4 · Tinte #252119 · Erde #4A443A
- **Schriften:** Cormorant Garamond (Headlines) · Hanken Grotesk (Fließtext) · Hanken Grotesk (Etiketten & Labels)
- **Formen:** Karten-Radius 0 (eckig), Button-Radius 0 (eckig), keine Schatten, nur feine Linien in #D5CCBA
- **Die 5 wichtigsten Regeln:**
  1. Keine Rundungen, keine Schatten.
  2. Serifen-Headline mit einem kursiven Wort.
  3. Labels in Großbuchstaben mit viel Sperrung.
  4. Feine Linien statt Kästen.
  5. Erdige, warme Töne, nie reines Weiß oder Schwarz.

---

## Wirkung & Einsatz

**So fühlt es sich an:** Ruhig. Edel. Wissend.
Fühlt sich an wie eine alte Apotheke mit Holzregalen und Glasflaschen: Hier nimmt sich jemand Zeit, und jedes Detail hat einen Grund.

**Nimm dieses Design, wenn:** Deine Kundin soll denken: Hier geht es um Qualität, nicht um Show. Hier bin ich gut aufgehoben.

**Passt zu diesen Angeboten:**
- Hochwertige 1:1-Beratung und Behandlungen
- Naturkosmetik, Pflege, Duft, Tee
- Premium-Angebote mit langer Entscheidungszeit

**Branchen:** Kosmetik, Naturheilkunde, Wellness, Interior, Buchhandlung, Feinkost

**Preisgefühl:** Hoch. Wirkt wertig und ruhig, nie laut oder rabattig.

**Lieber nicht, wenn:**
- Du willst Energie und Tempo vermitteln
- Deine Zielgruppe ist jung und trendig
- Du kommunizierst viele Rabatte und Aktionen

---

## Tonalität

**Ton:** Ruhig, Kundig, Poetisch

- Langsam schreiben: ganze Sätze, keine Schlagworte
- Sinne ansprechen: Duft, Textur, Licht
- Fachwissen leise zeigen, nie belehren
- Kein Verkaufsdruck, keine Fristen

| Format | Beispiel |
|---|---|
| Headline | Pflege ist ein Ritual. |
| Button | Termin anfragen |
| Betreff | Was deine Haut im Herbst braucht |
| Post | Zehn Minuten am Abend. Warmes Wasser, zwei Tropfen Öl, ein ruhiger Atemzug. |

- **Diese Wörter passen:** Ritual, behutsam, Zeit, Sorgfalt, Wirkstoff
- **Diese Wörter meiden:** Hammer, Must-have, jetzt zuschlagen, Glow-Bombe, Sale

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 |
|---|---|---|
| Pergament | #F2EEE6 | Hauptfläche |
| Leinen | #EAE4D8 | Kacheln, zweite Fläche |
| Sand | #E4DCCB | Tönung |
| Büttenweiß | #FBF9F4 | Papier, Dokumente |
| Tinte | #252119 | Headlines, Buttons, Dunkel |
| Erde | #4A443A | Fließtext |
| Olivgrau | #625C4C | Labels, Nebentext |
| Haarlinie | #D5CCBA | Trennlinien |
| Bernstein | #B5823A | Akzentfläche, nur groß |
| Tabak | #8A5A1E | kursives Wort, Links |

### Farbregeln
- Fast alles bleibt in Pergament, Leinen und Tinte.
- Tabak nur für das kursive Wort und Links.
- Bernstein nur als große Fläche oder Deko, nie für kleinen Text.
- Keine kalten Farben, kein reines Weiß, kein reines Schwarz.

### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Pergament | #252119 auf #F2EEE6 | 13,9 : 1 | Fließtext ok |
| Fließtext auf Pergament | #4A443A auf #F2EEE6 | 8,3 : 1 | Fließtext ok |
| Labels auf Leinen | #625C4C auf #EAE4D8 | 5,3 : 1 | Fließtext ok |
| Tabak auf Pergament | #8A5A1E auf #F2EEE6 | 5,1 : 1 | Fließtext ok |
| Button-Text auf Tinte | #F2EEE6 auf #252119 | 13,9 : 1 | Fließtext ok |
| Bernstein auf Pergament (nur Deko) | #B5823A auf #F2EEE6 | 2,9 : 1 | nur Deko |

### Diagrammfarben (in dieser Reihenfolge)
1. #252119
2. #8A5A1E
3. #6E7556
4. #B5823A
5. #978B72

Erdige Töne in fester Reihenfolge. Diagramme ohne Gitter, nur mit einer feinen Grundlinie.

---

## Typografie

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
```

| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Cormorant Garamond | 500 · 36–92 px · ein Wort pro Headline kursiv |
| Fließtext | Hanken Grotesk | 400 · 15–17 px · Zeilenhöhe 1,7 |
| Etiketten & Labels | Hanken Grotesk | 500 · 11–13 px · Großbuchstaben · Sperrung 16 % |

### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | 88 / 1,02 / 500 | Die Sprechstunde |
| H2 | 44 / 1,1 / 500 | Haut braucht Zeit |
| H3 | 26 / 1,2 / 500 | Was wir zuerst ansehen |
| Fließtext | 17 / 1,7 / 400 | Wir beginnen mit Fragen, nicht mit Produkten. |
| Label | 12 / Sperrung 16 % / 500 | Nr. 04 · Ritual |

### Typografie-Regeln
- Headlines in Cormorant Garamond 500, nie fett, nie in Großbuchstaben.
- Ein Wort pro Headline kursiv in Tabak.
- Labels und Buttons in Großbuchstaben mit 12–18 % Sperrung.
- Fließtext klein und ruhig, nie größer als 17 px.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. In Großbuchstaben-Labels lange Wörter vermeiden, mit Sperrung werden sie sehr breit. Serifen-Headlines vertragen lange Wörter besser. Silbentrennung trotzdem einschalten.

---

## 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 0 (eckig) · Kacheln 0px · Buttons 0 (eckig) · Eingabefelder 0px · Bilder 0px
- **Schatten:** keine Schatten, nur feine Linien in #D5CCBA
- **Raster-Abstand zwischen Karten:** 12px

---

## Layout

**Abschnitts-Rhythmus einer Salespage:**
1. Hero: Hintergrund #F2EEE6
2. Anliegen: zweite Fläche #EAE4D8
3. Wirkung: Hintergrund #F2EEE6
4. Ritual: dunkle Fläche #252119
5. Ablauf: Hintergrund #F2EEE6
6. Stimme: zweite Fläche #EAE4D8
7. Angebot: Papier #FBF9F4
8. Fragen: Hintergrund #F2EEE6
9. Ort: zweite Fläche #EAE4D8
10. Termin: dunkle Fläche #252119

Pergament, Leinen und Büttenweiß wechseln sich leise ab. Tinte als dunkle Fläche nur zweimal: für das Ritual selbst und den Termin-Aufruf. Keine bunten Flächen.

**Erkennungszeichen: Das Etikett.** Jedes Angebot bekommt ein Etikett wie eine Apothekerflasche: Nummer, Name, Zweck und zwei Eckdaten, getrennt durch feine Linien. Dazu große Serifen-Headlines mit kursivem Wort, Labels in Großbuchstaben mit viel Sperrung und keine einzige Rundung.

- Keine Rundungen, nirgends (runde Icons ausgenommen).
- Abschnitte durch feine Linien trennen statt durch Kästen.
- Headlines linksbündig, viel Abstand nach oben.
- Eingabefelder nur mit einer Linie unten.

---

## Bausteine

### Buttons
```css
.btn { font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 0px; transition: all .3s; }
.btn-primary { background: #252119; color: #F2EEE6; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: none; }
.btn-secondary { background: transparent; color: #252119; border: 1.5px solid #252119; }
```
Rechteckige Buttons ohne Rundung in Tinte, Schrift in Großbuchstaben mit Sperrung. Zweitbutton mit 1 px Rahmen. Keine Schatten.

### Karten und Kacheln
```css
.card { background: transparent; border: none; border-radius: 0px; box-shadow: none; padding: 32px; }
.tile { background: #EAE4D8; border: none; border-radius: 0px; padding: 22px; }
.tile:hover { box-shadow: none; }
```

### Labels, Tags, Eingabefelder
```css
.label { font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #625C4C; }
.tag { background: transparent; color: #252119; border-radius: 0px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1px solid #BFB4A0; background: transparent; border-radius: 0px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #252119; box-shadow: 0 0 0 3px rgba(138,90,30,.2); }
```

### Weitere Bausteine (alle im Showcase zu sehen)
- **Schmerzpunkte:** Liste mit feinen Trennlinien (#D5CCBA), links ein Kreis mit ✕ in #8A5A1E. 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 (#8A5A1E), Titel, kurzer Beschreibung und Tag. Nummern nur, wenn die Reihenfolge wirklich zählt.
- **Kundenstimmen:** Zitat in Cormorant Garamond 24 px, darunter rundes Kürzel, Name und Beruf.
- **Preis-Pakete:** drei Kacheln nebeneinander, das empfohlene Paket mit 2 px Rahmen in #252119 und Tag „Empfohlen“.
- **FAQ:** Zeilen mit Trennlinien, rechts ein Kreis mit +. Offen: Kreis gefüllt in #252119, das + dreht sich zum ×.
- **Checkliste:** echte Checkboxen in #252119, erledigte Punkte grau und durchgestrichen, darunter „2 von 4 erledigt“.
- **Hinweis-Box:** Fläche #E4DCCB, rundes i-Symbol in #252119.
- **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 #8A5A1E hervorgehoben.

---

## Formate

- **Social Media:** Leinen oder Tinte als Fläche, eine Serifen-Headline mit kursivem Wort, Label in Großbuchstaben. Viel Rand, keine Rundung, keine Sticker.
- **Folien (16:9):** Tinte als Fläche, Serifen-Headline links, kursives Wort in hellem Bernstein. Schritte als Kacheln mit feinem Rahmen, ohne Rundung.
- **Dokumente, Workbooks, PDF:** Büttenweißes Blatt mit 1 px Rahmen, Etiketten-Label oben, Merksatz auf Leinen, Schreiblinien als Haarlinien. Druckt warm und ruhig.
- **Newsletter:** Wie ein Brief: Büttenweiß, „Liebe Anna“, ruhige Sätze, ein eckiger Button in Tinte. Ein Thema pro Jahreszeit.
- **Artefakte und kleine Tools:** Kopf in Tinte, Tabs in Großbuchstaben auf Leinen, Inhalte ohne Rundung, Schritte als feine Kreise in Tabak.
- **Salespage:** Linksbündiger Hero mit Etikett, Anliegen auf Leinen, das Ritual auf Tinte mit großem Bild, Preise als eckige Kacheln, Schluss auf Tinte.

---

## Bildsprache

Stillleben mit Glas, Holz, Stein und Leinen. Seitenlicht, warme Schatten, gedeckte Farben. Hände bei langsamen Bewegungen. Keine Gesichter in Nahaufnahme, keine glänzende Werbeoptik.

**Bild-Prompt-Stichworte:**
```
apothecary still life, amber glass bottles, wooden shelves, linen textures,
soft side light, warm muted earth tones, calm hands, quiet luxury,
natural materials, subtle film grain
```

---

## Bewegung & Interaktion

- Inhalte blenden sehr langsam ein (0,8 s).
- Beim Darüberfahren wird nur die Fläche einen Ton dunkler.
- Keine Sprünge, kein Hochheben, keine Schatten.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #8A5A1E.

---

## Was dieses Design NICHT ist

- Keine Rundungen
- Keine Schatten
- Keine kräftigen oder kalten Farben
- Keine fetten Headlines
- Keine Emojis und keine Ausrufezeichen
- Keine Rabatte und Countdown-Timer

---

## CSS-Variablen (kopierfertig)

```css
:root {
  --line-strong: #BFB4A0;
  --on-accent2: rgba(255,255,255,.86);
  --line-accent: rgba(30,26,20,.2);
  --tile-accent: rgba(255,255,255,.18);
  --line-dark: rgba(234,228,216,.16);
  --tile-dark: rgba(234,228,216,.06);
  --tile-border-dark: 1px solid rgba(234,228,216,.14);
  --tag-bg-dark: transparent;
  --tag-ink-dark: #EAE4D8;
  --card-border: none;
  --tile-border: none;
  --shadow: none;
  --shadow-hover: none;
  --r-pill: 0px;
  --r-icon: 50%;
  --r-chip: 0px;
  --r-bar: 0px;
  --r-avatar: 50%;
  --r-slide-tile: 0px;
  --slide-gap: 1.2cqw;
  --tab-w: 500;
  --quote-size: 24px;
  --tag-track: 0.12em;
  --wm-tf: none;
  --focus-ring: rgba(138,90,30,.2);
  --doc-border: 1px solid #D5CCBA;
  --strip-gap: 0px;
  --bg: #F2EEE6;
  --alt: #EAE4D8;
  --soft: #E4DCCB;
  --paper: #FBF9F4;
  --card: transparent;
  --tile: #EAE4D8;
  --tile-on-bg: #EAE4D8;
  --tile-on-soft: #F2EEE6;
  --tile-hover: #E4DCCB;
  --ink: #252119;
  --ink2: #4A443A;
  --ink3: #625C4C;
  --line: #D5CCBA;
  --accent: #252119;
  --accent-bg: #B5823A;
  --on-accent: #F2EEE6;
  --sa-ink: #1E1A14;
  --sa-ink2: rgba(30,26,20,.82);
  --sa-btn-ink: #F2EEE6;
  --accent-text: #8A5A1E;
  --label: #625C4C;
  --dark: #252119;
  --on-dark: #EAE4D8;
  --on-dark2: #BDB3A1;
  --label-dark: #D2A867;
  --accent-text-dark: #D2A867;
  --x-color: #8A5A1E;
  --tag-bg: transparent;
  --tag-ink: #252119;
  --focus: #8A5A1E;
  --ticker-bg: #EAE4D8;
  --dot: #8A5A1E;
  --nav-bg: rgba(242,238,230,.95);
  --tab-active: #252119;
  --r-card: 0px;
  --r-tile: 0px;
  --r-btn: 0px;
  --r-input: 0px;
  --r-media: 0px;
  --r-slide: 0px;
  --r-doc: 0px;
  --grid-gap: 12px;
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-label: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --f-btn: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-quote: 'Cormorant Garamond', 'Times New Roman', serif;
  --h-w: 500;
  --h-track: -0.005em;
  --h-lh: 1.08;
  --h-tf: none;
  --hero-size: clamp(46px,8.5vw,92px);
  --num-w: 400;
  --l-size: 12px;
  --l-w: 500;
  --l-track: 0.16em;
  --l-tf: uppercase;
  --b-size: 13px;
  --b-w: 500;
  --b-track: 0.12em;
  --b-tf: uppercase;
  --b-pad: 16px 30px;
  --btn-bg: #252119;
  --btn-ink: #F2EEE6;
  --btn-shadow: none;
  --btn-sec-hover-ink: #F2EEE6;
  --input-border: 1px solid #BFB4A0;
  --input-bg: transparent;
  --star: #252119;
  --ph: linear-gradient(180deg,#D9CFBC 0%,#B9A88A 100%);
  --ph-ink: #252119;
  --ph-chip: rgba(242,238,230,.88);
  --poll-bg: rgba(234,228,216,.1);
  --poll-ink: #EAE4D8;
  --doc-shadow: none;
  --f-script: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
```

---

## 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 Cormorant Garamond, Fließtext in Hanken Grotesk
- [ ] Deutsche Headlines mit Silbentrennung, keine Wörter abgeschnitten
- [ ] Auf dem Handy (400 px) einspaltig, nichts scrollt seitlich
- [ ] Tastatur-Fokus sichtbar, Bewegungen abschaltbar
- [ ] Kein Element mit Rundung (außer runden Icons)
- [ ] Pro Headline höchstens ein kursives Wort
- [ ] Labels in Großbuchstaben mit Sperrung