/* Serie „Statik" · Modul „Lagerreaktionen" — lokale Ergänzungen.
   Farbregeln auf Textelementen hängen unter `.sl` (Style Guide §4.6a). */

.sl .scrolly-step[data-scene="system"] { --scrolly-edge: var(--textcolor-80contrast); }
.sl .scrolly-step[data-scene="lager"] { --scrolly-edge: rgb(var(--chart-teal-rgb)); }
.sl .scrolly-step[data-scene="freischnitt"] { --scrolly-edge: rgb(var(--chart-teal-rgb)); }
.sl .scrolly-step[data-scene="bestimmtheit"] { --scrolly-edge: rgb(var(--chart-orange-rgb)); }
.sl .scrolly-step[data-scene="berechnung"] { --scrolly-edge: rgb(var(--chart-rose-rgb)); }
.sl .scrolly-step[data-scene="superposition"] { --scrolly-edge: rgb(var(--chart-rose-rgb)); }
.sl .scrolly-step[data-scene="raum"] { --scrolly-edge: rgb(var(--chart-purple-rgb)); }
.sl .scrolly-step[data-scene="mehrteilig"] { --scrolly-edge: rgb(var(--chart-purple-rgb)); }
.sl .scrolly-step[data-scene="dreigelenk"] { --scrolly-edge: rgb(var(--chart-purple-rgb)); }
.sl .scrolly-step[data-scene="gerber"] { --scrolly-edge: rgb(var(--chart-rose-rgb)); }

.sl .scrolly-cell[data-c="a"] .scrolly-cell__v,
.sl .scrolly-cell[data-c="b"] .scrolly-cell__v { color: rgb(var(--chart-teal-rgb)); }
.sl .scrolly-cell[data-c="q"] .scrolly-cell__v { color: rgb(var(--chart-orange-rgb)); }
.sl .scrolly-cell[data-c="best"] .scrolly-cell__v { color: rgb(var(--chart-rose-rgb)); }

/* Der Lagerumschalter sitzt unter der Bühne, nicht in den Reglern —
   er verändert das Tragwerk, nicht einen Zahlenwert. */
.sl .sl-lagerwahl {
    /* Bedienleisten IM Panel dürfen nicht schrumpfen: Das Panel ist ein
       Flex-Container mit `overflow: hidden`; ohne festen Anteil klemmt es
       die zweite Knopfreihe ab, sobald die vier Knöpfe umbrechen (flache
       Bühne, Panels nebeneinander — bei 1440×760 fehlte „drei parallele
       Stäbe" zur Hälfte). Der Canvas gibt stattdessen nach. */
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}
.sl .sl-lagerwahl__btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.84rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--textcolor-fullcontrast);
    cursor: pointer;
}
.sl .sl-lagerwahl__btn.is-aktiv {
    border-color: rgb(var(--chart-teal-rgb));
    color: rgb(var(--chart-teal-rgb));
    font-weight: 600;
}

@media (min-width: 901px) {
    /* Der Wrapper tritt an die Stelle des Canvas als Flex-Kind des Panels —
       ohne diese beiden Zeilen fällt der Canvas auf seine Inhaltshöhe
       zurück (gemessen: 161 statt 358 px, die Maßkette „8,00 m" landete
       unter dem Rahmen; Detektor-Befund 2026-08-21). */
    .sl .sl-stage-wrap { display: flex; flex: 1 1 0; min-height: 0; }
    .sl .sl-stage-wrap > canvas { flex: 1 1 0; min-height: 0; }
    .sl .scrolly-panel--circuit { flex: 1.25 1 0; }
    .sl .scrolly-panel--chart { flex: 1 1 0; min-height: 170px; }
    @media (max-height: 880px) {
        .sl .scrolly-controls { grid-template-columns: repeat(3, 1fr); }
    }
    /* Kippschwelle dieses Moduls: 760 px (base/statik.css). Der
       Kranbahnträger ist mit 6 m Stützweite die breiteste Zeichnung der
       Serie — gestapelt nutzt er die volle Bühnenbreite, und bis 800 px
       Fensterhöhe zeigt das Bilanzblatt daneben noch beide Balken. Erst
       darunter wird gekippt; dann behält der Träger einen leichten
       Vorsprung, das Bilanzblatt trägt Text und zwei Balken. */
    @media (max-height: 760px) {
        .sl .scrolly-panel--circuit { flex: 1.15 1 0; }
        .sl .scrolly-panel--chart { flex: 1 1 0; }
        /* Kein min-height im Nebeneinander-Fall: Die Panelhöhe IST die
           Bühnenhöhe; ein Mindestwert sprengt sie und `overflow: hidden`
           schneidet unten ab (gemessen im Balkenmodul bei 960×620). */
        .sl .scrolly-panel--circuit,
        .sl .scrolly-panel--chart { min-height: 0; }
    }
}
@media (max-width: 900px) {
    .sl .sl-stage-wrap { display: block; }
    .sl .scrolly-panel--circuit canvas { height: clamp(240px, 52vw, 330px); }
    .sl .scrolly-panel--chart canvas { height: clamp(200px, 44vw, 290px); }
}

.sl .sl-svg-koerper { stroke: var(--textcolor-fullcontrast); stroke-width: 2.4; fill: none; }
.sl .sl-svg-mass { stroke: var(--neutrals-100); stroke-width: 1.2; }
.sl .sl-svg-hilf { stroke: var(--neutrals-100); stroke-width: 1; stroke-dasharray: 3 3; }
.sl .sl-svg-text { font-size: 13px; font-style: italic; fill: var(--textcolor-80contrast); }
.sl-bild svg { width: 100%; max-width: 28rem; height: auto; display: block; margin: 0 auto; }

/* ── Freikörperbild-Baukasten auf der Bühne (2026-08-21) ────────────────
   Die Mitmach-Aufgabe in Kapitel 03 war ein Stummel: Der Aufgabentext
   kündigte sie an, aber kein JS baute je einen Baukasten auf (0 Chips im
   Audit). Muster wie in den Modulen 1 und 2. */
.sl .sl-stage-wrap { position: relative; }
.sl .sl-fkb-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Durchlässig, bis der Baukasten dran ist — sonst fängt das Overlay
       jeden Klick ab (Serienregel, Style Guide §3.6). */
    pointer-events: none;
}
.sl .sl-fkb-overlay.is-aktiv { pointer-events: auto; }
.sl .sl-fkb-overlay.is-fertig { pointer-events: none; }
.sl .sl-fkb-overlay.is-fertig .fkb__slot,
.sl .sl-fkb-overlay.is-fertig .fkb__hit { display: none; }
.sl #slFkb.is-fertig .fkb__palette,
.sl #slFkb.is-fertig .fkb__check,
.sl #slFkb.is-fertig .fkb__reverse { opacity: .45; pointer-events: none; }
.sl .sl-fkb-overlay .fkb__arrow-label {
    paint-order: stroke; stroke: var(--neutrals-0, #fff); stroke-width: 3px;
}
.sl .fkb--eingebettet .fkb__svg { display: none; }