/* =============================================================
   PeopleChat — öffentliche Landingpage (index.php / mobile-index.php)
   Inhalte kommen aus inc/landing_content.php (CMS-Tabellen, Migration 019),
   dieses Stylesheet ist rein präsentational und für beide Einstiegspunkte
   (Desktop-UA und Mobile-UA) identisch — die Anpassung an schmale
   Viewports läuft komplett über die @media-Regeln unten.
   ============================================================= */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body.lp-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color:#e8ece9; overflow-x:hidden;
    background:
        linear-gradient(rgba(5,8,12,.75), rgba(5,8,12,.75)),
        url("../images/people-chat_bg_001.jpg") center center / cover no-repeat fixed;
}
@media (max-width:768px) {
    body.lp-body {
        background:
            linear-gradient(rgba(5,8,12,.75), rgba(5,8,12,.75)),
            url("../images/people-chat_bg_mobile_002.jpg") center top / cover no-repeat fixed;
    }
}
.lp-body a { color:inherit; text-decoration:none; }
.lp-body img { max-width:100%; }
.lp-body .container { width:min(1180px, calc(100% - 40px)); margin:0 auto; }

/* ── Header ─────────────────────────────────────────── */
.lp-header {
    position:sticky; top:0; z-index:200;
    background:rgba(6,9,10,.86); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.lp-header-inner { display:flex; align-items:center; gap:20px; padding:12px 0; }
.lp-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:#fff; flex:none; }
.lp-logo img { height:52px; width:auto; display:block; }
.lp-nav { display:flex; align-items:center; gap:28px; margin-left:36px; flex:1; }
.lp-nav a {
    position:relative; font-size:14px; font-weight:600; color:rgba(255,255,255,.75);
    transition:color .25s ease;
}
.lp-nav a:hover { color:#84d441; text-shadow:0 0 10px rgba(132,212,65,.7); }
.lp-nav a::after {
    content:''; position:absolute; left:0; bottom:-6px; width:0%; height:2px;
    background:#84d441; transition:width .25s ease;
}
.lp-nav a:hover::after { width:100%; }
.lp-header-right { display:flex; align-items:center; gap:12px; }
/* Identisch zu assets/css/styles.css (inc/lang-switcher.php) — bewusst
   1:1 kopiert statt eigenes Design, damit der Sprach-Umschalter überall
   in der App gleich aussieht. */
.lang-switcher { position: relative; display: inline-block; margin-left: 8px; vertical-align: middle; }
.lang-switcher > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .15s, border-color .15s;
    user-select: none; -webkit-user-select: none; white-space: nowrap;
}
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 16px rgba(132,212,65,.35); }
.lang-pill-flag  { font-size: 15px; line-height: 1; }
.lang-pill-arrow { font-size: 9px; opacity: .7; transition: transform .15s; }
.lang-switcher[open] > summary { background: rgba(255,255,255,.14); border-color: rgba(132,212,65,.5); }
.lang-switcher[open] .lang-pill-arrow { transform: rotate(180deg); }

.lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 172px; z-index: 250;
    background: #141a1f;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    padding: 5px;
    max-height: 320px; overflow-y: auto;
}
.lang-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 7px;
    text-decoration: none; color: rgba(255,255,255,.82);
    font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background .12s;
}
.lang-item:hover { background: rgba(255,255,255,.08); box-shadow: 0 0 12px rgba(132,212,65,.25); }
.lang-item.active { color: #84d441; }
.lang-item-flag  { font-size: 17px; line-height: 1; }
.lang-item-label { flex: 1; }
.lang-item-code  { font-size: 11px; font-weight: 700; opacity: .5; letter-spacing: .5px; }
.lp-btn {
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
    padding:11px 20px; border-radius:999px; font-weight:800; font-size:14px; border:none; cursor:pointer;
    transition:.18s;
}
.lp-btn-primary { background:#84d441; color:#0a0f0a; box-shadow:0 8px 22px rgba(132,212,65,.32); }
.lp-btn-primary:hover { transform:translateY(-1px); filter:brightness(1.05); }
.lp-btn-ghost { background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.14); }
.lp-burger { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px; }
.lp-mobile-nav { display:none; flex-direction:column; gap:2px; padding:10px 0 16px; border-top:1px solid rgba(255,255,255,.06); }
.lp-mobile-nav.open { display:flex; }
.lp-mobile-nav a { padding:10px 4px; font-size:14px; font-weight:600; color:rgba(255,255,255,.8); transition:color .25s ease; }
.lp-mobile-nav a:hover { color:#84d441; text-shadow:0 0 10px rgba(132,212,65,.7); }

/* Rückweg in die App bzw. Login — im Kopf rechts neben dem Sprachumschalter.
   Etwas kompakter als die großen CTA-Knöpfe im Seiteninhalt. */
.lp-app-btn { padding:9px 16px; font-size:13px; text-decoration:none; }
.lp-mobile-app-link { color:#84d441 !important; font-weight:800 !important; }

/* Anzeige, als wer man gerade angemeldet ist — nur auf der öffentlichen Seite,
   damit klar ist, dass die Sitzung noch läuft (statt eines "Anmelden"-Links). */
.lp-user { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85); white-space:nowrap; }
.lp-mobile-user { display:flex; align-items:center; gap:9px; padding:10px 4px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:4px; }

/* Teilen-Knopf in der Kopfzeile — nur Symbol, damit er neben Sprachumschalter
   und Menüknopf auch auf schmalen Geräten Platz hat. */
.lp-share-btn {
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:36px; height:36px; padding:0; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background .15s, border-color .15s, color .15s;
}
.lp-share-btn:hover { background:rgba(132,212,65,.15); border-color:rgba(132,212,65,.45); color:#84d441; }
.lp-share-btn svg { width:17px; height:17px; display:block; }
/* Bestätigung nach dem Kopieren: Häkchen statt Teilen-Symbol. */
.lp-share-btn .ic-done { display:none; }
.lp-share-btn.copied { background:rgba(132,212,65,.22); border-color:#84d441; color:#84d441; }
.lp-share-btn.copied .ic-share { display:none; }
.lp-share-btn.copied .ic-done  { display:block; }
/* Grüner Ring statt eines separaten Statuspunkts — zeigt die laufende Sitzung
   und passt zum Avatar-Stil in der App (dort ebenfalls grüner Rand). */
.lp-user-avatar {
    width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; display:block;
    border:2px solid rgba(132,212,65,.55); box-shadow:0 0 8px rgba(132,212,65,.25);
}
.lp-mobile-user .lp-user-avatar { width:26px; height:26px; }

@media (max-width:900px) {
    .lp-nav { display:none; }
    /* Im Kopf ausblenden: dort wird es neben Sprachumschalter und Burger zu
       eng. Beides steckt auf Mobile stattdessen oben im Burger-Menü. */
    .lp-app-btn { display:none; }
    .lp-user { display:none; }
    /* .lp-nav füllte per flex:1 den Platz zwischen Logo und rechtem
       Bereich und schob dadurch das Menü an den rechten Rand — fällt
       auf Mobile weg (display:none), also übernimmt .lp-header-right
       selbst das Nach-rechts-Schieben. */
    .lp-header-right { margin-left:auto; }
    .lp-burger { display:block; }
}

/* ── Hero ───────────────────────────────────────────── */
.lp-hero {
    position:relative; padding:70px 0 60px; text-align:center; overflow:hidden;
    background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(132,212,65,.16), transparent 60%);
}
.lp-badge {
    display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
    background:rgba(132,212,65,.13); border:1px solid rgba(132,212,65,.3); color:#a8eb78;
    font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; margin-bottom:22px;
}
.lp-hero h1 {
    margin:0 0 18px; font-size:44px; line-height:1.14; letter-spacing:.2px; font-weight:800; color:#fff;
    max-width:820px; margin-left:auto; margin-right:auto;
}
.lp-hero h1 .accent { color:#84d441; display:block; font-size:1.08em; }
.lp-hero p.lead {
    max-width:560px; margin:0 auto 30px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.65);
}
.lp-hero-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:56px; flex-wrap:wrap; }
.lp-btn-lg { padding:15px 30px; font-size:15px; }
.lp-video-link { display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:14px; }
.lp-video-link .dot {
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; flex:none;
}

@media (max-width:640px) { .lp-hero h1 { font-size:30px; } .lp-hero { padding:44px 0 36px; } }

/* ── Section shells ─────────────────────────────────── */
.lp-section { padding:56px 0; }
#funktionen { padding-top:28px; }
.lp-section-alt { background:rgba(255,255,255,.015); }
.lp-eyebrow { color:#84d441; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.lp-section h2 { font-size:26px; color:#fff; margin:0 0 8px; }

/* ── Feature grid ───────────────────────────────────── */
/* minmax(0, 1fr) statt 1fr — WICHTIG:
   Ein reines 1fr heißt "mindestens so breit wie der Inhalt". Lange Wörter wie
   "Kommunikation" zwingen ihre Spalte dadurch breiter zu werden, das Raster
   wird breiter als der Bildschirm und die rechte Spalte wird abgeschnitten
   (aufgefallen auf dem iPhone XS mit 375px; breitere Geräte kaschierten es).
   minmax(0, …) erlaubt das Schrumpfen und erzwingt gleich breite Kacheln. */
.lp-features {
    display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; margin-top:8px;
}
.lp-feature {
    background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter:blur(4px) saturate(130%); -webkit-backdrop-filter:blur(4px) saturate(130%);
    border:0.5px solid rgba(255,255,255,.22); border-radius:12px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
    padding:20px 14px; text-align:center; transition:.18s;
}
.lp-feature:hover { border-color:rgba(132,212,65,.45); transform:translateY(-2px); }
.lp-feature .ic {
    width:44px; height:44px; margin:0 auto 12px; border-radius:12px; background:rgba(132,212,65,.12);
    display:flex; align-items:center; justify-content:center; color:#84d441;
}
.lp-feature .ic svg { width:22px; height:22px; }
/* overflow-wrap als zweite Absicherung: notfalls wird ein überlanges Wort
   umbrochen, statt aus der Kachel zu ragen. */
.lp-feature span { font-size:13px; font-weight:700; color:#fff; line-height:1.35; display:block; overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
@media (max-width:900px) { .lp-features { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:560px) { .lp-features { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; } .lp-feature { padding:12px 6px; } .lp-feature .ic{width:36px;height:36px;margin-bottom:8px;} .lp-feature span{font-size:11px;} }

/* ── How it works ───────────────────────────────────── */
.lp-how-wrap { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.lp-steps { display:flex; align-items:flex-start; gap:10px; }
.lp-step { flex:1; text-align:center; }
.lp-step .num {
    width:46px; height:46px; border-radius:50%; background:rgba(132,212,65,.12); border:1px solid rgba(132,212,65,.35);
    color:#84d441; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:16px;
}
.lp-step p { font-size:13px; font-weight:700; color:#fff; margin:0; }
.lp-step-arrow { color:rgba(255,255,255,.25); font-size:20px; padding-top:12px; }
.lp-video-box {
    position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/10;
    background:
        radial-gradient(circle at 30% 20%, rgba(132,212,65,.18), transparent 55%),
        linear-gradient(160deg, #0c1f18 0%, #050807 100%);
    border:1px solid rgba(132,212,65,.18); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
    cursor:pointer;
}
.lp-play-btn {
    width:64px; height:64px; border-radius:50%; background:#84d441; color:#0a0f0a;
    display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px rgba(132,212,65,.14), 0 10px 30px rgba(132,212,65,.35);
    transition:.18s;
}
.lp-video-box:hover .lp-play-btn { transform:scale(1.06); }
.lp-play-btn svg { width:24px; height:24px; margin-left:3px; }
.lp-video-box .caption { color:#fff; font-weight:700; font-size:14px; text-align:center; padding:0 20px; }
/* Trailer — mittig, in beiden Formaten.
   Die Höhe kommt über aspect-ratio, damit vor dem Laden des Videos kein
   Springen entsteht. Die alten .lp-steps/.lp-video-box-Regeln darüber bleiben
   ungenutzt stehen, falls die Schritt-Darstellung je zurückkehren soll. */
.lp-trailer-wrap { display:flex; justify-content:center; }
.lp-trailer {
    display:block; width:100%; height:auto; border-radius:20px;
    border:1px solid rgba(132,212,65,.18); background:#050807;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.lp-trailer.is-landscape { max-width:900px; aspect-ratio:16/9; }
.lp-trailer.is-portrait  { max-width:330px; aspect-ratio:9/16; }
/* Schritte unter dem Trailer — schmaler als der Abschnitt, damit sie optisch
   zum Video gehören und nicht über die volle Seitenbreite auseinanderlaufen. */
.lp-steps-under { max-width:760px; margin:34px auto 0; }

@media (max-width:900px) { .lp-how-wrap { grid-template-columns:1fr; } }
@media (max-width:560px) { .lp-steps{flex-direction:column;} .lp-step-arrow{display:none;} .lp-step{display:flex;align-items:center;gap:12px;text-align:left;} .lp-step .num{margin:0;flex:none;} }

/* ── Why-Panel + Preiskarten ────────────────────────── */
.lp-panel {
    background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter:blur(4px) saturate(130%); -webkit-backdrop-filter:blur(4px) saturate(130%);
    border:0.5px solid rgba(255,255,255,.22); border-radius:12px; padding:26px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
}
.lp-panel h3 { margin:0 0 14px; font-size:17px; color:#fff; }
.lp-why-panel { max-width:560px; margin:0 auto; text-align:center; }
.lp-why-panel .lp-check-list { text-align:left; max-width:380px; margin-left:auto; margin-right:auto; }
.lp-check-list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:11px; }
.lp-check-list li { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:rgba(255,255,255,.82); }
.lp-check-list li svg { width:16px; height:16px; color:#84d441; flex:none; margin-top:2px; }

.lp-pricing-toggle { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:30px; }
.lp-pricing-toggle-label { font-size:14px; font-weight:700; color:rgba(255,255,255,.45); transition:color .2s; cursor:pointer; user-select:none; }
.lp-pricing-toggle-label.active { color:#fff; }
.lp-toggle-switch { position:relative; width:52px; height:28px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); cursor:pointer; padding:0; flex:none; }
.lp-toggle-switch .lp-toggle-knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#84d441; transition:transform .2s ease; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.lp-toggle-switch[aria-checked="true"] .lp-toggle-knob { transform:translateX(24px); }

.lp-pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; align-items:stretch; }
.lp-pricing-card {
    background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter:blur(4px) saturate(130%); -webkit-backdrop-filter:blur(4px) saturate(130%);
    border:0.5px solid rgba(255,255,255,.22); border-radius:12px; padding:26px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
    position:relative; display:flex; flex-direction:column;
}
.lp-pricing-card.featured { border:1.5px solid #84d441; box-shadow:0 0 24px rgba(132,212,65,.25), 0 6px 24px rgba(0,0,0,.2); }
.lp-pricing-badge {
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:#84d441; color:#0a0f0a; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:5px 14px; border-radius:999px; white-space:nowrap;
}
.lp-pricing-card h3 { margin:6px 0 6px; font-size:18px; color:#fff; }
.lp-pricing-desc { margin:0 0 14px; font-size:13px; color:rgba(255,255,255,.55); }
.lp-pricing-price { margin:0 0 18px; }
.lp-pricing-price .amount { font-size:32px; font-weight:800; color:#fff; }
.lp-pricing-price .period { font-size:13px; font-weight:600; color:rgba(255,255,255,.5); margin-left:4px; }
.lp-pricing-price .lp-price-yearly { display:none; }
.lp-pricing-grid.lp-yearly-active .lp-pricing-price .lp-price-monthly { display:none; }
.lp-pricing-grid.lp-yearly-active .lp-pricing-price .lp-price-yearly { display:inline; }
.lp-pricing-tokens {
    display:inline-flex; align-items:center; gap:6px; margin:0 0 18px; padding:7px 12px;
    background:rgba(132,212,65,.08); border:1px solid rgba(132,212,65,.25); border-radius:8px;
    font-size:13px; font-weight:700; color:#84d441;
}
.lp-pricing-tokens svg { width:15px; height:15px; flex:none; }
.lp-pricing-tokens span { font-weight:600; color:rgba(255,255,255,.5); font-size:12px; }
.lp-pricing-card .lp-check-list { flex:1; }
.lp-btn-block { width:100%; }

/* ── Testimonials ───────────────────────────────────── */
.lp-testi-track { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.lp-testi {
    background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter:blur(4px) saturate(130%); -webkit-backdrop-filter:blur(4px) saturate(130%);
    border:0.5px solid rgba(255,255,255,.22); border-radius:12px; padding:22px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
}
.lp-testi p.quote { font-size:14px; color:rgba(255,255,255,.85); line-height:1.55; margin:0 0 16px; font-style:italic; }
.lp-testi-person { display:flex; align-items:center; gap:10px; }
.lp-testi-avatar { width:38px; height:38px; border-radius:50%; background:#243026; display:flex; align-items:center; justify-content:center; font-weight:800; color:#84d441; flex:none; }
.lp-testi-name { font-size:13px; font-weight:700; color:#fff; }
.lp-stars { color:#f0b429; font-size:12px; letter-spacing:1px; }
.lp-testi-dots { display:none; justify-content:center; gap:7px; margin-top:16px; }
.lp-testi-dots span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); }
.lp-testi-dots span.active { background:#84d441; }
@media (max-width:900px) {
    /* grid-template-columns MUSS hier auf none zurückgesetzt werden.
       Bleibt die Desktop-Angabe stehen, landet die ERSTE Karte in dieser
       festen Spalte und alle weiteren in automatisch erzeugten Spalten mit
       grid-auto-columns — die Karten bekommen dadurch unterschiedliche
       Breiten und die hinteren werden rechts abgeschnitten. */
    .lp-testi-track { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
    .lp-testi { scroll-snap-align:start; }
    .lp-testi-dots { display:flex; }
}

/* ── Final CTA ──────────────────────────────────────── */
.lp-final-cta {
    border-radius:24px; padding:44px 40px; position:relative;
    min-height:280px; display:flex; align-items:center; justify-content:flex-end;
    border:1px solid rgba(255,255,255,.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 1px 0 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.28),
        inset -1px 0 0 rgba(0,0,0,.14),
        0 8px 30px rgba(0,0,0,.35);
}
.lp-final-cta::before {
    content:''; position:absolute; inset:0; z-index:0;
    border-radius:inherit; overflow:hidden;
    background: url("../images/banner_peoplechat_001.jpg") center / cover no-repeat;
}
.lp-final-cta-content { position:relative; z-index:1; max-width:420px; text-align:left; margin-right:calc(5% + 200px); transform:translateY(-50px); }
.lp-final-cta h2 { font-size:24px; color:#fff; margin:0 0 8px; text-shadow:0 2px 10px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.85); }
.lp-final-cta p { color:rgba(255,255,255,.75); margin:-6px 0 22px; font-size:18px; text-shadow:0 2px 10px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.85); }
.lp-final-cta .lp-btn-primary {
    box-shadow:
        0 8px 22px rgba(132,212,65,.32),
        0 0 0 1px rgba(255,255,255,.3),
        0 10px 28px rgba(0,0,0,.45);
}
@media (max-width:640px) {
    .lp-final-cta { justify-content:center; padding:34px 24px; min-height:240px; }
    .lp-final-cta-content { max-width:100%; text-align:center; margin-right:0; }
    .lp-final-cta::before { background-image: url("../images/banner_peoplechat_mobill_001.jpg"); }
    /* transform statt margin: der Container zentriert seinen Inhalt
       (align-items:center) und gleicht margin-top teilweise wieder aus —
       transform umgeht das und bewegt zuverlässig um genau den Wert. */
    .lp-final-cta h2, .lp-final-cta-content p { transform: translateY(-73px); }
    .lp-final-cta .lp-btn-primary { transform: translateY(120px); }
    /* "Video ansehen" raus auf Mobile — .lp-hero-actions zentriert per
       flex justify-content:center schon automatisch, sobald nur noch
       der "Kostenlos testen"-Button als einziges Kind übrig ist. */
    .lp-video-link { display:none; }
}

/* ── Footer ─────────────────────────────────────────── */
.lp-footer {
    padding:50px 0 24px; border-top:1px solid rgba(255,255,255,.06);
    background:rgba(4,7,9,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* minmax(0, …) wie bei .lp-features: verhindert, dass ein langes Wort
   ("Datenschutzerklärung") seine Spalte aufbläht und der Footer rechts
   aus dem Bild läuft. Ohne Überlauf ändert sich optisch nichts. */
.lp-footer-grid { display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap:24px; margin-bottom:36px; }
.lp-footer-brand { display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; margin-bottom:12px; }
.lp-footer-brand img { height:42px; width:auto; }
.lp-footer h4 { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.4); margin:0 0 14px; }
.lp-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lp-footer ul a { font-size:13px; color:rgba(255,255,255,.7); }
.lp-footer ul a:hover { color:#84d441; }
/* KI-Hinweis bewusst dauerhaft in Markengrün statt nur bei Hover — soll im
   Footer auffallen, nicht in der Masse der grauen Links untergehen. */
.lp-footer ul a.lp-footer-ai-link { color:#84d441; font-weight:700; }
.lp-footer ul a.lp-footer-ai-link:hover { color:#9ee85c; }
.lp-socials { display:flex; gap:10px; }
.lp-socials a { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.lp-socials a:hover { background:#84d441; color:#0a0f0a; }
.lp-footer-bottom { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); font-size:12px; color:rgba(255,255,255,.4); }
@media (max-width:820px) { .lp-footer-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .lp-footer-about { grid-column:1 / -1; } .lp-footer-about p { max-width:none !important; } }
.lp-footer ul a { overflow-wrap:break-word; word-break:break-word; }

/* ── Footer-Unterseiten (Impressum, Datenschutz, AGB, FAQ, ...) ──────── */
.lp-legal-card {
    max-width:820px; margin:0 auto; padding:44px 40px;
    background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter:blur(4px) saturate(130%); -webkit-backdrop-filter:blur(4px) saturate(130%);
    border:0.5px solid rgba(255,255,255,.22); border-radius:16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
}
.lp-legal-card h1 { font-size:30px; color:#fff; margin:0 0 28px; }
.lp-legal-body { font-size:15px; line-height:1.7; color:rgba(255,255,255,.78); }
.lp-legal-body h2 { font-size:19px; color:#fff; margin:32px 0 12px; }
.lp-legal-body h2:first-child { margin-top:0; }
.lp-legal-body h3 { font-size:15px; color:#84d441; margin:24px 0 8px; }
.lp-legal-body p { margin:0 0 14px; }
.lp-legal-body ul { margin:0 0 14px; padding-left:20px; }
.lp-legal-body li { margin-bottom:8px; }
.lp-legal-body a { color:#84d441; text-decoration:underline; text-underline-offset:2px; }
.lp-legal-body a:hover { color:#a8eb78; }
.lp-legal-body strong { color:#fff; }
@media (max-width:640px) { .lp-legal-card { padding:30px 22px; } .lp-legal-card h1 { font-size:24px; } }

/* FAQ-Akkordeon (nur auf faq.php aktiv — siehe inc/content-page-render.php) */
.faq-search-wrap { margin:0 0 24px; }
.faq-search-input {
    width:100%; padding:12px 16px; font-size:15px; color:#fff;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:10px;
}
.faq-search-input::placeholder { color:rgba(255,255,255,.4); }
.faq-search-input:focus { outline:none; border-color:#84d441; background:rgba(255,255,255,.09); }
.faq-no-results { color:rgba(255,255,255,.5); padding:12px 0; }
.faq-item { border-bottom:1px solid rgba(255,255,255,.1); }
.faq-item:first-child { border-top:1px solid rgba(255,255,255,.1); }
.faq-question {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:16px 4px; background:none; border:0; cursor:pointer; text-align:left;
    font-size:15px; font-weight:700; color:#84d441;
}
.faq-question:hover { color:#a8eb78; }
.faq-caret { flex-shrink:0; transition:transform .2s ease; color:rgba(255,255,255,.4); }
.faq-item.open .faq-caret { transform:rotate(180deg); }
.faq-answer { display:none; padding:0 4px 16px; }
.faq-item.open .faq-answer { display:block; }
.faq-item.faq-highlight { animation:faqHighlight 1.6s ease; }
@keyframes faqHighlight {
    0%   { background:rgba(132,212,65,.18); }
    100% { background:transparent; }
}