/* .symbole {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
}

.symbole a {

    padding: 1em;
    column-gap: 1%;
} */

/* Grundstil für beide Ansichten */
.symbole {
    position: fixed;
    z-index: 999;
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 0.8em;
    background: transparent;
}

/* Icons größer */
.symbole a img {
    width: 48px;   /* vorher 38px → größer */
    height: 48px;
    display: block;
}

/* --- Große Ansicht (ab 840px) --- */
@media (min-width: 840px) {
    .symbole {
        top: 20%;              /* wie deine Formularleiste */
        right: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.8em;
    }
}

/* --- Kleine Ansicht (unter 840px) --- */
@media (max-width: 839px) {
    .symbole {
        bottom: 1rem;          /* immer am unteren Bildschirmrand */
        right: 1rem;           /* etwas Abstand */
        display: flex;
        flex-direction: row;   /* nebeneinander */
        gap: 1em;
    }
}