/* Allgemeine Stile */
html, body {
    background: white;
    font-size: 16;
    color: white;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    weight:100%;
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    padding: 0px;
    margin: 0px;
    background: black url("../Bilder/Hände.jpg") no-repeat center/cover;
    background-size: cover;
    /*background-position: left;  !* Das Bild beginnt am linken Rand *!*/
    /*!*background-repeat: no-repeat;*!*/
    /*!*border-bottom-left-radius:50px;*!*/
    /*border-bottom-right-radius:50px;*/
    color: rgb(0, 0, 139);
    text-align: center;
    justify-content: center;
    width: 100%
    }

header a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}


/* Hauptcontainer */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 20px;
}

/* Sektionen */
section {
    flex: 1 1 100%;
    margin: 10px;
    padding: 20px;
    background: white;
    color: grey;
    font-size: 15px;
    border-radius: 10px;
}

/* Medienanpassung für kleine Bildschirme */
@media (max-width: 768px) {
    html, body {
        padding-left: 0px;
    }

    .container {
        flex-direction: column;
        align-items: center;
    }

    section {
        margin: 10px 0;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    section {
        flex: 1 1 100%;
        padding: 15px;
    }
}

/* Bilder */
.profilbild, .image-container {
    width: 250px;
    height: 300px;
    border-radius: 10px;
    object-fit: cover;
}

/* Container für Bild und Text */
.Übermich {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    padding: 20px;
    flex-wrap: wrap;
}

.Übermich h6 {
    width: 90%;
    font-size: 14px;
}

/* Optimierung für kleine Geräte */
@media screen and (max-width: 375px) {
    .Übermich {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .profilbild, .image-container {
        width: 80%;
        max-width: 250px;
        height: auto;
    }
}


/* Video */
.video-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.video-container iframe {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

/* Links */
a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    background: black;
    color: white;
    text-align: center;
    padding: 20px;
    margin: 0;
}

/* Textformatierungen */
.Telefonnumer, .E-mail, .Gutscheine {
    color: blue;
    text-decoration: underline;
}

.Übermich , .Ort, .kontakt, .Leistungen, .section-unterteil-section {
    color: black;
    font-size: 16px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 2;
    margin-bottom: 20px;
    margin-top: 0;
    text-align: left;  /* Text ist linksbündig, statt zentriert */
    padding-left: 10px;  /* Etwas Abstand nach links */
    margin-top: 10px;  /* Abstand von oben */

}

.Übermich , .Ort, .kontakt {
    font-size: 20px;
    font-weight: normal;

}
 .kontakt {
    font-size: 13px;
    font-weight: normal;

}


.navlinks{
    list-style: none;    /* Entfernt die Aufzählungszeichen */
    padding: 0;     /* Entfernt die Einrückung */
    margin: 0; /* Entfernt den Standard-Abstand */
    display: flex;
    gap:1.5em;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1em;
}

nav {

  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.fett-text-ort, .fett-text, .Behandlungsform, .Leistung, .bieten wir, .zusätzlich, .wellness, .moi {
    font-weight: bold;
    font-size: 25px;
}


.fett-text-ort {
    color: blue;
}

/* Text in schwarz für spezifische Klassen */
.welcome-text, .practice-text, .name-text {
    color: black; /* Textfarbe schwarz */
}
/* Optional: Weitere Gestaltung */
.text-section {
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
    margin-top: 20px;
}

.Wichtig {
    font-weight: bold;
    font-size: 23px;
    color: red;
}

.fuhlendorf {
  display: flex; /* Ermöglicht Anordnung von Text und Bildern nebeneinander */
  align-items: center; /* Zentriert die Elemente vertikal */
  gap: 20px; /* Abstand zwischen Text und Bildern */
  color: black; /* Textfarbe */
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 2;
  text-align: left; /* Links ausgerichtet */
  padding: 50px; /* Innenabstand */
  flex-wrap: wrap; /* Ermöglicht Umbruch bei kleinerem Bildschirm */
}

.fuhlendorf-text {
  flex: 1; /* Text bekommt so viel Platz wie nötig */
}

.fuhlendorf-bilder {
  display: flex;
  flex-wrap: wrap; /* Bilder werden bei Bedarf umgebrochen */
  gap: 10px; /* Abstand zwischen den Bildern */
}

.fuhlendorf-bilder img {
  width: 150px; /* Breite der Bilder anpassen */
  height: auto; /* Höhe automatisch anpassen */
  border-radius: 10px; /* Abgerundete Ecken (optional) */
  transition: all 0.3s ease; /* Sanfte Übergänge für das Anpassen */
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
  .fuhlendorf {
    flex-direction: column; /* Elemente werden untereinander statt nebeneinander */
    padding: 30px; /* Weniger Innenabstand auf kleineren Bildschirmen */
  }

  .fuhlendorf-bilder {
    justify-content: center; /* Bilder zentrieren */
  }

  .fuhlendorf-bilder img {
    width: 120px; /* Bilder werden kleiner auf mobilen Geräten */
  }
}

.fuhlendorf-text {
    margin-bottom: 20px; /* Abstand zwischen Text und Bildern */
  }
}


/* Anpassung für sehr kleine Bildschirme (z.B. Handys im Hochformat) */
@media (max-width: 480px) {
  .fuhlendorf-bilder img {
    width: 100px; /* Bilder weiter verkleinern */
  }

  .fuhlendorf {
    padding: 20px; /* Noch weniger Innenabstand auf sehr kleinen Bildschirmen */
  }
}

.Fuhlendorf1, .Produkte{
 font-size: 25px;
 color: black;
}

.Fuhlendorf1, .Produkte{
 font-size: 25px;
 color: black;
}

/* Navigation */
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: white;
     padding: 10px 20px;
     position: relative;
 }

 .nav-links {
     list-style: none;
     display: none;
     flex-direction: column;
     background-color: white;
     width: 100%;
     position: absolute;
     top: 50px;
     left: 0;
     padding: 10px;
     text-align: center;
 }

 .nav-links li {
     padding: 10px 0;
 }

 .nav-links a {
     color: black;
     text-decoration: none;
     font-size: 18px;
 }

 /* Hamburger-Icon */
 .menu-icon {
     display: block;
     font-size: 30px;
     color: black;
     cursor: pointer;
 }

 /* Responsive Menü */
 @media (max-width: 768px) {
     .nav-links {
         display: none;
     }
     .nav-links.show {
             display: flex;
         }
     }
     

     .nav-links {
         list-style: none;
         display: none;
         flex-direction: column;
         background-color: white;
         width: 100%;
         position: absolute;
         top: 50px;
         left: 0;
         padding: 10px;
         text-align: center;
     }

     .nav-links.show {
         display: flex;
     }
 }