/* ============================================================
   glossar.css — Glossar / Regal-Lexikon (Paket P27)
   Nur glossar-spezifisch. Tokens, .container, .btn, .eyebrow,
   .crumbs, .lead kommen aus site.css (P3) und werden wiederverwendet.
   Enthält zusätzlich die Tooltip-Mechanik für <abbr data-glossar>,
   die auf jeder Seite mit assets/js/glossar.js greift.
   ============================================================ */

.glossar{padding:clamp(20px,4vw,40px) 0 clamp(56px,8vw,96px)}

/* ---------- Hero ---------- */
.gl-hero{max-width:64ch;margin-bottom:clamp(20px,3vw,30px)}
.gl-hero .eyebrow{margin-bottom:1rem}
.gl-hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.gl-hero .lead{color:var(--muted-2);margin-top:.9rem;font-size:clamp(1rem,1.6vw,1.12rem);max-width:58ch}
.gl-hero .lead b{color:var(--text);font-weight:var(--fw-semibold)}

/* ---------- Suche ---------- */
.gl-search{position:relative;display:flex;align-items:center;margin-top:1.6rem;max-width:520px}
.gl-search>svg{position:absolute;left:14px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.gl-search input{
  width:100%;padding:.85rem 2.6rem .85rem 2.9rem;font:inherit;font-size:var(--fs-md);color:var(--text);
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);transition:var(--t)/* Design-Refresh 2026-07-16 P6: Suchfeld entpillt */
}
.gl-search input::placeholder{color:var(--muted)}
.gl-search input:hover{border-color:var(--steel)}
.gl-search input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,0,26,.16)}
.gl-search input::-webkit-search-cancel-button{display:none}
.gl-clear{
  position:absolute;right:8px;display:grid;place-items:center;width:34px;height:34px;
  border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:var(--t-fast)
}
.gl-clear svg{width:18px;height:18px}
.gl-clear:hover{color:var(--text);background:rgba(0,0,0,.04)}
.gl-status{color:var(--muted);font-size:var(--fs-base);margin-top:.85rem}
.gl-status b{color:var(--steel-2);font-weight:var(--fw-bold)}

/* ---------- Themen-Filter ---------- */
.gl-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.gl-cat{
  display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:var(--fs-ms);font-weight:var(--fw-medium);
  color:var(--muted-2);background:var(--panel);border:1px solid var(--line-2);
  padding:.46rem .85rem;border-radius:999px;cursor:pointer;transition:var(--t)
}
.gl-cat:hover{color:var(--text);border-color:var(--steel)}
.gl-cat.is-active{color:var(--red-text);background:rgba(226,0,26,.12);border-color:var(--red)}
.gl-cat-n{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);
  background:rgba(0,0,0,.05);border-radius:999px;padding:.05rem .42rem;min-width:1.4em;text-align:center}
.gl-cat.is-active .gl-cat-n{color:var(--red-text)}

/* ---------- A–Z-Sprungnavigation (sticky) ---------- */
.gl-az{
  position:sticky;top:10px;z-index:10;display:flex;flex-wrap:wrap;gap:.25rem;
  margin:1.4rem 0 clamp(28px,4vw,44px);padding:.5rem .55rem;
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)
}
.gl-az-l{
  display:grid;place-items:center;min-width:32px;height:32px;padding:0 .35rem;
  font-family:'Sora',sans-serif;font-weight:var(--fw-semibold);font-size:var(--fs-ms);color:var(--muted-2);
  border-radius:8px;border:1px solid transparent;transition:var(--t-fast)
}
a.gl-az-l:hover{color:var(--text);background:rgba(0,0,0,.04);border-color:var(--line-2)}
a.gl-az-l:focus-visible{outline:none;box-shadow:var(--focus)}
.gl-az-l.is-off{color:var(--line-2);cursor:default}

/* ---------- Kategorie-Gruppen ---------- */
.gl-group{margin-bottom:clamp(34px,5vw,56px);scroll-margin-top:84px}
.gl-group-h{
  display:flex;align-items:baseline;gap:.6rem;font-size:clamp(1.3rem,2.4vw,1.7rem);
  padding-bottom:.7rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line)
}
.gl-group-h::before{content:"";width:4px;height:1.1em;border-radius:2px;background:var(--steel-2);align-self:center}/* Design-Refresh 2026-07-16 P6: Deko-Zierbalken → steel-2 (Rot nur Signal) */
.gl-group-n{font-family:'Inter',sans-serif;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted)}

.gl-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* Layout-Audit 2026-07-24: bei ungerader Term-Zahl blieb die letzte Karte allein
   in der linken Spalte, die rechte Hälfte leer. Eine allein in einer neuen Zeile
   startende letzte Karte über beide Spalten ziehen. Einspaltig (≤860px) ist
   grid-column:1/-1 ein No-op. Hinweis: :nth-child zählt per glossar.js gesetzte
   [hidden]-Karten mit — bei aktivem Textfilter kann der Span daher der DOM-Reihen-
   folge statt der gefilterten Reihenfolge folgen (rein kosmetisch). */
.gl-list > .gl-term:last-child:nth-child(odd){grid-column:1 / -1}

/* ---------- Begriffs-Karte ---------- */
.gl-term{
  position:relative;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);scroll-margin-top:92px;transition:var(--t)
}
.gl-term:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.gl-term:target{border-color:var(--red);box-shadow:0 0 0 1px var(--red),var(--sh-2)}
.gl-term-h{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xl);line-height:1.2;min-width:0}
.gl-term-name{font-family:'Sora',sans-serif;overflow-wrap:anywhere}
.gl-anchor{
  font-family:'Sora',sans-serif;font-weight:var(--fw-bold);color:var(--line-2);text-decoration:none;
  opacity:0;transition:var(--t-fast)
}
.gl-term:hover .gl-anchor,.gl-term:focus-within .gl-anchor{opacity:1}
.gl-anchor:hover{color:var(--red)}
.gl-anchor:focus-visible{opacity:1;outline:none;color:var(--red);box-shadow:var(--focus);border-radius:4px}
.gl-short{color:var(--text);font-weight:var(--fw-emph);margin-top:.5rem}
.gl-def{color:var(--muted-2);font-size:var(--fs-base);margin-top:.5rem;line-height:1.55}

/* „Siehe auch" Querverweise */
.gl-see{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.9rem}
.gl-see-l{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);font-weight:var(--fw-semibold);margin-right:.1rem}
.gl-see-link{
  font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--steel-2);
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
  padding:.22rem .6rem;transition:var(--t-fast)
}
a.gl-see-link:hover{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.1)}
a.gl-see-link:focus-visible{outline:none;box-shadow:var(--focus)}
.gl-see-link.is-plain{color:var(--muted);cursor:default}

/* Filter-Zustände (per glossar.js gesetzt) */
.gl-term[hidden],.gl-group[hidden]{display:none}
.gl-empty{margin:8px 0 24px;color:var(--muted-2);font-size:var(--fs-md)}
.gl-empty b{color:var(--text)}
.gl-reset{
  font:inherit;font-weight:var(--fw-semibold);color:var(--red-text);background:none;border:0;/* A5: Rot-Kleintext auf AA-Token */
  padding:0;margin-left:.3rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px
}
.gl-reset:hover{color:var(--red-600)}

/* ---------- Tooltip-Hinweis-Box ---------- */
.gl-demo{
  display:flex;gap:1.1rem;align-items:flex-start;margin-top:clamp(20px,3vw,28px);
  padding:clamp(20px,3vw,28px);border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:rgba(0,0,0,.03)
}
/* Design-Refresh 2026-07-16 P6: Rot-Deko-Kachel → neutral (Muster wie home.css .cta-list .ico) */
.gl-demo-ico{flex:none;width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  color:var(--steel-2);background:var(--panel-2);border:1px solid var(--line-2)}
.gl-demo-ico svg{width:24px;height:24px}
.gl-demo-h{font-size:var(--fs-xl);margin-bottom:.4rem}
.gl-demo p{color:var(--muted-2);font-size:var(--fs-base);line-height:1.6}
.gl-demo-note{margin-top:.7rem;font-size:var(--fs-xs);color:var(--muted)}
.gl-demo code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82em;
  color:var(--steel-2);background:var(--panel-2);border:1px solid var(--line);
  border-radius:6px;padding:.1rem .4rem}

/* ============================================================
   Tooltip-Mechanik — gilt SEITENWEIT (auch außerhalb des Glossars)
   <abbr data-glossar="slug"> wird von glossar.js angereichert.
   ============================================================ */
abbr[data-glossar]{
  text-decoration:underline dotted var(--steel);text-underline-offset:3px;
  text-decoration-thickness:1px;cursor:help;font-variant:none
}
abbr[data-glossar]:hover,abbr[data-glossar].is-open{text-decoration-color:var(--red)}
abbr[data-glossar]:focus-visible{outline:none;box-shadow:var(--focus);border-radius:3px}

.gl-tip{
  position:absolute;z-index:var(--z-toast);max-width:300px;
  padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel-2);box-shadow:var(--sh-pop);color:var(--text);
  font-family:'Inter',sans-serif;font-size:var(--fs-ms);line-height:1.5;
  opacity:0;transform:translateY(4px);transition:opacity .14s var(--ease),transform .14s var(--ease);
  pointer-events:none
}
.gl-tip.is-visible{opacity:1;transform:none;pointer-events:auto}
.gl-tip-term{font-family:'Sora',sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-base);display:block;margin-bottom:.25rem}
.gl-tip-short{color:var(--muted-2)}
.gl-tip-link{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--red-text)/* A5: Rot-Kleintext auf AA-Token */
}
.gl-tip-link svg{width:14px;height:14px}
.gl-tip-link:hover{color:var(--red-600)}
.gl-tip-link:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .gl-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* Overflow-Audit 2026-07-24: mehrreihige sticky A–Z-Leiste (bis 228px hoch) verdeckte mobil das Sprungziel — einreihig + horizontal scrollbar (wie .gl-cats), damit scroll-margin-top wieder greift. */
  .gl-az{top:6px;gap:.2rem;padding:.4rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .gl-az::-webkit-scrollbar{display:none}
  /* Mobile-Audit 2026-07-11 (P3-3): die sticky A–Z-Leiste ist mobil die Hauptnavigation
     der Seite — 27×28px lag klar unter dem Touch-Minimum. Auf ≥36×40px. */
  .gl-az-l{min-width:36px;height:40px;font-size:var(--fs-ms);flex:none}
  /* P3-3: die #-Sprunganker sind opacity:0 und werden nur per :hover sichtbar — auf Touch
     unbedienbar/unsichtbar. Mobil ganz ausblenden statt „tappbar-unsichtbar" zu lassen. */
  .gl-anchor{display:none}
  .gl-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .gl-cats::-webkit-scrollbar{display:none}
  .gl-cat{flex:none}
  .gl-demo{flex-direction:column;gap:.8rem}
}

/* ---------- Motion / A11y ---------- */
@media (prefers-reduced-motion:reduce){
  .gl-tip{transition:none}
  .gl-term,.gl-cat,.gl-see-link,.gl-anchor{transition:none}
}