/* ============================================================================
   price-v5.css — Optik-Ebene fuer die Preisseite (28.08.2026)

   REGELN, DIE HIER GELTEN:
   1. Diese Datei aendert AUSSCHLIESSLICH Aussehen. Kein display:none auf
      Elementen, an denen JavaScript haengt — JS liest Textinhalte und
      Sichtbarkeit. Wer etwas verstecken will, nutzt visibility/opacity nur,
      wenn sicher ist, dass kein Skript darauf reagiert.
   2. Alles ist auf #pv2.pv5 gescopet. Ohne die Klasse greift nichts —
      site_vars.prices_v5 = false stellt die alte Optik sofort wieder her.
   3. MUSS nach price-v4.css laden, sonst gewinnt v4 bei gleicher Spezifitaet.
   4. Keine Textinhalte aendern. prices-v4.js liest Preise per Regex aus dem
      gerenderten Text ("nur X €/Kurs") — jede Umformulierung bricht das
      Faktenraster still.
   ========================================================================= */

#pv2.pv5{
  --v5-deep:#0c0f0d;
  --v5-bone:#f4f1ea;
  --v5-gold:#b59c7e;
  --v5-gold-deep:#7a6644;
  --v5-ember:#9a4b36;
  --v5-ember-hi:#bd7059;
  --v5-b66:rgba(244,241,234,.66);
  --v5-b40:rgba(244,241,234,.40);
  --v5-b22:rgba(244,241,234,.22);
  --v5-hair:rgba(244,241,234,.13);
  --v5-ghair:rgba(181,156,126,.3);
  --v5-ehair:rgba(154,75,54,.45);
  --v5-glas:linear-gradient(180deg,rgba(244,241,234,.085),rgba(244,241,234,.028));
  --v5-glas-hi:inset 0 1px 0 rgba(244,241,234,.1), 0 3px 16px rgba(0,0,0,.24);
  --v5-r:15px;
  --v5-ease:cubic-bezier(.32,.72,0,1);
}

/* ---------------------------------------------------------------- Flaechen */
#pv2.pv5 .pricing-section{ padding-left:18px; padding-right:18px; }

#pv2.pv5 .plan-card,
#pv2.pv5 .cardBox{
  position:relative;
  border-radius:var(--v5-r);
  border:1px solid var(--v5-hair);
  background:var(--v5-glas);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--v5-glas-hi);
  overflow:hidden;
  transition:border-color .28s var(--v5-ease), background .28s var(--v5-ease),
             box-shadow .28s var(--v5-ease);
}
#pv2.pv5 .plan-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(90% 120% at 15% -20%,rgba(244,241,234,.09),transparent 55%);
}
#pv2.pv5 .plan-card > *{ position:relative; z-index:1; }
#pv2.pv5 .plan-card:hover{
  background:linear-gradient(180deg,rgba(244,241,234,.12),rgba(244,241,234,.05));
}

/* aktive/empfohlene Karte — Gold, weil regulaer */
#pv2.pv5 .plan-card.premium,
#pv2.pv5 .plan-card.is-active{
  border-color:var(--v5-gold);
  background:rgba(181,156,126,.14);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.2), 0 8px 28px rgba(0,0,0,.34);
}

/* ------------------------------------------------------------------- Hero */
#pv2.pv5 .pv3-stage{
  padding:30px 18px 26px;
  border-radius:var(--v5-r);
  background:radial-gradient(120% 92% at 50% -10%,rgba(181,156,126,.16),transparent 66%);
}
#pv2.pv5 .pv3-eyebrow{
  display:inline-block; font-weight:800; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--v5-gold);
  border:1px solid var(--v5-ghair); padding:6px 9px; border-radius:7px; margin-bottom:14px;
}
#pv2.pv5 .pv3-stage-title,
#pv2.pv5 .pv2-hero-title{ letter-spacing:-.015em; line-height:1.1; }
#pv2.pv5 .pv3-stage-price{ letter-spacing:-.02em; }
#pv2.pv5 .pv3-stage-cur{ color:var(--v5-gold); }
#pv2.pv5 .pv3-stage-sub,
#pv2.pv5 .pv2-hero-sub{ color:var(--v5-b66); line-height:1.55; }

#pv2.pv5 .pv2-hero{
  border-radius:var(--v5-r);
  border:1px solid var(--v5-ghair);
  background:rgba(181,156,126,.09);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.1);
  padding:18px 17px;
}

/* Live-Zeile: gruener Punkt statt Alarmfarbe */
#pv2.pv5 .pv3-live-dot{ background:#5fbf7a; box-shadow:0 0 0 3px rgba(95,191,122,.16); }
#pv2.pv5 .pv3-live-line{ color:var(--v5-b66); }
#pv2.pv5 .pv3-rating-line{ color:var(--v5-b40); }

/* ------------------------------------------------------------- Die Treppe */
#pv2.pv5 .pv3-path{ display:flex; flex-direction:column; gap:10px; }
#pv2.pv5 .pv3-path-step{
  display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center;
  min-height:72px; padding:16px 15px;
  border-radius:var(--v5-r); border:1px solid var(--v5-hair);
  background:var(--v5-glas);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--v5-glas-hi);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .28s var(--v5-ease), border-color .28s var(--v5-ease),
             transform .16s var(--v5-ease);
}
#pv2.pv5 .pv3-path-step:active{ transform:scale(.985); }
#pv2.pv5 .pv3-path-step:hover{ background:linear-gradient(180deg,rgba(244,241,234,.12),rgba(244,241,234,.05)); }
#pv2.pv5 .pv3-path-step.is-accent{
  border-color:var(--v5-ghair); background:rgba(181,156,126,.13);
}
#pv2.pv5 .pv3-path-num{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,241,234,.1); color:var(--v5-b66);
  font-weight:800; font-size:11px;
}
#pv2.pv5 .pv3-path-step.is-accent .pv3-path-num{ background:var(--v5-gold); color:var(--v5-deep); }
#pv2.pv5 .pv3-path-label{ font-weight:700; font-size:15px; letter-spacing:-.01em; text-align:left; }
#pv2.pv5 .pv3-path-value{ color:var(--v5-gold); font-weight:700; white-space:nowrap; text-align:right; }

/* --------------------------------------------------------- Segment-Wahl v4 */
#pv2.pv5 .p4-seg{
  border-radius:14px; padding:4px; gap:4px;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.07);
  border:0;
}
#pv2.pv5 .p4-seg-b{
  border:0; border-radius:11px; min-height:52px; padding:12px 6px;
  color:var(--v5-b40); background:transparent;
  -webkit-tap-highlight-color:transparent;
  transition:background .28s var(--v5-ease), color .22s;
}
#pv2.pv5 .p4-seg-b.is-on,
#pv2.pv5 .p4-seg-b[aria-selected="true"]{
  background:rgba(244,241,234,.12); color:var(--v5-bone);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
#pv2.pv5 .p4-seg-t{ font-weight:700; font-size:12.5px; letter-spacing:-.01em; }
#pv2.pv5 .p4-seg-s{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--v5-b40); }
#pv2.pv5 .p4-seg-b.is-on .p4-seg-s{ color:var(--v5-gold); }

/* --------------------------------------------------------- Abrechnungswahl */
#pv2.pv5 .billing-mode-switcher{
  border-radius:14px; padding:4px; gap:4px; background:rgba(0,0,0,.34);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#pv2.pv5 .billing-mode-option{
  border-radius:11px; min-height:50px; border:0; background:transparent;
  transition:background .28s var(--v5-ease), color .22s;
}
#pv2.pv5 .billing-mode-option.is-active{
  background:rgba(244,241,234,.12); box-shadow:0 1px 3px rgba(0,0,0,.3);
}
#pv2.pv5 .billing-mode-option__title{ font-weight:700; font-size:12.5px; }
#pv2.pv5 .billing-mode-option__desc{ font-size:9.5px; letter-spacing:.05em; color:var(--v5-b40); }
#pv2.pv5 .billing-mode-option.is-active .billing-mode-option__desc{ color:var(--v5-gold); }

/* Jahres-Link als dezente Textzeile */
#pv2.pv5 .pv3-yearly-link{
  display:block; width:100%; text-align:center; padding:10px 0;
  font-size:11.5px; color:var(--v5-b40); background:transparent; border:0;
  text-decoration:none;
}
#pv2.pv5 .pv3-yearly-link:hover{ color:var(--v5-b66); }

/* ------------------------------------------------------------ Kartentexte */
#pv2.pv5 .plan-name{ font-weight:800; letter-spacing:-.015em; }
#pv2.pv5 .plan-price{ letter-spacing:-.02em; color:var(--v5-gold); }
#pv2.pv5 .price-period{ color:var(--v5-b40); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
#pv2.pv5 .old-price{ color:var(--v5-b40); position:relative; }
#pv2.pv5 .old-price::after{
  content:''; position:absolute; left:-2px; right:-2px; top:52%; height:1.5px;
  background:var(--v5-ember-hi); transform:rotate(-9deg);
}
#pv2.pv5 .plan-subtext{ color:var(--v5-b66); line-height:1.5; }
#pv2.pv5 .plan-features li{ color:var(--v5-b66); line-height:1.55; }

/* Badges */
#pv2.pv5 .offer-badge,
#pv2.pv5 .popular-badge,
#pv2.pv5 .recommend-badge{
  font-weight:800; font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  border-radius:7px; padding:5px 8px;
}
#pv2.pv5 .offer-badge{ background:linear-gradient(90deg,var(--v5-gold-deep),var(--v5-gold)); color:var(--v5-deep); }
#pv2.pv5 .popular-badge,
#pv2.pv5 .recommend-badge{ background:rgba(181,156,126,.2); color:var(--v5-gold); }

/* ------------------------------------------------- Faktenraster + Abrisskante */
#pv2.pv5 .p4-facts{ gap:9px; }
#pv2.pv5 .p4-facts > div{
  border-radius:11px; padding:11px 9px;
  background:rgba(0,0,0,.26);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.05);
}
#pv2.pv5 .p4-facts .k{ font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--v5-b40); }
#pv2.pv5 .p4-facts .v{ font-weight:700; color:var(--v5-bone); }
#pv2.pv5 .p4-facts .v.g{ color:var(--v5-gold); }
#pv2.pv5 .p4-ln .c{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--v5-b40); }
#pv2.pv5 .p4-ln .l{ background:var(--v5-hair); }
#pv2.pv5 .p4-eyebrow{ font-size:9px; letter-spacing:.17em; text-transform:uppercase; color:var(--v5-gold); }
#pv2.pv5 .p4-cmp{
  border-radius:10px; padding:9px 12px; background:rgba(0,0,0,.28);
  font-size:11.5px; color:var(--v5-b40);
}
#pv2.pv5 .p4-cmp b{ color:var(--v5-b66); }

/* --------------------------------------------------------------- Buttons */
#pv2.pv5 .btn-solid{
  border-radius:13px; min-height:54px; font-weight:800; letter-spacing:-.01em;
  background:var(--v5-gold); color:var(--v5-deep); border:0;
  box-shadow:inset 0 1px 0 rgba(244,241,234,.22), 0 6px 20px rgba(0,0,0,.28);
  transition:filter .16s, transform .16s var(--v5-ease);
  -webkit-tap-highlight-color:transparent;
}
#pv2.pv5 .btn-solid:hover{ filter:brightness(1.08); }
#pv2.pv5 .btn-solid:active{ transform:scale(.975); }
#pv2.pv5 .btn-outline{
  border-radius:13px; min-height:52px; font-weight:700;
  border:1px solid var(--v5-ghair); color:var(--v5-gold); background:transparent;
}
#pv2.pv5 .btn-outline:hover{ background:rgba(181,156,126,.12); }

/* ------------------------------------------------------ Sticky-Kaufleiste */
#pv2.pv5 ~ .pv2-sticky-bar,
.pv5-sticky.pv2-sticky-bar{
  padding:11px 16px calc(13px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(28,34,31,.62),rgba(12,15,13,.88));
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border-top:1px solid rgba(244,241,234,.14);
  box-shadow:0 -18px 40px rgba(0,0,0,.35);
  position:fixed; bottom:0; left:0; right:0;
}
.pv5-sticky.pv2-sticky-bar::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(244,241,234,.45) 30%,rgba(244,241,234,.45) 70%,transparent);
}
.pv5-sticky .pv2-sticky-title{ color:var(--v5-bone,#f4f1ea); font-weight:800; font-size:14px; letter-spacing:-.01em; }
.pv5-sticky .pv2-sticky-sub{ color:rgba(244,241,234,.6); font-size:10.5px; }
.pv5-sticky .pv2-sticky-btn{
  background:#b59c7e !important; border-color:#b59c7e !important; color:#0c0f0d !important;
  border-radius:12px; min-height:50px; font-weight:800; padding:0 18px;
  box-shadow:inset 0 1px 0 rgba(244,241,234,.22), 0 6px 20px rgba(0,0,0,.3);
}

/* ------------------------------------------------------------ Info-Popup */
#pv2.pv5 .info-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%;
  border:1px solid rgba(244,241,234,.26); background:transparent;
  color:var(--v5-b40); font-weight:700; font-size:10px; line-height:1;
  cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s, color .2s, background .2s;
}
#pv2.pv5 .info-icon::after{
  content:''; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
#pv2.pv5 .info-icon:hover{ border-color:var(--v5-gold); color:var(--v5-gold); background:rgba(181,156,126,.12); }
#pv2.pv5 .info-popup{
  border-radius:var(--v5-r);
  background:rgba(14,18,16,.9);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(244,241,234,.18);
  color:var(--v5-bone); padding:17px 18px;
}
#pv2.pv5 .popup-text{ color:var(--v5-b66); font-size:12px; line-height:1.6; }
#pv2.pv5 .popup-text strong{ color:var(--v5-bone); }
#pv2.pv5 .close-popup{
  width:26px; height:26px; border-radius:50%; top:11px; right:12px;
  background:rgba(244,241,234,.12); color:var(--v5-b66);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
#pv2.pv5 .close-popup:hover{ background:rgba(244,241,234,.22); color:var(--v5-bone); }

/* -------------------------------------------------------------- Kleinkram */
#pv2.pv5 .section-title,
#pv2.pv5 .pv3-step-title{ letter-spacing:-.015em; }
#pv2.pv5 .pv3-anchor-line{ color:var(--v5-b66); font-size:11.5px; line-height:1.55; }
#pv2.pv5 .pv3-anchor-link{ color:var(--v5-gold); text-underline-offset:3px; }
#pv2.pv5 .pv3-price-lock{ color:var(--v5-b40); font-size:10.5px; }
#pv2.pv5 .pv3-ultimate-toggle{
  border-radius:12px; border:1px solid var(--v5-hair); background:transparent;
  color:var(--v5-b66); min-height:50px; font-weight:700; font-size:12.5px;
}
#pv2.pv5 .pv3-ultimate-toggle:hover{ border-color:var(--v5-ghair); color:var(--v5-bone); }
#pv2.pv5 .pv2-countdown{ color:var(--v5-ember-hi); font-weight:700; }
#pv2.pv5 .pv2-toggle-note{ color:var(--v5-b40); font-size:10.5px; }

/* Grosse Schrift nur da, wo Platz ist */
@media (min-width:768px){
  #pv2.pv5 .pv3-path-step{ min-height:78px; }
}

/* ============================================================================
   v5-MARKUP-SCHICHT (29.08.2026) — ab hier stylt die Datei auch die NEUEN
   v5-Elemente (Schritt-1-Pfadwahl, Decoy-Toggle, Sale-Promo-Leiste). Die
   Regeln 1–4 aus dem Kopf gelten weiter fuer alle ALTEN Elemente. Einzige
   bewusste Ausnahme: die Treppe (.pv3-path-section) wird unter .pv5 durch
   Schritt 1 ersetzt — sie bleibt im DOM (ihre data-pv3-scroll-Bindings
   leben weiter), wird aber ausgeblendet. Kein Skript liest ihren Inhalt.
   ========================================================================= */

#pv2.pv5 .pv3-path-section{ display:none; }

/* ------------------------------------------------ Gefuehrte Produktgruppen */
/* Nur mit JS (prices-v5.js setzt pv5-guided): ohne Wahl sind die Gruppen zu.
   Die Sektionen sind display:none — die Sticky-Zonen-Logik ist deshalb per
   WY_PV5_STICKY_LOCK stillgelegt (prices3-v3-page.js, gated). */
#pv2.pv5.pv5-guided [data-pv5-group]{ display:none; }
/* ⚠ Diese drei Zeilen sind das Gegenstueck zu der Zeile darueber: ohne sie
   bleibt nach der Wahl ALLES leer. Beim CSS-Aufraeumen am 29.08. wurden sie
   versehentlich mitgeloescht, weil eine Suche nach dem Dock-Baustein "pv5-pi"
   auch auf "pv5-pick-..." passte (Teilzeichenfolge!). Nie wieder per
   Teilstring loeschen — und nach jedem Aufraeumen die Pfadwahl testen. */
#pv2.pv5.pv5-pick-try [data-pv5-group="try"],
#pv2.pv5.pv5-pick-abo [data-pv5-group="abo"],
#pv2.pv5.pv5-pick-flex [data-pv5-group="flex"]{ display:block; }


/* ----------------------------------------------------- Schritt 1: Pfadwahl */
#pv2.pv5 .pv5-step1{ padding-top:6px; }
#pv2.pv5 .pv5-paths{ display:grid; gap:10px; margin-top:14px; }
#pv2.pv5 .pv5-path{
  display:block; width:100%; text-align:left; cursor:pointer;
  border-radius:var(--v5-r); border:1px solid var(--v5-hair);
  background:var(--v5-glas);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--v5-glas-hi);
  padding:15px 16px; color:var(--v5-bone);
  transition:border-color .22s var(--v5-ease), transform .22s var(--v5-ease), background .22s;
  -webkit-tap-highlight-color:transparent;
}
#pv2.pv5 .pv5-path:hover{ border-color:var(--v5-ghair); }
#pv2.pv5 .pv5-path:active{ transform:scale(.985); }
#pv2.pv5 .pv5-path.is-sale{ border-color:var(--v5-ehair); }
#pv2.pv5 .pv5-path-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#pv2.pv5 .pv5-path-name{ font-weight:800; font-size:15px; letter-spacing:-.01em; }
#pv2.pv5 .pv5-path-badge{
  flex:none; border-radius:999px; padding:3px 9px;
  background:rgba(154,75,54,.28); border:1px solid var(--v5-ehair);
  color:var(--v5-ember-hi); font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
}
#pv2.pv5 .pv5-path-sub{
  display:block; margin-top:5px; color:var(--v5-b66); font-size:12px; line-height:1.5;
}
#pv2.pv5 .pv5-path-sub s{ color:var(--v5-b40); text-decoration-thickness:1px; }
#pv2.pv5 .pv5-sale-p{ color:var(--v5-ember-hi); font-weight:800; }

/* Gewaehlt: Schritt 1 kollabiert zur Zeile */
#pv2.pv5 .pv5-chosen{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-radius:12px; border:1px solid var(--v5-hair);
  background:var(--v5-glas); box-shadow:var(--v5-glas-hi);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding:11px 14px; margin-top:2px;
}
#pv2.pv5 .pv5-chosen-txt{ color:var(--v5-b66); font-size:12.5px; }
#pv2.pv5 .pv5-chosen-txt strong{ color:var(--v5-bone); font-weight:800; }
#pv2.pv5 .pv5-change{
  border:0; background:transparent; cursor:pointer; padding:6px 2px;
  color:var(--v5-gold); font-size:12.5px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
#pv2.pv5 .pv5-all-link{
  display:block; margin:12px auto 0; border:0; background:transparent;
  cursor:pointer; color:var(--v5-b40); font-size:11.5px;
  text-decoration:underline; text-underline-offset:3px; padding:6px 8px;
}
#pv2.pv5 .pv5-all-link:hover{ color:var(--v5-b66); }
#pv2.pv5 .pv5-step1.is-done{ padding-bottom:4px; }

/* ------------------------------------------- Sale: ausgesetzter 12M-Toggle */
#pv2.pv5 .pv5-billing-sale{ display:grid; grid-template-columns:1fr 1fr; }
#pv2.pv5 .pv5-mode-suspended{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:9px 8px; border-radius:11px; opacity:.42; cursor:default;
  user-select:none; -webkit-user-select:none;
}
#pv2.pv5 .pv5-mode-suspended .billing-mode-option__title{ text-decoration:line-through; }

/* --------------------------------------------- Reduzierter Preis = Ember  */
/* Visuelle Grammatik der Seite: Streichpreis daneben => aktueller Preis rot.
   Greift fuer Sale (35/49/89/119) UND persoenliche Angebote — identisch zum
   freigegebenen Mockup (Comeback-Zustand ebenfalls ember). */
#pv2.pv5 .price-row .old-price + .plan-price{ color:var(--v5-ember-hi); }


/* ============================================================================
   v5-MARKUP, NACHTRAG 29.08.2026 — Hero, Trust-Zeile, Pfad-Preisbloecke.
   Grund: Der erste v5-Wurf hatte Schritt 1 eingebaut, aber den alten Hero
   stehen lassen (Riesen-Preis "9 €") und die Preise nur im Fliesstext der
   Pfad-Karten. Beides wich vom freigegebenen Mockup ab.
   ========================================================================= */

/* -------------------------------------------------------------- Hero (v5) */
#pv2.pv5 .pv5-stage{ padding:26px 0 14px; text-align:center; }
#pv2.pv5 .pv5-h1{
  font-size:clamp(27px,7.6vw,40px); line-height:1.06; letter-spacing:-.03em;
  font-weight:800; margin:8px 0 12px; color:var(--v5-bone); text-transform:none;
}
#pv2.pv5 .pv5-h1 em{
  font-style:normal; color:var(--v5-gold);
}
#pv2.pv5 .pv5-eyeb-sale{ color:var(--v5-ember-hi); }#pv2.pv5 .pv5-stage .pv3-stage-sub{ max-width:31em; margin:0 auto; }

/* Trust-Chips */
#pv2.pv5 .pv5-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:4px 0 2px;
}
#pv2.pv5 .pv5-trust span{
  border-radius:999px; padding:5px 11px;
  border:1px solid var(--v5-hair); background:rgba(244,241,234,.045);
  color:var(--v5-b66); font-size:11px; white-space:nowrap;
}
#pv2.pv5 .pv5-trust b{ color:var(--v5-bone); font-weight:800; }

/* --------------------------------------------- Schritt 1: Kopf + Karten */
#pv2.pv5 .pv5-steplab{ display:flex; align-items:center; justify-content:center; gap:7px; }
#pv2.pv5 .pv5-steplab i{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; font-style:normal;
  background:var(--v5-gold); color:#14100c; font-size:11px; font-weight:800;
}
#pv2.pv5 .pv5-q-sub{
  text-align:center; color:var(--v5-b40); font-size:12px; margin:-2px 0 2px;
}

/* Karte: Text links, Preis rechts — wie im Mockup */
#pv2.pv5 .pv5-path{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left;
}
#pv2.pv5 .pv5-path.is-rec{ border-color:var(--v5-ghair); }
#pv2.pv5 .pv5-path.is-rec.is-sale{ border-color:var(--v5-ehair); }
#pv2.pv5 .pv5-path-main{ display:block; min-width:0; }
#pv2.pv5 .pv5-path-desc{
  display:block; margin-top:4px; color:var(--v5-b66);
  font-size:11.5px; line-height:1.45;
}
#pv2.pv5 .pv5-path-pr{
  display:flex; flex-direction:column; align-items:flex-end; flex:none; line-height:1.15;
}
#pv2.pv5 .pv5-path-pr s{
  color:var(--v5-b40); font-size:11.5px; text-decoration-thickness:1px;
}
#pv2.pv5 .pv5-path-pr b{
  color:var(--v5-bone); font-size:19px; font-weight:800;
  letter-spacing:-.02em; white-space:nowrap;
}
#pv2.pv5 .pv5-path-pr b.pv5-sale-p{ color:var(--v5-ember-hi); }
#pv2.pv5 .pv5-path-pr i{
  font-style:normal; color:var(--v5-b40); font-size:10.5px; margin-top:2px; white-space:nowrap;
}

/* -------------------------------------------------- Sticky: nie warten */
/* Owner-Vorgabe: der Kaufknopf steht ab der ersten Sekunde. prices3-v3-page.js
   setzt .pv2-sticky-waiting per IntersectionObserver; prices-v5.js nimmt es
   sofort wieder weg. Diese Regel ist der zweite Riegel, falls JS spaet laedt. */
.pv5-sticky.pv2-sticky-bar.pv2-sticky-waiting{
  transform:none !important; opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important;
}

/* ============================================================================
   v5-MOCKUP-ANGLEICH 29.08.2026 (Paket 5) — Sale-Leiste, Zaehler, Dock,
   Schritt-Labels, Preistabelle. Bringt die Seite auf den freigegebenen
   Mockup-Stand. Bewusst NICHT uebernommen: die kompakten Radio-Zeilen der
   Produktliste — die bestehenden plan-cards tragen Formulare, Preis-IDs und
   das v4-Faktenraster; ein DOM-Umbau dort waere das groesste Risiko im
   ganzen Paket bei geringstem Zusatznutzen.
   ========================================================================= */

/* ------------------------------------------------------- Sale-Leiste oben */
#pv2.pv5 .pv5-salebar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 12px; padding:9px 14px; border-radius:13px;
  background:linear-gradient(180deg,rgba(154,75,54,.30),rgba(154,75,54,.16));
  border:1px solid var(--v5-ehair);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
#pv2.pv5 .pv5-sb-name{
  color:var(--v5-bone); font-size:12px; font-weight:800; letter-spacing:-.01em;
}
#pv2.pv5 .pv5-sb-clock{ display:flex; align-items:baseline; gap:3px; flex:none; }
#pv2.pv5 .pv5-sb-clock b{
  color:var(--v5-bone); font-size:15px; font-weight:800;
  font-variant-numeric:tabular-nums; min-width:1.1em; text-align:right;
}
#pv2.pv5 .pv5-sb-clock span{ color:var(--v5-b40); font-size:9.5px; margin-right:4px; }

/* ------------------------------------------------------------- Zaehler */
#pv2.pv5 .pv5-counter{
  margin:12px auto 0; max-width:31em; padding:11px 14px; border-radius:13px;
  border:1px solid var(--v5-hair); background:rgba(244,241,234,.045);
}
#pv2.pv5 .pv5-counter.is-knapp{ border-color:var(--v5-ehair); background:rgba(154,75,54,.12); }
#pv2.pv5 .pv5-crow{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  color:var(--v5-b66); font-size:11.5px;
}
#pv2.pv5 .pv5-cval{ color:var(--v5-bone); font-weight:800; }
#pv2.pv5 .pv5-counter.is-knapp .pv5-cval{ color:var(--v5-ember-hi); }
#pv2.pv5 .pv5-track{
  margin-top:7px; height:4px; border-radius:99px;
  background:rgba(244,241,234,.11); overflow:hidden;
}
#pv2.pv5 .pv5-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--v5-gold-deep),var(--v5-gold));
  transition:width .6s var(--v5-ease);
}
#pv2.pv5 .pv5-counter.is-knapp .pv5-fill{
  background:linear-gradient(90deg,var(--v5-ember),var(--v5-ember-hi));
}
#pv2.pv5 .pv5-cdate{
  margin-top:6px; display:flex; align-items:center; gap:5px;
  color:var(--v5-b40); font-size:10.5px;
}
#pv2.pv5 .pv5-dot{
  width:5px; height:5px; border-radius:50%; background:var(--v5-ember-hi);
  box-shadow:0 0 0 3px rgba(154,75,54,.2);
}
#pv2.pv5 .pv5-cond{
  margin:10px auto 0; max-width:33em; text-align:center;
  color:var(--v5-b40); font-size:10.5px; line-height:1.5;
}
#pv2.pv5 .pv5-cond b{ color:var(--v5-b66); }
/* ------------------------------- Laufzeit-Hinweis + Anker + Preistabelle */
#pv2.pv5 .pv5-termnote{
  margin:8px auto 0; max-width:31em; text-align:center;
  color:var(--v5-b66); font-size:11.5px; line-height:1.5;
}
#pv2.pv5 .pv5-termnote b{ color:var(--v5-bone); }
#pv2.pv5 .pv5-anchor{
  margin:14px auto 0; max-width:32em; text-align:center;
  color:var(--v5-b66); font-size:12px; line-height:1.55;
}
#pv2.pv5 .pv5-anchor b{ color:var(--v5-bone); font-weight:800; }

#pv2.pv5 .pv5-alle{ margin-top:14px; }
#pv2.pv5 .pv5-alle > summary{
  cursor:pointer; list-style:none; text-align:center; padding:11px 8px;
  border-radius:12px; border:1px solid var(--v5-hair);
  color:var(--v5-b66); font-size:12px; font-weight:700;
}
#pv2.pv5 .pv5-alle > summary::-webkit-details-marker{ display:none; }
#pv2.pv5 .pv5-alle[open] > summary{ color:var(--v5-bone); border-color:var(--v5-ghair); }
#pv2.pv5 .pv5-alle table{
  width:100%; margin-top:9px; border-collapse:collapse; font-size:12px;
}
#pv2.pv5 .pv5-alle td{
  padding:7px 2px; border-bottom:1px solid var(--v5-hair); color:var(--v5-b66);
}
#pv2.pv5 .pv5-alle td:last-child{ text-align:right; white-space:nowrap; color:var(--v5-bone); }
#pv2.pv5 .pv5-alle td s{ color:var(--v5-b40); margin-right:5px; font-size:11px; }
#pv2.pv5 .pv5-alle td b{ color:var(--v5-ember-hi); }
#pv2.pv5 .pv5-alle tr.h td{
  padding-top:13px; color:var(--v5-b40); font-size:10px;
  text-transform:uppercase; letter-spacing:.09em; border-bottom-color:transparent;
}
#pv2.pv5 .pv5-alle tr.pv5-t-off td{ color:var(--v5-b40); font-style:italic; }
#pv2.pv5 .pv5-t-sale{
  margin-left:6px; padding:1px 6px; border-radius:99px;
  background:rgba(154,75,54,.3); color:var(--v5-ember-hi);
  font-size:9px; font-weight:800; letter-spacing:.04em;
}


/* ============================================================================
   v5 SPACING- UND FLAECHEN-SYSTEM (29.08.2026, Owner: "Abstaende nicht
   einheitlich, sieht nicht professionell aus")

   BEFUND: Vier Schichten widersprachen sich.
     price-v2.css  .pricing-section margin-bottom 26px, mobil 16px
     price-v3.css  .pricing-section margin-bottom 2.6rem UND 4.2rem (zweimal
                   dieselbe Regel in derselben Datei), mobil 2rem / 3rem
     Karten-Padding: v2 18px, v3 22px/20px, v4 18px/16px
   Dazu kamen meine v5-Werte als vierte Meinung. Ergebnis: kein Raster.

   REGEL AB HIER: Alle Abstaende auf der v5-Seite kommen aus dieser Skala.
   Kein neuer Abstandswert ohne Token. 4-px-Basisraster, sieben Stufen —
   mehr braucht keine Seite, weniger wird eng.
   ========================================================================= */

#pv2.pv5{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* Ein einziger Seitenrand fuer die ganze Seite. Alles, was innen liegt,
     hat horizontal KEIN eigenes Padding mehr — daher kam das "manche kleben
     am Rand, manche haben zu viel Luft". */
  --rand:18px;
  padding-left:var(--rand); padding-right:var(--rand);
}
@media (min-width:768px){
  #pv2.pv5{ --rand:24px; }
}

/* Sektionen: EIN Abstand, ueberall. Die Trennlinie aus v3 faellt weg —
   Weissraum trennt sauberer als eine Linie. */
#pv2.pv5 .pricing-section{
  margin:0 0 var(--s6); padding-left:0; padding-right:0;
}
#pv2.pv5 .pricing-section + .pricing-section::before{ display:none !important; }
#pv2.pv5 .pricing-section:last-of-type{ margin-bottom:var(--s5); }

/* Karten: ein Innenabstand, ein Aussenabstand. */
#pv2.pv5 .plan-card,
#pv2.pv5 .cardBox{
  padding:var(--s4); margin:0 0 var(--s3);
}
@media (min-width:768px){
  #pv2.pv5 .plan-card,
  #pv2.pv5 .cardBox{ padding:var(--s5); }
}
#pv2.pv5 .plan-card:last-child{ margin-bottom:0; }

/* Ueberschriften-Rhythmus: Eyebrow -> Titel -> Inhalt in festen Stufen. */
#pv2.pv5 .pv3-eyebrow{ margin:0 0 var(--s1); }
#pv2.pv5 .section-title,
#pv2.pv5 .pv3-step-title{ margin:0 0 var(--s4); }
#pv2.pv5 .pv5-q-sub{ margin:calc(var(--s2) * -1) 0 var(--s4); }

/* v5-Bausteine auf dieselbe Skala ziehen (ersetzt die Einzelwerte oben). */
#pv2.pv5 .pv5-salebar{ margin:0 0 var(--s4); padding:var(--s2) var(--s3); }
#pv2.pv5 .pv5-stage{ padding:var(--s5) 0 var(--s3); }
#pv2.pv5 .pv5-h1{ margin:var(--s2) 0 var(--s3); }#pv2.pv5 .pv5-trust{ margin:0 0 var(--s2); gap:var(--s2); }
#pv2.pv5 .pv5-counter{ margin:var(--s3) auto 0; padding:var(--s3); }
#pv2.pv5 .pv5-cond{ margin:var(--s3) auto 0; }
#pv2.pv5 .pv5-step1{ padding-top:0; }
#pv2.pv5 .pv5-paths{ gap:var(--s2); margin-top:var(--s4); }
#pv2.pv5 .pv5-path{ padding:var(--s4); }
#pv2.pv5 .pv5-chosen{ padding:var(--s3) var(--s4); margin-top:0; }
#pv2.pv5 .pv5-alle{ margin-top:var(--s3); }
#pv2.pv5 .pv5-alle > summary{ padding:var(--s3) var(--s2); }
#pv2.pv5 .pv5-all-link{ margin:var(--s3) auto 0; padding:var(--s2); }
#pv2.pv5 .pv5-termnote{ margin:var(--s2) auto 0; }
#pv2.pv5 .pv5-anchor{ margin:var(--s4) auto 0; }
#pv2.pv5 .toggle-container{ margin:0 0 var(--s4); }
#pv2.pv5 .p4-seg{ margin:0 0 var(--s4); }
#pv2.pv5 .p4-seg-q{ margin:0 0 var(--s2); }
#pv2.pv5 .pv3-ultimate-toggle{ margin:var(--s3) 0 0; }
#pv2.pv5 .pv2-countdown{ margin:0 0 var(--s3); }
#pv2.pv5 .pv3-anchor-line{ margin:var(--s3) 0 0; }
#pv2.pv5 .pricing-spacer{ display:none; }

/* Der Puffer, damit das Dock nie den letzten Kaufknopf verdeckt. Wird in JS
   auf die echte Dock-Hoehe gesetzt; dieser Wert ist der Startwert. */
#pv2.pv5{ padding-bottom:var(--pv5-dockraum, 130px); } /* Fallback; JS misst nach (Dock ist seit 30.08. schlanker) */

/* ---------------------------------------------------- Sanftes Auftauchen */
/* Kein Scrollen beim Wechsel — der Inhalt taucht an Ort und Stelle auf.
   prefers-reduced-motion respektiert. */
@keyframes pv5Auftauchen{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
#pv2.pv5 .pv5-enter{ animation:pv5Auftauchen .34s var(--v5-ease) both; }
@media (prefers-reduced-motion:reduce){
  #pv2.pv5 .pv5-enter{ animation:none; }
}

/* ============================================ Trust-Streifen in v5-Optik */
/* Der Block kam aus includes/trust.blade.php im alten Look (gelbe Sterne
   #FFC107, Pillen-Rahmen, eigene Schriftgroessen) und war das letzte
   sichtbare Stueck Altdesign auf der Seite. Die stacked-Variante arbeitet
   mit Klassen, laesst sich also sauber ueberschreiben. */
#pv2.pv5 .trust-below-pricing{ margin-bottom:var(--s5); }
#pv2.pv5 .warung-trust--stacked{
  display:grid; gap:var(--s2); margin:0; padding:var(--s4);
  border-radius:var(--v5-r); border:1px solid var(--v5-hair);
  background:var(--v5-glas); box-shadow:var(--v5-glas-hi);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  text-align:center;
}
#pv2.pv5 .warung-trust--stacked .wt-line{
  display:flex; align-items:center; justify-content:center; gap:var(--s1);
  color:var(--v5-b66); font-size:12px; text-decoration:none; line-height:1.4;
}
#pv2.pv5 .warung-trust--stacked .wt-stars{
  color:var(--v5-gold); letter-spacing:1px; font-size:13px;
}
#pv2.pv5 .warung-trust--stacked .wt-score{
  color:var(--v5-bone); font-weight:800; font-size:14px;
}
#pv2.pv5 .warung-trust--stacked .wt-count{ color:var(--v5-b40); }
#pv2.pv5 .warung-trust--stacked .wt-line--claim{
  color:var(--v5-bone); font-weight:700;
}
#pv2.pv5 .warung-trust--stacked .wt-line--insta{ color:var(--v5-b40); font-size:11.5px; }
/* Die NICHT-stacked Variante traegt Inline-Styles — die schlaegt nur !important. */
#pv2.pv5 .warung-trust:not(.warung-trust--stacked){
  background:var(--v5-glas) !important;
  border:1px solid var(--v5-hair) !important;
  border-radius:var(--v5-r) !important;
  color:var(--v5-b66) !important;
  padding:var(--s3) var(--s4) !important;
  margin:0 !important; max-width:none !important;
  font-size:12px !important;
}
#pv2.pv5 .warung-trust:not(.warung-trust--stacked) a{ color:var(--v5-b66) !important; }
#pv2.pv5 .warung-trust:not(.warung-trust--stacked) span[style*="FFC107"]{ color:var(--v5-gold) !important; }

/* ---------------------------------------------------------------- FAQ */
#pv2.pv5 .section-faq-prices{ margin-bottom:var(--s5); }
#pv2.pv5 .section-faq-prices .section-title{ margin-bottom:var(--s3); }
#pv2.pv5 .faq-item{
  border-radius:var(--v5-r); border:1px solid var(--v5-hair);
  background:rgba(244,241,234,.035); margin-bottom:var(--s2);
  padding:var(--s2) var(--s3);
}
#pv2.pv5 .faq-item.open{ border-color:var(--v5-ghair); background:var(--v5-glas); }
#pv2.pv5 .faq_question{ color:var(--v5-bone); font-size:13px; font-weight:700; }
#pv2.pv5 .faq_answer,
#pv2.pv5 .faq-item p{ color:var(--v5-b66); font-size:12px; line-height:1.6; }

/* ============================================================================
   v5 KORREKTUREN 29.08.2026 (Owner-Screenshot)

   1. Dock war zerrissen: price-v3.css setzt
        .pv2-sticky-bar .pv3-sticky-variant { display:flex; justify-content:space-between }


/* Die alte Regel .pv2-sticky-bar .pv2-sticky-btn{display:inline-block;width:auto}


/* --- 2. Luft zwischen Seitenkopf und Inhalt ------------------------------- */
/* Die Hero-Karte klebte am Ankuendigungsband ueber der Seite. */
#pv2.pv5{ padding-top:var(--s5); }
@media (min-width:768px){ #pv2.pv5{ padding-top:var(--s6); } }

/* --- 3. Abstand beim Hinfuehren ------------------------------------------- */
/* scrollIntoView setzt das Ziel sonst bündig an die Fensterkante, wo der
   Seitenkopf drueberliegt. */
#pv2.pv5 .pv5-chosen,
#pv2.pv5 .pv5-step1,
#pv2.pv5 [data-pv5-group]{ scroll-margin-top:var(--s5); }

/* --- Gewaehlte Zeile ist jetzt ein Button --------------------------------- */
#pv2.pv5 button.pv5-chosen{
  width:100%; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s var(--v5-ease), background .2s var(--v5-ease);
}
#pv2.pv5 button.pv5-chosen:hover{ border-color:var(--v5-ghair); }
#pv2.pv5 button.pv5-chosen:active{ transform:scale(.995); }
#pv2.pv5 .pv5-change{
  flex:none; color:var(--v5-gold); font-size:12.5px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  border:0; background:transparent; padding:0;
}

/* --- Trust-Chips: zwei statt drei, dadurch mehr Platz pro Chip ------------ */
#pv2.pv5 .pv5-trust span{ font-size:11.5px; line-height:1.4; padding:6px 12px; }

/* --- Aufklapp-Animation etwas deutlicher (soll sichtbar sein) ------------- */
@keyframes pv5Auftauchen{
  from{ opacity:0; transform:translateY(10px) scale(.995); }
  to{ opacity:1; transform:none; }
}
#pv2.pv5 .pv5-enter{ animation:pv5Auftauchen .4s var(--v5-ease) both; }

/* ============================================================================
   v5 REITER-LEISTE + DOCK-HAERTUNG (29.08.2026, Owner-Entscheid)

   Die drei Wege verschwinden nach der Wahl NICHT mehr, sie schrumpfen zu
   Reitern und bleiben stehen. Damit ist die Ursache des Springens weg: Es
   faellt kein Inhalt mehr oberhalb des Blicks weg, der die Seite nachrutschen
   laesst. Jeder Reiter ist zugleich der Rueckweg.
   ========================================================================= */

/* --- Karten-Modus (vor der Wahl) bleibt wie gehabt; im Reiter-Modus zaehlt
       nur noch der Kurzname. --- */
#pv2.pv5 .pv5-tab-name{ display:none; }
#pv2.pv5 .pv5-paths.is-tabs .pv5-path-main,
#pv2.pv5 .pv5-paths.is-tabs .pv5-path-pr{ display:none; }
#pv2.pv5 .pv5-paths.is-tabs .pv5-tab-name{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Reiter-Leiste: iOS-Segmented-Control-Muster, eine Zeile, gleiche Breiten. */
#pv2.pv5 .pv5-paths.is-tabs{
  display:flex; gap:3px; padding:3px; margin-top:0;
  border-radius:13px; border:1px solid var(--v5-hair);
  background:rgba(244,241,234,.055);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
#pv2.pv5 .pv5-paths.is-tabs .pv5-path{
  flex:1 1 0; min-width:0; text-align:center; padding:9px 6px;
  border:0; background:transparent; box-shadow:none; border-radius:10px;
  color:var(--v5-b40);
  transition:background .22s var(--v5-ease), color .22s var(--v5-ease);
}
#pv2.pv5 .pv5-paths.is-tabs .pv5-path:hover{ color:var(--v5-b66); background:rgba(244,241,234,.05); }
#pv2.pv5 .pv5-paths.is-tabs .pv5-path.is-on{
  background:rgba(244,241,234,.11); color:var(--v5-bone);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.16), 0 1px 4px rgba(0,0,0,.22);
}
#pv2.pv5 .pv5-paths.is-tabs .pv5-path.is-on.is-sale{
  background:rgba(154,75,54,.28); color:var(--v5-bone);
  box-shadow:inset 0 1px 0 rgba(189,112,89,.3), 0 1px 4px rgba(0,0,0,.22);
}
/* Der Schritt-1-Block wird im Reiter-Modus zur schmalen Leiste. */
#pv2.pv5 .pv5-step1.is-done{ margin-bottom:var(--s4); }
#pv2.pv5 .pv5-paths.is-tabs{ scroll-margin-top:var(--s5); }


/* ============================================================================
   v5 KORREKTUREN 29.08.2026 (zweiter Owner-Screenshot)

   1. Abstand Hero-Karte -> Trust-Chips war NULL. Mein vorheriger Versuch hat
      nur den Seitenanfang gepolstert (padding-top auf #pv2) — das war der
      falsche Abstand. Hier ist der richtige: margin-TOP auf der Chip-Zeile.
   2. Der Rahmen um die Beleg-Box im Hero faellt weg (Owner: unnoetig).
   3. Das Dock bekommt eine klare, eigenstaendige Flaeche.
   ========================================================================= */

/* --- 1. Luft zwischen Hero-Karte und den Chips --------------------------- */
#pv2.pv5 .pv5-trust{
  margin:var(--s5) 0 0 !important;
  gap:var(--s2);
}
#pv2.pv5 .pv5-counter{ margin-top:var(--s4) !important; }
/* Und darunter, bevor Schritt 1 beginnt. */
#pv2.pv5 #pv3-hero{ margin-bottom:var(--s6) !important; }

/* --- Weichere Uebergaenge beim Reiterwechsel ------------------------------ */
/* Das Aufklappen lief mit .4s und einer harten Kurve — zusammen mit dem
   Scrollen wirkte das hektisch. Laenger und weicher, und der Reiter selbst
   wechselt langsamer die Farbe, damit die Bewegung als EIN Vorgang liest. */
@keyframes pv5Auftauchen{
  from{ opacity:0; transform:translateY(14px); }
  60%{ opacity:1; }
  to{ opacity:1; transform:none; }
}
#pv2.pv5 .pv5-enter{
  animation:pv5Auftauchen .62s cubic-bezier(.22,.68,.24,1) both;
}
#pv2.pv5 .pv5-paths.is-tabs .pv5-path{
  transition:background .34s cubic-bezier(.22,.68,.24,1),
             color .34s cubic-bezier(.22,.68,.24,1),
             box-shadow .34s cubic-bezier(.22,.68,.24,1);
}
/* Der Wechsel Karten -> Reiter darf nicht schnappen. */
#pv2.pv5 .pv5-paths{
  transition:gap .3s var(--v5-ease), padding .3s var(--v5-ease),
             background .3s var(--v5-ease), border-color .3s var(--v5-ease);
}
@media (prefers-reduced-motion:reduce){
  #pv2.pv5 .pv5-enter{ animation:none; }
  #pv2.pv5 .pv5-paths,
  #pv2.pv5 .pv5-paths.is-tabs .pv5-path{ transition:none; }
}

/* ============================================================================
   v5 PAKET 10 (29.08.2026) — Zurueck-Weg, Rabatt-Akzent ueberall, Glas-Dock
   ========================================================================= */

/* --- Zurueck-Zeile ueber den Reitern -------------------------------------- */
/* Die Reiter allein wurden nicht als "das war deine Auswahl" gelesen. Diese
   Zeile sagt es aus und bietet den Rueckweg ausdruecklich an. */
#pv2.pv5 .pv5-back{
  display:flex; align-items:center; gap:var(--s2); width:100%;
  margin:0 0 var(--s2); padding:var(--s2) var(--s3);
  border-radius:12px; border:1px solid var(--v5-hair);
  background:rgba(244,241,234,.04);
  color:var(--v5-b66); font-size:12px; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .28s var(--v5-ease), background .28s var(--v5-ease), color .28s var(--v5-ease);
}
#pv2.pv5 .pv5-back[hidden]{ display:none; }
#pv2.pv5 .pv5-back:hover{ border-color:var(--v5-ghair); color:var(--v5-bone); background:rgba(244,241,234,.07); }
#pv2.pv5 .pv5-back:active{ transform:scale(.995); }
#pv2.pv5 .pv5-back-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:20px; height:20px; border-radius:50%;
  background:rgba(181,156,126,.18); color:var(--v5-gold);
  font-size:15px; line-height:1; padding-bottom:2px;
}
#pv2.pv5 .pv5-back-txt{ font-weight:700; color:var(--v5-gold); }
#pv2.pv5 .pv5-back-cur{
  margin-left:auto; color:var(--v5-b40); font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52%;
}
#pv2.pv5 .pv5-back-cur::before{ content:'Dein Weg: '; }/* Streichpreise einheitlich zurueckgenommen. *//* Karten mit Rabatt bekommen die warme Kante — nicht nur der Preis. */
#pv2.pv5 .plan-card:has(.old-price){ border-color:var(--v5-ehair); }
#pv2.pv5 .offer-badge{
  background:rgba(154,75,54,.28) !important;
  border:1px solid var(--v5-ehair) !important;
  color:var(--v5-ember-hi) !important;
}


/* Ohne backdrop-filter (Brave-Schild, aeltere Browser): deckend, damit die
   Leiste nicht im Inhalt verschwimmt. */


/* ---------------------------------------------------------------- FAQ ---- */
/* Kein Rahmen um die ganze Sektion — die einzelnen Fragen tragen ihn schon. */
#pv2.pv5 .section-faq-prices,
#pv2.pv5 #faq{
  border:0 !important; background:transparent !important;
  box-shadow:none !important; padding-left:0; padding-right:0;
}
#pv2.pv5 .faq-item{ padding:var(--s3); }
#pv2.pv5 .faq-item:not(.open) .faq_answer{ display:none; }

/* ------------------------------------------------- Alle-Preise-Sektion --- */
#pv2.pv5 .pv5-alle-sec{ margin-top:calc(var(--s5) * -1); }

/* ============================================================================
   DOCK — die EINZIGE Fassung (29.08.2026, Owner-Vorgabe)

   "Aufbau wie im Mockup, Design wie auf der aktuellen Live-Preisseite."

   AUFBAU (aus sale-gefuehrt.html):
     Etage 1  Promo   — Aussage links, Preis rechts
     Etage 2  Kauf    — Laufzeit-Flag, grosser Preis, CTA mit Kurspreis, Kleingedrucktes

   OPTIK (aus price-v2.css / price-v4.css, also exakt das, was live steht):
     Flaeche  rgba(22,36,26,.62) + blur(24px), Oberkante rgba(255,255,255,.18)
     Fallback rgba(14,24,17,.96)          (Browser ohne backdrop-filter)
     Titel    700 14.5px Jost, #f4f1ea
     Text     500 11.5px Jost, rgba(244,241,234,.42)
     Knopf    linear-gradient(135deg,#d8b98a,#c9a575), #14200f, Pille (999px)

   ⚠ Vor dieser Fassung lagen VIER Dock-Versionen uebereinander (Pakete 5, 7,
   9, 10) — jede hat die vorige nur teilweise ueberschrieben. Genau daran ist
   das Ding dreimal gescheitert. 83 Regeln wurden entfernt; wer hier etwas
   aendert, aendert es HIER und nirgends sonst.
   ========================================================================= */

.pv2-sticky-bar.pv5-dock{
  display:block !important;
  padding:0 !important; gap:0 !important;
  background:transparent !important; border-top:0 !important;
  align-items:stretch !important;
}
/* 30.08.: Das display:block!important oben schlaegt Bootstraps d-md-none —
   dadurch klebte das MOBIL-Dock auch auf dem Desktop ueber der Seite
   (Owner: "verzerrte Preisseite"). Desktop-Versteck hier explizit. */
@media (min-width:768px){
  .pv2-sticky-bar.pv5-dock{ display:none !important; }
}
.pv5-dock .pv3-sticky-variant{
  display:block !important; width:100%; gap:0; padding:0;
}
.pv5-dock .pv3-sticky-variant[hidden]{ display:none !important; }

/* ---- Etage 1: Promo (30.08.: duenner + GLASIGER als die Kaufleiste —
   Owner: "der Zusatztext noch transparenter, Glassmorphism") ---------------- */
.pv2-sticky-bar.pv5-dock .pv5-promo{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:13px; width:100%; box-sizing:border-box;
  padding:7px 16px !important;
  background:rgba(22,36,26,.34);
  -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  border-top:1px solid rgba(255,255,255,.1);
}
.pv2-sticky-bar.pv5-dock .pv5-pi{ flex:1; min-width:0; display:block; }
.pv2-sticky-bar.pv5-dock .pv5-pt{
  display:block;
  font:700 12.5px/1.25 var(--font-sans,'Jost',sans-serif);
  color:rgba(244,241,234,.92); letter-spacing:0;
}
.pv2-sticky-bar.pv5-dock .pv5-ps{
  display:block; margin-top:1px;
  font:500 10.5px/1.35 var(--font-sans,'Jost',sans-serif);
  color:rgba(244,241,234,.45); letter-spacing:0;
}
.pv2-sticky-bar.pv5-dock .pv5-ps b{ color:rgba(244,241,234,.72); font-weight:700; }
/* .pv5-pp (Preis rechts in der Promo) ist raus aus dem Markup — der Preis
   steht EINMAL in der Kaufleiste. prices-v5.js fasst .pv5-pp nullguarded an,
   deshalb braucht es hier keine Regel mehr. Gleiches gilt fuer .pv5-sflag
   ("Ohne Abo") und .pv5-micro (Kleingedrucktes): Markup entfernt, Regeln weg. */

/* ---- Etage 2: Kauf (eine Zeile: Preis + CTA) ---------------------------- */
.pv2-sticky-bar.pv5-dock .pv5-buy{
  display:block !important; width:100%; box-sizing:border-box;
  padding:9px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background:rgba(22,36,26,.62);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,255,255,.14);
}
.pv2-sticky-bar.pv5-dock .pv5-srow{
  display:flex !important; align-items:center; gap:12px; width:100%;
}
.pv2-sticky-bar.pv5-dock .pv5-sprice{ flex:0 0 auto; min-width:64px; }
.pv2-sticky-bar.pv5-dock .pv5-sprice b{
  display:block;
  font:700 21px/1 var(--font-sans,'Jost',sans-serif);
  color:#f4f1ea; letter-spacing:-.01em;
}
.pv2-sticky-bar.pv5-dock .pv5-sale-variant .pv5-sprice b{ color:#e08a6c; }
.pv2-sticky-bar.pv5-dock .pv5-sprice span{
  display:block; margin-top:3px;
  font:500 9px/1.3 var(--font-sans,'Jost',sans-serif);
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(244,241,234,.42);
}
/* Knopf exakt wie live: Gold-Verlauf, dunkle Schrift, Pille. */
.pv2-sticky-bar.pv5-dock .pv2-sticky-btn{
  flex:1 1 auto !important; width:auto !important;
  display:flex !important; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  min-height:44px; padding:6px 16px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#d8b98a,#c9a575) !important;
  border-color:transparent !important; color:#14200f !important;
  font:700 14px/1.15 var(--font-sans,'Jost',sans-serif) !important;
  letter-spacing:0; white-space:nowrap;
  transition:filter .16s, transform .16s cubic-bezier(.32,.72,0,1);
}
.pv2-sticky-bar.pv5-dock .pv2-sticky-btn:hover{ filter:brightness(1.05); }
.pv2-sticky-bar.pv5-dock .pv2-sticky-btn:active{ transform:scale(.985); }
.pv2-sticky-bar.pv5-dock .pv2-sticky-btn small{
  display:block; margin-top:2px;
  font:500 9px/1 var(--font-sans,'Jost',sans-serif);
  color:rgba(20,32,15,.72); letter-spacing:.02em;
}

/* Offenes Burger-Menue liegt UEBER dem Dock (Owner 30.08.2026): Das
   Menue-Overlay steht global auf z-index 4, das Dock auf 1050 — ohne diese
   Regeln verdeckt das Dock den unteren Menue-Teil. Bewusst NUR bei offenem
   Menue und nur hier (diese Datei laedt nur auf der Preisseite), damit die
   globalen Ebenen von main-layout.css sonst unangetastet bleiben. Der
   top-bar-wrapper (eigener Stacking-Kontext, enthaelt den Schliessen-Knopf)
   muss dabei ueber das Overlay, sonst ist der Knopf nicht mehr klickbar. */
body.mobile-menu-open .mobile-header-shell .nav-overlay{ z-index:1065; }
body.mobile-menu-open .mobile-header-shell .top-bar-wrapper{ z-index:1070; }

/* Fallback ohne backdrop-filter — dieselbe Regel wie live in price-v2.css. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pv2-sticky-bar.pv5-dock .pv5-promo,
  .pv2-sticky-bar.pv5-dock .pv5-buy{ background:rgba(14,24,17,.96); }
}#pv2.pv5 .pv5-nb{ white-space:nowrap; }
@media (max-width:359px){
  /* Sehr schmale Geraete: lieber kleiner als dreizeilig. */
  #pv2.pv5 .pv5-claim b{ font-size:13px; }
}

/* ============================================================================
   CLAIM-ZEILE — die EINZIGE Fassung (29.08.2026, nach dem vierten Anlauf)

   Vorher lagen SECHS .pv5-claim-Regeln uebereinander. Eine davon trug
   text-wrap:balance — in Browsern, die text-wrap als EIGENSTAENDIGE
   Eigenschaft fuehren (aeltere Chrome/Brave, Safari-Staende), bricht balance
   den Text AKTIV um, auch wenn daneben white-space:nowrap steht. Deshalb
   sah der Owner weiter drei Zeilen, waehrend jede einzelne meiner Regeln
   fuer sich "richtig" aussah.

   Regel: balance ist hier VERBOTEN. Beide Zeilen sind nowrap; die
   Schriftgroesse skaliert mit der Fensterbreite, damit nowrap nie
   ueber den Rand laeuft.
   ========================================================================= */
#pv2.pv5 .pv5-claim{
  background:transparent; border:0; padding:0;
  margin:0 auto var(--s2); max-width:none;
}
#pv2.pv5 .pv5-claim b{
  display:block;
  white-space:nowrap !important;
  text-wrap:nowrap !important;   /* Browser mit text-wrap als Einzel-Property */
  font-size:clamp(11px, 3.6vw, 15px);
  font-weight:800; color:var(--v5-bone);
  letter-spacing:-.01em; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis;
}
#pv2.pv5 .pv5-claim b s{
  font-size:.8em; color:var(--v5-b40); font-weight:400; margin-left:var(--s1);
  text-decoration:line-through; text-decoration-thickness:1px;
}
#pv2.pv5 .pv5-claim .pv5-sale-p{ color:var(--v5-ember-hi); }
/* Nicht-Sale-Variante: gleiche Optik, eigener Haken fuer kuenftige Abweichungen. */
#pv2.pv5 .pv5-claim-plain{ background:transparent; border:0; }
/* NUR das DIREKTE Kind ist die Belegzeile. Der alte Nachfahren-Selektor
   (.pv5-claim span) traf auch das Preis-Span IM <b> und stellte es mit
   display:block auf eine eigene Zeile — DAS waren die "drei Zeilen", die
   vier Umbruch-Fixes lang niemand fand. Kind-Kombinator ist hier Pflicht. */
#pv2.pv5 .pv5-claim > span{
  display:block; margin-top:var(--s1);
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  font-size:clamp(9px, 2.8vw, 11px);
  color:var(--v5-b66); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis;
}
/* Spans IM Preis (Sale-Farbe usw.) bleiben in der Zeile. */
#pv2.pv5 .pv5-claim b span{ display:inline !important; font-size:inherit; }

/* 31.08. (Journey-Audit): Das Mobil-Dock stand mit transparentem Grund
   direkt ueber dem Seiteninhalt — Text lief durch Text. Deckendes Glas. */
@media (max-width:767.98px){
  .pv2-sticky-bar.pv5-dock{
    background:linear-gradient(180deg, rgba(11,13,14,.72) 0%, rgba(11,13,14,.96) 45%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
    border-top:1px solid rgba(203,180,148,.16) !important;
  }
}


/* ===== Order-Bump an der Probestunden-Karte (19.09.2026) =====
   Ein Knopf, der wie ein Ticket-Abriss unter dem Kaufknopf sitzt. Gold-Rahmen,
   gerechneter Aufpreis, Einzelstunden-Anker. Kein Haken — der Klick IST die Wahl. */
#pv2.pv5 .pv5-bump{
  display:block; width:100%; margin:12px 0 0; padding:12px 14px; text-align:left;
  border:1.5px solid var(--v5-gold); border-radius:14px; background:rgba(203,180,148,.08);
  color:inherit; cursor:pointer; transition:background .2s, transform .2s;
}
#pv2.pv5 .pv5-bump:hover{ background:rgba(203,180,148,.16); transform:translateY(-1px); }
#pv2.pv5 .pv5-bump-k{
  display:inline-block; margin-bottom:6px; padding:3px 9px; border-radius:999px;
  background:var(--v5-gold); color:#0b0d0e; font:800 10.5px/1 var(--v5-body, inherit);
  letter-spacing:.14em; text-transform:uppercase;
}
#pv2.pv5 .pv5-bump-t{ display:block; font-size:14px; line-height:1.45; color:#fff; }
#pv2.pv5 .pv5-bump-t b{ color:var(--v5-gold); font-size:16px; }
#pv2.pv5 .pv5-bump-s{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--v5-b66); }

/* Paket 3 (19.09.2026): Segment mit zwei Tarifen (Ultimate nur fuer Mitglieder sichtbar) */
#pv2.pv5 .p4-seg.p4-seg-2{ grid-template-columns:repeat(2,1fr); }

/* ===== Code-Engine (19.09.2026): Gutscheincode ===== */
#pv2.pv5 .pv5-code{ max-width:560px; margin:0 auto var(--s4,20px); }
#pv2.pv5 .pv5-code-box{
  border:1px solid var(--v5-hair); border-radius:14px; padding:12px 16px;
  background:rgba(244,241,234,.045); color:var(--v5-b66);
}
#pv2.pv5 .pv5-code-box summary{ cursor:pointer; list-style:none; font-size:13.5px; }
#pv2.pv5 .pv5-code-box summary::-webkit-details-marker{ display:none; }
#pv2.pv5 .pv5-code-box summary span{ color:var(--v5-gold); font-weight:700; }
#pv2.pv5 .pv5-code-form{ display:flex; gap:8px; margin-top:12px; }
#pv2.pv5 .pv5-code-input{
  flex:1; min-width:0; padding:12px 14px; border-radius:11px;
  border:1px solid var(--v5-hair); background:rgba(0,0,0,.35); color:#fff;
  font:700 16px/1 inherit; letter-spacing:.14em; text-transform:uppercase;
}
#pv2.pv5 .pv5-code-input::placeholder{ color:var(--v5-b40, rgba(244,241,234,.4)); letter-spacing:.14em; }
#pv2.pv5 .pv5-code-btn{ flex:0 0 auto; width:auto !important; min-width:0; margin:0 !important; padding:12px 18px; }
#pv2.pv5 .pv5-code-input{ flex:1 1 140px; }
#pv2.pv5 .pv5-code-err{ margin:10px 0 0; color:#ff9d8a; font-size:13px; }
#pv2.pv5 .pv5-code-chip{
  border:1.5px solid var(--v5-hair); border-radius:14px; padding:12px 16px;
  background:rgba(244,241,234,.045);
}
#pv2.pv5 .pv5-code-chip.is-on{ border-color:var(--v5-gold); background:rgba(203,180,148,.10); }
#pv2.pv5 .pv5-code-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#pv2.pv5 .pv5-code-k{
  padding:3px 9px; border-radius:999px; background:var(--v5-gold); color:#0b0d0e;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
#pv2.pv5 .pv5-code-name{ color:#fff; font-size:17px; letter-spacing:.12em; }
#pv2.pv5 .pv5-code-rm{ margin-left:auto; }
#pv2.pv5 .pv5-code-rm button{
  background:none; border:0; color:var(--v5-b66); font-size:12px; text-decoration:underline; cursor:pointer; padding:0;
}
#pv2.pv5 .pv5-code-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
#pv2.pv5 .pv5-code-list li{ display:flex; align-items:baseline; gap:10px; font-size:14px; color:var(--v5-b66); }
#pv2.pv5 .pv5-code-list li span{ flex:1; }
#pv2.pv5 .pv5-code-list li b{ color:#fff; font-size:16px; }
#pv2.pv5 .pv5-code-list li s{ opacity:.55; }
#pv2.pv5 .pv5-code-list li em{ font-style:normal; color:var(--v5-gold); font-weight:800; }
#pv2.pv5 .pv5-code-fine{ margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--v5-b66); }