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

.ss .scrolly-step[data-scene="system"] { --scrolly-edge: var(--textcolor-80contrast); }
.ss .scrolly-step[data-scene="parallel"] { --scrolly-edge: rgb(var(--chart-orange-rgb)); }
.ss .scrolly-step[data-scene="verteilt"] { --scrolly-edge: rgb(var(--chart-orange-rgb)); }
.ss .scrolly-step[data-scene="koerper"] { --scrolly-edge: rgb(var(--chart-teal-rgb)); }
.ss .scrolly-step[data-scene="flaeche"] { --scrolly-edge: rgb(var(--chart-teal-rgb)); }
.ss .scrolly-step[data-scene="zusammengesetzt"] { --scrolly-edge: rgb(var(--chart-rose-rgb)); }
.ss .scrolly-step[data-scene="linie"] { --scrolly-edge: rgb(var(--chart-purple-rgb)); }

.ss .scrolly-cell[data-c="a"] .scrolly-cell__v { color: rgb(var(--chart-teal-rgb)); }
.ss .scrolly-cell[data-c="xs"] .scrolly-cell__v,
.ss .scrolly-cell[data-c="ys"] .scrolly-cell__v { color: rgb(var(--chart-rose-rgb)); }
.ss .scrolly-cell[data-c="bohr"] .scrolly-cell__v { color: rgb(var(--chart-orange-rgb)); }

/* Breite Fenster: Flex-Anteile. Schmale: feste Höhen — sonst kollabieren
   beide Panels (Blueprint-Mobilregel, Befund 2026-08-13). */
@media (min-width: 901px) {
    .ss .scrolly-panel--circuit { flex: 1.15 1 0; }
    .ss .scrolly-panel--chart { flex: 1 1 0; min-height: 180px; }
    @media (max-height: 880px) {
        .ss .scrolly-controls { grid-template-columns: repeat(3, 1fr); }
        /* Kippschwelle dieses Moduls: 880 px (base/statik.css) — gestapelt
           bleibt der Fläche schon bei 800 px Fensterhöhe nur noch ein
           150-px-Streifen. Nebeneinander teilen die Anteile die BREITE,
           und hier kehrt sich das Verhältnis um. Das Rechenblatt
           ist eine sechsspaltige Tabelle und braucht Spaltenbreite; die
           L-Platte ist mit 240 × 180 mm fast quadratisch und kommt mit
           weniger aus. */
        .ss .scrolly-panel--circuit { flex: 1 1 0; }
        .ss .scrolly-panel--chart { flex: 1.45 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). */
        .ss .scrolly-panel--circuit,
        .ss .scrolly-panel--chart { min-height: 0; }
    }
}

@media (max-width: 900px) {
    .ss .scrolly-panel--circuit canvas { height: clamp(240px, 52vw, 340px); }
    .ss .scrolly-panel--chart canvas { height: clamp(210px, 46vw, 300px); }
}

/* Aufgaben-SVGs der Übungsseite */
.ss .ss-svg-koerper { stroke: var(--textcolor-fullcontrast); stroke-width: 2.2; fill: none; }
.ss .ss-svg-flaeche { fill: rgb(var(--chart-teal-rgb)); opacity: 0.16; }
.ss .ss-svg-aus { fill: rgb(var(--chart-orange-rgb)); opacity: 0.18; }
.ss .ss-svg-mass { stroke: var(--neutrals-100); stroke-width: 1.2; }
.ss .ss-svg-hilf { stroke: var(--neutrals-100); stroke-width: 1; stroke-dasharray: 3 3; }
.ss .ss-svg-text { font-size: 13px; font-style: italic; fill: var(--textcolor-80contrast); }
.ss-bild svg { width: 100%; max-width: 26rem; height: auto; display: block; margin: 0 auto; }

/* ── Rechenblatt im Text (2026-08-21) ────────────────────────────────────
   Zog von der Bühne hierher: Eine Tabelle ist eine Rechnung, kein Bild —
   sie gehört neben die Herleitung, nicht in ein zweites Bühnen-Panel, das
   über sieben Kapitel dasselbe zeigt. Farbregeln hängen am Modul-Container
   (Style Guide §4.6a). */
.ss .ss-blatt {
  margin: 1rem 0 1.4rem; padding: .9rem 1rem;
  background: var(--neutrals-0); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl, 12px); overflow-x: auto;
}
.ss .ss-blatt__head {
  font-family: var(--scrolly-mono); font-size: .66rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--neutrals-100); margin-bottom: .6rem;
}
.ss .ss-blatt table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ss .ss-blatt th, .ss .ss-blatt td { padding: .3rem .45rem; text-align: right; white-space: nowrap; }
.ss .ss-blatt th:first-child, .ss .ss-blatt td:first-child { text-align: left; }
.ss .ss-blatt th {
  font-weight: 600; font-size: .78rem; color: var(--neutrals-100);
  border-bottom: 1px solid var(--surface-border);
}
.ss .ss-blatt td { color: var(--textcolor-fullcontrast); font-variant-numeric: tabular-nums; }
/* Die Bohrung zählt negativ — eigene Farbe, damit das Minus nicht wie ein
   Tippfehler aussieht. */
.ss .ss-blatt tr.is-negativ td { color: rgb(var(--chart-orange-rgb)); }
.ss .ss-blatt tr.is-blass td { opacity: .35; }
.ss .ss-blatt tr.is-summe td {
  font-weight: 700; color: rgb(var(--chart-rose-rgb));
  border-top: 1px solid var(--surface-border);
}
.ss .ss-blatt tr.is-ergebnis td {
  padding-top: .5rem; font-weight: 700; text-align: left;
  color: rgb(var(--chart-rose-rgb));
}
.ss .ss-blatt__hint { margin: .5rem 0 0; font-size: .82rem; color: var(--textcolor-80contrast); }