/* ===========================================================================
   Infrastruktur-Dashboard — Gestaltung
   ---------------------------------------------------------------------------
   Grundsatz: FARBE BEDEUTET AUSSCHLIESSLICH ZUSTAND. Navigation, Verweise und
   Schaltflaechen bleiben schwarzweiss. Dadurch sticht die Ampel hervor, statt
   mit einer Markenfarbe zu konkurrieren — auf einer Seite, deren einziger
   Zweck das Erkennen von Zustaenden ist, waere jede weitere Farbe Laerm.

   Keine externen Ressourcen: die Sicherheitsrichtlinie des Dienstes erlaubt nur
   Eigenes (script-src 'none'). Deshalb Systemschriften statt Webfont; die
   Tabellenziffern kommen ueber font-variant-numeric.
   =========================================================================== */

:root {
  --grund: #fbfbfa;
  --karte: #ffffff;
  --flaeche: #f4f4f2;
  --text: #1b1b1a;
  --leise: #6b6b68;
  --stumm: #8a8a86;
  --rahmen: #e3e3e0;
  --rahmen-stark: #d3d3cf;

  --ok: #2f8f4e;
  --warn: #c98a12;
  --problem: #c0392b;
  --grau: #8a8a86;

  --pd-flaeche: #f0e6d2;
  --pd-text: #7a5c12;

  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --radius: 8px;
  --radius-klein: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #17181a;
    --karte: #202225;
    --flaeche: #1c1e20;
    --text: #ececea;
    --leise: #a0a09c;
    --stumm: #7a7a76;
    --rahmen: #33353a;
    --rahmen-stark: #43454a;

    --ok: #4fae6b;
    --warn: #d9a233;
    --problem: #e0614f;
    --grau: #7a7a76;

    --pd-flaeche: #33291a;
    --pd-text: #e6c477;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--rahmen-stark);
    text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
h2 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

button {
  font: inherit; font-size: .875rem; min-height: 2.75rem; padding: 0 .8rem;
  border: 1px solid var(--rahmen-stark); border-radius: var(--radius-klein);
  background: var(--karte); color: var(--text); cursor: pointer;
}
button:hover { border-color: var(--text); }
button.stark { background: var(--text); color: var(--grund); border-color: var(--text); font-weight: 500; }

code, pre, .m { font-family: var(--mono); font-size: .8125rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* --- Geruest ------------------------------------------------------------- */

.geruest { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.spalte {
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 1.4rem 1.1rem;
  background: var(--flaeche); border-right: 1px solid var(--rahmen);
}
.marke { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; }
.marke b { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; }
.marke span { font-size: .75rem; color: var(--leise); }

.nav { display: flex; flex-direction: column; gap: .1rem; }
.nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .625rem; border-radius: var(--radius-klein);
  font-size: .9rem; text-decoration: none;
}
.nav a:hover { background: var(--karte); }
.nav a[aria-current="page"] { background: var(--text); color: var(--grund); font-weight: 500; }
.nav a svg { flex-shrink: 0; }
.nav .fuellung { flex-grow: 1; }
.nav .zahl { font-size: .7rem; font-weight: 600; padding: .05rem .375rem; border-radius: .6rem;
             background: var(--problem); color: #fff; }
.nav a[aria-current="page"] .nebenzahl,
.nav .nebenzahl { font-size: .75rem; color: var(--leise); }
.nav a[aria-current="page"] .nebenzahl { color: var(--grund); opacity: .75; }

.spalte-fuss { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--rahmen);
               display: flex; flex-direction: column; gap: .35rem; }

.inhalt { padding: 1.6rem 1.9rem 3rem; min-width: 0; }

.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 1.5rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.ueberzeile { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--stumm); }
.stand, .leise { color: var(--leise); font-size: .875rem; }

/* --- Ampel --------------------------------------------------------------- */

.punkt { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
         background: var(--grau); flex-shrink: 0; }
.punkt.gross { width: .75rem; height: .75rem; }
.punkt.ok { background: var(--ok); }
.punkt.warn { background: var(--warn); }
.punkt.problem, .punkt.unlesbar { background: var(--problem); }
.punkt.veraltet, .punkt.keine_meldung { background: var(--grau); }

.marker { font-size: .75rem; color: var(--leise); }
.fehler { color: var(--problem); font-weight: 600; }

/* Anteilsleiste: Verhaeltnis statt bloszer Zahl */
.anteile { display: flex; height: .5rem; border-radius: .25rem; overflow: hidden;
           background: var(--rahmen); }
.anteile > span { display: block; }
.anteile .ok { background: var(--ok); }
.anteile .warn { background: var(--warn); }
.anteile .problem { background: var(--problem); }
.anteile .grau { background: var(--grau); }

.legende { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .75rem; color: var(--leise); }
.legende span { display: flex; align-items: center; gap: .375rem; }
.legende i { width: .5rem; height: .5rem; border-radius: 2px; display: inline-block; }

/* --- Karten und Kennzahlen ---------------------------------------------- */

.karte { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--radius);
         padding: .9rem 1rem; }
.kennzahlen { display: grid; gap: .75rem; padding: 0; margin: 0 0 1.5rem; list-style: none;
              grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.kennzahlen li { background: var(--karte); border: 1px solid var(--rahmen);
                 border-radius: var(--radius); padding: .8rem .9rem; }
.kennzahlen .titel { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
                     color: var(--stumm); }
.kennzahlen .wert { display: block; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; }
.kennzahlen .wert small { font-size: .875rem; font-weight: 400; color: var(--leise); }
.kennzahlen .fuss { font-size: .75rem; color: var(--leise); }
.kennzahlen .fuss.achtung { color: var(--warn); }

/* --- Listen -------------------------------------------------------------- */

.liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column;
         gap: 1px; background: var(--rahmen); border: 1px solid var(--rahmen);
         border-radius: var(--radius); overflow: hidden; }
.liste > li { background: var(--karte); padding: .7rem .85rem; }

.bedarf > li { display: grid; grid-template-columns: 3px 1fr; gap: 0; padding: 0; }
.bedarf .balken { background: var(--grau); }
.bedarf .balken.problem, .bedarf .balken.unlesbar { background: var(--problem); }
.bedarf .balken.warn { background: var(--warn); }
.bedarf .rumpf { padding: .7rem .85rem; display: flex; flex-direction: column; gap: .3rem; }
.bedarf .kopfzeile { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bedarf .kopfzeile b { font-weight: 500; }

.pruefpunkte { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.pruefpunkt { font-size: .7rem; padding: .1rem .4rem; border-radius: .25rem;
              border: 1px solid var(--rahmen-stark); color: var(--leise); }
.pruefpunkt.ok { border-color: var(--ok); color: var(--ok); }
.pruefpunkt.warn { border-color: var(--warn); color: var(--warn); }
.pruefpunkt.problem, .pruefpunkt.unlesbar { border-color: var(--problem); color: var(--problem); }
.pruefpunkt.veraltet, .pruefpunkt.keine_meldung { border-color: var(--grau); color: var(--stumm); }

.gruppen { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.gruppe { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--radius);
          padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.gruppe-kopf { display: flex; align-items: center; gap: .55rem; }
.gruppe-kopf b { flex-grow: 1; font-weight: 600; }
.gruppe ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.gruppe li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.gruppe li .name { flex-grow: 1; }

/* --- Status-Board -------------------------------------------------------- */

.board-huelle { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow-x: auto; }
.board { width: 100%; border-collapse: collapse; font-size: .875rem; }
.board th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--stumm); font-weight: 500; padding: .6rem .7rem;
  background: var(--flaeche); border-bottom: 1px solid var(--rahmen); white-space: nowrap;
}
.board th.mitte, .board td.mitte { text-align: center; }
.board td { padding: .55rem .7rem; border-bottom: 1px solid var(--rahmen); vertical-align: top; }
.board tr:last-child td { border-bottom: none; }
.board tbody.gruppenkopf th {
  background: var(--flaeche); font-size: .7rem; letter-spacing: .04em; font-weight: 600;
  color: var(--text); border-top: 1px solid var(--rahmen);
}
.board .system b { font-weight: 500; }
.board .system .m { display: block; color: var(--leise); }
.board .luecke { border-left: 3px solid var(--problem); }
.board .luecke-mild { border-left: 3px solid var(--warn); }
.board .ruhig td { background: color-mix(in oklab, var(--karte) 92%, var(--grund)); color: var(--leise); }

.kaesten { display: flex; gap: .25rem; }
.kasten { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.kasten.vorhanden { background: var(--text); }
.kasten.nicht_gefordert { background: var(--rahmen); box-shadow: inset 0 0 0 1px var(--rahmen-stark); }
.kasten.gefordert_fehlt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--problem); }
.kasten.bewusst_ohne { background: transparent; box-shadow: inset 0 0 0 1.5px var(--stumm); }
/* Halb gefuellt: vorhanden, aber nicht durch dieses System selbst — der Host
   prueft fuer alle Apps darauf mit. Klar unterscheidbar von den Ringen. */
/* Gefuellt in Warnfarbe: die Massnahme ist da, ihr Ausfall waere aber
   unsichtbar. Farbe bedeutet auch hier Zustand, nicht Kategorie. */
.kasten.unbeobachtet { background: var(--warn); }
.kasten.vom_host { background: linear-gradient(135deg, var(--text) 0 50%, transparent 50% 100%);
                   box-shadow: inset 0 0 0 1px var(--rahmen-stark); }

.pd { font-size: .65rem; font-weight: 600; padding: .1rem .3rem; border-radius: 4px;
      background: var(--pd-flaeche); color: var(--pd-text); }

/* --- Inventarblock ------------------------------------------------------- */

.inventar { display: grid; grid-template-columns: 1fr; gap: .1rem 1rem; margin: 0; }
.inventar dt { font-size: .7rem; color: var(--stumm); text-transform: uppercase;
               letter-spacing: .06em; margin-top: .7rem; }
.inventar dd { margin: 0; overflow-wrap: anywhere; }
.hinweiskasten { background: var(--flaeche); border-radius: var(--radius-klein);
                 padding: .7rem .8rem; }

/* --- Anmeldung ----------------------------------------------------------- */

.mitte-seite { min-height: 100vh; display: flex; align-items: center; justify-content: center;
               padding: 2rem 1rem; }
.anmeldung { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: 1.6rem; }
.anmeldung form { display: grid; gap: .85rem; background: var(--karte);
                  border: 1px solid var(--rahmen); border-radius: 10px; padding: 1.3rem; }
.anmeldung label { display: grid; gap: .25rem; font-size: .8rem; color: var(--leise); }
.anmeldung input { font: inherit; min-height: 2.6rem; padding: 0 .7rem;
                   border: 1px solid var(--rahmen-stark); border-radius: var(--radius-klein);
                   background: var(--karte); color: var(--text); }
.anmeldung input:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.anmeldung input[name="code"] { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .14em; }

/* --- Warnbalken ---------------------------------------------------------- */

.balken-warnung { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem;
                  border: 1px solid var(--problem); border-radius: var(--radius);
                  background: var(--karte); margin-bottom: 1rem; font-size: .875rem; }

/* --- Schmale Fenster ----------------------------------------------------- */

@media (min-width: 46rem) {
  .inventar { grid-template-columns: 11rem 1fr; }
  .inventar dt { margin-top: .2rem; }
}

@media (max-width: 60rem) {
  .geruest { grid-template-columns: 1fr; }
  .spalte { flex-direction: row; align-items: center; gap: 1rem; overflow-x: auto;
            border-right: none; border-bottom: 1px solid var(--rahmen); padding: .7rem .9rem; }
  .spalte .nav { flex-direction: row; gap: .2rem; }
  .spalte-fuss { margin-top: 0; padding-top: 0; border-top: none; white-space: nowrap; }
  .spalte-fuss .verbergen-schmal { display: none; }
  .inhalt { padding: 1.1rem 1rem 3rem; }
  .nav a span:not(.zahl):not(.nebenzahl) { display: none; }
  .nav a { padding: .5rem; }
}