/* ============================================================ LISI i18n – Language Switcher Styles ============================================================ */ /* Container */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line, #e8dfcc); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(4px); } /* Each pill button */ .lang-switch button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink2, #3a4843); transition: color 0.2s ease, background 0.2s ease, text-decoration-color 0.2s ease; text-decoration: underline transparent; text-underline-offset: 3px; text-decoration-thickness: 1.5px; line-height: 1; white-space: nowrap; } .lang-switch button:hover { color: var(--leaf2, #3f6c3a); text-decoration-color: var(--leaf2, #3f6c3a); } /* Active / current language */ .lang-switch button[aria-current="true"] { background: var(--ink, #1f2a26); color: var(--paper, #f7f1e6); text-decoration: none; } .lang-switch button[aria-current="true"]:hover { background: var(--ink2, #3a4843); color: var(--paper, #f7f1e6); } /* ---- Home (dark background) ---- */ /* When rendered inside the dark home-tree layout, invert colours */ body.home-tree .lang-switch { border-color: rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); } body.home-tree .lang-switch button { color: rgba(251, 246, 234, 0.75); } body.home-tree .lang-switch button:hover { color: rgba(251, 246, 234, 1); text-decoration-color: var(--sun, #f4cf7e); } body.home-tree .lang-switch button[aria-current="true"] { background: rgba(251, 246, 234, 0.18); color: rgba(251, 246, 234, 1); } /* ---- home-tree standalone page (home-tree/index.html .top header) ---- */ /* The standalone home-tree page has class="top" header with light text. We keep it consistent by targeting the .top container. */ .top .lang-switch { border-color: rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.25); } .top .lang-switch button { color: rgba(251, 246, 234, 0.72); font-size: 9px; } .top .lang-switch button:hover { color: rgba(251, 246, 234, 1); text-decoration-color: var(--sun, #f4cf7e); } .top .lang-switch button[aria-current="true"] { background: rgba(251, 246, 234, 0.15); color: rgba(251, 246, 234, 1); } /* ---- Mobile ---- */ @media (max-width: 639px) { .lang-switch { gap: 1px; padding: 2px; } .lang-switch button { padding: 3px 7px; font-size: 9px; letter-spacing: 0.14em; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .lang-switch button { transition: none; } } /* ===================================================================== * Sprach-spezifische Anpassungen (v2.0 — 7 Sprachen) * Aktiviert über Attribut, gesetzt durch I18N.setLang. * =================================================================== */ /* ---- Chinesisch: Noto Sans SC für CJK-Glyphen ---- * Fallback-Kette: System-Schriften wo verfügbar, dann sans-serif. * Body-Schrift wird angepasst, Display-Schrift (Cormorant) bleibt * für nicht-chinesische Begriffe (LISI, DELEGATIS) gleich. */ html[data-lang="zh"] body { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif; } html[data-lang="zh"] .font-display, html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3 { font-family: "Noto Serif SC", "Source Han Serif SC", "PingFang SC", "Songti SC", "STSong", serif; letter-spacing: 0; /* CJK braucht kein Letter-Spacing */ } /* ---- Arabisch: Noto Sans/Naskh Arabic + RTL-Anpassungen ---- */ html[data-lang="ar"] body { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Arial Unicode MS", sans-serif; } html[data-lang="ar"] .font-display, html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3 { font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Traditional Arabic", serif; letter-spacing: 0; } /* ---- RTL-Basics (greift bei ) ---- * Die meisten Layouts laufen mit logical properties bereits korrekt, * aber hier sind die kritischen Ausnahmen: */ html[dir="rtl"] { /* Tailwind nutzt teilweise physical properties — Defaults überschreiben */ } html[dir="rtl"] body { text-align: right; } /* Flex-Reihenfolge für Navigation und Reihen — Tailwind verwendet * row, das in RTL automatisch umgekehrt wird (logical), aber * explizite Klassen wie ml-* mr-* sind physical und müssen gespiegelt * werden. Wir nutzen logical wo möglich. */ /* Footer-Links und Header-Nav sollen in RTL gespiegelt fließen */ html[dir="rtl"] .top-nav, html[dir="rtl"] .foot-links, html[dir="rtl"] .foot-row { flex-direction: row-reverse; } /* Iconographic arrows (→) müssen in RTL gespiegelt werden */ html[dir="rtl"] .btn-primary svg, html[dir="rtl"] [data-arrow], html[dir="rtl"] .arrow { transform: scaleX(-1); } /* Eyebrow-Leaf-Icon: nicht spiegeln (Blatt ist symmetrisch genug) */ html[dir="rtl"] .eyebrow svg { transform: none; } /* Reveal-Animationen (translateX) müssen in RTL invertiert werden. * Wir hatten Reveal auf body:not(.home-tree) auf opacity-only umgestellt, * also kein translateX-Problem — bleibt aber als Safety-Net falls * irgendwo translateX(-20px) o.ä. genutzt wird. */ html[dir="rtl"] .reveal, html[dir="rtl"] .reveal-stagger > * { /* opacity-Reveal ist richtungsneutral — nichts zu spiegeln */ } /* Home bleibt unangefasst — body.home-tree wird in RTL nicht aktiv, * weil Home zunächst nur in DE existiert. Falls Home später mehrsprachig * wird, hier explizit ergänzen. */