/* Hilti-Rot als Leitfarbe (#D2051E), Anthrazit als Traeger, IBM Plex als
   Schrift — technisch, gut lesbar, mit gleichbreiten Ziffern fuer Messwerte.
   Eine eigene kleine Datei; das Werkzeug soll nichts nachladen, was es nicht
   braucht.

   Wichtig zur Farbfuehrung: Rot ist hier Marken- *und* Signalfarbe. Damit ein
   roter Balken in der Diagnose noch etwas bedeutet, bleiben alle Datenreihen
   in den Diagrammen neutral (siehe diagramme.js) — Rot erscheint dort nur,
   wo etwas nicht stimmt. */

:root {
  --rot-600:  #D2051E;   /* Leitfarbe */
  --rot-700:  #A80418;   /* gedrueckt, Hover */
  --rot-800:  #7E0312;
  --rot-050:  #FDECEE;
  --rot-100:  #F8D3D8;

  --anthrazit-900: #1C1F22;
  --anthrazit-800: #24282C;
  --anthrazit-700: #33383D;
  --anthrazit-300: #A8B0B6;

  --text:       #1A1D20;
  --text-leise: #5E666D;
  --rand:       #DCE0E3;
  --flaeche:    #FFFFFF;
  --grund:      #F4F6F7;

  --gruen:     #1E7A4C;
  --gruen-050: #E5F2EB;
  --gelb:      #A96A00;
  --gelb-050:  #FBF1E2;

  /* Armierungsstahl bekommt Stahlblau statt Rostbraun: Rot ist vergeben, und
     eine zweite warme Farbe daneben liest sich wie eine zweite Warnung. */
  --eisen:     #35617D;
  --eisen-050: #E8EFF4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               sans-serif;
  background: var(--grund);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.zahl, td.zahl, th.zahl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
a { color: var(--rot-700); }
a:hover { color: var(--rot-800); }
.leise { color: var(--text-leise); }
small.leise { font-size: 12.5px; }

/* ── Rahmen ─────────────────────────────────────────────────────────────── */
header.kopf {
  background: var(--rot-600); color: #fff; padding: 13px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
header.kopf .titel { display: flex; align-items: baseline; gap: 12px; }
header.kopf .name {
  font-weight: 600; font-size: 18px; letter-spacing: .2px;
}
header.kopf .was {
  font-size: 12.5px; color: rgba(255,255,255,.82); letter-spacing: .2px;
}
header.kopf .wer { font-size: 13px; color: rgba(255,255,255,.82); }
header.kopf .kopf-rechts { display: flex; align-items: center; gap: 14px; }
header.kopf button.bereichwechsel {
  background: none; border: 1px solid rgba(255,255,255,.45); color: #fff;
  border-radius: 4px; padding: 5px 12px; font: inherit; font-size: 13px;
  cursor: pointer;
}
header.kopf button.bereichwechsel:hover { background: rgba(255,255,255,.16); }

nav.ansichten { background: var(--anthrazit-900); }
nav.ansichten .ansichten-innen {
  max-width: 1320px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 2px; align-items: stretch; flex-wrap: wrap;
}
nav.ansichten .tab {
  color: var(--anthrazit-300); text-decoration: none; font-size: 14px;
  padding: 10px 16px; border-bottom: 3px solid transparent;
}
nav.ansichten .tab:hover { background: rgba(255,255,255,.08); color: #fff; }
nav.ansichten .tab.an {
  background: var(--grund); color: var(--text); font-weight: 600;
  border-bottom-color: var(--grund);
}
nav.ansichten .tab.rechts { margin-left: auto; }

main { max-width: 1320px; margin: 0 auto; padding: 20px 20px 60px; }
main.schmal { max-width: 620px; padding-top: 56px; }

.seitenkopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
h1 { font-size: 22px; font-weight: 600; margin-bottom: 3px; }
h2 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.unterzeile { color: var(--text-leise); font-size: 13px; }

.fuss { margin-top: 40px; font-size: 12px; color: var(--text-leise); }

/* ── Meldungen ──────────────────────────────────────────────────────────── */
.meldung {
  padding: 11px 14px; border-radius: 5px; margin-bottom: 14px; font-size: 14px;
  border: 1px solid var(--rand); background: var(--flaeche);
  border-left: 3px solid var(--text-leise);
}
.meldung-erfolg  { background: var(--gruen-050); border-color: #C4DED2;
                   border-left-color: var(--gruen); }
.meldung-fehler  { background: var(--rot-050);   border-color: var(--rot-100);
                   border-left-color: var(--rot-600); }
.meldung-hinweis { background: var(--eisen-050); border-color: #CBDCE7;
                   border-left-color: var(--eisen); }

/* ── Filterleiste ───────────────────────────────────────────────────────── */
.filter-schalter {
  background: var(--flaeche); border: 1px solid var(--rand); color: var(--text);
  border-radius: 5px; padding: 7px 14px; font: inherit; font-size: 14px;
  cursor: pointer; white-space: nowrap;
}
.filter-schalter:hover { border-color: var(--rot-600); color: var(--rot-700); }

.filter {
  display: none; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 6px; padding: 16px; margin-bottom: 18px;
}
.filter.offen { display: block; }
.filter-felder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
}
.feld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.feld > span { color: var(--text-leise); }
.feld select, .feld input {
  font: inherit; font-size: 13.5px; padding: 5px 7px;
  border: 1px solid var(--rand); border-radius: 4px; background: #fff;
  color: var(--text);
}
.feld select[multiple] { min-height: 32px; max-height: 118px; }
.feld select:focus, .feld input:focus {
  outline: 2px solid var(--rot-600); outline-offset: 1px;
  border-color: var(--rot-600);
}

.regeln {
  border: 1px solid var(--rand); border-radius: 5px; padding: 12px 14px;
  margin-top: 14px;
}
.regeln legend { font-size: 12.5px; padding: 0 6px; font-weight: 600; }
.regeln legend .leise { font-weight: 400; }
.regel {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  margin: 3px 16px 3px 0; cursor: pointer;
}
.regel input { accent-color: var(--rot-600); }
.regel .kosten {
  font-size: 11.5px; color: var(--eisen); font-variant-numeric: tabular-nums;
  background: var(--eisen-050); border-radius: 3px; padding: 1px 5px;
}
.schwelle { margin-top: 10px; max-width: 380px; }
.schwelle input[type="range"] { padding: 0; accent-color: var(--rot-600); }

.filter-knoepfe { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.knopf {
  background: var(--rot-600); color: #fff; border: none; border-radius: 4px;
  padding: 8px 18px; font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.knopf:hover { background: var(--rot-700); color: #fff; }
.knopf.leise-knopf {
  background: none; color: var(--text-leise); border: 1px solid var(--rand);
}
.knopf.leise-knopf:hover { background: var(--grund); color: var(--text); }

/* ── Kacheln ────────────────────────────────────────────────────────────── */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.kachel {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px;
  padding: 14px 16px; border-top: 3px solid var(--anthrazit-900);
}
.kachel .wert {
  font-size: 25px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kachel .was { font-size: 12.5px; color: var(--text-leise); margin-top: 3px; }
.kachel.eisen { border-top-color: var(--eisen); }
.kachel.eisen .wert { color: var(--eisen); }

/* ── Karten und Diagramme ───────────────────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px;
  padding: 16px; margin-bottom: 18px;
}
.karte > .erklaerung {
  font-size: 13px; color: var(--text-leise); margin-bottom: 12px; max-width: 78ch;
}
.diagramm { width: 100%; min-height: 320px; }
.spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px; align-items: start;
}

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
thead th {
  color: var(--text-leise); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--anthrazit-900);
}
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--grund); }
tr.aus td { color: var(--text-leise); background: #FAFBFB; }
tr.aus td:first-child { border-left: 3px solid var(--rand); }
tr.markiert td { background: var(--rot-050); }
tr.markiert td:first-child { border-left: 3px solid var(--rot-600); }
.platz { display: inline-block; min-width: 20px; font-weight: 600; }

/* ── Ampel ──────────────────────────────────────────────────────────────── */
.ampel {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 600; border-radius: 3px; padding: 3px 10px; white-space: nowrap;
}
.ampel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.ampel-ok { background: var(--gruen-050); color: var(--gruen); }
.ampel-ok::before { background: var(--gruen); }
.ampel-kritisch { background: var(--rot-600); color: #fff; }
.ampel-kritisch::before { background: #fff; }

.befund { font-size: 12.5px; color: var(--rot-800); margin-top: 4px; display: block; }

/* ── Protokoll ──────────────────────────────────────────────────────────── */
.protokoll { list-style: none; font-size: 13.5px; }
.protokoll li {
  display: grid; grid-template-columns: 88px 62px 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--rand); align-items: baseline;
}
.protokoll li:last-child { border-bottom: none; }
.protokoll .art {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 3px; padding: 2px 7px; text-align: center; font-weight: 600;
}
.art-gelesen    { background: var(--eisen-050); color: var(--eisen); }
.art-korrigiert { background: var(--gruen-050); color: var(--gruen); }
.art-hinweis    { background: #EFF1F3;          color: var(--text-leise); }
.art-warnung    { background: var(--gelb-050);  color: var(--gelb); }
.art-verworfen  { background: var(--rot-050);   color: var(--rot-700); }
.protokoll .anzahl {
  font-variant-numeric: tabular-nums; text-align: right; font-weight: 600;
}

/* ── Auswahlzeile über einer Ansicht ────────────────────────────────────── */
.auswahlzeile {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-bottom: 16px;
}
.auswahlzeile .feld { min-width: 200px; }
.auswahlzeile select, .auswahlzeile input { font-size: 13.5px; }

.leer {
  background: var(--flaeche); border: 1px dashed var(--rand); border-radius: 6px;
  padding: 34px; text-align: center; color: var(--text-leise);
}

@media (max-width: 760px) {
  .seitenkopf { flex-direction: column; }
  nav.ansichten .tab { padding: 9px 11px; font-size: 13px; }
  .spalten { grid-template-columns: 1fr; }
}