/* ===========================================
   CASCADE MEGA MENU – Styles
   Hier kannst du alle Anpassungen machen.
   =========================================== */

/* ---- Farben & Grössen anpassen ---- */
.cmm-wrapper {
  --base-color: #e7511e;

  /*--cmm-col1-bg: #f5f5f5;*/
  --cmm-col1-bg: oklch(from var(--base-color) l c h);
  --cmm-col1-text: #ffffff;
  /*  --cmm-col1-hover: #ebebeb;*/
  --cmm-col1-hover: oklch(from var(--base-color) calc(l * 0.9) c h);
  --cmm-col1-active-bg: oklch(from var(--base-color) calc(l * 0.9) c h);
  --cmm-col1-active-text: #444444;

  /*--cmm-col2-bg: #e0e0e0;*/
  --cmm-col2-bg: oklch(from var(--base-color) calc(l * 1.1) c h);
  --cmm-col2-text: #ffffff;
  --cmm-col2-hover: oklch(from var(--base-color) calc(l * 0.8) c h);
  --cmm-col2-active-bg: oklch(from var(--base-color) l calc(c * 0.8) h);

  /*  --cmm-col3-bg: #d0d0d0;*/
  --cmm-col3-bg: oklch(from var(--base-color) calc(l * 1.2) c h);
  --cmm-col3-text: #ffffff;
  --cmm-col3-hover: oklch(from var(--base-color) l calc(c * 0.7) h);

  --cmm-border: rgba(0, 0, 0, 0.1);
  --cmm-radius: 6px;
  --cmm-transition: 0.18s ease;

  --cmm-font-size: 20px; /* Desktop Schriftgrösse */

  --cmm-mobile-bg: #f5f5f5;
  --cmm-mobile-text: #fff;
  --cmm-mobile-border: #d8d8d8;
  --cmm-mobile-sub-bg: #ececec;
  --cmm-mobile-sub2-bg: #e2e2e2;
  --cmm-mobile-font-size: 20px; /* Mobile Schriftgrösse */
}

/* ---- Reset ---- */
.cmm-wrapper,
.cmm-wrapper *,
.cmm-wrapper *::before,
.cmm-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.cmm-wrapper ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cmm-wrapper a {
  text-decoration: none !important;
  color: inherit !important;
}

/* ==========================================
   DESKTOP
   ========================================== */

.cmm-desktop {
  display: flex !important;
  width: 100%;
  min-height: 300px;
  border-radius: var(--cmm-radius);
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.13);

  font-family: "Roboto", Helvetica, Arial, Lucida, sans-serif;
}

.cmm-mobile {
  display: none !important;
}

.cmm-col {
  flex: 0 0 33.333%;
  width: 33.333%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.cmm-col-1 {
  background: var(--cmm-col1-bg);
}
.cmm-col-2 {
  background: var(--cmm-col2-bg);
}
.cmm-col-3 {
  background: var(--cmm-col3-bg);
}

.cmm-list {
  width: 100%;
  padding: 6px 0;
}

.cmm-col-2 .cmm-submenu,
.cmm-col-3 .cmm-submenu {
  display: none !important;
}
.cmm-col-2 .cmm-submenu.cmm-active,
.cmm-col-3 .cmm-submenu.cmm-active {
  display: block !important;
}

.cmm-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 22px;
  font-size: var(--cmm-font-size);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid var(--cmm-border);
  line-height: 1.3;
  transition:
    background var(--cmm-transition),
    color var(--cmm-transition);
}

.cmm-list-1 .cmm-link {
  color: var(--cmm-col1-text) !important;
}
.cmm-list-1 .cmm-link:hover {
  background: var(--cmm-col1-hover);
}
.cmm-list-1 .cmm-item.cmm-active > .cmm-link {
  background: var(--cmm-col1-active-bg);
  color: var(--cmm-col1-active-text);
}

.cmm-list-2 .cmm-link {
  color: var(--cmm-col2-text) !important;
}
.cmm-list-2 .cmm-link:hover {
  background: var(--cmm-col2-hover);
}
.cmm-list-2 .cmm-item.cmm-active > .cmm-link {
  background: var(--cmm-col2-active-bg);
}

.cmm-list-3 .cmm-link {
  color: var(--cmm-col3-text) !important;
  font-weight: 400;
}
.cmm-list-3 .cmm-link:hover {
  background: var(--cmm-col3-hover);
}

.cmm-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--cmm-transition);
}
.cmm-link:hover .cmm-arrow,
.cmm-item.cmm-active > .cmm-link .cmm-arrow {
  opacity: 0.9;
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 768px) {
  .cmm-desktop {
    display: none !important;
  }

  .cmm-mobile {
    display: block !important;
    border-radius: var(--cmm-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .cmm-mobile-list {
    list-style: none !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cmm-mobile-level-1 {
    background: var(--cmm-mobile-bg);
  }
  .cmm-mobile-level-2 {
    background: var(--cmm-mobile-sub-bg);
  }
  .cmm-mobile-level-3 {
    background: var(--cmm-mobile-sub2-bg);
  }

  .cmm-mobile-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--cmm-mobile-border);
  }

  .cmm-mobile-link {
    flex: 1;
    padding: 3px 8px; /* abstand eric */
    font-size: var(--cmm-mobile-font-size);
    font-weight: 500;
    color: var(--cmm-mobile-text);
    text-decoration: none !important;
    transition: background var(--cmm-transition);
  }

  .cmm-mobile-link:hover,
  .cmm-mobile-link:active {
    background: rgba(0, 0, 0, 0.05);
  }

  .cmm-mobile-level-2 .cmm-mobile-link {
    padding-left: 32px;
    font-weight: 400;
  }
  .cmm-mobile-level-3 .cmm-mobile-link {
    padding-left: 50px;
    font-weight: 400;
  }

  .cmm-mobile-toggle {
    flex-shrink: 0;
    width: 52px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--cmm-mobile-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #999;
    transition: background var(--cmm-transition);
  }

  .cmm-mobile-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  .cmm-mobile-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.22s ease;
  }
  .cmm-mobile-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  .cmm-mobile-sub[hidden] {
    display: none !important;
  }
}