/* Vengin — Seiten-Komponenten (Produkt / Preise / Investoren).
   Erbt Farben/Variablen aus style.css. Orange-Akzent ergänzt das Teal/Blau-Theme. */
:root{ --accent3:#ff8a5c; --good:#3ddc84; }

.doc-main{max-width:1080px;margin:0 auto;padding:7rem 1.4rem 5rem}
.page-head{max-width:760px;margin:0 0 3.2rem}
.page-head h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.1;margin:.1em 0 .5em;letter-spacing:-.01em}
.page-head .sub{font-size:1.15rem;color:var(--muted);margin:0}
.sec{margin:0 0 4rem}
.sec > h2{font-size:1.5rem;margin:0 0 1.4rem;letter-spacing:-.01em}
.sec > h2 .num{color:var(--accent3);font-variant-numeric:tabular-nums;margin-right:.5em}
.lead{font-size:1.1rem;color:var(--muted);max-width:720px;margin:0 0 1.8rem}

/* Stat-Block (Wachstumsmarkt) */
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.4rem;box-shadow:var(--shadow)}
.stat-big{font-size:clamp(3rem,9vw,5rem);font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}
.stat-big small{font-size:1.4rem;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:.2em}
.stat-card .hr{height:1px;background:var(--line);margin:1.6rem 0}
.stat-card .foot{color:var(--muted);font-size:.95rem}

/* Karten-Grid */
.grid{display:grid;gap:1.2rem}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem}
.tile h3{margin:.2em 0 .5em;font-size:1.1rem}
.tile p{color:var(--muted);margin:0;font-size:.96rem}
.tile .dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--accent3);
  margin-right:.5em;vertical-align:middle}

/* Workflow-Vergleich (State of the art vs. Vengin) */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:stretch}
@media(max-width:820px){.compare{grid-template-columns:1fr}.compare .arrow{transform:rotate(90deg);justify-self:center}}
.flow{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.flow.win{border-color:rgba(47,216,196,.5);box-shadow:0 0 0 1px rgba(47,216,196,.25),var(--shadow)}
.flow .flow-h{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;
  color:var(--muted);margin:0 0 1.2rem}
.flow.win .flow-h{color:var(--accent)}
.step{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:none}
.step .n{flex:0 0 38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;background:var(--accent3);color:#1a0d06}
.flow.win .step:last-child .n{background:var(--accent2);color:var(--accent-ink)}
.step .t{font-weight:700;letter-spacing:.01em}
.step .t small{display:block;font-weight:400;color:var(--muted);letter-spacing:0;font-size:.85rem}
.arrow{display:flex;align-items:center;justify-content:center;color:var(--accent2);font-size:2.4rem}

/* Preis-Tabelle */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
@media(max-width:820px){.pricing{grid-template-columns:1fr}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem;display:flex;flex-direction:column}
.plan.feature{border-color:var(--accent3);box-shadow:0 0 0 1px rgba(255,138,92,.3),var(--shadow);position:relative}
.plan.feature::before{content:"CFD";position:absolute;top:-12px;right:18px;background:var(--accent3);
  color:#1a0d06;font-weight:800;font-size:.72rem;letter-spacing:.1em;padding:.25em .8em;border-radius:999px}
.plan .pname{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--muted)}
.plan .price{font-size:2.4rem;font-weight:800;margin:.3em 0 0;letter-spacing:-.01em}
.plan .price span{font-size:1rem;font-weight:400;color:var(--muted)}
.plan .ptag{color:var(--muted);margin:.2em 0 1.2rem;font-size:.95rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.6rem;flex:1}
.plan li{padding:.5em 0 .5em 1.6em;position:relative;border-top:1px solid var(--line);font-size:.95rem}
.plan li:first-child{border-top:none}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--good)}
.plan li.off{color:var(--muted)}
.plan li.off::before{content:"–";color:var(--muted)}

/* Feature-Listen */
.feat{list-style:none;padding:0;margin:0}
.feat li{padding:.7em 0 .7em 1.8em;position:relative;border-top:1px solid var(--line)}
.feat li:first-child{border-top:none}
.feat li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.feat li b{color:var(--ink)}
.feat li small{color:var(--muted)}

.callout{background:linear-gradient(135deg,rgba(47,216,196,.1),rgba(79,157,255,.08));
  border:1px solid var(--line);border-radius:var(--radius);padding:2rem;text-align:center;margin-top:3rem}
.callout h2{margin:0 0 .4em}
.callout p{color:var(--muted);margin:0 0 1.4rem}
.crumbs{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}

/* Block-Buttons sichtbar halten (ghost+block hatte keinen Rahmen) */
.btn.ghost.block{border:1px solid var(--line);background:rgba(255,255,255,.04)}
.btn.ghost.block:hover{background:rgba(255,255,255,.09)}

/* Kauf-/Checkout-Seite */
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
@media(max-width:820px){.buy-grid{grid-template-columns:1fr}}
.buy-plans{display:flex;flex-direction:column;gap:.8rem}
.buy-plan{display:flex;gap:.9rem;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;cursor:pointer}
.buy-plan input{margin-top:.35em;accent-color:var(--accent)}
.buy-plan.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(47,216,196,.35)}
.buy-plan.feature.on{border-color:var(--accent3);box-shadow:0 0 0 1px rgba(255,138,92,.4)}
.buy-plan b{display:block;font-size:1.05rem}
.buy-plan .price{display:block;font-weight:800;font-size:1.4rem;margin:.1em 0}
.buy-plan .price span{font-size:.8rem;font-weight:400;color:var(--muted)}
.buy-plan small{color:var(--muted)}
.buy-fields{display:flex;flex-direction:column;gap:.8rem}
.buy-fields input,.buy-fields textarea{width:100%;padding:.85em 1em;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);font:inherit;font-size:1rem}
.buy-fields textarea{resize:vertical}
.buy-fields input:focus,.buy-fields textarea:focus{outline:none;border-color:var(--accent)}
.buy-note{font-size:.85rem;margin:.2em 0 0}