:root {
    --headerandfooterBackroundlinear: linear-gradient(180deg, #F9C1A8 0%, #FAF7F6 100%);
    --headerBackroundcolorlogo: #F9C1A8;
    --borderwhitestandard: 2px solid white;
    --whiteStandard: white;
    --linkemailcolor: #0D96FE;


    --font-family-dancing-regular: 'DancingScript';
    --fonts-family-monts500: "Monts500";
    --fonts-family-poppins500: "Poppins500";
    --fonts-family-poppins300: "Poppins300";
    --fonts-family-roboto500: "Roboto500";
}

@font-face {
    font-family: 'Roboto500';
    src: url('/src/fonts/Roboto-Medium.woff2') format('woff2'),
        url('/src/fonts/Roboto-Medium.woff') format('woff'),
        url('/src/fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Poppins300';
    src: url('/src/fonts/Poppins-Light.woff2') format('woff2'),

        url('/src/fonts/Poppins-Light.woff') format('woff'),

        url('/src/fonts/Poppins-Light.ttf') format('truetype');

    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Poppins500';
    src: url('/src/fonts/Poppins-Medium.woff2') format('woff2'),

        url('/src/fonts/Poppins-Medium.woff') format('woff'),

        url('/src/fonts/Poppins-Medium.ttf') format('truetype');

    font-weight: 400;
    font-style: normal;
}



@font-face {
    font-family: 'DancingScript';
    src: url('/src/fonts/DancingScript-Regular.woff2') format('woff2'),

        url('/src/fonts/DancingScript-Regular.woff') format('woff'),

        url('/src/fonts/DancingScript-Regular.ttf') format('truetype');

    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Monts500';
    src: url('/src/fonts/Montserrat-Medium.woff2') format('woff2'),

        url('/src/fonts/Montserrat-Medium.woff') format('woff'),

        url('/src/fonts/Montserrat-Medium.ttf') format('truetype');

    font-weight: 400;
    font-style: normal;
}


/* Grundregeln */


body,html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1rem;
    font-size: 16px;
    overflow-x: hidden;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hauptcontainer {
    width: 100%;
    margin: 0 auto;
    background: white;
    height: auto;
}

.container1 {
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    height: auto;
    flex-direction: column;
    margin: 0 auto;
}


.text1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 87%;
    color: #8B4513;
    text-align: center;
    font-family: var(--fonts-family-poppins500);
    font-size: 1.00rem;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
    margin-top: 70px;
    margin-bottom: 70px;
    border-radius: 180px;
    border: 4px solid var(--bouton, #C08081);
    padding: 15px;
}

.text1 span {
    color: #8B4513;
    font-family: var(--fonts-family-poppins500);
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
}

@media (max-width:1300px) {
    .text1 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .text1 span {
        font-size: 2rem;
    }
}

@media (max-width:1000px) {
    .text1 {
        padding: 20px;
    }
}

@media (max-width:650px) {
    .text1 {

        font-size: 0.7rem;
    }

    .text1 span {
        font-size: 1.5rem;
    }
}

@media (max-width: 580px) {
    .text1 {
        padding: 10%;
    }
}

@media (max-width: 350px) {
    .text1 {
        margin-bottom: 30px;
    }
}

.bild1 {
    display: flex;
    width: 100%;
    max-width: 1160px;
    height: 579px;
    border-radius: 180px;
    padding: 0;
    margin: 60px 0 15px 0;
    justify-content: center;
}

.bild1 img {
    width: 75%;
    max-width: 100%;
    border-radius: 180px;
    height: 100%;
    max-height: 559px;
    object-fit: cover;
    border: 4px solid #c08081;
    /*  display: flex; 
    align-items: stretch;
    justify-content: space-between;
    align-content: space-between;
    flex-direction: column-reverse; */

}

@media(max-width:1300px) {
    .bild1 {
        height: 400px;
        margin-bottom: 100px;
    }
}


@media(max-width:1100px) {
    .bild1 {
        height: 220px;
        margin-bottom: 248px;
    }
}

@media(max-width:750px) {
    .bild1 {
        height: 255px;
        margin-bottom: 90px;
    }
}


@media(max-width:500px) {
    .bild1 {
        height: 192px;
    }
}

@media(max-width:400px) {
    .bild1 {
        height: 157px;
        margin-bottom: 40p;
    }
}

.bild2 img,
.bild3 img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    /* Zuschneiden, um das Layout zu füllen */
    border-radius: 20px;
    border: 4px solid var(--primary-color);
    margin: 0 auto;
    padding: 0;
}

/* Responsive Anpassungen */

@media (max-width: 1300px) {
    .bild1 img {
        height: 450px;
        display: flex;
        margin: 0 auto;
    }
}


@media (max-width:1100px) {
    .bild1 img {
        height: 407px;
        display: flex;
        margin: 0 auto;
    }
}

@media (max-width:750px) {
    .bild1 img {
        height: 283px;
        display: flex;
        margin: 0 auto;
    }
}


@media (max-width:500px) {
    .bild1 img {
        height: 234px;
        display: flex;
        margin: 0 auto;
    }
}

@media (max-width:400px) {
    .bild1 img {
        height: 167px;
        display: flex;
        margin: 0 auto;
        margin-bottom: 0;
    }
}


@media (max-width: 1100px) {

    .bild2 img,
    .bild3 img {
        height: 300px;
    }
}

@media (max-width: 700px) {

    .bild2 img,
    .bild3 img {
        height: 200px;
    }
}

@media (max-width: 400px) {

    .bild2 img,
    .bild3 img {
        height: 150px;
    }
}

/* Bilder-Container */
/* Container2 und Bild3 Layout */
.bilder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px auto;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px;
}

.bilder img {
    display: block;
    width: calc(100% - 20px);
    /* 2 Bilder pro Reihe */
    max-width: 360px;
    height: auto;
    border: 4px solid #c08081;
    aspect-ratio: 3 / 4;
    /* Festes Verhältnis für schöne Darstellung */
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.bilder img:hover {
    transform: scale(1.05);
    /* Vergrößerung bei Hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    /* Schöner Schatten */
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
    .bilder img {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .bilder img {
        max-width: 90%;
        /* Bilder füllen fast die Breite aus */
    }
}

@media (max-width: 500px) {
    .bilder img {
        max-width: 100%;
        /* Bilder füllen die volle Breite */
        border-radius: 10px;
        /* Kleinere Ecken auf kleinen Geräten */
    }
}

/* Conatiner 1 fin */

/* Conatiner 2 ave 3 images */


.container2 {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-top: 70px;
    margin-bottom: 80px;
    padding: 10px;
}

.container2 img {
    display: block;
    width: calc(33.33% - 20px);
    height: auto;
    border: 4px solid #c08081;
    aspect-ratio: 3 / 4;
    /* Festes Verhältnis für schöne Darstellung */
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover-Effekt für Bilder */
.container2 img:hover {
    transform: scale(1.05);
    /* Leicht vergrößern */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    /* Schatten hinzufügen */
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
    .container2 img {
        width: calc(50% - 20px);
        /* Zwei Bilder pro Reihe */
    }
}

@media (max-width: 768px) {
    .container2 img {
        width: calc(100% - 20px);
        /* Ein Bild pro Reihe */
    }
}

@media (max-width: 400px) {
    .container2 img {
        width: calc(100% - 10px);
        /* Schmaler Innenabstand */
    }
}

/* fin Conatiner 2 ave 3 images */

/* conatiner 3 avec 2 container dans 1 container encore 2 container */

.container3 {
    width: 100%;
    height: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 73px;
    flex-wrap: wrap;
}

@media(max-width:800px) {
    .container3 {
        height: 1660px;
    }
}

@media(max-width:600px) {
    .container3 {
        height: 1660px;
    }
}

.containergouche {
    width: 33%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 887px;
    flex-direction: column;
    gap: 85px;
}

@media(max-width: 1400px) {
    .containergouche {
        height: 776px;
    }
}

@media(max-width: 1200px) {
    .containergouche {
        height: 808px;
        gap: 48px;
    }
}

@media(max-width: 1000px) {
    .containergouche {
        height: 745px;
    }
}

@media(max-width: 800px) {
    .containergouche {
        width: 100%;
        max-width: 50%;
        height: 629px;
        gap: 40px;
    }
}

@media(max-width: 600px) {
    .containergouche {
        width: 100%;
        height: 550px;
    }
}

@media(max-width: 400px) {
    .containergouche {
        width: 100%;
        height: 800px;
    }
}



.titlehorairesbrown {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #C08081 0%, #97696A 100%);
    margin-bottom: 30px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}



/* @media(max-width:1000px) {
    .titlehorairesbrown {
        height: 66px;
    }
} */

@media(max-width:1000px) {
    .titlehorairesbrown {
        height: 50px;
        margin-bottom: 13px;
    }
}

@media(max-width:300px) {
    .titlehorairesbrown {
        
        margin-bottom: 23px;
    }
}


.titlehorairesbrown h6 {
    font-size: 2.2vw;
    line-height: 35px;
    font-weight: 500;
    font-family: var(--fonts-family-monts500);
    color: var(--whiteStandard);
    margin: 0;
}

@media(max-width:700px) {
    .titlehorairesbrown h6 {
        font-size: 3.7vw;
    }
}

@media(max-width:500px) {
    .titlehorairesbrown h6 {
        font-size: 4.7vw;
    }
}




.textoben {
    width: 100%;
    max-width: 549px;
    height: 413px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 20px 0;
    text-align: center;
    border: 8px solid #c08081;
}


@media (max-width: 850px) {
    .textoben  {
       height: 486px;
       width:105%;
    }
}

.textoben p {
    font-size: clamp(1.3rem, 1.5vw, 1rem); 
    line-height: 1.5;
    font-family: var(--fonts-family-monts500);
    font-weight: 600;
    color: var(--colorblackstandard);
    word-break: break-word; 
    margin-bottom: 5px; 
}


@media (max-width: 800px) {
    .textoben p {
        font-size: 3vw;
    }
}

@media (max-width: 400px) {
    .textoben {
        height: 306px;
        margin: 0 40px;
        width: 140%;}
    }
    
    @media (max-width: 300px) {
        .textoben {
            height: 288px;
           }
        }
    


    .textoben p {
        font-size: 1.5rem;
        font-weight: 700; 
    }

    @media(max-width: 575px){
        .textoben p{
            font-size: 1rem;
        }
    }

    @media(max-width: 300px){
        .textoben p{
            font-size: .7rem;
        }
    }



.textoben .day-block {
    display: flex;
    flex-direction: row;
    align-items: flex-start; 
 
}

.textoben .day-block .day-label {
   
   /*  font-size: clamp(0.9rem, 1.5vw, 1rem); */
    margin-right: 5px; 
 
}

.textoben .day-block .time-ranges .time-range {
   /*  font-size: clamp(0.9rem, 1.5vw, 1rem); */
  
    text-align: left; 
}



.textunten {
    display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 81%;
        height: 350px;
        border: 5px solid var(--primary-color);
}

@media(max-width:800px) {
    .textunten {
        width: 100%;
        height: 378;
        /*  margin-bottom: 20px; */
    }
}

@media (max-width:400px) {
    .textunten {
        width: 130%;
    }
}

.textunten p {
    font-size: 1.4vw;
    letter-spacing: 0.10em;
    line-height: 1.2;
    /* Abstand zwischen den Zeilen */
    font-weight: 500;
    padding: 20px;
    border: 8px solid #c08081;
    font-family: var(--fonts-family-monts500);
    color: var(--colorblackstandard);
    margin: 10;
}


@media(max-width:800px) {
    .textunten p {
        font-size: 2.3vw;
        padding: 12px;
        margin-top: 15%;
        height: 265px;
    }
}

@media(max-width:600px) {
    .textunten p {
        font-size: 2.6vw;
    }
}

@media(max-width:400px) {
    .textunten p {
        font-size: 3.9vw;
        height: 275px;
    }
}



/* Allgemeine Container-Stile */
.containerdroite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 31%;
    min-height: 892px;
    height: 429px;
    gap: 0px;
    border: 11px solid #c08081;
    /* margin: 0 auto; */
    padding: 20px;
    /* margin-top: 70px;*/
    overflow: auto; /* Scrollen erlauben, wenn der Inhalt größer ist */
}


/* Media Queries für verschiedene Bildschirmgrößen */
@media (max-width: 1400px) {
    .containerdroite {
        min-height: 810px;
    }
}

@media (max-width: 1200px) {
    .containerdroite {
        min-height: 820px;
    }
}

@media (max-width: 1000px) {
    .containerdroite {
        min-height: 777px;
        min-width: 300px;
    }
}

@media (max-width: 800px) {
    .containerdroite {
        width: 50%;
        min-height: 700px;
    }
}

@media (max-width: 600px) {
    .containerdroite {
        width: 52%;
        min-height: 745px;
    }
}

@media (max-width: 400px) {
    .containerdroite {
        width: 81%;
        min-height: 720px;
        padding: 5px;
    }
}

/* Oberer Textbereich */
.textoben1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
}

.textoben1 p {
    font-size: 1.3rem;
    font-weight: 600;
    font-family: var(--fonts-family-monts500);
    color: #221a19;
    margin: 0;
}

@media (max-width: 800px) {
    .textoben1 p {
        font-size: 1.1rem;
    }
}

@media (max-width: 500px) {
    .textoben1 p {
        font-size: 1rem;
    }
}

/* Unterer Textbereich */
.textunten1 {
    width: 100%;
    text-align: center;
}

.textunten1 p {
    font-size: 1.6rem;
    font-weight: 600;
    font-family: var(--fonts-family-monts500);
    margin: 0;

}

@media (max-width: 500px) {
    .textunten1 p {
        font-size: 1rem;
    }
}

/* Google Maps Container */
.googlemapsoben {
    position: relative;
    width: 82%;
    height: 489px;
    padding-bottom: 56.25%;
    /* 16:9 Verhältnis */
    overflow: hidden;
    border: none;
}

.googlemapsoben iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* fin conatiner 3 avec 2 container dans 1 container encore 2 container */

/* Container 4 avec 3 images */

.container4 {
    width: 90%;
    /* Etwas mehr Platz geben */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    /* Größerer Abstand zwischen Bildern */
    flex-wrap: wrap;
    border: 8px solid #c08081;
    border-radius: 20px;
    margin-top: 70px;
    margin-bottom: 80px;
    padding: 15px;
    /* Etwas Innenabstand hinzufügen */
}

.container4 img {
    display: block;
    width: 100%;
    max-height: 550px;
    max-width: 420px;
    /* height: auto; */
    /* width: calc(33.33% - 20px); */
    /* height: auto; */
    /* aspect-ratio: 3 / 4; */
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover-Effekt für Bilder */
.container4 img:hover {
    transform: scale(1.05);
    /* Leicht vergrößern */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    /* Schatten hinzufügen */
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
    .container4 img {
        width: calc(50% - 20px);
        /* Zwei Bilder pro Reihe */
    }
}

@media (max-width: 768px) {
    .container4 img {
        width: calc(100% - 20px);
        /* Ein Bild pro Reihe */
    }
}

@media (max-width: 400px) {
    .container4 img {
        width: calc(90% - 10px);
        /* Schmaler Innenabstand */
    }
}