/* =========================================================
   Menu Dropdown Button – Styles
   ========================================================= */

.dmd-wrapper {
    position: relative;
    display: inline-block;
}

/* ── Button ── */
.dmd-button {
    background:    var(--dmd-btn-bg, #f4f4f4);
    color:         var(--dmd-btn-text, #1a1a1a);
    font-family:   'Inter', sans-serif;
    border:        none;
    border-radius: var(--dmd-btn-radius, 24px);
    padding:       var(--dmd-btn-pad-v, 12px) var(--dmd-btn-pad-h, 24px);
    font-size:     var(--dmd-btn-font-size, 1.15rem);
    font-weight:   500;
    cursor:        pointer;
    transition:    background 0.25s ease, color 0.25s ease;
    position:      relative;
    z-index:       2;
    line-height:   1.2;
}

/* Button-Zustand wenn Dropdown offen ist (Hover oder Klick) */
.dmd-wrapper.is-open .dmd-button,
.dmd-button:hover {
    background: var(--dmd-btn-bg-active, #ffffff);
    color:      var(--dmd-btn-text-active, #004CFF);
}

/* ── Dropdown-Panel ── */
.dmd-dropdown {
    position:   absolute;
    top:        100%;
    right:      0;
    width:      var(--dmd-dd-width, 180px);
    background: var(--dmd-dd-bg, #F9F9F9);
    border-radius: var(--dmd-dd-radius, 16px);
    box-shadow: 0 16px 40px var(--dmd-dd-shadow, rgba(0,0,0,0.15));
    padding:    var(--dmd-dd-padding, 20px);
    z-index:    1;

    /* Slide-Down + Fade Ausgangszustand: unsichtbar, leicht nach oben verschoben */
    opacity:           0;
    visibility:        hidden;
    transform:         translateY(-8px);
    transform-origin:  top right;
    pointer-events:    none;

    transition:
        opacity    0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.28s;

    margin-top: 8px; /* kleiner Abstand zwischen Button und Dropdown */
}

/* Geöffneter Zustand: slidet nach unten auf, wird sichtbar */
.dmd-wrapper.is-open .dmd-dropdown {
    opacity:        1;
    visibility:     visible;
    transform:      translateY(0);
    pointer-events: auto;
}

/* ── Liste ── */
.dmd-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--dmd-item-gap, 20px);
}

.dmd-list li {
    list-style: none;
}

.dmd-list a {
    display:      block;
    font-family:  'Inter', sans-serif;
    color:        var(--dmd-item-color, #1a1a1a);
    font-size:    var(--dmd-item-font-size, 1.25rem);
    font-weight:  400;
    text-decoration: none !important;
    transition:   color 0.2s ease;
    white-space:  nowrap;
}

.dmd-list a:hover {
    color: var(--dmd-item-hover, #004CFF);
}

/* ── Mobile: Dropdown klappt nach RECHTS auf (statt links) ── */
@media (max-width: 767px) {
    .dmd-dropdown {
        left: 0;
        right: auto;
        transform-origin: top left;
        min-width: 160px;
    }
}