/* ── Hero ──────────────────────────────────────────── */
.pd-hero {
    position: relative;
    background: linear-gradient(135deg, #0F2544 0%, #1B3A6B 100%);
    padding: 100px 0 70px;
    text-align: center;
    overflow: hidden;
}
.pd-back-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.pd-back-link:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.pd-hero .lp-badge { position: relative; z-index: 1; }
.pd-hero .lp-badge-blue {
    background: rgba(201,169,97,.18);
    color: #E9D9AE;
    border: 1px solid rgba(201,169,97,.35);
}
.pd-hero h1 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 16px 0 14px;
    letter-spacing: -.02em;
}
.pd-hero-sub {
    position: relative;
    z-index: 1;
    font-size: 17px;
    color: rgba(255,255,255,.82);
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.6;
}
.pd-hero-btns {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Inhalt ────────────────────────────────────────── */
.pd-section { padding: 64px 0; background: #fff; }
.pd-narrow { max-width: 760px; }
.pd-block { margin-bottom: 40px; }
.pd-block:last-child { margin-bottom: 0; }
.pd-block h2 {
    font-size: 21px;
    font-weight: 800;
    color: #0F2544;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
}
.pd-block p {
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
    margin: 0;
}

/* ── Checklisten (Vorteile / Auf einen Blick) ─────────── */
.pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pd-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; color: #374151; }
.pd-check { color: #2E8B57; font-weight: 800; flex-shrink: 0; margin-top: 1px; }

/* ── FAQ (native <details>) ───────────────────────────── */
.pd-faq-item {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 4px 18px;
    margin-bottom: 10px;
    background: #FAFBFF;
}
.pd-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 700;
    color: #0F2544;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pd-faq-item summary::-webkit-details-marker { display: none; }
.pd-faq-item summary::after {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    color: #9CA3AF;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.pd-faq-item[open] summary::after { transform: rotate(45deg); }
.pd-faq-item p {
    font-size: 14px;
    line-height: 1.7;
    color: #4B5563;
    margin: 0 0 16px;
}

@media (max-width: 600px) {
    .pd-hero { padding: 80px 0 56px; }
    .pd-section { padding: 44px 0; }
}

/* ── Hero-Visual (Produktbild), vollstaendig im Banner ── */
.pd-hero-visual {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 44px auto 0;
}
.pd-hero-visual img {
    display: block;
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(4,14,32,.45);
}

/* ── Wieso / Hinweis / Vergleich ───────────────────── */
.pd-block-warum {
    padding: 26px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, #F5F7FB 0%, #EDF0F8 100%);
    border-left: 4px solid #C9A961;
}
.pd-block-warum h2 { margin-top: 0; }
.pd-block-warum p { margin-bottom: 0; }
.pd-hinweis {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(201,169,97,.1);
    border: 1px solid rgba(201,169,97,.3);
    color: #5a3e0a;
    font-size: 14px;
    line-height: 1.6;
}
.pd-list-konkret li { padding: 10px 12px; border-radius: 10px; background: #F8FAFD; border: 1px solid #E8EDF5; }
.pd-vergleich p { position: relative; padding: 16px 18px 16px 44px; border-radius: 12px; margin-bottom: 12px; }
.pd-vergleich p::before { position: absolute; left: 16px; top: 15px; font-weight: 800; }
.pd-vergleich-vorher { background: #F3F4F6; border: 1px solid #E5E7EB; color: #4B5563; }
.pd-vergleich-vorher::before { content: "✕"; color: #C0392B; }
.pd-vergleich-nachher { background: #EDF0F8; border: 1px solid #D3DBE8; color: #1A2744; }
.pd-vergleich-nachher::before { content: "✓"; color: #2E8B57; }
.pd-beispiel { padding: 22px 26px; border-radius: 16px; background: #0F2544; }
.pd-beispiel h2 { color: #E9D9AE; margin-top: 0; }
.pd-beispiel p { color: rgba(255,255,255,.85); margin-bottom: 0; }

/* ── Preis / Enthalten in ──────────────────────────── */
.pd-preis {
    padding: 28px 30px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #D3DBE8;
    border-top: 4px solid #C9A961;
    box-shadow: 0 8px 28px rgba(15,37,68,.07);
}
.pd-preis-label { margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6B7A93; font-weight: 700; }
.pd-preis-paket { margin: 0 0 12px; }
.pd-preis-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pd-preis-betrag { font-size: clamp(34px, 6vw, 46px); font-weight: 800; color: #0F2544; line-height: 1.1; }
.pd-preis-alt { font-size: 20px; color: #8A94A6; text-decoration: line-through; }
.pd-preis-einheit { font-size: 15px; color: #4B5563; }
.pd-preis-einstieg { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(201,169,97,.12); color: #5a3e0a; font-size: 14px; font-weight: 600; display: inline-block; }
.pd-preis-fakten { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; color: #374151; font-size: 15px; }
.pd-preis-fakten li::before { content: "✓"; color: #2E8B57; font-weight: 800; margin-right: 8px; }
.pd-preis-btns { margin-top: 20px; }

@media (max-width: 768px) {
    .pd-hero-visual { margin: 28px auto 0; }
}

/* ── Demo-Video ───────────────────────────────────────────── */
.pd-demo { padding: 8px 0 32px; }
.pd-demo h2 { margin: 0 0 16px; font-size: clamp(22px, 3vw, 30px); color: var(--lp-navy); }
.pd-demo-player {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(15,37,68,0.25);
}
/* Hoehe folgt dem Seitenverhaeltnis des Videos (bzw. des Vorschaubilds):
   kein festes 16:9 und kein schwarzer Hintergrund, sonst entstehen Balken. */
.pd-demo-player video { display: block; width: 100%; height: auto; background: transparent; }