/* Menu for Hundeschule Oetwil am See © codesigns */


#menu ul { margin: 0px; padding: 0px; }
#menu li { margin: 0px; padding: 0px; list-style: none; }
#menu li a { color: #000000; font-weight: 300; padding: 0px 0px 10px 0px; transition: .3s linear; display: block; }

#menu li:hover a,
#menu li.active a { color: var(--blau); }


#links ul { margin: 0px; padding: 0px; }
#links li { margin: 0px; padding: 0px 0px 10px 0px; list-style: none; }
#links li a { display: inline-block; margin-top: 0px; background: url(../images/link.svg) no-repeat scroll 0 9px; background-size: 6px 10px; padding: 0px 0px 0px 14px; color: var(--dunkelblau); transition: .3s linear; }
#links li:hover a { color: var(--blau); }




[data-id="maximenuck120"].mobilemenuck { background: var(--blau); }
[data-id="maximenuck120"] .mobilemenuck-bar-title,
[data-id="maximenuck120"] .mobilemenuck-title { background: var(--blau); }
[data-id="maximenuck120"] .mobilemenuck-bar-button { padding-top: 4px; background-color: var(--blau); }
[data-id="maximenuck120"] .mobilemenuck-item > .level1 { border-radius: 0px; margin: 0px; padding: 10px 15px; border-bottom: 1px solid #ffffff; background: var(--blau); transition: .3s linear; }
[data-id="maximenuck120"] .mobilemenuck-item > .level1 a { font-size: 18px; font-weight: 300; }
[data-id="maximenuck120"] .mobilemenuck-item > .level1:not(.headingck):hover, [data-id="maximenuck120"] .mobilemenuck-item > .level1.open { background: var(--hellblau); }

[data-id="maximenuck120"] .mobilemenuck-item > .level2 { border-radius: 0px; margin: 0px; padding: 10px 15px; border-bottom: 1px solid #ffffff; background: var(--hellblau); transition: .3s linear; }
[data-id="maximenuck120"] .mobilemenuck-item > .level2 a { font-size: 18px; font-weight: 300; }

[data-id="maximenuck120"] .mobilemenuck-togglericon::after { background: url(../images/plus.svg) no-repeat scroll center center; background-size: 15px 15px; content: ""; border-radius: 0px; margin: 0px 15px 0px 0px; padding: 0px; width: 15px; }
.mobilemenuck .open .mobilemenuck-togglericon::after { background: url(../images/minus.svg) no-repeat scroll center center; background-size: 15px 15px; content: ""; }

.maximenuck2 { padding-top: 5px; }

#impress ul { margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 15px; }
#impress li { margin: 0px; padding: 0px; list-style: none; font-size: 16px; }
#impress li a { color: #ffffff50; font-weight: 300; transition: .3s linear; }
#impress li:hover a,
#impress li.active a { color: #ffffff; }




@media(min-width:720px)
{
    #menu ul { display: flex; flex-wrap: wrap; gap: 35px; }
    #menu ul ul { flex-direction: column; gap: 5px; }

    #menu li a { padding: 5px 0px 6px 0px; color: #ffffff; }
    #menu li li a { padding: 5px 15px; background: var(--blau); color: #ffffff; }
    #menu li:hover li a { color: #ffffff; }
    #menu li li:hover a { background: var(--hellblau); }

    #menu li:hover a,
    #menu li.active a { color: var(--hellblau); }
}


@media(min-width:1020px)
{
    #menu ul { gap: 35px; justify-content: end; }
}