:root {
        --is-small-screen: false;
    }

    .topnav {
        overflow: hidden;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    .push-right {
        margin-left: auto;
    }

    /* Style the links inside the navigation bar */
    .topnav a, .topnav .secondary a {
        float: left;
        display: block;
        padding: 4px 6px;
        text-decoration: none;
    }

    .topnav, .topnav .secondary {
        background-color: #9D7600; /* Hintergrundfarbe des gesamten Menüs */
    }

    .topnav {
        display: flex;
    }

        .topnav a, .topnav .secondary a {
            color: #f2f2f2; /* Textfarbe des Menüs */
        }

        .topnav .menu-title {
            color: black; /* Textfarbe des Menüs */
            padding-left: 4px;
        }

    .secondary a {
        padding: 3px;
        white-space: nowrap;
    }

    /* Im Untermenü alle <a> außer dem ersten, auch nach <div> */
    .secondary > a + a, .secondary > div + a {
        clear: left;
    }

    /* Change the color of links on hover */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }

    .topnav .secondary {
        display: none; /* Versteckt das Untermenü standardmäßig */
        position: absolute; /* Positionierung relativ zum .has-secondary */
        top: 30px; /* Direkt unter dem Eltern-Element */
        left: 0; /* Links am Rand des Eltern-Elements ausrichten */
        padding: 4px 6px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Schatten für besseren Look */
        z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */
    }

        .topnav .secondary.responsive {
            display: block;
            padding-right: 12px;
        }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }

    .has-secondary {
        position: relative; /* Referenzpunkt für das absolute Untermenü */
    }

        .has-secondary:after {
            content: " \25B6";
            color: #2F2F2F;
        }

    .topnav .responsive-secondary {
        position: static;
        display: flow;
    }

    .topnav .secondary.responsive .has-secondary {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: start;
    }

    /* When the screen is less than 600 pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */
    @media screen and (max-width: 600px) {
        :root {
            --is-small-screen: true;
        }

        /*  make font a little larger */
        .topnav {
            font-size: 120%;
            display: block;
        }

        .push-right {
            margin-left: 0;
            margin-top: 12px;
        }

        .topnav a {
            display: none;
        }

            .topnav a.icon {
                float: right;
                display: block;
            }

        /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
        .topnav.responsive {
            position: relative;
        }

            .topnav.responsive a.icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
            }

        .has-secondary:after {
            display: none;
        }

        .has-secondary:before {
            content: "+";
            font-weight: bold;
            font-size: 120%;
        }

        .is-expanded:before {
            content: "-";
            font-weight: bold;
            font-size: 120%;
        }

        .topnav .secondary.responsive .has-secondary {
            display: block;
        }
    }