/* Serienweite Bausteine der Statik-Serie (TM 1) — „Nullmodul". * * Nur was MEHR ALS EIN Modul braucht. Modul-eigene Klassen gehören in * css/experiments/statik_.css und tragen dort das Modul-Präfix. * * Achtung Spezifität (Style Guide §4.6a): Die globale Regel * `body.neutral0color-onbackground p, … span` hat Spezifität (0,1,2) und * schlägt still jede einfache Klassenregel. Farbregeln auf Textelementen * hängen deshalb unter einem Container-Selektor. */ /* Prüfaktionen der TM-Serie: derselbe grüne Fortschritts-Akzent für Freikörperbilder, Rechenschritte und Mitmach-Aufgaben. */ :is(.scrolly, .uebung) :is(.fkb__check, .ue-part__check, .scrolly-find__check) { background: var(--success-800); border-color: var(--success-800); color: var(--neutrals-0); } :is(.scrolly, .uebung) :is(.fkb__check, .ue-part__check, .scrolly-find__check):hover:not(:disabled) { box-shadow: var(--shadow-hover-sm); } :is(.scrolly, .uebung) :is(.fkb__check, .ue-part__check, .scrolly-find__check):focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; } /* ── Beschriftungen bleiben lesbar, auch wenn eine Linie dahinter läuft ── * * In den Aufgaben-SVGs kreuzen Maß-, Wand- und Körperlinien die Labels * („α = 70°" lag auf der Wand der Leiteraufgabe). Statt jedes Label * einzeln zu verschieben, bekommt jeder SVG-Text eine Kontur in der * Flächenfarbe und wird darüber gefüllt — dasselbe, was `haloPasst` auf * dem Canvas macht. `paint-order` sorgt dafür, dass die Kontur UNTER der * Füllung liegt, die Glyphen also nicht dicker wirken. */ .ue-circuit svg text { paint-order: stroke fill; stroke: var(--neutrals-0); stroke-width: 3px; stroke-linejoin: round; } /* ── Flache Bühne: wann rücken die beiden Panels nebeneinander? ────────── * * Die Bühne ist sticky und damit auf die Fensterhöhe gedeckelt * (`100vh − Navbar`). Gestapelt teilen sich Lageplan und Auswertungspanel * diese Höhe; nebeneinander bekommt jedes die volle Höhe, dafür nur die * halbe Breite. Was besser ist, hängt am Modul — deshalb wird es Fall für * Fall entschieden, nicht serienweit (Betreiber-Vorgabe 2026-08-14). * * GEMESSEN (Playwright, gestapelt bei 1440 px Breite, kleinere der beiden * Zeichenhöhen in px — unter rund 170 px fangen die Beschriftungen an sich * zu überlagern, darüber ist die gestapelte Bühne die bessere: Die * Zeichnungen der Serie sind alle breiter als hoch und nutzen die volle * Bühnenbreite besser als zwei halbe): * * Fensterhöhe 880 840 800 760 720 680 640 * Angriffspunkt 226 207 188 169 150 131 112 * Kraftsysteme 223 204 185 166 146 127 108 * Lagerreaktionen 229 210 189 168 146 125 104 * Schwerpunkt 183 167 150 134 118 101 85 * Fachwerke 201 183 166 148 131 114 96 * Balken 150 131 113 94 75 57 38 * Haftung/Reibung 180 162 144 126 107 89 71 * * Daraus zwei Gruppen: * * ≤ 880 px Schwerpunkt · Fachwerke · Balken · Haftung und Reibung * Enges Höhenbudget (Umschalter im Panel, vier Regler) oder * ein Panel, das viel Höhe braucht: das Rechenblatt mit sechs * Zeilen, der Dachbinder mit sechs Knotennamen, der Träger mit * Last oben und Lagern unten (rund 160 px allein für ihn), das * Freikörperbild mit Haftungskeil. Schon bei 800 px drängen * sich hier die Beschriftungen. * * ≤ 760 px Angriffspunkt · Kraftsysteme · Lagerreaktionen * Kompakte Panels, breite Zeichnungen: Wandkonsole, Kran und * Kranbahnträger gewinnen gestapelt an Größe, weil sie die * volle Bühnenbreite ausnutzen. Sie kippen erst, wenn es * wirklich eng wird. * * Unter 901 px Breite gilt weiter die Mobilregel (Bühne oben, statisch). * Die Seitenbreite bleibt in jedem Fall die der Plattform — eine Seite, * die je nach Fensterhöhe breiter wird, fällt aus dem Satz der übrigen * Versuche heraus. Mehr Platz für die gekippte Bühne kommt allein aus dem * Spaltenverhältnis (1 : 1,35 statt 1 : 1,1; der Fließtext behält mit rund * 60 Zeichen je Zeile eine gute Zeilenlänge). * * Wie sich die Breite auf die beiden Panels verteilt, steht je Modul in * `css/experiments/statik_.css`. * * Serienweit statt in blueprint_scrolly.css, weil diese Datei nur auf den * Statik-Seiten ausgeliefert wird; die ET-Serie bleibt unberührt. */ @media (min-width: 901px) and (max-height: 880px) { .ss .scrolly-flow, .sf .scrolly-flow, .sb .scrolly-flow, .sh .scrolly-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .ss .scrolly-stage__viz, .sf .scrolly-stage__viz, .sb .scrolly-stage__viz, .sh .scrolly-stage__viz { flex-direction: row; /* Der 220-px-Boden des Blueprints schützt die GESTAPELTEN Panels davor, zu nichts zusammenzufallen. Nebeneinander tragen beide die volle Bühnenhöhe — der Boden bewirkt dann nur noch, dass die Bühne über ihren Rahmen hinauswächst und `overflow: hidden` unten abschneidet (gemessen im Balkenmodul bei 960×620: 561 px Inhalt in einem 524-px-Rahmen, die Fußzeile war weg). */ min-height: 0; } /* Schmale Panels: Titel und Status untereinander statt in einer Zeile, die unkontrolliert umbricht. Beide Köpfe sind dadurch gleich hoch — die Zeichnungen beginnen auf derselben Höhe. */ .ss .scrolly-panel__head-row, .sf .scrolly-panel__head-row, .sb .scrolly-panel__head-row, .sh .scrolly-panel__head-row { flex-direction: column; align-items: flex-start; gap: 0; } /* Einteilige Bühne im Nebeneinander-Fall: `flex: 0 1 auto` der Solo-Regel (blueprint_scrolly.css) ist für GESTAPELTE Panels gedacht — dort heißt es „nur so hoch wie der Inhalt". In der Zeile heißt dieselbe Regel „nur so BREIT wie der Inhalt", und der Inhalt ist ein Canvas, dessen Breite aus der Panelbreite stammt: Schaltet eine Szene von zwei Panels auf eines, behält der Canvas seine alte halbe Breite, das Panel schrumpft darauf — und keines von beiden wächst je zurück. Browser-gemessen bei 1400×700 (Review 2026-09-09): Angriffspunkt 261 von 613 px, Haftung/Reibung 269, Lagerreaktionen 451; mit `flex: 1 1 0` in allen drei Fällen die vollen 613 px. Schwerpunkt, Fachwerke, Balken und Kraftsysteme schalten nicht um und waren nie betroffen — die Regel steht für sie vorsorglich mit hier. */ .ss .scrolly-stage__inner.is-solo .scrolly-panel, .sf .scrolly-stage__inner.is-solo .scrolly-panel, .sb .scrolly-stage__inner.is-solo .scrolly-panel, .sh .scrolly-stage__inner.is-solo .scrolly-panel { flex: 1 1 0; } } @media (min-width: 901px) and (max-height: 760px) { .sz .scrolly-flow, .sk .scrolly-flow, .sl .scrolly-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .sz .scrolly-stage__viz, .sk .scrolly-stage__viz, .sl .scrolly-stage__viz { flex-direction: row; min-height: 0; } .sz .scrolly-panel__head-row, .sk .scrolly-panel__head-row, .sl .scrolly-panel__head-row { flex-direction: column; align-items: flex-start; gap: 0; } /* Begründung und Messwerte im Block der 880-px-Module oben. */ .sz .scrolly-stage__inner.is-solo .scrolly-panel, .sk .scrolly-stage__inner.is-solo .scrolly-panel, .sl .scrolly-stage__inner.is-solo .scrolly-panel { flex: 1 1 0; } } /* ── Aufgabentyp `plot`: Verlauf selbst zeichnen ─────────────────────── */ .ue-plot { margin: var(--spacing-md) 0; } .ue-plot__canvas { display: block; width: 100%; height: 240px; border: 1px solid var(--surface-border); border-radius: var(--radius-md); background: var(--surface-bg); touch-action: none; /* Ziehen darf die Seite nicht scrollen */ cursor: crosshair; } @media (max-width: 640px) { .ue-plot__canvas { height: 300px; } } .ue-plot .ue-plot__legende { margin: var(--spacing-xs) 0 var(--spacing-sm); font-size: 0.88rem; color: var(--textcolor-80contrast); } .ue-plot__reset { padding: 0.35rem 0.9rem; font-size: 0.88rem; border: 1px solid var(--surface-border); border-radius: var(--radius-sm); background: transparent; color: var(--textcolor-fullcontrast); cursor: pointer; } .ue-plot__reset:hover:not(:disabled) { background: var(--surface-hover); } .ue-plot__reset:disabled { opacity: 0.45; cursor: default; } /* ── Lager-Legende (Lagerreaktionen, Balken, Fachwerke) ──────────────── */ .st-lager-legende { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); margin: var(--spacing-sm) 0; } .st-lager-legende .st-lager-legende__eintrag { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 0.9rem; color: var(--textcolor-80contrast); } /* ── Abzähl-Statusleiste (statische Bestimmtheit) ────────────────────── */ .st-abzaehlen { display: flex; align-items: baseline; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); border-left: 3px solid var(--surface-border); background: var(--surface-bg); font-variant-numeric: tabular-nums; } .st-abzaehlen .st-abzaehlen__formel { font-style: italic; color: var(--textcolor-fullcontrast); } .st-abzaehlen .st-abzaehlen__urteil { font-size: 0.88rem; } .st-abzaehlen.is-bestimmt { border-left-color: rgb(var(--chart-teal-rgb)); } .st-abzaehlen.is-bestimmt .st-abzaehlen__urteil { color: rgb(var(--chart-teal-rgb)); } .st-abzaehlen.is-unbestimmt { border-left-color: rgb(var(--chart-orange-rgb)); } .st-abzaehlen.is-unbestimmt .st-abzaehlen__urteil { color: rgb(var(--chart-orange-rgb)); }