/* =========================================================================
   /funktionen-features/

   Seitentyp: Funktionsuebersicht.
   Designmaster: design-v6/50-page-design/homepage-final-v4/ ueber
   ../assets/site.css. Diese Seite fuehrt keine neue Art Direction ein:
   keine neue Farbe, keine neue Schrift, keine zweite Radiusstufe. Alle
   Bauteile unten bestehen aus Teilen, die das Seitensystem schon traegt -
   Randmarkierung, Haarlinie, Flaechenwechsel, Displayschnitt.

   Farbrollen, unveraendert aus dem System:
     Graphit      gegebener Bestand, Eingang, heutiger Zustand
     Mint         angewandte Fachlogik
     Dunkelgruen  ausschliesslich der kontrolliert abgeschlossene Vorgang

   Die eine Setzung dieser Seite
   -----------------------------
   Eine Funktionsseite laedt dazu ein, Faehigkeiten als Kachelwand
   nebeneinanderzustellen. Genau das waere hier die falsche Aussage: die
   Faehigkeiten sind keine Auswahl, sondern Stellen in einem Ablauf. Die
   Seite ordnet sie deshalb an einer senkrechten Leiste an, die von oben
   nach unten durchlaeuft und dort die Farbe wechselt, wo im Vorgang die
   Zustaendigkeit wechselt. Dieselbe Randmarkierung traegt der Index im
   Kopf, damit der Leser die Ordnung schon vor dem ersten Bereich sieht.

   Bauteile dieser Seite
   ---------------------
   1. .capindex         Der Index im Kopf. Vier Stufen, Sprungziele.
   3. .caprail          Die Faehigkeitsleiste. Vier Stufen, sieben
                        Faehigkeiten, ein durchgehender Balken.
   4. .cap              Die einzelne Faehigkeit: Name, Satz, Bestandteile.
   5. .crosscaps        Die zwei Faehigkeiten, die zu keiner einzelnen
                        Stufe gehoeren, sondern zu jeder.

   Bewegung: eine Sequenz. Die Leiste fuehrt ihre vier Stufen einmal ein,
   wenn sie ins Sichtfeld kommt - dieselbe Aussage wie die Grafik selbst:
   das hier ist eine Reihenfolge. Grundzustand ist das fertige Bild; ohne
   JavaScript und bei reduzierter Bewegung wird nichts versteckt. Danach
   bewegt sich auf dieser Seite nichts.
   ========================================================================= */

/* --- 1. Die Wortmarke als Bilddatei --------------------------------------
   Der Kopf traegt die echte Marke, nicht ihren typografischen Nachbau. Die
   Hoehe ist an den Textsatz der Marke gebunden (20 px Versalhoehe im
   Designmaster), die Breite folgt dem Seitenverhaeltnis der Datei
   3523 x 481. */



/* --- 2. Der Index im Kopf ------------------------------------------------
   Er ist kein Inhaltsverzeichnis aus Hoeflichkeit, sondern die Ordnung der
   Seite in vier Zeilen: Rang, Stufe, Faehigkeiten. Die Randmarkierung
   traegt dieselbe Farbrolle wie die Stufe weiter unten, deshalb steht die
   Zuordnung an einer Stelle und nicht an zweien. */
.capindex {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-cool);
}
.capindex > li { border-bottom: 1px solid var(--line-cool); }
.capindex > li.is-context { --role: var(--ink); }
.capindex > li.is-record  { --role: var(--secured); }
.capindex a {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 14px;
  padding: 16px 0 16px 20px;
  text-decoration: none;
}
.capindex a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 3px;
  height: 22px;
  background: var(--role, var(--brand));
}
.capindex a:hover .capindex__name { color: var(--brand-text); }
.capindex__num {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}
.capindex__name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.capindex__members {
  grid-column: 2;
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-quiet);
}
.capindex__across {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.capindex__across a {
  color: var(--brand-text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cool);
}
.capindex__across a:hover { border-bottom-color: var(--brand-text); }
.capindex__label {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-quiet);
}

/* Der zweigeteilte Kopf. Links die Behauptung, rechts die Ordnung. */
.head-caps { padding-block: 60px 66px; }
.head-caps .pagehead__inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 0 72px;
  align-items: start;
}
.head-caps .pagehead__title { max-width: none; font-size: 52px; letter-spacing: -0.03em; }
.head-caps .pagehead__lede { margin-top: 24px; font-size: 20px; max-width: 52ch; }
.head-caps .pagehead__actions { margin-top: 32px; gap: 28px; }
.head-caps__index { padding-top: 8px; }

/* --- 3. Die Faehigkeitsleiste --------------------------------------------
   Vier Stufen untereinander. Der Balken am linken Rand laeuft durch alle
   vier und wechselt zweimal die Farbe: Graphit am Eingang, Mint ab der
   Regel, Dunkelgruen im Abschluss. Er ueberdeckt die Haarlinie zwischen
   zwei Stufen um genau ihre Staerke, damit er als ein Balken liest und
   nicht als vier Abschnitte. */
.caprail { margin-top: 62px; }
.caprail__stage {
  position: relative;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 0 64px;
  padding: 40px 0 46px 34px;
  --role: var(--brand);
}
.caprail__stage + .caprail__stage { border-top: 1px solid var(--line-cool); }
.caprail__stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 5px;
  background: var(--role);
}
.caprail__stage:first-child::before { top: 0; }
.caprail__stage--context { --role: var(--ink); }
.caprail__stage--record  { --role: var(--secured); }

.caprail__num {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}
.caprail__name {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.caprail__says {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}

/* --- 4. Die einzelne Faehigkeit ------------------------------------------
   Kein Kasten, kein Symbol, kein Schatten: eine Ueberschrift, ein Satz und
   die Bestandteile als zweispaltige Liste mit derselben Randmarkierung,
   die das Seitensystem ueberall fuer Aufzaehlungen verwendet. */
.caprail__caps {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cap__name {
  margin: 0;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.cap__text {
  margin: 12px 0 0;
  max-width: 70ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
}
.cap__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.cap__list li {
  position: relative;
  padding-left: 18px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.cap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 17px;
  background: var(--brand);
}
/* Der eine Satz, der eine Faehigkeit begruendet. Displayschnitt, volle
   Markenfarbe, kein eigenes Bauteil - dieselbe Behandlung wie .rules__note
   im Designmaster. */
.cap__motif {
  margin: 20px 0 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--brand-text);
}
/* Die Einschraenkung. Sie steht bewusst im Fliesstextgrad und mit
   Randmarkierung: sie ist Bedingung, nicht Kleingedrucktes. */
.cap__hint {
  margin: 18px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--line-cool);
  max-width: 74ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
/* Der Weiterweg steht im Satz der Einschraenkung und nicht darueber: er ist
   die Fortsetzung des Satzes, nicht ein zweiter Aufruf. Deshalb erbt er den
   Grad des Absatzes statt seinen eigenen zu behalten. */
.cap__hint .textlink { font-size: inherit; border-bottom-width: 1px; }

/* --- 5. Was quer zu allen Stufen liegt -----------------------------------
   Zwei Faehigkeiten gehoeren zu keinem einzelnen Schritt. Sie stehen
   deshalb nicht in der Leiste, sondern daneben - zwei Spalten, keine
   Nummer, kein Balken. Die Form sagt: das hier ist keine Stufe. */
.crosscaps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin: 56px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.crosscaps .cap__list { grid-template-columns: minmax(0, 1fr); }

/* Der Beispielvorgang steht neben seiner Einordnung, nicht darunter. */
.case {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
  margin-top: 56px;
}
.case .flow { margin: 0; max-width: none; }
.case__aside .plate-note { margin-top: 26px; }

/* --- Bewegung ------------------------------------------------------------
   Nur unter [data-sequence]. Das Skript setzt das Attribut erst, wenn es
   auch wieder einblenden kann - ohne JavaScript, ohne IntersectionObserver
   und bei reduzierter Bewegung steht die Leiste sofort fertig. */
.caprail[data-sequence] .caprail__stage {
  opacity: 0;
  transform: translateY(10px);
}
.caprail[data-sequence][data-run="on"] .caprail__stage {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.32, 0.72, 0.24, 1);
}
.caprail[data-sequence][data-run="on"] .caprail__stage:nth-child(2) { transition-delay: 0.12s; }
.caprail[data-sequence][data-run="on"] .caprail__stage:nth-child(3) { transition-delay: 0.24s; }
.caprail[data-sequence][data-run="on"] .caprail__stage:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .caprail[data-sequence] .caprail__stage { opacity: 1; transform: none; transition: none; }
}

/* --- Schmale Fenster -----------------------------------------------------
   Dieselben zwei Stufen wie im Seitensystem: 1180 und 860. */
@media (max-width: 1180px) {
  .head-caps { padding-block: 48px 54px; }
  .head-caps .pagehead__inner { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .head-caps .pagehead__title { font-size: 44px; }
  .head-caps__index { padding-top: 0; max-width: 640px; }
  .caprail { margin-top: 48px; }
  .caprail__stage { grid-template-columns: 230px minmax(0, 1fr); gap: 0 44px; }
  .caprail__name { font-size: 26px; }
  .crosscaps { gap: 44px; }
  .case { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 860px) {
  .caprail__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 32px 0 38px 26px;
  }
  .caprail__says { max-width: none; }
  .caprail__caps { gap: 34px; }
  .cap__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .crosscaps { grid-template-columns: minmax(0, 1fr); gap: 38px; }
}
@media (max-width: 560px) {
  .head-caps .pagehead__title { font-size: 38px; }
  
  .capindex a { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
}