STYLEGUIDE – Draußen erleben
Layout- und Code-System der Website
TYPOGRAFIE
Schriftarten
Überschriften
Poppins
Fließtext
Open Sans
Die Fonts werden über Google Fonts geladen und sind in allen Sections eingebunden.
Schriftgrößen
Desktop
H2: 32–36px
Fließtext: 18px
Card-Text: 17px
List-Items: 16px
Mobile
H2: 26–30px
Fließtext: 16px
List-Items: 15–16px
Textfarbe
Fließtext: #444444
Überschriften: #2E2E2E
Diese Trennung sorgt für bessere Lesbarkeit und eine ruhigere Gesamtwirkung.
Lesbarkeit
Überschriften verwenden „text-wrap: balance“.
Fließtext verwendet „text-wrap: pretty“.
Dadurch entstehen gleichmäßigere Zeilenumbrüche.
VERTIKALER RHYTHMUS
Der vertikale Rhythmus der Seite folgt einer einfachen Skala.
Absatz zu Absatz: etwa 20px
Fließtextbild: 24px Abstand
Bildzäsur: 44px Abstand
CTA-Link nach Text: etwa 26px
Section Padding: 56–96px
Diese Abstände strukturieren die gesamte Seite.
Absätze
Der Standardabstand zwischen Absätzen entsteht über die Regel „p + p“.
Desktop: etwa 20px
Mobile: etwa 16–18px
BILDER
Es gibt zwei klar definierte Bildtypen.
Fließtextbilder
Funktion: Illustration innerhalb des Textflusses.
Typisches Muster
Text
Bild
Text
Abstände
Desktop: 24px oben und unten
Mobile: ebenfalls 24px oben und unten
Verwendet zum Beispiel in
Startseite „Über mich“ (mobile Darstellung)
Über-mich-Seite (mobile Darstellung)
Bildzäsuren
Funktion: dramaturgische Pause zwischen zwei Gedankenblöcken.
Typisches Muster
Textblock
Bild
neuer Gedanke oder Pivot-Satz
Abstände
Desktop: 44px oben und unten
Mobile: 32px oben und unten
Verwendet zum Beispiel in
Startseite Abschnitt 2
Mein Ansatz Abschnitt 3
Mein Ansatz Abschnitt 5
Unternehmen-Unterseite Abschnitt 3
Schulen-Unterseite Abschnitt 3
Jugend-Unterseite Abschnitt 3
PIVOT-SÄTZE
Pivot-Sätze strukturieren längere Textpassagen.
Typisches Muster
Text
Bild oder Pause
Pivot-Satz
Fortsetzung
Gestaltung
Der Pivot ist ein eigener Absatz, aber ohne besondere Hervorhebung.
Kein Fett, kein eigener Stil.
Die Wirkung entsteht nur durch Abstand.
Wenn ein Bild davor steht, braucht der Pivot keinen zusätzlichen Abstand.
Wenn kein Bild davor steht, kann etwa 32px Abstand gesetzt werden.
CARD-SYSTEM
Ein einheitliches Card-Design wird auf der gesamten Website verwendet.
Einsatzbereiche
Startseite Angebotskarten
Formate-Sektionen
Angebots-Unterseiten
Card-Gestaltung
Hintergrund: #F6F3EE
Feiner Rahmen mit leichter Transparenz
Abgerundete Ecken (ca. 14px)
Subtiler Schatten
Padding etwa 32px
Grid
Der Abstand zwischen Cards beträgt 24px.
Dieses Grid-Gap wird auf allen Card-Sektionen verwendet.
Listen in Cards
Die Listen verwenden echte Browser-Bullets.
Einrückung etwa 20px.
Desktop-Schriftgröße etwa 16px.
Mobile etwa 15px.
FARBEN
Die Seite arbeitet mit einer sehr reduzierten Farbpalette.
Hauptfarben
#F6F3EE – Haupt-Hintergrund
#D8C7A6 – sandfarbene Bereiche
#2E2E2E – Überschriften
#444444 – Fließtext
#5B7A5A – Links und Buttons
Hover-Farbe für Links
#476648
LINKS
Inline-Links im Fließtext
Unterstrichen
Schriftgewicht 600
Underline-Offset etwa 3px
Hover
Farbe wird dunkler
Underline wird stärker sichtbar
BUTTONS
Standard-Button
Hintergrund #5B7A5A
Textfarbe #F6F3EE
Padding etwa 14px oben und unten, 26px seitlich
Abgerundete Ecken etwa 8px
Hover
Hintergrund wird dunkler (#476648)
leichte vertikale Bewegung nach oben
CONTAINER
Standardbreite für Inhalte
1120px
Diese Breite wird für alle Sections verwendet.
Lesebreite für längere Texte
760px
Diese reduzierte Breite sorgt für bessere Lesbarkeit.
SECTION-ABSTÄNDE
Standard-Sections
oben und unten etwa 56–96px Padding
(dynamisch über clamp)
Tight-Sections
Wenn zwei Bereiche denselben Hintergrund haben, kann der obere Abstand reduziert werden.
Typischer Wert
32–56px oben
unten bleibt der Standardabstand erhalten.
GLOBALER CODE
Der globale Code liegt im globalen CSS bzw. Script der Website.
Er regelt
Link-Styles
Button-Styles
Scroll-Offsets für Ankerlinks
Korrektur von Zyro-Linkproblemen
Das Script sorgt dafür, dass Links korrekt aus eingebetteten Frames heraus navigieren.
Dieser Code muss nicht in einzelnen Sections wiederholt werden.
FOOTER
Footer-Hintergrund
#2E2E2E
Hauptlinks
keine Unterstreichung
dezenter Hover-Hintergrund
Sub-Link („Ein Projekt von…“)
unterstrichen
Schriftgewicht 600
MOBILE-PRINZIPIEN
Mobile ist keine eigene Gestaltung, sondern eine kompaktere Version des Desktop-Layouts.
Typische Anpassungen
Fließtext 18px → 16px
List-Items 16px → 15px
Bildzäsuren 44px → 32px
Der strukturelle Rhythmus bleibt gleich.
GRUNDPRINZIPIEN DER GESTALTUNG
Die Website folgt drei übergeordneten Prinzipien.
Ruhe
viel Weißraum
wenig dekorative Elemente
Struktur
klare Textblöcke
Pivot-Sätze
Bildzäsuren
Editorialer Rhythmus
Abwechslung aus Text, Bild und Reflexion
WARTUNGSREGELN FÜR NEUE SECTIONS
Wenn neue Abschnitte erstellt werden, sollten folgende Regeln eingehalten werden.
Containerbreite 1120px
Lesebreite für Text etwa 760px
Absatzabstand etwa 20px
Fließtextbilder 24px Abstand
Bildzäsuren 44px Desktop / 32px Mobile
Card-Grid Abstand immer 24px
FAZIT
Die Website folgt jetzt einem konsistenten System aus
ruhiger Typografie
klaren vertikalen Abständen
bewussten Bildzäsuren
einem einheitlichen Card-Design
und einer reduzierten Farbpalette.