.readbar{height:4px;background:rgba(255,255,255,.1)}
.readbar i{display:block;height:100%;background:var(--signal);transform-origin:left;transform:scaleX(0)}

.ahero{position:relative;min-height:min(62vh,560px);display:flex;align-items:flex-end;color:var(--bone);background:var(--night);overflow:hidden;isolation:isolate}
.ahero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.08);animation:kb 10s ease-out both}
.ahero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,19,17,.25),rgba(14,19,17,.88))}
@keyframes kb{to{transform:scale(1)}}
.ahero__in{padding:90px 0 44px}
.back{display:inline-block;margin-bottom:22px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-decoration:none;color:var(--bone);border-bottom:2px solid var(--signal)}
.ahero .meta{color:#cdd8d1}
.ahero h1{font-size:clamp(38px,6vw,76px);max-width:18ch;opacity:0;transform:translateY(24px);animation:up .9s .2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes up{to{opacity:1;transform:none}}

.abody{display:grid;grid-template-columns:200px minmax(0,68ch) 1fr;gap:56px;padding:64px 0 40px;justify-content:center}
.toc{position:sticky;top:96px;align-self:start;font-size:15px}
.toc p{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.toc ol{list-style:none;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--ink-2);line-height:1.35;transition:color .2s,border-color .2s}
.toc a:hover,.toc a.is-on{color:var(--night);border-color:var(--signal)}

.prose .lead{margin:0 0 36px;max-width:none;text-align:left;font-size:22px;line-height:1.5;color:var(--night);font-weight:500}
.prose h2{font-size:clamp(28px,3.4vw,40px);margin:48px 0 14px;color:var(--night)}
.prose p{margin-bottom:18px;font-size:18px}
.prose h2:first-of-type{margin-top:0}

.fact{background:var(--night);color:var(--bone);border-radius:var(--r);padding:22px 24px;border-top:5px solid var(--signal);max-width:260px;position:sticky;top:96px}
.fact small{display:block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em;color:var(--signal);font-size:16px;font-weight:600}
.fact b{display:block;font-family:var(--f-display);font-size:44px;line-height:1.1;margin-top:4px}

.author{display:flex;gap:18px;align-items:center;max-width:calc(68ch + 40px);padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.author .av{flex:none;width:56px;height:56px;border-radius:50%;background:var(--moss);color:var(--bone);display:grid;place-items:center;font-family:var(--f-display);font-size:26px;font-weight:700}
.author p{font-size:15px;color:var(--ink-2)}
.author b{color:var(--night);font-size:17px;display:block}

.related{padding:60px 0 84px}
.related h2{font-size:clamp(30px,4vw,44px);margin-bottom:28px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1100px){
  .abody{grid-template-columns:minmax(0,68ch);gap:28px}
  .toc{display:none}
  .fact{position:static;max-width:none;order:-1}
  .side{order:-1}
}
@media (max-width:640px){
  .prose p{font-size:17px}
  .prose .lead{font-size:19px}
  .ahero__in{padding:80px 0 30px}
  .author{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ahero img,.ahero h1{animation:none!important;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Roboto-Anpassung */
.ahero h1{font-size:clamp(30px,4.6vw,58px);max-width:20ch}
.back{font-size:14px;font-weight:700}
.prose h2{font-size:clamp(24px,2.8vw,32px)}
.prose p{font-size:17px}
.toc p{font-size:14px}
.fact small{font-size:13px;font-weight:700}
.fact b{font-size:36px;font-weight:900}
.author .av{font-size:22px;font-weight:700}
.related h2{font-size:clamp(26px,3.2vw,36px)}

/* Biwak-Test-Karte am Ende des Artikels */
.qcta{padding:8px 0 0}
.qcta__in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--night);color:var(--bone);border-radius:var(--r);border-left:6px solid var(--signal);padding:28px 32px}
.qcta h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:6px}
.qcta p:not(.eyebrow){color:#cfd8d2;max-width:52ch}
.qcta .eyebrow{margin-bottom:6px!important}