/* =============================================================================
   Scriptomat V6 - Startseite, finale Fassung V2

   Neun Bereiche in dieser Reihenfolge:
   Hero · B&O-Proof · Problem · Product Theatre · Einwandbehandlung ·
   Lifecycle · Faehigkeiten · Vertrauen · Conversion.

   Art Direction
   -------------
   Unveraendert uebernommen aus dem Master-Slice
   design-v6/35-master-slice/homepage-core-v1/. Keine neue Art Direction,
   keine neue Farbwelt, keine neuen Schriften.
   Traeger aller Bildkoerper bleibt der Aenderungsbalken - die senkrechte
   Randmarkierung, mit der Vertraege geaenderte Passagen kennzeichnen.

   Was sich gegenueber der Vorfassung aendert
   ------------------------------------------
   1. Die Reihenfolge. Der reale Beleg steht jetzt unmittelbar nach dem Hero,
      das Problem vor der Loesung, und die Einwandbehandlung unmittelbar nach
      dem Beispiel - dort, wo der Leser den Einwand tatsaechlich hat.
   2. Die Kopfzeile haftet.
   3. Der Customer Proof ist von einer Sektion auf eine Leiste zurueckgebaut.
   4. Die Regelaussage-Sektion ist zur Problem-Sektion geworden.
   5. Die Buehne traegt je Ansicht einen eigenen Satz Detailcopy.
   6. Die Faehigkeiten tragen ihren Nutzen statt ihrer Mechanik.
   7. Vertrauen ist ein eigener kompakter Bereich vor der Conversion.

   Farbrollen - Farbe traegt Bedeutung, nicht Dekoration
   -----------------------------------------------------
   Neutralgrau  Ausgangsdaten aus dem bestehenden HR-System
   Mint         angewandte Scriptomat-Logik
   Orange       Bedingung oder Ausnahme
   Dunkelgruen  ausschliesslich abgeschlossener Zustand
   Graphit      Typografie und Grundstruktur

   Flaechenrhythmus - kein Bereich liegt neben einem gleichfarbigen, ausser
   Beispiel und Einwandbehandlung: die beiden gehoeren zusammen und werden
   nur von einer Haarlinie getrennt.
   Hero Mintton · Proof warmes Papier · Problem Grau · Beispiel Weiss ·
   Integration Weiss · Lifecycle Grau · Faehigkeiten Weiss · Sicherheit Grau ·
   Abschluss Mintton.

   Ein Theme: hell. Bewegung ausschliesslich beim Fokuswechsel der Buehne.
   Desktop 1440 zuerst. Keine Frameworks, keine externen Requests.
   ========================================================================== */

/* --- Markenschriften, lokal aus dem ausgelieferten Theme ------------------ */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500 800;
  font-display: block;
  src: url("../fonts/schibsted-grotesk-variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  src: url("../fonts/hanken-grotesk-variable-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --paper:      #FFFFFF;
  --ground:     #F4F5F7;   /* ruhiger Flaechenwechsel zwischen Bereichen */
  --brandfield: #EFFAF5;   /* leichte Markenflaeche, Abschluss */
  --herofield:  #F2FAF6;   /* dieselbe Markenflaeche, eine Stufe leiser */
  --prooffield: #FAF8F4;   /* warmes Papier, genau einmal auf der Seite */
  --line:       #E3E4E8;
  --line-warm:  #E7E2D9;
  --line-cool:  #DEDFE4;

  --ink:        #14151F;   /* Graphit */
  --ink-body:   #4A4E60;
  --ink-quiet:  #656978;

  --brand:      #3BD7A2;   /* Mint als Flaeche und Kante */
  --brand-text: #0F7F5C;   /* dieselbe Rolle als Text, barrierefrei */
  --exception:  #E8A33D;
  --secured:    #0C6242;

  --radius:     2px;       /* eine Radiusstufe fuer die ganze Seite */
  --shell:      1280px;
  --gutter:     64px;
  --head:       72px;      /* Hoehe der haftenden Kopfzeile */

  --display:    "Schibsted Grotesk", system-ui, sans-serif;
  --body:       "Hanken Grotesk", system-ui, sans-serif;

  /* --- Ueberschriftenleiter -----------------------------------------------
     Drei Raenge, nicht einer. Vorher trugen Hero und jede Kapitelueberschrift
     nahezu denselben Grad (72 / 58) - dadurch stand jeder Bereich gleich laut
     und die Seite hatte keinen Verlauf. Jetzt:

     --h-page     Die Behauptung der Seite. Genau einmal pro Seite.
     --h-major    Produktmomente: die Buehne, das System, der Abschluss.
                  Bleibt auf dem bisherigen Grad - hier darf es laut sein.
     --h-section  Der Normalfall. Traegt einen Bereich, ohne ihn zum
                  Hoehepunkt zu erklaeren. 50 statt 58 px, rund 14 Prozent
                  leiser - immer noch der Grad, den ein Enterprise-Produkt
                  fuer eine Kapitelueberschrift traegt.

     Die Fliesstextgrade bleiben unveraendert: der Abstand entsteht durch
     leisere Ueberschriften, nicht durch kleinere Copy. */
  --h-page:     72px;
  --h-pagesub:  62px;   /* H1 der Unterseiten */
  --h-major:    58px;
  --h-section:  50px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.55;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand-text);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Die haftende Kopfzeile darf ein Sprungziel nicht verdecken. */
main [id] { scroll-margin-top: calc(var(--head) + 20px); }

/* Nur fuer die Vorlesereihenfolge sichtbar. Die Proof-Leiste traegt ihre
   Ueberschrift nicht im Bild - dort identifiziert das Logo den Absender -,
   die Gliederung des Dokuments braucht sie trotzdem. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Kopfzeile - haftend
   Eine Zeile, 72 px, reines Weiss, eine Haarlinie. Sie haftet ohne
   Zustandswechsel: kein Schatten beim Scrollen, keine Verkleinerung, keine
   Animation, kein JavaScript. Die Flaeche ist deckend, damit unter ihr
   nichts durchscheint - ein Backdrop-Filter waere hier zusaetzliche
   Rechenlast ohne sichtbaren Gewinn.

   Vier Ziele links, der Weg zum Termin rechts. Der Weg rechts ist kein
   zweites Konversionsziel: er zeigt auf denselben Abschlussbereich wie der
   Hero. Er traegt deshalb keine Schaltflaeche - nur Graphit statt
   Fliesstextfarbe unterscheidet ihn von den vier Zielen.
   ========================================================================= */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.masthead__inner {
  display: flex;
  align-items: center;
  height: var(--head);
  gap: 56px;
}
.masthead__action {
  margin-left: auto;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.masthead__action:hover { border-bottom-color: var(--brand); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark__mark {
  width: 13px;
  height: 13px;
  background: var(--brand);
  border-radius: var(--radius);
}
.masthead__nav {
  display: flex;
  gap: 40px;
  font-size: 18px;
  white-space: nowrap;
}
.masthead__nav a {
  color: var(--ink-body);
  text-decoration: none;
  padding-block: 6px;
}
.masthead__nav a:hover { color: var(--ink); }

/* =========================================================================
   Bereich 1 - Hero
   Textzentriert, ohne Produktgrafik. Kategorie, Behauptung, Einordnung,
   Problem-Cue, zwei Wege.

   Die Flaeche: Kopfzeile und Hero lagen zuvor auf demselben Weiss und damit
   in demselben Raum. Der Hero traegt dieselbe Markenflaeche wie der
   Abschluss, eine Stufe leiser gestellt - die Seite oeffnet und schliesst
   auf Mint, alles Produkthafte dazwischen liegt auf Papier und Grau. Der
   Wechsel ist mit rund 5 Prozent Sattheit klein genug, um die Ruhe des Hero
   nicht anzutasten, und gross genug, um die Kopfzeile als eigene weisse
   Ebene stehen zu lassen.
   ========================================================================= */
.hero {
  /* V4: Der Hero traegt denselben Aufbau wie V3, aber weniger Bauhoehe.
     Die Vorfassung mass 1257 px und schob den Durchlauf unter den Fold.
     Gekuerzt wurde ausschliesslich an Luft und am Bauteil - nicht an der
     Schrift: H1, Einordnung und Schritte stehen unveraendert auf ihren
     Lesegroessen. */
  padding-block: 46px 34px;
  text-align: center;
  background: var(--herofield);
}
/* Zwei gesetzte Zeilen. Die laengste misst bei 76 px rund 840 px und steht
   damit mit reichlich Rand innerhalb der 1152-px-Satzbreite. Zwei Saetze,
   zwei Zeilen, gleiche Laenge - der Block steht als Rechteck und nicht als
   Dreieck: das ist der ruhigere Satz und der Grund, warum die kuerzere
   Behauptung auch typografisch besser liegt als die von V3. */
.hero__title {
  margin: 0 auto;
  max-width: 1152px;
  font-family: var(--display);
  font-size: var(--h-page);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.034em;
  color: var(--ink);
}
/* Die eine Einordnung unter der Behauptung - es gibt keine zweite. Ein Satz
   in zwei Zeilen, 19 px in einem 720-px-Satz. Sie nennt den Mechanismus;
   woraus die Fachlogik besteht, steht auf der Buehne. */
.hero__lede {
  margin: 22px auto 0;
  max-width: 720px;
  font-size: 19px;
  line-height: 1.58;
  color: var(--ink-body);
  text-wrap: pretty;
}
/* Die Positionierung. V3 stellte sie auf 20 px in voller Graphitfarbe -
   damit stand sie ueber der Einordnung und las als zweite Unterzeile. Jetzt
   17 px im Displayschnitt und in der Fliesstextfarbe: dieselbe Stimme, eine
   Stufe leiser. Sie traegt Vertrauen, keinen Rang. */
.hero__stance {
  margin: 12px auto 0;
  max-width: 720px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink-body);
  text-wrap: balance;
}
/* Der Abstand zu den Wegen ist der groesste im Hero: er trennt das Lesen
   vom Handeln. */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 28px;
}
/* Der Rahmen des ersten Weges. Deutlich nachgeordnet, aber auf Lesegroesse -
   eine Mikrozeile senkt die Huerde nicht, die sie senken soll. */
.hero__terms {
  margin: 14px auto 0;
  max-width: 780px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-quiet);
  text-wrap: pretty;
}
.hero__terms span {
  margin-inline: 9px;
  color: var(--brand-text);
}

/* =========================================================================
   Der Mechanismus im Hero
   Ein Vorgang laeuft von seinem Ausloeser bis in die Personalakte und endet
   im Abschluss. Sieben Zustaende, 600 px breit, rund 300 px hoch - ein
   kompaktes Produktobjekt, kein zweites Product Theatre.

   Kein Fensterrahmen, keine Schaltflaechen, keine Eingabefelder, kein
   Cursor, kein Dashboard: das Bauteil ist eine gesetzte Liste auf Papier.
   Was es zeigt, ist die Reihenfolge und der Wechsel der Zustaendigkeit -
   beides traegt der Aenderungsbalken links, dasselbe Bauteil wie auf der
   Buehne und in der Einwandbehandlung.

   Zustandsmodell
   --------------
   Jeder Schritt traegt data-state mit pending, active oder done. Der
   Grundzustand des Markups ist done: ohne JavaScript und bei reduzierter
   Bewegung steht der Vorgang vollstaendig und fertig da. Erst wenn das
   Skript animieren darf, setzt es data-anim="on" auf die Karte - alle
   Regeln des Laufs haengen an diesem Attribut und greifen sonst nicht.

   Der Zustand steht nie nur in der Farbe: die Marke am Balken ist im
   Wartezustand ein leerer Ring, im aktiven Schritt ein gefuellter Punkt mit
   Ring und im erledigten Schritt ein Haken.
   ========================================================================= */
.runthrough {
  /* 540 statt 600: bei 600 px endete die laengste Zeile rund 100 px vor der
     rechten Kante und die Karte las als angeschnittene Flaeche statt als
     Objekt. 540 px ist die Breite, bei der die laengste Zeile das Blatt
     traegt. */
  max-width: 540px;
  margin: 30px auto 0;
  background: var(--paper);
  border-radius: var(--radius);
  text-align: left;
  overflow: hidden;
  /* In den Grundton eingefaerbt, kein schwarzer Schlagschatten - dieselbe
     Behandlung wie die Blaetter auf der Buehne. */
  box-shadow: 0 10px 34px rgba(20, 21, 31, 0.09);
}

/* Der Balken. Zwei Lagen: unten die ruhige Spur, darueber der eingefaerbte
   Fortschritt, der von oben aufgedeckt wird. Die Farbe des Fortschritts sagt,
   wer handelt - Graphit im ersten und im letzten Schritt, wo das HR-System
   arbeitet, Mint in den vier Schritten dazwischen. Die harten Farbstopps
   sitzen auf den Sechsteln und damit genau auf den Schrittgrenzen.

   Aufgedeckt wird mit clip-path und nicht mit scaleY: eine Skalierung wuerde
   den Farbverlauf stauchen und die Stopps von den Schrittgrenzen schieben. */
.runthrough__steps {
  position: relative;
  margin: 0;
  padding: 14px 30px 14px 58px;
  list-style: none;
}
.runthrough__steps::before,
.runthrough__steps::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 14px;
  bottom: 14px;
  width: 4px;
}
.runthrough__steps::before { background: var(--line); }
.runthrough__steps::after {
  background: linear-gradient(
    to bottom,
    var(--ink-body) 0       16.667%,
    var(--brand)    16.667% 83.333%,
    var(--ink-body) 83.333% 100%
  );
}
/* Im Lauf wird der Balken von oben aufgedeckt. --rt-fill ist der Anteil, der
   sichtbar ist; das Skript setzt ihn beim Schrittwechsel. */
[data-anim="on"] .runthrough__steps::after {
  clip-path: inset(0 0 calc(100% - var(--rt-fill, 0%)) 0);
  transition: clip-path 0.5s cubic-bezier(0.32, 0.72, 0.24, 1);
}

.runthrough__step,
.runthrough__done {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 18px;
  /* Die Farbrolle des Schritts. Sie faerbt Marke und Balkenabschnitt, damit
     die Zuordnung an einer Stelle steht und nicht an dreien. --halo ist der
     zweite Ring des aktiven Schritts. */
  --role: var(--brand);
  --halo: rgba(59, 215, 162, 0.28);
}
.runthrough__step { padding: 5px 0; }
.runthrough__step--hr {
  --role: var(--ink-body);
  --halo: rgba(74, 78, 96, 0.16);
}

/* Die Marke sitzt mittig auf dem Balken. Sie ist die zweite, farbfreie
   Lesart des Zustands - drei unterscheidbare Formen, nicht drei Farben:

     wartend    offener Ring
     aktiv      gefuellte Scheibe mit einem zweiten, weichen Ring
     erledigt   gefuellte Scheibe

   Ein Haken war die naheliegende Form fuer "erledigt" und ist verworfen:
   bei 16 px Marke bleibt fuer ihn eine 12-px-Flaeche, in der ein 2-px-Strich
   als Kerbe liest und nicht als Zeichen. Die Scheibe ist bei dieser Groesse
   die ruhigere und die eindeutigere Form. */
.runthrough__marker {
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border: 2px solid #CFD1D8;
  border-radius: 50%;
  background: var(--paper);
}

/* Wer handelt. Dieselbe Rolle und derselbe Grad wie die Feldbezeichnungen
   auf der Buehne, und stets kleiner als die Handlung daneben. */
.runthrough__actor {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-text);
}
.runthrough__step--hr .runthrough__actor { color: var(--ink-quiet); }
.runthrough__event {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* Das Abschlussband ist der siebte Zustand. Dunkelgruen steht auf der ganzen
   Seite ausschliesslich fuer den abgeschlossenen Vorgang. Keine Zeitangabe -
   Begruendung im Markup und in hero-animation-decisions.md. */
.runthrough__done {
  margin: 0;
  padding: 13px 30px 13px 58px;
  background: var(--secured);
  --role: #FFFFFF;
  --halo: rgba(255, 255, 255, 0.26);
}
/* Die Schritte liegen im eingerueckten Listenkoerper, das Abschlussband
   liegt am Kartenrand. Die Marke haengt deshalb an beiden Stellen an einer
   anderen Bezugskante, steht aber auf derselben senkrechten Achse wie der
   Balken darueber. */
.runthrough__done .runthrough__marker { left: 24px; }
.runthrough__done .runthrough__actor { color: #A9D6C3; }
.runthrough__done .runthrough__event { color: #FFFFFF; font-weight: 700; }

/* --- Der Grundzustand: der Vorgang steht fertig ---------------------------
   Er gilt ohne JavaScript, bei reduzierter Bewegung und in jedem Browser,
   der data-Attribute kennt. Alle Schritte sind erledigt, der Balken ist
   voll, das Abschlussband traegt seine Farbe. */
.runthrough__step[data-state="done"] .runthrough__marker,
.runthrough__done[data-state="done"] .runthrough__marker {
  border-color: var(--role);
  background: var(--role);
}

/* --- Der Lauf ------------------------------------------------------------
   Nur unter data-anim="on". Drei Zustaende, drei Lesarten: der wartende
   Schritt tritt zurueck, der aktive steht voll im Bild, der erledigte
   bleibt ruhig stehen. Kein Blinken, kein Sprung, kein Bounce - bewegt wird
   ausschliesslich Deckkraft und Farbe. */
[data-anim="on"] .runthrough__step,
[data-anim="on"] .runthrough__done,
[data-anim="on"] .runthrough__marker,
[data-anim="on"] .runthrough__event,
[data-anim="on"] .runthrough__actor {
  transition:
    opacity 0.4s ease,
    color 0.4s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
/* Der wartende Schritt tritt zurueck, aber er verschwindet nicht: er bleibt
   lesbar. Eine Abdunklung ueber Deckkraft war die naheliegende Loesung und
   ist verworfen - bei 42 Prozent faellt der Kontrast der Zeile unter das
   Mass, das lesbarer Text braucht, und die Karte flackert bei jedem
   Schrittwechsel. Der Unterschied liegt deshalb in der Farbe der Zeile und
   in der Form der Marke, nicht in ihrer Sichtbarkeit. */
[data-anim="on"] .runthrough__step[data-state="pending"] .runthrough__event { color: var(--ink-quiet); }
[data-anim="on"] .runthrough__step[data-state="pending"] .runthrough__actor { color: var(--ink-quiet); }
[data-anim="on"] .runthrough__step[data-state="pending"] .runthrough__marker,
[data-anim="on"] .runthrough__done[data-state="pending"] .runthrough__marker {
  border-color: #CFD1D8;
  background: var(--paper);
  box-shadow: none;
}

[data-anim="on"] .runthrough__step[data-state="active"] .runthrough__marker,
[data-anim="on"] .runthrough__done[data-state="active"] .runthrough__marker {
  border-color: var(--role);
  background: var(--role);
  box-shadow: 0 0 0 4px var(--halo);
}

[data-anim="on"] .runthrough__step[data-state="done"] .runthrough__event { color: var(--ink-body); }

/* Das Abschlussband wartet auf hellem Grund und traegt sein Dunkelgruen erst,
   wenn der Vorgang es erreicht hat. Der Farbwechsel ist die Aussage. */
[data-anim="on"] .runthrough__done[data-state="pending"] {
  background: var(--ground);
}
[data-anim="on"] .runthrough__done[data-state="pending"] .runthrough__actor { color: var(--ink-quiet); }
[data-anim="on"] .runthrough__done[data-state="pending"] .runthrough__event { color: var(--ink-quiet); }

/* Die Kennzeichnung der Beispieldarstellung, ausserhalb des Blattes und in
   derselben Rolle wie unter der Buehne. Sie bleibt und sie bleibt lesbar:
   eine konzeptuelle Darstellung muss als solche erkennbar sein, und das
   traegt keine Mikroschrift. Gegenueber V3 ist sie eine Zeile kuerzer und
   einen Grad kleiner - im Abschlussband unterzubringen war erwogen und
   verworfen, dort brach sie in zwei Zeilen und liess das Band wachsen. */
.runthrough__note {
  margin: 12px auto 0;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* =========================================================================
   Der geteilte Hero und die Vorgangskarte

   Aufbau und Bewegung stammen aus der Entwurfsvorlage (Homepage-Design
   1320, static/homepage.html): links der Satz, rechts eine weisse Karte mit
   Kopf, senkrechter Zeitachse und Fusszeile. Uebernommen sind Struktur,
   Abstaende, Symbolgroessen, Reihenfolge und die Zeiten der Bewegung.

   Nicht uebernommen ist der Radius der Vorlage (24 px): diese Website
   kennt genau eine Radiusstufe (--radius, 2 px), und eine einzelne stark
   gerundete Karte stuende neben jedem anderen Bauteil der Seite als
   Fremdkoerper. Die Pille bleibt eine Pille - das ist eine Form, keine
   Radiusstufe.

   Die Farben sind die Tokens dieser Seite. Sie decken sich ohnehin fast
   vollstaendig mit der Vorlage: --brand ist zeichengleich deren
   --brand-green, --line deren --border.
   ========================================================================= */
.hero--split { text-align: left; }
.hero__grid {
  display: grid;
  /* Dasselbe Verhaeltnis wie in der Vorlage: der Satz etwas schmaler als
     die Karte, damit die Karte den Blick traegt. */
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: center;
}
/* Im geteilten Hero stehen die Saetze links und nicht mehr in der Mitte. */
.hero--split .hero__title,
.hero--split .hero__lede,
.hero--split .hero__stance,
.hero--split .hero__terms { margin-inline: 0; max-width: 100%; }
.hero--split .hero__actions { justify-content: flex-start; }
/* Der Seitengrad --h-page (72 px) ist fuer die volle Satzbreite gesetzt. In
   der halben Spalte des geteilten Heros zerlegt er die beiden Saetze in vier
   Zeilen und nimmt ihnen damit genau das, was sie tragen soll: zwei Saetze,
   zwei Zeilen. Der Grad richtet sich hier deshalb nach der Spalte - er
   bleibt der lauteste der Seite, nur nicht mehr der der vollen Breite. */
.hero--split .hero__title {
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1.06;
}

.herocard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(20, 21, 31, 0.12);
  overflow: hidden;
}
.herocard__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.herocard__brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Die echte Wortmarke aus assets/brand/ statt der eingebetteten Grafik der
   Vorlage. Gleiche optische Hoehe, keine 40 kB Base64 im Dokument. */
.herocard__brand {
  height: 20px;
  width: auto;
  flex: none;
  display: block;
}
.herocard__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brandfield);
  color: var(--brand-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.herocard__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
  flex: none;
}
.herocard__case {
  margin: 11px 0 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}

.herocard__flow { position: relative; padding: 16px 24px; }
/* Die ruhige Fuehrungslinie und die gruene Fortschrittslinie liegen exakt
   uebereinander, mittig unter den Symbolen (24 px Innenrand + 16 px halbe
   Symbolbreite = 40 px, minus 1 px halbe Linienbreite). */
.herocard__rail,
.herocard__fill {
  position: absolute;
  left: 39px;
  top: 46px;
  bottom: 46px;
  width: 2px;
  border-radius: 2px;
}
.herocard__rail { background: var(--line); }
.herocard__fill { background: var(--brand); transform-origin: top; }

.herocard__steps { margin: 0; padding: 0; list-style: none; }
.herocard__step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 11px 0;
}
.herocard__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Der weisse Ring schneidet die Linie hinter dem Symbol frei. */
  box-shadow: 0 0 0 4px var(--paper);
  position: relative;
  z-index: 1;
  background: var(--brandfield);
  color: var(--brand-text);
}
/* Die beiden Schritte des HR-Systems stehen neutral - der Wechsel der
   Zustaendigkeit ist die Aussage der Karte. */
.herocard__step--hr .herocard__icon { background: var(--ground); color: var(--ink-quiet); }
.herocard__text { min-width: 0; }
.herocard__actor {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-text);
}
.herocard__step--hr .herocard__actor { color: var(--ink-quiet); }
.herocard__event {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}
.herocard__check { display: inline-flex; color: var(--brand); }
.herocard__step--hr .herocard__check { color: #C4C8D2; }

.herocard__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 15px 24px;
  border-top: 1px solid var(--line);
  background: var(--ground);
}
.herocard__result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-text);
}
.herocard__result span { margin-inline: 2px; }
.herocard__note {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* --- Bewegung ------------------------------------------------------------
   Grundzustand ist der fertige Vorgang: ohne JavaScript und bei reduzierter
   Bewegung steht die Karte vollstaendig da. Erst data-anim="on" schaltet den
   Lauf frei.

   Zeiten der Vorlage: Einblendung 0,5 s, Schrittabstand 0,45 s,
   Fortschrittslinie 2,7 s, Puls 1,8 s.

   Warum ein einziger Takt statt Vorlagenwerten plus Neustart:
   Die Vorlage laeuft genau einmal ("both") und bleibt stehen. Fuer die
   Wiederholung lag es nahe, die Bewegung per Skript zu entfernen und neu
   zu setzen. Das ist verworfen - wird eine laufende Animation entfernt,
   springt Chromium ohne Uebergang auf den Ausgangswert zurueck (nachgemessen:
   Fortschrittslinie 1 -> 0 innerhalb eines Bildes). Genau das waere das
   Blitzen, das nicht auftreten soll.

   Der ganze Takt steht deshalb in den Bildmarken selbst: Auftritt, Haltezeit
   und Ruecklauf sind Teil derselben Animation, die endlos laeuft. Dadurch
   gibt es keinen Neustart, der springen koennte.

   Takt: 6 s = 2,75 s Auftritt + 2,75 s Haltezeit + 0,5 s Ruecklauf.
   Umrechnung Sekunde -> Prozent: t / 6 s. Die Auftrittszeiten der Vorlage
   (0 / 0,45 / 0,9 / 1,35 / 1,8 / 2,25 s) stehen damit bei
   0 / 7,5 / 15 / 22,5 / 30 / 37,5 %, jeweils 8,333 % (0,5 s) lang.
   Alle sechs halten bis 91,667 % (5,5 s) und gehen bis 100 % zurueck. */
@keyframes herocard-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@keyframes herocard-step-1 {
  0%                { opacity: .2; transform: translateY(8px); }
  8.333%, 91.667%   { opacity: 1;  transform: none; }
  100%              { opacity: .2; transform: translateY(8px); }
}
@keyframes herocard-step-2 {
  0%, 7.5%          { opacity: .2; transform: translateY(8px); }
  15.833%, 91.667%  { opacity: 1;  transform: none; }
  100%              { opacity: .2; transform: translateY(8px); }
}
@keyframes herocard-step-3 {
  0%, 15%           { opacity: .2; transform: translateY(8px); }
  23.333%, 91.667%  { opacity: 1;  transform: none; }
  100%              { opacity: .2; transform: translateY(8px); }
}
@keyframes herocard-step-4 {
  0%, 22.5%         { opacity: .2; transform: translateY(8px); }
  30.833%, 91.667%  { opacity: 1;  transform: none; }
  100%              { opacity: .2; transform: translateY(8px); }
}
@keyframes herocard-step-5 {
  0%, 30%           { opacity: .2; transform: translateY(8px); }
  38.333%, 91.667%  { opacity: 1;  transform: none; }
  100%              { opacity: .2; transform: translateY(8px); }
}
@keyframes herocard-step-6 {
  0%, 37.5%         { opacity: .2; transform: translateY(8px); }
  45.833%, 91.667%  { opacity: 1;  transform: none; }
  100%              { opacity: .2; transform: translateY(8px); }
}
/* Die Fortschrittslinie braucht die 2,7 s der Vorlage = 45 % des Takts. */
@keyframes herocard-line {
  0%                { transform: scaleY(0); }
  45%, 91.667%      { transform: scaleY(1); }
  100%              { transform: scaleY(0); }
}
/* Das Ergebnis erscheint, sobald die Linie unten angekommen ist. */
@keyframes herocard-result {
  0%, 45%           { opacity: 0; }
  52.5%, 91.667%    { opacity: 1; }
  100%              { opacity: 0; }
}

.herocard[data-anim="on"] .herocard__pulse {
  animation: herocard-pulse 1.8s ease-in-out infinite;
}
.herocard[data-anim="on"] .herocard__step,
.herocard[data-anim="on"] .herocard__fill,
.herocard[data-anim="on"] .herocard__result {
  animation-duration: 6s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-iteration-count: infinite;
}
.herocard[data-anim="on"] .herocard__step:nth-child(1) { animation-name: herocard-step-1; }
.herocard[data-anim="on"] .herocard__step:nth-child(2) { animation-name: herocard-step-2; }
.herocard[data-anim="on"] .herocard__step:nth-child(3) { animation-name: herocard-step-3; }
.herocard[data-anim="on"] .herocard__step:nth-child(4) { animation-name: herocard-step-4; }
.herocard[data-anim="on"] .herocard__step:nth-child(5) { animation-name: herocard-step-5; }
.herocard[data-anim="on"] .herocard__step:nth-child(6) { animation-name: herocard-step-6; }
.herocard[data-anim="on"] .herocard__fill   { animation-name: herocard-line; }
.herocard[data-anim="on"] .herocard__result { animation-name: herocard-result; }

@media (prefers-reduced-motion: reduce) {
  /* Absicherung, falls die Einstellung erst waehrend des Laufs gesetzt
     wird: alles steht sofort im fertigen Zustand. */
  .herocard .herocard__step,
  .herocard .herocard__fill,
  .herocard .herocard__result,
  .herocard .herocard__pulse {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Bei reduzierter Bewegung startet das Skript den Lauf nicht - die Karte
   bekommt kein data-anim und bleibt im Grundzustand. Diese Regel ist die
   Absicherung fuer den Fall, dass die Einstellung erst waehrend des Laufs
   gesetzt wird: dann steht der Lauf sofort still. */
@media (prefers-reduced-motion: reduce) {
  [data-anim="on"] .runthrough__step,
  [data-anim="on"] .runthrough__done,
  [data-anim="on"] .runthrough__marker,
  [data-anim="on"] .runthrough__event,
  [data-anim="on"] .runthrough__actor,
  [data-anim="on"] .runthrough__steps::after { transition: none; }
}

.cta {
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-inline: 32px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.cta:hover { background: #000000; }
.cta:active { transform: translateY(1px); }

.textlink {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-text);
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
  white-space: nowrap;
}
.textlink:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* =========================================================================
   Gemeinsame Kapitelbauteile
   ========================================================================= */
/* Der Normalfall. Der Grad ist leiser als vorher, der Satz bleibt dicht:
   1.06 statt 1.08, damit die Ueberschrift auch kleiner als ein Block steht
   und nicht als zwei einzelne Zeilen zerfaellt. */
.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--h-section);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink);
}
/* Der Produktmoment. Nur dort, wo der Bereich das Produkt tatsaechlich
   vorfuehrt - auf der Startseite die Buehne und das System. Zwei pro Seite
   sind die Obergrenze; ab dem dritten ist der Rang wieder keiner. */
.section-title--major {
  font-size: var(--h-major);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.section-kicker {
  margin: 0 0 26px;
  max-width: 62ch;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--brand-text);
}
.section-lede {
  margin: 30px 0 0;
  max-width: 68ch;
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-body);
}
/* Die eine Aussage, die der Leser aus einem Bereich mitnehmen soll, wenn er
   nur eine Zeile liest. Displayschnitt, volle Farbe, ohne eigenes Bauteil. */
.section-lede--strong {
  margin-top: 26px;
  max-width: 60ch;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--ink);
}
/* Die Kennzeichnung der Beispieldarstellung ist Fliesstext, keine
   Mikrozeile. 18 px ist der kleinste Grad erklaerender Copy auf der Seite. */
.plate-note {
  margin: 28px 0 0;
  max-width: 86ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.scene svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================================
   Bereich 2 - Kundenlogo-Leiste

   Unmittelbar nach dem Hero, an der Stelle, an der bisher die
   B&O-Proof-Leiste stand. Weiss - der Hero liegt auf leiser Markenflaeche,
   die Leiste setzt sich davon nur durch die Flaeche ab, ohne Linie.

   Eine Zeile, sechs Plaetze, sehr viel horizontaler Freiraum. Keine
   Karten, keine Rahmen, keine Kacheln, kein Slider, keine Kennzahl, kein
   Testimonial und keine Ueberschrift im Sektionsgrad: die Zeile darueber
   ist eine Beschriftung, kein Kapitel. Bauhoehe rund 200 px.

   Die Plaetze tragen die sechs echten Wortmarken der oeffentlichen
   Startseite, in deren Reihenfolge und unter deren Ueberschrift. Die
   Veroeffentlichung ist freigegeben; es stehen keine Platzhalter und kein
   Hinweis auf einen Freigabestand mehr in der Leiste.
   ========================================================================= */
.logos {
  background: var(--paper);
  padding-block: 38px 18px;
}
/* Beschriftung, nicht Kapiteltitel: ein Grad ueber der Fusszeile, im
   Fliesstextschnitt. Sie soll die Zeile einordnen und nicht mit ihr
   konkurrieren - bei 15 px und in der leisesten Farbrolle war sie dafuer
   aber zu muehsam zu lesen. Jetzt 17 px in der Fliesstextfarbe: eine
   Beschriftung bleibt sie durch Grad und Schnitt, nicht durch Blaesse. */
.logos__intro {
  margin: 0;
  text-align: center;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.004em;
  color: var(--ink-body);
}
/* Der Freiraum ist das eigentliche Gestaltungsmittel dieser Leiste: die
   Zeile steht enger als die Satzbreite und verteilt den Rest zwischen die
   Plaetze. Kein Wrap - sechs Plaetze bleiben eine Zeile. */
.logos__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* Die Plaetze sind um rund ein Sechstel gewachsen. Damit der verteilte
     Freiraum zwischen ihnen genau so gross bleibt wie zuvor, waechst die
     Zeile im selben Mass auf die volle Satzbreite mit - sonst wuerde die
     Vergroesserung den Abstand auffressen und aus der Leiste eine Reihe
     werden. Rechnerisch bleiben rund 58 px zwischen zwei Plaetzen. */
  max-width: 1152px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
.logos__slot {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 38px;
}
/* Die echten Wortmarken. Einheitliche Zeilenhoehe statt einheitlicher
   Breite: jedes Logo behaelt seine Originalproportion, deshalb wird nur
   die Hoehe gesetzt.

   38 px sind aus der bestehenden, freigegebenen Fassung auf /kontakt/
   uebernommen, die dieselben sieben Dateien fuehrt. Der Grund fuer genau
   diesen Wert liegt in den Dateien: alle liegen auf einer einheitlichen
   Flaeche von 400 x 125 und tragen dort unterschiedlich viel Innenrand.
   Die gesetzte Hoehe ist deshalb die Hoehe der Flaeche, nicht die der
   Marke - bei 32 px stand die Wortmarke nur noch rund 20 px hoch und die
   zweizeilige der Handwerkskammer war nicht mehr lesbar.

   Die Dateien sind nicht freigestellt, sondern weiss hinterlegt.
   mix-blend-mode: multiply nimmt diese Flaeche heraus, ohne die Datei zu
   veraendern - Weiss multipliziert den Untergrund mit 1 und verschwindet.
   Graustufe und leicht reduzierte Deckkraft halten die Leiste als leises
   Vertrauenssignal hinter der Buehne, wie auf /kontakt/. */
.logos__slot img {
  height: 38px;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.7;
  mix-blend-mode: multiply;
}

/* =========================================================================
   Bereich 5 - B&O Customer Proof

   Verschoben aus der Position direkt unter dem Hero. Dort war der Bereich
   auf eine Leiste von rund 230 px zurueckgebaut, weil er eine Behauptung
   stuetzen musste, die der Leser gerade erst gelesen hatte. Jetzt steht er
   nach der Buehne - der Beweis trifft auf ein gezeigtes Produkt - und darf
   die Bauform einer eigenen Sektion tragen.

   Flaeche: warmes Papier, genau einmal auf der ganzen Seite. Dies ist der
   einzige Bereich, in dem ein Mensch und ein reales Unternehmen stehen und
   keine Logik. Neu liegt er zwischen zwei weissen Bereichen; der
   Flaechenwechsel setzt die Zaesur, deshalb traegt der Bereich danach
   keine Linie mehr.

   Vier Ebenen in der beauftragten Reihenfolge, gestapelt statt in Spalten:
   Logo 52 px · Zitat 46 px · Person 24 px · Kennzahlenwert 22/28 px.
   Das Zitat bleibt unter dem Sektionsgrad von 58 px - die Referenz ist der
   staerkste Beweis der Seite, aber nicht ihr wichtigstes Bild. Das bleibt
   die Buehne darueber.

   Kein Testimonial-Bauteil: keine Karte, keine Sterne, keine Bewertung,
   kein Karussell, kein runder Avatar, kein Trust-Badge, kein Zierstrich
   und keine haengenden Anfuehrungszeichen.
   ========================================================================= */
.proof {
  background: var(--prooffield);
  padding-block: 100px 104px;
}
/* Ein linksbuendiger Stapel ueber die volle Satzbreite. Nur das Zitat steht
   enger: es soll auf drei Zeilen brechen und nicht auf zwei sehr lange
   laufen. Die Belegzeile darunter braucht dagegen die ganze Breite, sonst
   rutscht der Weg in die Referenz unter die Kennzahlen. */
.proof__band {
  max-width: 1152px;
}

/* Der Absender. Das Logo steht in Originalproportion und ungefaerbt, ohne
   Farbflaeche und ohne Rahmen: es identifiziert das Zitat, es wirbt
   nicht. */
.proof__logo {
  display: block;
  width: auto;
  height: 46px;
}

/* Das Zitat traegt keine haengenden Anfuehrungszeichen und keinen
   Zierstrich: die Auszeichnung liegt allein in Groesse und Schnitt.
   52 statt 46 px - der Satz ist der Beweis dieses Bereichs und stand
   gegenueber Logo, Portrait und Kennzahlen noch zu nah an ihnen. Die
   Satzbreite waechst im gleichen Mass auf die Bandbreite mit, damit der
   groessere Grad denselben Dreizeiler ergibt und nicht eine vierte Zeile.
   Er bleibt unter dem Sektionsgrad von 58 px: staerkster Beweis der Seite,
   nicht ihr wichtigstes Bild. */
.proof__quote { margin: 36px 0 0; max-width: 1152px; }
/* Das Zitat ist keine Kapitelueberschrift, sondern eine fremde Stimme in
   einer Leiste. Vorher stand es auf 52 px und damit lauter als jeder
   Bereich der Seite - mit dem neuen Normalgrad von 50 px waere es der
   lauteste Satz nach dem Hero geworden. Es steht deshalb bewusst unter dem
   Kapitelgrad: eine Leiste, die belegt, kein Bereich, der behauptet. */
.proof__quote p {
  margin: 0;
  font-family: var(--display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Die Belegzeile mit den Kennzahlen und dem Weg in die Referenz. Sie
   traegt eine Haarlinie, damit sie sichtbar zum Bereich gehoert und
   trotzdem die letzte, leiseste Ebene ist. Keine Karten, keine Rahmen,
   keine Balken, keine Sterne. */
.proof__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--line-warm);
}

/* Das Portrait ist auf Weiss freigestellt; auf dem warmen Papier braucht es
   deshalb eine eigene weisse Flaeche, damit es keine sichtbare Bildkante
   bekommt. Die minte Kante ist dasselbe Bauteil, das auf der Buehne Regel
   und Ergebnis traegt.
   Kein Beschnitt, kein Kreis, kein Filter, kein Verlauf ueber dem Gesicht. */
.proof__person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0 0;
}
.proof__person img {
  display: block;
  width: 104px;
  height: auto;
  background: var(--paper);
  border-left: 3px solid var(--brand);
  padding: 4px 6px;
}
.proof__name {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.proof__role {
  display: block;
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink-body);
}

/* Vier belegte Zahlen als eine gelesene Zeile, nicht als vier Kacheln.
   Wert und Bezeichnung stehen nebeneinander statt uebereinander: der Beleg
   ist ein Satz, den man in einem Zug liest, keine Kennzahlenwand. Die Zeile
   steht zuletzt - nach Logo, Zitat und Person - und traegt damit die
   Reihenfolge des Auftrags. */
.proof__figures {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 0;
  margin: 0;
}
.proof__figures > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* Der Trenner gehoert zur Zeile, nicht zum Wert: er steht in der warmen
   Linienfarbe der Leiste und traegt deshalb kein Gewicht. */
.proof__figures > div + div::before {
  content: "·";
  margin-inline: 16px;
  color: #C4B9A6;
}
.proof__figures dt {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink);
}
/* Genau ein Wert traegt den groesseren Grad. Vier gleich laute Zahlen sind
   eine Aufzaehlung; eine laute und drei leise sind eine Aussage mit Beleg. */
.proof__figures > div:first-child dt {
  font-size: 28px;
  letter-spacing: -0.026em;
}
.proof__figures dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-quiet);
}
.proof__link {
  margin-left: auto;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid #A9DFC8;
  padding-bottom: 3px;
}
.proof__link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* =========================================================================
   Bereich 3 - Das Problem
   Rein typografisch und bewusst deutlich kompakter als die Buehne danach:
   das Problem braucht kein Bild, es braucht Zustimmung. Die drei Cues
   tragen dieselbe Randmarkierung wie die Bauteile der Buehne, hier in
   Graphit - sie beschreiben den heutigen Zustand, nicht die Logik.
   ========================================================================= */
.problem {
  background: var(--ground);
  padding-block: 96px 100px;
}
/* Die zweite Zeile dieser Ueberschrift ist die laengste der Seite. Bei 58 px
   mass sie rund 1158 px und brach um sechs Pixel in eine dritte Zeile -
   deshalb stand hier frueher eine Ausnahme auf 54 px. Mit dem Normalgrad von
   50 px liegt dieselbe Zeile bei rund 1000 px und passt ohne Ausnahme. Die
   Regel traegt den Fall jetzt selbst. */
.cues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 76px 0 0;
  padding: 0;
  list-style: none;
}
.cues li {
  padding-top: 26px;
  border-top: 1px solid var(--line-cool);
}
.cues h3 {
  position: relative;
  margin: 0;
  padding-left: 20px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.cues h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 20px;
  background: var(--ink);
}
.cues p {
  margin: 14px 0 0 20px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
}
/* Die eine Frage im Bereich. Sie steht zwischen Titel und Begruendung des
   dritten Cues, im Displayschnitt und in voller Farbe, und ist damit die
   einzige Zeile der drei Spalten, die nicht beschreibt, sondern fragt. Ein
   Fragezeichen mehr als einmal im Bereich waere Rhetorik; genau einmal ist
   die Stelle, an der aus einem Zustand ein Risiko wird. */
.cues__ask {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.cues .cues__ask + p { margin-top: 10px; }
/* Der Preis des Nichtstuns. Dasselbe Bauteil wie in der Einwandbehandlung,
   hier nur mit dem groesseren Abstand, den es nach einer dreispaltigen
   Reihe braucht: mit den 26 px des Grundbauteils haette es als vierter,
   angehaengter Cue gelesen statt als Schlussfolgerung aus den dreien. */
.problem__cost {
  margin-top: 54px;
  max-width: 64ch;
}

/* =========================================================================
   Bereich 4 - Product Theatre
   Das visuelle Zentrum der Seite. Eine einzige grosse Buehne, auf der alle
   fuenf Ansichten denselben Vorgang zeigen. Der Kopf steht links, damit er
   sich vom zentrierten Hero unterscheidet und die Buehne von links nach
   rechts liest.
   ========================================================================= */
.theatre {
  padding-block: 104px 108px;
}

/* Eine durchgehende Linie, auf der die Auswahl sitzt. Kein segmentiertes
   Bedienelement, keine Reiterleiste eines Fensters. Bei Platzmangel
   scrollt sie waagerecht, statt in eine zweite Zeile zu brechen. */
.tablist {
  display: flex;
  gap: 6px;
  margin: 56px 0 32px;
  border-bottom: 3px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
.tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 22px 14px;
  margin-bottom: -3px;
  border-bottom: 3px solid transparent;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-quiet);
  white-space: nowrap;
  cursor: pointer;
}
.tab:first-child { padding-left: 0; }
/* Wird eine Auswahl angeklickt, waehrend sie unter der haftenden Kopfzeile
   liegt, holt der Browser sie ins Bild. Der Abstand sorgt dafuer, dass sie
   dabei sauber unter der Kopfzeile landet statt halb dahinter. */
.tab { scroll-margin-top: calc(var(--head) + 16px); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* Die Detailcopy je Ansicht. Sie beantwortet, worauf man gerade sieht -
   die Buehne selbst zeigt es, der Satz benennt es. Sie haengt an derselben
   minten Randmarkierung wie die Bauteile auf der Buehne.
   Die feste Mindesthoehe haelt die Seitenlaenge beim Wechsel ruhig; ohne
   sie wuerde der Fuss der Seite bei jedem Klick springen.
   Ohne JavaScript bleibt die erste Ansicht sichtbar. */
.stage__notes {
  min-height: 92px;
  margin-top: 26px;
}
.stage__note {
  display: none;
  margin: 0;
  max-width: 84ch;
  padding-left: 22px;
  border-left: 3px solid var(--brand);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-body);
}
.stage__note b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#stage[data-panel="aenderung"] .stage__note[data-note="aenderung"],
#stage[data-panel="regeln"]    .stage__note[data-note="regeln"],
#stage[data-panel="freigabe"]  .stage__note[data-note="freigabe"],
#stage[data-panel="ergebnis"]  .stage__note[data-note="ergebnis"],
#stage[data-panel="abschluss"] .stage__note[data-note="abschluss"] { display: block; }

/* Die Regel in Wenn-Dann-Form, unter der Buehne.
   Kein Kasten, keine Karten, keine Monospace, kein Codeblock: die Zeilen
   sollen als Fachregel lesen und nicht als Konfigurationsdatei. Sie stehen
   deshalb im selben Satzbild wie der uebrige Text und werden nur durch den
   Winkel und die Haarlinie zwischen den Zeilen geordnet.

   Bedingung und Folge sind zwei Spalten und kein Fliesstext: nur so stehen
   die drei Winkel untereinander, und erst dadurch liest die Gruppe als
   Regelsatz statt als Aufzaehlung. */
.rules {
  margin-top: 56px;
  /* Fast der volle Satzspiegel: die laengste Folge - die Freigabe der
     zustaendigen Bereichsleitung - stand bei 1000 px hart an der rechten
     Kante ihrer Spalte. */
  max-width: 1100px;
}
.rules__label {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.rules__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: baseline;
  gap: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
/* Die Bedingung traegt die leisere Farbrolle, die Folge die volle: was gilt,
   ist Voraussetzung - was daraus folgt, ist die Aussage. */
.rules__if {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--ink-body);
}
/* Derselbe Winkel, den die Vorlagenregel auf der Buehne traegt: was links
   steht, hat rechts eine Folge. */
.rules__arrow {
  font-size: 21px;
  line-height: 1.4;
  color: var(--brand);
  text-align: center;
}
.rules__then {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--ink);
}
/* Der Satz, der die drei Zeilen begruendet. Er ist der Grund, warum die
   Regeln ueberhaupt auf der Seite stehen, und traegt deshalb dieselbe minte
   Randmarkierung wie die Detailcopy der Buehne. */
.rules__note {
  margin: 26px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--brand);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* =========================================================================
   Bereich 5 - Einwandbehandlung
   Liegt auf derselben weissen Flaeche wie das Beispiel und wird nur von
   einer Haarlinie getrennt: die Antwort gehoert zum Beispiel, nicht in
   einen neuen Raum. Danach nur noch ein ruhiges kompaktes Textband zu
   Anbindung und Betrieb. Keine Architekturzeichnung, keine Tabelle,
   keine Karten.
   ========================================================================= */
.enterprise {
  /* Die Haarlinie ist entfallen: der Bereich folgt jetzt nicht mehr auf die
     weisse Buehne, sondern auf das warme Papier der Referenz. Der
     Flaechenwechsel setzt die Zaesur, eine Linie darueber waere die
     zweite. */
  padding-block: 100px 104px;
}
.enterprise .scene { margin-top: 68px; }
/* Das Band steht bewusst ruhiger als die Komposition darueber: eine Zeile
   auf einer Trennlinie, keine zweite Aussage, keine Aufzaehlung. */
.enterprise__band {
  margin: 56px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  max-width: 84ch;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-body);
}
/* Die Zusicherung zur Kontrolle, als letzte Aussage des Bereichs. Sie steht
   eine Stufe groesser als das Band darueber und in voller Farbe: das Band
   nennt das Format der Anbindung, dieser Satz beantwortet die Frage, die die
   Komposition darueber ausloest. Dieselbe minte Randmarkierung wie die
   Detailcopy der Buehne und die Regelbegruendung - keine Flaeche, kein
   Rahmen, keine Kachel. */
.enterprise__control {
  margin: 38px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--brand);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* =========================================================================
   Bereich 6 - Employee Lifecycle
   Beweist ausschliesslich Produktbreite. Deshalb keine Buehne, keine
   Auswahl, keine Dokumente: nur Abschnitt, Vorgang und Abhaengigkeiten.
   ========================================================================= */
.lifecycle {
  background: var(--ground);
  padding-block: 100px 104px;
}
.lifecycle .scene { margin-top: 68px; }

/* =========================================================================
   Bereich 7 - Faehigkeiten
   Eine einzige durchgehende Strecke statt fuenf Featurekarten. Sie laeuft
   ueber die volle Satzbreite und an beiden Raendern aus: sie beginnt vor
   der ersten Faehigkeit und endet nach der letzten. Das ist die Aussage
   der Ueberschrift.
   ========================================================================= */
.system {
  padding-block: 104px 108px;
}
.system__scene { margin-top: 76px; }
.system .plate-note { margin-top: 40px; }

/* =========================================================================
   Bereich 8 - Vertrauen
   Kompakt, unmittelbar vor der Conversion. Keine Security-Seite, keine
   Badge-Sammlung, keine Siegel, keine Zertifizierungsaussage. Vier Punkte
   auf einer Linie, dieselbe Randmarkierung wie ueberall auf der Seite.

   Jeder Punkt traegt jetzt zwei Zeilen: worum es geht und was gilt. Vorher
   stand beides in einem Satz, der bei zwei der vier Punkte auf drei Zeilen
   umbrach und die Reihe uneben machte. Die Zweiteilung macht die vier
   Punkte auf einen Blick vergleichbar, ohne einen Punkt zu ergaenzen.
   Die vierte Spalte ist breiter: sie traegt drei Betriebsarten.
   ========================================================================= */
.trust {
  background: var(--ground);
  padding-block: 80px 84px;
}
/* Die vier Spalten sind bewusst verschieden breit: sie tragen verschieden
   lange Werte. Gleich breite Spalten haetten den vierten Punkt auf drei
   Zeilen gedrueckt und die Reihe wieder uneben gemacht. */
.trust__list {
  display: grid;
  grid-template-columns: 0.8fr 0.9fr 1.2fr 1.6fr;
  gap: 40px;
  margin: 48px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.trust__list li {
  position: relative;
  padding-left: 20px;
}
.trust__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
.trust__label {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-quiet);
}
.trust__value {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.trust__value span {
  margin-inline: 8px;
  color: var(--brand-text);
}
.trust__more {
  display: inline-block;
  margin-top: 40px;
}

/* =========================================================================
   Bereich 9 - Conversion
   Leichte Markenflaeche, zentriert, ein Ziel. Kein dunkler Banner.
   Rein typografisch aufgebaut: die vier Textelemente stehen in vier
   verschiedenen Groessen und drei Farbrollen. Deshalb braucht dieser
   Bereich weder Karten fuer die Nutzenpunkte noch eine Kalender- oder
   Personengrafik, um seine Reihenfolge lesbar zu machen.
   ========================================================================= */
.close {
  background: var(--brandfield);
  padding-block: 112px;
  text-align: center;
}
/* Der Abschluss ist ein Produktmoment, kein Kapitel: er traegt die Frage,
   mit der der Leser die Seite verlaesst, und bleibt deshalb auf dem
   groesseren Grad. Zusammen mit dem Hero klammert er die Seite. */
.close__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--h-major);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.close__lede {
  margin: 30px auto 0;
  max-width: 800px;
  font-size: 23px;
  line-height: 1.56;
  color: var(--ink-body);
  /* Zentrierter Satz braucht ausgeglichene Zeilen, sonst haengt die erste
     Zeile kuerzer als die folgenden. */
  text-wrap: balance;
}
/* Was der Interessent aus dem Termin mitnimmt. Groesser als die Einleitung,
   in Graphit statt in Fliesstextfarbe, im Displayschnitt. */
.close__promise {
  margin: 44px auto 0;
  max-width: 760px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* Was der Interessent mitnimmt. Drei Zeilen, keine Karten, keine Haken, keine
   Symbole - der Bereich bleibt rein typografisch. Der Block steht
   linksbuendig in der Mitte der zentrierten Flaeche: eine Aufzaehlung, die
   man Zeile fuer Zeile pruefen soll, darf nicht zentriert stehen, sonst
   flattern drei verschieden lange Saetze um eine gedachte Achse.
   Dieselbe minte Randmarkierung wie ueberall auf der Seite. */
.close__gains {
  display: grid;
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  margin: 42px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.close__gains li {
  max-width: 62ch;
  padding-left: 22px;
  border-left: 3px solid var(--brand);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-body);
}
.close__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 46px;
}
/* Die Zusicherung. Sie gehoert zum Weg und steht deshalb dicht darunter,
   im Fliesstextschnitt und in der Fliesstextfarbe: sie ist eine Auskunft,
   kein Verkaufsargument. Keine Karte, keine Flaeche, kein Rahmen. */
.close__assurance {
  margin: 30px auto 0;
  max-width: 700px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-body);
  /* Zentrierter Satz, dieselbe Behandlung wie die Einleitung darueber. */
  text-wrap: balance;
}
/* Der Rahmen des Termins. Kompakt, eine Zeile, zuletzt - aber nicht als
   Mikrozeile: 19 px und ohne die gesperrte Laufweite, die sie vorher wie
   eine Fussnote aussehen liess. Sie steht jetzt eine Farbrolle leiser als
   die Zusicherung darueber und mit deutlichem Abstand: beide Zeilen nennen
   den Termin, nur diese nennt sein Format. Ohne diesen Unterschied laesen
   sie als dieselbe Aussage zweimal. */
.close__meta {
  margin: 40px 0 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-quiet);
}
.close__meta span {
  margin-inline: 12px;
  color: var(--brand-text);
}
/* Der Ansprechpartner. Er steht hinter einer Haarlinie und mit dem groessten
   Abstand des Bereichs: er gehoert nicht mehr zum Weg, er sagt nur, mit wem
   man es zu tun hat, wenn man ihn geht. Kein Portrait - die Seite zeigt
   genau ein Gesicht, und das gehoert der Referenzkundin.
   Die Haarlinie ist schmaler als der Satzspiegel, damit der Block als
   Nachsatz liest und nicht als zehnter Bereich. */
.close__contact {
  max-width: 560px;
  margin: 64px auto 0;
  padding-top: 34px;
  border-top: 1px solid #CFE7DC;
}
.close__contact-label {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}
.close__contact-name {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.close__contact-role {
  margin: 6px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-body);
}
.close__contact-role span { margin-inline: 8px; color: var(--brand-text); }
/* Die beiden Wege zur Person. Sie tragen die Linkfarbe der Seite, aber nicht
   ihre Unterkante: ein zweiter unterstrichener Weg neben dem Textlink im
   Weg darueber haette zwei gleich laute Links im selben Bereich ergeben. */
.close__contact-ways {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-quiet);
}
.close__contact-ways a {
  color: var(--brand-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.close__contact-ways a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.close__contact-ways span { margin-inline: 10px; }

/* =========================================================================
   Fusszeile - Seitenrahmen, kein zehnter Bereich
   ========================================================================= */
.foot {
  border-top: 1px solid var(--line);
}
.foot__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 84px;
  font-size: 17px;
  color: var(--ink-quiet);
}
.foot__inner nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
}
.foot__inner a { text-decoration: none; }
.foot__inner a:hover { color: var(--ink); }

/* =========================================================================
   Schadensbegrenzung unter 1180 px.
   Eine eigene Mobile-Art-Direction ist nicht Gegenstand dieses Entwurfs.
   Die neuen Strukturen sind so gebaut, dass sie eine spaetere Mobilfassung
   nicht verhindern: die Proof-Leiste stapelt, die Auswahl der Buehne
   scrollt waagerecht, die Buehne selbst haengt an keiner festen Breite,
   und die haftende Kopfzeile laesst sich auf Wortmarke und Weg reduzieren.
   ========================================================================= */
@media (max-width: 1180px) {
  /* Die Leiter wird schmaler, behaelt aber ihre drei Raenge: 44 / 38 / 34.
     Der Abstand zwischen Produktmoment und Normalfall bleibt derselbe
     Anteil wie auf dem Desktop. */
  :root {
    --h-page:    44px;
    --h-pagesub: 44px;
    --h-major:   38px;
    --h-section: 34px;
  }

  .shell { padding-inline: 32px; }

  .hero { padding-block: 84px 50px; }
  .hero__title { letter-spacing: -0.03em; }
  .hero__title br { display: none; }
  .hero__lede { font-size: 18px; }
  .hero__stance { font-size: 18px; }
  .hero__terms { font-size: 16px; }
  .close__lede { font-size: 21px; }
  .close__assurance { font-size: 19px; }
  .problem__cost { margin-top: 40px; }

  /* Der Mechanismus gibt seine Innenraender ab, behaelt aber Balken,
     Reihenfolge, Marken und Farbrollen. */
  .runthrough { margin-top: 32px; }
  .runthrough__steps { padding: 14px 22px 14px 50px; }
  .runthrough__steps::before,
  .runthrough__steps::after { left: 24px; top: 14px; bottom: 14px; }
  .runthrough__done { padding: 13px 22px 13px 50px; }
  .runthrough__step,
  .runthrough__done { grid-template-columns: 92px minmax(0, 1fr); gap: 0 16px; }
  .runthrough__marker { left: -30px; }
  .runthrough__done .runthrough__marker { left: 20px; }
  .runthrough__note { font-size: 15px; }

  /* Die Wenn-Dann-Zeilen stellen sich untereinander. Der Winkel dreht sich
     dabei mit: er zeigt weiter von der Bedingung auf die Folge, nur jetzt
     nach unten statt nach rechts. */
  .rules { margin-top: 44px; }
  .rules__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 0;
    padding: 18px 0;
  }
  .rules__if,
  .rules__then,
  .rules__note { font-size: 19px; }
  .rules__arrow {
    display: inline-block;
    width: 1em;
    text-align: left;
    transform: rotate(90deg);
  }

  .enterprise__control { margin-top: 32px; font-size: 22px; }

  .close__gains { gap: 16px; margin-top: 36px; }
  .close__gains li { font-size: 19px; }
  .close__contact { margin-top: 48px; }
  .close__contact-name { font-size: 23px; }
  .close__contact-role { font-size: 18px; }
  .hero__actions { flex-wrap: wrap; justify-content: center; }
  .close__actions { flex-wrap: wrap; justify-content: center; gap: 26px 34px; }

  .section-title br,
  .close__title br,
  .close__promise br { display: none; }
  .close__promise { font-size: 24px; }
  .section-lede--strong { font-size: 21px; }

  .problem,
  .theatre,
  .enterprise,
  .lifecycle,
  .system,
  .trust,
  .close { padding-block: 72px; }

  .cues { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }

  .tab:first-child { padding-left: 22px; }
  .stage__notes { min-height: 0; }

  .masthead__inner { gap: 28px; }
  .masthead__nav { gap: 26px; }

  /* Die Logo-Leiste gibt den verteilten Freiraum auf und stellt die Plaetze
     auf einen festen Abstand; sechs bleiben in einer Zeile, bis die Breite
     nicht mehr reicht. */
  /* Der geteilte Hero stapelt: erst der Satz, dann die Karte. Die Karte
     bleibt vollstaendig - Zeitachse, Symbole und Beschriftungen aendern
     sich nicht, nur die Innenraender werden enger. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero--split .hero__title,
  .hero--split .hero__lede,
  .hero--split .hero__stance,
  .hero--split .hero__terms { max-width: 100%; }
  .herocard__head { padding: 14px 16px; }
  .herocard__flow { padding: 14px 16px; }
  .herocard__foot { padding: 13px 16px; }
  .herocard__rail,
  .herocard__fill { left: 31px; }
  .herocard__step { gap: 13px; padding: 10px 0; }
  .herocard__case { font-size: 18px; }
  .herocard__event { font-size: 14.5px; }

  .logos { padding-block: 38px 24px; }
  .logos__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 44px;
    margin-top: 30px;
  }
  /* Auf schmalen Breiten umbricht die Leiste in zwei Reihen; die Marken
     werden dafuer eine Stufe kleiner, damit drei nebeneinander passen.
     Dieselbe Stufe wie in der Fassung auf /kontakt/. */
  .logos__slot { height: 30px; }
  .logos__slot img { height: 30px; }

  /* Die Referenz stapelt weiter, nur enger: Absender, Zitat, Person,
     Belegzeile. */
  .proof { padding-block: 72px; }
  .proof__quote { margin-top: 30px; }
  .proof__quote p { font-size: 30px; letter-spacing: -0.022em; }
  .proof__logo { height: 42px; }
  .proof__person { margin-top: 34px; }
  .proof__meta {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 26px 40px;
    margin-top: 34px;
  }
  .proof__role { white-space: normal; }
  .proof__link { margin-left: 0; }
}

/* Unter 860 px reicht die Breite nicht mehr fuer vier Navigationsziele in
   einer Zeile. Die Kopfzeile reduziert sich dann auf Wortmarke und Weg zum
   Termin - beides bleibt erreichbar, die vier Ziele stehen unveraendert im
   Fuss. Eine eigene Mobilnavigation ist Gegenstand der Mobilfassung und
   nicht dieses Entwurfs.
   Ebenso geben die Bauteile der Proof-Leiste hier ihre feste Breite auf,
   damit Person, Kennzahlen und Weg umbrechen statt zu ueberlaufen. */
@media (max-width: 860px) {
  .masthead__nav { display: none; }
  .masthead__action { margin-left: auto; }

  /* Die Kennzahlenzeile bricht um, statt zu ueberlaufen; der Trenner faellt
     am Zeilenanfang nicht weg, steht dort aber eng genug, um die Zeile
     nicht mit einem freistehenden Punkt zu beginnen. */
  .proof__figures { flex: 1 1 100%; gap: 10px 0; }
  .proof__figures > div + div::before { margin-inline: 12px; }

  .trust__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  /* Im Mechanismus reicht die Breite nicht mehr fuer Zustaendigkeit und
     Ereignis nebeneinander. Beide stehen dann untereinander; Balken und
     Marke tragen die Zuordnung weiterhin. Die Marke haengt dann an der
     ersten Zeile statt in der Mitte des Schritts. */
  .runthrough__step,
  .runthrough__done {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px 0;
  }
  .runthrough__step { padding-block: 10px; }
  .runthrough__marker { top: 12px; margin-top: 0; }

  /* Die beiden Wege zur Person untereinander, damit die Rufnummer nicht
     umbricht. Der Trenner dazwischen entfaellt. */
  .close__contact-ways {
    display: grid;
    justify-items: center;
    gap: 8px;
  }
  .close__contact-ways span { display: none; }

  /* Der Fuss legt Wortmarke und Ziele untereinander, statt sie in einer
     Zeile aus dem Satzspiegel zu schieben. */
  .foot__inner {
    height: auto;
    flex-wrap: wrap;
    padding-block: 28px;
    gap: 20px 32px;
  }
  .foot__inner nav { margin-left: 0; flex-wrap: wrap; gap: 14px 26px; }
}


/* #############################################################################
   #                                                                           #
   #  SITE LAYER - Full-Site-Pass V1                                           #
   #                                                                           #
   #  Alles oberhalb dieser Linie ist die unveraenderte Fassung des            #
   #  Designmasters design-v6/50-page-design/homepage-final-v4/shared.css.     #
   #  Kein Token, kein Bauteil und keine Regel des Masters wurde geaendert.    #
   #                                                                           #
   #  Was hier dazukommt, sind ausschliesslich die Bauteile, die eine ganze    #
   #  Website braucht und eine einzelne Startseite nicht hat: eine globale     #
   #  Navigation mit Unterpunkten, ein Seitenkopf fuer Unterseiten, ein        #
   #  mehrspaltiger Fuss und sechs wiederverwendbare Inhaltsbauteile.          #
   #                                                                           #
   #  Regel fuer alles hier: kein neues Token. Jede Farbe, jeder Radius, jede  #
   #  Schrift und jeder Grad stammt aus dem Master. Es entsteht keine zweite   #
   #  Designsprache.                                                           #
   #                                                                           #
   ########################################################################### */

/* =========================================================================
   Kopfzeile - globale Navigation
   Der Master hat vier Sprungziele in einer Zeile. Eine Website hat mehr
   Seiten, als in eine Zeile passen - aber nicht mehr Rang. Deshalb bleibt
   die Zeile bei fuenf Zielen und traegt ihre Unterpunkte in einer Flaeche,
   die erst bei Bedarf erscheint.

   Kein Mega-Menue: die Flaeche traegt genau eine Spalte, dieselbe
   Randmarkierung wie ueberall und keine Symbole. Sie oeffnet auf Hover und
   auf Klick, schliesst auf Escape und beim Verlassen. Ohne JavaScript
   bleibt der Elternpunkt ein normaler Link auf die Uebersichtsseite - jede
   Gruppe hat eine.
   ========================================================================= */
.masthead__nav { align-items: center; }
/* Der Elternpunkt besteht aus zwei getrennten Bedienelementen: dem echten
   Link auf die Uebersichtsseite und - davon abgesetzt - der Schaltflaeche
   fuer das Untermenue. Der Text navigiert also immer; nur die Marke
   daneben schaltet auf. Frueher lag beides im selben Anker, und das Skript
   musste dessen Navigation per preventDefault unterbinden - der sichtbare
   Punkt "Produkt" war damit kein Ziel mehr, sondern nur noch ein Schalter. */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-group__link {
  display: inline-flex;
  align-items: center;
  color: var(--ink-body);
  text-decoration: none;
  padding-block: 6px;
}
.nav-group__link:hover,
.nav-group:hover > .nav-group__link,
.nav-group:focus-within > .nav-group__link,
.nav-group[data-open="true"] > .nav-group__link { color: var(--ink); }
/* Die Schaltflaeche traegt nur die Marke. Sie bleibt optisch das, was
   vorher im Anker stand - der Rahmen ist unsichtbar, die Trefferflaeche
   durch den Innenrand aber gross genug fuer den Zeiger. */
.nav-group__toggle {
  appearance: none;
  margin: 0;
  padding: 6px 3px;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.nav-group__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Die Marke des Elternpunkts. Ein 5-px-Quadrat statt eines Pfeils: die
   Seite kennt keine Symbolsprache, und ein Chevron waere das erste
   Piktogramm ueberhaupt. Im geoeffneten Zustand traegt es die Markenfarbe. */
.nav-group__mark {
  width: 5px;
  height: 5px;
  background: #C3C6CE;
  border-radius: var(--radius);
  display: block;
}
.nav-group:hover .nav-group__mark,
.nav-group:focus-within .nav-group__mark,
.nav-group[data-open="true"] .nav-group__mark { background: var(--brand); }

.nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  min-width: 268px;
  padding: 14px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(20, 21, 31, 0.11);
  /* Ueber der Buehne. Die Kopfzeile bildet mit z-index 100 den Kontext,
     innerhalb dessen die Tafel jede Flaeche des Heros ueberdeckt. */
  z-index: 20;
}
/* Die Bruecke ueber den Absatz von 14 px.

   Genau hier lag der Fehler: die Tafel stand 14 px unter der Gruppe, und
   dieser Streifen gehoerte zu keinem der beiden. Wer den Zeiger vom
   Elternpunkt zur Tafel fuehrte, verliess damit die Gruppe - mouseleave
   schloss sie, bevor der Zeiger die Tafel erreichte. Die Tafel ist ein
   Kindelement der Gruppe, ihre eigene Flaeche haelt den Zustand also; nur
   der Zwischenraum fehlte. Dieses Pseudoelement fuellt ihn unsichtbar auf.
   Es existiert nur, solange die Tafel steht, und faengt deshalb keine
   Klicks im geschlossenen Zustand ab. */
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 15px;
}
/* Aufgeklappt wird auf Zeigerkontakt, bei Tastaturfokus innerhalb der
   Gruppe und wenn das Skript die Gruppe festgestellt hat. Die ersten
   beiden Wege brauchen kein Skript - faellt site.js aus, bleibt die
   Navigation vollstaendig bedienbar. */
.nav-group:hover > .nav-panel,
.nav-group:focus-within > .nav-panel,
.nav-group[data-open="true"] > .nav-panel { display: block; }
/* Per Escape oder Klick auf die Marke geschlossen: solange der Zeiger die
   Gruppe noch nicht verlassen hat, darf :hover sie nicht sofort wieder
   aufziehen - und der Fokus, der nach Escape auf dem Elternlink steht,
   ebensowenig. Die Regel steht deshalb hinter den drei Aufklappregeln und
   gewinnt bei gleicher Spezifitaet ueber die Reihenfolge. Das Skript raeumt
   das Attribut ab, sobald der Zeiger die Gruppe verlaesst oder die Marke
   erneut aufklappt. */
.nav-group[data-suppress="true"] > .nav-panel { display: none; }
.nav-panel a {
  display: block;
  padding: 8px 24px 8px 22px;
  border-left: 3px solid transparent;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink-body);
  text-decoration: none;
  white-space: nowrap;
}
.nav-panel a:hover {
  border-left-color: var(--brand);
  color: var(--ink);
}
.nav-panel a[aria-current="page"] {
  border-left-color: var(--brand);
  color: var(--ink);
  font-weight: 600;
}
.masthead__nav > a[aria-current="page"],
.nav-group__link[aria-current="page"],
.nav-group[data-current="true"] > .nav-group__link { color: var(--ink); font-weight: 600; }

/* Der Umschalter fuer schmale Fenster. Ab 860 px verschwindet die Zeile im
   Master ersatzlos - fuer eine Startseite mit Sprungzielen ist das
   vertretbar, fuer eine Website mit 56 Seiten nicht. */
.masthead__toggle {
  display: none;
  appearance: none;
  margin-left: auto;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
/* Der Weg zum Termin in der Schublade. Er steht nur dort, wo die Kopfzeile
   ihn nicht mehr tragen kann - siehe Medienabfrage bei 560 px. */
.masthead__drawer-cta { display: none; }

/* =========================================================================
   Seitenkopf einer Unterseite
   Die Startseite ist zentriert - sie behauptet. Jede Unterseite ist
   linksbuendig - sie erklaert. Das ist der einzige, aber durchgehende
   Unterschied zwischen Master und Seitensystem.

   Vier Ebenen in fester Ordnung: Herkunft (Brotkrume), Einordnung
   (Kicker), Behauptung (H1), Erklaerung (Lede). Danach hoechstens zwei
   Wege. Mehr traegt kein Kopf.
   ========================================================================= */
.pagehead {
  background: var(--herofield);
  padding-block: 68px 76px;
}
.pagehead--paper { background: var(--paper); border-bottom: 1px solid var(--line); }
.pagehead--ground { background: var(--ground); }
.pagehead__inner { max-width: 900px; }
.crumb {
  margin: 0 0 24px;
  font-size: 17px;
  color: var(--ink-quiet);
}
.crumb a {
  color: var(--ink-quiet);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cool);
}
.crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.crumb span { margin-inline: 9px; color: var(--brand-text); }

.pagehead__kicker {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--brand-text);
}
.pagehead__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--display);
  font-size: var(--h-pagesub);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}
/* Utility- und Rechtsseiten tragen dieselbe Anlage, nur einen Grad kleiner:
   sie sind Auskunft, nicht Behauptung. */
.pagehead--utility { padding-block: 56px 52px; }
.pagehead--utility .pagehead__title { font-size: 46px; letter-spacing: -0.028em; }
.pagehead__lede {
  margin: 26px 0 0;
  max-width: 68ch;
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-body);
}
.pagehead__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 36px;
}
.pagehead__terms {
  margin: 16px 0 0;
  font-size: 17px;
  color: var(--ink-quiet);
}
.pagehead__terms span { margin-inline: 9px; color: var(--brand-text); }

/* =========================================================================
   Bereichsrahmen
   Der Master gibt jedem seiner neun Bereiche eine eigene Klasse mit eigenem
   Innenabstand. Fuer 56 Seiten waeren das einige hundert Klassen. Statt
   dessen ein Rahmen mit drei Flaechen und drei Bauhoehen - die Werte sind
   dieselben, die der Master verwendet.
   ========================================================================= */
.band { padding-block: 96px 100px; }
.band--paper  { background: var(--paper); }
.band--ground { background: var(--ground); }
.band--brand  { background: var(--brandfield); }
.band--proof  { background: var(--prooffield); }
.band--tight  { padding-block: 76px 80px; }
.band--wide   { padding-block: 104px 108px; }
/* Zwei gleichfarbige Baender duerfen nicht aneinanderstossen - sonst
   verschwindet der Flaechenrhythmus, der den Master traegt. Wo es
   inhaltlich doch zusammengehoert, trennt eine Haarlinie. */
.band--joined { padding-top: 0; }
.band--ruled { border-top: 1px solid var(--line); }

.band__head { max-width: 74ch; }
.band .section-lede:first-of-type { margin-top: 26px; }
/* Der Abstand zwischen Kapitelkopf und Bildkoerper. Derselbe Wert wie im
   Designmaster (.enterprise .scene, .lifecycle .scene). */
.band .scene { margin-top: 62px; }
.band .flow:first-child,
.band .points:first-child,
.band .matrix:first-child,
.band .deck:first-child,
.band .specs:first-child,
.band .faq:first-child,
.band .tags:first-child,
.band .form:first-child { margin-top: 0; }

/* =========================================================================
   Bauteil 1 - Punkte
   Die Reihe mit der minten Randmarkierung. Sie ist das Arbeitspferd des
   Seitensystems und traegt Faehigkeiten, Bestandteile, Regeln, Grenzen und
   Voraussetzungen. Gleiches Bauteil wie .trust__list im Master, nur mit
   frei waehlbarer Spaltenzahl und optionaler Beschreibung.
   ========================================================================= */
.points {
  display: grid;
  gap: 44px 56px;
  margin: 60px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.points li {
  position: relative;
  padding-left: 20px;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 20px;
  background: var(--brand);
}
/* Graphit statt Mint: der heutige Zustand, nicht die angewandte Logik.
   Dieselbe Unterscheidung wie zwischen .cues und .trust__list im Master. */
.points--state li::before { background: var(--ink); }
.points--exception li::before { background: var(--exception); }
.points h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.points p {
  margin: 12px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-body);
}
.points--4 h3 { font-size: 20px; }
.points--4 p { font-size: 18px; }
/* Die knappe Fassung: nur eine Zeile, kein Titel. */
.points--plain li { font-size: 19px; line-height: 1.5; color: var(--ink-body); }

/* =========================================================================
   Bauteil 2 - Ablauf
   Die statische Fassung des Durchlaufs aus dem Hero: derselbe
   Aenderungsbalken, dieselben zwei Spalten, dieselbe Farbrolle fuer die
   Zustaendigkeit. Ohne Lauf, ohne Zeitgeber - auf einer Unterseite ist die
   Reihenfolge die Aussage, nicht die Bewegung.
   ========================================================================= */
.flow {
  max-width: 760px;
  margin: 56px 0 0;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(20, 21, 31, 0.09);
}
.band--paper .flow { box-shadow: 0 0 0 1px var(--line); }
.flow__steps {
  position: relative;
  margin: 0;
  padding: 18px 30px 18px 58px;
  list-style: none;
}
.flow__steps::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 18px;
  bottom: 18px;
  width: 4px;
  background: var(--brand);
}
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 18px;
  padding: 7px 0;
}
.flow__step::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: var(--brand);
  border-radius: 50%;
}
/* Die Schritte des bestehenden Systems tragen Graphit - die Zustaendigkeit
   steht in der Farbe, genau wie im Master. */
.flow__step--hr::before { background: var(--ink-body); }
.flow__actor {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand-text);
}
.flow__step--hr .flow__actor { color: var(--ink-quiet); }
.flow__event { font-size: 19px; line-height: 1.4; color: var(--ink); }
.flow__done {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 18px;
  margin: 0;
  padding: 15px 30px 15px 58px;
  background: var(--secured);
}
.flow__done .flow__actor { color: #A9D6C3; }
.flow__done .flow__event { color: #FFFFFF; font-weight: 700; }

/* =========================================================================
   Bauteil 3 - Gegenueberstellung
   Zwei Spalten, eine Haarlinie je Zeile, keine Haken, keine Kreuze, keine
   Ampelfarben. Links der heutige Zustand in Graphit, rechts der
   ausgefuehrte in Mint. Das ist dieselbe Farbrolle wie ueberall.
   ========================================================================= */
.matrix {
  margin: 56px 0 0;
  border-top: 1px solid var(--line-cool);
}
.matrix__head,
.matrix__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.matrix__head {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-cool);
}
.matrix__head span {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-quiet);
}
.matrix__head span:last-child { color: var(--brand-text); }
.matrix__row { padding: 20px 0; }
.matrix__row + .matrix__row { border-top: 1px solid var(--line-cool); }
.matrix__row > * {
  position: relative;
  padding-left: 18px;
  font-size: 19px;
  line-height: 1.45;
}
.matrix__row > *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 18px;
}
.matrix__was { color: var(--ink-quiet); }
.matrix__was::before { background: #C3C6CE; }
.matrix__is { color: var(--ink); }
.matrix__is::before { background: var(--brand); }

/* =========================================================================
   Bauteil 4 - Kartenwand fuer Uebersichtsseiten
   Nur dort, wo eine Seite tatsaechlich auf andere Seiten verweist. Keine
   Featurekarten, keine Symbole, keine Schatten: eine Flaeche, eine
   Haarlinie, eine Randmarkierung, die auf Hover die Markenfarbe annimmt.
   ========================================================================= */
.deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line-cool);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  overflow: hidden;
}
.deck--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck > li { background: var(--paper); }
.deck a {
  display: block;
  height: 100%;
  padding: 32px 34px 34px;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.deck a:hover { border-left-color: var(--brand); background: #FBFCFC; }
.deck h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.deck p {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}
.deck__go {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
}

/* =========================================================================
   Bauteil 5 - Angaben
   Zwei Spalten, Beschriftung und Wert, eine Haarlinie je Zeile. Fuer
   technische Angaben, Eckdaten und Rahmenbedingungen. Ersetzt die
   Spezifikationstabelle mit Rahmen.
   ========================================================================= */
.specs {
  margin: 52px 0 0;
  border-top: 1px solid var(--line-cool);
}
.specs > div {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-cool);
}
.specs dt {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-quiet);
}
.specs dd {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
}

/* =========================================================================
   Bauteil 6 - Nennungen
   Eine Zeile Systemnamen, Vorgangsarten oder Dokumentarten. Keine Karten,
   keine Logos, keine Rahmen: gesetzte Namen auf einer Flaeche, getrennt
   durch Weissraum und eine Haarlinie.
   ========================================================================= */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 9px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 18px;
  color: var(--ink);
}
.band--paper .tags li { background: var(--ground); border-color: transparent; }
.tags__note {
  margin: 24px 0 0;
  max-width: 84ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* =========================================================================
   Bauteil 7 - Fragen
   Native details/summary. Keine Bibliothek, keine Hoehenanimation, kein
   ARIA-Nachbau: das Element kann das alles selbst und bleibt ohne
   JavaScript vollstaendig bedienbar.
   ========================================================================= */
.faq {
  margin: 52px 0 0;
  max-width: 92ch;
  border-top: 1px solid var(--line-cool);
}
.faq details { border-bottom: 1px solid var(--line-cool); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  flex: none;
  width: 3px;
  height: 20px;
  background: #C3C6CE;
  transform: translateY(3px);
}
.faq details[open] summary::before { background: var(--brand); }
.faq summary:hover::before { background: var(--brand); }
.faq p {
  margin: 0 0 26px 21px;
  max-width: 76ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-body);
}

/* =========================================================================
   Bauteil 8 - Fliesstext fuer Rechts- und Inhaltsseiten
   Ein Satzspiegel, keine Karten, keine Kaesten. Die Rechtstexte werden
   ausschliesslich in dieses System gestellt - kein Satz wird umformuliert.
   ========================================================================= */
.prose { max-width: 76ch; margin-top: 8px; }
.prose h2 {
  margin: 56px 0 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prose h3 {
  margin: 40px 0 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose p,
.prose ul { margin: 18px 0 0; font-size: 19px; line-height: 1.62; color: var(--ink-body); }
.prose ul { padding-left: 0; list-style: none; }
.prose li {
  position: relative;
  margin-top: 10px;
  padding-left: 20px;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 3px;
  background: var(--brand);
}
.prose a { color: var(--brand-text); }
.prose__meta {
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-cool);
  font-size: 17px;
  color: var(--ink-quiet);
}

/* Die Pflichtangaben auf /impressum/ tragen den Namen der Einrichtung als
   <b> vor der Anschrift, ohne <br> dahinter. Ohne diese Regel lief er in die
   folgende Zeile hinein - sichtbar als "aurixus GmbHFriedrichstrasse 34".
   Der Name steht deshalb auf einer eigenen Zeile. Am Wortlaut und am uebrigen
   Satz des Rechtsteils aendert das nichts. */
.legalfacts dd b { display: block; }

/* =========================================================================
   Bauteil 9 - Hinweiszeile fuer offene Belege
   Ein Bauteil fuer alle Stellen, an denen ein Inhalt noch nicht belegt ist.
   Es steht sichtbar auf der Seite, weil ein unbelegter Inhalt ein
   Arbeitsstand ist und kein Geheimnis. Orange traegt auf der ganzen Seite
   die Rolle Bedingung oder Ausnahme - das ist hier genau die Rolle.
   ========================================================================= */
.pending {
  margin: 40px 0 0;
  max-width: 84ch;
  padding: 20px 24px;
  border-left: 3px solid var(--exception);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-body);
}
.band--paper .pending { background: var(--ground); }
.pending b {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}

/* =========================================================================
   Bauteil 10 - Formular
   Beschriftung ueber dem Feld, Hilfetext darunter, kein Platzhalter als
   Beschriftung. Ein Feldrahmen in der Linienfarbe, ein Fokusring in der
   Markenfarbe.
   ========================================================================= */
.form { max-width: 720px; margin-top: 52px; }
.form__row { display: grid; gap: 8px; margin-top: 26px; }
.form__row--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
/* Die beiden Zeilen innerhalb einer geteilten Zeile bringen ihren eigenen
   Abstand nicht mit - sonst stuende die geteilte Zeile doppelt so tief
   wie eine einfache. */
.form__row--split > .form__row { margin-top: 0; }
.form label {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #C3C6CE;
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--body);
  font-size: 19px;
  color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }
.form input::placeholder,
.form textarea::placeholder { color: #6E7280; }
.form__hint { font-size: 16px; color: var(--ink-quiet); }
.form__consent {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-body);
}
.form__consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.form button {
  appearance: none;
  border: 0;
  margin-top: 30px;
  cursor: pointer;
}
.form__note { margin: 20px 0 0; font-size: 16px; color: var(--ink-quiet); }

/* =========================================================================
   Bauteil 11 - Ansprechpartner als Beistellung
   Der Abschlussbereich des Masters traegt ihn zentriert. Auf Unterseiten
   mit linksbuendigem Satz steht er links, sonst unveraendert.
   ========================================================================= */
.person {
  max-width: 560px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-cool);
}
.person__label { margin: 0; font-size: 17px; color: var(--ink-quiet); }
.person__name {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.person__role { margin: 4px 0 0; font-size: 18px; color: var(--ink-body); }
.person__ways { margin: 14px 0 0; font-size: 18px; }
.person__ways a { color: var(--brand-text); text-decoration: none; border-bottom: 1px solid var(--brand); }
.person__ways a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.person__ways span { margin-inline: 10px; color: var(--ink-quiet); }

/* Der Abschlussbereich in der linksbuendigen Fassung fuer Unterseiten. */
.close--left { text-align: left; }
.close--left .close__lede,
.close--left .close__promise,
.close--left .close__assurance { margin-inline: 0; }
.close--left .close__gains { margin-inline: 0; }
.close--left .close__actions { justify-content: flex-start; }
.close--left .close__title { max-width: 22ch; }

/* =========================================================================
   Fusszeile
   Der Fuss ist eine Navigation, kein Inhaltsverzeichnis: die Marke mit einem
   Satz und einem Abschluss, drei kurze Spalten, darunter die Rechtszeile.

   Der frueher hier stehende fuenfspaltige Fuss mit allen Seiten ist entfallen,
   die Gruppe "Weitere Bereiche" ersatzlos. Alle uebrigen URLs bestehen
   unveraendert weiter und bleiben ueber die Uebersichtsseite ihres Bereichs
   erreichbar.

   Ein Regelsatz fuer die ganze Website - keine Fussvariante pro Seite. Die
   Grundwerte unter .sitefoot bleiben die Basis, .sitefoot--v2 weiter unten
   setzt darauf auf und traegt das verbindliche Raster. Die frueheren
   Varianten (.sitefoot--lean und die Fussregeln einzelner Seiten) sind mit
   dem globalen Durchgang entfallen.
   ========================================================================= */
.sitefoot {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: 68px 40px;
}
.sitefoot h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sitefoot ul { margin: 0; padding: 0; list-style: none; }
.sitefoot li + li { margin-top: 11px; }
.sitefoot li a {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-quiet);
  text-decoration: none;
}
.sitefoot li a:hover { color: var(--ink); }
.sitefoot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-quiet);
}
.sitefoot__base a { color: var(--ink-quiet); text-decoration: none; }
.sitefoot__base a:hover { color: var(--ink); }
.sitefoot__base p { margin: 0; }

/* =========================================================================
   Marke - die echte Wortmarke
   Vor diesem Durchgang zeichneten die Seiten das Zeichen als Quadrat aus CSS
   und setzten den Namen als Text daneben; einzelne Seiten trugen bereits ein
   Bild, jede mit eigenem Klassennamen. Ab hier gilt eine Auszeichnung fuer
   Kopf und Fuss: .wordmark--real mit der echten Datei aus assets/brand/.

   Unter 560 px traegt der Kopf nur noch das Zeichen. Die Wortmarke hat ein
   Seitenverhaeltnis von rund 7,3:1 und braucht bei 23 px Hoehe schon 168 px
   Breite - neben Menuetaste und Schaltflaeche ist das auf 390 px zu viel.
   ========================================================================= */
.wordmark--real { gap: 0; }
.wordmark--real .wordmark__mark { display: none; }
.wordmark__word {
  display: block;
  width: auto;
  height: 26px;
}

/* =========================================================================
   Der Fuss der Website - .sitefoot--v2
   Vier Spalten: Marke mit Anspruch und Abschluss, Scriptomat, Rechtliches,
   Kontakt. Darunter eine Leiste mit Urheberrecht links und den beiden
   Dienstwegen rechts.

   Die Ziele der Leiste liegen ausserhalb dieser Website und stehen deshalb
   als vollstaendige Adresse: das Hilfe-Center unter scriptomat.refined.site,
   das Ticket unter support.aurixus.com. "Einstellung der Cookies" ruft ueber
   die Klasse borlabs-cookie-open-dialog-preferences den Dialog von Borlabs
   Cookie 3 auf; die Klasse traegt keine Gestaltung, sie ist nur der
   Aufhaenger des Plugins.
   ========================================================================= */
.sitefoot--v2 {
  background: var(--ground);
  border-top: 1px solid var(--line);
  padding-block: 64px 28px;
}
.sitefoot--v2 .sitefoot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}
.sitefoot--v2 .wordmark__word { height: 30px; }
.sitefoot__claim {
  margin: 20px 0 24px;
  max-width: 21ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-quiet);
}
/* Die einzige gruene Flaeche der Seite ausserhalb der Marke: der Abschluss
   im Fuss. Grundform, Grad und Hoehe sind die der Schaltflaeche aus dem
   Regelsatz, nur die Fuellung wechselt auf Mint. */
.sitefoot__cta {
  background: var(--brand);
  color: var(--ink);
  height: 52px;
  padding-inline: 26px;
  font-size: 18px;
}
.sitefoot__cta:hover { background: #2FC492; }
.sitefoot--v2 h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.sitefoot--v2 ul { margin: 0; padding: 0; list-style: none; }
.sitefoot--v2 li + li { margin-top: 11px; }
.sitefoot--v2 li a,
.sitefoot--v2 .sitefoot__contact a {
  color: var(--ink);
  text-decoration: none;
}
.sitefoot--v2 li a:hover { color: var(--brand-text); }
.sitefoot__contact {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
}
.sitefoot__contact strong { font-weight: 600; color: var(--ink); }
.sitefoot__contact .sitefoot__phone { margin-top: 8px; }
.sitefoot__contact .sitefoot__mail a { color: var(--brand-text); font-weight: 600; }
.sitefoot__contact .sitefoot__hours { margin-top: 8px; font-size: 16px; color: var(--ink-quiet); }
.sitefoot--v2 .sitefoot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-quiet);
}
.sitefoot--v2 .sitefoot__base p { margin: 0; }
.sitefoot--v2 .sitefoot__base a { color: var(--ink-quiet); text-decoration: none; }
.sitefoot--v2 .sitefoot__base a:hover { color: var(--ink); }
.sitefoot__utility {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
/* Das Netzwerk steht klein am Ende der Leiste, nicht als Sozialleiste. */
.sitefoot__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-quiet);
}
.sitefoot__social:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.sitefoot__social svg { display: block; }

@media (max-width: 1180px) {
  .sitefoot--v2 .sitefoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
}
@media (max-width: 560px) {
  /* Im Kopf traegt nur noch das Zeichen. Breite und Hoehe stehen beide,
     damit das nahezu quadratische Zeichen nicht im Seitenverhaeltnis der
     Wortmarke aus den Bildmassen verzerrt wird. */
  .masthead .wordmark__word { width: 36px; height: 28px; }
  .sitefoot--v2 { padding-block: 48px 24px; }
  .sitefoot--v2 .sitefoot__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sitefoot--v2 .wordmark__word { height: 26px; }
  .sitefoot--v2 .sitefoot__base { margin-top: 40px; }
  /* Auf 390 px stehen Urheberrecht und Dienstwege untereinander, sonst
     bricht "Support-Ticket erstellen" mitten im Wort um. */
  .sitefoot__utility { margin-left: 0; width: 100%; }
  .sitefoot__cta { display: flex; width: 100%; }
}

/* =========================================================================
   Schmale Fenster
   Dieser Durchgang ist Desktop zuerst. Was hier steht, ist die Zusicherung,
   dass unter 1180 px und unter 768 px nichts unbrauchbar wird - der
   Feinschliff folgt im eigenen Durchgang.
   ========================================================================= */
@media (max-width: 1180px) {
  .pagehead { padding-block: 52px 58px; }
  .pagehead__title { letter-spacing: -0.028em; }
  .pagehead--utility .pagehead__title { font-size: 36px; }
  .pagehead__lede { font-size: 19px; }
  .band { padding-block: 72px; }
  .band--tight { padding-block: 60px; }
  .band--wide { padding-block: 76px; }
  .band--joined { padding-top: 0; }
  .points { gap: 34px 40px; margin-top: 44px; }
  .points--3, .points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs > div { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
  .prose h2 { font-size: 26px; }
}

@media (max-width: 860px) {
  /* Die Zeile weicht dem Umschalter, die Ziele wandern in eine Schublade.
     Sie ist eine gesetzte Liste, kein Vollbildmenue: keine Ueberlagerung,
     kein gesperrter Bildlauf, keine Animation. */
  .masthead__nav {
    display: none;
    position: absolute;
    top: var(--head);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 26px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(20, 21, 31, 0.1);
    max-height: calc(100dvh - var(--head));
    overflow-y: auto;
  }
  .masthead[data-drawer="open"] .masthead__nav { display: flex; }
  .masthead__toggle { display: block; }
  /* Der Weg zum Termin bleibt neben dem Umschalter stehen: er ist das
     einzige Konversionsziel der Kopfzeile und darf nicht in einer Schublade
     verschwinden. Erst wenn daneben wirklich kein Platz mehr ist, weicht er. */
  .masthead__action { margin-left: 26px; }
  /* In der Schublade steht der Elternpunkt als Zeile: links der Link auf
     die Uebersichtsseite, rechts die Schaltflaeche, die den Satz der
     Unterpunkte auf- und zuklappt. Die Unterpunkte liegen darunter in
     voller Breite. Der Text bleibt auch hier ein echtes Ziel - getippt
     wird auf den Text, geklappt auf die Marke. */
  .nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-group__link { padding-block: 12px; font-size: 19px; flex: 1 1 auto; }
  /* Die Trefferflaeche der Schaltflaeche folgt der Zeilenhoehe des Links
     und reicht bis an den rechten Rand der Schublade. */
  .nav-group__toggle { flex: none; padding: 12px 4px 12px 16px; }
  .nav-group__mark { width: 7px; height: 7px; }
  .nav-panel {
    display: none;
    position: static;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    box-shadow: none;
    flex-basis: 100%;
    z-index: auto;
  }
  /* Kein Absatz, also auch keine Bruecke. */
  .nav-panel::before { display: none; }
  /* In der Schublade oeffnet ausschliesslich die Schaltflaeche. Zeiger-
     kontakt und Fokus duerfen hier nichts aufziehen, sonst klappt beim
     Tippen und beim Tabben unkontrolliert Inhalt auf. */
  .nav-group:hover > .nav-panel,
  .nav-group:focus-within > .nav-panel { display: none; }
  .nav-group[data-open="true"] > .nav-panel { display: block; }
  .nav-panel a { padding: 7px 0 7px 18px; }
  .masthead__nav > a { padding-block: 12px; font-size: 19px; }

  .points--2, .points--3, .points--4 { grid-template-columns: minmax(0, 1fr); }
  .deck, .deck--2 { grid-template-columns: minmax(0, 1fr); }
  .matrix__head, .matrix__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .matrix__head span:last-child { display: none; }
  .specs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .flow__step, .flow__done { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .flow__steps { padding: 16px 22px 16px 48px; }
  .flow__steps::before { left: 24px; }
  .flow__step::before { left: -28px; top: 10px; margin-top: 0; }
  .flow__done { padding-left: 48px; }
  .form__row--split { grid-template-columns: minmax(0, 1fr); }
  /* Dritte Stufe der Leiter: 40 / 36 / 32. Hier standen vorher zwei feste
     Grade aus der Zeit vor der Leiter - .pagehead__title auf 36 px und
     .close--left .close__title auf 34 px. Beide lagen unter dem
     Produktmomentgrad dieser Stufe, dadurch stand die H1 einer Unterseite
     kleiner als eine H2 darunter und der Abschluss kleiner als das Kapitel
     davor. Die Raenge kommen jetzt auch hier nur aus der Leiter. */
  :root {
    --h-pagesub: 40px;
    --h-major:   36px;
    --h-section: 32px;
  }
}

@media (max-width: 560px) {
  .shell { padding-inline: 20px; }
  /* Lange Beschriftungen auf der schmalsten Stufe.

     Weg und Textlink stehen sonst mit white-space: nowrap ueber den rechten
     Rand hinaus - "Systemlandschaft besprechen" misst bei 32 px Innenrand
     385 px, die Satzbreite betraegt hier aber nur 350 px. Der Ueberstand
     schiebt die ganze Seite waagerecht auf. Auf dieser Stufe darf die
     Beschriftung deshalb umbrechen; die feste Bauhoehe des Weges weicht
     dafuer einem Innenrand, damit zwei Zeilen nicht aus der Flaeche laufen. */
  .cta {
    white-space: normal;
    height: auto;
    min-height: 60px;
    padding-block: 12px;
    text-align: center;
    justify-content: center;
    max-width: 100%;
  }
  .textlink { white-space: normal; }
  /* Auf der schmalsten Stufe faellt der abschliessende Haken je Zeile weg -
     die Zustaendigkeit und der Vorgang tragen die Zeile, der Haken ist die
     Wiederholung. So bleibt die Beschriftung einzeilig und nichts kollidiert.
     Dieselbe Ruecknahme wie in der Vorlage. */
  .herocard__step { grid-template-columns: 30px 1fr; }
  .herocard__check { display: none; }
  .herocard__icon { width: 30px; height: 30px; }
  .herocard__rail,
  .herocard__fill { left: 34px; }
  /* Die Trennregel dieser Stufe gilt fuer lange Komposita im Fliesstext.
     Auf der Hero-Behauptung trennt sie "HR-Vorgänge" zu "HR-Vor-gänge" und
     setzt damit einen zweiten Bindestrich in ein Wort, das schon einen hat.
     Der Satz bricht hier stattdessen an der vorhandenen Fuge um. */
  .hero--split .hero__title { hyphens: manual; font-size: 34px; }
  /* Auf sehr schmalen Fenstern sind einzelne deutsche Komposita laenger als
     die Satzbreite - "Prozessbeschreibungen" misst im Displayschnitt mehr
     als 335 px. Ohne Trennung schiebt ein solches Wort die ganze Seite
     waagerecht auf. Die Trennung greift ausschliesslich hier. */
  h1, h2, h3, .section-title, .close__title, .pagehead__title, .hero__title,
  .points h3, .deck h3, .faq summary, .prose h2, .specs dt, .specs dd,
  .flow__event, .matrix__row > * { overflow-wrap: break-word; hyphens: auto; }
  .masthead__action { display: none; }
  .masthead__toggle { margin-left: auto; }
  .masthead__drawer-cta { display: inline-flex; margin-top: 18px; align-self: flex-start; }
  /* Auf der schmalsten Stufe bleibt der Rang erhalten, aber nur noch als
     Andeutung - zwei bis drei Grade Unterschied statt acht. Tiefer geht die
     Leiter nicht: 29 px ist die Untergrenze, unter der eine
     Kapitelueberschrift wie Fliesstext liest. */
  :root {
    --h-pagesub: 36px;
    --h-major:   33px;
    --h-section: 29px;
  }
  .points h3, .deck h3 { font-size: 20px; }
  .tags li { font-size: 17px; }
  .faq summary { font-size: 19px; }
}

/* =========================================================================
   #                                                                       #
   #  BLOG LAYER - Blog-Migrationspass V1                                  #
   #                                                                       #
   ========================================================================= */
/*
   Fuenf Bauteile fuer die 15 uebernommenen Beitraege und ihre Uebersicht.
   Kein neues Token: jede Farbe, jeder Radius und jeder Grad stammt aus dem
   Satz oben. Was hier hinzukommt, ist das eine, was eine Website mit Blog
   braucht und der bisherige Bauteilsatz nicht hatte - eine Bildflaeche mit
   redaktioneller Rolle.

   Zur Bebilderung: das Designsystem schliesst Stockfotos aus. Das gilt fuer
   Produkt- und Loesungsseiten und bleibt dort in Kraft. Beitragsbilder sind
   etwas anderes - sie behaupten nichts ueber das Produkt, sie gehoeren zu
   einem Text. Damit sie trotzdem nicht wie ein Fremdkoerper wirken, tragen
   sie die Formsprache des Systems: 2 px Radius, Haarlinie, kein Schatten,
   kein Overlay, kein Farbstich. Und sie stehen nie neben einer Szene.
   ========================================================================= */

/* --- Gemeinsame Bildflaeche ------------------------------------------- */
.shot {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ground);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
}

/* --- Datumszeile ------------------------------------------------------- */
/* Zwei Angaben, klar unterschieden: was zaehlt steht vorn in Graphit, die
   Herkunft dahinter leise. Ein Beitrag, der aktualisiert wurde, verschweigt
   nicht, wann er entstanden ist. */
.postdate {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-quiet);
}
.postdate b { font-weight: 600; color: var(--ink-body); white-space: nowrap; }
.postdate span { margin-inline: 9px; color: var(--line); }
/* Zwischen Angabe und Trennpunkt steht kein Leerzeichen. Auf schmalen
   Fenstern gibt es dort deshalb keine Umbruchstelle und die Zeile schob den
   Seitenkoerper ueber die Fensterbreite hinaus. Ab hier stehen die drei
   Angaben untereinander, der Trennpunkt entfaellt. */
@media (max-width: 560px) {
  .postdate { display: flex; flex-direction: column; gap: 4px; }
  .postdate b { white-space: normal; }
  .postdate span { display: none; }
}

/* --- Bauteil 14 - Aufmacher der Uebersicht ----------------------------- */
.postlead {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line-cool);
}
.postlead__body { padding-right: 20px; }
.postlead__kicker {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-text);
}
.postlead h3 {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.postlead h3 a { color: inherit; text-decoration: none; }
.postlead h3 a:hover { color: var(--brand-text); }
.postlead p.postlead__lede {
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-body);
}
.postlead .postdate { margin-top: 24px; }
.postlead__go {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-text);
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.postlead__go:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Bauteil 15 - Raster der hervorgehobenen Beitraege ------------------ */
/* Kein Kaestchen, kein Schatten. Die Gruppierung entsteht aus der Haarlinie
   oben und der Randmarkierung links, die beim Zeigen mint wird - dasselbe
   Motiv wie .deck, nur mit Bild. */
.postgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 40px;
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
}
.postgrid > li { border-top: 1px solid var(--line-cool); }
.postgrid a {
  display: block;
  height: 100%;
  padding: 26px 0 4px 20px;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.postgrid a:hover { border-left-color: var(--brand); }
.postgrid .shot { margin-bottom: 22px; }
.postgrid__kicker {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
}
.postgrid h3 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.postgrid a:hover h3 { color: var(--brand-text); }
.postgrid p {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}
.postgrid .postdate { margin-top: 16px; font-size: 16px; }

/* --- Bauteil 16 - Archivliste ------------------------------------------ */
/* Die uebrigen Beitraege. Sie sind vollstaendig da und vollstaendig
   verlinkt, aber sie treten zurueck: kleines Vorschaubild statt Aufmacher,
   kein Anriss, Datum und Kategorie in einer Zeile. Das ist die
   Rangordnung, die der Auftrag verlangt - nachgeordnet, nicht versteckt. */
.archive {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-cool);
}
.archive > li { border-bottom: 1px solid var(--line-cool); }
.archive a {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 210px;
  gap: 32px;
  align-items: center;
  padding: 20px 0 20px 20px;
  margin-left: -20px;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.archive a:hover { border-left-color: var(--brand); }
.archive .shot { aspect-ratio: 3 / 2; }
.archive h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.archive a:hover h3 { color: var(--brand-text); }
.archive__meta {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-quiet);
  text-align: right;
}
.archive__meta b { display: block; font-weight: 600; color: var(--ink-body); }

/* --- Bauteil 17 - Beitragsbild und Bilder im Fliesstext ---------------- */
.postshot {
  margin: 0;
  padding: 0;
}
.postshot .shot { aspect-ratio: 21 / 9; }
.postshot figcaption {
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-quiet);
}
.prose figure { margin: 44px 0 0; }
.prose figure .shot { aspect-ratio: 3 / 2; }
.prose figcaption { margin-top: 12px; font-size: 17px; color: var(--ink-quiet); }
/* Der erste Absatz eines Beitrags traegt den Einstieg und steht deshalb
   eine Stufe groesser - derselbe Grad wie .section-lede. */
.prose--post > p:first-child {
  margin-top: 0;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}
.prose--post h2:first-child { margin-top: 0; }

/* --- Rueckweg am Ende eines Beitrags ----------------------------------- */
.postback {
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-cool);
  font-size: 18px;
}
.postback a {
  font-family: var(--display);
  font-weight: 600;
  color: var(--brand-text);
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.postback a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 1180px) {
  .postlead { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .postlead__body { padding-right: 0; }
  .postlead h3 { font-size: 32px; }
  .postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 34px; }
  .archive a { grid-template-columns: 108px minmax(0, 1fr) 180px; gap: 24px; }
}

@media (max-width: 860px) {
  .postgrid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* Die Datumsspalte wandert unter den Titel: bei zwei Spalten bliebe fuer
     den Titel sonst weniger Breite als fuer seine Nebenangabe. */
  .archive a { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .archive__meta { grid-column: 2; text-align: left; margin-top: 6px; }
  .archive__meta b { display: inline; }
  .archive__meta b::after { content: " ·"; color: var(--ink-quiet); }
  .postshot .shot { aspect-ratio: 3 / 2; }
}

@media (max-width: 560px) {
  .postlead h3 { font-size: 27px; }
  .postlead p.postlead__lede { font-size: 19px; }
  .prose--post > p:first-child { font-size: 20px; }
  .archive a { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .archive .shot { max-width: 220px; }
  .archive__meta { grid-column: 1; }
}

/* =========================================================================
   Druckfassungen
   /kalkulator/ traegt eine dreiseitige Druckfassung im Markup. Sie gehoert
   nur auf Papier. kalkulator-print.css schaltet sie beim Drucken sichtbar
   und blendet dafuer den Rest der Seite aus; die Gegenregel fuer den
   Bildschirm gehoert - so haelt es auch der Kopf jener Datei fest - in
   diesen gemeinsamen Regelsatz. Sie fehlte, weshalb die Druckfassung am
   Bildschirm unter der Seite stand und auf schmalen Fenstern die
   Fensterbreite sprengte.
   ========================================================================= */
.printsheet { display: none; }

/* =========================================================================
   RELEASE-KORREKTUREN
   Dieser Block steht bewusst am Ende des Regelsatzes. Er ergaenzt Bauteile,
   deren Markup bereits im Bestand steht, aber ohne Regeln geblieben ist
   (.legaldoc, .person--portrait), und korrigiert zwei Rollen, die im
   Bestand falsch gewichtet waren (Weg zum Termin in der Kopfzeile,
   Pflichtangaben auf /impressum/). Keine neuen Farben, kein neuer Radius,
   keine neue Schrift - ausschliesslich vorhandene Token.
   ========================================================================= */

/* --- 1. Der Weg zum Termin in der Kopfzeile -------------------------------
   Bisher stand er als Textziel neben vier gleich lauten Navigationszielen
   und war damit als Konversionsziel nicht erkennbar. Er traegt jetzt die
   Flaeche: Markengruen, weisse Schrift, derselbe Radius wie alles andere.

   Farbwahl: --brand-text ist der Gruenton, der auf dieser Website bereits
   die barrierefreie Textrolle traegt (Kontrast zu Weiss rund 5:1). Der
   Zeigerkontakt geht auf --secured, den dunkleren Ton derselben Familie -
   die Flaeche wird beim Zeigerkontakt dunkler, nicht heller.

   Die Kopfzeile bleibt 72 px hoch, die Schaltflaeche misst 44 px. Sie
   kollidiert nicht mit den Untermenues: die Tafeln liegen absolut unter
   der Kopfzeile und beginnen erst unterhalb der Zeile, in der die
   Schaltflaeche steht. */
.masthead__action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: 22px;
  background: var(--brand-text);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms linear;
}
.masthead__action:hover,
.masthead__action:focus-visible { background: var(--secured); border-bottom-color: transparent; }
.masthead__action:active { transform: translateY(1px); }
.masthead__action:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* In der Schublade fuehrt derselbe Weg dieselbe Farbe - sonst waere der
   Weg zum Termin auf schmalen Fenstern ein anderes Ziel als auf breiten. */
.masthead__drawer-cta {
  background: var(--brand-text);
  height: 48px;
}
.masthead__drawer-cta:hover { background: var(--secured); }

@media (max-width: 1400px) {
  /* Solange die Zeile steht, gibt der Abstand zwischen den Zielen nach,
     nicht die Schaltflaeche. Unterhalb der Schwelle in Abschnitt 10 steht
     die Navigation ohnehin in der Schublade und diese Regeln greifen dort
     nur noch fuer die Schaltflaeche. */
  .masthead__inner { gap: 28px; }
  .masthead__nav { gap: 24px; font-size: 17px; }
  .masthead__action { font-size: 16px; padding-inline: 18px; }
}
@media (max-width: 560px) {
  /* Das Zeichen im Kopf behaelt sein Seitenverhaeltnis. Vorher standen
     Breite und Hoehe beide fest und stauchten die nahezu quadratische
     Bildmarke. */
  .masthead .wordmark__word { width: auto; height: 28px; }
}

/* --- 2. Der Ansprechpartner mit Portrait ----------------------------------
   Das Markup fuer .person--portrait stand bereits im Bestand, die Regeln
   dazu fehlten - das Bild lief dadurch in voller Breite in den Satz. Der
   Block steht jetzt als zweispaltige Beistellung: links das Portrait,
   rechts Name, Rolle und die beiden Wege zur Person.

   Das Portrait ist rund und klein. Es identifiziert eine Person, es wirbt
   nicht - dieselbe Rolle und dieselbe Groesse wie der Gastgeber auf
   /termin/. Es ist der einzige Rundradius des Bauteils. */
.person--portrait {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "photo body";
  column-gap: 20px;
  row-gap: 18px;
  align-items: start;
}
.person--portrait .person__label { grid-area: label; }
.person__portrait {
  grid-area: photo;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ground);
}
.person__body { grid-area: body; }
.person--portrait .person__name { margin-top: 0; }

/* Dieselbe Beistellung im Abschlussbereich der Startseite. Dort ist der
   Satz zentriert, der Block bleibt es deshalb auch - Portrait und Text
   stehen mittig unter der Haarlinie. */
.close__contact--portrait {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "photo body";
  column-gap: 22px;
  row-gap: 20px;
  align-items: start;
  text-align: left;
}
.close__contact--portrait .close__contact-label { grid-area: label; text-align: center; }
.close__contact-portrait {
  grid-area: photo;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #E4F2EA;
}
.close__contact-body { grid-area: body; }
.close__contact--portrait .close__contact-name { margin-top: 0; }

@media (max-width: 560px) {
  /* Auf der schmalsten Stufe steht das Portrait ueber dem Text, sonst
     bleibt fuer die Rufnummer keine Zeilenbreite. */
  .person--portrait,
  .close__contact--portrait {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "photo" "body";
    row-gap: 16px;
  }
  .close__contact--portrait { justify-items: center; text-align: center; }
}

/* --- 3. Die Pflichtangaben auf /impressum/ --------------------------------
   Der Rechtsteil stand als ungeregelte Definitionsliste: Beschriftung und
   Wert klebten aneinander, die sieben Angaben liefen ohne Trennung
   durcheinander. Am Wortlaut aendert sich nichts - nur die Angaben stehen
   jetzt in derselben zweispaltigen Form wie alle technischen Angaben der
   Website (.specs), mit einer Haarlinie je Angabe und ruhigem Zeilenfall.
   ========================================================================= */
.legalfacts {
  margin: 44px 0 0;
  max-width: 900px;
  border-top: 1px solid var(--line-cool);
}
.legalfacts > div {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-cool);
}
.legalfacts dt {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-quiet);
}
.legalfacts dd {
  margin: 0;
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink);
}
.legalfacts dd b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--display);
  font-weight: 700;
}
.legalfacts dd a { color: var(--brand-text); text-decoration: none; border-bottom: 1px solid var(--line); }
.legalfacts dd a:hover { border-bottom-color: var(--brand); }
/* Der Fliesstext des Rechtsteils bleibt in Lesebreite und bekommt Luft
   zwischen den Abschnitten. Jeder Abschnitt beginnt hinter einer Haarlinie
   statt hinter blossem Weissraum - damit klebt keine Zeile an der
   vorhergehenden. */
.prose--legal { max-width: 72ch; }
.prose--legal h2 {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line-cool);
}
.prose--legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 860px) {
  .legalfacts > div { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
}

/* --- 4. Der Rechtsdokument-Satz mit seitlicher Inhaltsnavigation ----------
   /datenschutz/ und /agb/ tragen im Markup bereits eine Inhaltsuebersicht
   (.legaldoc__index) und nummerierte Abschnitte (.legaldoc__sec). Die
   Regeln dazu fehlten vollstaendig, weshalb die Uebersicht als lose Liste
   ueber dem Text stand.

   Auf breiten Fenstern steht sie jetzt als haftende Spalte links neben dem
   Text, auf schmalen ueber dem Text. Die Anker sind echte Sprungziele; der
   Abstand zur haftenden Kopfzeile steht bereits global auf main [id].
   Am Wortlaut der Rechtstexte aendert dieser Block nichts.
   ========================================================================= */
.legaldoc {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-top: 48px;
}
.legaldoc__index {
  position: sticky;
  top: calc(var(--head) + 24px);
  max-height: calc(100dvh - var(--head) - 56px);
  overflow-y: auto;
  padding: 26px 24px 28px;
  background: var(--ground);
  border-radius: var(--radius);
  border-left: 3px solid var(--brand);
}
.band--ground .legaldoc__index { background: var(--paper); }
.legaldoc__index h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.legaldoc__index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.legaldoc__index li + li { margin-top: 1px; }
/* Die Zeilen sind eng gesetzt, damit auch 22 Abschnitte auf einem Fenster
   von 900 px Hoehe vollstaendig in der haftenden Spalte stehen und der
   innere Bildlauf die Ausnahme bleibt, nicht der Regelfall. */
.legaldoc__index a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 8px 5px 10px;
  font-size: 15.5px;
  line-height: 1.32;
  color: var(--ink-body);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.legaldoc__index a > span {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-quiet);
}
.legaldoc__index a:hover,
.legaldoc__index a:focus-visible {
  color: var(--ink);
  border-left-color: var(--brand);
  background: var(--paper);
}
.band--ground .legaldoc__index a:hover { background: var(--ground); }
.legaldoc__index a:hover > span { color: var(--brand-text); }

.legaldoc__body { max-width: 76ch; }
.legaldoc__sec + .legaldoc__sec {
  margin-top: 52px;
  padding-top: 46px;
  border-top: 1px solid var(--line-cool);
}
.legaldoc__h {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px;
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.legaldoc__num {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-text);
}
.legaldoc__sec p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-body);
}
.legaldoc__sec p:first-of-type { margin-top: 0; }
.legaldoc__sec strong { color: var(--ink); font-weight: 600; }
.legaldoc__sec a { color: var(--brand-text); }
.legaldoc__sec ul,
.legaldoc__sec ol {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.legaldoc__sec li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-body);
}
/* Die leere erste Zelle jeder Zeile traegt die Randmarkierung - dieselbe
   Marke wie in .prose, hier als eigenes Element statt als Pseudoelement,
   weil das Markup sie bereits mitbringt. */
.legaldoc__sec li > span:first-child {
  display: block;
  width: 8px;
  height: 3px;
  margin-top: 12px;
  background: var(--brand);
}

@media (max-width: 1180px) {
  .legaldoc { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .legaldoc__h { font-size: 24px; grid-template-columns: 44px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Auf Mobil steht die Inhaltsnavigation ueber dem Text, nicht daneben,
     und haftet nicht - eine haftende Spalte waere dort eine Sperre. */
  .legaldoc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .legaldoc__index {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .legaldoc__index ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
  .legaldoc__index li + li { margin-top: 0; }
}
@media (max-width: 560px) {
  .legaldoc__index ol { grid-template-columns: minmax(0, 1fr); }
  .legaldoc__h { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* --- 5. Referenzkunden als drei Boxen ------------------------------------
   Drei gleich gewichtete Felder auf einer Flaeche. Sie nennen die
   Organisation und die Art der Anforderung, unter der dort gearbeitet
   wird - keine Kennzahl, kein Zitat, kein Ergebnisversprechen.
   Bauform und Radius entsprechen .deck; die Logos stehen in derselben
   zurueckgenommenen Graustufe wie in der Leiste der Startseite. */
.refcases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line-cool);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  overflow: hidden;
}
.refcases > li {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 34px 34px;
  background: var(--paper);
  border-left: 3px solid transparent;
}
.band--paper .refcases > li { background: var(--paper); }
/* Die Bildmarke steht in einem Absatz - deshalb muessen die Vorgabe-
   abstaende des Browsers hier ausdruecklich weg, sonst kommen zu den 18 px
   Rasterabstand des Feldes noch einmal 19 px oben und unten dazu. */
.refcases__mark {
  display: flex;
  align-items: center;
  height: 50px;
  margin: 0;
}
.refcases__mark img {
  max-width: 200px;
  max-height: 50px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.82;
}
/* Wo keine freigegebene Bildmarke vorliegt, steht der Name gesetzt - eine
   nachgezeichnete Marke waere eine erfundene Marke. */
.refcases__name {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.refcases__field {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-text);
}
.refcases p.refcases__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
.refcases__traits {
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-cool);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.refcases__traits span + span::before { content: " · "; color: var(--brand); }

@media (max-width: 1180px) {
  .refcases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .refcases { grid-template-columns: minmax(0, 1fr); }
}

/* --- 6. Einordnungsblock --------------------------------------------------
   Sachliche Einordnung, kein Haftungsausschluss. Deshalb Graphit und die
   ruhige Flaeche der Seite, nicht die orange Ausnahmefarbe von .pending:
   Orange traegt auf dieser Website die Rolle Bedingung oder Ausnahme, und
   eine Einordnung ist weder das eine noch das andere. */
.orient {
  margin: 48px 0 0;
  max-width: 86ch;
  padding: 30px 34px 32px;
  background: var(--ground);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
}
.band--ground .orient { background: var(--paper); }
.orient h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.orient ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.orient li {
  position: relative;
  margin-top: 10px;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-body);
}
.orient li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 3px;
  background: var(--brand);
}
.orient p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-body); }
.orient a { color: var(--brand-text); }

/* --- 7. Herunterladbare Unterlagen ---------------------------------------
   Eine Zeile je Unterlage: Titel, Beschreibung, Format und Umfang, rechts
   der Weg zur Datei. Kein Kartenraster - die Unterlagen sind eine Liste,
   keine Auswahl zwischen Produkten. */
.dl {
  display: grid;
  gap: 2px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line-cool);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  overflow: hidden;
}
.dl > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 28px 32px;
  background: var(--paper);
}
.band--paper .dl > li { background: var(--paper); }
.dl h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* Wie bei .models: nur der unbeschriftete Absatz, sonst uebernaehme diese
   Regel die Angabenzeile .dl__meta darunter. */
.dl p:not([class]) {
  margin: 8px 0 0;
  max-width: 68ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
.dl__meta {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--ink-quiet);
}
.dl__meta span + span::before { content: " · "; color: var(--brand); }
.dl__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding-inline: 24px;
  background: var(--brand-text);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dl__go:hover { background: var(--secured); }
.dl__go svg { flex: none; }

@media (max-width: 860px) {
  .dl > li { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dl__go { justify-self: start; }
}

/* --- 8. Partnermodelle ----------------------------------------------------
   Sechs Modelle in einem Raster. Jedes Feld nennt das Modell, wofuer der
   Partner steht, und woraus dort Erloes entsteht. Die Erloeszeile steht
   hinter einer Haarlinie: sie ist die Antwort auf die Frage, warum man
   sich das ansieht, und nicht eine weitere Eigenschaft.

   Keine Prozentangabe, keine Staffel, keine Marge: was verguetet wird,
   steht im Partnervertrag und nicht auf einer Uebersichtsseite. */
.models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line-cool);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  overflow: hidden;
}
.models > li {
  display: flex;
  flex-direction: column;
  padding: 32px 32px 34px;
  background: var(--paper);
  border-left: 3px solid transparent;
}
.models > li:hover { border-left-color: var(--brand); }
.models__kicker {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.models h3 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* Nur der unbeschriftete Beschreibungsabsatz. Ohne :not([class]) gewinnt
   diese Regel ueber .models__kicker und .models__earn - beide sind ebenfalls
   Absaetze, und ein Klassenselektor allein schlaegt Klasse plus Element
   nicht. Genau daran haftete die Erloeszeile nicht an der Kartenunterkante. */
.models p:not([class]) {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
/* Die Erloeszeile sitzt auf der Unterkante der Karte, nicht direkt unter
   dem Absatz: sonst steht sie in jeder der sechs Karten auf einer anderen
   Hoehe und die Zeile, auf die es ankommt, laesst sich nicht vergleichen. */
.models__earn {
  margin: 20px 0 0;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-cool);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-text);
}
.models__earn b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 4px;
}
.models > li.models--soft .models__earn { color: var(--ink-body); }

@media (max-width: 1180px) {
  .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .models { grid-template-columns: minmax(0, 1fr); }
}

/* Die Schritte zum Partnerprogramm. Nummeriert, weil die Reihenfolge die
   Aussage ist - dieselbe Bauform wie .flow, aber ohne Zeitachse. */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  margin: 52px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line-cool);
  list-style: none;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-text);
}
.steps h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.steps p { margin: 8px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-body); }

@media (max-width: 1180px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* --- 9. Changelog --------------------------------------------------------
   Die Changelog-Seite bringt ihre Regeln selbst mit:
   changelog/assets/css/page.css, vollstaendig unter .scriptomat-changelog
   gescoped und unveraendert aus dem Handoff uebernommen.

   In diesem gemeinsamen Regelsatz steht dafuer bewusst nichts. Ein erster
   Entwurf trug hier eigene Bauteile (.timeline, .release__version,
   .release__date, .yearfold). Sie waren nicht nur ueberfluessig - sie
   haetten die gleichnamigen Bauteile von /download/ ueberschrieben, weil
   dieser Block hinter deren Regeln steht.
   ------------------------------------------------------------------------- */

/* --- 10. Die Schublade beginnt frueher ------------------------------------
   Bisher wich die Zeile erst unter 860 px dem Umschalter. Fuenf
   Navigationsziele, die Wortmarke und der Weg zum Termin brauchen
   zusammen aber rund 1130 px - zwischen 861 und 1280 px stand die Zeile
   deshalb ueber den Satzspiegel hinaus und die Schaltflaeche rechts fiel
   aus dem Bild. Mit der Schaltflaeche faellt das staerker auf als mit dem
   frueheren Textziel, der Fehler bestand aber schon vorher.

   Die Schwelle liegt jetzt bei 1280 px. Die Regeln sind dieselben wie in
   der 860er-Stufe; sie gelten nur frueher. Alle uebrigen Regeln jener
   Stufe - Raster, Ueberschriftenleiter, Angabenlisten - bleiben
   unveraendert bei 860 px, weil sie dort richtig eingestellt sind.
   ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .masthead__nav {
    display: none;
    position: absolute;
    top: var(--head);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 26px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(20, 21, 31, 0.1);
    max-height: calc(100dvh - var(--head));
    overflow-y: auto;
    font-size: 19px;
    white-space: normal;
  }
  .masthead[data-drawer="open"] .masthead__nav { display: flex; }
  .masthead__toggle { display: block; }
  .masthead__action { margin-left: 26px; }

  .nav-group { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-group__link { padding-block: 12px; font-size: 19px; flex: 1 1 auto; }
  .nav-group__toggle { flex: none; padding: 12px 4px 12px 16px; }
  .nav-group__mark { width: 7px; height: 7px; }
  .nav-panel {
    display: none;
    position: static;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    box-shadow: none;
    flex-basis: 100%;
    z-index: auto;
  }
  .nav-panel::before { display: none; }
  .nav-group:hover > .nav-panel,
  .nav-group:focus-within > .nav-panel { display: none; }
  .nav-group[data-open="true"] > .nav-panel { display: block; }
  .nav-panel a { padding: 7px 0 7px 18px; }
  .masthead__nav > a { padding-block: 12px; font-size: 19px; }
}

/* --- 11. Der Weg zum Termin bleibt auf jeder Breite in der Kopfzeile ------
   Bisher wich die Schaltflaeche unter 560 px ganz aus dem Kopf und wurde
   durch eine zweite in der Schublade ersetzt. Das war richtig, solange
   dort ein 130 px breites Textziel stand - die kompakte Schaltflaeche
   passt aber neben Bildmarke und Umschalter auch auf 390 px, und ein
   Konversionsziel, das man erst aufklappen muss, ist eines weniger.

   Damit entfaellt die Zweitfassung in der Schublade: zwei gleiche Wege
   uebereinander sind keine zwei Wege.
   ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .masthead__inner { gap: 14px; }
  .masthead__action {
    display: inline-flex;
    margin-left: 12px;
    height: 40px;
    padding-inline: 14px;
    font-size: 15px;
  }
  .masthead__toggle { margin-left: auto; }
  .masthead__drawer-cta { display: none; }
}
/* Fluent Forms – Scriptomat */
form.fluent_form_5 .ff-btn-submit,
form.fluent_form_6 .ff-btn-submit,
form.fluent_form_7 .ff-btn-submit,
form.fluent_form_8 .ff-btn-submit,
form.fluent_form_9 .ff-btn-submit {
    width: 100%;
    height: 52px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    box-sizing: border-box;

    background: #3bd7a2 !important;
    color: #111827 !important;
    border: 0 !important;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;

    transition: filter 0.15s ease;
}

form.fluent_form_5 .ff-btn-submit:hover,
form.fluent_form_6 .ff-btn-submit:hover,
form.fluent_form_7 .ff-btn-submit:hover,
form.fluent_form_8 .ff-btn-submit:hover,
form.fluent_form_9 .ff-btn-submit:hover {
    background: #3bd7a2 !important;
    filter: brightness(0.94);
}