/* ============================================================
   VCI Design — Sammelseite Arbeiten
   Ein Projekt ist ein Abschnitt ueber die volle Breite, nicht
   eine Kachel in einem Raster. Nur arbeiten.html.

   Hier standen ein einspaltiges Raster aus Vorschau-Kacheln und
   ein Modal, in dem die Case Study lag. Beides ist entfallen: ein
   Raster verspricht viele Projekte und zeigte eines, und wer
   nicht auf ein Bild klickt, hat den Inhalt nie gesehen. Er steht
   jetzt auf der Seite und ist durch Scrollen erreichbar.

   Die Leitprinzipien bleiben: keine Karten, kein Schatten, kein
   Radius, keine Fuellflaechen. Das Geraetebild ist freigestellt
   und braucht deshalb keinen Kasten, es steht auf dem
   Seitengrund. Gegliedert wird ueber Abstand, Schriftgrad und
   duenne Linien.
   ============================================================ */

.seitenkopf {
  padding-block: var(--space-xxl) var(--space-xl);
}

/* Die Seitenueberschrift ist ein Label, keine Schlagzeile. Sie und
   der Projektname standen beide auf der mittleren Display-Stufe,
   beide 64 Pixel, und weil "Apex Multiservice GmbH" die laengere
   Zeile ist, wirkte der Projektname groesser als die Seite selbst.

   Aufgeloest nicht ueber noch mehr Grad, sondern ueber Rollen:
   "Arbeiten" sagt nur, wo man ist, und benutzt dafuer dieselbe
   Label-Form wie "Leistungen" und "Ueber uns" auf der Startseite.
   Die grosse Stimme gehoert dem Projekt. Kommen weitere dazu,
   bleibt das Label oben stehen und jedes Projekt bekommt seinen
   eigenen Auftritt. */
.seitenkopf h1 {
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- Projektabschnitt -----------------------------------------
   Drei Takte: Kopf, Auftritt, Text. Die Abstaende dazwischen sind
   der eigentliche Rahmen.

   Kommen weitere Projekte dazu, wiederholt sich der Abschnitt.
   Getrennt werden sie dann durch dieselbe schwarze Linie, die auf
   der Startseite zwischen Ueber uns und CTA steht, und jedes
   Projekt darf seine Flaeche anders behandeln. Gleich bleiben
   Reihenfolge, Schriftstufen und Abstaende.
   ---------------------------------------------------------------- */
.projekt {
  padding-bottom: var(--space-xxl);
}

.projekt__kopf > * + * {
  margin-top: var(--space-s);
}

/* display-medium und nicht display-large: die groesste Stufe
   gehoert der Seitenueberschrift darueber. */
.projekt__name {
  font-size: var(--text-display-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
}

.projekt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

.projekt__jahr {
  font-variant-numeric: tabular-nums;
}

/* Der Stand des Projekts. Kleine Schrift und gepunktete Unterlinie
   aus .platzhalter, dasselbe Vokabular wie die Notiz unter
   "Ergebnisse", aber in der vollen Textfarbe statt gedaempft. Er
   ist die eine Angabe im Kopf, die man nicht ueberlesen soll, und
   haelt sich damit vom Jahr daneben ab, ohne eine neue Form zu
   brauchen. */
.projekt__stand {
  color: var(--color-fg);
}

/* Ein Satz, der das Projekt einordnet. Kurze Zeile, damit er als
   Aussage steht und nicht als Fliesstext gelesen wird. */
.projekt__einstieg {
  max-width: 34ch;
  margin-top: var(--space-m);
  font-size: var(--text-heading-medium);
  line-height: var(--leading-heading);
}

/* --- Auftritt --------------------------------------------------
   Das Bild ist freigestellt, deshalb ohne Rahmen, ohne Flaeche,
   ohne Rundung. Es liegt direkt auf dem Seitengrund.

   Gedeckelt auf 68rem: ueber die ganze Containerbreite von 90rem
   erschlaegt das Geraetepaar die Seite, deutlich schmaler verliert
   es seine Ruhe. Linksbuendig wie Ueberschrift und Text, damit die
   Seite eine Achse hat.
   ---------------------------------------------------------------- */
.projekt__auftritt {
  max-width: 68rem;
  margin-block: var(--space-xl) var(--space-xxl);
}

.projekt__bild {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Text ------------------------------------------------------ */
.projekt__text {
  max-width: 52ch;
}

/* Kurze Aussage in kleiner Schrift. Heute die Zeile unter
   "Ergebnisse", dass Zahlen nach dem Launch folgen. */
.projekt__notiz {
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

.projekt__zwischentitel + .projekt__notiz {
  margin-top: var(--space-m);
}

/* Abstand nur zwischen zwei Absaetzen. Frueher stand vor dem
   ersten eine Notiz, und der Abstand gehoerte an jeden Absatz.
   Die Notiz ist entfallen, und ein Aussenabstand am ersten Absatz
   haette nur den Abstand zum Bild darueber vergroessert. */
.projekt__absatz + .projekt__absatz {
  margin-top: var(--space-m);
}

/* container-type, damit sich die Spalten im Ablauf nach der
   Breite des Blocks richten und nicht nach dem Fenster. Siehe
   ol.ablauf weiter unten. */
.projekt__block {
  margin-top: var(--space-xl);
  max-width: 68rem;
  container: projektblock / inline-size;
}

.projekt__zwischentitel {
  font-size: var(--text-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- Ergebnisse ------------------------------------------------
   Im Moment unbenutzt: bis nach dem Launch steht unter
   "Ergebnisse" nur die Notiz, dass Zahlen folgen. Die Stile bleiben
   stehen, weil die Liste dann zurueckkehrt, und ihre Entscheidungen
   sind schon getroffen, etwa --color-accent-ink fuer die Werte.
   ---------------------------------------------------------------- */
.ergebnisse {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-xl);
  margin-top: var(--space-m);
}

.ergebnis {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ergebnis__wert {
  font-family: var(--font-display);
  font-size: var(--text-heading-large);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
}

.ergebnis__label {
  max-width: 24ch;
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

/* --- Ablauf ----------------------------------------------------
   Vier Schritte nebeneinander, jeder unter einer duennen Linie.
   Dasselbe Muster wie die Personen auf der Startseite: getrennt
   wird durch eine Linie, nicht durch eine Karte. Auch die Stufen
   im Schritt folgen ihm, Titel wie .person__name, Text wie
   .person__rolle.

   ol.ablauf statt .ablauf: base.css setzt ol[class] auf
   list-style: none, und ein Attributselektor schlaegt eine
   einzelne Klasse. Die Nummer kommt deshalb aus einem Zaehler und
   nicht aus der Listendarstellung. Sie steht als eigene Zeile
   ueber dem Schritt, in derselben Label-Schrift wie die
   Zwischentitel.

   Die Spalten richten sich nach der Breite des Blocks, ueber eine
   Container-Abfrage statt einer weiteren Fensterbreite. Vier,
   solange jede Spalte gut 12rem bekommt, darunter zwei, ganz
   schmal eine. Bewusst keine automatische Fuellung mit auto-fit:
   die liefe bei mittleren Breiten auf drei Spalten und stellte
   den vierten Schritt allein in eine zweite Reihe.
   ---------------------------------------------------------------- */
ol.ablauf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l) var(--gutter);
  margin-top: var(--space-m);
  list-style: none;
  counter-reset: schritt;
}

ol.ablauf > li {
  counter-increment: schritt;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

ol.ablauf > li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* .ablauf__titel braucht keine eigene Regel: base.css setzt h4
   schon auf --text-medium, halbfett, mit ausgeglichenem Umbruch,
   und das ist genau die Stufe von .person__name. Die Klasse bleibt
   im Markup als Ansatzpunkt. */

.ablauf__text {
  font-size: var(--text-small);
  line-height: var(--leading-text);
  color: var(--color-fg-muted);
}

@container projektblock (max-width: 56rem) {
  ol.ablauf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container projektblock (max-width: 30rem) {
  ol.ablauf {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
  }
}