/* P-V2 — Preisseiten-Redesign. Lädt NACH price.css und überschreibt gezielt.
   Scoped auf #pv2 + .pv2-sticky-bar, damit nichts anderes berührt wird. */

/* ---- Einstiegs-Treppe ---- */
#pv2 .pv2-ladder-section { padding-top: 18px; }
#pv2 .pv2-ladder-heading {
    text-align: center; font-size: 13px; letter-spacing: 1px;
    color: rgba(236, 229, 216, 0.65); margin: 0 0 12px; text-transform: uppercase;
}
#pv2 .pv2-ladder { display: flex; align-items: stretch; justify-content: center; gap: 8px; max-width: 720px; margin: 0 auto; }
#pv2 .pv2-step {
    flex: 1; max-width: 200px; text-align: center; padding: 10px 8px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(203, 180, 148, 0.25);
    border-radius: 10px;
}
#pv2 .pv2-step-accent { border-color: var(--color-gold, #cbb494); }
#pv2 .pv2-step-label { display: block; font-size: 12px; color: rgba(236, 229, 216, 0.65); }
#pv2 .pv2-step-value { display: block; font-size: 16px; color: #ece5d8; margin-top: 2px; }
#pv2 .pv2-step-accent .pv2-step-label { color: var(--color-gold, #cbb494); }
#pv2 .pv2-step-arrow { align-self: center; color: var(--color-gold, #cbb494); font-size: 16px; }

/* ---- Probestunden-Hero ---- */
#pv2 .pv2-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 720px; margin: 14px auto 0; padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-gold, #cbb494);
    border-radius: 12px;
}
#pv2 .pv2-hero-text { flex: 1 1 auto; min-width: 0; }
#pv2 .pv2-hero-title { font-size: 19px; color: #ece5d8; margin: 0; }
#pv2 .pv2-hero-sub { font-size: 13px; color: rgba(236, 229, 216, 0.7); margin: 4px 0 0; }
#pv2 .pv2-hero-btn {
    white-space: nowrap; flex: 0 0 auto;
    display: inline-block; width: auto; max-width: 280px;
    padding-left: 28px; padding-right: 28px;
}
.pv2-sticky-bar .pv2-sticky-btn { display: inline-block; width: auto; }

/* ---- Premium als einziger Held ---- */
#pv2 .plan-card.premium.pv2-hero-card { border: 2px solid var(--color-gold, #cbb494); }
#pv2 .plan-card.ultimate { border-width: 1px; }

/* ---- Jährlich-Hinweis ---- */
#pv2 .pv2-yearly-hint {
    text-align: center; font-size: 12px; color: rgba(236, 229, 216, 0.55);
    margin: 14px auto 0; max-width: 720px;
}

/* ---- Einzelstunde als gedimmter Anker ---- */
#pv2 .pv2-anchor { opacity: 0.62; }
#pv2 .pv2-anchor:hover { opacity: 0.85; }

/* ---- Sticky-Buchungsleiste (Mobile) ---- */
.pv2-sticky-bar {
    transition: transform 0.25s ease;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-gold, #cbb494);
}
.pv2-sticky-text { display: flex; flex-direction: column; line-height: 1.25; }
.pv2-sticky-title { font-size: 14px; font-weight: 600; color: #0c1510; }
.pv2-sticky-sub { font-size: 11px; color: rgba(12, 21, 16, 0.7); }
.pv2-sticky-btn {
    background: #0c1510 !important; border-color: #0c1510 !important;
    color: #ece5d8 !important; white-space: nowrap; flex-shrink: 0;
}
.pv2-sticky-bar.pv2-sticky-waiting { transform: translateY(110%); }
@media (min-width: 768px) { .pv2-sticky-bar { display: none; } }
/* Platz am Seitenende, damit die Leiste nichts verdeckt */
@media (max-width: 767.98px) { #pv2 { padding-bottom: 72px; } }

/* ---- Klickbare Treppe + Anker-Scroll ---- */
#pv2 .pv2-step { cursor: pointer; transition: border-color 0.15s ease; }
#pv2 .pv2-step:hover { border-color: var(--color-gold, #cbb494); }
#pv2-hero, #card-intro, #card-tenvisits, #pv2-mitgliedschaften { scroll-margin-top: 90px; }
#pv2 .pv2-hero-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---- PayPal-Modals im Seiten-Design (nur v2 — CSS lädt nur hier) ---- */
#body_prices .modal-content {
    background: #16281d; border: 1px solid var(--color-gold, #cbb494);
    border-radius: 12px; color: #ece5d8;
}
#body_prices .modal-content .text-dark,
#body_prices .modal-content .modal-title,
#body_prices .modal-content small { color: #ece5d8 !important; }
#body_prices .modal-header, #body_prices .modal-footer { border-color: rgba(203, 180, 148, 0.25); }
#body_prices .modal-content .close {
    color: #ece5d8; opacity: 0.8; text-shadow: none;
    background: transparent; border: 0; font-size: 22px;
}
#body_prices .modal-content input.input_cardMail {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(203, 180, 148, 0.4);
    color: #ece5d8; border-radius: 8px; padding: 9px 12px; width: 100%; margin: 12px 0;
}
#body_prices .modal-content input.input_cardMail::placeholder { color: #a8b5a8; }
#body_prices .modal-footer .btn-secondary {
    background: transparent; border: 1px solid rgba(203, 180, 148, 0.5); color: #d8cdb9;
}

/* ---- Jährlich als Unter-Option der 12-Monats-Wahl ---- */
#pv2 .billing-mode-switcher { display: flex; flex-wrap: wrap; gap: 6px; }
#pv2 .billing-mode-switcher .billing-mode-option { flex: 1 1 0; }
#pv2 .billing-mode-option.pv2-yearly-option {
    flex: 1 1 100%; width: 100%;
    display: flex; flex-direction: row; gap: 10px;
    align-items: center; justify-content: center;
    padding: 8px 12px; margin-top: 6px;
    border-style: dashed;
}
#pv2 .billing-mode-option.pv2-yearly-option .billing-mode-option__title { font-size: 13px; }
#pv2 .billing-mode-option.pv2-yearly-option .billing-mode-option__desc { font-size: 12px; }

/* ---- Lesbarkeit + Verdichtung (Feedback-Runde 1) ---- */
#pv2 .pv2-ladder-heading { font-size: 14px; color: #d8cdb9; }
#pv2 .pv2-step-label { font-size: 13px; color: #cfc4ae; }
#pv2 .pv2-step-value { font-size: 17px; }
#pv2 .pv2-hero-title { font-size: 21px; }
#pv2 .pv2-hero-sub { font-size: 14px; color: #d8cdb9; line-height: 1.5; }
#pv2 .pv2-toggle-note { text-align: center; font-size: 13px; color: #cfc4ae; margin: 10px 0 0; }
#pv2 .plan-features li { font-size: 14px; letter-spacing: 0.2px; }
#pv2 .plan-subtext { font-size: 13.5px; color: #d8cdb9; line-height: 1.5; }
#pv2 .billing-mode-option__title { font-size: 14px; }
#pv2 .billing-mode-option__desc { font-size: 12px; color: #cfc4ae; }
#pv2 .plan-card { margin-bottom: 14px; padding-top: 18px; padding-bottom: 18px; }
#pv2 .pricing-section { margin-bottom: 26px; }
#pv2 .pv2-yearly-hint { font-size: 13px; color: #cfc4ae; }
#pv2 .btn { font-size: 14px; letter-spacing: 1.5px; }

/* ---- Produkt-Finder (Guided Selling) ---- */
#pv2 .pv2-quiz { text-align: center; }
#pv2 .pv2-quiz-q { font-size: 15px; color: #ece5d8; margin: 0 0 10px; }
#pv2 .pv2-quiz-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#pv2 .pv2-chip {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(203, 180, 148, 0.45);
    color: #d8cdb9; border-radius: 999px; padding: 9px 16px; font-size: 13px; cursor: pointer;
}
#pv2 .pv2-chip.is-active { background: var(--color-gold, #cbb494); color: #0c1510; border-color: var(--color-gold, #cbb494); }
#pv2 .plan-card.pv2-recommended { border: 2px solid #e6c78f; }
#pv2 .pv2-reco-badge {
    display: inline-block; background: #e6c78f; color: #0c1510;
    font-size: 11px; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}

/* ---- Finder-Filter + FAQ-Klapper ---- */
.pv2-hidden { display: none !important; }
#pv2 .pv2-show-all {
    background: transparent; border: 1px dashed rgba(203, 180, 148, 0.5);
    color: #d8cdb9; border-radius: 999px; padding: 8px 18px; font-size: 13px;
    cursor: pointer; margin-top: 10px;
}
#pv2 .pv2-faq-collapsed > *:not(.section-title) { display: none; }
#pv2 .pv2-faq-collapsed .section-title { cursor: pointer; }
#pv2 .pv2-faq-collapsed .section-title::after { content: ' ▾'; color: #cbb494; }

/* ---- Countdown kompakt (mobil) ---- */
@media (max-width: 767.98px) {
    #pv2 .pv2-countdown { margin-bottom: 8px; }
    #pv2 .pv2-countdown * { font-size: 14px !important; padding-top: 4px; padding-bottom: 4px; }
    #pv2 .pv2-quiz-chips { gap: 6px; }
    #pv2 .pv2-chip { flex: 1 1 40%; padding: 10px 8px; }
}

/* ---- Mobile: eingeklappte Nebenprodukte (Tap-to-Expand) ---- */
#pv2 .pv2-collapsed { cursor: pointer; padding: 12px 14px; }
#pv2 .pv2-collapsed .plan-features,
#pv2 .pv2-collapsed form,
#pv2 .pv2-collapsed .plan-subtext,
#pv2 .pv2-collapsed .info-icon,
#pv2 .pv2-collapsed > .btn { display: none; }
#pv2 .pv2-collapsed .plan-top { margin: 0; align-items: center; }
#pv2 .pv2-collapsed::after {
    content: '▾ Antippen für Details';
    display: block; font-size: 11px; color: #a8b5a8; margin-top: 6px;
}

/* ---- Mobile: Dekorations-Diät — weniger Elemente vor dem ersten Produkt ---- */
#pv2 .pv2-ladder-line { display: none; }
@media (max-width: 767.98px) {
    #pv2 .pv2-ladder { display: none; }
    #pv2 .pv2-ladder-line { display: block; text-align: center; font-size: 13px; color: #d8cdb9; margin: 0; }
    #pv2 .pv2-ladder-heading { margin-bottom: 4px; }
    #pv2 .section-title { font-size: 13px; letter-spacing: 3px; opacity: 0.75; margin-bottom: 8px; }
    #pv2 .pv2-yearly-hint { display: none; }
    #pv2 .pv2-toggle-note { font-size: 11px; margin-top: 6px; }
    #pv2 .pv2-quiz-q { font-size: 16px; }
}

/* ---- Mobile-Feinschliff ---- */
@media (max-width: 767.98px) {
    #pv2 .pv2-ladder { gap: 4px; }
    #pv2 .pv2-step { padding: 8px 4px; }
    #pv2 .pv2-step-label { font-size: 11px; }
    #pv2 .pv2-step-value { font-size: 13px; }
    #pv2 .pv2-hero { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
    #pv2 .pv2-hero-btn { width: 100%; max-width: none; }
    #pv2 .pv2-hero-actions { width: 100%; flex-direction: column; }

    /* Verdichtung: kleinere Titel, engere Abstände, kompakte Karten */
    #pv2 .section-title { font-size: 20px; letter-spacing: 2px; margin-bottom: 10px; }
    #pv2 .pricing-section { margin-bottom: 16px; }
    #pv2 .plan-card { padding: 14px; margin-bottom: 10px; }
    #pv2 .pv2-hero-title { font-size: 19px; }
    #pv2 .pv2-hero-sub { font-size: 13px; }

    /* Zahlweise: zwei Hauptoptionen nebeneinander, Beschreibungen weg, Jährlich als schmale Zeile */
    #pv2 .billing-mode-option { padding: 9px 6px; }
    #pv2 .billing-mode-option__desc { display: none; }
    #pv2 .billing-mode-option.pv2-yearly-option { padding: 7px 10px; }
    #pv2 .billing-mode-option.pv2-yearly-option .billing-mode-option__title { font-size: 12px; }
    #pv2 .pv2-toggle-note { font-size: 12px; margin-top: 8px; }
}


/* ---- H-V2 Runde 8: Cookie-Banner rueckt UEBER die Deal-Leiste (beide sichtbar).
   !important noetig: der Banner traegt Inline-Styles. Nur mobil — Desktop hat keine Leiste. ---- */
@media (max-width: 767.98px) {
    #wy-consent {
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        left: 8px !important; right: 8px !important; width: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    }
}

/* ==== GLASSMORPHISM-LAYER (Owner-Entscheid 07.07.) — Append-only Override.
   Milchglas über dem Dschungel-Hintergrund des Layouts. Fallback via @supports. ==== */

#pv2 .plan-card, #pv2 .cardBox {
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
}
#pv2 .plan-card.premium.pv2-hero-card, #pv2 .plan-card.pv2-recommended {
    background: rgba(201, 165, 117, 0.10);
    border: 1.5px solid rgba(216, 185, 138, 0.75);
}
#pv2 .pv2-hero {
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(216, 185, 138, 0.55); border-radius: 16px;
}
#pv2 .pv2-step {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 12px;
}
#pv2 .pv2-step-accent { border-color: rgba(216, 185, 138, 0.7); }
#pv2 .billing-mode-switcher .billing-mode-option {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.13);
}
#pv2 .billing-mode-option.is-active {
    background: rgba(201, 165, 117, 0.16);
    border-color: rgba(216, 185, 138, 0.8);
}
#pv2 .pv2-chip {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
#pv2 .pv2-chip.is-active { background: linear-gradient(135deg, #d8b98a, #c9a575); border-color: transparent; }
#pv2 .btn-solid, #pv2 .pv2-hero-btn.btn-solid {
    /* !important noetig: price.css setzt .btn-solid-Farben selbst mit !important */
    background: linear-gradient(135deg, #d8b98a, #c9a575) !important;
    border-color: transparent !important; color: #14200f !important;
}
.pv2-sticky-bar {
    background: rgba(22, 36, 26, 0.62);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.pv2-sticky-bar .pv2-sticky-title { color: #f2ecdf; }
.pv2-sticky-bar .pv2-sticky-sub { color: rgba(236, 229, 216, 0.65); }
.pv2-sticky-bar .pv2-sticky-btn {
    background: linear-gradient(135deg, #d8b98a, #c9a575) !important;
    border-color: transparent !important; color: #14200f !important;
}
#body_prices .modal-content {
    background: rgba(22, 36, 26, 0.72);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border: 1px solid rgba(216, 185, 138, 0.5); border-radius: 16px;
}
/* Fallback: Browser ohne backdrop-filter kriegen dichtere Flächen (lesbar bleibt Pflicht) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #pv2 .plan-card, #pv2 .cardBox, #pv2 .pv2-hero { background: rgba(18, 30, 22, 0.92); }
    #pv2 .pv2-step, #pv2 .billing-mode-switcher .billing-mode-option, #pv2 .pv2-chip { background: rgba(18, 30, 22, 0.88); }
    .pv2-sticky-bar, #body_prices .modal-content { background: rgba(14, 24, 17, 0.96); }
}
/* Mobile: Blur reduzieren (GPU-Last), max. Glas-Ebenen beachten */
@media (max-width: 767.98px) {
    #pv2 .plan-card, #pv2 .cardBox, #pv2 .pv2-hero { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    #pv2 .pv2-step, #pv2 .billing-mode-switcher .billing-mode-option, #pv2 .pv2-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 33, 24, 0.82); }
}