/* Farben aus dem Limelight-Portal (portal/client/src/styles/brand.css): Bühnen-Schwarz und Signal-Gelb */
:root {
  --ll-black: #0b0b0d;
  --ll-yellow: #ffff3c;
  --page: #e9eaed;
  --card: #ffffff;
  --card-alt: #f5f6f9;
  --text: #0f1013;
  --muted: #43484f;
  --faint: #76767c;
  --line: #d6d8dd;
  --rot: #c62828;
  --neu: #fffbd1;
  --akt: #eef3ff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #070708;
    --card: #101013;
    --card-alt: #0c0c0e;
    --text: #f4f4f5;
    --muted: #9a9aa0;
    --faint: #76767c;
    --line: #26262b;
    --rot: #ff6b6b;
    --neu: #2a2a10;
    --akt: #141a28;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* sonst gewinnt z. B. .knopf { display: inline-block } */
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--ll-black);
  color: #f4f4f5;
}
.kopf h1 { margin: 0; font-size: 18px; font-weight: 600; }
.marke { color: var(--ll-yellow); margin-right: 6px; }
.import { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.knopf {
  display: inline-block;
  padding: 6px 14px;
  background: var(--ll-yellow);
  color: var(--ll-black);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.knopf:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.kopf .leise { color: #9a9aa0; }
.kopf-link { background: none; border: 0; padding: 0; color: #f4f4f5; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.kopf-link:hover { color: var(--ll-yellow); }
.leise { color: var(--muted); font-size: 13px; }

.meldung { margin: 12px 16px 0; padding: 10px 14px; border-radius: 4px; background: var(--card); border-left: 4px solid var(--ll-yellow); white-space: pre-line; }
.meldung.fehler { border-left-color: var(--rot); }

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
.filter input[type="search"] { flex: 1 1 260px; min-width: 0; }
.filter select { flex: 1 1 140px; min-width: 0; }
.filter input, .filter select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}
.haken { display: inline-flex; align-items: center; gap: 6px; }

main { padding: 0 16px 32px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); min-width: 1100px; }
th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  position: sticky;
  top: 0;
  background: var(--card-alt);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  z-index: 1;
}
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text); }
th.auf::after { content: " ▲"; }
th.ab::after { content: " ▼"; }

tr.neu { background: var(--neu); }
tr.akt { background: var(--akt); }
tr.neu td:first-child { box-shadow: inset 4px 0 0 var(--ll-yellow); }

.titel a { color: var(--text); font-weight: 600; text-decoration: none; white-space: pre-line; }
.titel a:hover { text-decoration: underline; }
.titel .ag { color: var(--muted); font-size: 13px; white-space: pre-line; }
.titel details { margin-top: 4px; font-size: 13px; color: var(--muted); }
.titel summary { cursor: pointer; color: var(--faint); }
.titel details p { margin: 4px 0; }
.titel details a { font-weight: 400; text-decoration: underline; }

.frist { white-space: nowrap; }
.frist.knapp { color: var(--rot); font-weight: 600; }
.frist.vorbei { color: var(--faint); text-decoration: line-through; }

.stufe { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; white-space: nowrap; background: var(--card-alt); }
.stufe.nah { background: #d9f2dd; color: #14532d; }
.stufe.bayern { background: #fff3c4; color: #5c4400; }
@media (prefers-color-scheme: dark) {
  .stufe.nah { background: #133a1c; color: #b7f0c1; }
  .stufe.bayern { background: #3a3110; color: #ffe89a; }
}
.km { display: block; color: var(--muted); font-size: 12px; }
.kern-elektrolastig { color: var(--rot); }
.geschaetzt { color: var(--faint); font-size: 12px; }

td select, td input {
  width: 100%;
  min-width: 90px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font: inherit;
}
td input::placeholder { color: var(--faint); }
td select:hover, td input:hover { border-color: var(--line); }
td select:focus, td input:focus { border-color: var(--ll-black); background: var(--card); outline: none; }
td input.gespeichert { border-color: #2e7d32; }
td input.fehler, td select.fehler { border-color: var(--rot); }
.notiz { min-width: 180px; }
.datum { white-space: nowrap; color: var(--muted); font-size: 12px; }

.leer { padding: 24px; text-align: center; color: var(--muted); background: var(--card); }