/* Zeichnungen zu V07 „Satz von Steiner" — Drehpendel in Draufsicht und die
   beiden Zusatzkörper. Der Rahmen der Lernschicht steht in
   css/base/lernschicht.css.

   Kanäle: Drehtisch primary · Spiralfeder teal · Zusatzkörper orange ·
   Abstand a und Schwerpunktsbahn purple · Auslenkwinkel rose.

   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. */

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

.dp-svg--klein {
    max-width: 680px;
    margin-inline: auto;
}

/* ── Drehtisch ───────────────────────────────────────────────────── */
.dp-tisch {
    fill: rgba(var(--primary-rgb), 0.10);
    stroke: var(--primary-color);
    stroke-width: 3;
}

.dp-rille {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    opacity: 0.28;
}

.dp-schlitz {
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.45;
}

.dp-loch {
    fill: var(--neutrals-0);
    stroke: var(--textcolor-fullcontrast);
    stroke-width: 1.6;
}

.dp-loch.is-belegt {
    fill: rgba(var(--chart-orange-rgb), 0.35);
    stroke: rgba(var(--chart-orange-rgb), 1);
}

/* ── Zusatzkörper ────────────────────────────────────────────────── */
.dp-koerper__leib {
    fill: rgba(var(--chart-orange-rgb), 0.20);
    stroke: rgba(var(--chart-orange-rgb), 1);
    stroke-width: 2.5;
}

.dp-koerper__ring {
    stroke: rgba(var(--chart-orange-rgb), 0.55);
    stroke-width: 1.5;
}

/* Die schwere Seite des inhomogenen Körpers — kein eigener Kanal, nur
   dichter gefüllt: es ist dasselbe Bauteil. */
.dp-koerper__schwer {
    fill: rgba(var(--chart-orange-rgb), 0.45);
    stroke: none;
}

.dp-koerper__sp {
    fill: var(--textcolor-fullcontrast);
}

/* ── Nabe, Spiralfeder, Drehachse ────────────────────────────────── */
.dp-nabe {
    fill: var(--neutrals-0);
    stroke: var(--textcolor-fullcontrast);
    stroke-width: 2;
}

.dp-feder {
    fill: none;
    stroke: rgba(var(--chart-teal-rgb), 1);
    stroke-width: 2.4;
    stroke-linejoin: round;
}

.dp-gestell {
    fill: var(--surface-hover);
    stroke: var(--textcolor-fullcontrast);
    stroke-width: 1.6;
}

.dp-schraffur line {
    stroke: currentColor;
    stroke-width: 1.4;
    opacity: 0.55;
}

.dp-achse {
    fill: var(--textcolor-fullcontrast);
}

/* ── Abstand a und die Bahn des Schwerpunkts ─────────────────────── */
.dp-mass {
    stroke: rgba(var(--chart-purple-rgb), 1);
    stroke-width: 2;
    color: rgba(var(--chart-purple-rgb), 1);
}

.dp-bahn {
    fill: none;
    stroke: rgba(var(--chart-purple-rgb), 1);
    stroke-width: 1.6;
    stroke-dasharray: 7 6;
    opacity: 0.55;
}

/* ── Ruhelage und Auslenkwinkel ──────────────────────────────────── */
.dp-ruhelinie {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-dasharray: 8 6;
    opacity: 0.5;
}

.dp-bogen {
    stroke: rgba(var(--chart-rose-rgb), 1);
    stroke-width: 2.6;
    color: rgba(var(--chart-rose-rgb), 1);
}

.dp-zeiger {
    fill: rgba(var(--chart-rose-rgb), 1);
    stroke: none;
}

.dp-zeigerlinie {
    stroke: rgba(var(--chart-rose-rgb), 1);
    stroke-width: 2;
    opacity: 0.75;
}

/* ── Hilfslinien und Beschriftungen ──────────────────────────────── */
.dp-hilfslinie {
    stroke: currentColor;
    stroke-width: 1.2;
    opacity: 0.45;
}

.dp-fuehrung line {
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-dasharray: 3 4;
    opacity: 0.5;
}

.dp-sym {
    fill: var(--textcolor-fullcontrast);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 26px;
}

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

/* ── Marken der Herleitung ───────────────────────────────────────── */
.dp-svg [data-marke] {
    transition: opacity var(--transition-base), stroke-width var(--transition-base);
}

.dp-svg [data-marke].is-aktiv {
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(var(--chart-rose-rgb), 0.6));
}

.dp-svg g[data-marke].is-aktiv circle,
.dp-svg g[data-marke].is-aktiv path,
.dp-svg g[data-marke].is-aktiv polyline {
    stroke-width: 4;
}

/* Ein <marker> erbt `currentColor` NICHT vom Element, das ihn benutzt —
   sonst wären die Pfeilspitzen schwarz statt purple bzw. rose. */
.dp-spitze--mass path { fill: rgba(var(--chart-purple-rgb), 1); }
.dp-spitze--winkel path { fill: rgba(var(--chart-rose-rgb), 1); }