/* MIXERq Zentrale – Aussehen im MIXERq-Stil (Nachtblau, Gold, Pixelschrift) */

@font-face { font-family: 'Minecraft'; src: url('schrift/Minecraft.otf') format('opentype'); font-weight: 400; }
@font-face { font-family: 'Minecraft'; src: url('schrift/Minecraft-Bold.otf') format('opentype'); font-weight: 700; }

:root {
  --nacht: #0a0f1b;
  --karte: #121a2c;
  --karte-hell: #1a2540;
  --rand: #26324f;
  --text: #e8ecf5;
  --matt: #8b95ad;
  --gold: #e0a526;
  --gruen: #6abe30;
  --rot: #d9453b;
  --blau: #00a3ff;
  --grau: #5b6580;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--nacht);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh;
}
h2, .marke, .knopf, .abzeichen, .gruppe-zahl b, .klein-marke { font-family: 'Minecraft', monospace; letter-spacing: .04em; }
h2 { margin: 0; font-size: 16px; font-weight: 700; }
img { image-rendering: pixelated; }

.karte { background: var(--karte); border: 2px solid var(--rand); border-radius: 6px; padding: 18px; }

/* ---------------------------------------------------------------- Aufbau: Seitenleiste (PC) / App-Leiste unten (Handy) */
:root { --leiste: 232px; --navi-hoehe: 64px; }
h1 { font-family: 'Minecraft', monospace; letter-spacing: .04em; font-size: 22px; margin: 0; }
.marke { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.marke img { width: 28px; height: 28px; }
.marke b { color: var(--gold); }
.wer { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.wer img { width: 22px; height: 22px; }
.wer b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand { color: var(--matt); font-size: 12px; }

.seitenleiste {
  position: fixed; inset: 0 auto 0 0; width: var(--leiste); z-index: 3;
  display: flex; flex-direction: column; gap: 22px; padding: 20px 14px;
  background: #0d1424; border-right: 2px solid var(--rand);
}
.seitenleiste .marke { padding: 0 6px; font-size: 15px; white-space: nowrap; }
.navi { display: grid; gap: 4px; }
.navi a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 5px;
  font-family: 'Minecraft', monospace; font-size: 14px; letter-spacing: .04em;
  color: var(--matt); text-decoration: none; border: 2px solid transparent;
}
.navi a img { width: 24px; height: 24px; opacity: .75; }
.navi a:hover { color: var(--text); background: var(--karte); }
.navi a.an { color: var(--gold); background: var(--karte-hell); border-color: var(--rand); }
.navi a.an img { opacity: 1; }
.konto-leiste { margin-top: auto; display: grid; gap: 10px; padding: 14px 10px 0; border-top: 1px solid var(--rand); }
.konto-leiste form { margin: 0; }
.konto-leiste .knopf { width: 100%; }
.nur-schmal { display: none !important; }
.kopf-handy { display: none; }

.haupt { margin-left: var(--leiste); min-height: 100vh; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.seitenkopf p { margin: 4px 0 0; font-size: 14px; }
.filter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Knöpfe & Abzeichen */
.knopf {
  font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer;
  background: var(--karte-hell); border: 2px solid var(--rand); border-bottom-width: 4px; border-radius: 4px;
  padding: 9px 16px;
}
.knopf:hover:not(:disabled) { filter: brightness(1.15); }
.knopf:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.klein { font-size: 12px; padding: 5px 10px; border-bottom-width: 3px; }
.knopf.gold { background: var(--gold); border-color: #a67515; color: #1b1405; }
.knopf.gruen { background: var(--gruen); border-color: #43801c; color: #0d1a05; }
.knopf.rot { background: var(--rot); border-color: #8f2a23; color: #fff; }

.abzeichen { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.abzeichen.gruen { background: rgba(106, 190, 48, .18); color: var(--gruen); }
.abzeichen.gold { background: rgba(224, 165, 38, .18); color: var(--gold); }
.abzeichen.rot { background: rgba(217, 69, 59, .2); color: #ff7268; }
.abzeichen.blau { background: rgba(0, 163, 255, .18); color: var(--blau); }
.abzeichen.grau { background: rgba(91, 101, 128, .25); color: var(--matt); }

.rot { color: #ff7268; }

/* ---------------------------------------------------------------- Inhalt */
.inhalt { max-width: 1480px; margin: 0 auto; padding: 28px 32px 60px; display: grid; gap: 20px; }

.wartung { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wartung p { margin: 4px 0 0; color: var(--matt); }
.wartung.an { border-color: var(--blau); background: linear-gradient(90deg, rgba(0, 163, 255, .12), var(--karte)); }
.wartung.an p { color: var(--text); }

.gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.gruppe { border-top-width: 4px; min-width: 0; }
.gruppe.online { border-top-color: var(--gruen); }
.gruppe.startet, .gruppe.eingeschraenkt { border-top-color: var(--gold); }
.gruppe.wartung { border-top-color: var(--blau); }
.gruppe.fehler { border-top-color: var(--rot); }

.gruppe-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gruppe-kopf img { width: 36px; height: 36px; }
.gruppe-titel { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gruppe-zahl { text-align: right; line-height: 1.1; }
.gruppe-zahl b { display: block; font-size: 22px; color: var(--gold); }
.gruppe-zahl span { font-size: 12px; color: var(--matt); }

.serverliste { display: grid; gap: 8px; }
.server {
  display: grid; gap: 6px; min-width: 0;
  background: var(--nacht); border: 1px solid var(--rand); border-left: 3px solid var(--grau); border-radius: 4px; padding: 10px 12px;
}
.server.online { border-left-color: var(--gruen); }
.server.startet { border-left-color: var(--gold); }
.server.fehler { border-left-color: var(--rot); }
.server-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.server-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.server-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-info { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--matt); }
.server-info span { white-space: nowrap; }
.server .knoepfe { display: flex; gap: 6px; margin-top: 2px; }
.server .knoepfe .knopf { flex: 1; }
.klein-marke { font-size: 10px; color: var(--blau); border: 1px solid var(--blau); border-radius: 3px; padding: 0 5px; }

.leer { color: var(--matt); }

/* ---------------------------------------------------------------- Protokoll */
.protokoll ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.protokoll li { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid var(--rand); font-size: 14px; }
.protokoll time { color: var(--matt); font-variant-numeric: tabular-nums; min-width: 92px; }
.protokoll li.fehl span { color: #ff7268; }
.protokoll small { color: var(--matt); width: 100%; padding-left: 104px; }

/* ---------------------------------------------------------------- Dialog & Hinweis */
dialog { color: var(--text); max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog p { color: var(--matt); }
dialog .knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.hinweis {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--karte-hell); border: 2px solid var(--rand); border-radius: 6px; padding: 10px 18px;
  transition: opacity .2s, transform .2s; max-width: calc(100% - 32px);
}
.hinweis.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.hinweis.gruen { border-color: var(--gruen); }
.hinweis.rot { border-color: var(--rot); }

/* ---------------------------------------------------------------- Anmeldung */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-karte { width: 100%; max-width: 380px; display: grid; gap: 14px; padding: 26px; }
.login-karte .marke { justify-content: center; margin-bottom: 6px; }
.login label { display: grid; gap: 6px; font-size: 13px; color: var(--matt); }
.login input {
  font: inherit; color: var(--text); background: var(--nacht);
  border: 2px solid var(--rand); border-radius: 4px; padding: 10px 12px;
}
.login input:focus { outline: none; border-color: var(--gold); }
.login .knopf { margin-top: 6px; padding: 12px; }
.meldung { margin: 0; padding: 8px 12px; border-radius: 4px; background: rgba(217, 69, 59, .15); font-size: 14px; }

[hidden] { display: none !important; }

.matt { color: var(--matt); }
.klein-text { font-size: 12px; }
.gruen-text { color: var(--gruen); }
h3 { font-family: 'Minecraft', monospace; font-size: 14px; margin: 18px 0 4px; letter-spacing: .04em; }

.zeitraum { display: flex; border: 2px solid var(--rand); border-radius: 4px; overflow: hidden; }
.zeitraum button {
  font: inherit; font-size: 13px; color: var(--matt); background: var(--karte); border: 0; padding: 6px 12px; cursor: pointer;
}
.zeitraum button + button { border-left: 1px solid var(--rand); }
.zeitraum button.an { color: #1b1405; background: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- Serverlast */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kachel { background: var(--nacht); border: 1px solid var(--rand); border-radius: 4px; padding: 10px 12px; display: grid; gap: 2px; }
.kachel > span { font-size: 12px; }
.kachel .wert { font-family: 'Minecraft', monospace; font-size: 20px; }
.kachel .wert.gruen { color: var(--gruen); }
.kachel .wert.gold { color: var(--gold); }
.kachel .wert.rot { color: #ff7268; }
.kachel small { font-size: 12px; }

.lastliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.kurven { display: grid; gap: 12px; }
.kurven.zwei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kurve-kopf { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.kurve-flaeche { position: relative; background: var(--nacht); border: 1px solid var(--rand); border-radius: 4px; touch-action: pan-y; }
.kurve-flaeche svg { display: block; width: 100%; height: 100%; }
.kurve-leer { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--matt); }
.gitter { stroke: var(--rand); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.linie { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.linie.blau { stroke: var(--blau); } .flaeche.blau { fill: rgba(0, 163, 255, .14); }
.linie.gruen { stroke: var(--gruen); } .flaeche.gruen { fill: rgba(106, 190, 48, .14); }
.linie.gold { stroke: var(--gold); } .flaeche.gold { fill: rgba(224, 165, 38, .14); }
.kreuz { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--matt); pointer-events: none; }
.punkt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 2px solid var(--nacht); pointer-events: none; }
.punkt.blau { background: var(--blau); } .punkt.gruen { background: var(--gruen); } .punkt.gold { background: var(--gold); }
.tip {
  position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 1;
  background: var(--karte-hell); border: 1px solid var(--rand); border-radius: 4px; padding: 4px 8px; font-size: 12px;
  display: flex; gap: 8px;
}
.tip span { color: var(--matt); }

/* ---------------------------------------------------------------- Spieler */
.filter input[type=search] {
  font: inherit; color: var(--text); background: var(--nacht); border: 2px solid var(--rand); border-radius: 4px;
  padding: 7px 10px; width: 220px; max-width: 100%;
}
.filter input[type=search]:focus { outline: none; border-color: var(--gold); }
.schalter { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--matt); cursor: pointer; }
.tabelle-huelle { padding: 0; overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; font-weight: 600; font-size: 12px; color: var(--matt); padding: 10px 14px; border-bottom: 2px solid var(--rand); white-space: nowrap; }
.tabelle td { padding: 9px 14px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr:hover, .tabelle tbody tr:focus { background: var(--karte-hell); outline: none; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .name { display: flex; align-items: center; gap: 8px; }
.online-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--grau); flex: none; }
.online-punkt.an { background: var(--gruen); box-shadow: 0 0 6px var(--gruen); }
.rang { font-family: 'Minecraft', monospace; font-size: 12px; border: 1px solid; border-radius: 3px; padding: 1px 7px; }

dialog.breit { max-width: 520px; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-kopf h2 { font-size: 20px; }
.werte { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; }
.werte dt { color: var(--matt); }
.werte dd { margin: 0; }
.rang-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.rang-form label { display: grid; gap: 4px; font-size: 12px; color: var(--matt); }
.rang-form select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--nacht);
  border: 2px solid var(--rand); border-radius: 4px; padding: 7px 10px;
}

.konto-karte { display: grid; gap: 10px; justify-items: start; }
.konto-karte p { margin: 0; }
.wer.gross { font-size: 18px; }
.wer.gross img { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- Mittel: Seitenleiste schmaler */
@media (max-width: 1180px) {
  :root { --leiste: 76px; }
  .seitenleiste { padding: 18px 10px; align-items: center; }
  .seitenleiste .marke span, .navi a span { display: none; }
  .navi a { justify-content: center; padding: 10px; }
  .konto-leiste { display: none; }
  .nur-schmal { display: flex !important; }
  .inhalt { padding: 24px 24px 60px; }
}

/* ---------------------------------------------------------------- Handy: Kopf oben, App-Leiste unten */
@media (max-width: 760px) {
  .seitenleiste {
    inset: auto 0 0 0; width: auto; height: calc(var(--navi-hoehe) + env(safe-area-inset-bottom));
    flex-direction: row; padding: 0 0 env(safe-area-inset-bottom); gap: 0;
    border-right: 0; border-top: 2px solid var(--rand); background: rgba(13, 20, 36, .97); backdrop-filter: blur(8px);
  }
  .seitenleiste .marke, .konto-leiste { display: none; }
  .navi { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 0; }
  .navi a {
    flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 0;
    font-size: 11px; letter-spacing: .02em;
  }
  .navi a span { display: block; }
  .navi a img { width: 24px; height: 24px; }
  .navi a.an { background: transparent; box-shadow: inset 0 3px 0 var(--gold); }

  .kopf-handy {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 2; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(10, 15, 27, .95); border-bottom: 1px solid var(--rand); backdrop-filter: blur(8px);
  }
  .kopf-handy .marke { font-size: 15px; }
  .kopf-handy .marke img { width: 22px; height: 22px; }

  .haupt { margin-left: 0; padding-bottom: calc(var(--navi-hoehe) + env(safe-area-inset-bottom)); }
  .inhalt { padding: 16px 16px 28px; gap: 14px; }
  h1 { font-size: 18px; }
  .seitenkopf { align-items: stretch; flex-direction: column; gap: 10px; }
  .seitenkopf p { font-size: 13px; }
  .karte { padding: 14px; }
  .gruppen, .lastliste { grid-template-columns: 1fr; }
  .wartung .knopf { width: 100%; }
  .zeitraum { width: 100%; }
  .zeitraum button { flex: 1; padding: 8px 4px; }
  .filter { width: 100%; }
  .filter input[type=search] { flex: 1; width: auto; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel .wert { font-size: 17px; }
  .protokoll small { padding-left: 0; }
  .hinweis { bottom: calc(var(--navi-hoehe) + 16px + env(safe-area-inset-bottom)); }

  /* Spieler als Karten statt Tabelle */
  .tabelle-huelle { background: none; border: 0; padding: 0; overflow: visible; }
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle tbody { display: grid; gap: 10px; }
  .tabelle tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px;
    background: var(--karte); border: 2px solid var(--rand); border-radius: 6px;
  }
  .tabelle td { padding: 0; border: 0; white-space: normal; }
  .tabelle .name { grid-column: 1; font-size: 15px; }
  .tabelle .rang-zelle { grid-column: 2; justify-self: end; }
  .tabelle .wo { grid-column: 1 / -1; font-size: 13px; margin-top: -4px; }
  .tabelle .zahl { text-align: left; font-size: 14px; }
  .tabelle td[data-beschriftung]::before {
    content: attr(data-beschriftung); display: block; font-size: 11px; color: var(--matt);
  }
  .tabelle .wo::before { display: none !important; }
  .tabelle td.leer { grid-column: 1 / -1; }

  dialog { max-height: calc(100vh - 32px); overflow-y: auto; }
  .rang-form { display: grid; grid-template-columns: 1fr 1fr; }
  .rang-form .knopf { grid-column: 1 / -1; }
  .rang-form select { width: 100%; }
}