/* Menü „Lösungen“ im gemeinsamen Header (website/site-header.js). Die Links
   stehen immer im HTML; hier werden sie nur ein- und ausgeblendet. */
.nav-solutions {
  position: relative;
}
.nav-solutions-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
}
.nav-solutions-toggle:hover,
.nav-solutions.open .nav-solutions-toggle {
  color: var(--text);
  background: var(--surface-2);
}
.nav-solutions-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.nav-solutions-chevron {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.nav-solutions.open .nav-solutions-chevron {
  transform: rotate(180deg);
}
.nav-solutions-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: none;
  min-width: 300px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(30, 14, 40, 0.16);
}
/* Unsichtbare Brücke, damit das Menü beim Hinüberfahren offen bleibt. */
.nav-solutions-menu::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto;
  height: 10px;
}
.nav-solutions.open .nav-solutions-menu {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .nav-solutions:hover .nav-solutions-menu {
    display: block;
  }
}
.nav-solutions-group {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
}
/* Viele Branchen: am Desktop zweispaltig, im Handy-Menü bleibt es eine Spalte. */
.nav-solutions-menu-wide {
  min-width: 540px;
}
.nav-solutions-group-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 6px;
}
.nav-solutions-group-wide .nav-solutions-label {
  grid-column: 1 / -1;
}
.drawer-solutions-links .nav-solutions-group-wide {
  grid-template-columns: 1fr;
}
.nav-solutions-label {
  padding: 6px 10px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav .nav-solutions-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}
.nav .nav-solutions-menu a:hover,
.nav .nav-solutions-menu a:focus-visible {
  background: var(--surface-2);
}
.nav .nav-solutions-menu .nav-solutions-all {
  margin-top: 2px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 11px 11px;
  padding-top: 11px;
  color: var(--brand);
}

/* Handy-Menü: „Lösungen“ als aufklappbarer Eintrag. */
.drawer-solutions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--muted);
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}
.drawer-solutions summary::-webkit-details-marker {
  display: none;
}
.drawer-solutions summary .left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-solutions summary:hover,
.drawer-solutions[open] summary {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.drawer-solutions-chevron {
  transition: transform 0.2s ease;
}
.drawer-solutions[open] .drawer-solutions-chevron {
  transform: rotate(180deg);
}
.drawer-solutions-links {
  display: grid;
  gap: 2px;
  padding: 6px 0 6px 44px;
}
.drawer-solutions-links .nav-solutions-group {
  padding-bottom: 4px;
}
.drawer-links .drawer-solutions-links a {
  display: block;
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--text);
  font-weight: 750;
}
.drawer-links .drawer-solutions-links .drawer-solutions-all {
  color: var(--brand);
}