/* ========================================================================= WERTKON Landingpage — Seitenschicht ueber den Design-System-Tokens. Reihenfolge im : tokens.css zuerst, dann diese Datei. Alles hier baut auf den Tokens auf. Feste Farbwerte kommen nur dort vor, wo das Design System selbst feste Werte definiert (Fokus-Halo, Header-Wash). Bewusste Abweichungen vom Design System, alle aus dem Konzept, Teil 4 ("Fuer 50 plus gebaut, nicht fuer uns"): 1. Fliesstext 19 px statt 17 px, Lead 22 px statt 20 px, Small 17 px statt 15 px, Caption und Eyebrow 14 px statt 13 px. Konzept Teil 4, Punkt 1. 2. Klickflaechen mindestens 60 px hoch (--tap-min). Konzept Teil 4, Punkt 3 und Funnel-Grundregel 6. 3. Displaygroessen als clamp(), damit die Seite auf dem Handy funktioniert. Anzeigen fuehren auf Mobilgeraete, dort entscheidet es sich. 4. Kein Popup, kein Exit-Layer, kein Countdown. Konzept Teil 4, Punkt 4 — der Funnel oeffnet ausschliesslich auf Klick des Nutzers. 5. Zwei Farbrollen eine Stufe dunkler als im Design System, damit jeder Text 4,5:1 erreicht. Konzept Teil 4, Punkt 2: "Hoher Kontrast. Kein Hellgrau auf Weiss." Beide Ersatzwerte sind Tokens des Systems, keine neu erfundenen Farben — Begruendung an der Stelle unten. Alles andere — Farben, Radien, Schatten, Motion, Abstaende — kommt unveraendert aus den Tokens. ========================================================================= */ :root { /* --- 50-plus-Skala (siehe Kopf) --- */ --type-body-size: 19px; --type-lead-size: 22px; --type-small-size: 17px; --type-caption-size: 14px; --type-eyebrow-size: 14px; --type-display-1-size: clamp(38px, 6vw, 64px); --type-display-2-size: clamp(33px, 5vw, 48px); --type-h1-size: clamp(27px, 3.6vw, 40px); --type-h2-size: clamp(23px, 2.6vw, 30px); --type-h3-size: clamp(20px, 1.8vw, 22px); --type-figure-size: clamp(30px, 3.4vw, 36px); --section-y: clamp(64px, 8vw, 96px); --section-y-tight: clamp(48px, 6vw, 64px); --gutter: clamp(20px, 4vw, 32px); /* Mindesthoehe jeder Klickflaeche */ --tap-min: 60px; /* Hoehe des klebenden Kopfs, fuer scroll-margin der Sprungziele */ --header-h: 72px; /* --- Kontrast --------------------------------------------------------- Gemessen auf allen vier Seiten, gegen jede Hintergrundflaeche: --text-accent = gold-600 #a88645 3,41:1 auf Weiss, 3,21:1 auf Sand --text-muted = gray-500 #71757c 4,36:1 auf Sand, 3,94:1 auf Gold Beides liegt unter 4,5:1 und damit unter dem, was das Konzept fuer diese Zielgruppe verlangt. Eine Stufe tiefer im selben Farbfaecher loest es: gold-700 #8b6f36 4,75:1 auf Weiss, 4,55:1 auf Sand gray-600 #4e535c 7,4:1 auf Weiss, 7,0:1 auf Sand Keine neue Farbe, nur ein anderer Schritt derselben Leiter. Gold bleibt Gold, Grau bleibt Grau. Auf Navy bleiben die hellen Rollen unveraendert, die messen dort ohnehin ueber 7:1. Ein Sonderfall bleibt: gold-700 misst auf Sand 4,47:1 und verfehlt die Marke um drei Hundertstel. Der Goldfaecher des Design Systems endet bei 700, deshalb ist --gold-800 hier ergaenzt — dieselbe Leiter, ein Schritt weiter, kein neuer Farbton (5,6:1 auf Sand, 5,9:1 auf Weiss). ZU BESTAETIGEN: --gold-800 gehoert eigentlich in tokens/colors.css des Design Systems, nicht hierher. Solange die Ergaenzung dort nicht abgesegnet ist, steht sie lokal. Siehe README, Abschnitt 7. */ --gold-800: #7a6130; --text-accent: var(--gold-800); --text-muted: var(--gray-600); } /* ======================================================================= 1 · Grundlagen ======================================================================= */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; } /* Kein Scrollen hinter dem Funnel */ body.is-locked { overflow: hidden; } h1, h2, h3 { font-weight: var(--fw-extrabold); } /* Sprungziele rutschen nicht unter den klebenden Kopf */ [id] { scroll-margin-top: calc(var(--header-h) + 16px); } .wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--white { background: var(--surface-page); } .section--sand { background: var(--surface-alt); } .section--navy { background: var(--gradient-navy); } /* Auf Navy: Textfarben umstellen. Klasse spiegelt die .on-inverse-Konvention aus tokens/base.css. */ .section--navy, .on-inverse { color: var(--text-on-inverse); } .section--navy h1, .section--navy h2, .section--navy h3, .on-inverse h1, .on-inverse h2, .on-inverse h3 { color: var(--text-on-inverse); } /* Das Design System dreht Linkfarben nur unter .on-inverse um. Diese Seite markiert dunkle Flaechen ueber .section--navy, deshalb hier dieselbe Umkehr. Ohne sie erbt ein Link auf Navy das dunkle Gold der hellen Flaechen und misst 3,37:1 statt 8,6:1. Knoepfe sind ausgenommen: die bringen ihre eigene Farbgebung mit, und ein goldener Text auf goldener Pille waere unlesbar. */ .section--navy a:not(.btn) { color: var(--text-accent-on-inverse); border-bottom-color: rgba(211, 182, 120, .45); } .section--navy a:not(.btn):hover { color: var(--white); border-bottom-color: var(--white); } .stack { display: flex; flex-direction: column; } .stack-4 { gap: var(--space-4); } .stack-5 { gap: var(--space-5); } .stack-6 { gap: var(--space-6); } .stack-8 { gap: var(--space-8); } .stack-10 { gap: var(--space-10); } .stack-12 { gap: var(--space-12); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Der Fokusring des Design Systems, nie der blaue des Browsers. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--surface-gold); color: var(--text-on-gold); font-family: var(--font-display); font-weight: var(--fw-bold); padding: var(--space-3) var(--space-5); border-radius: var(--radius-button); border-bottom: 0; transition: top var(--dur-base) var(--ease-standard); } .skip-link:focus { top: var(--space-4); } /* ======================================================================= 2 · Typografie-Bausteine ======================================================================= */ .eyebrow { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-lh); letter-spacing: var(--type-eyebrow-ls); text-transform: uppercase; color: var(--text-accent); } .section--navy .eyebrow, .on-inverse .eyebrow { color: var(--text-accent-on-inverse); } .eyebrow::before { content: ""; width: 32px; height: 2px; flex: 0 0 auto; background: var(--rule-accent); } .eyebrow--center { justify-content: center; } .eyebrow--center::before { display: none; } .gold-rule { display: block; width: 56px; height: 3px; background: var(--gradient-gold-rule); border-radius: var(--radius-pill); } .gold-rule--center { margin-inline: auto; } .display { font-family: var(--font-display); font-size: var(--type-display-2-size); line-height: var(--type-display-2-lh); letter-spacing: var(--type-display-2-ls); margin: 0; } .h1 { font-family: var(--font-display); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); margin: 0; max-width: 22ch; } .h2 { font-family: var(--font-display); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); margin: 0; } .h3 { font-family: var(--font-display); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--fw-bold); margin: 0; } .lead { font-size: var(--type-lead-size); line-height: var(--type-lead-lh); max-width: var(--measure-lead); margin: 0; } .section--navy .lead, .on-inverse .lead { color: var(--text-on-inverse-muted); } .prose { max-width: var(--measure-prose); } .muted { color: var(--text-muted); } .section--navy .muted, .on-inverse .muted { color: var(--text-on-inverse-muted); } .small { font-size: var(--type-small-size); line-height: var(--type-small-lh); } .caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--text-muted); } .section--navy .caption, .on-inverse .caption { color: var(--text-on-inverse-muted); } .step-no { font-family: var(--font-mono); font-size: var(--type-caption-size); letter-spacing: .12em; color: var(--text-accent); } .section--navy .step-no, .on-inverse .step-no { color: var(--text-accent-on-inverse); } .section-head { display: flex; flex-direction: column; gap: var(--space-4); } .section-head--center { align-items: center; text-align: center; max-width: var(--container-narrow); margin-inline: auto; } /* Der Satz, der eine Sektion schliesst. Ruhig, aber schwerer als Fliesstext. */ .closer { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.45; color: var(--text-heading); max-width: 46ch; margin: 0; } .section--navy .closer, .on-inverse .closer { color: var(--text-on-inverse); } .closer--center { margin-inline: auto; text-align: center; } /* ======================================================================= 3 · Icons — Lucide 0.544.0 aus assets/icons.svg, per eingebunden. Nie selbst zeichnen (Design System, Abschnitt 4). ======================================================================= */ .ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold-500); } .ic--sm { width: 18px; height: 18px; } .ic--lg { width: 28px; height: 28px; } .ic--muted { color: var(--text-muted); } .section--navy .ic--muted, .on-inverse .ic--muted { color: var(--text-on-inverse-muted); } /* ======================================================================= 4 · Buttons — Pille, das eine durchgaengige Formsignal der Marke ======================================================================= */ .btn { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: .01em; border-radius: var(--radius-button); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; text-decoration: none; border: 2px solid transparent; min-height: var(--tap-min); padding: var(--space-4) var(--space-8); font-size: 18px; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .btn:hover { transform: var(--motion-lift); } .btn:active { transform: var(--motion-press); } .btn--primary { background: var(--action-primary); color: var(--text-on-gold); box-shadow: var(--shadow-gold); border-bottom: 2px solid transparent; } .btn--primary:hover { background: var(--action-primary-hover); color: var(--text-on-gold); } .btn--primary:active { background: var(--action-primary-active); } .btn--outline-inverse { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .5); border-bottom-color: rgba(255, 255, 255, .5); } .btn--outline-inverse:hover { background: var(--white); color: var(--navy-700); border-color: var(--white); } .btn--outline { background: transparent; color: var(--navy-700); border-color: var(--navy-700); border-bottom-color: var(--navy-700); } .btn--outline:hover { background: var(--navy-700); color: var(--white); } .btn--lg { font-size: 19px; padding: var(--space-5) var(--space-10); } .btn--block { width: 100%; } .btn[disabled] { background: var(--action-disabled); color: var(--gray-400); box-shadow: none; cursor: not-allowed; transform: none; } /* ======================================================================= 5 · Karten ======================================================================= */ .card { background: var(--surface-card); color: var(--text-body); border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-8); box-shadow: var(--shadow-sm); } .card--inverse { background: var(--surface-card-inverse); color: var(--text-on-inverse); border-color: var(--border-inverse); box-shadow: var(--shadow-inset-hairline); } .card--inverse .h3 { color: var(--text-on-inverse); } .card--inverse .muted { color: var(--text-on-inverse-muted); } .card--gold { background: var(--surface-gold-soft); border-color: var(--gold-300); } .card--raised { box-shadow: var(--shadow-lg); } .card--flush { padding: 0; overflow: hidden; } /* ======================================================================= 6 · Medien — jedes Foto sitzt im Rahmen des Design Systems. Ohne src rendert der Rahmen den Fotoauftrag aus Teil 3 des Konzepts, damit beim Shooting nichts uebersehen wird. ======================================================================= */ .media { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .media__frame { position: relative; aspect-ratio: var(--media-ratio, 4 / 3); border-radius: var(--radius-media); overflow: hidden; background: var(--sand-100); border: var(--border-w) solid var(--border-subtle); } .section--navy .media__frame, .on-inverse .media__frame { background: rgba(255, 255, 255, .06); border-color: var(--border-inverse); } .media__frame > img { width: 100%; height: 100%; object-fit: cover; } /* Platzhalter: der Fotoauftrag, sichtbar bis das Bild da ist. */ .media__brief { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-6); text-align: center; align-items: center; } .media__brief .ic { color: var(--gray-500); } .section--navy .media__brief .ic, .on-inverse .media__brief .ic { color: rgba(255, 255, 255, .45); } .media__label { font-family: var(--font-display); font-size: var(--type-caption-size); font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; /* gray-400 misst hier 2,45:1. Der Fotoauftrag muss lesbar sein — er ist die Arbeitsanweisung fuer das Shooting, nicht Dekoration. */ color: var(--gray-600); } .section--navy .media__label, .on-inverse .media__label { color: rgba(255, 255, 255, .5); } .media__brief p { font-size: var(--type-caption-size); line-height: 1.5; color: var(--gray-600); max-width: 34ch; } .section--navy .media__brief p, .on-inverse .media__brief p { color: rgba(255, 255, 255, .55); } /* Bildunterschriften sind Copy (Konzept, Teil 3) — deshalb tragen sie Gewicht und stehen nicht kleiner als noetig. */ .media__caption { font-size: var(--type-small-size); line-height: 1.5; font-weight: var(--fw-semibold); color: var(--text-heading); margin: 0; } .section--navy .media__caption, .on-inverse .media__caption { color: var(--text-on-inverse); } /* ======================================================================= 7 · Listen ======================================================================= */ .checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); } .checklist li { display: flex; gap: var(--space-4); align-items: flex-start; line-height: var(--type-body-lh); } .checklist .ic { margin-top: 4px; } .checklist--tight { gap: var(--space-3); } /* ======================================================================= 8 · Kopf — das einzige klebende und das einzige transparente Element ======================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(21, 34, 53, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: var(--border-w) solid var(--border-inverse); } .site-header__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-3) var(--gutter); display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-h); } .site-header__logo img { height: 38px; width: auto; } .site-header__logo { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; } .site-nav { display: flex; gap: var(--space-6); margin-left: auto; } .site-nav a { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 16px; color: rgba(255, 255, 255, .82); border-bottom: 2px solid transparent; padding-block: var(--space-2); } .site-nav a:hover { color: var(--gold-400); border-bottom-color: var(--gold-500); } /* Telefonnummer im Kopf. Ein Teil dieser Zielgruppe ruft lieber an, als ein Formular auszufuellen — diese Anrufe sind die besten Leads (Konzept, Teil 4, Punkt 5). Deshalb steht sie sichtbar und wird nie ausgeblendet. */ .site-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 17px; color: var(--white); border: 2px solid rgba(255, 255, 255, .45); border-radius: var(--radius-button); padding: var(--space-2) var(--space-5); min-height: 46px; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .site-nav + .site-header__phone { margin-left: 0; } .site-header__phone:hover { background: var(--white); color: var(--navy-700); border-color: var(--white); } .site-header__phone .ic { color: currentColor; } /* ======================================================================= 9 · Sektion 1 · Erster Bildschirm ======================================================================= */ .hero { padding-block: clamp(40px, 6vw, 72px) var(--section-y); } /* Überschrift und Vorspann laufen über die volle Breite, darunter stehen der Fragekasten und das Foto nebeneinander. So steht der erste Klick im ersten Bildschirm und das Foto behält seinen Platz rechts, ohne dass eine der beiden Spalten ins Leere läuft. */ .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 64px); align-items: start; } .hero__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-6); max-width: 900px; } .hero__media { --media-ratio: 4 / 3; align-self: center; } .hero__headline span { display: block; } /* Der erste Satz stellt fest, der zweite ist der Punkt. Die Hierarchie kommt über die Helligkeit, nicht über Gold — Gold trägt auf dieser Seite die Handlung, nicht die Dekoration. */ .hero__headline span:first-child { color: rgba(255, 255, 255, .72); } .hero__headline span + span { color: var(--white); } /* ======================================================================= 10 · Der Fragekasten — Frage 1, direkt im ersten Bildschirm. Steht identisch noch einmal am Seitenende (Konzept, Abschluss). ======================================================================= */ .qbox { background: var(--surface-card); border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: var(--space-5); } .qbox__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(21px, 2.2vw, 25px); line-height: 1.25; color: var(--text-heading); margin: 0; } .qbox__options { display: flex; flex-direction: column; gap: var(--space-3); } .qbox__note { font-size: var(--type-small-size); line-height: 1.5; color: var(--text-muted); max-width: var(--measure-prose); margin: 0; } /* Antwortflaeche. Gilt im Fragekasten und im Funnel gleichermassen: mindestens 60 px hoch, Schrift ab 19 px (Funnel-Grundregel 6). */ .answer { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: var(--tap-min); padding: var(--space-4) var(--space-5); text-align: left; font-family: var(--font-body); font-size: 19px; line-height: 1.4; color: var(--text-body); background: var(--white); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-control); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .answer:hover { border-color: var(--gold-500); background: var(--gold-100); box-shadow: var(--shadow-md); transform: var(--motion-lift); } .answer:active { transform: var(--motion-press); } /* Gewaehlt: kurzer Moment der Bestaetigung, bevor der Funnel weiterschaltet. */ .answer.is-chosen { border-color: var(--gold-500); background: var(--gold-100); box-shadow: 0 0 0 3px rgba(195, 160, 89, .22); } .answer__marker { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--radius-pill); border: 2px solid var(--gray-300); display: grid; place-items: center; transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .answer__marker .ic { width: 15px; height: 15px; color: var(--navy-800); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); } .answer:hover .answer__marker, .answer.is-chosen .answer__marker { border-color: var(--gold-500); background: var(--gold-500); } .answer.is-chosen .answer__marker .ic { opacity: 1; } /* ======================================================================= 11 · Vertrauenszeile ======================================================================= */ .trustbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8); padding: var(--space-4) var(--space-6); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .06); border: var(--border-w) solid var(--border-inverse); margin-top: var(--space-10); } .trustbar li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--type-small-size); font-weight: var(--fw-semibold); color: var(--text-on-inverse); } /* Steht innerhalb von .wrap und behält deren Zentrierung — nur die Innenabstände wachsen, damit die Pille den Text nicht am Rand klebt. */ .trustbar { list-style: none; padding-inline: clamp(20px, 4vw, 32px); } /* Der dritte Punkt ist der wichtigste der ganzen Seite: kein Zugriff. Er darf optisch nicht neben den anderen verschwinden. */ .trustbar li.is-key { color: var(--gold-300); } /* Telefonnummer im Fliesstext. Bekommt Flaeche, weil ein Teil dieser Zielgruppe lieber anruft als ein Formular auszufuellen — und weil diese Anrufe die besten Leads sind, die es gibt. */ .tel-inline { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-2); font-weight: var(--fw-semibold); } .stats { display: flex; flex-wrap: wrap; gap: var(--space-10); } .stat__value { display: block; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--type-figure-size); line-height: var(--type-figure-lh); letter-spacing: var(--type-figure-ls); color: var(--text-accent-on-inverse); } .stat__label { display: block; font-size: var(--type-caption-size); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-on-inverse-muted); } /* ======================================================================= 12 · Sektion 2 · Erkennst Du Dich wieder Kein Foto, bewusst. Diese Sektion lebt von Ruhe (Konzept, Teil 3). ======================================================================= */ .mirror { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 56px); } .mirror p { font-size: clamp(19px, 1.9vw, 21px); line-height: 1.6; max-width: 38ch; margin: var(--space-5) 0 0; } /* ======================================================================= 13 · Sektion 3 · Die drei Wege ======================================================================= */ .ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } .way { display: flex; flex-direction: column; gap: var(--space-4); } /* Der dritte Weg ist die Antwort. Er traegt das Gold, die anderen nicht. */ .way--answer .ic { color: var(--gold-700); } /* Auf der goldgetoenten Karte traegt Gold auf Gold nicht — die Schrittzahl misst dort nur 2,9:1. Sie wird navy. Die Karte ist ohnehin schon das goldfuehrende Element, sie braucht die Zahl nicht auch noch in Gold. */ .card--gold .step-no { color: var(--navy-700); } .way:not(.way--answer) .ic { color: var(--gray-400); } /* ======================================================================= 14 · Sektion 4 · Wie eine Fahrstunde ablaeuft ======================================================================= */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); } .step { display: flex; flex-direction: column; gap: var(--space-4); } /* ======================================================================= 15 · Sektion 5 · Ergebnis ======================================================================= */ .outcome { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .outcome .checklist li { font-size: clamp(19px, 1.8vw, 20px); } .outcome .media { align-self: center; } /* Was ausdruecklich nicht dazugehoert. Kein Gold — das ist keine Zusage, das ist eine Abgrenzung. */ .exclusion { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-12); } .exclusion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); } .exclusion p { max-width: var(--measure-prose); } .exclusion li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--type-small-size); font-weight: var(--fw-semibold); color: var(--text-body); } /* ======================================================================= 16 · Sektion 6 · Landkarte, keine Preisliste ======================================================================= */ .map { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-5); } /* Sieben Felder in zwei Reihen: vier oben, drei unten. */ .map > li:nth-child(-n + 4) { grid-column: span 3; } .map > li:nth-child(n + 5) { grid-column: span 4; } .map { list-style: none; margin: 0; padding: 0; } .map .card { height: 100%; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); } .map .card p { max-width: 46ch; } /* ======================================================================= 17 · Sektion 7 · Daniel, gesetzt wie ein Brief ======================================================================= */ .letter { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .letter__body p { font-size: clamp(19px, 1.9vw, 20px); line-height: 1.7; max-width: var(--measure-prose); } .letter__body p + p { margin-top: var(--space-5); } /* Sein eigener Satz. Der Fehler zuerst — er traegt die Sektion. */ .letter__pull { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; letter-spacing: var(--type-h2-ls); color: var(--text-heading); margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 3px solid var(--gold-500); max-width: 20ch; } .signature { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-w) solid var(--border-subtle); } .signature__slot { height: 64px; display: flex; align-items: center; gap: var(--space-3); color: var(--gray-600); font-size: var(--type-caption-size); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-display); font-weight: var(--fw-bold); } .signature__slot .ic { color: var(--gray-500); } .signature__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--type-small-size); color: var(--text-heading); } /* ======================================================================= 18 · Sektion 8 · Stimmen ======================================================================= */ .voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .voice { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; } .voice__mark { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 40px; line-height: .8; /* gold-500 misst als Glyphe auf Weiss 2,47:1 und verschwindet halb. Eine Stufe tiefer, damit das Zeichen traegt. */ color: var(--gold-600); } .voice blockquote { margin: 0; font-size: var(--type-body-size); line-height: 1.7; } .voice__person { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-5); border-top: var(--border-w) solid var(--border-subtle); } /* Foto, voller Name, Ort und Taetigkeit. Ohne diese vier Angaben zaehlt ein Zitat bei dieser Zielgruppe nicht (Konzept, Sektion 8, Regel 2). */ .voice__photo { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--sand-100); border: var(--border-w) solid var(--border-subtle); display: grid; place-items: center; } .voice__photo .ic { color: var(--gray-400); } .voice__name { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--type-small-size); color: var(--text-heading); } .voice__meta { display: block; font-size: var(--type-caption-size); color: var(--text-muted); } /* ======================================================================= 19 · Sektion 9 · Kapazitaet Kein Countdown, kein Zaehler. Ein Kalender, der zeigt statt behauptet. ======================================================================= */ .capacity { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-card); background: rgba(255, 255, 255, .06); border: var(--border-w) solid var(--border-inverse); list-style: none; margin: 0; } .week li { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-block: var(--space-4); border-radius: var(--radius-md); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--type-caption-size); letter-spacing: .1em; text-transform: uppercase; /* .38 misst 3,49:1. Die geschlossenen Tage sollen zurueckstehen, aber lesbar bleiben — sie tragen die Aussage der Sektion mit. */ color: rgba(255, 255, 255, .55); border: var(--border-w) solid transparent; } .week li.is-open { background: var(--gold-500); color: var(--navy-800); } .week__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; opacity: .35; } .week li.is-open .week__dot { opacity: 1; } /* ======================================================================= 20 · Sektion 10 · Fuer wen das nichts ist ======================================================================= */ .exclude { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) clamp(32px, 4vw, 56px); } .exclude li { display: flex; gap: var(--space-4); align-items: flex-start; font-size: clamp(19px, 1.8vw, 20px); line-height: 1.6; } .exclude .ic { margin-top: 5px; } /* ======================================================================= 21 · Sektion 11 · Haeufige Bedenken Aufklappbar per
, damit es ohne JavaScript funktioniert. Alle Fragen bleiben als Ueberschrift sichtbar. ======================================================================= */ .faq { border-top: var(--border-w) solid var(--border-subtle); } .faq details { border-bottom: var(--border-w) solid var(--border-subtle); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); cursor: pointer; list-style: none; padding-block: var(--space-5); min-height: var(--tap-min); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(18px, 1.9vw, 20px); line-height: 1.4; color: var(--text-heading); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--gold-700); } .faq summary .ic { color: var(--gold-600); transition: transform var(--dur-base) var(--ease-standard); } .faq details[open] summary .ic { transform: rotate(180deg); } .faq details > p { margin: 0; padding-bottom: var(--space-6); max-width: var(--measure-prose); color: var(--text-muted); } /* ======================================================================= 22 · Fuss ======================================================================= */ .site-footer { background: var(--surface-inverse-deep); color: var(--text-on-inverse-muted); padding: var(--space-16) var(--gutter) var(--space-10); } .site-footer__top { max-width: var(--container-max); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--space-10); align-items: flex-start; justify-content: space-between; } .site-footer img { height: 56px; width: auto; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); list-style: none; margin: 0; padding: 0; } /* Impressum und Datenschutz ohne Suchen — und mit einer Flaeche, die ein 62-Jaehriger auf dem Handy auch trifft. */ .site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-400); border-bottom-color: rgba(211, 182, 120, .35); font-size: var(--type-small-size); } .site-footer__bar { max-width: var(--container-max); margin: var(--space-10) auto 0; padding-top: var(--space-6); border-top: var(--border-w) solid var(--border-inverse); } .site-footer__note { /* Ueber die volle Containerbreite waren das 169 Zeichen pro Zeile. Kleingedrucktes wird dadurch unlesbar, gerade fuer diese Zielgruppe. */ max-width: 80ch; margin: var(--space-6) auto 0; margin-inline: auto; font-size: var(--type-caption-size); line-height: 1.6; color: rgba(255, 255, 255, .45); } /* ======================================================================= 23 · Der Funnel Eine Frage pro Bildschirm. Klicken statt tippen. Fortschritt mit Zahl. Zurueck immer moeglich. Kein Popup — der Layer oeffnet ausschliesslich auf Klick des Nutzers und laesst sich jederzeit schliessen. ======================================================================= */ .funnel { position: fixed; inset: 0; z-index: 100; background: var(--surface-page); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .funnel[hidden] { display: none; } .funnel__bar { position: sticky; top: 0; z-index: 2; background: var(--gradient-navy); border-bottom: var(--border-w) solid var(--border-inverse); } /* Gleiche Breite wie das Panel darunter, damit Logo, Zähler und Frage auf derselben Kante stehen. */ .funnel__bar-inner { max-width: 620px; margin-inline: auto; padding: var(--space-4) var(--gutter); display: flex; align-items: center; gap: var(--space-4); } .funnel__logo img { height: 30px; width: auto; } .funnel__logo { border-bottom: 0; } /* Fortschrittsanzeige immer sichtbar, mit Zahl. Unsicherheit ueber die Laenge ist der haeufigste Abbruchgrund (Funnel-Grundregel 4). */ .funnel__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--type-small-size); font-weight: 500; letter-spacing: .04em; color: var(--gold-300); white-space: nowrap; } .funnel__close { background: none; border: 0; cursor: pointer; padding: var(--space-2); color: rgba(255, 255, 255, .7); display: grid; place-items: center; } .funnel__close:hover { color: var(--white); } .funnel__close .ic { color: currentColor; width: 24px; height: 24px; } .funnel__track { height: 4px; background: rgba(255, 255, 255, .12); } .funnel__fill { height: 100%; width: 0; background: var(--gradient-gold-rule); transition: width var(--dur-slow) var(--ease-standard); } .funnel__body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: clamp(32px, 6vw, 64px) var(--gutter) var(--space-16); } .funnel__panel { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: var(--space-6); } .funnel__question { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(25px, 3.4vw, 34px); line-height: 1.22; letter-spacing: var(--type-h1-ls); color: var(--text-heading); margin: 0; } .funnel__hint { font-size: var(--type-small-size); color: var(--text-muted); margin: 0; } .funnel__back { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; background: none; border: 0; cursor: pointer; padding: var(--space-3) 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--type-small-size); color: var(--text-muted); } .funnel__back:hover { color: var(--gold-700); } .funnel__back .ic { color: currentColor; width: 18px; height: 18px; } .funnel__back[hidden] { display: none; } /* Der Wechsel zum Kontaktblock muss sichtbar sein, sonst entsteht das Gefuehl, hereingelegt worden zu sein (Konzept, Der Kontaktblock). */ .funnel__switch { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: var(--border-w) solid var(--border-subtle); } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field > span { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--type-small-size); letter-spacing: .02em; color: var(--text-heading); } .field input { width: 100%; font-family: var(--font-body); font-size: 19px; line-height: 1.4; min-height: 56px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-control); background: var(--white); color: var(--text-body); border: var(--border-w) solid var(--border-strong); outline: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .field input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(195, 160, 89, .22); outline: none; } .field input[aria-invalid="true"] { border-color: var(--status-danger); } .field__error { font-size: var(--type-caption-size); color: var(--status-danger); min-height: 1em; } .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } /* Erreichbarkeit als Klickflaechen, nicht als Auswahlmenue. Wer einen Zeitraum waehlt, hat den Anruf innerlich schon zugesagt. */ .timeslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .timeslot { min-height: var(--tap-min); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px; color: var(--text-body); background: var(--white); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-control); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .timeslot:hover { border-color: var(--gold-500); background: var(--gold-100); } .timeslot[aria-pressed="true"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--text-on-gold); } .funnel__legal { font-size: var(--type-caption-size); line-height: 1.55; color: var(--text-muted); margin: 0; } /* ======================================================================= 24 · Dankeseiten ======================================================================= */ .thanks { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .caller { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; } .caller__photo { width: 148px; height: 148px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .06); border: var(--border-w) solid var(--border-inverse); display: grid; place-items: center; } .caller__photo .ic { color: rgba(255, 255, 255, .45); width: 32px; height: 32px; } /* Diese Zielgruppe geht nicht an unbekannte Nummern. Die Nummer, die im Display erscheint, ist der wirksamste Einzelhebel fuer die Erreichbarkeitsquote (Konzept, Ausgang A, Punkt 2). */ .caller__number { font-family: var(--font-mono); font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; letter-spacing: .02em; color: var(--gold-400); } /* ======================================================================= 25 · Scroll-Reveal — Fade plus 16 px Anstieg, 640 ms. Sonst nichts. Ohne JavaScript ist alles sichtbar; erst .js versteckt. ======================================================================= */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-standard), transform var(--dur-reveal) var(--ease-standard); } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ======================================================================= 26 · Umbrueche ======================================================================= */ @media (max-width: 1000px) { .hero__grid, .outcome, .letter, .capacity, .thanks { grid-template-columns: 1fr; } /* Auf dem Handy zaehlt der erste Klick, nicht das Foto. */ .hero__media { order: 2; } /* Gestapelt laeuft das Bild ueber die volle Breite. Im Hochformat 4:3 waere es dann ueber 500 px hoch und schoebe die Vertrauenszeile aus dem Bild. Querformat ist ohnehin die Vorgabe der Bildregie. */ .hero__media { --media-ratio: 16 / 9; } .ways, .steps, .voices { grid-template-columns: 1fr; } .map > li:nth-child(-n + 4), .map > li:nth-child(n + 5) { grid-column: span 6; } .letter__pull { max-width: none; } } @media (max-width: 820px) { /* Die Telefonnummer bleibt. Die Navigation weicht. */ .site-nav { display: none; } .site-header__phone { margin-left: auto; } .mirror, .exclude { grid-template-columns: 1fr; } .stats { gap: var(--space-8); } .week { grid-template-columns: repeat(7, 1fr); gap: var(--space-1); padding: var(--space-4); } /* Nicht unter 14 px gehen — das ist die Untergrenze fuer diese Seite. Platz kommt stattdessen aus der Laufweite und dem Innenabstand. */ .week li { padding-block: var(--space-3); font-size: var(--type-caption-size); letter-spacing: .02em; } } @media (max-width: 560px) { /* Erst hier faellt die Landkarte auf eine Spalte. Darueber traegt das Raster die Aussage der Sektion: sieben Felder, ueberschaubar. */ .map > li:nth-child(-n + 4), .map > li:nth-child(n + 5) { grid-column: span 12; } .site-header__phone span { display: none; } .site-header__phone { padding-inline: var(--space-4); min-width: 46px; } .field-row, .timeslots { grid-template-columns: 1fr; } .btn { width: 100%; } .trustbar { padding-inline: var(--space-5); } } @media print { .site-header, .funnel { display: none; } }