/* ============================================================
   Certvia — Entwurf B (Struktur an visitvia.de orientiert)
   Ergänzt css/styles.css — nur neue Komponenten:
   Situationen · Branchen · Vergleichstabelle · Preise · Showcase
   ============================================================ */

/* ---------- Problem-Situationen (6 Alltagsfälle) ---------- */
.situations{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.situation{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;box-shadow:var(--shadow-soft);position:relative}
.section--soft .situation{background:#fff}
.situation__mark{font-family:var(--font-head);font-weight:700;font-size:40px;line-height:.7;color:var(--magenta);opacity:.35}
.situation p{margin-top:8px;color:var(--text);font-size:15.5px}
.situation .sit-out{display:block;margin-top:10px;color:var(--muted);font-size:14px}

/* ---------- Branchen ---------- */
.industries{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.industry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-soft);border-top:4px solid var(--violet);transition:transform .18s ease,box-shadow .18s ease}
.industry:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.industry__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--violet);background:rgba(93,82,163,.09);border:1px solid rgba(93,82,163,.16);margin-bottom:14px}
.industry h3{font-size:17px;font-weight:600}
.industry p{margin-top:9px;color:var(--muted);font-size:14.5px}
.industry__badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.norm-badge{font-family:var(--font-head);font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:4px 9px;white-space:nowrap}
.norm-badge--iso{color:var(--violet);background:rgba(93,82,163,.1)}
.norm-badge--tisax{color:var(--magenta);background:rgba(129,45,128,.1)}
.norm-badge--nis2{color:#3f7fa3;background:rgba(141,196,224,.22)}
.industries__note{text-align:center;margin-top:30px;color:var(--muted);font-size:15px}
.industries__note a{font-family:var(--font-head);font-weight:600;color:var(--magenta)}

/* ---------- Produkt-Showcase ---------- */
.showcase__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.showcase__list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.showcase__list li{position:relative;padding-left:36px;color:var(--muted);font-size:16px}
.showcase__list li b{color:var(--anthracite);font-family:var(--font-head)}
.showcase__list li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:7px;background:var(--btn-gradient);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/16px no-repeat}

/* ---------- Vergleichstabelle ---------- */
.compare__scroll{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.compare{width:100%;border-collapse:collapse;min-width:680px;background:#fff}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
.compare thead th{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--anthracite);background:var(--soft)}
.compare tbody th{font-family:var(--font-head);font-weight:600;color:var(--anthracite);white-space:nowrap}
.compare td{color:var(--muted)}
.compare .col-us{background:rgba(93,82,163,.05);border-left:1px solid rgba(93,82,163,.16);border-right:1px solid rgba(93,82,163,.16)}
.compare thead .col-us{background:rgba(93,82,163,.12);color:var(--violet)}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare .yes{color:#1f9d5f;font-weight:700}
.compare .no{color:#c0576a;font-weight:700}
.compare .mid{color:var(--warn);font-weight:700}
.compare__cap{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------- Preise / Begleitmodell-Teaser ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.plan--featured{border-color:transparent;box-shadow:var(--shadow);position:relative}
.plan--featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1.5px;background:var(--brand-gradient);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--btn-gradient);color:#fff;font-family:var(--font-head);font-weight:600;font-size:12px;padding:5px 14px;border-radius:999px;white-space:nowrap}
.plan__lvl{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:8px}
.plan h3{font-size:22px;font-weight:600}
.plan__desc{margin-top:8px;color:var(--muted);font-size:15px;min-height:44px}
.plan__price{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--anthracite);margin:18px 0 4px}
.plan__price small{display:block;font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--muted)}
.plan__list{list-style:none;margin:18px 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan__list li{position:relative;padding-left:28px;color:var(--muted);font-size:14.5px}
.plan__list li::before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:var(--btn-gradient);width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px}
.plan .btn{margin-top:auto}
.pricing__note{text-align:center;margin-top:26px;color:var(--muted);font-size:14px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .industries{grid-template-columns:repeat(2,1fr)}
  .situations{grid-template-columns:repeat(2,1fr)}
  .showcase__grid{grid-template-columns:1fr;gap:40px}
  .showcase__visual{order:2;max-width:560px;margin:0 auto;width:100%}
  .pricing{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .plan--featured{order:-1}
}
@media (max-width:760px){
  .situations,.industries{grid-template-columns:1fr}
}