/* JU-Datenzentrale — Oberflaeche.
   Ruhig und hell gehalten, wie beim Redesign der datenbank-App: das hier ist
   ein Arbeitswerkzeug fuer HR, kein Schaukasten. Markenfarben gemessen:
   JU-Blau #4155FF, Gruen #83E500, Dunkelblau #011057. */
:root{
  --blau:#4155FF; --dunkel:#011057; --gruen:#83E500;
  --grund:#f6f7fb; --karte:#fff; --rand:#e3e7f0;
  --text:#1a1f36; --grau:#6b7280;
  --ampel-gruen:#22c55e; --ampel-orange:#f59e0b; --ampel-rot:#ef4444; --ampel-aus:#c3c8d4;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--grund); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:52px;                 /* Platz fuer die feste Fusszeile */
}

/* ── Kopf ── */
.kopf{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--dunkel); color:#fff; padding:12px 20px;
}
.marke{font-weight:700; letter-spacing:.3px}
.kopf nav{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.kopf nav a{
  color:#c9d2ff; text-decoration:none; padding:6px 12px; border-radius:7px;
}
.kopf nav a:hover{background:rgba(255,255,255,.10); color:#fff}
.kopf nav a.an{background:var(--blau); color:#fff}
.wer{font-size:13px; color:#aab4dd; display:flex; align-items:center; gap:10px}
.wer .rollen{
  background:rgba(255,255,255,.12); padding:2px 8px; border-radius:20px; font-size:12px;
}
.wer a{color:#fff; text-decoration:underline}

/* ── Inhalt ── */
main{max-width:1180px; margin:0 auto; padding:22px 20px}
h1{font-size:21px; margin:0 0 18px}
h2{font-size:16px; margin:26px 0 10px; color:var(--dunkel)}

.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.karte{
  background:var(--karte); border:1px solid var(--rand); border-radius:12px; padding:16px 18px;
}
.karte .zahl{font-size:30px; font-weight:700; color:var(--dunkel); line-height:1.15}
.karte .was{font-size:13px; color:var(--grau); margin-top:2px}
.karte.warn .zahl{color:#b45309}

table{width:100%; border-collapse:collapse; background:var(--karte);
  border:1px solid var(--rand); border-radius:12px; overflow:hidden}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--rand); font-size:14px}
th{background:#eef1f8; font-weight:600; color:var(--dunkel); font-size:13px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbff}
td.nr{font-variant-numeric:tabular-nums; font-weight:600}
.leer{padding:26px; text-align:center; color:var(--grau); background:var(--karte);
  border:1px dashed var(--rand); border-radius:12px}

a{color:var(--blau)}
.suche{display:flex; gap:8px; margin-bottom:14px}
.suche input{
  flex:1; max-width:340px; padding:9px 12px; border:1px solid var(--rand);
  border-radius:9px; font:inherit; background:#fff;
}
.knopf{
  background:var(--blau); color:#fff; border:none; padding:9px 18px;
  border-radius:9px; font:inherit; font-weight:600; cursor:pointer;
}
.knopf:hover{filter:brightness(1.08)}
.hinweis{background:#fff4e5; border:1px solid #f5c883; color:#8a5200;
  padding:10px 14px; border-radius:9px; margin-bottom:16px}
.merk{font-size:13px; color:var(--grau); margin:6px 0 16px}

/* ── Anmeldung ── */
.anmeldung{max-width:340px; margin:9vh auto; background:var(--karte);
  border:1px solid var(--rand); border-radius:14px; padding:26px}
.anmeldung h1{text-align:center}
.anmeldung label{display:block; font-size:13px; color:var(--grau); margin:12px 0 4px}
.anmeldung input{width:100%; padding:10px 12px; border:1px solid var(--rand);
  border-radius:9px; font:inherit}
.anmeldung .knopf{width:100%; margin-top:18px}

/* ── Ampel-Fusszeile ──────────────────────────────────────────────────────
   Gruen = Eingang steht, Orange = Ausgang steht, Blinken = es fliesst gerade,
   Rot = keine Antwort auf die letzten Pings, Grau = noch nicht eingeschaltet. */
.fuss{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--dunkel); color:#c9d2ff; padding:9px 20px; font-size:12.5px;
  box-shadow:0 -2px 10px rgba(1,16,87,.16);
}
.anb{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:default}
.led{
  width:9px; height:9px; border-radius:50%; display:inline-block;
  background:var(--ampel-aus); flex:none;
}
.led.gruen        {background:var(--ampel-gruen);  box-shadow:0 0 6px var(--ampel-gruen)}
.led.orange       {background:var(--ampel-orange); box-shadow:0 0 6px var(--ampel-orange)}
.led.rot          {background:var(--ampel-rot);    box-shadow:0 0 6px var(--ampel-rot)}
.led.aus          {background:var(--ampel-aus);    box-shadow:none; opacity:.6}
.led.gruen_blink  {background:var(--ampel-gruen);  animation:puls .85s ease-in-out infinite}
.led.orange_blink {background:var(--ampel-orange); animation:puls .85s ease-in-out infinite}
@keyframes puls{
  0%,100%{opacity:1;   box-shadow:0 0 9px currentColor; transform:scale(1)}
  50%    {opacity:.28; box-shadow:none;                 transform:scale(.82)}
}
/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt kein Blinken —
   der Zustand bleibt trotzdem unterscheidbar, weil die Helligkeit wechselt. */
@media (prefers-reduced-motion:reduce){
  .led.gruen_blink,.led.orange_blink{animation:none; opacity:.65}
}
.stand{margin-left:auto; color:#7e8ab8; font-variant-numeric:tabular-nums}
.stand.alt{color:var(--ampel-rot)}   /* Abruf gescheitert: Anzeige ist veraltet */

@media (max-width:640px){
  .kopf{gap:10px} .wer .rollen{display:none}
  .fuss{gap:12px; font-size:11.5px} .stand{display:none}
}

/* Formulare */
form label{display:block;margin:14px 0 5px;font-size:13.5px;color:var(--dunkel);font-weight:600}
form label .merk{display:inline;font-weight:400;margin:0}
form input[type=text],form input:not([type]),form input[type=number],form select{
  width:100%;padding:9px 12px;border:1px solid var(--rand);border-radius:9px;font:inherit;background:#fff}
form input[type=checkbox]{width:auto;margin-right:6px}
form input:disabled{background:#f1f3f8;color:var(--grau)}
tr.warn td{background:#fff6f6}
code{background:#eef1f8;padding:1px 6px;border-radius:5px;font-size:13px}

/* Microsoft-Anmeldung */
.knopf.ms{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:#1a1f36;border:1px solid #c3c8d4;font-weight:600}
.knopf.ms:hover{background:#f6f7fb;filter:none}
.knopf.ms:disabled{opacity:.6;cursor:default}
.msfehler{display:none;margin-top:12px;background:#fdecec;border:1px solid #f3b7b7;
  color:#8a1f1f;padding:9px 12px;border-radius:9px;font-size:13.5px}
.trenner{display:flex;align-items:center;gap:10px;margin:20px 0 4px;color:var(--grau);font-size:12.5px}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--rand)}