/* KOMPONENTEN der Entwuerfe - Bedien-Elemente nach games.g-sv.eu (gsv-neu.css).
   Nur Tokens aus tokens.css. Hoehen/Breiten, die in games frei stehen (36/30/34/8 px),
   sind hier aus der Abstandsleiter gerechnet: 36 = s-5 + s-3, 32 = s-6, 8 = s-2.
   TOKEN FEHLT (gemeldet): Knopfhoehe, Symbolgroesse, Kartenmindestbreite, Menuebreite. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  background: var(--g-0); color: var(--ink); font-family: var(--ff); font-size: var(--fs-m);
  line-height: 1.5; font-variant-numeric: tabular-nums; min-height: 100%;
}
h1, h2, h3 { font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-l); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg.i { width: var(--s-4); height: var(--s-4); flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: calc(var(--haar) * 2) solid var(--akz); outline-offset: calc(var(--haar) * 2); }
.lbl { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.mut { color: var(--ink-3); } .mono { font-family: var(--ff-mono); }
.einh { font-size: var(--fs-s); color: var(--ink-3); font-weight: 500; margin-left: var(--s-1); }

/* Marke */
.marke { display: flex; align-items: center; gap: var(--s-3); }
.logo { width: calc(var(--s-6) + var(--haar) * 2); height: calc(var(--s-6) + var(--haar) * 2); border-radius: var(--r-2); background: linear-gradient(135deg, var(--akz), var(--akz-tief)); color: var(--auf-akz); display: grid; place-items: center; }
.marke b { display: block; font-size: var(--fs-m); line-height: 1.2; }
.marke small { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; }

/* Knoepfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: calc(var(--s-5) + var(--s-3)); padding: 0 var(--s-4); border-radius: var(--r-2); background: var(--g-3); border: var(--haar) solid var(--line-stark); font-size: var(--fs-s); font-weight: 600; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); white-space: nowrap; }
.btn:hover { border-color: var(--akz); }
.btn.primary { background: var(--akz); color: var(--auf-akz); border-color: var(--akz); }
.btn.primary:hover { background: var(--akz-tief); border-color: var(--akz-tief); color: var(--ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--g-3); color: var(--ink); }
.btn.danger { background: var(--gefahr-schwach); color: var(--gefahr); border-color: var(--gefahr); }
.btn.danger:hover { background: var(--gefahr); color: var(--auf-akz); }
.btn.sm { height: var(--s-6); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.icon-btn { width: var(--s-6); height: var(--s-6); display: grid; place-items: center; border-radius: var(--r-2); color: var(--ink-2); }
.icon-btn:hover { background: var(--g-3); color: var(--ink); }

/* Eingaben */
.inp, .field input, .suche input { width: 100%; height: calc(var(--s-5) + var(--s-3)); padding: 0 var(--s-3); background: var(--g-1); border: var(--haar) solid var(--line-stark); border-radius: var(--r-2); font-size: var(--fs-s); cursor: text; }
.inp:focus, .field input:focus { outline: none; border-color: var(--akz); background: var(--g-2); }
::placeholder { color: var(--ink-aus); }
.suche { position: relative; display: flex; align-items: center; min-width: 0; }
.suche svg { position: absolute; left: var(--s-3); color: var(--ink-3); }
.suche input { padding-left: calc(var(--s-5) + var(--s-3)); }
.kbd { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--ink-3); background: var(--g-4); border-radius: var(--r-1); padding: 0 var(--s-2); }
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.field-hint { font-size: var(--fs-xs); color: var(--ink-3); }
.tog { width: calc(var(--s-6) + var(--s-1)); height: calc(var(--s-4) + var(--s-2)); border-radius: var(--r-voll); background: var(--g-4); border: var(--haar) solid var(--line-stark); position: relative; flex: none; transition: background var(--t) var(--ease); }
.tog::after { content: ""; position: absolute; top: var(--haar); left: var(--haar); width: var(--s-4); height: var(--s-4); border-radius: var(--r-voll); background: var(--ink-2); transition: transform var(--t) var(--ease); }
.tog.an { background: var(--akz); border-color: var(--akz); }
.tog.an::after { transform: translateX(var(--s-4)); background: var(--auf-akz); }

/* DROPDOWN (games: .menu / select) */
.dd { position: relative; display: inline-block; }
.dd-btn { display: flex; align-items: center; gap: var(--s-2); height: calc(var(--s-5) + var(--s-3)); padding: 0 var(--s-3); background: var(--g-1); border: var(--haar) solid var(--line-stark); border-radius: var(--r-2); font-size: var(--fs-s); min-width: 0; transition: border-color var(--t) var(--ease); }
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--akz); background: var(--g-2); }
.dd-btn .dd-l { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.dd-btn .dd-v { font-weight: 600; color: var(--ink); }
.dd-btn .chev { margin-left: auto; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.dd.open .chev { transform: rotate(180deg); }
.dd-menu { display: none; position: absolute; top: calc(100% + var(--s-1)); left: 0; min-width: calc(var(--s-8) * 3); padding: var(--s-1); background: var(--g-2); border: var(--haar) solid var(--line-stark); border-radius: var(--r-2); box-shadow: var(--sch-2); z-index: 220; }
.dd.rechts .dd-menu { left: auto; right: 0; }
.dd.open .dd-menu { display: block; }
.dd-menu button { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); font-size: var(--fs-s); color: var(--ink-2); text-align: left; }
.dd-menu button:hover { background: var(--g-3); color: var(--ink); }
.dd-menu button.on { color: var(--ink); background: var(--akz-schwach); box-shadow: inset 3px 0 0 var(--akz); }
.dd-menu button .zahl { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); }
.dd-menu hr { border: 0; border-top: var(--haar) solid var(--line); margin: var(--s-1) 0; }
.dd-menu .grp { padding: var(--s-2) var(--s-3) var(--s-1); }
.dd-menu button.gefahr { color: var(--gefahr); }
.dd.klein .dd-btn { height: var(--s-6); }

/* Karte */
.card { background: var(--g-2); border: var(--haar) solid var(--line); border-radius: var(--r-3); padding: var(--s-4); min-width: 0; }
.card-h { display: flex; align-items: center; gap: var(--s-3); font-weight: 650; margin-bottom: var(--s-3); }
.card-h .rechts { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.card.flach { padding: 0; overflow: hidden; }
.card.flach > .card-h { padding: var(--s-3) var(--s-4); margin: 0; border-bottom: var(--haar) solid var(--line); }
.gitter { display: grid; gap: var(--s-4); }
.page-head { display: flex; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.page-head p { color: var(--ink-3); margin-top: var(--s-1); }
.page-head .aktionen { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* Chips / Badges / Punkte */
.chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--haar) var(--s-3); border-radius: var(--r-voll); background: var(--g-4); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); border: var(--haar) solid transparent; }
.chip.on { background: var(--akz-schwach); color: var(--akz); border-color: var(--akz); }
.badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--haar) var(--s-3); border-radius: var(--r-voll); font-size: var(--fs-xs); font-weight: 600; }
.badge.ok { background: var(--ok-schwach); color: var(--ok); }
.badge.warn { background: var(--warn-schwach); color: var(--warn); }
.badge.danger { background: var(--gefahr-schwach); color: var(--gefahr); }
.badge.idle { background: var(--g-4); color: var(--ruhe); }
.badge.info { background: var(--info-schwach); color: var(--info); }
.dot { width: var(--s-2); height: var(--s-2); border-radius: var(--r-voll); background: var(--ruhe); display: inline-block; flex: none; }
.dot.run { background: var(--akz); box-shadow: 0 0 0 var(--s-1) var(--akz-schwach); }
.dot.warn { background: var(--warn); } .dot.err { background: var(--gefahr); }

/* Balken, Segmente */
.bar { height: var(--s-1); background: var(--g-4); border-radius: var(--r-voll); overflow: hidden; display: flex; }
.bar.dick { height: var(--s-3); }
.bar i { display: block; height: 100%; background: var(--akz); }
.bar i.b2 { background: var(--info); } .bar i.b3 { background: var(--g-4); box-shadow: inset 0 0 0 var(--haar) var(--line-stark); }
.bar i.warn { background: var(--warn); } .bar i.cache { background: var(--info); } .bar i.andere { background: var(--warn); } .bar i.frei { background: var(--g-4); }
.legende { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-s); color: var(--ink-2); margin-top: var(--s-2); }
.legende span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legende i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-voll); background: var(--akz); display: inline-block; }
.legende i.cache { background: var(--info); } .legende i.frei { background: var(--g-4); box-shadow: inset 0 0 0 var(--haar) var(--line-stark); } .legende i.andere { background: var(--warn); }
.seg { display: inline-flex; padding: var(--s-1); gap: var(--s-1); background: var(--g-1); border: var(--haar) solid var(--line); border-radius: var(--r-2); }
.seg button { padding: var(--s-1) var(--s-3); border-radius: var(--r-1); font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.seg button.on { background: var(--g-3); color: var(--ink); box-shadow: inset 0 calc(var(--haar) * -2) 0 var(--akz); }

/* Kennzahl */
.kz { display: flex; flex-direction: column; gap: var(--s-2); }
.kz .lbl { display: flex; align-items: center; gap: var(--s-2); }
.kz .wert { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kz small { font-size: var(--fs-xs); color: var(--ink-3); }
.ring { --p: 50; --farbe: var(--akz); width: calc(var(--s-8) * 2); aspect-ratio: 1; border-radius: var(--r-voll); background: conic-gradient(var(--farbe) calc(var(--p) * 1%), var(--g-4) 0); display: grid; place-items: center; flex: none; }
.ring::before { content: ""; grid-area: 1/1; width: 76%; aspect-ratio: 1; border-radius: var(--r-voll); background: var(--g-2); }
.ring > span { grid-area: 1/1; text-align: center; font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; z-index: 1; }
.ring > span small { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }

/* Tabelle */
.tbl-wrap { border: var(--haar) solid var(--line); border-radius: var(--r-2); overflow: auto; background: var(--g-2); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.tbl th { position: sticky; top: 0; text-align: left; background: var(--g-1); padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; font-weight: 600; white-space: nowrap; border-bottom: var(--haar) solid var(--line); }
.tbl td { padding: var(--s-3) var(--s-4); border-bottom: var(--haar) solid var(--line-hell); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--g-3); }
.tbl .zahl { text-align: right; }
.tbl .name { font-weight: 650; display: flex; align-items: center; gap: var(--s-3); }
.avatar { width: var(--s-6); height: var(--s-6); border-radius: var(--r-voll); background: var(--g-4); display: inline-grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; flex: none; color: var(--ink-2); }

/* Nav (Rail) */
.nav-i { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); color: var(--ink-2); font-size: var(--fs-s); font-weight: 550; text-align: left; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.nav-i:hover { background: var(--g-3); color: var(--ink); }
.nav-i.on { background: var(--akz-schwach); color: var(--ink); box-shadow: inset 3px 0 0 var(--akz); }
.nav-i.on svg { color: var(--akz); }
.nav-i .zahl { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); }
.nav-i .chev { margin-left: auto; transition: transform var(--t) var(--ease); color: var(--ink-3); }
.box.auf > .nav-i .chev { transform: rotate(90deg); }
.nav-grp { padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.box { border: var(--haar) solid var(--line); border-radius: var(--r-2); margin-bottom: var(--s-1); overflow: hidden; }
.box.auf { border-color: var(--line-stark); background: var(--g-2); }
.box > .nav-i { border-radius: 0; }
.box .subs { display: none; flex-direction: column; gap: var(--haar); padding: var(--s-1) var(--s-2) var(--s-2) var(--s-4); border-top: var(--haar) solid var(--line); }
.box.auf .subs { display: flex; }
.sub { padding: var(--s-1) var(--s-2); border-radius: var(--r-1); border-left: calc(var(--haar) * 2) solid var(--line); color: var(--ink-3); font-size: var(--fs-xs); text-align: left; display: flex; gap: var(--s-2); }
.sub:hover { color: var(--ink); border-left-color: var(--line-stark); }
.sub.on { color: var(--akz); border-left-color: var(--akz); }
.sub .zahl { margin-left: auto; }

/* Menue-/Hinweis-Bausteine */
.hinweis { border: var(--haar) solid var(--warn); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-weight: 600; display: flex; gap: var(--s-3); align-items: center; }
.hinweis.info { border-color: var(--info); }
.konsole { background: var(--g-0); border: var(--haar) solid var(--line); border-radius: var(--r-2); padding: var(--s-4); font-family: var(--ff-mono); font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); min-height: calc(var(--s-8) * 3); }
.konsole .t { color: var(--ink-3); } .konsole .w { color: var(--warn); } .konsole .f { color: var(--gefahr); } .konsole .o { color: var(--ok); }
.danger-card { border: var(--haar) solid var(--gefahr); border-radius: var(--r-3); background: var(--gefahr-schwach); padding: var(--s-4); }
.zeile { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--haar) solid var(--line-hell); }
.zeile:last-child { border-bottom: 0; }
.zeile .txt { flex: 1; min-width: 0; } .zeile .txt b { display: block; font-size: var(--fs-s); } .zeile .txt small { color: var(--ink-3); font-size: var(--fs-xs); }
.mini { font-size: var(--fs-xs); color: var(--ink-3); }
/* !important: reduzierte Bewegung muss gegen jede Übergangsregel gewinnen */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }