/* layout.css
   Dynamische Abstände zwischen den Haupt-Sektionen (Main / Programm / Gallery)
   Optimiert für Handy, Desktop und Ultra-Wide (21:9, 32:9).
*/

:root{
  /* Grundabstände */
  --section-pad: clamp(32px, 6vh, 120px);
  --section-gap: clamp(28px, 5vh + 0.6vw, 160px);

  /* Optional: extra „Luft“ auf sehr breiten Screens */
  --section-gap-wide: clamp(40px, 6vh + 1.2vw, 220px);
}

/* Jede große Sektion in deinem Projekt ist eine .container */
.container{
  /* bleibt flex-zentriert wie im Original */
  padding-block: var(--section-pad);
  box-sizing: border-box;

  /* verhindert, dass z-index / shadows aus anderen Sektionen „reinmalen“ */
  isolation: isolate;
}

/* Dynamischer Abstand zwischen den Sektionen */
.container + .container{
  margin-top: var(--section-gap);
}

/* Ultra-Wide: mehr Abstand, damit nix „anfasst“ */
@media (min-aspect-ratio: 21/9){
  .container + .container{
    margin-top: var(--section-gap-wide);
  }
}

/* Kleine Screens: etwas kompakter */
@media (max-width: 480px){
  :root{
    --section-pad: clamp(20px, 5vh, 60px);
    --section-gap: clamp(18px, 4vh, 70px);
  }
}

/* Falls irgendwo float/absolute genutzt wird: Flow sauber trennen */
.container::after{
  content: "";
  display: block;
  clear: both;
}