/* TFT Monitor – Farben und Formen wie die TFT-Hosting-App (desktop/src/renderer/src/styles.css). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f6f6f7;--surface:#fff;--raised:#ececef;--line:#e4e4e7;--line-strong:#d4d4d8;--line-hover:#a1a1aa;
  --text:#09090b;--text-soft:#27272a;--muted:#52525b;--subtle:#71717a;
  --inverse:#18181b;--inverse-hover:#27272a;--on-inverse:#fff;--ink-rgb:9 9 11;--bg-rgb:246 246 247;
  --good-text:#047857;--good-line:#a7f3d0;--good-bg:#ecfdf5;
  --warn-text:#b45309;--warn-line:#fde68a;--warn-bg:#fffbeb;
  --bad-text:#b91c1c;--bad-line:#fecaca;--bad-bg:#fef2f2;
  --bar:#18181b;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#09090b;--surface:#18181b;--raised:#27272a;--line:#27272a;--line-strong:#3f3f46;--line-hover:#71717a;
  --text:#fff;--text-soft:#e4e4e7;--muted:#a1a1aa;--subtle:#71717a;
  --inverse:#fff;--inverse-hover:#f4f4f5;--on-inverse:#09090b;--ink-rgb:255 255 255;--bg-rgb:9 9 11;
  --good-text:#6ee7b7;--good-line:rgb(52 211 153 / .3);--good-bg:rgb(6 78 59 / .35);
  --warn-text:#fcd34d;--warn-line:rgb(251 191 36 / .3);--warn-bg:rgb(120 53 15 / .35);
  --bad-text:#fca5a5;--bad-line:rgb(248 113 113 / .3);--bad-bg:rgb(127 29 29 / .35);
  --bar:#e4e4e7;
  color-scheme:dark;
}}
html{-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:var(--bg);color:var(--text);font:14px/1.6 Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
:focus-visible{outline:2px solid rgb(var(--ink-rgb) / .3);outline-offset:2px}
.mono{font-family:'JetBrains Mono',Consolas,'Cascadia Mono',ui-monospace,monospace;font-size:12.5px}
.leise{color:var(--muted)}

/* Marke und Kopfzeile */
.marke{display:flex;align-items:center;gap:8px}
.logo{height:18px;width:auto}
.marke span{font-weight:600;font-size:15px;letter-spacing:-.01em;border-left:1px solid var(--line-strong);padding-left:8px;color:var(--muted)}
.kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;min-height:64px;padding:0 24px;background:rgb(var(--bg-rgb) / .92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.stand{color:var(--subtle);font-size:13px}
.kopf-rechts{margin-left:auto}

/* Knöpfe und Felder */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 18px;border-radius:999px;border:0;font:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:background-color .2s,border-color .2s}
.primaer{background:var(--inverse);color:var(--on-inverse)}.primaer:hover{background:var(--inverse-hover)}
.zweitrangig{background:var(--surface);border:1px solid var(--line-strong);color:var(--text-soft);font-weight:500}.zweitrangig:hover{border-color:var(--line-hover)}
.feld{display:flex;flex-direction:column;gap:8px;font-weight:500;font-size:13px;color:var(--text-soft)}
.feld input{min-height:44px;border:1px solid var(--line);border-radius:16px;padding:10px 16px;background:rgb(var(--bg-rgb) / .8);color:var(--text);font:inherit;font-weight:400;outline:none;transition:border-color .2s}
.feld input:hover{border-color:var(--line-strong)}
.feld input:focus{border-color:var(--line-hover);box-shadow:0 0 0 4px rgb(var(--ink-rgb) / .05)}

/* Anmeldung */
.anmelden{display:grid;place-items:center;padding:24px 16px}
.anmelde-karte{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px 28px}
.anmelde-karte h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:28px}
.anmelde-karte form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.anmelde-karte .knopf{margin-top:4px}
.fehler{margin-top:16px;padding:10px 14px;border-radius:14px;border:1px solid var(--bad-line);background:var(--bad-bg);color:var(--bad-text);font-size:13px}

/* Inhalt */
.inhalt{max-width:1200px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;min-width:0}
.karte h2{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;gap:8px;align-items:baseline}
.zaehler{color:var(--subtle);font-weight:500}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.kachel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.kachel .titel{font-size:12px;color:var(--muted);font-weight:500}
.kachel .wert{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kachel .unter{font-size:12px;color:var(--subtle)}
.balken{height:6px;border-radius:99px;background:var(--raised);overflow:hidden;margin-top:4px}
.balken i{display:block;height:100%;border-radius:99px;background:var(--bar)}
.balken.warn i{background:var(--warn-text)}.balken.schlecht i{background:var(--bad-text)}

.liste{list-style:none;display:flex;flex-direction:column}
.liste li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.liste li:first-child{border-top:0}
.werte{display:grid;grid-template-columns:auto 1fr;gap:7px 16px}
.werte dt{color:var(--muted)}.werte dd{text-align:right}

.marker{display:inline-flex;align-items:center;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.gut{border-color:var(--good-line);background:var(--good-bg);color:var(--good-text)}
.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-text)}
.schlecht{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad-text)}
.balken.warn,.balken.schlecht{border:0;background:var(--raised)}

.tabelle-rahmen{overflow-x:auto;margin:0 -22px;padding:0 22px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:500;color:var(--subtle);font-size:12px;padding:0 12px 8px 0;white-space:nowrap}
td{padding:8px 12px 8px 0;border-top:1px solid var(--line);white-space:nowrap}
td a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;color:inherit}
td a:hover{text-decoration-color:currentColor}
.leer{color:var(--subtle);padding:12px 0}

#hinweis:empty{display:none}
#hinweis{padding:12px 16px;border-radius:16px;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-text)}

@media (max-width:600px){
  .kopf{padding:0 16px;gap:10px}.stand{display:none}
  .inhalt{padding:16px}
  .karte{padding:18px 16px}.tabelle-rahmen{margin:0 -16px;padding:0 16px}
}