/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, bausteine/raster.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Raster (bausteine/Raster.tsx). Breakpoints: 640/768/1024 (tokens.css).
   Lücken: --bb-raster-spalt/-zeile (Module stellen sie für eine Variante
   um), Grundwert je luecke-Stufe. */
.bb-raster {
  --bb-raster-spalt: var(--bb-raster-luecke);
  --bb-raster-zeile: var(--bb-raster-spalt);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  -moz-column-gap: var(--bb-raster-spalt);
       column-gap: var(--bb-raster-spalt);
  row-gap: var(--bb-raster-zeile);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-raster--luecke-eng { --bb-raster-spalt: var(--bb-raster-luecke-eng); }
.bb-raster--luecke-weit { --bb-raster-spalt: var(--bb-raster-luecke-weit); }
.bb-raster__zelle { display: flex; min-width: 0; }
.bb-raster__zelle > * { flex: 1 1 auto; min-width: 0; }

/* ── Spalten ─────────────────────────────────────────────────────────── */
.bb-raster--mobil-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  :is(.bb-raster--2, .bb-raster--3, .bb-raster--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-raster--gleich { grid-auto-rows: 1fr; }
}
@media (min-width: 1024px) {
  .bb-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 2/3 + 1/3, danach Drittel (sechs Spalten) */
@media (min-width: 768px) {
  .bb-raster--gross-schmal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bb-raster--gross-schmal > .bb-raster__zelle { grid-column: span 3; }
  .bb-raster--gross-schmal > .bb-raster__zelle:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bb-raster--gross-schmal > .bb-raster__zelle { grid-column: span 2; }
  .bb-raster--gross-schmal > .bb-raster__zelle:first-child { grid-column: span 4; }
}

/* ── Wischstreifen ───────────────────────────────────────────────────────
   Karte --bb-wisch-breite breit, die nächste lugt heraus; Einrasten je
   Karte; der Streifen läuft bis an den Bildschirmrand. Tab erreicht jede
   Karte (der Streifen scrollt mit), Vorleser lesen eine Liste. */
.bb-raster--wisch {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--bb-wisch-breite);
  margin-inline: calc(-1 * var(--bb-rand));
  padding-inline: var(--bb-rand);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bb-rand);
  scrollbar-width: none;
}
.bb-raster--wisch::-webkit-scrollbar { display: none; }
.bb-raster--wisch > .bb-raster__zelle { grid-column: auto; scroll-snap-align: start; }
@media (max-width: 767px) {
  .bb-raster--mobil-wisch {
    --bb-raster-spalt: var(--bb-raster-luecke-eng);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--bb-wisch-breite);
    margin-inline: calc(-1 * var(--bb-rand));
    padding-inline: var(--bb-rand);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bb-rand);
    scrollbar-width: none;
  }
  .bb-raster--mobil-wisch::-webkit-scrollbar { display: none; }
  .bb-raster--mobil-wisch > .bb-raster__zelle { grid-column: auto; scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  .bb-raster--mobil-zwei.bb-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-raster--mobil-zwei.bb-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}