/* Images to page through in the block "Text und Bild" (Ablauf & Analyse, report excerpt). Loaded only when a block uses it.
   Native scroll snapping carries touch and keyboard; slider.js adds the buttons. Tokens only from site.css. */
.tj-slider { flex: 1; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; gap: var(--tj-gap); }
.tj-slider__bahn {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  border: var(--tj-slider-rand) solid var(--tj-line); border-radius: var(--tj-r-inner); background: var(--tj-surface-white);
}
.tj-slider__bahn::-webkit-scrollbar { display: none; }
.tj-slider__seite { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.tj-slider__seite img { display: block; width: 100%; height: auto; }

/* Without the script the row of buttons would do nothing. */
.tj-slider__leiste { display: none; align-items: center; gap: var(--tj-slider-abstand); }
.tj-slider.is-bereit .tj-slider__leiste { display: flex; }
.tj-slider__stand {
  min-width: var(--tj-slider-knopf); text-align: center; color: var(--tj-text-strong);
  font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 500;
}
.tj-slider__knopf {
  display: grid; place-items: center; width: var(--tj-slider-knopf); height: var(--tj-slider-knopf); padding: 0; cursor: pointer;
  color: var(--tj-text-strong); background: transparent; border: var(--tj-slider-knopfrand) solid var(--tj-c-gold-line); border-radius: 50%;
  transition: background-color .18s var(--tj-ease), border-color .18s var(--tj-ease);
}
.tj-slider__knopf svg { width: var(--tj-slider-symbol); height: var(--tj-slider-symbol); }
.tj-slider__knopf:active { background: var(--tj-c-gold-hover); border-color: var(--tj-c-gold-hover); }
@media (hover: hover) and (pointer: fine) {
  .tj-slider__knopf:hover { background: var(--tj-c-gold); border-color: var(--tj-c-gold); }
}
/* Sizes without a token in site.css: hairline and button border as elsewhere, 44 px target (WCAG 2.5.8 and better). ds-allow-hardcode */
.tj-slider { --tj-slider-rand: 1px; --tj-slider-knopfrand: 2px; --tj-slider-knopf: 44px; --tj-slider-symbol: 18px; --tj-slider-abstand: 12px; } /* ds-allow-hardcode */