/* ============================================================
cg-lp-zahnzusatz — LP-eigene Styles
Stand: 2026-05-13 (Initial-Build aus LP_CONTENT.md Artefakt 1)
Diese Datei lebt im LP-Repo (NICHT aus brand-src), wird vom
Build-Skript NICHT ueberschrieben. Brand-Konvention:
KONVENTIONEN.md §4 LP-Override-Regel.
Stylesheet-Reihenfolge (Cascade):
1. fonts.css - @font-face (aus brand-src)
2. tokens.css - Brand-Defaults (aus brand-src)
3. lp.css - LP-Overrides (hier)
============================================================ */
/* ============================================================
LP-Tokens — Spezifika dieser LP, nicht im Brand-Hub.
Shadows, Form-Eingabe-Radius, dezenter Karten-Hintergrund.
============================================================ */
:root {
--lp-shadow-soft: 0 8px 32px rgb(30 62 107 / 0.08);
--lp-shadow-stage: 0 24px 60px rgb(30 62 107 / 0.18);
--lp-radius-input: 10px;
--lp-radius-card: 12px;
--lp-grey-bg: #f7f8fa;
--lp-text-on-dark-90: rgb(255 255 255 / 0.92);
--lp-text-on-dark-70: rgb(255 255 255 / 0.7);
}
/* ============================================================
Container — LP nutzt Default-Container 1200 px aus tokens.css.
Eigene Klasse .lp-container fuer LP-Sektionen mit gleicher
Breite und Padding.
============================================================ */
.lp-container {
width: 100%;
max-width: var(--cg-container-default);
margin-inline: auto;
padding-inline: var(--cg-space-6);
}
/* Mobile-Safety-Net (KONVENTIONEN §16.3). */
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
/* Alle Bilder/Videos/Iframes max 100% Container-Breite */
img, video, iframe, svg {
max-width: 100%;
height: auto;
}
/* Flex/Grid-Children duerfen schrumpfen unter ihren Content (Default
* min-width: auto sprengt sonst Container wenn ein einzelnes Wort
* breiter ist als der zugewiesene Slot). */
.lp-hero__inner > *,
.lp-hero__text > *,
.lp-mechanik__grid > *,
.lp-rechner__grid > *,
.lp-rechner__konstellation-grid > *,
.lp-rechner__tarif-grid > *,
.lp-beispiele__grid > *,
.lp-vertrauen__grid > *,
.lp-warum-komfort__grid > *,
.lp-bedingungen-tarife__grid > *,
.cg-team__grid > *,
.cg-social-proof__platforms > * {
min-width: 0;
}
/* LP-Override: Header im Container statt full-bleed. Header-Inhalt
* fluchtet mit Hero-Form und LP-Container (max 1200px).
* Brand-Hub-Snippet (brand-src/brand/snippets/header-lp.html) wurde
* angepasst (img -> cg-logo-white.svg, background -> transparent),
* deshalb hier nur noch max-width + z-index. Marcus 2026-05-15. */
header.cg-header-lp {
max-width: var(--cg-container-default);
margin-inline: auto;
position: relative;
z-index: 2;
}
header.cg-header-lp .cg-header-lp__logo img {
width: 140px;
}
@media (max-width: 600px) {
header.cg-header-lp .cg-header-lp__logo img {
width: 110px;
}
}
/* Silbentrennung fuer fliessende Textinhalte. Greift auf deutsche
* Trennregeln zurueck via lang="de" am -Element. Verhindert
* dass lange Woerter ("Innovations- und Zukunftsgarantie",
* "Versicherungsbedingungen") halbe Zeilen leer lassen oder ausserhalb
* des Containers landen. Buttons/CTAs sind explizit ausgeschlossen,
* weil dort harte Eingriffe ins Wording stoeren.
*
* `hyphenate-limit-chars: 12 4 4`: trenne nur Woerter ab 12 Zeichen,
* mindestens 4 Zeichen vor und 4 nach der Trennung. Verhindert dass
* kurze Woerter unnoetig getrennt werden und den Lesefluss stoeren. */
h1, h2, h3, h4, p, li, td, th, dt, dd, summary {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphenate-limit-chars: 12 4 4;
-webkit-hyphenate-limit-chars: 12 4 4;
}
.cg-btn, .lp-btn-ghost, .lp-btn-whatsapp, .lp-btn-mail,
.lp-konst-card, .lp-tarif-card,
.lp-warum-komfort__badge, .lp-tarif-card__badge,
/* Box-/Card-Kontexte: schmale Spalten + Silbentrennung erzeugen
* unschoene Umbrueche. Lese-Limit-freie, mehrspaltige Inhalte
* sind hier sauberer ohne Hyphens. */
.lp-section__sub,
.lp-rechner__result-sub,
.lp-step-card, .lp-step-card *,
.lp-warum-komfort__col, .lp-warum-komfort__col *,
.lp-beispiel-card, .lp-beispiel-card *,
.lp-rechner__tarif-card, .lp-rechner__tarif-card *,
.lp-vertrauen__item, .lp-vertrauen__item *,
.lp-form__prefill, .lp-form__prefill * {
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
@media (max-width: 600px) {
.lp-container {
padding-inline: var(--cg-space-4);
}
/* Headlines und Body-Texte duerfen umbrechen.
* dt/dd fuer Glossar (Begriffe wie "Vorversicherungszeit-Anrechnung"),
* th/td fuer Vergleichstabelle (Leistungs-Beschriftungen). Ohne das
* werden lange Woerter durch body { overflow-x: hidden } abgeschnitten. */
h1, h2, h3, h4, p, li, dt, dd, th, td {
overflow-wrap: anywhere;
}
/* Mobile Typografie-Skala mit klarer Hierarchie:
* H1 Hero (dominant) > H2 Section > H3 Sub > H4 Mini > Body > Small
* Verhaeltnisse stabil, line-height konsistent.
* KONVENTIONEN §16.3 Mobile-Layout-Pattern. */
.lp-hero__text h1 {
font-size: clamp(2rem, 8vw, 2.5rem); /* ~36-45 px - dominant */
line-height: 1.15;
}
h2,
.lp-section__headline,
.lp-story__headline {
font-size: 1.625rem; /* ~29 px - Section-Stufe */
line-height: 1.2;
}
h3 {
font-size: 1.25rem; /* ~22 px - Sub */
line-height: 1.25;
}
h4 {
font-size: 1.125rem; /* ~20 px - Mini */
line-height: 1.3;
}
/* Hero-Sub deutlich groesser als Section-Sub, weil Hero-Sub direkter
* Begleiter der Hero-Headline ist. */
.lp-hero__sub {
font-size: 1.125rem; /* ~20 px */
line-height: 1.5;
}
.lp-section__sub {
font-size: 1rem; /* 18 px - normal Body */
line-height: 1.5;
}
}
.lp-section {
padding-block: var(--cg-section-padding);
}
/* Section-Headlines linksbuendig (Conversion-LP-Pattern, Lese-Fluss
* gegen zentrierte Marken-Statements). Konsistenz: alle Sections
* starten links, User-Auge folgt linkem Rand. */
.lp-section__headline {
margin: 0 0 var(--cg-space-4);
text-align: left;
}
.lp-section__sub {
text-align: left;
font-size: var(--cg-text-lead);
color: var(--cg-blue-80);
max-width: 760px;
margin: 0 0 var(--cg-space-12);
}
/* ============================================================
LP-Buttons — .cg-btn (Lime, Brand-Standard) wird in
tokens.css definiert. Hier nur LP-eigene Varianten:
- lp-btn-ghost: textlich, ohne Hintergrund
- lp-btn-whatsapp: WhatsApp-Green
============================================================ */
.lp-btn-ghost {
display: inline-block;
padding: var(--cg-space-3) var(--cg-space-4);
color: var(--cg-blue);
font-weight: 700;
text-decoration: none;
transition: color 0.15s ease;
}
.lp-btn-ghost:hover {
color: var(--cg-teal);
}
/* Pillar-Variante: sichtbarer Ghost-Button mit Border, fuer sekundaere
* CTAs (z.B. "Alle Tarif-Details und Bedingungen") die nicht in die
* Lime-Haupt-CTA-Welt gehoeren, aber deutlicher als Textlink wirken
* sollen. */
.lp-btn-ghost--pillar {
padding: var(--cg-space-3) var(--cg-space-6);
border: 2px solid var(--cg-blue);
border-radius: var(--cg-shape-button);
color: var(--cg-blue-deep);
transition: background 0.15s ease, color 0.15s ease;
}
.lp-btn-ghost--pillar:hover {
background: var(--cg-blue);
color: white;
}
.lp-warum-komfort__pillar-cta {
margin-top: var(--cg-space-8);
text-align: center;
}
.lp-btn-whatsapp {
display: inline-block;
padding: var(--cg-space-3) var(--cg-space-6);
background: #25d366;
color: white;
font-weight: 700;
text-decoration: none;
border-radius: var(--cg-shape-button);
transition: transform 0.15s ease, background-color 0.15s ease;
}
.lp-btn-whatsapp:hover {
background: #1da851;
transform: translateY(-1px);
}
/* Mail-Button - Pendant zu WhatsApp-Button, Brand-Blau outlined.
Beide nebeneinander in lp-direct-contact, vor dem Form. */
.lp-btn-mail {
display: inline-block;
padding: var(--cg-space-3) var(--cg-space-6);
background: white;
color: var(--cg-blue-deep);
border: 2px solid var(--cg-blue);
font-weight: 700;
text-decoration: none;
border-radius: var(--cg-shape-button);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lp-btn-mail:hover {
background: var(--cg-blue);
color: white;
transform: translateY(-1px);
}
/* Direkter Kontakt-Block - vor dem Form, niedrigschwellige
Alternative laut KONVENTIONEN §13.3. Pflicht auf allen LPs. */
.lp-direct-contact {
margin: 0 0 var(--cg-space-6);
}
.lp-direct-contact__lead {
margin: 0 0 var(--cg-space-3);
color: var(--cg-blue-deep);
font-weight: 700;
}
.lp-direct-contact__row {
display: flex;
gap: var(--cg-space-3);
flex-wrap: wrap;
}
@media (max-width: 600px) {
.lp-direct-contact__row {
flex-direction: column;
}
.lp-direct-contact__row a {
text-align: center;
}
}
/* "Oder schick uns deine Anfrage:" - Trennzeile zwischen
Direkt-Kontakt-Block und Form. */
.lp-form__or {
margin: var(--cg-space-6) 0 var(--cg-space-4);
color: var(--cg-blue-60);
font-size: var(--cg-text-small);
font-weight: 400;
}
/* ============================================================
HERO
Zwei-Spalten-Layout: links Text, rechts Foto-Wrap mit
Brand-Element-Maske. Mobile: einspaltig, Foto unten.
============================================================ */
/* Hero v5 (Marcus 2026-05-15): Foto in Brand-Logo-Form-Maske.
* Form aus Styleguide (asymmetrische Pille, TL+BR oval rund, TR+BL hart).
* Pille deckt rechte ~75% der Hero ab, eine Rundung ragt ins Sichtfeld,
* Text-Card vorne links. CD-konform - keine Welle, kein Stockfoto-Look. */
.lp-hero {
position: relative;
min-height: 720px;
padding-block: 0 clamp(64px, 8vw, 112px);
background: transparent;
overflow: hidden;
}
/* Container im Hero: position relative damit Card/Header-Stacking
* korrekt. SVG ist absolute zum Container, Header und Card im Flow. */
.lp-hero > .lp-container {
position: relative;
min-height: inherit;
}
/* Header sitzt AUF der Pille - z-index 2 ueber SVG (z=0) und Card (z=1).
* padding-inline:0 weil .lp-container schon die linke/rechte Kante
* bringt - sonst doppeltes padding und Logo zu weit nach innen. */
.lp-hero .cg-header-lp {
position: relative;
z-index: 2;
padding-inline: 0;
margin-bottom: var(--cg-space-8);
}
/* Brand-Hero-Form: Snippet "hero-form" aus brand-hub, Klasse
* .cg-hero-form definiert in tokens.css. Hier nur als Hinweis -
* lokale Overrides nicht noetig. */
/* Foto-Overlay in der Pille - TEST. Identisches Layout wie
* .cg-hero-form, sodass das Bild deckungsgleich ueber der Vollton-
* Pille liegt. DOM-Order entscheidet: Foto-SVG ist NACH dem
* hero-form Snippet, liegt also visuell drueber bei gleichem
* z-index. */
.lp-hero__photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 1920 / 1167;
z-index: 0;
display: block;
pointer-events: none;
}
/* Text-Card vorne links. Etwas breiter (640px) damit Headline
* mehr Atemflaeche bekommt. */
.lp-hero__card {
position: relative;
z-index: 1;
background: white;
padding: clamp(32px, 4vw, 56px);
max-width: 640px;
box-shadow: 0 16px 48px rgba(30, 62, 107, 0.15);
border-radius: 8px;
}
@media (max-width: 900px) {
.lp-hero {
min-height: 0;
padding-block: var(--cg-space-6) var(--cg-space-12);
}
/* Mobile: Bild innerhalb der Pille nach oben shiften, damit
* Maedchen-Gesicht im oberen Drittel der Pille sitzt. SVG-Attribute
* x/y/width/height sind in modernen Browsern via CSS ueberschreibbar.
* Unter dem Bild wird die Vollton-Hero-Pille sichtbar (gleiche Form). */
.lp-hero__photo image {
y: -180px;
}
.lp-hero__card {
max-width: 100%;
padding: var(--cg-space-8) var(--cg-space-6);
}
}
/* Tablet (601-900 px): Bild noch staerker nach oben shiften.
* Bei breiterer Pille wird der Foto-Bereich proportional groesser
* und das Maedchen-Gesicht rutscht visuell wieder nach unten - mit
* dem groesseren y-Shift bleibt es im oberen Drittel sichtbar. */
@media (min-width: 601px) and (max-width: 900px) {
.lp-hero__photo image {
y: -380px;
}
}
.lp-hero__card h1 {
margin-bottom: var(--cg-space-4);
/* Kleiner als Default (--cg-text-h1 = 41-72px), weil mit Bild-Hero
* eine zu grosse Headline visuell dominant wirkt. Marcus 2026-05-15. */
font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem);
line-height: 1.15;
}
.lp-hero__card h1 strong {
color: var(--cg-teal);
}
.lp-hero__sub {
font-size: var(--cg-text-lead);
color: var(--cg-text);
margin-bottom: var(--cg-space-8);
font-weight: 400;
}
.lp-hero__bullets {
list-style: none;
padding: 0;
margin: 0 0 var(--cg-space-8);
display: flex;
flex-direction: column;
gap: var(--cg-space-3);
}
.lp-hero__bullets li {
display: flex;
align-items: flex-start;
gap: var(--cg-space-3);
padding-left: 0;
}
.lp-hero__bullets li::before {
content: "";
flex: 0 0 22px;
height: 22px;
margin-top: 3px;
background-color: var(--cg-teal);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}
.lp-hero__cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cg-space-4) var(--cg-space-6);
}
/* Hero-Foto: aspect-ratio Container mit Brand-Element-Form-Maske.
* Foto seit 2026-05-15 live (Pexels, Nataliya Vaitkevich).
* Landscape 3:2 (Original 3321x2214) - kommt einer Familien-Szene
* raumlich entgegen und passt zur Hero-Layouthöhe. */
.lp-hero__photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
max-width: 640px;
justify-self: end;
}
.lp-hero__photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Brand-Element-Form: asymmetrisch TL+BR rund, TR+BL hart.
* --cg-radius-card aus tokens.css (70px). */
border-top-left-radius: var(--cg-radius-card);
border-top-right-radius: 0;
border-bottom-right-radius: var(--cg-radius-card);
border-bottom-left-radius: 0;
}
.lp-hero__photo-placeholder {
position: absolute;
inset: 0;
background: var(--cg-gradient);
border-radius: var(--cg-radius-card);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h3);
}
.lp-hero__photo-placeholder small {
font-family: var(--cg-font-body);
font-weight: 400;
font-size: var(--cg-text-small);
margin-top: var(--cg-space-2);
opacity: 0.8;
}
@media (max-width: 800px) {
.lp-hero__inner {
grid-template-columns: 1fr;
gap: var(--cg-space-8);
}
.lp-hero__photo-wrap {
max-width: 100%;
aspect-ratio: 3 / 2;
order: -1;
justify-self: stretch;
}
.lp-hero__cta-row {
flex-direction: column;
align-items: stretch;
}
.lp-hero__cta-row .cg-btn,
.lp-hero__cta-row .lp-btn-ghost {
text-align: center;
}
}
/* ============================================================
TRUST-ZEILE
Schmaler grauer Streifen unter dem Hero mit Sternen,
Standort-Pin und Aktions-Hinweis.
============================================================ */
.lp-trust-row {
background: var(--lp-grey-bg);
padding-block: var(--cg-space-4);
}
.lp-trust-row__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--cg-space-4) var(--cg-space-8);
}
.lp-trust-stars {
display: inline-flex;
align-items: center;
gap: var(--cg-space-2);
}
.lp-stars {
color: #f5b400;
letter-spacing: 1px;
font-size: 1.1rem;
}
.lp-trust-stars strong {
color: var(--cg-blue);
font-weight: 700;
}
.lp-trust-stars__label {
color: var(--cg-blue-60);
font-size: var(--cg-text-small);
}
.lp-trust-location {
display: inline-flex;
align-items: center;
gap: var(--cg-space-2);
color: var(--cg-blue);
font-weight: 700;
font-size: var(--cg-text-small);
}
.lp-trust-row__note {
text-align: center;
font-size: var(--cg-text-small);
color: var(--cg-blue-40);
margin: var(--cg-space-2) 0 0;
font-style: italic;
}
/* ============================================================
MECHANIK — drei Step-Karten
============================================================ */
.lp-mechanik {
background: white;
}
.lp-mechanik__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cg-space-8);
}
.lp-step-card {
padding: var(--cg-space-8) var(--cg-space-6);
background: var(--lp-grey-bg);
border-radius: var(--cg-radius-card);
}
.lp-step-card__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--cg-blue);
color: white;
border-radius: 50%;
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h6);
margin-bottom: var(--cg-space-4);
}
.lp-step-card h3 {
margin: 0 0 var(--cg-space-3);
font-size: var(--cg-text-h5);
}
.lp-step-card p {
margin: 0;
color: var(--cg-blue-80);
}
@media (max-width: 800px) {
.lp-mechanik__grid {
grid-template-columns: 1fr;
gap: var(--cg-space-4);
}
}
/* ============================================================
FAMILIEN-BEISPIEL-KARTEN
============================================================ */
.lp-beispiele {
background: var(--lp-grey-bg);
}
.lp-beispiele__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cg-space-6);
}
.lp-beispiel-card {
background: white;
padding: var(--cg-space-8) var(--cg-space-6);
border-radius: var(--lp-radius-card);
box-shadow: var(--lp-shadow-soft);
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
}
.lp-beispiel-card h3 {
margin: 0;
font-size: var(--cg-text-h6);
color: var(--cg-blue-deep);
}
.lp-beispiel-card__details {
list-style: none;
padding: 0;
margin: 0;
color: var(--cg-blue-80);
font-size: var(--cg-text-small);
display: flex;
flex-direction: column;
gap: var(--cg-space-1);
}
.lp-beispiel-card__price {
margin: var(--cg-space-3) 0 0;
font-size: var(--cg-text-lead);
color: var(--cg-text);
}
.lp-beispiel-card__price strong {
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h4);
color: var(--cg-blue-deep);
}
.lp-beispiel-card__tarif {
margin: 0;
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
}
/* Drei-Tarife-Preis-Block in jeder Beispiel-Karte. Klassik und
* Premium als Anker, Komfort hervorgehoben als Empfehlung mit
* Hintergrund-Tint und Badge. Honesty-Geste fuer Preissensible. */
.lp-beispiel-card__prices {
list-style: none;
padding: 0;
margin: var(--cg-space-3) 0 0;
display: flex;
flex-direction: column;
gap: var(--cg-space-1);
}
.lp-beispiel-card__price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--cg-space-2) var(--cg-space-3);
border-radius: var(--cg-shape-button);
font-size: var(--cg-text-small);
color: var(--cg-blue-80);
line-height: 1.3;
}
.lp-beispiel-card__price-row--empfohlen {
background: color-mix(in srgb, var(--cg-lime) 28%, transparent);
color: var(--cg-blue-deep);
}
.lp-beispiel-card__tarif-name {
font-weight: 700;
display: inline-flex;
align-items: center;
gap: var(--cg-space-2);
flex-wrap: wrap; /* darf umbrechen wenn Box zu schmal */
}
.lp-beispiel-card__badge {
font-size: 0.7em;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--cg-blue-deep);
opacity: 0.75;
white-space: nowrap; /* "★ empfohlen" bleibt als Einheit */
}
.lp-beispiel-card__price-value {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lp-beispiel-card__price-row--empfohlen .lp-beispiel-card__price-value strong {
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h6);
color: var(--cg-blue-deep);
}
.lp-beispiel-card__addon {
margin: var(--cg-space-2) 0 0;
padding-top: var(--cg-space-3);
border-top: 1px solid var(--cg-blue-20);
font-size: var(--cg-text-small);
color: var(--cg-blue);
font-weight: 700;
}
.lp-beispiele__disclaimer {
margin: var(--cg-space-8) auto 0;
max-width: 760px;
text-align: center;
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
font-style: italic;
}
@media (max-width: 800px) {
.lp-beispiele__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
BUEHNE / RECHNER
Zwei-Spalten-Container: links Brand-Verlauf-Flaeche mit
Erklaerung, rechts Rechner-Stufen-Container (Artefakt 2).
============================================================ */
.lp-rechner {
background: white;
/* Anchor-Sprung soll oberhalb des Section-Anfangs landen,
* damit der Headline-Block sichtbar bleibt (vor allem auf Mobile
* wenn Sticky-Bar unten den unteren Rand belegt). */
scroll-margin-top: 24px;
}
.lp-rechner__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--cg-radius-card);
overflow: hidden;
min-height: 540px;
box-shadow: var(--lp-shadow-stage);
}
.lp-rechner__intro {
background: var(--cg-gradient);
color: white;
padding: clamp(36px, 5vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
}
.lp-rechner__intro h2 {
color: white;
margin-bottom: var(--cg-space-4);
}
.lp-rechner__intro p {
color: var(--lp-text-on-dark-90);
font-size: var(--cg-text-body);
margin: 0 0 var(--cg-space-4);
}
.lp-rechner__meta {
margin-top: var(--cg-space-4);
padding-top: var(--cg-space-4);
border-top: 1px solid rgb(255 255 255 / 0.25);
font-style: italic;
font-size: var(--cg-text-small);
color: var(--lp-text-on-dark-70) !important;
}
.lp-rechner__stages {
background: white;
padding: clamp(36px, 4vw, 56px);
display: flex;
flex-direction: column;
gap: var(--cg-space-4);
}
.lp-rechner__stage {
/* Stufen-Layout kommt mit Artefakt 2 (calculator.js).
* Hier nur die Container-Hooks. */
}
.lp-rechner__placeholder {
padding: var(--cg-space-12) var(--cg-space-6);
text-align: center;
color: var(--cg-blue-40);
background: var(--lp-grey-bg);
border-radius: var(--lp-radius-card);
border: 2px dashed var(--cg-blue-20);
font-style: italic;
}
@media (max-width: 900px) {
.lp-rechner__grid {
grid-template-columns: 1fr;
min-height: 0;
}
}
/* Stufe 3 (Ergebnis-Vergleich) braucht die volle Container-Breite,
* sonst werden die drei Tarif-Karten in die 50%-Spalte gequetscht.
* Bei aktiver Stufe 3 wird das Grid zum 1-Spalter und der Gradient-
* Intro wird ausgeblendet — der Nutzer hat das Stage-Hinleitungs-
* Briefing schon gelesen und konzentriert sich auf den Vergleich. */
.lp-rechner__grid:has(.lp-rechner__stage[data-stufe="3"]:not([hidden])) {
grid-template-columns: 1fr;
min-height: 0;
}
.lp-rechner__grid:has(.lp-rechner__stage[data-stufe="3"]:not([hidden])) .lp-rechner__intro {
display: none;
}
/* ============================================================
TERMIN-BLOCK / FORM
============================================================ */
.lp-termin {
background: var(--lp-grey-bg);
}
.lp-termin h2 {
margin: 0 0 var(--cg-space-4);
}
.lp-termin__lead {
font-size: var(--cg-text-lead);
color: var(--cg-text);
margin-bottom: var(--cg-space-12);
max-width: 760px;
}
.lp-form {
background: white;
padding: clamp(28px, 4vw, 48px);
border-radius: var(--cg-radius-card);
box-shadow: var(--lp-shadow-soft);
display: flex;
flex-direction: column;
gap: var(--cg-space-6);
max-width: 720px;
}
/* [hidden]-Attribut soll Form-Element ausblenden (nach erfolgreichem
* Submit, durch form-submit.js gesetzt). display:flex weiter oben
* uebersteuert sonst das Default-[hidden]-Verhalten. */
.lp-form[hidden] {
display: none;
}
.lp-form__row {
display: grid;
gap: var(--cg-space-4);
}
.lp-form__row--two {
grid-template-columns: 1fr 1fr;
}
.lp-form__field {
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
}
.lp-form__field > span {
font-weight: 700;
color: var(--cg-blue-deep);
font-size: var(--cg-text-small);
}
.lp-form__field input[type="text"],
.lp-form__field input[type="email"],
.lp-form__field input[type="tel"],
.lp-form__field textarea {
font-family: var(--cg-font-body);
font-size: var(--cg-text-body);
padding: var(--cg-space-3) var(--cg-space-4);
border: 1.5px solid var(--cg-blue-20);
border-radius: var(--lp-radius-input);
background: white;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-form__field input:focus,
.lp-form__field textarea:focus {
outline: none;
border-color: var(--cg-teal);
box-shadow: 0 0 0 3px rgb(0 161 154 / 0.15);
}
.lp-form__field--upload input[type="file"] {
font-family: var(--cg-font-body);
font-size: var(--cg-text-small);
padding: var(--cg-space-3);
background: var(--lp-grey-bg);
border: 2px dashed var(--cg-blue-20);
border-radius: var(--lp-radius-input);
cursor: pointer;
}
.lp-form__field--upload small {
color: var(--cg-blue-60);
font-size: var(--cg-text-small);
}
.lp-form__radio-group {
display: flex;
flex-wrap: wrap;
gap: var(--cg-space-2);
border: 0;
padding: 0;
margin: 0;
}
.lp-form__radio-group legend {
font-weight: 700;
color: var(--cg-blue-deep);
font-size: var(--cg-text-small);
margin-bottom: var(--cg-space-2);
width: 100%;
}
.lp-form__radio {
display: inline-flex;
align-items: center;
gap: var(--cg-space-2);
padding: var(--cg-space-3) var(--cg-space-4);
border: 1.5px solid var(--cg-blue-20);
border-radius: var(--lp-radius-input);
cursor: pointer;
font-weight: 700;
color: var(--cg-blue);
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lp-form__radio:hover {
border-color: var(--cg-teal);
}
.lp-form__radio input[type="radio"] {
accent-color: var(--cg-teal);
}
.lp-form__radio:has(input:checked) {
border-color: var(--cg-teal);
background: rgb(0 161 154 / 0.08);
}
.lp-form__check {
display: flex;
align-items: flex-start;
gap: var(--cg-space-3);
font-size: var(--cg-text-small);
color: var(--cg-text);
line-height: var(--cg-leading-normal);
cursor: pointer;
}
.lp-form__check input[type="checkbox"] {
margin-top: 0.2em;
flex: 0 0 auto;
accent-color: var(--cg-teal);
width: 18px;
height: 18px;
}
.lp-form__cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--cg-space-4);
margin-top: var(--cg-space-4);
}
/* Legal-Note unter dem Submit-Button. DSGVO-Hinweis statt
* Einwilligungs-Checkbox - Anfrage-Beantwortung laeuft ueber
* Art. 6 Abs. 1 lit. b/f DSGVO (Vertragsanbahnung / berechtigtes
* Interesse), keine Einwilligung erforderlich (Option A nach
* Claude-Web-Review 2026-05-16). Erstinformation §15 VersVermV
* bleibt als Pflicht-Checkbox erhalten. */
.lp-form__legal-note {
margin: var(--cg-space-4) 0 0;
font-size: var(--cg-text-small);
line-height: var(--cg-leading-normal);
color: var(--cg-text);
opacity: 0.85;
}
.lp-form__legal-note a {
color: var(--cg-teal);
text-decoration: underline;
}
.lp-form__legal-note a:hover {
color: var(--cg-blue-deep);
}
/* Fehler-Meldung bei Form-Submit-Problemen (Netzwerk, Validierung,
* Rate-Limit). Wird von form-submit.js dynamisch eingefuegt. */
.lp-form__error {
margin: var(--cg-space-4) 0 0;
padding: var(--cg-space-3) var(--cg-space-4);
background: #fbe9e7;
border-left: 3px solid #c63d2f;
color: #761c14;
font-size: var(--cg-text-small);
line-height: var(--cg-leading-normal);
border-radius: 4px;
}
@media (max-width: 600px) {
.lp-form__row--two {
grid-template-columns: 1fr;
}
.lp-form__cta-row {
flex-direction: column;
}
.lp-form__cta-row .cg-btn,
.lp-form__cta-row .lp-btn-whatsapp {
text-align: center;
}
}
/* ============================================================
VERTRAUENSBLOCK
============================================================ */
.lp-vertrauen {
background: white;
}
.lp-vertrauen h2 {
max-width: 760px;
margin: 0 0 var(--cg-space-4);
}
.lp-vertrauen__lead {
max-width: 760px;
font-size: var(--cg-text-lead);
color: var(--cg-text);
margin-bottom: var(--cg-space-12);
}
.lp-vertrauen__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cg-space-6);
}
.lp-vertrauen__item {
padding: var(--cg-space-6) var(--cg-space-6) var(--cg-space-6) var(--cg-space-8);
border-left: 3px solid var(--cg-teal);
}
.lp-vertrauen__item h3 {
margin: 0 0 var(--cg-space-3);
font-size: var(--cg-text-h6);
color: var(--cg-blue-deep);
}
.lp-vertrauen__item p {
margin: 0;
color: var(--cg-text);
font-size: var(--cg-text-body);
}
@media (max-width: 800px) {
.lp-vertrauen__grid {
grid-template-columns: 1fr;
gap: var(--cg-space-4);
}
}
/* ============================================================
FAQ — Akkordeon mit details/summary
============================================================ */
.lp-faq {
background: var(--lp-grey-bg);
}
.lp-faq__list {
max-width: 820px;
margin: var(--cg-space-8) auto 0; /* mehr Luft zwischen Headline/Sub und erster Frage */
}
.lp-faq__item {
background: white;
border-radius: var(--lp-radius-card);
margin-bottom: var(--cg-space-3);
overflow: hidden;
box-shadow: var(--lp-shadow-soft);
}
.lp-faq__item summary {
list-style: none;
padding: var(--cg-space-4) var(--cg-space-6);
font-weight: 700;
color: var(--cg-blue-deep);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--cg-space-4);
}
.lp-faq__item summary::-webkit-details-marker {
display: none;
}
.lp-faq__item summary::after {
content: "+";
margin-left: auto;
font-size: 1.6rem;
font-weight: 400;
color: var(--cg-teal);
transition: transform 0.2s ease;
flex: 0 0 auto;
}
.lp-faq__item[open] summary::after {
transform: rotate(45deg);
}
.lp-faq__answer {
padding: 0 var(--cg-space-6) var(--cg-space-6);
color: var(--cg-text);
}
.lp-faq__answer p:last-child {
margin-bottom: 0;
}
/* ============================================================
STICKY MOBILE CTA — nur < 700 px sichtbar
============================================================ */
.lp-sticky-cta {
position: fixed;
bottom: var(--cg-space-3);
left: var(--cg-space-3);
right: var(--cg-space-3);
display: none;
background: white;
padding: var(--cg-space-2);
border-radius: var(--cg-shape-pill);
box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
z-index: 100;
gap: var(--cg-space-2);
}
.lp-sticky-cta a {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--cg-space-2);
padding: var(--cg-space-3) var(--cg-space-2);
background: var(--cg-blue);
color: white;
font-weight: 700;
font-size: var(--cg-text-small);
border-radius: var(--cg-shape-pill);
text-decoration: none;
transition: opacity 0.15s ease;
}
.lp-sticky-cta a:hover {
opacity: 0.92;
}
@media (max-width: 700px) {
.lp-sticky-cta {
display: flex;
}
body {
padding-bottom: 72px;
}
}
/* ============================================================
V2 — Content-Story-Sektionen (KFO + Zahnersatz)
Zwischen Mechanik und Beispiel-Karten. Zwei Themen-Blöcke
mit Beispiel-Box (Tabelle mit Hervorhebung).
============================================================ */
.lp-story {
background: white;
}
.lp-story--kfo {
background: var(--lp-grey-bg);
}
.lp-story--ersatz {
background: white;
}
.lp-story__headline {
max-width: 760px;
margin: 0 0 var(--cg-space-6);
}
.lp-story__lead {
max-width: 760px;
font-size: var(--cg-text-lead);
color: var(--cg-text);
margin-bottom: var(--cg-space-8);
}
.lp-story__anschluss {
max-width: 760px;
font-size: var(--cg-text-body);
color: var(--cg-text);
margin: var(--cg-space-8) 0 var(--cg-space-3);
}
/* Inline-CTA-Link am Ende eines Story-Anschluss-Paragraphen (alt,
* jetzt durch lp-story__cta-row + Ghost-Button ersetzt). */
.lp-story__cta-inline {
display: inline-block;
margin-top: var(--cg-space-3);
color: var(--cg-teal);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.lp-story__cta-inline:hover {
color: var(--cg-blue-deep);
}
/* Story-CTA als Ghost-Button-Reihe (Conversion-Anker am Ende
* der Story-Bloecke, optisch deutlicher als Inline-Link). */
.lp-story__cta-row {
margin: var(--cg-space-6) 0 var(--cg-space-3);
}
/* Vertrauen-Sub-Block direkt nach Team-Snippet: reduzierter Top-
* Abstand, zentrierter Lead-Text, damit es visuell als ein Block
* mit dem Team-Snippet wirkt (Marcus-Refactor 2026-05-15). */
.lp-vertrauen--unter-team {
padding-top: 0;
}
.lp-vertrauen--unter-team .lp-vertrauen__lead {
text-align: center;
max-width: 720px;
margin-inline: auto;
margin-bottom: var(--cg-space-8);
color: var(--cg-blue-80);
}
/* Brueke von LP-FAQ zur Pillar-Page-FAQ (Hinweis "mehr Detail-
* Fragen auf der Tarifbedingungen-Seite"). */
.lp-faq__pillar-bridge {
max-width: 820px;
margin: var(--cg-space-8) auto 0;
text-align: center;
font-size: var(--cg-text-small);
color: var(--cg-blue-80);
}
.lp-faq__pillar-bridge a {
color: var(--cg-teal);
font-weight: 700;
text-decoration: underline;
}
.lp-faq__pillar-bridge a:hover {
color: var(--cg-blue-deep);
}
/* Story-Section verstecken per Variant-Klasse (hero-switch.js setzt
* data-hero-variant am ). KFO-Audience sieht keine Ersatz-
* Story; Ersatz-Audience keine KFO-Story. Familie + AXA: beide. */
html[data-hero-variant="kfo"] .lp-story--ersatz { display: none; }
html[data-hero-variant="ersatz"] .lp-story--kfo { display: none; }
.lp-story__quelle {
max-width: 760px;
margin: 0;
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
font-style: italic;
}
/* Beispiel-Box als zentrales Story-Element. */
.lp-beispiel-box {
background: white;
border: 1px solid var(--cg-blue-20);
border-left: 4px solid var(--cg-teal);
border-radius: var(--lp-radius-card);
padding: var(--cg-space-6) var(--cg-space-8);
max-width: 720px;
box-shadow: var(--lp-shadow-soft);
margin: 0;
}
.lp-story--kfo .lp-beispiel-box {
background: white;
}
.lp-beispiel-box h3 {
margin: 0 0 var(--cg-space-3);
font-size: var(--cg-text-h6);
color: var(--cg-blue-deep);
}
.lp-beispiel-box__intro {
margin: 0 0 var(--cg-space-4);
color: var(--cg-text);
}
.lp-beispiel-box__table {
width: 100%;
border-collapse: collapse;
font-size: var(--cg-text-body);
}
.lp-beispiel-box__table th,
.lp-beispiel-box__table td {
text-align: left;
padding: var(--cg-space-2) var(--cg-space-3);
border-bottom: 1px solid var(--cg-blue-20);
}
.lp-beispiel-box__table th {
font-weight: 400;
color: var(--cg-text);
}
.lp-beispiel-box__amount {
text-align: right;
font-variant-numeric: tabular-nums;
/* white-space: nowrap entfernt - auf Mobile bricht ein Wert wie
* "410 € (10 % Eigenanteil)" sonst aus dem Container raus
* (KONVENTIONEN §16 Mobile-Layout-Pattern). */
color: var(--cg-blue-deep);
font-weight: 700;
}
/* Mobile: Beispiel-Box kompakter, Tabelle skalierbar.
* Conversion-LP-Pattern: Story-Beispielrechnungen sind ein zentrales
* Element der LP-Storytelling und muessen auf Mobile lesbar bleiben. */
@media (max-width: 600px) {
.lp-beispiel-box {
padding: var(--cg-space-4);
border-radius: var(--cg-shape-button);
}
.lp-beispiel-box__table {
font-size: var(--cg-text-small);
}
.lp-beispiel-box__table th,
.lp-beispiel-box__table td {
padding: var(--cg-space-2);
}
.lp-beispiel-box__amount {
/* line-height bewahrt Lesbarkeit bei zwei-zeiligen Wert-Labels */
line-height: 1.3;
}
.lp-beispiel-box__note {
font-size: var(--cg-text-small);
}
}
.lp-beispiel-box__row--total th,
.lp-beispiel-box__row--total td {
font-weight: 700;
color: var(--cg-blue-deep);
padding-top: var(--cg-space-3);
padding-bottom: var(--cg-space-3);
}
.lp-beispiel-box__row--highlight {
background: rgb(0 161 154 / 0.06);
}
.lp-beispiel-box__row--highlight th {
color: var(--cg-teal);
font-weight: 700;
}
/* Sternchen-Hinweis unter der Beispiel-Tabelle — Compliance-Pflicht
bei KFO-Caps und Zahnstaffel-Limits (KONVENTIONEN §17.1 + §17.3). */
.lp-beispiel-box__note {
margin: var(--cg-space-3) 0 0;
font-size: var(--cg-text-small);
line-height: 1.5;
color: var(--cg-blue-60);
}
.lp-beispiel-box__row--highlight td {
color: var(--cg-teal);
}
.lp-beispiel-box__table tbody tr:last-child th,
.lp-beispiel-box__table tbody tr:last-child td {
border-bottom: none;
}
/* ============================================================
V2 — Beispiel-Karten 4er-Grid
Vorher 3, jetzt 4. Mobile: 1-spaltig. Tablet: 2x2. Desktop: 4 in einer Reihe.
Override des V1-3er-Grid (lp-beispiele__grid).
============================================================ */
.lp-beispiele__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--cg-space-6);
}
.lp-beispiel-card__details {
margin: 0;
color: var(--cg-blue-80);
font-size: var(--cg-text-small);
}
@media (max-width: 1000px) {
.lp-beispiele__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.lp-beispiele__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
V2 — Rechner Stufe 1: drei gleichwertige Konstellation-Karten
+ Sub-Stepper fuer Familie-Pfad
============================================================ */
.lp-rechner__stage-headline {
margin: 0 0 var(--cg-space-6);
color: white;
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h5);
}
/* Rechner-Stages haben weissen Text auf rechter Spalte? Nein —
* Stages sind auf dem weissen rechten Container. Headline daher
* blau, nicht weiss. Override. */
.lp-rechner__stages .lp-rechner__stage-headline {
color: var(--cg-blue-deep);
}
.lp-rechner__konstellation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cg-space-3);
margin-bottom: var(--cg-space-6);
}
.lp-konst-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cg-space-2);
padding: var(--cg-space-6) var(--cg-space-3);
background: white;
border: 2px solid var(--cg-blue-20);
border-radius: var(--lp-radius-card);
cursor: pointer;
font-family: var(--cg-font-body);
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.lp-konst-card:hover,
.lp-konst-card:focus-visible {
border-color: var(--cg-teal);
background: rgb(0 161 154 / 0.04);
transform: translateY(-2px);
outline: none;
}
.lp-konst-card__icon {
font-size: 2rem;
line-height: 1;
color: var(--cg-blue);
display: inline-flex;
align-items: center;
justify-content: center;
}
.lp-konst-card__icon svg {
width: 40px;
height: 40px;
}
.lp-konst-card:hover .lp-konst-card__icon,
.lp-konst-card:focus-visible .lp-konst-card__icon {
color: var(--cg-teal);
}
.lp-konst-card__label {
font-weight: 700;
font-size: var(--cg-text-body);
color: var(--cg-blue-deep);
}
.lp-konst-card__anker {
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
}
@media (max-width: 600px) {
.lp-rechner__konstellation-grid {
grid-template-columns: 1fr;
}
.lp-konst-card {
flex-direction: row;
justify-content: flex-start;
text-align: left;
padding: var(--cg-space-4);
}
.lp-konst-card__icon {
font-size: 1.6rem;
}
.lp-konst-card__anker {
margin-left: auto;
}
}
/* Sub-Stepper fuer Familie-Konstellation */
.lp-rechner__substepper {
padding: var(--cg-space-6);
background: var(--lp-grey-bg);
border-radius: var(--lp-radius-card);
margin-top: var(--cg-space-4);
}
.lp-rechner__substepper-headline {
margin: 0 0 var(--cg-space-4);
font-weight: 700;
color: var(--cg-blue-deep);
}
.lp-rechner__substepper-row {
display: flex;
gap: var(--cg-space-6);
margin-bottom: var(--cg-space-6);
}
.lp-rechner__substepper-row > label {
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
font-size: var(--cg-text-small);
font-weight: 700;
color: var(--cg-blue-deep);
}
.lp-stepper {
display: inline-flex;
align-items: center;
gap: var(--cg-space-1);
background: white;
border: 1.5px solid var(--cg-blue-20);
border-radius: var(--lp-radius-input);
padding: var(--cg-space-1);
}
.lp-stepper__btn {
width: 32px;
height: 32px;
background: var(--cg-blue);
color: white;
border: 0;
border-radius: 4px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lp-stepper__btn:disabled {
background: var(--cg-blue-40);
cursor: not-allowed;
}
.lp-stepper__value {
min-width: 32px;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--cg-blue-deep);
}
/* ============================================================
V2 — Rechner Stufe 2: Tarif-Karten
============================================================ */
.lp-rechner__tarif-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--cg-space-4);
margin-bottom: var(--cg-space-6);
}
.lp-tarif-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
padding: var(--cg-space-8) var(--cg-space-6) var(--cg-space-6);
background: white;
border: 2px solid var(--cg-blue-20);
border-radius: var(--lp-radius-card);
cursor: pointer;
font-family: var(--cg-font-body);
text-align: left;
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.lp-tarif-card:hover,
.lp-tarif-card:focus-visible {
border-color: var(--cg-teal);
background: rgb(0 161 154 / 0.04);
transform: translateY(-2px);
outline: none;
}
.lp-tarif-card--empfohlen {
border-color: var(--cg-teal);
background: rgb(0 161 154 / 0.06);
}
.lp-tarif-card__badge {
position: absolute;
top: calc(-1 * var(--cg-space-3));
right: var(--cg-space-4);
background: var(--cg-lime);
color: var(--cg-blue-deep);
padding: var(--cg-space-1) var(--cg-space-3);
border-radius: var(--cg-shape-pill);
font-size: var(--cg-text-small);
font-weight: 700;
}
.lp-tarif-card__teaser {
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.lp-tarif-card__label {
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h6);
color: var(--cg-blue-deep);
}
.lp-tarif-card__bullets {
list-style: none;
padding: 0;
margin: var(--cg-space-2) 0 0;
font-size: var(--cg-text-small);
color: var(--cg-text);
display: flex;
flex-direction: column;
gap: var(--cg-space-1);
}
.lp-tarif-card__bullets li::before {
content: "✓ ";
color: var(--cg-teal);
font-weight: 700;
}
@media (max-width: 850px) {
.lp-rechner__tarif-grid {
grid-template-columns: 1fr;
}
.lp-tarif-card {
padding: var(--cg-space-6) var(--cg-space-6) var(--cg-space-4);
}
}
/* ============================================================
V2 — Rechner Stufe 3: Geburtsdaten
============================================================ */
.lp-rechner__geburtsdaten {
display: flex;
flex-direction: column;
gap: var(--cg-space-4);
margin-bottom: var(--cg-space-6);
}
.lp-rechner__geburtsdaten label {
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
}
.lp-rechner__geburtsdaten label > span {
font-weight: 700;
color: var(--cg-blue-deep);
font-size: var(--cg-text-small);
}
.lp-rechner__geburtsdaten input[type="date"] {
font-family: var(--cg-font-body);
font-size: var(--cg-text-body);
padding: var(--cg-space-3) var(--cg-space-4);
border: 1.5px solid var(--cg-blue-20);
border-radius: var(--lp-radius-input);
background: white;
}
.lp-rechner__geburtsdaten input[type="date"]:focus {
outline: none;
border-color: var(--cg-teal);
box-shadow: 0 0 0 3px rgb(0 161 154 / 0.15);
}
.lp-rechner__error {
margin: 0 0 var(--cg-space-4);
color: #c0392b;
font-size: var(--cg-text-small);
font-weight: 700;
}
.lp-rechner__cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--cg-space-3);
}
/* ============================================================
V2 — Rechner Stufe 4: Ergebnis-Block
============================================================ */
.lp-rechner__ergebnis h3 {
margin: 0 0 var(--cg-space-2);
color: var(--cg-blue-deep);
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h5);
}
.lp-rechner__betrag {
font-family: var(--cg-font-display);
font-weight: 600;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--cg-teal);
margin: var(--cg-space-2) 0 var(--cg-space-2);
}
.lp-rechner__kontext {
margin: 0 0 var(--cg-space-6);
color: var(--cg-blue-80);
}
.lp-rechner__aufschluesselung {
background: var(--lp-grey-bg);
border-radius: var(--lp-radius-input);
padding: var(--cg-space-4);
margin-bottom: var(--cg-space-6);
}
.lp-rechner__aufschluesselung summary {
cursor: pointer;
font-weight: 700;
color: var(--cg-blue-deep);
list-style: none;
}
.lp-rechner__aufschluesselung summary::-webkit-details-marker {
display: none;
}
.lp-rechner__aufschluesselung summary::after {
content: " +";
color: var(--cg-teal);
font-size: 1.2rem;
}
.lp-rechner__aufschluesselung[open] summary::after {
content: " −";
}
.lp-rechner__aufschluesselung ul {
margin: var(--cg-space-3) 0 0;
padding-left: var(--cg-space-6);
font-size: var(--cg-text-small);
color: var(--cg-text);
}
.lp-rechner__leistungen {
margin-bottom: var(--cg-space-6);
}
.lp-rechner__leistungen p {
margin: 0 0 var(--cg-space-2);
font-weight: 700;
color: var(--cg-blue-deep);
}
.lp-rechner__leistungen ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--cg-space-1);
}
.lp-rechner__leistungen li::before {
content: "✓ ";
color: var(--cg-teal);
font-weight: 700;
}
.lp-rechner__disclaimer {
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
font-style: italic;
margin-bottom: var(--cg-space-6);
}
/* ============================================================
Stufe 3 (Refactor 2026-05-15) — alle drei Tarife nebeneinander.
Komfort ist visuell hervorgehoben (Lime-Tint + Badge), Klassik und
Premium als gleichwertige Anker. Pro Karte ein klarer CTA, der die
Tarif-Wahl trifft und zur Form scrollt (Pre-Fill-Box wird sichtbar).
============================================================ */
.lp-rechner__result-headline {
margin: 0 0 var(--cg-space-2);
font-size: var(--cg-text-h4);
color: var(--cg-blue-deep);
}
.lp-rechner__result-sub {
margin: 0 0 var(--cg-space-6);
color: var(--cg-blue-80);
font-size: var(--cg-text-body);
}
/* Familien-Hinweis im Ergebnis: macht klar dass Mix von Tarifen
* (Kinder Komfort, Eltern Klassik) im Abschluss moeglich ist. */
.lp-rechner__familien-hinweis {
background: color-mix(in srgb, var(--cg-teal) 8%, white);
border-left: 4px solid var(--cg-teal);
padding: var(--cg-space-4) var(--cg-space-6);
border-radius: var(--cg-shape-button);
margin: 0 0 var(--cg-space-6);
}
.lp-rechner__familien-hinweis p {
margin: 0;
font-size: var(--cg-text-small);
color: var(--cg-blue-deep);
line-height: 1.5;
}
.lp-rechner__tarif-vergleich {
display: grid;
/* auto-fit packt so viele Karten nebeneinander wie passen.
* minmax(240px, 1fr): Karten unter 240px Breite umbrechen, bei
* mehr Platz gleichmaessig fluten. Sorgt fuer 3 Spalten auf
* Desktop (Stufe-3-Modifier macht volle Breite), 2 Spalten auf
* Tablet, 1 Spalte auf Phone. */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--cg-space-4);
margin-bottom: var(--cg-space-6);
}
/* Spezifitaets-Boost via Parent-Selector (.lp-rechner__tarif-vergleich
* davorgesetzt) damit das Padding nicht durch andere Card-Regeln
* oder Browser-Defaults verschluckt wird. Plus expliziter box-sizing
* fuer 100%-saubere width-Berechnung. */
.lp-rechner__tarif-vergleich .lp-rechner__tarif-card {
position: relative;
background: white;
border: 1px solid var(--cg-blue-20);
border-radius: var(--cg-shape-button);
padding: var(--cg-space-8); /* 36 px allseitig - existierender Token */
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--cg-space-3);
min-width: 0;
overflow: hidden; /* Banner-Badge darf nicht ausbrechen */
}
.lp-rechner__tarif-vergleich .lp-rechner__tarif-card--empfohlen {
background: color-mix(in srgb, var(--cg-lime) 18%, white);
border-color: color-mix(in srgb, var(--cg-lime) 70%, transparent);
/* Platz fuer das voll-breite Empfehlung-Banner oben. */
padding-top: calc(var(--cg-space-8) + var(--cg-space-6));
}
/* Empfehlungs-Banner: volle Card-Breite, Lime-Untergrund, zentriert.
* Visuell deutlich als "Banner" erkennbar, nicht mehr nur Mini-Label. */
.lp-rechner__tarif-card-badge {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--cg-lime);
color: var(--cg-blue-deep);
padding: var(--cg-space-2) var(--cg-space-3);
font-size: var(--cg-text-small);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
}
.lp-rechner__tarif-card-label {
margin: 0;
font-size: var(--cg-text-h5);
color: var(--cg-blue-deep);
}
.lp-rechner__tarif-card-teaser {
margin: 0;
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
font-style: italic;
}
.lp-rechner__tarif-card-betrag {
margin: 0;
font-size: var(--cg-text-lead);
color: var(--cg-text);
}
.lp-rechner__tarif-card-betrag strong {
font-family: var(--cg-font-display);
font-weight: 600;
font-size: var(--cg-text-h3);
color: var(--cg-blue-deep);
}
.lp-rechner__tarif-card-bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--cg-space-1);
font-size: var(--cg-text-small);
color: var(--cg-blue-80);
}
.lp-rechner__tarif-card-bullets li {
padding-left: 1.2em;
position: relative;
line-height: 1.4;
}
.lp-rechner__tarif-card-bullets li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--cg-teal);
font-weight: 700;
}
.lp-rechner__tarif-card-cta {
margin-top: auto; /* push CTA an Card-Boden -> gleiche Card-Hoehe */
padding-top: var(--cg-space-3);
padding-bottom: var(--cg-space-3);
width: 100%;
text-align: center;
font-size: var(--cg-text-small);
align-self: stretch;
}
.lp-rechner__aufschluesselung-intro {
margin: 0 0 var(--cg-space-2);
font-size: var(--cg-text-small);
color: var(--cg-blue-60);
}
.lp-rechner__pillar-link {
color: var(--cg-teal);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
align-self: center;
}
.lp-rechner__pillar-link:hover {
color: var(--cg-blue-deep);
}
/* ============================================================
Pre-Fill-Box ueber der Form. Wird sichtbar wenn User aus Rechner
mit gewaehltem Tarif kommt. Schafft Kontext-Brueke: "die wissen
was ich will". Conversion-Hebel #1 aus Review.
============================================================ */
.lp-form__prefill {
background: color-mix(in srgb, var(--cg-lime) 22%, white);
border-left: 4px solid var(--cg-lime);
padding: var(--cg-space-4) var(--cg-space-6);
border-radius: var(--cg-shape-button);
margin-bottom: var(--cg-space-6);
}
.lp-form__prefill[hidden] { display: none; }
.lp-form__prefill-eyebrow {
margin: 0;
font-size: var(--cg-text-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--cg-blue-deep);
opacity: 0.7;
}
.lp-form__prefill-line {
margin: var(--cg-space-1) 0 var(--cg-space-2);
font-size: var(--cg-text-lead);
color: var(--cg-blue-deep);
line-height: 1.4;
}
.lp-form__prefill-detail {
margin: 0 0 var(--cg-space-1);
font-size: var(--cg-text-small);
color: var(--cg-blue-80);
line-height: 1.4;
}
.lp-form__prefill-meta {
margin: 0;
font-size: var(--cg-text-small);
color: var(--cg-blue-80);
}
/* ============================================================
V2 — Termin-Danke-Block (nach Form-Submit)
============================================================ */
.lp-termin__danke {
background: white;
padding: clamp(28px, 4vw, 48px);
border-radius: var(--cg-radius-card);
border-left: 4px solid var(--cg-teal);
box-shadow: var(--lp-shadow-soft);
max-width: 720px;
}
.lp-termin__danke h2 {
margin: 0 0 var(--cg-space-4);
color: var(--cg-teal);
}
/* "Warum Komfort?" Tarif-Empfehlungs-Block vor Beispiel-Karten.
3-Spalter Klassik / Komfort (empfohlen, hervorgehoben) / Premium. */
.lp-warum-komfort__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--cg-space-4);
margin-bottom: var(--cg-space-6);
}
@media (min-width: 800px) {
.lp-warum-komfort__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.lp-warum-komfort__col {
position: relative;
padding: var(--cg-space-6);
background: white;
border: 1px solid color-mix(in srgb, var(--cg-blue) 12%, transparent);
border-top-left-radius: var(--cg-shape-button);
border-bottom-right-radius: var(--cg-shape-button);
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
}
.lp-warum-komfort__col--empfohlen {
background: color-mix(in srgb, var(--cg-teal) 5%, white);
border-color: var(--cg-teal);
}
.lp-warum-komfort__badge {
position: absolute;
top: calc(var(--cg-space-3) * -1);
left: var(--cg-space-6);
padding: var(--cg-space-1) var(--cg-space-3);
background: var(--cg-teal);
color: white;
font-size: var(--cg-text-small);
font-weight: 700;
border-radius: var(--cg-shape-button);
}
.lp-warum-komfort__col h3 {
margin: var(--cg-space-1) 0;
color: var(--cg-blue-deep);
font-size: var(--cg-text-h4);
}
.lp-warum-komfort__claim {
margin: 0 0 var(--cg-space-3);
color: var(--cg-blue);
font-weight: 700;
font-size: var(--cg-text-body);
}
.lp-warum-komfort__col ul {
list-style: none;
padding: 0;
margin: 0 0 var(--cg-space-3);
display: flex;
flex-direction: column;
gap: var(--cg-space-2);
}
.lp-warum-komfort__col ul li {
font-size: var(--cg-text-small);
color: var(--cg-text);
padding-left: var(--cg-space-3);
position: relative;
}
.lp-warum-komfort__col ul li::before {
content: "·";
position: absolute;
left: 0;
top: 0;
color: var(--cg-teal);
font-weight: 700;
}
.lp-warum-komfort__fuer {
margin: auto 0 0;
font-size: var(--cg-text-small);
font-style: italic;
color: var(--cg-blue-60);
line-height: var(--cg-leading-normal);
}
.lp-warum-komfort__pillar-link {
margin: var(--cg-space-6) 0 0;
text-align: right;
}
.lp-warum-komfort__pillar-link a {
color: var(--cg-blue);
font-weight: 700;
text-decoration: none;
}
.lp-warum-komfort__pillar-link a:hover {
color: var(--cg-teal);
}
/* Globaler Polish: andere Headline-Klassen ebenfalls linksbuendig
fuer Konsistenz mit lp-section__headline. */
.lp-story__headline,
.lp-section .lp-container > h2,
.lp-rechner__stage-headline {
text-align: left;
}
/* Kleiner Link unter Rechner-Stufe-2 zur Pillar-Page */
.lp-rechner__stage-link {
margin: var(--cg-space-4) 0 var(--cg-space-2);
font-size: var(--cg-text-small);
text-align: center;
}
.lp-rechner__stage-link a {
color: var(--cg-blue);
font-weight: 700;
text-decoration: none;
}
.lp-rechner__stage-link a:hover {
color: var(--cg-teal);
}
/* ============================================================
PILLAR-PAGE BEDINGUNGEN — Tarif-Detail-Seite unter
chantraine-ganser.de/zahnzusatz/bedingungen/
============================================================ */
.lp-bedingungen-narrow {
max-width: 760px;
}
.lp-bedingungen-hero {
background: var(--cg-bg-tint);
padding-block: var(--cg-section-padding);
}
/* Pillar-Page-Header-Override: Das header-lp Snippet (brand-src) setzt
* Link-Schrift auf white, weil es generisch fuer dunkle Hero-Bereiche
* gebaut ist. Auf der Pillar sitzt der Header aber ueber dem hellen
* cg-bg-tint-Hero -> weiss auf hellbeige = unleserlich. :has() schlaegt
* den inline-