/* Zeichnungen zu V11 „Physikalisches Pendel" — Pendelkörper an der Schneide
   und das Steiner-Bild. Der Rahmen der Lernschicht steht in
   css/base/lernschicht.css.

   Farbregeln hängen am Modul-Container, weil
   `body.neutral0color-onbackground p|a|span` (0,1,2) jede einfache
   Klassenregel still schlägt — Style Guide §4.6a. */

.pend-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--spacing-md) 0;
}

/* Stativ und fester Aufhängepunkt — neutral, sie sind nur Kulisse. */
.pend-stativ rect {
    fill: var(--textcolor-50contrast);
    opacity: 0.35;
}

.pend-schneide {
    fill: var(--textcolor-fullcontrast);
}

.pend-fest,
.pend-fest-schraffur line {
    stroke: currentColor;
    stroke-width: 2;
    opacity: 0.6;
}

/* Die Platte: Aluminium-Optik wie die echte Apparatur (2026-09-03). Der
   Verlauf kommt aus dem SVG (<linearGradient>, Kennung je Zeichnung), die
   Farben der Stufen aus den Tokens — deshalb setzt die Klasse KEIN fill. */
.pend-koerper {
    stroke: var(--neutrals-100);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.pend-platte {
    filter: drop-shadow(3px 6px 5px rgba(var(--primary-rgb), 0.22));
}

.pend-alu__1 { stop-color: var(--neutrals-0); }
.pend-alu__2 { stop-color: var(--neutrals-10); }
.pend-alu__3 { stop-color: var(--surface-bg); }
.pend-alu__4 { stop-color: var(--neutrals-100); stop-opacity: 0.55; }

/* Stahlrahmen und Schneide: dunkles Blaugrau aus dem Textkanal. */
.pend-stahl__1 { stop-color: var(--neutrals-500); stop-opacity: 0.72; }
.pend-stahl__2 { stop-color: var(--neutrals-500); stop-opacity: 0.86; }
.pend-stahl__3 { stop-color: var(--neutrals-500); stop-opacity: 0.94; }

.pend-stativ__knoten {
    fill: var(--neutrals-500);
    opacity: 0.85;
}

.pend-schneide rect,
.pend-schneide path {
    fill: var(--neutrals-500);
    opacity: 0.9;
}

.pend-schneide circle {
    fill: var(--textcolor-fullcontrast);
}

/* Die sieben Aufhängelöcher der Platte, Ziffern aufrecht daneben. */
.pend-loch circle {
    fill: var(--neutrals-0);
    stroke: var(--neutrals-100);
    stroke-width: 1.5;
}

.pend-loch-nr text {
    fill: var(--textcolor-50contrast);
    font-family: inherit;
    font-size: 13px;
}

/* Pfeilköpfe: ein <marker> erbt currentColor NICHT — Farbe je Klasse. */
.pend-marker--kraft path { fill: rgba(var(--chart-orange-rgb), 1); }
.pend-marker--mass path { fill: rgba(var(--chart-teal-rgb), 1); }
.pend-marker--winkel path { fill: rgba(var(--chart-purple-rgb), 1); }
.pend-marker--js path { fill: rgba(var(--chart-rose-rgb), 1); }
.pend-marker--j path { fill: rgba(var(--chart-purple-rgb), 1); }

/* Auslenkwinkel als zarter Sektor */
.pend-winkel-sektor {
    fill: rgba(var(--chart-purple-rgb), 0.10);
    stroke: none;
}

/* Ruhelage */
.pend-achse {
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-dasharray: 8 6;
    opacity: 0.5;
}

.pend-hilfslinie {
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-dasharray: 5 5;
    opacity: 0.4;
}

/* Maßketten teal, Kräfte orange — die Kanalfarben der Plattform. */
.pend-mass {
    stroke: rgba(var(--chart-teal-rgb), 1);
    stroke-width: 2.4;
}

.pend-kraft {
    stroke: rgba(var(--chart-orange-rgb), 1);
    stroke-width: 3.5;
    color: rgba(var(--chart-orange-rgb), 1);
}

.pend-winkel {
    fill: none;
    stroke: rgba(var(--chart-purple-rgb), 1);
    stroke-width: 2.6;
}

/* Schwerpunkt-Symbol: die klassische geviertelte Scheibe. */
.pend-schwerpunkt circle {
    fill: var(--neutrals-0);
    stroke: var(--textcolor-fullcontrast);
    stroke-width: 2;
}

.pend-schwerpunkt path {
    fill: var(--textcolor-fullcontrast);
}

.pend-punkt {
    fill: var(--textcolor-fullcontrast);
}

/* Drehpfeile im Steiner-Bild */
.pend-dreh {
    fill: none;
    stroke: rgba(var(--chart-rose-rgb), 1);
    stroke-width: 2.6;
    color: rgba(var(--chart-rose-rgb), 1);
}

.pend-dreh--gross {
    stroke: rgba(var(--chart-purple-rgb), 1);
    color: rgba(var(--chart-purple-rgb), 1);
}

/* Führungslinien zu den Beschriftungen */
.pend-fuehrung line {
    stroke: currentColor;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.45;
}

.pend-sym {
    fill: currentColor;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 26px;
}

.pend-lbl {
    fill: var(--textcolor-50contrast);
    font-family: inherit;
    font-style: normal;
    font-size: 17px;
}

/* Die Beschriftung eines Pfeils trägt seine Farbe (Betreiber-Wunsch
   2026-09-03); das Wort dahinter erbt sie. */
.pend-wort {
    font-family: inherit;
    font-style: normal;
    font-size: 17px;
}

.pend-sym--wort {
    font-family: inherit;
    font-style: normal;
    font-size: 17px;
}

.pend-sym--mass { fill: rgba(var(--chart-teal-rgb), 1); }
.pend-sym--kraft { fill: rgba(var(--chart-orange-rgb), 1); }
.pend-sym--winkel { fill: rgba(var(--chart-purple-rgb), 1); }
.pend-sym--js { fill: rgba(var(--chart-rose-rgb), 1); }
.pend-sym--j { fill: rgba(var(--chart-purple-rgb), 1); }

/* Marken der Herleitung: der gerade besprochene Teil tritt hervor,
   der Rest bleibt sichtbar (kein Ausblenden — der Zusammenhang zählt).
   Die Pfeilköpfe sind in Strichstärken-Einheiten definiert und wachsen mit;
   damit alle um denselben Faktor (≈ 1,4) wachsen, bekommt jede Pfeilart
   ihre eigene aktive Strichstärke. */
.pend-svg [data-marke] {
    transition: opacity var(--transition-base), stroke-width var(--transition-base);
}

.pend-svg [data-marke].is-aktiv {
    stroke-width: 5;
    filter: drop-shadow(0 0 6px rgba(var(--chart-rose-rgb), 0.55));
}

.pend-svg .pend-kraft[data-marke].is-aktiv { stroke-width: 5; }
.pend-svg .pend-mass[data-marke].is-aktiv { stroke-width: 3.4; }
.pend-svg .pend-winkel[data-marke].is-aktiv,
.pend-svg .pend-dreh[data-marke].is-aktiv { stroke-width: 3.7; }

/* Amplitudentabelle in Kapitel 4 */
.pend-tabelle {
    width: auto;
    margin: var(--spacing-md) 0;
    border-collapse: collapse;
}

.pend-tabelle th,
.pend-tabelle td {
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) 0;
    border-bottom: var(--border-base) solid var(--surface-border);
    text-align: left;
}

.pend-tabelle th {
    color: var(--textcolor-50contrast);
    font-size: var(--text-sm);
    font-weight: 600;
}


/* Drehachse als Lagersymbol — ein Keil mit Spitze liest sich als Pfeil. */
.pend-lager circle {
    fill: var(--neutrals-0);
    stroke: var(--textcolor-fullcontrast);
    stroke-width: 2.5;
}

.pend-lager__kern {
    fill: var(--textcolor-fullcontrast);
}


/* ── Die beiden gerechneten Diagramme (Kapitel 4 und 5, 2026-09-02) ──────
   Kurven in Kanalfarben: die Näherung (Gerade) teal, sin α orange, das
   Pendelmodell teal, Messpunkte orange — Blau bleibt den Scatterplots des
   Prüfstands vorbehalten. */
.pend-sinus,
.pend-kurve {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
}

.pend-diagramm__raster line {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.12;
}

.pend-diagramm__achsen line {
    stroke: currentColor;
    stroke-width: 1.6;
    opacity: 0.7;
}

.pend-diagramm__ticks text,
.pend-diagramm__legende text {
    fill: currentColor;
    opacity: 0.85;
}

.pend-diagramm__achse {
    font-weight: 600;
}

.pend-diagramm__marke {
    stroke: rgba(var(--chart-purple-rgb), 1);
    stroke-width: 1.6;
    stroke-dasharray: 6 5;
}

.pend-diagramm__linie {
    fill: none;
    stroke-width: 3.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pend-diagramm__linie--gerade,
.pend-diagramm__linie--modell {
    stroke: rgba(var(--chart-teal-rgb), 1);
}

.pend-diagramm__linie--sinus {
    stroke: rgba(var(--chart-orange-rgb), 1);
}

.pend-diagramm__punkte circle,
.pend-diagramm__punkt {
    fill: rgba(var(--chart-orange-rgb), 1);
    stroke: var(--neutrals-0);
    stroke-width: 2;
}

/* Zeichnungsregel (Style Guide §2.10): unter 640 px scrollt das Diagramm in
   seinem eigenen Rahmen, statt auf 4 px Schrifthöhe zu schrumpfen. */
.pend-diagramm-rahmen {
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

@media (max-width: 640px) {
    .pend-sinus,
    .pend-kurve {
        min-width: 520px;
    }
}