/* ============================================================================
ZIAD — Phase 0 Landingpage · styles
Design-Tokens aus dem verbundenen Figma-File (Dev-Mode, "Final - 06.07.2026"):
Navy #111A23 · Gold #D4AC74 / #D4AC78 · Weiß #FFFFFF
Display = Georgia (serif) · Body/UI = Jost
Mobile-first (Primär-Viewport ~375px), zentriert auf größeren Screens.
Theme: Steps/Trust/CTA sind für beide Personas identisch aufgebaut, aber
unterschiedlich eingefärbt — Etablierter (E) = helles Theme, Aufsteiger (A)
= dunkles Theme. Umschaltung über [data-strang] auf (siehe app.js),
gesteuert über die --body-* / --card-* / --input-* Variablen unten.
Hero und Footer sind theme-unabhängig (immer dunkel/Foto).
============================================================================ */
/* Selbst gehostet (assets/fonts/), NICHT von Google Fonts geladen — sonst
würde bei jedem Aufruf die Besucher-IP an Google übertragen (DSGVO).
Eine Datei deckt das gesamte Gewicht 300–600 ab (Jost ist ein Variable Font). */
@font-face {
font-family: "Jost";
src: url("assets/fonts/jost-var-latin.woff2") format("woff2-variations"),
url("assets/fonts/jost-var-latin.woff2") format("woff2");
font-weight: 300 600;
font-style: normal;
font-display: swap;
}
:root {
--navy: #111A23; /* Hero / Footer-Hintergrund */
--navy-deep: #0C141C; /* CTA-Sektion im dunklen Theme (Aufsteiger) */
--gold: #D4AC74; /* Button / Akzent */
--gold-light: #D4AC78; /* Akzent-Text kursiv (Figma) */
--gold-hover: #E0BC8C;
--white: #FFFFFF;
--line: rgba(255, 255, 255, 0.12);
--serif: Georgia, "Times New Roman", serif;
--sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
--maxw: 480px; /* Inhaltsbreite (mobile-first, auf Desktop zentriert) */
--radius: 4px; /* Figma Button radius */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* ---------- Theme-Tokens: Default = Aufsteiger (dunkles Theme) ---------- */
--body-bg: var(--navy);
--body-fg: var(--white);
--muted: rgba(255, 255, 255, 0.66);
--kicker: var(--gold);
--req: var(--gold);
--num-fg: var(--white);
--card-bg: rgba(156, 197, 241, 0.06);
--card-border: rgba(255, 255, 255, 0.10);
--input-bg: rgba(156, 197, 241, 0.10);
--input-border: rgba(255, 255, 255, 0.10);
--input-radius: var(--radius);
--divider: rgba(255, 255, 255, 0.15);
--cta-bg: var(--navy-deep);
--error: #E5947A;
}
/* ---------- Etablierter (E) — helles Theme für Steps/Trust/CTA ---------- */
:root[data-strang="E"] {
--body-bg: #FFFFFF;
--body-fg: #111A23;
--muted: rgba(17, 26, 35, 0.7);
--kicker: #61472C;
--req: #876038;
--num-fg: #111A23;
--card-bg: rgba(226, 211, 196, 0.2);
--card-border: #E2D3C4;
--input-bg: transparent;
--input-border: rgba(165, 126, 79, 0.35);
--input-radius: 0;
--divider: rgba(17, 26, 35, 0.12);
--cta-bg: #FFFFFF;
--error: #B3261E;
}
/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--navy);
color: var(--white);
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-light); }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sichtbarer Tastatur-Fokus (Qualitätsfloor) */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* Mobile-first, bewusst NICHT breiter werdend: die ganze Seite (inkl. Hero-Foto)
bleibt auf --maxw begrenzt und zentriert sich auf großen Screens, statt zu
skalieren — auf Desktop entsteht so eine "Telefon-in-Mitte"-Ansicht. */
.page {
max-width: var(--maxw);
margin-inline: auto;
overflow-clip-margin: content-box;
}
/* ---------- Typografie ---------- */
.h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 6vw, 24px);
line-height: 1.2;
letter-spacing: 0.2px;
margin: 0 0 14px;
}
/* ============================================================================
HERO — Foto (variantenspezifisch) + live Kicker/Headline/CTA
Theme-unabhängig: Text ist immer weiß, unabhängig von Etablierter/Aufsteiger.
============================================================================ */
/* aspect-ratio sitzt bewusst auf .hero selbst (nicht nur auf dem ![]()
):
damit hat der Container eine wirklich eindeutige Höhe, gegen die
.hero__content seine top/bottom-Prozentwerte zuverlässig auflösen kann.
(aspect-ratio nur auf einem Kind + darüber "vererbte" auto-Höhe des
Elternelements wird nicht in jedem Browser gleich zuverlässig als
"definite height" für prozentual positionierte Kinder behandelt.) */
.hero {
position: relative;
background: var(--navy);
aspect-ratio: 375 / 566;
overflow: hidden;
}
/* A2 ist in Figma als einziges der vier Frames 580px statt 566px hoch
(eigener Verlaufs-/Vignetten-Hintergrund) — 1:1 übernommen statt vereinheitlicht. */
[data-variant="A2"] .hero { aspect-ratio: 375 / 580; }
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
background: var(--navy);
z-index: 0;
}
/* Zusätzlicher, garantierter Abdunkel-Verlauf über dem Foto (unabhängig vom
Verlauf, der ggf. schon im Foto selbst steckt) — sichert die Lesbarkeit von
Kicker/Headline auf jedem Hero-Foto, unabhängig von dessen Helligkeit. */
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to top,
rgba(17, 26, 35, 0.92) 0%,
rgba(17, 26, 35, 0.72) 22%,
rgba(17, 26, 35, 0.32) 42%,
rgba(17, 26, 35, 0) 60%
);
}
/* Logo-Position ist pro Frame in Figma unterschiedlich gesetzt (kein
Copy-Paste-Fehler, sondern so im Final-Design): E1 mittig-oben freistehend,
E2 mittig-oben in einem eigenen Navy-Band, A1 oben-links, A2 oben-rechts. */
.hero__logo {
position: absolute;
z-index: 2;
width: 72px;
height: auto;
}
/* Top-Offsets als % der Hero-Höhe (nicht fixe px), damit die Position auch
bei größerer Darstellungsbreite (Seite skaliert bis --maxw) exakt an der
gleichen relativen Stelle bleibt wie im Figma-Frame (566px bzw. 580px hoch). */
[data-variant="E1"] .hero__logo {
top: 5.65%; /* 32/566 */
left: 50%;
transform: translateX(-50%);
}
[data-variant="E2"] .hero__logo {
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
padding: 12px 0;
background: var(--navy);
}
[data-variant="E2"] .hero__logo img { width: 68px; height: auto; }
[data-variant="A1"] .hero__logo {
top: 3.89%; /* 22/566 */
left: 22px;
}
[data-variant="A2"] .hero__logo {
top: 5.52%; /* 32/580 */
left: auto;
right: 31px; /* 375 - 259 - 85 */
}
/* Figma positioniert den Textblock pro Frame unterschiedlich: E1 sitzt er
(via Flex justify-between) 32px über dem unteren Rand, E2/A1/A2 stehen auf
einem festen Top-Offset (324/336/330px von je 566/566/580px Höhe) — 1:1
übernommen statt auf ein einheitliches Bottom-Padding vereinheitlicht. */
.hero__content {
position: absolute;
left: 16px;
right: 16px;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
[data-variant="E1"] .hero__content { bottom: 5.65%; } /* 32/566 */
[data-variant="E2"] .hero__content { top: 57.24%; } /* 324/566 */
[data-variant="A1"] .hero__content { top: 59.36%; } /* 336/566 */
[data-variant="A2"] .hero__content { top: 56.9%; } /* 330/580 */
.hero__text {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* A2 ist der einzige der vier Frames, in dem Kicker/Headline linksbündig
stehen (per Figma-Screenshot verifiziert, NICHT nur aus dem Code-Export
übernommen — der gab hier fälschlich "zentriert" an). Button bleibt
davon unberührt, da er ohnehin volle Breite hat. */
[data-variant="A2"] .hero__text {
align-items: flex-start;
}
[data-variant="A2"] .hero__kicker,
[data-variant="A2"] .hero__headline {
text-align: left;
}
.hero__kicker {
font-family: var(--sans);
font-size: clamp(16px, 4.6vw, 20px);
color: var(--gold);
margin: 0;
}
.hero__headline {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(26px, 7.4vw, 34px);
line-height: 1.2;
color: var(--white);
margin: 0;
}
.hero__cta { width: 100%; max-width: 343px; }
/* ---------- Buttons ---------- */
.btn {
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--radius);
padding: 16px 24px;
cursor: pointer;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.06s ease;
-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold); color: var(--navy); }
.btn--primary:hover { background: var(--gold-hover); }
.btn--ghost {
background: transparent; color: var(--gold);
border-color: rgba(212, 172, 116, 0.55);
}
.btn--ghost:hover { background: rgba(212, 172, 116, 0.10); border-color: var(--gold); }
/* ============================================================================
STEPS — identischer Inhalt für beide Personas, theme-eingefärbt
============================================================================ */
.steps {
background: var(--body-bg);
color: var(--body-fg);
padding: 32px 22px 28px;
}
.steps__kicker {
font-family: var(--sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 1.12px;
color: var(--kicker);
text-align: center;
margin: 0 0 10px;
}
.steps__title { text-align: center; }
.steps__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; }
.step { display: flex; align-items: flex-start; gap: 16px; }
.step__text { flex: 1 1 auto; min-width: 0; }
.step__img {
flex: 0 0 auto;
height: auto;
border-radius: 6px;
object-fit: cover;
}
/* Figma legt die drei Schritt-Fotos bewusst unterschiedlich groß an
(Step 2 deutlich breiter als 1/3, nicht einheitlich) — Breiten 1:1 aus
den Figma-Node-Maßen übernommen, statt alle drei gleich zu skalieren. */
.step__img--1 { width: 128px; }
.step__img--2 { width: 160px; }
.step__img--3 { width: 148px; }
.step__num {
display: grid; place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(212, 172, 116, 0.5);
color: var(--num-fg);
font-family: var(--sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 1.12px;
margin-bottom: 10px;
}
.step__h {
font-family: var(--serif);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
margin: 0 0 6px;
}
.step__p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.steps__exclusive {
text-align: center;
font-family: var(--sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 1.12px;
color: var(--kicker);
margin: 32px 0 16px;
}
.steps__cta { display: block; width: 100%; max-width: 343px; margin-inline: auto; }
/* ============================================================================
TRUST — Geld-zurück-Garantie (groß) + 3 Badges
============================================================================ */
.trust { background: var(--body-bg); color: var(--body-fg); padding: 36px 22px 28px; }
.trust__title { text-align: center; }
.trust__guarantee {
display: flex;
align-items: center;
gap: 12px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 4px;
padding: 16px;
margin: 22px 0 8px;
}
.trust__guarantee-text { flex: 1 1 auto; }
.trust__kicker {
margin: 0 0 8px;
font-size: 8px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--body-fg);
}
.trust__copy { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.35; color: var(--body-fg); }
.trust__guarantee-img { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 4px; object-fit: cover; }
.trust__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trust__badge {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 4px;
padding: 16px 8px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.trust__badge img { width: 24px; height: 24px; }
.trust__badge-kicker { margin: 0; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-fg); }
.trust__badge-value { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--body-fg); }
/* ============================================================================
CTA-SEKTION (zweistufig) — Überschrift personaspezifisch, Rest identisch
============================================================================ */
.cta {
padding: 44px 22px 40px;
background: var(--cta-bg);
color: var(--body-fg);
border-top: 1px solid var(--divider);
scroll-margin-top: 12px;
}
.cta .h2 { text-align: left; }
.cta__kicker {
font-family: var(--sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 1.12px;
color: var(--kicker);
margin: 0 0 8px;
}
.cta__sub { color: var(--muted); margin: 0 0 26px; }
.cta__sub b { color: var(--body-fg); font-weight: 500; }
.cta .thanks .h2, .cta .thanks .cta__sub { text-align: center; }
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; }
/* Honeypot: bewusst nicht display:none (das erkennen manche Bots) — off-screen
positioniert, aus Tab-Reihenfolge/Screenreadern entfernt. */
.field--honeypot {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
left: -9999px;
}
.field__label { font-size: 13px; letter-spacing: 1px; color: var(--body-fg); }
.field__req { color: var(--req); }
.field__input {
font-family: var(--sans);
font-size: 16px; /* ≥16px → kein iOS-Zoom beim Fokus */
color: var(--body-fg);
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--input-radius);
padding: 14px;
width: 100%;
transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
:root[data-strang="E"] .field__input {
border: none;
border-bottom: 1px solid var(--input-border);
padding: 14px 0;
}
.field__input::placeholder { color: var(--muted); opacity: 0.8; }
.field__input:focus { border-color: var(--gold); }
.field__input[aria-invalid="true"] { border-color: var(--error); }
/* Ländersuche-Combobox + Nummernfeld nebeneinander — bewusst KEIN Land
vorausgewählt (neutral), keine Landesannahme im Nummernfeld selbst. */
.field__phone-row { display: flex; gap: 8px; align-items: flex-start; }
.combobox { position: relative; flex: 0 0 auto; width: 9.5em; }
.field__country { width: 100%; cursor: text; }
.field__phone-number { flex: 1 1 auto; min-width: 0; }
.combobox__list {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 20;
margin: 0;
padding: 6px;
list-style: none;
width: max-content;
max-width: 260px;
max-height: 280px;
overflow-y: auto;
background: var(--cta-bg);
color: var(--body-fg);
border: 1px solid var(--input-border);
border-radius: var(--radius);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.combobox__option {
padding: 9px 10px;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.combobox__option:hover,
.combobox__option--active { background: var(--gold); color: var(--navy); }
.combobox__code { opacity: 0.7; margin-left: auto; padding-left: 12px; }
.combobox__option--active .combobox__code { opacity: 0.85; }
.combobox__empty { padding: 9px 10px; font-size: 14px; color: var(--muted); }
.field__error { margin: 0; font-size: 13px; color: var(--error); }
.form__submit { margin-top: 4px; width: 100%; }
.cta__legal { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.cta__legal .link-button { color: var(--muted); text-decoration: underline; }
/* Stufe 2 — Danke-Screen */
.thanks { text-align: center; }
.thanks__mark {
width: 56px; height: 56px; margin: 0 auto 18px;
display: grid; place-items: center;
color: var(--gold);
border: 1px solid rgba(212, 172, 116, 0.5);
border-radius: 50%;
}
.thanks__mark svg { width: 28px; height: 28px; }
.thanks .h2 { outline: none; }
.form--phone { max-width: 22em; margin: 26px auto 0; text-align: left; }
.form--phone .field__label { text-align: left; }
.thanks__done { margin: 16px 0 0; color: var(--gold-light); font-size: 14px; }
/* ============================================================================
FOOTER — immer dunkel, unabhängig vom Persona-Theme
============================================================================ */
.footer {
text-align: center;
padding: 30px 22px 40px;
background: var(--navy);
color: var(--white);
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer__logo { display: inline-block; }
.footer__logo img { width: 78px; height: auto; opacity: 0.85; }
.footer__start { margin: 16px 0 12px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
.footer__legal { font-size: 13px; color: rgba(255, 255, 255, 0.46); display: flex; gap: 10px; justify-content: center; }
.footer__legal .link-button { color: rgba(255, 255, 255, 0.66); }
.footer__legal .link-button:hover { color: var(--gold-light); text-decoration: underline; }
/* Impressum/Datenschutz sind Buttons (öffnen das Sheet), keine echten Links —
optisch identisch zu , damit sich am Erscheinungsbild nichts ändert. */
.link-button {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: var(--gold-light);
text-decoration: none;
cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
/* ============================================================================
IMPRESSUM/DATENSCHUTZ — Bottom-Sheet-Overlay (bricht den Funnel nicht ab)
============================================================================ */
.sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.25s var(--ease);
z-index: 40;
}
.sheet-backdrop.is-open { opacity: 1; }
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin-inline: auto;
max-width: var(--maxw);
max-height: 86vh;
background: var(--navy);
color: var(--white);
border-radius: 16px 16px 0 0;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
transform: translateY(100%);
transition: transform 0.32s var(--ease);
z-index: 41;
display: flex;
flex-direction: column;
outline: none;
}
.sheet.is-open { transform: translateY(0); }
.sheet__grabber {
width: 36px; height: 4px;
background: rgba(255, 255, 255, 0.25);
border-radius: 2px;
margin: 10px auto 0;
flex-shrink: 0;
}
.sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px 12px;
flex-shrink: 0;
border-bottom: 1px solid var(--line);
}
.sheet__title { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0; }
.sheet__close {
background: none; border: none; color: var(--white); opacity: 0.75;
padding: 6px; margin: -6px; cursor: pointer; line-height: 0;
}
.sheet__close:hover { opacity: 1; }
.sheet__close svg { width: 20px; height: 20px; }
.sheet__body {
overflow-y: auto;
min-height: 0; /* Flexbox-Falle: ohne das würde der Body nicht schrumpfen/scrollen, sondern das Sheet über max-height hinaus wachsen lassen */
flex: 1 1 auto;
padding: 18px 22px 40px;
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.sheet__body h3 { font-family: var(--serif); font-weight: 400; color: var(--white); font-size: 16px; margin: 22px 0 8px; }
.sheet__body h3:first-child { margin-top: 0; }
.sheet__body p { margin: 0 0 10px; }
.sheet__body ul { margin: 0 0 10px; padding-left: 20px; }
.sheet__body li { margin-bottom: 6px; }
.sheet__body a { color: var(--gold-light); }
.sheet__placeholder { color: var(--gold-light); font-style: italic; margin-bottom: 20px !important; }
/* ============================================================================
COOKIE-CONSENT-BANNER — theme-unabhängig (immer dunkel), lädt GTM/GA/Meta
erst nach Zustimmung (siehe app.js)
============================================================================ */
.consent-banner {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 50;
background: var(--navy-deep);
border-top: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
transform: translateY(100%);
transition: transform 0.28s var(--ease);
}
.consent-banner.is-open { transform: translateY(0); }
.consent-banner__inner {
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.consent-banner__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.consent-banner__text .link-button { color: var(--gold-light); text-decoration: underline; }
.consent-banner__actions { display: flex; gap: 10px; }
.consent-banner__actions .btn { flex: 1 1 0; padding: 13px 16px; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
.sheet, .sheet-backdrop { transition: none; }
}
/* ============================================================================
Sparsame Animation (nur wo sie dient) — respektiert prefers-reduced-motion
============================================================================ */
/* Progressive Enhancement: ohne JS (oder bei JS-Fehler) bleibt alles sichtbar.
Nur wenn app.js .js-reveal setzt, starten Elemente unsichtbar und blenden ein. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.is-in {
opacity: 1; transform: none;
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.js-reveal .reveal, .js-reveal .reveal.is-in { opacity: 1; transform: none; transition: none; }
.btn, .field__input { transition: none; }
html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}