/* ===============================
   LAYOUT – MOBILE FIRST BASE
   =============================== */

.layout {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===============================
   HEADER LAYOUT (STRUCTURE ONLY)
   =============================== */

.site-header {
  width: 100%;
}

/* ===============================
   NAVIGATION LAYOUT
   =============================== */

.site-menu {
  width: 100%;
}

.site-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===============================
   CONTENT LAYOUT
   =============================== */

.content-wrapper {
  width: 100%;
  margin: 16px 0;
}

/* ===============================
   FOOTER LAYOUT
   =============================== */

.site-footer {
  width: 100%;
  margin-top: auto; /* wichtig für Sticky Footer */
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* ===============================
   DESKTOP ENHANCEMENTS
   =============================== */

@media (min-width: 1024px) {
  .layout {
    max-width: 1200px;
    padding: 0 20px;
  }

  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}