/* ============================================================
   Guide / Ratgeber — Paket P14
   Baut auf den Tokens aus site.css auf (Farben, Radius, Schatten).
   ============================================================ */

.guide{padding:clamp(22px,4vw,40px) 0 70px}
.guide .crumbs{margin-bottom:clamp(18px,3vw,30px)}

/* ---------- layout: article + sticky TOC ---------- */
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(28px,5vw,60px);align-items:start}
.guide-article{max-width:74ch;min-width:0}

/* ---------- article header ---------- */
.guide-kicker{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--red-text)}/* A5 (QA-Report): Rot-Kleintext auf AA-Token */
.guide-head h1{font-size:clamp(2rem,4vw,3rem);margin:.7rem 0 0;font-weight:var(--fw-black)}
.guide-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1rem;color:var(--muted);font-size:var(--fs-base)}
/* 2026-07-24: entrötet (Doktrin „Rot nur Signal") — dezenter neutraler Chip statt rosa Pill wie beim alten Eyebrow. */
.tag{display:inline-block;align-self:flex-start;width:fit-content;background:var(--panel-2);border:1px solid var(--line);color:var(--muted-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:.28rem .6rem;border-radius:999px}/* 2026-07-24 (Finding 89): Pill umschließt den Text (kein Full-Width-Balken im flex-column-Karten-Body) */
.guide-lead{color:var(--muted-2);font-size:clamp(1.08rem,1.6vw,1.26rem);line-height:1.6;margin:1.6rem 0 0}

/* ---------- mobile TOC (collapsible) ---------- */
.guide-toc-m{display:none;margin:1.8rem 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:.5rem 1rem}
.guide-toc-m summary{cursor:pointer;font-family:'Sora';font-weight:var(--fw-semibold);padding:.6rem 0;color:var(--text)}
.guide-toc-m ol{margin:.2rem 0 .8rem;padding-left:1.2rem;color:var(--muted-2);display:grid;gap:.45rem}
.guide-toc-m a:hover{color:var(--text)}

/* ---------- sections / typography ---------- */
.guide-section{margin-top:clamp(2.2rem,4vw,3rem)}
.guide-section h2{font-size:clamp(1.4rem,2.4vw,1.9rem);scroll-margin-top:90px;position:relative;padding-top:.2rem}
.guide-section p{color:var(--muted-2);font-size:var(--fs-lg);line-height:1.72;margin-top:1rem}
.guide-bullets{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem}
.guide-bullets li{position:relative;padding-left:1.9rem;color:var(--muted-2);line-height:1.6}
.guide-bullets li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;border-radius:1px;background:var(--red)}/* 2026-07-24 (Finding 92): schwere graue Quadrate → schlanker roter Strich, ruhiger auf hellem Grund */

/* ---------- note / callout ---------- */
.guide-note{margin:1.4rem 0 0;border-left:3px solid var(--red);background:var(--panel-2);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1rem 1.2rem;color:var(--text);font-size:var(--fs-md)}

/* ---------- FAQ ---------- */
.guide-faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-top:.8rem;overflow:hidden}
.guide-faq details[open]{border-color:var(--line-2)}
.guide-faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:'Sora';font-weight:var(--fw-semibold);font-size:var(--fs-md);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-faq summary::after{content:"+";color:var(--red);font-size:var(--fs-3xl);font-weight:var(--fw-bold);line-height:1;transition:.2s var(--ease)}
.guide-faq details[open] summary::after{transform:rotate(45deg)}
.guide-faq .faq-a{padding:0 1.2rem 1.1rem;color:var(--muted-2);line-height:1.7}

/* ---------- CTA ---------- */
.guide-cta{margin-top:clamp(2.4rem,5vw,3.4rem);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--panel-2);padding:clamp(1.4rem,3vw,2rem);display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.guide-cta h3{font-size:var(--fs-2xl)}
.guide-cta p{color:var(--muted-2);margin-top:.4rem;max-width:46ch}

/* ---------- sticky TOC aside ---------- */
.guide-aside{position:sticky;top:90px}
.guide-toc{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:18px 20px}
.guide-toc h4{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;font-family:'Inter';font-weight:var(--fw-semibold)}
.guide-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:.1rem}
.guide-toc li{counter-increment:toc}
.guide-toc a{display:flex;gap:.6rem;padding:.42rem .5rem;border-radius:8px;color:var(--muted-2);font-size:var(--fs-base);line-height:1.4;transition:.15s}
.guide-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--steel);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);padding-top:.1rem}
.guide-toc a:hover{background:rgba(0,0,0,.04);color:var(--text)}

/* ---------- aside: Beratungs-Karte (Finding 94) ---------- */
.guide-help{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel-2);padding:18px 20px}
.guide-help h4{font-size:var(--fs-md);font-family:'Sora';font-weight:var(--fw-semibold);line-height:1.3}
.guide-help p{color:var(--muted-2);font-size:var(--fs-base);line-height:1.5;margin-top:.5rem}
.guide-help-tel{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--text);font-family:'Sora';font-weight:var(--fw-semibold);font-size:var(--fs-lg)}
.guide-help-tel svg{color:var(--red);flex:none}
.guide-help-tel:hover{color:var(--red-text)}
.guide-help-hours{display:block;color:var(--muted);font-size:var(--fs-ms);margin-top:.25rem}
.guide-help-cta{margin-top:1rem;width:100%;justify-content:center;gap:.4rem}

/* ---------- related ---------- */
.guide-related{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)}
.guide-related h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.guide-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:1.4rem}
.guide-rcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:22px;transition:.25s var(--ease);display:flex;flex-direction:column;gap:.7rem}
.guide-rcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}/* Refresh 2026-07-16: Karten-Doktrin — kein translateY */
.guide-rcard h3{font-size:var(--fs-xl);line-height:1.3}
.guide-rlink{display:inline-flex;align-items:center;gap:.4rem;color:var(--red-text);font-weight:var(--fw-semibold);font-size:var(--fs-base);margin-top:auto}/* A5: Rot-Linktext auf AA-Token */

/* ============================================================
   Ratgeber-Übersicht (guide_index)
   ============================================================ */
.guide-index-head{max-width:60ch;margin:clamp(10px,2vw,24px) 0 clamp(28px,4vw,44px)}
.guide-index-head .eyebrow{margin-bottom:1rem}
.guide-index-head h1{font-size:clamp(2rem,4vw,3rem);font-weight:var(--fw-black)}
.guide-index-head p{color:var(--muted-2);margin-top:1rem;font-size:var(--fs-lg)}
/* 2026-07-24 (Finding 87): auto-fit statt auto-fill lässt die letzte Reihe die Breite füllen (kein leerer 3. Slot bei 5 Artikeln) */
.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.guide-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden;transition:.28s var(--ease);display:flex;flex-direction:column;box-shadow:var(--sh-1)}/* 2026-07-24 (Finding 86): dezenter Ruhe-Schatten trennt Karte von hellem Seitengrund */
.guide-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}/* Refresh 2026-07-16: Karten-Doktrin — kein translateY */
/* 2026-07-24 (Finding 85): saubere neutrale Cover-Fläche statt „Bild fehlt"-Glyph; zarter Verlauf + Kategorie-Tönung heben die Karten voneinander ab */
.guide-card-art{aspect-ratio:16/7;display:grid;place-items:center;color:var(--steel);background:linear-gradient(150deg,var(--panel-2),color-mix(in srgb,var(--panel) 70%,var(--panel-2)));border-bottom:1px solid var(--line)}
.guide-card-art[data-cat="palettenregale"]{background:linear-gradient(150deg,color-mix(in srgb,var(--steel) 12%,var(--panel-2)),var(--panel))}
.guide-card-art[data-cat="sicherheit"]{background:linear-gradient(150deg,color-mix(in srgb,var(--red) 8%,var(--panel-2)),var(--panel))}
.guide-card-art svg{width:44%}
.guide-card-body{padding:20px;display:flex;flex-direction:column;gap:.6rem;flex:1}
.guide-card-body h2{font-size:var(--fs-xl);line-height:1.3;font-family:'Sora';font-weight:var(--fw-bold)}
.guide-card-body p{color:var(--muted);font-size:var(--fs-base);line-height:1.55}
.guide-card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.6rem;color:var(--muted);font-size:var(--fs-ms)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .guide-grid{grid-template-columns:1fr}
  .guide-aside{display:none}
  .guide-toc-m{display:block}
  .guide-article{max-width:none}
}
@media (max-width:560px){
  .guide-cta{flex-direction:column;align-items:flex-start}
}