/* ============================================================
   Bewertungsinstitut - landing.css  (Pricing, Intro, Hub, Contact)
   ============================================================ */

/* ---------- Intro prose ---------- */
.section .wrap>p{color:var(--ink-2)}
.intro-prose p{font-size:1.02rem;color:var(--ink-2);margin-bottom:1.2rem}

/* ---------- Pricing ---------- */
.pricing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:38px}
.pricing-head .sec-head{margin:0;text-align:left}
.pricing-note-top{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--pink);
  background:var(--bg-soft);padding:.5rem .9rem;border-radius:999px}
.pricing-note-top svg{width:16px;height:16px}
.lp-pricing{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch}
.lp-card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:26px 20px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.lp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.lp-card--best{border-color:var(--pink);box-shadow:var(--shadow);transform:scale(1.03)}
.lp-card--best:hover{transform:scale(1.03) translateY(-5px)}
.lp-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#3a2a00;
  font-size:.7rem;font-weight:800;padding:.3rem .8rem;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px rgba(255,196,0,.4)}
.lp-name{font-size:.85rem;font-weight:800;letter-spacing:.04em;color:var(--pink);text-transform:uppercase}
.lp-sub{font-size:.78rem;color:var(--muted);margin-bottom:14px}
.lp-count{display:flex;align-items:baseline;gap:.4rem;margin-bottom:14px}
.lp-count b{font-size:2.1rem;font-weight:900;color:var(--ink)}
.lp-count span{font-size:.8rem;color:var(--muted)}
.lp-price{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:16px}
.lp-total{font-size:1.7rem;font-weight:900;color:var(--pink)}
.lp-total .cur{font-size:1rem;margin-left:2px}
.lp-per{font-size:.76rem;color:var(--muted);margin-top:4px}
.lp-per b{color:var(--ink)}
.lp-feat{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.lp-feat li{display:flex;gap:.5rem;align-items:flex-start;font-size:.83rem;color:var(--ink-2)}
.lp-feat svg{flex:none;width:16px;height:16px;color:var(--pink);margin-top:2px}
.lp-cta .btn{width:100%;justify-content:center}
.pricing-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;margin-top:32px;
  font-size:.86rem;color:var(--muted)}
.pf-i{display:inline-flex;align-items:center;gap:.4rem}
.pf-i::before{content:"✓";color:var(--pink);font-weight:900}
.pf-i a{color:var(--pink);font-weight:700;text-decoration:underline}

/* ---------- Platform Hub / Overview grid ---------- */
.hub-hero{background:linear-gradient(135deg,var(--pink) 0%,var(--pink-dark) 100%);color:#fff;
  border-radius:var(--radius-lg);padding:46px 40px;margin-bottom:14px;display:flex;
  align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.hub-hero-copy{max-width:56ch}
.hub-hero h1{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:.7rem}
.hub-hero p{color:#ffe4ef;font-size:1.05rem;margin:0}
.hub-hero-badge{flex:none;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;text-align:center}
.hub-hero-badge b{display:block;font-size:2.2rem;font-weight:900;color:var(--amber)}
.hub-hero-badge span{font-size:.72rem;color:#fff}
.discount-band{background:var(--ink);color:#fff;border-radius:14px;padding:16px 24px;text-align:center;
  font-size:.95rem;margin-bottom:30px;font-weight:600}
.discount-band b{color:var(--amber);letter-spacing:.05em}
.hub-lead{text-align:center;color:var(--muted);margin-bottom:32px;font-size:1.02rem}
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hub-tile{display:block;background:linear-gradient(150deg,var(--pink) 0%,var(--pink-dark) 100%);
  border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;color:#fff}
.hub-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hub-logo-box{background:#fff;border-radius:12px;height:96px;display:grid;place-items:center;padding:16px;margin-bottom:12px}
.hub-logo-box img{max-height:52px;max-width:82%;width:auto;object-fit:contain}
.hub-logo-fallback{font-weight:900;font-size:1.15rem;color:var(--pink);text-align:center;letter-spacing:-.01em}
.hub-tile-name{font-weight:800;font-size:.92rem;text-transform:uppercase;letter-spacing:.02em;padding:0 6px}
.hub-tile-meta{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px;font-size:.8rem}
.hub-tile-buy{display:inline-flex;align-items:center;gap:.3rem;color:#ffe4ef;font-weight:600}
.hub-tile-price{color:var(--amber);font-weight:800}
@media(max-width:960px){.hub-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.hub-grid{grid-template-columns:repeat(2,1fr)}.hub-hero{padding:32px 24px}}

/* ---------- Contact section (marketingstars24-style) ---------- */
.contact{background:linear-gradient(135deg,var(--pink) 0%,var(--grad-a) 60%,var(--pink-dark) 100%);
  color:#fff;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;
  background:repeating-conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.05) 0deg 8deg,transparent 8deg 16deg);
  opacity:.5;pointer-events:none}
.contact .wrap{position:relative;z-index:2}
.contact h2{color:#fff;text-align:center;max-width:26ch;margin:0 auto 40px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.trust-badges{display:flex;flex-direction:column;gap:18px;justify-content:center}
.trust-badge{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:20px 22px}
.trust-badge .tb-ic{flex:none;width:48px;height:48px;border-radius:12px;background:var(--amber);
  color:#3a2a00;display:grid;place-items:center;line-height:0}
.trust-badge .tb-ic svg{width:24px;height:24px;display:block}
.trust-badge b{display:block;font-size:1.02rem;text-transform:uppercase;letter-spacing:.02em}
.trust-badge span{font-size:.85rem;color:#ffe4ef}
.contact-form{background:#fff;border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-lg)}
.cform-row{display:grid;gap:14px;margin-bottom:14px}
.cform-row.two{grid-template-columns:1fr 1fr}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.field label .req{color:var(--pink)}
.field input,.field select,.field textarea{width:100%;background:var(--field);border:1.5px solid var(--field-line);
  border-radius:12px;padding:.8rem .9rem;font:inherit;font-size:.92rem;color:var(--ink);transition:border-color .16s ease}
.field input::placeholder,.field textarea::placeholder{color:#9b8ea0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.cform-submit{width:100%;justify-content:center;margin-top:6px}
.cform-note{font-size:.76rem;color:var(--muted);text-align:center;margin-top:12px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.cform-row.two{grid-template-columns:1fr}}

/* ---------- Quantity picker (hero card home) ---------- */
.qpick{margin-top:16px}
.qpick-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.qpick-tab{flex:1;min-width:70px;padding:.5rem;border:1.5px solid var(--field-line);border-radius:10px;
  background:#fff;font-weight:700;font-size:.82rem;cursor:pointer;color:var(--ink)}
.qpick-tab.active{background:var(--pink);color:#fff;border-color:var(--pink)}
.qpick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qpick-cell{border:1.5px solid var(--field-line);border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;
  transition:.16s ease;text-decoration:none;color:var(--ink)}
.qpick-cell:hover{border-color:var(--pink);transform:translateY(-2px)}
.qpick-cell b{display:block;font-size:1.3rem;font-weight:900;color:var(--pink)}
.qpick-cell span{font-size:.7rem;color:var(--muted)}

/* ---------- Review strip (Review schema visual) ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.review-stars{color:var(--amber);letter-spacing:1px;font-size:.95rem;margin-bottom:.6rem}
.review-text{font-size:.9rem;color:var(--ink-2);margin-bottom:1rem}
.review-author{display:flex;align-items:center;gap:.6rem}
.review-avatar{width:38px;height:38px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-weight:800}
.review-name{font-size:.85rem;font-weight:700}
.review-role{font-size:.75rem;color:var(--muted)}
@media(max-width:820px){.reviews{grid-template-columns:1fr}}

/* ---------- Legal / prose pages ---------- */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.3rem;margin:2rem 0 .8rem;color:var(--pink)}
.legal p,.legal li{color:var(--ink-2);font-size:.96rem}
.legal ul{padding-left:1.2rem}

/* ---- Logos fuellen das weisse Feld deutlich besser aus (Nico 17:57) ---- */
.hub-logo-box{padding:14px 18px}
.hub-logo-box img{max-height:72px;max-width:94%;width:auto;object-fit:contain}
@media(max-width:560px){
  .hub-logo-box{height:88px;padding:12px 14px}
  .hub-logo-box img{max-height:64px;max-width:92%}
}