/* 
 * Vertikales Inhaltsverzeichnis Styles
 * Unterstützt Überschriften H2 bis H6
 */

 .post__toc {
    background: var(--color-surface);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
}

/* Basis-Listen-Styling */
.post__toc-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.post__toc-list .post__toc-list {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-2);
    border-left: 2px solid var(--color-gray-100);
}

/* Basis-Listenelement */
.post__toc-item {
    position: relative;
}

/* Einrückungen für verschiedene Heading-Level */
.post__toc-item--h2 {
    margin-bottom: var(--spacing-2);
    padding-bottom:var(--spacing-2);
    border-bottom:1px solid var(--color-gray-300);
}

.post__toc-item--h3 {
    padding-left: var(--spacing-3);
}

.post__toc-item--h4 {
    padding-left: var(--spacing-4);
}

.post__toc-item--h5 {
    padding-left: var(--spacing-5);
}

.post__toc-item--h6 {
    padding-left: var(--spacing-6);
}

/* Link-Styling mit unterschiedlichen Größen je nach Level */
.post__toc-link {
    position: relative;
    display: block;
    text-decoration: none;
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-2);
    border-radius: var(--radius-base);
    transition: all var(--transition);
}


/* H2 Links - Hauptüberschriften */
.post__toc-link[data-level="2"] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
}

/* H3 Links - Wichtige Unterüberschriften */
.post__toc-link[data-level="3"] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
}

/* H4 Links */
.post__toc-link[data-level="4"] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-light);
}

/* H5 Links */
.post__toc-link[data-level="5"] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-light);
}

/* H6 Links */
.post__toc-link[data-level="6"] {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-light);
}

/* Hover-Effekte */
.post__toc-link:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-100);
}

/* Aktiver Zustand */
.post__toc-link--active::before {
    content: '';
    position: absolute;
    left: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    transition:200ms;
}

.post__toc-link::before {
    content: '';
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.post__toc-link--active::before {
    opacity: 1;
}

.post__toc-link:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-100);
}

.post__toc-link--active {
    color: var(--color-primary) !important;
    padding-left:var(--spacing-5);
}



/* Responsive Anpassungen */
@media (max-width: 768px) {
    .post__toc {
        padding: var(--spacing-3);
    }

    .post__toc-link {
        padding: var(--spacing-1) var(--spacing-2);
      
    }

    .post__toc-link--active{
        padding-left: var(--spacing-4);
    }

    .post__toc-link--active::before {
        left: var(--spacing-2);
    }

    /* Reduzierte Einrückungen auf mobilen Geräten */
    .post__toc-item--h3 { padding-left: var(--spacing-3); }
    .post__toc-item--h4 { padding-left: var(--spacing-4); }
    .post__toc-item--h5 { padding-left: var(--spacing-5); }
    .post__toc-item--h6 { padding-left: var(--spacing-6); }
}


/* HORIZONTAL */

/* 
 * Horizontale Navigation für Applikationen/Technologie Posts
 * Fullwidth Design mit blauem Hintergrund
 */

 .horizontal-nav {
    width: 100%;
    background-color: var(--color-primary);
}

.horizontal-nav__inner {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-nav__container{
    padding:0;
}

.horizontal-nav__list {
    display: flex;
    padding: var(--spacing-4) 0;
    gap: var(--spacing-5);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    list-style: none;
    white-space: nowrap;
}

.horizontal-nav__list::-webkit-scrollbar, .horizontal-nav__inner::-webkit-scrollbar {
    display: none;
}

.horizontal-nav__item {
    flex: 0 0 auto;
}

.horizontal-nav__item a{
    color:var(--color-text-inverse);
}

.horizontal-nav__item a:hover{
    color:var(--color-text-inverse);
}

.horizontal-nav__link {
    position: relative;
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
    padding: var(--spacing-2) 0;
    opacity: 0.8;
    transition:  var(--transition);
}

/* Hover-Effekt */
.horizontal-nav__link:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* Aktiver Zustand */
.horizontal-nav__link[aria-current="true"] {
    opacity: 1;
}

/* Unterstrich für aktiven Link */
.horizontal-nav__link[aria-current="true"]::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--spacing-4));
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-inverse);
}




/* Responsive Anpassungen */
@media (max-width: 768px) {

    .horizontal-nav__list {
        display:block;
        padding: var(--spacing-3);
        gap: var(--spacing-4);
    }

    .horizontal-nav__link {
        font-size: var(--text-xs);
    }

    .horizontal-nav__link[aria-current="true"]::after {
        bottom: calc(-1 * var(--spacing-3));
    }

    .horizontal-nav__item{
        padding: var(--spacing-2) 0;
        border-bottom: 1px solid white;
        font-weight: 700;
    }
    .horizontal-nav__item:last-child{
        border-bottom:0;
    }
}