/*18562 //immuno 26962
12 //innere 26667
113 //biochemie 26923
3973 //psychiatrie 26861

6 infektio 
26631

5863
26573

auge
3976
26582

chiru 3107
26588

derma 733
26596

hno 734
26615

neuro 976
26727

pharma 1180
26797

physio
6290
26979

neuroana 168
26967

gyn 3971
26608

ana 134
26880


bio
16457
26931

termi
22649
26991

chemie 24540
26939

päd
286
26759
*/
body {
    --mt-fach-26962-1: hsl(79, 60%, 66%);
    --mt-fach-26962-2: hsl(79, 34%, 72%);
    --mt-fach-26962-3: hsl(79, 40%, 62%);
    --mt-fach-26962-0: hsl(79, 60%, 98%);
    --mt-fach-26667-1: hsl(50, 90%, 79%);
    --mt-fach-26667-2: hsl(50, 50%, 88%);
    --mt-fach-26667-3: hsl(50, 50%, 73%);
    --mt-fach-26667-0: hsl(50, 90%, 96%);
    --mt-fach-26923-1: hsl(160, 70%, 86%);
    --mt-fach-26923-2: hsl(160, 70%, 86%);
    --mt-fach-26923-3: hsl(160, 70%, 82%);
    --mt-fach-26923-0: hsl(160, 70%, 98%);
    --mt-fach-26861-1: hsl(260, 90%, 80%);
    --mt-fach-26861-2: hsl(260, 50%, 80%);
    --mt-fach-26861-3: hsl(260, 50%, 74%);
    --mt-fach-26861-0: hsl(260, 90%, 98%);

    /* infektio */
    --mt-fach-26631-1: hsl(130, 90%, 76%);
    --mt-fach-26631-2: hsl(130, 50%, 82%);
    --mt-fach-26631-3: hsl(130, 60%, 76%);
    --mt-fach-26631-0: hsl(130, 90%, 98%);
    /*pharma */
    --mt-fach-26797-1: hsl(230, 90%, 80%);
    --mt-fach-26797-2: hsl(230, 50%, 80%);
    --mt-fach-26797-3: hsl(230, 50%, 74%);
    --mt-fach-26797-0: hsl(230, 90%, 98%);
    --mt-fach-26962-01: hsl(79, 60%, 94%);
    --mt-fach-26667-01: hsl(50, 90%, 94%);
    --mt-fach-26923-01: hsl(160, 70%, 94%);
    --mt-fach-26861-01: hsl(260, 90%, 94%);
    --mt-fach-26631-01: hsl(130, 90%, 94%);
    --mt-fach-26797-01: hsl(230, 90%, 94%);
    --mt-fach-26727-01: hsl(0, 90%, 94%);
    --mt-fach-26759-01: hsl(79, 90%, 94%);
    --mt-fach-26615-01: hsl(35, 90%, 94%);
    --mt-fach-26582-01: hsl(35, 50%, 94%);
    --mt-fach-26596-01: hsl(200, 90%, 94%);
    --mt-fach-26588-01: hsl(79, 90%, 94%);
    --mt-fach-26573-01: hsl(160, 90%, 94%);
    --mt-fach-26979-01: hsl(240, 90%, 94%);
    --mt-fach-26967-01: hsl(10, 90%, 94%);
    --mt-fach-26608-01: hsl(300, 100%, 94%);
    --mt-fach-26880-01: hsl(0, 90%, 94%);
    --mt-fach-26931-01: hsl(130, 90%, 94%);
    --mt-fach-26991-01: hsl(180, 50%, 94%);
    --mt-fach-26939-01: hsl(180, 90%, 94%);
    /* neuro */
    --mt-fach-26727-1: hsl(0, 90%, 88%);
    --mt-fach-26727-2: hsl(0, 100%, 85%);
    --mt-fach-26727-3: hsl(0, 90%, 84%);
    --mt-fach-26727-0: hsl(0, 90%, 98%);
    /* päd*/
    --mt-fach-26759-1: hsl(79, 90%, 79%);
    --mt-fach-26759-2: hsl(79, 50%, 82%);
    --mt-fach-26759-3: hsl(79, 60%, 73%);
    --mt-fach-26759-0: hsl(79, 90%, 98%);
    /* hno */
    --mt-fach-26615-1: hsl(35, 90%, 80%);
    --mt-fach-26615-2: hsl(35, 50%, 80%);
    --mt-fach-26615-3: hsl(35, 50%, 74%);
    --mt-fach-26615-0: hsl(35, 90%, 98%);
    /* auge */
    --mt-fach-26582-1: hsl(35, 50%, 74%);
    --mt-fach-26582-2: hsl(35, 50%, 74%);
    --mt-fach-26582-3: hsl(35, 50%, 74%);
    --mt-fach-26582-0: hsl(35, 50%, 98%);
    /*  derma */
    --mt-fach-26596-1: hsl(200, 90%, 78%);
    --mt-fach-26596-2: hsl(200, 50%, 76%);
    --mt-fach-26596-3: hsl(200, 50%, 73%);
    --mt-fach-26596-0: hsl(200, 90%, 98%);
    /* chiru  */
    --mt-fach-26588-1: hsl(79, 90%, 79%);
    --mt-fach-26588-2: hsl(79, 50%, 82%);
    --mt-fach-26588-3: hsl(79, 60%, 73%);
    --mt-fach-26588-0: hsl(79, 90%, 98%);
    /* anä  */
    --mt-fach-26573-1: hsl(160, 90%, 76%);
    --mt-fach-26573-2: hsl(160, 50%, 82%);
    --mt-fach-26573-3: hsl(160, 60%, 73%);
    --mt-fach-26573-0: hsl(160, 90%, 98%);
    /* physio */
    --mt-fach-26979-1: hsl(240, 90%, 80%);
    --mt-fach-26979-2: hsl(240, 50%, 80%);
    --mt-fach-26979-3: hsl(240, 50%, 74%);
    --mt-fach-26979-0: hsl(240, 90%, 98%);
    /* neuroana */
    --mt-fach-26967-1: hsl(10, 90%, 80%);
    --mt-fach-26967-2: hsl(10, 50%, 80%);
    --mt-fach-26967-3: hsl(10, 50%, 74%);
    --mt-fach-26967-0: hsl(10, 90%, 98%);
    /*gyn */
    --mt-fach-26608-1: hsl(300, 100%, 94%);
    --mt-fach-26608-2: hsl(300, 100%, 90%);
    --mt-fach-26608-3: hsl(300, 100%, 85%);
    --mt-fach-26608-0: hsl(300, 100%, 98%);
    /*ana*/
    --mt-fach-26880-1: hsl(0, 90%, 81%);
    --mt-fach-26880-2: hsl(0, 50%, 82%);
    --mt-fach-26880-3: hsl(0, 50%, 75%);
    --mt-fach-26880-0: hsl(0, 90%, 98%);
    /* bio*/
    --mt-fach-26931-1: hsl(130, 90%, 76%);
    --mt-fach-26931-2: hsl(130, 50%, 82%);
    --mt-fach-26931-3: hsl(130, 60%, 76%);
    --mt-fach-26931-0: hsl(130, 90%, 98%);
    /* termi */
    --mt-fach-26991-1: hsl(180, 50%, 80%);
    --mt-fach-26991-2: hsl(180, 50%, 80%);
    --mt-fach-26991-3: hsl(180, 50%, 74%);
    --mt-fach-26991-0: hsl(180, 50%, 98%);
    /* chemie */
    --mt-fach-26939-1: hsl(180, 90%, 76%);
    --mt-fach-26939-2: hsl(180, 50%, 82%);
    --mt-fach-26939-3: hsl(180, 60%, 76%);
    --mt-fach-26939-0: hsl(180, 90%, 98%);
}

.mt-fach-bg-26962-0 {
    background: var(--mt-fach-26962-0);
}
/*
.mt-fach-bg-hover-26962-1:hover {
    background: var(--mt-fach-26962-1);
}
.mt-fach-bg-hover-26667-1:hover {
    background: var(--mt-fach-26667-1);
}
.mt-fach-bg-hover-26923-1:hover {
    background: var(--mt-fach-26923-1);
}
.mt-fach-bg-hover-26861-1:hover {
    background: var(--mt-fach-26861-1);
}
.mt-fach-bg-hover-26631-1:hover {
    background: var(--mt-fach-26631-1);
}
.mt-fach-bg-hover-26797-1:hover {
    background: var(--mt-fach-26797-1);
}
.mt-fach-bg-hover-26727-1:hover {
    background: var(--mt-fach-26727-1);
}
.mt-fach-bg-hover-26759-1:hover {
    background: var(--mt-fach-26759-1);
}
.mt-fach-bg-hover-26615-1:hover {
    background: var(--mt-fach-26615-1);
}
.mt-fach-bg-hover-26582-1:hover {
    background: var(--mt-fach-26582-1);
}
.mt-fach-bg-hover-26596-1:hover {
    background: var(--mt-fach-26596-1);
}
.mt-fach-bg-hover-26588-1:hover {
    background: var(--mt-fach-26588-1);
}
.mt-fach-bg-hover-26573-1:hover {
    background: var(--mt-fach-26573-1);
}
.mt-fach-bg-hover-26979-1:hover {
    background: var(--mt-fach-26979-1);
}
.mt-fach-bg-hover-26967-1:hover {
    background: var(--mt-fach-26967-1);
}
.mt-fach-bg-hover-26608-1:hover {
    background: var(--mt-fach-26608-1);
}
.mt-fach-bg-hover-26880-1:hover {
    background: var(--mt-fach-26880-1);
}
.mt-fach-bg-hover-26931-1:hover {
    background: var(--mt-fach-26931-1);
}
.mt-fach-bg-hover-26991-1:hover {
    background: var(--mt-fach-26991-1);
}
.mt-fach-bg-hover-26939-1:hover {
    background: var(--mt-fach-26939-1);
}
    */
.mt-fach-bg-26667-0 {
    background: var(--mt-fach-26667-0);
}
.mt-fach-bg-26923-0 {
    background: var(--mt-fach-26923-0);
}
.mt-fach-bg-26861-0 {
    background: var(--mt-fach-26861-0);
}
.mt-fach-bg-26631-0 {
    background: var(--mt-fach-26631-0);
}
.mt-fach-bg-26797-0 {
    background: var(--mt-fach-26797-0);
}
:hover > .mt-fach-bg-hovertop-26962-01 {
    background: var(--mt-fach-26962-01);
}
:hover > .mt-fach-bg-hovertop-26667-01 {
    background: var(--mt-fach-26667-01);
}
:hover > .mt-fach-bg-hovertop-26923-01 {
    background: var(--mt-fach-26923-01);
}
:hover > .mt-fach-bg-hovertop-26861-01 {
    background: var(--mt-fach-26861-01);
}
:hover > .mt-fach-bg-hovertop-26631-01 {
    background: var(--mt-fach-26631-01);
}
:hover > .mt-fach-bg-hovertop-26797-01 {
    background: var(--mt-fach-26797-01);
}
:hover > .mt-fach-bg-hovertop-26727-01 {
    background: var(--mt-fach-26727-01);
}
:hover > .mt-fach-bg-hovertop-26759-01 {
    background: var(--mt-fach-26759-01);
}
:hover > .mt-fach-bg-hovertop-26615-01 {
    background: var(--mt-fach-26615-01);
}
:hover > .mt-fach-bg-hovertop-26582-01 {
    background: var(--mt-fach-26582-01);
}
:hover > .mt-fach-bg-hovertop-26596-01 {
    background: var(--mt-fach-26596-01);
}
:hover > .mt-fach-bg-hovertop-26588-01 {
    background: var(--mt-fach-26588-01);
}
:hover > .mt-fach-bg-hovertop-26573-01 {
    background: var(--mt-fach-26573-01);
}
:hover > .mt-fach-bg-hovertop-26979-01 {
    background: var(--mt-fach-26979-01);
}
:hover > .mt-fach-bg-hovertop-26967-01 {
    background: var(--mt-fach-26967-01);
}
:hover > .mt-fach-bg-hovertop-26608-01 {
    background: var(--mt-fach-26608-01);
}
:hover > .mt-fach-bg-hovertop-26880-01 {
    background: var(--mt-fach-26880-01);
}
:hover > .mt-fach-bg-hovertop-26931-01 {
    background: var(--mt-fach-26931-01);
}
:hover > .mt-fach-bg-hovertop-26991-01 {
    background: var(--mt-fach-26991-01);
}
:hover > .mt-fach-bg-hovertop-26939-01 {
    background: var(--mt-fach-26939-01);
}

.mt-fach-bg-26727-0 {
    background: var(--mt-fach-26727-0);
}
.mt-fach-bg-26759-0 {
    background: var(--mt-fach-26759-0);
}
.mt-fach-bg-26615-0 {
    background: var(--mt-fach-26615-0);
}
.mt-fach-bg-26582-0 {
    background: var(--mt-fach-26582-0);
}
.mt-fach-bg-26596-0 {
    background: var(--mt-fach-26596-0);
}
.mt-fach-bg-26588-0 {
    background: var(--mt-fach-26588-0);
}
.mt-fach-bg-26573-0 {
    background: var(--mt-fach-26573-0);
}
.mt-fach-bg-26979-0 {
    background: var(--mt-fach-26979-0);
}
.mt-fach-bg-26967-0 {
    background: var(--mt-fach-26967-0);
}
.mt-fach-bg-26608-0 {
    background: var(--mt-fach-26608-0);
}
.mt-fach-bg-26880-0 {
    background: var(--mt-fach-26880-0);
}
.mt-fach-bg-26931-0 {
    background: var(--mt-fach-26931-0);
}
.mt-fach-bg-26991-0 {
    background: var(--mt-fach-26991-0);
}
.mt-fach-bg-26939-0 {
    background: var(--mt-fach-26939-0);
}

/*
.mt-fach-bg {
    background: var(--mt-fach-26962-1);

    background: color(srgb 0.95 0.97 0.89);
    
}
.mt-ds-lastmt-container-item-icon .mt-fach-bg {
    background: white;

    background: color(srgb 0.95 0.97 0.89 / 0.2);
}
    */

/*
.mt-ds-lastmt-container-item {
    background: rgb(250, 250, 250);
}
.mt-ds-lastmt-container-item-icon .mt-fach-bg {
    background: white;
    background: var(--mt-fach-26667-0);
}
*/
/** dashboard */
.mtf-faecher-dashboard-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    /* padding-top: 0.3em; */
    overflow-x: clip;
}
.mtf-faecher-dashboard-column-container.item-allfaecher {
    flex-basis: 65%;
}
.mtf-faecher-dashboard-column-container.item-small {
    flex-basis: 34%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.mtf-faecher-dashboard-item-heading {
    font-weight: bold;
    color: #5d75a0;

    font-size: 1.2em;

    color: #8c99b1;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    font-weight: normal;
}
.mtf-faecher-dashboard-table {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mtf-faecher-dashboard-table-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    border-radius: 5px;
    padding: 2px;
    padding-left: 4px;
}
.mtf-faecher-dashboard-table-row:not(.no-login):hover {
    background: #487fa12e;
}

.mtf-faecher-dashboard-table-cell.cell-left {
    font-size: 1.1em;
    font-weight: bold;
    color: #495877;
}

.mtf-faecher-dashboard-table-cell.cell-right {
    width: 180px;
    min-width: 0;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot {
    border-radius: 3px;
    padding-left: 3px;
    min-width: 0;
    max-width: 100%;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot:hover {
    /* background: #fff; */
    /* box-shadow: 0 4px 12px rgb(0 0 0 / 4%); */
}

/* Single-line ellipsis: flex chain needs min-width:0; title line must not wrap */
.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-lcp-title-line-container,
.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-lcp-title-line,
.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-lcp-title,
.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-lcp-title-span,
.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mt-lcp-title-hover-top-container {
    min-width: 0;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-lcp-title-line {
    flex-wrap: nowrap;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-ratedot {
    flex-shrink: 0;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mtf-lcp-title {
    margin: 0;
    flex: 1 1 auto;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mt-lcp-title-hover-top-container {
    position: relative;
    display: block;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot .mt-lcp-title-hover-content-container {
    display: none;
    position: absolute;
    top: -1px;
    left: -2px;
    z-index: 99;
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-ekp-colorfuldot a.mtf-lcp-a {
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--default-color-mt-dashboard);
}

.mtf-faecher-dashboard-table-cell.cell-right .mt-lcp-title-hover-top-container:hover .mt-lcp-title-hover-content-container {
    display: block;
}

/** übersicht */

.mtf-faecher-container {
    display: flex;
    gap: 6px;
    flex-direction: column;
}
.mtf-faecher-section-wrapper {
}

/* Sticky bigthumbs section */

.mtf-faecher-container.mtf-faecher-flavor-bigthumbs {
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs {
    transition:
        transform 0.25s ease-out,
        opacity 0.2s ease-out;
    margin-bottom: 40px;
    padding-top: 20px;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky {
    position: fixed;
    top: 0; /* Set dynamically via JS */
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    padding: 8px 24px; /* Left/right padding set dynamically via JS to center content */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    animation: slideInSticky 0.25s ease-out;
}
.mtf-faecher-description {
    color: #555;
    color: #323c54;
    line-height: 1.6;
    padding: 4px 40px;
}

@keyframes slideInSticky {
    from {
        transform: translateY(-100%);
        opacity: 0.8;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-name-top-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-name-top {
    font-size: 0.9em;
    letter-spacing: 0.1em;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-section-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 4px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-section-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container {
    flex: 0 0 auto;
    padding: 4px 8px;
    padding-left: 6px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: auto;
    /* Keep every sticky pill the same height whether or not it has an icon. */
    min-height: 32px;
    border-radius: 12px;
    background: rgba(240, 245, 250, 0.8);
    user-select: none;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-link {
    min-height: 24px;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container {
    cursor: pointer;
    border: 1px solid transparent;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container:hover {
    background: rgba(72, 127, 161, 0.08);
    background: linear-gradient(329deg, #c1d7ee, #ecf3fb);
    box-shadow:
        0px 2px 4px rgb(0 0 0 / 4%),
        0 0px 2px rgb(0 0 0 / 8%);
    border: 1px solid rgb(129 157 187 / 58%);
    background: linear-gradient(346deg, rgba(236, 250, 247, 1), rgba(32, 218, 171, 0.09));
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 0px 2px rgb(0 0 0 / 8%); */
    border: 1px solid rgba(120, 181, 226, 0.22);

    background: linear-gradient(346deg, rgba(236, 250, 247, 1), rgba(32, 218, 171, 0.09));
    /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.03), 0 0px 2px rgb(0 0 0 / 8%); */
    border: 1px solid rgba(120, 226, 211, 0.23);
    box-shadow: none;
}
.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container .mtf-faecher-fach-name {
    /* color: rgba(72, 81, 98, 0.93); */
    color: rgb(72 81 98 / 74%);
}
.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container:hover .mtf-faecher-fach-name {
    color: var(--lm-text);
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container.scroll-active {
    background: rgba(72, 127, 161, 0.08);
    background: linear-gradient(346deg, rgba(36, 182, 228, 0.81), rgba(74, 214, 201, 0.52));
    border: 1px solid rgba(72, 127, 161, 0.06);
    background: linear-gradient(346deg, rgba(38, 165, 209, 0.31), rgba(32, 218, 171, 0.16));
    background: linear-gradient(346deg, rgba(38, 165, 209, 0.31), rgba(38, 165, 209, 0.31));
    background: radial-gradient(rgba(38, 180, 190, 0.31) 60%, rgba(38, 165, 209, 0.31) 100%);
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.51) inset,
        0 0 16px rgba(255, 255, 255, 0.51);
    /* border-radius: 6px 6px 0 0; */
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container.scroll-active .mtf-faecher-fach-name {
    color: #487fa1;
    color: rgb(39, 93, 119);
    color: var(--lm-text);
}
/* 
.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-container:hover .mtf-faecher-fach-name {
    color: white;
} */

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-link {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-top-section-container {
    flex-grow: 0;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-top-section-front,
.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-top-section-back {
    min-height: auto;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-icon-container {
    width: 24px;
    height: 24px;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-icon-container img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-name {
    font-size: 0.75em;
    margin-top: 0;
    white-space: nowrap;
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-mtf-bar-container,
.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-fach-fortschritt-container {
    display: none;
}

/* Placeholder to prevent content jump */
.mtf-faecher-bigthumbs-placeholder {
    display: none;
    margin-bottom: 40px;
}

.mtf-faecher-bigthumbs-placeholder.visible {
    display: block;
}

.mtf-faecher-section-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); /* Minimum width 100px, flexible beyond */
    gap: 10px; /* Spacing between items */
    row-gap: 0px;
}
.mtf-faecher-fach-container {
    /*flex: 1 1 calc(10% - 10px); 
  flex: 1 0 calc(13% - 10px);*/
    box-sizing: border-box;
    border-radius: 8px;

    padding: 5px;
    display: flex;
    flex-direction: column;

    height: 100%;
}
.mtf-faecher-fach-container:hover {
    background: #487fa12e;
    box-shadow: var(--default-box-shadow);
}

.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs .mtf-faecher-fach-container:hover {
    background: linear-gradient(329deg, #c1d7ee, #ecf3fb);
}
.mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs .mtf-faecher-fach-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.mtf-faecher-fach-name-top {
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #5d75a0;
    color: #216189;
    /* margin-top: 5px; */
    font-size: 1em;
}
.mtf-faecher-section-collapsed-count {
    font-weight: normal;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-left: 0.5em;
    display: none;
    color: #216189;
    font-size: 0.85em;
}
.mtf-faecher-section-wrapper.mtf-faecher-section-collapsed .mtf-faecher-section-collapsed-count {
    display: inline;
}

/* Section reorder buttons - shown when $withHeading */
.mtf-faecher-fach-name-top-container {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    background: linear-gradient(346deg, rgb(236 250 243 / 83%), rgb(32 184 218 / 9%));
    border: 1px solid rgb(239 255 253 / 80%);
    border-radius: 12px;
    padding: 2px 10px;
    margin-bottom: 6px;
}
.mtf-faecher-section-heading-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mtf-faecher-section-order-btns {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

/* Shared button style: sleek, modern, soft pastels */
.mtf-faecher-collapse-btn,
.mtf-faecher-order-btn,
.mtf-faecher-pin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(220, 232, 232, 0.9);
    background: linear-gradient(180deg, #f8fcfe 0%, #f0f8f9 100%);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    color: #6b8a8f;
}
.mtf-faecher-collapse-btn:hover,
.mtf-faecher-order-btn:hover:not(:disabled),
.mtf-faecher-pin-btn:hover {
    background: linear-gradient(180deg, #e0f4f7 0%, #bee7eb 100%);
    border-color: rgba(190, 231, 235, 0.8);
    box-shadow:
        0 2px 6px rgba(190, 231, 235, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #4a6d72;
}
.mtf-faecher-collapse-btn {
    width: 26px;
    height: 26px;
}
/* Same is-pinned logic: swap light/solid icon for collapsed vs expanded */
.mtf-faecher-collapse-btn .mtf-faecher-collapse-btn-icon.light {
    display: none;
}
.mtf-faecher-collapse-btn .mtf-faecher-collapse-btn-icon.solid {
    display: block;
}
.mtf-faecher-collapse-btn.is-collapsed .mtf-faecher-collapse-btn-icon.solid {
    display: none;
}
.mtf-faecher-collapse-btn.is-collapsed .mtf-faecher-collapse-btn-icon.light {
    display: block;
}
.mtf-faecher-collapse-btn.is-collapsed:hover {
    background: linear-gradient(180deg, #e0f4f7 0%, #bee7eb 100%);
}
/* Collapse/expand via CSS transition (avoids jQuery slideToggle rendering glitches) */
.mtf-faecher-section-container {
    max-height: 5000px;
    overflow: visible;
    opacity: 1;
    transition:
        max-height 0.25s ease-out,
        opacity 0.2s ease-out;
}
.mtf-faecher-section-wrapper.mtf-faecher-section-collapsed .mtf-faecher-section-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
.mtf-faecher-order-btn {
    width: 24px;
    height: 26px;
    font-size: 9px;
}
.mtf-faecher-order-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: #f5f9fa;
    box-shadow: none;
}

/* Pin button (on tile) */
.mtf-faecher-pin-btn {
    width: 26px;
    height: 26px;
    font-size: 12px;
}
.mtf-faecher-pin-btn.is-pinned {
    /* background: linear-gradient(180deg, #e0f4f7 0%, #bee7eb 100%); */
    border-color: rgba(190, 231, 235, 0.8);
    box-shadow:
        0 2px 6px rgba(190, 231, 235, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #4a6d72;
}

/* Pinned section */
.mtf-faecher-pinned-wrapper {
    margin-bottom: 1.5em;
}
.mtf-faecher-pinned-heading {
    font-weight: bold;
    font-size: 0.85em;
    letter-spacing: 0.15em;
    color: #5d75a0;
    margin-bottom: 0.5em;
}

/* Pin on tile (subfach) – sleek info-i style, top-left, visible only on hover */
.mtf-faecher-fach-container {
    position: relative;
}
.mtf-faecher-fach-pin-wrap {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mtf-faecher-fach-container:hover .mtf-faecher-fach-pin-wrap,
.mtf-faecher-fach-pin-wrap.is-pinned {
    opacity: 1;
}
.mtf-faecher-fach-pin-wrap .mtf-faecher-pin-btn-icon.solid {
    display: none;
}
.mtf-faecher-fach-pin-wrap.is-pinned .mtf-faecher-pin-btn-icon.solid {
    display: block;
}
.mtf-faecher-fach-pin-wrap.is-pinned .mtf-faecher-pin-btn-icon.light {
    display: none;
}
/* Pin btn on tile: match info-i sleek style (colorless, rounded) */
.mtf-faecher-fach-pin-wrap .mtf-faecher-pin-btn {
    width: auto;
    height: auto;
    padding: 4px;
    border: none;
    background: #80808024;
    color: #757575;
    border-radius: 6px;
    box-shadow: none;
}
.mtf-faecher-fach-pin-wrap .mtf-faecher-pin-btn svg {
    width: 14px;
    height: 14px;
}
.mtf-faecher-fach-pin-wrap .mtf-faecher-pin-btn:hover {
    background: #f0f0f0;
    color: #bebebe;
}
.mtf-faecher-fach-pin-wrap.is-pinned .mtf-faecher-pin-btn {
    /* background: #80808024; */
    background: none;
    color: orange;
    color: #1c5c8257;
}
.mtf-faecher-fach-pin-wrap.is-pinned .mtf-faecher-pin-btn:hover {
    background: #f0f0f0;
    color: #bebebe;
    color: #1c5d82b9;
}

.mtf-faecher-fach-top-section-container {
    flex-grow: 1;
}
.mtf-faecher-fach-top-section-front,
.mtf-faecher-fach-top-section-back {
    min-height: 100px;
    box-sizing: border-box;
}

.mtf-faecher-section-wrapper:not(.mtf-faecher-flavor-bigthumbs) .mtf-faecher-fach-container:hover .mtf-faecher-fach-top-section-front,
.mtf-faecher-pinned
    .mtf-faecher-section-container:not(.mtf-faecher-flavor-bigthumbs)
    .mtf-faecher-fach-container:hover
    .mtf-faecher-fach-top-section-front,
.mtf-faecher-fach-top-section-container .mtf-faecher-fach-top-section-back {
    display: none;
    flex-direction: column;
}
.mtf-faecher-fach-container .mtf-faecher-fach-top-section-front,
.mtf-faecher-fach-container:hover .mtf-faecher-fach-top-section-back {
    display: flex;
    align-items: center;
    position: relative;
}
.mtf-faecher-fach-top-section-back .mtf-faecher-fach-icon-container {
    height: 40px;
    text-align: center;
}
.mtf-faecher-fach-top-section-back .mtf-faecher-fach-icon-container.icon-big {
    height: auto;
    width: 80%;
    flex-grow: 1;
}
.mtf-faecher-fach-top-section-back .mtf-faecher-fach-icon-container img {
    height: inherit;
}

.mtf-faecher-fach-top-section-back .mtf-faecher-mt-icon {
    height: 16px;
}
.mtf-faecher-fach-back-menu-item.card-top {
    padding-top: 0px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    display: block;
    padding: 0px;
}
.mtf-faecher-fach-link-container {
    padding-bottom: 1px;
}
.mtf-faecher-fach-back-menu-item {
    display: flex;
    align-items: center;
    gap: 1px;
}
.mtf-faecher-container a {
    color: #424c5e;
}
.mtf-faecher-container a:hover {
    color: #424c5e;
}
.mtf-faecher-fach-back-menu-item.mtf-wiederholen .mtsr-main-icon {
    background-image: var(--mtsr-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: 1em;
    margin-right: 7px;
    margin-left: 3px;
}
.mtf-faecher-fach-back-menu-container {
    font-size: 12px;
    color: #424c5e;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.mtf-faecher-fach-back-menu-item {
    padding: 2px 4px;
    border: 1px solid transparent;
}
.mtf-faecher-fach-back-menu-item img {
    height: 12px;
}
.mtf-faecher-fach-back-menu-item:hover {
    background-color: #ffffff45;
    border-radius: 8px;
    box-shadow:
        0 2px 10px 0px rgb(0 0 0 / 4%),
        0 3px 11px rgb(0 0 0 / 4%);
    border: 1px solid #ffffff52;
}
.mtf-faecher-fach-name {
    font-weight: bold;
    font-size: 0.9em;
    color: #4c4c4c;

    color: #424c5e;
    margin-top: 5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.mtf-faecher-fach-mtf-bar-container {
    width: 100%;
    padding: 0 10%;
    height: 2px;
    display: flex;
    justify-content: center;
    margin: 2px 0px;
    margin-bottom: 4px;
}
.mtf-faecher-fach-name-top-container .mtf-faecher-fach-mtf-bar-container {
    width: 100px;
    margin-left: 0.5em;
    padding: 0;
}
.mt-logged-in .mtf-faecher-fach-mtf-bar-container {
    margin-bottom: 8px;
}
.mtf-faecher-fach-mtf-bar-wrapper {
    width: 100%;
    position: relative;
}
.mtf-faecher-fach-mtf-bar-item {
    height: 2px;
    width: 100%;
}
.logged-in .mtf-faecher-fach-mtf-bar-item {
    height: 4px;
}
.mtf-faecher-fach-mtf-bar-back {
    /*background: #5884b2; */

    background: #a0c2e6a8;
}
.mt-logged-in .mtf-faecher-fach-mtf-bar-back {
    background: linear-gradient(325deg, rgb(225 228 232 / 65%), #a0c2e6a8);
    box-shadow: inset 0 2px 3px rgb(0 0 0 / 7%);
}
.mtf-faecher-fach-container:hover .mtf-faecher-fach-mtf-bar-back {
    background: #5884b252;
}
.mtf-faecher-fach-mtf-bar-front {
    position: absolute;
    background-color: #21b76c; /*#15ae90;*/
    background: linear-gradient(37deg, rgb(33 183 108 / 68%), rgb(18 207 112));
    box-shadow:
        0 2px 2px rgb(0 0 0 / 7%),
        0px 0px 6px 1px rgb(46 255 150 / 26%);
    top: 0px;
}

.mt-logged-in .mtf-faecher-fach-mtf-bar-front,
.mt-logged-in .mtf-faecher-fach-mtf-bar-back {
    border-radius: 4px;
}

.mtf-faecher-fach-mtf-bar-front .mtf-faecher-progress-point-icon {
    display: none;
    position: absolute;
    right: -1px;
    top: 2px;
    transform: translateY(-50%) translateX(50%);
    width: 14px;
    height: 14px;
    max-width: 14px;
    box-shadow: var(--default-box-shadow);
    border-radius: 50%;
    filter: grayscale(0.1);
}
.mt-logged-in .mtf-faecher-fach-mtf-bar-front .mtf-faecher-progress-point-icon {
    display: block;
}

/* Duration display within progress bar */
.mtf-faecher-fach-mtf-bar-duration {
    display: block;
    /* font-size: 0.9rem; */
    font-weight: 400;
    color: #6b7280;

    display: flex;
    align-items: center;
    gap: 3px;
}

.mtf-faecher-fach-fortschritt-container {
    /*flex-grow: 1;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-weight: bold;
    /* padding-left: 10%; */
    min-width: 160px;
}
.mt-ds-container .mtf-faecher-fach-fortschritt-container {
    padding-left: 10%;
}
.mtf-faecher-flavor-bigthumbs .mtf-faecher-fach-fortschritt-container {
    padding-left: 10%;
    min-width: auto;
}
.mtf-faecher-flavor-bigthumbs .mtf-faecher-fach-mtf-bar-container {
    margin-top: 6px;
}
.mtf-faecher-scroller-category-header .mtf-faecher-fach-fortschritt-container {
    /* width: 200px;
  max-width: 200px;
  min-width: 140px; */
    /* padding-left: 10%; */
}
.mtf-faecher-scroller-category-header .mtf-faecher-fach-mtf-bar-container {
    padding: 0;
}

.mtf-faecher-fach-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mtf-faecher-icon-info-i {
    margin-left: 0.3em;
    margin-right: -0.6em;
    position: relative;
    top: 3px;
    padding: 0px 6px;
    border-radius: 6px;
    color: #d3d3d3;
    align-self: flex-end;
    cursor: pointer;
    font-size: 12px;
}

.mtf-faecher-container .mtf-faecher-icon-info-i {
    margin-right: 0em;
    top: 0px;
    color: #757575;
    background: #80808024;
    position: absolute;
    padding: 2.5px 8px;
}
.mtf-faecher-icon-info-i:hover {
    background: #f0f0f0;
    color: #bebebe;
}

.mtf-faecher-icon-info-i-tooltip,
.mtf-ratedot-tooltip {
    position: absolute;

    top: calc(100% + 6px);
    left: 50%;
    /* transform: translateX(-50%); */
    transform: translateX(-80px);
    background: #fff;
    color: #555;
    font-size: 13px;

    padding: 8px 14px;
    border-radius: 16px;
    box-shadow:
        0 2px 10px hsl(0 0% 0% / 12%),
        0 1px 3px hsl(0 0% 0% / 8%);
    max-width: 420px;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease 0.1s,
        visibility 0.2s ease 0.1s;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.mtf-faecher-container .mtf-faecher-icon-info-i-tooltip {
    background: #eceff4;
    color: #424c5e;

    transition:
        opacity 0.1s ease 0s,
        visibility 0.1s ease 0s;

    transform: translateX(-35%);
}

.mtf-ratedot-tooltip {
    left: 50%;
    transform: translateX(-50%);
    /* transform: translateX(-80px); */
}

.mtf-ratedot-tooltip-explanation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.mtf-ratedot-tooltip .tooltip-text {
    font-size: 11px;
    letter-spacing: normal;
    color: #6b6b6b;
}
.mtf-ratedot-tooltip i {
    font-size: 1em;
}
.mtf-faecher-icon-info-i:hover .mtf-faecher-icon-info-i-tooltip,
.mtf-ratedot.with-explain:hover .mtf-ratedot-tooltip {
    opacity: 1;
    visibility: visible;
}

.mtf-faecher-icon-info-i-tooltip-images {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    font-size: 20px;
}
.mtf-faecher-icon-info-i-tooltip-img {
    width: 64px;
    height: auto;
}

.mtf-faecher-icon-info-i-tooltip-images-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: gray;
}
.mtf-faecher-icon-info-i-tooltip-images-item-text {
    font-size: 12px;
}
.mtf-faecher-icon-info-i-tooltip-images-item-separator {
    color: #d2d2d2;
    position: relative;
    top: 12px;
}

.mtf-faecher-fach-top-section-front .mtf-faecher-fach-icon-container img {
    width: 80%;
    border-radius: 8px;
}
.mtf-faecher-fach-top-section-front .mtf-faecher-fach-icon-container.mtf-faecher-fach-icon-container-mtlogo img {
    width: 50%;
}
.mtf-faecher-fach-container:hover .mtf-faecher-fach-fortschritt-container {
    color: #5d636f;
}
.mtf-faecher-fach-fortschritt-mtcounter-container {
    display: flex;
    gap: 18px;
    align-items: center;
    color: #797e88;
    font-size: 10px;
    font-size: 12px;
    width: max-content;
    width: auto;
    justify-content: space-between;
}
.mt-ds-container .mtf-faecher-fach-fortschritt-mtcounter-container {
    font-size: 10px;
}
.mtf-faecher-fach-fortschritt-mtcounter-container .mtf-faecher-mt-icon {
    height: 12px;
    display: none;
}
.mtf-faecher-fach-fortschritt-mtcounter-container .mtf-faecher-icon-play {
    font-size: 7px;
    color: #999;
}

/** circle */

.mtf-faecher-container .ko-progress-circle {
    width: 62px;
    height: 60px;
    background-color: #f1f1f1;
    border-radius: 50%;

    box-shadow: 0 0.1em 18px 0 rgb(133 133 133 / 15%);
    border-color: white;

    border: 1px solid #e0e0e0;

    position: relative;
}
.mtf-faecher-container .ko-progress-circle .ko-progress-circle__slice,
.mtf-faecher-container .ko-progress-circle .ko-progress-circle__fill {
    width: 60px;
    height: 60px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    transition: transform 1s;
    border-radius: 50%;
}
.mtf-faecher-container .ko-progress-circle .ko-progress-circle__slice {
    clip: rect(0px, 60px, 60px, 30px);
}
.mtf-faecher-container .ko-progress-circle .ko-progress-circle__slice .ko-progress-circle__fill {
    clip: rect(0px, 30px, 60px, 0px);
    background-color: #1291d4;
}
.mtf-faecher-container .ko-progress-circle .ko-progress-circle__overlay {
    width: 45px;
    height: 45px;
    position: absolute;
    margin-left: 7.5px;
    margin-top: 7.5px;
    background-color: #fbfbfb;
    border-radius: 50%;
}

.mtf-faecher-container .progress-counter {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 999;
    font-size: 1.4em;
    font-weight: bold;
    width: 100%;
    text-align: center;
    text-align: center;
    display: flex;
    justify-content: center;
}

@property --counter-num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

div.progress-counter .counter-num {
    transition: --counter-num 2s;
    counter-set: num var(--counter-num);
    font: 800 20px system-ui;
}

div.counter-num::after {
    content: counter(num);
}

.ko-circle {
    filter: grayscale(1) brightness(2.5);
}

/* CIRCLE END*/

@media screen and (max-width: 900px) {
    .mtf-faecher-dashboard-column-container.item-allfaecher {
        flex-basis: 100%;
    }

    .mtf-faecher-dashboard-container {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .mtf-faecher-section-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media screen and (max-width: 480px) {
    .mtf-faecher-section-wrapper.mtf-faecher-flavor-bigthumbs.sticky .mtf-faecher-section-container {
        max-height: 87px;
        flex-direction: column;
        flex-wrap: wrap;
    }
}

/* Breadcrumbs */
.mtf-fach-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #5b6474;
}

.mtf-fach-breadcrumb-item-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mtf-fach-breadcrumb-item {
    color: inherit;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 6px;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.mtf-fach-breadcrumb-item-wrapper:hover .mtf-fach-breadcrumb-item {
    color: #2c3d5b;
    background-color: rgba(72, 127, 161, 0.12);
}

.mtf-fach-breadcrumb-post-count-wrapper {
    background: #f8f9fa;
    border-radius: 14px;
    color: #8992a4;
}

.mtf-fach-breadcrumb-post-count {
    opacity: 0.7;
    font-size: 0.9em;
    margin-left: 7px;
    margin-right: 2px;
}

.mtf-fach-breadcrumb-item .fa-angle-down {
    opacity: 0.45;
    font-size: 0.95em;
    /* margin-left: 8px; */
    margin-right: 6px;
    top: 0.5px;
    position: relative;
}

.mtf-fach-breadcrumb-post-item {
    display: none;
    opacity: 0;
    visibility: hidden;
}
.mtf-fach-breadcrumb-post-item.visible {
    display: inline;
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.2s ease-in-out forwards;
}

.mtf-fach-breadcrumb-sep {
    color: #9aa4b2;
    font-size: 0.95em;
}
.mtf-fach-breadcrumb-post-item .mtf-fach-breadcrumb-sep {
    margin-right: 4px;
}

.mtf-fach-breadcrumb-dropdown {
    position: absolute;
    top: 100%; /*calc(100% + 6px);*/
    left: 0;
    min-width: 200px;
    max-width: 400px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow:
        0 12px 32px rgba(20, 30, 50, 0.12),
        0 4px 12px rgba(20, 30, 50, 0.08);
    /* padding: 6px 0; */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;
    z-index: 9999999990;
    /* overflow: visible — allow JS-portaled level-2 to escape if needed.
       Rounded corners are preserved by the inner items themselves. */
    overflow: visible;
}

/* JS-driven open state (replaces previous :hover reveal so collision
   detection can run before the dropdown is shown).
   The `.is-overlay` / `.is-open` (on the dropdown itself) selectors handle
   the portaled cases: when the dropdown is moved to <body> the parent's
   `.is-open` can no longer match via `>`, so the JS tags the dropdown
   directly with `.is-open` (always) and additionally `.is-overlay` in
   small-viewport bottom-sheet mode. Portaling level-2 on every viewport is
   required because its level-1 ancestor has `transform: translate*(...)`,
   which creates a containing block and would otherwise trap `position:fixed`
   coordinates relative to level-1 instead of the viewport. */
.mtf-fach-breadcrumb-item-wrapper.is-open > .mtf-fach-breadcrumb-dropdown,
.mtf-fach-breadcrumb-submenu.is-open > .mtf-fach-breadcrumb-dropdown-level2,
.mtf-fach-breadcrumb-dropdown.is-overlay,
.mtf-fach-breadcrumb-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mtf-fach-breadcrumb-dashboard-link {
    justify-content: center;
    padding: 6px 12px !important;
    border-top: 1px solid #eeeeee !important;

    color: #9ea4b0 !important;
    min-height: 32px !important;
}
.mtf-fach-breadcrumb-dashboard-link:hover {
    color: var(--main-a-color-red-hover) !important;
}

.mtf-fach-breadcrumb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    color: #3e4b62;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.15s ease;
    min-width: 100%;
    width: max-content;
    min-height: 40px;
    position: relative;
}
.is-overlay .mtf-fach-breadcrumb-dropdown-level2 > .mtf-fach-breadcrumb-dropdown-item a {
    padding-left: 6px;
}
.level-dashboard .mtf-fach-breadcrumb-dropdown-item {
    display: flex !important;
}

/* Post-list dropdown: shared text column width, then icons column */
.mtf-fach-breadcrumb-dropdown.last-item.has-post-meta {
    display: grid;
    grid-template-columns: max-content auto;
    width: max-content;
    max-width: min(92vw, 780px);
}

.last-item.has-post-meta .mtf-fach-breadcrumb-dropdown-item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    column-gap: 12px;
    padding: 8px 12px;
    min-width: unset;
    width: auto;
    justify-content: unset;
}

.last-item.has-post-meta .mtf-fach-breadcrumb-item-title-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: unset;
    min-width: 0;
    white-space: nowrap;
}

.last-item.has-post-meta .mtf-fach-breadcrumb-item-title-wrapper .mtf-ratedot {
    position: static;
    top: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    font-size: 0.65em;
}

.last-item:not(.has-post-meta) .mtf-fach-breadcrumb-item-title-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.last-item:not(.has-post-meta) .mtf-fach-breadcrumb-item-title-wrapper .mtf-ratedot {
    position: static;
    top: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    font-size: 0.65em;
}

.last-item.has-post-meta .mtf-fach-breadcrumb-item-meta {
    margin-left: 0;
    justify-content: flex-end;
    justify-self: end;
    min-width: max-content;
}

.last-item:not(.has-post-meta) .mtf-fach-breadcrumb-dropdown-item {
    padding: 8px 12px;
}

.mtf-fach-breadcrumb-dropdown .mtf-fach-breadcrumb-notizen-text {
    display: none;
}

.mtf-fach-breadcrumb-item-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: #7a8799;
    font-size: 12px;
    line-height: 1;
}

.mtf-fach-breadcrumb-item-meta .mtsr-als-naechstes-row-meta-marked {
    display: inline-flex;
    align-items: center;
    background: #fcffcb;
    border-radius: 4px;
    padding: 2px 3px;
    padding-right: 5px;
    color: #dcac4e;
}

.mtf-fach-breadcrumb-item-meta .mtsr-als-naechstes-row-meta-marked-icon {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    opacity: 0.7;
}

.mtf-fach-breadcrumb-notizen {
    display: inline-flex;
    align-items: center;
    color: #dcac4e;
    color: #81a87a;
}

.mtf-fach-breadcrumb-notizen .x-icon {
    /* color: #dcac4e;
    -webkit-text-fill-color: #dcac4e; */
}

.mtf-fach-breadcrumb-mtsr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

a.mtf-fach-mtsr-repmode-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.mtf-fach-mtsr-repmode-link .mtsr-info-row-icon-container {
    border: 1px solid transparent;
    transition:
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

a.mtf-fach-mtsr-repmode-link:hover .mtsr-info-row-icon-container.mtsr-colorful-heute {
    background: #b8e8ef;
    border-color: rgb(9 68 121 / 32%);
    box-shadow: 0 1px 4px rgb(9 68 121 / 16%);
}

a.mtf-fach-mtsr-repmode-link:hover .mtsr-info-row-icon-container.mtsr-colorful-due {
    background: #fde68a;
    border-color: rgb(180 83 9 / 32%);
    box-shadow: 0 1px 4px rgb(180 83 9 / 16%);
}

a.mtf-fach-mtsr-repmode-link:focus-visible {
    outline: 2px solid #3093b7;
    outline-offset: 2px;
    border-radius: 999px;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-zukunft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    background: #e8f6f9;
    color: #094479;
    border-radius: 999px;
    padding: 2px 7px;
    flex-shrink: 0;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-zukunft .mtsr-info-row-icon.mtsr-colorful,
.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-zukunft .mtsr-info-row-icon.mtsr-colorful i.mtsr-main-icon {
    color: var(--mtsr-main-gradient, linear-gradient(45deg, rgb(84 182 201) 0%, rgb(9 68 121) 100%));
    background-image: var(--mtsr-main-gradient, linear-gradient(45deg, rgb(84 182 201) 0%, rgb(9 68 121) 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-zukunft .mtsr-breadcrumb-rep-label {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: hsl(202.3deg 61.75% 35.88%);
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-heute {
    background: #c9eff4;
    color: #094479;
    border-radius: 999px;
    padding: 2px 7px;
    gap: 4px;
    flex-shrink: 0;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-heute .mtsr-info-row-icon,
.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-heute .mtsr-info-row-icon i,
.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-heute i {
    color: #094479 !important;
    -webkit-text-fill-color: #094479 !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-heute .mtsr-breadcrumb-rep-label {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-due {
    background: #fef3c7;
    color: #b45309;
    border-radius: 999px;
    padding: 2px 7px;
    gap: 4px;
    flex-shrink: 0;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-due .mtsr-info-row-icon.mtsr-colorful,
.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-due .mtsr-info-row-icon.mtsr-colorful i.mtsr-main-icon {
    color: var(--mtsr-main-gradient);
    background-image: var(--mtsr-main-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-due .ic-time {
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container.mtsr-colorful-due .mtsr-breadcrumb-rep-label {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #b45309;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon-container {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.mtf-fach-breadcrumb-mtsr .mtsr-info-row-icon {
    display: inline-flex;
    align-items: center;
}

.mtf-fach-breadcrumb-mtsr i.mtsr-main-icon {
    margin-right: 0;
    font-size: 0.9em;
}

.mtf-fach-breadcrumb-mtsr .ic-time {
    font-size: 0.85em;
}

.mtf-fach-breadcrumb-mtsr .mtsr-ekp-statusbar-repbadge {
    font-size: 9px;
}

.is-overlay .mtf-fach-breadcrumb-dropdown-item:hover {
    background-color: transparent;
}
.mtf-fach-breadcrumb-dropdown-item:hover,
.is-overlay .mtf-fach-breadcrumb-dropdown-item.is-accordion-open .mtf-fach-breadcrumb-submenu-title {
    background-color: rgba(72, 127, 161, 0.12);
}

.mtf-fach-breadcrumb-dropdown-item.is-current {
    color: #2c3d5b;
    font-weight: 600;
    background-color: rgba(72, 127, 161, 0.08);
    cursor: default;
}

.mtf-fach-breadcrumb-dropdown-group-label {
    display: block;
    padding: 10px 12px 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a8799;
}

.mtf-fach-breadcrumb-dropdown-level1 {
    min-width: 180px;
    overflow: visible;
    user-select: none;
}

.mtf-fach-breadcrumb-dropdown-level2 {
    top: 0;
    left: 100%;
    min-width: 240px;
    margin-left: 0px;
    z-index: 9999999991;
}

.mtf-fach-breadcrumb-submenu {
    position: relative;
    padding: 0;
}
.mtf-fach-breadcrumb-submenu.block-item {
    display: block;
}
.mtf-fach-breadcrumb-dropdown-level1 .block-item:first-child,
.mtf-fach-breadcrumb-dropdown-item:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.mtf-fach-breadcrumb-dropdown-level1 .block-item:last-child,
.mtf-fach-breadcrumb-dropdown-level2 .block-item:last-child,
.mtf-fach-breadcrumb-dropdown-item:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.mtf-fach-breadcrumb-submenu-title {
    display: flex;
    align-items: center;
    gap: 6px;
    /* padding: 8px 12px; */
    padding: 6px 10px;
    color: #3e4b62;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.15s ease;
    /* Fill the whole block-item row so the entire row is the hover /
       pointer target. Without these, the submenu-title is only as wide
       as its text (e.g. "Vorklinik" ≈ 71 px) and hovering the empty
       area of the row hits the wrapper — which isn't in TRIGGER_SEL —
       so the level-2 menu only opens on very precise text hover.
       `min-width: 100%` matches .mtf-fach-breadcrumb-dropdown-item so
       regular items and submenu rows have identical hit areas, and
       `min-height: 40px` gives a comfortable touch target. */
    min-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
}
/* 
.mtf-fach-breadcrumb-submenu-title:hover {
    background-color: rgba(72, 127, 161, 0.12);
} */

/* Level-2 reveal is now driven by JS via `.is-open` on the submenu wrapper
   (see the consolidated `.is-open` rule above). The legacy :hover reveal is
   intentionally removed — collision detection happens before the menu shows. */

.mtf-fach-breadcrumb-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: contain;
}

.mtf-fach-breadcrumb-star {
    color: #f5a623;
    color: #1c5c8257;
    font-size: 0.85em;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}
.mtf-fach-breadcrumb-item-title-wrapper {
    min-width: fit-content;
}

.mtf-fach-lernplaene {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* font-size: 0.8em; */
    color: #666;
    margin-left: 6px;
}
.mtf-fach-lernplaene-item {
    color: #999;
    border: 1px solid #e0e0e0;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
a.mtf-fach-lernplaene-item:hover {
    background: #e8f4fa;
    color: #1a6b8a;
    border: 1px solid transparent;
}
.mtf-fach-lernplaene-sep {
    color: #ccc;
}
.mtf-fach-lernplaene-day {
    font-weight: 400;
    opacity: 0.8;
}
.mtf-fach-lernplaene-has-dropdown {
    position: relative;
}
.mtf-fach-lernplaene-trigger {
    cursor: pointer;
    user-select: none;
}
.mtf-fach-lernplaene-trigger .fa-angle-down {
    opacity: 0.55;
    font-size: 0.95em;
    margin-left: 1px;
}
.mtf-fach-lernplaene-has-dropdown:hover .mtf-fach-lernplaene-trigger {
    background: #e8f4fa;
    color: #1a6b8a;
    border: 1px solid transparent;
}
.mtf-fach-lernplaene-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    min-width: 180px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
}
.mtf-fach-lernplaene-has-dropdown:hover .mtf-fach-lernplaene-dropdown {
    opacity: 1;
    visibility: visible;
}
.mtf-fach-lernplaene-dropdown-item {
    display: block;
    color: #555;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}
a.mtf-fach-lernplaene-dropdown-item:hover,
.mtf-fach-lernplaene-dropdown-item:hover {
    background: #e8f4fa;
    color: #1a6b8a;
}

.mtf-fach-other-faecher {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}
.mtf-fach-other-faecher-trigger {
    color: #bebebe;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    padding: 1px 8px;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
}
.mtf-fach-other-faecher:hover .mtf-fach-other-faecher-trigger {
    color: #1a6b8a;
    border-color: #d0e8f0;
    background: #e8f4fa;
}
.mtf-fach-other-faecher-trigger .fa-angle-down {
    position: relative;
    top: 0.5px;
    margin-left: 1px;
}
.mtf-fach-other-faecher-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    min-width: 200px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
}
.mtf-fach-other-faecher:hover .mtf-fach-other-faecher-dropdown {
    opacity: 1;
    visibility: visible;
}
.mtf-fach-other-faecher-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #555;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
}
a.mtf-fach-other-faecher-item:hover {
    background: #e8f4fa;
    color: #1a6b8a;
}
.mtf-fach-other-faecher-chevron {
    opacity: 0.4;
    font-size: 1.1em;
}

/* =========================================================================
 * Breadcrumb dropdown — collision-aware state classes (added 2026-04)
 * The JS module (`script_frontend-dev-5.js`) sets `position: fixed` inline,
 * adds `.is-open` on the wrapper and one of the state classes below on the
 * dropdown itself. CSS only handles the *look* — never the position.
 * ====================================================================== */

/* Inner scroller — only applied when the dropdown is taller than the
   available space on both sides of the trigger. */
.mtf-fach-breadcrumb-dropdown.is-scrollable {
    overflow-y: auto;
    overscroll-behavior: contain; /* don't scroll the page below */
    -webkit-overflow-scrolling: touch; /* iOS momentum */
    /* Subtle fade hints so the user knows there's more content */
    background-image: linear-gradient(to bottom, #fff 0, transparent 12px), linear-gradient(to top, #fff 0, transparent 12px);
    background-position: top, bottom;
    background-size: 100% 24px;
    background-repeat: no-repeat;
    background-attachment: local, local;
}

/* Vertical flip — dropdown opens UPWARDS from the trigger.
   Shadow direction matches the new origin. */
.mtf-fach-breadcrumb-dropdown.is-flipped-vert {
    transform-origin: bottom left;
    box-shadow:
        0 -12px 32px rgba(20, 30, 50, 0.12),
        0 -4px 12px rgba(20, 30, 50, 0.08);
}

/* Horizontal flip for level-2 — opens to the LEFT of its parent row. */
.mtf-fach-breadcrumb-dropdown-level2.is-flipped-horiz {
    box-shadow:
        -12px 8px 32px rgba(20, 30, 50, 0.12),
        -4px 4px 12px rgba(20, 30, 50, 0.08);
}

/* ---------- Mobile / tiny viewport: bottom-sheet overlay --------------- */
.mtf-fach-breadcrumb-dropdown.is-overlay {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw;
    max-width: none;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25);
    z-index: 2147483000; /* above the fixed breadcrumb bar */
    transform: none !important;
}

/* The last-item post-list dropdown sets `width: max-content` +
   `max-width: min(92vw, 780px)` for desktop popovers (see
   `.mtf-fach-breadcrumb-dropdown.last-item.has-post-meta`). That selector
   out-specifies the base `.is-overlay` rule, so in bottom-sheet mode the
   sheet would shrink to its content width instead of filling the screen.
   Re-assert full-width here (matching `.is-overlay`'s own specificity bump)
   while keeping the grid columns intact. */
.mtf-fach-breadcrumb-dropdown.is-overlay.last-item.has-post-meta {
    width: 100vw;
    max-width: none;
}

/* Backdrop is injected as a real <div class="mtf-fach-breadcrumb-overlay-backdrop">
   appended to <body> by the JS module, so it lives in the root stacking
   context and the portaled dropdown can sit above it reliably. */
@keyframes mtfFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* In overlay mode, level-2 renders inline below its parent row.
   Visibility follows the existing accordion class for consistency with
   the dashboard accordion handler. */
/* In overlay (bottom-sheet) mode, level-2 sub-menus are suppressed by
   default — the bottom-sheet presents the top-level items as direct
   links (see click handler in script_frontend-dev-5.js, which allows
   the first tap on a submenu-title to follow its href in this mode).

   Exception: the dashboard/home crumb's level-1 items (Klinik, Vorklinik,
   Themenblöcke) are pure groupers with no actionable href, so the only
   way to reach the Fächer is via level-2. For `.level-dashboard`, each
   block-item becomes an inline accordion; the JS toggles
   `.is-accordion-open` on the block-item on tap. */
.mtf-fach-breadcrumb-dropdown.is-overlay .mtf-fach-breadcrumb-dropdown-level2 {
    display: none !important;
}

.mtf-fach-breadcrumb-dropdown.is-overlay.level-dashboard .mtf-fach-breadcrumb-submenu.block-item {
    flex-direction: column;
    align-items: stretch;
}

.mtf-fach-breadcrumb-dropdown.is-overlay.level-dashboard
    .mtf-fach-breadcrumb-submenu.block-item.is-accordion-open
    > .mtf-fach-breadcrumb-dropdown-level2 {
    display: flex !important;
    flex-direction: column;
    position: static !important;
    box-shadow: none;
    border-radius: 0;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0;
}

/* Chevron affordance for the dashboard accordion rows in overlay mode.
   These rows (Klinik / Vorklinik / Themenblöcke) are groupers with no
   href — tapping toggles a slide-out accordion rather than navigating.
   A user won't know that without a visible cue, so we render a chevron
   pointing right (›) that rotates 90° to point down when expanded.
   Scoped to `.is-overlay.level-dashboard` because this is the ONLY
   context where submenu-titles behave as accordion toggles; in every
   other context they are real links (desktop hover, non-dashboard
   overlay) and a chevron would be misleading.
   The SVG is inlined to avoid an extra request and to inherit cleanly
   alongside the existing `color: #3e4b62` text tone. */
.mtf-fach-breadcrumb-dropdown.is-overlay.level-dashboard .mtf-fach-breadcrumb-submenu.block-item > .mtf-fach-breadcrumb-submenu-title {
    position: relative;
    padding-right: 32px;
}
.mtf-fach-breadcrumb-dropdown.is-overlay.level-dashboard
    .mtf-fach-breadcrumb-submenu.block-item
    > .mtf-fach-breadcrumb-submenu-title::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e4b62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.mtf-fach-breadcrumb-dropdown.is-overlay.level-dashboard
    .mtf-fach-breadcrumb-submenu.block-item.is-accordion-open
    > .mtf-fach-breadcrumb-submenu-title::after {
    transform: rotate(90deg);
}

/* ---------- Touch-target sizing (WCAG 2.5.8 — 44 × 44 px) -------------- */
@media (hover: none), (pointer: coarse) {
    .mtf-fach-breadcrumb-dropdown a,
    .mtf-fach-breadcrumb-dropdown [role="menuitem"],
    .mtf-fach-breadcrumb-submenu-title {
        min-height: 44px;
    }
}

/* ---------- Focus styling (keyboard navigation) ------------------------ */
.mtf-fach-breadcrumb-dropdown a:focus-visible,
.mtf-fach-breadcrumb-submenu-title:focus-visible,
.mtf-fach-breadcrumb-item:focus-visible {
    outline: 2px solid #0a6cff;
    outline-offset: -2px;
    border-radius: 4px;
}