/* ==========================================================================
   2. TRIGGER-BAR (DREIECK-LEISTE) & INFO-TEXT - REPARIERT FÜR BUTTONS
   ========================================================================== */
#nav-trigger-bar, 
button#nav-trigger-bar {
    display: block !important;    /* Verhält sich exakt wie dein originales DIV */
    width: 18rem;
    margin: 1.3rem 0 0;
    padding: 10px;
    background: #f5f5f5;          /* Dein grauer Balkenhintergrund */
    color: #000;
    text-align: left;
    cursor: pointer;
    user-select: none;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;           /* Ermöglicht dem Info-Text die absolute Orientierung */
    
    /* Radikaler Browser-Standard-Reset für Buttons */
    border: none !important;
    outline: none !important;
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* ERZWINGT DAS VISUELLE DREIECK */
#nav-trigger-bar .dreieck,
button#nav-trigger-bar .dreieck {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 14px solid #000000 !important; /* Erzeugt das nach unten zeigende schwarze Dreieck */
    vertical-align: middle;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.4s ease;
}

/* Dreht das Dreieck um, wenn das Menü offen ist */
#nav-trigger-bar.offen .dreieck,
button#nav-trigger-bar.offen .dreieck {
    transform: rotate(180deg);
}

/* Der versteckte Schriftzug "Navigation öffnen" im Normalzustand */
#nav-trigger-bar .dreieck::after,
button#nav-trigger-bar .dreieck::after {
    content: "Hyperdesk öffnen";
    position: absolute;
    left: 40px; /* Setzt den Text rechts neben das Dreieck */
    top: 50%;
    transform: translateY(-50%); /* Zentriert den Text exakt vertikal */
    white-space: nowrap; /* Verhindert einen ungewollten Zeilenumbruch */
    font-size: 0.9rem;
    font-family: sans-serif;
    letter-spacing: 0.5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Einblenden bei Hover – NUR wenn geschlossen UND nicht per JS gesperrt */
#nav-trigger-bar:not(.offen) .dreieck:not(.sperre):hover::after,
button#nav-trigger-bar:not(.offen) .dreieck:not(.sperre):hover::after {
    opacity: 1;
    visibility: visible;
}

/* Optional: Zeigt Tastatur-Nutzer beim Durchtabben einen dezenten Fokus-Rahmen */
button#nav-trigger-bar:focus-visible {
    outline: 1px dashed #000 !important;
}

/* ==========================================================================
   3. NAVIGATION (ANIMIERTER GRID-CONTAINER)
   ========================================================================== */
#nav-container {
    display: grid;
    grid-template-rows: 0fr; /* Standardmäßig geschlossen (0 Zeilenhöhe) */
    transition: grid-template-rows 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastischer Federeffekt */
    overflow: hidden;
    background: #f5f5f5;
    margin: 1.3rem 0 0;
    width: 18rem;
    vertical-align: top;
}

#mainnavigation {
    min-height: 0; /* Zwingend erforderlich für den Grid-Trick */
}

/* Wenn die Klasse 'offen' aktiv ist, klappt das Grid auf '1fr' auf */
#nav-container.offen {
    grid-template-rows: 1fr;
}