/* ============================================================
   Synergy SaaS GmbH — Produkt-Landingpages (Problem → Lösung → Beispiele)
   Ergänzt site.css. Nur Klassen, die auf den Produktseiten gebraucht werden.
   ============================================================ */

/* ---- Produkt-Hero (Navy) ---- */
.p-hero{position:relative;background:var(--ink);color:var(--text-invert);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(40px,6vw,78px));padding-bottom:clamp(48px,7vw,88px)}
.p-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 60% at 88% -10%,var(--accent-glow),transparent 60%),
             radial-gradient(45% 45% at 0% 110%,var(--accent-tint),transparent 60%)}
.p-hero .wrap{position:relative}
.p-back{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--text-invert-muted);margin-bottom:20px;transition:color .3s var(--ease)}
.p-back:hover{color:#fff}
.p-tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-tint);padding:6px 14px;border-radius:100px}
.p-hero h1{color:#fff;max-width:18ch;margin-top:16px}
.p-hero h1 .grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-hero .lead{color:var(--text-invert-muted);margin-top:20px}
.p-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* ---- Sektions-Köpfe ---- */
.lp .head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.lp .head h2{margin-top:14px}
.lp .head p{margin-top:16px;font-size:1.08rem}

/* ---- Problem-Sektion ---- */
.lp-problem{background:var(--bg)}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.pain{background:var(--bg-elevated);border:1px solid var(--line);border-left:3px solid var(--accent-deep);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-sm)}
.pain .pico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--accent-tint);color:var(--accent-deep)}
.pain .pico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.pain h3{margin-bottom:8px}
.pain p{font-size:.95rem}

/* ---- Lösung-Sektion: Text + Mockup nebeneinander ---- */
.lp-solution{background:var(--ink);color:var(--text-invert);position:relative;overflow:hidden}
.lp-solution::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 100% 0%,var(--accent-glow),transparent 62%)}
.lp-solution .wrap{position:relative}
.lp-solution .eyebrow{color:var(--accent-2)}
.lp-solution h2,.lp-solution h3{color:#fff}
.lp-solution p{color:var(--text-invert-muted)}
.solution-split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.solution-split .s-text{max-width:46ch}
.sol-list{list-style:none;margin:22px 0 0;padding:0}
.sol-list li{position:relative;padding-left:30px;margin:14px 0;color:var(--text-invert);font-size:1rem}
.sol-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--accent-grad);
  -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.5' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px 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.5' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---- Produktbild / App-Mockup (Browserrahmen + Inline-SVG) ---- */
.mockup{border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14)}
.mockup .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0a2050;border-bottom:1px solid rgba(255,255,255,.08)}
.mockup .bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28);display:inline-block}
.mockup .bar i:nth-child(1){background:#e3735e}.mockup .bar i:nth-child(2){background:#e6b34c}.mockup .bar i:nth-child(3){background:#5ab17a}
.mockup .url{flex:1;margin-left:10px;height:22px;border-radius:6px;background:rgba(255,255,255,.10);
  display:flex;align-items:center;padding:0 12px;font-size:.72rem;color:rgba(255,255,255,.7)}
.mockup svg{display:block;width:100%;height:auto}
.mockup-cap{margin-top:14px;font-size:.85rem;color:var(--text-invert-muted);text-align:center}

/* ---- Beispiele: nummerierte Schritte ---- */
.lp-examples{background:var(--bg)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;counter-reset:st}
.stepcard{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow-sm);position:relative}
.stepcard::before{counter-increment:st;content:counter(st);position:absolute;top:-16px;left:24px;
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#1c1303;
  background:var(--accent-grad);box-shadow:0 8px 22px var(--accent-glow)}
.stepcard h3{margin:14px 0 8px}
.stepcard p{font-size:.95rem}

/* ---- Funktions-Grid ---- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.feat-card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat-card .fico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;background:var(--ink);color:var(--accent-2)}
.feat-card .fico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.feat-card h3{margin-bottom:7px}.feat-card p{font-size:.94rem}

/* ---- Demo-Band ---- */
.demo-band{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
.demo-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 70% at 50% 0%,var(--accent-glow),transparent 65%)}
.demo-band .wrap{position:relative}
.demo-band .eyebrow{color:var(--accent-2)}
.demo-band h2{color:#fff;max-width:22ch;margin:14px auto 0}
.demo-band p{color:var(--text-invert-muted);margin:14px auto 0;max-width:54ch}
.demo-band .p-actions{justify-content:center;margin-top:28px}

@media (max-width:860px){
  .solution-split{grid-template-columns:1fr}
}