/*
Theme Name:     JFL2022
Description:    
Author:         GSC UG
Template:       spacious

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

#menu-hauptnavigation li {
  display: inline-block;
}
#menu-hauptnavigation li a {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  white-space: nowrap;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.125);
  transition: all 0.225s ease-in;
  padding: 0.6rem 2rem 0.6rem 3rem;
  font-size: var(--p-big);
  overflow: hidden;
  position: relative;
  background-color: #fff;
  box-shadow: none;
  background-color: transparent;
  color: var(--color-white);
  padding: 0.25rem 2rem 0.25rem 2rem;
  z-index: 1;
  position: relative;
}
#menu-hauptnavigation li a:hover {
  cursor: pointer;
}
#menu-hauptnavigation li a:before {
  transition: all 0.225s ease-in;
  display: block;
  content: "";
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-2.5rem) translateY(-50%) rotate(-10deg);
  z-index: 0;
}
#menu-hauptnavigation li a:hover,
#menu-hauptnavigation li a:focus {
  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.125);
}
#menu-hauptnavigation li a:hover:before,
#menu-hauptnavigation li a:focus:before {
  transform: translateX(-1.5rem) translateY(-50%) rotate(-10deg);
}
#menu-hauptnavigation li a:before {
  background-color: var(--color-white);
  transform: translateX(-3rem) translateY(-50%) rotate(-10deg);
  z-index: -1;
}
#menu-hauptnavigation li a:hover,
#menu-hauptnavigation li a:focus {
  color: var(--color-black);
}
#menu-hauptnavigation li a:hover:before,
#menu-hauptnavigation li a:focus:before {
  width: 100%;
  transform: translateX(0) translateY(-50%) rotate(0);
}

#menu-hauptnavigation .sub-menu {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  padding: 1rem 1rem 1rem 0;
}
#menu-hauptnavigation .sub-menu:hover {
  opacity: 1;
  pointer-events: all;
}
#menu-hauptnavigation .sub-menu a {
  color: var(--color-black);
  box-shadow: none;
}
#menu-hauptnavigation .sub-menu a:hover {
  box-shadow: none;
}
#menu-hauptnavigation .menu-item-has-children {
  position: relative;
}
#menu-hauptnavigation .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  pointer-events: all;
}
#menu-hauptnavigation .menu-item-has-children:hover .sub-menu a:hover {
  text-decoration: underline;
}