/* ===== RESET & GLOBAL ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 
    "Compotes Citro",
    "Delius",
    "Bonn Light",
    "Prozak Light",
    "Florence",
    "Among",
    Arial,
    Helvetica,
    sans-serif;
  margin: 0;
}

main {
  margin-top: 140px; /* Abstand wegen fixed Header */
}

/* ===== LINKS ===== */
a {
  font-size: 32px;
  color: #AF1A23;
  text-decoration: none;
  display: inline-block; 
  transition: transform 0.3s ease;
}

a:hover {
  color: #AF1A23;
  transform: scale(1.1);
}

/* ===== HEADER ===== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  background-color: white;
  height: 140px;

  position: fixed; 
  top: 0;          
  left: 0;
  width: 100%;       
}

header img {
  margin-left: 20px;
  margin-right: 20px;
  height: 85%;
}

header a {
  color: black;
  margin-right: 2vw;
  margin-top: 5%;
  font-size: 2vw;
}

nav {
  width: 60vw;
}

/* ===== SECTIONS ALLGEMEIN ===== */
section {
  display: flex;
  align-items: center;    
  justify-content: center; 
}

/* ===== CONTACT (wird mehrfach genutzt) ===== */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact a {
  color: #4E7229;
  font-size: 24px;
}

.contact a:hover {
  color: #4E7229;
}

.contact a img {
  margin: -4px;
  margin-right: 1px;
  height: 24px;
  width: 24px;
}

/* ===== FOOTER ===== */
.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 500px;
}

.topFooter {
  width: 100%;
  height: 300px;
  background-color: #B0BF9B;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.topFooter img {
  height: 40%;
}

.bottomFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  height: 200px;
  width: 100%;
}

.bottomFooter img {
  width: 80px;
}

.bottomFooter div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bottomFooter a {
  color: #4E7229;
  text-decoration: none;
  margin: 5px 0;
  transition: transform 0.2s ease;
}

.bottomFooter a:hover {
  transform: scale(1.05);
}
.impressum{
  color: #AF1A23 !important;
  font-size: 20px ;
}

/* ... Deine bestehenden Desktop-Styles bleiben unberührt ... */

@media (max-width: 768px) {
  header {
    position: relative; 
    height: auto;
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch: Logos oben, Nav unten */
    justify-content: space-between; /* Drückt Logos nach links und rechts */
    align-items: center;
    padding: 15px;
  }

  main { margin-top: 0; }

  /* Die Logos oben links und rechts */
  header img { 
    height: 50px; 
    margin: 0; 
    order: 1; /* Hält die Bilder in der ersten "Reihe" */
  }

  /* Die Navigation darunter */
  nav { 
    width: 100%; /* Nimmt volle Breite ein, erzwingt Umbruch */
    order: 2; /* Rutscht unter die Bilder */
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 8px; 
    margin-top: 15px;
  }

  header a { 
    font-size: 3.5vw; /* Kleinere Schrift, damit alles nebeneinander passt */
    margin: 0;
    padding: 2px 3px;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Wort */
  }

  
  .footer {
    height: auto;
  }

  .topFooter {
    height: auto;
    padding: 20px;
  }

  .topFooter img {
    height: auto;
    width: 80%; /* Spruch-Bild skaliert mit */
  }

  .bottomFooter {
    flex-direction: column;
    height: auto;
    padding: 20px 10px;
    gap: 15px;
  }

  /* Hier wird die Schrift im Footer klein gemacht */
  .bottomFooter a {
    font-size: 16px; /* Deutlich kleiner als die 32px vom Desktop */
    margin: 2px 0;
  }
}