/* ============================================================
   DMC  layout.css  -  Container, 12-Spalten-Grid, Sektions-Rhythmus,
   Header-/Footer-Geruest (Geometrie; Skin in components.css),
   Bento / Stack / Cluster.
   ============================================================ */

/* ---- Container ---- */
.container{width:100%;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:760px}
.container--prose{max-width:var(--container-prose)}
.container--wide{max-width:var(--container-2xl)}
.container--max{max-width:var(--container-max)}
.container--flush{padding-inline:0}

/* ---- Sektionen (vertikaler Rhythmus) ---- */
.section{position:relative;padding-block:var(--space-section)}
.section--lg{padding-block:var(--space-section-lg)}
.section--tight{padding-block:var(--space-9)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}

/* ---- 12-Spalten-Grid ---- */
.grid{display:grid;gap:var(--gutter)}
.grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}
.col-span-6{grid-column:span 6}
.col-span-8{grid-column:span 8}
.col-span-12{grid-column:span 12}

/* ---- Stack / Cluster / Center / Flow ---- */
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack--tight{gap:var(--space-2)}
.stack--loose{gap:var(--space-6)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.cluster--between{justify-content:space-between;width:100%}
.center{margin-inline:auto}
.flow>*+*{margin-block-start:var(--space-4)}
.flow--lg>*+*{margin-block-start:var(--space-6)}

/* ---- Bento ---- */
.bento{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.bento__item{min-width:0}
.bento__item--wide{grid-column:span 2}
.bento__item--tall{grid-row:span 2}

/* ---- Header-Geruest (Geometrie) ---- */
.site-header{position:sticky;top:0;z-index:var(--z-header)}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  height:var(--header-h);max-width:var(--container-2xl);
  margin-inline:auto;padding-inline:var(--gutter);
}
.site-header__nav{display:flex;align-items:center;gap:var(--space-1)}
.site-header__actions{display:flex;align-items:center;gap:var(--space-3)}

/* ---- Footer-Geruest (Geometrie) ---- */
.site-footer__inner{
  max-width:var(--container-2xl);margin-inline:auto;
  padding-inline:var(--gutter);padding-block:var(--space-10) var(--space-7);
}
.footer-cols{display:grid;gap:var(--space-8) var(--gutter);grid-template-columns:1.4fr repeat(3,1fr)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3)}

/* ---- Responsiv (Breakpoints 1024 / 768) ---- */
@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .grid--12,.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  [class*="col-span-"]{grid-column:auto}
  .bento__item--wide,.bento__item--tall{grid-column:auto;grid-row:auto}
  .footer-cols{grid-template-columns:1fr}
  .site-header__inner{gap:var(--space-4)}
}