/* layout.css – sauberes Grundlayout (ohne doppelte .main-area Regeln) */

/* Seite als 4-Zeilen-Grid */
.page{
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  grid-template-columns: 1fr;
  row-gap: 0;               /* KEINE Zwischenlinien/Abstände erzwingen */
  align-items: start;
}

/* Grid Areas */
header, .site-header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

/* Standard: 2 Spalten im Main (links flexibel, rechts fester Kachelblock) */
.main-area{
  display: grid;
  grid-template-columns: 1fr 640px; /* rechte Spalte wie Home */
  column-gap: 10px;
  align-items: start;
}

/* Wichtig: die rechte Spalte darf NICHT schrumpfen */
.main-area > .tiles{
  min-width: 0;
}

/* Tablet: untereinander */
@media (max-width: 1100px){
  .main-area{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}