/* ── Compact catalogue bar (catbar) — shared by portfolio, services, data access,
   and applications. One row: search + result count on the left; beyond ONE
   divider, sorting, filter toggle, and view switch on the right. The filter opens
   a collapsible panel below (containing the former filter dropdowns). */
.catbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-5);
  padding-bottom:var(--sp-2); border-bottom:var(--stroke-1) solid var(--color-secondary-300); font-size:var(--text-sm); }
/* The margin above separates the bar from a page header. A bar that OPENS its
   container (a tab panel, for example) has nothing to separate from. */
.catbar--flush { margin-top:0; }
/* Anatomy (magnifier inside the field, absolutely positioned submit) is defined
   above in the “In-page search” block; only the differences live here. */
.catbar__search { position:relative; flex:1 1 15rem; min-width:11rem; max-width:24rem; }
/* DELIBERATE EXCEPTION to the field scale: the catalogue bar is a compact
   toolbar — field, sort select, filter button, and view buttons share the fixed
   44px height (--target-min), so the row never jumps between viewport widths.
   This DEVIATES from CD: buttons grow to 48px at xl (btn.postcss:112-117) and
   fields at 2xl (input.postcss:1-16); that growth is deliberately not adopted. */
.catbar__search input { width:100%; min-height:var(--target-min); padding-left:var(--target-min); }
.catbar__submit { position:absolute; top:0; bottom:0; left:0; width:var(--target-min);
  min-height:0; padding:0; justify-content:center; color:var(--color-text-muted); }
.catbar__submit:hover { color:var(--color-primary-600); background:none; }
.catbar__count { color:var(--color-text-muted); white-space:nowrap; }
/* CD keeps the result count regular (search.postcss:215-217), matching our own
   .search-results__header row; only its ink remains darker than the suffix. */
.catbar__count strong { font-weight:var(--fw-regular); color:var(--color-text); }
/* Control cluster on the right (bare controls, CD pattern): sort · filter · │ ·
   view switch. Every control has the same height (--target-min); the ONE
   divider is the view-switch rule between the filter and view controls. */
/* The group lacked flex-wrap and min-width:0, so the bare sort select + nowrap
   filter + view switch formed one indivisible 402–520px row.
   .container{overflow-x:clip} (CD's own rule, container.postcss:8) then clipped
   the overflow without a scrollbar — at 320 BOTH view buttons were outside the
   viewport, and at 390 the second was outside (WCAG 1.4.10 + 2.1.1).
   CD's counterpart explicitly wraps (search.postcss:208-211). */
.catbar__controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-1);
  margin-left:auto; min-width:0; max-width:100%; }
/* Without a search field (search results): result count left, controls right —
   CD's `.search-results__header` (flex, justify-between, ml-auto on the right). */
.catbar--no-search .catbar__count { flex:1 1 auto; }
.catbar__sort { position:relative; min-width:0; max-width:100%; }
.catbar__sort select { max-width:100%; text-overflow:ellipsis; }
/* CD aligns the sort select in the results header to the RIGHT
   (search.postcss:229-233 `.search-results__header__right select { text-right }`).
   An earlier comment rejected this because short options would touch the edge,
   but `padding-right` for the chevron already provides that space. Align left
   only where the field becomes full-width on mobile. */
.catbar__sort select { text-align:right; }
@media (max-width:767.98px){ .catbar__sort select { text-align:left; } }
/* DELIBERATE DEVIATION from CD: right-aligned options touched the edge of the
   open popup (CD sets `text-right` without padding). Chromium honors `padding`
   on <option> in the popup, so this adds the same optical edge as the closed state. */
/* Set option colors explicitly: the bare select only inherits `color` on the
   <select>; <option> itself has neither a color nor an opaque background. Some
   browsers do NOT inherit the select color into the native popup and render the
   options light on light (unreadable). Therefore, as for .language-switcher
   select, apply text color and a white background directly to each option. */
.catbar__sort select option { padding-right:var(--sp-3); color:var(--color-text); background:var(--color-bg); }
.catbar__sort select option:disabled { color:var(--color-gray-400); }
/* CD padding (px-4) on the left; space for the chevron on the right (which also
   supplies the inset for the right alignment above). */
.catbar__sort select { min-height:var(--target-min); padding-left:var(--sp-4); padding-right:var(--sp-7); font-size:var(--text-sm); color:var(--color-text); }
.catbar__sort .select__icon { color:var(--color-text-muted); }
.catbar__filter { min-height:var(--target-min); white-space:nowrap; }
.catbar__fcount { margin-left:var(--sp-1); font-weight:var(--fw-bold); }
/* Scoped to the button context; otherwise `.btn .icon` (0,2,0) wins and makes
   the 1.4em arrow noticeably too large beside the label. */
.btn .catbar__chev, .catbar__chev { width:1em; height:1em; transition:transform var(--duration); }
.catbar__filter[aria-expanded="true"] .catbar__chev { transform:rotate(180deg); }
.catbar .view-switch__btn { min-height:var(--target-min); }
/* The bar's `extra` slot: a secondary action at the far right, separated like
   the view switch. It has the same hierarchy and must not read as another
   filter attached to “Filter”.
   A C.menu in the same slot gets the identical treatment — the divider belongs
   to the SLOT, not to the kind of control filling it. The «Mehr» export menu
   (dataset «Datenfelder») was the one bar control in the portal without it and
   sat 4px from the sort select, so an export dropdown read as part of sorting
   (user finding, 2026-08-13). The rule goes on the .action-menu wrapper, never
   the trigger: on the button the border would become part of the button box. */
.catbar__aside,
.catbar__controls > .action-menu { min-height:var(--target-min); white-space:nowrap;
  border-left:var(--stroke-1) solid var(--color-secondary-300); padding-left:var(--sp-4); margin-left:var(--sp-3); }

/* The tinted, rounded card is a deliberate decision and STAYS. Only the wrapping
   flex row changes: at 1440 it left roughly 60% of the panel empty and made
   “Reset” look like a third facet heading (Item 2.13). */
/* Column metrics follow CD (search.postcss:257-264 `gap-3 lg:gap-4`): one
   consistent gap from .75rem to 1rem at lg, with NO separate 2rem column gutter.
   MULTICOL, NOT GRID. A grid places each group in the next cell, so the tallest
   group dictates its whole row: the document archive has 22 buildings in the
   first facet, which pushed «Klassifizierung» into row 2 column 1 — below the
   fold, with two empty columns beside it (user finding, 2026-08-12). Multicol
   FLOWS instead: a short facet follows a tall one in the same column, and the
   panel balances. `break-inside:avoid` keeps a facet whole, and `column-span`
   below is what lets the action row still cross all columns. */
.catbar__panel { display:block; columns:1; column-gap:var(--sp-3);
  /* The panel owns its BOTTOM spacing (1.5rem = `mt-6`). The results block and
     C.mountDataTable follow without their own top margin, keeping spacing equal
     for catalogue pages and embedded tables. */
  padding:var(--sp-4) var(--sp-5); margin:var(--sp-3) 0 var(--sp-6); background:var(--surface-bg-muted);
  border:var(--stroke-1) solid var(--surface-border); border-radius:var(--surface-radius);
  box-shadow:var(--surface-elevation); }
@media (min-width:768px){ .catbar__panel { columns:2; } }
@media (min-width:1024px){ .catbar__panel { columns:3; column-gap:var(--sp-4); } }
/* The gap between facets is now a margin: multicol has no row gap. */
.catbar__panel .filter-group { margin:0 0 var(--sp-3); break-inside:avoid; }
@media (min-width:1024px){ .catbar__panel .filter-group { margin-bottom:var(--sp-4); } }
.catbar__panel .filter-group:last-of-type { margin-bottom:0; }
.catbar__panel-actions { column-span:all; display:flex; justify-content:flex-end;
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:var(--stroke-1) solid var(--color-secondary-200); }
/* The same applies to sidebar filters (dashboards, portfolio map): the reset
   button sat as the last sibling directly below the final filter group and read
   like another filter instead of an action for all groups (Item 5.18). Give it
   a separate row with a divider, left-aligned here because the bar is narrow
   and a right-aligned button would become detached from the text. */
.filter-panel__actions { display:flex; margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:var(--stroke-1) solid var(--color-secondary-200); }
/* Catalogue-page filter dropdowns (C.select) inside the panel. */
.catbar__panel .form__group__select { min-width:0; margin:0; }
/* CD-md (767.98) instead of the custom 700 width — live-checked at 320/390 on
   catalogue, portfolio, services, and projects: all view buttons return to the
   viewport and the bar grows by exactly one row. */
@media (max-width:767.98px){
  /* Do NOT force the result count onto its own row: `flex:0 1 auto` keeps it next
     to the search field while it fits, wrapping only when space is genuinely
     tight. With `flex:1 1 100%` it occupied a row alone even when 190px remained
     beside the 24rem search field (measured at 630px). `white-space:nowrap`
     above keeps the count together. */
  .catbar__count    { flex:0 1 auto; }
  .catbar__controls { flex:1 1 100%; margin-left:0; justify-content:space-between; }
  .catbar__sort     { flex:1 1 8rem; }
  .catbar__sort select { width:100%; }
  .catbar__controls .view-switch { margin-left:auto; }   /* stays right-aligned, as on desktop */
}
/* Below 480px there is no longer room for search AND count side by side: the
   search field shrank to its min-width and clipped the placeholder. Keep the
   count on its own row there. */
@media (max-width:479.98px){
  .catbar__count { flex:1 1 100%; }
}
@media (max-width:479.98px){
  /* The divider looks wrong at the row start when the switch wraps by itself. */
  .catbar__controls .view-switch { border-left:0; padding-left:0; }
  .catbar__aside,
  .catbar__controls > .action-menu { border-left:0; padding-left:0; margin-left:0; }
}