Werkbank

Style Guide

Alles, was im Theme an Farben, Schrift, Buttons und Textbausteinen wirklich verwendet wird — gerendert mit denselben Klassen wie im Rest der Seite. Ändert sich ein Token in assets/css/base.css, ändert sich diese Seite mit.

Farben

Der Wert unter jedem Feld ist der, den der Browser gerade rechnet — auch dort, wo ein Token auf ein anderes zeigt oder aus color-mix() entsteht.

Flächen

Reine Neutrale: Schwarz, Anthrazit, Grau, Weiss. Bewusst ohne Blaustich — die blaustichigen Grautöne des Buchungsformulars gehören nicht zurück.

  • --color-bg Seitengrund
  • --color-surface Fläche (zeigt auf --color-surface-light)
  • --color-surface-alt Fläche, zweite Stufe
  • --color-surface-strong Mittelgrau: Abschlussband, Schritt-Panels, Kontaktkarte
  • --color-pattern-tint Tönung unter den Mustergrafiken

Text und Linien

  • --color-text Fliesstext
  • --color-muted Gedämpft: Intros, Meta, Kicker
  • --color-border Trennlinien und Rahmen

Marke und Akzent

Platzhalter. Es gab nie eine definierte Marke — sobald die Farbe feststeht, reichen die drei Zeilen bei --color-brand in base.css: alles andere zeigt darauf.

  • --color-brand Markenfarbe
  • --color-accent Akzent — Links, primäre Buttons
  • --color-accent-hover Akzent im Hover
  • --color-accent-contrast Schrift auf dem Akzent
  • --color-accent-on-dark Akzent auf dunklem Grund (aufgehellt, sonst unlesbar)
  • --color-brand-soft Blasser Ton: Unterstriche, Badges, Brand-Button

Dunkle Kontexte

  • --color-dark Dunkle Sections und Menü-Overlay
  • --color-footer-bg Footer — heller als --color-dark, eigener Token
  • --color-dark-text Schrift auf Dunkel
  • --color-dark-muted Gedämpfte Schrift auf Dunkel

Status

Übernommen aus den Meldungen des Buchungsformulars, damit Theme und Plugin dieselbe Sprache sprechen.

  • --color-success Erfolg
  • --color-warning Warnung
  • --color-error Fehler

Typografie

Zwei variable Schriften, beide selbst gehostet und im <head> vorgeladen. Jede deckt 200–900 in einer Datei ab — keine separaten Schnitte.

Schriftfamilien

  • --font-heading

    Bikepacking durch die Schweiz

    Source Serif 4 — alle Überschriften
  • --font-body

    Bikepacking durch die Schweiz

    Source Sans 3 — Fliesstext, Buttons, Navigation
  • --font-mono

    Bikepacking durch die Schweiz

    Systemschrift — nur für code

Grössen

Alles ab --text-base skaliert mit clamp() über die Viewportbreite. Der Wert rechts ist der berechnete für dieses Fenster.

  • Velo mieten und losfahren

    --text-xs Feindruck: kleine Buttons, Rechtliches

  • Velo mieten und losfahren

    --text-sm Buttons, Meta, Kicker, Sprachumschalter

  • Velo mieten und losfahren

    --text-base Fliesstext

  • Velo mieten und losfahren

    --text-lg Lead, Section-Intro, Zitat

  • Velo mieten und losfahren

    --text-xl Zwischentitel in .prose

  • Velo mieten und losfahren

    --text-2xl Section-Titel

  • Velo mieten und losfahren

    --text-3xl Seitentitel, Beitrags-Hero

Zeilenhöhen

  • --leading-tight

    Überschriften. Zwei Zeilen, damit der Abstand sichtbar wird: Gravelbike, Tourenvelo und E-Bike für jede Etappe.

  • --leading-snug

    Kompakte Blöcke wie Karten und Footer-Spalten: Gravelbike, Tourenvelo und E-Bike für jede Etappe.

  • --leading-normal

    Fliesstext, der Standard auf body: Gravelbike, Tourenvelo und E-Bike für jede Etappe.

Überschriften

h1 fehlt hier mit Absicht: Der Seitentitel oben ist das einzige h1 der Seite. Seine Grösse (--text-3xl) tragen .page-header__title, .archive-header__title und .entry-header__title.

h2 — Alles Wissenswerte zu deiner Velotour

h3 — Was gehört ins Gepäck?

h4 — Taschen, Werkzeug, Ersatzschlauch

h5 — Vor der Abfahrt prüfen
h6 — Reifendruck

Section-Titel und Beiwerk

.section__kicker

.section__title

.section__intro — die Einleitung unter dem Titel. Gedämpft, --text-lg, auf 60 Zeichen begrenzt.

.section__title--small

Der kleine, gesperrte Versaltitel über Listen und Karten.

Serif voran, serifenlos weiter

.section__title--split mit .section__title-lead: beide Teile bleiben in einer Zeile, wo Platz ist, und brechen gemeinsam um.

Text

.prose ist der Lesekontext: 68 Zeichen breit, mit eigenen Abständen für Zwischentitel, Listen, Zitate und Code.

.prose

Bikepacking heisst: alles, was du brauchst, hängt am Velo. Fett für das Wichtige, kursiv für den Nebenton, ein Link im Fliesstext für den Weg weiter, und --color-brand als Code.

Zwischentitel h2

Im .prose-Kontext ist h2 auf --text-xl heruntergesetzt: die Section darüber hat den grossen Titel schon vergeben.

Zwischentitel h3

Darunter --text-lg.

Das Zitat sitzt an einem Strich in Akzentfarbe, gedämpft und eine Stufe grösser als der Fliesstext.

Kleingedrucktes im small-Element.

.prose.prose--small

Eine Stufe kleiner für Randnotizen, Hinweise unter Formularen und rechtliche Absätze im Footer.

Listen

Ungeordnet

  • Lenkertasche
  • Seitentaschen
    • vorne links und rechts
    • hinten links und rechts
  • Rahmentasche
  • Satteltasche

Geordnet

  1. Velo und Grösse wählen
  2. Datum, Abhol- und Rückgabeort festlegen
  3. Extras dazunehmen
  4. Buchen und losfahren

Ohne Aufzählungszeichen

Listen ausserhalb von .prose haben keine Einrückung. Navigation, Footer-Spalten und Kartenraster setzen ihre eigene list-style: none.

  • Bern
  • Zürich
  • Luzern

Buttons

Vier Varianten, eine Grössenmodifikation. Die Form ist überall dieselbe: abgerundetes Rechteck, keine Pille, 0.6em Innenabstand oben und unten. Im Hover und im Tastaturfokus hebt sich jeder Button um ein Pixel.

Auf hellem Grund

Jetzt buchen Mehr erfahren Velo mieten Klein und primär Klein und ghost
  • .button--primary — die eine Handlung, die zählt
  • .button--ghost — zweite Wahl, nimmt die Textfarbe der Umgebung
  • .button--brand — der feste Punkt im Header, hält seine Farbe in jedem Header-Zustand
  • .button--small — Zusatz zu jeder Variante

Auf dunklem Grund

Jetzt buchen Mehr erfahren Velo mieten

--color-accent-contrast kippt hier auf Dunkel: ein primärer Button ist hell mit dunkler Schrift.

Auf der Markenfarbe

Jetzt buchen Mehr erfahren

Section-Hintergründe

Jede Variante biegt die Farbtokens um, statt ihre Kinder einzeln einzufärben. Deshalb funktionieren Text, Links und Buttons in allen dieselben Klassen.

ohne Modifier

Seitengrund, Standardfarben.

.section--bg-light

Ruhige Fläche zum Absetzen zweier Textblöcke.

.section--bg-dark

Naheliegend für Abschlussbänder und die Velo-Übersicht.

.section--bg-accent

Die Markenfarbe als Fläche, Schrift in Weiss.

Elemente mit eigenem hellem Grund — .bike-card, .post-card, .booking__form und eine .section__card über einem Muster — holen sich in diesen Sections die hellen Farben zurück. Sonst stünde weisser Text auf weissem Grund und ein primärer Button wäre unsichtbar.

.section--bg-image und .section--bg-pattern fehlen hier: beide brauchen ein Bild aus dem Builder. Die erste legt einen Verlauf über das Foto und dreht die Schrift auf Weiss, die zweite kachelt eine SVG-Grafik auf --color-pattern-tint und setzt den Inhalt in eine .section__card darüber.

Abstand einer Section

Für alle gleich: --section-space, ein clamp() von 3rem auf dem Handy bis 5rem auf breiten Bildschirmen, oben wie unten. Im Builder gibt es keinen Schalter dafür. Nur Templates nehmen ihn punktuell weg (.section--pt-none, .section--pb-none); Seitentitel-Header halten unten --space-m.

Die Höhe kommt aus dem Einstellungs-Modal: .section--height-medium (60vh) und .section--height-full (ein Bildschirm ohne Header), Inhalt vertikal mittig.

Abstände und Formen

Abstandsskala

  • --space-3xs
  • --space-2xs
  • --space-xs
  • --space-s
  • --space-m
  • --space-l
  • --space-xl
  • --space-2xl
  • --space-3xl

Radien

  • --radius-sEingaben, Brand-Button
  • --radius-mButtons, Bilder in .prose
  • --radius-lKarten, Beitragsbilder
  • --radius-fullKreise und Pillen

Schatten

  • --shadow-s
  • --shadow-m

Breiten

  • .container--narrow — 620 px, Lesespalte
  • .container--article — 800 px, Blogbeitrag
  • .container — 1200 px, Standard
  • .container--wide — 1400 px, Header und breite Raster
  • .container--full — randlos, ohne Innenabstand

Formulare und Meldungen

Eingaben

Im Fokus färbt sich nur der Rahmen in Akzentfarbe. Den gestrichelten Ring bekommen Links, Buttons, Checkboxen und Radios — nicht die Textfelder.

Suchformular

.search-form — Feld und Button nebeneinander, auf 30 rem begrenzt.

Hinweis

.notice-inline — der gelbe Hinweis für Redaktionshinweise und leere Zustände.