1 · Color Schemes ()

Quelle: Theme-Editor → Farben. Jede Karte rendert im eigenen Scheme — Buttons und Headings ziehen ihre Farben ausschließlich aus den --color-*-Variablen.

scheme-1

Haarpflege, die zu dir passt

Fließtext in diesem Scheme. Ein Link.

bg
bg-2
text
primary
button
border

scheme-2

Haarpflege, die zu dir passt

Fließtext in diesem Scheme. Ein Link.

bg
bg-2
text
primary
button
border

scheme-4

Haarpflege, die zu dir passt

Fließtext in diesem Scheme. Ein Link.

bg
bg-2
text
primary
button
border

scheme-inverse

Haarpflege, die zu dir passt

Fließtext in diesem Scheme. Ein Link.

bg
bg-2
text
primary
button
border

2 · Typo-Tokens (.pk-t-*, assets/pakahi-typo.css)

Ziel-Vokabular für alle Custom-Sections. Neue Klassen nur, wenn hier nichts passt.

.pk-t-display Personalisierte Haarpflege – Made in Germany
.pk-t-h1 Personalisierte Haarpflege – Made in Germany
.pk-t-h2 Personalisierte Haarpflege – Made in Germany
.pk-t-h3 Personalisierte Haarpflege – Made in Germany
.pk-t-lead Personalisierte Haarpflege – Made in Germany
.pk-t-body Personalisierte Haarpflege – Made in Germany
.pk-t-card-title Personalisierte Haarpflege – Made in Germany
.pk-t-eyebrow Personalisierte Haarpflege – Made in Germany
.pk-t-badge Personalisierte Haarpflege – Made in Germany
.pk-t-chip Personalisierte Haarpflege – Made in Germany
.pk-t-button Personalisierte Haarpflege – Made in Germany
.pk-t-price Personalisierte Haarpflege – Made in Germany
.pk-t-price--compare Personalisierte Haarpflege – Made in Germany
.pk-t-nav Personalisierte Haarpflege – Made in Germany
.pk-t-nav--sub Personalisierte Haarpflege – Made in Germany
.pk-t-label Personalisierte Haarpflege – Made in Germany
.pk-t-input Personalisierte Haarpflege – Made in Germany
.pk-t-meta Personalisierte Haarpflege – Made in Germany
.pk-t-micro Personalisierte Haarpflege – Made in Germany

3 · Theme-Headings (.h1–.h6, Basis-Theme)

.h1 Haarpflege, die zu dir passt
.h2 Haarpflege, die zu dir passt
.h3 Haarpflege, die zu dir passt
.h4 Haarpflege, die zu dir passt
.h5 Haarpflege, die zu dir passt
.h6 Haarpflege, die zu dir passt
rte (Fließtext)

Du beantwortest ein paar Fragen – wir stellen dein Shampoo passend zu deinem Haar zusammen. Mehr erfahren

3b · Bauteile (assets/pakahi-components.css)

.pk-card — Fläche mit Rahmen

Farbe und Rahmenstärke sind das Bauteil und nicht verhandelbar. Rundung und Polsterung kommen als Custom Property, weil sie sich je Kartentyp echt unterscheiden: --pk-card-radius, --pk-card-padding. Die Variante .pk-card--soft (31.07.) tauscht den Rahmen gegen einen leichten Schatten: fest weiß, kein Rahmen — für Flächen, die einladen statt abzugrenzen (Haartest-Antworten, Zurück-Button, Galerie-Pfeile).

Standard

Rundung 14px, Polsterung 2.6rem 1.8rem.

Weiche Rundung

--pk-card-radius: 2rem, wie die Perso-Schritte.

Kachel

--pk-card-radius: 6px, wie die Haartyp-Kacheln.

Weich

.pk-card--soft: weiß, kein Rahmen, leichter Schatten (0 2px 10px --pk-shadow-2).

.pk-acc — Akkordeon

Nur die Mechanik: Marker weg, Summary als Flex-Zeile, Icon dreht beim Öffnen um --pk-acc-turn (180deg für einen Chevron, 45deg für ein Plus). Die Variante .pk-acc--list ergänzt die Trennlinien. Vor dem 29.07.2026 war diese Mechanik in acht Dateien einzeln gebaut.

Erste Frage
Antwort im Fließtext.
Zweite Frage, offen
Das Icon ist um 180 Grad gedreht.
Dritte Frage, Plus statt Chevron
--pk-acc-turn: 45deg macht aus dem Plus ein Kreuz.

.pk-mark — Textmarker

Hervorhebung im Fließtext wie ein echter Marker-Strich (31.07.): Fläche in --pk-tint-pink, oben ~20 % in den Text geschnitten, unten halber Abstand, vorne und hinten leicht ausgefranste Kanten. Im CMS-Richtext (häufigste-Ursachen-Section) greift die Regel automatisch auf strong/b — überall sonst als Klasse .pk-mark.

Dein Shampoo sollte deshalb beides können: sanft reinigen und Feuchtigkeit spenden. Entscheidend ist die Rezeptur.

4 · Buttons

Basis-Theme

btn--link

Pakahi Text-CTA — Komponente .btn--underline (pakahi-components.css)

DER Textlink-Stil des Shops, zentral definiert — rechts dieselbe Klasse im inversen Scheme.

Personalisierung starten Personalisierung starten

5 · Farbsystem (--pk-*, assets/pakahi-color.css — Stand 25.07.2026)

Marken-Konstanten unabhängig vom Color Scheme: ruhiges Neutral-Gerüst + EIN pinker Handlungsanker, Pastell nur als Deko, Verlauf sparsam als Marken-Moment.

Anker & Marke

#ff4661
--pk-pink CTA-Flächen, Marke
#eb2d50
--pk-pink-hover Button-Hover / aktiv
#d61f42
--pk-pink-ink Pink als Text/Icon auf Hell (5,1:1)
#ffffff
--pk-on-pink Label auf Pink

Signatur-Verlauf (sparsam!)

--pk-gradient
#fa2f6f
--pk-grad-1
#fc6584
--pk-grad-2
#ff9a95
--pk-grad-3
#fec0a9
--pk-grad-4
#ffc1d2
--pk-grad-5
#dfccec
--pk-grad-6
#c3edfb
--pk-grad-7

Pastell-Spektrum (Deko-Flächen)

#ffdce7
--pk-tint-pink
#ffd8c9
--pk-tint-coral
#ffe7d3
--pk-tint-peach
#fceecb
--pk-tint-butter
#dcf0e0
--pk-tint-mint
#d2eef1
--pk-tint-aqua
#d8ebfb
--pk-tint-sky
#e7ddf4
--pk-tint-lilac

Neutrales Gerüst & Linien

#111111
--pk-ink Haupttext
#6a625a
--pk-ink-soft Sekundärtext, Meta (6,0:1)
#8c837a
--pk-ink-mute Tertiär, Hinweise
#ffffff
--pk-on-dark Text auf dunklem Grund
#ffffff
--pk-surface Karten/Panels auf Hell
#f2f0ef
--pk-cream Basis-Creme
#e9e0d7
--pk-cream-deep wärmere/tiefere Fläche
#e7e2dc
--pk-line Standard-Trennlinie
#d8d0c6
--pk-line-strong betonter Rahmen

Funktionsfarben

#1f7a34
--pk-green natürlich/geprüft-Text (5,4:1)
#e4f2e4
--pk-green-tint grüne Fläche (Häkchen)
#f5b800
--pk-gold Bewertungssterne
#c0392b
--pk-error Fehler/Warnung (5,4:1)
#fbe9e7
--pk-error-tint Fehler-Fläche

Schwarz-Overlay-Rampe (6 feste Stufen)

rgba(0,0,0,0.06)
--pk-shadow-1 ersetzt .05-.08
rgba(0,0,0,0.12)
--pk-shadow-2 ersetzt .10-.15
rgba(0,0,0,0.20)
--pk-shadow-3 ersetzt .18-.25
rgba(0,0,0,0.40)
--pk-shadow-4 ersetzt .40-.45
rgba(0,0,0,0.60)
--pk-shadow-5 ersetzt .55-.70
rgba(0,0,0,0.85)
--pk-shadow-6 ersetzt .75-.85