/* ==================================================
   Container Component
   schwimm einfach Theme
================================================== */

/*
 * Standard-Container
 *
 * Für Navigation, normale Seitenabschnitte,
 * Bild-Text-Bereiche und allgemeine Inhalte.
 */
.container {
  width: min(
    calc(100% - (2 * var(--container-padding))),
    var(--container-max-width)
  );
  margin-inline: auto;
}

/*
 * Schmaler Container
 *
 * Für längere Texte, Einleitungen,
 * FAQ-Inhalte und rechtliche Seiten.
 */
.container--narrow {
  max-width: var(--container-narrow-width);
}

/*
 * Breiter Container
 *
 * Für Kursübersichten, Karten-Grids
 * und größere Inhaltsbereiche.
 */
.container--wide {
  max-width: var(--container-wide-width);
}

/*
 * Fluid Container
 *
 * Nutzt die gesamte Breite und behält
 * trotzdem den horizontalen Seitenabstand.
 */
.container--fluid {
  width: 100%;
  max-width: none;
  padding-inline: var(--container-padding);
}