/*
 * Eine Datei, kein Framework, kein Build.
 *
 * Handy zuerst: der Ping kommt abends aufs Telefon, nicht auf den Desktop.
 * Was auf einem 360 Pixel breiten Bildschirm nicht bedienbar ist, wird nicht
 * benutzt - und dann ist das ganze Panel umsonst gebaut.
 *
 * Zum Thema: Knox County, drei Jahre nach dem Zusammenbruch. Verwaschenes
 * Bernstein auf fast schwarzem Grund mit Gruenstich, Versalien mit weiter
 * Laufweite, Zahlen in Monospace.
 *
 * Die Regel dabei ist wichtiger als die Farben: das Thema fasst RAHMEN,
 * FLAECHEN und UEBERSCHRIFTEN an - nicht die Werte und nicht den Alarm.
 * Dieses Panel wird aufgemacht, wenn etwas kaputt ist, oft nachts, oft vom
 * Handy. Ein Thema, das Lesbarkeit kostet, kostet genau dann.
 */

:root {
  --grund: #0d0f0d;
  --flaeche: #151814;
  --flaeche-hell: #1e221a;
  --rand: #2d3427;
  --rand-hell: #3d4636;
  --text: #dfe3d8;
  --text-leise: #8a9182;

  /* Verwaschenes Bernstein - Behoerdenschild nach drei Wintern. */
  --akzent: #c8922f;
  --akzent-hell: #e0aa45;
  /* Kraenkliches Gruen statt Signalgruen. */
  --gut: #74a33d;
  --warnung: #d8a33a;
  /* Getrocknetes Blut, nicht Feuerwehrrot. */
  --gefahr: #a03d32;
  --gefahr-hell: #c9584a;

  --radius: 4px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-fest: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.55 var(--schrift);
  /* Feine Koernung. Kein Bild, nur ein Verlauf - kostet nichts und macht
     die Flaechen weniger nach Bueroanwendung. */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

a { color: var(--akzent-hell); }
a:hover { color: var(--text); }

/* ------------------------------------------------------------- Kopfzeile */

header.kopf {
  background: linear-gradient(180deg, #171b15, #12150f);
  border-bottom: 2px solid var(--akzent);
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf-reihe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.marke {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 14px;
}
.marke .punkt { color: var(--akzent); }
.marke .leise { color: var(--text-leise); font-weight: 400; letter-spacing: .08em; }

nav.menue { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 10px; }

nav.menue a {
  padding: 7px 11px;
  border-radius: var(--radius);
  color: var(--text-leise);
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

nav.menue a:hover { background: var(--flaeche-hell); color: var(--text); }
nav.menue a.aktiv {
  background: var(--flaeche-hell);
  color: var(--akzent-hell);
  border-color: var(--akzent);
}

.wer { margin-left: auto; color: var(--text-leise); font-size: 12px; text-align: right; }
.wer b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------- Aufbau */

main { padding: 16px 14px 40px; max-width: 1100px; margin: 0 auto; }

h1 {
  font-size: 17px;
  margin: 2px 0 16px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--akzent);
  margin-top: 7px;
}

h2 {
  font-size: 13px;
  margin: 26px 0 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-leise);
  font-weight: 700;
}

h3 { font-size: 14px; margin: 16px 0 8px; }

.karten { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px;
}

.karte h3 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--text-leise);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.zahl { font-size: 27px; font-weight: 700; font-family: var(--schrift-fest); line-height: 1.15; }
.zusatz { color: var(--text-leise); font-size: 13px; }

/* ------------------------------------------------------------- Meldungen */

.meldung {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid;
  background: var(--flaeche);
}

.meldung.ok { border-color: var(--gut); }
.meldung.fehler { border-color: var(--gefahr-hell); }

.hinweis {
  background: var(--flaeche);
  border-left: 3px solid var(--rand-hell);
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-leise);
  font-size: 13px;
  margin: 10px 0;
}

/*
 * Der wichtigste Kasten des ganzen Panels. Er darf vom Thema NICHT
 * geschluckt werden - wer ihn uebersieht, uebersieht den Grund, aus dem
 * niemand mehr auf den Server kommt.
 */
.alarm {
  background: linear-gradient(180deg, #2e2410, #241c0c);
  border: 1px solid var(--warnung);
  border-left: 5px solid var(--warnung);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
}

.alarm h2 {
  margin: 0 0 6px;
  color: var(--warnung);
  font-size: 15px;
  letter-spacing: .1em;
}
.alarm .zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* -------------------------------------------------------------- Elemente */

button, .knopf {
  background: var(--flaeche-hell);
  color: var(--text);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  min-height: 40px;      /* Fingerkuppe, nicht Mauszeiger */
}

button:hover, .knopf:hover { background: #272c22; border-color: var(--akzent); }

button.haupt {
  background: var(--akzent);
  color: #14170f;
  border-color: var(--akzent);
  font-weight: 700;
}
button.haupt:hover { background: var(--akzent-hell); color: #14170f; }

button.gefahr { background: #341714; border-color: var(--gefahr); color: #f0c4bd; }
button.gefahr:hover { background: #45201b; border-color: var(--gefahr-hell); }

button.klein { padding: 5px 9px; min-height: 32px; font-size: 12px; }

input, select, textarea {
  background: #0b0d0a;
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  width: 100%;
  min-height: 40px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akzent);
}

textarea { min-height: 80px; resize: vertical; font-family: var(--schrift-fest); font-size: 13px; }
label {
  display: block;
  font-size: 11px;
  color: var(--text-leise);
  margin: 10px 0 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.reihe > * { flex: 1 1 160px; }
.reihe > button, .reihe > .schmal { flex: 0 0 auto; }

.marken { display: flex; gap: 6px; flex-wrap: wrap; }

/* -------------------------------------------------------------- Tabellen */

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
th {
  background: #12150f;
  color: var(--text-leise);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(200,146,47,.045); }
td.breit { white-space: normal; min-width: 220px; }
td.fest, .fest { font-family: var(--schrift-fest); font-size: 13px; }

/* --------------------------------------------------------------- Plaketten */

.plakette {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid;
}
.plakette.gut { background: #1a2612; color: #a6d16d; border-color: #3d5a26; }
.plakette.warn { background: #2c2410; color: #e8c273; border-color: #5d4a1c; }
.plakette.schlecht { background: #2b1310; color: #e09287; border-color: #63281f; }
.plakette.leise { background: var(--flaeche-hell); color: var(--text-leise); border-color: var(--rand-hell); }

/* ------------------------------------------------------------------ Log */

pre.log, pre.antwort {
  background: #090b08;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 12px;
  font: 12px/1.5 var(--schrift-fest);
  color: #b9c0b0;
}

pre.log { overflow-x: auto; max-height: 65vh; white-space: pre; }
pre.antwort { white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ---------------------------------------------------------------- Karte */

#karte {
  width: 100%;
  height: 66vh;
  min-height: 340px;
  background: #090b08;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  touch-action: none;
  cursor: grab;
}
#karte:active { cursor: grabbing; }

.karte-leiste {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 10px 0;
}
.karte-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.karte-legende span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-leise); }
.karte-legende i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------------ Diagramme */

svg.diagramm { width: 100%; height: auto; display: block; }
svg.sparkline { width: 100%; height: 32px; display: block; margin-top: 8px; opacity: .9; }

.d-raster   { stroke: var(--rand); stroke-width: 1; }
.d-marke    { fill: var(--text-leise); font: 10px var(--schrift-fest); }
.d-neustart { stroke: var(--gefahr-hell); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }

/* -------------------------------------------------------------- Anmeldung */

.anmeldung { max-width: 400px; margin: 13vh auto; text-align: center; }
.anmeldung .karte { padding: 28px 24px; border-top: 2px solid var(--akzent); }
.anmeldung h1 { font-size: 15px; }
.anmeldung h1::after { margin-left: auto; margin-right: auto; }
.discord {
  background: #5865f2; color: #fff; border-color: #5865f2;
  font-size: 15px; padding: 13px 20px; width: 100%; text-transform: none;
  letter-spacing: normal;
}
.discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }

/* Auf schmalen Geraeten atmen lassen. */
@media (max-width: 560px) {
  main { padding: 12px 10px 30px; }
  .wer { margin-left: 0; width: 100%; text-align: left; }
  th, td { padding: 8px; }
  .zahl { font-size: 23px; }
  #karte { height: 58vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------ Weltaufbau (Banner) --
   Steht auf jeder Seite, solange der Aufbau laeuft. Er soll auffallen,
   ohne wie ein Fehler auszusehen: Akzentrahmen statt Gefahrenrot, denn
   hier ist nichts kaputt - es dauert nur. */
.aufbau {
  border: 1px solid var(--akzent);
  border-left-width: 3px;
  background: var(--flaeche);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.aufbau-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
}
.aufbau-text {
  font-family: var(--schrift-fest);
  margin: 6px 0 10px;
}
.aufbau-balken {
  background: var(--flaeche-hell);
  border-radius: 2px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.aufbau-balken > div {
  background: var(--akzent);
  height: 100%;
  width: 0;
  transition: width .6s ease;
}

.aufbau-zahlen {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.aufbau-zahlen > span:first-child {
  font-family: var(--schrift-fest);
  font-size: 1.1rem;
  color: var(--akzent);
}