/* glossar.css – verlinkte Begriffe und das Erklärungs-Popover.
 * Nutzt die Theme-Variablen des Portals (--white/--bg/--border/--text/--muted
 * schalten in html.dark automatisch um). Akzent ist das Portal-Rot #C8102E. */

a.glossar-link {
    color: #C8102E;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(200, 16, 46, .5);
    cursor: help;
    transition: text-decoration-color .15s, background .15s;
}
a.glossar-link:hover,
a.glossar-link:focus {
    text-decoration-color: #C8102E;
    background: rgba(200, 16, 46, .08);
    border-radius: 3px;
    outline: none;
}
html.dark a.glossar-link { color: #ff5a6e; text-decoration-color: rgba(255, 90, 110, .55); }
html.dark a.glossar-link:hover,
html.dark a.glossar-link:focus { text-decoration-color: #ff5a6e; background: rgba(255, 90, 110, .16); }

.glossar-popover {
    position: absolute;
    z-index: 9999;
    max-width: 340px;
    min-width: 200px;
    background: var(--white, #ffffff);
    color: var(--text, #111827);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .18));
    padding: .75rem .85rem;
    font-size: .9rem;
    line-height: 1.5;
}

.glossar-pop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}
.glossar-pop-titel { font-weight: 700; font-size: 1rem; }
.glossar-pop-close {
    border: none;
    background: transparent;
    color: var(--muted, #6B7280);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .15rem;
}
.glossar-pop-close:hover { color: var(--text, #111827); }

.glossar-pop-meta { font-size: .8rem; color: var(--muted, #6B7280); margin-bottom: .25rem; }
.glossar-pop-label { font-weight: 600; }

.glossar-pop-body { margin-top: .35rem; }
.glossar-pop-body p:first-child { margin-top: 0; }
.glossar-pop-body p:last-child  { margin-bottom: 0; }
.glossar-pop-body img { max-width: 100%; height: auto; }