/* ---------- EN / DE language switch ---------- */ /* Shared by index.html and the legal pages. Loaded after the page's own stylesheet so the visibility rules always win. */ /* Both languages sit in the markup; only the active one is displayed. The rules are scoped to descendants, so itself is safe. */ html[data-lang="en"] [lang="de"], html[data-lang="de"] [lang="en"] { display: none !important; } /* Segmented EN | DE switch in the top-right of the nav */ .lang-toggle { display: inline-flex; align-items: stretch; border: 1px solid rgba(136, 136, 136, 0.4); border-radius: 2px; overflow: hidden; flex: 0 0 auto; } .lang-btn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; margin: 0; padding: 8px 11px; font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid-grey); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .lang-btn + .lang-btn { border-left: 1px solid rgba(136, 136, 136, 0.4); } .lang-btn:hover { color: var(--off-white); } html[data-lang="en"] .lang-btn[data-lang-set="en"], html[data-lang="de"] .lang-btn[data-lang-set="de"] { background: var(--warm-gold); color: var(--true-black); } .lang-btn:focus-visible { outline: 2px solid var(--warm-gold); outline-offset: 2px; } /* Group the menu, the language switch and the mobile menu button on the right */ .nav-right { display: flex; align-items: center; gap: 16px; } @media (min-width: 720px) { .nav-right { gap: 28px; } }