.mc-toc{position:sticky;top:100px;max-height:70vh;padding:16px;border:1px solid #eee;border-radius:8px}
.mc-toc__item{display:flex;gap:8px;padding:6px 4px;text-decoration:none;line-height:1.4}
.mc-toc__item.active{font-weight:600}
.mc-toc__check{width:18px;text-align:center}
/* Standard */
.mc-resume {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 12px 18px;
    background-color: #eee;
    border-radius: 8px;
    margin: 12px 0;
}

/* Unter 768px Breite: kleinerer Abstand */
@media (max-width: 768px) {
    .mc-resume {
        gap: 12px;
    }
}
.mc-progress{flex:1;height:8px;background:#fff;border-radius:999px;overflow:hidden}
.mc-progress__bar{height:100%;background:currentColor}
.mc-resume__desc{font-size: 14px}
.mc-resume__info strong{font-weight: 600}
/* Play-Button Style (40x40 mit Hover) */
.mc-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: #800000; /* dunkelrot */
    cursor: pointer;
    position: relative;
    padding: 0; /* entfernt alten Textabstand */
    transition: 0.2s ease;
}

.mc-btn::before {
    content: "";
    position: absolute;
    left: 16px;   /* horizontale Position des Dreiecks */
    top: 12px;    /* vertikale Position des Dreiecks */
    width: 0;
    height: 0;
    border-left: 12px solid white;       /* weiße Dreiecksfläche */
    border-top: 8px solid transparent;   /* obere schräge */
    border-bottom: 8px solid transparent; /* untere schräge */
}

.mc-btn:hover {
    transform: scale(0.95) /* etwas heller beim Hover */
}

.mc-toc__headline{
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1.25rem;
}

.highlight{
    color: #fff!important;
}

.mc-toc__links .highlight:not(:first-of-type) {
    padding-top: 1.5rem;
}