/*
 * Patrick Krisch Website
 * Datei: assets/css/ki-mega-menu.css
 * Bereich: gemeinsame Mega-Menüs für Leistungen und KI-Systeme
 * Stand: 2026-09-10
 */

@media (min-width:821px){
  .desktop-nav-group--mega{position:relative}
  .desktop-ki-mega-menu{
    position:absolute;
    top:54px;
    left:50%;
    width:min(760px,calc(100vw - 40px));
    padding:14px;
    border:1px solid #dfe9f3;
    border-radius:16px;
    background:rgba(255,255,255,.99);
    box-shadow:0 24px 64px rgba(7,31,77,.16);
    opacity:0;
    visibility:hidden;
    transform:translate(-58%,10px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
    z-index:75;
  }
  .desktop-nav-group--mega:hover .desktop-ki-mega-menu,
  .desktop-nav-group--mega:focus-within .desktop-ki-mega-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-58%,0);
  }
  .desktop-ki-mega-intro{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:13px;
    align-items:center;
    padding:10px 12px 14px;
    margin-bottom:8px;
    border-bottom:1px solid #e7eef6;
  }
  .desktop-ki-mega-intro-icon,
  .desktop-ki-mega-card-icon{
    display:grid;
    place-items:center;
    border:1px solid #d6e6f5;
    background:linear-gradient(145deg,#f7fcff,#eef6fd);
    color:#0b6fd7;
  }
  .desktop-ki-mega-intro-icon{width:44px;height:44px;border-radius:12px}
  .desktop-ki-mega-intro-icon .ui-icon{width:21px;height:21px}
  .desktop-ki-mega-overview{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:800;
    color:var(--navy);
  }
  .desktop-ki-mega-overview:hover,
  .desktop-ki-mega-overview:focus-visible{color:#007582}
  .desktop-ki-mega-overview .ui-icon{width:15px;height:15px}
  .desktop-ki-mega-intro p{margin:4px 0 0;color:#66768c;font-size:12.5px;line-height:1.45}
  .desktop-ki-mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .desktop-ki-mega-card{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 16px;
    gap:11px;
    align-items:center;
    min-height:76px;
    padding:10px 11px;
    border:1px solid transparent;
    border-radius:11px;
    color:var(--navy);
    transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
  }
  .desktop-ki-mega-card:hover,
  .desktop-ki-mega-card:focus-visible,
  .desktop-ki-mega-card.is-active{
    background:#f3f8fc;
    border-color:#dce9f4;
    color:#006f83;
    transform:translateY(-1px);
  }
  .desktop-ki-mega-card-icon{width:38px;height:38px;border-radius:10px}
  .desktop-ki-mega-card-icon .ui-icon{width:18px;height:18px}
  .desktop-ki-mega-card-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
  .desktop-ki-mega-card-copy strong{font-size:13px;line-height:1.25}
  .desktop-ki-mega-card-copy small{color:#718096;font-size:11.5px;font-weight:500;line-height:1.35}
  .desktop-ki-mega-card-arrow{width:14px;height:14px;color:#6e86a1;transition:transform .18s ease}
  .desktop-ki-mega-card:hover .desktop-ki-mega-card-arrow,
  .desktop-ki-mega-card:focus-visible .desktop-ki-mega-card-arrow{transform:translateX(2px);color:#0b6fd7}
}

@media (max-width:820px){
  .mobile-ki-overview{font-weight:800!important;color:#006f83!important;background:rgba(255,255,255,.45)}
}

@media (max-width:1040px) and (min-width:821px){
  .desktop-ki-mega-menu{
    position:fixed;
    top:54px;
    left:14px;
    right:14px;
    width:auto;
    transform:translateY(10px);
  }
  .desktop-nav-group--mega:hover .desktop-ki-mega-menu,
  .desktop-nav-group--mega:focus-within .desktop-ki-mega-menu{transform:translateY(0)}
  .desktop-ki-mega-card-copy small{font-size:11px}
}

@media (max-width:900px) and (min-width:821px){
  .desktop-ki-mega-menu{left:12px;right:12px;padding:11px}
  .desktop-ki-mega-intro{grid-template-columns:40px minmax(0,1fr);padding:8px 10px 12px}
  .desktop-ki-mega-intro-icon{width:40px;height:40px}
  .desktop-ki-mega-grid{gap:5px}
  .desktop-ki-mega-card{grid-template-columns:34px minmax(0,1fr) 14px;gap:9px;min-height:70px;padding:8px 9px}
  .desktop-ki-mega-card-icon{width:34px;height:34px}
  .desktop-ki-mega-card-copy strong{font-size:12px}
  .desktop-ki-mega-card-copy small{font-size:10.5px}
}