/* OMC Star Citizen Controller Configurator - Oberflaeche (CFG-WEB-01)
 * Nutzt die Farbvariablen des Themes (--bg, --card, --line, --accent ...).
 * Laedt nichts von aussen. */

.cfg{--cfg-hot:#3d9bff;--cfg-belegt:#39d98a;--cfg-warn:#f5a524;--cfg-fehler:#f24e5e}
.cfg-leiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--card,#0c121c);border:1px solid var(--line,rgba(120,150,190,.13));
  border-radius:12px;padding:14px 16px;margin:18px 0}
.cfg-leiste .cfg-feld{display:flex;flex-direction:column;gap:4px}
.cfg-leiste label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut,#7e8aa0);font-weight:600}
.cfg input[type=text],.cfg input[type=search],.cfg select{
  background:var(--bg2,#0a0f18);color:var(--txt,#e7edf6);
  border:1px solid var(--line2,rgba(120,150,190,.22));border-radius:8px;
  padding:9px 11px;font:inherit;font-size:13.5px;min-width:150px}
.cfg input:focus,.cfg select:focus{outline:none;border-color:var(--accent,#3d9bff)}
.cfg .cfg-btn{font-family:'Saira',system-ui,sans-serif;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:12.5px;border-radius:8px;cursor:pointer;padding:11px 18px;
  border:1px solid var(--accent,#3d9bff);color:var(--accent2,#5fb0ff);
  background:rgba(61,155,255,.06);transition:.15s}
.cfg .cfg-btn:hover{background:rgba(61,155,255,.16)}
.cfg .cfg-btn.voll{background:var(--accent,#3d9bff);color:#04111f}
.cfg .cfg-btn.voll:hover{background:var(--accent2,#5fb0ff)}
.cfg .cfg-datei{position:relative;overflow:hidden;display:inline-flex}
.cfg .cfg-datei input{position:absolute;inset:0;opacity:0;cursor:pointer}

.cfg-meldung{border-radius:10px;padding:11px 14px;font-size:13.5px;margin:0 0 16px;
  border:1px solid var(--line2,rgba(120,150,190,.22));background:var(--card2,#0e1521);color:var(--mut2,#9aa6bc)}
.cfg-meldung.ok{border-color:rgba(57,217,138,.45);color:#a7ebc8}
.cfg-meldung.fehler{border-color:rgba(242,78,94,.5);color:#ffb9c0}

.cfg-raster{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start}
.cfg-panel{background:var(--card,#0c121c);border:1px solid var(--line,rgba(120,150,190,.13));
  border-radius:12px;padding:16px}
.cfg-panel h2{font-family:'Saira',system-ui,sans-serif;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut2,#9aa6bc);margin:0 0 12px}

.cfg-liste{max-height:640px;overflow:auto;display:flex;flex-direction:column;gap:6px;
  padding-right:4px}
.cfg-befehl{border:1px solid var(--line,rgba(120,150,190,.13));border-radius:9px;padding:8px 10px;
  background:var(--bg2,#0a0f18);cursor:grab;display:flex;flex-direction:column;gap:3px}
.cfg-befehl:hover{border-color:var(--accent,#3d9bff)}
.cfg-befehl.aufgenommen{border-color:var(--accent,#3d9bff);box-shadow:0 0 0 2px rgba(61,155,255,.25)}
.cfg-befehl:focus-visible{outline:2px solid var(--accent,#3d9bff);outline-offset:2px}
.cfg-b-name{font-size:13.5px;font-weight:600;line-height:1.25}
.cfg-b-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.cfg-b-k{font-size:9.5px;letter-spacing:.1em;color:var(--mut,#7e8aa0);text-transform:uppercase}
.cfg-b-id{font-size:10.5px;color:var(--mut,#7e8aa0);opacity:.8;font-family:ui-monospace,Menlo,Consolas,monospace}
.cfg-b-achse{font-size:9.5px;color:#f5a524;border:1px solid rgba(245,165,36,.4);border-radius:4px;padding:0 4px}
.cfg-b-belegt{font-size:10.5px;color:var(--cfg-belegt);font-weight:600}
.cfg-treffer{font-size:11.5px;color:var(--mut,#7e8aa0);margin-top:10px}

.cfg-geraete{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfg-geraet{background:var(--bg2,#0a0f18);border:1px solid var(--line,rgba(120,150,190,.13));
  border-radius:12px;padding:12px}
.cfg-geraet-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.cfg-geraet-name{font-family:'Saira',system-ui,sans-serif;font-weight:700;font-size:13.5px}
.cfg-geraet-inst{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut,#7e8aa0)}
.cfg-svg{width:100%;height:auto;display:block;touch-action:manipulation}
.cfg-achsen-titel{fill:rgba(126,138,160,.9);font-size:11px;letter-spacing:1.6px;font-family:'Saira',sans-serif}
.cfg-achse-name{fill:#dce6f5;font-size:12.5px;font-weight:600;text-anchor:middle;
  font-family:'Saira',system-ui,sans-serif;letter-spacing:.02em}
.cfg-achse-zahl{fill:#8ea6c4;font-size:10px;text-anchor:middle;font-family:ui-monospace,monospace}

/* Ansicht ohne Aufnahme: leerer Rahmen mit Begruendung. Bewusst KEINE
   Ersatzzeichnung des Geraets - eine erfundene Form waere schlechter als
   gar keine, weil der Spieler danach am falschen Ort klickt. */
/* Hinweis im Geraetekopf, wenn noch keine Aufnahme vorliegt. Das Geraet ist
   trotzdem vollstaendig bedienbar - der Satz sagt das auch. */
.cfg-bild-offen{display:flex;gap:9px;align-items:flex-start;margin:0 0 10px;
  padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.55;
  border:1px solid rgba(245,165,36,.4);background:rgba(245,165,36,.07);color:#f2c98a}
.cfg-bild-offen .cfg-pad-mark{flex:none}
.cfg-bild-offen-text{color:#e6d3b0}

.cfg-bild-fehlt{fill:rgba(120,150,190,.05);stroke:rgba(120,150,190,.3);
  stroke-width:1;stroke-dasharray:9 7}
.cfg-bild-fehlt-text{fill:#7e8aa0;font-size:15px;text-anchor:middle;
  font-family:'Saira',system-ui,sans-serif;letter-spacing:.06em}

/* ------------------------------------------------- Marke != Klickflaeche
   Sichtbar ist nur die kleine Marke (.cfg-marke). Geklickt wird die grosse,
   unsichtbare Zone (.cfg-hot-zone) darum herum - beim Hut ein ganzer Keil.
   Die Zone wird erst beim Ueberfahren schwach sichtbar. */
.cfg-hot{cursor:pointer}
.cfg-hot-zone{fill:rgba(61,155,255,0);stroke:none;transition:fill .09s linear}
.cfg-marke{fill:rgba(61,155,255,.92);stroke:#0a1524;stroke-width:1;
  pointer-events:none;transition:fill .09s linear}
.cfg-hot.belegt .cfg-marke{fill:#39d98a}
.cfg-hot.unzugeordnet .cfg-marke{fill:#f5a524}
.cfg-hot.unzugeordnet.belegt .cfg-marke{fill:#f5a524;stroke:#39d98a;stroke-width:2}
.cfg-hot.hover .cfg-hot-zone{fill:rgba(61,155,255,.24)}
.cfg-hot.hover .cfg-marke{fill:#cfe4ff;stroke:#3d9bff;stroke-width:1.6}
.cfg-hot.live .cfg-hot-zone{fill:rgba(255,255,255,.45)}
.cfg-hot.live .cfg-marke{fill:#fff}
.cfg-hot.gesucht .cfg-hot-zone{fill:rgba(245,165,36,.34);animation:cfgpuls 1s infinite}
.cfg-hot.gesucht .cfg-marke{fill:#f5a524}
.cfg-fang{fill:transparent;stroke:none}
/* Zielmodus: ein Befehl ist gewaehlt, jede Zone wird als Ablage angedeutet */
.cfg-geraet.zielmodus .cfg-hot-zone{fill:rgba(61,155,255,.10)}
.cfg-geraet.zielmodus .cfg-hot.hover .cfg-hot-zone{fill:rgba(61,155,255,.34)}
.cfg-geraet.zielmodus .cfg-svg{cursor:crosshair}

/* Achskacheln behalten ihren sichtbaren Rahmen - dort IST die Flaeche das Ziel */
.cfg-hot .cfg-hot-flaeche{fill:rgba(61,155,255,.12);stroke:rgba(61,155,255,.55);stroke-width:1.2}
.cfg-hot.belegt .cfg-hot-flaeche{fill:rgba(57,217,138,.22);stroke:#39d98a;stroke-width:1.6}
.cfg-hot.hover .cfg-hot-flaeche{fill:rgba(61,155,255,.42);stroke:#9ccbff}

.cfg-fuss{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.cfg-zahlen{font-size:12.5px;color:var(--mut,#7e8aa0);margin-left:auto}
.cfg-zahlen b{color:var(--txt,#e7edf6)}
.cfg-konflikte{margin-top:12px;font-size:12.5px;color:var(--mut2,#9aa6bc);
  border-top:1px solid var(--line,rgba(120,150,190,.13));padding-top:10px}
.cfg-konflikt{color:#f5c66a;margin-top:4px}
.cfg-ok{color:#7fd6a8}

.cfg-pop{position:absolute;z-index:60;min-width:280px;max-width:330px;
  background:var(--card2,#0e1521);border:1px solid var(--line2,rgba(120,150,190,.22));
  border-radius:10px;padding:12px 12px 10px;box-shadow:0 18px 40px -14px #000}
.cfg-pop-kopf{font-family:'Saira',system-ui,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.06em;margin-bottom:8px;padding-right:20px}
.cfg-pop-leer{font-size:12.5px;color:var(--mut,#7e8aa0)}
.cfg-pop-zeile{display:flex;flex-direction:column;gap:2px;padding:6px 0;
  border-top:1px solid var(--line,rgba(120,150,190,.13))}
.cfg-pop-name{font-size:13px;font-weight:600}
.cfg-pop-id{font-size:10.5px;color:var(--mut,#7e8aa0);font-family:ui-monospace,monospace}
.cfg-pop-weg,.cfg-pop-zu{align-self:flex-start;margin-top:4px;background:none;cursor:pointer;
  border:1px solid var(--line2,rgba(120,150,190,.22));color:var(--mut2,#9aa6bc);
  border-radius:6px;padding:4px 9px;font:inherit;font-size:11.5px}
.cfg-pop-weg:hover{border-color:#f24e5e;color:#ffb9c0}
.cfg-pop-zu{width:100%;text-align:center;border-color:var(--accent,#3d9bff);color:var(--accent2,#5fb0ff)}
.cfg-pop-x{position:absolute;top:8px;right:8px;background:none;border:0;color:var(--mut,#7e8aa0);
  font-size:18px;line-height:1;cursor:pointer}

.cfg-hinweis{font-size:12px;color:var(--mut,#7e8aa0);margin-top:14px;line-height:1.6}

@media (max-width:1100px){
  .cfg-raster{grid-template-columns:1fr}
  .cfg-liste{max-height:340px}
}
@media (max-width:760px){
  .cfg-geraete{grid-template-columns:1fr}
  .cfg-leiste{padding:12px}
  .cfg input,.cfg select{min-width:0;width:100%}
  .cfg-leiste .cfg-feld{flex:1 1 140px}
  /* Eine 1fr-Spalte schrumpft nicht unter ihren Mindestinhalt. Die
     Action-Kennung ist ein Wort ohne Leerzeichen und verlangt rund 335 px -
     damit wurde die ganze Seite auf dem Telefon breiter als das Fenster und
     liess sich seitwaerts schieben. minmax(0,1fr) erlaubt das Schrumpfen,
     der Umbruch haelt die Kennung im Rahmen. */
  .cfg-raster{grid-template-columns:minmax(0,1fr)}
  .cfg-raster>*{min-width:0}
  .cfg-liste{min-width:0}
  .cfg-b-id,.cfg-b-meta{overflow-wrap:anywhere;word-break:break-word}
}

/* ------------------------------------------------- CFG-WEB-02: Ergaenzungen */

.cfg .cfg-btn.schmal{padding:9px 13px;font-size:11.5px}
.cfg .cfg-btn.an{background:rgba(57,217,138,.16);border-color:#39d98a;color:#a7ebc8}
.cfg-schalter{display:flex;gap:8px;align-items:center;margin:11px 0 0;font-size:12.5px;
  letter-spacing:0;text-transform:none;color:var(--mut2,#9aa6bc);font-weight:400}
.cfg-b-extra{font-size:9.5px;color:#7e8aa0;border:1px solid rgba(120,150,190,.3);
  border-radius:4px;padding:0 4px}

/* Pedale unter den beiden Sticks */
.cfg-pedale{margin-top:16px}
.cfg-geraet.wartet{outline:2px dashed var(--accent,#3d9bff);outline-offset:3px}

.cfg-hot.unzugeordnet .cfg-hot-flaeche{stroke-dasharray:4 3;stroke:rgba(245,165,36,.75);
  fill:rgba(245,165,36,.10)}
.cfg-hot.live .cfg-hot-flaeche{fill:rgba(255,255,255,.75);stroke:#fff;stroke-width:2.4}
.cfg-hot.gesucht .cfg-hot-flaeche{stroke:#f5a524;stroke-width:3;fill:rgba(245,165,36,.35)}
@keyframes cfgpuls{0%,100%{opacity:1}50%{opacity:.45}}

/* Hotspot-Menue */
.cfg-pop-hid{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:7px 0 9px;
  border-bottom:1px solid var(--line,rgba(120,150,190,.13))}
.cfg-pop-hid code{font-size:11.5px;color:var(--accent2,#5fb0ff);font-family:ui-monospace,monospace}
.cfg-pop-mark{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut,#7e8aa0);
  font-weight:700}
.cfg-pop-knoepfe{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cfg-mini{background:none;border:1px solid var(--line2,rgba(120,150,190,.22));
  color:var(--mut2,#9aa6bc);border-radius:6px;padding:4px 9px;font:inherit;font-size:11px;
  cursor:pointer;letter-spacing:.06em}
.cfg-mini:hover{border-color:var(--accent,#3d9bff);color:var(--accent2,#5fb0ff)}
.cfg-mini.gefahr:hover{border-color:#f24e5e;color:#ffb9c0}

/* Modal */
.cfg-dialog{position:fixed;inset:0;z-index:80;background:rgba(3,6,12,.72);
  display:flex;align-items:center;justify-content:center;padding:20px}
.cfg-dialog[hidden]{display:none}
.cfg-dlg-kasten{background:var(--card2,#0e1521);border:1px solid var(--line2,rgba(120,150,190,.22));
  border-radius:14px;padding:22px;max-width:620px;width:100%;box-shadow:0 30px 80px -20px #000}
.cfg-dlg-titel{font-family:'Saira',system-ui,sans-serif;font-size:18px;margin:0 0 10px;
  letter-spacing:.02em}
.cfg-dlg-text{white-space:pre-wrap;font:inherit;font-size:13.5px;color:var(--mut2,#9aa6bc);
  margin:0 0 12px;max-height:40vh;overflow:auto}
.cfg-feldzeile{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line,rgba(120,150,190,.13))}
.cfg-feld-k{flex:0 0 190px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut,#7e8aa0);padding-top:2px}
.cfg-feld-v{font-size:14px;font-weight:600}
.cfg-dlg-knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}

/* Testansicht */
.cfg-testpanel{margin-bottom:18px}
.cfg-test-pad{border-top:1px solid var(--line,rgba(120,150,190,.13));padding:10px 0}
.cfg-test-kopf{font-size:12.5px;font-weight:600;margin-bottom:7px}
.cfg-test-kopf em{color:var(--accent2,#5fb0ff);font-style:normal;font-size:11.5px}
.cfg-test-tasten{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.cfg-t{width:26px;height:22px;display:grid;place-items:center;border-radius:5px;font-size:10.5px;
  border:1px solid var(--line2,rgba(120,150,190,.22));color:var(--mut,#7e8aa0);
  font-family:ui-monospace,monospace}
.cfg-t.an{background:#39d98a;border-color:#39d98a;color:#06200f;font-weight:700}
.cfg-test-achsen{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:5px 16px}
.cfg-a{display:flex;align-items:center;gap:8px;font-size:11.5px}
.cfg-a-n{flex:0 0 68px;color:var(--mut,#7e8aa0);font-family:ui-monospace,monospace}
.cfg-a-b{flex:1;height:7px;border-radius:4px;background:rgba(120,150,190,.16);overflow:hidden}
.cfg-a-b i{display:block;height:100%;background:var(--accent,#3d9bff)}
.cfg-a-w{flex:0 0 112px;text-align:right;font-family:ui-monospace,monospace;color:var(--mut2,#9aa6bc)}
.cfg-test-leer{font-size:12.5px;color:var(--mut,#7e8aa0);padding:8px 0}


/* ==================================================== CFG-WEB-03: Ansichten */

.cfg-ansichten{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.cfg-ans{background:none;border:1px solid var(--line2,rgba(120,150,190,.22));
  color:var(--mut,#7e8aa0);border-radius:6px;padding:4px 10px;font:inherit;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:600;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.cfg-ans:hover{border-color:var(--accent,#3d9bff);color:var(--accent2,#5fb0ff)}
.cfg-ans.aktiv{background:rgba(61,155,255,.16);border-color:var(--accent,#3d9bff);
  color:#cfe4ff}
.cfg-ans-zoom{margin-left:auto;text-transform:none;letter-spacing:.04em;font-weight:500}
.cfg-geraet-bild{position:relative}
.cfg-svg.gezoomt{cursor:grab}

/* Gewaehlter Befehl - das Band ueber den Geraeten */
.cfg-gewaehlt{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:10px 0 0;
  padding:10px 14px;border-radius:10px;border:1px solid var(--accent,#3d9bff);
  background:rgba(61,155,255,.10)}
.cfg-gewaehlt[hidden]{display:none}
.cfg-gw-mark{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--accent2,#5fb0ff)}
.cfg-gw-name{font-size:14.5px;font-weight:600}
.cfg-gw-id{font-size:11px;color:var(--mut,#7e8aa0);font-family:ui-monospace,monospace}
.cfg-gewaehlt .cfg-mini{margin-left:auto}

/* Tooltip am Zeiger */
.cfg-tip{position:fixed;z-index:70;pointer-events:none;max-width:320px;
  background:var(--card2,#0e1521);border:1px solid var(--line2,rgba(120,150,190,.22));
  border-radius:9px;padding:9px 12px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.cfg-tip[hidden]{display:none}
.cfg-tip-geraet{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--mut,#7e8aa0)}
.cfg-tip-name{font-size:13px;font-weight:600;margin-top:1px}
.cfg-tip-richtung{font-size:9.5px;letter-spacing:.16em;color:var(--accent2,#5fb0ff);font-weight:700}
.cfg-tip-zeile{display:flex;gap:8px;align-items:baseline;margin-top:4px;font-size:11.5px}
.cfg-tip-k{flex:0 0 26px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut,#7e8aa0);font-weight:700}
.cfg-tip-v{color:var(--txt,#e7edf6);font-family:ui-monospace,monospace;font-size:11px}
.cfg-tip-v.offen{color:#f5a524}

/* Hotspot-Menue: "Sichtbar in" markiert die gerade gezeigte Ansicht */
.cfg-mini.aktiv{border-color:var(--accent,#3d9bff);color:#cfe4ff;background:rgba(61,155,255,.14)}
.cfg-dlg-koerper:empty{display:none}
.cfg-dlg-koerper{margin-top:4px}

/* ------------------------------------------- CFG-DEV-01: Mehrfacheingaben
   Ein zweiter, gestrichelter Ring markiert ein Bedienelement, das mehrere
   nicht gerichtete Eingaben hat (Triggerstufen, Dual Push). Welche gemeint
   ist, fragt der Dialog - geraten wird nichts. */
.cfg-marke-mehr{fill:none;stroke:rgba(61,155,255,.85);stroke-width:1.4;
  stroke-dasharray:3 3;pointer-events:none}
.cfg-hot.belegt .cfg-marke-mehr{stroke:#39d98a}
.cfg-hot.unzugeordnet .cfg-marke-mehr{stroke:rgba(245,165,36,.9)}
.cfg-hot.hover .cfg-marke-mehr{stroke:#cfe4ff;stroke-dasharray:none}

/* --- Rastschalter und Drehwahlschalter (CFG-DEV-THRUSTMASTER-02) ----------
   Ein Schalter mit n Stellungen ist EIN Bedienelement. Er wird als Schalter
   gezeichnet - Bahn mit Rasten - und nicht als n runde Tasten. Rasten, die
   laut Hersteller nichts melden (z. B. die Mittelstellung vieler
   3-Stellungs-Schalter), stehen blass da und haben keine Trefferflaeche. */
.cfg-schalter-bahn{fill:rgba(61,155,255,.09);stroke:rgba(61,155,255,.85);stroke-width:1.8}
.cfg-schalter-raste{stroke:rgba(61,155,255,.85);stroke-width:1.6;stroke-linecap:round}
.cfg-schalter-raste.stumm{stroke:rgba(200,212,230,.32)}
.cfg-hot.art-schalter .cfg-marke{stroke:#0a1524;stroke-width:1}
.cfg-drehwahl-ring{fill:rgba(10,21,36,.35);stroke:rgba(61,155,255,.7);
  stroke-width:1.6;stroke-dasharray:3 4}
.cfg-geraet.zielmodus .cfg-schalter-bahn,
.cfg-geraet.zielmodus .cfg-drehwahl-ring{stroke:rgba(61,155,255,.9)}

/* --- Setupwahl (CFG-DEV-THRUSTMASTER-02) ---------------------------------
   Die Zahl der Geraetefelder kommt aus dem gewaehlten Setup. Ein breites
   Feld (Pedale, Warthog-Schaltpult) bekommt eine eigene Reihe. */
.cfg-setupwahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 12px;border:1px solid rgba(120,150,190,.28);
  border-radius:10px;background:rgba(10,21,36,.35)}
.cfg-setupwahl label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:#8ea6c4;font-family:ui-monospace,monospace}
.cfg-setupwahl select{flex:1 1 260px;min-width:220px}
.cfg-setup-hinweis{flex:1 1 100%;font-size:12px;color:#8ea6c4;line-height:1.45}
#cfg-geraete-halter>.cfg-geraete+.cfg-geraete,
#cfg-geraete-halter>.cfg-geraet+.cfg-geraete,
#cfg-geraete-halter>.cfg-geraete+.cfg-geraet.cfg-breit,
#cfg-geraete-halter>.cfg-geraet.cfg-breit+.cfg-geraet.cfg-breit{margin-top:16px}

/* Grossmodus: die Befehlsliste rueckt unter die Geraete, jedes Geraet
   bekommt die volle Breite. Damit werden die Trefferflaechen so gross, wie
   CFG-DEV-THRUSTMASTER-02 sie verlangt - ohne die Geometrie zu aendern. */
.cfg-raster.gross{grid-template-columns:1fr}
.cfg-raster.gross>.cfg-panel:first-child{order:2}
.cfg-raster.gross .cfg-geraete{grid-template-columns:1fr}
.cfg-raster.gross .cfg-liste{max-height:420px}
.cfg-tip-stellung{display:block;font-size:11.5px;line-height:1.5}
.cfg-tip-stellung.hier{color:#cfe4ff;font-weight:700}
.cfg-tip-stellung.stumm{color:#7e8aa0;font-style:italic}
.cfg-dlg-hinweis{font-size:12px;color:#9aa6bc;line-height:1.55;margin:0 0 12px}
.cfg-zuord-zeile{display:grid;grid-template-columns:180px 1fr;gap:8px 10px;
  align-items:center;margin-bottom:10px}
.cfg-zuord-feld{font-weight:700;font-size:12.5px}
.cfg-zuord-stand{grid-column:2;font-size:11px;color:#8ea6c4}

/* --- Geraetetrennung und Lernlauf (CFG-HW-02) -----------------------------
   Welcher reale Controller zu einem Geraetefeld gehoert, steht hier sichtbar.
   Ohne Bindung steht da "noch nicht identifiziert" - und nicht etwa eine
   angenommene Reihenfolge. */
.cfg-geraet-pad{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;padding:5px 8px;border:1px dashed rgba(245,165,36,.45);
  border-radius:8px;background:rgba(245,165,36,.06)}
.cfg-geraet-pad.gebunden{border-style:solid;border-color:rgba(57,217,138,.5);
  background:rgba(57,217,138,.07)}
.cfg-pad-mark{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8ea6c4}
.cfg-pad-wert{flex:1 1 160px;font-size:11px;font-family:ui-monospace,monospace;
  color:#c8d4e6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-geraet-pad.gebunden .cfg-pad-wert{color:#a7ebc8}

.cfg-lern-roh{font-family:ui-monospace,monospace;font-size:13px;color:#cfe4ff;
  background:rgba(10,21,36,.6);border:1px solid rgba(120,150,190,.28);
  border-radius:8px;padding:10px 12px;margin:8px 0;word-break:break-word}
.cfg-lern-roh.treffer{color:#a7ebc8;border-color:rgba(57,217,138,.55)}
.cfg-lern-balken{height:8px;border-radius:5px;background:rgba(120,150,190,.18);
  overflow:hidden;margin:6px 0 2px}
.cfg-lern-balken i{display:block;height:100%;background:#3d9bff}

/* --- Controller-Test als Diagnosewerkzeug (CFG-HW-02) --------------------- */
.cfg-test-block{margin:0 0 10px}
.cfg-test-mark{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7e8aa0;margin:0 0 4px}
.cfg-t.kennt{border-color:rgba(57,217,138,.55)}
.cfg-test-huete{display:flex;flex-wrap:wrap;gap:8px}
.cfg-hut{border:1px solid rgba(120,150,190,.28);border-radius:8px;padding:5px 9px;
  display:flex;flex-direction:column;gap:1px;min-width:150px;background:rgba(10,21,36,.4)}
.cfg-hut.an{border-color:#3d9bff;background:rgba(61,155,255,.14)}
.cfg-hut-n{font-size:9.5px;letter-spacing:.12em;color:#7e8aa0;text-transform:uppercase}
.cfg-hut-r{font-size:13px;font-weight:700;color:#cfe4ff}
.cfg-hut-w{font-size:10px;font-family:ui-monospace,monospace;color:#7e8aa0}
.cfg-hut-c{font-size:10.5px;color:#39d98a}
.cfg-a-n i{display:block;font-style:normal;font-size:9px;color:#7e8aa0}
.cfg-a-w em{font-style:normal;color:#7e8aa0;font-size:9.5px}
.cfg-a-c{flex:0 0 auto;font-size:10.5px;color:#39d98a;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Einstieg, Browser- und Mobilhinweis (CFG-PROD-01) -------------------- */
.cfg-einstieg{font-size:13.5px;line-height:1.65;color:var(--mut2,#9aa6bc);
  margin:0 0 14px;max-width:900px}
.cfg-einstieg code{font-size:12.5px;color:#c8d4e6}
.cfg-einstieg strong{color:#a7ebc8;font-weight:600}
.cfg-meldung.warn{border-color:rgba(245,165,36,.5);background:rgba(245,165,36,.08);color:#f2c98a}
/* Der Desktop-Hinweis erscheint nur auf kleinen Displays. Die Seite bleibt
   dort benutzbar - nur die grafische Zuordnung ist Desktop-Sache. */
.cfg-nur-klein{display:none}
@media (max-width:760px){
  .cfg-nur-klein{display:block;font-size:13px;line-height:1.6;color:#f2c98a;
    border:1px solid rgba(245,165,36,.45);background:rgba(245,165,36,.08);
    border-radius:10px;padding:10px 12px;margin:0 0 14px}
}