/*
 * Huber-Bausteine: Blätter-Technik (hb-slider) für «Ablauf als Slider» und «Bildwechsel».
 * Gleiche Datei im Entwurf (Studio-Designer) und in WordPress.
 * Aussehen der Karten bzw. Bilder steht beim jeweiligen Baustein (blocks/ablauf, blocks/bildwechsel).
 */
.hb-slider{--hb-slider-sichtbar:1;--hb-slider-abstand:clamp(1rem,2.4vw,1.5rem);position:relative;margin:0;max-width:100%}
.hb-slider__spur{position:relative;display:flex;gap:var(--hb-slider-abstand);margin:0;padding:4px 2px 10px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hb-slider--bereit .hb-slider__spur{scrollbar-width:none}
.hb-slider--bereit .hb-slider__spur::-webkit-scrollbar{display:none}
.hb-slider__spur:focus{outline:none}
.hb-slider__spur:focus-visible{outline:3px solid var(--farbe-primaer,#1e73be);outline-offset:3px;border-radius:var(--radius,6px)}
.hb-slider__karte{flex:0 0 calc((100% - (var(--hb-slider-sichtbar) - 1) * var(--hb-slider-abstand)) / var(--hb-slider-sichtbar));min-width:0;margin:0;scroll-snap-align:start}

/* Leiste: Stand, Punkte, Zurück/Weiter, Pause (setzt das Skript ein) */
.hb-slider__leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;margin:0 0 1rem}
.hb-slider--alle .hb-slider__leiste{display:none}
.hb-slider__stand{margin:0;font:600 .95rem/1.4 var(--schrift-text,inherit);color:inherit}
.hb-slider__punkte{display:flex;flex-wrap:wrap;gap:2px;margin-right:auto}
.hb-slider__punkt{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.hb-slider__punkt::before{content:"";width:10px;height:10px;border-radius:999px;background:currentColor;opacity:.28;transition:width .25s,opacity .25s}
.hb-slider__punkt.ist-sichtbar::before{opacity:.6}
.hb-slider__punkt[aria-current]::before{width:22px;opacity:1;background:var(--farbe-primaer,#1e73be)}
.hb-slider__knoepfe{display:flex;gap:.5rem}
.hb-slider__knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:2px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.hb-slider__knopf:hover:not(:disabled){background:color-mix(in srgb,currentColor 10%,transparent)}
.hb-slider__knopf:disabled{opacity:.35;cursor:default}
.hb-slider__knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hb-slider__pause .hb-slider__icon-play,.hb-slider--angehalten .hb-slider__pause .hb-slider__icon-pause{display:none}
.hb-slider--angehalten .hb-slider__pause .hb-slider__icon-play{display:block}
.hb-slider__pause svg{fill:currentColor;stroke:none}
.hb-slider__punkt:focus,.hb-slider__knopf:focus{outline:none}
.hb-slider__punkt:focus-visible,.hb-slider__knopf:focus-visible{outline:3px solid var(--farbe-primaer,#1e73be);outline-offset:2px;border-radius:999px}
/* Ohne automatisches Weiterblättern («ruhig», «Bewegung reduzieren», Intervall 0) kein Pause-Knopf */
.hb-slider--ohne-auto .hb-slider__pause,[data-bewegung="ruhig"] .hb-slider__pause{display:none}
@media (prefers-reduced-motion:reduce){.hb-slider__pause{display:none}.hb-slider__punkt::before{transition:none}}
.hb-slider__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}