/* ==========================================================================
   Questia MC – layout.css
   Seitengerüst: Container, Sektionen, Raster und Bereichs-Layouts
   Mobile-First – Breakpoints: 40em (640px), 48em (768px), 56em (896px), 64em (1024px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Container
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* --------------------------------------------------------------------------
   2. Sektionen
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--space-section);
}

/* Leicht abgesetzter Hintergrund für jede zweite Sektion */
.section--alt {
  background: linear-gradient(
    180deg,
    transparent,
    rgb(var(--c-questia-rgb) / 0.035) 15%,
    rgb(var(--c-questia-rgb) / 0.035) 85%,
    transparent
  );
}

.section__header {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. Raster
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

/* Flex statt Raster: unvollständige Reihen (z. B. 2 von 3 Karten) stehen mittig */
.grid--features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid--features > * {
  flex: 0 1 calc((100% - 2 * var(--space-lg)) / 3); /* drei Karten pro Reihe */
  min-width: min(100%, 18rem);
}

@media (max-width: 40em) {
  .grid--features > * {
    flex-basis: 100%;
  }
}

/* Flex statt Raster: Team-Karten stehen immer mittig, egal wie viele es sind */
.grid--team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid--team > * {
  flex: 0 1 15rem; /* feste Kartenbreite, bei Platzmangel schmaler */
  min-width: min(100%, 13rem);
}

/* Zweispaltig: Text + Inhalt */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 100%;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
  overflow: hidden;
  text-align: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 52rem;
}

.hero__map {
  margin-top: calc(-1 * var(--space-sm)); /* rückt nah an die IP-Box */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   5b. Unterseiten-Kopf (Impressum, Datenschutz, Kontakt)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5rem)) clamp(4rem, 3rem + 5vw, 7rem);
  text-align: center;
}

.section--tight {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-section);
}

/* --------------------------------------------------------------------------
   6. Beitreten – Schritte
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 40em) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7. Regeln
   -------------------------------------------------------------------------- */
.rules {
  display: grid;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-xl);
}

@media (min-width: 40em) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56em) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-lg);
}