/* =====================================================================
   Inhaltsseite „Stufen“ (31.10.2026)
   Inhalt in durchklickbaren Stufen (section.phase.st-stufe), Navigation
   als Hero-Band „Fortschritt“ (div.st-band) direkt unter dem Hero.
   Ohne JS sind alle Stufen sichtbar; html.st-js blendet nur die aktive ein.
   ===================================================================== */
.st-js .st-stufe{display:none}
.st-js .st-stufe.on,.st-js.st-alle .st-stufe{display:block}
.st-js .st-stufe{margin-bottom:0}
.st-js .dotnav{display:none!important}
.st-praes .st-stufe:last-of-type{display:none!important} /* Videos holt der Präsentationsmodus selbst */
main.panel:has(.st-band){padding-bottom:36px}

.st-band{position:sticky;top:var(--st-hh,0px);z-index:50;margin:-40px calc(50% - 50vw) 28px;background:var(--fach-hero,#2a1854);box-shadow:0 8px 18px rgba(30,16,62,.22);font-family:'Fredoka',sans-serif}
.st-band-in{display:flex;align-items:center;gap:8px;max-width:1240px;margin:0 auto;padding:10px 12px 14px;position:relative}
.st-liste{flex:1 1 auto;min-width:0;display:flex;gap:4px}
.st-liste button{flex:1 1 0;min-width:0;border:0;background:none;cursor:pointer;padding:6px 4px;border-radius:10px;font:500 13px 'Fredoka',sans-serif;white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(255,255,255,.75)}
.st-liste button b{flex:0 0 auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:600;background:rgba(255,255,255,.14);color:#fff}
.st-liste button span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.st-liste button:hover{color:#fff}
.st-liste button.on{color:#fff;font-weight:600}
.st-liste button.on b{background:#fff;color:var(--fach-ink,#3d2a6b);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.st-liste button.done{color:#cfeec9}
.st-liste button.done b{background:#67b05f;color:#fff}
.st-pf{flex:0 0 28px;height:28px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;padding:0 0 2px}
.st-pf:hover:not(:disabled){background:rgba(255,255,255,.28)}
.st-pf:disabled{opacity:.3;cursor:default}
.st-fort{position:absolute;left:48px;right:48px;bottom:5px;height:4px;border-radius:2px;background:rgba(255,255,255,.15)}
.st-fort i{display:block;height:100%;width:0;border-radius:2px;background:#67b05f;transition:width .25s}
.st-band :focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:760px){
 .st-band-in{padding:8px 12px 14px;gap:4px}
 .st-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .st-liste button{font-size:12px;padding:6px 2px;white-space:normal;line-height:1.1;gap:3px}
 .st-pf{flex:0 0 24px;height:24px;font-size:17px}
 .st-fort{left:34px;right:34px}
}
@media (prefers-reduced-motion:reduce){.st-fort i{transition:none}}
@media print{.st-band{display:none}.st-js .st-stufe{display:block}}