/* ==========================================================================
DH GmbH – Design-System 2026 (Premium Dark: Schwarz / Lila)
1. Tokens 2. Reset 3. Typografie 4. Layout
5. Buttons 6. Karten 7. Header/Nav 8. Sektionen
9. Formular 10. Demo-Sites 11. Utilities 12. Motion/A11y
========================================================================== */
/* ---------------------------------------------------------------- 1. Tokens */
/* Premium Dark: Tiefschwarz, Anthrazit, Lila. Alle Werte sind gegen die
Flaechen gemessen, auf denen sie stehen - Textfarben erreichen mindestens
4,5:1, Raender mindestens 3:1 (WCAG 1.4.3 und 1.4.11). */
:root {
/* --- Neutrale Tiefen: von ganz hinten nach vorne --------------------- */
--black: #050409; /* haerteste Tiefe, Video-Overlay, Fuss */
--ink-900: #0B0912; /* Seitengrund */
--ink-850: #100D1A; /* ruhige Zwischenflaeche */
--ink-800: #141020; /* getoente Sektion */
--ink-700: #171327; /* Karten */
--ink-600: #1F1935; /* Kasten in einer Karte */
--ink-500: #292040; /* eine Stufe hoeher, z. B. Eingabefeld */
/* --- Lila-Skala ------------------------------------------------------ */
--violet-950: #150C28;
--violet-900: #1E1140;
--violet-800: #2C1A5E;
--violet-700: #45289B;
--violet-600: #5B33B8;
--violet-550: #6D3FD1; /* Knopfflaeche, Weiss darauf = 6,4:1 */
--violet-500: #8B5CF6; /* Marken-Akzent */
--violet-400: #A78BFA; /* Akzent als Text, 6,7:1 auf Karte */
--violet-300: #C4B5FD;
--violet-200: #DDD6FE;
--white: #ffffff;
/* --- Semantische Tokens: nur diese in Komponenten verwenden ---------- */
--primary: var(--violet-550);
--primary-hover: var(--violet-500);
--primary-dark: var(--violet-400); /* im Dunkeln: Lila als Text/Akzent */
--primary-darker: var(--violet-800);
--primary-light: rgba(139, 92, 246, 0.16);
--primary-subtle: rgba(139, 92, 246, 0.08);
--primary-text: var(--violet-400); /* Lila als Text auf dunkel */
/* Sektionshintergruende - drei Ebenen, damit die Seite Struktur hat */
--bg: var(--ink-900);
--bg-muted: var(--ink-850);
--bg-subtle: var(--ink-800);
--bg-dark: var(--black);
--surface: var(--ink-700);
--surface-2: var(--ink-600);
--surface-3: var(--ink-500);
--surface-dark: var(--black);
/* Raender. --border ist der Standard und muss sichtbar sein. */
--border: #7565A8; /* 3,6:1 auf Karte, 3,9:1 auf Seitengrund,
3,0:1 selbst auf der hellsten Flaeche */
--border-line: #2E2545; /* nur Trennlinien INNERHALB einer Flaeche */
--border-strong: #8674C0;
--border-primary: var(--violet-500);
/* Rand im Aktiv-/Hover-Zustand. --primary waere als Linie auf dunkler
Karte nur 2,8:1 - dieser Wert erreicht 4,3:1 (WCAG 1.4.11). */
--border-aktiv: var(--violet-500);
--border-dark: rgba(255, 255, 255, 0.22);
/* --- Karten: kontextabhaengig, aber im Dunkeln fast überall gleich --- */
--card-bg: var(--ink-700);
--card-bg-2: var(--ink-600);
--card-bd: #7565A8;
--card-line: #2E2545;
--card-bd-strong: #8674C0;
--card-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 18px 40px -24px rgba(0, 0, 0, 0.9);
--card-shadow-hover:
0 1px 0 rgba(255, 255, 255, 0.07) inset,
0 26px 60px -26px rgba(0, 0, 0, 0.95),
0 0 0 1px rgba(139, 92, 246, 0.28),
0 0 40px -10px rgba(139, 92, 246, 0.35);
/* Eingabefelder */
--field-bg: var(--ink-600);
--field-bd: #7565A8;
--field-bd-hover: var(--violet-500);
/* --- Text ------------------------------------------------------------ */
--text: #F5F3FF; /* Ueberschriften, 16,5:1 */
--text-body: #C3BDD6; /* Fliesstext, 10:1 */
--text-muted: #9891AE; /* Sekundaertext, 6:1 */
--text-on-dark: #F5F3FF;
--text-on-dark-muted: #C3BDD6;
--success: #34D399;
--success-bg: rgba(52, 211, 153, 0.12);
--success-bd: #2F8F6B;
--warning: #FBBF24;
--warning-bg: rgba(251, 191, 36, 0.12);
--warning-bd: #9A7420;
--error: #F87171;
--error-bg: rgba(248, 113, 113, 0.12);
--error-bd: #A24C4C;
/* --- Verlaeufe und Glows --------------------------------------------- */
--grad-primary: linear-gradient(135deg, var(--violet-550) 0%, var(--violet-500) 100%);
--grad-deep: linear-gradient(150deg, var(--violet-900) 0%, var(--ink-900) 55%, var(--black) 100%);
--grad-text: linear-gradient(110deg, #C4B5FD 0%, #8B5CF6 55%, #A78BFA 100%);
--glow-soft: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent);
--r-sm: 8px;
--r: 12px;
--r-lg: 16px;
--r-xl: 22px;
--r-2xl: 28px;
--r-full: 999px;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.55);
--shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
--shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.95);
--shadow-blue: 0 14px 34px -16px rgba(109, 63, 209, 0.7);
--shadow-blue-lg: 0 30px 70px -24px rgba(109, 63, 209, 0.75);
--container: 1200px;
--gutter: clamp(20px, 5vw, 40px);
--section-y: clamp(72px, 9vw, 128px);
--header-h: 74px;
--font-sans: "Segoe UI Variable Display", "Segoe UI", -apple-system,
BlinkMacSystemFont, "SF Pro Display", Inter, Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
"Liberation Mono", monospace;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
color-scheme: dark;
}
/* ----------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
@supports (overflow: clip) { html { overflow-x: clip; } }
/* Die dekorativen Farbschleier (.glow) ragen absichtlich ueber den Rand ihrer
Sektion hinaus. Aufgefangen wurde das bisher allein von overflow-x: clip am
- das kennt Safari aber erst ab Version 16. Dort haette die Seite
waagerecht gescrollt.
Deshalb klemmt jetzt jede Sektion ihre eigenen Schleier ab. Bewusst nur
diese Sektionen und nicht .section allgemein: overflow wuerde sonst die
klebende Kopfzeile der Vergleichstabelle ausser Kraft setzen. */
.hat-glow { overflow: hidden; }
body {
background: var(--bg);
color: var(--text-body);
font-family: var(--font-sans);
font-size: 1.0625rem;
line-height: 1.65;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
overflow-wrap: break-word;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
/* Muss nach den Layout-Regeln greifen: sonst überschreibt z. B. display:flex
das vom Browser gesetzte display:none des hidden-Attributs. */
[hidden] { display: none !important; }
::selection { background: var(--violet-200); color: var(--ink-900); }
:focus-visible {
outline: 3px solid var(--violet-500);
outline-offset: 2px;
border-radius: 4px;
}
/* ------------------------------------------------------------ 3. Typografie */
h1, h2, h3, h4 {
color: var(--text);
font-weight: 640;
line-height: 1.14;
letter-spacing: -0.022em;
text-wrap: balance;
}
.display {
font-size: clamp(2.4rem, 1.35rem + 4.4vw, 4.4rem);
line-height: 1.05;
letter-spacing: -0.035em;
font-weight: 680;
color: var(--text);
text-wrap: pretty;
}
.h2 {
font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem);
letter-spacing: -0.03em;
font-weight: 660;
}
.h3 { font-size: clamp(1.25rem, 1.08rem + 0.6vw, 1.5rem); }
.lead {
font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
line-height: 1.62;
color: var(--text-body);
text-wrap: pretty;
}
.muted { color: var(--text-body); }
.muted-2 { color: var(--text-muted); }
.small { font-size: 0.9375rem; }
.tiny { font-size: 0.8125rem; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--primary-dark);
}
.eyebrow::before {
content: "";
width: 24px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.grad-text {
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Text auf dunklen Flächen (CTA-Band, Footer) */
.on-dark { color: var(--text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lead, .on-dark .muted { color: var(--text-on-dark-muted); }
.on-dark .eyebrow { color: var(--violet-300); }
/* ----------------------------------------------------------------- 4. Layout */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: 800px; }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* --------------------------------------------------------------- 5. Buttons */
.btn {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-bd: var(--border-strong);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 26px;
border-radius: var(--r);
border: 1.5px solid var(--btn-bd);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: 1rem;
font-weight: 620;
letter-spacing: -0.01em;
text-align: center;
cursor: pointer;
white-space: nowrap;
transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), color 0.18s var(--ease);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
/* Primär: kräftiges Blau, weiße Schrift (Kontrast 5,1:1) */
.btn--primary {
--btn-bg: var(--primary);
--btn-fg: #fff;
--btn-bd: var(--primary);
box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
--btn-bg: var(--violet-500);
--btn-bd: var(--violet-500);
box-shadow: var(--shadow-blue-lg);
}
/* Sekundär: weiß mit blauem Rand */
.btn--secondary {
--btn-bg: var(--surface-2);
--btn-fg: var(--violet-300);
--btn-bd: var(--border-strong);
box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
--btn-bd: var(--violet-500);
--btn-bg: var(--violet-900);
box-shadow: var(--shadow-sm);
}
/* Dezent: nur Text, für Nebenaktionen */
.btn--ghost {
--btn-bd: transparent;
--btn-fg: var(--text-body);
padding-inline: 14px;
}
.btn--ghost:hover { --btn-fg: var(--primary-dark); --btn-bg: var(--primary-subtle); }
/* DH-KI-Knopf: eigene Handschrift, damit er sich vom Haupt-CTA unterscheidet
und trotzdem zum Blau der Marke passt. */
.btn--ki {
background: var(--ink-900);
color: #fff;
border: 1px solid var(--violet-800);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
gap: 9px;
}
.btn--ki:hover { background: var(--violet-900); border-color: var(--violet-700); }
.btn--ki:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.btn__ki-punkt {
width: 8px;
height: 8px;
border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
.btn--ki .btn__ki-punkt { animation: ki-puls 2.6s var(--ease) infinite; }
@keyframes ki-puls {
0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22); }
50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.08); }
}
}
/* Auf dunklem Grund (CTA-Band, Footer) */
.btn--on-dark {
--btn-bg: #fff;
--btn-fg: var(--violet-900);
--btn-bd: #fff;
box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}
.btn--on-dark:hover { --btn-bg: var(--primary-subtle); --btn-bd: var(--primary-subtle); }
.btn--outline-dark {
--btn-bg: transparent;
--btn-fg: #fff;
--btn-bd: rgba(255, 255, 255, 0.4);
}
.btn--outline-dark:hover { --btn-bd: #fff; --btn-bg: rgba(255, 255, 255, 0.1); }
/* Glas: fuer Flaechen mit Bild oder Film dahinter. Halbtransparent, aber
mit genug Eigenfarbe, dass die Schrift ueber jedem Filmbild lesbar ist. */
.btn--glass {
--btn-bg: rgba(23, 19, 39, 0.66);
--btn-fg: #F5F3FF;
--btn-bd: rgba(196, 181, 253, 0.42);
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
box-shadow: var(--shadow-sm);
}
.btn--glass:hover {
--btn-bg: rgba(45, 32, 78, 0.82);
--btn-bd: var(--violet-400);
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn__arrow { transition: transform 0.22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 620;
color: var(--primary-dark);
padding: 6px 2px;
border-radius: 6px;
}
.link-arrow svg { transition: transform 0.22s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ----------------------------------------------------------------- 6. Karten */
/* Kontextabhaengiger Kartenkontrast --------------------------------------
Grundregel: eine Karte ist nie dieselbe Farbe wie ihr Untergrund.
- auf Weiss -> helle graue Karte mit grauem Rand
- auf hellblau/grau -> weisse Karte mit etwas kraeftigerem Rand
- auf dunkelblau -> aufgehellte Flaeche mit hellem Rand
Bauteile lesen nur --card-bg / --card-bd, nicht die Sonderfaelle. */
/* Auf getoenten Flaechen liegt die Karte eine Stufe hoeher als der Grund,
damit sie sich auch im Dunkeln klar abhebt. Der Rand bleibt ueberall
derselbe: violettes Grau mit mindestens 3:1 gegen beide Flaechen. */
.section--subtle,
.hero,
.page-hero {
--card-bg: var(--ink-700);
--card-bg-2: var(--ink-600);
}
.section--muted {
--card-bg: var(--ink-700);
--card-bg-2: var(--ink-600);
}
/* Sehr dunkle Flaechen (CTA-Band, Fuss, Video-Overlay): dort steht die Karte
als aufgehellte Glasflaeche, sonst verschwindet sie im Schwarz. */
.on-dark,
.cta-band,
.footer,
.section--dark {
--card-bg: rgba(255, 255, 255, 0.055);
--card-bg-2: rgba(255, 255, 255, 0.1);
--card-bd: rgba(196, 181, 253, 0.34);
--card-line: rgba(255, 255, 255, 0.14);
--card-bd-strong: rgba(196, 181, 253, 0.58);
--field-bd: rgba(196, 181, 253, 0.4);
}
/* ---------------------------------------------------------------------------
Grundregel des Designs: Jedes Rechteck, das als eigener Bereich gelesen
wird, hat einen sichtbaren grauen Rand. Diese Sammelregel setzt ihn einmal
zentral - einzelne Bauteile ueberschreiben nur noch Farbe oder Radius.
--------------------------------------------------------------------------- */
.card,
.preis,
.box,
.notice,
.form-card,
.tl-step,
.faq__item,
.konzept,
.vergleich-wrap,
.kosten-split__box,
.indiv,
.indiv__item,
.indiv__preisbox,
.indiv__hinweis,
.demo-karte,
.demo-hinweis,
.berater-quick__btn,
.berater-start,
.checkitem,
.input,
.select,
.textarea {
border: 1px solid var(--card-bd);
}
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--card-bg);
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
padding: clamp(22px, 2.6vw, 30px);
box-shadow: var(--card-shadow);
transition: transform 0.28s var(--ease), border-color 0.28s var(--ease),
box-shadow 0.28s var(--ease);
}
.card--hover:hover {
transform: translateY(-4px);
border-color: var(--border-aktiv);
box-shadow: var(--card-shadow-hover);
}
/* Karte auf einer Karte: eine Stufe kraeftiger, damit die Schachtelung
erkennbar bleibt. */
.card .card,
.card .box,
.box {
background: var(--card-bg-2);
border: 1px solid var(--card-bd);
border-radius: var(--r);
padding: 16px 18px;
}
.card__title { font-size: 1.1875rem; font-weight: 640; letter-spacing: -0.015em; color: var(--text); }
.card__text { color: var(--text-body); margin-top: 10px; font-size: 0.9875rem; }
/* Icon-Kachel: hellblaues Quadrat mit blauem Symbol */
.icon-tile {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: var(--r);
background: var(--primary-light);
color: var(--primary-dark);
flex-shrink: 0;
}
.icon-tile--lg { width: 54px; height: 54px; border-radius: var(--r-lg); }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--r-full);
border: 1px solid var(--card-bd);
background: var(--surface-2);
font-size: 0.75rem;
font-weight: 640;
letter-spacing: 0.03em;
color: var(--text-body);
white-space: nowrap;
}
.badge--primary {
border-color: transparent;
background: var(--primary);
color: #fff;
box-shadow: var(--shadow-blue);
}
.badge--soft {
border-color: #7565A8;
background: var(--primary-light);
color: var(--primary-dark);
}
.badge--demo {
border-color: rgba(196, 181, 253, 0.34);
background: rgba(11, 9, 18, 0.78);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.6875rem;
}
/* -------------------------------------------------------------- 7. Header */
.header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(11, 9, 18, 0.72);
border-bottom: 1px solid transparent;
transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
box-shadow 0.25s var(--ease);
}
/* Der Block war kaputt: Ein frueherer Durchlauf zum Ergaenzen der
-webkit-Prefixe hat die @supports-Bedingung zerschossen, wodurch der
Header seinen Blur verlor. Auf dem Telefon schien dadurch der Inhalt
sichtbar durch die Kopfzeile - genau der gemeldete Effekt. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.header {
backdrop-filter: saturate(150%) blur(16px);
-webkit-backdrop-filter: saturate(150%) blur(16px);
}
}
.header.is-scrolled {
background: rgba(11, 9, 18, 0.92);
border-bottom-color: var(--border-line);
box-shadow: var(--shadow-sm);
}
.header__inner {
display: flex;
align-items: center;
gap: 16px;
min-height: var(--header-h);
}
.logo {
display: inline-flex;
align-items: center;
gap: 11px;
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.022em;
color: var(--text);
padding: 6px 4px;
border-radius: 8px;
flex-shrink: 0;
}
.logo__mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--grad-primary);
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: -0.02em;
box-shadow: var(--shadow-blue);
}
.logo__sub {
display: block;
color: var(--text-muted);
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.03em;
line-height: 1.15;
text-transform: uppercase;
}
.on-dark .logo { color: #fff; }
.on-dark .logo__sub { color: var(--text-on-dark-muted); }
.nav { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
padding: 10px 14px;
border-radius: 9px;
font-size: 0.9375rem;
font-weight: 560;
color: var(--text-body);
transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav__link:hover { color: var(--primary-dark); background: var(--primary-subtle); }
/* Aktive Seite: klar erkennbar, ohne den Rest der Leiste zu überladen */
.nav__link[aria-current="page"] {
color: var(--primary-dark);
background: var(--primary-light);
font-weight: 660;
}
.mobilnav__link[aria-current="page"] {
color: var(--primary-dark);
background: var(--primary-subtle);
font-weight: 660;
}
.header__actions { display: none; align-items: center; gap: 10px; margin-left: auto; }
/* Mobile-Navigation: bewusst ohne JavaScript (details/summary) */
.mobilnav { margin-left: auto; }
.mobilnav__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--r);
border: 1px solid var(--border-strong);
background: var(--surface-2);
color: var(--text);
cursor: pointer;
list-style: none;
box-shadow: var(--shadow-xs);
-webkit-tap-highlight-color: transparent;
}
.mobilnav__btn::-webkit-details-marker { display: none; }
.mobilnav__bars { position: relative; width: 18px; height: 12px; }
.mobilnav__bars span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.26s var(--ease), opacity 0.2s var(--ease);
}
.mobilnav__bars span:nth-child(1) { top: 0; }
.mobilnav__bars span:nth-child(2) { top: 5px; }
.mobilnav__bars span:nth-child(3) { top: 10px; }
.mobilnav[open] .mobilnav__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mobilnav[open] .mobilnav__bars span:nth-child(2) { opacity: 0; }
.mobilnav[open] .mobilnav__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobilnav__panel {
position: fixed;
inset: var(--header-h) 0 auto 0;
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
padding: 18px var(--gutter) 28px;
background: var(--ink-850);
border-bottom: 1px solid var(--border-line);
box-shadow: var(--shadow-lg);
animation: panel-in 0.24s var(--ease-out);
}
.mobilnav__panel a.mobilnav__link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: 0 4px;
font-size: 1.0625rem;
font-weight: 560;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.mobilnav__panel a.mobilnav__link:hover { color: var(--primary-dark); }
.mobilnav__panel a.mobilnav__link svg { color: var(--text-muted); }
.mobilnav__cta { display: grid; gap: 10px; margin-top: 20px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Mit sechs Navigationspunkten braucht die Kopfzeile mehr Platz: Die
Desktop-Navigation erscheint deshalb erst ab 1060 px. Die Telefonnummer
kommt noch etwas spaeter dazu, damit nichts gedraengt wirkt.
Achtung: Der Wert steht auch im Skript in layout.jsx - beide muessen
uebereinstimmen. */
@media (min-width: 1140px) {
.nav { display: flex; }
.header__actions { display: flex; }
.mobilnav { display: none; }
}
@media (min-width: 1140px) and (max-width: 1599px) {
.nav__link { padding-inline: 9px; font-size: 0.9rem; }
/* Die Telefonnummer braucht mit '+49 160 95757572' spuerbar mehr Platz als
zuvor. Bei genau 1440 px lief die Kopfzeile dadurch 6 px ueber den Rand
hinaus - die Nummer kommt deshalb erst ab 1600 px dazu. Im Mobilmenue,
auf der Kontaktseite und im Fuss steht sie unabhaengig davon immer. */
.header__tel { display: none; }
}
.skip-link {
position: absolute;
left: 12px;
top: 8px;
z-index: 200;
padding: 12px 18px;
border-radius: var(--r);
background: var(--primary);
color: #fff;
font-weight: 620;
transform: translateY(-160%);
transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }
/* ------------------------------------------------------------- 8. Sektionen */
.section {
position: relative;
overflow: hidden;
padding-block: var(--section-y);
}
@supports (overflow: clip) { .section { overflow: clip; } }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }
/* Wechselnder Rhythmus: Weiß → helles Blau → neutrales Grau → Weiß.
Drei Flaechenebenen statt zwei, damit die Seite nicht als eine einzige
weisse Flaeche gelesen wird. Jede getoente Sektion bekommt zusaetzlich
eine feine Trennlinie nach oben und unten. */
.section--subtle {
background: var(--bg-subtle);
border-block: 1px solid var(--border-line);
}
.section--muted {
background: var(--bg-muted);
border-block: 1px solid var(--border);
}
.section__head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow::before { display: none; }
.section__head .h2 { margin-top: 14px; }
.section__head .lead { margin-top: 16px; }
/* Dezente Blauflächen im Hintergrund */
.glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
opacity: 0.55;
}
.glow--a { background: rgba(109, 63, 209, 0.30); }
.glow--b { background: rgba(139, 92, 246, 0.24); }
.section > .container { position: relative; z-index: 1; }
/* Hero ---------------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
padding-top: clamp(48px, 6vw, 88px);
padding-bottom: clamp(56px, 7vw, 96px);
background:
radial-gradient(110% 80% at 82% -12%, rgba(109, 63, 209, 0.34) 0%, transparent 62%),
radial-gradient(80% 60% at 6% 4%, rgba(139, 92, 246, 0.2) 0%, transparent 58%),
linear-gradient(180deg, var(--black) 0%, var(--ink-900) 100%);
border-bottom: 1px solid var(--border-line);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Standbild liegt unter dem Video. Es traegt den Hintergrund, solange das
Video noch nicht laeuft - und auf Mobilgeraeten dauerhaft.
Bild und Video laufen mit voller Deckkraft; abgedunkelt wird ausschliesslich
im Overlay darueber. Sonst multipliziert sich die Daempfung und vom Film
bleibt nichts uebrig. */
/* Standbild. Seit es ein echtes ![]()
ist (statt eines CSS-Hintergrunds),
findet der Browser es beim Lesen des HTML und muss nicht erst auf das
Stylesheet warten - es ist das LCP-Element dieser Seite. */
.hero__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Das Video liegt ueber dem Standbild und ist unsichtbar, bis es wirklich
abspielt. Dadurch braucht es kein eigenes poster-Attribut mehr - das hatte
dasselbe Bild ein zweites Mal angefordert. Die Klasse setzt das Skript
erst beim Ereignis "playing", also lange nach dem Hydrieren; React sieht
sie nie und es entsteht kein Hydration-Unterschied.
Ohne JavaScript startet das Video ohnehin nicht - dann bleibt das
Standbild stehen, was genau richtig ist. */
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.18) contrast(1.06);
opacity: 0;
transition: opacity 1.1s ease;
}
.hero__video.is-bereit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero__video { transition: none; }
}
/* Sehr weiche Abdunklung nur an den aeussersten Raendern. Die Mitte bleibt
offen, damit das Material zu sehen ist. */
.hero__vignette {
position: absolute;
inset: 0;
background: radial-gradient(135% 105% at 52% 40%, transparent 52%, rgba(5, 4, 9, 0.5) 100%);
}
/* Overlay ueber dem Video. Drei Lagen mit klarer Aufgabenteilung:
1. Leseflaeche: dunkel genau dort, wo links die Schrift steht, und nach
rechts hin offen - dort liegt nur die Vorschaukarte, die ihre eigene
Flaeche mitbringt.
2. Uebergang: unten weich in den Seitengrund, damit der Hero nicht hart
abgeschnitten wirkt.
3. Ein leichter Lila-Schleier, damit das warme Filmmaterial zur Marke passt.
Bewusst duenn - er soll faerben, nicht zudecken. */
.hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(96deg,
rgba(6, 5, 12, 0.90) 0%,
rgba(6, 5, 12, 0.82) 26%,
rgba(6, 5, 12, 0.46) 48%,
rgba(6, 5, 12, 0.20) 68%,
rgba(6, 5, 12, 0.30) 100%),
linear-gradient(180deg,
rgba(6, 5, 12, 0.42) 0%,
rgba(6, 5, 12, 0.06) 22%,
rgba(6, 5, 12, 0.06) 58%,
rgba(11, 9, 18, 0.86) 93%,
var(--ink-900) 100%),
linear-gradient(115deg,
rgba(69, 40, 155, 0.32) 0%,
rgba(21, 12, 40, 0.10) 55%,
rgba(139, 92, 246, 0.14) 100%);
}
/* Unter 1040 px steht der Text nicht mehr neben der Vorschaukarte, sondern
darueber - dann traegt die waagerechte Leseflaeche nicht mehr und es
braucht einen gleichmaessigen Schleier ueber die volle Breite. */
@media (max-width: 1039px) {
.hero__overlay {
background:
linear-gradient(180deg,
rgba(6, 5, 12, 0.80) 0%,
rgba(6, 5, 12, 0.72) 38%,
rgba(6, 5, 12, 0.56) 62%,
rgba(11, 9, 18, 0.90) 94%,
var(--ink-900) 100%),
linear-gradient(115deg,
rgba(69, 40, 155, 0.30) 0%,
rgba(21, 12, 40, 0.10) 55%,
rgba(139, 92, 246, 0.12) 100%);
}
.hero__vignette { background: radial-gradient(140% 110% at 50% 38%, transparent 60%, rgba(5, 4, 9, 0.42) 100%); }
}
.hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(167, 139, 250, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(167, 139, 250, 0.07) 1px, transparent 1px);
background-size: 62px 62px;
mask-image: radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 78%);
-webkit-mask-image: radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 78%);
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
gap: clamp(38px, 5vw, 60px);
align-items: center;
}
@media (min-width: 1040px) {
.hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.hero h1 { margin-top: 18px; }
.hero__text { margin-top: 20px; max-width: 54ch; }
.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero__note span {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-body);
font-size: 0.875rem;
font-weight: 550;
}
.hero__note svg { color: var(--success); }
.facts {
margin-top: clamp(34px, 4.5vw, 50px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 2vw, 22px);
padding: clamp(20px, 2.6vw, 28px);
background: var(--card-bg);
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.facts > div + div {
border-left: 1px solid var(--card-line);
padding-left: clamp(10px, 2vw, 22px);
}
.facts__value {
font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem);
font-weight: 680;
letter-spacing: -0.03em;
color: var(--primary-dark);
}
.facts__label { color: var(--text-muted); font-size: 0.8125rem; margin-top: 2px; line-height: 1.35; }
/* Vollbild-Hero mit Film -------------------------------------------------
min-height in svh, damit die Adressleiste auf dem Handy nicht dazwischen-
funkt. Der Hero fuellt den Bildschirm, die Kennzahlen sitzen am unteren
Rand - so ist beim Laden sofort klar, dass es weitergeht. */
.hero--film {
min-height: calc(100svh - var(--header-h));
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(56px, 7vw, 96px);
padding-bottom: clamp(28px, 4vw, 48px);
}
.hero--film .hero__inner { flex: 1 1 auto; align-content: center; }
.hero--film .hero__facts-wrap { position: relative; z-index: 1; }
.hero__title { text-shadow: 0 2px 30px rgba(5, 4, 9, 0.7); }
.hero--film .hero__text { color: #DAD5EA; }
/* Kennzahlen als Glasleiste ueber dem Film */
.facts--glas {
background: rgba(23, 19, 39, 0.62);
border-color: rgba(196, 181, 253, 0.34);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
box-shadow: var(--shadow), 0 0 0 1px rgba(139, 92, 246, 0.16) inset;
}
.facts--glas .facts__value { color: var(--violet-300); }
.facts--glas .facts__label { color: #C3BDD6; }
.facts--glas > div + div { border-left-color: rgba(196, 181, 253, 0.26); }
/* Augenbraue vor dem Film etwas kraeftiger */
.eyebrow--film { color: var(--violet-300); }
/* Nutzen: Problem → Lösung als Karten ---------------------------------- */
/* Vier Aussagen ergeben auf breiten Schirmen ein sauberes 2x2-Raster
statt einer Dreierreihe mit einzelner Karte darunter. */
.nutzen-grid {
display: grid;
gap: clamp(16px, 2vw, 22px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.nutzen-karte { padding: clamp(22px, 2.6vw, 28px); }
.nutzen-karte__problem {
display: flex;
gap: 11px;
align-items: flex-start;
color: var(--text-muted);
font-size: 0.9875rem;
font-style: italic;
}
.nutzen-karte__problem svg { flex-shrink: 0; margin-top: 3px; color: var(--text-muted); }
.nutzen-karte__hr {
height: 1px;
border: 0;
background: var(--card-line);
margin-block: 16px;
}
.nutzen-karte__loesung {
display: flex;
gap: 11px;
align-items: flex-start;
color: var(--text);
font-weight: 570;
letter-spacing: -0.01em;
line-height: 1.5;
}
.nutzen-karte__loesung svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }
/* Wegweiser auf der Startseite ----------------------------------------- */
.wegweiser {
display: grid;
gap: clamp(14px, 1.8vw, 20px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.wegweiser__karte {
position: relative;
display: grid;
gap: 8px;
align-content: start;
padding: clamp(22px, 2.6vw, 30px);
padding-right: clamp(52px, 5vw, 64px);
border-radius: var(--r-lg);
border: 1px solid var(--card-bd);
background: var(--card-bg);
box-shadow: var(--card-shadow);
color: var(--text-body);
transition: transform 0.24s var(--ease), border-color 0.24s var(--ease),
box-shadow 0.24s var(--ease);
}
.wegweiser__karte:hover {
transform: translateY(-4px);
border-color: var(--border-aktiv);
box-shadow: var(--card-shadow-hover);
}
.wegweiser__karte:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.wegweiser__nr {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--primary-dark);
}
.wegweiser__titel {
font-size: 1.3125rem;
font-weight: 680;
letter-spacing: -0.022em;
color: var(--text);
}
.wegweiser__text { font-size: 0.9375rem; line-height: 1.6; }
.wegweiser__pfeil {
position: absolute;
top: clamp(22px, 2.6vw, 30px);
right: clamp(20px, 2.4vw, 26px);
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--card-bd);
background: var(--surface);
color: var(--primary);
transition: transform 0.24s var(--ease), background-color 0.24s var(--ease),
color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.wegweiser__karte:hover .wegweiser__pfeil {
background: var(--primary);
border-color: var(--border-aktiv);
color: #fff;
transform: translateX(3px);
}
/* Leistungen ----------------------------------------------------------- */
.leistung__points { margin-top: 16px; display: grid; gap: 8px; }
.leistung__points li {
display: flex;
gap: 9px;
align-items: center;
color: var(--text-muted);
font-size: 0.875rem;
}
.leistung__points li::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--primary);
flex-shrink: 0;
}
/* Preise --------------------------------------------------------------- */
.kosten-split {
display: grid;
gap: 14px;
margin-bottom: clamp(32px, 4vw, 44px);
}
@media (min-width: 780px) { .kosten-split { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.kosten-split__box {
padding: 22px 26px;
border-radius: var(--r-lg);
border: 1px solid var(--card-bd);
background: var(--card-bg);
box-shadow: var(--card-shadow);
}
.kosten-split__label {
font-size: 0.75rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--primary-dark);
font-weight: 700;
}
.kosten-split__value {
font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
font-weight: 660;
letter-spacing: -0.025em;
margin-top: 8px;
color: var(--text);
}
.kosten-split__note { color: var(--text-muted); font-size: 0.875rem; margin-top: 6px; }
.kosten-split__plus {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin-inline: auto;
border-radius: 50%;
border: 1px solid var(--violet-200);
background: var(--primary-light);
color: var(--primary-dark);
font-size: 1.25rem;
font-weight: 600;
}
.preise { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .preise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.preis {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(26px, 3vw, 34px);
border-radius: var(--r-xl);
border: 1px solid var(--card-bd);
background: var(--card-bg);
box-shadow: var(--card-shadow);
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.preis:hover { border-color: var(--border-aktiv); transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
/* Business: das Hauptprodukt – kräftig blau hervorgehoben */
.preis--highlight {
border: 2px solid var(--violet-500);
background:
linear-gradient(180deg, rgba(139, 92, 246, 0.22) 0%, var(--ink-700) 46%);
box-shadow: var(--shadow-blue-lg);
}
.preis--highlight:hover { box-shadow: 0 40px 90px -30px rgba(139, 92, 246, 0.55); }
@media (min-width: 1000px) {
.preis--highlight { transform: translateY(-16px); }
.preis--highlight:hover { transform: translateY(-20px); }
}
.preis__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; }
.preis__name { font-size: 1.375rem; font-weight: 680; letter-spacing: -0.022em; color: var(--text); }
.preis__tag { color: var(--primary-dark); font-size: 0.875rem; font-weight: 640; margin-top: 4px; }
.preis__amount { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.preis__value {
font-size: clamp(2.3rem, 1.7rem + 2vw, 3rem);
font-weight: 700;
letter-spacing: -0.042em;
line-height: 1;
color: var(--text);
}
.preis__unit { color: var(--text-muted); font-size: 0.875rem; }
.preis__once {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 0.8125rem;
}
.preis__desc { color: var(--text-body); font-size: 0.9375rem; margin-top: 16px; }
@media (min-width: 1000px) { .preis__desc { min-height: 6.9em; } }
.preis__ideal {
margin-top: 14px;
padding: 11px 13px;
border-radius: var(--r-sm);
background: var(--card-bg-2);
border: 1px solid var(--card-bd);
color: var(--text-muted);
font-size: 0.8125rem;
}
.preis--highlight .preis__ideal { background: rgba(255, 255, 255, 0.07); border-color: var(--card-bd-strong); }
.preis__cta { margin-top: 22px; }
.preis__sep {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--card-line);
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.feature-list { margin-top: 14px; display: grid; gap: 11px; }
.feature-list li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: start;
font-size: 0.9375rem;
color: var(--text-body);
line-height: 1.5;
}
.feature-list svg { margin-top: 3px; color: var(--primary); flex-shrink: 0; }
.preis--highlight .feature-list li { color: var(--text); }
.preis-hinweis {
margin-top: 26px;
padding: 18px 22px;
border-radius: var(--r);
border: 1px solid var(--violet-200);
background: var(--primary-subtle);
color: var(--text-body);
font-size: 0.9375rem;
text-align: center;
}
/* Individuelle Projekte: eigenes Band unter den drei festen Paketen ----- */
.indiv {
margin-top: clamp(28px, 3.6vw, 44px);
padding: clamp(26px, 3.2vw, 40px);
border-radius: var(--r-xl);
border: 1px solid var(--card-bd);
background: var(--card-bg);
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
.indiv::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--grad-primary);
}
.indiv__head { display: grid; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 900px) {
.indiv__head { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.indiv__title {
font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
font-weight: 680;
letter-spacing: -0.028em;
line-height: 1.2;
color: var(--text);
margin-top: 12px;
}
.indiv__text { color: var(--text-body); margin-top: 12px; max-width: 62ch; }
.indiv__preisbox {
padding: 20px 22px;
border-radius: var(--r-lg);
border: 1px solid #5F84B8;
background: var(--primary-subtle);
text-align: center;
}
.indiv__ab {
font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
color: var(--text);
}
.indiv__abnote {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 10px; color: var(--text-muted); font-size: 0.8125rem;
}
.indiv__abnote svg { flex-shrink: 0; color: var(--primary-dark); }
.indiv__mini { margin-top: 10px; font-size: 0.75rem; color: var(--text-muted); }
.indiv__grid {
list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0;
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.indiv__item {
display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
padding: 14px 16px;
border-radius: var(--r);
border: 1px solid var(--card-bd);
background: var(--card-bg-2);
}
.indiv__icon {
display: grid; place-items: center;
width: 26px; height: 26px; border-radius: 8px;
background: var(--primary-light); color: var(--primary-dark);
}
.indiv__itemtitel { font-weight: 640; color: var(--text); font-size: 0.9375rem; }
.indiv__itemtext { color: var(--text-body); font-size: 0.875rem; margin-top: 3px; line-height: 1.55; }
.indiv__hinweis {
display: flex; gap: 12px; align-items: flex-start;
margin-top: clamp(22px, 2.6vw, 30px);
padding: 16px 18px;
border-radius: var(--r);
border: 1px solid #5F84B8;
background: var(--primary-subtle);
color: var(--text-body);
font-size: 0.9375rem;
}
.indiv__hinweis svg { flex-shrink: 0; margin-top: 2px; color: var(--primary-dark); }
.indiv__cta { margin-top: 22px; }
/* Betreuung ------------------------------------------------------------ */
.care { display: grid; gap: 20px; }
@media (min-width: 1000px) { .care { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.care__price { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.care__value { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--text); }
.care__value--open { font-size: 1.55rem; color: var(--primary-dark); }
.care__unit { color: var(--text-muted); font-size: 0.875rem; }
/* Paket-Vergleich (Tabelle) -------------------------------------------- */
.vergleich-wrap {
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
background: var(--card-bg);
box-shadow: var(--card-shadow);
overflow: hidden;
}
.vergleich-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.vergleich {
min-width: 620px;
font-size: 0.9375rem;
}
.vergleich caption {
caption-side: top;
padding: 16px 20px;
text-align: left;
color: var(--text-muted);
font-size: 0.8125rem;
border-bottom: 1px solid var(--card-bd);
background: var(--card-bg-2);
}
.vergleich th, .vergleich td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--card-line);
vertical-align: middle;
}
.vergleich thead th {
position: sticky;
top: 0;
background: var(--card-bg);
color: var(--text);
font-weight: 660;
font-size: 0.9375rem;
border-bottom: 2px solid var(--card-bd-strong);
white-space: nowrap;
}
.vergleich thead th span {
display: block;
font-weight: 560;
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: 2px;
}
.vergleich tbody th {
font-weight: 560;
color: var(--text-body);
width: 42%;
}
.vergleich td { text-align: center; width: 19.33%; }
.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }
.vergleich tbody tr:hover { background: var(--primary-subtle); }
.vergleich .col-highlight {
background: var(--primary-subtle);
border-inline: 1px solid var(--violet-200);
}
.vergleich thead .col-highlight { color: var(--primary-dark); }
.vergleich .ja { color: var(--primary); }
.vergleich .nein { color: var(--text-muted); }
.vergleich .wert { color: var(--text); font-weight: 600; font-size: 0.875rem; }
.vergleich__hinweis {
padding: 12px 20px;
background: var(--card-bg-2);
color: var(--text-muted);
font-size: 0.8125rem;
border-top: 1px solid var(--card-bd);
}
.scroll-hint {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--text-muted);
font-size: 0.8125rem;
}
@media (min-width: 720px) { .scroll-hint { display: none; } }
/* Ablauf als Zeitstrahl ------------------------------------------------ */
.timeline {
position: relative;
display: grid;
gap: clamp(18px, 2.4vw, 28px);
}
@media (min-width: 900px) {
.timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}
.tl-step {
position: relative;
padding: clamp(22px, 2.6vw, 28px);
background: var(--card-bg);
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
box-shadow: var(--card-shadow);
transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.tl-step:hover { transform: translateY(-4px); border-color: var(--border-aktiv); box-shadow: var(--card-shadow-hover); }
.tl-step__top { display: flex; align-items: center; gap: 14px; }
.tl-step__num {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-weight: 700;
font-size: 0.9375rem;
letter-spacing: -0.01em;
flex-shrink: 0;
box-shadow: var(--shadow-blue);
}
.tl-step--optional .tl-step__num { background: var(--primary-light); color: var(--primary-dark); box-shadow: none; }
.tl-step__dauer {
margin-left: auto;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 600;
background: var(--card-bg-2);
border: 1px solid var(--card-bd);
border-radius: var(--r-full);
padding: 4px 10px;
white-space: nowrap;
}
.tl-step__title { font-size: 1.125rem; font-weight: 640; margin-top: 16px; color: var(--text); }
.tl-step__text { color: var(--text-body); margin-top: 8px; font-size: 0.9375rem; }
/* Verbindungslinie zwischen den Schritten (nur Desktop, rein dekorativ) */
@media (min-width: 900px) {
.tl-step::after {
content: "";
position: absolute;
top: 44px;
right: -24px;
width: 24px;
height: 2px;
background: linear-gradient(90deg, var(--violet-200), var(--primary-light));
}
.tl-step:nth-child(3n)::after,
.tl-step:last-child::after { display: none; }
}
/* FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: 10px; }
.faq__item {
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
background: var(--card-bg);
overflow: hidden;
box-shadow: var(--card-shadow);
transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.faq__item[open] { border-color: var(--violet-500); box-shadow: var(--card-shadow-hover); }
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 20px clamp(18px, 2.4vw, 26px);
min-height: 64px;
cursor: pointer;
list-style: none;
font-weight: 620;
font-size: 1.0313rem;
letter-spacing: -0.012em;
color: var(--text);
-webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--primary-dark); }
.faq__icon {
position: relative;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary-dark);
}
.faq__icon::before, .faq__icon::after {
content: "";
position: absolute;
inset: 50% 7px auto 7px;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: translateY(-50%);
transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__a {
padding: 0 clamp(18px, 2.4vw, 26px) 24px;
color: var(--text-body);
font-size: 0.9875rem;
max-width: 78ch;
}
/* ---------------------------------------------------------------- 9. Formular */
.form-card {
padding: clamp(24px, 3.2vw, 40px);
border-radius: var(--r-xl);
border: 1px solid var(--card-bd);
background: var(--card-bg);
box-shadow: var(--shadow);
}
/* Die Karte liegt eine Stufe tiefer als ihre Felder. Dadurch ist jedes
Eingabefeld auch ohne Rand als eigene Flaeche lesbar - der Rand kommt
zusaetzlich dazu. */
.form-card { --field-bg: var(--ink-500); }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
/* align-content: start verhindert, dass ein Eingabefeld in die Hoehe gezogen
wird, nur weil die Beschriftung daneben zweizeilig ist. */
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field > label {
font-size: 0.875rem;
font-weight: 620;
color: var(--text);
letter-spacing: -0.005em;
}
.field .req { color: var(--primary); }
.field__hint { font-size: 0.8125rem; color: var(--text-muted); }
.input, .textarea, .select {
width: 100%;
min-height: 52px;
padding: 14px 16px;
border-radius: var(--r);
border: 1.5px solid var(--field-bd);
background: var(--field-bg, var(--ink-600));
color: var(--text);
font-size: 1rem;
transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
appearance: none;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A78BFA' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
cursor: pointer;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; }
/* Die aufgeklappte Liste eines Auswahlfeldes zeichnet der Browser selbst.
Ohne diese beiden Regeln nimmt er die helle Systemliste - dann stuende
unsere helle Schrift auf hellem Grund und die Eintraege waeren unlesbar.
color-scheme sagt dem Browser, dass er seine dunkle Variante nehmen soll;
die Farben darunter sind die Absicherung fuer Browser, die das ignorieren. */
.input, .textarea, .select, .checkitem input[type="checkbox"], .consent input[type="checkbox"] {
color-scheme: dark;
}
.select option,
.select optgroup {
background-color: #1F1935;
color: #F5F3FF;
}
.select option:disabled { color: #9891AE; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--field-bd-hover); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
outline: none;
border-color: var(--border-aktiv);
background-color: var(--ink-500);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.28);
}
.input:user-invalid, .textarea:user-invalid { border-color: var(--error); }
/* Spam-Falle: fuer Menschen unsichtbar. Auch das Feld selbst wird auf 1px
gesetzt, damit es in Pruefungen nicht als zu kleines Bedienelement zaehlt -
es ist keines. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp input, .hp label { width: 1px; height: 1px; padding: 0; border: 0; font-size: 1px; }
.consent {
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
align-items: start;
min-height: 44px;
padding-block: 4px;
font-size: 0.875rem;
color: var(--text-body);
line-height: 1.55;
cursor: pointer;
}
.consent input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 24px;
height: 24px;
margin: 0;
border: 1.5px solid var(--field-bd);
border-radius: 7px;
background: var(--field-bg, var(--ink-600));
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.consent input[type="checkbox"]:hover { border-color: var(--border-aktiv); }
.consent input[type="checkbox"]:checked {
background-color: var(--primary);
border-color: var(--border-aktiv);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l3.7 3.7L16 5.8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.consent a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
/* Feldgruppen und Mehrfachauswahl (Seite "Individuelles Projekt") ------ */
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset__legend {
padding: 0;
font-size: 0.875rem;
font-weight: 620;
color: var(--text);
letter-spacing: -0.005em;
margin-bottom: 7px;
}
.checkgrid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.checkitem {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: center;
padding: 11px 13px;
border-radius: var(--r);
border: 1.5px solid var(--field-bd);
background: var(--field-bg, var(--ink-600));
font-size: 0.9375rem;
color: var(--text-body);
cursor: pointer;
min-height: 46px;
transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.checkitem:hover { border-color: var(--violet-500); }
.checkitem input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
margin: 0;
border: 1.5px solid var(--field-bd);
border-radius: 6px;
background: var(--ink-500);
cursor: pointer;
flex-shrink: 0;
}
.checkitem input[type="checkbox"]:checked {
background-color: var(--primary);
border-color: var(--border-aktiv);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l3.7 3.7L16 5.8' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.checkitem:has(input:checked) {
border-color: var(--border-aktiv);
background: var(--primary-subtle);
color: var(--text);
}
.checkitem input[type="checkbox"]:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
}
.textarea--gross { min-height: 210px; }
/* Zustands-Meldungen: Info, Erfolg, Warnung, Fehler */
.notice {
display: flex;
gap: 12px;
padding: 16px 18px;
border-radius: var(--r);
border: 1px solid #5F84B8;
background: var(--primary-subtle);
font-size: 0.9375rem;
color: var(--text-body);
}
.notice svg { flex-shrink: 0; margin-top: 2px; color: var(--primary-dark); }
.notice strong { color: var(--text); display: block; margin-bottom: 3px; }
.notice--ok { border-color: #43906E; background: var(--success-bg); }
.notice--ok svg { color: var(--success); }
.notice--warn { border-color: #A98523; background: var(--warning-bg); }
.notice--warn svg { color: var(--warning); }
.notice--error { border-color: #C05B5B; background: var(--error-bg); }
.notice--error svg { color: var(--error); }
.kontakt-grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 1000px) { .kontakt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.kontakt-item {
display: grid;
grid-template-columns: 46px 1fr;
gap: 14px;
align-items: start;
padding: 16px 0;
border-bottom: 1px solid var(--card-line);
}
.kontakt-item > span:last-child { display: block; min-width: 0; }
.kontakt-item__label { display: block; font-size: 0.8125rem; color: var(--text-muted); }
.kontakt-item__value { display: block; font-weight: 620; margin-top: 2px; color: var(--text); }
.kontakt-item a.kontakt-item__value:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
/* CTA-Band: dunkelblauer Anker im hellen Layout ------------------------ */
.cta-band {
position: relative;
overflow: hidden;
border-radius: var(--r-2xl);
background: var(--grad-deep);
padding: clamp(34px, 5vw, 64px);
text-align: center;
color: var(--text-on-dark);
box-shadow: var(--shadow-lg);
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(70% 120% at 80% 0%, rgba(139, 92, 246, 0.42) 0%, transparent 60%),
radial-gradient(60% 100% at 10% 100%, rgba(69, 40, 155, 0.55) 0%, transparent 62%);
pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 660px; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: var(--text-on-dark-muted); }
.cta-band .row { justify-content: center; margin-top: 26px; }
/* Footer --------------------------------------------------------------- */
.footer {
background: var(--bg-dark);
color: var(--text-on-dark-muted);
padding-block: clamp(48px, 6vw, 76px) 30px;
}
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 880px) {
.footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
/* Huelle nur fuer das Mobil-Raster gedacht - hier zaehlen wieder die
einzelnen Bloecke als Rasterfelder. */
.footer__saeule { display: contents; }
}
.footer__title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--violet-300);
font-weight: 700;
margin-bottom: 14px;
}
.footer__list { display: grid; gap: 2px; }
.footer__list a, .footer__list span {
display: inline-block;
padding: 7px 0;
color: var(--text-on-dark-muted);
font-size: 0.9375rem;
transition: color 0.18s var(--ease);
}
.footer__list a:hover { color: #fff; }
.footer__bottom {
margin-top: clamp(34px, 4vw, 48px);
padding-top: 24px;
border-top: 1px solid var(--border-dark);
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
justify-content: space-between;
align-items: center;
color: var(--text-on-dark-muted);
font-size: 0.8125rem;
}
/* Impressum und Datenschutz im Fuss sind auf dem Handy die letzten Links,
die jemand trifft - und sie sind rechtlich die wichtigsten. Sie bekommen
deshalb eine eigene Trefferflaeche von mindestens 24 px Hoehe
(WCAG 2.5.8). Optisch aendert sich dadurch nichts. */
.footer__bottom nav a {
display: inline-flex;
align-items: center;
min-height: 26px;
padding-block: 3px;
}
.footer__bottom a:hover { color: #fff; }
.footer address { color: var(--text-on-dark-muted); }
/* Berater-Einstieg (der Berater selbst bringt sein Design mit) ---------- */
.berater-intro { display: grid; gap: clamp(22px, 3vw, 36px); align-items: start; }
@media (min-width: 900px) {
.berater-intro { grid-template-columns: minmax(0, 1fr) 360px; }
}
.berater-start {
padding: clamp(22px, 2.6vw, 30px);
border-radius: var(--r-xl);
border: 1px solid var(--border-strong);
background:
radial-gradient(120% 90% at 20% 0%, rgba(139, 92, 246, 0.26) 0%, transparent 62%),
var(--ink-700);
box-shadow: var(--card-shadow);
}
.berater-start__label {
font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase;
font-weight: 700; color: var(--primary-dark);
}
.berater-start__titel {
font-size: 1.375rem; font-weight: 680; letter-spacing: -0.025em;
color: var(--text); margin-top: 8px;
}
.berater-start__text { color: var(--text-body); font-size: 0.9375rem; margin-top: 8px; }
.berater-quick {
display: grid; gap: 12px; margin-top: clamp(24px, 3vw, 34px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.berater-quick__btn {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 18px; min-height: 56px;
border-radius: var(--r-lg);
border: 1px solid var(--card-bd);
background: var(--card-bg);
color: var(--text);
font: inherit; font-size: 0.9375rem; font-weight: 600;
text-align: left; cursor: pointer;
box-shadow: var(--card-shadow);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.berater-quick__btn svg { color: var(--primary); flex-shrink: 0; }
.berater-quick__btn:hover {
border-color: var(--violet-500); transform: translateY(-2px); box-shadow: var(--card-shadow-hover);
}
.berater-quick__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* ------------------------------------------------ 10. Hero-Nebenspalte */
/* Hier standen die Vorschaukarten der zehn Demo-Websites. Seit die Demos
entfernt sind (echte Referenzen statt erfundener Beispiele), ist davon nur
die Nebenspalte des Heros uebrig - dort steht jetzt die Kundenstimme. */
.hero__showcase-col { text-align: center; }
/* Symbole innerhalb von Textabsaetzen duerfen nicht gestaucht werden.
Ohne diese Regel druecken Flex-Absaetze das SVG auf wenige Pixel zusammen. */
p > svg { flex-shrink: 0; }
/* ------------------------------------------------------------ 11. Utilities */
.center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 44px; }
.mb-3 { margin-bottom: 24px; }
.full { width: 100%; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.prose { max-width: 74ch; color: var(--text-body); }
.prose h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); margin-top: 2.3em; }
.prose h3 { font-size: 1.1875rem; margin-top: 1.9em; }
.prose p, .prose ul { margin-top: 1em; }
.prose ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.prose li::marker { color: var(--primary); }
.prose a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.page-hero {
position: relative;
overflow: hidden;
padding-block: clamp(48px, 7vw, 88px) clamp(30px, 4vw, 44px);
background:
radial-gradient(90% 120% at 88% -10%, rgba(109, 63, 209, 0.26) 0%, transparent 60%),
linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%);
border-bottom: 1px solid var(--border-line);
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--text-muted); font-size: 0.875rem; }
.breadcrumb a { padding: 4px 2px; border-radius: 4px; }
.breadcrumb a:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span[aria-current] { color: var(--text-body); font-weight: 550; }
.demo-hinweis {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 17px 21px;
border-radius: var(--r-lg);
border: 1px solid #A98523;
background: var(--warning-bg);
color: #E8DCC2;
font-size: 0.9375rem;
}
.demo-hinweis svg { flex-shrink: 0; margin-top: 2px; color: var(--warning); }
.demo-hinweis strong { color: var(--warning); }
/* Erfolgs-Symbol auf der Bestätigungsseite */
.erfolg-kreis {
display: inline-grid;
place-items: center;
width: 68px;
height: 68px;
border-radius: 50%;
background: var(--success-bg);
border: 1px solid var(--success-bd);
color: var(--success);
}
/* Ladezustand (z. B. beim Absenden des Formulars) */
.spinner {
width: 18px;
flex-shrink: 0;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.is-busy { pointer-events: none; opacity: 0.75; }
/* ------------------------------------------------------- 12. Motion & A11y */
/* Sanftes Einblenden beim Scrollen.
Frueher haing das an einer Klasse "js", die ein Skript auf gesetzt
hat. Das war die Ursache eines Hydration-Fehlers: React hatte ohne
diese Klasse gerendert, das Skript setzte sie vor dem Hydrieren - Server-
und Client-HTML stimmten nicht mehr ueberein.
Stattdessen fragt jetzt CSS selbst, ob JavaScript laeuft. Kein Skript
fasst mehr an. Browser ohne Unterstuetzung fuer dieses Merkmal
zeigen die Inhalte einfach sofort - ohne Animation, aber vollstaendig. */
[data-reveal] { opacity: 1; }
@media (scripting: enabled) {
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
/* Notbremse: Sollte das Skript gar nicht laufen (Ladefehler, Blocker),
macht diese Animation den Inhalt nach 3 s trotzdem sichtbar. Niemand
darf wegen einer Animation vor einer leeren Seite sitzen. */
animation: reveal-notbremse 0.01s linear 3s forwards;
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
will-change: auto;
animation: none;
}
@keyframes reveal-notbremse { to { opacity: 1; transform: none; } }
}
@keyframes float-soft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.float { animation: float-soft 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
.hero__video { display: none; }
.btn:hover, .card--hover:hover, .preis:hover, .tl-step:hover { transform: none; }
}
/* Auf Mobilgeräten kein Hintergrundvideo laden (Datenvolumen).
Das Standbild uebernimmt und wird dafuer etwas praesenter. */
@media (max-width: 767px) {
.hero__video { display: none; }
.hero--film { min-height: auto; }
}
@media (prefers-contrast: more) {
:root {
--border: #9C8BD0;
--border-line: #7565A8;
--border-strong: #C4B5FD;
--card-bd: #9C8BD0;
--card-line: #7565A8;
--field-bd: #9C8BD0;
--text-body: #EDEAF7;
--text-muted: #C9C3DC;
}
}
/* Sehr schmale Geräte: Aktionen volle Breite, damit nichts gedrängt wirkt */
/* Sehr schmale Geraete (bis 479 px, also auch 320-px-Displays).
Knoepfe haben normalerweise white-space: nowrap - auf 320 px waren lange
Beschriftungen wie "Individuelles Angebot erhalten" dadurch breiter als der
Bildschirm und wurden rechts abgeschnitten. Der Text war nicht mehr ganz
lesbar und ein Teil der Trefferflaeche lag ausserhalb.
Deshalb hier: Aktionsreihen stapeln sich, Knoepfe nehmen die volle Breite,
und die Beschriftung darf umbrechen. Die Mindesthoehe waechst dann mit. */
@media (max-width: 479px) {
.row,
.hero__actions,
.cta-band .row {
flex-direction: column;
align-items: stretch;
}
.row > .btn,
.hero__actions .btn,
.cta-band .row .btn,
.card .row .btn,
.page-hero .btn {
width: 100%;
}
.btn {
white-space: normal;
line-height: 1.25;
height: auto;
padding-block: 13px;
padding-inline: 18px;
}
.btn--lg { padding-inline: 20px; }
.facts { grid-template-columns: 1fr; gap: 14px; }
.facts > div + div { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 14px; }
}
@media print {
.header, .footer, .mobilnav, .cta-band, .hero__bg { display: none !important; }
body { background: #fff; color: #000; }
.card, .preis { border: 1px solid #ccc; box-shadow: none; }
}
/* ------------------------------------------------- 13. Referenzen & Bewertungen */
/* Sternebewertung. Die Sterne sind Gold auf dunklem Grund - Lila waere hier
missverstaendlich, weil es sonst ueberall die Marke markiert. */
.sterne { display: inline-flex; align-items: center; }
.sterne__bilder { display: inline-flex; gap: 2px; color: #E3B341; }
/* --- Referenzkarte --- */
.referenz-liste { display: grid; gap: 22px; }
.referenz { padding: 26px 26px 24px; }
.referenz__kopf {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--card-line);
}
.referenz__kunde {
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.referenz__meta {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 0.92rem;
color: var(--text-muted);
}
.referenz__knopf { flex-shrink: 0; gap: 8px; }
.referenz__text {
margin-top: 18px;
color: var(--text-body);
max-width: 68ch;
}
.referenz__spalten {
margin-top: 22px;
display: grid;
gap: 22px 34px;
grid-template-columns: 1fr;
}
.referenz__label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-muted);
font-weight: 600;
}
.referenz__liste { margin-top: 12px; }
.referenz__tags {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
}
/* --- Bewertung innerhalb der Referenzkarte --- */
.bewertung {
margin: 24px 0 0;
padding: 20px 22px;
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
background: var(--card-bg-2);
}
.bewertung__zitat { margin: 12px 0 0; }
.bewertung__zitat p {
font-size: clamp(1.05rem, 2.2vw, 1.22rem);
line-height: 1.5;
color: var(--text);
}
.bewertung__quelle {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
font-size: 0.93rem;
color: var(--text-muted);
}
.bewertung__quelle strong { color: var(--text-body); font-weight: 600; }
/* --- Kundenstimme im Hero --- */
/* Liegt ueber dem laufenden Video, braucht also eine eigene, ausreichend
deckende Flaeche - sonst steht die Schrift auf bewegtem Bild. */
.hero__stimme {
margin: 0;
padding: 26px 26px 22px;
border: 1px solid rgba(196, 181, 253, 0.34);
border-radius: var(--r-xl);
background: rgba(12, 10, 20, 0.78);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
text-align: left;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.hero__stimme-zitat { margin: 14px 0 0; }
.hero__stimme-zitat p {
font-size: clamp(1.2rem, 2.6vw, 1.5rem);
line-height: 1.4;
letter-spacing: -0.01em;
color: #F5F3FF;
}
.hero__stimme-quelle {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 0.93rem;
color: #C3BDD6;
}
.hero__stimme-quelle strong { color: #F5F3FF; font-weight: 600; }
.hero__stimme-link {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(196, 181, 253, 0.22);
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 26px;
font-size: 0.93rem;
font-weight: 600;
color: var(--primary-text);
}
.hero__stimme-link:hover { color: #C4B5FD; }
@media (min-width: 760px) {
.referenz__spalten { grid-template-columns: 1.15fr 1fr; }
}
@media (max-width: 479px) {
.referenz { padding: 20px 18px 18px; }
.referenz__knopf { width: 100%; justify-content: center; }
.bewertung { padding: 16px 16px; }
.hero__stimme { padding: 20px 18px 18px; }
}
/* --- Portraitfoto in der Bewertung --- */
/* Auf der Referenzseite steht das Bild gross neben der Bewertung: Ein Gesicht
traegt eine Kundenstimme deutlich mehr als ein Namenszug allein. Mobil
rutscht es ueber den Text. Feste width/height am ![]()
plus aspect-ratio,
damit beim Nachladen nichts springt (CLS). */
.bewertung {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: start;
}
.bewertung__portrait {
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
border-radius: var(--r-lg);
border: 1px solid var(--card-bd);
display: block;
}
.bewertung__inhalt { min-width: 0; }
.hero__stimme-quelle { flex-direction: row; align-items: center; gap: 12px; }
.hero__stimme-foto {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid rgba(196, 181, 253, 0.34);
}
.hero__stimme-person { display: flex; flex-direction: column; gap: 1px; }
/* Ab 640 px steht das Portrait neben der Bewertung statt darueber.
Muss NACH den Basisregeln stehen - Media Queries erhoehen die
Spezifitaet nicht, es entscheidet die Reihenfolge. */
@media (min-width: 640px) {
/* Zweispaltig und senkrecht mittig: Der Text ist kuerzer als das Bild hoch
ist, oben ausgerichtet haengt er sonst schief in der Karte. */
.bewertung { grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
.bewertung__portrait { max-width: none; }
}
/* ------------------------------------------- 14. Preise: neue Bausteine */
/* Paketgitter. Eine Spalte auf dem Telefon, zwei ab 640 px, drei ab 1040 px.
Bewusst keine Tabelle: Acht Pakete nebeneinander waeren nur mit
Seitwaertsscrollen lesbar - genau das soll auf dem Handy nicht passieren. */
.preise--service { --preise-min: 240px; }
.preis__betrag {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 14px;
}
.preis__zahl {
font-size: clamp(1.75rem, 5vw, 2.1rem);
font-weight: 680;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.1;
}
.preis__einheit { font-size: 0.82rem; color: var(--text-muted); }
.preis__umfang {
margin-top: 12px;
display: inline-block;
padding: 4px 11px;
border-radius: var(--r-full);
background: var(--card-bg-2);
border: 1px solid var(--card-bd);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-body);
}
.preis__text { margin-top: 12px; color: var(--text-body); font-size: 0.9375rem; }
.preis__cta { margin-top: 18px; }
.preis__flag {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
padding: 4px 14px;
border-radius: var(--r-full);
background: var(--primary);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.paket-gruppe { margin-top: clamp(34px, 5vw, 52px); }
.paket-gruppe__titel { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 660; color: var(--text); }
.paket-gruppe__text { margin-top: 6px; color: var(--text-muted); font-size: 0.9375rem; }
/* Was in jedem Paket steckt - einmal zentral statt achtmal wiederholt. */
.enthalten { margin-top: clamp(24px, 4vw, 36px); padding: clamp(20px, 3vw, 28px); }
.enthalten__titel { font-size: 1.0625rem; font-weight: 660; color: var(--text); }
.enthalten__liste {
margin-top: 14px;
display: grid;
gap: 10px 24px;
grid-template-columns: 1fr;
list-style: none;
padding: 0;
}
.enthalten__liste li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-body); font-size: 0.9375rem; }
.enthalten__liste svg { margin-top: 3px; color: var(--primary-text); flex-shrink: 0; }
.enthalten__note {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--card-line);
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--text-muted);
font-size: 0.875rem;
}
.enthalten__note svg { margin-top: 2px; color: var(--primary-text); flex-shrink: 0; }
/* Uebersicht: eine Zeile je Paket, die auf dem Telefon zur Karte umbricht.
Ersetzt die frühere Merkmalsmatrix - neun Tabellenspalten waeren mobil
nicht zu gebrauchen gewesen. */
.uebersicht__titel {
font-size: clamp(1.05rem, 2.6vw, 1.25rem);
font-weight: 660;
color: var(--text);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
}
.uebersicht__titel span { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }
.uebersicht__liste {
margin-top: 14px;
list-style: none;
padding: 0;
display: grid;
gap: 10px;
}
.uebersicht__zeile {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: 'haupt preis' 'text text';
gap: 4px 16px;
padding: 15px 17px;
border: 1px solid var(--card-bd);
border-radius: var(--r-lg);
background: var(--card-bg);
}
.uebersicht__zeile.is-hervor { border-color: var(--border-aktiv); background: var(--card-bg-2); }
.uebersicht__haupt { grid-area: haupt; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; min-width: 0; }
.uebersicht__name { font-weight: 660; color: var(--text); }
.uebersicht__umfang { font-size: 0.82rem; color: var(--text-muted); }
.uebersicht__text { grid-area: text; margin: 0; color: var(--text-body); font-size: 0.9rem; }
.uebersicht__preis { grid-area: preis; font-weight: 680; color: var(--text); white-space: nowrap; }
.empfehlungen__gitter { margin-top: 14px; display: grid; gap: 14px; grid-template-columns: 1fr; }
.empfehlung { padding: 18px 20px; }
.empfehlung__fuer { font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.empfehlung__namen { margin-top: 7px; font-size: 1.0625rem; font-weight: 660; color: var(--text); }
.empfehlung__preis { margin-top: 6px; color: var(--text-body); font-size: 0.9375rem; }
.empfehlung__preis strong { color: var(--text); }
.empfehlung .link-arrow { margin-top: 12px; }
.konditionen { padding: clamp(20px, 3vw, 28px); }
.konditionen__titel { font-size: 1.0625rem; font-weight: 660; color: var(--text); }
.konditionen__liste { margin-top: 12px; display: grid; gap: 9px; padding-left: 20px; color: var(--text-body); font-size: 0.9375rem; }
.konditionen__note {
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--card-line);
display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: 0.875rem;
}
.konditionen__note svg { margin-top: 2px; color: var(--primary-text); flex-shrink: 0; }
.service-note {
margin-top: 22px; display: flex; gap: 10px; align-items: flex-start;
color: var(--text-muted); font-size: 0.875rem; max-width: 70ch;
}
.service-note svg { margin-top: 2px; color: var(--primary-text); flex-shrink: 0; }
@media (min-width: 560px) {
.enthalten__liste { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 700px) {
.empfehlungen__gitter { grid-template-columns: repeat(3, 1fr); }
.uebersicht__zeile {
grid-template-columns: minmax(150px, 220px) 1fr auto;
grid-template-areas: 'haupt text preis';
align-items: center;
gap: 18px;
}
.uebersicht__haupt { flex-direction: column; gap: 2px; }
}
/* ------------------------------------------ 15. Mobile-Feinschliff */
/* --- Ueberschriften: saubere Umbrueche -------------------------------- */
/* Auf schmalen Geraeten brechen lange Ueberschriften sonst an der
ungeschicktesten Stelle um ("... kosten Anfragen, statt / welche zu
bringen."). text-wrap: balance verteilt die Zeilen gleichmaessig; wo der
Browser das nicht kennt, aendert sich nichts. */
.h2, .display, .page-hero h1, .section__head h2 {
text-wrap: balance;
hyphens: manual;
}
/* Ein einzelnes Wort in der letzten Zeile wirkt wie ein Fehler. */
.lead, .section__head p {
text-wrap: pretty;
}
/* E-Mail-Adressen und Telefonnummern nie mitten im Wort trennen - im
Screenshot stand "info@dh-/gmbh.de" ueber zwei Zeilen. */
a[href^="mailto:"], a[href^="tel:"], .footer__list a {
overflow-wrap: normal;
word-break: keep-all;
}
@media (max-width: 767px) {
/* --- Kopfzeile ---------------------------------------------------- */
/* Deckender Grund: Auf dem Telefon scrollt der Inhalt sehr dicht unter
der Kopfzeile durch, und ein halbtransparenter Grund laesst ihn
durchscheinen. Am Desktop bleibt der Glaseffekt erhalten. */
.header { background: rgba(11, 9, 18, 0.94); }
.header.is-scrolled { background: rgba(11, 9, 18, 0.98); }
/* --- Seitenkopf ---------------------------------------------------- */
/* Mehr Luft nach oben und unten, engere Zeilen im Fliesstext: Der Kopf
traegt die Seite und darf nicht gedraengt wirken. */
.page-hero { padding-top: clamp(28px, 9vw, 48px); padding-bottom: clamp(26px, 8vw, 44px); }
.page-hero .lead { max-width: 38ch; }
.page-hero .row { margin-top: 22px; gap: 10px; }
/* --- Abschnittskoepfe ---------------------------------------------- */
.section__head p.lead { max-width: 40ch; }
/* --- Karten -------------------------------------------------------- */
/* Etwas engere Innenabstaende und ein ruhigerer Zeilenabstand: Die Karten
waren auf dem Telefon unnoetig hoch, ohne dass Text mehr Luft bekam. */
.wegweiser__karte { padding: 18px 18px 20px; }
.wegweiser__karte p { font-size: 0.9375rem; line-height: 1.55; }
.preis { padding: 22px 20px 24px; }
/* --- Fuss ----------------------------------------------------------- */
/* Der Fuss war sehr hoch: Jeder Link stand mit grossem Abstand in einer
eigenen Zeile. Die Abstaende reichen weiterhin fuer eine sichere
Trefferflaeche von 44 px, wirken aber nicht mehr auseinandergezogen. */
/* Vier Linkblocke untereinander ergaben auf dem Telefon einen sehr langen
Fuss. Zwei Spalten halbieren die Hoehe, ohne die Trefferflaechen zu
verkleinern. Der erste Block (Logo, Text, Anschrift) bleibt ueber die
volle Breite - er ist Fliesstext und braucht die Zeile. */
/* Zwei Spalten gelten bis 879 px und stehen deshalb weiter unten in einem
eigenen Block - das Vier-Spalten-Raster beginnt erst ab 880 px. */
.footer__list { gap: 2px; }
.footer__list a {
display: flex;
align-items: center;
min-height: 40px;
padding-block: 2px;
}
.footer__title { margin-bottom: 4px; }
/* Untere Zeile: Frueher standen Impressum, Copyright und Datenschutz
versetzt untereinander, weil space-between die beiden Bloecke auf dem
schmalen Bildschirm auseinanderzog. Jetzt zuerst die beiden rechtlich
wichtigen Links nebeneinander, darunter die Copyright-Zeile - eine
ruhige, linksbuendige Treppe statt drei versetzter Zeilen. */
.footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding-top: 18px;
margin-top: 26px;
}
/* Die Regel "unter 480 px stapeln sich .row-Reihen" ist fuer Knopfreihen
gedacht. Impressum und Datenschutz sind zwei kurze Textlinks - sie
gehoeren nebeneinander, sonst wird der Fuss unnoetig hoch. */
.footer__bottom nav.row {
order: -1;
flex-direction: row;
align-items: center;
gap: 22px;
}
.footer__bottom p { margin: 0; font-size: 0.75rem; opacity: 0.85; }
}
/* Sehr schmale Geraete: Ueberschriften duerfen die Zeile nicht sprengen. */
@media (max-width: 379px) {
.display { font-size: clamp(1.9rem, 9.5vw, 2.4rem); }
.h2 { font-size: clamp(1.45rem, 7.5vw, 1.8rem); }
.preis__zahl { font-size: 1.6rem; }
}
/* Fuss-Raster zwischen Telefon und Desktop -------------------------------- */
/* Vier Linkblocke untereinander ergaben einen sehr langen Fuss - auf dem
Telefon ebenso wie auf dem Tablet. Zwei Spalten halbieren die Hoehe, ohne
die Trefferflaechen zu verkleinern. Der erste Block (Logo, Text, Anschrift)
bleibt ueber die volle Breite: Er ist Fliesstext und braucht die Zeile. */
@media (max-width: 879px) {
.footer__grid {
gap: 26px 18px;
grid-template-columns: 1fr 1fr;
align-items: start;
}
.footer__grid > :first-child { grid-column: 1 / -1; }
.footer__saeule { display: grid; gap: 26px; align-content: start; }
}