/* ===== Grundlayout ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* streckt nur wenn nötig */
  font-family: Arial, sans-serif;
  text-align: center;
}

/* ===== Header ===== */
header {
  width: 100%;
  overflow: hidden;
}

/* Bild im <picture> / <img> */
picture, header img {
  display: block;
  width: 100%;
  max-width: 1980px; /* optional */
  height: auto;
  margin: 0 auto;
  object-fit: cover; /* füllt sauber, ev. zuschneiden */
}

/* ===== Main ===== */
main {
  flex: 1; /* füllt nur den rest wenn Platz ist */
  padding: 2rem;
  background: #ffffff;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Footer ===== */
footer {
  background-color: #2d4077;
  color: #fff;
  padding: 20px 0;
  margin-top: auto;
}

footer .footer-container {
  width: 100%;
  max-width: 1980px;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 768px) {
  main { padding: 1rem; }
  footer .footer-container { font-size: 0.9rem; }
  /* Falls du für Mobile eine feste Header-Hoehe willst: */
  /* header { min-height: 160px; } */
}