/*

 * Fachkreiseportal mobile taskbar + menu (Figma Mobile Navbar / Mobile Menu).

 */



:root {

  --fkp-portal-nav-magenta: #de006a;

  --fkp-portal-nav-white: #ffffff;

  --fkp-portal-nav-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

}



.fkp-mobile-navbar,

.fkp-mobile-menu {

  display: none;

}



body.fkp-portal-mobile-nav-open {

  overflow: hidden;

  touch-action: none;

}



/* ── Mobile taskbar ── */



.fkp-mobile-navbar {

  position: relative;

  z-index: 120;

  flex-direction: column;

  align-items: flex-start;

  gap: 10px;

  padding: 20px 16px;

  background: var(--fkp-portal-nav-magenta, var(--fkp-magenta, #de006a));

}



.fkp-mobile-navbar__inner {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  width: 100%;

}



.fkp-mobile-navbar__logo {

  display: block;

  flex: none;

}



.fkp-mobile-navbar__logo img {

  display: block;

  width: clamp(110px, 36vw, 140px);

  max-width: 100%;

  height: auto;

}



.fkp-mobile-navbar__toggle {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 32px;

  height: 32px;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

}



.fkp-mobile-navbar__icon {

  display: block;

}



body.fkp-portal-mobile-nav-open .fkp-mobile-navbar {

  display: none;

}



/* ── Mobile menu overlay ── */



.fkp-mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 100001;

  isolation: isolate;

  flex-direction: column;

  height: 100dvh;

  max-height: 100dvh;

  overflow: hidden;

  background: var(--fkp-portal-nav-magenta, var(--fkp-magenta, #de006a));

}



.fkp-mobile-menu__header {

  flex: 0 0 auto;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 20px 16px;

  gap: 10px;

  background: var(--fkp-portal-nav-magenta, var(--fkp-magenta, #de006a));

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);

}



.fkp-mobile-menu__header-inner {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  width: 100%;

}



.fkp-mobile-menu__logo {

  display: block;

  flex: none;

}



.fkp-mobile-menu__logo img {

  display: block;

  width: 140px;

  height: auto;

}



.fkp-mobile-menu__close {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  flex: none;

  width: 24px;

  height: 24px;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

}



.fkp-mobile-menu__close svg {

  display: block;

  width: 24px;

  height: 24px;

}



.fkp-mobile-menu__scroll {

  flex: 1 1 auto;

  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 32px;

  padding: 32px 24px 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  touch-action: pan-y;

}



.fkp-mobile-menu[hidden] {

  display: none !important;

}



.fkp-mobile-menu__column {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 24px;

  width: 100%;

  flex: 1 0 auto;

}



.fkp-mobile-menu__nav {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  width: 100%;

  gap: 0;

}



.fkp-mobile-menu__link {

  box-sizing: border-box;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  gap: 4px;

  padding: 12px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

  font-family: var(--fkp-portal-nav-font, var(--fkp-navbar-font, Arial, sans-serif));

  font-size: 18px;

  font-weight: 700;

  line-height: 140%;

  color: var(--fkp-portal-nav-white, #ffffff);

  text-decoration: none;

}



.fkp-mobile-menu__link + .fkp-mobile-menu__link {

  margin-top: 0;

}



.fkp-mobile-menu__arrow {

  flex: none;

  width: 18px;

  height: 15px;

}



.fkp-mobile-menu__kontakt-label {
  margin: 0 0 8px;
  font-family: var(--fkp-portal-nav-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: var(--fkp-portal-nav-white);
  text-align: center;
}

.fkp-mobile-menu__kontakt-wrap {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  width: 100%;

  padding-top: 32px;

}



.fkp-mobile-menu__kontakt {

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  width: 100%;

  min-height: 48px;

  padding: 12px 24px;

  border-radius: 0 20px;

  background: var(--fkp-portal-nav-white, #ffffff);

  font-family: var(--fkp-portal-nav-font, var(--fkp-navbar-font, Arial, sans-serif));

  font-size: 16px;

  font-weight: 700;

  line-height: 150%;

  color: var(--fkp-portal-nav-magenta, var(--fkp-magenta, #de006a));

  text-decoration: none;

}



.fkp-mobile-menu__footer {

  flex: 0 0 auto;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 8px;

  width: 100%;

  padding: 32px 24px 64px;

}


.fkp-mobile-menu__kontakt + .fkp-mobile-menu__kontakt {
  margin-top: 20px;
}


.fkp-mobile-menu__user {

  font-family: var(--fkp-portal-nav-font, var(--fkp-navbar-font, Arial, sans-serif));

  font-size: 18px;

  font-weight: 400;

  line-height: 160%;

  color: var(--fkp-portal-nav-white, #ffffff);

  text-align: center;

}



.fkp-mobile-menu__logout {

  display: inline-flex;

  flex-direction: column;

  align-items: flex-end;

  align-self: flex-end;

  gap: 1px;

  font-family: var(--fkp-portal-nav-font, var(--fkp-navbar-font, Arial, sans-serif));

  font-size: 18px;

  font-weight: 700;

  line-height: 150%;

  color: var(--fkp-portal-nav-white, #ffffff);

  text-decoration: underline;

  text-underline-offset: 4px;

}



.fkp-mobile-menu__logout-line {

  display: none;

}



/* ── Show mobile nav on tablet/mobile ── */



@media (max-width: 1280px) {

  .fkp-portal-header .fkp-announcement,

  .fkp-portal-header .fkp-navbar--desktop {

    display: none;

  }



  .fkp-mobile-navbar {

    display: flex;

  }



  body.fkp-portal-mobile-nav-open .fkp-mobile-menu {

    display: flex;

  }

}



@media (max-width: 768px) {

  .fkp-mobile-menu__scroll {

    padding-top: 24px;

  }

}