/* ============================================================
   Glossar <ju:like> – Begriffe im Fließtext (assets/popup.js)
   Nutzt dieselben Variablen wie glossar.css, z. B. im Theme:
     :root { --jlg-akzent: #c00; }
   ============================================================ */

/* Begriff im Text. Doppelte Klasse bzw. Pseudoklassen, damit Button-Stile des Themes nicht greifen. */
button.jl-glossar-begriff,
button.jl-glossar-begriff:hover,
button.jl-glossar-begriff:focus,
button.jl-glossar-begriff:active {
  all: unset;
  cursor: pointer;
  text-decoration: underline dotted var(--jlg-akzent, #009ba4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}
button.jl-glossar-begriff:hover { text-decoration-style: solid; }
button.jl-glossar-begriff:focus-visible { outline: 2px solid var(--jlg-akzent, #009ba4); outline-offset: 2px; border-radius: 2px; }
.jl-glossar-begriff__ende { white-space: nowrap; }
.jl-glossar-begriff__icon {
  display: inline-block; width: .72em; height: .72em; margin-left: .18em;
  vertical-align: .4em; color: var(--jlg-akzent, #009ba4);
}

/* Pop-up. Kein display setzen: der Browser blendet geschlossene Popover über display aus. */
.jl-glossar-pop {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px 44px 16px 20px;
  background: var(--jlg-flaeche, #fff); color: var(--jlg-text-leise, #363F4D);
  border: 1px solid var(--jlg-linie, #E6E8EB); border-radius: var(--jlg-radius, 6px 27px 27px 27px);
  box-shadow: 0 10px 30px rgba(36, 42, 51, .16);
  font-size: 15px; line-height: 1.6; text-align: left;
}
.jl-glossar-pop p { margin: 0; }
.jl-glossar-pop__titel { font-weight: 600; color: var(--jlg-text, #242A33); }
.jl-glossar-pop .jl-glossar-pop__text { margin-top: 4px; }
.jl-glossar-pop .jl-glossar-pop__hinweis {
  width: fit-content; margin-top: 8px; padding: 6px 10px; border-radius: 4px;
  font-size: 14px; color: var(--jlg-text, #242A33);
  background: var(--jlg-hinweis-grund,
    linear-gradient(100deg, #ffafd400 1%, #ffafd4 2.5%, #ffafd480 5.7%, #ffafd41a 93%, #ffafd4b4 95%, #ffafd400 98%),
    linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%));
}
.jl-glossar-pop .jl-glossar-pop__mehr {
  margin-top: 12px;
  font-family: var(--jlg-schrift-gruppe, 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 14px;
}
.jl-glossar-pop__mehr a::after { content: " →"; }

button.jl-glossar-pop__zu,
button.jl-glossar-pop__zu:hover,
button.jl-glossar-pop__zu:focus {
  all: unset; position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--jlg-text-leise, #363F4D);
}
button.jl-glossar-pop__zu:hover { background: var(--jlg-markiert, #E6F6F6); }
button.jl-glossar-pop__zu:focus-visible { outline: 2px solid var(--jlg-akzent, #009ba4); outline-offset: -2px; }