/* ==========================================================================
   Layout — Container, 12-Spalten-Raster, Sektionsrhythmus
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
/* etwas breiter als der Regelcontainer — für Arbeitsproben und Logostrecke,
   damit nicht jede Sektion dieselbe Breite hat */
.container--wide { max-width: var(--container-wide); }

/* --- Ausbruch nach rechts ------------------------------------------------
   Ein Element beginnt an der Containerkante und läuft bis zum Fensterrand.
   Gerechnet wird ausschließlich mit Prozent des Elternelements: 100% ist die
   Breite des Body, also OHNE Rollbalken. Mit 100vw stünde die Rollbalken-
   breite zu viel und erzeugte genau die waagerechte Scrollleiste, die es
   nicht geben darf.                                                        */
.bleed-right {
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-right: 0;
}
/* dasselbe für beide Seiten: volle Fensterbreite ohne Container */
.bleed-full { padding-inline: 0; max-width: none; }

/* --- Sektionen ----------------------------------------------------------
   Der Seitenrhythmus entsteht durch großzügige, gleichmäßige Abstände und
   dünne Trennlinien — nicht durch Boxen.                                 */
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section + .section { border-top: var(--rule) solid var(--line); }

.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--ink);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--soft { background: var(--paper-2); }
/* schließt direkt an den Hero an, deshalb oben weniger Luft */
.section--tight { padding-top: clamp(var(--s-5), 5vw, var(--s-7)); }

/* --- Sektionskopf: Label + Überschrift ---------------------------------- */
.section-head {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.label::after {
  content: "";
  flex: 1;
  height: var(--rule);
  background: var(--line);
}
.section--dark .label { color: #9a9a9a; }
.section--dark .label::after { background: #333; }

/* --- 12-Spalten-Raster -------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
.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-12 { grid-column: 1 / -1; }

/* Editorial-Versatz: Text startet nicht immer am Rand */
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
/* schiebt die Spalte ans rechte Rasterende, statt sie links anzuheften */
.col-push-1 { grid-column-end: -1; }

/* Band: Überschrift links, Text rechts, beide auf gleicher Grundlinie */
.grid--band { align-items: start; row-gap: var(--s-5); }
.section-head--flush { margin-bottom: 0; }

/* --- Auto-Raster für Kachelmengen --------------------------------------- */
.auto-grid {
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr));
}

.stack > * + * { margin-top: var(--flow, var(--s-3)); }
.flow-lg { --flow: var(--s-5); }

/* Vorspann: etwas größer als der Fließtext, gleiche Laufweite */
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); }