/* =============================================================
Landingpage Builder — Design System
One stylesheet, 4 swappable themes via [data-theme].
Set the theme on .
============================================================= */
/* ---------- Base tokens (shared by all themes) ---------- */
:root {
/* Spacing scale */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
--space-3xl: 6.5rem;
/* Radii */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
/* Type scale (fluid) */
--fs-hero: clamp(2.5rem, 6vw, 4.5rem);
--fs-h2: clamp(1.9rem, 4vw, 3rem);
--fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
--fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
--fs-body: 1.0625rem;
--fs-small: 0.9rem;
/* Layout */
--container: 1180px;
--container-narrow: 820px;
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 0.55s;
/* Defaults (overridden per theme) */
--font-display: "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05);
--shadow-md: 0 10px 30px rgba(15, 23, 42, 0.10);
--shadow-lg: 0 30px 60px rgba(15, 23, 42, 0.16);
}
/* ---------- THEME: Clean & Minimal (Beratung, Agentur, IT) ---------- */
[data-theme="clean"] {
--font-display: "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--color-bg: #ffffff;
--color-surface: #f6f8fb;
--color-surface-2: #eef2f8;
--color-text: #0f172a;
--color-text-muted: #5b6678;
--color-primary: #2563eb;
--color-primary-strong: #1d4ed8;
--color-primary-contrast: #ffffff;
--color-accent: #06b6d4;
--color-border: #e3e9f1;
--hero-overlay: linear-gradient(115deg, rgba(37, 99, 235, 0.78), rgba(6, 182, 212, 0.62));
}
/* ---------- THEME: Bold & Modern (Barbershop, Fitness, Tattoo) ---------- */
[data-theme="bold"] {
--font-display: "Sora", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* Graphit-Basis — dunkel, aber nicht schwarz ("nicht zu dunkel") */
--color-bg: #121722;
--color-surface: #1a2030;
--color-surface-2: #232b3d;
--color-text: #f4f6fb;
--color-text-muted: #a3afc6;
/* Echtes Marken-Rot (Logo/Gebäude) als Signal-/Anruf-Akzent */
--color-primary: #e2231a;
--color-primary-strong: #c0150d;
--color-primary-contrast: #ffffff;
/* Glas-Cyan nur als dezenter Schimmer */
--color-accent: #5ec8e8;
--color-border: #2c3548;
/* Hero-Overlay: graphit + warmer Rot-Hauch, dunkel genug für weißen Text, aber freundlich */
--hero-overlay: linear-gradient(118deg, rgba(15, 19, 28, 0.86) 8%, rgba(18, 23, 34, 0.55) 48%, rgba(226, 35, 26, 0.30) 100%);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.55);
}
/* ---------- THEME: Elegant & Premium (Salon, Kosmetik, Spa) ---------- */
[data-theme="elegant"] {
--font-display: "Playfair Display", Georgia, serif;
--font-body: "Jost", system-ui, sans-serif;
--color-bg: #14110f;
--color-surface: #1d1916;
--color-surface-2: #261f1b;
--color-text: #f6efe7;
--color-text-muted: #b6a99b;
--color-primary: #c8a667;
--color-primary-strong: #b8924d;
--color-primary-contrast: #1a1512;
--color-accent: #e7d6b8;
--color-border: #34291f;
--hero-overlay: linear-gradient(180deg, rgba(20, 17, 15, 0.22), rgba(20, 17, 15, 0.60));
--shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
}
/* ---------- THEME: Bodenständig & Vertrauensvoll (Handwerk, Maler) ---------- */
[data-theme="earthy"] {
--font-display: "Bitter", Georgia, serif;
--font-body: "Mulish", system-ui, sans-serif;
--color-bg: #fbf7f1;
--color-surface: #ffffff;
--color-surface-2: #f1e8dc;
--color-text: #1f2a24;
--color-text-muted: #5d6b62;
--color-primary: #c2410c;
--color-primary-strong: #9a3412;
--color-primary-contrast: #ffffff;
--color-accent: #15803d;
--color-border: #e7dccb;
--hero-overlay: linear-gradient(115deg, rgba(31, 42, 36, 0.72), rgba(194, 65, 12, 0.45));
}
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 700; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg); }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--surface { background: var(--color-surface); }
.section-head { max-width: var(--container-narrow); margin-inline: auto; text-align: center; margin-bottom: var(--space-2xl); }
.eyebrow {
display: inline-block; font-family: var(--font-body); font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-small);
color: var(--color-primary); margin-bottom: var(--space-sm);
}
.section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.section-head p { font-size: var(--fs-lead); color: var(--color-text-muted); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
font-family: var(--font-body); font-weight: 700; font-size: 1rem;
padding: 0.95em 1.7em; border-radius: var(--radius-pill); border: 2px solid transparent;
cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--color-primary-strong); box-shadow: var(--shadow-lg); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--on-hero { backdrop-filter: blur(4px); }
.btn--lg { font-size: 1.08rem; padding: 1.05em 2em; }
/* ---------- Header / Nav ---------- */
.header {
position: fixed; inset: 0 0 auto 0; z-index: 50;
transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
padding-block: var(--space-md);
}
.header.is-scrolled {
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--color-border);
padding-block: var(--space-sm);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.brand__mark {
display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 800;
}
/* Echtes Kundenlogo (statt Monogramm). Höhe begrenzt, Breite frei → kein Verzerren. */
.brand__logo { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
/* Dunkles Logo auf dunklem Header schlecht sichtbar? Heller „Chip" als Hintergrund. */
.brand__logo--chip { background: #fff; padding: 6px 10px; border-radius: 10px; box-sizing: content-box; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a { font-weight: 600; color: var(--color-text-muted); transition: color 0.2s; }
.nav__links a:hover { color: var(--color-text); }
.nav__cta { display: flex; align-items: center; gap: var(--space-sm); }
.nav__toggle {
display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span { width: 26px; height: 2.5px; background: var(--color-text); border-radius: 2px; transition: 0.3s; }
/* ---------- Hero ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding-top: 6rem; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.1) saturate(1.04); }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); z-index: 1; }
/* Ken-Burns: zügiger, gut sichtbarer, weicher Zoom auf das echte Hero-Foto (Standard, kein KI-Video). „alternate" pendelt zurück → kein harter Loop-Reset. Greift nur auf ![]()
, nicht auf ein evtl. eingebautes