.infoSection {
    display:flex;
    width: 72vw;
    background-color: purple;
    justify-content:space-around;
    padding: 30px;
    border-radius: 8px;
    margin: 125px auto 100px auto;
}


.infoLeft {
    display: flex;
    flex-wrap: wrap;
}

.openingHours {
    display: flex;
    flex-direction: column;
    color: orange;
    /* flex: 1; */
    min-width: 100px;
    margin-right: 20px;
    align-items: center;
    position: relative;
    left: -200px; /* Startposition: außerhalb des Bildschirms links */
    animation: backInLeft 4s forwards;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
        }

        @keyframes backInLeft {
            0% {
                left: -100%; /* Start: ganz rechts außerhalb */
                opacity: 0;
            }
            100% {
                left: 0; /* Mitte: im Bildschirm */
                opacity: 1;
            }
          
        
        }

.openingHours:hover {
    transform: translateY(-6px);
    color: #ffcc00;            /* etwas helleres Orange/Gelb */
     text-shadow: 0 0 12px rgba(255, 165, 0, 0.8),
                 0 0 25px rgba(255, 165, 0, 0.4);
}



.teaInfo {
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    margin-right: 20px;
    align-items: center;
}



 @keyframes swing {
            0% {
                transform: rotate(-5deg);
            }
            100% {
                transform: rotate(5deg);
            }
}

.teainfo div {
    color: purple;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: orange;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;
    list-style-type: circle;
}


.info ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: purple;
}

.contactInfo {
    display: flex;
    flex-basis: auto;
    color: orange;
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* ← ergänzen */
}

.contactInfo:hover {
    transform: translateY(-6px);
    text-shadow: 0 0 12px rgba(255, 165, 0, 0.8),
                 0 0 25px rgba(255, 165, 0, 0.4);
}

.infoSection h2 {
    color: orange;
    margin-bottom: 10px;
}

.infoSection p {
    color: orange;
    line-height: 1.5;
}


.teaInfo h2 {
    color: orange;
    margin-bottom: 10px;
     animation: swing 2s ease-in-out infinite alternate;
        }

.teaInfo h3 {
    color: orange;
    margin-bottom: 10px;
     animation: swing 2s ease-in-out infinite alternate;
        }

.teaInfo h4 {
    color: orange;
    margin-bottom: 10px;
     animation: swing 2s ease-in-out infinite alternate;
        }

@media screen and (max-width: 800px) {
  .infoSection {
    display:flex;
    flex-wrap: wrap;
    padding: 10px;
    margin: 20px auto 20px auto;
}

.teainfo div {
    color: purple;
    display: flex;
    flex-direction: column;
    list-style-type: none;
}
}