/*
 * Hauptnavigation - Aufbau und Verhalten.
 *
 * Ersetzt zwei Fremd-Stylesheets:
 *   Contrib/jQuerySuperfish-1.7.7/dist/css/superfish.css
 *   Contrib/SlickNav-1.0.7/dist/slicknav.min.css
 *
 * Uebernommen ist daraus nur, was das Aussehen der Seite wirklich traegt. Beide
 * Stylesheets brachten ausserdem eine komplette Beispiel-Optik mit (blaue
 * Menuebalken, graue Knoepfe, Schlagschatten), die Base.css ohnehin Zeile fuer
 * Zeile ueberschrieben hat. Die faellt hier weg.
 *
 * Die Farben, Abstaende und Schriften stehen unveraendert in Base.css. Diese
 * Datei regelt nur Aufbau und Auf-/Zuklappen - deshalb wird sie *vor* Base.css
 * geladen, damit deren Regeln weiterhin gewinnen.
 */

/* ---------------------------------------------------------------- Desktop */

.navi-main .sf-menu,
.navi-main .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navi-main .sf-menu li {
    position: relative;
}

.navi-main .sf-menu ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    min-width: 12em;          /* lange Eintraege bestimmen die Breite */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}

.navi-main .sf-menu ul ul {
    top: 0;
    left: 100%;
}

.navi-main .sf-menu a {
    display: block;
    position: relative;
}

.navi-main .sf-menu li {
    white-space: nowrap;
}

/*
 * Ohne JavaScript oeffnet das Untermenue rein ueber :hover - so war es auch
 * bei Superfish, dessen Kern genau diese eine Regel war. Sobald das eigene
 * Skript laeuft, setzt es sf-js-enabled und uebernimmt.
 */
.navi-main .sf-menu:not(.sf-js-enabled) li:hover > ul {
    display: block;
}

/*
 * Mit JavaScript: ueberblenden statt hart umschalten, und beim Verlassen erst
 * nach einer halben Sekunde schliessen. Das sind genau die Werte, mit denen
 * Superfish hier aufgesetzt war - speed 200, speedOut 200, delay 500.
 *
 * visibility statt display, damit ueberhaupt ueberblendet werden kann;
 * visibility haelt das geschlossene Untermenue zugleich aus der
 * Tastaturreihenfolge und aus dem Vorlesebaum heraus.
 */
.navi-main .sf-menu.sf-js-enabled ul {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease 500ms, visibility 0s linear 700ms;
}

.navi-main .sf-menu.sf-js-enabled li:hover > ul,
.navi-main .sf-menu.sf-js-enabled li.sfHover > ul {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease 0s, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .navi-main .sf-menu.sf-js-enabled ul,
    .navi-main .sf-menu.sf-js-enabled li:hover > ul,
    .navi-main .sf-menu.sf-js-enabled li.sfHover > ul {
        transition: none;
    }
}

/* Der Pfeil am Elternpunkt. Farbe und Lage kommen aus Base.css. */
.navi-main .sf-arrows .sf-with-ul:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
}

/* ------------------------------------------------------------------ Mobil */

.navi-main .slicknav_menu,
.navi-main .slicknav_menu * {
    box-sizing: border-box;
}

/*
 * Grundmass und Polster der Leiste. Base.css setzt darueber Hintergrund und
 * padding-bottom: 0, verlaesst sich fuer den Rest aber auf diese Werte - sie
 * kamen bisher aus slicknav.min.css. Ohne sie war die Leiste 19 px flacher:
 * 5 px vom Menue oben, zweimal 7 px (.438em) vom Knopf. Gemessen am
 * 2026-09-25, jede Seite war mobil genau um diesen Betrag kuerzer.
 */
.navi-main .slicknav_menu {
    font-size: 16px;
    padding: 5px;
}

.navi-main .slicknav_menu:before,
.navi-main .slicknav_menu:after {
    content: ' ';
    display: table;
}

.navi-main .slicknav_menu:after {
    clear: both;
}

.navi-main .slicknav_btn {
    position: relative;
    display: block;
    float: right;
    vertical-align: middle;
    cursor: pointer;
    padding: .438em .625em;
    line-height: 1.125em;
}

.navi-main .slicknav_menu .slicknav_menutxt {
    display: block;
    float: left;
}

.navi-main .slicknav_menu .slicknav_icon {
    float: left;
    width: 1.125em;
    height: .875em;
    margin: .188em 0 0 .438em;
}

.navi-main .slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: .125em;
    border-radius: 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
    background-color: #fff;
}

.navi-main .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
    margin-top: .188em;
}

.navi-main .slicknav_nav,
.navi-main .slicknav_nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
}

.navi-main .slicknav_nav li,
.navi-main .slicknav_nav ul {
    display: block;
}

.navi-main .slicknav_nav ul {
    margin: 0 0 0 20px;
}

.navi-main .slicknav_nav a,
.navi-main .slicknav_nav .slicknav_row {
    display: block;
    text-decoration: none;
}

/*
 * Die Zeile eines Elternpunktes. SlickNav baute hier ein <a> in ein <a> -
 * ungueltiges HTML, und Vorlesewerkzeuge stolpern darueber. Hier ist es ein
 * div; damit Base.css weiter greift, traegt es dieselben Klassen, und die
 * Polsterregel dort gilt ueber .slicknav_row mit.
 */
.navi-main .slicknav_nav .slicknav_row {
    cursor: pointer;
}

.navi-main .slicknav_nav .slicknav_item a {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
}

/* Der Aufklapp-Pfeil ist ein Knopf - er bekommt keine Knopfoptik. */
.navi-main .slicknav_nav .slicknav_arrow {
    float: right;
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}