Styleguide

Gestaltungsregeln der Webseite «Health in Harmony». Alle Werte sind als CSS-Variablen in css/style.css definiert – wer eine Farbe oder Schrift ändert, ändert sie dort einmal.

Grundidee: Erdfarben aus dem Hero-Foto (Terracotta, Laubgrün, Holz) und das Sonnen-Gold des Logos. Viel Weissraum, wenige Rahmen, Trennung durch feine Linien statt Karten.

Farbschema

Flächen

Creme--bg · #fcf9f3Seitenhintergrund

Sand--bg-soft · #f4ecddAbschnitte Harmonie, Angebote, CTA, Disclaimer

Oberfläche--surface · #fffdf8Formularfelder

Linie--line · #e6dccbTrennlinien, Rahmen

Text

Erdbraun--fg · #2f2820Fliesstext, Titel

Braun gedämpft--fg-muted · #6b5e50Nebentext, Listen

Akzente

Sonnen-Gold--sun · #e2a33aPrimärbutton, Schreibschrift

Gold dunkel--sun-deep · #b97a1eHover, Chevron

Terracotta--earth · #a4502bLinks, Outline-Button, Pflicht-Stern

Terracotta hell--earth-soft · #f4e4d7Fokusring, Hover

Laubgrün--leaf · #4f7a3cErfolgsmeldung, Angebots-Card

Laubgrün dunkel--leaf-deep · #35592bNach-oben-Button, Angebots-Card

Header und Footer

Balken--bar-bg · #2a231cHintergrund

Balken-Text--bar-fg · #efe6d8Navigation, Links

Balken gedämpft--bar-muted · #b9ab98Nebentext im Footer

Regeln: Terracotta und Gold nie gleichzeitig als Fläche. Grün nur für die beiden Angebots-Cards, den Nach-oben-Button und Erfolgsmeldungen. Fehlermeldungen in #a83a1f. Kein Dark-Mode – die Seite hat bewusst eine einzige, helle Stimmung; dunkel sind nur Header, Footer und die Hero-Textbox.

Schriftwahl

Drei Schriften aus Google Fonts (vor Go-Live lokal hosten, siehe README):

--font-script · AlluraHealth in Harmony

--font-display · Cormorant Garamond 500–700Entfalte deine Begabungen und Potenziale

--font-body · Nunito Sans 400/600/700Ganzheitliche Gesundheits- und Ernährungsberatung mit Miriam Emilia – Fliesstext in 17px, Zeilenhöhe 1.65.

Grössenskala

Element	Schrift	Grösse	Verwendung
Schreibschrift	Allura	clamp(2rem, 4vw, 3.2rem)	Hero «Health in Harmony», Name im Header/Footer
H1 (Hero)	Cormorant 700	clamp(1.5rem, 2.6vw, 2.4rem)	Claim im Hero
H2	Cormorant 700	clamp(2rem, 4vw, 2.75rem)	Abschnittstitel
H3	Cormorant 700	clamp(1.5rem, 2.6vw, 1.9rem)	Themen, Angebote
Lead	Nunito Sans 400	1.2rem, gedämpft	Einleitungssatz unter H2
Fliesstext	Nunito Sans 400	1.0625rem / 1.65	max. 66 Zeichen Zeilenbreite
Nebentext	Nunito Sans 400	.88–.95rem, gedämpft	Listen, Pills, Footer
Preis	Cormorant 600	1.9rem, lining-nums	CHF-Beträge
«erfahre mehr»	Cormorant 600 kursiv	1.05rem, Terracotta	Aufklapp-Link

Regeln: Alle Titel (H1–H3) in Cormorant Garamond 700. Keine Grossbuchstaben-Labels (Eyebrows). Hervorhebungen im Text mit fett, nicht farbig. Betonte Wörter in Titeln kursiv.

Abstände, Breiten, Radien

Token	Wert	Verwendung
`--wrap`	1120px	Lesespalte für Inhalte
Hero / Header / CTA	1240px	Bildrahmen, Header-Inhalt und CTA-Block schliessen bündig ab
`--gutter`	clamp(16px, 4vw, 40px)	Seitlicher Abstand – nie unter 16px
Abschnitt	padding-block clamp(3.5rem, 8vw, 6.5rem)	`.section`
Themenblock	padding-block clamp(2rem, 5vw, 3.5rem)	getrennt durch 1px Linie
`--measure`	66ch	max. Breite Fliesstext
`--radius`	8px	Bilder, Hero, CTA, Textbox
Buttons / Felder	4px	bewusst eckiger als Bilder
Anker-Offset	72px + 2rem	Header-Höhe plus Luft beim Springen

Raster

Zweispaltig ab 820px (Themen 5:6, Über mich 2:3, Kontakt 1:1.2, Harmonie 1:1). Angebote 4 Spalten, ab 1000px 2 Spalten, ab 600px 1 Spalte. Galerie 3 Spalten, mobil 2. Abstände in Rastern über gap, nicht über Margins.

Bild 16:9 (Hero)

Bild 4:3 (Themen)

4:5 (Portrait)

Buttons und Links

Primär (Gold) Sekundär (Outline Terracotta) Textlink

Kontakt aufnehmen (Header) Hero-Link mit Goldlinie

Variante	Spezifikation	Einsatz
Primär	Gold, Text Erdbraun, 700, .8rem 1.4rem, Radius 4px; Hover Gold dunkel + 1px hoch	Genau ein Primärbutton pro Ansicht: Header, Angebote, Formular
Sekundär	transparent, 2px Rahmen Terracotta; Hover Terracotta hell	CTA-Block
«erfahre mehr»	Cormorant kursiv, Terracotta, Chevron › dreht bei offen	Aufklappbare Texte
Hero-Link	heller Text, 2px Goldlinie unten	nur im Hero
Nach oben	44px Kreis, Laubgrün dunkel, erscheint ab 600px Scrolltiefe	fix rechts unten

Regeln: Keine Pill-Buttons. Fokus sichtbar: 3px Goldring mit 3px Abstand. Mindestgrösse Touch 44px.

Formulare

Element	Spezifikation
Feld	1.5px Rahmen Linie, Radius 4px, .7rem .85rem, Hintergrund Oberfläche
Fokus	Rahmen Terracotta + 3px Ring Terracotta hell
Fehler	Rahmen #a83a1f, Meldung .82rem direkt unter dem Feld, `aria-live`
Label	.85rem, 700, Pflicht-Stern in Terracotta (auch im Hinweis «* Pflichtfeld»)
Absenden	Primärbutton, nur so breit wie der Text
Datenschutz	Formular sendet nichts an einen Server – öffnet `mailto:`. Keine Checkbox: Hinweistext mit Link zur Datenschutzerklärung über dem Button.

Listen

Leitbild-Liste mit grünem Punkt (Harmonie)
Punkt: 12px Kreis, Verlauf wie die Sonnenkugel im Logo (hellgold → gold → dunkelgold)

Fragen-Liste mit Fragezeichen in Terracotta (Themen)
Text gedämpft, Einzug 1.4rem

Symptomliste, zweispaltig
Linie links 2px
.95rem gedämpft
mobil einspaltig

Qualifikationen (Über mich, Footer): goldene Sonnenkugel 11px
Programmnamen kursiv Gold dunkel

Icons

Icons aus Lucide (ISC-Lizenz), als Inline-SVG eingebettet – kein externes Script, keine Fremd-Requests. 24er-Raster, Strich 2px, runde Enden, Farbe currentColor.

chevrons-down · Intro, 36px, Terracotta

chevron-right · «erfahre mehr», 18px, dreht 90° bei offen

arrow-up · Nach oben, 20px

Externer Linkexternal-link · automatisch an allen Links zu fremden Domains, 0.8em

Burger, animiert zu X (Klick zum Testen)

Bilder und Logo

Originallogo (blau): Intro-Seite und Footer, unverändert.

Umgefärbtes Logo (Terracotta/Beeren): nur als kleines Rundbild im Header und als Favicon.

Fotos: echte Aufnahmen, keine Stockbilder. Max. 1600px breit, JPG 82–86%. Radius 8px, Formate 16:9 (Hero), 4:3 (Themen, Galerie), 4:5 (Portrait). Jedes Bild mit beschreibendem alt.

Bewegung und Verhalten

Intro-Logo blendet über 60% der Intro-Höhe aus und rutscht 40px nach oben.
Chevron wippt 8px in 2.2s; Hover-Übergänge 150–250ms.
Aufklappen über grid-template-rows 0fr → 1fr, 400ms.
Alles respektiert prefers-reduced-motion: dann keine Animation, kein Smooth-Scroll.
Scroll-Reveal: Texte (Titel, Absätze, Listen, Links) blenden beim Scrollen leicht von unten ein – 12px, 700ms, Opacity 0 → 1; nur einmal pro Element, Bilder nicht.
Header sticky nach dem Intro; aktiver Navigationspunkt mit Goldlinie.