/* Bewerbify Paywall – Checkout („Deine Mappe ist fertig“), „Fast fertig“, Abo-Download, Erfolg.
   Eigene Datei, damit sie unabhängig von generator.css gepflegt werden kann. Lädt nach generator.css
   und nutzt dessen Tokens (--blue, --ink, --line …). Varianten: .pw-v-a (Liste), .pw-v-b (Tarifkarten),
   .pw-v-c (Bestellübersicht). Siehe docs/paywall-recherche.md. */

/* ------------------------------------------------------------ Rahmen */
.pw-back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:8px 0;margin-bottom:8px}
.pw-back svg{width:18px;height:18px}
.pw-back:hover{color:var(--ink)}
.ga-paywall>.pw-back{display:flex;width:100%;max-width:1240px;margin:20px auto 0;padding:8px 40px}

.pw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,520px);grid-template-areas:"intro card" "more card";grid-template-rows:auto 1fr;column-gap:72px;max-width:1240px;margin:0 auto;padding:8px 40px 72px;align-items:start}
.pw-v-b{grid-template-columns:minmax(0,1fr) minmax(600px,680px);column-gap:56px}
.pw-intro{grid-area:intro;min-width:0}
.pw-more{grid-area:more;min-width:0}
.pw-right{grid-area:card;min-width:0}

/* ------------------------------------------------------------ Linke Spalte */
.pw-h{font:600 40px/1.12 var(--f-head);color:var(--ink);margin:0 0 10px;letter-spacing:-.6px}
.pw-lead{font-size:17px;color:var(--muted);margin:0 0 16px;max-width:46ch}
.pw-stack{position:relative;aspect-ratio:100/68;max-width:560px;margin:0 0 30px}
.pw-stack .gg-thumb{position:absolute;top:0;width:46%;border-radius:4px;box-shadow:0 1px 3px rgba(16,24,40,.08),0 18px 40px rgba(16,24,40,.14);left:calc(var(--i) * 27%);transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3deg)) translateY(calc(var(--i) * 6px));z-index:calc(10 - var(--i));transition:transform .25s}
.pw-stack:hover .gg-thumb{transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 1.5deg)) translateY(calc(var(--i) * 3px - 3px))}

.pw-proof{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:15px;font-weight:600;color:var(--ink)}
.pw-proof svg{width:22px;height:22px;color:var(--blue);flex:none}

.pw-docs{list-style:none;margin:6px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pw-docs li{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.pw-docs svg{width:16px;height:16px;color:var(--ok)}
.pw-docs small{font-size:12px;font-weight:500;color:var(--muted)}

.pw-trust{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;max-width:600px}
.pw-trust li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.45}
.pw-trust svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:1px}
.pw-trust strong{display:block;color:var(--ink);font-size:15px}
.pw-trust a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pw-trust a:hover{color:var(--ink)}

.pw-review{margin:0;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);max-width:600px}
.pw-stars{color:#00B67A;letter-spacing:2px;font-size:16px;line-height:1}
.pw-review blockquote{margin:8px 0 6px;font-size:15px;color:var(--ink);border:0;padding:0}
.pw-review figcaption{font-size:13px;color:var(--muted)}

/* ------------------------------------------------------------ Bestellkarte */
.pw-note{background:#FFF7E6;color:#7A4B00;border-radius:12px;padding:12px 16px;font-size:14px;margin-bottom:14px}
.pw-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 28px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 20px 50px rgba(16,24,40,.08)}
#generator .pw-card-h{font:600 19px/1.3 var(--f-head);color:var(--ink);margin:0 0 14px;letter-spacing:-.1px}

.pw-radio{width:20px;height:20px;border-radius:50%;border:2px solid #C3C8D8;flex:none;position:relative;background:#fff;transition:.15s}
.is-on>.pw-radio,.is-on .pw-tier-head .pw-radio{border-color:var(--blue)}
.is-on>.pw-radio::after,.is-on .pw-tier-head .pw-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)}
.pw-tag{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--blue);background:var(--blue-50);padding:3px 8px;border-radius:99px}
.pw-plans input,.pw-tiers input,.pw-seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
:is(.pw-plan,.pw-tier,.pw-seg-opt):has(input:focus-visible){outline:3px solid rgba(61,105,255,.3);outline-offset:2px}

.pw-incl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pw-incl li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.45}
.pw-incl svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:1px}
.pw-incl-sm{gap:6px}
.pw-incl-sm li{font-size:13px;gap:8px}
.pw-incl-sm svg{width:16px;height:16px}

/* A – Liste: eine Zeile pro Paket, das gewählte klappt seine Leistungen auf */
.pw-plans{display:grid;gap:10px}
.pw-plan{display:grid!important;grid-template-columns:20px minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}
.pw-plan:hover{border-color:#C9CFDD}
.pw-plan.is-on{border-color:var(--blue);background:#FAFBFF}
.pw-plan-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.pw-plan-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:15.5px;color:var(--ink)}
.pw-plan-desc{font-size:13px;color:var(--muted)}
.pw-plan-price{display:flex;flex-direction:column;align-items:flex-end}
.pw-plan-price strong{font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pw-plan-price small{font-size:12px;color:var(--muted)}
.pw-plan-more{grid-column:2/-1;display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.pw-plan.is-on .pw-plan-more{display:block}
.pw-plan-fine{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)}

/* B – Tarifkarten nebeneinander, jede mit vollständiger Leistungsliste */
.pw-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:10px}
.pw-tier{display:flex!important;flex-direction:column;gap:12px;position:relative;padding:20px 14px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}
.pw-tier:hover{border-color:#C9CFDD}
.pw-tier.is-on{border-color:var(--blue);background:#FAFBFF}
.pw-tier-rec{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;background:var(--blue);padding:4px 10px;border-radius:99px}
.pw-tier-head{display:flex;gap:10px;align-items:flex-start}
.pw-tier-head .pw-radio{margin-top:1px}
.pw-tier-name{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.pw-tier-price{display:flex;flex-direction:column;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.pw-tier-price strong{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.pw-tier-price small{font-size:12.5px;color:var(--muted)}
.pw-tier-note{margin-top:auto;font-size:12px;color:var(--muted);line-height:1.4}

/* C – Bestellübersicht: Umschalter, Beleg, Ablauf auf einen Blick */
.pw-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--bg);margin-bottom:18px}
.pw-seg-opt{display:flex!important;flex-direction:column;align-items:center;gap:1px;padding:9px 6px;border-radius:9px;cursor:pointer;font-weight:600;font-size:14px;color:var(--muted);transition:background .15s,color .15s}
.pw-seg-opt small{font-size:12px;font-weight:500}
.pw-seg-opt:hover{color:var(--ink)}
.pw-seg-opt.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.pw-receipt{display:grid;gap:14px}
.pw-rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pw-rc-head strong{display:block;font-size:17px;color:var(--ink)}
.pw-rc-head small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.pw-rc-head b{font-size:17px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pw-steps{list-style:none;margin:2px 0 0;padding:14px 16px 2px;border-radius:12px;background:var(--bg)}
.pw-steps li{position:relative;display:flex;flex-direction:column;padding:0 0 12px 24px;font-size:13.5px;line-height:1.4}
.pw-steps li::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;border:2px solid var(--blue);background:#fff}
.pw-steps li:first-child::before{background:var(--blue)}
.pw-steps li:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:17px;bottom:2px;width:2px;background:var(--blue-100)}
.pw-steps b{color:var(--ink);font-weight:600}
.pw-steps span{color:var(--muted)}

/* Summe + Abo-Hinweis direkt über Widerruf und Button (alle Varianten) */
.pw-total{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;margin:18px 0 16px;padding-top:16px;border-top:1px solid var(--line-2)}
.pw-total-l{font-size:15px;font-weight:600;color:var(--ink)}
.pw-total-p{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.pw-total-p small{font-size:13px;font-weight:500;color:var(--muted);margin-left:6px}
.pw-fine{grid-column:1/-1;margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--text)}

.pw-email{margin-bottom:16px}
.pw-consent{display:flex!important;gap:12px;align-items:flex-start;cursor:pointer;font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 18px;padding:14px 16px;border-radius:12px;background:var(--bg)}
.pw-consent input{position:absolute;opacity:0;width:1px;height:1px}
.pw-box{width:20px;height:20px;border-radius:6px;border:1.5px solid #B9C0D2;background:#fff;flex:none;display:grid;place-items:center;color:transparent;transition:.15s;margin-top:1px}
.pw-box svg{width:14px;height:14px}
.pw-consent.is-on .pw-box{background:var(--blue);border-color:var(--blue);color:#fff}
.pw-consent:focus-within .pw-box{outline:3px solid rgba(61,105,255,.3);outline-offset:1px}
.pw-consent.is-missing .pw-box{border-color:var(--err);box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.pw-consent.is-missing{color:var(--err)}
.pw-consent.is-shake{animation:pw-shake .4s}
@keyframes pw-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

.pw-cta{width:100%;height:58px;border:0;border-radius:14px;background:var(--blue);color:#fff;font:700 17px/1 var(--f-ui);letter-spacing:.1px;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,opacity .15s;box-shadow:0 8px 20px rgba(61,105,255,.24)}
.pw-cta:hover{background:var(--blue-600)}
.pw-cta:disabled{opacity:.7;cursor:progress}
.pw-spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:g-spin .7s linear infinite}
.pw-cta.is-busy .pw-spin{display:inline-block}
@keyframes g-spin{to{transform:rotate(360deg)}}
.pw-err{margin:12px 0 0;color:var(--err);font-size:14px;text-align:center}

.pw-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 10px;font-size:13px;color:var(--muted)}
.pw-secure svg{width:15px;height:15px}

/* Zahlungsarten: Original-Marken, einheitliche Höhe, neutrale Akzeptanz-Kacheln für Visa, Mastercard, PayPal */
.pw-pm{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pm{display:inline-flex;align-items:center;justify-content:center;height:26px;flex:none}
.pm img{display:block;height:100%;width:auto;max-width:none}
.pm-tile{min-width:40px;padding:0 7px;background:#fff;border:1px solid #D9DDE6;border-radius:4px}
.pm-visa img{height:9px}
.pm-mastercard img{height:16px}
.pm-paypal img{height:13px}

.pw-legal{margin:12px 0 0;font-size:12px;color:var(--faint);text-align:center}
.pw-legal a{color:var(--muted)}

/* ------------------------------------------------------------ „Fast fertig“ und Erfolg (generator.js) */
.pw-missing{max-width:620px;margin:0 auto;padding:28px 24px 64px}
.pw-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pw-check li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15px;color:var(--ink)}
.pw-check li span:nth-child(2){flex:1}
.pw-check em{font-style:normal;font-size:12px;font-weight:700;color:var(--err);margin-left:6px}
.pw-dot{width:24px;height:24px;border-radius:50%;border:2px solid #C9CFDD;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700}
.pw-check li.is-ok{color:var(--muted)}
.pw-check li.is-ok .pw-dot{background:#DDF3E7;border-color:#DDF3E7;color:var(--ok)}
.pw-check li.is-req .pw-dot{border-color:var(--err)}
.pw-success{text-align:center}
.pw-ok{width:64px;height:64px;border-radius:50%;background:#DDF3E7;color:var(--ok);font-size:32px;display:grid;place-items:center;margin:20px auto 16px}
.pw-success .pw-lead{margin:0 auto 24px}

/* ------------------------------------------------------------ Laptop: Tarifkarten brauchen Platz */
@media (max-width:1279px){
  .pw-grid{column-gap:48px;padding-left:28px;padding-right:28px}
  .pw-v-b{grid-template-columns:minmax(0,1fr) minmax(560px,620px)}
}

/* ------------------------------------------------------------ Mobil: Überschrift + Vorschau, dann Karte, dann Details */
@media (max-width:1023px){
  .ga-paywall>.pw-back{margin:8px 0 0;padding:8px 16px}
  .pw-grid,.pw-v-b{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "card" "more";grid-template-rows:auto;row-gap:24px;padding:4px 16px 48px}
  .pw-h{font-size:28px}
  .pw-lead{font-size:16px;margin-bottom:12px}
  .pw-stack{max-width:250px;margin:0 0 16px}
  .pw-proof{font-size:14px;margin-bottom:0}
  .pw-card{padding:20px 16px 18px;border-radius:16px}
  .pw-trust{grid-template-columns:minmax(0,1fr)}
  .pw-docs{margin-top:0}
  /* B mobil: Karten untereinander, Leistungen nur beim gewählten Paket */
  .pw-tiers{grid-template-columns:minmax(0,1fr);gap:12px}
  .pw-tier{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:16px}
  .pw-tier.is-rec{padding-top:20px}
  .pw-tier-rec{left:16px;transform:translateY(-50%)}
  .pw-tier-price{grid-column:2;grid-row:1;align-items:flex-end;padding:0;border:0}
  .pw-tier-price strong{font-size:19px}
  .pw-tier .pw-incl,.pw-tier-note{grid-column:1/-1;padding-left:30px}
  .pw-tier .pw-incl{display:none;margin-top:8px}
  .pw-tier.is-on .pw-incl{display:grid}
  .pw-tier-note{margin-top:2px}
  .pw-seg-opt{font-size:13.5px;padding:8px 4px}
  .pw-cta{height:56px;font-size:15.5px;padding:0 12px;white-space:nowrap}
}