/* =====================================================================
   Versicherungslexikon  —  /versicherungslexikon/
   Baut auf styles.css auf (Tokens, .container, .section-head, .kicker,
   .accordion, .cta). Hier steht nur, was es dort nicht gibt.
   ===================================================================== */

/* Sprungziele landen unterhalb von Navigationsleiste + Werkzeugleiste */
.lx-term,.lx-buchstabe{scroll-margin-top:calc(var(--lx-oben,64px) + var(--lx-leiste,118px) + 16px)}

/* ---------- Einleitung ---------- */
.lx-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.lx-intro img{width:100%;height:auto;border-radius:var(--radius)}
.lx-intro .prose p{font-size:1.04rem}
.lx-stand{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:.9rem;color:var(--text-body)}
.lx-stand span{display:inline-flex;align-items:center;gap:7px}
.lx-stand svg{width:16px;height:16px;color:var(--petrol);flex:none}
@media (max-width:820px){.lx-intro{grid-template-columns:1fr}.lx-intro img{max-width:460px;margin-inline:auto}}

/* ---------- Themenbereiche (Kacheln = Filter) ---------- */
.lx-bereiche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.lx-bereiche{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.lx-bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-bereich:last-child{grid-column:1 / -1}}
.lx-bereich{
  font:inherit;cursor:pointer;text-align:center;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:16px 12px 14px;box-shadow:var(--shadow-soft);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease,background .3s ease;
}
.lx-bereich img{width:64px;height:64px;border-radius:12px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.lx-bereich:hover img{transform:translateY(-3px) scale(1.06)}
.lx-bereich b{font-size:.93rem;line-height:1.25;font-weight:650}
.lx-bereich small{font-size:.8rem;color:var(--text-body)}
.lx-bereich:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--mint)}
.lx-bereich:focus-visible,.lx-buchstaben a:focus-visible,.lx-suche input:focus-visible,.lx-reset:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.lx-bereich[aria-pressed="true"]{border-color:var(--petrol);background:var(--soft);box-shadow:0 0 0 3px rgba(11,114,133,.14)}
.lx-bereich[aria-pressed="true"] small{color:var(--petrol-dark);font-weight:600}
.no-js .lx-bereiche-wrap{display:none}

/* ---------- Werkzeugleiste (Suche + A–Z), klebt unter der Navigation ---------- */
.lx-leiste{
  position:sticky;top:var(--lx-oben,64px);z-index:40;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);box-shadow:0 6px 16px rgba(11,114,133,.06);
}
.lx-leiste .container{padding-block:12px;display:flex;flex-direction:column;gap:10px}
.lx-suche{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lx-suche label{position:relative;flex:1 1 220px;display:block}
.lx-suche svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--petrol);pointer-events:none}
.lx-suche input{
  width:100%;font:inherit;font-size:1rem;color:var(--text);
  padding:.72em 1em .72em 2.6em;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lx-suche input::placeholder{color:#8a8f91}
.lx-suche input:focus{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(11,114,133,.14)}
.lx-zahl{flex:none;font-size:.9rem;color:var(--text-body);white-space:nowrap}
.lx-zahl b{color:var(--petrol-dark)}
.lx-reset{font:inherit;font-size:.88rem;font-weight:600;color:var(--petrol-dark);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.45em 1em;cursor:pointer}
.lx-reset:hover{border-color:var(--petrol)}
.lx-reset[hidden]{display:none}
.no-js .lx-suche{display:none}

.lx-buchstaben{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;margin:0;padding-left:0;list-style:none}
.lx-buchstaben li{margin:0;flex:none}
.lx-buchstaben a,.lx-buchstaben span{
  display:grid;place-items:center;min-width:34px;height:34px;border-radius:9px;
  font-weight:700;font-size:.92rem;
}
.lx-buchstaben a{color:var(--petrol-dark);background:var(--soft);border:1px solid transparent;transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.lx-buchstaben a:hover{transform:translateY(-2px)}
.lx-buchstaben a:hover{background:var(--petrol);color:#fff}
.lx-buchstaben span,.lx-buchstaben a.ist-leer{color:#b9c0c2;background:transparent;pointer-events:none}

/* ---------- Begriffsliste ---------- */
.lx-liste{padding-top:clamp(36px,5vw,56px)}
.lx-buchstabe{margin-bottom:clamp(32px,5vw,52px);content-visibility:auto;contain-intrinsic-size:auto 900px}
.lx-buchstabe[hidden]{display:none}
.lx-buchstabe > h2{
  display:flex;align-items:center;gap:16px;font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--petrol);margin-bottom:18px;
}
.lx-buchstabe > h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--mint),transparent)}
.lx-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}

/* Karte: alle exakt gleich hoch - Titel 2 Zeilen, Definition 4 Zeilen reserviert.
   Animiert wird nur transform/opacity (Grafikkarte, keine Layout-Neuberechnung). */
.lx-term{
  --lx-ease:cubic-bezier(.2,.8,.2,1);
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 16px;box-shadow:var(--shadow-soft);
  transition:transform .35s var(--lx-ease),border-color .35s var(--lx-ease);
}
.lx-term::before{ /* Akzentlinie oben, wie bei den Leistungskarten */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--petrol),var(--teal-mid));transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--lx-ease);
}
.lx-term::after{ /* großer Schatten liegt fertig bereit und wird nur eingeblendet */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--shadow-lg);
  opacity:0;transition:opacity .35s var(--lx-ease);pointer-events:none;
}
.lx-term[hidden]{display:none}
.lx-term:hover,.lx-term:focus-within{transform:translateY(-5px);border-color:transparent}
.lx-term:hover::before,.lx-term:focus-within::before{transform:scaleX(1)}
.lx-term:hover::after,.lx-term:focus-within::after{opacity:1}
.lx-term:target{border-color:var(--petrol)}
.lx-term:target::before{transform:scaleX(1)}

.lx-term h3{
  font-size:1.1rem;line-height:1.25;margin:0 0 .45em;padding-right:34px;hyphens:auto;overflow-wrap:break-word;
  min-height:2.5em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.lx-term p{font-size:.95rem;margin:0 0 .75em;hyphens:auto}
.lx-term .lx-def{
  color:var(--text);line-height:1.6;min-height:6.4em;margin-bottom:14px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.lx-term dfn{font-style:normal;font-weight:650}
.lx-mehr{display:none}
.no-js .lx-mehr{display:block}
.no-js .lx-term .lx-def,.no-js .lx-term h3{display:block;min-height:0}
.no-js .lx-fuss{display:none}

.lx-pille{
  display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--petrol-dark);background:var(--soft);border-radius:999px;padding:.3em .8em;margin-bottom:10px;
  transition:background .3s ease,color .3s ease;
}
.lx-term:hover .lx-pille{background:var(--petrol);color:#fff}

.lx-fuss{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.lx-oeffnen{
  font:inherit;font-size:.9rem;font-weight:600;color:var(--petrol-dark);background:none;border:0;padding:4px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.lx-oeffnen::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit} /* ganze Karte klickbar */
.lx-pfeil{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lx-term:hover .lx-pfeil{transform:translateX(5px)}
.lx-oeffnen:focus-visible{outline:none}
.lx-term:has(.lx-oeffnen:focus-visible){outline:3px solid var(--petrol);outline-offset:3px}
.lx-marken{display:flex;gap:5px}
.lx-marke{
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:.78rem;font-weight:700;
  color:var(--petrol);background:var(--soft);
}

.lx-anker{
  position:absolute;right:12px;top:14px;z-index:2;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:#9aa3a5;opacity:.55;transition:opacity .25s ease,color .25s ease,background .25s ease;
}
.lx-term:hover .lx-anker,.lx-anker:focus-visible{opacity:1}
.lx-anker svg{width:16px;height:16px}
.lx-anker:hover,.lx-anker:focus-visible{color:var(--petrol);background:var(--soft)}
.lx-anker.ist-kopiert{color:#fff;background:var(--petrol);opacity:1}

/* Karten gleiten beim Scrollen herein - reines CSS, läuft auf dem Compositor.
   Browser ohne Unterstützung zeigen die Karten einfach sofort. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .lx-term{animation:lx-rein linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes lx-rein{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

.lx-meta{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:.9rem}
.lx-meta > div{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.lx-meta dt{font-weight:600;color:var(--text);flex:none}
.lx-meta dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.lx-meta a{font-weight:500}
.lx-weiter{font-weight:600}
.lx-weiter::after{content:" →"}

/* ---------- Overlay mit der ganzen Erklärung ---------- */
.lx-dialog{
  width:min(680px,calc(100vw - 32px));max-height:min(86vh,760px);padding:0;border:0;border-radius:calc(var(--radius) + 6px);
  box-shadow:0 30px 80px rgba(8,93,109,.35);color:var(--text-body);background:#fff;overflow:hidden;
  opacity:0;translate:0 16px;scale:.98;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1),translate .28s cubic-bezier(.2,.8,.2,1),scale .28s cubic-bezier(.2,.8,.2,1),overlay .28s allow-discrete,display .28s allow-discrete;
}
.lx-dialog[open]{display:flex;flex-direction:column;opacity:1;translate:0 0;scale:1}
@starting-style{.lx-dialog[open]{opacity:0;translate:0 16px;scale:.98}}
.lx-dialog::backdrop{background:rgba(8,60,70,0);transition:background .28s ease,overlay .28s allow-discrete,display .28s allow-discrete}
.lx-dialog[open]::backdrop{background:rgba(8,60,70,.45)}
@starting-style{.lx-dialog[open]::backdrop{background:rgba(8,60,70,0)}}
.lx-d-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 0}
.lx-d-kopf .lx-pille{margin:0}
.lx-d-zu{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.lx-d-zu svg{width:18px;height:18px}
.lx-d-zu:hover{background:var(--soft);transform:rotate(90deg)}
.lx-d-zu:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.lx-dialog h2{font-size:clamp(1.35rem,3vw,1.7rem);margin:12px 24px 10px;hyphens:auto;overflow-wrap:break-word}
.lx-d-inhalt{padding:0 24px 8px;overflow-y:auto;overscroll-behavior:contain;transition:opacity .18s ease}
.lx-d-inhalt.ist-wechsel{opacity:0}
.lx-d-inhalt p{font-size:1rem;margin:0 0 .9em;hyphens:auto}
.lx-d-inhalt .lx-def{color:var(--text);font-size:1.06rem}
.lx-d-inhalt dfn{font-style:normal;font-weight:650}
.lx-d-inhalt .lx-mehr{display:block}
.lx-d-fuss{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--line);background:var(--surface)}
@media (max-width:560px){
  .lx-dialog{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  .lx-d-fuss .btn{flex:1;justify-content:center}
}

.lx-leer{text-align:center;padding:40px 20px;border:1.5px dashed var(--line);border-radius:var(--radius);background:#fff}
.lx-leer[hidden]{display:none}
.lx-leer h2{font-size:1.3rem}

/* ---------- Quellen / Hinweis ---------- */
.lx-hinweis{font-size:.92rem;max-width:80ch}
.lx-hinweis p{margin-bottom:.7em}

@media (max-width:560px){
  .lx-term{padding:18px 16px 14px}
  .lx-term .lx-def{-webkit-line-clamp:5;min-height:8em}
  .lx-bereich img{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .lx-bereich,.lx-bereich img,.lx-term,.lx-term::before,.lx-term::after,.lx-dialog,.lx-dialog::backdrop{transition:none}
  .lx-bereich:hover,.lx-bereich:hover img,.lx-term:hover,.lx-term:focus-within{transform:none}
}
@media print{
  .lx-leiste,.lx-bereiche-wrap,.lx-anker,.site-footer,.navbar,.topbar{display:none!important}
  .lx-term{break-inside:avoid;box-shadow:none;animation:none}
  .lx-mehr{display:block}
  .lx-term .lx-def,.lx-term h3{display:block;min-height:0}
  .lx-fuss{display:none}
}