/* ============================================================ Slideorado - audience landing add-ons (layered on landing.css) DE/EN toggle visibility + language switch + audience cross-nav ============================================================ */ /* ---------- i18n visibility (driven by ) ---------- Each .i18n wrapper holds and . Show only the span matching the active language. Default (no JS / no attr) falls back to DE so the page is fully readable without JS. */ .i18n > [data-lang] { display: none; } html[data-lang="en"] .i18n > [data-lang="en"] { display: inline; } html[data-lang="en"] .i18n > [data-lang="de"] { display: none; } /* default + explicit DE */ .i18n > [data-lang="de"], html[data-lang="de"] .i18n > [data-lang="de"] { display: inline; } html[data-lang="de"] .i18n > [data-lang="en"] { display: none; } /* ---------- language switch ---------- */ .lp-lang { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; gap: 2px; background: var(--bg); } .lp-lang-btn { appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; font-weight: 600; padding: 5px 11px; border-radius: 999px; transition: background 0.14s ease, color 0.14s ease; } .lp-lang-btn:hover { color: var(--ink); } .lp-lang-btn.is-active { background: var(--gold-grad); color: var(--on-gold); } .lp-lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- footer: keep DE/EN spans aligned in flex/grid contexts ---------- The cross-link strip was consolidated into the shared .lp-footer (landing.css). The footer uses the t() macro, which wraps each label in an inline .i18n span; no extra layout rules are needed since footer links are block-level . */ .lp-footer .i18n { display: inline; }