/* AK86 2026 – Lexikon-Übersicht (archive-lexikon.php), baut auf ratgeber-uebersicht.css auf.
   Vorbild Stift-Glossar (Alex 11.11.2026): Suche, A–Z-Leiste, Begriffe zum Aufklappen. Eckig wie alles bei AK86. */

/* ---------- Seitenleiste: Suche + A–Z ---------- */
.lx-such { display: block; width: 100%; margin: 0 0 34px; padding: 13px 14px; font: 16px var(--f-body); color: var(--textcolor); background: rgba(var(--bgcolor-rgb), .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(var(--gridcolor-rgb), .35); border-radius: 0; outline: none; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.lx-such::placeholder { color: rgba(var(--gridcolor-rgb), .45); }
.lx-such:focus { border-color: var(--acc, var(--sec)); }
.lx-such::-webkit-search-cancel-button { filter: grayscale(1); }

/* Glas je Feld (Alex 11.11.2026: kleine Buchstaben auf dem hellen Verlauf besser lesbar), getönt + weichgezeichnet wie die Kacheln im Header */
.rgu-nav .lx-az { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.rgu-nav .lx-az li { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(var(--bgcolor-rgb), .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.rgu-nav .lx-az a, .lx-az span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0; font: 600 14px var(--f-mono); }
.rgu-nav .lx-az a { color: var(--textcolor); box-shadow: none; transition: background-color .25s, color .25s; }
.rgu-nav .lx-az a:hover { color: var(--acc, var(--sec)); }
.rgu-nav .lx-az a.on { padding: 0; color: var(--static-white); background: var(--static-maincolor); box-shadow: none; }
.lx-az span, .rgu-nav .lx-az a.aus { color: rgba(var(--gridcolor-rgb), .34); pointer-events: none; }
.lx-treffer { min-height: 1.4em; margin: 14px 0 0; font: 12px var(--f-mono); color: rgba(var(--gridcolor-rgb), .6); }

/* ---------- Begriffe zum Aufklappen ---------- */
/* Jeder Begriff eine Glaskachel (Alex 11.11.2026), Lichtfleck folgt dem Mauszeiger (--mx/--my aus lexikon-uebersicht.js) */
.lx-liste { display: grid; gap: 8px; padding-top: 14px; }
.lx-d { position: relative; overflow: hidden; background: rgba(var(--bgcolor-rgb), .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); transition: border-color .35s, background-color .35s; }
.lx-d::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gridcolor-rgb), .16), transparent 62%); }
.lx-d::after { content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity .4s; border: 1px solid var(--acc, var(--sec)); -webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%); mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%); }
.lx-d:hover::before, .lx-d:hover::after { opacity: 1; }
.lx-d[open] { border-color: rgba(var(--gridcolor-rgb), .4); background: rgba(var(--bgcolor-rgb), .5); }
.lx-sum, .lx-body { position: relative; z-index: 1; }
.lx-sum { display: grid; grid-template-columns: clamp(46px, 4vw, 70px) minmax(0, 1fr) auto; align-items: baseline; column-gap: clamp(12px, 1.4vw, 22px); padding: clamp(18px, 2.4vh, 28px) clamp(16px, 1.6vw, 28px); cursor: pointer; list-style: none; transition: opacity .4s; }
.lx-sum::-webkit-details-marker { display: none; }
.lx-t { max-width: none; transition: color .3s, transform .6s cubic-bezier(.2,.8,.2,1); }
.lx-ew { margin-left: 10px; font: normal 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; color: var(--static-maincolor); }

/* Plus aus zwei Strichen, wird beim Öffnen zum Minus */
.lx-plus { position: relative; width: 18px; height: 18px; align-self: center; }
.lx-plus::before, .lx-plus::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.lx-plus::after { transform: rotate(90deg); }
.lx-d[open] .lx-plus::after { transform: rotate(0deg); }
.lx-d[open] .lx-t { color: var(--acc, var(--sec)); }

.lx-body { padding: 0 clamp(16px, 1.6vw, 28px) clamp(26px, 3.4vh, 40px) calc(clamp(16px, 1.6vw, 28px) + clamp(46px, 4vw, 70px) + clamp(12px, 1.4vw, 22px)); }
.lx-kurz { max-width: 62ch; margin: 0 0 18px; font-size: clamp(17px, 1.15vw, 20px); line-height: 1.55; color: rgba(var(--gridcolor-rgb), .86); }
.lx-mehr { font: 13px var(--f-mono); letter-spacing: .04em; color: var(--textcolor); text-decoration: underline; text-underline-offset: 4px; }
.lx-mehr:hover { color: var(--acc, var(--sec)); }

@media (hover: hover) {
  .lx-liste:hover .lx-d:not(:hover):not([open]) .lx-sum { opacity: .55; }
  .lx-sum:hover .lx-t, .lx-sum:focus-visible .lx-t { color: var(--acc, var(--sec)); transform: translateX(1.2vw); }
}
.lx-sum:focus-visible { outline: 2px solid var(--static-seccolor); outline-offset: -2px; }

/* Suche: ausgeblendete Treffer und leere Buchstaben */
.lx-i[hidden], .rgu-kap[hidden] { display: none; }
.lx-nix { font-size: clamp(18px, 1.4vw, 24px); color: rgba(var(--gridcolor-rgb), .8); }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .rgu-nav.lx-nav { margin-bottom: 50px; }
  .rgu-nav .lx-az { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .rgu-nav .lx-az a, .lx-az span { padding: 0; border: 0; font-weight: 600; }
  .rgu-nav .lx-az a.on { border: 0; }
  .lx-sum { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 22px 16px; }
  .lx-sum .rgu-nr { display: none; }
  .lx-body { padding: 0 16px 26px; }
}