@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   Funktionen dropdown — desktop panel + mobile accordion.

   Inherits the nav's existing look: .nav-link is 13px/600 in --gray-600
   with a 980px radius, and .lang-panel sets the panel language (white,
   20px radius, deep shadow, cubic-bezier(.16,1,.3,1)). Both are reused
   here rather than reinvented.

   The nav itself is `position: fixed; height: 60px; z-index: 100`, so the
   panel anchors below it and must sit above the page but not above the nav.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── desktop ── */
.navf { position: relative; display: inline-flex; }

.navf-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--gray-600); background: none; border: none;
  padding: 7px 14px; border-radius: 980px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.navf-trigger:hover,
.navf-trigger[aria-expanded="true"] { color: var(--black); background: var(--gray-50); }
.navf-trigger.active { color: var(--black); }
.navf-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.navf-chev { transition: transform .22s cubic-bezier(.16, 1, .3, 1); flex: none; }
.navf-trigger[aria-expanded="true"] .navf-chev { transform: rotate(180deg); }

.navf-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.98);
  min-width: 268px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.05);
  display: flex; flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
  z-index: 120;
}
/* [hidden] is removed by the script one frame before .open is added, so the
   panel can animate in. Without that it would jump from display:none. */
.navf-panel[hidden] { display: none; }
.navf-panel.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }

.navf-item {
  display: block;
  padding: 9px 14px;
  font-size: 13.5px; font-weight: 550; letter-spacing: -0.01em;
  color: var(--gray-800); text-decoration: none;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.navf-item:hover,
.navf-item:focus-visible { background: var(--gray-50); color: var(--black); outline: none; }
.navf-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* ── mobile: accordion inside the existing drawer ── */
.mobile-menu-link--toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-family: inherit;
  background: none; border: none;
  text-align: left;
  cursor: pointer;
}
.mobile-menu-link--toggle .navf-chev { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.mobile-menu-link--toggle[aria-expanded="true"] .navf-chev { transform: rotate(180deg); }

.mobile-features { display: flex; flex-direction: column; }
.mobile-features[hidden] { display: none; }
.mobile-features-item {
  display: block;
  padding: 10px 0 10px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--gray-600); text-decoration: none;
  border-left: 2px solid var(--gray-100);
  margin-left: 4px;
}
.mobile-features-item:hover,
.mobile-features-item:focus-visible { color: var(--black); border-left-color: var(--accent); }

/* The desktop panel is irrelevant once the drawer takes over. 900px matches
   where the nav collapses to the hamburger. */
@media (max-width: 900px) {
  .navf, .navf-panel { display: none; }
}
@media (min-width: 901px) {
  .mobile-features, .mobile-menu-link--toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navf-panel, .navf-chev, .navf-item { transition: none !important; }
}