/* Header über allem */
#site-header { z-index: 1100 !important; }
#mobile-menu-toggle { position: relative; z-index: 1200 !important; pointer-events: auto; }

/* Kontakt-Overlay unter Header, inaktiv nicht klickbar */
#kontakt-dropdown .activity { z-index: 1000 !important; }
#kontakt-dropdown .activity[style*="display: none"],
#kontakt-dropdown .activity:not(.active) { pointer-events: auto !important; }

/* Desktop: .sub-menu animiert via Opacity/Translate */
#site-header .sub-menu{
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
  transition: opacity 260ms cubic-bezier(.22,.61,.36,1), transform 320ms cubic-bezier(.22,.61,.36,1) !important;
  will-change: opacity, transform;
}
#site-header .sub-menu.is-open{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Links in Submenus einfärben */
#site-header .sub-menu a {
  color: rgb(23,131,121)!important;
  text-decoration: none;
}
@media (hover:hover) and (pointer:fine){
  #site-header .sub-menu{
    /* … Positionierung wie gehabt … */
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;

    /* <- HIER nur diese beiden Werte anpassen */
    --content-max: 1200px;   /* kleiner = mehr Rand auf großen Screens */
    --gutter: 28px;          /* größer = mehr Rand auf kleinen Screens */

    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left:  max(var(--gutter), calc((100vw - var(--content-max)) / 2)) !important;
    padding-right: max(var(--gutter), calc((100vw - var(--content-max)) / 2)) !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    gap: 24px !important;

    justify-content: center !important;
    justify-items: center !important;   /* <- wie gewünscht */
    align-content: start !important;
    align-items: start !important;
  }
}
/* Modal ganz oben */
#contact-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important; /* über allem */
  display: none; /* Tailwind 'hidden' toggelt ohnehin, aber sicherheitshalber */
}
#contact-modal.flex { display: flex; } /* Falls kein Tailwind greift */
#contact-modal .contact-panel { max-height: 90vh; overflow:auto; }
#contact-modal .contact-overlay { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* Desktop-Positionierung – Fullwidth Panel + zentrierter Inhalt */
@media (hover:hover) and (pointer:fine){
  #site-header .sub-menu{
    position: fixed !important;
    top: var(--header-h, 64px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;

    /* Full-bleed Hintergrund */
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;

    /* Inhalt wie Container zentrieren */
    --content-max: 1200px;   /* <- an deine Containerbreite anpassen */
    --gutter: 28px;          /* <- Mindest-Rand links/rechts */
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left:  max(var(--gutter), calc((100vw - var(--content-max)) / 2)) !important;
    padding-right: max(var(--gutter), calc((100vw - var(--content-max)) / 2)) !important;

    /* Grid */
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    gap: 24px !important;

    /* Zentrierte Spalten, Inhalte bleiben linksbündig */
    justify-content: center !important;
    justify-items: center !important;   /* <- wie gewünscht */
    align-content: start !important;
    align-items: start !important;

    border-radius: 0 !important;
    margin-top: 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
    z-index: 1000 !important;
  }
  #site-header .sub-menu.is-open{
    transform: translateX(-50%) translateY(0) !important;
  }
  #site-header, #menu-linkesmenue, #menu-rechtesmenue { overflow: visible !important; }
}

/* Texte trotz zentrierter Tracks links ausrichten */
#site-header .sub-menu li,
#site-header .sub-menu a { text-align: left !important; }



/* Mobile/Tablet: einklappen über max-height */
@media (max-width:1024px){
  #site-header .sub-menu{
    position: static !important; left:auto !important; top:auto !important;
    width:100% !important; max-width:100% !important;
    box-shadow:none !important; border-radius:0 !important;
    padding:8px 0 !important; gap:12px !important;

    max-height:0 !important; overflow:hidden !important;
    opacity:1 !important; transform:none !important;
    transition:max-height 280ms cubic-bezier(.22,.61,.36,1) !important;
    pointer-events:none !important;
  }
  #menu-linkesmenue .menu > li.open > .sub-menu,
  #menu-rechtesmenue .menu > li.open > .sub-menu,
  #mobile-menu li.open > .sub-menu{
    max-height:1200px !important; pointer-events:auto !important;
  }

  /* Optional: Intro-Overlays deaktivieren */
  #logo-intro{ display:none !important; }
}
/* Weniger Bewegung */ 
@media (prefers-reduced-motion: reduce)
{ #site-header .sub-menu{ transition:none !important; transform:none !important; } 
}

/* Submenu-Linkfarbe erzwingen: dunkles Türkis */
#site-header .sub-menu a,
#site-header .sub-menu a:link,
#site-header .sub-menu a:visited,
#site-header .sub-menu .current-menu-item > a,
#site-header .sub-menu .current_page_item > a {
  color: rgb(23,131,121) !important;
}

/* Nur Desktop Hover (Mobile bleibt ohne Hover) */
@media (hover:hover) and (pointer:fine){
  #site-header .sub-menu a:hover {
    color: rgb(23,131,121) !important;
    text-decoration: underline;
  }
}