/* =============================================================================
   Preisseite v4 (Owner 27.07.2026) — reine Optik-Ebene ueber price.css,
   price-v2.css und price-v3.css. Greift NUR bei #pv2.pv4.
   Schalter: site_vars.prices_v4. Struktur, Reihenfolge, Preise, PayPal-Flows
   und die Kaufhistorie-Logik bleiben unangetastet.
   Sprache identisch zu Kursplan und Check-in: Cinzel fuer Ueberschriften,
   Jost fuer Text, Gold als einzige Akzentfarbe, Glas statt Volltonkarten.
   ========================================================================== */
#pv2.pv4{
  --p4-bone:#f4f1ea;
  --p4-gold:var(--color-gold,#cbb494);
  --p4-gold-soft:#d8b98a;
  --p4-hair:rgba(244,241,234,.13);
  --p4-gold-hair:rgba(203,180,148,.28);
  --p4-t2:rgba(244,241,234,.64);
  --p4-t3:rgba(244,241,234,.42);
  font-family:var(--font-sans,'Jost',sans-serif);
}

/* ---------- Ueberschriften ---------- */
#pv2.pv4 .pv3-eyebrow{
  font:700 9.5px/1 var(--font-sans,'Jost',sans-serif);
  letter-spacing:.22em;text-transform:uppercase;color:var(--p4-gold);
  margin:0 0 10px;opacity:1;
}
#pv2.pv4 .section-title,
#pv2.pv4 .pv3-step-title{
  font:400 clamp(21px,5vw,27px)/1.25 var(--font-serif,'Cinzel',Georgia,serif);
  letter-spacing:.5px;text-transform:none;color:var(--p4-bone);opacity:1;
  margin:0 0 1.3rem;
}

/* ---------- Karten als Glas ---------- */
#pv2.pv4 .plan-card,
#pv2.pv4 .cardBox{
  background:rgba(244,241,234,.05);
  border:1px solid var(--p4-gold-hair);
  border-radius:20px;
  padding:22px 20px;
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  position:relative;overflow:hidden;
}
#pv2.pv4 .plan-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(203,180,148,.45),transparent);
}
#pv2.pv4 .plan-card.premium.pv2-hero-card,
#pv2.pv4 .plan-card.pv2-recommended{
  border:1px solid rgba(203,180,148,.55);
  box-shadow:0 16px 44px rgba(0,0,0,.36), 0 0 0 1px rgba(203,180,148,.10);
}
#pv2.pv4 .plan-card.premium.pv2-hero-card::before,
#pv2.pv4 .plan-card.pv2-recommended::before{
  background:linear-gradient(90deg,transparent,rgba(216,185,138,.85),transparent);
}

/* ---------- Karteninhalt ---------- */
#pv2.pv4 .plan-name{
  font:600 15px/1.2 var(--font-sans,'Jost',sans-serif);
  letter-spacing:.12em;text-transform:uppercase;color:var(--p4-bone);margin:0;
}
#pv2.pv4 .plan-features li{
  font-size:13.5px;line-height:1.7;color:var(--p4-t2);letter-spacing:0;
}
#pv2.pv4 .plan-subtext{font-size:12.5px;line-height:1.55;color:var(--p4-t3)}
#pv2.pv4 .info-icon{border-color:var(--p4-gold-hair);color:var(--p4-t3)}

/* ---------- Preis in drei Ebenen ---------- */
#pv2.pv4 .price-row{display:flex;align-items:baseline;gap:9px;justify-content:flex-end}
#pv2.pv4 .plan-price{
  font:800 30px/1 var(--font-sans,'Jost',sans-serif);
  letter-spacing:-.02em;color:var(--p4-bone);
}
#pv2.pv4 .old-price{
  font-size:15px;color:var(--p4-t3);text-decoration:line-through;font-weight:500;
}
#pv2.pv4 .offer-badge{
  display:inline-block;font:700 9px/1 var(--font-sans,'Jost',sans-serif);
  letter-spacing:.16em;text-transform:uppercase;color:#241a09;
  background:linear-gradient(135deg,#d8b98a,#c9a575);
  border-radius:999px;padding:5px 10px;margin-bottom:8px;border:0;
}

/* ---------- Die Treppe ---------- */
#pv2.pv4 .pv3-path{border:1px solid var(--p4-hair);border-radius:18px;overflow:hidden;background:rgba(244,241,234,.03)}
#pv2.pv4 .pv3-path::before{display:none}
#pv2.pv4 .pv3-path-step{
  display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;
  padding:15px 16px;border:0;border-radius:0;background:none;
}
#pv2.pv4 .pv3-path-step + .pv3-path-step{border-top:1px solid var(--p4-hair)}
#pv2.pv4 .pv3-path-step.is-accent{background:rgba(203,180,148,.07)}
#pv2.pv4 .pv3-path-num{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--p4-gold-hair);background:none;color:var(--p4-gold);
  font:700 12px/1 var(--font-sans,'Jost',sans-serif);
}
#pv2.pv4 .pv3-path-step.is-accent .pv3-path-num{background:rgba(203,180,148,.16);border-color:var(--p4-gold)}
#pv2.pv4 .pv3-path-label{font-size:14.5px;font-weight:600;color:var(--p4-bone)}
#pv2.pv4 .pv3-path-value{font-size:12.5px;color:var(--p4-t2);font-weight:500}

/* ---------- Buttons: Optik der Seite behalten, nur Form angleichen ---------- */
#pv2.pv4 .plan-card .btn{
  border-radius:999px;padding:14px 22px;font-weight:700;font-size:14.5px;letter-spacing:0;
  font-family:var(--font-sans,'Jost',sans-serif);
}
#pv2.pv4 .pv3-anchor-link{color:var(--p4-t3);font-size:12.5px}

/* ---------- FAQ ---------- */
#pv2.pv4 .section-faq-prices .section-title{margin-bottom:1rem}

@media (max-width:600px){
  #pv2.pv4 .plan-card,#pv2.pv4 .cardBox{padding:18px 16px;border-radius:18px}
  #pv2.pv4 .plan-price{font-size:27px}
  #pv2.pv4 .pv3-path-step{padding:13px 13px;gap:10px}
}

/* =============================================================================
   v4 — Teil 2 (Owner 27.07.2026): Preis pro Kurs als Goldpille, Preistypografie,
   Mitgliedschafts-Umschalter, Vergleichszeilen, Sticky mit Produkt und Preis.
   ========================================================================== */

/* ---------- Preis: eine Ebene groesser, eine Ebene ruhiger ---------- */
#pv2.pv4 .plan-price{
  font:800 clamp(30px,8vw,38px)/1 var(--font-sans,'Jost',sans-serif);
  letter-spacing:-.03em;color:var(--p4-bone);
}
#pv2.pv4 .plan-price .price-period{
  font-size:12.5px;font-weight:500;color:var(--p4-t3);letter-spacing:0;margin-left:3px;
}

/* ---------- Preis pro Kurs: das einzige goldene Element im Preisblock ---------- */
#pv2.pv4 .p4-cpp{
  display:inline-block;margin:6px 0 4px;
  font:700 12px/1 var(--font-sans,'Jost',sans-serif);letter-spacing:.01em;
  color:#241a09;background:linear-gradient(135deg,#d8b98a,#c9a575);
  border-radius:999px;padding:5px 11px;white-space:nowrap;
}
#pv2.pv4 .plan-subtext{margin-top:2px}

/* ---------- Umschalter: eine Frage statt drei Karten ----------
   Progressive Enhancement: .p4-live setzt prices-v4.js. Ohne JS bleibt die
   Seite exakt im alten Zustand — drei Karten, Ultimate-Aufklapper, kein
   Umschalter. Kein Zustand, in dem ein Produkt unerreichbar ist. */
#pv2.pv4 .p4-seg,
#pv2.pv4 .p4-seg-q{display:none}
#pv2.pv4.p4-live .p4-seg{display:grid}
#pv2.pv4.p4-live .p4-seg-q{display:block}

#pv2.pv4 .p4-seg-q{
  text-align:center;margin:26px 0 10px;
  font:400 clamp(18px,4.6vw,22px)/1.3 var(--font-serif,'Cinzel',Georgia,serif);
  letter-spacing:.4px;color:var(--p4-bone);
}
#pv2.pv4 .p4-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  background:rgba(244,241,234,.05);border:1px solid var(--p4-hair);
  border-radius:16px;padding:3px;margin:0 auto 16px;max-width:520px;
}
#pv2.pv4 .p4-seg-b{
  appearance:none;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 4px;border-radius:13px;color:var(--p4-t2);
  font-family:var(--font-sans,'Jost',sans-serif);transition:background .18s ease,color .18s ease;
}
#pv2.pv4 .p4-seg-t{font-size:13px;font-weight:600;line-height:1.2}
#pv2.pv4 .p4-seg-s{font-size:10px;font-weight:500;color:var(--p4-t3);letter-spacing:.02em;line-height:1.2}
#pv2.pv4 .p4-seg-b.is-on{
  background:rgba(203,180,148,.20);color:var(--p4-bone);
  box-shadow:inset 0 0 0 1px rgba(203,180,148,.42);
}
#pv2.pv4 .p4-seg-b.is-on .p4-seg-s{color:rgba(244,241,234,.62)}

/* Umgeschaltete Karten bleiben im DOM (Formulare, Preis-Logik), nur unsichtbar. */
#pv2.pv4.p4-live .plan-card.p4-off{display:none !important}

/* Der alte Ultimate-Aufklapper waere jetzt ein zweiter Weg zum selben Ziel.
   Bleibt im DOM, damit prices3-v3-page.js unveraendert weiterlaeuft. */
#pv2.pv4.p4-live .pv3-ultimate-toggle{display:none !important}

/* Umgeschaltete Karte bekommt die Hero-Auszeichnung, egal welche es ist. */
#pv2.pv4.p4-live #pv3-mitgliedschaften .plan-card:not(.p4-off){
  border:1px solid rgba(203,180,148,.5);
  box-shadow:0 18px 46px rgba(0,0,0,.4),0 0 0 1px rgba(203,180,148,.10);
}

/* ---------- Vergleichszeile: ein Satz, eine Zahl ---------- */
#pv2.pv4 .p4-cmp{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;padding:11px 13px;border:1px solid var(--p4-hair);border-radius:13px;
  background:rgba(244,241,234,.025);
  font:500 11.5px/1.4 var(--font-sans,'Jost',sans-serif);color:var(--p4-t3);
}
#pv2.pv4 .p4-cmp b{color:var(--p4-t2);font-weight:700;white-space:nowrap}

/* ---------- Sticky: Produkt und Preis, nicht nur ein Button ----------
   Die Leiste liegt ausserhalb von #pv2; die Klasse setzt prices-v4.js. */
.pv4-sticky .pv2-sticky-title{
  font:700 14.5px/1.25 var(--font-sans,'Jost',sans-serif);letter-spacing:0;
  color:#f4f1ea;
}
.pv4-sticky .pv2-sticky-sub{
  font:500 11.5px/1.4 var(--font-sans,'Jost',sans-serif);
  color:rgba(244,241,234,.42);letter-spacing:0;
}
.pv4-sticky .pv2-sticky-btn{
  border-radius:999px;font-family:var(--font-sans,'Jost',sans-serif);font-weight:700;
}

@media (max-width:600px){
  #pv2.pv4 .p4-seg{max-width:none}
  #pv2.pv4 .p4-seg-t{font-size:12.5px}
  #pv2.pv4 .p4-cmp{font-size:11px;padding:10px 12px}
}

/* =============================================================================
   v4 — Teil 3 (Owner 27.07.2026): Ticket-Register.
   Vier Motive aus courseplan-v3.css und checkin-sheet-v3.css, hier auf die
   Preiskarten uebertragen: Anzeigetafel-Leiste, gestrichelte Linie mit Label,
   Faktenraster (= cs-facts), Abrisskante (= cs-tear).
   Die Reihenfolge macht order, nicht die Quelltext-Position — dadurch steht der
   neue Blade-Block je Karte an EINER Stelle und Formulare, Preis-Boxen und die
   Info-Popups bleiben unangetastet.
   ========================================================================== */

/* ---------- Karte wird zum Ticket ---------- */
#pv2.pv4.p4-live .plan-card{
  display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:14px;
  position:relative;overflow:hidden;
  border-radius:20px;padding:18px 17px 16px;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(203,180,148,.08),transparent 60%),
    rgba(16,21,18,.72);
}
#pv2.pv4.p4-live .plan-card > *{grid-column:1 / -1;min-width:0}
/* plan-top loest sich auf, damit Name und Preisblock frei sortierbar werden */
#pv2.pv4.p4-live .plan-card .plan-top{display:contents}
#pv2.pv4.p4-live .plan-card .plan-left{order:1;grid-column:1 / -1;min-width:0}
#pv2.pv4.p4-live .plan-card .plan-features{display:none}
#pv2.pv4.p4-live .plan-card .p4-eyebrow{order:0}
#pv2.pv4.p4-live .plan-card .p4-ln{order:2}
#pv2.pv4.p4-live .plan-card .p4-facts{order:3}
#pv2.pv4.p4-live .plan-card .p4-tear{order:4}
#pv2.pv4.p4-live .plan-card .plan-right{order:5;grid-column:1;text-align:left;min-width:0}
#pv2.pv4.p4-live .plan-card > form,
#pv2.pv4.p4-live .plan-card > .btn{order:6;grid-column:2;align-self:end;margin:0}
#pv2.pv4.p4-live .plan-card .p4-cmp{order:7}
#pv2.pv4.p4-live .plan-card .pv3-anchor-line{order:8}
#pv2.pv4.p4-live .plan-card [data-pp-message]{order:8}
#pv2.pv4.p4-live .plan-card .info-popup{order:9}

/* Name im Tafel-Register */
#pv2.pv4.p4-live .plan-title-group{display:flex;align-items:center;gap:9px}
#pv2.pv4.p4-live .plan-name{
  font:400 19px/1.2 var(--font-serif,'Cinzel',Georgia,serif);
  letter-spacing:.09em;text-transform:uppercase;color:var(--p4-bone);margin:0;
}
#pv2.pv4 .p4-eyebrow{
  font:700 9px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--p4-gold);
}

/* ---------- Gestrichelte Linie mit Label (= cs-route) ---------- */
#pv2.pv4 .p4-ln{display:flex;align-items:center;gap:10px;margin-top:14px}
#pv2.pv4 .p4-ln .l{
  flex:1 1 auto;min-width:10px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(244,241,234,.3) 0 4px,transparent 4px 9px);
}
#pv2.pv4 .p4-ln .c{
  font:600 9px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p4-gold);white-space:nowrap;
}

/* ---------- Faktenraster (= cs-facts) ---------- */
#pv2.pv4 .p4-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}
#pv2.pv4 .p4-facts .k{
  font:700 9px/1.2 var(--font-sans,'Jost',sans-serif);
  letter-spacing:.12em;text-transform:uppercase;color:var(--p4-t3);
}
#pv2.pv4 .p4-facts .v{
  font:700 15px/1 var(--font-sans,'Jost',sans-serif);
  margin-top:6px;font-variant-numeric:tabular-nums;color:var(--p4-bone);
}
#pv2.pv4 .p4-facts .v.g{color:var(--p4-gold-soft)}
#pv2.pv4 .p4-facts .v small{font-size:10.5px;font-weight:600;color:var(--p4-t3);margin-left:2px}

/* ---------- Abrisskante (= cs-tear) ---------- */
#pv2.pv4 .p4-tear{position:relative;height:20px;margin:16px -17px 6px}
#pv2.pv4 .p4-tear::before{
  content:'';position:absolute;left:14px;right:14px;top:9px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(244,241,234,.32) 0 5px,transparent 5px 11px);
}
#pv2.pv4 .p4-tear::after{
  content:'';position:absolute;left:-11px;right:-11px;top:0;height:20px;
  background:
    radial-gradient(circle at 0 10px,#0b0f0c 10px,transparent 10.5px),
    radial-gradient(circle at 100% 10px,#0b0f0c 10px,transparent 10.5px);
}

/* ---------- Preisfuss ---------- */
#pv2.pv4.p4-live .price-row{justify-content:flex-start}
#pv2.pv4.p4-live .plan-price{font-size:clamp(28px,8.5vw,34px)}
#pv2.pv4.p4-live .plan-subtext{
  font:500 10.5px/1.5 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.03em;color:var(--p4-t3);margin-top:7px;
}
/* Der Kurspreis steht jetzt im Faktenraster — die Pille daneben waere doppelt. */
#pv2.pv4.p4-live .p4-cpp{
  background:none;color:var(--p4-t3);padding:0;margin:0;font:inherit;border-radius:0;
}
#pv2.pv4.p4-live .plan-card .btn{width:100%;white-space:nowrap}
#pv2.pv4.p4-live .recommend-badge,
#pv2.pv4.p4-live .offer-badge{margin-bottom:9px}

@media (max-width:380px){
  /* Auf sehr schmalen Geraeten reicht die Breite fuer Preis + Knopf nebeneinander nicht. */
  #pv2.pv4.p4-live .plan-card{grid-template-columns:1fr}
  #pv2.pv4.p4-live .plan-card .plan-right,
  #pv2.pv4.p4-live .plan-card > form,
  #pv2.pv4.p4-live .plan-card > .btn{grid-column:1 / -1}
  #pv2.pv4.p4-live .plan-card > form,
  #pv2.pv4.p4-live .plan-card > .btn{margin-top:12px}
  #pv2.pv4 .p4-facts{gap:8px}
  #pv2.pv4 .p4-facts .v{font-size:14px}
}

/* =============================================================================
   v4 — Teil 4 (Owner 27.07.2026): Korrekturen nach dem ersten Live-Blick.
   (a) Preisfuss auf eine Spalte — die Knopfspalte zog sich auf ihre Textbreite
       und quetschte Preis und Kleingedrucktes in eine 6-zeilige Saeule.
   (b) Info-Icon, Empfehlungs-Badge, personalisierter Hero, Zahlweise-Band,
       Trust-Zeile und FAQ in dieselbe Sprache geholt.
   ========================================================================== */

/* ---------- (a) Preisfuss: Preis oben, Knopf voll breit darunter ---------- */
#pv2.pv4.p4-live .plan-card{grid-template-columns:1fr}
#pv2.pv4.p4-live .plan-card .plan-right{grid-column:1 / -1}
#pv2.pv4.p4-live .plan-card > form,
#pv2.pv4.p4-live .plan-card > .btn{grid-column:1 / -1;margin-top:14px}
#pv2.pv4.p4-live .plan-card .plan-subtext{max-width:none}

/* ---------- Info-Icon: kleiner Kreis mit Fragezeichen ---------- */
#pv2.pv4 .info-icon{
  width:18px;height:18px;min-width:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--p4-gold-hair) !important;background:none !important;
  color:var(--p4-gold) !important;
  font:700 10px/1 var(--font-sans,'Jost',sans-serif) !important;
  text-indent:0 !important;flex:0 0 auto;cursor:pointer;padding:0;
}

/* ---------- Empfehlungs-/Angebots-Badge ---------- */
#pv2.pv4.p4-live .recommend-badge,
#pv2.pv4.p4-live .offer-badge{
  display:inline-block !important;width:auto !important;
  font:700 8.5px/1 ui-monospace,'SF Mono',Menlo,monospace !important;
  letter-spacing:.16em;text-transform:uppercase;
  color:#241a09 !important;background:linear-gradient(135deg,#d8b98a,#c9a575) !important;
  border:0 !important;border-radius:999px;padding:5px 10px;margin:0 0 11px;text-align:center;
}

/* ---------- Personalisierter Hero ---------- */
#pv2.pv4 .pv2-hero{
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
  border:1px solid var(--p4-gold-hair);border-radius:20px;padding:18px 17px;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(203,180,148,.09),transparent 60%),
    rgba(16,21,18,.72);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  position:relative;overflow:hidden;
}
#pv2.pv4 .pv2-hero::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,185,138,.7),transparent);
}
#pv2.pv4 .pv2-hero-title{
  font:400 19px/1.3 var(--font-serif,'Cinzel',Georgia,serif);
  letter-spacing:.4px;color:var(--p4-bone);margin:0;
}
#pv2.pv4 .pv2-hero-sub{
  font:400 12.5px/1.6 var(--font-sans,'Jost',sans-serif);
  color:var(--p4-t2);margin:9px 0 0;
}
#pv2.pv4 .pv2-hero-btn{
  width:100%;border-radius:999px;padding:13px 20px;
  font:700 14px/1 var(--font-sans,'Jost',sans-serif);letter-spacing:0;text-transform:none;
}

/* ---------- Zahlweise als Band, gleiche Grammatik wie der Umschalter ---------- */
#pv2.pv4 .billing-mode-switcher{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#pv2.pv4 .billing-mode-option{
  position:relative;overflow:hidden;flex:none;
  border:1px solid var(--p4-hair);border-radius:12px;padding:11px 8px;
  background:rgba(244,241,234,.03);text-align:center;
}
#pv2.pv4 .billing-mode-option::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:rgba(244,241,234,.10);
}
#pv2.pv4 .billing-mode-option__title{
  font:600 11.5px/1.25 var(--font-sans,'Jost',sans-serif) !important;
  letter-spacing:.01em;text-transform:none;color:var(--p4-t2);
}
#pv2.pv4 .billing-mode-option__desc{
  display:block !important;margin-top:5px;
  font:600 8.5px/1.2 ui-monospace,'SF Mono',Menlo,monospace !important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--p4-t3) !important;
}
#pv2.pv4 .billing-mode-option.is-active{border-color:rgba(203,180,148,.5);background:rgba(203,180,148,.10)}
#pv2.pv4 .billing-mode-option.is-active::before{background:linear-gradient(90deg,#d8b98a,#c9a575)}
#pv2.pv4 .billing-mode-option.is-active .billing-mode-option__title{color:var(--p4-bone)}
#pv2.pv4 .pv3-yearly-link{
  display:block;width:100%;margin-top:9px;padding:9px 8px;border:0;background:none;
  font:500 11px/1.4 var(--font-sans,'Jost',sans-serif);color:var(--p4-t3);text-decoration:underline;
}
#pv2.pv4 .pv2-toggle-note{
  font:500 9.5px/1.6 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--p4-t3);margin:9px 0 0;text-align:center;
}

/* ---------- Trust-Zeile (Inline-Styles im Partial, deshalb !important) ---------- */
#pv2.pv4 .warung-trust{
  background:rgba(244,241,234,.03) !important;
  border:1px solid var(--p4-hair) !important;
  border-radius:14px !important;
  padding:13px 16px !important;
  gap:7px 12px !important;
  max-width:520px !important;
  font-family:ui-monospace,'SF Mono',Menlo,monospace !important;
  font-size:9.5px !important;letter-spacing:.13em;text-transform:uppercase;
  color:var(--p4-t3) !important;
}
#pv2.pv4 .warung-trust a{
  color:var(--p4-t2) !important;font-weight:600 !important;font-size:9.5px !important;
  font-family:ui-monospace,'SF Mono',Menlo,monospace !important;letter-spacing:.13em;
}
#pv2.pv4 .warung-trust a > span{font-weight:600 !important;opacity:1 !important}
#pv2.pv4 .warung-trust a > span:first-child{
  color:var(--p4-gold) !important;font-size:11px !important;letter-spacing:2px !important;
}
#pv2.pv4 .warung-trust i{font-size:12px !important;color:var(--p4-gold) !important}

/* ---------- FAQ ---------- */
#pv2.pv4 .section-faq-prices .section-title{margin-bottom:.6rem}
#pv2.pv4 #faq.wy-faq-accordion{
  border:1px solid var(--p4-hair);border-radius:18px;
  background:rgba(244,241,234,.028);padding:0 16px;max-width:560px;
}
#pv2.pv4 #faq.wy-faq-accordion .faq-item{border-bottom:1px solid var(--p4-hair)}
#pv2.pv4 #faq.wy-faq-accordion .faq-item:last-child{border-bottom:0}
#pv2.pv4 #faq.wy-faq-accordion .faq_question{
  font:600 13px/1.45 var(--font-sans,'Jost',sans-serif);
  color:var(--p4-bone);padding:15px 0;gap:14px;
}
#pv2.pv4 #faq.wy-faq-accordion .faq_answer-inner{
  font:400 12.5px/1.7 var(--font-sans,'Jost',sans-serif);
  color:var(--p4-t2);padding:0 0 16px;
}
#pv2.pv4 #faq.wy-faq-accordion .faq_answer-inner strong{color:var(--p4-gold);font-weight:700}
#pv2.pv4 #faq.wy-faq-accordion .faq-item.open .faq_answer{max-height:1400px}

/* =============================================================================
   v4 — Teil 5 (Owner 27.07.2026): gegen die ECHTE Basis-CSS getestet.
   Die drei Ursachen, die im Nachbau nicht sichtbar waren:
   - price.css @media (max-width:768px): .plan-right{flex:0 0 42%;max-width:42%;
     text-align:right} deckelt den Preisblock auf 42% Kartenbreite. Das war der
     leere Platz rechts, nicht die Rasterspalte.
   - .popular-badge ist ein eigenes Element (nicht .recommend-badge) und lief
     als Vollbreiten-Balken durch.
   - prices3-v3-page.js setzt #section_faq auf .pv2-faq-collapsed. Die einzelnen
     Fragen aufzuklappen bringt nichts, solange die Sektion zu ist (Teil im JS).
   ========================================================================== */

/* ---------- Preisblock volle Breite, linksbuendig ---------- */
#pv2.pv4.p4-live .plan-card .plan-right{
  flex:none !important;width:100% !important;max-width:none !important;
  align-items:flex-start !important;text-align:left !important;
  border-top:0 !important;padding-top:0 !important;
}
#pv2.pv4.p4-live .plan-card .price-row,
#pv2.pv4.p4-live .plan-card .plan-subtext,
#pv2.pv4.p4-live .plan-card .price-equiv{
  justify-content:flex-start !important;text-align:left !important;width:100%;
}
#pv2.pv4.p4-live .plan-card .plan-top{margin-bottom:0}

/* ---------- Beliebt-Balken wird zur Pille ---------- */
#pv2.pv4.p4-live .popular-badge{
  order:-1;justify-self:start;display:inline-block !important;width:auto !important;
  font:700 8.5px/1 ui-monospace,'SF Mono',Menlo,monospace !important;
  letter-spacing:.16em;text-transform:uppercase;
  color:#241a09 !important;background:linear-gradient(135deg,#d8b98a,#c9a575) !important;
  border:0 !important;border-radius:999px;padding:5px 10px;margin:0 0 12px;
  position:static !important;transform:none !important;text-align:center;
}
#pv2.pv4.p4-live .recommend-badge,
#pv2.pv4.p4-live .offer-badge{justify-self:start;align-self:flex-start}

/* ---------- Personalisierter Hero als Ticket ---------- */
#pv2.pv4 .pv2-hero-text{position:relative}
#pv2.pv4 .pv2-hero-text::before{
  content:'Dein Status';display:block;margin-bottom:10px;
  font:700 9px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--p4-gold);
}
#pv2.pv4 .pv2-hero-text::after{
  content:'';display:block;height:1px;margin:14px 0 0;
  background:repeating-linear-gradient(90deg,rgba(244,241,234,.3) 0 4px,transparent 4px 9px);
}

/* =============================================================================
   v4 — Teil 6 (Owner 27.07.2026): die drei letzten Abweichungen zum
   freigegebenen v6-Mockup.
   1. Zahlweise lief als Band aus Einzelkacheln, der Umschalter darunter als
      Segmented Control mit gemeinsamem Rahmen. Jetzt beide gleich gebaut.
   2. Preis und Knopf standen untereinander. Im Mockup: Preis links, Knopf
      rechts. Der Knopf darf umbrechen, statt die Preisspalte zu quetschen —
      das war der Grund fuer das Stapeln in Teil 4.
   3. Das Kleingedruckte zeigte den Kurspreis doppelt (Raster + Zeile).
   ========================================================================== */

/* ---------- 1. Zahlweise wie der Umschalter ---------- */
#pv2.pv4 .billing-mode-switcher{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  background:rgba(244,241,234,.05);border:1px solid var(--p4-hair);
  border-radius:16px;padding:3px;max-width:520px;margin:0 auto;
}
#pv2.pv4 .billing-mode-option{
  border:0 !important;background:none !important;border-radius:13px;
  padding:10px 4px;text-align:center;overflow:visible;box-shadow:none;
}
#pv2.pv4 .billing-mode-option::before{display:none}
#pv2.pv4 .billing-mode-option.is-active{
  background:rgba(203,180,148,.20) !important;
  box-shadow:inset 0 0 0 1px rgba(203,180,148,.42);
}
#pv2.pv4 .billing-mode-option__title{
  font:600 13px/1.2 var(--font-sans,'Jost',sans-serif) !important;
  color:var(--p4-t2);text-transform:none;letter-spacing:0;
}
#pv2.pv4 .billing-mode-option__desc{
  display:block !important;margin-top:2px;
  font:500 9.5px/1.2 var(--font-sans,'Jost',sans-serif) !important;
  letter-spacing:.02em;text-transform:none;color:var(--p4-t3) !important;
}
#pv2.pv4 .billing-mode-option.is-active .billing-mode-option__title{color:var(--p4-bone)}
#pv2.pv4 .billing-mode-option.is-active .billing-mode-option__desc{color:rgba(244,241,234,.6) !important}
#pv2.pv4 .p4-seg{max-width:520px}

/* ---------- 2. Preis links, Knopf rechts ---------- */
#pv2.pv4.p4-live .plan-card{grid-template-columns:1fr auto;column-gap:14px;align-items:end}
#pv2.pv4.p4-live .plan-card .plan-right{grid-column:1 !important;width:auto !important}
#pv2.pv4.p4-live .plan-card > form,
#pv2.pv4.p4-live .plan-card > .btn{grid-column:2;margin-top:0;max-width:56vw}
#pv2.pv4.p4-live .plan-card .btn{
  width:100%;white-space:normal;text-transform:none !important;letter-spacing:0 !important;
  font:700 14px/1.25 var(--font-sans,'Jost',sans-serif) !important;padding:13px 20px !important;
}

/* ---------- 3. Kleingedrucktes: eine Zeile, kein doppelter Kurspreis ---------- */
#pv2.pv4.p4-live .p4-cpp,
#pv2.pv4.p4-live .pv3-vs-card{display:none}
#pv2.pv4.p4-live .plan-card .plan-subtext{
  font:500 10.5px/1.5 ui-monospace,'SF Mono',Menlo,monospace !important;
  letter-spacing:.05em;color:var(--p4-t3) !important;margin-top:8px;
}
#pv2.pv4.p4-live .plan-card .plan-subtext br:first-child{display:none}

/* ---------- Name in Titelschreibweise, wie im Mockup ---------- */
#pv2.pv4.p4-live .plan-name{
  font:400 21px/1.2 var(--font-serif,'Cinzel',Georgia,serif) !important;
  letter-spacing:.5px !important;text-transform:none !important;
}

/* =============================================================================
   v4 — Teil 7 (Owner 27.07.2026)
   1. Trust-Zeile: der lange Claim war ein eigener Flex-Block und ist deshalb
      komplett in Zeile 2 gerutscht. Als Fliesstext bricht er wortweise —
      "120+" bleibt damit neben Sternen und Note.
   2. Kaufknopf war am unteren Rand des GANZEN Preisblocks ausgerichtet,
      inklusive zweizeiligem Kleingedruckten. Dadurch sass er sichtbar zu tief.
      Mittig ausgerichtet steht er auf Hoehe der Preiszeile.
   ========================================================================== */
#pv2.pv4 .warung-trust a{display:block !important;text-align:center;flex-wrap:nowrap !important}
#pv2.pv4 .warung-trust a > span{display:inline !important}
#pv2.pv4 .warung-trust a > span + span{margin-left:5px}
#pv2.pv4 .warung-trust{gap:4px 10px !important;line-height:1.6 !important}

#pv2.pv4.p4-live .plan-card{align-items:center}
#pv2.pv4.p4-live .plan-card > form,
#pv2.pv4.p4-live .plan-card > .btn{align-self:center}

/* =============================================================================
   v4 — Teil 8 (Owner 27.07.2026)
   1. Trust-Zeile dreizeilig: Note + Anzahl / Claim / Community.
      Markup kommt aus includes/trust.blade.php, Zweig 'stacked' — nur die
      Preisseite setzt den Schalter, alle anderen Seiten bleiben unberuehrt.
   2. Kaufknopf senkrecht auf die PREISZEILE zentriert statt auf den ganzen
      Preisblock. Dafuer loest sich .plan-right per display:contents auf —
      erst dann liegen Preisbox und Knopf in derselben Rasterzeile und
      align-self bezieht sich auf genau diese Zeile.
   ========================================================================== */
#pv2.pv4 .warung-trust--stacked{
  display:block !important;text-align:center;
  background:rgba(244,241,234,.03) !important;border:1px solid var(--p4-hair) !important;
  border-radius:16px !important;padding:15px 18px !important;max-width:420px !important;
  margin:22px auto 4px !important;
}
#pv2.pv4 .wt-line{
  display:block;text-decoration:none;color:var(--p4-t2);
  font:600 10.5px/1.6 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;
}
#pv2.pv4 .wt-line + .wt-line{margin-top:7px;padding-top:7px;border-top:1px solid rgba(244,241,234,.08)}
#pv2.pv4 .wt-stars{color:var(--p4-gold);font-size:12px;letter-spacing:2px;margin-right:6px}
#pv2.pv4 .wt-score{color:var(--p4-bone);font-weight:700;margin-right:5px}
#pv2.pv4 .wt-line--claim{color:var(--p4-t3)}
#pv2.pv4 .wt-line--insta i{color:var(--p4-gold);font-size:12px;margin-right:6px}

#pv2.pv4.p4-live .plan-card .plan-right{display:contents !important}
#pv2.pv4.p4-live .plan-card .plan-right > *{grid-column:1 / -1;text-align:left}
#pv2.pv4.p4-live .plan-card .recommend-badge,
#pv2.pv4.p4-live .plan-card .offer-badge{order:5}
#pv2.pv4.p4-live .plan-card #pm-p-box,
#pv2.pv4.p4-live .plan-card #s-p-box,
#pv2.pv4.p4-live .plan-card #u-p-box,
#pv2.pv4.p4-live .plan-card .plan-right > .price-row{order:6;grid-column:1}
#pv2.pv4.p4-live .plan-card > form,
#pv2.pv4.p4-live .plan-card > .btn{order:6;grid-column:2;align-self:center}
#pv2.pv4.p4-live .plan-card .plan-subtext{order:7;grid-column:1 / -1}
#pv2.pv4.p4-live .plan-card [data-pp-message]{order:7;grid-column:1 / -1}

/* =============================================================================
   v4 — Teil 9 (Owner 27.07.2026)
   - Kleingedrucktes unter dem Preis waagerecht zentriert statt linksbuendig.
   - Trust-Zeile ohne Trennlinien.
   (FAQ nur Deutsch und die beiden entfernten Toggle-Zeilen stecken im Blade.)
   ========================================================================== */
#pv2.pv4.p4-live .plan-card .plan-subtext{text-align:center !important}
#pv2.pv4 .wt-line + .wt-line{border-top:0;margin-top:6px;padding-top:0}

/* =============================================================================
   v4 — Teil 10 (Owner 27.07.2026): lueckenlose Sortierung im Preisfuss.
   Der Intro-Pass haelt den Preis DIREKT in .plan-right — ohne #..-p-box und
   ohne .price-row, anders als alle anderen Karten. Er hatte damit keine order
   und landete auf 0, also VOR dem Namen. Jetzt bekommt jedes Kind von
   .plan-right eine order, keins faellt mehr durch.
   Reihenfolge: Badge 5 · Preis + Knopf 6 (dieselbe Zeile) · Rest 7 ·
   Kleingedrucktes 8 · PayPal-Hinweis 9 · Anker-Zeile 10 · Vergleichszeile 11.
   ========================================================================== */
#pv2.pv4.p4-live .plan-card .plan-right > *{grid-column:1 / -1;order:7;text-align:left}
#pv2.pv4.p4-live .plan-card .recommend-badge,
#pv2.pv4.p4-live .plan-card .offer-badge{order:5}
#pv2.pv4.p4-live .plan-card .plan-right > [id$="-p-box"],
#pv2.pv4.p4-live .plan-card .plan-right > .price-row,
#pv2.pv4.p4-live .plan-card .plan-right > .plan-price{order:6;grid-column:1}
#pv2.pv4.p4-live .plan-card > form,
#pv2.pv4.p4-live .plan-card > .btn{order:6;grid-column:2;align-self:center}
#pv2.pv4.p4-live .plan-card .plan-subtext{order:8;grid-column:1 / -1}
#pv2.pv4.p4-live .plan-card [data-pp-message]{order:9;grid-column:1 / -1}
#pv2.pv4.p4-live .plan-card .pv3-anchor-line{order:10;grid-column:1 / -1}
#pv2.pv4.p4-live .plan-card .p4-cmp{order:11;grid-column:1 / -1}