/* ==========================================================================
   TEDesign – Layout: Container, Abschnitte, Raster
   ========================================================================== */

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

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

/* --- Abschnitte ------------------------------------------------------------ */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section--subtle { background: var(--bg-subtle); }

/* Dunkle Abschnitte: data-scheme="dark" schaltet die Token um (tokens.css) */
.section[data-scheme="dark"],
[data-scheme="dark"] { background: var(--bg); color: var(--text); }

.section__head { margin-bottom: var(--sp-8); max-width: 46rem; }
.section__head > :last-child { margin-bottom: 0; }

/* Kleine Auszeichnungszeile über der Überschrift – greift die gesperrte
   Schreibweise der Logo-Tagline auf. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
/* Der Balken ist um 45 Grad geschert – dieselbe Schräge wie die Balken der
   Bildmarke. Damit kommt das Vorzeichen aus der Marke statt aus dem Baukasten.
   skewX mit negativem Winkel kippt die Oberkante nach rechts, genau wie im Logo. */
.eyebrow::before {
  content: "";
  width: 1.15rem;
  height: 0.42rem;
  background: currentColor;
  transform: skewX(-45deg);
  flex: none;
}

.section__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 42rem;
}

/* --- Raster ----------------------------------------------------------------
   auto-fit mit minmax: bricht ohne Breakpoints um und funktioniert damit
   auch in WordPress-Blöcken, deren Breite sich im Editor ändert. */
.grid {
  display: grid;
  gap: var(--sp-6);
}
.grid--2  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Bei genau vier Elementen ist auto-fit ungeeignet: es erzeugt bei mittleren
   Breiten eine 3+1-Aufteilung mit einem verwaisten Element in der zweiten
   Reihe. Feste Stufen verhindern das.
   --4   für kompakte Karten: 1 / 2 / 4
   --2x2 für Textblöcke, die Breite brauchen: 1 / 2 / 2 */
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 34rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grid--2x2 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Zweispalter mit Textspalte und breiterer Inhaltsspalte */
.split {
  display: grid;
  gap: var(--sp-7) var(--sp-9);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-6); }

.flow > :last-child { margin-bottom: 0; }