/* Baustellencontrolling: die Projektseite, dunkler Anstrich neben dem Leitstand.
   Ergaenzt aphiro-basis.css und ansichten.css, ersetzt beide nie.

   Nur was die drei Bloecke und die Grafik brauchen. Die Navigationsleiste,
   der Kicker und der Seitentitel kommen aus den Tokens beziehungsweise aus
   ansichten.css — hier steht keine zweite Fassung davon. */

.ct-seite {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--ap-space-6) var(--ap-gutter) var(--ap-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-5);
}

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

.ct-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ap-space-6);
  flex-wrap: wrap;
}
.ct-kunde {
  margin: var(--ap-space-2) 0 0;
  color: var(--ap-text-muted);
  font-size: var(--ap-size-body);
}

/* Die Eckdaten stehen rechts oben und nicht als vierter Block: Sie sind
   Merkmale des Projekts, keine gemessene Groesse. Wer sie zwischen ZEIT und
   GELD stellte, machte aus drei Bloecken vier und aus dem Muster der Vorlage
   eine Aufzaehlung. */
.ct-eckdaten {
  display: flex;
  gap: var(--ap-space-6);
  margin: 0;
}
.ct-eckdaten > div { display: flex; flex-direction: column; gap: var(--ap-space-1); }
.ct-eckdaten dt {
  font-size: var(--ap-size-kicker);
  font-weight: var(--ap-weight-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-text-muted);
}
.ct-eckdaten dd {
  margin: 0;
  font-size: var(--ap-size-ui);
  font-weight: var(--ap-weight-ui);
  color: var(--ap-text);
}

/* --- Die drei Bloecke ------------------------------------------------------ */

.ct-block {
  border: 1px solid var(--ap-border);
  background: var(--ap-surface);
  padding: var(--ap-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-4);
}
/* Die Blockueberschrift steht in Versalien, weil sie in der Vorlage so steht
   und weil sie auf einer Projektionsflaeche als Marke gelesen wird, nicht als
   Satz. Die Laufweite oeffnet sie dafuer — versal und eng zusammen ist auf
   fuenf Meter unlesbar. */
.ct-block > h2 {
  margin: 0;
  font-size: var(--ap-size-section);
  font-weight: var(--ap-weight-ui);
  letter-spacing: 0.14em;
  color: var(--ap-text-muted);
}

.ct-spalten {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ap-space-5);
}
/* Unter 900 px untereinander: Drei Spalten auf einem schmalen Schirm sind drei
   abgeschnittene Zahlen. */
@media (max-width: 900px) {
  .ct-spalten { grid-template-columns: 1fr; }
  .ct-eckdaten { flex-wrap: wrap; gap: var(--ap-space-4); }
}

.ct-spalte { display: flex; flex-direction: column; gap: var(--ap-space-2); }
.ct-spalte dt {
  font-size: var(--ap-size-small);
  color: var(--ap-text-muted);
}
/* Tabellarische Ziffern: Sonst springt die Zahl beim Aktualisieren, und auf
   einer Projektionsflaeche zieht jede Bewegung den Blick. */
.ct-wert {
  margin: 0;
  font-family: var(--ap-font-mono);
  font-size: var(--ap-size-section);
  font-variant-numeric: tabular-nums;
  color: var(--ap-text);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-1);
}
/* „noch nichts gemeldet" ist ein Satz, keine Zahl — und er steht bewusst da,
   wo sonst die Zahl steht (Arbeitsregel 6). Eine Null an dieser Stelle
   behauptete etwas, was niemand gemeldet hat. */
.ct-leer {
  font-family: inherit;
  font-size: var(--ap-size-ui);
  color: var(--ap-text-muted);
}
.ct-vermerk {
  font-family: inherit;
  font-size: var(--ap-size-small);
  color: var(--ap-text-muted);
}
.ct-fussnote {
  margin: 0;
  font-size: var(--ap-size-small);
  color: var(--ap-text-muted);
  max-width: 65ch;
}

/* --- Der Anteilsstreifen --------------------------------------------------- */

/* Neutral eingefaerbt, nicht im Akzent: Der eine Akzent dieser Ansicht gehoert
   der gestrichelten Soll-Linie in der Grafik, und ein Akzent ist Signal, nie
   Flaeche. Die Zahl steht darueber — Farbe nie allein als Bedeutungstraeger. */
.ct-streifen {
  height: 10px;
  background: var(--ap-surface-3);
  border: 1px solid var(--ap-border);
}
/* Derselbe ruhige Ton wie die Balken der Grafik darunter — und aus demselben
   Grund am 20.08. gewechselt: `--ap-text-muted` war auf hellem Papier ein
   ruhiges Grau und ist auf gruenschwarzem Grund grauweiss. Der Streifen und
   die Balken zeigen dieselbe Art Groesse und tragen deshalb denselben Ton;
   zwei verschiedene waeren zwei Bedeutungen. */
.ct-streifen-anteil {
  display: block;
  height: 100%;
  background: var(--ap-border);
}

/* --- Die Grafik ------------------------------------------------------------ */

.ct-bild { margin: 0; }
/* Die Grafik ist eingebettetes SVG (Entscheidung 6) und erbt damit die Tokens.
   `width: 100%` mit `height: auto` haelt ihr Seitenverhaeltnis; auf einem
   schmalen Schirm rollt sie waagerecht, statt die Seite aufzureissen. */
.ct-bild svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 720px;
}
.ct-bild { overflow-x: auto; }
.ct-bild figcaption {
  margin-top: var(--ap-space-3);
  font-size: var(--ap-size-small);
  color: var(--ap-text-muted);
  max-width: 65ch;
}


/* --- Der Block KUNDENWUENSCHE (Paket F, Aufgabe 7) ------------------------- */

/* Auf einem schmalen Schirm rollt die Tabelle in sich, statt die Seite
   aufzureissen — dieselbe Loesung wie bei der Grafik darueber. */
.ct-tabelle { overflow-x: auto; }
.ct-wuensche { width: 100%; }
/* Zahlen rechtsbuendig und tabellarisch: Sonst stehen die Preise versetzt
   untereinander, und auf einer Projektionsflaeche faellt genau das auf. */
.ct-zahl {
  text-align: right;
  font-family: var(--ap-font-mono);
  font-variant-numeric: tabular-nums;
}
/* Beim Ansehen aufgefallen: Die Ueberschrift stand links, die Zahlen darunter
   rechts. `.ap-table th` ist spezifischer als `.ct-zahl` allein und gewinnt
   sonst — auf einer Projektionsflaeche ist eine Spalte, deren Kopf nicht ueber
   ihren Zahlen steht, sofort sichtbar. */
.ct-wuensche th.ct-zahl { text-align: right; }
/* Die Spaltenueberschrift ueber den Knoepfen ist fuer Vorleseprogramme da und
   soll nicht mitgelesen werden — sichtbar waere sie eine leere Behauptung
   ueber eine Spalte, in der meistens nichts steht. */
.ct-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}