/* ==========================================================================
   Ofira.app — Layout: Container, Grid, Sektionen, Responsive
   Breakpoints: Bootstrap-Werte (sm576 / md768 / lg992 / xl1200 / xxl1400).
   Nutzt ausschließlich Tokens.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--gutter); }
}

/* Schmale Textspalte für gute Lesbarkeit (60-75 Zeichen) */
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

/* --- Sektionen: großzügiger, ruhiger Weißraum ------------------------ */
.section {
  padding-block: var(--space-8);
  background: var(--color-surface);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}
.section--alt { background: var(--color-surface-muted); }
.section--page { background: var(--color-page); }
/* Reine Intro-Sektion (enthält nur die Kopfzeile, der Inhalt folgt als eigene
   Sektionen): kein eigenes Padding nach unten, sonst stapeln sich zwei
   Sektions-Paddings zum doppelten Abstand. */
.section--lead-in { padding-block-end: 0; }

/* Bühnen-Sektion: großzügigerer Vertikal-Raum als helle Sektionen */
.section--stage { padding-block: var(--space-9); }
@media (min-width: 768px) {
  .section--stage { padding-block: var(--space-10); }
}
/* Folgt eine Stage-Sektion direkt auf den Hero, gilt oben der normale
   Sektionsabstand; der extragroße Stage-Raum ist für den Seitenverlauf. */
.hero-xl + .section--stage { padding-top: var(--space-8); }
@media (min-width: 768px) {
  .hero-xl + .section--stage { padding-top: var(--space-9); }
}

/* --- Vertikaler Rhythmus (Flow/Stack, tokenbasiert) ------------------- */
.stack { --flow: var(--space-lg); }
.stack > * + * { margin-top: var(--flow); }
.stack-xs  { --flow: var(--space-xs); }
.stack-sm  { --flow: var(--space-sm); }
.stack-md  { --flow: var(--space-md); }
.stack-lg  { --flow: var(--space-lg); }
.stack-xl  { --flow: var(--space-xl); }
.stack-2xl { --flow: var(--space-2xl); }

/* --- Abstands-Utilities (T-Shirt-Größen) ----------------------------- */
.mt-0 { margin-top: 0; }
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }
.mt-5xl { margin-top: var(--space-5xl); }
.mb-0 { margin-bottom: 0; }
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* --- Grid: mobile-first 1 Spalte, bricht bei md auf ------------------ */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .grid { gap: var(--space-6); }
}

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 992px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Zwei-Spalten Split (Text + Bild) */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--reverse > :first-child { order: 2; }
}
/* Oben ausrichten statt vertikal zentrieren (kurze Textspalte neben hoher Karte/Liste) */
.split--top { align-items: start; }

/* --- Bento-Grid: unterschiedlich breite Kacheln, ruhig gemischt -------- */
.bento {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
  /* Tablet-Porträt: alle Kacheln gleich breit (2x2), ohne Bento-Verschachtelung. */
  .bento > * { grid-column: span 3; }
}
@media (min-width: 992px) {
  /* Erst mit Desktop-Breite die breit/schmal-Rhythmisierung des Bento. */
  .bento > .bento--wide { grid-column: span 4; }
  .bento > .bento--narrow { grid-column: span 2; }
}

/* --- Flex-Hilfen ----------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.cluster--center { justify-content: center; }
/* Buttons/Items auf gleiche Höhe bringen (gleicht kleinere an die größten an) */
.cluster--stretch { align-items: stretch; }

/* --- Ausrichtung ----------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* --- Schriftgröße-Utilities ------------------------------------------ */
.fs-lead { font-size: var(--fs-lead); }