/*
 * =============================================================================
 * SPEICHER 7 – LAYOUT CSS
 * =============================================================================
 * Container, Grid, Section-Spacing, Page-Wrapper.
 * Keine Farben, keine Komponenten – nur strukturelle Regeln.
 * =============================================================================
 */

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE WRAPPER
   Stellt sicher, dass der Footer immer am unteren Rand klebt.
───────────────────────────────────────────────────────────────────────────── */

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-wrapper main {
  flex: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CONTAINER
───────────────────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--gutter-mobile);
  }
}

/* Schmaler Container für Textspalten */
.container--narrow {
  max-width: 720px;
}

/* Breiter Container für full-bleed Elemente mit Padding */
.container--wide {
  max-width: 1440px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION
───────────────────────────────────────────────────────────────────────────── */

.section {
  padding-block: var(--space-2xl); /* 96px default */
}

.section--sm {
  padding-block: var(--space-xl); /* 64px */
}

.section--lg {
  padding-block: var(--space-3xl); /* 128px */
}

@media (max-width: 640px) {
  .section     { padding-block: var(--space-lg); }  /* 40px statt 96px */
  .section--sm { padding-block: var(--space-md); }  /* 24px statt 64px */
  .section--lg { padding-block: var(--space-xl); }  /* 64px statt 128px */
}

/* Hintergrundfarben für Sections */
.section--white {
  background-color: var(--color-white);
}

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

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

.section--primary h2,
.section--primary h3 {
  color: var(--color-white);
}

.section--primary .text-muted {
  color: rgba(255, 255, 255, 0.65);
}

/* Section Header – zentrierter Titel-Block */
.section__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.section__header h2 {
  margin-bottom: var(--space-sm);
}

.section__header .lead {
  margin-inline: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12-SPALTEN-GRID
───────────────────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}

/* Spalten-Klassen */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-12 { grid-column: span 12; }

/* Responsive Fallbacks */
@media (max-width: 1024px) {
  .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 6; }
  .col-8 { grid-column: span 12; }
  .col-9 { grid-column: span 12; }
}

@media (max-width: 768px) {
  .grid {
    gap: var(--space-md);
  }

  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10 {
    grid-column: span 12;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   FLEX UTILITIES
───────────────────────────────────────────────────────────────────────────── */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }


/* ─────────────────────────────────────────────────────────────────────────────
   AUTO-GRID (für Card-Grids mit automatischen Spalten)
───────────────────────────────────────────────────────────────────────────── */

/* 3-Spalten-Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Letztes Item zentrieren, wenn es alleine in einer Reihe steht (z.B. 3 Items → 2+1) */
  .grid-3 > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-lg) / 2);
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Auf Mobile zurücksetzen: volle Breite */
  .grid-3 > *:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* 2-Spalten-Grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* 4-Spalten-Grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   TEXT-ALIGNMENT UTILITIES
───────────────────────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-left   { text-align: left; }

.mx-auto { margin-inline: auto; }


/* ─────────────────────────────────────────────────────────────────────────────
   SPACING UTILITIES
───────────────────────────────────────────────────────────────────────────── */

.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); }
.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); }


/* ─────────────────────────────────────────────────────────────────────────────
   CONTENT GRID (Text + Bild, 2-spaltig mit Responsive-Fallback)
   Ersetzt inline display:grid;grid-template-columns:1fr 1fr
───────────────────────────────────────────────────────────────────────────── */

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.content-grid--top {
  align-items: start;
}

@media (max-width: 1024px) {
  .content-grid {
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}