/* My Tipico navigation — Figma Main_navigation 4078:2728, About Us dropdown 4022:3913, Tools dropdown 4067:732. */

.mt-nav{--mt-nav-top:25px;--mt-nav-logo-h:88px;--mt-nav-pr:32px;--mt-nav-h:calc(var(--mt-nav-top) + var(--mt-nav-logo-h));background:var(--mt-white);color:var(--mt-black);font-family:var(--mt-font);font-size:16px;line-height:24px}
.mt-nav *,.mt-nav *::before,.mt-nav *::after{box-sizing:border-box}
.mt-nav img{max-width:none}
.mt-nav :where(ul){list-style:none;margin-top:0;margin-bottom:0;padding-left:0}
.mt-nav :where(button){margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mt-nav :where(a){color:inherit;text-decoration:none}
.mt-nav a:focus-visible,.mt-nav button:focus-visible{outline:2px solid var(--mt-red);outline-offset:2px}

.mt-nav__bar{position:relative;display:flex;align-items:stretch;min-height:var(--mt-nav-h);padding-right:var(--mt-nav-pr)}

/* ---------- Logo ---------- */
.mt-nav__logo{flex:none;display:block;align-self:flex-start;margin-top:var(--mt-nav-top);line-height:0}
.mt-nav__logo-img{display:block;width:auto;height:var(--mt-nav-logo-h)}

/* ---------- Panel: menu + tools ---------- */
.mt-nav__panel{flex:1 1 auto;display:flex;align-items:stretch;justify-content:space-between;gap:32px;min-width:0;margin-left:32px}
.mt-nav__main{display:flex}
.mt-nav__menu{display:flex;align-items:stretch;gap:clamp(20px,1.852vw,32px)}

/* Top items: red bar at the very top of the header on hover / open / current. */
.mt-nav__menu>li{position:relative;display:flex;align-items:center;gap:2px;padding-top:var(--mt-nav-top);white-space:nowrap}
.mt-nav__menu>li::before,.mt-nav__tools-btn::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-bottom-left-radius:999px;border-bottom-right-radius:999px;background:var(--mt-red);transform:scaleX(0);transition:transform .25s var(--mt-ease)}
.mt-nav__menu>li>a{display:block;transition:color .2s}
.mt-nav__menu>li.current-menu-item>a,.mt-nav__menu>li.current-menu-ancestor>a,.mt-nav__menu>li.current-menu-parent>a,.mt-nav__menu>li.is-open>a{color:var(--mt-red)}
.mt-nav__menu>li.current-menu-item::before,.mt-nav__menu>li.current-menu-ancestor::before,.mt-nav__menu>li.current-menu-parent::before,.mt-nav__menu>li.is-open::before{transform:scaleX(1)}

.mt-nav__toggle{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}
.mt-nav__toggle img{display:block;width:20px;height:20px;transition:transform .2s var(--mt-ease)}

/* ---------- Flyout (levels 2 and 3) ---------- */
.mt-nav__menu .sub-menu{display:none;white-space:nowrap}
.mt-nav__menu>li>.sub-menu{position:absolute;top:calc(100% - 1px);left:-12px;width:248px;box-shadow:11px 0 23px rgb(0 0 0 / .08),42px 0 42px rgb(0 0 0 / .07),95px 0 57px rgb(0 0 0 / .04),168px 0 67px rgb(0 0 0 / .01)}
.mt-nav__menu .sub-menu>li{display:flex;align-items:center;min-height:45px;border-bottom:1px solid var(--mt-line);background:var(--mt-panel);transition:background .2s,color .2s}
.mt-nav__menu .sub-menu>li:last-child{border-bottom:0}
.mt-nav__menu .sub-menu>li>a{flex:1 1 auto;display:block;padding-top:10px;padding-bottom:10px;padding-left:24px;padding-right:20px}
.mt-nav__menu .sub-menu>li>.mt-nav__toggle{margin-right:20px}
.mt-nav__menu .sub-menu>li>a:has(+.mt-nav__toggle){padding-right:8px}
.mt-nav__menu .sub-menu .mt-nav__toggle img{transform:rotate(-90deg);filter:brightness(0)}
.mt-nav__menu .sub-menu>li.is-open,.mt-nav__menu .sub-menu>li.current-menu-item,.mt-nav__menu .sub-menu>li.current-menu-ancestor{background:var(--mt-red);color:var(--mt-white)}
.mt-nav__menu .sub-menu>li.is-open>.mt-nav__toggle img,.mt-nav__menu .sub-menu>li.current-menu-item>.mt-nav__toggle img,.mt-nav__menu .sub-menu>li.current-menu-ancestor>.mt-nav__toggle img{filter:none}

/* Level 3 sits beside level 2, top-aligned with it, under its shadow. */
.mt-nav__menu .sub-menu .sub-menu{position:absolute;top:0;left:100%;z-index:-1;width:max-content;min-width:248px;max-width:calc(100vw - 48px);white-space:normal;box-shadow:0 23px 51px rgb(0 0 0 / .08),0 92px 92px rgb(0 0 0 / .07),0 207px 124px rgb(0 0 0 / .04),0 367px 147px rgb(0 0 0 / .01)}
.mt-nav__menu .sub-menu .sub-menu.mt-nav__flip{left:auto;right:100%}
.mt-nav__menu .sub-menu .sub-menu>li{color:var(--mt-black)}
.mt-nav__menu .sub-menu .sub-menu>li.current-menu-item{background:var(--mt-red);color:var(--mt-white)}

/* ---------- Tools ---------- */
.mt-nav__tools{display:flex}
.mt-nav__tools-btn{position:relative;display:flex;align-items:center;padding-top:var(--mt-nav-top);white-space:nowrap;transition:color .2s}
.mt-nav__tools-icon{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;margin-right:8px}
.mt-nav__tools-icon img{display:block;width:20px;height:20px}
.mt-nav__tools-icon-on{position:absolute;top:2px;left:2px;opacity:0;transition:opacity .2s}
.mt-nav__chev{display:block;flex:none;width:20px;height:20px;margin-left:2px;transition:transform .2s var(--mt-ease)}
.mt-nav__tools.is-open .mt-nav__tools-btn{color:var(--mt-red)}
.mt-nav__tools.is-open .mt-nav__tools-btn::before{transform:scaleX(1)}
.mt-nav__tools.is-open .mt-nav__tools-icon-on{opacity:1}

.mt-nav__grid{display:none;position:absolute;top:100%;right:calc(var(--mt-nav-pr) + 6px);background:var(--mt-white);box-shadow:0 23px 51px rgb(0 0 0 / .08),0 92px 92px rgb(0 0 0 / .07)}
.mt-nav__tools.is-open .mt-nav__grid{display:block}
.mt-nav__tiles{display:grid;grid-template-columns:repeat(4,150px);border-top:1px solid var(--mt-line);border-left:1px solid var(--mt-line)}
.mt-nav__tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;height:150px;padding-top:20px;padding-bottom:8px;padding-left:20px;padding-right:20px;border-right:1px solid var(--mt-line);border-bottom:1px solid var(--mt-line);background:var(--mt-white);text-align:center;line-height:18px;transition:background .2s,color .2s,box-shadow .2s}
.mt-nav__tile-icon{display:block;flex:none;width:40px;height:40px;transition:filter .2s}
.mt-nav__tile-label{display:flex;align-items:flex-end;justify-content:center;min-height:36px;margin-top:-3px;margin-bottom:-3px}
.mt-nav__tile:hover,.mt-nav__tile:focus-visible{z-index:1;background:var(--mt-red);color:var(--mt-white);border-color:var(--mt-red);box-shadow:7px 7px 21px rgb(199 16 46 / .2),26px 26px 37px rgb(199 16 46 / .17),60px 60px 51px rgb(199 16 46 / .1),106px 106px 60px rgb(199 16 46 / .03)}
.mt-nav__tile:hover .mt-nav__tile-icon,.mt-nav__tile:focus-visible .mt-nav__tile-icon{filter:brightness(0) invert(1)}
.mt-nav__tile:focus-visible{outline-offset:-4px;outline-color:var(--mt-white)}

/* ---------- Divider + profile ---------- */
.mt-nav__divider{flex:none;align-self:flex-start;width:1px;height:32px;margin-top:calc(var(--mt-nav-top) + (var(--mt-nav-logo-h) - 32px) / 2);margin-left:32px;background:var(--mt-line)}
.mt-nav__profile{flex:none;display:flex;align-items:center;gap:12px;margin-left:32px;padding-top:var(--mt-nav-top)}
.mt-nav__avatar{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;overflow:hidden;border-radius:50%;background:var(--mt-panel)}
.mt-nav__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.mt-nav__initials{color:var(--mt-red);font-weight:500;font-size:18px}
.mt-nav__who{display:flex;flex-direction:column;min-width:0;white-space:nowrap}
.mt-nav__name{font-weight:500;font-size:16px;line-height:24px}
.mt-nav__role{margin-top:-3px;color:var(--mt-grey);opacity:.72;font-size:14px;line-height:20px}
@supports (text-box:trim-both cap alphabetic){
	.mt-nav__who{gap:8px}
	.mt-nav__name,.mt-nav__role{text-box:trim-both cap alphabetic}
	.mt-nav__role{margin-top:0}
}
a.mt-nav__profile .mt-nav__name{transition:color .2s}

/* ---------- Burger ---------- */
.mt-nav__burger{display:none;position:relative;flex:none;align-self:flex-start;width:44px;height:44px;margin-top:calc(var(--mt-nav-top) + (var(--mt-nav-logo-h) - 44px) / 2);margin-left:16px}
.mt-nav__burger span,.mt-nav__burger span::before,.mt-nav__burger span::after{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--mt-black);transition:transform .25s var(--mt-ease),opacity .2s}
.mt-nav__burger span{top:21px}
.mt-nav__burger span::before,.mt-nav__burger span::after{content:"";left:0}
.mt-nav__burger span::before{top:-7px}
.mt-nav__burger span::after{top:7px}
.mt-nav.is-menu-open .mt-nav__burger span{background:transparent}
.mt-nav.is-menu-open .mt-nav__burger span::before{transform:translateY(7px) rotate(45deg)}
.mt-nav.is-menu-open .mt-nav__burger span::after{transform:translateY(-7px) rotate(-45deg)}

@keyframes mt-nav-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Desktop: hover and keyboard open the flyouts ---------- */
@media (min-width:1201px){
	.mt-nav__menu>li:hover>a{color:var(--mt-red)}
	.mt-nav__menu>li:hover::before{transform:scaleX(1)}
	.mt-nav__menu li:hover>.sub-menu,.mt-nav__menu li.is-open>.sub-menu{display:block}
	.mt-nav__menu li:has(:focus-visible)>.sub-menu{display:block}
	.mt-nav__menu>li>.sub-menu{animation:mt-nav-in .2s var(--mt-ease)}
	.mt-nav__menu .sub-menu>li:hover{background:var(--mt-red);color:var(--mt-white)}
	.mt-nav__menu .sub-menu>li:hover>.mt-nav__toggle img{filter:none}
	.mt-nav__menu .sub-menu .sub-menu>li:hover{color:var(--mt-white)}

	.mt-nav__tools:hover .mt-nav__tools-btn{color:var(--mt-red)}
	.mt-nav__tools:hover .mt-nav__tools-btn::before{transform:scaleX(1)}
	.mt-nav__tools:hover .mt-nav__tools-icon-on{opacity:1}
	.mt-nav__tools:hover .mt-nav__grid{display:block;animation:mt-nav-in .2s var(--mt-ease)}
	.mt-nav__tools:has(:focus-visible) .mt-nav__grid{display:block}

	a.mt-nav__profile:hover .mt-nav__name{color:var(--mt-red)}
}

/* ---------- Burger and below ---------- */
@media (max-width:1200px){
	.mt-nav{--mt-nav-top:16px;--mt-nav-logo-h:64px;--mt-nav-pr:24px}
	.mt-nav__bar{flex-wrap:wrap}
	.mt-nav__burger{display:block}
	.mt-nav__divider{display:none}
	.mt-nav__profile{margin-left:auto;padding-top:var(--mt-nav-top)}

	.mt-nav__panel{order:3;flex:1 1 100%;flex-direction:column;justify-content:flex-start;gap:0;margin-left:0;margin-right:calc(var(--mt-nav-pr) * -1);padding-top:8px;padding-bottom:32px;padding-left:24px;padding-right:24px;background:var(--mt-white);border-top:1px solid var(--mt-line)}
	.mt-js .mt-nav__panel{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--mt-nav-h));max-height:calc(100dvh - var(--mt-nav-h));overflow-y:auto;overscroll-behavior:contain;margin-right:0;box-shadow:0 23px 51px rgb(0 0 0 / .08)}
	.mt-js .mt-nav.is-menu-open .mt-nav__panel{display:flex;animation:mt-nav-in .2s var(--mt-ease)}
	html.mt-nav-locked{overflow:hidden}

	.mt-nav__main{display:block}
	.mt-nav__menu{flex-direction:column;gap:0}
	.mt-nav__menu>li{flex-wrap:wrap;gap:0;padding-top:0;border-bottom:1px solid var(--mt-line);white-space:normal}
	.mt-nav__menu>li::before,.mt-nav__tools-btn::before{display:none}
	.mt-nav__menu>li>a{flex:1 1 auto;padding-top:16px;padding-bottom:16px}
	.mt-nav__toggle{width:44px;height:44px;margin-right:-12px}
	.mt-nav__menu li.is-open>.mt-nav__toggle img{transform:rotate(180deg)}

	.mt-nav__menu .sub-menu,.mt-nav__menu>li>.sub-menu,.mt-nav__menu .sub-menu .sub-menu{position:static;z-index:auto;flex:1 1 100%;width:auto;min-width:0;max-width:none;margin-bottom:16px;white-space:normal;box-shadow:none}
	.mt-nav__menu .sub-menu .sub-menu{margin-bottom:0}
	.mt-nav__menu li.is-open>.sub-menu{display:block}
	.mt-nav__menu .sub-menu>li{flex-wrap:wrap}
	.mt-nav__menu .sub-menu>li:last-child{border-bottom:0}
	.mt-nav__menu .sub-menu>li>a{padding-left:16px}
	.mt-nav__menu .sub-menu>li>.mt-nav__toggle{margin-right:4px}
	.mt-nav__menu .sub-menu .mt-nav__toggle img{transform:none}
	.mt-nav__menu .sub-menu li.is-open>.mt-nav__toggle img{transform:rotate(180deg)}
	.mt-nav__menu .sub-menu .sub-menu>li{background:var(--mt-white);color:var(--mt-black)}
	.mt-nav__menu .sub-menu .sub-menu>li>a{padding-left:32px}
	.mt-nav__menu .sub-menu .sub-menu>li.current-menu-item{color:var(--mt-red)}

	.mt-nav__tools{flex-direction:column;border-bottom:1px solid var(--mt-line)}
	.mt-nav__tools-btn{width:100%;padding-top:16px;padding-bottom:16px;text-align:left}
	.mt-nav__tools-label{flex:1 1 auto}
	.mt-nav__chev{margin-right:0}
	.mt-nav__tools.is-open .mt-nav__chev{transform:rotate(180deg)}
	.mt-nav__grid{position:static;margin-bottom:24px;box-shadow:none}
	.mt-nav__tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
	.mt-nav__tile{height:auto;min-height:150px}
}

@media (max-width:900px){
	.mt-nav__who{display:none}
	.mt-nav__avatar{width:44px;height:44px}
}

@media (max-width:767px){
	.mt-nav{--mt-nav-top:12px;--mt-nav-logo-h:52px;--mt-nav-pr:16px}
	.mt-nav__panel{padding-left:16px;padding-right:16px}
	.mt-nav__avatar{width:40px;height:40px}
	.mt-nav__burger{margin-left:8px;margin-right:-10px}
	.mt-nav__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
	.mt-nav__tile{min-height:132px;padding-left:12px;padding-right:12px}
}

/* No script: every level and the Tools grid shown open under the bar. */
@media (max-width:1200px){
	html:not(.mt-js) .mt-nav__burger,html:not(.mt-js) .mt-nav__toggle{display:none}
	html:not(.mt-js) .mt-nav__menu .sub-menu,html:not(.mt-js) .mt-nav__grid{display:block}
}

@media (prefers-reduced-motion:reduce){
	.mt-nav *,.mt-nav *::before,.mt-nav *::after{transition:none;animation:none}
}