Styleguide
Design-System für Vollmar & Partner — Generiert aus der theme.json.
Farben
Schriftarten
IBM Plex Sans
--wp--preset--font-family--body
ABCDEFGabcdefg 0123456789
'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
IBM Plex Serif
--wp--preset--font-family--heading
ABCDEFGabcdefg 0123456789
'IBM Plex Serif', 'Georgia', serif
Schriftgrössen
Normal
Design System
19px
Lead
Design System
28px
H6
Design System
19px
H5
Design System
19px
H4
Design System
24px
H3
Design System
28px
H2
Design System
40px
H1
Design System
48px
Überschriften
H1
Überschrift Ebene 1
H2
Überschrift Ebene 2
H3
Überschrift Ebene 3
H4
Überschrift Ebene 4
H5
Überschrift Ebene 5
H6
Überschrift Ebene 6
Abstände (Spacing)
2XS
0.25rem → --wp--preset--spacing--10
4XL
clamp(2.5rem, 1.33rem + 5.83vw, 6rem) → --wp--preset--spacing--90
Schatten
Section Backgrounds
Drei Standard-Hintergrundfarben für Sections.
Kombiniere mit: .section-padding (96px) · .section-padding--sm (80px) · .section-padding--lg (120px)
White Section
class="section-bg-white section-padding"
Weißer Hintergrund (#FFFFFF) · Standard Text-Farbe
Grey Section
class="section-bg-grey section-padding"
Hellgrauer Hintergrund (#F9F4F5 / Primary Lightest) · Standard Text-Farbe
Primary Section
class="section-bg-primary section-padding"
Roter Hintergrund (#7D272D) · Weiße Text-Farbe (automatisch)
Buttons
border-radius: 0 |
hover: var(--wp--preset--color--primary-light)
Accordion
Click-Toggle zwischen geschlossen/geöffnet. Nur ein Item kann gleichzeitig geöffnet sein.
Kauf & Verkauf von Unternehmen
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Fusionen
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Joint Ventures
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
HTML-Struktur:
<div class="needs-list">
<div class="need-item">
<div class="need-content">
<h3 class="need-title has-grey-75-color">Titel</h3>
<p class="need-description has-primary-color">Beschreibung</p>
</div>
<div class="need-icon">
<span class="icon-closed has-grey-75-color"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg></span>
<span class="icon-open has-primary-color"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg></span>
</div>
</div>
</div>
JavaScript aktiviert automatisch Click-Toggle für alle .need-item innerhalb von .needs-list.
Icons: Chevron (rotiert -90°, zeigt nach rechts) → Minus beim Öffnen
Service Tile / Kachel
Kachel für Service-Übersichten mit Bild, Titel, Beschreibung und Icon.
Variante: Primary Light
Advisory Services
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea re…
Variante: Weiss
Advisory Services
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea re…
HTML-Struktur:
<div class="service-tile has-primary-light-background-color has-background">
<img class="service-tile__image" src="..." alt="...">
<div class="service-tile__content">
<h3 class="service-tile__title">Titel</h3>
<p class="service-tile__description">Beschreibung</p>
</div>
<div class="service-tile__icon">
<span class="icon-arrow"></span>
</div>
</div>
Hinweise:
• Hintergrund: .has-primary-light-background-color (#975257)
• Bild: Als <img> absolut positioniert, ragt links -27px raus
• Icon: Diagonal-Pfeil, weißer Border (50% opacity)
• Min-height: 400px (Desktop), 350px (Mobile)
News Card / Beitrag
Horizontale Karte für Nachrichtenbeiträge. Bild links, Text rechts, Pfeil-Icon oben links.
Aktuelle News
Ut wisi enim ad minim veniam, quis nostrud exerci
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Stet clita kasd gubergren, no sea takimata sanctus
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Call to Action
Roter CTA-Banner mit Teamfoto rechts. Buttons outline-weiss.
Bereit für den nächsten strategischen Schritt?
Reto Hunkeler
Treuhand
Layout
Textbeispiel
Dies ist ein normaler Absatz mit fettem Text, kursivem Text und einem Link. Die Grundschriftgrösse ist var(--wp--preset--font-size--md).
Dies ist ein Zitat. Es verwendet die definierte Akzentfarbe als linke Bordüre und eine grössere Schriftgrösse.
- Listenelement eins
- Listenelement zwei
- Listenelement drei mit einem Link
Responsive System
Statt starrer Breakpoints nutzt dieses Theme Intrinsic Design: Fluid Typography & Spacing, Container Queries und selbst-adaptierende Layout-Patterns.
Aktueller Viewport
Breakpoint-Referenzen
Diese werden nur für den Navigation-Toggle verwendet. Alle anderen Layouts sind intrinsisch.
SM
36rem / 576px
Kleine Geräte
MD
48rem / 768px
Nav-Breakpoint (einziger für Media Query)
LG
64rem / 1024px
Desktop
XL
80rem / 1280px
Grosse Screens
Fluid Spacing
Ab Stufe S skalieren Abstände flüssig per clamp() zwischen Mobile und Desktop.
Die Balken zeigen die aktuelle interpolierte Grösse.
Layout-Primitives
Wiederverwendbare CSS-Klassen, die sich ohne Breakpoints an den verfügbaren Platz anpassen.
auto-fit + minmax()
Passt die Spaltenanzahl automatisch an den verfügbaren Platz an. Kein Breakpoint nötig.
horizontal ↔ vertikal bei 30rem
Wechselt automatisch zwischen nebeneinander und untereinander — basierend auf Container-Breite.
flex-wrap mit gap
Elemente fliessen horizontal und brechen automatisch um wenn kein Platz mehr ist.
Container Queries
Registrierte Container: .site-header, .site-main, .site-footer, .entry-content.
Kinder reagieren mit @container auf die Breite ihres Elternteils — nicht auf den Viewport.
.cq:stack
flex-direction: column unter 40rem
.cq:hide
display: none unter 40rem
.cq:full-width
width: 100% unter 40rem
.cq:row
flex-direction: row ab 40rem
.cq:show-lg
display ab 64rem
Komponenten
Contact Tiles
Drei gleichgrosse Kacheln für Adresse, E-Mail und Telefon auf der Kontaktseite. Jede Kachel ist ein Link.
Wrapper: .contact-tiles
.contact-tile — Icon-Kreis in Primärfarbe | Label uppercase | Grid: 3 gleiche Spalten
Team Member
Kachel für die Team-Übersicht auf der Über-uns-Seite. Foto (3:4 Ratio), Name, Funktion, E-Mail — klickbar zur Detailseite.
Wrapper: .team-grid
Martina Muster
Head of Strategy
m.muster@hitzpartner.chThomas Beispiel
Senior Consultant
t.beispiel@hitzpartner.chLena Kein-Mail
Project Manager
.team-member — Flex-Spalte | Foto: aspect-ratio: 3/4, object-position: center top
Reference Card
Komponente für Startseite und Weitere Referenzen.
Dateipfad: template-parts/components/reference-card.php
Reference Tile
Horizontale Kachel für die Referenzen-Übersicht. 1/3 Bild + 2/3 Inhalt (Titel, Text max. 150 Zeichen, Branche + Region als Badges).
Wrapper: .references-tile-grid
Musterprojekt GmbH
Kurze Projektbeschreibung mit maximal 150 Zeichen – ideal für einen prägnanten Überblick über die durchgeführten Massnahmen.
Beispiel AG – ohne Region
Nur Branche gesetzt, keine Region.
.reference-tile — Grid: 1fr 2fr | .reference-tile__meta-item — Pill-Badge mit Primärfarbe
Formular-Elemente
Input-Styling für Gravity Forms und allgemeine Formulare. Labels: 16 px Uppercase · Inputs: 19 px IBM Plex Sans · Border: Grey 50 → Primary on Focus · Button: Primary-Style.
Styling via .contact-form-section in contact-tiles.css — gilt für alle Gravity-Forms-Felder auf der Kontaktseite.