/*
 * Themen-Mega-Menü
 * Desktop/Tablet: drei Spalten (Themengebiete › Unterthemen › Begriffe).
 * Mobil: Drilldown – eine Spalte je Ebene, Zurück-Leiste (gesteuert über data-lvl).
 */

/* Breite & Positionierung übernimmt theme.css – genau wie bei „Führung"/„Training":
   themenmenue_nav.js nimmt dem Themen-Punkt die „little"-Klasse, sobald es dieses
   Panel eingesetzt hat; dadurch wird es über die volle Breite der Menüspalte
   dargestellt (theme.css macht das offene <li> „static" und gibt der Dropdown
   width:100% + transform). Solange die feste Liste steht, bleibt „little" erhalten –
   sie braucht die schmale Darstellung (theme.css: width 33%, left 54%).
   Hier nur noch das Aussehen. */
.dropdown-menu.tm-nav {
    max-height: none !important;   /* generische nav-Regel (max-height/overflow) neutralisieren */
    padding: 0;
    border: 1px solid #e2e5e8;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.09);
    overflow: hidden !important;
}

/* Drei-Spalten-Raster – proportional, damit es die volle Breite füllt */
.tm-drill {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(210px, 1.1fr) minmax(260px, 1.6fr);
}
/* Gibt es keine Unterbegriffe, wird die dritte Spalte ausgeblendet. Das Raster bleibt
   bewusst dreispaltig – die ersten beiden Spalten behalten so ihre Breite und springen
   beim Wechsel zwischen Unterthemen nicht. Gesetzt von themenmenue_nav.js. */
.tm-nav.is-noterms .tm-col-terms { display: none; }
.tm-col { min-width: 0; }
.tm-col-cats { background: #f6f7f8; border-right: 1px solid #e2e5e8; padding: 10px 0; }
.tm-col-subs { border-right: 1px solid #e2e5e8; padding: 14px 0; max-height: 520px; overflow-y: auto; }
.tm-col-terms { padding: 14px 24px 20px; max-height: 520px; overflow-y: auto; }

/* Spalte 1: Themengebiete */
.tm-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px 11px 20px;
    font-size: 16px;
    cursor: pointer;
    border-left: 4px solid transparent;
    color: #3b4045;
}
.tm-cat[data-bereich="fuehrung"] { border-left-color: #00477F; }
.tm-cat[data-bereich="training"] { border-left-color: #F08A01; }
.tm-cat:hover { background: #fff; }
.tm-cat.is-active[data-bereich="fuehrung"] { background: #eaeff4; color: #00477F; font-weight: 600; }
.tm-cat.is-active[data-bereich="training"] { background: #fdf1e0; color: #A85E00; font-weight: 600; }
.tm-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tm-cat-count { font-size: 12px; color: #9aa0a6; flex: 0 0 auto; }

/* Tastaturbedienung: Zeilen sind fokussierbar (tabindex in themenmenue_nav.js).
   Ohne sichtbaren Fokus waere nicht erkennbar, wo man sich im Menue befindet.
   :focus-visible zeigt den Rahmen nur bei Tastatur, nicht nach einem Mausklick. */
.tm-cat:focus,
.tm-sub:focus { outline: none; }
.tm-cat:focus-visible,
.tm-sub:focus-visible {
    outline: 2px solid #00477F;
    outline-offset: -2px;
}
.tm-cat[data-bereich="training"]:focus-visible { outline-color: #A85E00; }
.tm-term a:focus-visible {
    outline: 2px solid #00477F;
    outline-offset: 2px;
}

/* Spaltenüberschrift (Unterthemen / Begriffe) */
.tm-col-title {
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #9aa0a6;
    font-weight: 500;
}
.tm-col-subs .tm-col-title { padding: 0 20px 10px; }
.tm-col-terms .tm-terms-title { padding-bottom: 12px; }
/* Bereichsüberschrift in Spalte 1 („Führung" / „Training"), gesetzt von
   themenmenue_nav.js. Der erste Abstand entfällt, damit die Liste nicht einrückt. */
.tm-col-title-sec { margin: 1.5rem 0 0.35rem; padding: 0 20px; }
.tm-cats > .tm-col-title-sec:first-child { margin-top: 0.75rem; }

/* Spalte 2: Unterthemen */
.tm-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 20px;
    font-size: 15px;
    cursor: pointer;
    color: #3b4045;
}
.tm-sub:hover { background: #f6f7f8; }
.tm-sub.is-active[data-bereich="fuehrung"] { background: #eaeff4; color: #00477F; font-weight: 600; }
.tm-sub.is-active[data-bereich="training"] { background: #fdf1e0; color: #A85E00; font-weight: 600; }
.tm-sub-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Oberbegriffe (Spalte 1 und 2): Gibt es eine Themenseite, wird der Name als Link
   ausgegeben; unterstrichen wird er erst beim Ueberfahren – genau wie die Begriffe
   in Spalte 3. Ohne Themenseite bleibt es schlichter Text. Die Zeile behaelt in
   beiden Faellen cursor:pointer (siehe .tm-cat / .tm-sub), weil sie die naechste
   Spalte oeffnet. Die Farbe kommt von der Zeile, damit Aktiv-Zustand und
   Bereichsfarbe weiter greifen. */
.tm-cat-name.is-linked,
.tm-sub-name.is-linked {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.tm-cat-name.is-linked:hover,
.tm-sub-name.is-linked:hover { text-decoration: underline; }
.tm-sub-arrow { font-size: 12px; color: #b3b8bd; flex: 0 0 auto; }

/* Spalte 3: Begriffe */
.tm-terms { column-width: 180px; column-gap: 28px; }
.tm-term { break-inside: avoid; padding: 4px 0; }
.tm-term a { font-size: 15px; line-height: 1.35; text-decoration: none; color: #00477F; }
.tm-term a:hover { text-decoration: underline; }
.tm-col-terms[data-bereich="training"] .tm-term a { color: #A85E00; }
/* Kurzhinweis unter der Überschrift, wenn ein Unterthema keine Unterbegriffe hat. */
.tm-terms-empty { font-size: 15px; color: #6b7075; line-height: 1.5; max-width: 380px; }

/* Fußzeilen-Links */
.tm-col-foot { padding: 14px 20px 6px; }
.tm-col-cats .tm-col-foot { border-top: 1px solid #e2e5e8; margin-top: 10px; }
.tm-terms-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid #eceef0; padding-left: 0; padding-right: 0; }
.tm-col-foot a, .tm-terms-foot a { font-size: 14px; font-weight: 500; text-decoration: none; color: #00477F; }
.tm-col-terms[data-bereich="training"] .tm-terms-foot a { color: #A85E00; }
.tm-col-foot a:hover, .tm-terms-foot a:hover { text-decoration: underline; }

/* Themengebiet ohne Unterthemen (Spalte 2): Kurzhinweis und der direkte Weg zur
   eigenen Themenseite, falls es eine gibt. Der Name steht schon in Spalte 1. */
.tm-subs-empty { padding: 2px 20px 14px; }
.tm-subs-empty-hint { font-size: 14px; color: #9aa0a6; line-height: 1.5; margin-bottom: 14px; }
.tm-subs-empty-link { font-size: 14px; font-weight: 500; text-decoration: none; color: #00477F; }
.tm-subs-empty-link:hover { text-decoration: underline; }
.tm-subs[data-bereich="training"] .tm-subs-empty-link { color: #A85E00; }

/* Zurück-Leiste (nur mobil sichtbar) */
.tm-mob-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f6f7f8;
    border-bottom: 1px solid #e2e5e8;
}
.tm-mob-back {
    font-family: inherit;
    border: 1px solid #d6dade;
    background: #fff;
    border-radius: 3px;
    font-size: 14px;
    padding: 4px 10px;
    cursor: pointer;
    color: #333;
}
.tm-mob-title { font-size: 15px; font-weight: 500; }

.tm-nav[data-bereich="fuehrung"] .tm-mob-bar {
    background: #eaeff4;
    border-bottom-color: #00477F;
}
.tm-nav[data-bereich="training"] .tm-mob-bar {
    background: #fdf1e0;
    border-bottom-color: #F08A01;
}
.tm-nav[data-bereich="fuehrung"] .tm-mob-title { color: #00477F; }
.tm-nav[data-bereich="training"] .tm-mob-title { color: #A85E00; }

/* ---------- Mobil / eingeklappte Navbar (< 992px): Drilldown ---------- */
@media (max-width: 991px) {
    .dropdown-menu.tm-nav {
        left: auto; right: auto;
        width: 100%; max-width: 100%;
        box-shadow: none; border: none;
        flex-direction: column;
    }

    .dropdown-menu.tm-nav.show { display: flex; }
    .tm-drill { display: block; }
    .tm-col { border-right: none; max-height: none; padding: 0; overflow: visible; }
    .tm-col-cats { background: #fff; }

    /* Nur die Spalte der aktuellen Ebene zeigen */
    .tm-nav[data-lvl="0"] .tm-col-subs,
    .tm-nav[data-lvl="0"] .tm-col-terms,
    .tm-nav[data-lvl="1"] .tm-col-cats,
    .tm-nav[data-lvl="1"] .tm-col-terms,
    .tm-nav[data-lvl="2"] .tm-col-cats,
    .tm-nav[data-lvl="2"] .tm-col-subs { display: none; }

    /* .tm-col-cats sitzt auf den Eintraegen, nicht auf der Spalte – beim Drilldown
       blieben die Bereichsueberschriften (Fuehrung / Training) daher ueber der
       leeren Liste stehen. Auf Ebene 0 werden sie weiter gebraucht. */
    .tm-nav[data-lvl="1"] .tm-cats .tm-col-title,
    .tm-nav[data-lvl="2"] .tm-cats .tm-col-title { display: none; }

    .tm-mob-bar { order: -1; }
    .tm-nav[data-lvl="0"] .tm-mob-bar { display: none; }
    .tm-nav[data-lvl="1"] .tm-mob-bar,
    .tm-nav[data-lvl="2"] .tm-mob-bar { display: flex; }

    .tm-cat, .tm-sub { padding: 14px 16px; font-size: 16px; border-bottom: 1px solid #eceef0; }
    .tm-col-subs .tm-col-title { padding: 12px 16px 6px; }
    .tm-col-terms { padding: 14px 16px 18px; }
    .tm-terms { column-width: auto; }
}