/* =========================================================
   SECTION MONSTERS – Unterseiten (Tools & Funktionen)
   css/subpage.css
   Ergänzt style.css. Nutzt deren Tokens + Klassen
   (.btn, .eyebrow, .feature-grid, .feature-card, .badge).
   Alle eigenen Klassen sind mit .sp- namespaced.
   ========================================================= */

/* min-height: verhindert, dass der Hauptbereich leer/kollabiert bleibt,
   während der Tool-Inhalt aus Firebase noch lädt (Kontakt/Footer laden
   lokal und damit schneller). Ohne das rutscht das Kontaktformular kurz
   sichtbar nach oben, bis der eigentliche Inhalt eintrifft und es wieder
   nach unten schiebt. */
.sp-main { display: block; min-height: 100vh; }

/* Gemeinsamer Innen-Container */
.sp-wrap { width: var(--container); margin-inline: auto; }

/* ---------- Scroll-Reveal (ohne GSAP) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.sp-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 72px;
}
.sp-hero::before {
  /* Lila Radial-Glow als Deko-Akzent */
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: min(720px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(124, 92, 255, .28), transparent 62%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.sp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}
@media (min-width: 900px) {
  .sp-hero-inner { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* Riesige Geister-Nummer als Signatur (Tools sind nummeriert 01–07) */
.sp-ghost-num {
  position: absolute;
  top: calc(var(--header-h) - 6px);
  left: -4px;
  z-index: 0;
  font-weight: 900;
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(124, 92, 255, .16);
  pointer-events: none;
  user-select: none;
}

.sp-hero-copy { position: relative; z-index: 1; }
.sp-hero-copy .eyebrow { display: inline-block; margin-bottom: 18px; }
.sp-title {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.045em;
  margin-bottom: 20px;
}
.sp-title .grad {
  background: var(--purple-grad-135);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sp-lead {
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  margin-bottom: 30px;
}
.sp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Screenshot-Rahmen (schlichter Browser-Look) */
.sp-shot {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}
.sp-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .12);
  pointer-events: none;
}
.sp-shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sp-shot-bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.sp-shot-bar span:nth-child(1) { background: rgba(255, 95, 109, .7); }
.sp-shot-bar span:nth-child(2) { background: rgba(255, 189, 68, .7); }
.sp-shot-bar span:nth-child(3) { background: rgba(139, 214, 38, .7); }
.sp-shot img { display: block; width: 100%; height: auto; }

/* =========================================================
   SEKTIONEN
   ========================================================= */
.sp-section { padding-block: clamp(56px, 8vw, 104px); }
.sp-section--soft { background: var(--bg-soft); }

.sp-section-head { max-width: 62ch; margin-bottom: 40px; }
.sp-section-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.sp-section-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.sp-section-head p { color: var(--muted); font-size: 1.06rem; line-height: 1.6; }

/* Signal-Chips */
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  font-weight: 600;
}
.sp-chip::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(139, 214, 38, .6);
}

/* Feature-Karten: Nummerierung wie auf der Startseite */
.sp-features .feature-card { display: flex; flex-direction: column; }
.sp-features .feature-card span {
  font-size: 12px; font-weight: 900; letter-spacing: .16em;
  color: var(--green); margin-bottom: 12px;
}
.sp-features .feature-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.sp-features .feature-card p { color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* So funktioniert's – Schritte */
.sp-steps { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sp-steps { grid-template-columns: repeat(3, 1fr); } }
.sp-step {
  position: relative;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.sp-step-num {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--purple-grad-135); color: #0a1403;
  font-weight: 900; font-size: 1rem; margin-bottom: 16px;
}
.sp-step h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; }
.sp-step p { color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* =========================================================
   CTA-BAND
   ========================================================= */
.sp-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(64px, 9vw, 120px);
}
.sp-cta::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(760px, 90vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 62%);
  pointer-events: none;
}
.sp-cta-inner { position: relative; z-index: 1; }
.sp-cta h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.04;
  margin-bottom: 18px;
}
.sp-cta p { color: var(--muted); font-size: 1.1rem; line-height: 1.6; max-width: 48ch; margin: 0 auto 30px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px) {
  .sp-hero { padding-top: calc(var(--header-h) + 34px); }
  .sp-hero-actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   DATENGETRIEBENE UNTERSEITEN – zusätzliche Bausteine
   ========================================================= */

/* Bild-Platzhalter (wenn in der JSON noch keine URL steht) */
.sp-shot-ph {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 13px;
  letter-spacing: .04em;
  background: radial-gradient(circle at 50% 38%, rgba(124, 92, 255, .16), transparent 62%);
}

/* Problem-Punkte (Schmerz) */
.sp-points { display: grid; gap: 13px; margin-top: 22px; max-width: 60ch; }
.sp-point {
  display: flex; gap: 13px; align-items: flex-start;
  color: var(--muted); font-size: 1.02rem; line-height: 1.5;
}
.sp-point::before {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px; margin-top: 8px;
  border-radius: 50%;
  background: #ff5f6d;
  box-shadow: 0 0 10px rgba(255, 95, 109, .5);
}

/* Subtool-Karten (Kernfrage = Problem, Text = Lösung) */
.sp-tools { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sp-tools { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sp-tools { grid-template-columns: repeat(3, 1fr); } }
.sp-tool {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-md);
  background: var(--panel);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.sp-tool:hover { transform: translateY(-4px); border-color: rgba(139, 214, 38, .35); }
.sp-tool-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 14px; }
.sp-tool-name { font-size: 1.06rem; font-weight: 800; margin-bottom: 7px; }
.sp-tool-q {
  font-size: .82rem; font-weight: 800; color: var(--green);
  line-height: 1.35; margin-bottom: 11px;
}
.sp-tool-text { color: var(--muted); font-size: .94rem; line-height: 1.55; }
.sp-tool-badge {
  position: absolute; top: 15px; right: 15px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px;
  background: rgba(124, 92, 255, .16); color: #c9b8ff;
  border: 1px solid rgba(124, 92, 255, .32);
}

/* Hero-AI-Band */
.sp-ai {
  border: 1px solid rgba(124, 92, 255, .24);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(124, 92, 255, .14), rgba(168, 85, 247, .05));
}
.sp-ai-inner { padding: clamp(28px, 5vw, 56px); max-width: 70ch; }
.sp-ai-inner .eyebrow { display: inline-block; margin-bottom: 14px; }
.sp-ai-inner h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.08; margin-bottom: 14px;
}
.sp-ai-inner p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; }

/* Fehlerhinweis, falls die JSON nicht geladen werden kann */
.sp-error {
  width: var(--container); margin: calc(var(--header-h) + 80px) auto 120px;
  padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md);
  background: var(--panel); color: var(--muted); text-align: center;
}

/* =========================================================
   PHASE 1 – Split-Sektionen, Subtool-Panel, FAQ, Galerie
   ========================================================= */

/* ---- Zweispaltige Text/Bild-Sektion (Bildseite wählbar) ---- */
.sp-split-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .sp-split-inner { grid-template-columns: 1.02fr .98fr; gap: 56px; }
  /* Bild links statt rechts */
  .sp-split--left .sp-split-media { order: -1; }
}
.sp-split-copy .eyebrow { display: inline-block; margin-bottom: 14px; }
.sp-split-copy h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
  margin-bottom: 14px;
}
.sp-split-copy > p { color: var(--muted); font-size: 1.06rem; line-height: 1.6; }

/* ---- Subtool-Karte: klickbar + Pfeil ---- */
.sp-tool.is-clickable { cursor: pointer; padding-bottom: 56px; }
.sp-tool-arrow {
  position: absolute; right: 16px; bottom: 15px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--green);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.sp-tool-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sp-tool.is-clickable:hover .sp-tool-arrow { background: var(--green); color: #0a1403; transform: translateX(2px); }

/* ---- Slide-in-Panel ---- */
body.sp-locked { overflow: hidden; }
.sp-panel-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(3, 3, 7, .62); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.sp-panel-overlay.open { opacity: 1; visibility: visible; }
.sp-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 3001;
  width: min(560px, 100%);
  background: var(--bg-soft);
  border-left: 1px solid rgba(255, 255, 255, .1);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto;
}
.sp-panel.open { transform: none; }
.sp-panel-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 26px; background: var(--bg-soft);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sp-panel-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.sp-panel-title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; }
.sp-panel-q { font-size: .84rem; font-weight: 800; color: var(--green); margin-top: 6px; }
.sp-panel-close {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .14); color: var(--text);
  transition: background .2s var(--ease);
}
.sp-panel-close:hover { background: rgba(255, 255, 255, .08); }
.sp-panel-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sp-panel-body { padding: 24px 26px 40px; }
.sp-panel-body p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin-bottom: 14px; }
.sp-panel-imgs { display: grid; gap: 12px; margin-top: 20px; }
.sp-panel-imgs img { width: 100%; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); display: block; }

/* ---- FAQ (Look wie Startseite: Haarlinien-Liste) ---- */
.sp-faq { display: flex; flex-direction: column; gap: 0; max-width: 860px; margin: 0 auto; }
.sp-faq-wrap .sp-section-head { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.sp-faq-item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sp-faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, .08); }
.sp-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; text-align: left; background: none;
  font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; color: var(--text); line-height: 1.3;
  transition: color .2s var(--ease);
}
.sp-faq-q:hover { color: var(--white); }
.sp-faq-icon {
  position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.sp-faq-icon::before, .sp-faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--white); border-radius: 2px;
}
.sp-faq-icon::before { width: 12px; height: 1.5px; }
.sp-faq-icon::after  { width: 1.5px; height: 12px; }
.sp-faq-item.open .sp-faq-icon { background: var(--purple-grad-135); border-color: transparent; transform: rotate(45deg); }
.sp-faq-item.open .sp-faq-q { color: var(--white); }
.sp-faq-a { height: 0; overflow: hidden; transition: height .32s var(--ease); }
.sp-faq-a-inner { padding: 0 0 26px; max-width: 720px; color: var(--muted); font-size: 16px; line-height: 1.65; }

/* ---- Bildergalerie + Lightbox ---- */
.sp-gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .sp-gallery { grid-template-columns: repeat(3, 1fr); } }
.sp-gallery-item {
  position: relative; aspect-ratio: 9 / 7; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: var(--panel);
}
.sp-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.sp-gallery-item:hover img { transform: scale(1.05); }
.sp-gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px;
  font-size: 12px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.sp-lightbox {
  position: fixed; inset: 0; z-index: 130; display: none; place-items: center; padding: 24px;
  background: rgba(3, 3, 7, .92);
}
.sp-lightbox.open { display: grid; }
.sp-lightbox img { max-width: min(1100px, 92vw); max-height: 88vh; border-radius: 12px; }
.sp-lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); color: #fff;
}
.sp-lightbox-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }

@media (max-width: 560px) {
  .sp-panel { width: 100%; }
}

/* =========================================================
   PHASE 2 – Kontaktformular (geteilte Mini-Animationen)
   Ersetzt die frühere GSAP-Shake/Fade-Logik, da das Formular
   jetzt auch auf Unterseiten ohne GSAP läuft. Wirkt überall,
   wo /includes/contact.html eingebunden ist (auch Startseite).
   ========================================================= */
@keyframes sm-shake-kf {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.sm-shake { animation: sm-shake-kf .4s ease; }

.sm-fade-out { opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease; }

@keyframes sm-fade-in-kf {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sm-fade-in { animation: sm-fade-in-kf .5s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .sm-shake, .sm-fade-in { animation: none; }
  .sm-fade-out { transition: none; }
}

/* =========================================================
   PHASE 4 – Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf)
   ========================================================= */
.legal-hero {
  padding: calc(var(--header-h) + 64px) 0 24px;
}
.legal-hero .sp-wrap { max-width: 820px; }
.legal-hero .eyebrow { display: inline-block; margin-bottom: 16px; }
.legal-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900;
  letter-spacing: -.035em; line-height: 1.02; margin-bottom: 10px;
}
.legal-updated { color: var(--faint); font-size: 13px; }

.legal-body-wrap { padding: 8px 0 96px; }
.legal-body-wrap .sp-wrap { max-width: 820px; }
.legal-body h2 {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em;
  margin: 44px 0 14px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 1.1rem; font-weight: 800; margin: 28px 0 10px;
}
.legal-body p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: 6px; }
.legal-body a { color: var(--green); text-decoration: underline; text-decoration-color: rgba(139,214,38,.35); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--green); }
.legal-body strong { color: var(--text); font-weight: 800; }

/* =========================================================
   PREISE-SEITE (Plan-Kacheln, Billing-Toggle, Feature-Tabelle)
   ========================================================= */
.pr-hero { padding: calc(var(--header-h) + 72px) 0 32px; }
.pr-hero-inner { max-width: 720px; text-align: center; margin: 0 auto; }
.pr-hero-inner .sp-lead { margin: 0 auto 28px; }

.pr-billing-toggle {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--panel); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
}
.pr-billing-btn {
  padding: 10px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pr-billing-btn.active { background: var(--green); color: #0a1403; }
.pr-billing-badge {
  margin-left: 4px; font-size: 11px; font-weight: 800;
  color: var(--purple-bright, #a855f7);
}
.pr-billing-btn.active .pr-billing-badge { color: #0a1403; }

/* ---- Plan-Kacheln ---- */
.pr-plans-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) { .pr-plans-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.pr-plan-card {
  position: relative;
  display: flex; flex-direction: column;
  text-align: center;
  padding: 32px 26px 28px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--panel);
}
.pr-plan-card--highlight {
  border-color: var(--pr-color, var(--purple-bright));
  box-shadow: 0 0 0 1px var(--pr-color, var(--purple-bright)), 0 24px 60px rgba(124, 92, 255, .18);
  transform: translateY(-6px);
}
.pr-plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px;
  background: var(--pr-color, var(--purple-bright)); color: #fff;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.pr-plan-name { font-size: 1.3rem; font-weight: 900; color: var(--pr-color, var(--text)); margin-bottom: 4px; }
.pr-plan-tagline { color: var(--muted); font-size: 13px; margin-bottom: 18px; min-height: 34px; }
.pr-plan-price-wrap { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 4px; }
.pr-plan-price { font-size: 2.4rem; font-weight: 900; color: var(--pr-color, var(--text)); }
.pr-plan-period { color: var(--muted); font-size: 14px; }
.pr-plan-yearly-note { font-size: 12px; color: var(--green); margin-bottom: 18px; min-height: 16px; }
.pr-plan-price-wrap + .pr-plan-yearly-note { margin-top: -2px; }
.pr-plan-cta {
  display: block; text-align: center; width: 100%;
  padding: 13px 18px; border-radius: 999px;
  background: var(--pr-color, var(--green)); color: #fff;
  font-weight: 800; font-size: 14px; margin-bottom: 20px;
}
.pr-plan-card:not(.pr-plan-card--highlight) .pr-plan-cta { color: #0a0a0f; }
.pr-plan-divider { border: none; border-top: 1px solid rgba(255, 255, 255, .08); margin: 0 0 18px; }
.pr-plan-ideal { font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.pr-plan-usps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; text-align: left; }
.pr-plan-usps li { font-size: 13px; color: var(--muted); line-height: 1.4; }

.pr-yearly-banner {
  margin-top: 28px; padding: 14px 20px; border-radius: 14px;
  background: rgba(139, 214, 38, .08); border: 1px solid rgba(139, 214, 38, .25);
  color: var(--text); font-size: 14px; text-align: center;
}

/* ---- Feature-Vergleichstabelle ---- */
.pr-feature-table { max-width: 920px; margin: 0 auto; }
.pr-feature-header {
  display: grid; grid-template-columns: 1fr repeat(3, 88px);
  gap: 4px; padding: 0 18px 10px;
}
.pr-feature-col { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pr-feature-group { border-top: 1px solid rgba(255, 255, 255, .08); }
.pr-feature-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; text-align: left;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.pr-feature-group-arrow { color: var(--faint); font-size: 12px; }
.pr-feature-rows { display: block; }
.pr-feature-row {
  display: grid; grid-template-columns: 1fr repeat(3, 88px);
  gap: 4px; align-items: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.pr-feature-name { font-size: 13.5px; color: var(--text); line-height: 1.4; padding-right: 12px; }
.pr-feature-cell { text-align: center; }
.pr-feat-yes { color: var(--green); font-size: 18px; font-weight: 800; }
.pr-feat-no { color: var(--faint); font-size: 15px; }
.pr-feat-val { font-size: 12px; font-weight: 700; color: var(--text); }

@media (max-width: 640px) {
  .pr-feature-header, .pr-feature-row { grid-template-columns: 1fr repeat(3, 58px); padding-left: 10px; padding-right: 10px; }
  .pr-feature-name { font-size: 12.5px; }
  .pr-feature-col { font-size: 9.5px; }
}