/* =================================================================== */
/*  FINALE KORREKTUR: Zielt direkt auf die Anker-IDs des TOC-Widgets
/* =================================================================== */

/* Definiert den Abstand für alle Anker-Ziele des TOC-Widgets */
[id^="elementor-toc__heading-anchor-"] {
    scroll-margin-top: 90px !important; /* BEISPIEL: Desktop-Höhe + Puffer */
}

/* Anpassung für Tablet */
@media (max-width: 1024px) {
    [id^="elementor-toc__heading-anchor-"] {
        scroll-margin-top: 80px !important; /* BEISPIEL: Tablet-Höhe + Puffer */
    }
}

/* Anpassung für Mobilgeräte */
@media (max-width: 767px) {
    [id^="elementor-toc__heading-anchor-"] {
        scroll-margin-top: 35px !important; /* BEISPIEL: Mobil-Höhe + Puffer */
    }
}
/* Setzt die Standardfarbe für alle Links im TOC und neutralisiert Elementors active-Stil */
.elementor-toc__body .elementor-toc__list-item-text,
.elementor-toc__body .elementor-toc__list-item-text.elementor-item-active {
    color: #7A7A7A !important;
    font-weight: 400 !important;
    transition: color 0.2s ease; /* Sanfter Farbübergang */
}

/* Definiert das Aussehen unseres EIGENEN aktiven Links UND den Hover-Effekt */
.elementor-toc__body .elementor-toc__list-item-text.mein-toc-link-aktiv,
.elementor-toc__body .elementor-toc__list-item-text:hover {
    color: var(--accent-color-rot) !important; /* Nutze deine eigene CSS-Variable */
}