/* ============================================================
   layout.css — Grid-Layout-System fuer Seiten-Sections

   WAS IST DAS PROBLEM?
   Sections brauchen konsistenten Seitenrand und Spaltenabstand.
   Der naheliegende Ansatz — padding-inline fuer den Rand, gap fuer
   den Gutter — hat einen entscheidenden Nachteil: beide sind nicht
   adressierbar. Ein Element, das bis an den Seitenrand bluten soll
   (Full-Bleed-Bild, farbige Flaeche), kann padding nicht ueberspannen.
   Ein Element, das im Gutter platziert werden soll, kann gap nicht
   betreten. Das System waere von Anfang an begrenzt.

   DIE LOESUNG
   Rand und Gutter sind echte Grid-Spalten — mit benannten Linien.
   Das macht sie adressierbar: jedes Child kann per grid-column gezielt
   platziert werden, ob innerhalb der Inhaltsspalten, ueber den Gutter
   hinweg oder bis zur vollen Seitenbreite.

   WIE BENUTZE ICH ES?
   <section class="grid col-3 margin container gutter auto">
   <section class="grid col-3 margin container gutter">  ← explizite Platzierung
   <section class="grid content-aside margin auto">      ← Inhalt + Sidebar

   Modifier-Uebersicht:
     grid        → Namespace-Klasse; immer angeben
     col-3       → 3-Spalten-Grid mit benannten Linien
     content-aside → asymmetrisches 2-Zonen-Layout: capped Content + feste Sidebar
     margin      → flexibler Seitenrand
     container   → Max-Breite (container-max-width) — nur fuer col-3
     gutter      → Spalten- und Zeilenabstand — nur fuer col-3
     gutter-narrow / gutter-wide → schmalere / breitere Variante — nur fuer col-3
     auto        → Children fliessen automatisch in Inhaltsspalten;
                   beinhaltet responsives Umbrechen

   Benannte Linien fuer explizite Platzierung:
     grid-column: full-start / full-end   → volle Breite inkl. Rand
     grid-column: col1-start / col3-end   → alle Inhaltsspalten (col-3)
     grid-column: col1-start / col2-end   → Spalte 1 + Gutter + Spalte 2 (col-3)
                                            oder Content + Gap + Aside (content-aside)

   WIE FUNKTIONIERT ES INTERN?

   Null-Basis: .grid.col-3 allein hat keinen Rand, keinen Gutter,
   kein Auto-Placement. Jeder Modifier setzt genau eine Custom Property
   oder ein Verhalten — nichts implizit. Kombinationen sind additiv.

   auto ist Modifier, nicht Default: Ohne auto spannen alle Children
   ueber den gesamten Inhaltsbereich (col1-start / col3-end) — wie ein
   normaler Block. Das ist der saubere Grundzustand fuer explizite
   Platzierung, ohne gegen nth-child-Overrides kaempfen zu muessen.

   Responsiveness ist in auto eingebaut: Wer den Flow abgibt, will auch
   dass Spalten sinnvoll umbrechen. Explizite Grids bleiben unberuehrt —
   wer selbst platziert, steuert auch die Responsiveness selbst.

   Margin relativ zum Container: page-margin-left/right verwenden clamp()
   mit %-Wert — loest relativ zum Grid-Container auf, nicht zum Viewport.
   Das System funktioniert deshalb auch in verschachtelten Layouts korrekt.

   Gutter fix (px): Gutter sind Vielfache von font-size-base, kein Viewport-
   oder Container-Bezug. Stabil in allen Kontexten — kein % / vw noetig.
   Groessenstufen werden einmal in tokens.css entschieden.

   Spezifitaet bei margin + container: Beide Modifier setzen --rand-l
   und --rand-r. Die Kombination braucht einen 3-Klassen-Selektor
   (.grid.margin.container), damit die max()-Berechnung die
   Einzel-Modifier zuverlaessig ueberschreibt.

   Namespace .grid: Alle Klassen laufen unter .grid als Praefix.
   .container bleibt damit frei fuer kuenftige Verwendung als
   eigenstaendiger Shortcut (zentriertes Block-Layout ohne Grid).
   ============================================================ */


/* ============================================================
   Basis
   ============================================================ */

.grid {
  display: grid;
}


/* ============================================================
   col-3 — 3-Spalten-Grid
   ============================================================ */

.grid.col-3 {
  --rand-l: 0px;
  --rand-r: 0px;
  --gutter: 0px;

  grid-template-columns:
    [full-start]  var(--rand-l)
    [col1-start]  minmax(0, 1fr) [col1-end]
                  var(--gutter)
    [col2-start]  minmax(0, 1fr) [col2-end]
                  var(--gutter)
    [col3-start]  minmax(0, 1fr) [col3-end]
                  var(--rand-r)  [full-end];
}

/* Sicherer Grundzustand: ungeplatzierte Children spannen alle Inhaltsspalten.
   Verhindert dass Children in Rand- oder Gutter-Spalten fliessen. */
.grid.col-3 > * {
  grid-column: col1-start / col3-end;
}

/* auto: Children fliessen automatisch in je eine Inhaltsspalte.
   Neue Zeilen entstehen implizit — CSS Grid kuemmert sich darum. */
.grid.col-3.auto > *:nth-child(3n+1) { grid-column: col1-start / col1-end; }
.grid.col-3.auto > *:nth-child(3n+2) { grid-column: col2-start / col2-end; }
.grid.col-3.auto > *:nth-child(3n+3) { grid-column: col3-start / col3-end; }


/* ============================================================
   content-aside — asymmetrisches 2-Zonen-Layout
   ============================================================ */

/* Inhaltsspalte: wächst bis 800px, dann gedeckelt.
   Elastischer Gap: mindestens 60px, nimmt verbleibenden Platz.
   Sidebar: fest 230px.
   Kein Gutter-Modifier — der Gap ist strukturell, kein optionaler Abstand. */
.grid.content-aside {
  --rand-l: 0px;
  --rand-r: 0px;

  grid-template-columns:
    [full-start]  var(--rand-l)
    [col1-start]  minmax(0, 800px) [col1-end]
                  minmax(60px, 1fr)
    [col2-start]  230px [col2-end]
    var(--rand-r)  [full-end];
}

/* Sicherer Grundzustand: Children spannen Content + Gap + Sidebar. */
.grid.content-aside > * {
  grid-column: col1-start / col2-end;
}

/* auto: erstes Kind → Content-Spalte, alle weiteren → Sidebar.
   Responsive Umschaltung bei 540px — konsistent mit col-3. */
.grid.content-aside.auto > *:nth-child(1)   { grid-column: col1-start / col1-end; }
.grid.content-aside.auto > *:nth-child(n+2) { grid-column: col2-start / col2-end; }


/* ============================================================
   Modifier — gelten fuer alle .grid col-N Typen
   ============================================================ */

/* margin: flexibler Seitenrand, relativ zum Container (nicht Viewport) */
.grid.margin {
  --rand-l: var(--page-margin-left);
  --rand-r: var(--page-margin-right);
}

/* container: kein Rand bis container-max-width, dann wachsender Rand darueber */
.grid.container {
  --rand-l: max(0px, (100% - var(--container-max-width)) / 2);
  --rand-r: max(0px, (100% - var(--container-max-width)) / 2);
}

/* margin + container: Minimum-Rand (margin) bleibt auch jenseits container-max-width.
   3-Klassen-Selektor notwendig — ueberschreibt die 2-Klassen-Regeln oben. */
.grid.margin.container {
  --rand-l: max(var(--page-margin-left), (100% - var(--container-max-width)) / 2);
  --rand-r: max(var(--page-margin-right), (100% - var(--container-max-width)) / 2);
}

/* gutter: Spalten- und Zeilenabstand gleichzeitig.
   --gutter steuert die Gutter-Spalten in grid-template-columns,
   row-gap den Abstand zwischen impliziten Zeilen.
   Beide verwenden denselben Token — moeglich weil Gutter fix (px) sind. */
.grid.gutter        { --gutter: var(--grid-gutter);        row-gap: var(--grid-gutter); }
.grid.gutter-narrow { --gutter: var(--grid-gutter-narrow); row-gap: var(--grid-gutter-narrow); }
.grid.gutter-wide   { --gutter: var(--grid-gutter-wide);   row-gap: var(--grid-gutter-wide); }


/* ============================================================
   Responsive — eingebaut in auto
   ============================================================ */

/* Tablet: 3 Spalten → 2 Spalten. col3 zeigt auf col2-Linie.
   Placement-Regeln auf 2n umstellen — spaetere Deklaration schlaegt 3n-Regeln oben.
   Ergebnis: Items fliessen links nach rechts, col1 → col2 → col1 → col2 … */
@media (max-width: 900px) {
  .grid.col-3.auto {
    grid-template-columns:
      [full-start] var(--rand-l)
      [col1-start]            minmax(0, 1fr) [col1-end]
                              var(--gutter)
      [col2-start col3-start] minmax(0, 1fr) [col2-end col3-end]
      var(--rand-r) [full-end];
  }
  .grid.col-3.auto > *:nth-child(2n+1) { grid-column: col1-start / col1-end; }
  .grid.col-3.auto > *:nth-child(2n+2) { grid-column: col2-start / col2-end; }
}

/* Mobile: 1 Spalte. Alle Named Lines zeigen auf dieselbe Linie.
   nth-child(n) matcht alle Items und schlaegt 2n/3n-Regeln oben. */
@media (max-width: 540px) {
  .grid.col-3.auto {
    grid-template-columns:
      [full-start] var(--rand-l)
      [col1-start col2-start col3-start] minmax(0, 1fr) [col1-end col2-end col3-end]
      var(--rand-r) [full-end];
  }
  .grid.col-3.auto > *:nth-child(n) { grid-column: col1-start / col1-end; }

  /* content-aside: Sidebar stapelt sich unter den Inhalt. */
  .grid.content-aside.auto {
    grid-template-columns:
      [full-start] var(--rand-l)
      [col1-start col2-start] minmax(0, 1fr) [col1-end col2-end]
      var(--rand-r) [full-end];
  }
  .grid.content-aside.auto > *:nth-child(n) { grid-column: col1-start / col1-end; }
}