/*
 * Gebaeude-Cockpit.
 * -------------------------------------------------------------------------
 * Der Anspruch dieser Seite ist ein anderer als der einer Aufnahmemaske: sie
 * soll aussehen wie eine technische Gebaeudeakte und nicht wie ein
 * Web-Dashboard. Daraus folgen drei Entscheidungen, die alles Weitere
 * bestimmen:
 *
 *  1. **Ein dunkler Kopf, eine helle Arbeitsflaeche.** Der Kopf traegt die
 *     Identitaet des Gebaeudes und die beiden Kennzahlen; darunter beginnt
 *     die Arbeit. Keine Farbe wandert von oben nach unten durch.
 *  2. **Feine Linien statt Schatten.** Ein Schatten ist eine Behauptung ueber
 *     Raum; auf einem technischen Blatt sind Linien ehrlicher. Genau eine
 *     Grenze, 1 px, in der vorhandenen Linienfarbe.
 *  3. **Zahlen gross, Farbe sparsam.** Rot und Gruen stehen an den wenigen
 *     Stellen, an denen sie eine Auskunft sind — nie flaechig. Ein
 *     durchgehend rotes Geschoss saehe aus wie ein Alarm, obwohl es nur
 *     heisst: hier war noch niemand.
 *
 * Statusfarben tragen **nie allein** die Auskunft. Zu jeder Farbe gehoert ein
 * Zeichen und ein Wort — Kap. 25 des Auftrags, und dieselbe Regel wie beim
 * Raumstempel im Grundriss.
 */

.cockpit {
  display: grid;
  gap: var(--abstand);
}

/*
 * Das Cockpit darf breiter sein als eine Formularseite.
 * -------------------------------------------------------------------------
 * Die 900 px des Hauptbereichs sind fuer Eingabefelder gewaehlt: eine Zeile,
 * die laenger ist, liest sich schlecht. Eine Uebersicht hat das umgekehrte
 * Problem — zwei Karten nebeneinander brauchen Platz, sonst bricht in jeder
 * Zeile eine Zahl um.
 *
 * Die Breite wird deshalb nur fuer **diese** Ansicht angehoben, ueber die
 * Anwesenheit des Cockpits im Ansichtsbereich. Keine andere Seite merkt
 * davon etwas, und es gibt keinen zweiten Ort, an dem eine Breite steht.
 */
@media (min-width: 1000px) {
  main:has(.cockpit) {
    max-width: 1240px;
  }
}

/* ---------------------------------------------------------------- *
 * Kopf
 * ---------------------------------------------------------------- */

.cockpit-kopf {
  display: grid;
  gap: 20px;
  padding: 22px 20px 24px;
  border-radius: var(--radius);
  /* Feste Farben, nicht die Themenvariablen: der Kopf ist die Marke und sieht
     im hellen wie im dunklen Modus gleich aus — wie ein Deckblatt. */
  background: #14293a;
  color: #eef4f8;
}

.cockpit-kopf .kopf-marke {
  margin: 0 0 6px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fb2cc;
}

.cockpit-kopf h1 {
  margin: 0;
  font-size: clamp(1.35rem, 5.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.cockpit-kopf .kopf-unter {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: #c3d6e4;
}

.cockpit-kopf .kopf-meta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: #a8c2d4;
}

.kopf-rechts {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
}

.kennzahl {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.kennzahl-name {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fb2cc;
}
.kennzahl-wert {
  margin: 4px 0 0;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.kennzahl-wert.klein { font-size: 1.35rem; font-weight: 600; }
.kennzahl-unter {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #b7cede;
}

/* Die Einstufung der Datenqualitaet: Farbe **und** Zeichen, nie Farbe
   allein. Das Zeichen steht im Text und kommt aus dem Programm. */
.kennzahl.q-gut .kennzahl-wert { color: #7fd3a4; }
.kennzahl.q-pruefbedarf .kennzahl-wert { color: #f0c774; }
.kennzahl.q-kritisch .kennzahl-wert { color: #f29d96; }

.standzaehler {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.standzaehler li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #cfe0ec;
}
.standzaehler b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.standzaehler .zeichen { opacity: 0.9; }
.standzaehler li.st-ok { border-color: rgba(124, 211, 164, 0.5); }
.standzaehler li.st-offen { border-color: rgba(242, 157, 150, 0.5); }
.standzaehler li.st-vorbehalt { border-color: rgba(240, 199, 116, 0.5); }

.fortschrittsbalken {
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.fortschrittsbalken i {
  display: block;
  height: 100%;
  background: #7fd3a4;
  /* Nur beim ersten Aufbau, und kurz. Ein Balken, der dauernd wandert, ist
     eine Unruhe ohne Aussage. */
  transition: width 220ms ease-out;
}

/* ---------------------------------------------------------------- *
 * Ansichtsschalter
 * ---------------------------------------------------------------- */

.cockpit-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.sichtwahl {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
}
.sichtknopf {
  min-height: var(--treffer);
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-schwach);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.sichtknopf.an {
  background: var(--akzent);
  color: var(--flaeche);
  font-weight: 600;
}
.filterknopf { min-height: var(--treffer); }

/* ---------------------------------------------------------------- *
 * Karten
 * ---------------------------------------------------------------- */

.cockpit-raster {
  display: grid;
  gap: var(--abstand);
  /* Karten enden dort, wo ihr Inhalt endet. Auf gleiche Hoehe gestreckt
     entstuende unter der kuerzeren ein leeres Feld, das aussaehe, als fehle
     dort etwas. */
  align-items: start;
}

.cockpit-karte {
  padding: 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.cockpit-karte > h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-schwach);
}

/* ---------------------------------------------------------------- *
 * Geschossstapel
 * ---------------------------------------------------------------- */

.geschossstapel { display: grid; gap: 14px; }

.geschoss {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}
.geschoss:last-child { border-bottom: 0; padding-bottom: 0; }

.geschoss-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: var(--treffer);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.geschoss-name {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
}
.geschoss-zahl,
.geschoss-prozent { font-variant-numeric: tabular-nums; }
.geschoss-zahl { color: var(--ink-schwach); }
.geschoss-prozent { min-width: 3.4em; text-align: right; font-weight: 600; }

/* Die Statusleiste. Segmente statt einer Volleinfaerbung: an ihr ist
   abzulesen, **wie viele** Raeume welchen Stand haben, nicht nur ob es
   irgendwo klemmt. */
.geschoss-balken {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--grund);
}
.geschoss-balken .seg { display: block; height: 100%; }
.seg.st-ok { background: var(--ok); }
.seg.st-offen { background: var(--fehler); }
.seg.st-vorbehalt { background: var(--warn); }
.seg.st-neutral { background: var(--linie); }

.geschoss-unter {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-schwach);
}

.raumkette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.raumchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.raumchip .chip-zeichen { font-weight: 700; }
/* Ein farbiger Streifen links statt einer gefuellten Flaeche: vierzig
   knallgruene Kaestchen waeren eine Wand und keine Auskunft. */
.raumchip.st-ok { border-left: 3px solid var(--ok); }
.raumchip.st-ok .chip-zeichen { color: var(--ok); }
.raumchip.st-offen { border-left: 3px solid var(--fehler); }
.raumchip.st-offen .chip-zeichen { color: var(--fehler); }
.raumchip.st-vorbehalt { border-left: 3px solid var(--warn); }
.raumchip.st-vorbehalt .chip-zeichen { color: var(--warn); }
.raumchip.st-neutral { border-left: 3px solid var(--ink-schwach); }

.planwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------------------------------------------------------------- *
 * Offene Erfassung
 * ---------------------------------------------------------------- */

.erfassungsliste { display: grid; }

.erfassungszeile {
  display: grid;
  grid-template-columns: 1.6em 1fr 4.5em auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--treffer);
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.erfassungszeile:last-child { border-bottom: 0; }
.erfassungszeile[disabled] { cursor: default; opacity: 0.72; }

.ez-zeichen { font-weight: 700; color: var(--fehler); }
.erfassungszeile.fertig .ez-zeichen,
.erfassungszeile[disabled] .ez-zeichen { color: var(--ok); }
.ez-titel { min-width: 0; }
.ez-balken {
  height: 6px;
  border-radius: 999px;
  background: var(--grund);
  overflow: hidden;
}
.ez-balken i {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width 220ms ease-out;
}
.ez-balken.ohne {
  background: none;
  border-top: 1px dashed var(--linie);
  border-radius: 0;
  height: 0;
  align-self: center;
}
.ez-wert {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-schwach);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- *
 * Anlagentechnik
 * ---------------------------------------------------------------- */

.anlagenliste { display: grid; }

.anlagenzeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--treffer);
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.anlagenzeile:last-of-type { border-bottom: 0; }

.anlage-code {
  padding: 3px 8px;
  border: 1px solid var(--linie);
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.anlage-mitte { display: grid; min-width: 0; }
.anlage-name { font-weight: 600; }
.anlage-reichweite { font-size: 0.82rem; color: var(--ink-schwach); }
.anlage-stand {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.84rem;
  white-space: nowrap;
}
.anlage-stand.st-ok { color: var(--ok); }
.anlage-stand.st-offen { color: var(--fehler); }
.anlage-stand .zeichen { font-weight: 700; }

/* Das kleine Versorgungsschema. Ausdruecklich kein R&I-Schema: ein Strich je
   Anlage zu dem, was sie versorgt, mehr nicht. */
.versorgungsschema {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-top: 14px;
}
.versorgungsschema .vs-quelle {
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink);
}
.versorgungsschema .vs-ziel {
  font-size: 10px;
  fill: var(--ink-schwach);
}
.versorgungsschema .vs-pfeil {
  fill: none;
  stroke: var(--linie);
  stroke-width: 1.5;
}
.versorgungsschema .vs-spitze { fill: var(--linie); }

/* ---------------------------------------------------------------- *
 * Gebaeudehuelle
 * ---------------------------------------------------------------- */

.huelle { display: grid; gap: 14px; }

/* Die Windrose. Ein Quadrat fuer das Haus und vier Felder aussen — sie sagt
   etwas ueber Himmelsrichtungen und nichts ueber die Form des Gebaeudes.
   Die steht im Grundriss. */
.windrose {
  width: 100%;
  max-width: 190px;
  height: auto;
  margin: 0 auto;
}
.windrose .wr-haus {
  fill: none;
  stroke: var(--linie);
  stroke-width: 1.4;
}
.windrose .wr-haustext { font-size: 8px; fill: var(--ink-schwach); }
.windrose .wr-label { font-size: 11px; font-weight: 700; }
.windrose .wr-sektor rect { stroke-width: 1.4; }
.windrose .wr-sektor.st-ok rect { fill: color-mix(in srgb, var(--ok) 16%, transparent); stroke: var(--ok); }
.windrose .wr-sektor.st-ok .wr-label { fill: var(--ok); }
.windrose .wr-sektor.st-offen rect { fill: color-mix(in srgb, var(--fehler) 14%, transparent); stroke: var(--fehler); }
.windrose .wr-sektor.st-offen .wr-label { fill: var(--fehler); }
.windrose .wr-sektor.st-neutral rect { fill: none; stroke: var(--ink-schwach); stroke-dasharray: 3 3; }
.windrose .wr-sektor.st-neutral .wr-label { fill: var(--ink-schwach); }
.windrose .wr-sektor.st-leer rect { fill: none; stroke: var(--linie); stroke-dasharray: 2 4; }
.windrose .wr-sektor.st-leer .wr-label { fill: var(--linie); }

.fassadenliste { display: grid; }
.fassadenzeile {
  display: grid;
  grid-template-columns: 1fr 4.5em auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--linie);
}
.fassadenzeile:last-child { border-bottom: 0; }
.fa-name { display: grid; min-width: 0; }
.fa-name .leise { font-size: 0.8rem; }
.fa-balken {
  height: 6px;
  border-radius: 999px;
  background: var(--grund);
  overflow: hidden;
}
.fa-balken i { display: block; height: 100%; background: var(--ok); }
.fa-stand {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fa-stand.st-ok { color: var(--ok); }
.fa-stand.st-offen { color: var(--fehler); }
.fa-stand.st-neutral { color: var(--ink-schwach); }
.fa-zahlen { grid-column: 1 / -1; font-size: 0.78rem; }

/* ---------------------------------------------------------------- *
 * Wichtigste offene Punkte
 * ---------------------------------------------------------------- */

.prioritaeten { display: grid; }

.priozeile {
  display: grid;
  grid-template-columns: 1.6em auto 1fr;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: var(--treffer);
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-left: 4px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.priozeile:last-child { border-bottom: 0; }
.priozeile .prio-zeichen { font-weight: 700; text-align: center; }
.priozeile .prio-titel { font-weight: 600; white-space: nowrap; }
.priozeile .prio-text { color: var(--ink-schwach); font-size: 0.88rem; }
.priozeile.st-kritisch { border-left-color: var(--fehler); }
.priozeile.st-kritisch .prio-zeichen { color: var(--fehler); }
.priozeile.st-warnung { border-left-color: var(--warn); }
.priozeile.st-warnung .prio-zeichen { color: var(--warn); }
.priozeile.st-hinweis { border-left-color: var(--linie); }
.priozeile.st-hinweis .prio-zeichen { color: var(--ink-schwach); }

/* ---------------------------------------------------------------- *
 * Drill-down
 * ---------------------------------------------------------------- */

.drilldown {
  width: min(560px, 94vw);
  max-height: 82vh;
}
.drilldown-liste {
  display: grid;
  gap: 2px;
  max-height: 56vh;
  overflow-y: auto;
}
.nach-geschoss {
  margin: 14px 0 4px;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-schwach);
}

.cockpit-fuss { margin-top: 4px; }

/* ---------------------------------------------------------------- *
 * Zwei Spalten ab Querformat
 * ---------------------------------------------------------------- *
 * Der Umbruch haengt an der Breite und nicht an einem Geraet: ein Tablet im
 * Querformat und ein Schreibtischbildschirm haben dieselbe Frage zu
 * beantworten — passen zwei Karten nebeneinander, ohne dass eine Zahl
 * umbricht? Ab 860 px passen sie. */
@media (min-width: 860px) {
  .cockpit-kopf {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
  .cockpit-raster { grid-template-columns: 1fr 1fr; }
  .cockpit-karte.breit { grid-column: 1 / -1; }
  .priozeile { grid-template-columns: 1.6em 11em 1fr; }
}

@media (min-width: 1200px) {
  .cockpit-kopf { padding: 28px 28px 30px; }
  .kennzahl-wert { font-size: 2.9rem; }
}

/* ---------------------------------------------------------------- *
 * Druck
 * ---------------------------------------------------------------- *
 * Vorbereitung fuer das spaetere Blatt „Bestandsaufnahme — Statusuebersicht".
 * Noch kein Berichtgenerator: nur die Zusage, dass diese Seite auf Papier
 * nicht zerfaellt. Weisser Grund, keine Bedienelemente, keine Karte, die
 * mitten im Satz umbricht. */
@media print {
  .banner,
  .fuss,
  #pfad,
  .cockpit-schalter,
  .cockpit-fuss,
  .planwahl { display: none !important; }

  .cockpit-kopf {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
  }
  .cockpit-kopf h1,
  .cockpit-kopf .kennzahl-wert { color: #000000; }
  .cockpit-kopf .kopf-marke,
  .cockpit-kopf .kopf-unter,
  .cockpit-kopf .kopf-meta,
  .cockpit-kopf .kennzahl-name,
  .cockpit-kopf .kennzahl-unter { color: #333333; }
  .kennzahl,
  .standzaehler li { border-color: #999999; background: none; }
  .fortschrittsbalken { background: #dddddd; }
  .fortschrittsbalken i { background: #555555; }

  .cockpit-karte {
    border-color: #999999;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cockpit-raster { grid-template-columns: 1fr 1fr; }
  .geschoss, .anlagenzeile, .fassadenzeile, .priozeile { break-inside: avoid; }
  .drilldown-liste { max-height: none; overflow: visible; }
}

/* Wer weniger Bewegung moechte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .fortschrittsbalken i,
  .ez-balken i { transition: none; }
}