/* Modul „ablauf“ (module/ablauf). Nur Tokens: --bm-* (Website), --bb-*
   (Bausteine, Ton-Regel). Werte übernommen aus seiten/module/d2c.css
   (Prozess), seiten/start/start.css (Vorgehen) und seiten/technik/
   technik.css (Schrittfolge). Breakpoints: 640 / 768 / 1024 (max: −1). */

.bb-m-ablauf {
  /* Rand des runden Zeichens (Seitenkopf): ≥ 3:1 auf dem Grund. */
  --bb-m-ablauf-kreis: var(--bm-text-zart);
  --bb-m-ablauf-kugel: 1.25rem;
  --bb-m-ablauf-luecke: 1.5rem;
}
.bb-m-ablauf:is([data-ton='dunkel'], [data-ton='bild']) { --bb-m-ablauf-kreis: var(--bb-linie-feld); }

/* ════════════════════════════════════════════════════════════════════════
   Gemeinsam: Liste mit Linien, Zeile, Nummer, Titel, Text
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-ablauf__liste { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--bb-linie); }
.bb-m-ablauf__eintrag { border-bottom: 2px solid var(--bb-linie); }

.bb-m-ablauf__zeile {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  width: 100%;
  padding-block: 1.625rem 1.5rem;
  text-align: left;
  color: var(--bb-text-ruhig);
  transition: color var(--bm-dauer) var(--bm-ease);
}
.bb-m-ablauf__zeile--fest { color: var(--bb-text); }
summary.bb-m-ablauf__zeile { list-style: none; cursor: pointer; }
summary.bb-m-ablauf__zeile::-webkit-details-marker { display: none; }
summary.bb-m-ablauf__zeile:hover,
.bb-m-ablauf__schritt[open] > summary { color: var(--bb-text); }
summary.bb-m-ablauf__zeile:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bb-fokus);
  outline-offset: var(--bm-fokus-versatz, 3px);
}

.bb-m-ablauf__nr {
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-ziffer);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-ziffer);
  font-variant-numeric: tabular-nums;
  color: var(--bb-text);
}
.bb-m-ablauf__titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  font-size: var(--bm-t-kartentitel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-leicht);
  color: inherit;
  hyphens: auto;
}
.bb-m-ablauf__text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-text);
  color: var(--bb-text-ruhig);
}

/* Plus/Minus (Prozess): zwei Linien, die senkrechte dreht beim Öffnen weg. */
.bb-m-ablauf__zeichen {
  position: relative;
  flex: none;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--bb-text);
}
.bb-m-ablauf__zeichen::before,
.bb-m-ablauf__zeichen::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform var(--bm-dauer) var(--bm-ease);
}
.bb-m-ablauf__zeichen::after { transform: rotate(90deg); }
.bb-m-ablauf__schritt[open] .bb-m-ablauf__zeichen::after { transform: rotate(0deg); }

/* Klappe: Höhe weich (wo der Browser ::details-content kennt), sonst sofort. */
.bb-m-ablauf__schritt { interpolate-size: allow-keywords; }
.bb-m-ablauf__schritt::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size var(--bm-dauer) var(--bm-ease), opacity var(--bm-dauer) var(--bm-ease), content-visibility var(--bm-dauer) allow-discrete;
}
.bb-m-ablauf__schritt[open]::details-content { block-size: auto; opacity: 1; }

.bb-m-ablauf__inhalt { padding: 0 3.5rem 1.75rem 3.5rem; }

/* Punkte mit Signal-Haken (Vorbild „Vorteile“-Checkliste). */
.bb-m-ablauf__punkte { margin-top: 1.25rem; font-size: var(--bm-t-body); color: var(--bb-text); }
.bb-m-ablauf__punkte.bb-punkte--haken > li { gap: 0.875rem; }
.bb-m-ablauf__punkte.bb-punkte--haken svg {
  box-sizing: border-box;
  padding: 0.15rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal);
  color: var(--bm-signal-text);
}

@media (max-width: 767px) {
  .bb-m-ablauf__zeile { grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: 0.75rem; padding-block: 1.25rem 1.125rem; }
  .bb-m-ablauf__inhalt { padding: 0 0 1.5rem 2.75rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Raster: links Ziffer/Bild bzw. Seitenkopf, rechts Liste (ab 1024 px)
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-ablauf__raster { display: grid; gap: 2.5rem; }
.bb-m-ablauf__seite { display: grid; gap: 1.5rem; align-content: start; }
/* Nur die Ziffer links: unter 1024 px entfällt die Spalte ganz. */
.bb-m-ablauf__seite:not(:has(.bb-m-ablauf__bild, .bb-kopf)) { display: none; }
.bb-m-ablauf__bild { --bb-medium-radius: var(--bm-radius-gross); max-width: 36rem; background: var(--bm-kachel); }
@media (min-width: 1024px) {
  .bb-m-ablauf__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--bm-raster-luecke) 5rem; }
  .bb-m-ablauf__seite,
  .bb-m-ablauf__seite:not(:has(.bb-m-ablauf__bild, .bb-kopf)) {
    display: grid;
    align-self: start;
    position: sticky;
    top: calc(var(--bm-kopf-h) + 2.5rem);
  }
  .bb-m-ablauf__bild { max-width: none; }
}

/* Große Ziffer des offenen Schritts („05 / 06“): alle Nummern stehen im
   HTML, sichtbar ist die des offenen Schritts, ohne offenen die erste. */
.bb-m-ablauf__zaehler { display: none; margin: 0; }
@media (min-width: 1024px) {
  .bb-m-ablauf__zaehler {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--bm-font-ziffer);
    font-variant-numeric: tabular-nums;
    color: var(--bb-text);
  }
}
.bb-m-ablauf__zaehler-gross {
  font-size: var(--bm-t-riesig);
  font-weight: var(--bm-g-titel);
  line-height: var(--bm-zh-eng);
  letter-spacing: var(--bm-sp-eng);
}
.bb-m-ablauf__zaehler-gesamt {
  font-size: var(--bm-t-ziffer);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-ziffer);
  color: var(--bb-text-ruhig);
}
.bb-m-ablauf__zaehler-nr { display: none; }
.bb-m-ablauf__zaehler-nr:first-child { display: inline; }
.bb-m-ablauf__raster:has(.bb-m-ablauf__schritt[open]) .bb-m-ablauf__zaehler-nr:first-child { display: none; }
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(1) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(1),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(2) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(2),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(3) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(3),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(4) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(4),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(5) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(5),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(6) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(6),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(7) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(7),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(8) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(8),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(9) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(9),
.bb-m-ablauf__raster:has(.bb-m-ablauf__eintrag:nth-child(10) > [open]) .bb-m-ablauf__zaehler-nr:nth-child(10) { display: inline; }

/* ════════════════════════════════════════════════════════════════════════
   akkordeon + seitenkopf (vorher start/Vorgehen): Kopf links, runde Zeichen
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-ablauf--seitenkopf .bb-m-ablauf__raster { gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__seite { gap: 0; }
.bb-m-ablauf--seitenkopf .bb-kopf { --bb-kopf-abstand: 0; --bb-kopf-titel-max: 16ch; --bb-kopf-einleitung-abstand: 1.5rem; }
.bb-m-ablauf--seitenkopf .bb-kopf__titel { font-weight: var(--bm-g-normal); font-synthesis: none; letter-spacing: var(--bm-sp-leicht); }
.bb-m-ablauf--seitenkopf .bb-kopf__einleitung { max-width: calc(var(--bm-textbreite) * 0.85); font-size: var(--bm-t-body); line-height: var(--bm-zh-text); }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__bild {
  --bb-medium-radius: var(--bm-radius);
  max-width: 32rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--bm-flaeche-dunkel);
}
/* Ohne Ziffern (Anmerkung 48e52b2b): zwei Spalten, Titel am linken Rand. */
.bb-m-ablauf--seitenkopf .bb-m-ablauf__zeile {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
}
.bb-m-ablauf--seitenkopf .bb-m-ablauf__zeichen {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--bb-m-ablauf-kreis);
  border-radius: var(--bm-radius-pille);
  transition: background-color var(--bm-dauer) var(--bm-ease), border-color var(--bm-dauer) var(--bm-ease);
}
.bb-m-ablauf--seitenkopf .bb-m-ablauf__zeichen::before,
.bb-m-ablauf--seitenkopf .bb-m-ablauf__zeichen::after {
  left: 50%;
  width: 0.875rem;
  height: 2px;
  margin-top: 0;
  background: var(--bb-text);
  transform: translate(-50%, -50%);
}
.bb-m-ablauf--seitenkopf .bb-m-ablauf__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__schritt[open] .bb-m-ablauf__zeichen { background: var(--bm-signal); border-color: var(--bm-signal); }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__schritt[open] .bb-m-ablauf__zeichen::before,
.bb-m-ablauf--seitenkopf .bb-m-ablauf__schritt[open] .bb-m-ablauf__zeichen::after { background: var(--bm-signal-text); }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__schritt[open] .bb-m-ablauf__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__inhalt { padding: 0 3.75rem 1.75rem 0; }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__text { max-width: calc(var(--bm-textbreite) * 0.85); }
.bb-m-ablauf--seitenkopf .bb-m-ablauf__punkte { margin-top: 1rem; color: var(--bb-text-ruhig); }
@media (min-width: 1024px) {
  .bb-m-ablauf--seitenkopf .bb-m-ablauf__seite { top: calc(var(--bm-kopf-h) + 2rem); }
}
@media (max-width: 1023px) {
  .bb-m-ablauf--seitenkopf .bb-m-ablauf__inhalt { padding: 0 0 1.5rem 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   zeitleiste (vorher Prozess „Abfolge“): große Ziffer je Zeile
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-ablauf--zeitleiste .bb-m-ablauf__zeile { grid-template-columns: minmax(4rem, 8rem) minmax(0, 1fr); align-items: center; }
.bb-m-ablauf--zeitleiste .bb-m-ablauf__nr {
  font-size: var(--bm-t-h2);
  font-weight: var(--bm-g-titel);
  letter-spacing: var(--bm-sp-leicht);
  line-height: 1;
}
.bb-m-ablauf__zeilentext { display: grid; gap: 0.5rem; }
@media (max-width: 767px) {
  .bb-m-ablauf--zeitleiste .bb-m-ablauf__zeile { grid-template-columns: minmax(3.5rem, 4.5rem) minmax(0, 1fr); align-items: start; }
}

/* ════════════════════════════════════════════════════════════════════════
   schritte (vorher technik:schritte): Zeichnung, Spur, Ruhepunkt
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-ablauf__folge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Schmal: senkrechte Folge, Spur links. */
.bb-m-ablauf__stufe {
  position: relative;
  display: grid;
  grid-template-columns: var(--bb-m-ablauf-kugel) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-content: start;
  padding-bottom: 2.25rem;
}
.bb-m-ablauf__stufe:last-child { padding-bottom: 0; }
.bb-m-ablauf__stufe > * { grid-column: 2; }
.bb-m-ablauf__stufe--phase { margin-top: 0.75rem; }
.bb-m-ablauf__spur {
  grid-column: 1;
  grid-row: 1 / span 5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.bb-m-ablauf__spur::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: -2.75rem;
  left: 50%;
  width: 1px;
  background: var(--bb-linie);
}
.bb-m-ablauf__stufe:last-child .bb-m-ablauf__spur::before { display: none; }
.bb-m-ablauf__punkt {
  position: relative;
  display: block;
  width: 0.75rem;
  aspect-ratio: 1;
  margin-top: 0.25rem;
  border: 1.5px solid var(--bb-linie-feld);
  border-radius: 50%;
  background: var(--bb-grund);
}
/* Ruhepunkt: matte Kugel in der Signalfarbe, mittig auf dem ersten Punkt. */
.bb-m-ablauf__kugel {
  position: absolute;
  top: calc(0.25rem + 0.375rem);
  left: 50%;
  width: var(--bb-m-ablauf-kugel);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--kern-signal-pol), var(--bm-signal) 58%, var(--bm-signal-kontur) 100%);
  transform: translate(-50%, -50%);
}
.bb-m-ablauf__phase {
  margin: 0 0 1rem;
  font-size: var(--bm-t-meta);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-ziffer);
  text-transform: uppercase;
  color: var(--bb-text-ruhig);
}
.bb-m-ablauf__phase:empty { display: none; }
.bb-m-ablauf--schritte .bb-m-ablauf__zeichnung { display: block; margin-bottom: 1rem; color: var(--bb-text); }
.bb-m-ablauf--schritte .bb-m-ablauf__zeichnung > svg { display: block; width: 3rem; height: 3rem; margin: 0; color: inherit; }
.bb-m-ablauf--schritte .bb-m-ablauf__titel {
  /* Schrittfolge: Titel in der Textschrift (wie technik.css). */
  font-family: inherit;
  letter-spacing: normal;
  line-height: var(--bm-zh-titel);
  color: var(--bb-text);
}
.bb-m-ablauf--schritte .bb-m-ablauf__nr {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--bb-text-ruhig);
}
.bb-m-ablauf--schritte .bb-m-ablauf__text {
  margin-top: 0.5rem;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-lang);
}
/* Ab 640 px: waagerechte Folge, Spur über den Schritten; ab 1024 px vier je Zeile. */
@media (min-width: 640px) {
  .bb-m-ablauf__folge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem var(--bb-m-ablauf-luecke); }
  .bb-m-ablauf__stufe { display: block; padding-bottom: 0; }
  .bb-m-ablauf__stufe--phase { margin-top: 0; }
  .bb-m-ablauf__folge--phasen .bb-m-ablauf__phase { min-height: 1.125rem; }
  .bb-m-ablauf__folge--phasen .bb-m-ablauf__phase:empty { display: block; }
  .bb-m-ablauf__spur {
    height: var(--bb-m-ablauf-kugel);
    margin-bottom: 1.5rem;
    justify-content: flex-start;
    align-items: center;
  }
  .bb-m-ablauf__spur::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: calc(-1 * var(--bb-m-ablauf-luecke));
    width: auto;
    height: 1px;
  }
  .bb-m-ablauf__punkt { margin-top: 0; }
  .bb-m-ablauf__kugel { top: 50%; left: 0.375rem; }
  .bb-m-ablauf--schritte .bb-m-ablauf__text { padding-right: 0.5rem; }
}
@media (min-width: 1024px) {
  .bb-m-ablauf__folge { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-m-ablauf__zeile,
  .bb-m-ablauf__zeichen,
  .bb-m-ablauf__zeichen::before,
  .bb-m-ablauf__zeichen::after,
  .bb-m-ablauf__schritt::details-content { transition: none; }
}

/* W5-B, wie im Original: seiten/technik/technik.css liegt dort im gemeinsamen Bündel und gibt jeder .tk-zeichnung
   margin-bottom 1rem. Schmal (Stufe als Grid) addiert sich das zur Zeichnung, breit fällt es mit ihrem Abstand zusammen. */
.bm-neu.bm-neu .tk-zeichnung { margin-bottom: 1rem; }