/* Serie „Statik" (TM 1) · Modul „Haftung und Reibung" — Modul-CSS.

   Nur Ergänzungen zum Blueprint; Farben ausschließlich über Tokens.
   Präfix `sh-`, alle Regeln hängen unter `.sh`, damit die globale
   Textfarbregel (Spezifität 0,1,2 — Style Guide §4.6a) nicht still
   gewinnt. */

/* Bühnenhöhen: Die Flex-Anteile gelten nur ab 901 px. Darunter braucht
   es feste Höhen, sonst kollabieren beide Panels (Serienbefund
   2026-08-13). Panel A trägt Rampe, Freikörperbild und Haftungskeil und
   ist deshalb das größere. */
@media (min-width: 901px) {
    .sh .scrolly-panel--circuit { flex: 1.4 1 0; min-height: 200px; }
    .sh .scrolly-panel--chart { flex: 1 1 0; min-height: 170px; }
    @media (max-height: 880px) {
        .sh .scrolly-controls { grid-template-columns: repeat(2, 1fr); }
        /* Kippschwelle dieses Moduls: 880 px (base/statik.css) — gestapelt
           überlagern sich im Freikörperbild schon bei 800 px Fensterhöhe
           Haftungskeil, N und G. Nebeneinander teilen die Anteile die
           BREITE. Das Freikörperbild trägt die Rampe samt Haftungskeil und
           vier beschrifteten Kräften und behält den Vorsprung; das
           Haftbereichs-Diagramm braucht seine Achsenbeschriftung. */
        .sh .scrolly-panel--circuit { flex: 1.2 1 0; }
        .sh .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). */
        .sh .scrolly-panel--circuit,
        .sh .scrolly-panel--chart { min-height: 0; }
    }
}
@media (max-width: 900px) {
    .sh .scrolly-panel--circuit canvas { height: clamp(240px, 52vw, 320px); }
    .sh .scrolly-panel--chart canvas { height: clamp(190px, 42vw, 270px); }
}

/* Aufgaben-SVGs der Übungsseite */
.sh .sh-svg-koerper { stroke: var(--textcolor-fullcontrast); stroke-width: 2.6; fill: none; }
.sh .sh-svg-linie { stroke: var(--textcolor-fullcontrast); stroke-width: 1.8; fill: none; }
.sh .sh-svg-mass { stroke: var(--neutrals-100); stroke-width: 1.2; }
.sh .sh-svg-hilf { stroke: var(--neutrals-100); stroke-width: 1; stroke-dasharray: 3 3; }
.sh .sh-svg-text { font-size: 13px; font-style: italic; fill: var(--textcolor-80contrast); }
.sh .sh-svg-nr { font-size: 12px; font-style: italic; fill: var(--textcolor-80contrast); opacity: .75; }
.sh-bild svg { width: 100%; max-width: 28rem; height: auto; display: block; margin: 0 auto; }