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

.sf .scrolly-step[data-scene="system"] { --scrolly-edge: var(--textcolor-80contrast); }
.sf .scrolly-step[data-scene="bestimmtheit"] { --scrolly-edge: rgb(var(--chart-orange-rgb)); }
.sf .scrolly-step[data-scene="aufbau"] { --scrolly-edge: rgb(var(--chart-orange-rgb)); }
.sf .scrolly-step[data-scene="nullstaebe"] { --scrolly-edge: rgb(var(--chart-purple-rgb)); }
.sf .scrolly-step[data-scene="knoten"] { --scrolly-edge: rgb(var(--chart-teal-rgb)); }
.sf .scrolly-step[data-scene="ritter"] { --scrolly-edge: rgb(var(--chart-rose-rgb)); }
.sf .scrolly-step[data-scene="vergleich"] { --scrolly-edge: var(--textcolor-80contrast); }

.sf .scrolly-cell[data-c="a"] .scrolly-cell__v { color: rgb(var(--chart-teal-rgb)); }
.sf .scrolly-cell[data-c="og"] .scrolly-cell__v { color: rgb(var(--chart-rose-rgb)); }
.sf .scrolly-cell[data-c="ug"] .scrolly-cell__v { color: rgb(var(--chart-teal-rgb)); }
.sf .scrolly-cell[data-c="null"] .scrolly-cell__v { color: rgb(var(--chart-purple-rgb)); }

/* Verfahrens-Umschalter unter der Bühne — er wechselt das Vorgehen,
   nicht einen Zahlenwert, und gehört deshalb nicht zu den Reglern. */
.sf .sf-verfahren {
    /* Nicht schrumpfen — sonst klemmt das Panel die umgebrochene zweite
       Knopfreihe ab (siehe base/statik.css, flache Bühne). */
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: var(--spacing-xs);
    margin-top: var(--spacing-xs); }
.sf .sf-verfahren__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;
}
.sf .sf-verfahren__btn.is-aktiv {
    border-color: rgb(var(--chart-teal-rgb));
    color: rgb(var(--chart-teal-rgb)); font-weight: 600;
}

@media (min-width: 901px) {
    .sf .scrolly-panel--circuit { flex: 1.65 1 0; }
    .sf .scrolly-panel--chart { flex: 1 1 0; min-height: 160px; }
    @media (max-height: 880px) {
        .sf .scrolly-controls { grid-template-columns: repeat(3, 1fr); }
        /* Kippschwelle dieses Moduls: 880 px (base/statik.css) — der
           Dachbinder mit sechs Knotennamen schrumpft gestapelt schon bei
           800 px Fensterhöhe zur Miniatur. Nebeneinander teilen die
           Anteile die BREITE. Der Dachbinder ist 8,00 m breit und trägt sechs
           beschriftete Knoten — er behält den größeren Anteil, das
           Freischnitt-Panel kommt mit knapper Breite aus. */
        .sf .scrolly-panel--circuit { flex: 1.3 1 0; }
        .sf .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). */
        .sf .scrolly-panel--circuit,
        .sf .scrolly-panel--chart { min-height: 0; }
    }
}
@media (max-width: 900px) {
    .sf .scrolly-panel--circuit canvas { height: clamp(250px, 54vw, 340px); }
    .sf .scrolly-panel--chart canvas { height: clamp(190px, 42vw, 280px); }
}

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