/* ═══════════════════════════════════════════════════════════════
   „Beste …"-Listen (Buyer's Guides): /best-storyboard-software usw.
   Baut auf feature.css + fp.css auf. Lange Lesetexte, Vergleichs-
   tabelle, Ranking-Karten pro Tool, Kurzantwort-Box.
   ═══════════════════════════════════════════════════════════════ */
.best .fhero{padding-bottom:0}
.best .fhero h1{max-width:20ch}
.best .meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3);margin:-14px 0 30px}

.best .crumbs{font-size:13px;color:var(--ink-3);margin-bottom:22px}
.best .crumbs ol{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none}
.best .crumbs li+li::before{content:"/";margin-right:8px;color:var(--hair)}
.best .crumbs a{color:var(--ink-2);border-bottom:1px solid var(--hair)}
.best .crumbs a:hover{color:var(--ink)}

.best .sec{padding-block:clamp(56px,9vh,96px)}
.best section[id],.best .tldr{scroll-margin-top:calc(var(--nav-h) + 16px)}
.best .sec h2{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;margin-bottom:18px;text-wrap:balance}
.best .sec>.wrap>p,.best .txt p{color:var(--ink-2);max-width:68ch;margin-bottom:16px;text-wrap:pretty}
.best .txt{max-width:780px;margin-inline:auto}

/* Kurzantwort */
.tldr{
  max-width:880px;margin:clamp(40px,6vh,64px) auto 0;text-align:left;
  border:1px solid var(--emerald-edge);background:var(--emerald-bg);
  border-radius:var(--radius-lg);padding:clamp(22px,3.4vw,36px);
}
.tldr h2{font-size:clamp(1.35rem,2.2vw,1.7rem)!important;margin-bottom:8px!important}
.tldr>p{color:var(--ink-2);margin-bottom:18px;font-size:.98rem}
.tldr ul{list-style:none;display:grid;gap:12px}
.tldr li{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:6px 18px;padding-top:12px;border-top:1px solid rgba(52,211,153,.18)}
.tldr li:first-child{border-top:0;padding-top:0}
.tldr .uc{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald);padding-top:3px}
.tldr .pick{color:var(--ink)}
.tldr .pick b{font-weight:600}
.tldr .tldr__why{display:block;color:var(--ink-2);font-size:.93rem}

/* Vergleichstabelle */
.bt-scroll{overflow-x:auto;margin-top:28px;border:1px solid var(--hair);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch}
.bt{width:100%;min-width:760px;border-collapse:collapse;font-size:.93rem}
.bt th,.bt td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair-soft)}
.bt thead th{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);background:var(--surface);white-space:nowrap}
.bt tbody tr:last-child td{border-bottom:0}
.bt td:first-child{white-space:nowrap}
.bt td:first-child a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--hair)}
.bt td:first-child a:hover{border-color:var(--ink-2)}
.bt .rk{display:inline-block;min-width:1.6em;font-family:var(--mono);color:var(--ink-3)}
.bt tr.is-top td{background:rgba(52,211,153,.05)}
.bt-note{font-size:.85rem;color:var(--ink-3);margin-top:12px}

/* Kriterien */
.crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px;margin-top:28px}
.crit h3{font-size:1.2rem;margin-bottom:8px}
.crit p{font-size:.95rem;color:var(--ink-2);line-height:1.6}

/* Tool-Karten */
.tools{display:grid;gap:22px;margin-top:30px}
.tool{
  border:1px solid var(--hair);background:var(--surface);border-radius:var(--radius-lg);
  padding:clamp(22px,3.2vw,36px);scroll-margin-top:calc(var(--nav-h) + 20px);
}
.tool.is-top{border-color:var(--emerald-edge)}
.tool__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.tool__rank{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.tool h3{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.tool__tag{color:var(--emerald);font-size:.95rem;margin-bottom:18px}
.tool__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px;padding:14px 0;border-block:1px solid var(--hair-soft)}
.tool__facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.tool__facts dd{margin:0;color:var(--ink);font-size:.93rem;line-height:1.45}
.tool>p{color:var(--ink-2);margin-bottom:14px;max-width:72ch}
.tool__pc{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin:18px 0}
.tool__pc h4{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.tool__pc ul{list-style:none;display:grid;gap:8px}
.tool__pc li{position:relative;padding-left:20px;font-size:.94rem;color:var(--ink-2);line-height:1.5}
.tool__pc li::before{position:absolute;left:0;top:0;font-weight:600}
.tool__pc .pro li::before{content:"+";color:var(--emerald)}
.tool__pc .con li::before{content:"–";color:#F59E8B}
.tool__row{color:var(--ink-2);margin-bottom:10px;max-width:72ch}
.tool__row strong{color:var(--ink);font-weight:600}
.tool__src{font-size:.83rem;color:var(--ink-3);margin-top:16px}
.tool__src a{color:var(--ink-2);border-bottom:1px solid var(--hair)}
.tool__src a:hover{color:var(--ink)}
.tool__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:.9rem}
.tool__links a{color:var(--ink);border-bottom:1px solid var(--hair)}
.tool__links a:hover{border-color:var(--ink-2)}

/* Weiterführende Links */
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.links a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);font-size:.92rem}
.links a:hover{border-color:#34343A;background:var(--surface-2)}

/* Abschluss */
.best .cta{text-align:center}
.best .cta h2{font-size:clamp(2rem,3.6vw,2.9rem)}
.best .cta p{color:var(--ink-2);max-width:58ch;margin:0 auto 28px}
.best .cta .sub{font-size:.85rem;color:var(--ink-3);margin-top:14px}

@media (max-width:820px){
  .crit{grid-template-columns:1fr}
  .tool__facts{grid-template-columns:1fr 1fr}
  .tool__pc{grid-template-columns:1fr}
  .tldr li{grid-template-columns:1fr}
}
@media (max-width:480px){
  .tool__facts{grid-template-columns:1fr}
}