/* =========================================================
   Megamenü "Termin buchen" – Gesundheitszentrum Neunkirchen
   Kadence Theme · einfügen unter: Design › Customizer › Zusätzliches CSS
   ========================================================= */

:root{
  --mm-green:#008f72;
  --mm-green-dark:#006e58;
  --mm-green-soft:#e8f5f1;
  --mm-text:#1f2d2a;
  --mm-muted:#5c6b67;
}

/* ---------- DESKTOP (ab 1025 px) ---------- */
@media (min-width:1025px){

  /* Bezugspunkt für das Panel = die ganze Menüleiste */
  #primary-menu{ position:relative; }
  #primary-menu > li#menu-item-3822{ position:static; }

  /* Das Panel */
  #primary-menu > #menu-item-3822 > ul.sub-menu{
    left:50% !important;
    top:100%;
    transform:translateX(-50%);
    width:min(1080px, calc(100vw - 40px));
    background:#fff;
    border-radius:0 0 16px 16px;
    border-top:3px solid var(--mm-green);
    box-shadow:0 24px 48px -12px rgba(0,60,48,.28);
    padding:28px 28px 28px 32px;
    grid-template-columns:repeat(3, minmax(0,1fr)) 300px;
    grid-auto-flow:row dense;
    gap:6px 14px;
    align-items:start;
    z-index:1000;
  }

  /* Überschrift links */
  #primary-menu > #menu-item-3822 > ul.sub-menu::before{
    content:"Unser Team – Termin direkt buchen";
    grid-column:1 / 4;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--mm-green);
    padding:0 10px 10px;
    border-bottom:1px solid #e4ece9;
    margin-bottom:8px;
  }

  /* Personen-Kacheln */
  #menu-item-3822 > ul.sub-menu > li{
    width:auto !important;
    border:0 !important;
    grid-column:auto;
  }
  #menu-item-3822 > ul.sub-menu > li > a{
    display:flex !important;
    align-items:center;
    gap:12px;
    width:auto !important;
    padding:10px 10px !important;
    border-radius:12px;
    background:transparent !important;
    color:var(--mm-text) !important;
    font-size:15px;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
    line-height:1.3;
    border:0 !important;
    transition:background .2s, transform .2s;
  }
  #menu-item-3822 > ul.sub-menu > li > a:hover,
  #menu-item-3822 > ul.sub-menu > li > a:focus{
    background:var(--mm-green-soft) !important;
    color:var(--mm-green-dark) !important;
    transform:translateX(3px);
  }

  /* Initialen-Kreis (wird per JS als data-initials gesetzt) */
  #menu-item-3822 > ul.sub-menu > li > a::before{
    content:attr(data-initials);
    flex:0 0 42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--mm-green-soft);
    color:var(--mm-green);
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    transition:background .2s, color .2s;
  }
  #menu-item-3822 > ul.sub-menu > li > a:hover::before{
    background:var(--mm-green);
    color:#fff;
  }

  /* Pfeile/Toggles innerhalb des Panels ausblenden */
  #menu-item-3822 ul.sub-menu .dropdown-nav-toggle,
  #menu-item-3822 ul.sub-menu .dropdown-nav-special-toggle{ display:none !important; }

  /* Unterpunkte (z.B. "Atmen mit Kindern") als kleine Links unter dem Namen */
  #menu-item-3822 > ul.sub-menu > li > ul.sub-menu{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    clip:auto !important;
    height:auto !important;
    overflow:visible !important;
    transform:none !important;
    box-shadow:none !important;
    background:transparent !important;
    width:auto !important;
    padding:0 0 4px 64px;
    margin:-6px 0 0;
    display:block !important;
  }
  #menu-item-3822 > ul.sub-menu > li > ul.sub-menu > li{ border:0 !important; width:auto !important; }
  #menu-item-3822 > ul.sub-menu > li > ul.sub-menu > li > a{
    padding:2px 0 !important;
    width:auto !important;
    background:none !important;
    color:var(--mm-green) !important;
    font-size:13px;
    font-weight:500;
    text-transform:none;
    letter-spacing:0;
    border:0 !important;
    display:block !important;
    white-space:nowrap;
  }
  #menu-item-3822 > ul.sub-menu > li > ul.sub-menu > li > a::before{ content:"→ "; }
  #menu-item-3822 > ul.sub-menu > li > ul.sub-menu > li > a:hover{ text-decoration:underline; }

  /* ---- Rechte Spalte: Betriebliche Gesundheitsförderung ---- */
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817{
    grid-column:4;
    grid-row:1 / span 20;
    align-self:stretch;
    background:linear-gradient(160deg, var(--mm-green) 0%, var(--mm-green-dark) 100%);
    border-radius:14px;
    padding:22px 20px;
    margin-left:10px;
    color:#fff;
  }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817 > a{
    padding:0 0 14px !important;
    color:#fff !important;
    font-size:17px !important;
    line-height:1.3 !important;
    border-bottom:1px solid rgba(255,255,255,.25) !important;
    border-radius:0 !important;
    transform:none !important;
    background:none !important;
  }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817 > a::before{ display:none !important; }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817::before{
    content:"Angebote für Unternehmen";
    display:block;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.75;
    font-weight:600;
    margin-bottom:6px;
  }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817 > ul.sub-menu{
    padding:10px 0 0 !important;
    margin:0 !important;
  }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817 > ul.sub-menu > li > a{
    color:#fff !important;
    font-size:13.5px !important;
    padding:7px 0 7px 18px !important;
    position:relative;
    line-height:1.35;
    opacity:.92;
    white-space:normal;
  }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817 > ul.sub-menu > li > a::before{
    content:"" !important;
    position:absolute; left:0; top:13px;
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.6);
  }
  #menu-item-3822 > ul.sub-menu > li#menu-item-3817 > ul.sub-menu > li > a:hover{ opacity:1; text-decoration:underline; }

  /* Panel öffnen (Hover, Tastatur, Touch) */
  #primary-menu > #menu-item-3822:hover > ul.sub-menu,
  #primary-menu > #menu-item-3822:focus-within > ul.sub-menu,
  #primary-menu > #menu-item-3822.menu-item--toggled-on > ul.sub-menu{
    display:grid !important;
    animation:mmFade .18s ease-out;
  }
  @keyframes mmFade{ from{opacity:0; margin-top:6px} to{opacity:1; margin-top:0} }
}

/* ---------- MOBIL / TABLET (Kadence Off-Canvas-Menü) ---------- */
@media (max-width:1024px){
  #mobile-menu #menu-item-3822 > ul.sub-menu,
  .mobile-navigation li.menu-item-3822 > ul.sub-menu{
    background:var(--mm-green-soft);
    border-radius:12px;
    margin:6px 0 12px;
    padding:6px;
  }
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li > a,
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li > .drawer-nav-drop-wrap > a{
    display:flex !important;
    align-items:center;
    gap:12px;
    padding:10px 12px !important;
    border:0 !important;
    color:var(--mm-text) !important;
    font-weight:600;
  }
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li > a::before,
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li > .drawer-nav-drop-wrap > a::before{
    content:attr(data-initials);
    flex:0 0 36px; height:36px; border-radius:50%;
    display:grid; place-items:center;
    background:#fff; color:var(--mm-green);
    font-size:12px; font-weight:700;
  }
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li{ border:0 !important; }
  .mobile-navigation li.menu-item-3822 > ul.sub-menu ul a{
    color:var(--mm-green) !important;
    font-size:14px;
    padding-left:60px !important;
  }
  .mobile-navigation li.menu-item-3822 > ul.sub-menu .drawer-sub-toggle{ color:var(--mm-green) !important; border:0 !important; }
  /* Firmen-Block auch mobil hervorheben */
  .mobile-navigation li.menu-item-3817{
    background:var(--mm-green);
    border-radius:10px;
    margin-top:6px;
  }
  .mobile-navigation li.menu-item-3817 a,
  .mobile-navigation li.menu-item-3817 button,
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li.menu-item-3817 > .drawer-nav-drop-wrap > a,
  .mobile-navigation li.menu-item-3822 > ul.sub-menu > li.menu-item-3817 .drawer-sub-toggle{ color:#fff !important; }
  .mobile-navigation li.menu-item-3817 > .drawer-nav-drop-wrap > a::before,
  .mobile-navigation li.menu-item-3817 > a::before{ display:none !important; }
  .mobile-navigation li.menu-item-3817 ul a{ padding-left:16px !important; font-weight:400; }
}