/* WebsiteWerk Pricing Matrix PRO 2.8 */ 
.ww-pmp{color:#1f2937}
:where(.ww-pmp, .ww-pmp *){border-radius:3px}

/* Tabelle */
.ww-pmp .matrix{background:#fff;border:1px solid #e6ebf2;overflow:visible}
.ww-pmp .row{display:grid;grid-template-columns:1.25fr repeat(3,1fr);border-bottom:1px solid #edf1f7}
.ww-pmp .row.head{background:#f7fafc}
.ww-pmp .row>.col{padding:22px;border-right:1px solid #edf1f7;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;flex-direction: column;}
.ww-pmp .row>.col:last-child{border-right:0}
.ww-pmp .col--feature.left{display: flex;justify-content: flex-start;text-align: left;flex-direction: row;align-items: center;}
.ww-pmp .feature-label{display:inline-flex;align-items:center;gap:10px;color:var(--label,#1f2937)}
.ww-pmp .col--plan.is-featured{background:var(--featured-bg, rgba(22,104,227,.08))}

/* Kopfbereich pro Plan */
.ww-pmp .plan-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%;text-align:left;align-items: center;min-height:116px;}
.ww-pmp .plan-title{font-weight:500;font-size:30px;}

/* Preise + Sparhinweis (zentriert, Save separat je Modus) */
.ww-pmp .price{
  position:relative;
  min-height:50px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Preis-Layer übereinander, zentriert und ohne Zeilenumbruch */
.ww-pmp .price .price-month,
.ww-pmp .price .price-year{
  position:absolute;
  left:50%; top:0;
  transform:translate(-50%,0);
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  white-space:nowrap;              /* kein Umbruch vor € oder / Jahr */
  transition:opacity .28s ease, transform .28s ease;
}

.ww-pmp .price .period{font-size:12px;opacity:.7;white-space:nowrap}
.ww-pmp .price b{font-size:22px;font-weight:400}
.ww-pmp .old-price{font-size:18px;color:var(--old,#6b7280);text-decoration:line-through;margin-right:4px;font-weight:500;opacity:.85}

/* Spartext-Blöcke UNTER den Preisen */
.ww-pmp .save-wrap{
  width:100%;
  margin-top:40px;
  text-align:center;
}
.ww-pmp .save-text{
  display:block;
  font-size:14px;
  color:var(--save,#059669);
  font-weight:500;
  margin-left:0;
}

/* Nur die passende Sparzeile anzeigen */
.ww-pmp .price .price-month + .save-wrap{display:block}
.ww-pmp .price .price-year + .save-wrap{display:none}
.ww-pmp[data-billing="yearly"] .price .price-month + .save-wrap{display:none}
.ww-pmp[data-billing="yearly"] .price .price-year + .save-wrap{display:block}

/* Monats-/Jahresumschaltung für Preis-Layer */
.ww-pmp .price .price-year{opacity:0;transform:translate(-50%,6px)}
.ww-pmp[data-billing="yearly"] .price .price-month{opacity:0;transform:translate(-50%,-6px)}
.ww-pmp[data-billing="yearly"] .price .price-year{opacity:1;transform:translate(-50%,0)}

/* CTA volle Breite */
.ww-pmp .btn-primary.full{display:block;width:100%;padding:12px 16px;background:var(--btn-bg,#1668e3);color:var(--btn-text,#fff);text-decoration:none;font-weight:500;text-align:center;transition:background .2s ease;margin-top:10px}
.ww-pmp .btn-primary.full:hover{background:var(--btn-bg-hover,#0D4EAF)}
.ww-pmp .btn-wrap.full{width:100%;margin-top:10px}

/* CTA Sichtbarkeit je Abrechnungsmodus */
.ww-pmp .btn-primary.full.cta,
.ww-pmp .btn-wrap.full.cta{display:none !important;}

.ww-pmp[data-billing="monthly"] .btn-primary.full.cta-month,
.ww-pmp[data-billing="monthly"] .btn-wrap.full.cta-month{display:block !important;}

.ww-pmp[data-billing="yearly"] .btn-primary.full.cta-year,
.ww-pmp[data-billing="yearly"] .btn-wrap.full.cta-year{display:block !important;}

/* Ribbon */
.ww-pmp .ribbon{position:absolute;top:-40px;left:0;right:0;background:var(--primary,#1668e3);color:#fff;padding:8px 14px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:3px 3px 0 0;}

/* Zellen */
.ww-pmp .cell{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ww-pmp .cell.is-check{color:var(--check,#16a34a)}
.ww-pmp .cell.is-cross{color:var(--cross,#ef4444)}
.ww-pmp .cell.is-dash{color:var(--dash,#6b7280)}
.ww-pmp .ww-pmp-ico{width:20px;height:20px}

/* Info + Label (optional gestrichelt) */
.ww-pmp .info{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--label,#1f2937)}
.ww-pmp .label-text.dashed{border-bottom:1px dashed var(--dashed,#9ca3af)}
.ww-pmp .ww-pmp-ico-info{width:22px;height:22px}
.ww-pmp .feat-label{display: flex;align-items: center;gap: 10px;}

/* Tooltip */
.ww-pmp-tooltip{position:fixed;z-index:999999;max-width:300px;background:var(--tt-bg,#111827);color:var(--tt-txt,#fff);padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.35);font-size:12px;line-height:1.35;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s ease, transform .2s ease}
.ww-pmp-tooltip.is-visible{opacity:1;transform:translateY(0)}

/* Toggle */
.ww-pmp .pricing-toggle{display:flex;align-items:center;gap:12px;margin:12px 0 16px}
.ww-pmp .pricing-toggle .lbl{font-weight:600;opacity:.9}
.ww-pmp .pricing-toggle .switch{width:56px;height:28px;background:#e5e7eb;position:relative;border:0;cursor:pointer;border-radius:3px}
.ww-pmp .pricing-toggle .switch:focus{outline:2px solid var(--primary,#1668e3);outline-offset:2px}
.ww-pmp .pricing-toggle .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;background:var(--primary,#1668e3);transition:transform .25s ease-in-out;border-radius:3px}
.ww-pmp[data-billing="yearly"] .pricing-toggle .knob{transform:translateX(28px)}

/* Zwischenüberschriften (Desktop) */
.ww-pmp .row.subheading .col{background:var(--sub-bg,#f3f6fb)}
.ww-pmp .sub-head{display:flex;align-items:center;justify-content:space-between;font-weight:500;color:var(--sub-txt,#111827)}
.ww-pmp .sub-head .chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:10px;transition:transform .25s ease}
.ww-pmp [aria-expanded="false"] .sub-head .chev{transform:rotate(-135deg)}
.ww-pmp .row.feature.is-collapsed{display:none}

/* Mobile */
.ww-pmp .accordions{display:none}
.ww-pmp .acc{border:1px solid #d9dee8;padding:14px;margin-bottom:14px;background:#fff}
.ww-pmp .acc-head{display: flex;align-items: center;justify-content: space-between;gap: 0;flex-direction: column;margin-bottom: 25px;}
.ww-pmp .acc-title{font-weight:600;font-size:30px;}
.ww-pmp .acc-price .price{min-height:22px}
.ww-pmp .acc-body{margin-top:12px}
.ww-pmp .acc-features{list-style:none;margin:12px 0 0;padding:8px;display:flex;flex-direction:column;gap:8px;overflow:hidden;transition:max-height .55s ease-in-out}
.ww-pmp .acc-features li{display:flex;justify-content:space-between;gap:12px}
.ww-pmp .acc-features li.subheading{background:var(--sub-bg,#f3f6fb);font-weight:500;color:var(--sub-txt,#111827);padding:10px}
.ww-pmp .lnk-more{display:inline-block;margin:10px 0 0 8px;text-decoration:underline;color:var(--link,#1668e3);cursor:pointer}

@media (max-width: 768px){
  .ww-pmp .matrix{display:none}
  .ww-pmp .accordions{display:block}
  .ww-pmp .btn-primary.full{padding:14px 16px;font-size:16px}
}