/* =========================================================================
   /loesung-eintritt/ - Anwendungsfall Eintritt
   MASTER FUER HR-CASE-DETAILSEITEN

   Diese Seite ist die Vorlage fuer alle weiteren Vorgangsseiten
   (Gehaltsaenderung, Vertragsaenderung, Versetzung, Arbeitszeitaenderung,
   Austritt). Kein Bauteil unten setzt Eintritt voraus: jedes traegt eine
   Rolle im Vorgang und nicht einen Sachverhalt. Was je Seite wechselt,
   sind Woerter, nicht Anlagen.

   Es entsteht keine neue Art Direction. Farbe, Schrift, Radius, Raster und
   Abstaende stammen unveraendert aus dem Master und aus /produkt/ V4. Alle
   Bauteile bestehen aus denselben Teilen, die das Seitensystem schon
   traegt: Randmarkierung, Haarlinie, angehobenes Blatt, minte Regelflaeche,
   Abschlussband in Dunkelgruen.

   Farbrollen, unveraendert aus dem System:
     Graphit      gegebener Bestand, Eingang, heutiger Zustand
     Mint         angewandte Fachlogik
     Orange       Bedingung und Ausnahme, und sonst nichts
     Dunkelgruen  ausschliesslich der kontrolliert abgeschlossene Vorgang

   Orange steht auf dieser Seite an genau einer Stelle: an der
   Beispielregel im Regelmoment des Ablaufs. Die Fehlerquellen weiter unten
   tragen bewusst Graphit - sie beschreiben den heutigen Zustand und keine
   Bedingung der Fachlogik.

   Bauteile dieser Seite (die wiederverwendbare Case-Page-Reihe)
   ------------------------------------------------------------
   1. .hero-case  Zweiteilung des Kopfes. Behauptung links, der konkrete
                  Vorgang als aktiver Fall rechts.
   2. .caseflow   Der Fall im Kopf. Fuenf Lagen auf einem Blatt, verbunden
                  durch einen Balken, der dort die Farbe wechselt, wo die
                  Zustaendigkeit wechselt. Gleiche Mechanik wie .engine in
                  /produkt/ V4.
   3. .part       Das Missverstaendnis des Vorgangs: ein sichtbarer Teil
                  links, der koordinierte Rest rechts.
   4. .caserun    Der grosse Produktmoment. Ein Vorgang von der Meldung bis
                  zum Nachweis. Gleiche Mechanik wie das Product Theatre in
                  /produkt/ V4, eigener Klassenname, damit keine Regel der
                  Startseiten-Buehne (.theatre in site.css) mitgreift.
   5. .combo      Der Komplexitaetsmoment als Produkt von Bedingungen.
                  Keine Ergebniszahl, keine Variantenbehauptung.
   6. .controls   Was Scriptomat im Vorgang uebernimmt, sechs Aufgaben in
                  der Reihenfolge, in der sie greifen. Bewusst kuerzer als
                  die vier Faehigkeiten in /produkt/ V4: dort steht die
                  Produktbeschreibung, hier nur ihre Anwendung auf den Fall.
   7. .today      Der heutige Zustand als Werkzeugleiste, darunter der
                  zusammenhaengende Vorgang. Keine Ersatzbehauptung.
   8. .wire       Der Uebergang in die Systemlandschaft. Eine Zeile.
   9. .risks      Fehlerquellen als sachliche Reihe, keine Angstsektion,
                  keine Kartenwand.
  10. .dod        Die Abschlusslogik als Leiter mit minter Spur und
                  dunkelgruenem Abschluss.

   Bewegung: zwei Sequenzen, beide begruendet, beide abschaltbar. Der Kopf
   fuehrt die Lagen des Falls einmal beim Laden ein, der Ablauf fuehrt seine
   Stationen einmal beim Eintritt ins Sichtfeld ein. Beide sagen dasselbe
   wie die Grafik: das hier ist eine Reihenfolge. Sonst bewegt sich nichts.
   Kein Scroll-Listener, keine Bibliothek, keine Schleife.
   ========================================================================= */

/* --- 1. Der zweigeteilte Kopf -------------------------------------------- */
/* Die Behauptung steht links, der konkrete Fall rechts. Der H1-Grad ist
   lokal von 62 auf 44 px gesetzt: die Zeile "Ein neuer Mitarbeiter." misst
   bei 62 px rund 700 px und passt in keine halbe Satzbreite. Bei 44 px
   steht sie mit Rand in der 548 px breiten linken Spalte und der Satz
   bleibt dreizeilig. Bei 48 px misst sie 563 px und steht damit noch mit
   Rand in der 614 px breiten Spalte; der Grad des Produktkopfes bleibt
   dadurch erhalten.

   Die linke Spalte traegt etwas mehr Flaeche als die rechte: die beiden
   Wege des Kopfes messen zusammen rund 606 px und wuerden in einer 548 px
   breiten Spalte umbrechen. Bei 1.12fr steht die Spalte auf 614 px und die
   Zeile bleibt einzeilig. */
.hero-case { padding-block: 56px 64px; }
.hero-case .pagehead__inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 0 56px;
  align-items: center;
}
.hero-case .pagehead__title {
  max-width: none;
  font-size: 48px;
  letter-spacing: -0.03em;
  text-wrap: initial;
}
.hero-case .pagehead__lede { margin-top: 24px; font-size: 21px; max-width: 46ch; }
.hero-case .pagehead__actions { margin-top: 32px; gap: 28px; }
.hero-case .crumb { margin-bottom: 22px; }
.hero-case .pagehead__kicker { margin-bottom: 18px; }

/* --- 2. Der Fall im Kopf -------------------------------------------------- */
/* Kein Fensterrahmen, keine Schaltflaeche, kein Eingabefeld, kein Cursor,
   kein Dashboard: das Bauteil ist gesetzter Text auf Papier. Der Balken
   laeuft durch alle Lagen und wechselt zweimal die Farbe - Graphit am
   Eingang, Mint ab dem Kontext, Dunkelgruen im Abschluss. Ein kurzer
   Winkel oben links an jeder Folgelage sagt, dass hier eine neue
   Zustaendigkeit beginnt; deshalb braucht der Fall keinen Pfeil. */
.caseflow {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 14px 44px rgba(20, 21, 31, 0.10);
}
.caseflow__layer {
  position: relative;
  padding: 18px 26px 19px 28px;
}
.caseflow__layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}
.caseflow__layer--in::before { background: var(--ink); }
.caseflow__layer--context::before,
.caseflow__layer--rules::before,
.caseflow__layer--acting::before { background: var(--brand); }
/* Der Winkel: der Balken biegt in die neue Lage ein. */
.caseflow__layer--context::after,
.caseflow__layer--rules::after,
.caseflow__layer--acting::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 4px;
  background: var(--brand);
}
.caseflow__layer--context { border-top: 1px solid var(--line-cool); }
.caseflow__layer--rules { background: var(--brandfield); border-top: 1px solid #CBE8DA; }
.caseflow__layer--acting { border-top: 1px solid #CBE8DA; }

.caseflow__label {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.caseflow__layer--rules .caseflow__label { color: var(--brand-text); }

/* Der Eingang: eine Person und ein Datum. Mehr steht am Anfang eines
   Eintritts nicht fest. */
.caseflow__case {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.caseflow__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.caseflow__facts li {
  position: relative;
  padding-left: 15px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink-body);
}
.caseflow__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 15px;
  background: var(--ink);
}

/* Kontext und Ausfuehrung: dieselbe Liste, zwei Spalten. */
.caseflow__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.caseflow__list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.caseflow__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 17px;
  background: var(--brand);
}
/* Die Regellage traegt keinen Katalog, sondern den einen Satz, der sagt,
   wem die Entscheidung gehoert. */
.caseflow__rule {
  margin: 11px 0 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.caseflow__done {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 18px;
  margin: 0;
  padding: 19px 26px 19px 28px;
  background: var(--secured);
}
.caseflow__done .caseflow__label { color: #A9D6C3; }
.caseflow__done-value {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.caseflow__note { margin-top: 20px; max-width: 640px; font-size: 17px; }

/* Der Kopf fuehrt seine Lagen einmal ein. Der Endzustand ist der
   Grundzustand: faellt die Animation aus, steht der Fall vollstaendig da. */
@media (prefers-reduced-motion: no-preference) {
  .caseflow > * { animation: caseflow-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .caseflow > *:nth-child(1) { animation-delay: 0.06s; }
  .caseflow > *:nth-child(2) { animation-delay: 0.20s; }
  .caseflow > *:nth-child(3) { animation-delay: 0.34s; }
  .caseflow > *:nth-child(4) { animation-delay: 0.48s; }
  .caseflow > *:nth-child(5) { animation-delay: 0.62s; }
}
@keyframes caseflow-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- 3. Ein sichtbarer Teil und der koordinierte Rest --------------------- */
/* Zwei Seiten, eine Haarlinie dazwischen. Links das Dokument, an das jeder
   zuerst denkt, in Graphit. Rechts, was daneben zusammenkommen muss, in
   Mint. Keine Kartenwand: die Aussage ist ein Groessenverhaeltnis, und ein
   Groessenverhaeltnis braucht zwei Flaechen, nicht sieben Kacheln. */
.part {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0 64px;
  align-items: start;
  margin-top: 52px;
  border-top: 1px solid var(--line-cool);
}
.part__side { padding-top: 32px; }
.part__side--rest { padding-left: 56px; border-left: 1px solid var(--line-cool); }
.part__label {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.part__side--rest .part__label { color: var(--brand-text); }
.part__one {
  position: relative;
  margin: 0;
  padding-left: 20px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.part__one::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 28px;
  background: var(--ink);
}
.part__aside {
  margin: 20px 0 0;
  padding-left: 20px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
}
/* Die sieben Punkte fliessen, sie stehen nicht im Raster: bei zwei festen
   Spalten bliebe die vierte Zeile halb leer und "Nachweise" stuende allein
   unter einer Luecke. Der Fluss haelt die Reihe geschlossen und sagt
   damit auch das Richtige - das ist eine Menge, keine Rangliste. */
.part__rest {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.part__rest li {
  position: relative;
  padding-left: 19px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.part__rest li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
.part__hint {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid #CBE8DA;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* --- 4. Der Produktmoment: ein Eintritt von der Meldung bis zum Nachweis -- */
/* Dieselbe Mechanik wie das Product Theatre in /produkt/ V4, mit eigenen
   Klassennamen. Der Ausloeser steht frei auf der Flaeche, die vier
   Stationen von Scriptomat liegen auf einem angehobenen Blatt, der
   Abschluss laeuft als Band unter dem Blatt heraus.

   Die Regelstation ist die Mitte des Bildes und die einzige minte Flaeche
   im Blatt: dort entscheidet die Unternehmenslogik. Die Beispielregel dort
   ist ausdruecklich als Beispiel gesetzt und nicht als allgemeine
   Wahrheit - sie traegt deshalb die orange Rolle. */
.caserun { margin: 58px 0 0; }
.caserun__stage {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 44px;
  align-items: start;
}
.caserun__label {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.caserun__stage--trigger {
  padding: 0 44px 44px 44px;
  border-left: 7px solid var(--ink);
}
.caserun__case {
  margin: 0;
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.caserun__from {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 1.48;
  color: var(--ink-body);
}

.caserun__block {
  border-left: 7px solid var(--brand);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 22px 64px rgba(20, 21, 31, 0.13);
}
.caserun__block .caserun__stage { padding: 40px 56px 42px 44px; }
.caserun__block .caserun__stage + .caserun__stage { border-top: 1px solid var(--line-cool); }
.caserun__block .caserun__stage--rules { background: var(--brandfield); border-top-color: #CBE8DA; }
.caserun__block .caserun__stage--rules + .caserun__stage { border-top-color: #CBE8DA; }
.caserun__block .caserun__stage--rules .caserun__label { color: var(--brand-text); }

/* Die Ansage der Station. Sie macht die Begriffe darunter lesbar und
   erspart der Grafik eine Legende. */
.caserun__says {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--brand-text);
}

/* Daten: gegebene Angaben, drei Spalten, kein Rang untereinander. */
.caserun__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 32px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.caserun__facts li {
  position: relative;
  padding-left: 18px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
}
.caserun__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 18px;
  background: var(--brand);
}

/* Regeln: sechs Fragen. Sie tragen den groessten Grad im Blatt, weil sie
   der Grund sind, aus dem es diese Seite gibt. */
.caserun__ask {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 44px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.caserun__ask li {
  position: relative;
  padding-left: 21px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.caserun__ask li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 22px;
  background: var(--brand);
}
/* Die einzige orange Stelle der Seite: eine Regel, die es geben kann und
   nicht geben muss. */
.caserun__example {
  position: relative;
  margin: 26px 0 0;
  padding-left: 19px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-body);
}
.caserun__example::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 19px;
  background: var(--exception);
}
.caserun__example b { font-weight: 700; color: var(--ink); }
.caserun__control {
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #CBE8DA;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* Ausfuehrung: Handlungen, deshalb Displayschnitt und Verben. */
.caserun__acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 44px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.caserun__acts li {
  position: relative;
  padding-left: 19px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.caserun__acts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}

/* Nachweis: Angaben, die spaeter gebraucht werden. Sie stehen ruhiger als
   die Handlungen darueber, weil sie nichts ausloesen. */
.caserun__record {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 30px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.caserun__record li {
  position: relative;
  padding-left: 17px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}
.caserun__record li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 17px;
  background: var(--brand);
}
.caserun__filed {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}

.caserun__done {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 44px;
  align-items: baseline;
  margin: 0;
  padding: 42px 56px 42px 44px;
  background: var(--secured);
  border-left: 7px solid var(--secured);
}
.caserun__done .caserun__label { color: #A9D6C3; }
.caserun__result {
  font-family: var(--display);
  font-size: 33px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: #FFFFFF;
}

/* Die Sequenz. Der Grundzustand ist das fertige Bild: das Skript setzt
   data-sequence erst, wenn es auch wieder einblenden kann. */
@media (prefers-reduced-motion: no-preference) {
  .caserun[data-sequence="armed"] .caserun__stage,
  .caserun[data-sequence="armed"] .caserun__done { opacity: 0; }
  .caserun[data-sequence="running"] .caserun__stage,
  .caserun[data-sequence="running"] .caserun__done {
    animation: caserun-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .caserun[data-sequence="running"] .caserun__stage--trigger { animation-delay: 0s; }
  .caserun[data-sequence="running"] .caserun__stage--data    { animation-delay: 0.13s; }
  .caserun[data-sequence="running"] .caserun__stage--rules   { animation-delay: 0.26s; }
  .caserun[data-sequence="running"] .caserun__stage--acting  { animation-delay: 0.39s; }
  .caserun[data-sequence="running"] .caserun__stage--record  { animation-delay: 0.52s; }
  .caserun[data-sequence="running"] .caserun__done           { animation-delay: 0.65s; }
}
@keyframes caserun-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- 5. Der Komplexitaetsmoment ------------------------------------------- */
/* Ein Produkt aus Bedingungen, gesetzt wie eine Formel und nicht wie eine
   Aufzaehlung. Das Malzeichen gehoert jeweils zum folgenden Begriff, damit
   ein Umbruch die Formel nicht zerreisst. Es wird bewusst kein Ergebnis
   gerechnet: die Aussage ist die Kombination, nicht ihre Anzahl. */
.combo-head { max-width: none; }
.combo { margin: 50px 0 0; }
.combo__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.combo__terms li {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.combo__terms li + li::before {
  content: "×";
  margin-inline: 20px;
  font-weight: 600;
  color: var(--brand-text);
}
.combo__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 20px;
  margin: 34px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line-cool);
}
.combo__arrow {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-text);
}
.combo__value {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.combo__note { margin-top: 26px; }

/* --- 6. Was Scriptomat im Vorgang uebernimmt ------------------------------ */
/* Drei Spalten auf Haarlinien, sechs Aufgaben in der Reihenfolge, in der
   sie greifen. Bewusst kuerzer gesetzt als die vier Faehigkeiten in
   /produkt/ V4: dort steht die Produktbeschreibung, hier steht nur, was
   davon in diesem Vorgang zum Tragen kommt. */
.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 52px 0 0;
  border-top: 1px solid var(--line-cool);
}
.controls > div { padding: 30px 40px 32px 0; }
.controls > div:nth-child(3n+2),
.controls > div:nth-child(3n) { padding-left: 40px; border-left: 1px solid var(--line-cool); }
.controls > div:nth-child(n+4) { border-top: 1px solid var(--line-cool); }
.controls h3 {
  position: relative;
  margin: 0;
  padding-left: 18px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.controls h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
.controls p {
  margin: 12px 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* --- 7. Der heutige Zustand und der zusammenhaengende Vorgang ------------- */
/* Oben die Werkzeuge, die den Eintritt heute unter sich aufteilen, in
   Graphit und ohne Rangfolge: sie sind alle gleich beteiligt und keines
   traegt den Vorgang. Darunter, durch einen minten Balken getrennt, der
   Zustand mit Scriptomat. Keine Gegenueberstellung in zwei Spalten - die
   Aussage ist eine Bewegung von vielen Teilen zu einem Vorgang, und die
   liest sich von oben nach unten. */
.today { margin: 48px 0 0; }
.today__label {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.today__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.today__stack li {
  position: relative;
  padding-left: 18px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.today__stack li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 21px;
  background: var(--ink);
}
.today__aside {
  margin: 24px 0 0;
  max-width: 74ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
}
.today__result {
  margin: 40px 0 0;
  padding: 34px 44px 36px 40px;
  background: var(--brandfield);
  border-left: 6px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.today__result .today__label { color: var(--brand-text); margin-bottom: 16px; }
.today__value {
  margin: 0;
  max-width: 40ch;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.024em;
  color: var(--ink);
}

/* --- 8. Der Uebergang in die Systemlandschaft ---------------------------- */
/* Drei Gruppen auf Haarlinien: was hineingeht, wer ausfuehrt, was
   herauskommt. Der Pfeil vor der Beschriftung sagt die Richtung. Kein
   zweiter Integrationsbereich - /integrationen/ erklaert das vollstaendig,
   diese Zeile verweist nur darauf. */
.wire {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.72fr) minmax(0, 1.38fr);
  margin: 46px 0 0;
  border-top: 1px solid var(--line-cool);
}
.wire__group { padding: 30px 40px 32px 0; }
.wire__group + .wire__group { padding-left: 40px; border-left: 1px solid var(--line-cool); }
.wire__label {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.wire__group--core .wire__label,
.wire__group--out .wire__label { color: var(--brand-text); }
.wire__turn { margin-right: 12px; font-weight: 700; color: var(--brand); }
.wire__items {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wire__items li {
  position: relative;
  padding-left: 17px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.wire__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 18px;
  background: var(--brand);
}
.wire__group--in .wire__items li::before { background: var(--ink); }
.wire__core {
  margin: 0;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--brand-text);
}
.wire__go { display: inline-block; margin-top: 30px; }

/* --- 9. Die Fehlerquellen ------------------------------------------------- */
/* Eine sachliche Reihe, keine Kartenwand und keine Angstsektion. Graphit,
   nicht Orange: das hier ist der heutige Zustand und keine Bedingung der
   Fachlogik. Es steht ausdruecklich nicht, dass diese Faelle ueberall
   auftreten. */
.risks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin: 46px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.risks li {
  position: relative;
  padding-left: 18px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.risks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 20px;
  background: var(--ink);
}
.risks__note { margin-top: 32px; }

/* --- 10. Die Abschlusslogik ---------------------------------------------- */
/* Eine Leiter mit minter Spur, wie der Durchlauf des Masters, aber ohne
   Zeitmarke: hier zaehlt die Bedingung, nicht der Zeitpunkt. Der Abschluss
   laeuft als dunkelgruenes Band unter der Leiter heraus. */
.dod {
  position: relative;
  max-width: 860px;
  margin: 50px 0 0;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 21, 31, 0.09);
  overflow: hidden;
}
.dod__steps {
  position: relative;
  margin: 0;
  padding: 22px 40px 24px 66px;
  list-style: none;
}
.dod__steps::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 22px;
  bottom: 24px;
  width: 4px;
  background: var(--brand);
}
.dod__step {
  position: relative;
  padding: 15px 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.dod__step + .dod__step { border-top: 1px solid var(--line-cool); }
.dod__step::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
}
.dod__done {
  margin: 0;
  padding: 26px 40px 28px 66px;
  background: var(--secured);
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: #FFFFFF;
}

/* --- 11. Die Einordnung der Beweisleiste --------------------------------- */
/* Eine Zeile ueber dem bestehenden Beleg, gleiche Anlage wie in
   /loesungen/. Sie sagt, warum gerade dieser Kunde auf einer
   Eintrittsseite steht. Zahlen und Zitat bleiben unveraendert. */
.proof__lead {
  margin: 26px 0 0;
  max-width: 72ch;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* --- Schmale Fenster ----------------------------------------------------- */
/* Jede mehrspaltige Anlage erklaert ihren Rueckfall selbst. Die Reihenfolge
   im Quelltext ist ueberall schon die Lesefolge. */
@media (max-width: 1180px) {
  .hero-case .pagehead__inner { gap: 0 44px; }
  .hero-case .pagehead__title { font-size: 40px; }

  .part { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 0 44px; }
  .part__side--rest { padding-left: 44px; }
  .part__one { font-size: 30px; }

  .caserun__stage,
  .caserun__done { grid-template-columns: 150px minmax(0, 1fr); gap: 0 32px; }
  .caserun__block .caserun__stage { padding: 34px 34px 36px 32px; }
  .caserun__stage--trigger { padding: 0 34px 34px 32px; }
  .caserun__done { padding: 32px 34px 32px 32px; }
  .caserun__case { font-size: 35px; }
  .caserun__ask li { font-size: 22px; }
  .caserun__acts li { font-size: 21px; }
  .caserun__control { font-size: 20px; }
  .caserun__result { font-size: 28px; }

  .combo__terms li { font-size: 27px; }
  .combo__terms li + li::before { margin-inline: 16px; }

  .controls > div { padding-right: 30px; }
  .controls > div:nth-child(3n+2),
  .controls > div:nth-child(3n) { padding-left: 30px; }

  .wire { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.3fr); }
  .wire__group { padding-right: 30px; }
  .wire__group + .wire__group { padding-left: 30px; }
  .wire__core { font-size: 28px; }
}

@media (max-width: 1000px) {
  /* Der Kopf wird einspaltig: erst die Behauptung, dann der Fall. */
  .hero-case .pagehead__inner { grid-template-columns: minmax(0, 1fr); gap: 44px 0; }
  .hero-case .pagehead__lede { max-width: 60ch; }
  .caseflow { max-width: 620px; }

  .caserun__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls > div:nth-child(3n+2),
  .controls > div:nth-child(3n) { padding-left: 0; border-left: 0; }
  .controls > div:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--line-cool); }
  .controls > div:nth-child(odd) { padding-right: 40px; }
  .controls > div:nth-child(n+3) { border-top: 1px solid var(--line-cool); }

  /* Die drei Gruppen der Systemzeile stehen untereinander: die Richtung
     traegt weiterhin der Pfeil vor der Beschriftung. */
  .wire { grid-template-columns: minmax(0, 1fr); }
  .wire__group { padding: 30px 0 32px; }
  .wire__group + .wire__group {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-cool);
  }
}

@media (max-width: 860px) {
  .hero-case { padding-block: 44px 52px; }
  .hero-case .pagehead__title { font-size: 36px; }
  .caseflow { max-width: none; }
  .caseflow__case { font-size: 25px; }

  .part { grid-template-columns: minmax(0, 1fr); }
  .part__side--rest {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--line-cool);
  }
  .part__one { font-size: 28px; }

  /* Der Stationsname steht ueber der Station statt daneben. */
  .caserun__stage,
  .caserun__done { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .caserun__label { margin-top: 0; }
  .caserun__case { font-size: 29px; }
  .caserun__ask,
  .caserun__acts { grid-template-columns: minmax(0, 1fr); }
  .caserun__ask li { font-size: 21px; }
  .caserun__acts li { font-size: 20px; }
  .caserun__control { font-size: 19px; }
  .caserun__result { font-size: 24px; }

  .combo__terms li { font-size: 23px; }
  .combo__value { font-size: 27px; }

  .today__stack li { font-size: 21px; }
  .today__result { padding: 28px 26px 30px 26px; }
  .today__value { font-size: 24px; }

  .risks li { font-size: 21px; }

  .dod__steps { padding: 18px 26px 20px 60px; }
  .dod__steps::before { left: 28px; }
  .dod__step { font-size: 21px; }
  .dod__step::before { left: -38px; }
  .dod__done { padding: 22px 26px 24px 60px; font-size: 22px; }
}

@media (max-width: 560px) {
  .hero-case .pagehead__title { font-size: 30px; }
  .caseflow__layer { padding: 19px 22px 20px 24px; }
  .caseflow__list { grid-template-columns: minmax(0, 1fr); }
  .caseflow__done { padding: 18px 22px 18px 24px; grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .caseflow__case { font-size: 23px; }


  .caserun__facts { grid-template-columns: minmax(0, 1fr); }
  .caserun__block .caserun__stage { padding: 24px 20px 26px 22px; }
  .caserun__stage--trigger { padding: 0 20px 26px 22px; }
  .caserun__done { padding: 22px 20px 22px 22px; }

  .combo__terms li { font-size: 21px; }
  .combo__terms li + li::before { margin-inline: 12px; }

  .controls { grid-template-columns: minmax(0, 1fr); }
  .controls > div:nth-child(odd),
  .controls > div:nth-child(even) { padding: 26px 0 28px; border-left: 0; }
  .controls > div:nth-child(n+2) { border-top: 1px solid var(--line-cool); }

  .dod__steps { padding: 16px 20px 18px 52px; }
  .dod__steps::before { left: 22px; }
  .dod__done { padding: 20px 20px 22px 52px; }
}