/* apiara — site / pricing.css
   EINE Wahrheit für die Preis-Darstellung. Genutzt von /preise (subscription/index)
   UND der Landing-Preis-Sektion, damit beide Orte identisch aussehen.
   ElevenLabs-Vorbild: hervorgehobene Mittelkarte mit Banner darüber, gefüllte
   Häkchen-Kreise, Umschalter mit Knopf, abschliessendes Reassurance-Banner. */

/* ---------- Abrechnungs-Umschalter (monatlich/jährlich) ----------
   IDs (#btn-monthly/#btn-yearly) + .active steuert billing-toggle.js — hier nur
   das Aussehen. Der Knopf gleitet via :has() auf die aktive Seite, ohne JS-Änderung. */
.site .bill-wrap{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:2.5rem}
.site .bill-toggle{position:relative;display:inline-flex;padding:4px;border-radius:var(--r-full);
  background:var(--surface-3);border:1px solid var(--border)}
.site .bill-toggle::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:var(--r-full);background:var(--btn-gold-bg);box-shadow:var(--btn-gold-shadow);
  transition:transform .28s var(--ease)}
.site .bill-toggle:has(#btn-yearly.active)::before{transform:translateX(100%)}
.site .bill-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem;border:0;
  background:transparent;cursor:pointer;font-family:var(--sys);font-size:.9rem;font-weight:700;
  color:var(--text-mute);padding:.6rem 1.15rem;border-radius:var(--r-full);transition:color .25s var(--ease)}
.site .bill-btn.active{color:var(--on-gold)}
.site .bill-save{display:inline-flex;align-items:center;padding:.4rem .8rem;border-radius:var(--r-full);
  font-size:.75rem;font-weight:800;white-space:nowrap;background:var(--ok-wash);color:var(--ok)}

/* ---------- Karten-Raster ----------
   align-items:start hält die Seitenkarten oben, damit die Mittelkarte
   mit ihrem Banner darüber hinausragen kann. */
.site .plan-grid{align-items:start;padding-top:2.4rem}

/* ---------- Basiskarte ----------
   Die Kartenfläche (Hintergrund, Rand, Radius, Innenabstand, Schatten) lebt hier,
   nicht in listing.css/.pg-card — so sehen /preise UND die Landing identisch aus,
   auch wenn die Landing listing.css gar nicht lädt. Werte spiegeln .pg-card, damit
   sich auf /preise (dort tragen die Karten zusätzlich .pg-card) nichts ändert. */
.site .plan-card{position:relative;display:flex;flex-direction:column;height:100%;overflow:visible;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:1.5rem;box-shadow:var(--sh-sm)}
.site .plan-card.is-dimmed{opacity:.55;pointer-events:none}
.site .plan-card h3{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:var(--heading)}
.site .plan-name{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}

.site .plan-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;min-height:2.6rem}
.site .plan-was{font-size:1.35rem;font-weight:700;color:var(--text-mute);text-decoration:line-through}
.site .plan-amt{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--heading)}
.site .plan-per{font-size:1rem;font-weight:600;color:var(--text-dim)}
.site .plan-hint{min-height:1.25rem;margin-top:.5rem;font-size:.85rem;font-weight:700;color:var(--accent-bright)}
.site .plan-desc{margin-top:1rem;font-size:.95rem;line-height:1.55;color:var(--text-dim);min-height:3em}
.site .plan-anchor{margin-top:.5rem;font-size:.82rem;font-style:italic;color:var(--text-mute)}

.site .plan-feats{list-style:none;display:flex;flex-direction:column;gap:.8rem;margin:1.5rem 0 1.75rem;flex:1}
.site .plan-feats li{display:flex;align-items:flex-start;gap:.7rem;font-size:.95rem;line-height:1.4;color:var(--text)}
.site .plan-feats li.off{color:var(--text-mute)}
.site .plan-feats strong{font-weight:700;color:var(--text)}
.site .plan-check{flex:none;width:1.4rem;height:1.4rem;margin-top:.05rem;border-radius:var(--r-full);
  display:grid;place-items:center;background:var(--accent)}
.site .plan-check svg{width:.82rem;height:.82rem;color:var(--on-accent)}
.site .plan-check.no{background:transparent;border:1.5px solid var(--text-mute)}
.site .plan-check.no i{display:block;width:.55rem;height:1.5px;border-radius:2px;background:var(--text-mute)}

/* ---------- Fuss / CTA ---------- */
.site .plan-foot{margin-top:auto}
.site .plan-btn{width:100%}
.site .plan-hintline{text-align:center;margin-top:.6rem;font-size:.75rem;color:var(--text-mute)}
.site .plan-btn--current{display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:14px 20px;border-radius:var(--r-lg);font-family:var(--sys);font-weight:700;font-size:1rem;
  cursor:not-allowed;background:var(--chip-bg);color:var(--text-dim);border:1px dashed var(--border-strong)}

/* ---------- Hervorgehobene Mittelkarte (Empfohlen) ----------
   Kein Rahmen um die Karte: der Wrapper hat weder Padding noch Hintergrund, damit
   die Pro-Karte exakt so breit ist wie die Seitenkarten. Er zieht die Karte nur um
   die Banner-Höhe nach oben, sodass die Karten-Körper auf einer Linie stehen und
   NUR das Banner über die Seitenkarten hinausragt (align-items:start + plan-grid
   padding-top schaffen den Platz dafür). Die Hervorhebung sitzt auf der Karte selbst. */
.site .plan-featured-wrap{position:relative;margin-top:-2.4rem}
.site .plan-featured-banner{display:flex;align-items:center;justify-content:center;gap:.5rem;height:2.4rem;
  font-size:.82rem;font-weight:800;letter-spacing:.02em;color:var(--accent-bright)}
.site .plan-featured-banner svg{width:.95rem;height:.95rem}
.site .plan-featured-banner.is-current{color:var(--text-mute)}
.site .plan-card--featured{border-color:var(--accent-deep);
  box-shadow:0 0 0 1px rgba(245,179,1,.18),0 22px 55px -26px rgba(0,0,0,.7),0 0 44px -14px rgba(245,179,1,.16)}

/* ---------- Reassurance-Banner unter den Karten ---------- */
.site .plan-banner{margin-top:1.5rem;padding:1.6rem;border-radius:var(--r-2xl);text-align:center;
  background:var(--surface-3);border:1px solid var(--border)}
.site .plan-banner h2{font-size:1.15rem;font-weight:800;color:var(--heading)}
.site .plan-banner p{margin-top:.4rem;font-size:.98rem;color:var(--text-dim)}
.site .plan-banner .honeytext{background:var(--honeytext);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em}

/* ---------- Video-Addon (öffentlicher Tarif-Abschnitt unter den Hauptplänen) ----------
   Die Karten selbst sind gewöhnliche .plan-card/.pg-card — hier nur der abgesetzte
   Abschnitt mit zentrierter Kopfzeile über den drei Tarifkarten. */
.site .addon-sec{margin-top:3.5rem}
.site .addon-head{text-align:center;max-width:44rem;margin:0 auto 2rem}
.site .addon-icon{width:3rem;height:3rem;margin:0 auto .75rem;color:var(--accent-bright)}
.site .addon-head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--heading)}
.site .addon-head p{margin-top:.6rem;color:var(--text-dim);line-height:1.6}

@media(max-width:860px){
  .site .plan-grid{padding-top:0}
  .site .plan-featured-wrap{margin-top:0}
}