/* ============================================================
   Digitalakademie Bayern — Programm catalogue explorer (.catx)
   ============================================================
   Scoped styles for the /programm page: a compact editorial hero,
   interactive multi-select facet tabs (0-match options fade out),
   an integrated register search and a list-only result
   stream. Everything is namespaced under .catx so it can't leak.
   Tokens come from colors_and_type.css.
   ============================================================ */

.catx {
  background: var(--dakby-bg-soft);
  font-family: var(--font-sans);
  color: var(--fg-1);
}
/* `overflow-x: hidden` on the root creates a scrolling ancestor and disables
   position: sticky in Chromium. `clip` preserves the site's horizontal crop
   without stealing sticky positioning from the nav and catalogue toolbar. */
html:has(.catx),
body:has(.catx) {
  overflow-x: clip;
}

/* ---- Search + live count, integrated into the catalogue toolbar ---------- */
.catx-search {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  flex: 0 1 520px;
  align-items: stretch;
  width: min(100%, 520px);
  min-width: 0;
  min-height: 48px;
  background: var(--bg-1);
  border: 0;
  padding: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition:
    background var(--dur-fast) var(--ease-out);
}
.catx-search:focus-within {
  background: color-mix(in srgb, var(--dakby-orange-100) 4%, var(--bg-1));
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 2px;
}
.catx-search-mark {
  display: grid;
  place-items: center;
  color: var(--dakby-ink-900);
  background: var(--dakby-orange-100);
}
.catx-search-mark svg {
  flex-shrink: 0;
}
.catx-search-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 5px 14px;
}
.catx-search-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dakby-orange-100);
}
.catx-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  outline: none;
}
.catx-search input::placeholder {
  color: var(--fg-3);
}
.catx-search-clear {
  align-self: center;
  border: 0;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  margin-right: 10px;
  padding: 6px;
}
.catx-search-clear:hover {
  color: var(--fg-1);
}

.catx-ledger-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 16px;
  width: min(100%, 650px);
  min-width: 0;
}
.catx-reset {
  flex: 0 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--dakby-orange-100);
  padding: 12px 0;
  white-space: nowrap;
}
.catx-reset:hover {
  color: var(--dakby-orange-90);
}
.catx-reset:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 4px;
}

/* ---- Result register ----------------------------------------------------
   A continuous, editorial programme ledger: the date blocks create the DAB
   rhythm; rules and typography provide structure without card containers. */
.catx-results {
  padding: 0 0 84px;
}

/* The expressive finder resolves into one practical, persistent control rail.
   It keeps the square DAB geometry and near-black field, but switches to the
   familiar vocabulary of selects/search/sort for quick catalogue refinement. */
.catx-catalog-toolbar {
  position: sticky;
  top: 108px;
  z-index: 35;
  display: grid;
  /* Ohne Suchfeld verteilt sich dessen Platz auf die drei Auswahlfelder — daher die
     größere Schrift in den Zellen (Tester-Rückmeldung vom 19.08.). */
  grid-template-columns:
    minmax(170px, 0.95fr)
    minmax(172px, 1fr)
    minmax(220px, 1.28fr)
    minmax(172px, 1fr)
    minmax(196px, 1.02fr)
    136px;
  align-items: stretch;
  min-height: 86px;
  color: #fff;
  background: var(--dakby-ink-900);
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.12);
  animation: catx-toolbar-in 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.catx-toolbar-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 11px;
  overflow: hidden;
  min-width: 0;
  padding: 10px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.catx-toolbar-count {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.catx-toolbar-context strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--dakby-orange-100);
}
.catx-toolbar-context small {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
}
.catx-toolbar-query {
  display: inline-flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: #fff;
  cursor: pointer;
  font: 700 12px/1.2 var(--font-sans);
  padding: 5px 8px;
}
.catx-toolbar-query:hover {
  background: rgba(255, 255, 255, 0.12);
}
.catx-toolbar-query:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 2px;
}
.catx-toolbar-query-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catx-toolbar-motif {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}
.catx-toolbar-motif .fnd-format-motif {
  inset: 0;
  width: 30px;
  height: 30px;
  transform: none;
}
.catx-toolbar-desktop-filters {
  display: contents;
}
/* Eine Zelle der Kopfleiste. Der Auslöser füllt sie vollständig: es gibt in der Zelle
   keine tote Fläche mehr, auf der ein Klick nur den Fokus setzt. */
.catx-toolbar-field {
  position: relative;
  display: flex;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.catx-picker-trigger {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 12px 34px 12px 16px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background 160ms var(--ease-out);
}
.catx-picker-trigger:hover {
  background: rgba(255, 255, 255, 0.11);
}
.catx-toolbar-field.is-open .catx-picker-trigger {
  background: rgba(255, 255, 255, 0.14);
}
.catx-picker-trigger:focus-visible {
  outline: 3px solid var(--dakby-orange-100);
  outline-offset: -3px;
  z-index: 1;
}
.catx-picker-label {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.catx-picker-value {
  overflow: hidden;
  max-width: 100%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.catx-picker-caret {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 160ms var(--ease-out);
  pointer-events: none;
}
.catx-toolbar-field.is-open .catx-picker-caret {
  transform: translateY(-30%) rotate(225deg);
}
.catx-toolbar-field.is-disabled .catx-picker-trigger {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.62);
}
.catx-toolbar-field.is-disabled .catx-picker-label,
.catx-toolbar-field.is-disabled .catx-picker-value {
  color: rgba(255, 255, 255, 0.62);
}
.catx-toolbar-field.is-disabled .catx-picker-caret {
  opacity: 0.4;
}
/* Die aufgeklappte Liste: helle Fläche, dunkler Text — der lesbarste Zustand für die
   eigentliche Auswahl, während die Leiste selbst im Hausschwarz bleibt. */
.catx-picker-list {
  position: absolute;
  top: 100%;
  left: -1px;
  z-index: 60;
  min-width: calc(100% + 2px);
  max-width: min(360px, 92vw);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-1);
  border: 1px solid var(--dakby-ink-900);
  box-shadow: 0 18px 38px rgba(17, 17, 17, 0.28);
  animation: catx-pop 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.catx-picker-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  color: var(--fg-1);
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
}
.catx-picker-option + .catx-picker-option {
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}
.catx-picker-option.is-selected {
  font-weight: 800;
}
.catx-picker-option.is-selected::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 22px;
  transform: translateY(-50%);
  background: var(--dakby-orange-100);
}
.catx-picker-option.is-active {
  background: var(--dakby-ink-900);
  color: #fff;
}
.catx-picker-option-count {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.catx-toolbar-sort {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.catx-toolbar-explorer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  border: 0;
  background: var(--dakby-orange-100);
  color: var(--dakby-ink-900);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.catx-toolbar-explorer:hover {
  background: var(--dakby-orange-90);
}
.catx-toolbar-explorer:focus-visible {
  outline: 3px solid var(--dakby-grey-10);
  outline-offset: -5px;
}
.catx-toolbar-explorer-mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 3px;
  height: 17px;
}
.catx-toolbar-explorer-mark span {
  display: block;
  width: 7px;
  height: 7px;
  background: currentColor;
}
.catx-toolbar-mobile-filters {
  display: none;
}
.catx-toolbar-clear {
  border: 0;
  background: none;
  color: var(--dakby-orange-100);
  cursor: pointer;
  font: 700 12px/1.2 var(--font-sans);
  text-align: left;
  padding: 14px;
}
.catx-catalog-toolbar + .catx-ledger .catx-ledger-head,
.catx-catalog-toolbar + .catx-ledger-search .catx-ledger-head {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.catx-ledger + .catx-ledger {
  margin-top: clamp(32px, 5vw, 58px);
}
.catx-ledger-head {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  min-height: 66px;
  padding: 12px 24px;
  color: var(--dakby-grey-10);
  background: var(--dakby-ink-900);
}
.catx-ledger-head.has-tools {
  grid-template-columns: 168px minmax(280px, 1fr);
  gap: clamp(20px, 2.4vw, 38px);
  min-height: 78px;
}
.catx-ledger-leading {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.catx-ledger-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 14px;
  min-width: 0;
}
.catx-ledger-heading strong {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--dakby-grey-10);
}
.catx-ledger-heading small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dakby-grey-50);
}
.catx-ledger-head.is-alternative .catx-ledger-heading strong {
  color: var(--dakby-orange-100);
}

.catx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  border-bottom: 2px solid var(--dakby-ink-900);
}
.catx-list > li {
  position: relative;
  border-bottom: 1px solid var(--border-default);
}
.catx-list > li:last-child {
  border-bottom: 0;
}
.catx-row {
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) minmax(176px, auto);
  align-items: stretch;
  gap: clamp(24px, 3vw, 52px);
  min-height: 154px;
  padding: 0 24px 0 0;
  text-decoration: none;
  color: var(--fg-1);
  isolation: isolate;
  overflow: hidden;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
  animation: catx-row-in 420ms var(--ease-out) both;
}
.catx-row:hover {
  background: color-mix(in srgb, var(--dakby-orange-100) 7%, var(--bg-1));
}
.catx-row:focus-visible {
  outline: 3px solid var(--dakby-orange-100);
  outline-offset: -3px;
}
/* gentle entrance stagger, capped so it never feels slow */
.catx-list > li:nth-child(1) .catx-row { animation-delay: 0ms; }
.catx-list > li:nth-child(2) .catx-row { animation-delay: 35ms; }
.catx-list > li:nth-child(3) .catx-row { animation-delay: 70ms; }
.catx-list > li:nth-child(4) .catx-row { animation-delay: 105ms; }
.catx-list > li:nth-child(5) .catx-row { animation-delay: 140ms; }
.catx-list > li:nth-child(6) .catx-row { animation-delay: 175ms; }
.catx-list > li:nth-child(n + 7) .catx-row { animation-delay: 200ms; }

.catx-when {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 52px 20px 24px;
  color: var(--dakby-ink-900);
  background: var(--dakby-orange-100);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.catx-row.is-featured .catx-when {
  color: var(--dakby-grey-10);
  background: var(--dakby-ink-900);
}
.catx-row:hover .catx-when {
  transform: translateX(6px);
}
.catx-sequence {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.58;
}
.catx-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.catx-date {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 750;
  line-height: 1;
  color: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.catx-date.muted {
  color: inherit;
  font-size: 17px;
  font-weight: 650;
  opacity: 0.75;
}

/* A curated Konzept-Nr. the catalogue cannot resolve yet — announced as a placeholder
   instead of dropped (Themenseiten-Blockmodell, see ThemeBlocks.tsx). Muted and
   non-clickable, exactly like .pg-sem--pending inside a Weiterbildung. Note the row's
   entrance animation uses `both`, so a muted look has to come from colours, not from an
   inline opacity the animation would override. */
.catx-row--pending {
  cursor: default;
  animation: none;
}
.catx-row--pending:hover {
  background: transparent;
  clip-path: none;
}
.catx-row--pending .catx-when {
  background: var(--dakby-grey-10, #f0f0ee);
  color: var(--dakby-grey-50, #8a8a88);
}
.catx-row--pending:hover .catx-when,
.catx-row--pending:hover .catx-main {
  transform: none;
}
.catx-row--pending .catx-rowtitle,
.catx-row--pending .catx-attr {
  color: var(--dakby-grey-50, #8a8a88);
}

.catx-main {
  min-width: 0;
  align-self: center;
  padding: 28px 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.catx-row:hover .catx-main {
  transform: translateX(6px);
}
.catx-overline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 14px;
  margin-bottom: 8px;
}
.catx-topic {
  display: inline;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dakby-orange-100);
}
.catx-topic-more {
  color: var(--dakby-grey-50);
}
.catx-rowtitle {
  margin: 0;
  max-width: 760px;
  font-size: clamp(19px, 1.65vw, 24px);
  font-weight: 720;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
}
.catx-row:hover .catx-rowtitle {
  color: var(--dakby-orange-100);
}
.catx-rowlead {
  display: -webkit-box;
  max-width: 70ch;
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* Angeschnittener Anreißer — er bleibt EIN Element, die Umbrüche überleben. */
  white-space: pre-line;
}
.catx-row-program {
  min-height: 170px;
}
.catx-row-program .catx-kicker {
  white-space: normal;
  line-height: 1.25;
}
.catx-attrs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  margin-top: 12px;
}
.catx-attr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.025em;
  color: var(--fg-2);
}
.catx-attr + .catx-attr::before {
  content: '';
  width: 3px;
  height: 3px;
  margin-right: 5px;
  background: var(--dakby-grey-30);
  transform: rotate(45deg);
}
.catx-attr svg {
  color: var(--fg-3);
}
.catx-attr.feat {
  color: var(--dakby-orange-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}
.catx-attr.feat::before {
  content: '◆';
  font-size: 7px;
}

.catx-end {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 24px;
  justify-self: end;
  padding: 28px 0;
}
.catx-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.catx-price b {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 750;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.catx-price span {
  font-size: 11px;
  color: var(--fg-3);
}
.catx-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--dakby-grey-10);
  background: var(--dakby-ink-900);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  flex-shrink: 0;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.catx-row:hover .catx-go {
  background: var(--dakby-orange-100);
  color: var(--dakby-ink-900);
  transform: translateX(3px);
}
.catx-go svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.catx-row:hover .catx-go svg {
  transform: translateX(2px);
}

/* ---- Load more ----------------------------------------------------------- */
.catx-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.catx-more button {
  border: 1px solid var(--dakby-ink-900);
  background: transparent;
  color: var(--dakby-ink-900);
  border-radius: 999px;
  padding: 13px 28px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.catx-more button:hover {
  background: var(--dakby-ink-900);
  color: #fff;
}

/* ---- Related results below the direct matches ---------------------------- */
.catx-alt {
  margin-top: clamp(52px, 8vw, 92px);
}
.catx-alt-more {
  margin: 18px 0 0;
  text-align: center;
}

/* ---- States: loading / empty / error ------------------------------------ */
.catx-skel {
  height: 154px;
  border-bottom: 1px solid var(--border-default);
  background: linear-gradient(
    100deg,
    var(--bg-1) 30%,
    var(--dakby-grey-10) 50%,
    var(--bg-1) 70%
  );
  background-size: 220% 100%;
  animation: catx-shimmer 1.4s ease-in-out infinite;
}
.catx-state {
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-1);
  border: 1px solid var(--border-default);
  border-radius: 14px;
}
.catx-state h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-1);
}
.catx-state p {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--fg-2);
}

@keyframes catx-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes catx-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes catx-toolbar-in {
  from { opacity: 0; transform: translateY(-14px) scaleY(0.92); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes catx-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .catx-facet-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .catx-facet-label {
    padding-top: 0;
  }
}
@media (max-width: 1100px) {
  /* Schmale Viewports behalten ihre bisherige Aufteilung: Zähler · „Filter"-Klappe ·
     Sortierung · Visuelle Auswahl. Nur die Suchzeile darüber entfällt, die Leiste wird
     dadurch einreihig. */
  .catx-catalog-toolbar {
    top: 108px;
    grid-template-columns: auto minmax(0, 1fr) minmax(154px, 0.5fr) auto;
    grid-template-rows: 66px;
    min-height: 82px;
    padding: 8px;
  }
  .catx-toolbar-context {
    grid-column: 1;
    grid-row: 1;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
  }
  .catx-toolbar-desktop-filters {
    display: none;
  }
  /* Der Suchbegriff-Chip braucht Breite, die die einreihige schmale Leiste nicht hat.
     Dort führt „Alle Filter zurücksetzen" in der Filter-Klappe aus dem Zustand heraus. */
  .catx-toolbar-query {
    display: none;
  }
  .catx-toolbar-sort {
    grid-column: 3;
    grid-row: 1;
    border: 1px solid rgba(255, 255, 255, 0.28);
  }
  .catx-toolbar-sort .catx-picker-trigger {
    padding: 8px 28px 8px 12px;
  }
  .catx-toolbar-mobile-filters {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-right: 0;
  }
  .catx-toolbar-mobile-filters summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 14px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    list-style: none;
    text-transform: uppercase;
  }
  .catx-toolbar-mobile-filters summary::-webkit-details-marker {
    display: none;
  }
  .catx-toolbar-mobile-filters summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catx-toolbar-mobile-filters summary span {
    margin-left: 12px;
    color: var(--dakby-orange-100);
    font-size: 19px;
    line-height: 1;
    transition: transform 180ms var(--ease-out);
  }
  .catx-toolbar-mobile-filters[open] summary span {
    transform: rotate(45deg);
  }
  .catx-toolbar-mobile-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: -1px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    width: min(720px, calc(100vw - 48px));
    background: var(--dakby-ink-900);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 38px rgba(17, 17, 17, 0.25);
    animation: catx-pop 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .catx-toolbar-mobile-panel .catx-toolbar-field {
    flex-direction: column;
    min-height: 66px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }
  /* In der Filter-Klappe steht die Liste IM Blatt, nicht darüber: ein Überlagern würde am
     unteren Rand der Klappe abgeschnitten. So wächst das Blatt und lässt sich scrollen. */
  .catx-toolbar-mobile-panel .catx-picker-list {
    position: static;
    max-height: 260px;
    min-width: 0;
    max-width: none;
    width: 100%;
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }
  .catx-toolbar-mobile-panel .catx-toolbar-clear {
    grid-column: 1 / -1;
  }
  .catx-toolbar-explorer {
    grid-column: 4;
    grid-row: 1;
    width: 88px;
    font-size: 10px;
  }
  .catx-toolbar-explorer-copy {
    display: block;
  }
}
@media (max-width: 900px) {
  .catx-catalog-toolbar {
    top: 96px;
  }
}
@media (max-width: 720px) {
  .catx-ledger-head {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 15px 18px 16px;
  }
  .catx-ledger-head.has-tools {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .catx-ledger-leading {
    display: none;
  }
  .catx-ledger-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .catx-ledger-heading strong {
    font-size: 18px;
  }
  .catx-list {
    border-top: 0;
  }
  .catx-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 18px;
    min-height: 0;
    padding: 0 18px;
  }
  .catx-when {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    flex-direction: row;
    align-items: center;
    justify-content: initial;
    gap: 10px;
    margin: 0 -18px;
    padding: 12px 18px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }
  .catx-row:hover .catx-when {
    transform: none;
  }
  .catx-sequence {
    position: static;
  }
  .catx-kicker {
    align-self: center;
  }
  .catx-date,
  .catx-date.muted {
    justify-self: end;
    font-size: 16px;
  }
  .catx-main {
    align-self: start;
    padding: 22px 0 24px;
  }
  .catx-row:hover .catx-main {
    transform: none;
  }
  .catx-end {
    align-self: end;
    justify-self: end;
    padding: 22px 0 24px;
  }
  .catx-price b {
    font-size: 18px;
  }
  .catx-go {
    width: 46px;
    height: 46px;
  }
  .catx-search {
    width: 100%;
    box-sizing: border-box;
  }
  .catx-ledger-tools {
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-self: stretch;
    gap: 4px;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .catx-catalog-toolbar {
    top: 92px;
    grid-template-columns: auto minmax(64px, 0.6fr) minmax(112px, 1fr) auto;
  }
  .catx-toolbar-context {
    gap: 0;
    padding: 6px 10px;
  }
  /* Auf schmalen Geräten bleibt die Leiste einreihig: die Beschriftungen werden
     schmaler gesetzt, aber nicht wieder auf Miniaturgröße zurückgenommen. */
  .catx-toolbar-mobile-filters summary {
    padding: 0 10px;
    font-size: 12px;
  }
  .catx-toolbar-sort .catx-picker-trigger {
    padding: 8px 24px 8px 10px;
  }
  .catx-toolbar-sort .catx-picker-label {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .catx-toolbar-sort .catx-picker-value {
    font-size: 14px;
  }
  .catx-picker-caret {
    right: 10px;
    width: 8px;
    height: 8px;
  }
  .catx-toolbar-motif {
    display: none;
  }
  .catx-toolbar-context strong {
    font-size: 20px;
  }
  .catx-toolbar-context small {
    font-size: 10px;
  }
  .catx-toolbar-mobile-panel {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    grid-template-columns: 1fr;
    width: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .catx-toolbar-mobile-panel .catx-toolbar-clear {
    grid-column: 1;
    min-height: 48px;
  }
  .catx-toolbar-mobile-filters summary span {
    display: none;
  }
  .catx-toolbar-explorer {
    width: 64px;
    gap: 4px;
    font-size: 9px;
  }
  .catx-toolbar-explorer-copy {
    display: block;
  }
  body:has(.catx-toolbar-mobile-filters[open]) .aw-root {
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 520px) {
  .catx-search {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 52px;
  }
  .catx-search-field {
    padding-right: 8px;
    padding-left: 14px;
  }
  .catx-search-clear {
    margin-right: 10px;
  }
  .catx-main {
    grid-column: 1 / -1;
    padding-bottom: 8px;
  }
  .catx-end {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
    padding-top: 0;
  }
  .catx-rowtitle {
    font-size: 20px;
  }
  .catx-row-program {
    min-height: 0;
  }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .catx-tab,
  .catx-row,
  .catx-skel,
  .catx-picker-list {
    animation: none !important;
  }
  .catx-tab,
  .catx-row,
  .catx-go,
  .catx-go svg,
  .catx-picker-trigger,
  .catx-picker-caret {
    transition: none !important;
  }
  .catx-row:hover {
    transform: none;
  }
}

/* ============================================================
   ---- Finder — „Der Programm-Finder" ----
   ============================================================
   Guided 3-step chooser that replaces the flat .catx-controls facet
   rows: 01 Format → 02 Thema → 03 Modus, auto-advancing, ending in a
   compact summary rail. Namespaced .catx-finder (section) / .fnd-*
   (everything inside). Counts + vocab still come from facetTabs
   (untouched) — this only changes presentation + selection UX.
   ============================================================ */

.catx-finder {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-default);
  /* no top padding: the filmstrip is the page's opening beat and sits flush under the
     nav; the summary rail (the only other top-level phase) gets its breathing room from
     .wrap. */
  padding: 0 0 clamp(32px, 5vw, 56px);
  overflow: hidden;
}
/* Summary phase (step 4): the filmstrip shrinks into the full-bleed selection
   bar — no leftover picker padding around it. */
.catx-finder.is-summary {
  padding-bottom: 0;
  border-bottom: 0;
}
.catx.is-landing .catx-finder {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---- Step panel: fade + rise on transition -------------------------------- */
.fnd-panel {
  animation: fnd-panel-in var(--dur-slow) var(--ease-out) both;
}
.catx-finder.is-completing .fnd-panel {
  pointer-events: none;
  animation: fnd-panel-complete 280ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes fnd-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fnd-panel-complete {
  from { opacity: 1; transform: translateY(0) scaleY(1); }
  to { opacity: 0; transform: translateY(-14px) scaleY(0.96); }
}

/* ---- Step 01 · Format — full-bleed filmstrip -------------------------------
   Copies the /akademie "Akademie-Band" pattern (AkademieSubnav.tsx + akademie.css)
   under `.fnd-strip*` names: grayscale→color image, ink→orange scrim, widening
   tile, animated underline. Breaks out of `.wrap` (rendered as a direct child of
   `.catx-finder`, full viewport width) — the step header above it stays in `.wrap`.
   Resting state shows only num + count + label; the blurb + arrow are revealed on
   hover/focus-visible/is-active only (transform+opacity, no layout shift). -------- */
.fnd-strip {
  display: flex;
  gap: 0;
  /* Roomy enough that the nested Thema picker never needs to scroll — see
     .fnd-strip-nest below, which relies on this instead of a scrollbar. */
  height: clamp(420px, 54vh, 620px);
  background: var(--dakby-ink-900);
  transition: height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Die Themen-Kachelwand zeigt alle Zeilen der Anlage — bei 7 Spalten fünf Reihen statt
   drei. Nur für diesen einen Zustand (Klasse kommt aus FinderFormatThemaBand) wächst der
   Streifen mit, damit die letzte Reihe nicht am Rand abgeschnitten wird; die vorhandene
   Höhen-Transition macht daraus eine Bewegung statt eines Sprungs. Reicht die Höhe auf
   sehr kurzen Fenstern trotzdem nicht, scrollt .fnd-strip-nest wie vorgesehen. */
.fnd-strip.has-dense-nest {
  height: clamp(520px, 76vh, 780px);
}
/* Das Weiterbildungen-Band ist der eine Zustand, dessen Höhe nicht aus einer festen
   Kachelzahl folgt: die Kacheln sind die Weiterbildungen selbst, ihre Zeilen wachsen seit
   der Grid-Sanierung mit dem Titel, und wie viele Reihen daraus werden, entscheidet erst
   die Fensterbreite. Eine feste zweite Höhe (has-dense-nest) trifft das nicht — sie ließ
   bei 1440 rund 250px leere dunkle Fläche stehen und bei 1024 trotzdem eine Reihe hinter
   dem Scroll verschwinden. Der Streifen folgt hier deshalb dem Inhalt, zwischen der
   bisherigen Normalhöhe als Untergrenze und der dichten Höhe als Deckel; darüber scrollt
   .fnd-program-groups wie vorgesehen. Die Höhen-Transition entfällt in diesem Zustand
   (auf `auto` animiert sie nicht) — sie hatte hier ohnehin nie etwas zu tun, weil die
   Höhe vorher konstant blieb. */
.fnd-strip.has-program-nest {
  height: auto;
  min-height: clamp(420px, 54vh, 620px);
  max-height: clamp(520px, 76vh, 780px);
}
.fnd-strip-tile {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  animation: catx-pop 320ms var(--ease-out) both;
  transition: flex-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnd-strip-tile + .fnd-strip-tile {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.fnd-strip-tile:hover,
.fnd-strip-tile:focus-visible,
.fnd-strip-tile.is-active {
  flex-grow: 1.6;
}
.fnd-strip-tile:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: -2px;
}
.fnd-strip-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transform: scale(1);
  transition:
    filter 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnd-strip-tile:hover .fnd-strip-image,
.fnd-strip-tile:focus-visible .fnd-strip-image,
.fnd-strip-tile.is-active .fnd-strip-image {
  filter: grayscale(0);
  transform: scale(1.05);
}
.fnd-strip:hover .fnd-strip-tile:not(:hover):not(.is-active) .fnd-strip-image {
  filter: grayscale(1) brightness(0.75);
}
.fnd-strip-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.25) 0%,
    rgba(17, 17, 17, 0.45) 55%,
    rgba(17, 17, 17, 0.82) 100%
  );
  transition: background 0.5s ease;
}
.fnd-strip-tile:hover .fnd-strip-scrim,
.fnd-strip-tile:focus-visible .fnd-strip-scrim,
.fnd-strip-tile.is-active .fnd-strip-scrim {
  background: linear-gradient(
    180deg,
    rgba(240, 131, 0, 0.15) 0%,
    rgba(140, 70, 0, 0.55) 60%,
    rgba(17, 17, 17, 0.85) 100%
  );
}
.fnd-strip-num {
  position: absolute;
  top: 20px;
  left: 24px;
  font-weight: 800;
  color: var(--dakby-orange-100);
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
  z-index: 1;
}
.fnd-strip-status {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  padding: 7px 9px 6px;
  background: var(--dakby-orange-100);
  color: var(--dakby-ink-900);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

/* One square vocabulary, four distinct learning models. These compositions sit
   inside the choice panels themselves, so no duplicate explanation is needed below. */
.fnd-format-motif {
  position: absolute;
  top: 19%;
  right: 10%;
  z-index: 1;
  width: min(72%, 260px);
  height: 46%;
  pointer-events: none;
}
.fnd-format-motif > span {
  position: absolute;
  box-sizing: border-box;
}
.fnd-format-motif.is-seminar {
  top: 18%;
  right: 14%;
  width: min(54%, 180px);
  height: auto;
  aspect-ratio: 1;
}
.fnd-format-motif.is-seminar > span:first-child {
  inset: 0;
  width: 100%;
  aspect-ratio: 1;
  background:
    linear-gradient(var(--dakby-grey-10) 0 0) top / 100% clamp(8px, 0.75vw, 12px) no-repeat,
    linear-gradient(var(--dakby-grey-10) 0 0) left / clamp(8px, 0.75vw, 12px) 100% no-repeat,
    linear-gradient(var(--dakby-grey-10) 0 0) right top / clamp(8px, 0.75vw, 12px) 72% no-repeat,
    linear-gradient(var(--dakby-grey-10) 0 0) left bottom / 72% clamp(8px, 0.75vw, 12px) no-repeat;
}
.fnd-format-motif.is-seminar > span:last-child {
  top: 77%;
  left: 77%;
  width: 28%;
  aspect-ratio: 1;
  background: var(--dakby-orange-100);
}
.fnd-format-motif.is-weiterbildung > span {
  width: clamp(36px, 3.7vw, 54px);
  aspect-ratio: 1;
  border: clamp(5px, 0.45vw, 8px) solid var(--dakby-grey-10);
}
.fnd-format-motif.is-weiterbildung > span:nth-child(1) { left: 0; bottom: 0; }
.fnd-format-motif.is-weiterbildung > span:nth-child(2) { left: 18%; bottom: 18%; }
.fnd-format-motif.is-weiterbildung > span:nth-child(3) { left: 36%; bottom: 36%; }
.fnd-format-motif.is-weiterbildung > span:nth-child(4) { left: 54%; bottom: 54%; }
.fnd-format-motif.is-weiterbildung > span:nth-child(5) {
  left: 72%;
  bottom: 72%;
  border-color: var(--dakby-orange-100);
  background: var(--dakby-orange-100);
}
.fnd-format-motif.is-elearning {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(7px, 0.8vw, 12px);
  height: auto;
  aspect-ratio: 2 / 1;
  transform: rotate(-8deg);
}
.fnd-format-motif.is-elearning > span {
  position: relative;
  border: clamp(4px, 0.4vw, 7px) solid var(--dakby-grey-10);
}
.fnd-format-motif.is-elearning > span:nth-child(2),
.fnd-format-motif.is-elearning > span:nth-child(5),
.fnd-format-motif.is-elearning > span:nth-child(8) {
  border-color: var(--dakby-orange-100);
  background: var(--dakby-orange-100);
}
.fnd-format-motif.is-lehrbeauftragte > span {
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: clamp(6px, 0.55vw, 9px) solid var(--dakby-grey-10);
  transform: translate(-50%, -50%);
}
.fnd-format-motif.is-lehrbeauftragte > span:nth-child(1) { width: 76%; }
.fnd-format-motif.is-lehrbeauftragte > span:nth-child(2) { width: 57%; }
.fnd-format-motif.is-lehrbeauftragte > span:nth-child(3) { width: 38%; }
.fnd-format-motif.is-lehrbeauftragte > span:nth-child(4) {
  width: 16%;
  border: 0;
  background: var(--dakby-orange-100);
}

.fnd-strip-tile.is-seminar .fnd-strip-image {
  background-color: #191919;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.055) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.055) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.055) 0 0),
    linear-gradient(rgba(240, 131, 0, 0.06), rgba(240, 131, 0, 0));
  background-position:
    16% 22%,
    16% 22%,
    68% 22%,
    16% 74%,
    center;
  background-size:
    52% 1px,
    1px 52%,
    1px 52%,
    52% 1px,
    cover;
  background-repeat: no-repeat;
}
.fnd-strip-tile.is-weiterbildung .fnd-strip-image {
  background-color: #171717;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.055) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.065) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.075) 0 0),
    linear-gradient(rgba(240, 131, 0, 0.1) 0 0);
  background-position:
    12% 16%,
    82% 12%,
    8% 62%,
    76% 58%,
    38% 86%;
  background-size:
    clamp(24px, 2.4vw, 34px) clamp(24px, 2.4vw, 34px),
    clamp(32px, 3vw, 44px) clamp(32px, 3vw, 44px),
    clamp(28px, 2.7vw, 38px) clamp(28px, 2.7vw, 38px),
    clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px),
    clamp(30px, 2.9vw, 42px) clamp(30px, 2.9vw, 42px);
  background-repeat: no-repeat;
}
.fnd-strip-tile.is-coming {
  cursor: default;
  background: var(--dakby-ink-900);
}
.fnd-strip-tile.is-coming.is-elearning .fnd-strip-image {
  filter: none;
  background-color: #242424;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
}
.fnd-strip-tile.is-coming.is-lehrbeauftragte .fnd-strip-image {
  filter: none;
  background:
    linear-gradient(135deg, transparent 48%, rgba(240, 131, 0, 0.3) 48%, rgba(240, 131, 0, 0.3) 72%, transparent 72%),
    #191919;
}
.fnd-strip:not(.has-selection) .fnd-strip-tile.is-coming:hover {
  flex-grow: 1;
}
.fnd-strip-tile.is-coming:hover .fnd-strip-image {
  filter: none;
  transform: none;
}
.fnd-strip-tile.is-coming:hover .fnd-strip-scrim {
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.2) 0%,
    rgba(17, 17, 17, 0.46) 55%,
    rgba(17, 17, 17, 0.86) 100%
  );
}
.fnd-strip-tile.is-coming .fnd-strip-title::after {
  display: none;
}
@media (min-width: 769px) {
  .fnd-strip-tile.is-coming .fnd-strip-bottom {
    transform: translateY(-52px);
  }
  .fnd-strip-tile.is-coming .fnd-strip-blurb {
    opacity: 1;
    transform: none;
  }
}
.fnd-strip-bottom {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* lifts on reveal so the absolutely-hung blurb stays inside the clipped tile */
  transition: transform 0.4s ease;
}
.fnd-strip-tile:hover .fnd-strip-bottom,
.fnd-strip-tile:focus-visible .fnd-strip-bottom,
.fnd-strip-tile.is-active .fnd-strip-bottom {
  transform: translateY(-52px);
}
.fnd-strip-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: var(--font-sans);
}
.fnd-strip-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 3px;
  background: var(--dakby-orange-100);
  transition: width 0.4s ease;
}
.fnd-strip-tile:hover .fnd-strip-title::after,
.fnd-strip-tile:focus-visible .fnd-strip-title::after,
.fnd-strip-tile.is-active .fnd-strip-title::after {
  width: 44px;
}
.fnd-strip-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.fnd-strip-tile:hover .fnd-strip-arrow,
.fnd-strip-tile:focus-visible .fnd-strip-arrow,
.fnd-strip-tile.is-active .fnd-strip-arrow {
  opacity: 1;
  transform: translateX(0);
}
/* Blurb: hidden at rest, revealed only on hover/focus-visible/is-active. Absolutely
   positioned below the title so its reveal never shifts the label (transform+opacity
   only — no layout-property animation). */
.fnd-strip-blurb {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
}
.fnd-strip-tile:hover .fnd-strip-blurb,
.fnd-strip-tile:focus-visible .fnd-strip-blurb,
.fnd-strip-tile.is-active .fnd-strip-blurb {
  opacity: 1;
  transform: translateY(0);
}
/* ---- Format tile: committed "expanded" state -------------------------------
   Picking a Format tile no longer navigates away — the picked tile grows to
   dominate the row (in place, same .fnd-strip), siblings compress to slim
   identifiable rails. The expanded tile becomes a <div> (see component comment)
   since it now hosts nested <button>s — a <button> cannot contain a <button>. */
.fnd-strip.has-selection .fnd-strip-tile.is-active {
  flex-grow: 7;
  cursor: default;
  /* the expanded tile's header (label + deselect) and the thema nest below it are
     normal-flow flex children stacked over the absolutely-positioned photo/scrim/
     backdrop layers — self-sizing avoids a hardcoded top offset for the nest. */
  display: flex;
  flex-direction: column;
}
/* The ordinary filmstrip's tile-to-tile divider (`.fnd-strip-tile + .fnd-strip-tile`)
   sits on both sides of the expanded tile too — with the Thema grid now edge to
   edge inside it (no padding buffer), that divider reads as an unwanted frame
   around the grid rather than a subtle seam between neighbouring tiles. Drop it
   on the expanded tile's own left edge and on whichever tile follows it. */
.fnd-strip.has-selection .fnd-strip-tile.is-active,
.fnd-strip.has-selection .fnd-strip-tile.is-active + .fnd-strip-tile {
  border-left: none;
}
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active) {
  flex: 0 0 clamp(56px, 6vw, 84px);
}
/* Once a Format is committed the ordinal number has done its job — the expanded
   tile's header now names the step and each collapsed rail shows its own
   icon + vertical label. Left in place the absolute top-left num collides with
   the expanded heading ("02" printed over "Seminare") and, at narrow widths,
   with the rail's centred icon/label. Drop it for the whole selected state
   (this rule is intentionally outside the mobile media query so it covers the
   stacked layout too). */
.fnd-strip.has-selection .fnd-strip-num {
  display: none;
}
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active) .fnd-strip-image {
  filter: grayscale(1) brightness(0.75);
}
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active):hover .fnd-strip-image,
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active):focus-visible .fnd-strip-image {
  filter: grayscale(0) brightness(1);
}
/* Collapsed rails: the label/blurb block doesn't fit at rail width — hide it
   and show a bigger centered icon + the format name written vertically
   instead (the rail is tall, not wide, so sideways text is what actually fits
   without wrapping or truncating). */
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active) .fnd-strip-bottom {
  display: none;
}
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active) > .fnd-format-motif,
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active) > .fnd-strip-status {
  display: none;
}
.fnd-strip-rail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
  color: #fff;
  pointer-events: none;
}
.fnd-strip-rail-mark {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
}
.fnd-strip-rail-mark .fnd-format-motif {
  top: 50%;
  right: auto;
  left: 50%;
  width: 150px;
  height: 120px;
  transform: translate(-50%, -50%) scale(0.17);
  transform-origin: center;
}
.fnd-strip-rail-label {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  /* `writing-mode: vertical-rl` rotates this flex box's own main axis to
     vertical, so `justify-content` (not `align-items`) is what places the
     text top/bottom — and since `rotate(180deg)` below flips it again,
     `flex-start` here is what ends up visually at the bottom. */
  align-items: center;
  justify-content: flex-start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnd-strip-tile.is-lehrbeauftragte .fnd-strip-rail-label {
  font-size: clamp(18px, 1.65vw, 22px);
}
/* Expanded tile: settle the backdrop further than the old hover accent — this is
   now a committed backdrop behind readable UI, not a fleeting hover state. */
.fnd-strip-nest-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.72);
  z-index: 1;
}
.fnd-strip-tile.is-active .fnd-strip-image {
  filter: grayscale(0.3);
  transform: scale(1.05);
}
/* Full-width header bar (not just floating label + button) so the format name and
   the deselect control read as one grouped strip even when the expanded tile is
   very wide — without it the two ends look unrelated at full filmstrip width. */
.fnd-strip-nest-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.4), rgba(17, 17, 17, 0.08));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fnd-strip-nest-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fnd-strip-nest-label {
  color: #fff;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  font-family: var(--font-sans);
}
/* The chosen Thema, shown as a subtitle beneath the Format name once the Modus picker is
   up. It's a button (click = change Thema); reset the native chrome and mark it with the
   brand orange so it reads as the live selection rather than plain caption text. */
.fnd-strip-nest-sublabel {
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: -0.01em;
  color: var(--dakby-orange-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-fast) var(--ease-out);
}
.fnd-strip-nest-sublabel:hover,
.fnd-strip-nest-sublabel:focus-visible {
  color: #fff;
  text-decoration: underline;
  outline: none;
}
.fnd-strip-deselect {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.fnd-strip-deselect:hover,
.fnd-strip-deselect:focus-visible {
  background: var(--dakby-orange-100);
  border-color: var(--dakby-orange-100);
  outline: none;
}
/* ---- Step 4: the filmstrip shrinks into a header bar -----------------------
   The journey's end doesn't unmount the band — the strip collapses to bar
   height, the sibling rails squeeze to zero width, and the expanded tile's
   .fnd-strip-nest-top header (image + scrim intact) is all that remains,
   now reading as the page header: Format name, Thema · Modus segments,
   „Neu starten" on the right. */
.fnd-strip.is-summary {
  height: clamp(64px, 8vw, 88px);
}
.fnd-strip.is-summary .fnd-strip-tile:not(.is-active) {
  flex: 0 0 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  border-left: none;
}
.fnd-strip.is-summary .fnd-strip-rail {
  display: none;
}
.fnd-strip.is-summary .fnd-strip-nest-top {
  height: 100%;
  padding: 0 clamp(16px, 3vw, 32px);
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.45), rgba(17, 17, 17, 0.1));
}
/* Bar layout: Format name and the Thema · Modus segments sit on one baseline
   (wrapping gracefully on narrow widths) instead of stacking. */
.fnd-strip.is-summary .fnd-strip-nest-heading {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 18px;
}
/* Format name as a button (change-Format affordance) — same face as the span. */
.fnd-strip-nest-label-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}
.fnd-strip-nest-label-btn:hover,
.fnd-strip-nest-label-btn:focus-visible {
  color: var(--dakby-orange-100);
  text-decoration: underline;
  text-underline-offset: 4px;
  outline: none;
}
.fnd-strip-nest-subrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.fnd-strip-nest-sep {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  user-select: none;
}
/* Quiet text control, mirroring the finder's skip links — the bar's only
   destructive action shouldn't outweigh the selection it clears. */
.fnd-strip-restart {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.fnd-strip-restart:hover,
.fnd-strip-restart:focus-visible {
  color: var(--dakby-orange-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.fnd-strip-nest {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* No padding: the Thema grid fills this section edge to edge — the tile's
     own boundary is its "border", not an inset. The skip link (the other
     child here) carries its own padding instead, see .fnd-skip-compact. */
  overflow-y: auto;
  animation: fnd-nest-in 420ms var(--ease-out) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.fnd-strip-nest::-webkit-scrollbar {
  width: 6px;
}
.fnd-strip-nest::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
}
.fnd-strip-nest::-webkit-scrollbar-track {
  background: transparent;
}
@keyframes fnd-nest-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Thema tiles: icon-based, edge-to-edge grid (nested + standalone) -----
   A true tiled grid — cells fill the section completely, no gaps/rounded
   cards, hairline rules between them (each cell owns its own right/bottom
   border, the container frames the top/left so every seam is a single line,
   never doubled). `compact` = nested inside the expanded Format tile (dark
   backdrop, white hairlines, CSS Grid `1fr` rows filling the fixed strip
   height exactly — see the flex chain in .fnd-strip-nest/-compact-wrap, so
   however many rows the chips need, they divide the available space instead
   of overflowing it); standalone = larger fallback shown once the user has
   moved past the Format step with nothing selected, sized by content since
   it sits in normal page flow (no fixed height to fill, no overflow risk).
   Every cell: a big centered icon, the label anchored to the bottom — no
   count (the point here is "what", not "how many"). Select = solid orange
   fill, no grow/lift — a flat tiled mosaic doesn't lend itself to the
   filmstrip's "push siblings aside" trick, so this stays deliberately calmer. */
.fnd-thema-tiles {
  display: grid;
  /* --fnd-grid-cols/-mobile come from the component (min(tile count, cap)) —
     up to 7 columns on desktop, 3 on mobile (media query below), never more
     than there are tiles, always stretching to fill the row evenly. */
  grid-template-columns: repeat(var(--fnd-grid-cols, 7), 1fr);
  grid-auto-rows: minmax(130px, auto);
}
.fnd-thema-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 10px 16px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-1);
  color: var(--fg-1);
  text-align: center;
  cursor: pointer;
  font-family: var(--font-sans);
  animation: catx-pop 320ms var(--ease-out) both;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.fnd-thema-chip:hover,
.fnd-thema-chip:focus-visible {
  background: var(--dakby-orange-10);
}
.fnd-thema-chip:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: -2px;
  z-index: 1;
}
.fnd-thema-chip.is-active {
  background: var(--dakby-orange-100);
  border-color: var(--dakby-orange-100);
  color: #fff;
  z-index: 1;
}
/* Icon centers in the space above the label — flex:1 on the icon wrapper (not
   the label) is what pins the label to the bottom without a fixed offset. */
.fnd-thema-chip-icon {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  color: var(--dakby-orange-100);
}
.fnd-thema-chip.is-active .fnd-thema-chip-icon {
  color: #fff;
}
/* Eine Kachel, hinter der noch nichts steht: sie bleibt sichtbar und wählbar, tritt aber
   zurück und sagt, worauf sie wartet. „Nichts da" ist eine Auskunft, kein Fehler — und
   ausgegraut wäre eine Lüge, denn die Kachel führt weiterhin irgendwohin. */
.fnd-thema-chip.is-leer .fnd-thema-chip-icon {
  opacity: 0.4;
}
.fnd-thema-chip.is-leer .fnd-thema-chip-label {
  color: var(--fg-2, #6e6e6d);
}
.fnd-thema-chip-hint {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--dakby-orange-100);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fnd-thema-chip.is-active .fnd-thema-chip-hint {
  color: #fff;
}
/* Die eine Kachel, die führt statt zu filtern — sonst identisch, nur ohne Unterstrich. */
.fnd-thema-chip-link {
  text-decoration: none;
}
.fnd-thema-chip-icon svg {
  width: 36px;
  height: 36px;
}
.fnd-thema-chip-label {
  flex: 0 0 auto;
  /* Long single-word labels ("Informationssicherheit") can outgrow a narrow
     cell — cap the label at the cell's padded width and let German hyphenation
     (index.html carries lang="de") break it at a syllable; overflow-wrap is
     the backstop for anything the hyphenator can't split, so a label never
     crosses the hairline into its neighbour. Applies to both the compact and
     the standalone variant (shared rule). */
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Compact (nested) variant: dark backdrop → white hairlines, transparent
   cells, edge to edge (no outer frame — the tile's own edge is the visual
   boundary, an extra border there would just double it). `1fr` rows against
   a definite flex-resolved height (the chain: .fnd-strip-nest →
   .fnd-thema-tiles-compact-wrap → this grid, all flex:1 in a column) means
   however many rows result from the available width, they always divide the
   fixed strip height rather than overflowing it.
   Dividers are gradient pseudo-elements, not plain borders — one ::after per
   cell for the right divider, one ::before for the bottom divider. By default
   (interior cells) they run full-length at constant opacity so consecutive
   segments connect cleanly across row/column boundaries; only where a divider
   actually meets the grid's true outer edge does it fade to transparent
   instead, and where there is no neighbour at all in that direction (true
   last column/row) it isn't drawn — see the .fnd-d-* / .fnd-m-* rules below,
   applied by the component per cell (edgeClasses() in CatalogExplorer.tsx).
   The 'd'/'m' split exists because the actual rendered column count differs
   between desktop (≤7) and mobile (≤3), so "is this cell in the last column"
   is a different answer at each breakpoint. */
.fnd-thema-tiles-compact {
  /* grid-auto-rows can't take an `fr` max (flexible tracks only resolve in an
     explicit grid-template-rows list) — an explicit row count computed from
     the actual tile count (--fnd-grid-rows, set inline) is what lets rows
     stretch to fill the strip's fixed height instead of sizing to content. */
  /* 108px floor (not 130): the fewest-per-row column logic now yields up to 3
     rows, and 3×130 + header + skip link no longer fits the strip's clamp()
     height at short viewports — the nest would scroll and the skip link would
     ride over the last row. 108px still clears the icon clamp floor (30px) +
     gap + two label lines. */
  grid-template-rows: repeat(var(--fnd-grid-rows, 1), minmax(108px, 1fr));
  /* `min-height: auto` (statt 0) ist hier der Unterschied zwischen „scrollt" und
     „überlagert": seit die Themen-Kachelwand alle Zeilen der Anlage zeigt (29 Kacheln =
     5 Reihen statt 3), ist das Raster höher als der Streifen. Mit `min-height: 0` durfte
     der Flex-Kandidat unter seine Inhaltshöhe schrumpfen, die Reihen taten es aber nicht —
     die letzte Reihe lief unter den Skip-Link. So wächst das Raster weiter, wenn Platz da
     ist (flex-grow), und schrumpft nicht mehr unter seinen Inhalt; das Scrollen übernimmt
     wie vorgesehen .fnd-strip-nest. */
  flex: 1 1 auto;
  min-height: auto;
}
/* Die DICHTE Wand (mehr als drei Reihen, Klasse aus FinderCompactTiles) ist derselbe
   Fall wie das Programm-Band, nur eine Stufe milder: die Zeile ist zwar definit
   (1fr gegen die Streifenhöhe), aber bei 7 Spalten nur ~110px hoch — ein dreizeiliges
   Label plus „ab 1.9."-Hinweis passt da nicht hinein, und weil Size-Containment die
   Inhaltshöhe unsichtbar macht, KANN die Zeile nicht nachgeben: „Qualifizierter
   Ansprechpartner Digitalisierung" lief in die Kachel darüber (gemessen +20px bei
   1440, +65px bei 1024, +45px bei 390).
   Der Floor von 108 auf 120 zu heben hätte nur den 1440-Fall knapp erwischt. Statt
   dessen wird die Zeilen-UNTERGRENZE inhaltsabhängig: `auto`-Zeilen nehmen als Basis
   die Inhaltshöhe der Kacheln (dafür muss das Containment hier `inline-size` sein),
   den bisherigen 108px-Floor trägt die Kachel selbst, und `align-content: stretch`
   verteilt freien Platz weiterhin gleichmäßig — die Wand füllt den Streifen also wie
   bisher, wächst aber genau dort, wo ein Label mehr Platz braucht. Bewusst KEIN `1fr`
   mehr: flexible Tracks werden alle gleich groß, eine einzige lange Kachel hätte damit
   jede Reihe auf ihr Maß gezogen (gemessen: 113px → 147px, bei 1024 gar 187px) — das
   wäre ein Redesign, keine Sanierung. Reicht die Streifenhöhe nicht, scrollt
   .fnd-strip-nest wie vorgesehen — besser als Text quer über der Trennlinie.
   Die cqh-Größen sind hier ohnehin dauerhaft an ihren clamp()-Grenzen geklemmt
   (Zelle ~110px ⇒ Icon 30px, Label 16px, Hinweis 9px); festgeschrieben ändert sich
   die Optik deshalb nicht. Der Modus-Schritt (2–3 riesige Zellen) bleibt außen vor
   und behält Size-Containment samt cqh-Skalierung. */
.fnd-thema-tiles-compact.is-dense {
  grid-template-rows: repeat(var(--fnd-grid-rows, 1), auto);
  align-content: stretch;
}
.fnd-thema-tiles-compact.is-dense .fnd-thema-chip {
  container: fndchip / inline-size;
  min-height: 108px;
}
.fnd-thema-tiles-compact.is-dense .fnd-thema-chip-icon svg {
  width: 30px;
  height: 30px;
}
.fnd-thema-tiles-compact.is-dense .fnd-thema-chip-label {
  font-size: 16px;
}
.fnd-thema-tiles-compact.is-dense .fnd-thema-chip-hint {
  font-size: 9px;
}
.fnd-thema-tiles-compact .fnd-thema-chip {
  padding: 14px 8px 12px;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #fff;
  /* Container-query context for the icon/label scaling + the centred-cluster
     switch below. The compact cell always has a definite size — `1fr` rows
     against the fixed strip height on desktop, a fixed grid-auto-rows track on
     mobile — so `size` containment is safe here. (The standalone .fnd-thema-tiles
     grid is content-sized, where `size` containment would collapse the rows, so
     it deliberately keeps fixed icon/label sizes instead.) */
  container: fndchip / size;
}
.fnd-thema-tiles-compact .fnd-thema-chip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.5px;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.fnd-thema-tiles-compact .fnd-thema-chip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.fnd-thema-tiles-compact .fnd-thema-chip-icon {
  color: #fff;
}
/* Icon + label scale with the cell (cqh = 1% of the container's height) so the
   dense Thema step (many ~130px cells) and a lone 2-up Modus step (cells
   ~300–500px) both read proportionately — a fixed 28px icon that looked right
   when dense floats lost in the huge Modus cells otherwise. The clamp() floor
   keeps the fallback (fixed px, first declaration) as a sane baseline for
   browsers without container-query support, where the cqh declaration is simply
   dropped as invalid. */
.fnd-thema-tiles-compact .fnd-thema-chip-icon svg {
  width: 28px;
  height: 28px;
  width: clamp(30px, 26cqh, 72px);
  height: clamp(30px, 26cqh, 72px);
}
/* Im aufgeklappten Band steht die Kachelwand auf dunklem Grund — dort trägt der
   Leer-Hinweis die helle Schrift der Kachel, gedämpft statt orange. */
.fnd-thema-tiles-compact .fnd-thema-chip.is-leer .fnd-thema-chip-label {
  color: rgba(255, 255, 255, 0.62);
}
.fnd-thema-tiles-compact .fnd-thema-chip-hint {
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(9px, 4cqh, 12px);
}
.fnd-thema-tiles-compact .fnd-thema-chip-label {
  font-size: 19px;
  /* 16px floor (not 17): at 7 desktop columns the dense-grid cells are only
     ~139px tall/wide — with hyphenation active, one extra pixel of type is the
     difference between "Informationssicherheit" breaking once vs. twice. */
  font-size: clamp(16px, 8cqh, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
}
/* Above a tall-enough cell, read the icon + label as one centred cluster rather
   than an icon adrift over a bottom-pinned label (which visually disintegrates
   in the big Modus cells). Auto margins on the first/last flex child balance the
   leftover space evenly around the pair; below the threshold the base
   justify-content: flex-end bottom-anchored layout stays (right for dense grids).
   Targets the children, not .fnd-thema-chip itself — an element can't respond to
   its own container query. */
@container fndchip (min-height: 200px) {
  .fnd-thema-tiles-compact .fnd-thema-chip-icon {
    flex: 0 0 auto;
    margin-top: auto;
  }
  .fnd-thema-tiles-compact .fnd-thema-chip-label {
    margin-top: clamp(4px, 2.5cqh, 14px);
    margin-bottom: auto;
  }
}
.fnd-thema-tiles-compact .fnd-thema-chip:hover,
.fnd-thema-tiles-compact .fnd-thema-chip:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}
.fnd-thema-tiles-compact .fnd-thema-chip.is-active {
  background: var(--dakby-orange-100);
}
.fnd-thema-tiles-compact .fnd-thema-chip.is-active::after,
.fnd-thema-tiles-compact .fnd-thema-chip.is-active::before {
  background: none;
}

/* Desktop-only ('d-' prefixed) divider edge cases — see edgeClasses() in
   CatalogExplorer.tsx. Matches the ≤7-column layout this width range uses. */
@media (min-width: 769px) {
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-no-right::after {
    display: none;
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-no-bottom::before {
    display: none;
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-fade-t::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7) 40%);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-fade-b::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 60%, transparent);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-fade-t.fnd-d-fade-b::after {
    background: linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.7) 35%,
      rgba(255, 255, 255, 0.7) 65%,
      transparent
    );
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-fade-l::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 40%);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-fade-r::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 60%, transparent);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-d-fade-l.fnd-d-fade-r::before {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.7) 35%,
      rgba(255, 255, 255, 0.7) 65%,
      transparent
    );
  }
}
/* Wrapper: the grid fills all available height edge to edge, the skip link is
   its own fixed-height row below with its own inset (never competes with the
   grid for space or padding). */
.fnd-thema-tiles-compact-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.fnd-skip-compact {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 12px 24px 16px;
  color: rgba(255, 255, 255, 0.6);
}
.fnd-skip-compact:hover {
  color: var(--dakby-orange-100);
}

/* ── Weiterbildungen im Band (Einheit XX) ─────────────────────────────────────
   Hier standen bis zuletzt vierzehn Themen-Kacheln, obwohl es dahinter nur eine
   Handvoll Weiterbildungen gibt. Jetzt stehen die Weiterbildungen selbst da —
   nach Kategorien gruppiert, jede Kachel ein Link auf ihre Detailseite.

   Anders als beim Thema-Picker ist die Kachelzahl nicht durch ein Vokabular
   begrenzt, und es gibt mehrere Gruppen untereinander. Die Reihen wachsen
   deshalb mit dem Inhalt (statt die Strip-Höhe zu füllen) und der Gruppenstapel
   scrollt in sich, damit der „Alle Weiterbildungen"-Ausweg immer sichtbar
   bleibt. */
.fnd-program-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.fnd-program-group-label {
  display: block;
  padding: 14px 24px 6px;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fnd-program-group-hint {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.8;
}
.fnd-program-nest .fnd-thema-tiles-compact {
  flex: 0 0 auto;
  grid-template-rows: none;
  grid-auto-rows: minmax(92px, auto);
}
/* Hier — und nur hier — sind die Zeilen INHALTSDIMENSIONIERT (`auto`-Max oben), und
   genau das verträgt sich nicht mit dem Size-Containment der Kachelwand
   (`container: fndchip / size`, siehe oben): Size-Containment heißt „der Inhalt trägt
   0 zur Eigenhöhe bei", also fiel jede Zeile auf den 92px-Floor zurück und mehrzeilige
   Titel liefen — durch `justify-content: center` symmetrisch nach oben UND unten — in
   die Nachbarzellen (Abnahme-Befund 17.08., gemessen bis ±35px bei 1024).
   `inline-size` contained nur die Breite; die Höhe darf der Inhalt wieder bestimmen,
   die Zeile wächst mit, und die Divider-Pseudos spannen automatisch die volle Zelle.
   Folgekosten: cqh-Einheiten sind gegen einen inline-size-Container ungültig und
   fielen auf den Small-Viewport zurück (aus 16px würden 26px) — deshalb steht die
   Schriftgröße hier fest. 16px ist exakt der Wert, den die Kachel heute rendert (die
   kollabierte 92px-Zelle klemmte `clamp(16px, 8cqh, 26px)` permanent am Floor), die
   Optik ändert sich also nicht. Die Kachel trägt weder Icon noch Hinweis. */
.fnd-program-nest .fnd-thema-chip {
  container: fndchip / inline-size;
}
.fnd-program-chip {
  justify-content: center;
  text-decoration: none;
}
.fnd-program-chip .fnd-thema-chip-label {
  font-size: 16px;
  text-wrap: balance;
}
/* Die Kachel trägt seit der Finder-Politur nur noch den Titel — die frühere
   Zertifikats-Unterzeile (.fnd-program-chip-meta) lief im dichten Raster in die
   Nachbarzelle und ist entfallen; das Zertifikat steht auf der Detailseite. */

/* Die Zwischenauswahl einer Format-Kachel: die benannten Bereiche der Anlage.
   Anders als die Weiterbildungs-Kacheln bleibt das Raster hier das NORMALE der
   Kachelwand (feste Zeilenhöhe, `--fnd-grid-rows`) — bei drei Kacheln ist das genau
   eine Reihe, die das aufgeklappte Feld ausfüllt. Es braucht deshalb weder eine eigene
   Streifenhöhe noch die inline-size-Ausnahme des Weiterbildungs-Nests. */
.fnd-zwischen-chip {
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  padding-inline: clamp(12px, 4cqi, 32px);
}
/* Die hohe Zelle verteilt sonst Icon und Titel über die ganze Höhe
   (`@container fndchip (min-height: 200px)` weiter oben: `margin-bottom: auto` am
   Titel). Diese Kachel hat aber kein Icon, sondern Titel UND Kurztext — die beiden
   gehören zusammen, sonst klebt der Satz am unteren Rand und liest sich wie eine
   Fußnote der Nachbarzelle. Deshalb hier die Auto-Ränder zurücknehmen und die Gruppe
   mittig setzen. Höhere Spezifität als die Container-Regel, damit es nicht an der
   Reihenfolge im Stylesheet hängt. */
.fnd-thema-tiles-compact .fnd-zwischen-chip .fnd-thema-chip-label {
  margin-top: 0;
  margin-bottom: 0;
  text-wrap: balance;
}
/* Der Kurztext ist ein Satz, kein Marker: nicht die orange Versal-Zeile, mit der die
   Kachelwand daneben „ab 1.9." anschreibt, sondern ruhiger Fließtext unter dem Titel.
   Die Farbe kommt bewusst NICHT von hier — im aufgeklappten Band setzt
   `.fnd-thema-tiles-compact .fnd-thema-chip-hint` bereits die gedämpfte helle Schrift
   für den dunklen Grund. */
.fnd-thema-tiles-compact .fnd-zwischen-chip .fnd-thema-chip-hint {
  margin-top: 0;
  font-weight: 500;
  font-size: clamp(11px, 4cqh, 13.5px);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  text-wrap: balance;
  white-space: normal;
}

/* Standalone fallback ("skip format" path, or a prior pick got cleared): larger
   cells, same tiled design, shown full width below the filmstrip — normal
   page flow, so it just wraps to as many rows as it needs. */
.fnd-thema-fallback {
  margin-top: clamp(20px, 3vw, 32px);
}
.fnd-thema-tiles-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fnd-thema-fallback .fnd-thema-tiles {
  grid-auto-rows: minmax(170px, auto);
  /* Unlike the nested/compact grid, this fallback doesn't sit flush against a
     visible section edge (it's just page content inside `.wrap`) — framing it
     on all sides reads as a deliberate table, not a stray line at a boundary. */
  border-top: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
}
.fnd-thema-fallback .fnd-thema-chip-icon svg {
  width: 40px;
  height: 40px;
}

/* ---- Skip action ----------------------------------------------------------- */
.fnd-skip {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-3);
  padding: 10px 2px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.fnd-skip:hover {
  color: var(--dakby-orange-100);
}
.fnd-skip:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- Summary rail (step === 3) ---------------------------------------------
   Deliberately NOT a card: once the journey is done the finder collapses to a
   quiet one-text-row rail — hairline top/bottom borders only (echoing the catx
   list's row seams), no fill/radius/padding bulk — so the eye moves straight
   from the page header to the results. Each Format/Thema/Modus segment is a
   plain-text button that reopens its picker step; middots keep the three
   reading as one inline sentence rather than three widgets. */
/* The filmstrip shrunk into a bar: same image + scrim treatment as the format
   tiles (colour, not grayscale — this is the *chosen* one), full-bleed like the
   strip it collapses out of, but only ~64px tall. */
.fnd-summary-bar {
  position: relative;
  overflow: hidden;
  background: var(--dakby-ink, #111);
  animation: catx-pop 320ms var(--ease-out) both;
}
.fnd-summary-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.fnd-summary-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(17, 17, 17, 0.88) 0%,
    rgba(17, 17, 17, 0.7) 55%,
    rgba(140, 70, 0, 0.62) 100%
  );
}
.fnd-summary {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-height: 64px;
  padding: 14px 0;
}
.fnd-summary-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.fnd-summary-chips {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex: 1;
  min-width: 0;
}
/* Segment = dim keyword + value as one inline text run; the underline that
   appears on hover (matching .fnd-skip's link affordance) is what signals
   "click to change this step" now that the chip chrome is gone. */
.fnd-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 0;
  background: none;
  padding: 4px 0;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--dur-fast) var(--ease-out);
}
.fnd-chip:hover .fnd-chip-val,
.fnd-chip:focus-visible .fnd-chip-val {
  color: var(--dakby-orange-100);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fnd-chip:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.fnd-chip-val {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fnd-chip-sep {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  user-select: none;
}
/* Compact text link, mirroring the finder's skip links — not a pill button. */
.fnd-restart {
  border: 0;
  background: none;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.fnd-restart:hover {
  color: var(--dakby-orange-100);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fnd-restart:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- Finder responsive ----------------------------------------------------- */
@media (max-width: 640px) {
  /* The rail stays slim on mobile — segments just wrap onto extra text rows;
     the reset link drops its right-alignment and joins the wrap flow. */
  .fnd-restart {
    text-align: left;
  }
}

/* ---- Format filmstrip responsive -------------------------------------------
   ≤768px: no hover on touch, so the akband 2-col grid pattern applies — fixed
   150px tiles, blurb stays hidden entirely (label + count carry the tile). With
   an odd tag count the last tile spans the full row so the band closes without
   a dead cell. ------------------------------------------------------------- */
@media (max-width: 768px) {
  .fnd-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .fnd-strip-tile {
    height: 150px;
    flex-grow: unset !important;
  }
  .fnd-strip-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .fnd-strip-tile + .fnd-strip-tile {
    border-left: none;
  }
  .fnd-strip-tile:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
  .fnd-strip-tile:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .fnd-strip-tile:hover .fnd-strip-image,
  .fnd-strip-tile:focus-visible .fnd-strip-image,
  .fnd-strip-tile.is-active .fnd-strip-image {
    transform: none;
  }
  .fnd-strip-num {
    top: 14px;
    left: 16px;
  }
  .fnd-strip-bottom {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .fnd-strip-title {
    font-size: clamp(16px, 4vw, 20px);
  }
  .fnd-format-motif.is-seminar {
    top: 13%;
    right: 24%;
    width: 44%;
  }
  .fnd-format-motif.is-lehrbeauftragte {
    top: 8%;
    right: 62%;
    width: 38%;
  }
  /* No hover on touch — the blurb + arrow stay hidden entirely; label + count
     carry the resting tile, matching the akband's own mobile behaviour. */
  .fnd-strip-blurb,
  .fnd-strip-arrow {
    display: none;
  }
  .fnd-strip-tile:hover .fnd-strip-bottom,
  .fnd-strip-tile:focus-visible .fnd-strip-bottom,
  .fnd-strip-tile.is-active .fnd-strip-bottom {
    transform: none;
  }

  /* Expanded state on mobile: flex-grow has no 2-col-grid equivalent, so the
     picked tile instead spans the full grid row and grows tall enough to host
     the nested Thema chips (which wrap 2-3 per row at that width); collapsed
     siblings shrink to a short fixed-height rail in their normal grid cells. */
  .fnd-strip.has-selection {
    display: flex;
    flex-direction: column;
  }
  .fnd-strip.has-selection .fnd-strip-tile.is-active {
    /* the base rule's `flex: 1 1 0` (flex-basis 0) is a desktop-only concept —
       left in place, this column flex item resolves to just its min-height
       instead of growing to fit content (flex-basis:0 means "don't use
       content size as the starting point"), clipping/overlapping whatever
       doesn't fit in 320px. `flex: 0 0 auto` sizes it from content instead. */
    flex: 0 0 auto;
    grid-column: unset;
    width: 100%;
    height: auto;
    min-height: 320px;
    order: -1;
    overflow: visible;
  }
  .fnd-strip.has-selection .fnd-strip-tile:not(.is-active) {
    flex: unset;
    width: 100%;
    height: 64px;
    display: flex;
  }
  .fnd-strip.has-selection .fnd-strip-tile:not(.is-active) + .fnd-strip-tile:not(.is-active) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: none;
  }
  /* Header-bar phase on mobile: the stacked column collapses to just the active
     tile at bar height; the sibling rails disappear entirely (opacity-0 rails
     would still hold their 64px rows). */
  .fnd-strip.is-summary {
    height: auto;
  }
  .fnd-strip.is-summary .fnd-strip-tile.is-active {
    min-height: 64px;
  }
  .fnd-strip.is-summary .fnd-strip-tile:not(.is-active) {
    display: none;
  }
  .fnd-strip.is-summary .fnd-strip-nest-top {
    height: auto;
    min-height: 64px;
    padding: 10px 16px;
  }
  /* The mobile rail is a short, wide bar (not a tall narrow one) — vertical
     text has no room to read there, so the label goes back to horizontal,
     laid out side-by-side with the icon like a compact list row. */
  .fnd-strip-rail {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px;
  }
  .fnd-strip-rail-label {
    flex: 0 1 auto;
    max-height: none;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 13px;
  }
  /* Uncapped flow so the nested Thema chips grow the tile's auto height instead
     of being clipped/scrolled at the desktop's fixed strip height. */
  .fnd-strip-nest {
    position: static;
    max-height: none;
    overflow-y: visible;
    display: block;
  }
  /* The desktop `1fr`-row trick divides a FIXED strip height; on mobile the
     tile is `height: auto` (grows with the page, no overflow risk to begin
     with), so forcing 1fr rows here fights that auto-sizing and clips the
     grid instead of letting it grow — fall back to normal content-sized rows,
     same as the standalone fallback variant. */
  .fnd-thema-tiles-compact-wrap {
    display: block;
  }
  /* Same cap-to-item-count logic as desktop, just against the mobile number
     (max 3 — see FinderThemaTiles' --fnd-grid-cols-mobile). Applies to both
     the compact and standalone grids, not just compact. */
  .fnd-thema-tiles {
    grid-template-columns: repeat(var(--fnd-grid-cols-mobile, 3), 1fr);
  }
  .fnd-thema-tiles-compact {
    display: grid;
    grid-auto-rows: minmax(120px, auto);
  }
  /* Der 92px-Floor des Programm-Bands ist eine DESKTOP-Zahl, gewinnt aber per
     Spezifität (0,2,0) gegen die Mobil-Regel darüber (0,1,0) — mobil stand die
     Weiterbildungs-Kachel deshalb auf 92px statt auf den hier gewollten 120px.
     Solange die Zellen mobil breit sind (2 Spalten) blieb das folgenlos; als
     Stolperdraht bleibt es trotzdem nicht liegen. */
  .fnd-program-nest .fnd-thema-tiles-compact {
    grid-auto-rows: minmax(120px, auto);
  }
  .fnd-skip-compact {
    display: block;
    margin-top: 14px;
  }

  /* Mobile-only ('m-' prefixed) divider edge cases — mirrors the desktop 'd-'
     rules above, computed against the ≤3-column mobile layout instead (see
     edgeClasses() in CatalogExplorer.tsx). */
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-no-right::after {
    display: none;
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-no-bottom::before {
    display: none;
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-fade-t::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7) 40%);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-fade-b::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 60%, transparent);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-fade-t.fnd-m-fade-b::after {
    background: linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.7) 35%,
      rgba(255, 255, 255, 0.7) 65%,
      transparent
    );
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-fade-l::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 40%);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-fade-r::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 60%, transparent);
  }
  .fnd-thema-tiles-compact .fnd-thema-chip.fnd-m-fade-l.fnd-m-fade-r::before {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.7) 35%,
      rgba(255, 255, 255, 0.7) 65%,
      transparent
    );
  }
}

/* ---- Finder reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .catx-catalog-toolbar,
  .fnd-panel,
  .fnd-summary,
  .fnd-strip-tile,
  .fnd-thema-chip,
  .fnd-strip-nest {
    animation: none !important;
  }
  .catx-toolbar-mobile-filters summary span,
  .catx-toolbar-field,
  .catx-toolbar-explorer,
  .fnd-chip,
  .fnd-strip-tile,
  .fnd-strip-image,
  .fnd-strip-arrow,
  .fnd-strip-blurb,
  .fnd-strip-bottom,
  .fnd-strip-title::after,
  .fnd-thema-chip,
  .fnd-strip-deselect {
    transition: none !important;
  }
  .fnd-thema-chip:hover,
  .fnd-thema-chip:focus-visible {
    transform: none;
  }
}