/* Lernschicht der Physiklabor-Versuche — der geteilte Rahmen.
   Stationen, Pager, Leitfragen, Protokoll, Herleitungs-Stepper und
   Beschriftungsaufgaben. Herausgelöst aus der V60-Schicht (2026-08-27),
   damit alle Versuche dieselbe Optik tragen statt Kopien voneinander.

   Karten, Navigation und Modultitel kommen weiter aus
   blueprint_elearning.css / lab_introduction.css; hier steht nur, was die
   Lernschicht darüber hinaus braucht. Farbregeln hängen am Container, weil
   `body.neutral0color-onbackground p|a|span` (0,1,2) jede einfache
   Klassenregel still schlägt — Style Guide §4.6a. */

/* Interaktive Lernschicht V60 Linsen. Basis-Komponenten: .elearn-card/.card-badge
   aus blueprint_elearning.css, .elearn-btn aus lab_introduction.css. */

.lernschicht__intro {
    margin-bottom: var(--spacing-lg);
}

.lernschicht__formula {
    text-align: center;
    margin: var(--spacing-md) 0;
    font-size: var(--text-lg);
}

/* Lange Formeln sprengen sonst still die Karte (auf 420 px reicht keine
   Zeile aus). Sie scrollen in ihrem eigenen Kasten, nicht die Seite. */
.lernschicht__formula,
.herleitung__tex {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 640px) {
    .lernschicht__formula,
    .herleitung__tex {
        font-size: var(--text-base);
    }

    /* Beide Knopfzeilen passen nebeneinander nicht mehr in die Karte
       (gemessen 441 px in 258 px) — auf schmalen Fenstern stehen sie
       untereinander, sonst werden die Beschriftungen abgeschnitten. */
    .lernschicht__steps,
    .herleitung__nav {
        flex-direction: column;
        align-items: stretch;
    }

    .lernschicht__steps .elearn-btn,
    .herleitung__nav .elearn-btn {
        width: 100%;
        justify-content: center;
    }

    .herleitung__stand {
        order: -1;
        text-align: center;
    }
}

.lernschicht__qlist {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.lernschicht__qlist > li {
    margin-bottom: var(--spacing-md);
}

.lernschicht__q {
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.lernschicht__note {
    width: 100%;
    padding: var(--spacing-sm);
    border: var(--border-base) solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    color: inherit;
    font: inherit;
    resize: vertical;
}

.lernschicht__note:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* ── Ergebniskarte am Ende der Leitfragen ──────────────────────────────
   Je gesuchter Größe zwei Felder: die Beziehung symbolisch und der
   Zahlenwert. Das Wertfeld ist schmal und trägt seine Einheit daneben —
   so steht im Protokoll eine Zahl MIT Einheit, vergleichbar mit der
   Prüfansicht hinter dem QR-Code. */
.lernschicht__ergebnisse > li + li {
    margin-top: var(--spacing-lg);
}

/* Gewürfelte Apparaturgröße, ohne die die gesuchte Größe nicht bestimmbar
   wäre — steht über den Feldern, damit man beim Rechnen nicht suchen muss. */
.lernschicht__gegeben {
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: var(--border-thick) solid rgba(var(--chart-teal-rgb), 0.55);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(var(--chart-teal-rgb), 0.08);
}

.lernschicht__gegeben-wert {
    display: inline-block;
    margin-left: var(--spacing-sm);
    font-weight: 600;
}

.lernschicht__feldname {
    display: block;
    margin: var(--spacing-sm) 0 4px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--textcolor-80contrast);
}

.lernschicht__wertfeld {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.lernschicht__wertfeld .lernschicht__note {
    flex: 0 1 14rem;
    resize: none;
}

.lernschicht__einheit {
    font-weight: 600;
    color: var(--textcolor-80contrast);
    white-space: nowrap;
}

/* Die globale Regel `body.neutral0color-onbackground label|span` (0,1,2)
   schlägt jede einfache Klassenregel — Style Guide §4.6a. */
body.neutral0color-onbackground .lernschicht__feldname,
body.neutral0color-onbackground .lernschicht__einheit {
    color: var(--textcolor-80contrast);
}

/* Der Rückweg zu den Leitfragen — steht nach einer etwaigen Schrittfolge
   und gehört nicht mehr zur Einleitung, deshalb etwas Abstand darüber. */
.lernschicht__rueckweg {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

.lernschicht__hint {
    margin-top: var(--spacing-md);
    font-style: italic;
    /* --text-muted does not exist; use --textcolor-50contrast (same value as .text-muted utility) */
    color: var(--textcolor-50contrast);
}

.lernschicht__sources ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

/* Quellenangabe: Titel als Link zur Verlagsseite (DOI), Ausgabe dahinter
   gedämpft. Eigene Zeile je Quelle, damit lange Angaben nicht umbrechen
   und den Titel verstecken. */
.lernschicht__sources li {
    margin-bottom: var(--spacing-xs);
}

.lernschicht__sources .lernschicht__quelle-ausgabe {
    color: var(--textcolor-50contrast);
}

/* Der Titel ist der Link auf die Verlagsseite. <i> ist projektweit die
   Mathe-Schrift (--font-math) — ein Buchtitel ist keine Formel, deshalb
   <cite> in der Textschrift. */
.lernschicht__sources cite {
    font-family: inherit;
    font-style: italic;
}

/* Trennzeichen zwischen Titel und Ausgabe als CSS-Inhalt: ein Textknoten,
   der mit einem Komma beginnt, ist nicht übersetzbar (i18n-Regel). */
.lernschicht__sources .lernschicht__quelle-ausgabe::before {
    content: "\2014\00a0";   /* Geviertstrich + geschütztes Leerzeichen */
}

/* Die globale Regel `body.neutral0color-onbackground a` (0,1,2) schlägt
   jede einfache Klassenregel — Style Guide §4.6a. Ohne diesen Selektor
   sähen die Quellen aus wie Fließtext. */
body.neutral0color-onbackground .lernschicht__sources a,
.lernschicht__sources a {
    color: var(--primary-color);
    text-decoration: none;
}

body.neutral0color-onbackground .lernschicht__sources a:hover,
body.neutral0color-onbackground .lernschicht__sources a:focus-visible,
.lernschicht__sources a:hover,
.lernschicht__sources a:focus-visible {
    text-decoration: underline;
}

.lernschicht__pdf-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-weight: 600;
}

.lernschicht__cta {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.lernschicht__caption {
    text-align: center;
    font-size: var(--text-sm, 0.9em);
    color: var(--textcolor-50contrast);
    margin-top: var(--spacing-xs);
}

.lernschicht__legend {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding-left: var(--spacing-lg);
}

/* ============================================================
   Stationen der Seite: Grundlagen → Versuch → Leitfragen → Protokoll
   (Umbau 2026-08-27). Navigation, Modul-Umschaltung und Kartenoptik kommen
   aus blueprint_elearning.css / lab_introduction.css (.module-nav,
   .elearning-module, .elearn-btn) — hier steht nur, was dieser Seite eigen ist.
   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.
   ============================================================ */

/* Einordnung über der Stationsnavigation: erklärt den Weg der ganzen Seite. */
.lernschicht .lernschicht__lead {
    margin-bottom: var(--spacing-lg);
    color: var(--textcolor-50contrast);
}

/* Weiter/Zurück am Fuß jeder Station */
.lernschicht__steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.lernschicht__steps .elearn-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
}

/* Richtungswort tritt hinter den Stationsnamen zurück. */
.lernschicht .lernschicht__steps-kind {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Zusammensetzungen wie „Abbildungsgleichung" sprengen auf schmalen Fenstern
   die Karte, wenn sie nicht umbrechen dürfen. */
.lernschicht h2,
.lernschicht h3 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Protokollkarte: der Messstand steht sichtbar dabei. */
.lernschicht .lernschicht__stand {
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm, 0.9em);
}

.lernschicht .lernschicht__stand.is-bereit {
    background: rgba(var(--success-rgb), 0.10);
    color: var(--success-800);
}

.lernschicht .lernschicht__stand.is-offen {
    background: var(--warning-50);
    color: var(--warning-800);
}

/* Ergebnis der eigenen Auswertung in der Station „Versuch" — Diagramm und
   Regressionsparameter aus dem Protokoll-Schnappschuss. */
.lernschicht__chart {
    margin: 0 0 var(--spacing-lg);
}

.lernschicht__chart img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border-base) solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--neutrals-0);
}

.lernschicht .lernschicht__chart figcaption {
    margin-top: var(--spacing-xs);
    color: var(--textcolor-50contrast);
    font-size: var(--text-sm, 0.9em);
    text-align: center;
}

/* Zwei Ergebniskarten (V07): der Name der Messreihe steht als eigene,
   kleinere Zeile unter „Ihre Auswertung:" — so bricht auf schmalen Fenstern
   nichts mitten im Wort („Auswer-tung: Homoge-ner", Sweep-Befund 420 px). */
.lernschicht__ergebnis h3 { hyphens: manual; }
.lernschicht__serie {
    display: block;
    font-size: 0.72em;
    font-weight: 600;
    color: rgba(var(--chart-teal-rgb), 1);
    margin-top: 0.15em;
}

.lernschicht__params-titel {
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-base);
}

.lernschicht__params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    margin: 0;
}

.lernschicht__param {
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-base) solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
}

.lernschicht .lernschicht__param dt {
    color: var(--textcolor-50contrast);
    font-size: var(--text-sm, 0.9em);
    font-weight: 600;
}

.lernschicht .lernschicht__param dd {
    margin: 0;
    color: var(--textcolor-fullcontrast);
    font-size: var(--text-lg);
    font-weight: 700;
}

/* Diagramm vergrößern: das Bild sitzt in einem Knopf (Tastaturbedienung),
   der Hinweis erscheint beim Überfahren und bei Fokus. */
/* Der Knopf umschließt das Bild passgenau — sonst hängt der Hinweis
   rechts DANEBEN statt in der Ecke des Diagramms. */
.lernschicht__zoom {
    display: block;
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

/* ── Vor der ersten Messung: der Platz steht schon da ─────────────────
   Ein leeres Achsenkreuz sagt mehr als eine Leerstelle — man sieht, dass
   hier später das eigene Diagramm erscheint (Betreiber-Wunsch 2026-08-28). */
.lernschicht__leer {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-md);
    border: 1px dashed var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
}

.lernschicht__ergebnis.is-leer .lernschicht__leer {
    display: flex;
}

.lernschicht__ergebnis.is-leer .lernschicht__zoom {
    cursor: default;
}

.lernschicht__ergebnis.is-leer .lernschicht__zoom-hint {
    display: none;
}

.lernschicht__leer-bild {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.lernschicht__leer-raster line {
    stroke: var(--surface-border);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.lernschicht__leer-achse line {
    stroke: var(--textcolor-50contrast);
    stroke-width: 2;
}

.lernschicht .lernschicht__leer-text {
    max-width: 34ch;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--textcolor-50contrast);
}

.lernschicht .lernschicht__param.is-leer dd {
    color: var(--textcolor-50contrast);
}

/* Oben rechts: dort ist im Diagramm Rand, keine Daten. Immer sichtbar
   (sonst findet niemand die Vergrößerung), im Überfahren deutlicher. */
.lernschicht__zoom-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.92);
    color: var(--neutrals-0);
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0.55;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.lernschicht__zoom:hover .lernschicht__zoom-hint,
.lernschicht__zoom:focus-visible .lernschicht__zoom-hint {
    opacity: 1;
}

/* Großansicht — nutzt die Plattform-Modalklassen, füllt aber den Schirm. */
.lernschicht__bildmodal-inner {
    position: relative;
    max-width: min(1280px, 94vw);
    max-height: 92vh;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
    border-radius: var(--radius-lg);
    background: var(--neutrals-0);
    box-shadow: var(--shadow-hover-md);
}

.lernschicht__bildmodal-inner img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 4rem);
    object-fit: contain;
}

/* ── Herleitung: eine Zeile je Schritt ─────────────────────────── */
.herleitung {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border: var(--border-base) solid var(--surface-border);
    border-radius: var(--radius-lg);
    background: var(--surface-bg);
}

.herleitung__list {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.herleitung__row {
    margin-bottom: var(--spacing-md);
    opacity: 0.72;
    transition: opacity var(--transition-base);
}

.herleitung__row.is-aktuell { opacity: 1; }
.herleitung__row[hidden] { display: none; }

.lernschicht .herleitung__note { margin-bottom: var(--spacing-xs); }

.herleitung__tex {
    margin: 0;
    font-size: var(--text-lg);
}

.herleitung__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: var(--border-base) solid var(--surface-border);
}

.lernschicht .herleitung__stand {
    color: var(--textcolor-50contrast);
    font-size: var(--text-sm);
    font-weight: 600;
}

.herleitung__nav .elearn-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Selbstkontrolle: ein Zwischenergebnis zum Aufdecken ────────
   Für Herleitungen, die auf Papier entstehen: jede Kontrolle gibt nur
   ihren eigenen Schritt preis, das Endergebnis steht abgesetzt. */
.lernschicht__kontrolle {
    margin: var(--spacing-sm) 0;
    border: var(--border-base) solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-bg);
}

.lernschicht__kontrolle summary {
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    color: var(--primary-color);
    list-style: none;
}

.lernschicht__kontrolle summary::-webkit-details-marker { display: none; }
.lernschicht__kontrolle summary::before { content: "\25B8\00a0"; }
.lernschicht__kontrolle[open] summary::before { content: "\25BE\00a0"; }

.lernschicht__kontrolle summary:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.35);
    outline-offset: -3px;
}

.lernschicht__kontrolle-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    border-top: var(--border-base) solid var(--surface-border-light);
    background: var(--neutrals-0);
}

/* Spezifität: die globale Regel `body.neutral0color-onbackground p` (0,1,2)
   schlägt eine einfache Klassenregel — deshalb unter dem Modul-Container. */
.lernschicht .lernschicht__kontrolle-body p {
    margin-bottom: var(--spacing-xs);
    color: var(--textcolor-80contrast);
}

.lernschicht .lernschicht__kontrolle-body p:last-child { margin-bottom: 0; }

.lernschicht__kontrolle--ergebnis { border-color: var(--primary-color); }
.lernschicht__kontrolle--ergebnis summary { background: var(--primary-tint); }

/* ── Beschriftungsaufgabe: Chips in Ablagefelder ───────────────── */
.beschriftung {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--border-base) solid var(--surface-border);
}

.lernschicht .beschriftung__frage {
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.beschriftung__bild {
    position: relative;
}

.beschriftung__slot {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 2.6rem;
    min-height: 1.9rem;
    padding: 2px 6px;
    border: 2px dashed rgba(var(--primary-rgb), 0.55);
    border-radius: var(--radius-sm);
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--primary-color);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.beschriftung__slot--breit {
    width: 21%;
    min-width: 0;
    font-size: var(--text-xs);
    overflow-wrap: break-word;
}

.beschriftung__slot.is-belegt {
    border-style: solid;
    background: rgba(var(--primary-rgb), 0.14);
}

.beschriftung__slot.is-falsch {
    border-color: rgba(var(--chart-rose-rgb), 0.9);
    background: rgba(var(--chart-rose-rgb), 0.12);
    color: var(--textcolor-fullcontrast);
}

.beschriftung__palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.beschriftung__chip {
    padding: 6px 14px;
    border: var(--border-base) solid var(--surface-border);
    border-radius: 999px;
    background: var(--neutrals-0);
    color: var(--textcolor-fullcontrast);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: grab;
    touch-action: none;
}

.beschriftung__chip:hover,
.beschriftung__chip.is-gewaehlt {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.beschriftung__chip.is-gewaehlt {
    background: rgba(var(--primary-rgb), 0.10);
    box-shadow: var(--shadow-sm);
}

.beschriftung__chip.is-verbraucht {
    opacity: 0.35;
}

.beschriftung__chip.is-geist {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
}

.beschriftung__aktionen {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.lernschicht .beschriftung__fb {
    margin: var(--spacing-sm) 0 0;
    font-weight: 600;
}

.lernschicht .beschriftung__fb.is-ok { color: var(--success-800); }
.lernschicht .beschriftung__fb.is-no { color: var(--warning-800); }

/* Auf schmalen Fenstern schrumpft die Zeichnung so weit, dass sich die
   Ablagefelder überlappen würden. Dann bekommt sie eine Mindestbreite und
   scrollt waagerecht, die Felder rutschen darunter — die Nummern halten die
   Zuordnung zur Zeichnung. */
@media (max-width: 640px) {
    .lens-ray-nr--masse { display: block; }

    .beschriftung__bild {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        overflow-x: auto;
    }

    /* Gilt für jede Versuchszeichnung, nicht nur die des Linsenversuchs:
       die Zeichnung behält ihre Mindestbreite und scrollt waagerecht. */
    .beschriftung__bild > svg {
        flex: 1 0 100%;
        min-width: 560px;
    }

    .beschriftung .beschriftung__slot {
        position: static;
        transform: none;
        width: auto;
        min-width: 8rem;
        font-size: var(--text-sm);
    }

    .beschriftung .beschriftung__slot::before {
        content: attr(data-nr) ": ";
        font-weight: 700;
    }
}

/* Kleine Vergleichstabelle in einer Karte (z. B. geradlinig ↔ drehend). */
.lernschicht__tabelle {
    width: 100%;
    margin: var(--spacing-md) 0;
    border-collapse: collapse;
    font-size: var(--text-sm);
    /* Feste Spaltenbreiten: sonst zwingt ein langes Wort wie
       „Trägheitsmoment" die Tabelle auf schmalen Fenstern über die Karte
       hinaus (gemessen 240 px in 234 px). */
    table-layout: fixed;
}

.lernschicht__tabelle td,
.lernschicht__tabelle th {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.lernschicht__tabelle th,
.lernschicht__tabelle td {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--surface-border-light);
}

.lernschicht__tabelle th {
    font-weight: 700;
    color: var(--textcolor-fullcontrast);
    border-bottom-color: var(--surface-border);
}



/* ── Gerechnete Kurven in den Lernschichten (V05, V07; V11 hat sein eigenes
   Präfix pend-diagramm) — Kanalfarben teal/orange, Blau bleibt den
   Scatterplots des Prüfstands vorbehalten (2026-09-03). ── */
.ls-diagramm-rahmen {
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

.ls-diagramm {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    font-size: 17px;
}

.ls-diagramm__raster line { stroke: currentColor; stroke-width: 1; opacity: 0.12; }
.ls-diagramm__achsen line { stroke: currentColor; stroke-width: 1.6; opacity: 0.7; }
.ls-diagramm__ticks text,
.ls-diagramm__legende text { fill: currentColor; opacity: 0.85; }
.ls-diagramm__achse { font-weight: 600; }

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

.ls-diagramm__linie--teal { stroke: rgba(var(--chart-teal-rgb), 1); }
.ls-diagramm__linie--orange { stroke: rgba(var(--chart-orange-rgb), 1); }
/* Zweite Modellkurve im selben Bild (V07: der zweite Körper). Orange bleibt
   den gemessenen Beispielpunkten vorbehalten — Betreiber-Vorgabe 03.09.2026. */
.ls-diagramm__linie--purple { stroke: rgba(var(--chart-purple-rgb), 1); }

/* Hilfslinie (z. B. Asymptote) — gestrichelt, in der Textfarbe */
.ls-diagramm__hilfslinie {
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-dasharray: 6 5;
    opacity: 0.55;
}
.ls-diagramm__hilfstext { fill: currentColor; opacity: 0.7; font-style: italic; }

.ls-diagramm__punkte circle,
.ls-diagramm__punkt {
    stroke: var(--neutrals-0);
    stroke-width: 2;
}

.ls-diagramm__punkte--teal circle,
.ls-diagramm__punkt--teal { fill: rgba(var(--chart-teal-rgb), 1); }
.ls-diagramm__punkte--orange circle,
.ls-diagramm__punkt--orange { fill: rgba(var(--chart-orange-rgb), 1); }

@media (max-width: 640px) {
    .ls-diagramm { min-width: 520px; }
}