/* ============================================================
   R4X v2436 · Filterschublade der Glossare
   Die Schublade lag bisher teils hinter der Kopfnavigation und wurde
   auf Mobile von der unteren Navigationsleiste abgeschnitten. Diese
   Datei wird als letzte geladen und setzt die Ebene sauber:
   unterhalb des Headers, oberhalb der Mobile-Nav, immer scrollbar.
   ============================================================ */

body.r4x-glossar-origin-shell{
  --r4x-filter-top-gap:12px;
  --r4x-filter-bottom-gap:16px;
}

/* --- Hintergrundebene --- */
body.r4x-glossar-origin-shell .r4x-filter-backdrop{
  position:fixed;
  inset:0;
  z-index:10930;
  background:rgba(28,22,12,.34);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.r4x-glossar-origin-shell .r4x-filter-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}
body.r4x-glossar-origin-shell .r4x-filter-backdrop[hidden]{ display:none; }

/* --- Die Schublade selbst --- */
body.r4x-glossar-origin-shell .r4x-filter-drawer.is-open{
  position:fixed !important;
  z-index:10940 !important;
  top:calc(var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback)) + var(--r4x-filter-top-gap)) !important;
  bottom:auto !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(940px, calc(100vw - 32px)) !important;
  margin:0 !important;
  padding:16px 18px calc(16px + var(--r4x-filter-bottom-gap)) !important;
  border:1px solid #e3d9c4 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fffdf8 0%,#fdfaf3 100%) !important;
  box-shadow:0 26px 60px rgba(40,31,14,.22), 0 2px 0 rgba(255,255,255,.7) inset !important;
  max-height:calc(100dvh
    - var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback))
    - var(--r4x-filter-top-gap)
    - var(--r4x-filter-bottom-gap)
    - 12px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Auf Mobile sitzt unten die Navigationsleiste. Die Schublade endet darueber,
   statt darunter zu verschwinden. */
@media (max-width:768px){
  body.r4x-glossar-origin-shell{
    --r4x-filter-top-gap:10px;
    --r4x-filter-bottom-gap:14px;
  }
  body.r4x-glossar-origin-shell .r4x-filter-drawer.is-open{
    top:calc(var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback)) + var(--r4x-filter-top-gap)) !important;
    width:calc(100vw - 22px) !important;
    padding:14px 14px 16px !important;
    border-radius:16px !important;
    max-height:calc(100dvh
      - var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback))
      - var(--r4x-mobile-nav-space, 66px)
      - var(--r4x-filter-top-gap)
      - var(--r4x-filter-bottom-gap)
      - 10px) !important;
  }
  /* Die Mobile-Nav bleibt bedienbar, liegt aber unter der Schublade. */
  body.r4x-glossar-filters-open .r4x-mobile-nav{ z-index:310 !important; }
}

/* Sehr flache Fenster: die Schublade darf ruhig fast alles einnehmen. */
@media (max-height:520px){
  body.r4x-glossar-origin-shell .r4x-filter-drawer.is-open{
    top:calc(var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback)) + 6px) !important;
    max-height:calc(100dvh - var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback)) - 16px) !important;
  }
}

/* --- Kopfzeile der Schublade --- */
body.r4x-glossar-origin-shell .r4x-filter-drawer.is-open .r4x-filter-drawer-head{
  position:sticky;
  top:-16px;
  z-index:2;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-16px -18px 12px;
  padding:14px 18px 12px;
  background:linear-gradient(180deg,#fffdf8 78%,rgba(255,253,248,0) 100%);
  border-bottom:1px solid #efe7d7;
}
@media (max-width:768px){
  body.r4x-glossar-origin-shell .r4x-filter-drawer.is-open .r4x-filter-drawer-head{
    top:-14px;
    margin:-14px -14px 10px;
    padding:12px 14px 10px;
  }
}

/* --- Aktive Filter deutlich sichtbar --- */
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-category-chip.is-active,
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-category-chip.is-active:not([data-category="all"]),
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-category-chip[data-category="all"].is-active,
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-letter-chip.is-active,
body.r4x-glossar-origin-shell .r4x-letter-chip.is-active{
  border-color:#8a6a17 !important;
  background:linear-gradient(180deg,#2a2216 0%,#171208 100%) !important;
  color:#f7e3ad !important;
  font-weight:800 !important;
  box-shadow:0 0 0 2px rgba(201,162,74,.45), 0 4px 12px rgba(30,23,8,.28) !important;
}
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-category-chip.is-active .r4x-chip-icon,
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-category-chip.is-active:not([data-category="all"]) .r4x-chip-icon{
  border-color:rgba(247,227,173,.55) !important;
  background:rgba(247,227,173,.16) !important;
  color:#f7e3ad !important;
}
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-category-chip:focus-visible,
body.r4x-glossar-origin-shell .r4x-filter-drawer .r4x-letter-chip:focus-visible{
  outline:2px solid #8a6a17 !important;
  outline-offset:2px !important;
}

/* Auch ausserhalb der Schublade konsistent (Chips in der aktiven Filterzeile) */
body.r4x-glossar-origin-shell .r4x-active-filter-chip{
  border-color:#c9a24a !important;
  background:#fdf3d9 !important;
  color:#6b4f0e !important;
  font-weight:700 !important;
}

/* ============================================================
   R4X v2439 · Schublade als direktes Kind von <body>
   .r4x-workbench ist position:sticky mit z-index:35 und bildet
   einen eigenen Stacking Context. Innerhalb davon kann kein
   z-index die Navigation (10920) uebertreffen. Deshalb haengt
   die Schublade jetzt an <body>. Diese Regeln stellen sicher,
   dass sie dort geschlossen unsichtbar bleibt.
   ============================================================ */
body > .r4x-filter-drawer[data-r4x-portaled]{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
body > .r4x-filter-drawer[data-r4x-portaled].is-open{
  display:block !important;
}
body > .r4x-filter-backdrop[data-r4x-portaled]{
  margin:0 !important;
}
/* Der Rueckfallwert greift nur, solange die Messung noch laeuft. Er ist
   bewusst grosszuegig: lieber etwas zu tief als unter der Navigation. */
body.r4x-glossar-origin-shell{
  --r4x-glossar-chrome-fallback:calc(var(--r4x-shared-header-height, 88px) + 58px);
}
@media (max-width:768px){
  body.r4x-glossar-origin-shell{
    --r4x-glossar-chrome-fallback:calc(var(--r4x-shared-header-height, 68px) + 54px);
  }
}

/* ============================================================
   R4X v2441 · Fokusmodus: Kopf bleibt, Navigation geht
   styles.v2536.css:15896 blendet im Fokusmodus .r4x-header aus und
   laesst .r4x-ecosystem-nav stehen - genau verkehrt herum. Diese
   Datei wird nach styles.v2536.css geladen und dreht es um.
   ============================================================ */
body.r4x-glossar-origin-shell.r4x-glossar-focus-mode .r4x-header{
  display:flex !important;
}
body.r4x-glossar-origin-shell.r4x-glossar-focus-mode .r4x-ecosystem-nav{
  display:none !important;
}

/* Die Fokus-Regeln fuer die Schublade gingen davon aus, dass oben nichts mehr
   steht (top:10px). Jetzt steht dort der Kopf. Wir rechnen wieder mit der
   gemessenen Unterkante - die faellt im Fokusmodus automatisch kleiner aus,
   weil chromeBottom() ausgeblendete Leisten ueberspringt. */
body.r4x-glossar-origin-shell.r4x-glossar-focus-mode .r4x-filter-drawer.is-open{
  top:calc(var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback)) + var(--r4x-filter-top-gap)) !important;
  max-height:calc(100dvh
    - var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback))
    - var(--r4x-filter-top-gap)
    - var(--r4x-filter-bottom-gap)
    - 12px) !important;
}
@media (max-width:768px){
  body.r4x-glossar-origin-shell.r4x-glossar-focus-mode .r4x-filter-drawer.is-open{
    max-height:calc(100dvh
      - var(--r4x-glossar-chrome-bottom, var(--r4x-glossar-chrome-fallback))
      - var(--r4x-mobile-nav-space, 66px)
      - var(--r4x-filter-top-gap)
      - var(--r4x-filter-bottom-gap)
      - 10px) !important;
  }
}