/* ===================================================================
   app.css — Layout und Bausteine
   Keine festen Farbwerte. Alles kommt aus tokens.css.
   =================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Kopfleiste --------------------------------------------------- */
.bar {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-4); height: var(--bar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.mark { font: 600 13px var(--mono); letter-spacing: .14em; white-space: nowrap; }
.mark span { color: var(--muted); margin-left: .5ch; }
.bar nav { display: flex; gap: var(--sp-4); flex: 1; }
.bar nav a { color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-1) 0; }
.bar nav a.on, .bar nav a:hover { color: var(--text-strong); }
.who { color: var(--muted); font-size: var(--fs-sm);
       display: flex; align-items: center; gap: var(--sp-3); }

.theme-pick {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 400 var(--fs-xs) var(--sans); padding: var(--sp-1) var(--sp-2);
}

main { padding: var(--sp-5) var(--sp-4) 60px; max-width: 1360px; margin: 0 auto; }

/* --- Kopfbereich -------------------------------------------------- */
.head h1 { margin: 0 0 2px; font-size: var(--fs-xl); font-weight: 600;
           color: var(--text-strong); }
.head .sub, .login .sub { color: var(--muted); margin: 0; font-size: var(--fs-sm); }

/* --- Kennzahlen --------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; margin: var(--sp-5) 0 var(--sp-4);
  background: var(--line); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stats div { background: var(--surface); padding: var(--sp-3) var(--sp-4); }
.stats b { display: block; font: 500 20px var(--mono); color: var(--text-strong);
           font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: var(--fs-xs); letter-spacing: .04em; }
.stats .warn b { color: var(--warn); }

/* --- Filter ------------------------------------------------------- */
.facets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.facets a {
  font: 500 var(--fs-sm) var(--sans); color: var(--muted);
  padding: 5px 11px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius);
}
.facets a:hover { color: var(--text-strong); }
.facets a.on { color: var(--btn-fg); background: var(--btn-bg);
               border-color: var(--btn-bg); }
.facets em { font-style: normal; font-family: var(--mono);
             margin-left: 7px; opacity: .65; }

/* --- Tabelle ------------------------------------------------------ */
.rows { width: 100%; border-collapse: collapse;
        border: 1px solid var(--line); background: var(--surface);
        box-shadow: var(--shadow); }
.rows th {
  text-align: left; font: 500 var(--fs-xs) var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: 9px var(--sp-3); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.rows td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line);
           vertical-align: middle; }
.rows tbody tr:hover { background: var(--surface-2); }
.rows .r { text-align: right; }

.mono { font-family: var(--mono); font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.neg { color: var(--neg); }
.pos { color: var(--pos); }

.inst b { font-weight: 600; color: var(--text-strong); }
.dir { font: 500 10.5px var(--sans); letter-spacing: .05em;
       text-transform: uppercase; margin-left: 7px; }
.dir.long  { color: var(--pos); }
.dir.short { color: var(--neg); }
.setup { display: block; color: var(--muted); font-size: var(--fs-sm); }

.finding { max-width: 620px; }
.field {
  display: inline-block; font: 500 var(--fs-xs) var(--mono);
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1px 6px; margin-right: var(--sp-2);
}

/* Schweregrad als Kante links statt als Flaeche: die Zeile bleibt
   lesbar, die Dringlichkeit trotzdem sichtbar. */
.sev-warn  td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.sev-error td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
.sev-info  td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.act button {
  font: 500 var(--fs-sm) var(--sans); color: var(--muted);
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-1) 10px; cursor: pointer;
}
.act button:hover { color: var(--pos); border-color: var(--pos); }

/* --- Signatur: Timeframe-Wirbelsaeule ----------------------------- */
.spine { display: inline-flex; gap: 2px; }
.spine-cell {
  width: 15px; height: 22px; border-radius: 1px;
  font: 500 9px/22px var(--mono); text-align: center;
  font-style: normal; border: 1px solid var(--line);
  background: var(--spine-0-bg); color: var(--spine-0-fg);
}
.spine-cell.d1 { background: var(--spine-1-bg); color: var(--spine-1-fg); }
.spine-cell.d2 { background: var(--spine-2-bg); color: var(--spine-2-fg); }
.spine-cell.d3 { background: var(--spine-3-bg); color: var(--spine-3-fg);
                 border-color: var(--spine-3-bg); }

/* --- Anmeldung ---------------------------------------------------- */
.login { max-width: 320px; margin: 15vh auto; }
.login h1 { font: 600 15px var(--mono); letter-spacing: .14em;
            margin: 0 0 2px; color: var(--text-strong); }
.login form { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.login label { display: grid; gap: 5px; font-size: var(--fs-sm); color: var(--muted); }
.login input {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); padding: 9px 11px; border-radius: var(--radius);
  font: 400 var(--fs) var(--sans);
}
.login button {
  background: var(--btn-bg); color: var(--btn-fg); border: 0;
  padding: 10px; border-radius: var(--radius); cursor: pointer;
  font: 600 var(--fs-sm) var(--sans);
}
.err { color: var(--neg); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }

.empty { text-align: center; padding: 70px var(--sp-4); color: var(--muted); }
.empty h2 { color: var(--text-strong); font-size: var(--fs-lg);
            font-weight: 600; margin: 0 0 6px; }
.empty a { color: var(--accent); }

/* ===================================================================
   Mobil: die Tabelle wird zur Kartenliste.
   Spalten auszublenden wuerde genau das verstecken, wofuer man auf dem
   Handy nachschaut. Stattdessen bekommt jede Zeile eine Karte, und die
   Spaltennamen stehen als Label davor.
   =================================================================== */
@media (max-width: 760px) {
  .bar { gap: var(--sp-3); padding: 0 var(--sp-3); }
  .bar nav { gap: var(--sp-3); }
  .who .name { display: none; }

  .rows, .rows tbody, .rows tr, .rows td { display: block; width: 100%; }
  .rows thead { display: none; }
  .rows { border: 0; background: transparent; box-shadow: none; }
  .rows tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: var(--sp-2);
    padding: var(--sp-3);
  }
  .rows td { border: 0; padding: 3px 0; }
  .rows td:first-child { box-shadow: none !important; }
  .rows tr.sev-warn  { border-left: 3px solid var(--warn); }
  .rows tr.sev-error { border-left: 3px solid var(--neg); }
  .rows tr.sev-info  { border-left: 3px solid var(--accent); }

  .rows td[data-label]:not(:empty)::before {
    content: attr(data-label) " ";
    color: var(--muted); font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .05em;
    margin-right: var(--sp-2);
  }
  .rows td.r { text-align: left; }
  .rows .act { margin-top: var(--sp-2); }
  .rows .act button { width: 100%; padding: var(--sp-2); }
  .finding { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important;
      scroll-behavior: auto !important; }
}