/*========Google Fonts mal kucken=========*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

/*===================VARIABLES CSS==============*/
:root{
    --header-height: 3rem;

    /*========Colors =========*/
    --first-color: #d9bc74;
    --dark-color: #54575b;
    --dark-color-alt: grey;
    --white-color: white;

    /*======== Fuente y tipografia =========*/
    --body-font: sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;

    /*======== z index =========*/
    --z-fixed: 100;
}

@media screen and (min-width: 1180px){
    :root{
        --normal-font-size: 1rem;
        --small-font-size: .875rem;    
    }    
}

/*============= BASE =============*/
*,::before,::after{
    box-sizing: border-box;
}
body{
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: 500;
}
ul{               /*ich frage mich was das bringt überprüffen bitte*/
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
}

.bd-grid{
   /* max-width: 1024px;  keine ahnung wieso es da soll aber wen es weg ist wird der bildschirm besser vieleicht beim laptop aufheben*/
    display: grid;
    grid-template-columns: 100%;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/*hier fängt mein zeug an*/
/*
p{
font-size: var(--normal-font-size);
}
*/
/*============= HEADER ===========*/
.header{
    width: 100%;
    height: var(--header-height);
    position:absolute; /*wen du das auf fixed machst wird die ganze menu leiste oben hengen bleiben*/
    top: 0;
    left: 0;
    padding: 0 1.5rem;
    background-color: var(--dark-color);
    z-index: var(--z-fixed);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo{
    color: var(--white-color);
}

.header__toggle{
    font-size: 1.5rem;
    color: var(--white-color);
    cursor: pointer;
}
/*===========NAV==============*/
@media screen and (max-width: 1180px){
    .nav{
        position: fixed;
        top: 0;
        left: -100%;
        background-color: var(--dark-color);
        color: var(--white-color);
        width: 100%;
        height: 100vh;
        padding: 1.5rem 0;
        transition: .5s;
    }
}

.nav__content{
    height: 100%;
    grid-template-rows:max-content 1fr max-content; /*ich frag mich was das ist*/
    row-gap: 2rem;
}

.nav__close{
    position: absolute;
    right: 1.5rem;
    font-size: 1.3rem;
    padding: .25rem;
    background-color: var(--dark-color-alt);
    border-radius: 50%;
    cursor: pointer;
}

.nav__img{
    display: flex;
    justify-content: center;
    padding-top: .25rem; /*um das logo quadratisch zu behalten mustdu die nächsten drei auskomentieren*/
    margin-bottom: .8rem;
    width: 56px;
    height: 56px; 
    background-color: var(--first-color);
    border-radius: 50%;  /*2*/
    overflow: hidden;
}

.nav__img img{
   width: 46px; /*3*/
}

.nav__name{
   display: block;
   background-color: var(--white-color); 
   color: var(--dark-color); 
   text-align: center; 
   padding: 19px; 
   padding-right: 19px; 
   padding-bottom: 7px; 
   padding-top: 7px; 
   margin-top: 2px; 
   border-style: inherit; 
   border-radius: 5px;
}

.nav__profesion{
    font-size: var(--small-font-size);
}


nav__menu{
    align-self: center;
}


.nav__item{
    margin: 2.5rem 0;
}

.nav__link{
    color: var(--white-color);
}

.nav__social{
    padding-top: .5rem;
}

.nav__social-icon{
    font-size: 1.2rem;
    color: var(--white-color);
    margin-right: 1rem;
}

.nav__social-icon:hover{
    color: var(--first-color);
}

/*Aparecer menu*/
.show{
    left: 0;
}

/*Active menu*/
.active {
    color: var(--first-color);
}

/*=========================nav2==========================*/
    
.nav2__div1{
    z-index: 1; 
    background-color: white; 
    position: relative;
}

.nav2__div2{
    height: 70px; 
    width: 265px; 
    margin: 0 auto;
}

.nav2__div3{
    padding: 10px 0px 10px 0px;
}


#leiste__striche{
    /*striche*/
    border-top-style: solid; 
    border-bottom-style: solid; 
    border-color: white;
}

/*============= content===========*/

.header-section {
    margin-top: 0px;
    /* Setzt die Höhe auf einen sichtbaren Wert, z.B. 400 Pixel */
    height: 35rem;    
    /* 1. Pfad zu Ihrem Bild */
    background-image: url('/images/kosmetik-kesicht2.webp'); 
    
    background-position-x: left;
    background-position-y: center;
    background-size: cover; /* **WICHTIG:** Zieht das Bild über die gesamte Breite/Höhe */
    background-repeat: no-repeat;
    position: relative; 
}

.text-container {
    width: 80%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; 
    padding-top: 15rem;
    padding-left: 40px;
    box-sizing: border-box; 
}

.text-container h1 {    
    margin: 0; /* Entfernt Standard-Margin des h1 */
}

.schriftHome {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
    font-size: 2.5rem;    
    color: var(--dark-color)
    
}

/*============= content2===========*/


.uberschriftH2{
    text-align: center;
    font-family: "Cormorant Garamond", serif;

    font-size: 2rem;
    font-weight: 600;
}

.H2Lang{
   font-size: 2rem; 
}

.zweterTeil{
    margin-left: 1.5rem; 
    margin-right: 1.5rem;
}
  
.text-box{
  border: solid, 1px;
  margin-top: -3.75rem;
  z-index: 10;
  position: relative;
} 

.text-box-organisation{
  border: solid, 1px;
  z-index: 10;
  position: relative;
} 

.btnZweiterTeil{
    width: 100%;
    max-width: 12.5rem;
    height: 2.5rem;
    border: 1px solid;
    margin: 0;
    padding: .46875rem 1.875rem;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*war getrent bei der insperaitions seite*/
    border-color: var(--dark-color);
    color: var(--dark-color);
    /*war getrent bei der insperaitions seite*/
   /* margin-top: 1.875rem;*/

}
.text-boxH2{
    margin-top: -51%;
    margin-bottom: 53%;
  }
/*================Content 3===========*/

.img-Content3 {
    margin-top: 0px;
    /* Setzt die Höhe auf einen sichtbaren Wert, z.B. 400 Pixel */
    height: 25rem;    
    /* 1. Pfad zu Ihrem Bild */
    background-image: url('/images/Entspannung-und-Straffung-durch-Gesichtsmassage.webp'); 
    
    background-position-x: center;
    background-position-y: center;
    background-size: cover; /* **WICHTIG:** Zieht das Bild über die gesamte Breite/Höhe */
    background-repeat: no-repeat;
   /* position: relative;*/  
}

.container {
  /* 1. Wichtig: Definiert den Container als Flex-Container */
  display: flex; 
  
  /* Stellt sicher, dass der Container den gesamten verfügbaren Platz einnimmt (z.B. den Bildschirm) */
  height: 35rem; 
  width: 100%;
  
  /* 2. Horizontale Zentrierung */
  justify-content: center;
  
  /* 3. Vertikale Zentrierung */
  align-items: center; 

  /*===meinz===*/ 
  margin-top: 30px; }

.centered-div {
  /* Setzt eine feste Größe, damit man das zentrierte Element sieht */
  max-width: 30rem; 
  color: white;
  padding: 0px;
  text-align: center;
}

.logoKlein  {
  width: 60px;
}

/*===================Content 4===================*/
.container4 {
  display: flex; /* Macht den Container zum Flex-Container */
  justify-content: center; /* Zentriert das Kind-Element horizontal */
  align-items: baseline; /* Zentriert das Kind-Element vertikal */
  width: 100%;
  
}

.centered-div4 {
  max-width: 580px;
  margin: 1rem 3.5rem 0.5rem 3.5rem;
}


/* ============== Content5 ====================== */
.gallery-container5 {
  display: flex; /* Ordnet die Kind-Elemente (image-item) in einer Reihe an */
  justify-content: space-between; /* Verteilt den Abstand gleichmäßig zwischen den Bildern (optional) */
  gap: 20px; /* Fügt einen Abstand zwischen den Elementen hinzu */
  padding: 20px;
  max-width: 1000px; /* Optional: Beschränkt die maximale Breite der Galerie */
  margin: 0 auto; /* Zentriert den gesamten Container horizontal */
}

/* 2. Die einzelnen Bild-Elemente */
.image-item5 {
  flex: 1 1 30%; /* Flex Shorthand:
                    - flex-grow: 1 (Elemente wachsen, um Platz zu füllen)
                    - flex-shrink: 1 (Elemente schrumpfen, falls nötig)
                    - flex-basis: 30% (Ausgangsbreite, wird durch gap überschrieben) */ 
}

/* ============== Content5 ====================== */
.marginBox{
    padding-top: 3rem; 
    padding-left: 0rem; 
    padding-right: 0rem;
}

/* ============== Content7 ====================== */
.container7{
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    background-size: 100% 100%;
    height: 67vh;
    margin: 0; 
    padding: 10%;
}

/* ============== Content8 ====================== */
 .text-boxAcht{
 
 
  z-index: 1000;
  position: relative;
} 

/* ============== Content9 ====================== */
  
.text-box9 {
    margin-top: -3.75rem;
    z-index: 1000;
    position: relative;
}

.header-section9 {
    margin-top: 0px;
    height: 20rem;
    background-image: url(/images/kosmetik-Steine4.webp);
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.imageBox9 {
    margin-left: 10%;
    margin-right: 10%;
}

    /*================ Haut-Behandlung==================*/
    .links{
        width: 100%;
    }


/*==============================Footer==========================*/
.site-footer {
    background-color: var(--dark-color); /* Dunkler Hintergrund */
    color: #fff;
    padding: 40px 20px;
    /* font-family: Arial, sans-serif;*/
    margin-top: 55rem;
}

.footer-container {
   /* max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Verteilt die Spalten */
    flex-wrap: wrap; /* Wichtig für Mobilansicht */
}

.footer-section {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
}

.footer-logo {
    max-width: 150px;
   /* margin-bottom: 15px;*/
}

.footer-middle ul {
    list-style: none;
    padding: 0;
}

.footer-middle ul li {
    margin-bottom: 10px;
}

.footer-middle ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-middle ul li a:hover {
    color: #fff; /* Highlight bei Mouseover */
}

address {
    font-style: normal;
    line-height: 1.6;
    color: #fff;
}
 

.social-links {
    display: flex;
    gap: 15px; /* Abstand zwischen den Icons */
}

.icon {
    width: 28px;
    height: 28px;
    fill: #fff; /* Farbe der Icons */
    transition: fill 0.3s ease, transform 0.3s ease;
}

.icon:hover {
    fill: #fff; /* Farbe beim Drüberfahren */
    transform: translateY(-3px); /* Kleiner Hüpf-Effekt */
}

/* Optionale Farben für die einzelnen Kanäle beim Hover */
.social-links a[aria-label="YouTube"]:hover .icon { fill: #FF0000; }
.social-links a[aria-label="Facebook"]:hover .icon { fill: #1877F2; }
.social-links a[aria-label="Instagram"]:hover .icon { fill: #E4405F; }

/*zwischen 745 und 1180 muss ein abstand eingebaut werden
970px - 1180px 70rem : 970px - 760px 65rem
*/

.rem3{
    font-size: 1.8rem;
    font-family: "Cormorant Garamond", serif;
   }

#imageBox-haut-check{
    margin-left: 9%;
}
/*============= media Queris===========*/
@media screen and (min-width: 1180px){
    #imageBox-haut-check{
    margin-left: 0%;
}


    body{
        margin: calc(var(--header-height) + 0rem) 0 0 0;       
    }

    .header{
    height: calc(var(--header-height) + 8.5rem);
    }

    /*kann sein das ich das logo rausnehmen muss*/
    .header__logo, .header__toggle{
        display: none;
    }

    .nav{
        width: 100%;
    }

    .nav__content{
        grid-template-columns: repeat(3, max-content);
        grid-template-rows: 1fr;
        column-gap: 1rem;
        justify-content: space-between;
    }

    .nav__close, .nav__profesion{
        display: none;
    }

    .nav__img{
        width: 32px;
        height: 32px;
        margin-right: .5rem;
        margin-bottom: 0;
        align-items: center;
    }

    .nav__img img{
        width: 26px;
    }

    .nav__list{
        display: flex;
        /*insperiert*/
        margin-top: 0;
        margin-bottom: 0;   
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }

    .nav__item{
        margin: 0 2.3rem;
    }

    .nav__link{
        text-decoration: none; 
        box-shadow: 0 2px 0 0 transparent;
    }

    .nav__link:hover{
        transition: box-shadow 0.6s ease-out;
        box-shadow: 0 2px 0 0 var(--first-color);
    }

    .active{
        color: var(--white-color);
        box-shadow: 0 2px 0 0 var(--first-color);
    }

    /*=========================nav2==========================*/
    .nav__menu{
        margin-top: 150px; 
        font-size: 1.3rem;
    }

    .nav2__div1{
        z-index: 100; 
    }

    .nav2__div1{
    background-color: white; 
    position: relative;
    }

    .nav2__div2{
        height: 100px; 
      /*  width: 365px; */
        margin: 0 auto;
    }

    .nav2__div3{
        padding: 20px 0px 10px 0px;
    }
    #leiste__striche{
     /*striche*/
        border-top-style: none; 
        border-bottom-style: none; 

    }
    /* ------------------------------------
    Content
   ------------------------------------ */
   .rem3{
    font-size: 3rem;
    font-family: "Cormorant Garamond", serif;
   }
   p{
    font-size: 18px;
   }
    .header-section {       
        background-image: url('/images/kosmetik-kesicht10.webp'); 
       /* z-index: 1000;   */
    }

    .text-container {
        width: 80%;
        padding-top: 4rem;
        padding-left: 150px; 
    }
    
    .schriftHome {    
        font-size: 4.5rem;     
    }

    /* ------------------------------------
    Content
   ------------------------------------ */
    .zweterTeil{
        margin-left: 10%; 
        margin-right: 10%;
    } 
    
    .uberschriftH2 {
        font-size: 3.8rem; 
        margin-bottom: 0.5em;   
    }
    .H2Lang {
       font-size: 3rem;  
    }


    p {
        font-size: 18px;
    }
    /* ------------------------------------
    Content2
   ------------------------------------ */
    .text-box{
    width: 50%;
    float: right;
    margin-top: -30%;
    }

    .text-box-organisation{
    width: 50%;
    float: right;
    margin-top: -30%;
    }

    .text-boxH2{
    margin-top: -0%;
    margin-bottom: 0%;
    }

    .pKontent2{   
        padding-bottom: 2rem;
    }

    .imageBox{
        width: 60%;
    }
    
    /*================Content 3===========*/
    .container { 
    margin-top: 100px; 
    }
    .centered-div {
    max-width: 50rem; 
    }

    /*================Content 4===========*/
    /*
    .img-Content3{
        position: relative;
    }
    */
    .hauptdiv4{
        margin-top: -130px; 
        z-index: 10000;
    }

    .centered-div4 {
  
    margin: 0rem ;
}

    .gallery-container {
    display: flex; /* Ordnet die Kind-Elemente (image-item) in einer Reihe an */
    justify-content: space-between; /* Verteilt den Abstand gleichmäßig zwischen den Bildern (optional) */
    gap: 20px; /* Fügt einen Abstand zwischen den Elementen hinzu */
    padding: 20px;
    max-width: 1000px; /* Optional: Beschränkt die maximale Breite der Galerie */
    margin: 0 auto; /* Zentriert den gesamten Container horizontal */
    }

    /* 2. Die einzelnen Bild-Elemente */
    .image-item {
    flex: 1 1 30%; /* Flex Shorthand:
                        - flex-grow: 1 (Elemente wachsen, um Platz zu füllen)
                        - flex-shrink: 1 (Elemente schrumpfen, falls nötig)
                        - flex-basis: 30% (Ausgangsbreite, wird durch gap überschrieben) */
    
    }

    /* 3. Sicherstellen, dass das Bild die volle Breite seines Containers ausfüllt */
    .image-item img {
    width: 100%; /* Das Bild füllt die Breite des image-item div aus */
    height: auto; /* Behält das korrekte Seitenverhältnis bei */
    display: block; /* Entfernt eventuelle Leerräume unter dem Bild */
    border-radius: 5px; /* Optionale abgerundete Ecken */
    }

    .p5{
        padding-bottom: 1.1em;
    }

    /*================ Content 6 =========================*/
     .imageBox6{
        width: 53%;
    }
    
    /*================ Content 6 =========================*/
    .container7{
        margin-top: 0%;
        padding-top: 15%;
        padding-bottom: 15%;
    }

    .marginBox{
        padding-top: 3rem; 
        padding-left: 4rem; 
        padding-right: 4rem;
    }
    /*================ Content 8 =========================*/
    .imageBox8{
        width: 50%;
    }
    .text-boxAcht{
        width: 50%;
        float: right;
        margin-top: -19%;
    }

    /* ============== Content9 ====================== */
    .imageBox9{
        width: 50%;
        margin-left: 0;
    }
    .text-box9{
        width: 50%;
        float: right;
        margin-top: -30%;
    }

    /*================ Haut-Behandlung==================*/
    /*
    .links{
        width: 100%;
    }
    */
}

@media screen and (min-width: 1180px){ /*aufreumen*/
    .bd-grid{
        margin-left: auto;
        margin-right: auto;
    }
}


@media screen and (min-device-width: 768px) and (max-device-width: 1200px){
    p{
        font-size: 18px;
    }
}