/* ════════════════════════════════════════════════════════════════════
   LEX CHROME — gemeinsame Topbar + Footer + globale Suche + Sprachschalter
   Wird von templates/partials/nav.html und footer.html geladen.
   Braucht die Tokens aus lex-tokens.css (via @import — idempotent, Browser
   lädt die Datei nur einmal, auch wenn lex-ui.css sie ebenfalls importiert).
   ════════════════════════════════════════════════════════════════════ */
@import url("lex-tokens.css");

/* ── Klassifizierungs-Balken (falls die Seite keinen eigenen hat) ──── */
.lxc-classbar{position:sticky;top:0;z-index:var(--z-class);height:var(--clsh);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 16px;background:#000;border-bottom:1px solid var(--hud-line);
  font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.22em;
  color:var(--t2);text-transform:uppercase;white-space:nowrap;overflow:hidden;}
.lxc-classbar .l{color:var(--accent);text-shadow:0 0 8px rgba(200,16,46,0.35);
  overflow:hidden;text-overflow:ellipsis;}
.lxc-classbar .r{color:var(--t3);font-variant-numeric:tabular-nums;}
@media(max-width:680px){.lxc-classbar .r{display:none}}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.lxc-top{position:sticky;top:var(--clsh);z-index:var(--z-topbar);display:flex;
  align-items:center;gap:10px 18px;padding:10px 16px;flex-wrap:wrap;
  background:rgba(8,8,11,0.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pb);}
.lxc-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hud-line) 20%,var(--hud-line) 80%,transparent);}
.lxc-brand{display:flex;flex-direction:column;line-height:1.05;min-width:0;text-decoration:none;}
.lxc-brand .kick{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--accent);}
.lxc-brand b{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.16em;
  color:var(--t0);text-shadow:var(--glow);white-space:nowrap;}

.lxc-nav{display:flex;gap:4px 15px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-xs);}
.lxc-nav a{color:var(--t2);padding:4px 2px;border-bottom:2px solid transparent;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
  transition:color var(--d-1) var(--ease-out);white-space:nowrap;}
.lxc-nav a:hover{color:var(--t0);}
.lxc-nav a.on{color:var(--accent);border-bottom-color:var(--accent);text-shadow:var(--glow);}
.lxc-nav a.cta{color:var(--t0);background:var(--accent);border-radius:var(--r);
  padding:5px 12px;border-bottom:none;box-shadow:0 0 14px rgba(200,16,46,0.3);}
.lxc-nav a.cta:hover{background:var(--accent-warm);}
.lxc-spacer{flex:1 1 auto;}

/* ── Globale Suche (Typeahead) ──────────────────────────────────────── */
.lxc-search{position:relative;min-width:170px;flex:0 1 260px;}
.lxc-search input{width:100%;background:var(--bg);border:1px solid var(--pb2);
  border-radius:var(--r);color:var(--t1);font-family:var(--mono);font-size:var(--fs-xs);
  padding:6px 9px 6px 26px;outline:none;
  transition:border-color var(--d-1),box-shadow var(--d-1);}
.lxc-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--ag);}
.lxc-search .ico{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  color:var(--t3);pointer-events:none;font-size:var(--fs-xs);}
.lxc-search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;
  max-height:60vh;overflow:auto;background:var(--bg-2);border:1px solid var(--pb2);
  border-radius:var(--r-2);box-shadow:var(--e-pop);z-index:var(--z-modal);display:none;}
.lxc-search-drop.open{display:block;}
.lxc-search-drop .grp{font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--accent);
  padding:9px 12px 4px;border-top:1px solid var(--pb);}
.lxc-search-drop .grp:first-child{border-top:none;}
.lxc-search-drop .hit{display:block;padding:7px 12px;color:var(--t1);
  font-size:var(--fs-sm);text-decoration:none;cursor:default;}
.lxc-search-drop a.hit{cursor:pointer;}
.lxc-search-drop .hit .m{display:block;font-family:var(--mono);
  font-size:var(--fs-2xs);color:var(--t3);margin-top:1px;}
.lxc-search-drop a.hit:hover,.lxc-search-drop .hit.sel{background:var(--bg-3);color:var(--t0);}
.lxc-search-drop .empty{padding:12px;color:var(--t3);font-size:var(--fs-sm);}

/* ── Sprachschalter (Buttons baut lex-translate.js) ─────────────────── */
.lex-lang-switch{display:inline-flex;gap:2px;align-items:center;}
.lex-lang-switch .lex-lang-btn{background:transparent;border:1px solid var(--pb2);
  color:var(--t3);font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.06em;
  padding:3px 6px;border-radius:var(--r);cursor:pointer;
  transition:color var(--d-1),border-color var(--d-1),background var(--d-1);}
.lex-lang-switch .lex-lang-btn:hover{color:var(--t1);border-color:var(--accent);}
.lex-lang-switch .lex-lang-btn.on{color:#fff;background:var(--accent);border-color:var(--accent);}

/* ── Mobile ─────────────────────────────────────────────────────────── */
.lxc-burger{display:none;background:transparent;border:1px solid var(--pb2);
  border-radius:var(--r);color:var(--t1);font-size:16px;line-height:1;
  padding:5px 10px;cursor:pointer;}
@media(max-width:860px){
  .lxc-burger{display:block;order:2;}
  .lxc-brand{order:1;}
  .lxc-search{order:3;flex:1 1 100%;}
  .lxc-nav{order:4;display:none;flex-basis:100%;flex-direction:column;
    align-items:stretch;gap:0;border-top:1px solid var(--pb);margin-top:8px;padding-top:6px;}
  .lxc-nav.open{display:flex;}
  .lxc-nav a{padding:10px 4px;font-size:var(--fs-sm);border-bottom:1px solid var(--pb);}
  .lxc-nav a.on{border-bottom-color:var(--accent);}
  .lxc-nav a.cta{text-align:center;margin-top:8px;}
  .lex-lang-switch{order:5;margin-top:8px;}
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.lxc-foot{margin-top:64px;background:var(--bg-1);border-top:1px solid var(--pb);}
.lxc-foot::before{content:"";display:block;height:2px;
  background:linear-gradient(90deg,transparent,var(--hud-line) 30%,var(--hud-line) 70%,transparent);}
.lxc-foot-in{max-width:var(--maxw);margin:0 auto;padding:36px 18px 20px;
  display:grid;gap:28px;grid-template-columns:2fr 1fr 1fr 1fr;}
.lxc-foot h4{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
.lxc-foot .brand{font-family:var(--serif);font-size:17px;letter-spacing:.14em;color:var(--t0);}
.lxc-foot .claim{font-size:var(--fs-sm);color:var(--t2);margin-top:8px;max-width:340px;line-height:var(--lh-base);}
.lxc-foot ul{list-style:none;margin:0;padding:0;}
.lxc-foot li{margin:0 0 7px;}
.lxc-foot a{color:var(--t2);font-size:var(--fs-sm);text-decoration:none;transition:color var(--d-1);}
.lxc-foot a:hover{color:var(--t0);}
.lxc-foot-bottom{max-width:var(--maxw);margin:0 auto;padding:14px 18px 22px;
  border-top:1px solid var(--pb);display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--t3);letter-spacing:.04em;}
.lxc-foot-bottom a{color:var(--t3);text-decoration:none;}
.lxc-foot-bottom a:hover{color:var(--t1);}
@media(max-width:860px){.lxc-foot-in{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.lxc-foot-in{grid-template-columns:1fr;}}