body[data-display="grotesk"] { --font-display: "Space Grotesk", "Mona Sans", sans-serif; }
  body[data-display="mona"] { --font-display: "Mona Sans", -apple-system, sans-serif; }
  @font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
  @font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; }
  /* ===== Glossar master-detail ===== */
  .glossar-box { display: grid; grid-template-columns: 44px minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 20px; background: #fff; overflow: hidden; min-height: 560px; }
  .g-alpha { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 0; border-right: 1px solid var(--border); background: var(--hai-off-white); overflow-y: auto; }
  .g-alpha button { border: none; background: none; font-family: var(--font-mono); font-size: 10.5px; line-height: 1; padding: 4px 0; width: 100%; color: rgba(17,17,17,0.25); cursor: default; }
  .g-alpha button.has { color: var(--fg-muted); cursor: pointer; }
  .g-alpha button.has:hover { color: var(--fg); }
  .g-alpha button.active { color: var(--hai-ocean); font-weight: 700; }
  .g-list { border-right: 1px solid var(--border); overflow-y: auto; max-height: 640px; }
  .g-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; color: var(--fg-subtle); padding: 12px 20px 6px; background: var(--hai-off-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
  .g-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: none; padding: 13px 20px; border-bottom: 1px solid var(--border); cursor: pointer; font-family: var(--font-sans); transition: background 180ms; }
  .g-row:hover { background: rgba(17,17,17,0.03); }
  .g-row.active { background: rgba(18,59,82,0.06); box-shadow: inset 3px 0 0 var(--hai-ocean); }
  .g-row strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
  .g-row .cat { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
  .g-detail { padding: 34px 34px 30px; display: flex; flex-direction: column; }
  .g-detail .cat { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hai-ocean); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; margin-bottom: 16px; }
  .g-detail h3 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 14px; }
  .g-detail .def { font-size: 15px; line-height: 1.65; color: var(--fg-muted); margin: 0 0 22px; }
  .g-detail .example { border: 1px solid var(--border); border-left: 3px solid var(--hai-ocean); border-radius: 12px; background: var(--hai-off-white); padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: var(--fg); }
  .g-detail .example .lbl { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 6px; }
  .g-detail .g-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--fg); font: 500 14px/1 var(--font-sans); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 3px; width: fit-content; }
  .g-detail .g-more:hover { border-color: var(--fg); }
  .g-detail .related { margin-top: auto; padding-top: 26px; }
  .g-detail .related .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); display: block; margin-bottom: 10px; }
  .g-detail .related .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .g-detail .related button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 14px; font: 500 12.5px/1 var(--font-sans); color: var(--fg); cursor: pointer; transition: border-color 180ms, background 180ms; }
  .g-detail .related button:hover { border-color: var(--border-strong); background: var(--hai-stone); }
  @media (max-width: 920px) { .glossar-box { grid-template-columns: 36px minmax(0, 1fr); } .g-detail { grid-column: 1 / -1; border-top: 1px solid var(--border); } .g-list { max-height: 380px; } }
  .no-results { display: none; padding: 40px 0; text-align: center; color: var(--fg-muted); font-size: 15px; }
  .article-card[hidden] { display: none; }