/* Funkwache – Grundstil */
:root {
  --bg: #0b0f14;
  --bg2: #10161e;
  --panel: #141b24;
  --panel2: #1a2330;
  --linie: #253142;
  --linie2: #32414f;
  --text: #e6edf3;
  --text2: #9aa8b6;
  --text3: #6b7887;
  --akzent: #ff4d3d;
  --akzent2: #ff7a5c;
  --blau: #3b82f6;
  --amber: #f5a524;
  --gruen: #22c55e;
  --lila: #a371f7;
  --s1: #4ade80; --s2: #16a34a; --s3: #f59e0b; --s4: #ef4444; --s5: #fbbf24; --s6: #64748b;
  --s7: #a855f7; --s8: #3b82f6; --s9: #64748b; --s0: #f43f5e;
  --radius: 10px;
  --schatten: 0 10px 30px rgba(0,0,0,.35);
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-k: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="hell"] {
  --bg: #eef1f5; --bg2: #e5e9ef; --panel: #ffffff; --panel2: #f4f6f9; --linie: #d6dde6; --linie2: #c3ccd8;
  --text: #121821; --text2: #4d5b6b; --text3: #7d8a99; --schatten: 0 8px 24px rgba(20,30,50,.12);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--akzent2); }
h1, h2, h3, h4 { font-family: var(--font-k); letter-spacing: .02em; margin: 0 0 .5em; line-height: 1.15; }
button, input, select, textarea { font: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  background: var(--panel2); border: 1px solid var(--linie2); color: var(--text);
  padding: .5em .95em; border-radius: 8px; cursor: pointer; font-weight: 600; text-decoration: none;
  transition: background .12s, border-color .12s, transform .05s; white-space: nowrap; user-select: none;
}
.btn:hover { border-color: var(--text3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.btn.primaer:hover { background: #ff624f; }
.btn.blau { background: var(--blau); border-color: var(--blau); color: #fff; }
.btn.gruen { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.amber { background: var(--amber); border-color: var(--amber); color: #1b1300; }
.btn.klein { padding: .28em .6em; font-size: .86em; border-radius: 6px; }
.btn.flach { background: transparent; border-color: transparent; }
.btn.flach:hover { background: var(--panel2); }
.btn.gefahr { color: #ff6b6b; border-color: #5a2a2a; }

input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; background: var(--bg2); border: 1px solid var(--linie2); border-radius: 8px;
  padding: .55em .7em; outline: none; transition: border-color .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blau); }
textarea { resize: vertical; min-height: 70px; }
label.feld { display: block; margin-bottom: .75em; }
label.feld > span { display: block; font-size: .82em; color: var(--text2); margin-bottom: .25em; font-weight: 600; letter-spacing: .02em; }
.zeile { display: flex; gap: .6em; align-items: center; }
.zeile > * { min-width: 0; }
.wachs { flex: 1; }
.check { display: flex; gap: .5em; align-items: center; cursor: pointer; }
.check input { width: 1.05em; height: 1.05em; accent-color: var(--akzent); }
.muted { color: var(--text2); }
.klein { font-size: .85em; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

.karte { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 5vh 12px; overflow-y: auto; backdrop-filter: blur(2px); }
.modal { background: var(--panel); border: 1px solid var(--linie2); border-radius: 14px; width: 100%; max-width: 640px; box-shadow: var(--schatten); }
.modal.breit { max-width: 980px; }
.modal-kopf { display: flex; align-items: center; gap: .6em; padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.modal-kopf h3 { margin: 0; font-size: 1.3em; flex: 1; }
.modal-inhalt { padding: 16px 18px; }
.modal-fuss { display: flex; gap: .6em; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--linie); flex-wrap: wrap; }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: none; padding: .6em .9em; cursor: pointer; color: var(--text2); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; font-family: var(--font-k); font-size: 1.02em; letter-spacing: .03em; }
.tabs button.aktiv { color: var(--text); border-bottom-color: var(--akzent); }

/* Toasts */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 3000; pointer-events: none; width: min(92vw, 420px); }
.toast { background: var(--panel2); border: 1px solid var(--linie2); padding: .65em 1em; border-radius: 10px; box-shadow: var(--schatten); transition: opacity .4s, transform .4s; text-align: center; font-weight: 500; }
.toast.fehler { border-color: #a33; background: #3a1414; color: #ffd4d4; }
.toast.ok { border-color: #1f7a3a; }
.toast.weg { opacity: 0; transform: translateY(8px); }

/* FMS-Status */
.st { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; border-radius: 6px; font-family: var(--mono); font-weight: 800; color: #fff; font-size: .95em; flex-shrink: 0; }
.st-1 { background: var(--s1); color: #052e12; } .st-2 { background: var(--s2); } .st-3 { background: var(--s3); color: #2b1900; }
.st-4 { background: var(--s4); } .st-5 { background: var(--s5); color: #2b1900; } .st-6 { background: var(--s6); }
.st-7 { background: var(--s7); } .st-8 { background: var(--s8); } .st-9 { background: var(--s9); } .st-0 { background: var(--s0); }

.leer { color: var(--text3); text-align: center; padding: 1.2em .5em; font-size: .92em; }
.badge { display: inline-block; padding: .05em .45em; border-radius: 5px; font-size: .78em; font-weight: 700; background: var(--panel2); border: 1px solid var(--linie2); color: var(--text2); letter-spacing: .02em; }
.badge.rot { background: #4a1414; border-color: #7a2222; color: #ffb4b4; }
.badge.amber { background: #4a3305; border-color: #7a5510; color: #ffd27a; }
.badge.blau { background: #0e2a52; border-color: #1d4b8a; color: #a8cbff; }
.badge.gruen { background: #0f3a1d; border-color: #1b6a35; color: #9ff0b9; }

@keyframes blinken { 50% { opacity: .35; } }
.blink { animation: blinken 1s steps(2, start) infinite; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linie2); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

.hinweis-spiel { font-size: .78em; color: var(--text3); }