/* Starterbox-Ratgeber: Hero-Karte mit Kapiteln und die Ratgeber-Bausteine dunkel. Vorlage und Beispiel bleiben helle Zettel. */

/* ---------------------------------------------------------------- Hero: Ratgeber-Karte, das aktive Kapitel wandert */
.sb-karte{order:2;position:relative;width:min(100%,640px);margin-top:clamp(36px,4.5vw,60px);padding:clamp(22px,3vw,34px);border-radius:16px;background:#fff;color:#16171A;text-align:left;box-shadow:0 0 0 1px #2A2A2A,0 60px 120px -50px rgba(0,0,0,.95),0 40px 90px -40px rgba(224,36,107,.45);opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.sb-karte *{text-align:left}
.sb-karte::after{content:"";position:absolute;width:110px;height:24px;background:#E0246B;opacity:.9;top:-11px;left:34px;transform:rotate(-4deg)}
.sb-kopf{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;font:700 11px var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:#B0185A}
.sb-kopf span{color:#8A8E94}
.sb-titel{margin:0 0 18px;font-family:var(--f-display,inherit);font-weight:800;font-size:clamp(20px,2.4vw,26px);line-height:1.15;color:#16171A}
.sb-kap{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:k}
.sb-kap li{counter-increment:k;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;font-size:15px;font-weight:600;color:#3A3D42;animation-duration:var(--t);animation-iteration-count:infinite;animation-delay:calc(var(--i) * 1.6s)}
.sb-kap li::before{content:counter(k,decimal-leading-zero);font:700 12px var(--f-mono,monospace);color:#B0185A}
/* die Keyframes je Kapitelzahl (sb-k-N) stehen im Seitenkopf, siehe booster_seiten4.py */
.sb-fuss{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sb-fuss span{padding:6px 11px;border-radius:999px;background:#F1EEEA;font-size:12.5px;font-weight:700;color:#3A3D42}
.sb-fuss span.an{background:#16171A;color:#fff}
@media (prefers-reduced-motion:reduce){.sb-karte{opacity:1;animation:none}.sb-kap li{animation:none}}

/* ---------------------------------------------------------------- Ratgeber-Bausteine */
.rg-head .sec-head{margin-bottom:0}
.toc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.toc a{padding:7px 13px;border-radius:999px;border:0!important;background:#1A1A1A!important;box-shadow:inset 0 0 0 1px #2E2E2E;color:#D4D4D4!important;font-size:14px;font-weight:600;text-decoration:none}
.toc a:hover{color:#fff!important;box-shadow:inset 0 0 0 1px #666}
.wq li{background:#161616!important;color:#A3A3A3!important;box-shadow:inset 0 0 0 1px #242424;border-radius:12px!important}
.wq li b{color:#fff;font-family:var(--f-display,inherit)}
.wq li.dark{color:#A3A3A3!important}
.wq li::before{content:"";display:block;width:28px;height:3px;margin:0 auto 12px;border-radius:2px;background:var(--accent)}
.checks li{background:#161616!important;border:0!important;box-shadow:inset 0 0 0 1px #242424;border-radius:12px!important;color:#A3A3A3!important;text-align:left!important;padding:16px 20px 16px 52px!important;position:relative}
.checks li::before{content:"✓";position:absolute;left:20px;top:15px;color:#7BD69C;font-weight:800}
.checks b{color:#fff!important}
.howto>li{background:#161616!important;border:0!important;box-shadow:inset 0 0 0 1px #242424}
.howto h3{color:#fff}
.howto p{color:#A3A3A3!important}
.author{background:#161616!important;border:0!important;box-shadow:inset 0 0 0 1px #242424}
.author p{color:#A3A3A3!important}
.author b{color:#fff!important}
.author a{color:#F2F2F2;text-decoration:underline;text-underline-offset:3px}
.fine{color:#8A8A8A}
.fine a{color:#D4D4D4}
.tpl mark{background:#FCE1EB;color:#B0174F}
.tpl,.sample{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.tpl p,.sample p,.sample h3{color:#16171A}
.sample .soft{color:#5A5F66}
.tpl-actions .btn{background:#fff;color:#111;border:0}
.guide{list-style:none;margin:36px auto 0;padding:0;max-width:880px;display:grid;gap:14px;counter-reset:g}
.guide li{counter-increment:g;position:relative;padding:22px 24px 22px 76px!important;border-radius:12px;background:#161616!important;box-shadow:inset 0 0 0 1px #242424!important;color:#A3A3A3!important;text-align:left}
.guide li::before{content:counter(g,decimal-leading-zero);position:absolute;left:24px;top:22px;font:700 13px var(--f-mono,monospace);color:var(--accent-text)}
.guide li h3{margin:0 0 6px;color:#fff!important;font-size:18px}
.guide li p{margin:0;color:#A3A3A3!important;font-size:15px;line-height:1.6}
.guide li b{color:#fff!important}