/* ==========================================================================
   layout.css — Container, Sektionsrhythmus, Grid-Systeme
   Regelt ausschließlich Positionierung und Raster. Keine Farben, keine
   Komponentenoptik.
   ========================================================================== */

/* --- Container ---------------------------------------------------------- */

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

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

/* Die waagerechte Zeitachse braucht mehr Breite als der Standardcontainer,
   sonst werden die sechs Spalten zu schmal. */
.container--wide { max-width: var(--container-wide); }

/* --- Sektionen ---------------------------------------------------------- */

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

/* Der helle Ton blendet an den Kanten selbst ein und aus, statt hart mit
   einer Linie gegen die Nachbarsektion abzuschließen — der Übergang von
   Bereich zu Bereich läuft als Verlauf statt als Kante. */
/* Kein grauer Verlaufston mehr — die Fläche bleibt durchgehend Schwarz wie
   der Rest der Seite. Die Klasse bleibt im Markup, falls später wieder eine
   Abgrenzung gebraucht wird. */
.section--subtle {
  background: none;
}

/* Kopf einer Sektion: Label, Überschrift, Einleitung.
   Der Abstand nach unten trennt die Überschrift vom Inhalt des Abschnitts —
   Diagramm, Karten, Formular. Bewusst großzügig, damit die Seite auch als
   Präsentation Luft hat. */
.section-head {
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--section-head-gap);
  text-align: center;
}

.section-title { font-size: var(--fs-3xl); }
.section-lead  { margin-top: var(--space-4); font-size: var(--fs-md); }

/* --- Raster ------------------------------------------------------------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* Die acht Gründe für Immobilien */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Gegenüberstellung: mit uns / freier Markt */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.team-grid,
.aftersale-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* Nach Entfernen der Steuerberater-Karte nur noch drei Karten — eigenes
   dreispaltiges Raster statt einer leeren vierten Spalte. */
.aftersale-grid--trio { grid-template-columns: repeat(3, 1fr); }

/* Team auf zwei Personen reduziert: eigenes, schmaleres, zentriertes Raster
   statt des vierspaltigen Standardrasters. */
.team-grid--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-6);
}

/* --- Formularzeilen ----------------------------------------------------- */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ==========================================================================
   Sektions-Trennstrich
   Dieselbe dünne Linie wie am Footer (0.67-fach skaliert, Farbe wie
   Fließtext) — hier als eigenständiges Element zwischen zwei Sektionen,
   nicht als Rand einer von ihnen. Nur zwischen den ersten fünf Bereichen
   der Seite im Einsatz (01–05), nicht durchgängig.
   ========================================================================== */

.section-divider {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: 1px;
  background: var(--text-muted);
  background-clip: content-box;
  transform: scaleY(0.67);
}