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

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

/* Ansichts-Umschalter Ganzer Träger ↔ Linkes Teilsystem */
.sb .sb-ansicht {
    /* 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);
}
.sb .sb-ansicht__btn {
    flex: 1 1 auto;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: var(--surface-bg);
    color: var(--textcolor-80contrast);
    font-size: 0.82rem; cursor: pointer;
}
.sb .sb-ansicht__btn:hover { background: var(--surface-hover); }
.sb .sb-ansicht__btn.is-aktiv {
    border-color: rgb(var(--chart-teal-rgb));
    color: rgb(var(--chart-teal-rgb)); font-weight: 600;
}

/* Merktafel q → Q → M (Kapitel 09) */
.sb .sb-tafel { overflow-x: auto; margin: var(--spacing-md) 0; }
.sb .sb-tafel table {
    width: 100%; border-collapse: collapse; font-size: 0.92rem;
}
.sb .sb-tafel th,
.sb .sb-tafel td {
    padding: 0.42rem 0.6rem;
    border-bottom: 1px solid var(--surface-border-light);
    text-align: left;
}
.sb .sb-tafel thead th {
    border-bottom: 2px solid var(--surface-border);
    color: var(--textcolor-fullcontrast); font-weight: 600;
}
.sb .sb-tafel tbody tr:last-child td { border-bottom: none; }

/* 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 B trägt zwei Diagramme übereinander und ist deshalb
   das größere. */
@media (min-width: 901px) {
    .sb .scrolly-panel--circuit { flex: 1.15 1 0; min-height: 190px; }
    .sb .scrolly-panel--chart { flex: 1.2 1 0; min-height: 190px; }
    @media (max-height: 880px) {
        .sb .scrolly-controls { grid-template-columns: repeat(2, 1fr); }
        /* Kippschwelle dieses Moduls: 880 px (base/statik.css) — es hat das
           engste Höhenbudget der Serie (Ansichts-Umschalter im Panel, vier
           Regler): Schon bei 880 px Fensterhöhe bleiben dem Träger
           gestapelt 150 px, bei 760 px noch 94 px, und allein für Last
           oben und Lager unten braucht er rund 160 px.
           Nebeneinander teilen die Anteile die BREITE. Bewusster Tausch — nebeneinander geht die gemeinsame
           x-Achse von Träger und Verläufen verloren. Gestapelt war sie auf
           flachen Fenstern aber ohnehin nicht mehr zu sehen: bei 640 px
           Fensterhöhe zeichnete die Momentenlinie über die Regler. Beide
           Panels tragen einen Verlauf über 6 m und teilen sich die Breite
           deshalb fast gleich; die Verläufe liegen zu zweit übereinander
           und bekommen den Rest. */
        .sb .scrolly-panel--circuit { flex: 1 1 0; }
        .sb .scrolly-panel--chart { flex: 1.15 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). */
        .sb .scrolly-panel--circuit,
        .sb .scrolly-panel--chart { min-height: 0; }
    }
}
@media (max-width: 900px) {
    .sb .scrolly-panel--circuit canvas { height: clamp(210px, 46vw, 290px); }
    .sb .scrolly-panel--chart canvas { height: clamp(240px, 52vw, 330px); }
}

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