/* =================================================
   02-layout.css – deine Basis + Lücke unter Header
   (Minimal invasive Änderung)
   ================================================= */

html,
body{
  margin:0;
  padding:0;
  height:100%;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;

  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(99,212,113,.18), transparent 60%),
    radial-gradient(1000px 520px at 90% 0%, rgba(80,140,255,.14), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));

  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}

#app{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Container wie gehabt */
.container{
  max-width:1320px;
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
  box-sizing:border-box;
}

/* ✅ DAS ist die Lücke unter der Kopfzeile */
main{
  flex:1;
  padding: 40px 0 80px;  /* dein normales Padding */
}

/* 👉 zusätzlicher Abstand NUR oben */
main{
  padding-top: 90px; /* <<< HIER ist die Lücke */
}

/* optional: falls du zu viel willst, nimm 60px */
@media (max-width:900px){
  main{ padding-top: 70px; }
  :root{ --gutter:16px; }
}

.section{margin-top:24px}

.grid{display:grid;gap:20px}
.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))}

@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}