.a {
    font-face: century;
    font-size: 25px;
    color: #C69D4B;
}

/* Standard-CSS für Desktop-Links */
.desktop-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.desktop-buttons a {
    font-face: century;
    font-size: 23px;
    display: inline-block;
    padding: 10px 20px;
    background-color: #FFF;
    color: #333;
    text-decoration: none;
    margin: 0 10px;
    border-radius: 7px;
}

.desktop-buttons a:hover {
  background-color: #C69D4B;
  color: #FFF;
}

.handylinks {
display: flex;
with: 100%;
text-align: center;
}
/* CSS für Mobile-Links und Menü */
.mobile-button {
    width: 100%;
    display: none;
    text-align: center;
    text-decoration: none;
  border: 4px solid #C69D4B;
  border-radius: 8px;
  padding: 5px;
}

.hamburger-menu {
    font-size: 23px;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
}

.mobile-menu {
    display: none;
    padding: 10px;
    background-color: #FFF;
    color: #333;
    border-radius: 7px;
}

/* Media Query für die Handyansicht */
@media (max-width: 768px) {
    /* Verstecke Desktop-Links in der Handyansicht */
    .desktop-buttons {
        display: none;
    }

    /* Zeige den Mobile-Button in der Handyansicht */
    .mobile-button {
        font-size: 23px;
        text-align: center;
        display: inline-block;
        padding: 10px 20px;
        background-color: #8E6F39;
        color: #FFF;
        text-decoration: none;
        margin: 0 10px;
        border-radius: 5px;
    }

    /* Zeige das Mobile-Menü in der Handyansicht */
    .mobile-menu.active {
        display: flex;
        flex-direction: column;
        background-color: #FFF;
        color: #333;
        align-items: center;
        text-decoration: none;
    }

    /* Ändere die Schriftfarbe im aktiven Mobile-Menü auf Weiß */
    .mobile-menu.active a {
        color: #333;
        text-decoration: none;
    }

/* Füge einen Hover-Effekt pro Zeile im aktiven Mobile-Menü hinzu */
.mobile-menu.active a:hover {
    background-color: #C69D4B;
    color: #FFF;
    text-decoration: none;
    width: 100%; /* Setze die Breite auf 100% */
    display: block; /* Stellt sicher, dass die Breitenänderung wirksam ist */
    padding: 10px;
}


    
    /* Setze allgemeine Stile für Links nur in der Handyansicht */
    .mobile-menu a {
        color: #777;
        text-decoration: none;
        padding: 8px 0;
    }

    /* Füge einen Hover-Effekt pro Zeile im Mobile-Menü hinzu */
    .mobile-menu a:hover {
        background-color: #C69D4B;
        color: #333;
        text-decoration: none;
    }
}