/* Zeichnungen zu V05 „Federpendel" — Feder unter Last, schwingendes Pendel
   und die Kombination zweier Federn. 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. */

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

.fed-svg--klein {
    max-width: 640px;
    margin-inline: auto;
}

/* Träger und Schraffur — Kulisse, kein Inhalt. */
.fed-traeger {
    stroke: currentColor;
    stroke-width: 3;
}

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

/* Die Feder selbst */
.fed-feder {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.fed-masse {
    fill: rgba(var(--primary-rgb), 0.16);
    stroke: var(--primary-color);
    stroke-width: 2.5;
}

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

/* Ruhelage der unbelasteten Feder */
.fed-ruhelinie {
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-dasharray: 8 6;
    opacity: 0.5;
}

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

/* Kanalfarben: Maße teal, Gewichtskraft orange, Federkraft purple. */
.fed-mass {
    stroke: rgba(var(--chart-teal-rgb), 1);
    stroke-width: 2.4;
    color: rgba(var(--chart-teal-rgb), 1);
}

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

.fed-federkraft {
    stroke: rgba(var(--chart-purple-rgb), 1);
    stroke-width: 3.5;
    color: rgba(var(--chart-purple-rgb), 1);
}

/* Umkehrlagen der Schwingung treten zurück. */
.fed-geist {
    opacity: 0.3;
}

/* Wie weit sich die Windungen bewegen — von null oben bis voll unten. */
.fed-tempo line {
    stroke: rgba(var(--chart-rose-rgb), 1);
    stroke-width: 2.6;
    color: rgba(var(--chart-rose-rgb), 1);
}

.fed-fuehrung line {
    stroke: currentColor;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.45;
}

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

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

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

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

.fed-svg g[data-marke].is-aktiv line {
    stroke-width: 4.5;
}

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

.fed-ruhelinie--stark { opacity: 0.75; stroke-width: 2; }