/* =========================================================
   HUNDETRAINER MIT HERZ
   LAYOUT SYSTEM
   Container, Abschnitte, Raster und responsive Grundlagen
   ========================================================= */


/* =========================================================
   SEITENRAHMEN
   ========================================================= */

.site {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2rem, 50rem);
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2rem, 87.5rem);
  margin-inline: auto;
}


/* =========================================================
   ABSCHNITTE
   ========================================================= */

.section {
  padding-block: var(--section-space);
}

.section--compact {
  padding-block: var(--section-space-compact);
}


/* =========================================================
   HINTERGRUNDFLÄCHEN
   ========================================================= */

.section--surface {
  color: var(--color-text);
  background: var(--color-surface);
}

.section--white {
  color: var(--color-text);
  background: var(--color-surface-white);
}

.section--light {
  color: var(--color-text);
  background: var(--color-brand-light);
}

.section--medium {
  color: var(--color-text-light);
  background: var(--color-brand-medium);
}

.section--brand {
  color: var(--color-text-light);
  background: var(--color-brand-primary);
}

.section--deep {
  color: var(--color-text-light);
  background: var(--color-brand-deep);
}

.section--gradient {
  color: var(--color-text-light);
  background: var(--gradient-brand);
}

.section--gradient-light {
  color: var(--color-text);
  background: var(--gradient-brand-light);
}


/* =========================================================
   STACK
   Vertikale Anordnung zusammengehöriger Inhalte
   ========================================================= */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--small {
  gap: var(--space-2);
}

.stack--large {
  gap: var(--space-6);
}


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

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}


/* =========================================================
   ZWEISPALTIGE INHALTSBEREICHE
   Text + Bild, Bild + Text usw.
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split__content {
  min-width: 0;
}

.split__media {
  min-width: 0;
}


/* =========================================================
   TEXTBREITE
   ========================================================= */

.text-content {
  max-width: var(--text-width);
}

.text-content--center {
  max-width: var(--text-width);
  margin-inline: auto;
  text-align: center;
}


/* =========================================================
   AUSRICHTUNG
   ========================================================= */

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


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 48rem) {

  .container,
  .container--narrow,
  .container--wide {
    width: min(100% - 3rem, var(--container-max, 75rem));
  }

  .container--narrow {
    --container-max: 50rem;
  }

  .container--wide {
    --container-max: 87.5rem;
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 64rem) {

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}