/* =========================================================================
   QUADRONET Base - Layout-Primitive
   Drei Klassen loesen den Grossteil der Anordnungsaufgaben. Alles weitere
   ist Sache der Komponenten.
   ========================================================================= */

@layer qn.layout {
  /* Untereinander, mit gleichem Abstand */
  .qn-stapel {
    display: flex;
    flex-direction: column;
    gap: var(--qn-stapel-abstand, var(--qn-raum-md));
  }
  .qn-stapel--eng  { --qn-stapel-abstand: var(--qn-raum-xs); }
  .qn-stapel--weit { --qn-stapel-abstand: var(--qn-raum-xl); }

  /* Nebeneinander, bricht um */
  .qn-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qn-reihe-abstand, var(--qn-raum-md));
  }

  /* Raster, das seine Spaltenzahl selbst bestimmt */
  .qn-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--qn-raster-min, 16rem), 100%), 1fr));
    gap: var(--qn-raster-abstand, var(--qn-raum-lg));
  }

  /* Mittig begrenzter Bereich */
  .qn-breite {
    width: 100%;
    max-width: var(--qn-breite);
    margin-inline: auto;
    padding-inline: var(--qn-rand);
  }
  .qn-breite--schmal { max-width: var(--qn-breite-schmal); }
  .qn-breite--weit   { max-width: var(--qn-breite-weit); }
  .qn-breite--voll   { max-width: none; padding-inline: 0; }

  /* Seitengeruest */
  .qn-seite { display: flex; flex-direction: column; min-height: 100svh; }
  .qn-inhalt { flex: 1; }

  /* Inhalt mit Randspalte - erst ab genug Platz zweispaltig */
  .qn-mitrand { display: grid; gap: var(--qn-raum-xl); }
  @media (min-width: 60rem) {
    .qn-mitrand { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  }
}