/* ==========================================================================
   03-LAYOUT — Container, Raster, Sektionen
   --------------------------------------------------------------------------
   Grundhaltung: 12-Spalten-Raster, aber ASYMMETRISCH bespielt.
   Alles zentriert und gleich breit ist das Erkennungsmerkmal von
   Baukasten-Seiten. Wir setzen Inhalte bewusst versetzt.
   ========================================================================== */

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

/* Randlos, aber mit Seitenrand — für Marquees und volle Bildflächen */
.wrap-breit {
  width: 100%;
  padding-inline: var(--gutter);
}

.sektion {
  position: relative;
  padding-block: var(--sektion-y);
}
.sektion--eng   { padding-block: calc(var(--sektion-y) * 0.55); }
.sektion--weit  { padding-block: calc(var(--sektion-y) * 1.45); }
.sektion--warm  { background: var(--c-paper-warm); }
.sektion--rand  { border-top: var(--b-bold); }

/* --- 12-Spalten-Raster -------------------------------------------------- */
.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}

/* Spaltenbelegung — Desktop */
@media (min-width: 62rem) {
  .sp-1  { grid-column: span 1; }
  .sp-2  { grid-column: span 2; }
  .sp-3  { grid-column: span 3; }
  .sp-4  { grid-column: span 4; }
  .sp-5  { grid-column: span 5; }
  .sp-6  { grid-column: span 6; }
  .sp-7  { grid-column: span 7; }
  .sp-8  { grid-column: span 8; }
  .sp-9  { grid-column: span 9; }
  .sp-10 { grid-column: span 10; }
  .sp-12 { grid-column: span 12; }

  /* Versatz — hiermit entsteht die asymmetrische Anmutung */
  .ab-2  { grid-column-start: 2; }
  .ab-3  { grid-column-start: 3; }
  .ab-4  { grid-column-start: 4; }
  .ab-5  { grid-column-start: 5; }
  .ab-6  { grid-column-start: 6; }
  .ab-7  { grid-column-start: 7; }
  .ab-8  { grid-column-start: 8; }
}

/* Mobil: alles volle Breite, kein Versatz */
@media (max-width: 61.9375rem) {
  .raster > * { grid-column: 1 / -1; }
}

/* --- Zweiteiler mit ungleicher Gewichtung -------------------------------
   Standard-Muster für "Text links, Bild rechts" — aber 5/7 statt 6/6,
   das wirkt komponiert statt schematisch. */
.split {
  display: grid;
  gap: var(--s-7) var(--s-6);
  align-items: start;
}
/* Rasterzellen haben von sich aus `min-width: auto` und schrumpfen damit
   nie unter die natürliche Breite ihres Inhalts. Ein Bild mit width:100%
   sprengt so die Spalte: Auf 360 px ragte die Figur der Über-uns-Seite
   31 px über den rechten Rand und erzeugte waagerechtes Scrollen auf der
   ganzen Seite. `min-width: 0` erlaubt der Zelle, kleiner zu werden. */
.split > * { min-width: 0; }
@media (min-width: 62rem) {
  .split            { grid-template-columns: 5fr 7fr; gap: var(--s-8); }
  .split--umgekehrt { grid-template-columns: 7fr 5fr; }
  .split--mittig    { align-items: center; }
}

/* --- Sektionskopf ------------------------------------------------------- */
.sektion-kopf {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  max-width: 54rem;
}
/* :not(.kicker) ist entscheidend: Das Label ist ebenfalls ein <p>.
   Ohne die Ausnahme bekommt es Lead-Größe und Fließtextfarbe, und die
   eigene Kicker-Regel verliert, weil sie geringere Spezifität hat. */
.sektion-kopf p:not(.kicker) { color: var(--c-ink-soft); font-size: var(--t-lead); }

/* Kleines Label über der Headline.
   --------------------------------------------------------------------------
   KEIN vorangestellter Strich und KEINE durchlaufende Nummerierung
   (01, 02, 03 …). Beides war in früheren Fassungen enthalten und ist
   ein sofort erkennbares Vorlagenmerkmal — es sieht nach Baukasten aus,
   nicht nach Redaktion. Das Label trägt nur noch das Wort selbst, in der
   Textschrift, in Versalien mit weitem Tracking. */
.kicker {
  display: inline-block;
  font-family: var(--f-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* Falls doch einmal eine optische Trennung gebraucht wird: eine feine
   Linie UNTER dem Label, nicht davor. Wirkt wie eine Marginalie statt
   wie ein Aufzählungszeichen. */
.kicker--unterstrich {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
}

/* --- Kartenraster -------------------------------------------------------
   auto-fit füllt die Zeile so voll wie möglich. Bei sechs Karten ergibt
   das auf breiten Schirmen 4 + 2 — eine halbleere zweite Zeile, die
   unfertig aussieht. Deshalb wird die Spaltenzahl zur Anzahl passend
   gesetzt: 6 Karten → 3 + 3, 8 Karten → 4 + 4.

   Regel: Die Zeilen müssen gleichmäßig aufgehen. Geht die Anzahl nicht
   auf (5, 7), gehört das vor dem Bauen geklärt — dann ist meist eine
   Karte zu viel oder eine zu wenig. */
.karten {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
}
.karten--2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }

@media (min-width: 62rem) {
  .karten--3 { grid-template-columns: repeat(3, 1fr); }
  .karten--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 40rem) and (max-width: 61.9375rem) {
  .karten--3,
  .karten--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Hilfsklassen ------------------------------------------------------- */
.stapel > * + * { margin-top: var(--s-4); }
.stapel-weit > * + * { margin-top: var(--s-6); }
.text-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--c-ink-soft); }
.text-eng  { max-width: var(--max-w-text); }
.mittig    { text-align: center; margin-inline: auto; }

/* Trennlinie mit Diagonalschraffur — statt schlichtem <hr> */
.trenner-schraffur {
  height: 0.75rem;
  background-image: var(--bg-diagonal);
  border-block: var(--b-hair);
}