/*
 * Moveliner — Bausteine: Grafik, Bewegung, Interaktion, Diagramme
 *
 * Setzt marke.css voraus und benutzt nur deren Variablen. Alle Klassen tragen das
 * Präfix ml-, damit nichts mit moveliner.css kollidiert. Verhalten liefert
 * js/marke-bewegung.js (und js/marke-diagramme.js für Diagramme). Ohne JavaScript
 * bleibt alles sichtbar und bedienbar, nur ohne Bewegung.
 *
 * Musterbibliothek zum Ausprobieren: designsystem/bausteine.html
 * Regeln: designsystem/brandbook.html, Kapitel Themenwelt, Grafik, Bewegung
 */

/* ════════════════════════════ Grafik ════════════════════════════ */

/* hidden gilt immer, auch gegen display-Regeln der Bausteine */
[class*="ml-"][hidden], [class*="ml-"] [hidden] { display: none !important; }

/* Leere <i> als Bauteile: nie kursiv, sonst lädt der Browser den Kursivschnitt unnötig */
.ml-pegel i, .ml-konfetti i, .ml-legende i, .ml-option .schalter, i.ml-lauflicht { font-style: normal; }

.ml-symbol { width: var(--ml-symbol); height: var(--ml-symbol); flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ml-symbol--klein { width: var(--ml-symbol-klein); height: var(--ml-symbol-klein); }
.ml-symbol--gross { width: var(--ml-symbol-gross); height: var(--ml-symbol-gross); }
.ml-symbol--regenbogen { --ml-bogen-1: var(--ml-regenbogen-rot); --ml-bogen-2: var(--ml-regenbogen-gelb); --ml-bogen-3: var(--ml-regenbogen-blau); }

/* Blaupause: Planraster für Werkstatt-Themen, Konfigurator-Ansicht, leere Zustände */
.ml-plan {
  background-color: var(--ml-flaeche);
  background-image:
    linear-gradient(var(--ml-plan-raster-stark) 1px, transparent 1px),
    linear-gradient(90deg, var(--ml-plan-raster-stark) 1px, transparent 1px),
    linear-gradient(var(--ml-plan-raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--ml-plan-raster) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
}
.ml-plan--dunkel {
  --ml-plan-raster: rgba(170, 182, 201, 0.06);
  --ml-plan-raster-stark: rgba(170, 182, 201, 0.12);
  background-color: var(--ml-dunkel-grund);
}

/* Maßlinie als Trenner, mit Beschriftung in der Mitte */
.ml-mass { display: flex; align-items: center; gap: 12px; color: var(--ml-plan); font: 700 12px/1 var(--ml-schrift); letter-spacing: var(--ml-sperrung-label); text-transform: uppercase; }
.ml-mass::before, .ml-mass::after {
  content: ""; flex: 1; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 1.5px 14px no-repeat;
}
.ml-mass::after { background-position: center, right center; }
.ml-mass:empty { gap: 0; }

/* Fahrbahnmarkierung als Trenner; --faehrt bewegt sie wie bei Fahrt */
.ml-fahrbahn { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ml-schiefer-300) 0 28px, transparent 28px 48px); }
.ml-fahrbahn--dunkel { background: repeating-linear-gradient(90deg, var(--ml-anthrazit-600) 0 28px, transparent 28px 48px); }
.ml-fahrbahn--faehrt { animation: ml-fahrbahn 0.9s linear infinite; }
@keyframes ml-fahrbahn { to { background-position: -48px 0; } }

/* Lauflicht: Regenbogen als LED-Band. Einmaliger Lauf = Bestätigung, Dauerlauf = Laden */
.ml-lauflicht { position: relative; height: 4px; border-radius: 2px; background: var(--ml-regenbogen); overflow: hidden; }
.ml-lauflicht::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); transform: translateX(-100%); }
.ml-lauflicht--laeuft::after { animation: ml-lauflicht 1.4s var(--ml-kurve-fahrt) infinite; }
.ml-lauflicht--einmal::after { animation: ml-lauflicht 0.9s var(--ml-kurve-fahrt) 1; }
@keyframes ml-lauflicht { to { transform: translateX(260%); } }

/* Pegel: Equalizer aus fünf Balken. Für „Sound aktiv" und als Ladeanzeige */
.ml-pegel { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; color: currentColor; }
.ml-pegel i { width: 3px; height: 100%; border-radius: 1.5px; background: currentColor; transform-origin: bottom; transform: scaleY(0.35); }
.ml-pegel--an i { animation: ml-pegel 0.9s ease-in-out infinite alternate; }
.ml-pegel--an i:nth-child(2) { animation-delay: -0.45s; }
.ml-pegel--an i:nth-child(3) { animation-delay: -0.2s; }
.ml-pegel--an i:nth-child(4) { animation-delay: -0.7s; }
.ml-pegel--an i:nth-child(5) { animation-delay: -0.35s; }
@keyframes ml-pegel { 0% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.55); } }

/* ════════════════════════════ Bewegung ════════════════════════════ */

/* Einblenden beim Scrollen. Versteckt wird nur, wenn JavaScript läuft (html.ml-js). */
.ml-js [data-ml-einblenden]:not(.ist-sichtbar) { opacity: 0; }
.ml-js [data-ml-einblenden="fahren"]:not(.ist-sichtbar) { transform: translateX(var(--ml-weg)); }
.ml-js [data-ml-einblenden="aufbauen"]:not(.ist-sichtbar) { transform: translateY(var(--ml-weg)); }
.ml-js [data-ml-einblenden="einschalten"]:not(.ist-sichtbar) { filter: brightness(0.6); }
[data-ml-einblenden] {
  transition: opacity var(--ml-dauer-lang) var(--ml-kurve-aufbau), transform var(--ml-dauer-lang) var(--ml-kurve-fahrt), filter var(--ml-dauer-mittel) linear;
  transition-delay: calc(var(--ml-i, 0) * var(--ml-staffel));
}

/* Fahrzeugschema: einrollen, Räder drehen, Marker einfedern, Planmodus */
.ml-schema { display: block; width: 100%; height: auto; overflow: visible; }
.ml-schema .ml-bemassung { opacity: 0; transition: opacity var(--ml-dauer-mittel); }
.ml-schema--plan .ml-bemassung { opacity: 1; }
.ml-schema--plan { --ml-schema-linie: var(--ml-plan); --ml-schema-flaeche: transparent; }
.ml-schema--dunkel { --ml-schema-linie: var(--ml-dunkel-text-2); --ml-schema-flaeche: var(--ml-dunkel-grund); --ml-schema-marker: var(--ml-weiss); --ml-schema-marker-text: var(--ml-anthrazit-900); }
.ml-schema .ml-l { transition: stroke var(--ml-dauer-mittel), fill var(--ml-dauer-mittel); }
.ml-schema--einrollen .ml-zugmaschine,
.ml-schema--einrollen .ml-auflieger { animation: ml-einrollen 1.5s var(--ml-kurve-fahrt) both; }
.ml-schema--einrollen .ml-rad path { animation: ml-rad 1.5s var(--ml-kurve-fahrt) both; }
@keyframes ml-einrollen { from { transform: translateX(1300px); } }
@keyframes ml-rad { from { transform: rotate(900deg); } }
.ml-schema .ml-marker { cursor: pointer; }
.ml-schema .ml-marker .ml-punkt, .ml-schema .ml-marker text { transform-box: fill-box; transform-origin: center; transition: transform var(--ml-dauer-mittel) var(--ml-kurve-einfedern), fill var(--ml-dauer); }
.ml-schema--einrollen .ml-marker .ml-punkt,
.ml-schema--einrollen .ml-marker text { animation: ml-marker-ein var(--ml-dauer-mittel) var(--ml-kurve-einfedern) both; animation-delay: calc(1.3s + var(--ml-i, 0) * var(--ml-staffel)); }
@keyframes ml-marker-ein { from { transform: scale(0); } }
.ml-schema .ml-marker:hover .ml-punkt, .ml-schema .ml-marker:focus .ml-punkt { transform: scale(1.15); }
.ml-schema .ml-marker.ist-aktiv .ml-punkt { fill: var(--ml-fokus); }
.ml-schema .ml-marker:focus { outline: none; }
.ml-schema .ml-marker:focus-visible .ml-punkt { stroke: var(--ml-fokus); stroke-width: 5; }
.ml-schema .ml-marker.ist-gewaehlt .ml-punkt { fill: var(--ml-reihe-3); }

/* Konfetti — nur bei einer gelungenen Anfrage, nie als Dekoration */
.ml-konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
.ml-konfetti i { position: absolute; width: 8px; height: 12px; border-radius: 1px; }

/* ════════════════════════════ Interaktion ════════════════════════════ */

/* Schrittfolge: Planen → Aufbauen → Auftreten. Ein Sattelzug fährt den Fortschritt ab. */
.ml-schritte { --ml-fortschritt: 0; position: relative; list-style: none; margin: 0; padding: 0 0 0; display: grid; grid-template-columns: repeat(var(--ml-schritte, 3), minmax(0, 1fr)); counter-reset: ml-schritt; }
.ml-schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ml-schiefer-100) 0 20px, transparent 20px 32px); }
.ml-schritte__strecke { position: absolute; left: 0; top: 46px; height: 4px; width: calc(var(--ml-fortschritt) * 100%); border-radius: 2px; background: var(--ml-regenbogen); background-size: calc(100% / max(var(--ml-fortschritt), 0.01)) 100%; transition: width var(--ml-dauer-lang) var(--ml-kurve-fahrt); }
.ml-schritte__fahrzeug { position: absolute; top: 14px; left: calc(18px + var(--ml-fortschritt) * (100% - 36px)); translate: -50% 0; width: 36px; height: 36px; color: var(--ml-text); transition: left var(--ml-dauer-lang) var(--ml-kurve-fahrt); }
.ml-schritte__fahrzeug svg { width: 100%; height: 100%; transform: scaleX(-1); }
.ml-schritte li { counter-increment: ml-schritt; padding-top: 66px; min-width: 0; }
.ml-schritte li:first-of-type { text-align: left; }
.ml-schritte li:last-of-type { text-align: right; }
.ml-schritte li:not(:first-of-type):not(:last-of-type) { text-align: center; }
.ml-schritte button { all: unset; cursor: pointer; display: inline-flex; flex-direction: column; gap: 2px; min-height: var(--ml-trefferflaeche); border-radius: var(--ml-radius-m); padding: 4px 6px; margin: -4px -6px; }
.ml-schritte button:focus-visible { outline: 3px solid var(--ml-fokus); outline-offset: 2px; }
.ml-schritte .nr { font: 700 12px/1.3 var(--ml-schrift); letter-spacing: var(--ml-sperrung-label); text-transform: uppercase; color: var(--ml-text-2); }
.ml-schritte .nr::before { content: counter(ml-schritt, decimal-leading-zero) " / "; }
.ml-schritte .titel { font: 600 17px/1.3 var(--ml-schrift); color: var(--ml-text-2); transition: color var(--ml-dauer); }
.ml-schritte [aria-current="step"] .titel, .ml-schritte .ist-erledigt .titel { color: var(--ml-text); }
.ml-schritte .ist-erledigt .titel::after { content: " ✓"; }

/* Regler, z. B. Personenzahl. Spur als Maßband mit Teilstrichen. */
.ml-regler { --ml-anteil: 0.5; display: grid; gap: 10px; }
.ml-regler__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ml-regler__kopf label { font: 600 14px/1.4 var(--ml-schrift); }
.ml-regler__wert { font: 700 32px/1 var(--ml-schrift); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ml-regler__wert small { font-size: 15px; font-weight: 400; color: var(--ml-text-2); letter-spacing: 0; margin-left: 4px; }
.ml-regler input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.ml-regler input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px;
  background:
    linear-gradient(90deg, var(--ml-aktion) 0 calc(var(--ml-anteil) * 100%), transparent 0),
    repeating-linear-gradient(90deg, var(--ml-schiefer-300) 0 1px, transparent 1px 10%),
    var(--ml-hell-200);
}
.ml-regler input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--ml-schiefer-300) 0 1px, transparent 1px 10%), var(--ml-hell-200); }
.ml-regler input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--ml-aktion); }
.ml-regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--ml-flaeche); border: 3px solid var(--ml-aktion); box-shadow: 0 2px 6px rgba(17, 19, 24, 0.18); transition: transform var(--ml-dauer-kurz) var(--ml-kurve-einfedern); }
.ml-regler input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ml-flaeche); border: 3px solid var(--ml-aktion); }
.ml-regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.ml-regler input[type="range"]:focus-visible { outline: 3px solid var(--ml-fokus); outline-offset: 2px; border-radius: 4px; }
.ml-regler__skala { display: flex; justify-content: space-between; font: 400 13px/1 var(--ml-schrift); color: var(--ml-text-2); font-variant-numeric: tabular-nums; }

/* Umschalter mit gleitender Markierung (CSS allein, bis vier Einträge) */
.ml-umschalter { --ml-aktiv: 0; --ml-anzahl: 2; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--ml-radius-m); background: var(--ml-hell-200); border: 0; margin: 0; min-width: 0; }
.ml-umschalter::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--ml-anzahl)); border-radius: 4px; background: var(--ml-aktion); transform: translateX(calc(var(--ml-aktiv) * 100%)); transition: transform var(--ml-dauer-mittel) var(--ml-kurve-fahrt); }
.ml-umschalter:has(label:nth-of-type(2) input:checked) { --ml-aktiv: 1; }
.ml-umschalter:has(label:nth-of-type(3) input:checked) { --ml-aktiv: 2; }
.ml-umschalter:has(label:nth-of-type(4) input:checked) { --ml-aktiv: 3; }
.ml-umschalter:has(label:nth-of-type(3)) { --ml-anzahl: 3; }
.ml-umschalter:has(label:nth-of-type(4)) { --ml-anzahl: 4; }
.ml-umschalter label { position: relative; display: grid; place-items: center; min-height: 44px; padding: 8px 12px; font: 600 15px/1.2 var(--ml-schrift); text-align: center; cursor: pointer; color: var(--ml-text); transition: color var(--ml-dauer-mittel); }
.ml-umschalter label:has(input:checked) { color: var(--ml-aktion-text); }
.ml-umschalter input { position: absolute; opacity: 0; pointer-events: none; }
.ml-umschalter label:has(input:focus-visible) { outline: 3px solid var(--ml-fokus); outline-offset: 2px; border-radius: 4px; }

/* Wahlkarte (eine aus mehreren), z. B. Aufbau im Konfigurator */
.ml-wahl { display: grid; gap: var(--ml-abstand-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.ml-wahlkarte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--ml-radius-l); background: var(--ml-flaeche); border: 1px solid var(--ml-linie); cursor: pointer; transition: border-color var(--ml-dauer), box-shadow var(--ml-dauer), opacity var(--ml-dauer-mittel), transform var(--ml-dauer-mittel) var(--ml-kurve-fahrt); }
.ml-wahlkarte:hover { border-color: var(--ml-linie-bedien); }
.ml-wahlkarte input { position: absolute; opacity: 0; pointer-events: none; }
.ml-wahlkarte .ml-symbol { color: var(--ml-text-2); transition: color var(--ml-dauer); }
.ml-wahlkarte strong { font: 700 24px/1.1 var(--ml-schrift); letter-spacing: -0.02em; font-stretch: var(--ml-breite-modell); }
.ml-wahlkarte span { font-size: 14px; color: var(--ml-text-2); }
.ml-wahlkarte::after { content: ""; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ml-linie-bedien); background: var(--ml-flaeche) center / 14px no-repeat; transition: transform var(--ml-dauer-mittel) var(--ml-kurve-einfedern), background-color var(--ml-dauer); }
.ml-wahlkarte:has(input:checked) { border-color: var(--ml-aktion); box-shadow: 0 0 0 1px var(--ml-aktion); }
.ml-wahlkarte:has(input:checked) .ml-symbol { color: var(--ml-text); }
.ml-wahlkarte:has(input:checked)::after { border-color: var(--ml-aktion); background-color: var(--ml-aktion); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); animation: ml-einfedern var(--ml-dauer-mittel) var(--ml-kurve-einfedern); }
.ml-wahlkarte:has(input:focus-visible) { outline: 3px solid var(--ml-fokus); outline-offset: 2px; }
.ml-wahlkarte.passt-nicht { opacity: 0.45; }
.ml-wahlkarte.passt-nicht span::after { content: " · passt nicht zur Personenzahl"; }
@keyframes ml-einfedern { from { transform: scale(0.4); } }

/* Optionskachel (mehrere wählbar). Beim Einschalten läuft das Lauflicht einmal durch. */
.ml-optionen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.ml-option { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; border-radius: var(--ml-radius-l); background: var(--ml-flaeche); border: 1px solid var(--ml-linie-bedien); overflow: hidden; cursor: pointer; transition: background var(--ml-dauer), border-color var(--ml-dauer); }
.ml-option input { position: absolute; opacity: 0; pointer-events: none; }
.ml-option .ml-symbol { color: var(--ml-text-2); transition: color var(--ml-dauer); }
.ml-option b { font: 600 15px/1.3 var(--ml-schrift); }
.ml-option b small { display: block; font-weight: 400; font-size: 13px; color: var(--ml-text-2); }
.ml-option .schalter { width: 36px; height: 20px; border-radius: 10px; background: var(--ml-hell-200); border: 1px solid var(--ml-linie-bedien); position: relative; transition: background var(--ml-dauer); }
.ml-option .schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ml-flaeche); box-shadow: 0 1px 2px rgba(17, 19, 24, 0.3); transition: transform var(--ml-dauer-mittel) var(--ml-kurve-einfedern); }
.ml-option::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ml-regenbogen); transform: scaleX(0); transform-origin: left; transition: transform var(--ml-dauer-lang) var(--ml-kurve-fahrt); }
.ml-option:has(input:checked) { background: var(--ml-flaeche-akzent); border-color: var(--ml-aktion); }
.ml-option:has(input:checked) .ml-symbol { color: var(--ml-text); }
.ml-option:has(input:checked) .schalter { background: var(--ml-aktion); border-color: var(--ml-aktion); }
.ml-option:has(input:checked) .schalter::after { transform: translateX(16px); }
.ml-option:has(input:checked)::after { transform: scaleX(1); }
.ml-option:has(input:focus-visible) { outline: 3px solid var(--ml-fokus); outline-offset: 2px; }
.ml-option:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* Mengenfeld mit Plus und Minus */
.ml-menge { display: inline-grid; grid-template-columns: 44px 56px 44px; align-items: center; border: 1px solid var(--ml-linie-bedien); border-radius: var(--ml-radius-m); background: var(--ml-flaeche); }
.ml-menge button { all: unset; display: grid; place-items: center; height: 44px; cursor: pointer; color: var(--ml-text); border-radius: var(--ml-radius-m); }
.ml-menge button:hover { background: var(--ml-flaeche-akzent); }
.ml-menge button:focus-visible { outline: 3px solid var(--ml-fokus); }
.ml-menge button:disabled { color: var(--ml-schiefer-300); cursor: not-allowed; background: none; }
.ml-menge output { text-align: center; font: 700 18px/1 var(--ml-schrift); font-variant-numeric: tabular-nums; }
.ml-menge output.ist-neu { animation: ml-einfedern var(--ml-dauer-mittel) var(--ml-kurve-einfedern); }

/* Textfeld mit Rückmeldung, die einfedert statt zu springen */
.ml-feld { display: grid; gap: 8px; font: 600 14px/1.4 var(--ml-schrift); }
.ml-feld input, .ml-feld textarea, .ml-feld select { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.4 var(--ml-schrift); color: var(--ml-text); background: var(--ml-flaeche); border: 1px solid var(--ml-linie-bedien); border-radius: var(--ml-radius-m); transition: border-color var(--ml-dauer), box-shadow var(--ml-dauer); }
.ml-feld input:focus, .ml-feld textarea:focus, .ml-feld select:focus { outline: none; border-color: var(--ml-fokus); box-shadow: 0 0 0 3px rgba(57, 114, 189, 0.25); }
.ml-feld__fuss { display: flex; justify-content: space-between; gap: 12px; font-weight: 400; font-size: 14px; color: var(--ml-text-2); min-height: 20px; }
.ml-feld__meldung { display: flex; gap: 6px; align-items: center; }
.ml-feld.ist-fehler input, .ml-feld.ist-fehler textarea { border-color: var(--ml-rot-fehler); }
.ml-feld.ist-fehler .ml-feld__meldung { color: var(--ml-rot-fehler); animation: ml-meldung-ein var(--ml-dauer-mittel) var(--ml-kurve-aufbau); }
.ml-feld.ist-ok .ml-feld__meldung { color: var(--ml-gruen-ok); animation: ml-meldung-ein var(--ml-dauer-mittel) var(--ml-kurve-aufbau); }
.ml-feld__zaehler { font-variant-numeric: tabular-nums; margin-left: auto; }
.ml-feld__zaehler.ist-knapp { color: var(--ml-gelb-warnung); font-weight: 600; }
@keyframes ml-meldung-ein { from { opacity: 0; transform: translateY(-6px); } }

/* Ablagefeld für Grafikdaten (Banner). Beim Überziehen wird es zur Blaupause. */
.ml-ablage { position: relative; display: grid; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center; border: 2px dashed var(--ml-linie-bedien); border-radius: var(--ml-radius-l); background: var(--ml-flaeche); color: var(--ml-text-2); cursor: pointer; transition: border-color var(--ml-dauer), background-color var(--ml-dauer); }
.ml-ablage strong { color: var(--ml-text); font: 600 16px/1.3 var(--ml-schrift); }
.ml-ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ml-ablage:has(input:focus-visible) { outline: 3px solid var(--ml-fokus); outline-offset: 2px; }
.ml-ablage.ist-ueber { border-style: solid; border-color: var(--ml-plan); color: var(--ml-plan); }
.ml-ablage.ist-ueber .ml-symbol { animation: ml-heben 0.6s var(--ml-kurve-aufbau) infinite alternate; }
@keyframes ml-heben { to { transform: translateY(-4px); } }
.ml-dateien { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ml-dateien li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--ml-radius-m); background: var(--ml-flaeche-akzent); font-size: 14px; animation: ml-meldung-ein var(--ml-dauer-mittel) var(--ml-kurve-aufbau); }
.ml-dateien li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-dateien li .ml-lauflicht { grid-column: 1 / -1; height: 3px; }

/* Rückmeldung am Rand: fährt ein, bleibt stehen, fährt aus */
.ml-meldungen { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.ml-meldung { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--ml-radius-l); background: var(--ml-dunkel-flaeche); color: var(--ml-dunkel-text); box-shadow: 0 12px 28px rgba(17, 19, 24, 0.25); font-size: 15px; line-height: 1.45; animation: ml-meldung-fahren var(--ml-dauer-lang) var(--ml-kurve-fahrt) both; }
.ml-meldung.ist-weg { animation: ml-meldung-weg var(--ml-dauer-mittel) ease-in both; }
.ml-meldung--ok .ml-symbol { color: #4ade80; }
.ml-meldung--fehler .ml-symbol { color: #f87171; }
@keyframes ml-meldung-fahren { from { opacity: 0; transform: translateX(calc(100% + 16px)); } }
@keyframes ml-meldung-weg { to { opacity: 0; transform: translateX(calc(100% + 16px)); } }

/* Kennzahl mit Hochzählen */
.ml-kennzahl { display: grid; gap: 4px; padding: 20px; border-radius: var(--ml-radius-l); background: var(--ml-flaeche); border: 1px solid var(--ml-linie); min-width: 0; }
.ml-kennzahl > span { font-size: 14px; color: var(--ml-text-2); }
.ml-kennzahl strong { font: 700 40px/1.05 var(--ml-schrift); letter-spacing: -0.03em; }
.ml-kennzahl small { font-size: 13px; color: var(--ml-text-2); }

/* ════════════════════════════ Warten ════════════════════════════ */
/* Ladeanzeige in Stufen (MLBewegung.lader). data-phase:
   0 = unter 0,3 s: nichts zeigen, sonst flackert es
   1 = bis 2 s: nur das Lauflicht
   2 = ab 2 s: Szene mit fahrendem Sattelzug und wechselnden Sätzen
   3 = ab 10 s: ehrlicher Hinweis, dass es länger dauert */
.ml-lader { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 28px 20px; text-align: center; color: var(--ml-text); transition: opacity var(--ml-dauer-mittel); }
.ml-lader--dunkel { color: var(--ml-dunkel-text); }
.ml-lader[data-phase="0"] { visibility: hidden; opacity: 0; }
.ml-lader[data-phase="1"] .ml-lader__szene, .ml-lader[data-phase="1"] .ml-lader__text,
.ml-lader[data-phase="0"] .ml-lader__szene, .ml-lader[data-phase="0"] .ml-lader__text { display: none; }
.ml-lader__zeit { font-size: 14px; color: var(--ml-text-2); min-height: 1.4em; max-width: 36ch; }
.ml-lader--dunkel .ml-lader__zeit { color: var(--ml-dunkel-text-2); }
.ml-lader:not([data-phase="3"]) .ml-lader__zeit { visibility: hidden; }
.ml-lader.ist-fertig { opacity: 0; }

.ml-lader__szene { position: relative; width: min(300px, 100%); height: 72px; overflow: hidden; animation: ml-meldung-ein var(--ml-dauer-lang) var(--ml-kurve-aufbau); }
.ml-lader__szene .ml-fahrbahn { position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; animation-duration: 0.6s; }
.ml-lader__zug { position: absolute; left: 50%; bottom: 3px; width: 64px; height: 64px; translate: -50% 0; }
.ml-lader__zug svg { width: 100%; height: 100%; transform: scaleX(-1); animation: ml-federn 0.36s ease-in-out infinite alternate; }
.ml-lader__szene::before, .ml-lader__szene::after { content: ""; position: absolute; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.25; animation: ml-fahrtwind 0.8s linear infinite; }
.ml-lader__szene::before { width: 28px; top: 26px; }
.ml-lader__szene::after { width: 18px; top: 42px; animation-delay: -0.4s; }
@keyframes ml-federn { to { transform: scaleX(-1) translateY(-2px); } }
@keyframes ml-fahrtwind { from { left: 58%; } to { left: -10%; } }
.ml-lader__text { font: 600 16px/1.4 var(--ml-schrift); min-height: 1.4em; transition: opacity var(--ml-dauer-mittel), transform var(--ml-dauer-mittel) var(--ml-kurve-aufbau); }
.ml-lader__text.ist-wechsel { opacity: 0; transform: translateY(6px); }

/* Ladebalken: mit bekanntem Stand (--ml-ladestand 0…1) oder offen */
.ml-ladebalken { width: min(300px, 100%); height: 4px; border-radius: 2px; background: var(--ml-hell-200); overflow: hidden; }
.ml-lader--dunkel .ml-ladebalken { background: var(--ml-anthrazit-700); }
.ml-ladebalken i { display: block; height: 100%; width: calc(var(--ml-ladestand, 0) * 100%); border-radius: 2px; background: var(--ml-regenbogen); background-size: 300px 100%; transition: width var(--ml-dauer-mittel) var(--ml-kurve-fahrt); }
.ml-ladebalken--offen i { width: 38%; animation: ml-ladebalken-offen 1.3s var(--ml-kurve-fahrt) infinite; }
@keyframes ml-ladebalken-offen { from { transform: translateX(-100%); } to { transform: translateX(265%); } }

/* Knopf im Wartezustand: Pegel statt Pfeil, Text bleibt stehen */
.ml-wartet { pointer-events: none; }
.ml-wartet .ml-pegel { display: inline-flex; }

/* Skelett: Platzhalter in der Form des kommenden Inhalts, als Blaupause */
.ml-skelett { position: relative; overflow: hidden; border-radius: var(--ml-radius-s); background: var(--ml-hell-200); }
.ml-skelett::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ml-plan-raster-stark), transparent); transform: translateX(-100%); animation: ml-lauflicht 1.6s var(--ml-kurve-fahrt) infinite; }
.ml-skelett--bild { aspect-ratio: 4 / 3; border-radius: var(--ml-radius-l); background-color: var(--ml-flaeche-akzent); background-image: linear-gradient(var(--ml-plan-raster-stark) 1px, transparent 1px), linear-gradient(90deg, var(--ml-plan-raster-stark) 1px, transparent 1px); background-size: 16px 16px; }
.ml-skelett--zeile { height: 14px; margin: 10px 0; }
.ml-skelett--titel { height: 26px; width: 60%; margin: 6px 0 14px; }

/* ════════════════════════════ Diagramme ════════════════════════════ */

.ml-diagramm { position: relative; min-width: 0; font-family: var(--ml-schrift); }
.ml-diagramm__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ml-diagramm__titel { font: 600 18px/1.3 var(--ml-schrift); margin: 0; }
.ml-diagramm__unter { font-size: 14px; color: var(--ml-text-2); margin: 4px 0 0; }
.ml-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--ml-text-2); }
.ml-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ml-legende i { width: 12px; height: 12px; border-radius: 3px; }
.ml-diagramm svg { display: block; width: 100%; height: auto; overflow: visible; }
.ml-diagramm .raster { stroke: var(--ml-diagramm-raster); stroke-width: 1; }
.ml-diagramm .grundlinie { stroke: var(--ml-diagramm-achse); stroke-width: 1.5; }
.ml-diagramm .achse { fill: var(--ml-text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ml-diagramm .kategorie { fill: var(--ml-text); font-size: 15px; font-weight: 600; }
.ml-diagramm .wert { fill: var(--ml-text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-diagramm .wert.leise { fill: var(--ml-text-2); font-weight: 400; }
.ml-diagramm .marke { transition: opacity var(--ml-dauer); }
.ml-diagramm .marke-offen { fill: url(#ml-schraffur); stroke: var(--ml-diagramm-offen); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ml-diagramm svg:hover .marke:not(:hover), .ml-diagramm svg:focus-within .marke:not(:focus) { opacity: 0.55; }
.ml-diagramm .marke:focus { outline: none; }
.ml-diagramm .treffer { fill: transparent; cursor: default; }
.ml-diagramm--wachsen .marke { transform-box: fill-box; animation: ml-balken-x var(--ml-dauer-lang) var(--ml-kurve-aufbau) both; animation-delay: calc(var(--ml-i, 0) * var(--ml-staffel)); }
.ml-diagramm--wachsen.ml-diagramm--saeulen .marke { animation-name: ml-balken-y; transform-origin: bottom; }
@keyframes ml-balken-x { from { transform: scaleX(0); } }
@keyframes ml-balken-y { from { transform: scaleY(0); } }
.ml-hinweis-box { position: absolute; z-index: 5; pointer-events: none; padding: 8px 10px; border-radius: var(--ml-radius-m); background: var(--ml-dunkel-flaeche); color: var(--ml-dunkel-text); font-size: 13px; line-height: 1.4; box-shadow: 0 6px 16px rgba(17, 19, 24, 0.2); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.ml-hinweis-box b { display: block; font-size: 15px; }
.ml-diagramm details { margin-top: 12px; font-size: 14px; }
.ml-diagramm summary { cursor: pointer; color: var(--ml-text-2); min-height: 44px; display: inline-flex; align-items: center; }
.ml-diagramm table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ml-diagramm th, .ml-diagramm td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ml-linie); }
.ml-diagramm td:last-child, .ml-diagramm th:last-child { text-align: right; }

/* Anteilsbalken (gestapelt, 100 %) */
.ml-anteile { display: flex; gap: 2px; height: 28px; border-radius: 4px; overflow: hidden; }
.ml-anteile > span { min-width: 4px; transition: flex-grow var(--ml-dauer-lang) var(--ml-kurve-fahrt); }

@media (forced-colors: active) {
  .ml-diagramm .marke { forced-color-adjust: none; }
  .ml-lauflicht, .ml-option::after { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-fahrbahn--faehrt, .ml-lauflicht--laeuft::after, .ml-lauflicht--einmal::after, .ml-pegel--an i,
  .ml-schema--einrollen .ml-zugmaschine, .ml-schema--einrollen .ml-auflieger, .ml-schema--einrollen .ml-rad path,
  .ml-schema--einrollen .ml-marker .ml-punkt, .ml-schema--einrollen .ml-marker text,
  .ml-ablage.ist-ueber .ml-symbol, .ml-diagramm--wachsen .marke,
  .ml-lader__zug svg, .ml-lader__szene::before, .ml-lader__szene::after, .ml-lader__szene .ml-fahrbahn,
  .ml-skelett::after { animation: none !important; }
  .ml-ladebalken--offen i { animation: none !important; width: 100%; opacity: 0.5; }
  .ml-pegel--an i { transform: scaleY(0.7); }
}