/* ============================================================
   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),
   a sticky command bar (search + live count) 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);
}

/* ---- Command bar: search + live count + reset ---------------------------- */
.catx-command {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-default);
}
.catx-command-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
}
.catx-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  max-width: 460px;
  background: var(--dakby-bg-soft);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 0 16px;
  height: 44px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.catx-search:focus-within {
  border-color: var(--dakby-ink-900);
  box-shadow: 0 0 0 3px rgba(240, 131, 0, 0.12);
}
.catx-search svg {
  flex-shrink: 0;
  color: var(--fg-3);
}
.catx-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg-1);
  outline: none;
}
.catx-search input::placeholder {
  color: var(--fg-3);
}
.catx-search-clear {
  border: 0;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}
.catx-search-clear:hover {
  color: var(--fg-1);
}

.catx-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  white-space: nowrap;
}
.catx-reset {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--dakby-orange-100);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catx-reset:hover {
  color: var(--dakby-orange-90);
}
.catx-count {
  font-size: 14px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.catx-count b {
  color: var(--fg-1);
  font-weight: 700;
  font-size: 18px;
  margin-right: 4px;
}

/* ---- Result list (list view only) --------------------------------------- */
.catx-results {
  padding: 30px 0 84px;
}
.catx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.catx-row {
  display: grid;
  grid-template-columns: 138px 1fr auto;
  align-items: center;
  gap: 28px;
  background: var(--bg-1);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--fg-1);
  box-shadow: inset 0 0 0 var(--dakby-orange-100);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
  animation: catx-row-in 420ms var(--ease-out) both;
}
.catx-row:hover {
  border-color: var(--dakby-grey-30);
  background: var(--bg-1);
  box-shadow: inset 4px 0 0 var(--dakby-orange-100), var(--shadow-md);
  transform: translateY(-1px);
}
/* gentle entrance stagger, capped so it never feels slow */
.catx-row:nth-child(1) { animation-delay: 0ms; }
.catx-row:nth-child(2) { animation-delay: 35ms; }
.catx-row:nth-child(3) { animation-delay: 70ms; }
.catx-row:nth-child(4) { animation-delay: 105ms; }
.catx-row:nth-child(5) { animation-delay: 140ms; }
.catx-row:nth-child(6) { animation-delay: 175ms; }
.catx-row:nth-child(n + 7) { animation-delay: 200ms; }

.catx-when {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.catx-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dakby-orange-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.catx-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.catx-date.muted {
  color: var(--fg-3);
  font-weight: 500;
}

.catx-main {
  min-width: 0;
}
.catx-topic {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dakby-grey-50);
  margin-bottom: 4px;
}
.catx-topic-more {
  color: var(--dakby-grey-30);
}
.catx-rowtitle {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.catx-attrs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.catx-attr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--dakby-bg-soft);
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 4px 9px;
}
.catx-attr svg {
  color: var(--fg-3);
}
.catx-attr.feat {
  color: #fff;
  background: var(--dakby-orange-100);
  border-color: var(--dakby-orange-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

.catx-end {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: end;
}
.catx-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.catx-price b {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.catx-price span {
  font-size: 11px;
  color: var(--fg-3);
}
.catx-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--dakby-bg-soft);
  border: 1px solid var(--border-default);
  color: var(--fg-1);
  flex-shrink: 0;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.catx-row:hover .catx-go {
  background: var(--dakby-ink-900);
  border-color: var(--dakby-ink-900);
  color: #fff;
}
.catx-go svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.catx-row:hover .catx-go svg {
  transform: translateX(3px);
}

/* ---- 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;
}

/* ---- "Anderer Modus" cross-sell below the results ------------------------ */
.catx-alt {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--border-default);
}
.catx-alt-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.catx-alt-hint {
  font-size: 14px;
  color: var(--fg-3);
}
.catx-alt-more {
  margin: 18px 0 0;
  text-align: center;
}

/* ---- States: loading / empty / error ------------------------------------ */
.catx-skel {
  height: 78px;
  border-radius: 12px;
  border: 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-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: 720px) {
  .catx-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .catx-when {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
  .catx-end {
    justify-self: stretch;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--border-default);
    padding-top: 14px;
  }
  .catx-command-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .catx-search {
    max-width: none;
    width: 100%;
    order: 2;
  }
  .catx-meta {
    order: 1;
    margin-left: 0;
  }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .catx-tab,
  .catx-row,
  .catx-skel {
    animation: none !important;
  }
  .catx-tab,
  .catx-row,
  .catx-go,
  .catx-go svg {
    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;
}

/* ---- Step panel: fade + rise on transition -------------------------------- */
.fnd-panel {
  animation: fnd-panel-in var(--dur-slow) var(--ease-out) both;
}
@keyframes fnd-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Cards: shared shell -------------------------------------------------- */
.fnd-grid {
  display: grid;
  gap: 16px;
}
.fnd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 22px;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--fg-1);
  animation: catx-pop 320ms var(--ease-out) both;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.fnd-card:hover {
  border-color: var(--dakby-ink-900);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fnd-card:focus-visible {
  outline: 2px solid var(--dakby-orange-100);
  outline-offset: 2px;
}
.fnd-card-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fnd-card-blurb {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-2);
}
.fnd-card-count {
  position: absolute;
  top: 20px;
  right: 20px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--dakby-grey-50);
  transition: color var(--dur-fast) var(--ease-out);
}

/* ---- 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);
}
.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-count {
  position: absolute;
  top: 20px;
  right: 24px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.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);
}
.fnd-skip-strip {
  margin-top: clamp(16px, 2.4vw, 24px);
}

/* ---- 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,
.fnd-strip.has-selection .fnd-strip-tile:not(.is-active) .fnd-strip-count {
  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-icon {
  flex-shrink: 0;
  display: flex;
}
.fnd-strip-rail-icon svg {
  width: 26px;
  height: 26px;
}
.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;
}
/* 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;
}

/* Empty Modus phase (Weiterbildungen have no modus facet): a centred note + action
   in place of the picker grid, filling the same nested area. */
.fnd-strip-nest-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px;
  text-align: center;
}
.fnd-strip-nest-empty-text {
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
}
.fnd-strip-nest-empty .fnd-skip-compact {
  margin: 0;
}
.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;
}
.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));
  flex: 1 1 auto;
  min-height: 0;
}
.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);
}
.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);
}

/* 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;
}

/* ---- Step 03 · Modus (color-separated) ------------------------------------ */
.fnd-grid-modus {
  grid-template-columns: repeat(3, 1fr);
}
.fnd-card-modus {
  padding-top: 26px;
}
.fnd-modus-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.fnd-modus-ink .fnd-modus-bar { background: var(--dakby-ink-900); }
.fnd-modus-orange .fnd-modus-bar { background: var(--dakby-orange-100); }
.fnd-modus-duo .fnd-modus-bar { background: linear-gradient(90deg, var(--dakby-ink-900), var(--dakby-orange-100)); }
.fnd-card-modus .fnd-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--dakby-bg-soft);
  color: var(--fg-1);
}
.fnd-card-modus .fnd-card-icon svg { width: 22px; height: 22px; }
.fnd-modus-orange .fnd-card-icon { color: var(--dakby-orange-100); }
.fnd-modus-duo .fnd-card-icon { color: var(--dakby-ink-900); }
.fnd-card-modus.is-active {
  background: var(--dakby-ink-900);
  border-color: var(--dakby-ink-900);
  color: #fff;
}
.fnd-card-modus.is-active .fnd-card-count {
  color: var(--dakby-orange-100);
}
.fnd-card-modus.is-active.fnd-modus-orange {
  background: var(--dakby-orange-100);
  border-color: var(--dakby-orange-100);
  color: #fff;
}
.fnd-card-modus.is-active.fnd-modus-orange .fnd-card-blurb { color: var(--dakby-orange-10); }
.fnd-card-modus.is-active.fnd-modus-orange .fnd-card-count { color: var(--dakby-ink-900); }
.fnd-card-modus.is-active.fnd-modus-orange .fnd-card-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.fnd-card-modus.is-active.fnd-modus-duo {
  background: linear-gradient(90deg, var(--dakby-ink-900), var(--dakby-orange-100));
  border-color: transparent;
  color: #fff;
}
.fnd-card-modus.is-active.fnd-modus-duo .fnd-card-blurb { color: rgba(255, 255, 255, 0.82); }
.fnd-card-modus.is-active.fnd-modus-duo .fnd-card-count { color: var(--dakby-ink-900); }
.fnd-card-modus.is-active.fnd-modus-duo .fnd-card-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.fnd-card-modus.is-active .fnd-card-blurb { color: var(--dakby-grey-30); }
.fnd-card-modus.is-active .fnd-card-icon { background: rgba(255, 255, 255, 0.12); }

/* ---- 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) {
  .fnd-grid-modus {
    grid-template-columns: 1fr;
  }
  /* 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-count {
    top: 14px;
    right: 16px;
  }
  .fnd-strip-bottom {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .fnd-strip-title {
    font-size: clamp(16px, 4vw, 20px);
  }
  /* 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);
  }
  .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) {
  .fnd-panel,
  .fnd-card,
  .fnd-summary,
  .fnd-strip-tile,
  .fnd-thema-chip,
  .fnd-strip-nest {
    animation: none !important;
  }
  .fnd-card,
  .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-card:hover {
    transform: none;
  }
  .fnd-thema-chip:hover,
  .fnd-thema-chip:focus-visible {
    transform: none;
  }
}