Zum Inhalt springen

Styleguide

P01 design-token layer — palette, fluid type, spacing & layout primitives. Resize the window from 375 px to 1440 px to watch the type scale flex.

Farben — Palette

Beige --lp-color-beige #FFFBF6 page background / cream hero
Hellgrün --lp-color-hellgruen #E4E6DA light-green band
Grün --lp-color-gruen #ACCD93 secondary green
Gelb --lp-color-gelb #FFCC00 yellow accent
Blau --lp-color-blau #86B4FF decorative accent only (fails text contrast)
CTA --lp-color-cta #863563 magenta button · 7.6:1 on beige
Footer --lp-color-footer #1C342C dark-green footer
UaB Text --lp-color-ink #2E2E2E body text · ~12:1 on beige (AAA)

Hero-Hintergründe

Therapie #BF916D Psychotherapie hero
Coaching #411624 Coaching hero (dark)
Seminar #1C3425 Seminare hero (dark)
About #A5AD73 Über-mich hero (olive)

Typografie — Type Scale

h1 — 52 / 1.1px

Überschrift Eins — Praxis für Systemische Therapie

h2 — 42 / 1.273px

Überschrift Zwei — Mein Angebot

h3 — 32 / 1.273px

Überschrift Drei — Verstehen, Verarbeiten, Verändern

h4 — 24 / 1.273px

Überschrift Vier — Kleinere Abschnitte

lead — 27 / 1.4px

Lead-Absatz — ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.

p — 19 / 1.4px

Fließtext — Herausforderungen gehören zum Leben, Veränderungen finden statt, ob bewusst gewollt oder einfach »passiert«.

small — 16px

Kleingedrucktes — Bildnachweis, Fußnoten.

Links & Listen

Beispiel mit einem Textlink (CTA-Magenta, unterstrichen) im Fließtext.

  • Erstes Listenelement
  • Zweites Listenelement
  • Drittes Listenelement
Manchmal brauchen wir einen geschützten Raum und einen neuen Blickwinkel.

Abstände — Spacing Scale

--lp-space-3xs
--lp-space-2xs
--lp-space-xs
--lp-space-sm
--lp-space-md
--lp-space-lg
--lp-space-xl
--lp-space-2xl
--lp-space-3xl

Layout-Primitiven

.lp-grid--3 (stapelt mobil, 3 Spalten ab Tablet)

1
2
3

.lp-autogrid (auto-fit, min 16rem)

A
B
C
D

.lp-split (Text + Medien, kippt mobil)

Textspalte

Zwei gleich breite Spalten ab 768 px, darunter gestapelt.

Medien

.lp-cluster (umbrechende horizontale Gruppe)

EinsZweiDreiVier

Buttons & Fokus (CTA)

Tab hierher für den Fokus-Ring

Illustrationen — lp_svg() (P03)

Optimierte Inline-SVGs aus assets/img/illustrations/. Dekorativ = aria-hidden; mit label = role="img" + Name. Dunkle Hero-Illustrationen sind in Weiß gezeichnet und werden hier auf dunklem Grund gezeigt.

Hand, die eine Figur hält
therapie-verstehen
Hand, die eine Figur hält
Figuren mit blauem Leuchten
therapie-verarbeiten
Figuren mit blauem Leuchten
Hand mit grün leuchtender Figur
therapie-veraendern
Hand mit grün leuchtender Figur
Ruhende Figur mit Sonne
uebermich-hero-sonne
Ruhende Figur mit Sonne
Nachdenkliche Figur mit Fragezeichen
coaching-entscheidung
Nachdenkliche Figur mit Fragezeichen
Zwei Figuren im Gespräch
seminare-feat-wirkung
Zwei Figuren im Gespräch
icon-paar-familie
dekorativ (aria-hidden)
front-haende-haltend
Zwei Hände, die einander halten

Dunkle Hero-Illustrationen (weiße Linien)

Wolke mit Regen über zwei Figuren
Hände, die farbige Lichter loslassen

Foto via lp_image() (Media Library, srcset für ShortPixel)

Praxisraum mit zwei Ledersesseln und einem Couchtisch

P05 — Section-Komponenten

Jede Komponente isoliert, mit Beispieldaten. Reflow bei 375 / 768 / 1024 / 1440 px prüfen.

components/button.php — Varianten

sections/card-grid.php + components/card.php

Mein Angebot

Beispielkarten — Icon, Titel, Text und optionaler Link.

sections/hero.php — Hintergrund-Varianten (das <h1> ist hier nur Demo)

Beispiel-Hero

Überschrift dieser Seite

Ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.

Figuren mit farbigem Leuchten

Beispiel-Hero

Überschrift dieser Seite

Ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.

Regenwolke über zwei Figuren

Beispiel-Hero

Überschrift dieser Seite

Ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.

Ruhende Figur mit Sonne

sections/cta-band.php

Unterhalten wir uns!

Vereinbaren Sie ein unverbindliches Erstgespräch.

sections/steps.php

Verstehen · Verarbeiten · Verändern

  1. 1. Verstehen

    Gemeinsam die Situation betrachten.

    • Anliegen klären
    • Muster erkennen
  2. 2. Verarbeiten

    Emotionen Raum geben.

    • Belastendes ordnen
    • Ressourcen stärken
  3. 3. Verändern

    Neue Wege gehen.

    • Schritte planen
    • Umsetzen

sections/checklist.php

Coaching hilft bei …

Beispielhafte Themen.

  • Berufliche Neuorientierung

    Klarheit über den nächsten Schritt.

  • Führung

    Souverän im Umgang mit dem Team.

  • Entscheidungen

    Strukturiert abwägen statt grübeln.

  • Konflikte

    Spannungen konstruktiv lösen.

sections/feature-grid.php

Inhalte der Seminare

Gegenseitiges Verständnis

Perspektiven wechseln.

Mehrdeutigkeit von Sprache

Missverständnisse erkennen.

Wirkung von Kommunikation

Bewusster sprechen.

Scheitern als Chance

Aus Rückschlägen lernen.

sections/audience.php

Richtet sich an

Einzelpersonen

Die sich weiterentwickeln möchten.

Teams

Die ihre Zusammenarbeit stärken wollen.

Organisationen

Die Veränderung gestalten.

sections/text-image.php (ohne Foto — Foto kommt aus der Mediathek)

Über das Format

Beispieltext neben einem Foto. Ohne gesetztes Bild rendert nur die Textspalte.

sections/infobox.phpinfo & hint

Was bedeutet Psychotherapeut in Fachausbildung?

Eine Erläuterung im Info-Kasten mit Akzentkante.

Gut zu wissen

Ein Hinweis-Kasten in kräftigerem Grünton.

sections/timeline.php

  1. 1990er

    Aufgewachsen in Wien.

    Erste Berührung mit Psychologie.

  2. 2000er

    Studium.

    Erste Praxiserfahrung.

sections/faq.php (native <details>, JS-Enhancement)

Häufige Fragen

Was kostet eine Sitzung?

Die Kosten richten sich nach …

Wie lange dauert eine Therapie?

Das ist individuell verschieden …

Übernimmt die Kasse die Kosten?

Unter bestimmten Voraussetzungen …

sections/contact-info.php

Adresse

Praxis Papis
Beispielstraße 1
1010 Wien

Telefonnummer

+43 1 234 5678

Praxiszeiten

Mo–Fr 9–17 Uhr
nach Vereinbarung

sections/links-list.php