/*
  CONTAINER LAYOUTS - Einheitliches Grid-System
  Wird genutzt von: b13/container Extension, ContentBlocks, Footer, etc.
  Ersetzt die alten Float-Klassen (.halb, .drittel, .doppel) aus design-tokens.css
*/

/* ========================================
   GRID BASE
   Gemeinsame Basis für alle Spalten-Layouts
   ======================================== */

.b_grid {
  display: grid;
  gap: var(--grid-gap, 2rem);
  width: 100%;
}

/* Kinder-Elemente innerhalb des Grids */
.b_grid > * {
  min-width: 0; /* Verhindert Grid-Overflow bei langen Inhalten */
}

/* Header innerhalb eines Grids: volle Breite über alle Spalten */
.b_grid__header {
  grid-column: 1 / -1;
}

/* ========================================
   GRID VARIANTEN
   ======================================== */

/* 2 Spalten: gleichmässig */
.b_grid--2col {
  grid-template-columns: 1fr 1fr;
}

/* 3 Spalten: gleichmässig */
.b_grid--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 1/3 + 2/3 (ersetzt .drittel + .doppel Kombination) */
.b_grid--1-2 {
  grid-template-columns: 1fr 2fr;
}

/* 2/3 + 1/3 */
.b_grid--2-1 {
  grid-template-columns: 2fr 1fr;
}

/* ========================================
   RESPONSIVE
   3col: Desktop 3 → Tablet 2 → Mobile 1
   2col: Desktop 2 → Mobile 1
   ======================================== */

@media (max-width: 900px) {
  .b_grid {
    --grid-gap: 1.5rem;
  }
  .b_grid--3col {
    grid-template-columns: 1fr 1fr;
  }
  .b_grid--1-2,
  .b_grid--2-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .b_grid {
    --grid-gap: 1rem;
  }
  .b_grid--2col,
  .b_grid--3col {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SUBHEADER STYLING
   (für Container mit Überschrift + Spalten)
   ======================================== */

.subheader {
  font-size: 1.125rem;
  color: var(--text-color-muted, #666);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ========================================
   HINTERGRUND CONTAINER (section-container)
   Vollbreiter Hintergrund mit zentriertem Inhaltsbereich.
   Nutzt .container / .container-big aus design-tokens.css.
   Hintergrundfarben via frame-bg-* aus frame-backgrounds.css.
   Für erweiterte Features (Bild/Video/Overlay) →
   containerSection von EXT:containeritems nutzen.
   ======================================== */

.b_section {
  width: 100%;
  position: relative;
}

/* Section-Breiten: Standard 1140px, Breit 1400px, Schmal 900px */
.b_section .container {
  max-width: 71.25rem; /* 1140px */
}

.b_section--wide .container {
  max-width: var(--content-width-big); /* 1400px */
}

.b_section--narrow .container {
  max-width: 56.25rem; /* 900px */
}

.b_section__header {
  margin-bottom: var(--spacing-md, 1.5rem);
}