/* Hamburger-Icon */
.hamburger {
    font-size: 36px;
    cursor: pointer;
    padding: 10px;
    user-select: none;
    display: none; /* Standard: versteckt */
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5000;
}
#hamburger {
    position: absolute;
    top: 20px;   /* Anpassen nach Wunsch */
    right: 50px; /* Anpassen Zeichen weiter nach Links */
    z-index: 5000;
}
/* BOX unter dem Header */
.hamburger-box {
    display: none;
    position: absolute;
    top: 112px;    /* weiter unter dem Header */
    left: 3px;        /* Abstand vom linken Rand */
    width: 280px;  /* Nicht volle Breite volle Breite = 100% */
    background: #ffffff;
    border: 2px solid #d0d0d0; /* Rahmen */
    border-radius: 8px;         /* abgerundete Ecken */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    padding: 20px 25px;
    z-index: 8500;
    flex-direction: column;
    gap: 15px;
    /* SCROLLEN WENN ZU HOCH */
   max-height: 30vh;             /* Höhe maximal 30% der Viewport Höhe*/
   overflow-y: auto;             /* Scrollbalken nur in der Box */
}
.mobile-nav {
    display: none;
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    padding: 15px;
    box-shadow: 0 8px 8px rgba(0,0,0,0.2);
    z-index: 2000;
}
.mobile-nav a {
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}
/* Linksformatiert, keine Boxen */
.hamburger-box a,
.hamburger-box .dropdown-title {
    font-size: 20px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
    text-align: left;
    cursor: pointer;

}
/* Dropdown Inhalte */
.hdropdown-content {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;  /* Dropdown rechts minimal eingerückt*/
}
.hdropdown.open .hdropdown-content {
    display: flex;
}
/* Dropdown Unterlinks */
.hdropdown-content a {
    font-size: 18px;
    font-weight: normal;
    color: #003366;
}
/* BREAKPOINTS                             */

@media (max-width: 950px) {
    #nav {
       display: none; /* desktop aus */
    }
    .hamburger {
        display: block;  /* Hamburger an */
    }
}
@media (min-width: 951px) {
    .hamburger-box {
       display: none !important;
    }
}