main{
  padding-left: 25px;
  padding-right: 25px;
  min-height: 100vh;
  position: relative;
}

main img{
  width: 60vw;
   margin: 10px;
   margin-left: 0;
}



@media(max-width: 788px){

main img{
  width:90vw;
}
}

#linkdiv {
    padding: 20px;
    margin-top: 10px;
}

#linkdiv ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

#linkdiv ul ul {
    padding-left: 15px; /* Einrückung der Untermenüs */
    margin-top: 5px;
    margin-bottom: 10px;
}

#linkdiv li { margin-bottom: 8px; }
#linkdiv a { text-decoration: none; display: block; }

/* Styling für den Hamburger-Button */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Abstand zwischen den Balken */
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10000; /* Damit der Button immer anklickbar bleibt */
}

.hamburger-btn .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    /* transition sorgt für die flüssige Animation */
    transition: all 0.3s ease-in-out; 
}

/* =========================================
   DIE ANIMATION: Burger zum Kreuz (X)
   ========================================= */
.hamburger-btn.is-active .bar:nth-child(1) {
    /* Schiebt den oberen Balken nach unten und dreht ihn um 45 Grad */
    transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.is-active .bar:nth-child(2) {
    /* Versteckt den mittleren Balken */
    opacity: 0;
}

.hamburger-btn.is-active .bar:nth-child(3) {
    /* Schiebt den unteren Balken nach oben und dreht ihn um -45 Grad */
    transform: translateY(-8px) rotate(-45deg);
}

/* =========================================
   DESKTOP MODUS (Größer als 788px)
   ========================================= */
@media (min-width: 789px) {
  
    .sticky-nav-container {
      position: sticky;
      top: calc(60px);
      width: max-content;
      height: 100%;
      margin-right: 10px;
      align-items: flex-end;
      right: 0;
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      z-index: 999;
    }

    /* Auf Desktop wollen wir, dass das Kreuz (is-active) beim START angezeigt wird, 
       weil das Menü ja standardmäßig offen ist. 
       Wenn es 'collapsed' (zu) ist, verbergen wir das linkdiv. */
    .sticky-nav-container.collapsed #linkdiv {
        display: none;
    }
    #menu-toggle{
        display: none; 
      }
    main{
      display: flex;
      flex-direction: row;
    }
    #maincontent{
      width: 100%;
    }

    aside a{
        font-weight: bold;
    }
    #linkdiv ul ul {
        border-left: 3px solid #eee;
    }
}

/* =========================================
   MOBILE MODUS (Bis maximal 788px)
   ========================================= */
@media (max-width: 788px) {
    .sticky-nav-container {
        position: fixed; 
        bottom: calc(20px);
        margin-right: 20px; 
        right: 0px;
        z-index: 11000; 
        display: flex;
        flex-direction: column;
        align-items: flex-end; 
    }

    #linkdiv {
        display: none; /* Auf Mobile standardmäßig zu */
        width: 250px;
        max-height: 80vh;
        overflow-y: auto; /* Erlaubt Scrollen, falls die Liste zu lang wird */
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
        background-color: #ffffff;
        border-radius: 8px;
    }

    /* Wenn die Klasse 'open' via JS hinzugefügt wird, erscheint das Dropdown. */
    .sticky-nav-container.open #linkdiv {
        display: block;
    }
    #linkdiv ul ul {
    border-left: 2px solid #eee;
}

}