/* ==========================================================
   OFFCANVAS MENU
   Joomla 6
   ========================================================== */

/* ----------------------------------------------------------
   Joomla-Override
   ---------------------------------------------------------- */

.container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)) {
    background: transparent !important;
}

.container-header nav
 {
    margin-top: 0;}

/* ----------------------------------------------------------
   Overlay
   ---------------------------------------------------------- */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.5);
    z-index: 999;
}

/* ----------------------------------------------------------
   Hamburger Toggle
   ---------------------------------------------------------- */

input#off-canvas-menu {
    display: none;
}

label.off-canvas-menu-label {
    position: relative;
    top: 3px;
    left: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1000;
    transition: .2s;
}

label.off-canvas-menu-label i {
    position: absolute;
    top: 15px;
    left: 0;
    font-size: 24px;
    color: var(--brand-text-color);
    transition: .3s;
}

input#off-canvas-menu:checked ~ label.off-canvas-menu-label i {
    transform: rotate(90deg);
}

input#off-canvas-menu:checked ~ .overlay {
    height: 100%;
    opacity: 1;
}

/* ----------------------------------------------------------
   Offcanvas Container
   ---------------------------------------------------------- */

nav.off-canvas-menu {

    position: fixed;

    top: 0;
    left: 0;

    width: 300px;
    height: 100%;

    padding-top: 60px;

    background: #3a3a3a;

    font-size: 16px;

    transform: translateX(-105%);
    transition: transform .5s;

    box-shadow: 3px 5px 10px rgba(0,0,0,.9);

    border-top: 3px;

    z-index: 1000;
}

input#off-canvas-menu:checked ~ nav.off-canvas-menu {

    transform: translateX(0);

}

/* ----------------------------------------------------------
   allgemeine Übergänge
   ---------------------------------------------------------- */

.off-canvas-menu li {

    transition: .5s;

}

/* ==========================================================
   Menüstruktur
   ========================================================== */

.off-canvas-menu ul {
    margin: 0;
    padding: 0;
}

/* Jeder Menüpunkt */

.off-canvas-menu li {

    position: relative;

    width: 100%;

    margin-left: 0!important;

    display: block;

    list-style: none;

    color: #fff;

    border-top: 1px solid #555;

}
/* Linie aus Template-CSS unterbinden */
.off-canvas-menu .mod-menu>li:after {height:0!important;}

/* unterste Linie */

.off-canvas-menu > ul > li:last-child {

    border-bottom: 1px solid #555;

}

/* erste Linie entfernen */

.off-canvas-menu li:first-child,
.off-canvas-menu > ul > li:first-child {

    border-top: 0;

}

/* Menüpunkte mit Untermenü */

.off-canvas-menu li.parent {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}

/* Link */

.off-canvas-menu a {

    display: block;

    flex: 1;

    padding: 15px 20px;

    color: #fff;

    text-decoration: none;

}

/* Link Hover */

.off-canvas-menu a:hover,
.off-canvas-menu a:focus {

    text-decoration: none;


}

.off-canvas-menu li:hover,
.off-canvas-menu li:focus,
.off-canvas-menu li:active{

    border-bottom: 0;


}

/* Untermenü nimmt komplette Breite ein */

.off-canvas-menu .mod-menu__sub {

    width: 100%;

}

/* Checkboxen innerhalb des Menüs (falls vorhanden) */

.off-canvas-menu input[type="checkbox"] {

    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;

}

/* ==========================================================
   Untermenüs
   ========================================================== */

/* Grundzustand */

.off-canvas-menu .mod-menu__sub {

    position: static !important;

    inset: auto !important;

    width: 100%;

    max-height: 0;

    overflow: hidden;

    border-top: none;

    transition: max-height .5s ease-in-out;

}

/* geöffnet */

.off-canvas-menu .mod-menu__sub.show-menu {

    max-height: 2000px;

    border-top: 1px solid #555;

}

/* erste Unterebene */


.off-canvas-menu .mod-menu__sub > li > a {

    padding-left: 0;

}

/* zweite Ebene */

.off-canvas-menu .mod-menu__sub .mod-menu__sub > li > a {

    padding-left: 0;

}

/* dritte Ebene */

.off-canvas-menu .mod-menu__sub
.mod-menu__sub
.mod-menu__sub
> li > a {

    padding-left: 40px;

}

/* weitere Ebenen */

.off-canvas-menu .mod-menu__sub
.mod-menu__sub
.mod-menu__sub
.mod-menu__sub
a {

    padding-left: 45px;

}

/* ==========================================================
   Toggle-Button
   ========================================================== */

.off-canvas-menu .mod-menu__toggle-sub {

    appearance: none;
    -webkit-appearance: none;

    flex: 0 0 56px;

    width: 56px;
    height: 56px;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;
    box-shadow: none;

    background: transparent;

    color: #fff;

    cursor: pointer;

}

/* Joomla-Pfeil ausblenden */

.off-canvas-menu .mod-menu__toggle-sub .icon-chevron-down {

    display: none;

}

/* Geschlossener Ordner */

.off-canvas-menu .mod-menu__toggle-sub::before {

    content: "\f07b";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    font-size: 22px;

}

/* Geöffneter Ordner */

.off-canvas-menu .mod-menu__toggle-sub[aria-expanded="true"]::before {

    content: "\f07c";

}

/* Hover */

.off-canvas-menu .mod-menu__toggle-sub:hover::before,
.off-canvas-menu .mod-menu__toggle-sub:focus::before {

    opacity: .8;

}