/* Ansicht der Konstruktionsleitung: "Überblick" (ansicht_chef.js). Präfix uk-.
 * Nur Design-Variablen aus stil.css; Ampelfarben nur für Marken (Balken,
 * Symbole), Text immer in Tinte. */

/* ---------- Seite ---------- */
.uk { flex: 1; min-height: 0; overflow: auto; background: var(--grund); }
.uk-seite { display: flex; flex-direction: column; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 20px 24px 40px; }
.uk-gedaempft { color: var(--tinte-2); font-weight: 400; }

.uk-kopf { display: flex; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.uk-kopf__titel { min-width: 0; }
.uk-kopf__titel h1 { margin: 0; }
.uk-kopf__titel p { margin: 2px 0 0; color: var(--tinte-2); }
.uk-kopf__werkzeug { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.uk-stand { display: flex; flex-direction: column; align-items: flex-end; padding-left: 12px; border-left: 1px solid var(--linie); white-space: nowrap; }
.uk-stand .klein { color: var(--tinte-2); font-weight: 400; }

.uk-inhalt { display: flex; flex-direction: column; gap: 16px; transition: opacity .15s; }
.uk-inhalt.is-laedt { opacity: .5; pointer-events: none; }

/* ---------- Karten ---------- */
.uk-karte { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 18px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.uk-karte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.uk-karte__titel { min-width: 0; flex: 1 1 320px; }
.uk-karte__titel h2 { margin: 0; }
.uk-karte__titel p { margin: 2px 0 0; max-width: 92ch; color: var(--tinte-2); font-weight: 400; }
.uk-karte__info { padding-top: 2px; white-space: nowrap; }

/* ---------- Kennzahlen ---------- */
/* Sechs Kacheln: in einer Reihe, sonst 3 + 3 oder 2 + 2 + 2 - nie 4 + 2. */
.uk-kennzahlen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.uk-zahl { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px 12px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-m); }
.uk-zahl__label { color: var(--tinte-2); }
.uk-zahl__wert { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }
.uk-zahl__unter { margin-top: auto; color: var(--tinte-2); font-weight: 400; }

/* Ein Balken aus Anteilen (Teil vom Ganzen): 2 px Lücke in Flächenfarbe, außen leicht gerundet. */
.uk-anteil { display: flex; gap: 2px; height: 10px; margin: 6px 0 4px; border-radius: 3px; overflow: hidden; }
.uk-anteil__teil { display: block; min-width: 3px; height: 100%; }
.uk-anteil__teil.is-gruen { background: var(--gruen); }
.uk-anteil__teil.is-gelb { background: var(--gelb); }
.uk-anteil__teil.is-rot { background: var(--rot); }

.uk-legende-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.uk-legende-liste li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 2.6em; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; }
.uk-legende-liste .text-stark { font-size: 13px; line-height: 18px; text-align: right; }
.uk-legende-liste .uk-gedaempft { text-align: right; }

.uk-offen { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.uk-offen__eintrag { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: 8px; align-items: center; }
.uk-offen__eintrag .uk-zahl__wert { font-size: 24px; line-height: 28px; }
.uk-offen__eintrag .klein { color: var(--tinte-2); font-weight: 400; }

/* ---------- Schätzung der Zeitersparnis ---------- */
.uk-schaetzung { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; background: var(--flaeche);
  border: 1px dashed var(--linie-stark); border-radius: var(--radius-m); }
.uk-schaetzung__marke { flex: none; padding: 1px 8px; border-radius: var(--radius-voll); background: var(--flaeche-grau); color: var(--tinte-2); }
.uk-schaetzung > p { flex: 1 1 420px; margin: 0; }
.uk-schaetzung__annahme { white-space: nowrap; }
.uk-schaetzung__eingabe { width: 64px; height: var(--hoehe-knopf-s); margin: 0 4px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; }
.uk-schaetzung__hinweis { flex: none; margin-left: auto; color: var(--tinte-2); font-weight: 400; }

/* ---------- Verlauf und Engpässe nebeneinander ---------- */
.uk-raster { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: 16px; align-items: start; }

/* ---------- Verlauf (eigenes SVG) ---------- */
.uk-legende { list-style: none; margin: 0; padding: 2px 0 0; display: flex; gap: 14px; }
.uk-legende li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinte); }
.uk-diagramm { width: 100%; min-height: 236px; }
.uk-diagramm__svg { display: block; overflow: visible; }
.uk-gitter { stroke: var(--linie); stroke-width: 1; shape-rendering: crispEdges; }
.uk-gitter.is-grundlinie { stroke: var(--linie-stark); }
.uk-achse { fill: var(--tinte-2); font-family: var(--font-sans); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.uk-kappe { fill: var(--tinte); font-family: var(--font-sans); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uk-saeule.is-gruen { fill: var(--gruen); }
.uk-saeule.is-gelb { fill: var(--gelb); }
.uk-saeule.is-rot { fill: var(--rot); }
.uk-spalte { cursor: default; outline: none; }
.uk-treffer { fill: transparent; }
.uk-spalte:hover .uk-treffer { fill: var(--grund); }
.uk-spalte:focus-visible .uk-treffer { fill: var(--karmin-hell); stroke: var(--karmin); stroke-width: 1.5; }
.uk-fussnoten { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--tinte-2); font-weight: 400; }
.uk-fussnoten:empty { display: none; }
.uk-tabellenansicht > summary { display: inline-block; cursor: pointer; color: var(--tinte-2); padding: 2px 4px; margin-left: -4px; border-radius: var(--radius-s); }
.uk-tabellenansicht > summary:hover { color: var(--tinte); background: var(--flaeche-grau); }
.uk-tabellenansicht[open] > summary { margin-bottom: 6px; }
.uk-tabellenansicht .uk-tabelle { max-width: 560px; }

/* ---------- Tabellen ---------- */
.uk-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.uk-tabelle th, .uk-tabelle td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.uk-tabelle th { padding-top: 7px; padding-bottom: 7px; color: var(--tinte-2); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; vertical-align: bottom; }
.uk-tabelle .is-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.uk-tabelle tbody tr:last-child td { border-bottom: 0; }
.uk-tabelle--klein th, .uk-tabelle--klein td { padding: 4px 10px; font-size: 13px; line-height: 18px; }
.uk-tabelle--klein th { font-size: 12px; }
.uk-tabelle--klein th:first-child, .uk-tabelle--klein td:first-child { padding-left: 0; }

.uk-tabellen-rahmen { margin: 0 -18px -18px; overflow-x: auto; border-top: 1px solid var(--linie); }
.uk-tabellen-rahmen .uk-tabelle th:first-child, .uk-tabellen-rahmen .uk-tabelle td:first-child { padding-left: 18px; }
.uk-tabellen-rahmen .uk-tabelle th:last-child, .uk-tabellen-rahmen .uk-tabelle td:last-child { padding-right: 18px; }
.uk-tabellen-rahmen .uk-tabelle thead th { background: var(--flaeche); }
.uk-tabellen-rahmen .uk-tabelle tbody tr:hover { background: var(--flaeche-hover); }
.uk-tabelle__projekt { min-width: 180px; }
.uk-nebenzahl { display: block; color: var(--tinte-2); font-weight: 400; }
.uk-offen-zelle { display: inline-flex; gap: 12px; justify-content: flex-end; }
.uk-offen-zelle > span { display: inline-flex; align-items: center; gap: 4px; }

.uk-sortieren { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 3px 6px; border: 0; border-radius: var(--radius-s);
  background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.is-zahl > .uk-sortieren { margin-left: 0; margin-right: -6px; }
.uk-sortieren:hover { background: var(--flaeche-grau); color: var(--tinte); }
.uk-sortieren .pw-icon { opacity: 0; transition: transform .12s; }
.uk-sortieren:hover .pw-icon { opacity: .45; }
.uk-sortieren.is-aktiv { color: var(--tinte); }
.uk-sortieren.is-aktiv .pw-icon { opacity: 1; }
.uk-sortieren.is-auf .pw-icon { transform: rotate(180deg); }

/* ---------- Am längsten offen ---------- */
.uk-engpass-liste { list-style: none; margin: 0 -8px; padding: 0; }
.uk-engpass-liste > li + li { border-top: 1px solid var(--linie); }
.uk-engpass { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; width: 100%;
  padding: 9px 8px; border: 0; border-radius: var(--radius-m); background: none; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; }
.uk-engpass:hover { background: var(--flaeche-hover); }
.uk-engpass:focus-visible { position: relative; z-index: 1; }
.uk-engpass > .pw-ampel { justify-self: start; min-width: 58px; }
.uk-engpass > .pw-icon { color: var(--tinte-2); }
.uk-engpass:hover > .pw-icon { color: var(--karmin); }
.uk-engpass__mitte { display: flex; flex-direction: column; min-width: 0; }
.uk-engpass__zeile1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.uk-engpass__zeile1 .kennung { flex: none; white-space: nowrap; }
.uk-engpass__bez { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-engpass__zeile2 { color: var(--tinte-2); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-engpass__alter { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tinte-2); white-space: nowrap; }
.uk-engpass__alter.is-alt { color: var(--karmin-dunkel); font-weight: 600; }
.uk-mehr { display: flex; align-items: center; gap: 12px; margin: -4px 0 -6px; }

/* ---------- Häufigste Fehlerarten ---------- */
.uk-fehler-liste { list-style: none; margin: 0; padding: 0; }
.uk-fehler { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(240px, 320px); gap: 16px; padding: 12px 0; border-top: 1px solid var(--linie); }
.uk-fehler__rang { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-s); background: var(--flaeche-grau);
  color: var(--tinte-2); font-size: 12px; line-height: 1; }
.uk-fehler__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.uk-fehler__text p { margin: 0; max-width: 90ch; }
.uk-fehler__beispiele { margin-top: 2px !important; color: var(--tinte-2); font-weight: 400; }
.uk-fehler__beispiele .kennung-klein { color: var(--tinte); }
.uk-fehler__zahlen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; align-self: start; padding-top: 4px; }
.uk-fehler__balken { height: 10px; border-radius: 0 3px 3px 0; background: var(--grund); }
.uk-fehler__fuellung { display: flex; gap: 2px; height: 100%; min-width: 4px; border-radius: 0 3px 3px 0; overflow: hidden; }
.uk-fehler__summe { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.uk-fehler__ampeln { grid-column: 1 / -1; display: flex; gap: 14px; color: var(--tinte-2); font-weight: 400; }
.uk-fehler__ampeln > span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1240px) {
  .uk-kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .uk-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .uk-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .uk-seite { padding: 16px 16px 32px; }
  .uk-kopf__werkzeug { margin-left: 0; }
  .uk-fehler { grid-template-columns: 24px minmax(0, 1fr); }
  .uk-fehler__zahlen { grid-column: 2; }
  .uk-schaetzung__hinweis { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uk-inhalt, .uk-sortieren .pw-icon { transition: none; }
}
@media (forced-colors: active) {
  .uk-saeule, .uk-anteil__teil { forced-color-adjust: none; }
}