/*
  Zentrale Mobile-Fixes für alle Seiten.
  Wird NACH dem Inline-<style>-Block jeder Seite eingebunden, damit die
  Regeln hier die Desktop-Vorgaben bei kleinen Bildschirmen überschreiben.
  Enthält ausschließlich Layout-Anpassungen, keine Inhalte/Texte.
*/

html,
body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* Navbar: von "float rechts, ohne Umbruch" auf gestapelt/umbrechend umstellen */
@media (max-width: 700px) {
  .navbar {
    flex-direction: column;
    padding: 0.5rem 0;
  }

  .navbar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }

  .navbar li {
    float: none;
  }

  .navbar a {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}

/* Hero-Bereich der Startseiten (index.html): riesige Schrift & feste Breiten entschärfen */
@media (max-width: 700px) {
  .start {
    min-height: 420px;
  }

  .titel {
    font-size: 2.75rem;
  }

  .uebertitel {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }

  .untertitel {
    font-size: 0.8rem;
  }

  .vierte-schicht-deco {
    width: 70vw;
    max-width: 260px;
    animation: none;
    opacity: 1;
  }

  .cta-button {
    flex-direction: column;
  }

  .cta-button1 {
    width: 70vw;
    max-width: 260px;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }
}

/* Artikel-Layout (Bild neben Text) auf schmalen Bildschirmen stapeln */
@media (max-width: 800px) {
  article {
    margin-top: 3rem;
    padding: 0 1rem;
  }

  article aside {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 1rem;
  }

  article aside img {
    max-width: 100%;
  }

  article a {
    margin-left: 0;
  }
}

/* main/Container ohne seitlichen Puffer bekommen etwas Innenabstand */
@media (max-width: 700px) {
  main,
  .container-cta {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .activity {
    padding: 1rem 1.25rem;
  }
}

/* Vorstands-Foto mit fest gesetzter Höhe/Margin (Inline-Style) einfangen */
@media (max-width: 700px) {
  main img {
    height: auto !important;
    margin-left: 0 !important;
    max-width: 100%;
  }
}

/* Rückblick-Galerien: feste Bildbreiten & 4er-Grid brechen auf schmalen Screens um */
@media (max-width: 700px) {
  .galery,
  .galery-left {
    flex-wrap: wrap;
  }

  .galery img,
  .galery-left img {
    width: 100px;
  }

  .galery--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .galery--grid img {
    width: 100%;
    max-width: 140px;
  }

  .content,
  .content-left {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}