/* Grundfarben und -schriften für alle Ansichten */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans+Condensed:wght@400;600;700&display=swap');

:root {
  --grund: #0D1319;
  --kopf: #111A22;
  --flaeche: #131C25;
  --flaeche2: #18232E;
  --linie: #24303C;
  --linie2: #2F3E4C;
  --text: #E6EDF3;
  --leise: #A3B0BC;
  --sehr-leise: #5C6B78;
  --blau: #4AA3DF;
  --blau-hell: #7FC4F0;
  --gelb: #F2A93B;
  --gelb-hell: #F2C27A;
  --rot: #E5534B;
  --rot-hell: #FF8A82;
  --gruen: #57B37C;
  --violett: #B9B0F0;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); }
a { color: var(--blau-hell); }
a:hover { color: #B5DDF7; }
button, input, select, textarea { font: inherit; color: inherit; }

button {
  min-height: 40px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--linie2); background: var(--flaeche2); color: var(--text); font-weight: 600;
}
button:hover:not(:disabled) { border-color: var(--blau); }
button:disabled { opacity: .45; cursor: default; }
button.haupt { background: var(--gelb); border-color: var(--gelb); color: #1A1306; }
button.gefahr { border-color: var(--rot); color: var(--rot-hell); background: transparent; }
button.klein { min-height: 32px; padding: 2px 10px; font-size: 14px; }

input, select, textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linie2);
  background: var(--grund); margin-top: 4px;
}
label { display: block; color: var(--leise); font-size: 15px; }
code { font-family: var(--mono); background: var(--flaeche2); padding: 1px 5px; border-radius: 4px; }

.seite { padding: 24px 16px; font-size: 17px; }
.karte-box { max-width: 460px; margin: 40px auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 24px; }
.karte-box form { display: grid; gap: 14px; margin-top: 12px; }
.leise { color: var(--leise); }
.fehler { color: var(--rot-hell); }
.ok { color: var(--gruen); font-weight: 600; }

.stufe-ruhig { color: var(--blau-hell); }
.stufe-mittel { color: #C9D3A8; }
.stufe-warn { color: var(--gelb); }
.stufe-krit { color: var(--rot-hell); }

.verbindung { background: #3A1C1A; border: 1px solid var(--rot); color: var(--rot-hell); padding: 8px 12px; border-radius: 8px; }