Psychotherapie
Ein geschützter Raum für Veränderung.
Mehr erfahrenStyleguide
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
Hellgrün
--lp-color-hellgruen
#E4E6DA
Grün
--lp-color-gruen
#ACCD93
Gelb
--lp-color-gelb
#FFCC00
Blau
--lp-color-blau
#86B4FF
CTA
--lp-color-cta
#863563
Footer
--lp-color-footer
#1C342C
UaB Text
--lp-color-ink
#2E2E2E
Hero-Hintergründe
Therapie
#BF916D
Coaching
#411624
Seminar
#1C3425
About
#A5AD73
Typografie — Type Scale
Überschrift Eins — Praxis für Systemische Therapie
Überschrift Zwei — Mein Angebot
Überschrift Drei — Verstehen, Verarbeiten, Verändern
Überschrift Vier — Kleinere Abschnitte
Lead-Absatz — ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.
Fließtext — Herausforderungen gehören zum Leben, Veränderungen finden statt, ob bewusst gewollt oder einfach »passiert«.
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)
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.
therapie-verstehen
therapie-verarbeiten
therapie-veraendern
uebermich-hero-sonne
coaching-entscheidung
seminare-feat-wirkungicon-paar-familiefront-haende-haltendDunkle Hero-Illustrationen (weiße Linien)
Foto via lp_image() (Media Library, srcset für ShortPixel)
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.
Jugendliche
Begleitung in herausfordernden Phasen.
Mehr erfahrenCoaching
Klarheit für berufliche Entscheidungen.
Mehr erfahrensections/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.
Beispiel-Hero
Überschrift dieser Seite
Ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.
Beispiel-Hero
Überschrift dieser Seite
Ein geschützter Raum und ein neuer Blickwinkel, um wieder Klarheit zu finden.
sections/cta-band.php
sections/steps.php
Verstehen · Verarbeiten · Verändern
-
1. Verstehen
Gemeinsam die Situation betrachten.
- Anliegen klären
- Muster erkennen
-
2. Verarbeiten
Emotionen Raum geben.
- Belastendes ordnen
- Ressourcen stärken
-
3. Verändern
Neue Wege gehen.
- Schritte planen
- Umsetzen
sections/checklist.php
Coaching hilft bei …
Beispielhafte Themen.
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.php — info & 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
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
Praxiszeiten
Mo–Fr 9–17 Uhr
nach Vereinbarung