/* Live-Marktspanne (Testbereich). Nur Darstellung: die Spanne ist der Mittelpunkt, alles andere tritt zurueck. */
.ms-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.ms-test-hinweis{margin:0 0 16px;padding:10px 14px;border:1px dashed var(--accent);border-radius:var(--r);background:var(--accent-soft);color:var(--ink);font-size:.92rem}
.ms-seite{position:sticky;top:92px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ms{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 24px;border:1px solid var(--line);border-radius:18px;min-width:0;
  background:radial-gradient(120% 90% at 50% 0,rgba(254,124,2,.10),transparent 60%),var(--card);overflow:hidden}
.ms-titel{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ms-ebene{margin:-8px 0 0;font-size:.95rem;font-weight:600;color:var(--accent)}
.ms-leer{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.ms-inhalt{display:flex;flex-direction:column;gap:16px}
.ms-inhalt[hidden],.ms-leer[hidden]{display:none}
.ms-gross{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.35rem);line-height:1.05;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-gross i{font-style:normal;color:var(--accent);padding:0 .08em}.ms-gross em{font-style:normal;font-size:.55em;color:var(--muted);margin-left:.15em}
.ms-sub{margin:-8px 0 0;font-size:.85rem;color:var(--muted)}.ms-sub b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ms-enden{display:flex;justify-content:space-between;margin-top:-6px;font-size:.8rem;color:var(--muted)}.ms-enden b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ms-hinweise{margin:0;font-size:.78rem;color:#ffc24d;line-height:1.4}.ms-hinweise:empty{display:none}
.ms-info{font-size:.74rem;color:var(--muted)}.ms-info summary{cursor:pointer;list-style:none;display:inline-block;opacity:.8}.ms-info summary::-webkit-details-marker{display:none}
.ms-info summary::before{content:"ⓘ ";}.ms-info p{margin:8px 0 0;line-height:1.5}
@media(max-width:900px){.ms-layout{grid-template-columns:1fr}.ms-seite{position:static}}
/* Tacho */
.ms-buehne{display:flex;flex-direction:column;gap:16px}
.ms-gross--m{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.ms-tacho{width:100%;height:auto;overflow:visible}
.ms-tacho path{fill:none;stroke-linecap:round}
.t-bahn{stroke:rgba(255,255,255,.09);stroke-width:16}
.t-fein{stroke:rgba(254,124,2,.45);stroke-width:3;transform:scale(1.06);transform-origin:120px 120px}
.t-bereich{stroke:var(--accent);stroke-width:16;filter:drop-shadow(0 4px 12px rgba(254,124,2,.55))}
.ms-tacho line{stroke:#fff;stroke-width:4;stroke-linecap:round}.ms-tacho circle{fill:#fff;stroke:var(--card);stroke-width:4}
/* Startseite: Tacho im Hero, erscheint nach dem Klick auf eine Marke */
.ms--hero{margin-top:22px;max-width:340px;background:radial-gradient(120% 90% at 50% 0,rgba(254,124,2,.14),transparent 60%),rgba(10,10,10,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.16)}
.ms--hero[hidden]{display:none}
@media(min-width:1000px){.ms--hero{position:absolute;top:var(--ms-top,76px);right:24px;width:280px;margin-top:0;padding:18px 20px;gap:12px}.ms--hero .ms-enden,.ms--hero .ms-gross{display:none}.ms--hero .s-zahlen{display:block}.ms--hero .ms-gross--m{font-size:1.45rem}}
/* Fenster mit den Fahrzeugangaben ist offen: bei genug Platz (ab 1400 px) schwebt der Tacho daneben, sonst steht er oben im Fenster (siehe .ms--dlg) */
@media(min-width:1400px){html.dlg-offen .ms--hero:not(.ms--dlg){position:fixed;top:var(--ms-top,50%);left:var(--ms-left,auto);right:auto;width:280px;z-index:91;transform:translateY(var(--ms-versatz,-50%))}}
/* Untere Sektion: Tacho kommt als Letztes, dann fuehrt eine Maus durch die Marken */
.moment-buttons{position:relative}
.ms--moment{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}.ms--moment.ms-ein{opacity:1;transform:none}
@media(min-width:1000px){.ms--moment{top:0;right:0}}
html.dlg-offen .ms--hero.ms--moment{display:none}
.moment--cta{position:relative}
.ms-maus{position:absolute;left:0;top:0;z-index:6;width:30px;height:30px;margin:-4px 0 0 -6px;pointer-events:none;opacity:0;transition:transform 1s cubic-bezier(.45,0,.2,1),opacity .4s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.ms-maus.an{opacity:1}.ms-maus.druck svg{transform:scale(.82)}.ms-maus svg{transition:transform .15s}
.mini-b.ms-hover{border-color:var(--accent);transform:translateY(-2px) scale(.97);background:rgba(254,124,2,.22)}
@media(prefers-reduced-motion:reduce){.ms--moment{transition:none}.ms-maus{display:none}}
/* Handy und schmale Fenster: schlanke Skala statt Tacho, immer im Blickfeld */
.ms-skala{display:none;position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.1)}
.ms-skala i{position:absolute;top:50%;transform:translateY(-50%);display:block}
.ms-skala .s-w{height:4px;border-radius:2px;background:rgba(254,124,2,.5)}
.ms-skala .s-b{height:12px;border-radius:6px;background:var(--accent);box-shadow:0 2px 10px rgba(254,124,2,.55)}
.s-zahlen{display:none;position:relative;height:22px;margin-top:2px}.s-zahlen b{position:absolute;top:0;font:700 1rem var(--sans);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}.s-zahlen b:first-child{transform:translateX(-100%);padding-right:6px}.s-zahlen b:last-child{padding-left:6px}
.ms-skala .s-n{width:4px;height:22px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
@media(max-width:999px){
  .ms .ms-tacho{display:none}.ms .ms-skala{display:block;margin:6px 2px}
  .ms--hero{position:static;max-width:none;margin:16px 0 0;padding:10px 14px 12px;gap:4px;border-radius:14px}
.ms--hero .ms-tacho{display:none}.ms--hero .ms-skala{display:block;margin:2px 2px}
.ms--hero .ms-buehne,.ms--hero .ms-inhalt{gap:4px}
.ms--hero .ms-ebene{margin:0;font-size:.78rem;padding-right:28px}.ms--hero .ms-gross--m{font-size:1.2rem}
.ms--hero .ms-enden{display:none}.ms--hero .ms-hinweise{font-size:.7rem}
.ms--hero .ms-info summary{position:absolute;top:6px;right:12px;font-size:0;padding:4px}.ms--hero .ms-info summary::before{font-size:1rem}
.ms--hero .ms-info p{max-height:30vh;overflow:auto}
}
/* Im Fenster: schlanke Skala, oben im Fenster mitlaufend (nicht schwebend) */
.ms--dlg .ms-tacho{display:none}.ms--dlg .ms-skala{display:block;margin:2px 2px}
.ms--dlg .ms-buehne,.ms--dlg .ms-inhalt{gap:4px}
.ms--dlg .ms-ebene{margin:0;font-size:.78rem;padding-right:28px}.ms--dlg .ms-gross--m{font-size:1.2rem}
.ms--dlg .ms-enden,.ms--dlg .ms-gross{display:none}.ms--dlg .s-zahlen{display:block}.ms--dlg .ms-hinweise{font-size:.7rem}
.ms--dlg .ms-info summary{position:absolute;top:6px;right:12px;font-size:0;padding:4px}.ms--dlg .ms-info summary::before{font-size:1rem}
.ms--dlg .ms-info p{max-height:30vh;overflow:auto}
.ms--hero.ms--dlg{position:sticky;top:0;z-index:5;right:auto;width:auto;max-width:none;margin:0 0 12px;padding:10px 14px 12px;gap:4px;border-radius:14px;transform:none;background:#141414;-webkit-backdrop-filter:none;backdrop-filter:none}
.ms--hero.ms--dlg:not([hidden]){display:flex}
.ms-haken{font-style:normal;font-weight:800;color:#2ecc71;margin-right:.45em}.ms-ebene span{color:var(--muted);font-weight:500}

/* Erscheinen/Verschwinden des Tachos auf der Startseite: weich (einzelne Eigenschaften translate/scale, damit transform der Positionierung unberuehrt bleibt) */
.ms--hero.ms-an{opacity:0;translate:0 18px;scale:.96;filter:blur(8px);transition:opacity .32s ease-in,translate .32s ease-in,scale .32s ease-in,filter .32s ease-in;will-change:opacity,translate,scale,filter}
.ms--hero.ms-an.ms-ein{opacity:1;translate:0 0;scale:1;filter:blur(0);transition:opacity .6s cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.16,1,.3,1),scale .7s cubic-bezier(.16,1,.3,1),filter .5s ease-out}
@media(prefers-reduced-motion:reduce){.ms--hero.ms-an{transition:none;filter:none}}

.ms-nebel{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);margin:0;text-align:center;font-weight:800;font-size:15px;line-height:1.3;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8);pointer-events:none;z-index:2}