/* =============================================================
   Dazzletic Mega Menu  v1.0.0
   Divi Breakpoints:
     Desktop  > 980px
     Tablet   768px – 980px
     Mobile   < 768px
   ============================================================= */

/* ---------------------------------------------------------
   CSS Custom Properties  (überschreibbar per inline-style)
   --------------------------------------------------------- */
.wpmm-nav {
    --wpmm-accent:       var(--gcid-zbacfzhixd);   
    --wpmm-tab-border:   var(--gcid-zbacfzhixd);   
    --wpmm-panel-bg:     #ffffff;
    --wpmm-dark:         #000000;
    --wpmm-white:        #ffffff;
    --wpmm-shadow:       0 8px 40px rgba(0,0,0,.14);
    --wpmm-radius-pill:  20px;
    --wpmm-dur:          220ms;
    --wpmm-ease:         ease;
}

/* =============================================================
   HAMBURGER  (nur Tablet + Mobile sichtbar)
   ============================================================= */
.wpmm-hamburger {
    display:         none;          /* sichtbar ab ≤980 px via Media Query */
    flex-direction:  column;
    justify-content: space-between;
    width:           26px;
    height:          18px;
    padding:         0;
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           inherit;
}

.wpmm-hamburger__line {
    display:          block;
    width:            100%;
    height:           2px;
    background:       currentColor;
    transition:       transform var(--wpmm-dur) var(--wpmm-ease),
                      opacity   var(--wpmm-dur) var(--wpmm-ease);
    transform-origin: center;
}

.wpmm-hamburger[aria-expanded="true"] .wpmm-hamburger__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.wpmm-hamburger[aria-expanded="true"] .wpmm-hamburger__line:nth-child(2) {
    opacity:   0;
    transform: scaleX(0);
}
.wpmm-hamburger[aria-expanded="true"] .wpmm-hamburger__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* =============================================================
   DESKTOP  NAV-LEISTE
   ============================================================= */
.wpmm-nav {
    position: relative;
    width:    100%;
}

.wpmm-desktop-nav {
    display:            flex;
    flex-wrap:          wrap;
    list-style:         none;
    margin:             0;
    padding:            0 !important;
    gap:                6px;
    align-items:        center;
    align-content:      center;
    justify-content:    space-between;
    border-top:         1px solid var(--wpmm-dark);
    border-bottom:      1px solid var(--wpmm-dark);
    min-height:         50px;    
}

.wpmm-item {
    position: static;
    margin:   0;
    padding:  0;
    list-style: none;
}

/* Pill-Buttons */
.wpmm-item-link {
    display:         inline-flex;
    align-items:     center;
    padding:         5px 15px;
    border:          3px solid var(--wpmm-tab-border);
    border-radius:   var(--wpmm-radius-pill);
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  .09em;
    text-transform:  uppercase;
    color:           var(--wpmm-dark);
    text-decoration: none;
    white-space:     nowrap;
    line-height:     1.4;
    transition:      background-color var(--wpmm-dur) var(--wpmm-ease),
                     color            var(--wpmm-dur) var(--wpmm-ease),
                     border-color     var(--wpmm-dur) var(--wpmm-ease);
}

.wpmm-item-link:hover,
.wpmm-item.is-active > .wpmm-item-link {
    background-color: var(--wpmm-tab-border);
    color:            var(--wpmm-dark);
    border-color:     var(--wpmm-tab-border);
    text-decoration:  none;
}

/* =============================================================
   MEGA PANEL  (Desktop Dropdown)
   ============================================================= */
.wpmm-panel {
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
    background:     var(--wpmm-panel-bg);
    box-shadow:     var(--wpmm-shadow);
    z-index:        9990;
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transform:      translateY(-6px);
    transition:     opacity    var(--wpmm-dur) var(--wpmm-ease),
                    visibility var(--wpmm-dur) var(--wpmm-ease),
                    transform  var(--wpmm-dur) var(--wpmm-ease);
}

.wpmm-item:hover    > .wpmm-panel,
.wpmm-item.is-active > .wpmm-panel,
.wpmm-item:focus-within > .wpmm-panel {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateY(0);
}

.wpmm-panel__inner {
    display:     flex;
    gap:         40px;
    align-items: flex-start;
    max-width:   100%;
    margin:      0 auto;
    padding:     28px 20px 32px;
}

/* Subkategorie-Spalte – wächst in den verbleibenden Platz */
.wpmm-panel__categories {
    flex:      1 1 auto;
    min-width: 170px;
}

.wpmm-subcats {
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            11px;
}

.wpmm-subcats li {
    margin:  0;
    padding: 0;
    list-style:     none;
}

.wpmm-subcat-link {
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  .07em;
    text-transform:  uppercase;
    color:           #1a1a1a;
    text-decoration: none;
    transition:      color var(--wpmm-dur) var(--wpmm-ease);
    line-height:     1.3;
    display:         block;
}

.wpmm-subcat-link:hover {
    color:           var(--wpmm-accent);
    text-decoration: none;
}

/* Artikel-Bereich – nimmt nur den Platz seiner Karten ein */
.wpmm-panel__articles {
    display:         flex;
    gap:             24px;
    flex:            0 0 auto;
    justify-content: flex-start;
    flex-wrap:       wrap;
}

/* =============================================================
   ARTIKEL-KARTE  (Partial)
   ============================================================= */
.wpmm-article {
    flex:      1 1 200px;
    max-width: 300px;
    min-width: 160px;
    position:  relative;
}

/* Stretched link — überdeckt die gesamte Karte */
.wpmm-article__link {
    position: absolute;
    inset:    0;
    z-index:  1;
}

.wpmm-article__img-wrap {
    display:       block;
    overflow:      hidden;
    aspect-ratio:  4 / 3;
    margin-bottom: 10px;
    background:    #e8e8e8;
}

.wpmm-article__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 300ms ease;
}

.wpmm-article:hover .wpmm-article__img {
    transform: scale(1.05);
}

.wpmm-article__title {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin:         0 0 5px;
    line-height:    1.35;
    color:          #1a1a1a;
    transition:     color var(--wpmm-dur);
}

.wpmm-article:hover .wpmm-article__title {
    color: var(--wpmm-accent);
}

.wpmm-article__excerpt {
    font-size:   11px;
    color:       #666;
    margin:      0;
    line-height: 1.55;
}

/* =============================================================
   MOBILE OVERLAY
   ============================================================= */
.wpmm-overlay {
    display:        none;
    position:       fixed;
    inset:          0;
    background:     var(--wpmm-dark);
    z-index:        99999;
    flex-direction: column;
    overflow-y:     auto;
    -webkit-overflow-scrolling: touch;
}

.wpmm-overlay.is-open {
    display: flex;
}

/* Body scroll sperren wenn Overlay offen */
body.wpmm-noscroll {
    overflow: hidden;
}

/* Overlay Header */
.wpmm-overlay__header {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    padding:          14px 20px;
    min-height:       56px;
    position:         sticky;
    top:              0;
    background:       var(--wpmm-dark);
    z-index:          1;
}

.wpmm-overlay__back,
.wpmm-overlay__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      none;
    border:          none;
    color:           var(--wpmm-white);
    cursor:          pointer;
    padding:         0;
    transition:      opacity var(--wpmm-dur);
    flex-shrink:     0;
}

.wpmm-overlay__back:hover,
.wpmm-overlay__close:hover {
    opacity: .7;
}

/* ── Level-Container ── */
.wpmm-level {
    display:        none;
    flex-direction: column;
    flex:           1;
    padding:        0 20px 40px;
}

.wpmm-level.is-active {
    display: flex;
}

.wpmm-level__list {
    list-style: none;
    margin:     0;
    padding:    0;
    width:      100%;
}

.wpmm-level__item {
    margin:  0;
    padding: 0;
}

/* ── Level 1 – Hauptkategorien ── */
.wpmm-level--1 .wpmm-level__item {
    border-bottom: 1px solid #1c1c1c;
}
.wpmm-level--1 .wpmm-level__item:first-child {
    border-top: 1px solid #1c1c1c;
}

.wpmm-level__btn,
.wpmm-level--1 .wpmm-level__link {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    width:            100%;
    padding:          18px 0;
    background:       none;
    border:           none;
    color:            var(--wpmm-white);
    font-size:        16px;
    font-weight:      700;
    letter-spacing:   .06em;
    text-transform:   uppercase;
    text-decoration:  none;
    cursor:           pointer;
    text-align:       left;
    transition:       color var(--wpmm-dur);
    line-height:      1.2;
}

.wpmm-level__btn:hover,
.wpmm-level--1 .wpmm-level__link:hover {
    color: var(--wpmm-accent);
}

/* Kreis-Pfeil Icon */
.wpmm-level__arrow {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            30px;
    height:           30px;
    border:           1.5px solid currentColor;
    border-radius:    50%;
    flex-shrink:      0;
    transition:       border-color var(--wpmm-dur), color var(--wpmm-dur);
}

/* ── Level 2 – Unterkategorien ── */
.wpmm-level__parent-title {
    padding:       10px 0 18px;
    border-bottom: 1px solid #1c1c1c;
    margin-bottom: 6px;
}

.wpmm-level__parent-title a {
    font-size:           20px;
    font-weight:         700;
    letter-spacing:      .08em;
    text-transform:      uppercase;
    color:               var(--wpmm-accent);
    text-decoration:     underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}

.wpmm-level__list--sub {
    padding-top: 6px;
}

.wpmm-level--2 .wpmm-level__item {
    padding: 11px 0;
}

.wpmm-level__link--sub {
    display:         block;
    font-size:       16px;
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    color:           var(--wpmm-white);
    text-decoration: none;
    transition:      color var(--wpmm-dur);
    line-height:     1.2;
}

.wpmm-level__link--sub:hover {
    color: var(--wpmm-accent);
}

/* ── Extra-Bereich (MIXTAPES etc.) ── */
.wpmm-overlay__sep {
    border:     none;
    border-top: 1px solid #2a2a2a;
    margin:     20px 0;
}

.wpmm-overlay__extra {
    margin-top: 4px;
}

/* Hilfreich für Custom Extra-Links via Hook */
.wpmm-extra-link {
    display:         flex;
    align-items:     center;
    gap:             12px;
    font-size:       13px;
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    color:           var(--wpmm-accent);
    text-decoration: none;
    padding:         10px 0;
    transition:      opacity var(--wpmm-dur);
}

.wpmm-extra-link:hover {
    opacity: .8;
}

.wpmm-extra-icon {
    font-size:   20px;
    line-height: 1;
}

/* =============================================================
   TABLET  (Divi: ≤ 980px)
   ============================================================= */
@media (max-width: 980px) {
    .wpmm-hamburger {
        display: flex;
    }

    .wpmm-desktop-nav {
        display: none;
    }
}

/* =============================================================
   MOBILE  (Divi: ≤ 767px)
   ============================================================= */
@media (max-width: 767px) {
    .wpmm-overlay__header {
        padding: 12px 16px;
    }

    .wpmm-level {
        padding: 0 16px 32px;
    }

    .wpmm-level__btn,
    .wpmm-level--1 .wpmm-level__link {
        font-size: 14px;
        padding:   15px 0;
    }

    .wpmm-level__arrow {
        width:  26px;
        height: 26px;
    }

    .wpmm-level__parent-title a {
        font-size: 17px;
    }

    .wpmm-level__link--sub {
        font-size: 14px;
    }

    .wpmm-level--2 .wpmm-level__item {
        padding: 9px 0;
    }
}

/* =============================================================
   FOKUS-STILE  (Accessibility)
   ============================================================= */
.wpmm-item-link:focus-visible,
.wpmm-subcat-link:focus-visible,
.wpmm-level__btn:focus-visible,
.wpmm-level__link:focus-visible,
.wpmm-level__link--sub:focus-visible,
.wpmm-overlay__back:focus-visible,
.wpmm-overlay__close:focus-visible,
.wpmm-article__link:focus-visible,
.wpmm-extra-link:focus-visible {
    outline:        2px solid var(--wpmm-accent);
    outline-offset: 2px;
    border-radius:  2px;
}

/* =============================================================
   DRUCK
   ============================================================= */
@media print {
    .wpmm-nav { display: none; }
}