/* =========================================================
   Pilzkiste.ch — Unterseiten (Kategorie + Vitalpilz-Pillar)
   Ergänzt styles.css. Nutzt dieselben Tokens.
   ========================================================= */

.breadcrumb{padding-top:104px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--nebel)}
.breadcrumb a{color:var(--nebel)}
.breadcrumb a:hover{color:var(--gold-soft)}
.breadcrumb .sep{color:var(--rinde);margin:0 8px}

.pagehead{padding:18px 0 6px}
.pagehead .lat{font-family:var(--font-mono);font-style:italic;color:var(--nebel);font-size:.9rem;margin-bottom:.2em}
.pagehead h1{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.02em;font-size:clamp(2.2rem,5vw,3.7rem);margin:.15em 0 .4em}
.pagehead h1 em{color:var(--gold-soft);font-style:italic}
.pagehead .lead{max-width:62ch;color:var(--nebel);font-size:1.12rem}
.trust-chips{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;margin:22px 0 0;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--nebel)}
.trust-chips li{display:flex;align-items:center;gap:9px}
.trust-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--spore)}

/* Lesbare Inhaltsblöcke (SEO-Text, Anleitung, Wirkung) */
.prose{max-width:70ch}
.prose>h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.01em;margin:1.5em 0 .4em}
.prose>h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;margin:1.3em 0 .3em}
.prose p,.prose li{color:var(--nebel);line-height:1.78}
.prose ul,.prose ol{margin:.6em 0 1.1em 1.2em}
.prose li{margin:.3em 0}
.prose a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--sporenweiss);font-weight:600}
.prose--narrow{margin-inline:auto}

/* Beratungs-/Filterzeile */
.helprow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 30px;font-size:.95rem;color:var(--nebel)}
.chip{border:1px solid var(--rinde);border-radius:999px;padding:9px 16px;color:var(--sporenweiss);transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* Varianten-Vergleich (Pillar: Extrakt / Pulver / Kapsel) */
.variants{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0}
.variant{position:relative;border:1px solid var(--rinde);border-radius:var(--radius);background:var(--humus);padding:24px 22px;display:flex;flex-direction:column}
.variant--star{border-color:var(--gold-soft);box-shadow:0 0 0 1px var(--gold-soft) inset}
.variant__tag{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-soft)}
.variant h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:.35em 0 .05em}
.variant__price{font-weight:600;font-size:1.1rem;margin:.15em 0}
.variant__grund{font-family:var(--font-mono);font-size:.7rem;color:var(--nebel);margin-bottom:.6em}
.variant__desc{color:var(--nebel);font-size:.92rem;flex:1}
.variant .btn--card{margin-top:16px}

/* Callout / Transparenz / Disclaimer */
.callout{border:1px solid var(--rinde);border-left:2px solid var(--myzel-gold);border-radius:var(--radius);background:rgba(24,33,27,.55);padding:24px 26px;margin:26px 0}
.callout h3{font-family:var(--font-display);font-size:1.3rem;font-weight:600;margin:0 0 .35em}
.callout p{color:var(--nebel);margin:0}
.disclaimer{border:1px solid var(--rinde);border-left:2px solid var(--status-vorbestell);border-radius:var(--radius);background:rgba(24,33,27,.45);padding:18px 22px;color:var(--nebel);font-size:.88rem;line-height:1.7;margin-top:26px}
.disclaimer strong{color:var(--sporenweiss)}

/* Anleitung in Schritten */
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin:8px 0;padding:0}
.steps li{counter-increment:s;position:relative;border:1px solid var(--rinde);border-radius:var(--radius);background:rgba(24,33,27,.5);padding:20px 22px 20px 64px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:22px;top:20px;font-family:var(--font-mono);font-size:.85rem;color:var(--gold-soft)}
.steps h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:0 0 .2em}
.steps p{color:var(--nebel);margin:0;font-size:.95rem}

/* «Weiterlesen» / verwandte Links */
.related{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.related a{border:1px solid var(--rinde);border-radius:999px;padding:10px 18px;color:var(--sporenweiss);font-size:.92rem;transition:border-color .2s,color .2s}
.related a:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* Abschluss-CTA-Band */
.ctaband{border:1px solid var(--rinde);border-radius:var(--radius-lg);background:linear-gradient(120deg,#13201a,#0e1410);padding:clamp(28px,5vw,52px);text-align:center}
.ctaband h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.5em}
.ctaband .btn{margin:6px}

@media (max-width:760px){
  .variants{grid-template-columns:1fr}
}