html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* wichtig für Sticky Footer */
  font-family: Arial, sans-serif;
}
header {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 0 1rem;
  background-color: #333;
  color: white;
  flex-wrap: nowrap; /* verhindert Umbruch */
}
.title {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#weizen{
  height: 2em;
  margin-bottom: -0.5em;
}
/**/
.bildAufzaehlung {
  display: flex;           /* <-- dafür sorgen, dass Kinder nebeneinander liegen */
  flex-wrap: wrap;         /* Zeilenumbruch bei Platzmangel */
  gap: 20px;               /* Abstand zwischen Bild und Aufzählung */
  align-items: flex-start; /* oben ausrichten */
  justify-content: center; /* optional: zentriert die Zeile */
  margin-bottom: 1rem;
}

/* Beide Spalten verhalten sich ähnlich */
.box,
.card-body {
  /*flex: 1 1 320px;    wächst, schrumpft, Basisbreite 320px */
  max-width: 600px;  /* verhindert zu breite Spalten auf großen Bildschirmen */
  box-sizing: border-box;
}

/* Bild: füllt die Box, bleibt responsive */
.box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Styling für die Aufzählung */
.card-body {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
}

/* Feature-Liste */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
}
.features li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* kleine Icons/Checks */
.check {
  font-weight: 700;
  color: #2a7a2a; /* optional */
}

/* RESPONSIVE: Auf kleinen Bildschirmen untereinander */
@media (max-width: 700px) {
  .bildAufzaehlung {
    flex-direction: column; /* Stapeln */
    align-items: stretch;   /* breite ausnutzen */
  }

  .box,
  .card-body {
    max-width: none; /* volle Breite des Containers nutzen */
  }

  .box {
    order: 0; /* falls du Reihenfolge ändern willst, z.B. image zuerst */
  }
}

/**/

.content {
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}
.menuelink{
  color: white;
  text-decoration: none;
  padding: 1em;
  padding-right: 2.5em;
}

/*bottom*/

.impressum {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 2px;
  background-color: gainsboro;
  border-top: 1px solid #ddd;
  font-size: 0.7em;
  color: #555;
  text-align: left;
  flex-wrap: nowrap; /* wichtig: kein Umbruch */
  margin-top: auto;
}
#impressum_angaben,
#impressum_kontakt {
  flex: 1 1 200px;   /* flexibel, aber Mindestbreite */
  max-width: 300px; /* nicht zu groß */
  padding-top: 10px;
}
.impressum h3 {
  margin-top: 0;
  color: #333;
}

/*Hover bei Menüheader*/
.nav-container a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}
.nav-container a:hover {
  text-decoration: underline;
}
/*
.nav-container{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}*/
.nav-container{
  display:flex;
  gap: 1rem;
  position: static; /* absolute entfernen */
  transform: none;  
}
/*Social Media Icons*/
.social-icons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.social-icons img {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.social-icons img:hover {
  opacity: 1;
}


/*Menüseite*/
    /* Icon-Button */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropbtn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 24px;
    }

    /* Dropdown-Inhalt */
    .dropdown-content {
      display: none;
      position: absolute;
      right: 0;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Sichtbar, wenn aktiv */
    .show {
      display: block;
    }
    /**/

/*Kontaktseite*/
.kontaktWrapper{
    display: flex;
  flex-wrap: wrap;        /* Zeilenumbruch bei kleineren Bildschirmen */
  gap: 30px;              /* Abstand zwischen Info-Box und Formular */
  justify-content: center;
  align-items: flex-start; /* Oben ausrichten */
  margin: 5em auto;
  max-width: 1100px;      /* Gesamtbreite begrenzen */
  padding: 0 2rem 1rem;
  box-sizing: border-box;
    border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.container {
  flex: 1 1 400px;        /* wächst, schrumpft, Startbreite 400px */
  max-width: 500px;
  margin: auto;
  background-color: white;
  padding: 30px;
  flex: 1;
  border-right: 2px solid #ccc; /* Farbe und Dicke kannst du anpassen */
}
h2 {
  margin-top: 0;
  color: #444;
}
.contact-item {
  margin: 15px 0;
  font-size: 1.1em;
}
.label {
  font-weight: bold;
  display: inline-block;
  width: 120px;
}
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
  color: #777;
}
#technischAn{
  margin-top: 5em;
}


/*Startseite*/

/*Auflistung vom Content
.card-body {
  padding: 20px;
  background: #f9f9f9;       
  border-radius: 12px;
  border: 1px solid #ddd;
  flex: 1 1 300px;          
    max-width: 500px;          
    background-color: #e0e0e0;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}*/

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;                 /* Abstand zwischen den Punkten */
}

.features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.features li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(54, 53, 53);      
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

.feature-text {
  font-size: 1rem;
  color: #333;
}
/**/

/*Kontaktformular*/

.contact-form {
  flex: 1 1 400px;
  max-width: 500px;
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-sizing: border-box;
  
}
input, textarea {
  width: 100%;
  padding: 10px;
  margin-top: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
   width: 20rem;
}
#message{
  height: 10rem;
}
button {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
button:hover {
  background-color: grey;
}
/* 📱 Responsive: Untereinander bei kleinen Bildschirmen */
@media (max-width: 700px) {
  .kontakt-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
    .container {
    border-right: none;
  }

  .container,
  .kontakt-form {
    max-width: none; /* volle Breite nutzen */
  }
}


/* ---------- Responsive Design ---------- */

/* Smartphones */
@media (max-width: 600px) {


  .title {
    font-size: 1.2em;
    text-align: center;
  }

  .nav-container {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 10px;
  }
  .label {
    width: auto; /* Labels nicht fix, damit Text umbrechen kann */
    display: block;
    margin-bottom: 5px;
  }
}
@media (max-width: 500px) {
  .impressum {
    font-size: 0.8em; /* Schrift etwas kleiner */
    gap: 20px;        /* weniger Abstand */
    padding: 0.5em;
  }
}


/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  .title {
    font-size: 1.3em;
  }

  .container {
    margin: 8em 2em;
  }
}

/* Ausstattungsseite */
.hintergrundAusstattung {
  color: black;    
}
.ausstattung{
  display: flex;
  justify-content: center;
  margin:5%;
}
.ausstattung ul {
  list-style: none;     
}
.ausstattung li {
  font-size: 1.1em;
  display: flex;
  align-items: center;
}
.ausstattung i {
  margin-right: 10px;
  font-size: 1.5em;
}
#ausst_icon{
  color: #474343;
}
/**/

/*Bilder Seite*/

.bilderseite {
  display: flex;
  justify-content: center;
  margin: 1.5% 10%;
  background: linear-gradient(135deg, #f0f4f8, #d9e4ec); 
  padding: 2em;
  border-radius: 16px;
}

.bild{
  max-height: 5%;
  margin-top: 2em;
  justify-content: center;
}
.video {
  display: flex;              
  justify-content: center;    
}
.video video {
  max-width: 100%;
  height: auto;
  border-radius: 12px;          /* abgerundete Ecken */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* sanfter Schatten */
}
.video {
  position: relative;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .bilderseite {
    margin: 5%;
    padding: 1em;
  }
  .video video {
    border-radius: 8px;
  }
}