/* === produkt/_product.css ===
   Gemeinsame Layout-Regeln für alle 7 Produkt-Seiten.
   Verwendet Tokens aus mailantis.css.
*/

/* ---- Hero ---- */
.prd-hero { padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 72px); background: var(--bg); }
.prd-hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .prd-hero__inner { grid-template-columns: 1fr; } }
.prd-hero__eyebrow { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--brand-cyan); margin:0 0 16px; }
.prd-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight:700; letter-spacing:-0.025em; line-height:1.05; margin:0 0 20px; color:var(--fg); }
.prd-hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color:var(--fg-muted); line-height:1.55; margin:0 0 32px; max-width:54ch; }
.prd-hero__cta { display:inline-flex; gap:12px; flex-wrap:wrap; }
.prd-hero__visual { aspect-ratio: 4/3; border-radius:var(--radius-lg); border:1px dashed var(--border); background: color-mix(in oklab, var(--brand-cyan) 6%, var(--bg-soft)); display:grid; place-items:center; color:var(--fg-muted); font-family:'DM Mono',monospace; font-size:12px; padding:24px; text-align:center; }

/* ---- Section frames (geteilt) ---- */
.prd-section { padding: clamp(56px, 8vw, 96px) 0; }
.prd-section--alt { background: var(--bg-soft); }
.prd-section__head { max-width:760px; margin:0 auto 48px; text-align:center; }
.prd-section__head .prd-section__eyebrow { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--brand-cyan); margin:0 0 12px; }
.prd-section__head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight:700; letter-spacing:-0.02em; margin:0 0 12px; color:var(--fg); }
.prd-section__head p { color:var(--fg-muted); font-size:1.05rem; line-height:1.6; margin:0; }

/* ---- "So funktioniert's" — 3 Schritte ---- */
.prd-steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; counter-reset: prd-step; }
@media (max-width: 820px) { .prd-steps { grid-template-columns: 1fr; } }
.prd-step { padding:28px 24px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-elevated); position:relative; }
.prd-step::before { counter-increment: prd-step; content: counter(prd-step, decimal-leading-zero); font-family:'DM Mono',monospace; font-size:13px; color:var(--brand-cyan); letter-spacing:0.06em; display:block; margin-bottom:16px; }
.prd-step h3 { font-size:1.15rem; font-weight:600; margin:0 0 10px; color:var(--fg); }
.prd-step p { color:var(--fg-muted); font-size:0.95rem; line-height:1.6; margin:0; }

/* ---- Features (2-spaltige Check-Liste) ---- */
.prd-features__grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px 28px; max-width:980px; margin:0 auto; }
@media (max-width:700px) { .prd-features__grid { grid-template-columns: 1fr; } }
.prd-features__item { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); }
.prd-features__item::before { content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px; background: var(--brand-cyan); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' stroke='black' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' stroke='black' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain; }
.prd-features__item span { color:var(--fg); font-size:0.95rem; line-height:1.5; }

/* ---- DNS-Records-Block ---- */
.prd-dns { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items:center; max-width:1080px; margin:0 auto; }
@media (max-width: 820px) { .prd-dns { grid-template-columns: 1fr; } }
.prd-dns__text h3 { font-size:1.4rem; font-weight:600; margin:0 0 12px; color:var(--fg); }
.prd-dns__text p { color:var(--fg-muted); font-size:1rem; line-height:1.6; margin:0 0 12px; }
.prd-dns__code { display:block; padding:20px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); font-family:'DM Mono',monospace; font-size:13px; line-height:1.6; color:var(--fg); white-space:pre-wrap; word-break:break-all; cursor:pointer; transition: background var(--motion-fast); }
.prd-dns__code:hover { background: color-mix(in oklab, var(--brand-cyan) 8%, var(--surface-2)); }
.prd-dns__code-label { display:block; margin-bottom:8px; font-family:'DM Mono',monospace; font-size:11px; color:var(--fg-muted); letter-spacing:0.06em; text-transform:uppercase; }

/* ---- Pricing-Mini ---- */
.prd-pricing__grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; max-width:760px; margin:0 auto; }
.prd-pricing__grid--smime { grid-template-columns: repeat(3, 1fr); max-width:980px; }
@media (max-width: 820px) { .prd-pricing__grid, .prd-pricing__grid--smime { grid-template-columns: 1fr; } }
.prd-plan { padding:28px 24px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-elevated); display:flex; flex-direction:column; }
.prd-plan--featured { border-color: color-mix(in oklab, var(--brand-blue) 60%, transparent); box-shadow: 0 0 0 1px var(--brand-blue), var(--shadow-glow); }
.prd-plan__name { font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 8px; }
.prd-plan__price { display:flex; align-items:baseline; gap:6px; margin:0 0 14px; }
.prd-plan__price strong { font-size:2rem; font-weight:700; color:var(--fg); }
.prd-plan__price-suffix { font-size:13px; color:var(--fg-muted); }
.prd-plan__highlights { color:var(--fg); font-size:0.95rem; line-height:1.55; margin:0 0 20px; flex:1; }

/* ---- FAQ ---- */
.prd-faq__list { display:flex; flex-direction:column; gap:12px; max-width:880px; margin:0 auto; }
.prd-faq__item { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.prd-faq__item summary { padding:18px 22px; cursor:pointer; font-weight:600; color:var(--fg); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.prd-faq__item summary::after { content:"+"; font-size:22px; line-height:1; color:var(--fg-muted); flex:0 0 auto; }
.prd-faq__item[open] summary::after { content:"−"; }
.prd-faq__item p { padding:0 22px 22px; margin:0; color:var(--fg-muted); line-height:1.6; }

/* ---- Final CTA ---- */
.prd-final { padding: clamp(56px, 8vw, 96px) 0; background: var(--bg-deep, #0B1220); color:#fff; text-align:center; }
.prd-final h2 { color:#fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin:0 0 12px; }
.prd-final p { color: rgba(255,255,255,0.72); max-width:600px; margin:0 auto 28px; font-size:1.05rem; line-height:1.6; }
.prd-final__cta { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }