/* ==========================================================================
SABINE PEIPE – DESIGNSYSTEM
==========================================================================
Extrahiert aus dem Prototyp "Projektstart Website"
Basis für statische HTML-Entwicklung und späteren WordPress-Theme-Umbau.
Schriften (Google Fonts oder self-hosted einbinden):
- Cormorant Garamond 300 / 400 / 600 (+ italic) → Headlines
- PT Sans 400 / 700 (+ italic) → Fließtext, UI
- Caveat 400 / 600 → Handschrift-Akzente
Google-Fonts-Einbindung (im , für Produktion self-hosting empfohlen):
========================================================================== */
/* --------------------------------------------------------------------------
1. DESIGN-TOKENS (Custom Properties)
-------------------------------------------------------------------------- */
:root {
/* ----- CI-Farben ----- */
--color-primary: #f37021; /* Orange – CTA, Eyebrows, Akzente */
--color-primary-dark: #d95f14; /* Orange abgedunkelt – Hover */
--color-secondary: #005b9c; /* Blau – zweiter Akzent, Buttons */
--color-secondary-dark: #004a80; /* Blau abgedunkelt – Hover */
/* ----- Dunkle Flächen (Navy) ----- */
--color-navy: #001C3E; /* Haupt-Dunkelton, Sektions-Hintergrund */
--color-navy-deep: #00132E; /* noch dunkler, z. B. Footer */
--color-navy-light: #052550; /* Gradient-Partner zu Navy */
/* ----- Textfarben ----- */
--color-text: #1a2535; /* Body-Text auf hellem Grund */
--color-text-muted: #4a5568; /* Fließtext gedämpft */
--color-text-soft: #5a6677; /* noch weicher, z. B. Bildunterschriften */
--color-heading: #001C3E; /* Überschriften auf hellem Grund */
/* ----- Text auf dunklem Grund ----- */
--color-text-inverse: #ffffff;
--color-text-inverse-muted: rgba(255, 255, 255, 0.7);
--color-text-inverse-soft: rgba(255, 255, 255, 0.6);
--color-text-inverse-faint: rgba(255, 255, 255, 0.35);
/* ----- Helle Flächen ----- */
--color-white: #ffffff;
--color-cream: #FAF8F4; /* Off-White-Sektionen */
--color-border-sand: #e5e0d8; /* dezente Trennlinien auf Cream */
--color-border-inverse: rgba(255, 255, 255, 0.3); /* Ghost-Buttons, Linien auf dunkel */
/* ----- Verläufe ----- */
--gradient-navy: linear-gradient(135deg, #052550 0%, #001C3E 100%);
--gradient-hero: linear-gradient(110deg, #001C3E 50%, rgba(0, 28, 62, 0.6) 100%);
/* ----- Typografie ----- */
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
--font-script: 'Caveat', cursive;
/* Fluid-Größen für Headlines */
--fs-display: clamp(48px, 6vw, 88px); /* H1 / Hero */
--fs-display-lg: clamp(40px, 5vw, 72px); /* großer CTA-Abschluss */
--fs-h2: clamp(36px, 4vw, 56px);
--fs-h3: 32px;
--fs-h4: 26px;
--fs-body: 17px;
--fs-body-lg: 18px;
--fs-body-sm: 16px;
--lh-display: 1.05;
--lh-heading: 1.15;
--lh-body: 1.8;
/* Eyebrow / Label */
--eyebrow-size: 11px;
--eyebrow-tracking: 5.5px;
--label-size: 10px;
--label-tracking: 4px;
/* ----- Abstände ----- */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 100px;
--section-padding: clamp(80px, 10vw, 140px);
/* ----- Layout ----- */
--container-max: 1200px;
--content-narrow: 720px; /* zentrierte Intro-Texte */
--content-copy: 580px; /* Fließtext-Spalten */
/* ----- Sonstiges ----- */
--transition: 0.3s ease;
/* Das Design ist bewusst eckig – kein Border-Radius auf Buttons/Karten */
--radius: 0;
}
/* --------------------------------------------------------------------------
2. BASIS / RESET
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* Barrierefreiheit: sanftes Scrollen nur wenn Bewegung erwünscht ist */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text);
background: var(--color-white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Sichtbarer Fokus-Ring für Tastaturnutzung (WCAG 2.4.7) */
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
/* Skip-Link für Screenreader-/Tastaturnutzer (WCAG 2.4.1) */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 12px 20px;
background: var(--color-navy);
color: var(--color-text-inverse);
font-family: var(--font-body);
text-decoration: none;
}
.skip-link:focus {
left: 16px;
top: 16px;
}
/* Nur für Screenreader sichtbar */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
3. TYPOGRAFIE
-------------------------------------------------------------------------- */
/* --- Überschriften-Grundstil --- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
font-family: var(--font-heading);
color: var(--color-heading);
}
/* H1 / Display – Hero-Headline, kräftig (600) */
h1,
.h1 {
font-size: var(--fs-display);
font-weight: 600;
line-height: var(--lh-display);
margin-bottom: var(--space-md);
}
/* Große Abschluss-/CTA-Headline */
.display-lg {
font-size: var(--fs-display-lg);
font-weight: 300;
line-height: 1.1;
}
/* H2 – Sektions-Überschrift */
h2,
.h2 {
font-size: var(--fs-h2);
font-weight: 600;
line-height: var(--lh-heading);
margin-bottom: 20px;
}
/* H3 – Unterüberschrift / Karten-Titel groß */
h3,
.h3 {
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.2;
margin-bottom: var(--space-sm);
}
/* H4 – kleiner Karten-Titel, halbfett */
h4,
.h4 {
font-size: var(--fs-h4);
font-weight: 600;
margin-bottom: 10px;
}
/* Kursive Serif-Betonung innerhalb von Headlines */
.heading-accent {
font-style: italic;
color: var(--color-primary);
}
/* Solide (nicht-kursive) Akzentfarbe innerhalb von Headlines */
.heading-accent-solid {
font-style: normal;
color: var(--color-primary);
}
/* Blaue Variante des Akzents, z. B. für Headlines auf hellem Grund */
.heading-accent--secondary {
color: var(--color-secondary);
}
/* --- Fließtext --- */
p {
margin-bottom: var(--space-md);
}
.text-muted { color: var(--color-text-muted); }
.text-lead {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
max-width: var(--content-copy);
}
/* --- Eyebrow (Orange-Label über Überschriften) --- */
.eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--eyebrow-size);
font-weight: 400;
letter-spacing: var(--eyebrow-tracking);
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
/* Kleines Label (z. B. "Ebene 01", "Angebot 02") */
.label {
display: block;
font-family: var(--font-body);
font-size: var(--label-size);
letter-spacing: var(--label-tracking);
text-transform: uppercase;
margin-bottom: 10px;
}
.label--primary { color: var(--color-primary); }
.label--secondary { color: var(--color-secondary); }
.label--inverse { color: var(--color-text-inverse-faint); }
/* Eyebrow mit vorangestellter Linie (z. B. Hero-Eyebrow) */
.eyebrow--rule {
display: flex;
align-items: center;
gap: 14px;
}
.eyebrow--rule::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: currentColor;
flex-shrink: 0;
}
/* Zentrierte Eyebrow mit Linie auf beiden Seiten */
.eyebrow--center {
justify-content: center;
}
.eyebrow--center::after {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: currentColor;
flex-shrink: 0;
}
/* --- Subheadline (kursive Serif-Zeile vor/nach der Headline) --- */
.subheadline {
font-family: var(--font-heading);
font-style: italic;
font-weight: 600;
font-size: clamp(24px, 2.4vw, 35px);
line-height: 1.3;
margin-bottom: var(--space-sm);
}
.subheadline--primary { color: var(--color-primary); }
.subheadline--secondary { color: var(--color-secondary); }
/* --- Handschrift-Akzent (Caveat) --- */
.script-note {
font-family: var(--font-script);
font-size: 15px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 12px;
}
.script-note--secondary { color: var(--color-secondary); }
/* --------------------------------------------------------------------------
4. BUTTONS
--------------------------------------------------------------------------
Eckige Buttons (kein Radius), Satzschreibung, kräftige Schrift (700).
.btn als oder