body {
    font-family: Helvetica, Verdana, sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
    background-color: #faf4f4; /* Ein weicher Hintergrundton */
    color: #333;
    margin: 0;
    padding: 0;
    background-image: url(flowers.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 40%;
}

header {
    
    color: #600;
    padding: 20px 20px 0 20px;
    text-align: center;
    font-size: 28px;
    max-width: calc(100% - 20px); /* Begrenzt die maximale Breite der Sections, sodass zwei nebeneinander passen */
    
}

.header-title {
    
    border-radius: 32px;
    padding: 20px 0;
    box-shadow: 0px 0px 1px rgba(121, 53, 53, 0.01),
  0px 0px 3px rgba(121, 53, 53, 0.01),
  0px 1px 6px rgba(121, 53, 53, 0.02),
  0px 1px 11px rgba(121, 53, 53, 0.03),
  0px 2px 17px rgba(121, 53, 53, 0.03),
  0px 3px 24px rgba(121, 53, 53, 0.04);
  margin-bottom: 0;
    background: #FFF;
}

h1 {
    font-weight: 200;
    margin: 0;
}


.glow-on-hover {
    height: 50px;
    border: none;
    outline: none;
        background-image: linear-gradient(120deg, #84fab0 0%, #6fae6f 100%);
  background-repeat: no-repeat;
    background: #FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 16px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 16px;
}

button {
    margin-top:8px;
    width:100%;
    color:#000;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #84fab0 0%, #caffca 100%);
  background-repeat: no-repeat;
    left: 0;
    top: 0;
    border-radius: 16px;
    
}

.contact-list-item {
    flex-basis:100%;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.underline--magical {
    background-image: linear-gradient(120deg, #f8b6e3 0%, #84fab0 100%);
  background-repeat: no-repeat;
      background-size: 55% 0.1em;
    background-position: 1px 92%;
  transition: background-size 0.25s ease-in;
}


.info.legend.leaflet-control {
    background: rgba(255,255,255,0.9);
    padding: 16px;
    border-radius: 8px;
}

.info.legend.leaflet-control p:first-child {
    margin-bottom: 8px;
        
}

button {
    margin-top:8px;
}

a, a:visited, a:hover, a:active {
    color: #40b340;
}

.info.legend.leaflet-control p {
    align-items: center;
    margin:0;
    display: flex;
    gap: 12px;
}

main {
    padding: 20px;
}

p {
    margin-bottom: 5px;
    line-height: 24px;      
}

.locations-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

section {
    flex: 1;
    min-width: 280px;
    max-width: calc(50% - 20px); /* Begrenzt die maximale Breite der Sections, sodass zwei nebeneinander passen */
    margin-bottom: 20px; /* Einheitliche Abstände */
}


.map {
    height: 300px;
    background-color: #ddd;
    border-radius: 10px; /* Runde Ecken für die Karten */
}

h2 {
    margin-top: 16px;
    font-weight: 100;
}

#feierlocation, #traulocation {
    background-color: #FFFFFF;
    padding: 16px;
        border-radius: 32px; /* Runde Ecken für Buttons */
box-shadow: 0px 0px 1px rgba(121, 53, 53, 0.01),
  0px 0px 3px rgba(121, 53, 53, 0.01),
  0px 1px 6px rgba(121, 53, 53, 0.02),
  0px 1px 11px rgba(121, 53, 53, 0.03),
  0px 2px 17px rgba(121, 53, 53, 0.03),
  0px 3px 24px rgba(121, 53, 53, 0.04);
  margin-bottom: 0;
}

.contact-list p {
    text-align: left;
    padding: 0px;
}

hr {
    margin-top: 16px;
    border-top: 1px solid #EEEEEE;
}

.contact-list {
    display: flex;
    flex-direction: row;
    justify-content: normal;
    gap:64px;
}

#contact {
    background-color: #e0e0e0; /* Graue Hinterlegung für Kontaktbereich */
    padding: 15px;
    border-radius: 32px; /* Runde Ecken */
    width: 100%; /* Sorgt dafür, dass dieser Bereich die volle Breite einnimmt */
    box-sizing: border-box; /* Inkludiert Padding und Border in die Gesamtbreite */
    margin-top: 20px; /* Abstand zum oberen Bereich */
}



ul {
    padding: 0;
}

li {
    margin-bottom: 10px;
    list-style-type: none;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  border-radius: 32px; /* Optional: Rounded corners */
}

.modal-item {
    display: flex;
    flex-direction: row-reverse;
        justify-content: space-between;
}



@media (max-width: 992px) {
    .locations-container {
        flex-direction: column;
    }

    section {
        max-width: 100%;
    }

    header {
        font-size: 20px;
    }

    button {
        width: 100%;
        font-size: 16px;
    }

    .contact-list {
        flex-direction: column;
        gap: 16px;
    }

    .contact-list p{
        text-align: left;
        padding: 0;
        ;
    }

    .contact-list p:first-child {
        margin-top: 0;
    }

h1 {
        font-size: 28px;
        font-weight: bold;
    }

    body::before {
        content: ' ';
        display: block;
        background-image: url('flowers.jpg');
        background-position: center;
        background-size: 40%;
        height: 100vh; width: 100vw;
        top: 0; bottom: 0; left: 0; right: 0;
        position: fixed;
        z-index: -10; // Das hier ist sehr wichtig!
    }

    .modal-content {
        width:calc(100% - 80px);
    }

}