/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, site/aufbau/aufbau.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Welle PA-1: Seitenaufbau der Inhaltsseiten (Regelwerk regeln.ts, Doku
   docs/positionierung/design/aufbau.md). Seitenleiste mit Brotkrumen und
   Metazeile, Lesebereich mit klebender Randspalte (ab 1024 px),
   Inhaltsverzeichnis mit Lesefortschritt, mobile Leiste unter dem Kopf.
   Nur Tokens (--bm-*); Kopfhöhe --bm-kopf-h (tokens.css). */

/* ════════════════════════════════════════════════════════════════════════
   1. Seitenleiste: Brotkrumen links, Metazeile rechts
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-seitenleiste {
  background: var(--bm-bg);
  border-bottom: 1px solid var(--bm-linie-zart);
}
.bm-neu .bm-seitenleiste__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  min-height: 3.5rem;
  padding-block: 0.875rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-neu .bm-krumen__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bm-neu .bm-krumen__glied { display: inline-flex; align-items: center; }
.bm-neu .bm-krumen__glied + .bm-krumen__glied::before {
  content: '/' / '';
  margin-inline: 0.625rem;
  color: var(--bm-text-leise);
}
.bm-neu .bm-krumen a {
  color: var(--bm-text-leise);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  /* Bewegung beim Hover: die Unterstreichung wächst von links (aus bei
     reduzierter Bewegung, siehe unten); die Farbe wechselt nur. */
  transition: background-size var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease);
}
.bm-neu .bm-krumen a:is(:hover, :focus-visible) { color: var(--bm-text); background-size: 100% 1px; }
.bm-neu .bm-krumen a:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }
.bm-neu .bm-krumen [aria-current='page'] { color: var(--bm-text); font-weight: var(--bm-g-mittel); }
/* Mobil nur die Elternebene als Rückweg („‹ Leistungen"). */
@media (max-width: 767px) {
  .bm-neu .bm-krumen__glied:not(.bm-krumen__glied--zurueck) { display: none; }
  .bm-neu .bm-krumen .bm-krumen__glied.bm-krumen__glied--zurueck::before { content: '‹' / ''; margin: 0 0.5rem 0 0; }
}
.bm-neu .bm-seitenmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
}
.bm-neu .bm-seitenmeta > span + span::before {
  content: '·' / '';
  margin-inline: 0.625rem;
  color: var(--bm-text-leise);
}

/* ════════════════════════════════════════════════════════════════════════
   2. Lesebereich: eine ruhige Fläche, Abschnitte mit Zwischenlinie
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-aufbau {
  --aufbau-abstand: calc(var(--bm-sektion) * 0.75);
  view-timeline: --aufbau-lesebereich block;
}
/* Module bringen ihre eigene .wrap mit – im Lesebereich übernimmt das Raster. */
.bm-neu.bm-neu .bm-aufbau--rand .bm-aufbau__lesen .wrap,
.bm-neu.bm-neu .bm-aufbau--schmal .bm-aufbau__lesen .wrap {
  max-width: none;
  padding-inline: 0;
}
.bm-neu.bm-neu .bm-aufbau__lesen :is(.bm-m-sektion, .section) { padding-block: var(--aufbau-abstand); }
.bm-neu.bm-neu .bm-aufbau__lesen > * + * { border-top: 1px solid var(--bm-linie-zart); }
.bm-neu.bm-neu .bm-aufbau--rand .bm-aufbau__lesen .bm-m-sektion__inhalt--nach-kopf { margin-top: calc(var(--bm-sektion) * 0.45); }
.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen > * + * { border-top: 0; }
/* Zwischenlinie in der Breite des Inhalts (nicht bis an den Fensterrand):
   als 1-px-Fläche oben im Wrapper, um den Seitenrand eingerückt. */
.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen > * + * > .wrap {
  padding-top: var(--aufbau-abstand);
  background: linear-gradient(var(--bm-linie-zart), var(--bm-linie-zart)) top center / calc(100% - 2 * var(--bm-rand)) 1px no-repeat;
}
.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen > * + :is(.bm-m-sektion, .section) { padding-top: 0; }
/* Aufeinanderfolgende Text-Abschnitte lesen sich als ein Fluss (d2a.css
   nimmt dort den oberen Abstand weg – die Zwischenlinie lief dann durch die
   Überschrift): keine Linie, halber Abstand. */
.bm-neu.bm-neu.bm-neu .bm-aufbau__lesen > .bm-m-text + .bm-m-text { padding-top: calc(var(--aufbau-abstand) * 0.5); border-top-color: transparent; }
.bm-neu.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen > .bm-m-text + .bm-m-text > .wrap { padding-top: 0; background-image: none; }
/* Endet ein Abschnitt mit einem linierten Block (Liste, Schritte, Fragen,
   Stichworte, Tabelle), trennt dessen letzte Linie schon – die Zwischenlinie
   des folgenden Abschnitts entfällt, sonst stehen zwei Linien übereinander. */
.bm-neu.bm-neu .bm-aufbau__lesen > :has(.bm-kachelliste, .d2c-prozess__liste, .d2c-faq, .bm-stichworte, .d2c-tabelle, .d2c-liste__zeilen, .bm-marken-raster, .bm-eckdaten) + * { border-top-color: transparent; }
.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen > :has(.bm-kachelliste, .d2c-prozess__liste, .d2c-faq, .bm-stichworte, .d2c-tabelle, .d2c-liste__zeilen, .bm-marken-raster, .bm-eckdaten) + * > .wrap { background-image: none; }

/* Einleitung (übriger Text des Kopfes) als erster Absatz */
.bm-neu .bm-aufbau__einleitung {
  max-width: var(--bm-textbreite);
  margin: 0;
  padding-block: var(--aufbau-abstand);
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-lang);
  color: var(--bm-text);
}
.bm-neu .bm-aufbau--breit .bm-aufbau__einleitung {
  /* Steht im Wrapper, die Zeile bleibt aber lesbar (Textbreite): der rechte
     Innenabstand füllt den Rest bis zum Rand des Wrappers. */
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--bm-rahmen-max);
  padding-inline: var(--bm-rand) max(var(--bm-rand), calc(min(100%, var(--bm-rahmen-max)) - var(--bm-rand) - var(--bm-textbreite)));
}
/* Breiter Lesebereich: eine linke Achse. Schmale Textmodule stehen links im
   Wrapper (nicht mittig), die Zeilen bleiben in der Textbreite. */
.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen .wrap.bm-m-schmal { max-width: var(--bm-rahmen-max); }
.bm-neu.bm-neu .bm-aufbau--breit .bm-aufbau__lesen .wrap.bm-m-schmal > * { max-width: var(--bm-textbreite); }

/* Mit und ohne Randspalte: im Wrapper */
.bm-neu :is(.bm-aufbau--rand, .bm-aufbau--schmal) {
  max-width: calc(var(--bm-inhalt-max) + 2 * var(--bm-rand));
  margin-inline: auto;
  padding-inline: var(--bm-rand);
}
.bm-neu .bm-aufbau--schmal .bm-aufbau__lesen { max-width: 56rem; margin-inline: auto; }
@media (min-width: 1024px) {
  .bm-neu .bm-aufbau--rand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
    align-items: start;
  }
  .bm-neu .bm-aufbau--rand .bm-aufbau__lesen { grid-column: 1; grid-row: 1; }
  .bm-neu .bm-aufbau--rand .bm-aufbau__abschluss { grid-column: 1; grid-row: 2; }
}
@media (min-width: 1200px) {
  .bm-neu .bm-aufbau--rand { grid-template-columns: minmax(0, 1fr) 17rem; -moz-column-gap: 6rem; column-gap: 6rem; }
}

/* Raster im Lesebereich neben der Randspalte: höchstens zwei Spalten */
@media (min-width: 1024px) {
  .bm-neu.bm-neu .bm-aufbau--rand .bm-aufbau__lesen :is(.bm-teaserraster--3, .bm-teaserraster--4, .d2c-liste__raster, .bm-verweise--raster, .bm-pakete--3, .bm-pakete--4) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Prozess als Schrittkasten: ohne große Ziffer, eine Spalte */
  .bm-neu.bm-neu .bm-aufbau--rand .bm-aufbau__lesen .d2c-prozess--akkordeon { grid-template-columns: minmax(0, 1fr); }
  .bm-neu.bm-neu .bm-aufbau--rand .bm-aufbau__lesen .d2c-prozess__zaehler { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   3. Randspalte mit Inhaltsverzeichnis (ab 1024 px)
   ════════════════════════════════════════════════════════════════════════ */
/* Aufbau der Spalte (PA-2a/PA-4): oben der klebende Teil (Inhalts-
   verzeichnis, Randkasten), unten die Einschubstelle (Verwandtes, Referenz)
   am Ende der Spalte, neben dem Abschluss des Lesebereichs. Der klebende Teil
   steckt in einem eigenen Behälter, damit er beim Weiterscrollen nicht über
   den unteren Teil gleitet. Unter 1024 px: nur der untere Teil, direkt nach
   dem Lesebereich. */
.bm-neu .bm-aufbau__rand-oben { display: none; }
.bm-neu .bm-aufbau__rand-unten:empty { display: none; }
.bm-neu .bm-aufbau__rand-unten { padding-bottom: calc(var(--bm-sektion) * 0.5); }
@media (min-width: 1024px) {
  .bm-neu .bm-aufbau__rand {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  /* Der Abstand zum Anfang des Lesebereichs sitzt am Behälter, nicht am
     klebenden Teil: geklebt steht das Verzeichnis 2 rem unter der Kopfleiste
     (vorher zusätzlich um den Abschnittsabstand tiefer). */
  .bm-neu .bm-aufbau__rand-oben { display: block; flex: 1 1 auto; padding-top: var(--aufbau-abstand); }
  .bm-neu .bm-aufbau__rand-fest,
  .bm-neu .bm-aufbau--rand-hoch .bm-aufbau__rand-unten {
    /* Unten bleibt Platz für das schwebende Avatar-Feld (72 px + 24 px Rand),
       das über dem rechten Rand der Spalte liegt. */
    --aufbau-frei-unten: 7rem;
    position: sticky;
    top: calc(var(--bm-kopf-h) + 2rem);
    max-height: calc(100dvh - var(--bm-kopf-h) - 2rem - var(--aufbau-frei-unten));
    overflow-y: auto;
    /* Bewegung, kein Hover: folgt dem Ein- und Ausfahren der Kopfleiste
       (gleiche Dauer und Kurve wie der Kopf; aus bei reduzierter Bewegung). */
    transition: top var(--bm-kopf-dauer) var(--bm-kopf-ease);
    scrollbar-width: thin;
    /* P3-I: Raum für den Fokusrahmen. overflow-y kappt auch seitlich; die
       Einträge sitzen bündig an der Kante. 5 px Innenabstand (Rahmen 2 px +
       Versatz bis 3 px), durch den gleichen negativen Außenabstand
       aufgehoben – im Ruhezustand steht alles, wo es stand. */
    padding-inline: 0.3125rem;
    margin-inline: -0.3125rem;
  }
  .bm-neu .bm-aufbau__rand-fest { padding-bottom: 2rem; }
  .bm-neu .bm-aufbau__rand-unten { flex: none; padding-bottom: var(--aufbau-abstand); }
  /* Ohne Inhaltsverzeichnis (regeln.randOben = verwandtes): die
     Einschubstelle steht oben in der Spalte und klebt dort. */
  .bm-neu .bm-aufbau--rand-hoch .bm-aufbau__rand { justify-content: flex-start; padding-top: var(--aufbau-abstand); }
  .bm-neu .bm-aufbau--rand-hoch .bm-aufbau__rand-unten > .bm-rand-baustein:first-child { padding-top: 0; border-top: 0; }
  /* Kopf fährt aus (ab 1024) → Randspalte rückt nach oben. */
  .bm-seite:has(header.bm-kopf--versteckt:not(:focus-within)) :is(.bm-aufbau__rand-fest, .bm-aufbau--rand-hoch .bm-aufbau__rand-unten) {
    top: 2rem;
    max-height: calc(100dvh - 2rem - var(--aufbau-frei-unten));
  }
}
.bm-neu .bm-toc__kopf {
  margin: 0 0 1rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-fett);
  letter-spacing: var(--bm-sp-ziffer);
  line-height: var(--bm-zh-kompakt);
  text-transform: uppercase;
  color: var(--bm-text-leise);
}
.bm-neu .bm-toc__koerper { position: relative; padding-left: 1.25rem; }
.bm-neu .bm-toc__liste { margin: 0; padding: 0; list-style: none; }
.bm-neu .bm-toc__eintrag {
  position: relative;
  display: block;
  padding-block: 0.4375rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
  text-decoration: none;
  /* Farbwechsel (Hover, aktiver Abschnitt) – keine Bewegung. */
  transition: color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-neu .bm-toc__eintrag:hover { color: var(--bm-text); }
/* Aktiver Abschnitt: dunkler Text und dunkle Marke auf der Spur links. Die
   Spur selbst trägt das Signal (Lesefortschritt); die Marke ist deshalb
   dunkel, sonst ginge sie im Verlauf unter. Mittleres Gewicht statt fett,
   damit die Zeile beim Wechsel nicht umbricht. */
.bm-neu .bm-toc__eintrag[aria-current='location'] { color: var(--bm-text); font-weight: var(--bm-g-mittel); }
.bm-neu .bm-toc__eintrag[aria-current='location']::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0.4375rem;
  bottom: 0.4375rem;
  z-index: 1;
  width: 2px;
  background: var(--bm-text);
}
.bm-neu .bm-toc__eintrag:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }
/* Lesefortschritt: senkrechte Spur links der Einträge */
.bm-neu .bm-toc__spur {
  position: absolute;
  left: 0;
  top: 0.4375rem;
  bottom: 0.4375rem;
  width: 2px;
  background: var(--bm-linie-zart);
  display: none;
}
.bm-neu .bm-toc__fuellung {
  position: absolute;
  inset: 0;
  background: var(--bm-signal-verlauf);   /* Fortschrittsleiste: Signalverlauf */
  transform-origin: top center;
  transform: scaleY(0);
}

/* ════════════════════════════════════════════════════════════════════════
   4. Mobile Leiste (unter 1024 px): klebt unter dem Kopf, klappt auf
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-toc-leiste {
  position: sticky;
  top: var(--bm-kopf-h);
  z-index: var(--bm-z-anker);
  margin-inline: calc(-1 * var(--bm-rand));
  padding-inline: var(--bm-rand);
  background: color-mix(in srgb, var(--bm-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bm-linie-zart);
}
@media (min-width: 1024px) {
  .bm-neu .bm-toc-leiste { display: none; }
}
.bm-neu .bm-toc-leiste__klappe { position: relative; }
.bm-neu .bm-toc-leiste__feld {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-kompakt);
  color: var(--bm-text);
}
.bm-neu .bm-toc-leiste__feld::-webkit-details-marker { display: none; }
.bm-neu .bm-toc-leiste__feld:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: -2px; }
.bm-neu .bm-toc-leiste__etikett {
  flex: none;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-fett);
  letter-spacing: var(--bm-sp-ziffer);
  text-transform: uppercase;
  color: var(--bm-text-leise);
}
.bm-neu .bm-toc-leiste__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--bm-g-fett); }
.bm-neu .bm-toc-leiste__chevron { flex: none; display: inline-flex; }
/* Bewegung: der Pfeil dreht sich beim Auf- und Zuklappen. */
.bm-neu .bm-toc-leiste__chevron svg { transition: transform var(--bm-dauer-kurz) var(--bm-ease); }
.bm-neu .bm-toc-leiste__klappe[open] .bm-toc-leiste__chevron svg { transform: rotate(180deg); }
.bm-neu .bm-toc-leiste__liste {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100dvh - var(--bm-kopf-h) - 5rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  border: 1px solid var(--bm-linie);
  border-radius: var(--bm-radius-feld);
  background: var(--bm-bg);
  box-shadow: var(--bm-schatten-schwebend);
}
.bm-neu .bm-toc-leiste__eintrag {
  display: block;
  padding: 0.75rem 1rem;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  text-decoration: none;
}
.bm-neu .bm-toc-leiste__eintrag:is(:hover, :focus-visible),
.bm-neu .bm-toc-leiste__eintrag[aria-current='location'] { background: var(--bm-bg-alt); }
.bm-neu .bm-toc-leiste__eintrag[aria-current='location'] { font-weight: var(--bm-g-fett); }
.bm-neu .bm-toc-leiste__eintrag:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: -2px; }
.bm-neu .bm-toc-leiste__fortschritt {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--bm-signal-verlauf);   /* Fortschrittsleiste: Signalverlauf */
  transform-origin: left center;
  transform: scaleX(0);
  display: none;
}

/* Sprungziele landen unter Kopf (+ mobiler Leiste). */
.bm-seite main#inhalt .bm-aufbau--toc [id] { scroll-margin-top: calc(var(--bm-kopf-h) + 4.5rem); }
@media (min-width: 1024px) {
  .bm-seite main#inhalt .bm-aufbau--toc [id] { scroll-margin-top: calc(var(--bm-kopf-h) + 1.5rem); }
}

/* Fußnoten (P1-D): Verweis im Text und Quelle landen mit Luft unter dem
   Kopf – auf allen Seiten, auch ohne Inhaltsverzeichnis. */
.bm-seite main#inhalt :is(.bm-fussnote a, .bm-quellen__eintrag) { scroll-margin-top: calc(var(--bm-kopf-h) + 6rem); }

/* ════════════════════════════════════════════════════════════════════════
   5. Lesefortschritt – nur EINE Anzeige (E-PA8)
   Wo der Browser Scroll-Zeitleisten kann, zeigen Spur (Randspalte) und
   Leiste (mobil) den Fortschritt durch den Lesebereich, und die globale
   Leiste des Rahmens (ScrollProgress: fixiertes, aria-verborgenes Band
   direkt in .bm-seite; gleiche Regel wie d2c.css) entfällt. Sonst bleibt
   die globale Leiste die einzige Anzeige. Keine Arbeit in JS.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes bm-lesefortschritt-y { to { transform: scaleY(1); } }
@keyframes bm-lesefortschritt-x { to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  .bm-seite:has(main .bm-aufbau--toc) > div.fixed.inset-x-0.top-0[aria-hidden='true'] { display: none; }
  .bm-neu .bm-toc__spur,
  .bm-neu .bm-toc-leiste__fortschritt { display: block; }
  .bm-neu .bm-toc__fuellung {
    animation: bm-lesefortschritt-y auto var(--bm-ease-linear) both;
    animation-timeline: --aufbau-lesebereich;
    animation-range: contain 0% contain 100%;
  }
  .bm-neu .bm-toc-leiste__fortschritt {
    animation: bm-lesefortschritt-x auto var(--bm-ease-linear) both;
    animation-timeline: --aufbau-lesebereich;
    animation-range: contain 0% contain 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   6. Einschubstelle der Randspalte (einschub.tsx), weniger Bewegung, Druck
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-rand-baustein { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--bm-linie-zart); }
.bm-neu .bm-aufbau__rand-unten > .bm-rand-baustein:first-child { margin-top: 0; }
.bm-neu .bm-aufbau__rand-fest > .bm-rand-baustein--breit { margin-top: 2rem; padding-top: 0; border-top: 0; }
.bm-neu .bm-rand-baustein__kopf {
  margin: 0 0 0.75rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-fett);
  letter-spacing: var(--bm-sp-ziffer);
  line-height: var(--bm-zh-kompakt);
  text-transform: uppercase;
  color: var(--bm-text-leise);
}
@media (max-width: 1023px) {
  /* Unter 1024 px: Verwandtes und Referenz nebeneinander, wo Platz ist. */
  .bm-neu .bm-aufbau__rand-unten { display: grid; gap: 0 2.5rem; }
  .bm-neu .bm-aufbau__rand-unten > .bm-rand-baustein { margin-top: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .bm-neu .bm-aufbau__rand-unten:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Verwandte … (PA-4): Zeilen mit Pfeil */
.bm-neu .bm-verwandt__liste { margin: 0; padding: 0; list-style: none; }
.bm-neu .bm-verwandt__eintrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5625rem;
  border-bottom: 1px solid var(--bm-linie-zart);
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  text-decoration: none;
}
/* Bewegung beim Hover/Fokus: der Pfeil rückt 0,25 rem nach rechts. */
.bm-neu .bm-verwandt__pfeil { flex: none; color: var(--bm-text-leise); transition: transform var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease); }
.bm-neu .bm-verwandt__eintrag:is(:hover, :focus-visible) .bm-verwandt__pfeil { color: var(--bm-text); transform: translateX(0.25rem); }
.bm-neu .bm-verwandt__eintrag:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }
/* P2-D: Die Pfeile bleiben links vom schwebenden Avatar-Feld (72 px + 24 px
   Rand, dazu 12 px Luft samt Hover-Weg). Die Spalte endet am Seitenrand
   bzw. am Rand der Inhaltsbreite; nur was davon unter dem Feld läge, wird
   eingerückt (1440: 68 px, ab 1656 px Fensterbreite nichts mehr). Die Linie
   der Zeile läuft weiter über die ganze Spalte. */
@media (min-width: 1024px) {
  .bm-neu .bm-aufbau__rand .bm-verwandt__eintrag {
    --aufbau-frei-rechts: 6.75rem;
    padding-right: max(0px, calc(var(--aufbau-frei-rechts) - max(var(--bm-rand), (100vw - var(--bm-inhalt-max)) / 2)));
  }
}

/* Referenz als Randkachel (PA-4): kleines Hochformat links, Text rechts */
.bm-neu .bm-randref__karte {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  color: var(--bm-text);
  text-decoration: none;
}
.bm-neu .bm-randref__bild {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--bm-radius-feld);
  background: var(--bm-bg-alt);
}
.bm-neu .bm-randref__bild img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.bm-neu .bm-randref__text { display: grid; gap: 0.25rem; padding-top: 0.125rem; }
.bm-neu .bm-randref__kunde { font-size: var(--bm-t-meta); line-height: var(--bm-zh-mittel); color: var(--bm-text-leise); }
.bm-neu .bm-randref__titel { font-size: var(--bm-t-klein); font-weight: var(--bm-g-fett); line-height: var(--bm-zh-mittel); }
.bm-neu .bm-randref__karte:is(:hover, :focus-visible) .bm-randref__titel { text-decoration: underline; text-underline-offset: 0.15em; }
.bm-neu .bm-randref__karte:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }

/* ════════════════════════════════════════════════════════════════════════
   7. Nächster Schritt (PA-4): ruhige Zeile mit zwei Wegen, kein Knopf-Band
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-weiter { padding-block: calc(var(--bm-sektion) * 0.5) var(--aufbau-abstand); border-top: 1px solid var(--bm-linie-zart); }
.bm-neu.bm-neu :is(.bm-aufbau--rand, .bm-aufbau--schmal) .bm-weiter .wrap { max-width: none; padding-inline: 0; }
.bm-neu .bm-aufbau--schmal .bm-aufbau__abschluss { max-width: 56rem; margin-inline: auto; }
.bm-neu .bm-aufbau--breit .bm-weiter { border-top: 0; padding-top: 0; }
/* Wie im Lesebereich: keine zweite Linie nach einem linierten Block. */
.bm-neu .bm-aufbau__lesen:has(> :last-child :is(.bm-kachelliste, .d2c-prozess__liste, .d2c-faq, .bm-stichworte, .d2c-tabelle, .d2c-liste__zeilen, .bm-marken-raster, .bm-eckdaten)) ~ .bm-aufbau__abschluss .bm-weiter { border-top-color: transparent; }
.bm-neu .bm-aufbau--breit .bm-aufbau__lesen:has(> :last-child :is(.bm-kachelliste, .d2c-prozess__liste, .d2c-faq, .bm-stichworte, .d2c-tabelle, .d2c-liste__zeilen, .bm-marken-raster, .bm-eckdaten)) ~ .bm-aufbau__abschluss .bm-weiter .wrap { background-image: none; }
.bm-neu .bm-aufbau--breit .bm-weiter .wrap {
  padding-top: var(--aufbau-abstand);
  background: linear-gradient(var(--bm-linie-zart), var(--bm-linie-zart)) top center / calc(100% - 2 * var(--bm-rand)) 1px no-repeat;
}
.bm-neu .bm-weiter__kopf {
  margin: 0 0 1rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-fett);
  letter-spacing: var(--bm-sp-ziffer);
  line-height: var(--bm-zh-kompakt);
  text-transform: uppercase;
  color: var(--bm-text-leise);
}
.bm-neu .bm-weiter__wege { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .bm-neu .bm-weiter__wege:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 2.5rem; column-gap: 2.5rem; }
}
.bm-neu .bm-weiter__weg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--bm-linie);
  color: var(--bm-text);
  text-decoration: none;
}
.bm-neu .bm-weiter__art { grid-column: 1; font-size: var(--bm-t-meta); line-height: var(--bm-zh-mittel); color: var(--bm-text-leise); }
.bm-neu .bm-weiter__titel { grid-column: 1; font-size: var(--bm-t-kartentitel); font-weight: var(--bm-g-titel); line-height: var(--bm-zh-titel); }
/* Bewegung beim Hover/Fokus: der Pfeil rückt 0,25 rem nach rechts. */
.bm-neu .bm-weiter__pfeil { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--bm-t-kartentitel); transition: transform var(--bm-dauer) var(--bm-ease); }
.bm-neu .bm-weiter__weg:is(:hover, :focus-visible) .bm-weiter__pfeil { transform: translateX(0.25rem); }
.bm-neu .bm-weiter__weg:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }

/* ════════════════════════════════════════════════════════════════════════
   8. KI-Kennzeichnung und Bildunterzeile (PA-2a, KiKennzeichen.tsx)
   ════════════════════════════════════════════════════════════════════════ */
.bm-neu .bm-ki-zeichen {
  position: absolute;
  z-index: 1;
  display: block;
  height: 11px;
  width: auto;
  pointer-events: none;
}
/* Abstand nach rechts und unten: halbe Badgehöhe (11 px / 2). */
.bm-neu .bm-ki-zeichen--ecke { right: 5.5px; bottom: 5.5px; }
/* Kopfbild: unten rechts im Kopf, leise auf dem dunklen Bild. */
.bm-neu .bm-kopf-ki {
  position: absolute;
  z-index: 1;
  right: var(--bm-rand);
  bottom: 1rem;
  font-size: var(--bm-t-mini);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-titel);
  color: var(--bm-text-invers-ruhig);
  pointer-events: none;
}
.bm-neu .bm-bildzeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: 0.625rem;
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-neu .bm-bildzeile__ki { margin-left: auto; font-size: var(--bm-t-mini); color: var(--bm-text-leise); }

/* Reduzierte Bewegung: alle oben als Bewegung bezeichneten Übergänge aus;
   der Lesefortschritt bleibt (er folgt nur der Scroll-Position). */
@media (prefers-reduced-motion: reduce) {
  .bm-neu :is(.bm-krumen a, .bm-toc__eintrag, .bm-toc-leiste__chevron svg, .bm-aufbau__rand-fest, .bm-aufbau__rand-unten, .bm-verwandt__pfeil, .bm-weiter__pfeil) { transition: none; }
  .bm-neu :is(.bm-verwandt__pfeil, .bm-weiter__pfeil) { transform: none !important; }
}
@media print {
  .bm-neu :is(.bm-aufbau__rand, .bm-toc-leiste) { display: none; }
}

/* Quellen am Ende des Lesebereichs (Astro seiten/module/hinweis.css, W5-C) */
.bm-neu :is(.bm-quelle-zeile, .bm-quellen) a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
/* Rahmenfarbe je Fläche: tokens.css »Fokusrahmen je Fläche« (P3-I). */
.bm-neu :is(.bm-quelle-zeile, .bm-quellen, .bm-fussnote) a:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }
.bm-neu .bm-fussnote { font-size: 0.7em; line-height: 0; margin-left: 0.1em; }
.bm-neu .bm-fussnote a { color: var(--bm-signal-dunkel); text-decoration: none; font-weight: var(--bm-g-fett); }
.bm-neu .bm-fussnote a:hover { text-decoration: underline; }

.bm-neu .bm-quellen { padding-block: calc(var(--bm-sektion) * 0.5); }
.bm-neu .bm-quellen__titel {
  margin: 0 0 1rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-fett);
  letter-spacing: var(--bm-sp-ziffer);
  text-transform: uppercase;
  color: var(--bm-text-leise);
}
.bm-neu .bm-quellen__liste { margin: 0; padding: 0; list-style: none; max-width: var(--bm-textbreite); }
.bm-neu .bm-quellen__eintrag {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  padding-block: 0.375rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-neu .bm-quellen__nr { font-family: var(--bm-font-ziffer); color: var(--bm-text); }
.bm-neu .bm-quellen__eintrag:target { color: var(--bm-text); }
/* Rücksprung: Ziel mindestens 24 × 24 px (WCAG 2.5.8, P3-C). Das Zeichen
   bleibt, wie es ist; die Fläche wächst um das Zeichen, der negative
   Außenabstand hält Zeilenhöhe und Wortabstand unverändert. */
.bm-neu .bm-quellen__zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin: -0.25rem -0.3125rem;
  vertical-align: middle;
  text-decoration: none !important;
}