/* =========================================================
   layout.css — Container, Grid, Section-Wrapper raw&royal
   ========================================================= */

/* -------------------------------------------------------
   CONTAINER
------------------------------------------------------- */

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

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

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

/* -------------------------------------------------------
   SECTION
------------------------------------------------------- */

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

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--dark  { background: var(--surface-dark); color: var(--paper); }
.section--mid   { background: var(--surface-mid);  color: var(--paper); }
.section--light { background: var(--surface-light); color: var(--ink); }

/* -------------------------------------------------------
   GRID — zweispaltig, raw ↔ royal
------------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

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

/* Kontakt-Grid — 5 Cards, bricht sauber */
.grid-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

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

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

/* -------------------------------------------------------
   STACK — vertikale Abstände via gap
------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.stack--2  { gap: var(--space-2); }
.stack--4  { gap: var(--space-4); }
.stack--6  { gap: var(--space-6); }
.stack--8  { gap: var(--space-8); }
.stack--12 { gap: var(--space-12); }
.stack--16 { gap: var(--space-16); }

/* -------------------------------------------------------
   SPLIT — links/rechts mit Lücke
------------------------------------------------------- */

.split {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.split--space-between { justify-content: space-between; }

@media (max-width: 768px) {
  .split { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------
   SCROLL-REVEAL — Basis-Klassen
   JS setzt .is-visible wenn Element im Viewport
------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: var(--reveal-transition);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-32px);
  transition: var(--reveal-transition);
}

.reveal--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--right {
  opacity: 0;
  transform: translateX(32px);
  transition: var(--reveal-transition);
}

.reveal--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Verzögerungen für gestaffelte Eintritte */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }