:root{color-scheme:light;--grund:#f4f4f4;--fläche:#fff;--kontrolle:#e8e8e8;--linie:#dedede;--text:#111;--weich:#656565;--leise:#898989;--aktiv:#111;--aktivtext:#fff;--skala:#aaa;--rot:#ed292f;--rotfläche:#e7b2b4;--schatten:0 1px 4px #0002;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
:root[data-thema=dunkel]{color-scheme:dark;--grund:#101010;--fläche:#212121;--kontrolle:#252525;--linie:#303030;--text:#eee;--weich:#adadad;--leise:#888;--aktiv:#eee;--aktivtext:#111;--skala:#666;--rot:#ff5459;--rotfläche:#693033;--schatten:none}
@media(prefers-color-scheme:dark){:root:not([data-thema=hell]){color-scheme:dark;--grund:#101010;--fläche:#212121;--kontrolle:#252525;--linie:#303030;--text:#eee;--weich:#adadad;--leise:#888;--aktiv:#eee;--aktivtext:#111;--skala:#666;--rot:#ff5459;--rotfläche:#693033;--schatten:none}}
*{box-sizing:border-box}body{margin:0;min-width:300px;background:var(--grund);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--text);outline-offset:4px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}svg{display:block}button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}fieldset{margin:0;padding:0;border:0;min-width:0}legend{padding:0}kbd{display:inline-block;border:1px solid var(--linie);border-radius:4px;padding:0 5px;font:11px/1.6 inherit;color:var(--weich)}
.kopfleiste{height:76px;display:flex;align-items:center;gap:26px;padding:0 36px;border-bottom:1px solid var(--linie)}.wortmarke{display:flex;align-items:center;font-size:16px;letter-spacing:5px;white-space:nowrap}.wortmarke:hover{text-decoration:none}.marken-e{font-size:0;width:11px;height:12px;background:linear-gradient(to bottom,currentColor 0 2px,transparent 2px 5px,currentColor 5px 7px,transparent 7px 10px,currentColor 10px);margin-right:5px}.lokal-marke{letter-spacing:1.8px;font-size:9px;font-weight:700;color:var(--weich);border-left:1px solid var(--linie);margin-left:13px;padding-left:15px}.betriebsstatus{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--weich);margin:0}.statuspunkt{width:7px;height:7px;border-radius:50%;background:#999;flex:none}.betriebsstatus[data-zustand=läuft] .statuspunkt{background:#398f44}.betriebsstatus[data-zustand=fehler] .statuspunkt{background:var(--rot)}.kopfaktionen{margin-left:auto;display:flex;align-items:center;gap:20px}.offline-status{font-size:10px;color:var(--leise)}.symboltaste{width:40px;height:40px;display:grid;place-items:center;background:transparent;font-size:27px;border-radius:8px}.symboltaste:hover{background:var(--kontrolle)}.symboltaste svg{width:23px;height:23px}
main{max-width:1190px;margin:0 auto;padding:14px 30px 0}.schaltlichter{display:flex;justify-content:center;gap:9px;height:16px;margin:2px auto 9px}.schaltlichter i{height:5px;width:29px;background:var(--linie);border-radius:4px;transition:background .1s}.schaltlichter i.leuchtet{background:var(--text)}.schaltlichter i.rot.leuchtet{background:var(--rot)}.cockpit{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(315px,1fr);gap:48px;align-items:start}.instrument{min-width:0;padding-top:12px}.instrumentenkopf{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:var(--leise);padding:0 22px}.drehzahlmesser{width:100%;max-height:590px;overflow:visible}.drehzahl-schiene,.roter-bereich,.drehzahl-bogen{stroke-width:11;stroke-linecap:round;fill:none}.drehzahl-schiene{stroke:var(--linie)}.roter-bereich{stroke:var(--rotfläche)}.drehzahl-bogen{stroke:var(--text)}.drehzahl-bogen.rot{stroke:var(--rot)}.skalenstrich{stroke:var(--skala);stroke-width:2.2}.skalenstrich.klein{stroke:var(--linie);stroke-width:1.3}.skalenstrich.rot{stroke:var(--rot)}.skalenzahl{font-size:26px;fill:var(--weich);font-weight:500}.skalenzahl.rot{fill:var(--rot)}.ganganzeige{font-size:91px;font-weight:700;fill:var(--text);letter-spacing:-5px}.geschwindigkeitsanzeige{font-size:52px;font-weight:700;fill:var(--text);letter-spacing:-2px}.instrument-beschriftung{fill:var(--leise);font-size:14px}.last-schiene{fill:var(--linie)}.last-balken{fill:var(--text)}.drehzahlangabe{fill:var(--leise);font-size:12px;letter-spacing:.5px}
.schaltwippen{display:flex;gap:12px;margin-top:-8px;margin-bottom:15px}.schalttaste{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;border:1px solid var(--linie);border-radius:8px;background:transparent;font-size:11px}.schalttaste>span{font-size:22px}.schalttaste:active{background:var(--kontrolle)}.pedale{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;padding:0 20px}.pedal{display:flex;align-items:center;justify-content:center;gap:11px;min-height:66px;border-radius:10px;background:var(--kontrolle);user-select:none;touch-action:none}.pedal svg{height:27px;width:23px}.pedal>span{display:flex;flex-direction:column;align-items:flex-start;font-size:13px;font-weight:600}.pedal small{font-weight:400;font-size:9px;color:var(--weich);margin-top:3px}.pedal.gedrückt{background:var(--aktiv);color:var(--aktivtext)}.pedal.gedrückt small{color:inherit;opacity:.7}.pedal.bremse.gedrückt{background:var(--rot);color:white}
.einstellungen{padding-top:4px;display:flex;flex-direction:column;min-height:620px}.motorkarte{display:flex;align-items:center;gap:15px;padding:9px 14px 9px 9px;background:var(--kontrolle);border-radius:13px;min-height:94px;text-align:left;width:100%}.motorbild{width:106px;height:74px;flex:none;overflow:hidden;border-radius:8px;background:#202020;display:grid;place-items:center}.motorbild img{width:100%;height:100%;object-fit:cover}.motorbild>svg{width:85px;height:55px;stroke:#aaa;fill:#303030;stroke-width:1.4}.motortext{display:flex;flex-direction:column;gap:4px;min-width:0}.motortext strong{font-size:16px;font-weight:600;line-height:1.25}.motortext>span{font-size:11px;color:var(--weich)}.pfeil{width:17px;height:17px;margin-left:auto;flex:none;stroke:var(--weich)}.klanghinweis{margin:10px 0 27px;font-size:10px;color:var(--leise)}.einstellzeile{display:grid;grid-template-columns:82px 1fr;align-items:center;margin-bottom:16px}.einstellzeile legend{display:contents;font-size:12px;color:var(--weich)}.einstellzeile legend+div{grid-column:2}.segmente{display:flex;border-radius:8px;padding:3px;background:var(--kontrolle);gap:3px;min-width:0}.segmente button{display:flex;align-items:center;justify-content:center;gap:5px;background:transparent;color:var(--weich);min-height:40px;flex:1;border-radius:6px;font-size:12px;padding:5px 8px;white-space:nowrap}.segmente button[aria-pressed=true]{background:var(--fläche);color:var(--text);box-shadow:var(--schatten);font-weight:600}.segmente button svg{height:14px;width:14px}.lautstärkefeld{padding:7px 0 6px}.lautstärkefeld>div{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--weich);margin-bottom:7px}.lautstärkefeld output{font-variant-numeric:tabular-nums;font-size:11px}.lautstärkefeld input{width:100%;height:24px;margin:0;accent-color:var(--text);cursor:pointer}.quellenhinweis{font-size:11px;color:var(--leise);line-height:1.6;margin:10px 0 18px;min-height:36px}.fehlermeldung{color:var(--rot);font-size:12px;border-left:2px solid var(--rot);padding-left:12px;margin:0 0 18px}.startbereich{margin-top:auto}.starttaste{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:60px;border-radius:10px;background:var(--aktiv);color:var(--aktivtext);font-size:16px;font-weight:600;transition:opacity .15s}.starttaste:hover{opacity:.82}.starttaste svg{width:21px;height:21px}.starttaste.läuft{background:var(--kontrolle);color:var(--text)}.starthinweis{display:block;text-align:center;font-size:10px;color:var(--leise);padding-top:9px;min-height:27px}
.hilfe{margin-top:42px;border-top:1px solid var(--linie);font-size:12px;color:var(--weich)}.hilfe summary{cursor:pointer;padding:18px 0}.hilfe>div{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-bottom:18px}.hilfe p{margin:0;line-height:1.8}.hilfe kbd{font-size:10px}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;max-width:1190px;padding:18px 30px 24px;margin:0 auto;font-size:10px;color:var(--leise);border-top:1px solid var(--linie)}footer a:hover{color:var(--text)}
dialog{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border:1px solid var(--linie);border-radius:18px;padding:28px;background:var(--grund);color:var(--text);box-shadow:0 20px 100px #0004}dialog::backdrop{background:#0007;backdrop-filter:blur(5px)}.dialogkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.dialogkopf h1{font-size:24px;letter-spacing:-.7px;line-height:1.3;margin:6px 0 0}.dialogkopf .symboltaste{flex:none;margin:-8px -8px 0 0}.überzeile{font-size:9px;letter-spacing:2px;color:var(--weich)}.dialogbeschreibung{font-size:12px;color:var(--weich);margin:12px 0 25px;line-height:1.7}.motorauswahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.motoroption{position:relative;text-align:left;background:var(--fläche);border:1px solid var(--linie);border-radius:10px;overflow:hidden;padding:0}.motoroption[aria-pressed=true]{border:2px solid var(--text)}.auswahlbild{height:116px;background:#202020;display:grid;place-items:center;overflow:hidden}.auswahlbild img{width:100%;height:100%;object-fit:cover}.auswahlbild>span{font-size:40px;color:#fff3;letter-spacing:4px;font-weight:700}.motoroption .auswahltext{display:flex;flex-direction:column;padding:14px;gap:5px}.motoroption strong{font-size:14px}.motoroption small{font-size:11px;color:var(--weich);line-height:1.6}.motoroption .zylinderdaten{font-size:9px;letter-spacing:.6px;color:var(--leise);margin-top:5px}.dialogfuß{font-size:10px;color:var(--leise);text-align:center;margin:22px 0 0}#anzeige-dialog{max-width:440px}#anzeige-dialog fieldset{margin-top:28px}#anzeige-dialog legend{font-size:12px;color:var(--weich);margin-bottom:9px}.zurücksetzen{background:transparent;border:1px solid var(--linie);border-radius:7px;min-height:42px;padding:8px 16px;font-size:12px}.ohne-javascript{position:fixed;inset:0;display:grid;place-items:center;background:var(--grund);margin:0;padding:30px;text-align:center}
@media(min-width:1350px){main{padding-top:25px}.cockpit{gap:72px}.instrument{padding-top:25px}.einstellungen{padding-top:14px}}
@media(max-width:850px){.kopfleiste{height:62px;padding:0 20px;gap:17px}.cockpit{gap:22px;grid-template-columns:minmax(0,1.25fr) minmax(275px,1fr)}main{padding:10px 20px 0}.einstellungen{min-height:560px}.instrumentenkopf{padding:0 10px;font-size:8px}.instrument{padding-top:45px}.einstellzeile{grid-template-columns:65px 1fr;margin-bottom:12px}.einstellzeile legend{font-size:11px}.segmente button{font-size:11px;min-height:36px;padding:4px}.motorkarte{min-height:76px;gap:10px}.motorbild{width:83px;height:58px}.motortext strong{font-size:14px}.motortext>span{font-size:10px}.klanghinweis{font-size:9px;margin:9px 0 20px}.pedale{padding:0}.pedal{gap:7px;min-height:61px}.pedal>span{font-size:12px}.pedal small{font-size:8px}.schalttaste{font-size:9px;gap:5px}.schalttaste kbd{display:none}.offline-status{display:none}.starthinweis{font-size:9px}.hilfe{margin-top:26px}footer{padding-left:20px;padding-right:20px}.hilfe>div{gap:20px}}
@media(max-width:620px){.kopfleiste{height:61px;padding:0 16px;gap:15px}.wortmarke{font-size:13px;letter-spacing:4px}.marken-e{width:10px;margin-right:4px}.lokal-marke{font-size:8px;letter-spacing:1px;margin-left:8px;padding-left:9px}.betriebsstatus{font-size:10px;gap:5px}.kopfaktionen{gap:0}.symboltaste{width:32px;height:36px}.symboltaste svg{width:20px;height:20px}main{padding:10px 16px 0}.schaltlichter{gap:6px;height:9px;margin-bottom:0}.schaltlichter i{width:20px;height:4px}.cockpit{display:flex;flex-direction:column;gap:30px}.instrument{width:100%;padding-top:14px}.instrumentenkopf{padding:0 11px}.drehzahlmesser{display:block;width:min(100%,440px);margin:-1px auto -12px}.pedale{padding:0 6px}.pedal{min-height:61px}.pedal small{font-size:9px}.schaltwippen{margin-top:0}.einstellungen{width:100%;min-height:0}.motorkarte{min-height:86px;gap:13px}.motorbild{width:94px;height:65px}.motortext strong{font-size:16px}.motortext>span{font-size:11px}.klanghinweis{margin:9px 0 24px;font-size:10px}.einstellzeile{grid-template-columns:88px 1fr;margin-bottom:13px}.einstellzeile legend{font-size:12px}.segmente button{font-size:12px;min-height:40px}.quellenhinweis{min-height:0;margin-bottom:21px}.starttaste{min-height:60px}.starthinweis{font-size:10px}.hilfe{margin-top:22px}.hilfe>div{grid-template-columns:1fr;gap:13px}footer{font-size:9px;flex-direction:column;padding:18px 16px 24px;gap:10px}.motorauswahl{gap:9px}.motoroption .auswahltext{padding:11px}.motoroption strong{font-size:12px}.motoroption small{font-size:10px}.auswahlbild{height:95px}dialog{padding:20px;max-height:calc(100dvh - 30px)}.dialogkopf h1{font-size:22px}.dialogbeschreibung{margin-bottom:20px}}
@media(max-width:370px){.lokal-marke{display:none}.betriebsstatus{font-size:9px}.motorauswahl{grid-template-columns:1fr}.auswahlbild{height:120px}.einstellzeile{grid-template-columns:75px 1fr}.segmente button{font-size:11px}.pedal svg{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.aktualisierung{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--linie);border-radius:9px;background:var(--fläche);padding:12px 16px;margin:0 0 18px;font-size:12px}.aktualisierung p{margin:0}.aktualisierung button{background:var(--aktiv);color:var(--aktivtext);border-radius:6px;padding:9px 12px;white-space:nowrap;font-size:11px}.klangquellenwahl .segmente button:first-child{flex:1.4}.klanghinweis{line-height:1.6;min-height:16px}.einstellungen{min-height:675px}.originalname{color:var(--weich);font-size:11px}.motoroption .zylinderdaten{line-height:1.5}@media(max-width:850px){.einstellungen{min-height:615px}.klangquellenwahl .segmente button{font-size:10px}}@media(max-width:620px){.einstellungen{min-height:0}.klangquellenwahl .segmente button{font-size:11px}.aktualisierung{align-items:flex-start;font-size:11px;padding:11px}.aktualisierung button{font-size:10px;padding:8px 10px}}@media(max-width:370px){.aktualisierung{flex-direction:column}.klangquellenwahl .segmente button{font-size:10px}}
/* © 2026 Erik Schauer, do1ffe@darc.de */