/* Layout: Header, Nav, Container, Grid */
.site-header{
  background:var(--color-accent);
  color:#fff;
  padding:20px;
  text-align:center;
}

.site-nav{
  background:#eef2f7;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:10px 0;
}
.site-nav a{
  padding:8px 16px;
  border-radius:4px;
  transition:background .3s;
}
.site-nav a:hover{ background:#cce5ff; }

.container{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:20px;
  max-width:1200px;
  margin:0 auto;
}

.section{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}

/* ab Tablet nebeneinander */
@media (min-width:768px){
  .container{ flex-direction:row }
  .section{ flex:1 }
}
/* Footer */
.site-footer{
  background:#eef2f7;
  margin-top:20px;
}
.site-footer .footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-nav{ display:flex; gap:12px; flex-wrap:wrap }
.footer-nav a{
  padding:4px 8px;
  border-radius:4px;
}
.footer-nav a:hover{ background:#cce5ff; }

@media (min-width:768px){
  .site-footer .footer-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}