/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, vorlagen/_teile/vorlagen.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Seitenkontext der Vorlagen (Welle S2). Module melden Abstand und Ton;
   die Vorlage setzt nur den Rahmen: Lesebereich (Lesespalte 832 px +
   Randspalte ab 1024 px), halbe Abstände darin, Linien zwischen Abschnitten.
   Nur Tokens (--bm-*, --bb-*); Breakpoints 1024/1200. */

/* Laufbänder und Wischstreifen der Module ragen über den Rand: die Seite schneidet ab (clip, kein Scroll-Container – sticky bleibt). */
.bb-vorlage { display: flex; flex-direction: column; overflow-x: clip; }

/* Abschnittsleiste nur unter 1024 px, wenn die Randspalte ein Inhaltsverzeichnis zeigt.
   display: contents – die Leiste klebt weiter an der Seite, nicht an der Hülle. */
.bb-vl-nur-schmal { display: contents; }
@media (min-width: 1024px) {
  .bb-vl-nur-schmal > .bb-m-abschnittsleiste { display: none; }
}

/* ── Lesebereich ─────────────────────────────────────────────────────── */
.bb-vl-lesen {
  --bb-vl-spalte: 52rem;                                  /* Lesespalte 832 px */
  --bb-vl-rand: 17rem;                                    /* Randspalte */
  /* Halbe Luft wie der Bestand (--aufbau-abstand = Sektion × 0,75). */
  --bb-sektion-abstand: calc(var(--bm-sektion) * 0.75);
  --bb-sektion-abstand-gross: calc(var(--bm-sektion) * 0.75);
  --bb-sektion-abstand-halb: calc(var(--bm-sektion) * 0.375);
  --aufbau-abstand: calc(var(--bm-sektion) * 0.75);        /* „Nächster Schritt“ (site/aufbau/aufbau.css) */
  background: var(--bm-bg);
  padding-block: calc(var(--bm-sektion) * 0.25);
}

/* Lesespalte: die Sektionen darin nehmen die Spaltenbreite, der Seitenrand kommt von der Hülle. */
.bb-vl-lesen--rand,
.bb-vl-lesen--schmal {
  max-width: calc(var(--bb-inhalt-max) + 2 * var(--bb-rand));
  margin-inline: auto;
  padding-inline: var(--bb-rand);
  width: 100%;
}
.bb-vl-lesen--rand .bb-vl-lesen__fluss .bb-sektion__innen,
.bb-vl-lesen--schmal .bb-vl-lesen__fluss .bb-sektion__innen { max-width: none; padding-inline: 0; }
.bb-vl-lesen--schmal .bb-vl-lesen__fluss { max-width: var(--bb-vl-spalte); margin-inline: auto; }
.bb-vl-lesen__fluss { min-width: 0; }

/* Linien zwischen Abschnitten der Lesespalte; Texte in Folge lesen sich als ein Fluss. */
.bb-vl-lesen--rand .bb-vl-lesen__fluss > * + *,
.bb-vl-lesen--schmal .bb-vl-lesen__fluss > * + * { border-top: 1px solid var(--bm-linie-zart); }
.bb-vl-lesen__fluss > .bb-m-text + .bb-m-text { border-top-color: transparent; }

@media (min-width: 1024px) {
  .bb-vl-lesen--rand {
    display: grid;
    grid-template-columns: minmax(0, var(--bb-vl-spalte)) var(--bb-vl-rand);
    justify-content: space-between;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    align-items: start;
  }
}

/* ── Randspalte ──────────────────────────────────────────────────────── */
.bb-vl-rand { display: flex; flex-direction: column; gap: 2rem; padding-block: calc(var(--bm-sektion) * 0.5); }
.bb-vl-rand__toc { display: none; }
@media (min-width: 1024px) {
  .bb-vl-rand { position: sticky; top: calc(var(--bm-kopf-h) + 2rem); }
  .bb-vl-rand__toc { display: block; }
}
.bb-vl-rand__unten .bb-sektion__innen { max-width: none; padding-inline: 0; }

/* „Nächster Schritt“ in der Lesespalte: ohne eigenen Seitenrand (wie .bm-aufbau--rand/--schmal). */
.bb-vl-lesen--rand .bb-vl-lesen__fluss > .bm-weiter .wrap,
.bb-vl-lesen--schmal .bb-vl-lesen__fluss > .bm-weiter .wrap { max-width: none; padding-inline: 0; }