body {
h1 { font-family: 'Josefin Sans', sans-serif; font-size: 25px;color: black;}
h2 { font-family: 'Josefin Sans', sans-serif;  font-size: 25px; color: green;}
h3 { font-family:'Josefin Sans', sans-serif;  font-size: 25px;color: black;}
h4 { font-family: 'Josefin Sans', sans-serif; font-size: 12px; color: black;}

p {font-family: 'Josefin Sans', sans-serif;   font-size: 14px; color: black;}
span {font-family: 'Josefin Sans', sans-serif;   font-size: 14px; color: black;}

a {  font-family: 'Josefin Sans', sans-serif;  color: black; font-size: 16px; text-decoration: none;}
a:hover { font-family: 'Josefin Sans', sans-serif;  color: white;}
a:focus {font-family: 'Josefin Sans', sans-serif;  color: black;}
.Sign { font-family: "Dancing Script", cursive; font-style: normal; font-size: 39px;}
}

/*----------------------------------------------------------LOADER-------------------------------------------------------*/
#Start_Loader {
    text-align: center;         /* Zentriert das Kind-Element (Logo) horizontal */
    height: 100vh;              /* Setzen Sie die Höhe des Container-Elements auf die volle Viewport-Höhe */
    display: flex;
    justify-content: center;
    align-items: center;
}
#Start_Loader img {
    height: 110px;
    animation: pulse 2s ease-in-out 2; /* Pulsieranimation */
}
@keyframes pulse {
    0% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1); }
}

/*----------------------------------------------------------HEADER-------------------------------------------------------*/
header {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-image: url(../05_media/02_Picture/green_back_01.png);
    background-size:cover;
    position: sticky;
    top:0px;
    z-index: 1000;
}
#Logo img {
    margin-top: 10px;
}
#Title_01 { margin-top: 5px; }
#Title_02 {margin-top: -20px;}

header h1 {margin-bottom: 20px;}

#Linie_01 { border-top: solid black 2px;width: 80%; max-width: 1600px; height: 10px; margin-top: 0px;}

#Menu { text-align: center; width: 100%; z-index: 0;}

#Button_Mobile { background-color: transparent; border: none;  height: 30px;padding: 2px; margin-top: -10px;}
#Button_Mobile img { height: 30px;}

#Menu_Mobile {
    overflow: hidden; /* Verhindert das Anzeigen von Inhalten, die außerhalb des sichtbaren Bereichs liegen */
    max-height: 0; /* Menü standardmäßig ausgeblendet */
    transition: max-height 0.5s ease; /* Übergangseffekt für die Höhe des Menüs */
    background-color: white;
}
#Menu_Mobile nav { padding: 0;text-align: center;}
#Menu_Mobile li {list-style: none; border-bottom: solid black 1px; margin: 0px; padding: 2px;}
#Menu_Mobile li a:hover { color: green;}

#Menu_Desktop nav {display: flex;  flex-direction: row;justify-content: center;   }
#Menu_Desktop li { list-style: none;  padding: 5px; padding-left: 10px; padding-right: 10px;}

/*----------------------------------------------------------MAIN-------------------------------------------------------*/

main {width:90%; max-width: 1600px; margin: 0 auto;}
main p {text-align: justify;}


.section {opacity: 0; transform: translateY(20px); transition: opacity 1s ease-out, transform 1s ease-out;}     /*Für Einblendung der Abschnitt */
.section.visible {opacity: 1; transform: translateY(0);
}

#Meine_Mission {display: grid; grid-template-columns: 1fr 1fr; gap: 150px; padding: 50px; padding-top: 100px;}
#Meine_Mission_Video {display: flex; justify-content: center;align-items: center; }
.video-container {position:relative; width: 100%; padding-bottom: 56.25%; height: 0;}
.video-container video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#Über_Mich {display: grid; grid-template-columns: 1fr 1fr; gap: 150px; padding: 50px; padding-top: 75px;}
#Über_Mich_Bild {display: flex;justify-content: center;align-items: center;}
#Über_Mich_Bild img {max-width: 400px;}

#Mein_Angebot_Title {display: grid; grid-template-columns: 1.5fr 0.5fr; gap: 150px; padding-top: 100px; padding-bottom: 50px;}
#Mein_Angebot_Inhalt {display: grid; grid-template-columns: 1fr 1fr ; gap: 250px; }
.Mein_Angebot_Element h3  { margin-top: 30px;}

#Mein_Angebot_Preise_Desktop {display: grid; grid-template-columns: 1fr 1fr; gap: 250px;}
.Mein_Angebot_Element_Preis {border: solid black 1px; height: 60px; display: flex; justify-content: center; align-items: center;}
.Mein_Angebot_Preis_Mobil {display: none; border: solid black 1px; height: 60px;  justify-content: center; align-items: center;}

#Ernährungswissen_Title {display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 150px; padding: 50px; padding-top: 100px;}
#Ernährungswissen_Slider {display: grid;grid-template-columns: auto 1fr auto; align-items: center; gap: 50px;}
#Ernährungswissen_Inhalt span {text-align: center;}
.Beitrag {display: grid; grid-template-columns: 1fr 1fr; gap:50px;transition: 0.5s ease-in-out;} 
.Beitrag_Bild {display:flex; justify-content: center; align-items: center;}

.Pfeil { background: transparent; /* Hintergrund transparent machen */ border: none; /* Rahmen entfernen */  padding: 0; /* Innenabstand entfernen */  cursor: pointer; /* Zeigercursor anzeigen */}
.Pfeil:hover,
.Pfeil:active,
.Pfeil:focus { background: transparent;  outline: none; /* Eventuell hinzufügen, um den Fokus-Rahmen zu entfernen */ }

/* Optional: Größe des Bildes anpassen */
.Pfeil img {width: 50px; /* 100% der Breite des umgebenden Elements */ }

#Beitrag_Counter {  grid-column: span 3; text-align: center;margin-top: 10px;font-size: 18px;}

#Kontakt_Title {display: grid; grid-template-columns: 1fr 1fr; gap: 150px; padding: 50px; padding-top: 100px;}
#Kontakt_Inhalt {display: grid; grid-template-columns: 1fr 1fr; gap: 150px; padding: 50px; padding-top: 25px;}
#Kontakt_Adresse {display: flex;justify-content: center;}

#Impressum {display: grid;grid-template-columns: 1fr; padding: 50px; padding-top: 100px;}

/*----------------------------------------------------------FOOTER-------------------------------------------------------*/
footer {background-image: url(../05_media/02_Picture/green_back_01.png); background-size:cover;margin-top: 100px;}

#Footer_Content {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Drei Spalten: zwei flexible und eine feste in der Mitte */
    align-items: center;
    padding: 20px;
    width: 80%;
    max-width: 1600px;
    margin: 0 auto;
}

#Footer_Text {  text-align: left;}

#Footer_Logo {display: flex; justify-content: center;align-items: center;}
#Footer_Logo a {width: auto;}

#Footer_Impressum {text-align: right;}


/*----------------------------------------------------------MEDIA-QUERIES-------------------------------------------------------*/

                         /*--------------------------Desktop-Big----------------------------------*/
@media screen and (min-width: 1901px) {
    body {
        h1 {font-family: 'Josefin Sans', sans-serif; font-size: 25px;color: black;}
        h2 {font-family: 'Josefin Sans', sans-serif;  font-size: 27px; color: green;}
        h3 {font-family:'Josefin Sans', sans-serif;  font-size: 25px;color: black; font-weight: 500;}
        h4 {font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: black;}
        p {font-family: 'Josefin Sans', sans-serif;   font-size: 18px; color: black;}
        .p2 {font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: black;}
        span {font-family: 'Josefin Sans', sans-serif;   font-size: 18px; color: black;}
        a {  font-family: 'Josefin Sans', sans-serif;  color: black; font-size: 18px; text-decoration: none;}
        a:hover { font-family: 'Josefin Sans', sans-serif;  color: white;}
        a:focus {font-family: 'Josefin Sans', sans-serif;  color: black;}
        }

        #Logo img {height: 100px;}
        #Button_Mobile img {30px;}
        #Meine_Mission_Video iframe {}
        #Über_Mich_Bild img {max-width: 400px;}
        .Beitrag_Bild img {height:200px;}
        .Pfeil img {width: 50px;}
        .footer_social_button img {height: 40px;}
        #Footer_Logo img {height: 80px;}

         main {width: 80%; max-width: 1600px;}
         #Button_Mobile { display: none;}
         #Menu_Mobile { display: none;}
        }

                         /*--------------------------Desktop-Small----------------------------------*/
@media screen and (min-width: 1201px)and (max-width: 1900px) {
    body {
        h1 { font-family: 'Josefin Sans', sans-serif; font-size: 23px;color: black;}
        h2 { font-family: 'Josefin Sans', sans-serif;  font-size: 25px; color: green;}
        h3 { font-family:'Josefin Sans', sans-serif;  font-size: 23px;color: black; font-weight: 500;}
        h4 { font-family: 'Josefin Sans', sans-serif; font-size: 18px; color: black;}
        p {font-family: 'Josefin Sans', sans-serif;   font-size: 16px; color: black;}
        .p2 {font-family: 'Josefin Sans', sans-serif; font-size: 18px; color: black;}
        span {font-family: 'Josefin Sans', sans-serif;   font-size: 16px; color: black;}
        a {  font-family: 'Josefin Sans', sans-serif;  color: black; font-size: 16px; text-decoration: none;}
        a:hover { font-family: 'Josefin Sans', sans-serif;  color: white;}
        a:focus {font-family: 'Josefin Sans', sans-serif;  color: black;}
        }

        #Logo img {height: 75px;}
        #Button_Mobile {}
        #Meine_Mission_Video iframe {}
        #Über_Mich_Bild img {max-width: 350px;}
        .Beitrag_Bild img {height:150px;}
        .Pfeil img {width: 40px;}
        .footer_social_button img {height: 30px;}
        #Footer_Logo img {height: 60px;}

        main {width: 90%; max-width: 1600px;}
        #Button_Mobile { display: none;}
        #Menu_Mobile { display: none; }
    }

                        /*--------------------------Tablet----------------------------------*/

@media screen and (min-width: 501px) and (max-width: 1200px) {
    body {
        h1 {font-family: 'Josefin Sans', sans-serif; font-size: 21px;color: black;}
        h2 {font-family: 'Josefin Sans', sans-serif;  font-size: 23px; color: green;}
        h3 {font-family:'Josefin Sans', sans-serif;  font-size: 21px;color: black; font-weight: 500;}
        h4 {font-family: 'Josefin Sans', sans-serif; font-size: 16px; color: black;}
        p {font-family: 'Josefin Sans', sans-serif;   font-size: 14px; color: black;}
        span {font-family: 'Josefin Sans', sans-serif;   font-size: 16px; color: black;}
        a {  font-family: 'Josefin Sans', sans-serif;  color: black; font-size: 14px; text-decoration: none;}
        a:hover { font-family: 'Josefin Sans', sans-serif;  color: white;}
        a:focus {font-family: 'Josefin Sans', sans-serif;  color: black;}
        }

        #Logo img {height: 70px;}
        #Button_Mobile {}
        #Meine_Mission_Video iframe {}
        #Über_Mich_Bild img {max-width: 300px;}
        .Beitrag_Bild img {width:125px;}
        .Pfeil img {width: 30px;}
        .footer_social_button img {height: 25px;}
        #Footer_Logo img {height: 60px;}


    #Menu_Desktop {display: none;}
    #Linie_01 {width: 100%;}

    #Meine_Mission {grid-template-columns: 1fr; margin-top: 0px;}
   
    #Über_Mich {grid-template-columns: 1fr;}
    #Über_Mich_Bild {order: 2;}
    #Über_Mich_Text {order: 1;}

    #Mein_Angebot_Title {grid-template-columns: 1fr; padding: 50px; padding-bottom: 0px;}
    #Mein_Angebot_Title_Leer {display: none;}
    #Mein_Angebot_Inhalt {grid-template-columns: 1fr; padding: 50px; padding-top: 0px;}
    .Mein_Angebot_Element h3 {margin-top: 30px;}
    #Mein_Angebot_Preise_Desktop {display: none;}
    .Mein_Angebot_Preis_Mobil {display: flex;}

    #Ernährungswissen_Title {grid-template-columns: 1fr;}
    #Ernährungswissen_Title_Leer {display: none;}
    .Beitrag {grid-template-columns: 1fr;}
    
    #Kontakt_Title {grid-template-columns: 1fr;}
    #Kontakt_Title_Leer {display: none;}
    #Kontakt_Inhalt {grid-template-columns: 1fr; padding-top: 0px;}
    #Kontakt_Adresse {justify-content: left;}
    
    #Footer_Content { display: flex; flex-direction: column; align-items: center; text-align: center; }
    #Footer_Text, #Footer_Logo { width: 100%; padding-bottom: 10px; /* Adds spacing between the elements */}
    #Footer_Impressum {width: 100%;}
    #Footer_Text { text-align: center; }
    #Footer_Impressum { text-align: center;}
}
                        /*--------------------------Mobile----------------------------------*/

@media screen and (min-width: 0px) and (max-width: 500px) {
    body {
        h1 {font-family: 'Josefin Sans', sans-serif; font-size: 19px;color: black;}
        h2 {font-family: 'Josefin Sans', sans-serif;  font-size: 21px; color: green;}
        h3 {font-family:'Josefin Sans', sans-serif;  font-size: 19px;color: black; font-weight: 500;}
        h4 {font-family: 'Josefin Sans', sans-serif; font-size: 15px; color: black;}
        p {font-family: 'Josefin Sans', sans-serif;   font-size: 15px; color: black;}
        span {font-family: 'Josefin Sans', sans-serif;   font-size: 15px; color: black;}
        a {  font-family: 'Josefin Sans', sans-serif;  color: black; font-size: 14px; text-decoration: none;}
        a:hover { font-family: 'Josefin Sans', sans-serif;  color: white;}
        a:focus {font-family: 'Josefin Sans', sans-serif;  color: black;}
        }

        #Logo img {height: 60px;}
        #Button_Mobile {}
        #Meine_Mission_Video iframe {}
        #Über_Mich_Bild {max-width: 250px;}
        .Beitrag_Bild img {height:100px;}
        .Pfeil img {width: 25px;}
        .footer_social_button img {height: 20px;}
        #Footer_Logo img {height: 60px;}

    #Menu_Desktop {display: none;}
    #Linie_01 {width: 100%;}

    #Meine_Mission {grid-template-columns: 1fr; margin-top: 0px;}

    #Über_Mich {grid-template-columns: 1fr;}
    #Über_Mich_Bild {order: 2}
    #Über_Mich_Text {order: 1;}

    #Mein_Angebot_Title {grid-template-columns: 1fr; padding: 50px; padding-bottom: 0px;}
    #Mein_Angebot_Title_Leer {display: none;}
    #Mein_Angebot_Inhalt {grid-template-columns: 1fr; padding: 50px; padding-top: 0px;}
    .Mein_Angebot_Element h3 {margin-top: 30px;}
    #Mein_Angebot_Preise_Desktop {display: none;}
    .Mein_Angebot_Preis_Mobil {display: flex;}

    #Ernährungswissen_Title {grid-template-columns: 1fr;}
    #Ernährungswissen_Title_Leer {display: none;}
    .Beitrag {grid-template-columns: 1fr;}
    
    #Kontakt_Title {grid-template-columns: 1fr;}
    #Kontakt_Title_Leer {display: none;}
   
  
    
    #Footer_Content { display: flex; flex-direction: column; align-items: center; text-align: center; }
    #Footer_Text, #Footer_Logo { width: 100%; padding-bottom: 10px; /* Adds spacing between the elements */}
    #Footer_Impressum {width: 100%;}
    #Footer_Text { text-align: center; }
    #Footer_Impressum { text-align: center;}
}