/* Page "Beruflicher Hintergrund, AI". One idea carries the page: the audit trail, a single line that
   starts as the moving network in the hero and runs down the page as its spine. A filled node stands
   for the person, a hollow one for an agent. The hero keeps the night tokens in both themes through
   its data-theme attribute, so no value here is new; the sheet below follows the visitor's theme. */

.page-shell {
  padding-top: 0;
  padding-bottom: 0;
}

/* In the reduced mode the shell pads <main> for the action bar; the sheet runs on behind that strip. */
#thomaschristl-main {
  background: var(--paper);
}

/* Long German words stay inside their column under user text spacing and 200 % text (WCAG 1.4.12, 1.4.4). */
.ai-profil {
  overflow-wrap: anywhere;
  --ai-profil-rand: clamp(16px, 4vw, 48px);
  --ai-profil-einzug: clamp(20px, 3vw, 44px);
  --ai-profil-breite: 1320px;
  --ai-profil-knoten: 14px;
  --ai-profil-bogen: 14px;
}

/* ---------- Hero ---------- */

.ai-profil-hero {
  position: relative;
  color: var(--ink);
  background-color: var(--paper);
}

/* The site's graph paper, as a drawing board behind the network: it fades out before the text, which
   stays on a plain surface. */
.ai-profil-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 42% at 50% 86%, #000 40%, transparent 100%);
  pointer-events: none;
}

.ai-profil-hero-raster {
  position: relative;
  --ai-profil-spalt: 0px;
  --ai-profil-netz-teiler: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--ai-profil-spalt);
  max-width: var(--ai-profil-breite);
  margin-inline: auto;
  padding-inline: var(--ai-profil-rand);
}

/* The line that leaves the network turns left along the hero's lower edge and becomes the spine of the
   page, so the trail really is one line. Its right end sits under the middle of the network's column:
   half of that column's share of the free width, which the divisor below states per layout. */
.ai-profil-hero-raster::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--ai-profil-rand) + var(--ai-profil-bogen));
  right: calc(var(--ai-profil-rand) + (100% - 2 * var(--ai-profil-rand) - var(--ai-profil-spalt)) / var(--ai-profil-netz-teiler));
  height: 2px;
  background: var(--sky);
}

/* A query container, so that the longest word of the heading always fits its own column. */
.ai-profil-hero-text {
  container-type: inline-size;
  padding-block: clamp(32px, 4.4vw, 56px) clamp(24px, 3vw, 40px);
  padding-left: var(--ai-profil-einzug);
}

.ai-profil-oberzeile {
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  color: var(--hero-text-soft);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.ai-profil-titel {
  margin: 0;
  color: var(--hero-text);
  font-size: clamp(2.5rem, 16cqi, 5.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ai-profil-titel span {
  display: block;
}

/* In a short laptop window the heading gives way, so that the sentence about responsibility stays on the
   first screen. A media query and not a height unit: browser zoom still enlarges the heading (WCAG 1.4.4). */
@media (min-width: 1024px) and (max-height: 820px) {
  .ai-profil-titel {
    font-size: clamp(2.5rem, 15cqi, 5rem);
  }
}

.ai-profil-einleitung {
  max-width: 36em;
  margin: clamp(16px, 2vw, 28px) 0 0;
  color: var(--hero-text-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Keeps the place of the control, which the script adds, so that nothing below it jumps. */
.ai-profil-steuerung {
  min-height: 44px;
  margin-top: clamp(16px, 2vw, 28px);
}

.ai-profil-steuerung-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--hero-text);
  background: transparent;
  border: 1px solid var(--sky);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* Two bars as borders, because forced colors keep a border and drop a background. The filled control
   shows the pressed state; the symbol stays the same because the text does. */
.ai-profil-steuerung-knopf::before {
  content: "";
  box-sizing: border-box;
  width: 11px;
  height: 12px;
  border-inline: 4px solid currentColor;
}

.ai-profil-steuerung-knopf[aria-pressed="true"] {
  color: var(--accent-contrast);
  background: var(--accent-solid);
  border-color: var(--accent-solid);
}

.ai-profil-steuerung-knopf:hover {
  border-color: var(--hero-text);
}

.ai-profil-steuerung-knopf:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* Forced colors drop the fill, which alone tells the pressed state apart. The opt-out frees the focus
   ring from the forced palette as well, so the ring takes a system colour of its own. */
@media (forced-colors: active) {
  .ai-profil-steuerung-knopf[aria-pressed="true"] {
    forced-color-adjust: none;
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }

  .ai-profil-steuerung-knopf[aria-pressed="true"]:focus-visible {
    outline-color: CanvasText;
  }
}

.ai-profil-hero-grafik {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.ai-profil-netz {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

.ai-profil-netz path,
.ai-profil-netz circle,
.ai-profil-netz rect {
  vector-effect: non-scaling-stroke;
}

.ai-profil-netz-linien path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.5;
  stroke-opacity: 0.62;
}

/* The last stretch leaves the drawing and runs on as the spine of the page, in the spine's own weight. */
.ai-profil-netz-linien path:last-child {
  stroke-width: 2;
  stroke-opacity: 1;
}

.ai-profil-netz-rueckweg path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.5;
  stroke-opacity: 0.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.ai-profil-netz-agenten > * {
  fill: var(--paper);
  stroke: var(--sky);
  stroke-width: 1.75;
}

.ai-profil-netz-details circle {
  fill: var(--sky);
}

.ai-profil-netz-details path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-profil-netz-mensch circle {
  fill: var(--hero-text);
}

.ai-profil-netz-mensch .ai-profil-netz-halo {
  fill: var(--paper);
  stroke: var(--hero-text);
  stroke-width: 1;
  stroke-opacity: 0.55;
}

/* The points rest invisibly until the script asks for motion, so without it nothing lies in a corner
   of the drawing. Each route has its own length, so the distance at which a point waits at its review
   gate is measured per route. */
.ai-profil-punkt {
  opacity: 0;
  fill: var(--hero-text);
  stroke: var(--sky);
  stroke-opacity: 0.4;
  stroke-width: 6;
  offset-rotate: 0deg;
  offset-distance: 0%;
}

.ai-profil-punkt--1 {
  offset-path: path("M280 34V158Q280 172 266 172H70Q56 172 56 186V308Q56 322 70 322H182Q196 322 196 336V450Q196 464 210 464H266Q280 464 280 478V606");
  --ai-profil-halt: 70.9%;
  --ai-profil-dauer: 17s;
  --ai-profil-start: 0s;
}

.ai-profil-punkt--2 {
  offset-path: path("M280 34V158Q280 172 294 172H378Q392 172 392 186V308Q392 322 378 322Q364 322 364 336V450Q364 464 350 464H294Q280 464 280 478V606");
  --ai-profil-halt: 62.4%;
  --ai-profil-dauer: 17s;
  --ai-profil-start: -3s;
}

.ai-profil-punkt--3 {
  offset-path: path("M280 34V158Q280 172 266 172H182Q168 172 168 186V308Q168 322 182 322Q196 322 196 336V450Q196 464 210 464H266Q280 464 280 478V606");
  --ai-profil-halt: 62.4%;
  --ai-profil-dauer: 17s;
  --ai-profil-start: -6s;
}

.ai-profil-punkt--4 {
  offset-path: path("M280 34V158Q280 172 294 172H490Q504 172 504 186V308Q504 322 490 322H378Q364 322 364 336V392H524Q538 392 538 378V264Q538 250 524 250H504V308Q504 322 490 322H378Q364 322 364 336V450Q364 464 350 464H294Q280 464 280 478V606");
  --ai-profil-halt: 43.8%;
  --ai-profil-dauer: 26s;
  --ai-profil-start: -9s;
}

.ai-profil-punkt--5 {
  offset-path: path("M280 34V158Q280 172 266 172H70Q56 172 56 186V308Q56 322 70 322H182Q196 322 196 336V392H36Q22 392 22 378V264Q22 250 36 250H56V308Q56 322 70 322H182Q196 322 196 336V450Q196 464 210 464H266Q280 464 280 478V606");
  --ai-profil-halt: 43.8%;
  --ai-profil-dauer: 26s;
  --ai-profil-start: -21s;
}

.ai-profil-punkt--6 {
  offset-path: path("M280 34V308Q280 322 294 322H350Q364 322 364 336V450Q364 464 350 464H294Q280 464 280 478V606");
  --ai-profil-halt: 60.0%;
  --ai-profil-dauer: 17s;
  --ai-profil-start: -13s;
}

@keyframes ai-profil-lauf {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  3% {
    opacity: 1;
  }

  48% {
    offset-distance: var(--ai-profil-halt);
  }

  58% {
    offset-distance: var(--ai-profil-halt);
  }

  97% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ai-profil-hero--bewegt .ai-profil-punkt {
    animation: ai-profil-lauf var(--ai-profil-dauer) ease-in-out var(--ai-profil-start) infinite;
  }

  .ai-profil-hero--angehalten .ai-profil-punkt {
    animation-play-state: paused;
  }
}

/* ---------- Sheet and spine ---------- */

.ai-profil-inhalt {
  color: var(--ink);
  background: var(--paper);
}

.ai-profil-bahn {
  --ai-profil-bahn-fuss: clamp(56px, 7vw, 104px);
  position: relative;
  max-width: var(--ai-profil-breite);
  margin-inline: auto;
  padding-inline: calc(var(--ai-profil-rand) + var(--ai-profil-einzug)) var(--ai-profil-rand);
  padding-bottom: var(--ai-profil-bahn-fuss);
}

/* The spine, one line from the hero's lower edge to the last node of the page. Top and left border of
   one box make the elbow with the same rounding as the lines of the network. The sheet follows the
   visitor's theme, and only --navy-soft carries the line on it in both themes. */
.ai-profil-bahn::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: calc(var(--ai-profil-bahn-fuss) - 40px);
  left: var(--ai-profil-rand);
  width: var(--ai-profil-bogen);
  border-top: 2px solid var(--navy-soft);
  border-left: 2px solid var(--navy-soft);
  border-top-left-radius: var(--ai-profil-bogen);
}

/* The line ends with the person, as the trail does, free below the last text. */
.ai-profil-bahn::after {
  content: "";
  position: absolute;
  bottom: calc(var(--ai-profil-bahn-fuss) - 40px);
  left: calc(var(--ai-profil-rand) - 6px);
  width: var(--ai-profil-knoten);
  height: var(--ai-profil-knoten);
  background: var(--navy);
  border-radius: 50%;
}

.ai-profil-abschnitt {
  padding-top: clamp(48px, 7vw, 104px);
}

.ai-profil-abschnitt h2 {
  position: relative;
  margin: 0 0 clamp(20px, 2.6vw, 36px);
  color: var(--ink);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Each section is a hollow station on the spine. */
.ai-profil-abschnitt h2::before {
  content: "";
  position: absolute;
  top: 0.32em;
  left: calc(-1 * var(--ai-profil-einzug) - 6px);
  width: var(--ai-profil-knoten);
  height: var(--ai-profil-knoten);
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 50%;
}

.ai-profil-abschnitt h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.ai-profil-abschnitt p,
.ai-profil-abschnitt li,
.ai-profil-abschnitt dd {
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.ai-profil-abschnitt a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ai-profil-abschnitt a:hover {
  text-decoration-thickness: 2px;
}

/* The global link rule takes every underline away, so this is the only non-colour marking of the link
   in the running text (embedded/README.md, "Links im Fließtext"). */
.ai-profil-textlink {
  text-decoration: underline;
}

.ai-profil-abschnitt a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ---------- Career and own responsibility ---------- */

.ai-profil-standort {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ai-profil-werdegang-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.ai-profil-werdegang-liste dt {
  padding-top: 16px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

.ai-profil-werdegang-liste dd {
  margin: 0 0 16px;
  max-width: 30em;
}

.ai-profil-verantwortung p {
  max-width: 30em;
  margin: 0;
}

/* ---------- Audit trail ---------- */

.ai-profil-pfad-raster {
  position: relative;
}

/* Below the wide layout the rail is only the line at the edge of the list. */
.ai-profil-schiene {
  display: none;
}

.ai-profil-schritte {
  display: grid;
  gap: clamp(4px, 1vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ai-profil-schritt;
}

.ai-profil-schritt {
  position: relative;
  padding: 16px clamp(12px, 2vw, 24px) 18px;
  margin-inline: calc(-1 * clamp(12px, 2vw, 24px));
  border-radius: var(--radius-md);
  counter-increment: ai-profil-schritt;
}

.ai-profil-schritt::before {
  content: counter(ai-profil-schritt);
  display: block;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

/* The node of a step on the spine; the rail takes over this role in the wide layout. */
.ai-profil-schritt::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(clamp(12px, 2vw, 24px) - var(--ai-profil-einzug) - 6px);
  width: var(--ai-profil-knoten);
  height: var(--ai-profil-knoten);
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 50%;
}

.ai-profil-schritt--mensch::after {
  background: var(--navy);
}

.ai-profil-schritt p {
  max-width: 30em;
  margin: 6px 0 0;
}

.ai-profil-schritt--aktiv {
  background: var(--accent-soft-strong);
}

.ai-profil-schritt--aktiv::before {
  color: var(--navy);
}

/* The active node stays hollow unless it is the person's: a filled node means the person, not "now". */
.ai-profil-schritt--aktiv::after {
  box-shadow: 0 0 0 4px var(--accent-soft-strong);
}

@media (prefers-reduced-motion: no-preference) {
  .ai-profil-schritt {
    transition: background-color 0.3s ease;
  }

  .ai-profil-schiene-fuellung {
    transition: transform 0.45s ease;
  }
}

/* ---------- Stance ---------- */

/* The one typographic moment of the sheet gets room of its own, in front of the next section as well. */
.ai-profil-haltung {
  padding-block: clamp(72px, 11vw, 160px);
}

.ai-profil-haltung-text {
  margin: 0;
}

.ai-profil-haltung-rahmen {
  display: block;
  max-width: 30em;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ai-profil-haltung-satz {
  display: block;
  color: var(--ink);
  font-size: clamp(1.625rem, 1rem + 2.9vw, 3.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ai-profil-haltung-rahmen + .ai-profil-haltung-satz {
  margin-top: clamp(16px, 2vw, 28px);
}

.ai-profil-haltung-satz + .ai-profil-haltung-satz {
  margin-top: clamp(8px, 1vw, 14px);
}

.ai-profil-haltung-satz + .ai-profil-haltung-rahmen {
  margin-top: clamp(16px, 2vw, 28px);
}

/* ---------- Five fields ---------- */

/* A field hangs on the spine: its rule runs on to the line, so the fields read as entries of the trail. */
.ai-profil-feld {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-block: clamp(24px, 3vw, 44px);
  border-top: 1px solid var(--line);
}

.ai-profil-feld::before,
.ai-profil-belege li::before,
.ai-profil-belege-zusatz::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(-1 * var(--ai-profil-einzug));
  width: var(--ai-profil-einzug);
  height: 1px;
  background: var(--line);
}

.ai-profil-feld-kopf h3 {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

.ai-profil-abschnitt .ai-profil-kernsatz {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.ai-profil-feld-liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 1.1em;
  list-style-type: "–  ";
}

.ai-profil-feld-liste li {
  max-width: 30em;
}

.ai-profil-feld-liste li::marker {
  color: var(--muted);
}

/* ---------- Results ---------- */

.ai-profil-belege {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-profil-belege li {
  position: relative;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.ai-profil-abschnitt .ai-profil-belege a {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.3;
}

.ai-profil-belege p {
  margin: 6px 0 0;
}

/* The rule spans the whole grid like those above it; only the text keeps to the reading width. */
.ai-profil-belege-zusatz {
  position: relative;
  margin: 8px 0 0;
  padding-top: 18px;
  padding-right: max(0px, 100% - 30em);
  border-top: 1px solid var(--line);
}

/* ---------- Footer variant of this page ---------- */

@media (min-width: 769px) {
  .thomaschristl-footer__grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

/* ---------- From the tablet on, the hero shows text and network side by side ---------- */

/* Not in a low window below 1024px: a desktop window at 200 % zoom lands there with half its CSS pixels, and
   the narrow column would keep the heading from growing with the zoom (WCAG 1.4.4). A real tablet or a narrow
   desktop window is higher than that and keeps the network on its first screen. From 1024px on a height rule
   would take the network off the first screen of every laptop, so that band stays two-column. */
@media (min-width: 768px) and (min-height: 700px), (min-width: 1024px) {
  .ai-profil-hero::before {
    mask-image: radial-gradient(ellipse 70% 62% at 78% 42%, #000 40%, transparent 100%);
  }

  .ai-profil-hero-raster {
    --ai-profil-spalt: clamp(16px, 2.4vw, 40px);
    --ai-profil-netz-teiler: 4.5;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .ai-profil-netz {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .ai-profil-belege {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 40px);
  }

  /* Only the first column reaches the spine; the one beside it ends at the gap. */
  .ai-profil-belege li:not(:first-child)::before {
    content: none;
  }

  .ai-profil-belege-zusatz {
    margin-top: 0;
  }
}

/* ---------- Wide layout ---------- */

@media (min-width: 1024px) {
  /* The network takes its full share of the hero. */
  .ai-profil-hero-raster {
    --ai-profil-netz-teiler: 4.2;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .ai-profil-standort {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 5vw, 80px);
  }

  .ai-profil-verantwortung h2::before {
    content: none;
  }

  /* Both headings stay on one line at the narrow end of this layout, so both texts start level. */
  .ai-profil-standort h2 {
    font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
  }

  .ai-profil-werdegang-liste {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  /* No column gap: the two top borders meet and read as one rule per row. */
  .ai-profil-werdegang-liste dt {
    padding-right: 24px;
  }

  .ai-profil-werdegang-liste dd {
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .ai-profil-pfad-raster {
    display: grid;
    grid-template-columns: minmax(200px, 2.5fr) minmax(0, 7.5fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }

  /* The rail: stations on the spine, the labels beside it. It rests below the bar that covers the top
     of the window, which in the forced reduced mode is the logo bar, not the header. */
  .ai-profil-schiene {
    position: sticky;
    top: calc(var(--thomaschristl-header-height, 140px) + 24px);
    display: grid;
    gap: 22px;
    margin-left: calc(-1 * var(--ai-profil-einzug));
    padding-left: var(--ai-profil-einzug);
  }

  body.thomaschristl-nav-force-mobile .ai-profil-schiene {
    top: calc(var(--thomaschristl-brand-bar-height, 64px) + 24px);
  }

  .ai-profil-schiene-fuellung {
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;
    width: 4px;
    margin-left: -1px;
    background: var(--navy);
    transform: scaleY(calc(var(--ai-profil-aktiv, 0) / 5));
    transform-origin: top;
  }

  .ai-profil-station {
    position: relative;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
  }

  .ai-profil-station::before {
    content: "";
    position: absolute;
    top: 6px;
    left: calc(-1 * var(--ai-profil-einzug) - 6px);
    width: var(--ai-profil-knoten);
    height: var(--ai-profil-knoten);
    background: var(--paper);
    border: 2px solid var(--navy);
    border-radius: 50%;
  }

  .ai-profil-station--mensch::before {
    background: var(--navy);
  }

  .ai-profil-station--aktiv {
    color: var(--ink);
  }

  .ai-profil-station--aktiv::before {
    box-shadow: 0 0 0 4px var(--accent-soft-strong);
  }

  .ai-profil-schritte {
    gap: clamp(8px, 1.4vw, 20px);
  }

  .ai-profil-schritt {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 12px;
    margin-inline: 0;
    padding: clamp(20px, 2.4vw, 32px);
  }

  .ai-profil-schritt::before {
    grid-row: 1 / span 2;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
  }

  /* The rail shows the nodes here. */
  .ai-profil-schritt::after {
    content: none;
  }

  .ai-profil-schritt h3 {
    font-size: 1.5rem;
  }

  .ai-profil-schritt p {
    grid-column: 2;
    font-size: 1.125rem;
  }

  .ai-profil-feld {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
  }
}