Bilingual: German default + stylish EN/DE language switch (desktop nav + mobile drawer), JS i18n dictionary

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

css/styles.css

@@ -432,6 +432,18 @@ body.menu-open .drawer { transform: translateY(0); opacity: 1; pointer-events: a
   .offer-card--wide { grid-column: span 1; }
 }
 
+/* ============ Language switch ============ */
+.lang-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; }
+.lang-btn { background: none; border: none; cursor: pointer; padding: 0.25rem 0.15rem; margin: 0; font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--color-ink-faint); transition: color var(--dur-fast) var(--ease-out); }
+.lang-btn:hover { color: var(--color-ink); }
+.lang-switch__sep { color: var(--color-line-2); font-weight: 400; }
+html[data-lang="de"] .lang-btn[data-setlang="de"],
+html[data-lang="en"] .lang-btn[data-setlang="en"] { color: var(--color-accent-deep); }
+.nav-lang { display: none; }
+@media (min-width: 960px) { .nav-lang { display: inline-flex; } }
+/* Drawer switch sits bottom-right beside the socials */
+.drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); }
+
 /* ============ Nav icon row ============ */
 /* Top-bar contact icons removed on every breakpoint — they live in the footer + contact section now */
 .nav__icons { display: none; }