:root { --paper: #f3f0e8; --ink: #0e0f0c; --muted: #5d6056; --line: #dcd7ca; --lime: #d4fb42; }
@media (prefers-color-scheme: dark) { :root { --paper: #0e0f0c; --ink: #f1efe8; --muted: #a9ad9f; --line: #2a2c26; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.65; }
.wrap { width: min(760px, 100%); margin: 0 auto; padding: 32px 20px 80px; }
header { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
header a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 1.1rem; }
header img { width: 32px; height: 32px; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 1.2rem; margin: 36px 0 8px; letter-spacing: -0.01em; }
h3 { font-size: 1rem; margin: 20px 0 6px; }
p, li { color: var(--ink); }
.updated { color: var(--muted); margin-bottom: 28px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 10px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
a { color: inherit; text-underline-offset: 3px; }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

.lang-switch { display: block; margin-top: 10px; }
.lang-switch a { padding: 6px 2px; }
.lang-switch a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: none; }
.i18n-note { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .92rem; }
/* Header language picker */
header { justify-content: space-between; }
.lang-pick { position: relative; --lp-bg: var(--paper); --lp-soft: rgba(127, 127, 127, .12); --lp-muted: var(--muted); }
.lang-pick summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--lp-bg); cursor: pointer; font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: var(--ink); transition: background-color 200ms, border-color 200ms; }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary:hover { background: var(--lp-soft); }
.lang-pick[open] summary { border-color: var(--ink); }
.lang-pick summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.lp-ic, .lp-chev, .lp-check { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lp-ic { width: 16px; height: 16px; color: var(--lp-muted); }
.lp-chev { width: 14px; height: 14px; color: var(--lp-muted); transition: transform 200ms; }
.lang-pick[open] .lp-chev { transform: rotate(180deg); }
.lp-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 264px; padding: 6px; border-radius: 20px; background: var(--lp-bg); border: 1px solid var(--line); box-shadow: 0 24px 56px -24px rgba(14, 15, 12, .4), 0 2px 6px rgba(14, 15, 12, .05); transform-origin: top right; animation: lp-in 160ms cubic-bezier(.2, .8, .2, 1); }
@keyframes lp-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.lp-title { margin: 0; padding: 8px 10px 6px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lp-menu a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 400; font-size: 1rem; transition: background-color 200ms; }
.lp-menu a:hover, .lp-menu a:focus-visible, .lp-menu a[aria-current] { background: var(--lp-soft); outline: none; }
.lp-code { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--lp-soft); border: 1px solid var(--line); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.lp-menu a[aria-current] .lp-code { background: #d4ff3f; border-color: #b6e01c; color: #0e0f0c; }
.lp-names { display: grid; min-width: 0; line-height: 1.25; }
.lp-names b { font-size: .92rem; font-weight: 500; }
.lp-names small { font-size: .76rem; color: var(--lp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-check { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .lp-menu { animation: none; } .lp-chev { transition: none; } }

/* Long words (German compounds) and tables wrap instead of pushing the page sideways. */
body { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) { table { table-layout: fixed; } th, td { padding: 8px 6px; overflow-wrap: anywhere; } }