/* ─── Container ─── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--s6);
}

/* ─── Section rhythm ─── */
.section {
  padding-block: var(--s24);
  background: var(--card);
}
.section--surface {
  background: var(--surface);
}
.section--dark {
  background: var(--ink);
  color: #fff;
}
.section--accent {
  background: var(--accent);
  color: #fff;
}

/* ─── Grid helpers ─── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); }

/* ─── Bento grid (Services) ─── */
.bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s5);
}
.bento__main { grid-row: span 2; }

/* ─── Stats row ─── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  text-align: center;
}

/* ─── Flex helpers ─── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }

/* ─── Two-column content layout ─── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

/* ─── Kontakt page grid ─── */
.kontakt-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s12);
  align-items: flex-start;
}
@media (max-width: 860px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}

/* ─── Page top padding (below fixed navbar) ─── */
.page-top { padding-top: 100px; }

/* ─── ───────── Mobile ─────────── ─── */
@media (max-width: 900px) {
  .section { padding-block: var(--s16); }
  .grid-2, .grid-3, .grid-4, .bento, .split { grid-template-columns: 1fr; }
  .bento__main { grid-row: auto; }
  .stats-row { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}
@media (max-width: 540px) {
  .container { padding-inline: var(--s4); }
  .stats-row { grid-template-columns: 1fr; }
}