/*
 * Slide-out-Menü am rechten Bildrand (DEHOGA-CI).
 * Eingeklappt nur Icon; bei Hover/Fokus fährt das Label nach links aus.
 * Eigenständiges CSS (kein SCSS-Build), per page.includeCSS eingebunden.
 */
.dehoga-slideout {
    --slideout-bg: #014188;       /* DEHOGA-Blau */
    --slideout-bg-hover: #f16800; /* DEHOGA-Orange (Akzent) */
    --slideout-fg: #ffffff;
    --slideout-size: 52px;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* schmale Items bleiben am rechten Rand, wenn eins ausfährt */
    gap: 4px;
    margin: 0;
    padding: 0;
}

.dehoga-slideout__item,
.dehoga-slideout__item:hover,
.dehoga-slideout__item:focus {
    text-decoration: none; /* globales a:hover-Underline des Sites unterdrücken */
}

/* Icon bleibt am rechten Bildrand fixiert; bei Hover fährt NUR das Label links aus. */
.dehoga-slideout__item {
    position: relative;
    display: block;
    max-width: var(--slideout-size);
    height: var(--slideout-size);
    overflow: hidden;
    padding-left: 1.1rem;
    padding-right: var(--slideout-size); /* Platz für das absolut positionierte Icon rechts */
    line-height: var(--slideout-size);   /* Label vertikal zentrieren */
    background: var(--slideout-bg);
    color: var(--slideout-fg);
    border-radius: 6px 0 0 6px;
    box-shadow: -1px 1px 6px rgba(0, 0, 0, .25);
    transition: max-width .3s ease, background-color .2s ease;
}

.dehoga-slideout__icon {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--slideout-size);
    height: var(--slideout-size);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Icon nach links rücken (mehr Abstand rechts), damit der Scrollbalken am
       rechten Bildrand es nicht verdeckt. */
    padding-right: 14px;
    font-size: 20px;
    line-height: 1;
}

.dehoga-slideout__label {
    white-space: nowrap;
    font-weight: 600;
    font-size: .95rem;
    opacity: 0; /* eingeklappt unsichtbar, damit es nicht über das Icon läuft */
    transition: opacity .2s ease;
}

.dehoga-slideout__item:hover .dehoga-slideout__label,
.dehoga-slideout__item:focus .dehoga-slideout__label,
.dehoga-slideout__item:focus-visible .dehoga-slideout__label {
    opacity: 1;
}

/* Ausfahren bei Hover/Fokus; Akzentfarbe Orange. */
.dehoga-slideout__item:hover,
.dehoga-slideout__item:focus-visible,
.dehoga-slideout__item:focus {
    max-width: 18rem;
    background: var(--slideout-bg-hover);
    color: #fff;
    outline: none;
}

/* Sichtbarer Tastatur-Fokus (a11y). */
.dehoga-slideout__item:focus-visible {
    box-shadow: -1px 1px 6px rgba(0, 0, 0, .25), 0 0 0 3px rgba(241, 104, 0, .45);
}

/* Icons sollen die weiße Schriftfarbe erben (globale Site-Regeln überschreiben). */
.dehoga-slideout__item i {
    color: inherit;
}

/* ---- Mobile-Quick: 4 Icons horizontal in der collapsten Navigation ----
   Standard (Desktop ≥ lg): ausgeblendet, dafür der rechte Slide-out sichtbar. */
.dehoga-mobile-quick {
    display: none;
}

/* Unter dem Navbar-Breakpoint (navbar-expand-lg = 992px): rechten Slide-out
   ausblenden, stattdessen die horizontale Icon-Reihe im Menü zeigen. */
@media (max-width: 991.98px) {
    .dehoga-slideout {
        display: none;
    }

    .dehoga-mobile-quick {
        display: block;
        width: 100%;
        padding: 0;
    }

    .dehoga-mobile-quick__row {
        display: flex;
        justify-content: space-between;
        gap: .5rem;
        padding: .75rem 0;
    }

    .dehoga-mobile-quick__item {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        background: #014188;       /* DEHOGA-Blau */
        color: #ffffff;
        border-radius: 6px;
        font-size: 20px;
        text-decoration: none;
    }

    .dehoga-mobile-quick__item:hover,
    .dehoga-mobile-quick__item:focus {
        background: #013570;       /* dezent dunkleres Blau – KEIN Orange */
        color: #ffffff;
        text-decoration: none;
    }

    .dehoga-mobile-quick__item i {
        color: inherit;
    }
}

/* Der Container-Listenpunkt darf NICHT das Hover-Styling der normalen Menü-Items
   (heller Hintergrund + blauer Strip) übernehmen. Site-Nav-CSS gezielt neutralisieren. */
.dehoga-mobile-quick,
.dehoga-mobile-quick:hover,
.dehoga-mobile-quick:focus,
.dehoga-mobile-quick:focus-within {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dehoga-mobile-quick::before,
.dehoga-mobile-quick::after {
    display: none !important;
}