/* ===========================================================================
   projektablauf.css - Bausteine, die es NUR auf projektablauf.html gibt
   ---------------------------------------------------------------------------
   Eigene Datei aus demselben Grund wie css/module-network.css fuer die
   Startseite: die Klassen dieser Seite (Schrittkarten, Bryve-Block,
   Hinweiszeile) kommen sonst nirgends vor. In style.css laegen sie auf allen
   43 Seiten im Ladeweg, ohne je zu greifen - und jede spaetere Aenderung an
   ihnen waere ein Eingriff in die Datei, die die ganze Website traegt.

   Eingebunden nur in projektablauf.html, NACH style.css. Die Vorlage des
   Kollegen (Concept/projektablauf-vorschau_1.html) trug diese Regeln in einem
   <style>-Block; der Rest jenes Blocks war ein Auszug aus style.css und ist
   beim Uebernehmen entfallen.

   Wandert der Ablauf spaeter auf weitere Seiten, gehoert der Inhalt dieser
   Datei nach css/style.css - dann aber vollstaendig, nicht in Teilen.
   =========================================================================== */

/* Knoepfe unter der Hero-Lead. `.page-hero` hat dafuer keinen eigenen Abstand,
   deshalb hier - in style.css traefe es die page-heros aller anderen Seiten. */
.pa-hero-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;}

/* Hero-Animation (15.09.2026). Weisser Grund und die fehlende Trennlinie
   kommen aus `page-hero--split` in style.css, Raster und Bildgroesse ebenso -
   hier steht nur, was diese Seite von den anderen --split-Heros unterscheidet.

   OBERGRENZE 490 px, dieselbe wie auf den fuer-*.html. Dort wurde sie
   gewaehlt, weil die Figur im Video klein gerahmt ist (47 % der Breite) und
   bei 415 px zu zierlich wirkte. Hier fuellt das Motiv 67 % der Breite, ist
   also bei gleicher Kastenbreite rund 30 % groesser - so gewollt (Entscheidung
   vom 15.09.2026): die Seite hat unter dem Hero keine Verlagstypen-Reihe und
   vertraegt das kraeftigere Bild.

   KEINE ANHEBUNG (`--hoch`/`--lift` wie bei `.page-hero--vtyp`): Das Motiv
   sitzt in seinem Videobild bereits mittig - 16,7 % Weissraum oben gegen
   17,0 % unten, gemessen am 15.09.2026. Bei den sechs Verlagstyp-Videos sind
   es 25 % gegen 12,5 %, dort gleicht `--hoch` die Haelfte der Differenz aus.
   Hier gaebe es nichts auszugleichen, und die gestalterische Anhebung
   (`--lift`) samt negativem Rand haengt an der Reihe darunter, die es auf
   dieser Seite nicht gibt. */
.page-hero--pa .ph-media__img{max-width:clamp(280px,38vw,490px);}

/* ---------------------------------------------------------------------------
   KARTEN DES ABSCHNITTS "UNSER VORGEHEN"
   Die sechs Texte sind unterschiedlich lang - von drei bis sechs Zeilen. Ohne
   das hier klebte die Verweiszeile (`.mod-to`) jeweils direkt unter ihrem
   Absatz und die sechs Pfeile staffelten sich treppenartig durch das Raster.
   Die Karten selbst sind vom Raster schon gleich hoch gezogen; `margin-top:auto`
   schiebt nur die Zeile an den Fuss, dann bilden die Pfeile je Reihe eine Linie.
   Nur hier, weil auf den Modulseiten alle Kartentexte gleich lang gehalten sind.
   --------------------------------------------------------------------------- */
.mod-grid--kern>.mod--rich{display:flex;flex-direction:column;}
.mod-grid--kern>.mod--rich .mod-to{margin-top:auto;padding-top:.6rem;}

/* ZWEITES ZEICHEN BEIM UEBERFAHREN: eine tuerkise Linie am oberen Rand, die
   sich von links nach rechts aufzieht. Der Drop-Shadow von `.mod` allein sagt
   "hier ist etwas", die Linie sagt "hier geht es weiter" - und sie laeuft in
   dieselbe Richtung wie der Pfeil unten in der Karte.

   `scaleX` und nicht `width`: eine Transformation laeuft im Compositor, eine
   Breitenaenderung loest in jedem Bild ein neues Layout aus. `transform-origin:
   left` macht daraus das Aufziehen nach rechts - ohne das waechst die Linie aus
   der Mitte nach beiden Seiten.

   `overflow:hidden` an der Karte, damit die Linie an den oberen Ecken der
   Rundung (12 px) folgt. Der Schatten des Hovers liegt AUSSERHALB der Karte
   und wird davon nicht beschnitten.

   Die Linie sitzt im ::before, weil die Karte ein Link ist: ein zusaetzliches
   <span> im Markup waere sechsmal derselbe leere Knoten. */
/* NUR AN DEN HOCHKANT-KARTEN DES VORGEHENS, nicht an den Schrittkarten des
   Ablaufs. Dort lief sie kurz mit und wurde am 15.09.2026 wieder entfernt:
   Die Schrittkarten sind querformatig und fast so breit wie der Container -
   eine Linie ueber diese ganze Breite ist kein Akzent mehr, sondern ein
   Balken. Dieselbe Regel, dieselbe Farbe, dieselben 3 px wirken je nach
   Kartenformat voellig verschieden. Der Ablauf bleibt deshalb bei
   Hover-Lift und Schatten. */
.mod-grid--kern>.mod--rich{overflow:hidden;}
.mod-grid--kern>.mod--rich::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--turq);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.mod-grid--kern>.mod--rich:hover::before,
.mod-grid--kern>.mod--rich:focus-visible::before{transform:scaleX(1);}

/* Wer Bewegung abbestellt hat, bekommt die Linie trotzdem - nur ohne das
   Aufziehen. Die Markierung geht sonst verloren, und genau sie ist der Zweck. */
@media (prefers-reduced-motion:reduce){
  .mod-grid--kern>.mod--rich::before{transition:none;}
}

/* ---------------------------------------------------------------------------
   SPRUNGZIELE
   Seit dem 15.09.2026 zeigen die sechs Karten des Abschnitts "Unser Vorgehen"
   in die Abschnitte, die ihren Grundsatz ausfuehren. Die Kopfzeile ist
   `position:sticky` und 76 px hoch - ohne Vorhalt landet das Ziel genau
   darunter und die Ueberschrift, wegen der man gesprungen ist, ist verdeckt.
   `scroll-margin-top` ist dafuer da; es aendert am Layout nichts und wirkt
   nur beim Springen.
   Steht hier und nicht in style.css: dort traefe es jeden Anker der Website
   auf einen Schlag, und die bestehenden Sprungziele (#kontakt, #module …)
   sind auf ihre heutige Lage hin gebaut. Kommt das global, gehoert es
   gemessen und in einem eigenen Schritt.
   --------------------------------------------------------------------------- */
#rollen,#steuerung,#bryve,#ablauf,#kontakt,.pa-step[id]{scroll-margin-top:92px;}

/* HARTER SPRUNG STATT SANFTEM SCROLLEN - auf dieser Seite, mit Absicht.
   `style.css` setzt `html{scroll-behavior:smooth}`. Gemessen am 15.09.2026:
   Klickt man eine der sechs Karten in der ersten Sekunde nach dem Laden,
   setzt der Browser zwar den Hash, scrollt aber NICHT - man bleibt oben und
   die Karte wirkt kaputt. Nach etwa anderthalb Sekunden springt er, landet
   aber je nach Zeitpunkt bis zu 237 px vom Ziel entfernt. Mit `auto` sitzt
   jeder Sprung sofort und auf den Pixel genau (Ziel bei 92 px, also exakt
   unter der Kopfzeile).
   Die Seitenhoehe aendert sich dabei NICHT (10449 px vor wie nach dem Klick) -
   es liegt also nicht an nachladenden Bildern, wie am 11.09.2026 vermutet,
   sondern an der Animation selbst.
   Hier lokal, weil die Karten ohne funktionierenden Sprung sinnlos waeren.
   Ob `smooth` projektweit weichen soll, ist eine eigene Entscheidung: es
   betrifft 43 Seiten und jeden Anker darin. */
html{scroll-behavior:auto;}

/* ---------------------------------------------------------------------------
   SCHRITTKARTEN
   Eine <ol>, damit die Reihenfolge auch ohne CSS und im Screenreader stimmt.
   Die sichtbare Nummer steht trotzdem im Markup (`.pa-step__num`) und nicht
   als ::marker oder Counter: sie ist gross, gefaerbt und muss frei
   positioniert werden - dasselbe Muster wie `.seg .num` im Segmentraster.

   Die senkrechte Linie zwischen den Karten sitzt in der Mitte der
   Nummernspalte. Ihr `left` muss deshalb dieselben beiden clamp()-Werte
   verrechnen wie Polster und Spaltenbreite - darum stehen beide als
   Custom Property und nicht direkt in den Regeln.
   --------------------------------------------------------------------------- */
.pa-steps{
  --pa-pol:clamp(1.3rem,2.6vw,2rem);        /* Innenpolster der Karte */
  /* Breite der Nummernspalte. MUSS zur Schriftgroesse von `.pa-step__num`
     passen: zwei Ziffern im Light-Schnitt brauchen gut 1,15 em, sonst bricht
     die Zahl um und "01" steht als 0 ueber 1 (genau das passierte beim
     Vergroessern am 15.09.2026). Die Werte sind deshalb 1,17-mal die drei
     Stufen der Schrift - wer an einem dreht, dreht am anderen mit. */
  --pa-num:clamp(3.05rem,5.85vw,4.7rem);
  --pa-luft:clamp(1rem,2vw,1.4rem);         /* Abstand zwischen den Karten */
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--pa-luft);
}

.pa-step{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--pa-pol);
  display:grid;grid-template-columns:var(--pa-num) minmax(0,1fr);
  column-gap:clamp(1rem,2.2vw,1.7rem);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}

.pa-step:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(35,39,43,.12);border-color:transparent;}

/* Die verbindende Linie. `top:100%` setzt sie unter die Karte, die Hoehe ist
   genau der Rasterabstand - so beruehrt sie beide Nachbarn und laesst keine
   Luecke. Bei der letzten Karte entfaellt sie, sonst zeigte der Ablauf ins
   Leere. Beim Ueberfahren wandert die Karte 3px nach oben; die Linie gehoert
   zur Karte und wandert mit - das ist gewollt, sie bleibt angeheftet. */
.pa-step:not(:last-child)::after{
  content:"";position:absolute;
  left:calc(var(--pa-pol) + var(--pa-num) / 2 - 1px);
  top:100%;width:2px;height:var(--pa-luft);
  background:var(--line);
}

/* GROSS UND LEICHT (15.09.2026, vorher 800 und eine Stufe kleiner). Als
   Fettschnitt stand die Zahl in Konkurrenz zur Ueberschrift daneben; leicht
   und gross gesetzt ist sie wieder das, was sie sein soll - eine Ordnungszahl,
   die den Blick fuehrt, ohne zu rufen.
   `font-weight:300` ist ein echter Schnitt im Projekt (open-sans-latin-300),
   keine vom Browser gerechnete Verduennung. */
.pa-step__num{
  font-weight:300;font-size:clamp(2.6rem,5vw,4rem);
  line-height:1;letter-spacing:-.04em;
  /* Grau statt Mint (15.09.2026). `--grey-300` ist der hellste echte Grauton
     der Tokens - bei 60 px im Light-Schnitt traegt er genug, um die Ziffer
     lesbar zu machen, und bleibt hinter der Ueberschrift daneben zurueck.
     Das vorherige `--mint-100` war ein Flaechen-Tint, kein Textton: auf dem
     grauen Grund des Abschnitts stand die Zahl damit fast im Nichts. */
  color:var(--grey-300);
  text-align:center;
  /* Sicherung gegen den Umbruch: Sollte die Spalte doch einmal zu schmal
     werden, ragt die Zahl lieber ein paar Pixel heraus, als zweizeilig zu
     stehen. Zweizeilig ist sie keine Ordnungszahl mehr. */
  white-space:nowrap;
  transition:color .15s;
}
/* Beim Ueberfahren wird die Zahl dunkler, nicht gruen - dieselbe Steigerung
   wie zuvor, nur innerhalb der Grauachse. */
.pa-step:hover .pa-step__num{color:var(--ink);}

/* Der Neu-Marker fuer Schritt 04 (Kickoff). Bewusst nur ein linker Balken und
   kein zweiter Farbton: die Karte soll auffallen, ohne aus dem Raster zu
   fallen. */
.pa-step--neu{border-left:3px solid var(--turq);}

.pa-step__dauer{
  display:block;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);margin-bottom:.35rem;
}

.pa-step h3{margin:0 0 .4rem;font-size:1.22rem;hyphens:none;}
.pa-step__in>p{color:var(--grey);margin:0 0 .2rem;font-size:1rem;}
.pa-step .flist{margin-top:.9rem;}

/* ---------------------------------------------------------------------------
   AUFKLAPPER DER SCHRITTKARTEN (15.09.2026)
   Zugeklappt bleiben Nummer, Dauer, Titel und der Absatz stehen; Stichpunkte
   und Ergebniszeile stecken in `.pa-box`. Der Abschnitt war mit neun
   vollen Karten 7291 px hoch - laenger als jeder andere der Seite.

   WARUM UEBERHAUPT: Die Karten trugen den Hover-Lift von `.pa-step`, ohne dass
   ein Klick etwas bewirkte. Statt den Effekt zu streichen, hat er jetzt ein
   Ziel - dasselbe Vorgehen wie bei den Karten im Abschnitt "Unser Vorgehen".

   OHNE JAVASCRIPT IST ALLES OFFEN. Der Umschalter ist ein echter Anker auf die
   Box (`href="#schritt-03-mehr"`); erst `is-js` am <ol> versteckt die Boxen -
   und die Klasse setzt das Skript erst, NACHDEM es alle Paare gefunden hat.
   Faellt eine id weg, bleibt der Inhalt lesbar statt unerreichbar. Dasselbe
   Muster wie im Abschnitt "Betrieb" auf der Startseite.
   --------------------------------------------------------------------------- */
.pa-mehr{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1rem;
  font-size:.88rem;font-weight:700;color:var(--turq);text-decoration:none;
}
/* Der Winkel stammt aus `Assets/ic_arrow_unfold.svg` (15.09.2026). Geometrie
   und viewBox sind dieselben wie beim `.caret` der Kopfnavigation - der
   Unterschied ist der Strich: 30 statt 18 und runde Enden. Deshalb eine eigene
   Klasse und nicht `.caret`: die globale Regel dort setzt `opacity:.55` und
   wuerde das Tuerkis zu Grau daempfen. */
.pa-unfold{
  width:13px;height:auto;flex:0 0 auto;
  fill:none;stroke:var(--turq);stroke-width:30;stroke-linecap:round;
  transition:transform .2s;
}
[data-aufklapp].is-js .pa-box{display:none;}
[data-aufklapp].is-js .pa-box.is-offen{display:block;}
/* Der Winkel dreht sich, wenn die Box offen ist - zweite Beschriftung waere ein
   weiterer Woerterbuch-Schluessel in sieben Sprachen und sagt nichts mehr. */
.pa-mehr[aria-expanded="true"] .pa-unfold{transform:rotate(180deg);}
/* Knopf in der Box von Schritt 01. Eigener Absatz, damit der Knopf nicht an der
   Ergebniszeile klebt. */
.pa-step__tun{margin:1.1rem 0 0;}

/* Die Ergebniszeile schliesst jeden Schritt ab. Der Trennstrich macht sie zur
   Bilanz und nicht zum letzten Aufzaehlungspunkt. */
.pa-step__erg{
  display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;
  margin:1.1rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.94rem;color:var(--ink-2);
}
.pa-step__erg strong{color:var(--turq-deep);font-weight:700;white-space:nowrap;}

/* ---------------------------------------------------------------------------
   BRYVE-ABSCHNITT (auf --ink)
   --------------------------------------------------------------------------- */
.pa-flist--2{columns:2;column-gap:clamp(1.8rem,4vw,3.4rem);}
.pa-flist--2 li{break-inside:avoid;-webkit-column-break-inside:avoid;
  font-size:.98rem;margin-bottom:1rem;line-height:1.6;}

/* Auf dunklem Grund ist --ink-2 (die Grundfarbe von .flist li) unlesbar.
   Steht hier und nicht in style.css, weil `.flist` auf `--ink` sonst auf
   keiner Seite vorkommt (geprueft am 15.09.2026). Kommt sie anderswo hinzu,
   gehoeren diese drei Zeilen nach style.css - sonst faellt der Text dort
   in ein Grau, das auf Anthrazit nicht mehr zu lesen ist. */
.section--ink .flist li{color:rgba(255,255,255,.78);}
.section--ink .flist li strong{color:#fff;}
.section--ink .flist li svg{fill:var(--teal-soft);}

.pa-bryve__aktionen{flex-direction:row;flex-wrap:wrap;margin-top:2.2rem;}

/* DIE WORTMARKE IM FLIESSTEXT (15.09.2026)
   Im Lead stand „Bryve" als <strong> und war schwer zu lesen; jetzt steht dort
   das Logo selbst.

   WEISS, NICHT #0d1020. Die Vorlage ist fuer helle Gruende gezeichnet, dieser
   Abschnitt ist `section--ink` - in der Originalfarbe waere die Marke auf dem
   Anthrazit praktisch unsichtbar. Voll deckendes Weiss und nicht die
   Lead-Farbe (rgba(255,255,255,.72)): Die Marke ersetzt ein <strong>, sie soll
   also eher mehr Gewicht haben als der Satz, nicht weniger.

   HOEHE UND GRUNDLINIE: Die Marke enthaelt Ober- UND Unterlaenge (b und y),
   ihre Zeichenflaeche reicht also von der Oberlaenge bis unter die Grundlinie.
   Bei einer Hoehe von 1 em wirkte die Schrift deshalb zu klein. `vertical-align`
   holt den Ueberhang unter der Grundlinie (rund 20,5 % der Gesamthoehe) wieder
   herunter, damit die Marke auf derselben Linie sitzt wie der Satz - die beiden
   Werte haengen also zusammen: wer die Hoehe aendert, rechnet 0,205 davon als
   neuen `vertical-align`. (1.32em war der erste Stand, am 15.09.2026 auf
   Wunsch auf 1.15em zurueckgenommen.)

   `fill-rule:evenodd` stammt aus der Vorlage und MUSS bleiben - ohne sie
   laufen die Innenformen von b, e und y zu. */
.pa-bryve-logo{
  display:inline-block;
  height:1.15em;width:auto;
  vertical-align:-.235em;
  margin:0 .06em;
  fill:#fff;fill-rule:evenodd;
}

/* ---------------------------------------------------------------------------
   ZEICHEN IN DER ROLLENTABELLE (15.09.2026)
   Je Rolle ein Zeichen vor dem Namen. Stil wie ueberall auf der Website:
   24er-viewBox, gefuellte Form, einfarbig in `--turq` - dieselbe Sprache wie
   die Haken der `.flist` und die Zeichen im Kopfmenue.

   `aria-hidden`, weil der Rollenname direkt daneben steht: ein zweites Mal
   vorgelesen zu werden hilft niemandem.

   Die erste Spalte ist fett und `vertical-align:top`. Das Zeichen bekommt
   deshalb `margin-top` statt einer senkrechten Zentrierung - bei zweizeiligen
   Namen ("Entscheidung ueber den Umfang") soll es an der ERSTEN Zeile stehen,
   nicht in der Mitte des Blocks. `flex:0 0 auto` haelt es rund, wenn der Name
   umbricht.
   --------------------------------------------------------------------------- */
.pa-rolle{display:flex;align-items:flex-start;gap:.6rem;}
.pa-rolle__ic{flex:0 0 auto;width:26px;height:26px;fill:var(--turq);margin-top:-.08em;}

/* ---------------------------------------------------------------------------
   MIGRATIONS-DIAGRAMM (15.09.2026)
   Zwei Bahnen statt einer Kette. Der Lead sagt, eine Migration in einem
   einzigen Durchgang funktioniere fast nie - das Diagramm zeigt genau das:
   oben der Probelauf ins Testsystem, dazwischen die Bereinigung als Schleife,
   unten der kurze Delta-Sprung in den Echtbetrieb.

   Gebaut aus Rastern und Randlinien, nicht aus einem SVG: die Beschriftungen
   muessen uebersetzbar bleiben (der Sammler liest HTML, keine <text>-Knoten),
   und der Umbruch auf schmalen Schirmen soll das Raster erledigen, nicht eine
   zweite gezeichnete Fassung.
   --------------------------------------------------------------------------- */
/* AUF DUNKLEM GRUND (`section--ink`, seit 15.09.2026). Auf Weiss standen
   weisse Knoten auf weissem Abschnitt - das Diagramm blieb blass und die
   Rahmen mussten die ganze Arbeit tun. Dieselbe Ueberlegung wie beim
   Steckplatz auf ki.html: ein Diagramm braucht einen Grund, von dem es sich
   abhebt. Die Knoten sind deshalb aufgehellte Flaechen (`rgba(255,255,255,.05)`)
   mit heller Kontur, genau wie `.steck__hub` dort. */
.pa-mig{
  --mig-linie:rgba(255,255,255,.22);
  --mig-knoten:rgba(255,255,255,.05);
  --mig-kontur:rgba(255,255,255,.14);
  /* DREI ABSTAENDE, DIE ZUSAMMENGEHOEREN. Sie stehen hier als Eigenschaften
     und nicht dreimal einzeln in den Regeln, weil die Schleife (Punkt 3) ihre
     Summe braucht: Ihr Text soll auf derselben Kante beginnen wie der Text in
     den Karten darueber, und der liegt hinter Bahn-Polster PLUS Karten-Polster.
     Wer an einem der drei Werte dreht, haelt die Bunduengigkeit damit
     automatisch. */
  --mig-einzug:clamp(1rem,2.4vw,1.9rem);         /* Aussenabstand von Bahn und Schleife */
  --mig-bahn-pol:clamp(1.1rem,2.6vw,2rem);       /* senkrechte Linie -> Karte */
  --mig-karte-pol:clamp(.95rem,1.9vw,1.25rem);   /* Innenpolster der Karten */
  display:grid;gap:0;
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
}

/* ---- Quelle: der Ausgangspunkt beider Bahnen --------------------------- */
.pa-mig__quelle{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:var(--mig-knoten);border:1px solid var(--mig-kontur);border-radius:var(--r);
  padding:1rem clamp(1.1rem,2.2vw,1.5rem);
}
.pa-mig__quelle b{font-size:1.05rem;color:#fff;}

.pa-mig__ic{display:block;flex:0 0 auto;width:34px;height:34px;line-height:0;}
/* `--teal-soft` und nicht `--turq`: das dunklere Tuerkis verliert auf
   Anthrazit zu viel Kontrast - dieselbe Wahl wie bei den Haken der `.flist`
   in dunklen Abschnitten. */
.pa-mig__ic svg{width:100%;height:100%;fill:var(--teal-soft);}
.pa-mig__ic--klein{width:26px;height:26px;}
.pa-mig__klein{font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.5;}

/* ---- Die Bahnen ---------------------------------------------------------
   Jede Bahn haengt an einer senkrechten Linie, die von der Quelle herunter
   durch das ganze Diagramm laeuft. Sie steckt im Aussenabstand links, damit
   sie beim Umbruch auf eine Spalte einfach mitgeht. */
.pa-mig__bahn{
  position:relative;
  padding:1.5rem 0 0 var(--mig-bahn-pol);
  border-left:2px solid var(--mig-linie);
  margin-left:var(--mig-einzug);
}
.pa-mig__takt{
  display:block;margin-bottom:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
/* Der waagerechte Anschluss von der senkrechten Linie an die erste Stufe. */
.pa-mig__bahn::before{
  content:"";position:absolute;left:-2px;top:2.75rem;width:var(--mig-bahn-pol);height:2px;
  background:var(--mig-linie);
}

/* ---- Kette aus Stufen und Ziel ------------------------------------------
   `auto-fit` waere hier falsch: die Zahl der Knoten ist bekannt (drei bzw.
   zwei), und sie sollen NICHT beliebig umbrechen, sondern gemeinsam auf eine
   Spalte fallen - sonst steht ein Pfeil ins Leere. */
.pa-mig__kette{
  display:grid;grid-template-columns:1fr 1fr 1.15fr;
  gap:clamp(.9rem,2vw,1.4rem);align-items:stretch;
}
.pa-mig__kette--kurz{grid-template-columns:1fr 1.5fr;}

.pa-mig__stufe,.pa-mig__ziel{
  position:relative;
  background:var(--mig-knoten);border:1px solid var(--mig-kontur);border-radius:var(--r);
  padding:var(--mig-karte-pol);
}
.pa-mig__stufe b,.pa-mig__ziel b{display:block;font-size:1.02rem;color:#fff;margin-bottom:.3rem;}
.pa-mig__stufe p{margin:0;font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.55;}

/* Die Nummer sitzt als Marke auf der oberen Kante - dieselbe Rolle wie die
   Ziffer an den Schrittkarten, nur klein: hier ordnet sie die Stufe in die
   Viererfolge des Textes ein, sie traegt nicht den Knoten. */
.pa-mig__nr{
  position:absolute;top:-.7rem;left:var(--mig-karte-pol);
  display:grid;place-items:center;width:1.5rem;height:1.5rem;
  /* `--teal-soft` mit dunkler Schrift statt `--turq` mit weisser: das
     dunklere Tuerkis hat auf Anthrazit zu wenig Kontrast, um eine 1,5 rem
     kleine Scheibe zu tragen. */
  border-radius:50%;background:var(--teal-soft);color:var(--ink);
  font-size:.78rem;font-weight:700;line-height:1;
}
.pa-mig__stufe{padding-top:calc(var(--mig-karte-pol) + .35rem);}

/* Pfeile zwischen den Knoten. Reine Zierde - die Reihenfolge steht schon in
   der Reihenfolge der Knoten, deshalb kein aria-Aufwand. Unter 760px, wo die
   Kette einspaltig wird, zeigen sie nach unten statt nach rechts. */
.pa-mig__stufe::after{
  content:"";position:absolute;top:50%;right:calc(-1 * clamp(.9rem,2vw,1.4rem) / 2 - 6px);
  width:0;height:0;margin-top:-7px;
  border:7px solid transparent;border-left-color:rgba(255,255,255,.4);
}

/* Das Ziel jeder Bahn setzt sich von den Stufen ab - es ist ein Zustand, kein
   Arbeitsschritt. Auf dunklem Grund kehrt sich die Staffelung um: Wo auf Weiss
   das Zwischenziel hell und das Endziel dunkel war, ist hier das Zwischenziel
   etwas heller als die Stufen und das ENDZIEL steht als einziges in Weiss mit
   dunkler Schrift. Es ist der Punkt, auf den das ganze Diagramm zulaeuft. */
.pa-mig__ziel{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);
  display:flex;flex-direction:column;gap:.35rem;
}
.pa-mig__ziel--live{background:#fff;border-color:transparent;}
.pa-mig__ziel--live b{color:var(--ink);}
.pa-mig__ziel--live .pa-mig__klein{color:var(--grey);}
.pa-mig__ziel--live .pa-mig__ic svg{fill:var(--turq);}

/* ---- Die Schleife: der Rueckweg vom Testsystem in die Bereinigung -------
   Sie steht eingerueckt zwischen den Bahnen und traegt den linken Balken in
   Tuerkis: das ist die Stelle, an der der Kunde entscheidet, und der einzige
   Knoten, der nicht in einer Bahn liegt. */
.pa-mig__schleife{
  position:relative;
  margin:1.4rem 0 0 var(--mig-einzug);
  /* Der linke Abstand ist die SUMME aus Bahn- und Karten-Polster - genau so,
     ohne Korrektur. Die Rechnung geht auf, weil sich zwei Unterschiede
     gegenseitig aufheben: Der Balken der Schleife ist 1px breiter als die
     Bahnlinie (3 statt 2), die Karten haben dafuer einen 1px-Rahmen, den die
     Schleife nicht hat.
       Karte:    Einzug + 2px Linie + Bahn-Polster + 1px Rahmen + Karten-Polster
       Schleife: Einzug + 3px Balken + (Bahn-Polster + Karten-Polster)
     Nummer und Text beginnen damit auf derselben Kante wie Ueberschrift und
     Text in den Karten darueber - gemessen 179,06px in beiden Faellen. */
  padding:1.1rem clamp(1.1rem,2.2vw,1.5rem) 1.1rem calc(var(--mig-bahn-pol) + var(--mig-karte-pol));
  background:rgba(95,192,158,.10);
  border-left:3px solid var(--teal-soft);
  border-radius:0 var(--r) var(--r) 0;
}
.pa-mig__schleife b{display:inline-block;font-size:1.02rem;color:#fff;margin:0 0 .3rem;}
.pa-mig__schleife p{margin:0;font-size:.92rem;color:rgba(255,255,255,.76);line-height:1.6;max-width:78ch;}
.pa-mig__schleife strong{color:#fff;}
.pa-mig__schleife .pa-mig__nr{position:static;display:inline-grid;vertical-align:.1em;margin-right:.5rem;}

@media (max-width:760px){
  /* Einspaltig - und die Pfeile drehen sich mit. `border-left-color` wieder
     auf transparent, sonst stuende ein zweiter Pfeil quer. */
  .pa-mig__kette,.pa-mig__kette--kurz{grid-template-columns:1fr;}
  .pa-mig__stufe::after{
    top:auto;bottom:calc(-1 * clamp(.9rem,2vw,1.4rem) / 2 - 6px);
    right:auto;left:50%;margin:0 0 0 -7px;
    border-left-color:transparent;border-top-color:var(--grey-300);
  }
}

/* ---------------------------------------------------------------------------
   KLEINKRAM
   --------------------------------------------------------------------------- */
/* Nachsatz unter einer .ptlist - etwas kleiner als der Fliesstext, damit er
   als Fussnote und nicht als weiterer Absatz gelesen wird. */
.pa-hinweis{
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  padding-left:1.1rem;border-left:3px solid var(--turq);
  color:var(--grey);font-size:.96rem;max-width:70ch;
}
/* Der Nachsatz steht seit dem 15.09.2026 in einem dunklen Abschnitt (die
   Datenmigration). `--grey` waere dort nicht zu lesen, und `--turq` als
   Balken zu dunkel - beides eine Stufe heller. */
.section--ink .pa-hinweis{color:rgba(255,255,255,.72);border-left-color:var(--teal-soft);}

/* .ptlist steht in style.css zweispaltig; hier tragen die Eintraege mehr Text,
   deshalb etwas mehr Luft zwischen den Zeilen. */
.section .ptlist{row-gap:clamp(1.5rem,2.8vw,2.2rem);}

@media (max-width:860px){
  .pa-flist--2{columns:1;}
  .pa-bryve__aktionen .btn{width:100%;justify-content:center;}
}

@media (max-width:560px){
  /* Auf schmalen Schirmen frisst die Nummernspalte zu viel Breite. Die Nummer
     rueckt ueber die Ueberschrift, die Verbindungslinie entfaellt mit ihr -
     ohne Spalte haette sie keinen Ort mehr. */
  .pa-step{grid-template-columns:1fr;row-gap:.2rem;}
  /* Ohne Spalte gibt es keine Breitengrenze mehr - die Zahl darf hier ruhig
     etwas kleiner stehen als im Raster, sie steht ja allein ueber dem Titel. */
  .pa-step__num{text-align:left;font-size:2.6rem;}
  .pa-step:not(:last-child)::after{display:none;}
}

/* Knopf in den aufgeklappten Karten der zusaetzlichen Dienstleistungen.
   Eigener Absatz mit Abstand nach oben, damit er nicht an der letzten
   Stichpunktzeile klebt; `margin-bottom:0`, weil die Karte schon polstert. */
/* `.pa-box .pa-opt__tun` und nicht `.pa-opt__tun` allein: style.css setzt
   `.mod p{margin:0}` (0,1,1) - eine einzelne Klasse (0,1,0) verliert dagegen
   und der Abstand kaeme gar nicht an. Genau das war am 15.09.2026 der Fall,
   zweimal erhoeht und beide Male ohne Wirkung. */
.pa-box .pa-opt__tun{margin:2.2rem 0 0;}
.pa-opt__tun .btn{width:100%;justify-content:center;}

/* Der Umschalter der Dienstleistungs-Karten an den Kartenfuss - dieselbe
   Ueberlegung wie bei `.mod-to` im Vorgehen: Die drei Kurztexte sind zwei bis
   drei Zeilen lang, ohne das stuenden die drei "Mehr erfahren" auf drei
   verschiedenen Hoehen. Nur im Kartenraster, nicht an den Schrittkarten des
   Ablaufs - dort ist der Umschalter eine gewoehnliche Zeile im Fluss.
   Ist die Karte offen, fuellt die Box den Rest und `auto` wirkt von selbst
   nicht mehr. */
.mod-grid--kern[data-aufklapp]>.mod--rich>.pa-mehr{margin-top:auto;}

/* JEDE KARTE NUR SO HOCH WIE IHR INHALT (Korrektur vom 15.09.2026).
   Rasterzellen werden standardmaessig auf gleiche Hoehe gezogen. Solange alle
   Karten zu sind, faellt das nicht auf - sobald aber EINE aufklappt, wachsen
   die beiden anderen mit ihr, und `margin-top:auto` schiebt deren Umschalter
   an den Fuss des leeren Raums: ein Loch mitten in der zugeklappten Karte.
   `align-items:start` beendet das Mitwachsen; die Karten stehen dann oben
   buendig und wachsen einzeln.

   Damit die Ruhelage trotzdem gleichmaessig aussieht, traegt der Kurztext ein
   Mindestmass von drei Zeilen (style.css setzt 2.4em fuer alle `.mod--rich`,
   die drei Texte hier brauchen drei). Dann stehen auch die drei
   "Mehr erfahren" auf einer Linie, ohne dass eine Karte dafuer gestreckt
   werden muesste.

   5em und nicht 4.65em: Die Zeilenhoehe betraegt hier 1,65em, drei Zeilen sind
   also 4,95em - der erste Anlauf lag 4 px darunter und der laengste der drei
   Texte ragte heraus. Wer die Texte aendert, prueft diesen Wert mit.
   (`3lh` waere die saubere Schreibweise, aber die Einheit ist zu jung fuer die
   Browser, auf die diese Website Ruecksicht nimmt.) */
.mod-grid--kern[data-aufklapp]{align-items:start;}
.mod-grid--kern[data-aufklapp]>.mod--rich>p{min-height:5em;}

/* ---------------------------------------------------------------------------
   ANIMATION IM KOPF DER DATENMIGRATION (15.09.2026)
   Ueberschrift links, Animation rechts. Das Raster loest sich unter 820px auf -
   dieselbe Grenze wie beim `page-hero--split`, damit die Seite nur EINEN
   Haltepunkt fuer "Text neben Bild" kennt.

   `.section-head` bringt einen eigenen Aussenabstand nach unten mit; der
   gehoert jetzt an den Wrapper, sonst steht die Animation auf halber Hoehe
   ueber dem Diagramm.
   --------------------------------------------------------------------------- */
/* DIE ANIMATION BEGINNT AN DER ABSCHNITTSKANTE (15.09.2026).
   Sie ist 373 px hoch, der Textblock 259 - der Text sitzt mittig dazu
   (`align-items:center`), und die ueberstehende Haelfte nach oben faengt der
   Abschnitt ab, indem er sein `padding-top` abgibt. Oberkante Animation =
   Oberkante Abschnitt.

   Das geht nur, WEIL der Videogrund exakt `--ink` ist (gemessene Eckpixel
   34,38,41 gegen 35,39,43): Die Animation stoesst ohne sichtbare Kante an den
   Nachbarabschnitt, das Motiv waechst scheinbar aus dem Rand. Bei einem Video
   mit anderem Grund waere das ein Kasten, der oben abgeschnitten aussieht -
   wer die Animation tauscht, prueft das zuerst.

   Der Text braucht seinen Abstand zur Kante weiterhin; er steht mittig und
   bekommt ihn dadurch von selbst. */
.pa-mig-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,32vw,400px);
  gap:clamp(1.4rem,4vw,3rem);align-items:center;
  margin-bottom:clamp(2.2rem,4vw,3.4rem);
}
@media (min-width:821px){
  .pa-mig-sec{padding-top:0;}
}
.pa-mig-kopf .section-head{margin-bottom:0;}
.pa-mig-ani{display:flex;justify-content:center;}
.pa-mig-ani__vid{display:block;width:100%;height:auto;max-width:400px;}

@media (max-width:820px){
  /* Einspaltig, und die Animation wandert unter den Text - sie ist Beiwerk,
     nicht die Aussage des Abschnitts. Kleiner gesetzt, damit sie auf dem
     Telefon nicht den halben Bildschirm fuellt, bevor das Diagramm beginnt. */
  .pa-mig-kopf{grid-template-columns:1fr;}
  .pa-mig-ani__vid{max-width:260px;}
}

/* ---------------------------------------------------------------------------
   TEASER ERSTBERATUNG (15.09.2026)
   Steht zwischen dem grauen "Optional" und dem dunklen Kontakt; den Wechsel
   traegt die Abfolge, der Abschnitt selbst bleibt weiss.
   Knopf und Fusszeile sitzen zentriert unter dem Kopf. Beide sind <p> in einer
   `.mod`-freien Umgebung - hier reicht die einzelne Klasse, anders als bei
   `.pa-opt__tun` in den Karten (dort schlaegt `.mod p` aus style.css zu).
   --------------------------------------------------------------------------- */
.pa-teaser__tun{margin:0;text-align:center;}
.pa-teaser__fuss{
  margin:1rem 0 0;text-align:center;
  font-size:.88rem;color:var(--grey);
}

/* ---------------------------------------------------------------------------
   MOUSEOVER-ERKLAERUNGEN IM MIGRATIONS-DIAGRAMM (15.09.2026)
   Die allgemeine Regel in style.css zeichnet die Sprechblase in `--ink` mit
   weisser Schrift - gebaut fuer helle Abschnitte. Dieses Diagramm steht auf
   `--ink`: dort waere sie eine dunkle Flaeche auf dunklem Grund, und selbst
   ihr Schatten (ebenfalls dunkel) traegt nichts. Deshalb hier umgekehrt,
   weiss mit dunkler Schrift. Dreieck mitgedreht, sonst zeigt eine dunkle
   Spitze auf eine weisse Blase.

   Der Haken sitzt am <b> der Knoten, nicht am Kasten - `[data-tip]` braucht
   beide Pseudo-Elemente, und `.pa-mig__stufe::after` ist der Pfeil zum
   naechsten Knoten.
   --------------------------------------------------------------------------- */
.pa-mig [data-tip]::after{
  background:#fff;color:var(--ink);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.pa-mig [data-tip]::before{border-top-color:#fff;}

/* Der erste Knoten sitzt an der Oberkante des Abschnitts (padding-top:0) -
   eine Blase darueber stuende im Nachbarabschnitt. Dort klappt sie nach
   unten: `top` statt `bottom`, und das Dreieck wechselt die Kante. */
.pa-mig__quelle [data-tip]::after{bottom:auto;top:calc(100% + 10px);}
.pa-mig__quelle [data-tip]::before{
  bottom:auto;top:calc(100% + 3px);
  border-top:0;border-bottom:8px solid #fff;
}

/* DIE GANZE KARTE LOEST AUS, nicht nur die Ueberschrift (15.09.2026).
   Der Haken muss am <b> bleiben (Pfeil und Blase teilen sich sonst die
   Pseudo-Elemente, siehe oben) - der AUSLOESER darf aber woanders sitzen:
   `:hover` am Knoten, angezeigt wird die Blase des <b> darin. Die Knoten sind
   einzeln aufgezaehlt und nicht als `.pa-mig>*`, weil eine Bahn drei Knoten
   enthaelt: beim Ueberfahren der Bahn erschienen sonst drei Blasen. */
.pa-mig__quelle:hover [data-tip]::after,.pa-mig__quelle:hover [data-tip]::before,
.pa-mig__stufe:hover [data-tip]::after,.pa-mig__stufe:hover [data-tip]::before,
.pa-mig__ziel:hover [data-tip]::after,.pa-mig__ziel:hover [data-tip]::before,
.pa-mig__schleife:hover [data-tip]::after,.pa-mig__schleife:hover [data-tip]::before{
  opacity:1;transform:translate(-50%,0);
}
/* Der Knoten muss beim Ueberfahren nach vorn, sonst liegt seine Blase hinter
   dem Nachbarknoten - dieselbe Aufgabe wie `[data-tip]:hover{z-index:5}` in
   style.css, nur jetzt eine Ebene weiter aussen. */
.pa-mig__quelle:hover,.pa-mig__stufe:hover,.pa-mig__ziel:hover,.pa-mig__schleife:hover{
  position:relative;z-index:5;
}

/* DIE SPITZE GEHOERT VOR DIE BLASE. Sie liegt in style.css eine Ebene
   darunter (z-index 6 gegen 7), und der Schatten der Blase faellt nach unten -
   genau auf die Spitze, die dadurch grau statt weiss aussah. Eine Ebene
   darueber ist sie Teil derselben weissen Form. */
.pa-mig [data-tip]::before{z-index:8;}