/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, bausteine/sektion.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Sektion (bausteine/Sektion.tsx). Nur Baustein-Tokens (tokens.css) und
   die Ton-Variablen der Ton-Regel (flaeche.ts). */
.bb-sektion {
  background: var(--bb-grund);
  color: var(--bb-text);
}
.bb-sektion--normal { padding-block: var(--bb-sektion-abstand); }
.bb-sektion--halb { padding-block: var(--bb-sektion-abstand-halb); }
.bb-sektion--gross { padding-block: var(--bb-sektion-abstand-gross); }
.bb-sektion--keiner { padding-block: 0; }

.bb-sektion__innen {
  max-width: calc(var(--bb-inhalt-max) + 2 * var(--bb-rand));
  margin-inline: auto;
  padding-inline: var(--bb-rand);
}
.bb-sektion--schmal > .bb-sektion__innen { max-width: calc(var(--bb-schmal-max) + 2 * var(--bb-rand)); }
.bb-sektion--voll > .bb-sektion__innen { max-width: none; }
.bb-sektion--randlos > .bb-sektion__innen { max-width: none; padding-inline: 0; }
/* Randlos: der Kopf behält den Seitenrand. */
.bb-sektion--randlos > .bb-sektion__innen > .bb-kopf { padding-inline: var(--bb-rand); }

/* Hintergrund-Medium (Ton „bild“): Bild hinter dem Inhalt, Schleier für helle Schrift. */
.bb-sektion:has(> .bb-sektion__hintergrund) { position: relative; isolation: isolate; overflow: hidden; }
.bb-sektion__hintergrund { position: absolute; z-index: -1; inset: 0; }
.bb-sektion__hintergrund > * { height: 100%; }
.bb-sektion__hintergrund::after { content: ''; position: absolute; inset: 0; background: var(--bm-schleier-bild); }