/* ============================================================
   Landingpage-Module — die eine Optik fuer alle Anlass-Seiten.

   Uebersetzt aus der UX-Pilot-Abnahme vom 15.08.2026 in unsere
   Tokens (tokens.css wird vorher geladen): Creme-Grund, Blau nur
   fuer CTAs und Akzente, eine Nachtblau-Kontrastflaeche pro Seite,
   Champagner-Buttons auf dunklen Flaechen.

   Module (Praefix lpm-): hero, trust, steps, karussell, nebel,
   polaroids, chips, preis, faq, ctaband. Eine neue Landingpage
   benutzt diese Klassen und definiert KEINE eigenen Layouts —
   sonst zerfaellt die Aehnlichkeit, die der Sinn der Uebung ist.
   ============================================================ */

.lp-body { background: var(--brand-cream, #FAF8F3); color: var(--brand-anthracite, #0F172A); }

.lpm-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.lpm-narrow { max-width: 48rem; }
/* Rund 12 Prozent enger als zuvor (Rueckmeldung 26.08.): die Seite
   wirkte auf grossen Bildschirmen lang. Die Ruhe soll bleiben, nur
   das Leerlaufen dazwischen weniger werden. */
.lpm-section { padding: clamp(2.2rem, 4.2vw, 3.4rem) 0; }

/* ── HERO ─────────────────────────────────────────────────── */
.lpm-hero { padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(1.7rem, 3.4vw, 2.6rem); }
.lpm-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }

/*
 * Solange Text und Bild uebereinander stehen, wird der Hero mittig
 * gesetzt. Linksbuendige Ueberschrift mit zwei Knoepfen darunter und
 * einem zentrierten Bild sah aus wie ein Satzfehler — was es auch war:
 * die Spalte ist dann die ganze Seitenbreite, und darin hat eine
 * linksbuendige Knopfreihe keinen Anker mehr.
 *
 * Ab zwei Spalten bleibt alles linksbuendig: dort traegt die
 * Bildspalte daneben die rechte Kante.
 */
@media (max-width: 1023px) {
    .lpm-hero__grid { text-align: center; justify-items: center; }
    .lpm-hero__lead { margin-inline: auto; }
    .lpm-hero__cta { justify-content: center; }
}
@media (min-width: 1024px) { .lpm-hero__grid { grid-template-columns: 1fr 1fr; } }
.lpm-eyebrow {
    margin: 0 0 .5rem; font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--neutral-text-muted, #586678);
}
.lpm-hero__title {
    margin: 0 0 .9rem;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
    text-wrap: balance;
}
.lpm-hero__lead {
    margin: 0 0 1.6rem; font-size: 1.15rem; line-height: 1.6;
    color: var(--neutral-text-muted, #586678); max-width: 56ch;
}

/* CTAs — Pill, Gradient fuer den Haupt-CTA, Ghost daneben. */
.lpm-cta {
    display: inline-block; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: .95rem; padding: .9rem 2.2rem;
    background: var(--brand-gradient, linear-gradient(135deg, #62B7F9 0%, #226CEA 100%));
    color: #fff; box-shadow: 0 8px 20px rgba(34, 108, 234, .25);
    transition: transform .15s ease;
}
.lpm-cta:hover { transform: scale(1.04); }
.lpm-cta--ghost {
    background: transparent; color: var(--brand-primary, #226CEA);
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/*
 * Die zwei Hero-Knoepfe als eigene Reihe statt als zwei Elemente in
 * einem Absatz. Der Abstand kommt jetzt aus gap — vorher haing er an
 * einem margin-left am zweiten Knopf, das beim Umbruch in die naechste
 * Zeile falsch stand.
 */
.lpm-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.lpm-cta--champ { background: var(--brand-champagne, #E8DCC4); color: var(--brand-anthracite, #0F172A); box-shadow: 0 8px 20px rgba(15, 23, 42, .25); }

/*
 * Knoepfe auf der blauen Flaeche (CTA-Band).
 *
 * Weiss mit blauer Schrift fuer den Haupt-CTA statt Champagner: auf
 * Blau wirkte der Cremeton stumpf und nahm dem Knopf die Deutlichkeit,
 * die er als Abschluss der Seite braucht. Blau auf Blau geht nicht —
 * also traegt die Flaeche das Weiss und die Schrift das Blau.
 *
 * Daneben die leise Variante: nur weisse Kontur. Kein margin-left mehr,
 * der Abstand kommt aus dem gap der Reihe — sonst steht er beim
 * Umbruch in die naechste Zeile falsch.
 */
.lpm-cta--weiss {
    background: #fff; color: var(--brand-primary, #226CEA);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}
.lpm-cta--hell { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

/* Bild-Slot: ehrlicher Platzhalter, bis echtes Material da ist. */
.lpm-slot {
    aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
    display: grid; place-items: center; text-align: center; padding: 1rem;
    background:
        repeating-linear-gradient(45deg, rgba(34,108,234,.05) 0 12px, transparent 12px 24px),
        var(--brand-tint-soft, #F4F8FF);
    border: 1.5px dashed var(--brand-primary-light, #62B7F9);
    color: var(--neutral-text-muted, #586678); font-size: .85rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .08);
}
.lpm-slot::before { content: "Bild-Slot: "; font-weight: 700; margin-right: .3ch; }

/*
 * Das echte Foto tritt an die Stelle des Platzhalters — mit denselben
 * Massen, damit sich am Seitenaufbau nichts verschiebt, wenn Material
 * nachgereicht wird.
 */
.lpm-foto { display: block; width: 100%; height: auto; object-fit: cover; }
.lpm-foto--hero {
    aspect-ratio: 4 / 3; border-radius: 24px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
}
/*
 * Hochformat im Hero: eigener Rahmen statt Streifen aus der Mitte.
 * Hoehenbegrenzung, damit ein Handyfoto den Bildschirm nicht sprengt,
 * und mittig gestellt, weil es schmaler ist als seine Spalte.
 */
/*
 * Hochformat im Hero behaelt sein eigenes Seitenverhaeltnis — es wird
 * gar nicht zugeschnitten, nur in der Hoehe begrenzt.
 *
 * Mit erzwungenen 3:4 fiel beim Yoga-Foto der untere Rand weg, und
 * dort stand die Person. Ein Zuschnitt, der das Motiv abschneidet, ist
 * schlimmer als ein Bild, das etwas schmaler ausfaellt: die Haltung IST
 * das Motiv. Beim Nebel-Bild ist Zuschneiden dagegen richtig, weil es
 * dort nur Hintergrund ist.
 */
.lpm-foto--hero.lpm-foto--hoch {
    aspect-ratio: auto; object-fit: contain;
    max-height: 30rem; width: auto; max-width: 100%;
    margin-inline: auto;
}
/*
 * Das Nebel-Bild fuellt sein Banner, statt es aufzublasen.
 *
 * Vorher stand hier height: 100% — bei einem Hochformat entstand
 * daraus eine Endlosschleife: die Grid-Zeile wuchs auf die natuerliche
 * Hoehe des Bildes (700 breit => 1248 hoch), und height: 100% nahm
 * genau diesen Wert wieder auf. Aus dem breiten Band wurde ein
 * Hochhaus. Absolut gesetzt bestimmt der Container die Hoehe, nicht
 * das Bild — und hier ist Zuschneiden richtig, weil das Motiv nur
 * Hintergrund fuer die Bildunterschrift ist.
 */
.lpm-foto--nebel {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0; aspect-ratio: auto; max-height: none;
}
.lpm-foto--polaroid { aspect-ratio: 3 / 4; border-radius: 4px; }

/* ── TRUST ────────────────────────────────────────────────── */
.lpm-trust {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .4rem 2rem; padding: 1rem 0;
    border-top: 1px solid var(--neutral-border, #E7E2D8);
    border-bottom: 1px solid var(--neutral-border, #E7E2D8);
    font-size: .72rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--neutral-text-muted, #586678);
}

/* ── SCHRITTE ─────────────────────────────────────────────── */
/* Enger gesetzt (Rueckmeldung 26.08.): die Karten standen zu weit
   auseinander und zerfielen dadurch in drei Einzelblöcke, statt als
   Ablauf gelesen zu werden. */
.lpm-steps { display: grid; gap: clamp(.55rem, 1.2vw, .9rem); margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
@media (min-width: 720px) { .lpm-steps { grid-template-columns: repeat(3, 1fr); } }
.lpm-steps li {
    background: #fff; border: 1px solid var(--neutral-border, #E7E2D8);
    border-radius: 20px; padding: 1.25rem 1.3rem; counter-increment: schritt;
}
.lpm-steps li::before {
    content: counter(schritt); display: inline-grid; place-items: center;
    width: 2.4rem; height: 2.4rem; margin-bottom: .8rem; border-radius: 50%;
    background: var(--brand-primary, #226CEA); color: #fff;
    font-weight: 700; font-size: 1.1rem;
}
.lpm-steps h3 { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 750; }
.lpm-steps p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--neutral-text-muted, #586678); }

/* ── Ueberschriften & Fliesstext der Sektionen ────────────── */
/*
 * Sektionen sind mittig gesetzt.
 *
 * Vorher standen Ueberschrift und Einleitung linksbuendig, waehrend
 * FAQ-Kopf, Abschlussband und die Polaroid-Reihe zentriert waren — die
 * Seite hatte also zwei Achsen und wirkte dadurch unruhig. Jetzt eine.
 *
 * Der Fliesstext behaelt seine Zeilenbreite (62ch) und wird nur mit
 * margin-inline: auto in die Mitte gestellt; ohne die Begrenzung
 * entstuenden lange zentrierte Zeilen, und die sind schwer zu lesen,
 * weil das Auge den Zeilenanfang jedes Mal neu suchen muss.
 */
.lpm-h2 {
    margin: 0 0 .9rem; font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 750; letter-spacing: -0.015em; text-wrap: balance;
    text-align: center;
}
.lpm-text {
    margin: 0 auto .9rem; line-height: 1.65; max-width: 62ch;
    color: var(--neutral-text-muted, #586678); text-align: center;
}

/* Die Zeile mit dem weiterfuehrenden Link unter der Vitrine. */
.lpm-linkzeile { text-align: center; margin: 1.2rem 0 0; }
.lpm-text a { color: var(--brand-primary, #226CEA); }

/*
 * Weiterfuehrender Link — leiser als ein Knopf, aber gestaltet.
 *
 * Vorher war das ein blau unterstrichener Standardlink mitten im
 * Cremeton: er sah aus wie ein Fremdkoerper, weil auf diesen Seiten
 * sonst nichts unterstrichen ist. Jetzt halbfett in Markenfarbe, mit
 * einem Pfeil, der beim Zeigen nachrueckt; die Unterstreichung kommt
 * erst beim Zeigen, damit der Hinweis "anklickbar" nicht verloren geht.
 */
.lpm-link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--brand-primary, #226CEA); font-weight: 650;
    text-decoration: none;
}
.lpm-link::after {
    content: "→"; transition: transform .16s ease; font-weight: 400;
}
.lpm-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.lpm-link:hover::after { transform: translateX(.25rem); }

/* ── DER GROSSE STIL (.lp-gross) ──────────────────────────── */

/*
 * Gross und ruhig — aber mittig.
 *
 * Die erste Fassung war linksbuendig, weil mittige Ueberschriften ab
 * drei Zeilen ihre Kante verlieren. Das stimmt als Regel und war hier
 * trotzdem falsch: die Seite besteht ueberwiegend aus BLOECKEN, die
 * schmaler sind als der Satzspiegel — Tarifkarte, FAQ, Chips, die
 * beiden Telefone. Linksbuendig standen die alle mit einer offenen
 * Flaeche rechts daneben, und das las sich nicht ruhig, sondern
 * halbfertig. Entscheidung Pascal 28.08.2026, und die Bilder geben
 * ihm recht.
 *
 * Gross und viel Luft bleiben — das war der Kern der Rueckmeldung.
 * Nur die Achse wandert in die Mitte.
 */
.lp-gross .lpm-section { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0; }

/*
 * Der Abschnitt mit dem Kartenpaar schliesst enger an das Bild
 * darunter an.
 *
 * Gemessen lagen zwischen der Zeile "QR-Karten und Drucksachen
 * entdecken" und dem naechsten Satz 176 Pixel — zweimal das volle
 * Polster, unten und oben. Bei Abschnitten, die mit einem Bild oder
 * einer Karte enden, faellt das nicht auf; hier endet der Abschnitt
 * mit einem duennen Textlink, und darunter beginnt wieder Text. Zwei
 * leichte Kanten mit 176 Pixeln dazwischen sehen aus, als fehle
 * etwas.
 *
 * :has() trifft genau den einen Abschnitt, ohne dass das Markup eine
 * weitere Klasse braucht. Browser, die es nicht kennen, bekommen den
 * alten Abstand — das ist unschoen, aber nicht kaputt.
 */
.lp-gross .lpm-section:has(> .lpm-zweispalt) {
    padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
}

.lp-gross .lpm-h2 {
    margin: 0 auto 1rem;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
    text-align: center; max-width: 22ch;
}
.lp-gross .lpm-text {
    margin: 0 auto 1.1rem; max-width: 52ch; text-align: center;
    font-size: 1.02rem;
}

/*
 * Der Kopf ist wieder ein Stapel, kein Nebeneinander.
 *
 * Nebeneinander ergab nur Sinn, solange beide an derselben linken
 * Kante hingen. Mittig gesetzt haetten zwei Spalten zwei Achsen — und
 * genau daran krankte die Seite ganz am Anfang schon einmal.
 */
.lpm-kopf { margin-bottom: 1.4rem; }
/* Die Zeile ueber der Ueberschrift gehoert auf dieselbe Achse wie
   diese. Ohne das stand sie als einziges Element links, waehrend der
   ganze Abschnitt mittig steht. (Die Himmels-Fahrt hat ihren eigenen
   Kopf und bleibt davon unberuehrt.) */
.lp-gross .lpm-kopf .lpm-eyebrow { text-align: center; }
@media (min-width: 62rem) {
    .lp-gross .lpm-kopf { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
}

/*
 * Die Himmels-Fahrt bleibt linksbuendig.
 *
 * Sie ist keine Reihe von Bloecken, sondern eine gebaute Szene: links
 * der Mond, rechts eine Textspalte, und die Schritt-Karten darunter
 * haengen an derselben Kante wie ihre Ueberschrift. Mittig gesetzt
 * bekaeme diese Spalte eine zweite Achse neben dem Mond — und Pascal
 * hat den Abschnitt am 28.08. so abgenommen, wie er ist.
 */
.lp-gross .lpm-himmel .lpm-h2 { text-align: left; margin-inline: 0; max-width: none; }

/* Alles, was schmaler ist als der Satzspiegel, steht in der Mitte. */
.lp-gross .lpm-linkzeile { text-align: center; }
.lp-gross .lpm-chips { justify-content: center; max-width: 56rem; margin-inline: auto; }
.lp-gross .lpm-produkt { margin-inline: auto; justify-items: center; }
.lp-gross .lpm-faq { max-width: 48rem; margin-inline: auto; }
.lp-gross .lpm-preis { margin-inline: auto; }
.lp-gross .lpm-weitere { justify-content: center; }
.lp-gross .lpm-wrap.lpm-narrow { max-width: 68rem; }

/*
 * Nebenrolle: derselbe Abschnitt, eine Stufe leiser.
 *
 * Fuer Inhalte, die dazugehoeren, aber nicht das Hauptargument sind —
 * auf der Retreat-Seite die Foto-Challenges, die zum Tarif Pro
 * gehoeren, waehrend Plus empfohlen wird. Ueberschrift auf normale
 * Groesse zurueck, Text und Schlagworte kleiner, weniger Polster
 * oben: der Abschnitt liest sich dann als Ausblick und nicht als
 * naechstes Versprechen.
 */
.lp-gross .lpm-nebenrolle { padding-top: clamp(1.4rem, 2.6vw, 2.2rem); }
.lp-gross .lpm-nebenrolle .lpm-h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.015em; max-width: 30ch;
}
.lp-gross .lpm-nebenrolle .lpm-text { font-size: .93rem; max-width: 62ch; }
.lpm-nebenrolle .lpm-chips li { font-size: .82rem; padding: .42rem .85rem; }
.lpm-nebenrolle .lpm-upgrade { font-size: .85rem; }

/*
 * Der Weg zum groesseren Tarif, hinter den Beispielen.
 *
 * Bewusst ein Satz und keine Plakette: eine blaue Kapsel mit
 * Grossbuchstaben ueber der Ueberschrift las sich wie ein
 * Verbotsschild. Ein ruhiger Satz am Ende des Abschnitts ist ein
 * Angebot an jemanden, den das Gelesene ueberzeugt hat.
 */
.lpm-upgrade {
    margin: 1.4rem auto 0; max-width: 52ch; text-align: center;
    font-size: .9rem; line-height: 1.6;
    color: var(--neutral-text-muted, #586678);
}
.lpm-upgrade .lpm-link { white-space: nowrap; }

/* ── ZWEISPALT + KARTENPAAR ───────────────────────────────── */

/*
 * Grosse Ueberschrift links, kleiner Text rechts, viel Luft.
 *
 * Bis hierher sah jeder Abschnitt gleich aus: mittig gesetzt, 32 px
 * Ueberschrift, 16 px Text, ueberall derselbe Abstand. Acht solche
 * Abschnitte hintereinander haben keine Rangfolge — deshalb las sich
 * die Seite unaufgeraeumt, obwohl jeder einzelne Abschnitt sauber war.
 *
 * Der Zweispalt gibt einem Abschnitt Gewicht: die Ueberschrift wird
 * gross und darf umbrechen, der erklaerende Satz rueckt daneben statt
 * darunter und bleibt klein. Bewusst eine VARIANTE und keine neue
 * Grundeinstellung — wenn jeder Abschnitt schreit, schreit keiner.
 */
.lpm-zweispalt { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) {
    .lpm-zweispalt { grid-template-columns: 1fr 1fr; }
}
.lpm-zweispalt__lead {
    margin: 1.1rem auto 0; max-width: 34ch;
    font-size: 1.02rem; line-height: 1.65;
    color: var(--neutral-text-muted, #586678);
}
.lpm-zweispalt .lpm-linkzeile { margin-top: 1.4rem; }
/* Auch hier mittig — innerhalb der Textspalte, nicht ueber die ganze
   Seite: neben der Textspalte liegen die Karten, und die bleiben, wo
   sie sind. */
.lp-gross .lpm-zweispalt__text { text-align: center; }
.lp-gross .lpm-zweispalt .lpm-gross { margin-inline: auto; text-align: center; }

/* Die grosse Fassung der Abschnitts-Ueberschrift. */
.lpm-gross {
    margin: .6rem 0 0;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 800; line-height: 1.04; letter-spacing: -.03em;
    text-wrap: balance;
}

/* Die weiteren Drucksachen: klein, in einer Zeile, mit Namen. Sie
   belegen den Satz nebenan, ohne mit dem Kartenpaar zu konkurrieren. */
.lpm-weitere {
    display: flex; gap: .9rem; flex-wrap: wrap;
    margin: 1.6rem 0 0; padding: 0; list-style: none;
}
.lpm-weitere li { display: flex; flex-direction: column; gap: .35rem; width: 6.6rem; }
.lpm-weitere img {
    display: block; width: 100%; height: auto; border-radius: 7px;
    border: 1px solid var(--neutral-border, #E7E2D8);
    box-shadow: 0 .5rem 1.1rem rgba(15, 23, 42, .1);
}
.lpm-weitere span {
    font-size: .68rem; letter-spacing: .04em;
    color: var(--neutral-text-muted, #586678);
}

/*
 * Zwei Karten, leicht gedreht, uebereinander gelegt.
 *
 * Ein Karussell beantwortet "wie viele gibt es". Diese Seite hat genau
 * zwei Karten, und die Frage ist eine andere: wie sieht das aus, wenn
 * es liegt. Also gross, angeschnitten, mit Schatten — ein Bild statt
 * einer Liste.
 *
 * Die Drehung ist klein (unter fuenf Grad). Alles darueber wirkt wie
 * ein Aufkleber; darunter wie zwei Karten, die jemand hingelegt hat.
 */
.lpm-kartenpaar { position: relative; display: block; }
.lpm-kartenpaar img {
    display: block; width: 84%; height: auto; border-radius: 12px;
    box-shadow: 0 1.6rem 3.4rem rgba(15, 23, 42, .18);
}
.lpm-kartenpaar__hinten {
    margin-left: 0;
    transform: rotate(-3.2deg);
}
.lpm-kartenpaar__vorn {
    position: relative; margin: -18% 0 0 auto;
    transform: rotate(2.4deg);
    box-shadow: 0 2.2rem 4.6rem rgba(15, 23, 42, .26);
}
@media (prefers-reduced-motion: no-preference) {
    .lpm-kartenpaar img { transition: transform .35s ease; }
    .lpm-kartenpaar:hover .lpm-kartenpaar__hinten { transform: rotate(-4.4deg) translateX(-1.5%); }
    .lpm-kartenpaar:hover .lpm-kartenpaar__vorn { transform: rotate(3.4deg) translateX(1.5%); }
}

/* ── KARUSSELL ────────────────────────────────────────────── */
.lpm-karussell__hint {
    font-size: .72rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--neutral-text-muted, #586678);
}
.lpm-karussell__band {
    display: flex; gap: 1.4rem; overflow-x: auto; padding: .25rem .25rem 1.4rem;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
}
/*
 * Einheitliche HOEHE statt einheitlichem Seitenverhaeltnis.
 *
 * Vorher stand hier aspect-ratio 3/4 mit object-fit: cover — das
 * schnitt jede querformatige QR-Karte auf Hochformat zu, mitten durch
 * die Schrift. Auf der Geburtstagsseite war von "SOMMERFEST" noch
 * "MMERFEST" uebrig.
 *
 * Diese Vitrine zeigt Drucksachen, und die haben verschiedene
 * Formate: Karten quer, Tagesablauf und Menuekarte hochkant als A4.
 * Beschneiden ist hier also kein Schoenheitsfehler, sondern zeigt das
 * Produkt falsch. Gleiche Hoehe, natuerliche Breite: alles vollstaendig
 * sichtbar, die Reihe bleibt trotzdem ruhig.
 */
/*
 * Am Anfang ausrichten, nicht mittig.
 *
 * Bei zentriertem Einrasten steht die erste Karte in der Mitte und
 * links wie rechts bleibt gleich viel Rand — das sieht aus wie ein
 * Einzelbild. Am Anfang ausgerichtet sitzt die erste Karte links
 * buendig und die naechste schaut rechts herein: erst dadurch ist zu
 * sehen, dass es weitergeht.
 */
/*
 * margin: 0 ist hier nicht kosmetisch, sondern notwendig.
 *
 * Die Karte ist ein <figure>, und dafuer setzen Browser von sich aus
 * 40 px Aussenabstand links und rechts. Zwischen zwei Karten lagen
 * dadurch 96 statt 16 Pixel — auf dem Handy genug, um die naechste
 * Karte komplett aus dem Bild zu schieben. Es sah aus wie ein
 * Einzelbild, nicht wie ein Karussell.
 */
/*
 * Die Breite kommt vom Bild, nicht von der Bildunterschrift.
 *
 * Bisher war die Unterschrift auf 26rem gedeckelt und damit breiter
 * als jedes Hochformat. Der Tagesablauf ist ein A4-Blatt und nur rund
 * 190 px breit — die Karte war trotzdem 416 px breit, weil der Text
 * sie aufzog. Zwischen zwei Blaettern klaffte dadurch Leere, obwohl
 * der Abstand rechnerisch stimmte.
 *
 * width: 0 nimmt die Unterschrift aus der Breitenrechnung heraus,
 * min-width: 100% gibt ihr danach genau die Breite des Bildes. Der
 * Text bricht eine Zeile mehr um, dafuer stehen die Karten enger.
 *
 * min-width haelt eine lesbare Spalte frei: unter etwa 15rem wuerde
 * die Unterschrift zum Schlauch. Auf schmalen Geraeten gewinnt der
 * 66vw-Deckel, sonst bliebe kein Platz fuer die naechste Karte.
 */
.lpm-karussell__card {
    flex: 0 0 auto; margin: 0; scroll-snap-align: start;
    min-width: min(15rem, 66vw); max-width: 80vw;
}
.lpm-karussell__card figcaption { width: 0; min-width: 100%; }
.lpm-karussell__card img {
    /*
     * margin-inline: auto zentriert nur die schmalen Blaetter. Bei
     * den querformatigen Karten ist das Bild so breit wie die Karte,
     * da bewirkt es nichts. Ein A4-Hochformat fuellt die lesbare
     * Textspalte dagegen nur zur Haelfte und stuende sonst mit der
     * ganzen Leere auf einer Seite.
     */
    display: block; height: clamp(11rem, 24vw, 17rem); width: auto; max-width: 80vw;
    margin-inline: auto;
    object-fit: contain;
    border-radius: 14px; border: 1px solid var(--neutral-border, #E7E2D8);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12); background: #fff;
}

/*
 * Auf dem Handy schmaler — sonst ist keine zweite Karte zu ahnen.
 *
 * Die Breite kam frueher von der Bildunterschrift und zog die Karte
 * bis an den Anschlag; die naechste stand ausserhalb des Bildes. Wer
 * nicht zufaellig wischt, haelt das fuer ein einzelnes Bild. Seit die
 * Unterschrift dem Bild folgt, ist der Deckel hier die zweite Bremse:
 * eine querformatige QR-Karte waere sonst breiter als das Telefon.
 *
 * 66vw lassen rund ein Drittel der naechsten Karte hereinschauen —
 * genug, um sie als angeschnitten zu erkennen. Dazu ein engerer
 * Abstand, damit sie naeher heranrueckt.
 */
@media (max-width: 700px) {
    .lpm-karussell__band { gap: 1rem; scroll-padding-left: .25rem; }
    .lpm-karussell__card,
    .lpm-karussell__card img { max-width: 66vw; }
}
.lpm-karussell__card figcaption { margin-top: .6rem; font-size: .85rem; line-height: 1.5; color: var(--neutral-text-muted, #586678); }
.lpm-karussell__card figcaption strong { color: var(--brand-anthracite, #0F172A); }

/* ── NEBEL (grosses Bild, Caption auf Verlauf) ────────────── */
.lpm-nebel {
    position: relative; border-radius: 32px; overflow: hidden;
    min-height: clamp(18rem, 45vw, 32rem); display: grid;
}
.lpm-nebel .lpm-slot {
    aspect-ratio: auto; border-radius: 0; border: none; box-shadow: none;
    min-height: inherit;
}
.lpm-nebel__schleier {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(15, 23, 42, .85) 0%, rgba(15, 23, 42, .25) 40%, transparent 65%);
}
.lpm-nebel__caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: clamp(1.4rem, 4vw, 3rem); text-align: center;
}
.lpm-nebel__caption p {
    margin: 0 auto; max-width: 40ch; color: #fff;
    font-size: clamp(1.2rem, 2.6vw, 1.8rem); font-weight: 750; line-height: 1.3;
    text-wrap: balance;
}

/* ── POLAROIDS (schraege Bilder) ──────────────────────────── */
.lpm-polaroids { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: .5rem 0 0; }
.lpm-polaroids figure {
    margin: 0; background: #fff; border-radius: 10px;
    padding: .6rem .6rem 2.2rem; box-shadow: 0 16px 35px rgba(15, 23, 42, .15);
    width: min(15rem, 70vw);
}
.lpm-polaroids figure:nth-child(3n+1) { transform: rotate(-3deg); }
.lpm-polaroids figure:nth-child(3n+2) { transform: rotate(2deg) translateY(1.2rem); }
.lpm-polaroids figure:nth-child(3n)   { transform: rotate(4deg); }
.lpm-polaroids .lpm-slot { aspect-ratio: 3 / 4; border-radius: 4px; box-shadow: none; }
.lpm-polaroids figcaption { margin-top: .55rem; text-align: center; font-size: .8rem; color: var(--neutral-text-muted, #586678); }

/* ── CHIPS ────────────────────────────────────────────────── */
.lpm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.lpm-chips li {
    background: #fff; border: 1px solid var(--neutral-border, #E7E2D8);
    border-radius: 999px; padding: .55rem 1rem; font-size: .92rem;
}

/* ── PREIS-Teaser (Nachtblau-Karte) ───────────────────────── */
/*
 * Kleiner als zuvor (Rueckmeldung 28.08.): die Karte war fast so hoch
 * wie ein halber Bildschirm und zog damit mehr Aufmerksamkeit als die
 * Abschnitte, die ueberhaupt erst erklaeren, wofuer man zahlt.
 *
 * Verkleinert wurde durchgehend und nicht nur die Aussenmasse — eine
 * Karte mit halbem Rand, aber unveraendert grosser Schrift wirkt
 * gedraengt statt kleiner.
 */
.lpm-preis {
    background: var(--brand-anthracite, #0F172A); color: #fff;
    border-radius: 24px; padding: clamp(1.3rem, 2.6vw, 2rem);
    display: grid; gap: 1.4rem; align-items: center;
    max-width: 54rem;
}
@media (min-width: 1024px) { .lpm-preis { grid-template-columns: 1fr 1fr; } }
.lpm-preis__badge {
    display: inline-block; background: var(--brand-primary, #226CEA); color: #fff;
    border-radius: 999px; padding: .3rem .9rem; font-size: .65rem;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.lpm-preis h2 { margin: .7rem 0; font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; }
.lpm-preis ul { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .93rem; }
.lpm-preis li { padding-left: 1.6rem; position: relative; }
.lpm-preis li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-primary-light, #62B7F9); font-weight: 700; }
.lpm-preis__zahl { font-size: 1.5rem; font-weight: 800; margin-bottom: .8rem; }
.lpm-preis__zahl span { font-size: .88rem; font-weight: 400; color: rgba(255, 255, 255, .55); }
.lpm-preis__seite { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 1.5rem; }
@media (max-width: 1023px) { .lpm-preis__seite { border-left: 0; padding-left: 0; } }
.lpm-preis__seite p { margin: 0 0 .8rem; font-size: .97rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.lpm-preis__seite a { color: var(--brand-primary-light, #62B7F9); font-weight: 700; text-decoration: none; }
.lpm-preis__seite a:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────────── */
.lpm-faq { display: grid; gap: .7rem; }
.lpm-faq details {
    background: #fff; border: 1px solid var(--neutral-border, #E7E2D8);
    border-radius: 18px; padding: 1rem 1.3rem;
}
.lpm-faq summary {
    font-weight: 700; font-size: 1.02rem; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.lpm-faq summary::-webkit-details-marker { display: none; }
.lpm-faq summary::after {
    content: "+"; color: var(--brand-primary, #226CEA);
    font-size: 1.3rem; font-weight: 600; transition: transform .18s ease;
}
.lpm-faq details[open] summary::after { transform: rotate(45deg); }
.lpm-faq details p { margin: .7rem 0 0; line-height: 1.6; color: var(--neutral-text-muted, #586678); }

/* ── CTA-BAND ─────────────────────────────────────────────── */
.lpm-ctaband { background: var(--brand-primary, #226CEA); color: #fff; text-align: center; padding: clamp(2.4rem, 5vw, 3.8rem) 1.5rem; }
.lpm-ctaband h2 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; text-wrap: balance; }
.lpm-ctaband p { margin: 0 auto 1.8rem; max-width: 48ch; color: rgba(255, 255, 255, .88); line-height: 1.6; }
/*
 * Eigene Reihe statt eines Absatzes. Vorher standen die Knoepfe in
 * einem <p>, und die Regel darueber gab jedem <p> hier max-width: 48ch
 * mit margin: 0 auto — beim Knopf-Absatz war das auto durch ein
 * inline gesetztes margin: 0 ausgehebelt. Ergebnis: eine 48ch breite
 * Kiste am linken Rand, aus der die Knoepfe herausragten.
 */
.lpm-ctaband__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ── PRODUKT ──────────────────────────────────────────────────
   Die Anwendung selbst: drei Ansichten nebeneinander, im Zuschnitt
   eines Handybildschirms. Kein Polaroid-Rahmen und keine Drehung —
   ein Screenshot ist kein Erinnerungsfoto, und schraeg gestellt
   wuerde er wie Deko wirken statt wie das Produkt. */
.lpm-produkt {
    display: grid; gap: clamp(1.1rem, 2.5vw, 1.8rem); margin-top: 1.4rem;
    /*
     * Die Deckelung gehoert AN DAS BILD, nicht in die Spaltenformel.
     *
     * Mit minmax(..., 17rem) rechnet der Browser die Spaltenzahl aus
     * dem Hoechstwert: zweimal 17rem plus Abstand passen auf dem Handy
     * nicht nebeneinander, also machte er EINE Spalte — und die zwei
     * Telefone standen uebereinander, zusammen 1400 Pixel hoch.
     *
     * Mit 1fr rechnet er aus dem MINDESTwert, und der schrumpft auf
     * dem Handy mit (40vw). Zwei schmale Spalten passen, die Telefone
     * stehen nebeneinander, und die Deckelung auf 17rem sitzt am
     * Bild statt an der Spalte.
     */
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 40vw), 1fr));
    max-width: 46rem; margin-inline: auto;
}

/*
 * Ein gezeichnetes Telefon um den Screenshot.
 *
 * Ohne Rahmen sind es einfach hochkante Bilder — dass man auf einen
 * Handybildschirm schaut, muss man sich denken. Der Rahmen sagt es,
 * ohne dass es jemand danebenschreiben muesste.
 *
 * Gezeichnet und nicht mitfotografiert: ein abfotografiertes Telefon
 * braeuchte immer dieselbe Hand, dasselbe Licht und dasselbe Geraet,
 * sonst passen die Bilder nebeneinander nicht zusammen.
 */
.lpm-produkt__rahmen {
    position: relative; padding: .45rem;
    border-radius: 1.9rem;
    background: linear-gradient(160deg, #2A3346, #0C121D 70%);
    box-shadow: 0 1.1rem 2.6rem rgba(15, 23, 42, .26),
                inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* Der Hoerer-Schlitz. Klein genug, um nicht wie ein Aufkleber zu
   wirken, gross genug, um die Kante als Geraet zu lesen. */
.lpm-produkt__rahmen::before {
    content: ""; position: absolute; z-index: 2;
    top: .9rem; left: 50%; transform: translateX(-50%);
    width: 26%; height: .38rem; border-radius: .3rem;
    background: rgba(6, 10, 17, .92);
}
/* Im Rahmen traegt das Bild weder eigenen Rand noch eigenen Schatten —
   die kommen jetzt vom Gehaeuse. */
.lpm-produkt__rahmen .lpm-foto--geraet {
    border: 0; box-shadow: none; border-radius: 1.5rem;
}
.lpm-produkt__geraet { margin: 0; max-width: 17rem; }
.lpm-produkt__geraet figcaption {
    margin-top: .55rem; text-align: center; font-size: .8rem;
    color: var(--neutral-text-muted, #586678);
}
/* 9:19.5 — das Seitenverhaeltnis aktueller Telefone. Screenshots
   passen damit ohne Zuschnitt hinein. */
.lpm-produkt .lpm-slot,
.lpm-foto--geraet {
    aspect-ratio: 9 / 19.5; border-radius: 18px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}
.lpm-foto--geraet { border: 1px solid var(--neutral-border, #E7E2D8); }
/* Der Hochformat-Zusatz darf hier nicht dazwischenfunken: das
   Geraeteformat ist bereits hochkant und exakt gewuenscht. */
.lpm-foto--geraet.lpm-foto--hoch { aspect-ratio: 9 / 19.5; max-height: none; width: 100%; }