/*
|--------------------------------------------------------------------------
| Haßmersheim Portal - rechtes Dropdown optisch verfeinern
|--------------------------------------------------------------------------
| Nur Optik.
| Keine Links.
| Keine Rollen.
| Keine Menüstruktur.
*/

/* Menü-Button edler */
.hmrd-menu summary {
    position: relative !important;
    overflow: hidden !important;
    padding: 13px 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.36), transparent 30%),
        linear-gradient(135deg, #050b14 0%, #07111f 42%, #0b376d 100%) !important;
    color: #fff !important;
    letter-spacing: -.015em !important;
    box-shadow:
        0 14px 34px rgba(11,55,109,.34),
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 1px 0 rgba(255,255,255,.25) inset !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        filter .18s ease !important;
}

.hmrd-menu summary:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.04) !important;
    box-shadow:
        0 18px 42px rgba(11,55,109,.42),
        0 0 0 1px rgba(255,255,255,.22) inset,
        0 1px 0 rgba(255,255,255,.30) inset !important;
}

.hmrd-menu summary::before {
    width: 26px !important;
    height: 26px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset !important;
}

.hmrd-menu summary::after {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.12) !important;
}

/* Dropdown schmaler und untereinander */
.hmrd-dropdown {
    width: min(520px, calc(100vw - 24px)) !important;
    max-height: min(82vh, 780px) !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top right, rgba(11,55,109,.10), transparent 230px),
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,250,255,.99)) !important;
    border: 1px solid rgba(11,55,109,.18) !important;
    box-shadow:
        0 26px 78px rgba(15,23,42,.24),
        0 0 0 1px rgba(255,255,255,.72) inset !important;
}

/* Aus drei Spalten wird eine saubere Liste untereinander */
.hmrd-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

/* Kopfbereich hübscher */
.hmrd-dropdown-head {
    padding: 6px 6px 16px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(11,55,109,.14) !important;
}

.hmrd-dropdown-head strong {
    font-size: 25px !important;
    color: #07111f !important;
}

.hmrd-dropdown-head span {
    color: #64748b !important;
    font-weight: 650 !important;
}

.hmrd-clock {
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #eef6ff !important;
    color: #0b376d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* Gruppen untereinander als schöne Blöcke */
.hmrd-section {
    border-radius: 22px !important;
    padding: 14px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.92)) !important;
    border: 1px solid rgba(11,55,109,.13) !important;
    box-shadow:
        0 10px 26px rgba(15,23,42,.065),
        0 1px 0 rgba(255,255,255,.8) inset !important;
}

.hmrd-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 2px 9px !important;
    border-bottom: 1px solid rgba(11,55,109,.10) !important;
    font-size: 15px !important;
    color: #07111f !important;
    letter-spacing: -.025em !important;
}

.hmrd-section h2::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #07111f, #0b66c3);
    box-shadow: 0 0 0 4px rgba(11,102,195,.10);
}

/* Links klarer und hochwertiger */
.hmrd-links {
    gap: 7px !important;
}

.hmrd-link {
    position: relative !important;
    padding: 12px 13px 12px 15px !important;
    border-radius: 16px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease !important;
}

.hmrd-link:hover {
    background:
        linear-gradient(180deg, #ffffff, #eef6ff) !important;
    border-color: rgba(11,55,109,.16) !important;
    box-shadow: 0 8px 20px rgba(11,55,109,.085) !important;
    transform: translateX(-2px) !important;
}

.hmrd-link-title {
    font-size: 14.5px !important;
    color: #07111f !important;
    letter-spacing: -.012em !important;
}

.hmrd-link-desc {
    font-size: 12.2px !important;
    color: #64748b !important;
}

/* Aktive Seite sehr deutlich markieren */
.hmrd-link.is-active {
    background:
        linear-gradient(135deg, #07111f 0%, #0b376d 100%) !important;
    border-color: rgba(7,17,31,.55) !important;
    box-shadow:
        0 12px 28px rgba(11,55,109,.28),
        0 0 0 1px rgba(255,255,255,.12) inset !important;
    transform: none !important;
}

.hmrd-link.is-active::before {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 13px;
    font-weight: 950;
}

.hmrd-link.is-active .hmrd-link-title {
    color: #fff !important;
    padding-right: 30px !important;
}

.hmrd-link.is-active .hmrd-link-desc {
    color: rgba(255,255,255,.76) !important;
    padding-right: 30px !important;
}

/* Dropdown Scrollbar hübscher */
.hmrd-dropdown::-webkit-scrollbar {
    width: 11px !important;
}

.hmrd-dropdown::-webkit-scrollbar-track {
    background: #eaf3ff !important;
    border-radius: 99px !important;
}

.hmrd-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0b376d, #145aa3) !important;
    border-radius: 99px !important;
    border: 3px solid #eaf3ff !important;
}

/* Mobile bleibt rechts, aber auch untereinander und schöner */
@media (max-width: 980px) {
    .hmrd-dropdown {
        width: min(440px, 94vw) !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-top-left-radius: 28px !important;
        border-bottom-left-radius: 28px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding: 16px !important;
    }

    .hmrd-dropdown-head {
        padding-right: 66px !important;
    }

    .hmrd-clock {
        display: inline-flex !important;
        margin-top: 8px !important;
    }

    .hmrd-menu[open] summary {
        box-shadow:
            0 14px 34px rgba(11,55,109,.34),
            0 0 0 1px rgba(255,255,255,.18) inset !important;
    }

    .hmrd-menu[open] summary::before {
        background: transparent !important;
        box-shadow: none !important;
    }
}

@media (max-width: 560px) {
    .hmrd-dropdown {
        width: 95vw !important;
        padding: 13px !important;
    }

    .hmrd-section {
        border-radius: 18px !important;
        padding: 12px !important;
    }

    .hmrd-link {
        border-radius: 14px !important;
    }
}