/**
 * HIT Elementor Basiselemente – Diashow-Widget
 *
 * Alle einstellbaren Werte laufen über CSS-Variablen, die Elementor über die
 * Widget-Controls setzt. Die Defaults hier greifen, solange nichts gesetzt ist.
 *
 * Drei Formen: die Diashow stapelt alle Bilder übereinander und blendet oder
 * schiebt jeweils eines herein; der Filmstreifen reiht sie in einem nativ
 * scrollbaren Band auf, das Skript steuert nur Pfeile, Punkte und Takt; die
 * Werkschau stellt sie untereinander in die Seite, ein Bild je Bildschirm,
 * und gescrollt wird die Seite selbst.
 */

.hem-slideshow {
    --hem-ss-duration: 800ms;
    --hem-ss-background: #111;
    --hem-ss-strip-height: 320px;
    --hem-ss-gap: 12px;
    --hem-ss-hover-scale: 1.04;
    --hem-ss-dim: 0;
    --hem-ss-kb-zoom: 1.15;
    --hem-ss-arrow-size: 48px;
    --hem-ss-arrow-icon: 22px;
    --hem-ss-arrow-offset: 16px;
    --hem-ss-dot-size: 10px;
    --hem-ss-line-width: 28px;
    --hem-ss-dot-gap: 8px;
    --hem-ss-dot-offset: 16px;
    --hem-ss-thumb-height: 64px;
    --hem-ss-thumb-gap: 6px;
    --hem-ss-thumb-opacity: 0.55;
    --hem-ss-bar-offset: 16px;
    --hem-ss-progress-height: 3px;

    position: relative;
    outline: none;
}

/**
 * Wird gemischt oder zufällig begonnen, bleibt die Diashow unsichtbar, bis
 * das Skript das erste Bild gewählt hat. Ohne JavaScript hebt die
 * noscript-Regel im Markup das wieder auf.
 */
.hem-slideshow[data-hem-ss-hide="1"] {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hem-slideshow.hem-slideshow--ready {
    opacity: 1;
}

/* Fokusrahmen, wenn die Diashow per Tastatur erreicht wird */
.hem-slideshow:focus-visible .hem-slideshow__stage {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ------------------------------------------------------------- Bühne */

/**
 * Die Bühne selbst schneidet nichts ab: Pfeile mit negativem Abstand dürfen
 * neben dem Bild stehen. Beschnitten wird eine Ebene tiefer, am Stapel der
 * Bilder, der den Eckenradius der Bühne erbt.
 */
.hem-slideshow__stage {
    position: relative;
    width: 100%;
    background: var(--hem-ss-background);
    /* Eigener Stapelkontext: die Bedienelemente konkurrieren nicht mit dem Theme */
    isolation: isolate;
}

.hem-slideshow--slideshow .hem-slideshow__stage {
    aspect-ratio: 16 / 9;
    /* Waagerechtes Wischen geht an das Skript, senkrechtes bleibt beim Scrollen der Seite */
    touch-action: pan-y pinch-zoom;
}

.hem-slideshow--slideshow .hem-slideshow__slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.hem-slideshow__slide {
    box-sizing: border-box;
}

.hem-slideshow--slideshow .hem-slideshow__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.hem-slideshow--slideshow .hem-slideshow__slide.is-active,
.hem-slideshow--slideshow .hem-slideshow__slide.is-leaving {
    visibility: visible;
}

.hem-slideshow--slideshow .hem-slideshow__slide.is-active {
    z-index: 2;
}

.hem-slideshow--slideshow .hem-slideshow__slide.is-leaving {
    z-index: 1;
}

.hem-slideshow__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.hem-slideshow__figure {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    /* Unscharfe Vorschau als Hintergrund, bis das Bild da ist */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hem-slideshow__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Kein Geisterbild beim Ziehen mit der Maus */
    -webkit-user-drag: none;
    user-select: none;
}

/* Abdunkelung: über dem Bild, unter dem Text. Farbe oder Verlauf aus dem Widget. */
.hem-slideshow__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ---------------------------------------------------------- Übergänge */

/**
 * Überblenden: das neue Bild liegt oben und blendet ein, das alte bleibt
 * darunter stehen, bis das Skript es versteckt. So sackt die Helligkeit in
 * der Mitte des Übergangs nicht ab, wie es bei zwei gleichzeitigen
 * Blenden geschähe.
 */
.hem-slideshow--fade .hem-slideshow__slide {
    opacity: 0;
    transition: opacity var(--hem-ss-duration) ease;
}

.hem-slideshow--fade .hem-slideshow__slide.is-active,
.hem-slideshow--fade .hem-slideshow__slide.is-leaving {
    opacity: 1;
}

/**
 * Schieben: das neue Bild wartet rechts (rückwärts: links), fährt in die
 * Mitte, das alte fährt zur anderen Seite hinaus.
 */
.hem-slideshow--slide .hem-slideshow__slide {
    transform: translateX(100%);
    transition: transform var(--hem-ss-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.hem-slideshow--slide.is-reverse .hem-slideshow__slide {
    transform: translateX(-100%);
}

.hem-slideshow--slide .hem-slideshow__slide.is-active {
    transform: none;
}

.hem-slideshow--slide .hem-slideshow__slide.is-leaving {
    transform: translateX(-100%);
}

.hem-slideshow--slide.is-reverse .hem-slideshow__slide.is-leaving {
    transform: translateX(100%);
}

/* Direkt: kein Übergang */
.hem-slideshow--none .hem-slideshow__slide {
    opacity: 0;
}

.hem-slideshow--none .hem-slideshow__slide.is-active {
    opacity: 1;
}

/* Das Skript setzt ein Bild damit ohne Übergang an seine Startposition. */
.hem-slideshow__slide.is-instant {
    transition: none !important;
}

/* ------------------------------------------------------- Kamerafahrt */

/**
 * Ken Burns: das aktive Bild zoomt während seiner Standzeit langsam hinein
 * oder heraus. Dauer und Ausgangspunkt setzt das Skript je Bild als
 * Variablen; angehalten wird zusammen mit der Diashow. Die Fahrt läuft
 * weiter, während das Bild hinausblendet – sonst spränge es dabei zurück.
 */
.hem-slideshow--kenburns .hem-slideshow__slide.is-active .hem-slideshow__image,
.hem-slideshow--kenburns .hem-slideshow__slide.is-leaving .hem-slideshow__image {
    animation: hem-ss-kb-in var(--hem-ss-kb-duration, 6s) linear forwards;
    transform-origin: var(--hem-ss-kb-origin, 50% 50%);
    will-change: transform;
}

.hem-slideshow--kenburns .hem-slideshow__slide.is-active.hem-kb-out .hem-slideshow__image,
.hem-slideshow--kenburns .hem-slideshow__slide.is-leaving.hem-kb-out .hem-slideshow__image {
    animation-name: hem-ss-kb-out;
}

.hem-slideshow.is-paused .hem-slideshow__image {
    animation-play-state: paused;
}

@keyframes hem-ss-kb-in {
    from { transform: scale(1); }
    to   { transform: scale(var(--hem-ss-kb-zoom)); }
}

@keyframes hem-ss-kb-out {
    from { transform: scale(var(--hem-ss-kb-zoom)); }
    to   { transform: scale(1); }
}

/* ------------------------------------------------------ Filmstreifen */

.hem-slideshow--strip .hem-slideshow__stage {
    background: transparent;
}

.hem-slideshow--strip .hem-slideshow__slides {
    display: flex;
    gap: var(--hem-ss-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.hem-slideshow--strip .hem-slideshow__slides::-webkit-scrollbar {
    display: none;
}

.hem-slideshow--snap-none .hem-slideshow__slides,
.hem-slideshow--strip.is-dragging .hem-slideshow__slides {
    scroll-snap-type: none;
}

.hem-slideshow--strip.is-dragging .hem-slideshow__slides {
    scroll-behavior: auto;
    cursor: grabbing;
}

/**
 * Höhe fest, Breite aus dem Seitenverhältnis: Hoch- und Querformate stehen
 * unbeschnitten nebeneinander. Das Verhältnis bringt jedes Bild als
 * Variable mit; ein festes aus dem Widget überschreibt es.
 */
.hem-slideshow--strip .hem-slideshow__slide {
    position: relative;
    flex: 0 0 auto;
    height: var(--hem-ss-strip-height);
    aspect-ratio: var(--hem-ratio, 1.5);
    overflow: hidden;
    background: var(--hem-ss-background);
    scroll-snap-align: start;
    transition: opacity 0.35s ease;
}

.hem-slideshow--snap-center .hem-slideshow__slide {
    scroll-snap-align: center;
}

.hem-slideshow--strip .hem-slideshow__image {
    transition: transform 0.5s ease;
}

.hem-slideshow--strip .hem-slideshow__slide:hover .hem-slideshow__image {
    transform: scale(var(--hem-ss-hover-scale));
}

/* Die übrigen Bilder treten zurück, wenn eines unter der Maus liegt */
.hem-slideshow--strip .hem-slideshow__slides:hover .hem-slideshow__slide:not(:hover) {
    opacity: calc(1 - var(--hem-ss-dim));
}

/* --------------------------------------------------------- Pfeile */

.hem-slideshow__arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hem-ss-arrow-size);
    height: var(--hem-ss-arrow-size);
    margin-top: calc(var(--hem-ss-arrow-size) / -2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.hem-slideshow__arrow svg {
    width: var(--hem-ss-arrow-icon);
    height: var(--hem-ss-arrow-icon);
}

.hem-slideshow__arrow--prev {
    left: var(--hem-ss-arrow-offset);
}

.hem-slideshow__arrow--next {
    right: var(--hem-ss-arrow-offset);
}

.hem-slideshow__arrow:hover,
.hem-slideshow__arrow:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.hem-slideshow__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.hem-slideshow__arrow[disabled] {
    opacity: 0.25 !important;
    cursor: default;
    pointer-events: none;
}

/* Nur bei Mouseover: die Deckkraft aus dem Widget gilt erst dann */
.hem-slideshow--arrows-hover:not(:hover):not(:focus-within) .hem-slideshow__arrow {
    opacity: 0 !important;
}

/* ---------------------------------------------- Zähler und Schalter */

.hem-slideshow__bar {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hem-slideshow--bar-top-right .hem-slideshow__bar {
    top: var(--hem-ss-bar-offset);
    right: var(--hem-ss-bar-offset);
}

.hem-slideshow--bar-top-left .hem-slideshow__bar {
    top: var(--hem-ss-bar-offset);
    left: var(--hem-ss-bar-offset);
}

.hem-slideshow--bar-bottom-right .hem-slideshow__bar {
    bottom: var(--hem-ss-bar-offset);
    right: var(--hem-ss-bar-offset);
}

.hem-slideshow--bar-bottom-left .hem-slideshow__bar {
    bottom: var(--hem-ss-bar-offset);
    left: var(--hem-ss-bar-offset);
}

.hem-slideshow__counter {
    padding: 4px 0;
}

.hem-slideshow__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.hem-slideshow__counter + .hem-slideshow__play {
    margin-left: 2px;
}

.hem-slideshow__play svg {
    width: 16px;
    height: 16px;
}

.hem-slideshow__play:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.hem-slideshow__icon-pause,
.hem-slideshow.is-playing .hem-slideshow__icon-play {
    display: none;
}

.hem-slideshow.is-playing .hem-slideshow__icon-pause {
    display: block;
}

/* -------------------------------------------------- Fortschrittsbalken */

.hem-slideshow__progress {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 6;
    height: var(--hem-ss-progress-height);
    overflow: hidden;
    background: var(--hem-ss-progress-track, rgba(255, 255, 255, 0.25));
}

.hem-slideshow--progress-bottom .hem-slideshow__progress {
    bottom: 0;
}

.hem-slideshow--progress-top .hem-slideshow__progress {
    top: 0;
}

.hem-slideshow__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--hem-ss-progress-color, #fff);
    transform: scaleX(0);
    transform-origin: left center;
}

.hem-slideshow.is-playing .hem-slideshow__progress-bar {
    animation: hem-ss-progress var(--hem-ss-interval, 5s) linear forwards;
}

.hem-slideshow.is-paused .hem-slideshow__progress-bar {
    animation-play-state: paused;
}

@keyframes hem-ss-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ------------------------------------------------- Punkte und Striche */

.hem-slideshow__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--hem-ss-dot-gap);
    margin: 0;
    padding: 0;
}

/**
 * Im Bild liegt die Leiste über die ganze Breite, damit die Ausrichtung aus
 * dem Widget greift. Klicks gehen durch sie hindurch zum Bild – nur die
 * Punkte selbst fangen sie ab.
 */
.hem-slideshow__dots--inside {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--hem-ss-dot-offset);
    z-index: 6;
    padding: 6px 16px;
    pointer-events: none;
}

.hem-slideshow__dots--inside .hem-slideshow__dot {
    pointer-events: auto;
}

.hem-slideshow__dots--below {
    margin-top: var(--hem-ss-dot-offset);
}

.hem-slideshow__dot {
    display: block;
    width: var(--hem-ss-dot-size);
    height: var(--hem-ss-dot-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hem-ss-dot-color, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Unter dem Bild steht meist eine helle Seite: dunkle Punkte als Vorgabe */
.hem-slideshow__dots--below .hem-slideshow__dot {
    background: var(--hem-ss-dot-color, rgba(0, 0, 0, 0.28));
}

.hem-slideshow__dot.is-active {
    background: var(--hem-ss-dot-active, #fff);
    transform: scale(1.25);
}

.hem-slideshow__dots--below .hem-slideshow__dot.is-active {
    background: var(--hem-ss-dot-active, #222);
}

.hem-slideshow__dots--lines .hem-slideshow__dot {
    width: var(--hem-ss-line-width);
    border-radius: 2px;
}

.hem-slideshow__dots--lines .hem-slideshow__dot.is-active {
    transform: none;
}

.hem-slideshow__dot:focus-visible {
    outline: 2px solid var(--hem-ss-dot-active, currentColor);
    outline-offset: 3px;
}

/* ------------------------------------------------------- Miniaturen */

/**
 * Mittig, solange sie hineinpassen; sonst eine wischbare Reihe. Die
 * automatischen Aussenränder des ersten und letzten Elements fallen bei
 * Überlauf auf null zurück, ohne dass der Anfang abgeschnitten würde.
 */
.hem-slideshow__dots--thumbs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--hem-ss-thumb-gap);
    margin-top: var(--hem-ss-dot-offset);
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.hem-slideshow__thumb {
    flex: 0 0 auto;
    height: var(--hem-ss-thumb-height);
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    opacity: var(--hem-ss-thumb-opacity);
    overflow: hidden;
    transition: opacity 0.25s ease, border-color 0.25s ease;
}

.hem-slideshow__thumb:first-child {
    margin-left: auto;
}

.hem-slideshow__thumb:last-child {
    margin-right: auto;
}

.hem-slideshow__thumb img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
}

.hem-slideshow__thumb:hover,
.hem-slideshow__thumb:focus-visible {
    opacity: 1;
}

.hem-slideshow__thumb.is-active {
    opacity: 1;
    border-color: var(--hem-ss-thumb-border, currentColor);
}

.hem-slideshow__thumb:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ------------------------------------------------------- Beschriftung */

.hem-slideshow__text {
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    max-width: 70%;
    margin: 24px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.hem-slideshow__caption {
    font-size: 1.15em;
    line-height: 1.35;
}

.hem-slideshow__exif {
    font-size: 0.8em;
    line-height: 1.4;
    opacity: 0.85;
}

.hem-slideshow__caption:empty,
.hem-slideshow__exif:empty {
    display: none;
}

/* Im Bild: an einer der sechs Stellen */
.hem-slideshow--text-bottom-left .hem-slideshow__text,
.hem-slideshow--text-bottom-center .hem-slideshow__text,
.hem-slideshow--text-bottom-right .hem-slideshow__text,
.hem-slideshow--text-center .hem-slideshow__text,
.hem-slideshow--text-top-left .hem-slideshow__text,
.hem-slideshow--text-top-right .hem-slideshow__text {
    position: absolute;
}

.hem-slideshow--text-bottom-left .hem-slideshow__text {
    left: 0;
    bottom: 0;
}

.hem-slideshow--text-bottom-right .hem-slideshow__text {
    right: 0;
    bottom: 0;
    text-align: right;
}

.hem-slideshow--text-bottom-center .hem-slideshow__text {
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    text-align: center;
}

.hem-slideshow--text-center .hem-slideshow__text {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    text-align: center;
}

.hem-slideshow--text-top-left .hem-slideshow__text {
    left: 0;
    top: 0;
}

.hem-slideshow--text-top-right .hem-slideshow__text {
    right: 0;
    top: 0;
    text-align: right;
}

/* Unter dem Bild: normale Textfarbe der Seite, kein Schatten */
.hem-slideshow__below .hem-slideshow__text {
    max-width: none;
    margin: 12px 0 0;
    color: inherit;
    text-shadow: none;
}

.hem-slideshow__below .hem-slideshow__text:empty {
    display: none;
}

/**
 * Nur bei Mouseover: in der Diashow über dem ganzen Widget, im Filmstreifen
 * je Bild. Auf Touch-Geräten gibt es das nicht, dort steht der Text immer.
 */
.hem-slideshow--text-reveal .hem-slideshow__text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hem-slideshow--slideshow.hem-slideshow--text-reveal:hover .hem-slideshow__text,
.hem-slideshow--slideshow.hem-slideshow--text-reveal:focus-within .hem-slideshow__text,
.hem-slideshow--strip.hem-slideshow--text-reveal .hem-slideshow__slide:hover .hem-slideshow__text,
.hem-slideshow--strip.hem-slideshow--text-reveal .hem-slideshow__slide:focus-within .hem-slideshow__text {
    opacity: 1;
}

/**
 * Einblenden mit jedem Bildwechsel. Die Animation läuft nur bis zum Ende
 * (backwards), danach gelten wieder die normalen Regeln – sonst überschriebe
 * ihr Endzustand das Ausblenden bei Mouseover.
 */
.hem-slideshow--text-anim-up .hem-slideshow__slide.is-active .hem-slideshow__text,
.hem-slideshow--text-anim-up .hem-slideshow__below .hem-slideshow__text.is-changing {
    animation: hem-ss-text-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--hem-ss-duration) * 0.4);
}

.hem-slideshow--text-anim-fade .hem-slideshow__slide.is-active .hem-slideshow__text,
.hem-slideshow--text-anim-fade .hem-slideshow__below .hem-slideshow__text.is-changing {
    animation: hem-ss-text-fade 0.7s ease backwards;
    animation-delay: calc(var(--hem-ss-duration) * 0.4);
}

.hem-slideshow--text-reveal .hem-slideshow__text {
    animation: none !important;
}

/* Im Filmstreifen wechselt kein Bild – der Text steht einfach da */
.hem-slideshow--strip .hem-slideshow__slide.is-active .hem-slideshow__text {
    animation: none;
}

@keyframes hem-ss-text-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hem-ss-text-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------ Editor */

.hem-slideshow__notice {
    padding: 20px;
    border: 1px dashed currentColor;
    border-radius: 4px;
    opacity: 0.7;
    text-align: center;
}

/* ------------------------------------------------------- Mobilgeräte */

@media (max-width: 767px) {
    .hem-slideshow--arrows-mobile-hidden .hem-slideshow__arrow {
        display: none;
    }

    .hem-slideshow__text {
        max-width: 90%;
        margin: 14px;
    }
}

@media (hover: none) {
    /* Ohne Maus gibt es kein Mouseover: Pfeile und Text stehen immer */
    .hem-slideshow--arrows-hover:not(:hover):not(:focus-within) .hem-slideshow__arrow {
        opacity: 0.85 !important;
    }

    .hem-slideshow--text-reveal .hem-slideshow__text {
        opacity: 1;
    }

    .hem-slideshow--strip .hem-slideshow__slides {
        cursor: auto;
    }
}

/* --------------------------------------------------------- Werkschau */

/**
 * Ein Bild je Bildschirmhöhe, untereinander in der Seite. Kein eigener
 * Scrollbereich: gescrollt wird die Seite, damit Tastatur, Wischen und die
 * Zurück-Taste des Browsers tun, was sie sonst tun.
 */
.hem-slideshow--showcase {
    --hem-ss-show-height: 100vh;
    --hem-ss-show-max: 88vh;
    --hem-ss-show-gap: 0px;
    --hem-ss-rail-offset: 24px;
    --hem-ss-rail-size: 9px;
    --hem-ss-rail-gap: 10px;
    --hem-ss-rail-color: rgba(255, 255, 255, 0.45);
    --hem-ss-rail-active: #fff;
    --hem-ss-number-offset: 20px;
}

/* Die Bühne trägt nur die Wandfarbe – die Höhe machen die Bilder */
.hem-slideshow--showcase .hem-slideshow__stage {
    aspect-ratio: auto;
    height: auto;
}

.hem-slideshow--showcase .hem-slideshow__slides {
    display: flex;
    flex-direction: column;
    gap: var(--hem-ss-show-gap);
}

/**
 * Spalte, nicht Zeile: unter dem Bild kann eine Beschriftung stehen, und die
 * gehört darunter, nicht daneben.
 */
.hem-slideshow--showcase .hem-slideshow__slide {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ----- Wie das Bild: das figure nimmt dessen Seitenverhältnis an */

/**
 * Die Höhe ist gesetzt, die Breite folgt aus dem Seitenverhältnis – und
 * max-width zieht sie wieder zurück, wenn ein Querformat breiter wäre als
 * die Spalte. So steht ein Hochformat hoch und ein Panorama breit, ohne
 * dass eines beschnitten wird.
 */
.hem-slideshow--showcase-image .hem-slideshow__inner {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}

.hem-slideshow--showcase-image .hem-slideshow__figure {
    aspect-ratio: var(--hem-ratio, 1.5);
    width: auto;
    height: var(--hem-ss-show-max);
    max-width: 100%;
}

/* ----- Feste Höhe: jedes Bild füllt denselben Rahmen */

.hem-slideshow--showcase-screen .hem-slideshow__slide {
    height: var(--hem-ss-show-height);
}

.hem-slideshow--showcase-screen .hem-slideshow__inner {
    flex: 1 1 auto;
    width: 100%;
    /* Ohne min-height wächst ein Flex-Element über seinen Rahmen hinaus */
    min-height: 0;
}

.hem-slideshow--showcase .hem-slideshow__below {
    width: 100%;
}

/* ----- Einblenden beim Scrollen */

/**
 * Erst wenn das Skript übernommen hat: ohne JavaScript fehlt die Klasse
 * „ready", und dann steht jedes Bild einfach da.
 */
.hem-slideshow--showcase.hem-slideshow--ready .hem-slideshow__inner {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hem-slideshow--ready.hem-slideshow--reveal-rise .hem-slideshow__slide:not(.is-visible) .hem-slideshow__inner {
    opacity: 0;
    transform: translateY(40px);
}

.hem-slideshow--ready.hem-slideshow--reveal-fade .hem-slideshow__slide:not(.is-visible) .hem-slideshow__inner {
    opacity: 0;
}

.hem-slideshow--ready.hem-slideshow--reveal-zoom .hem-slideshow__slide:not(.is-visible) .hem-slideshow__inner {
    opacity: 0;
    transform: scale(0.96);
}

/* ----- Nur bei Mouseover: in der Werkschau je Bild */

.hem-slideshow--showcase.hem-slideshow--text-reveal .hem-slideshow__slide:hover .hem-slideshow__text,
.hem-slideshow--showcase.hem-slideshow--text-reveal .hem-slideshow__slide:focus-within .hem-slideshow__text {
    opacity: 1;
}

/* ----- Nummer am Bild */

.hem-slideshow__number {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    /* Gleich breite Ziffern: die Nummer springt beim Wechsel nicht */
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.hem-slideshow--num-top-left .hem-slideshow__number {
    top: var(--hem-ss-number-offset);
    left: var(--hem-ss-number-offset);
}

.hem-slideshow--num-top-right .hem-slideshow__number {
    top: var(--hem-ss-number-offset);
    right: var(--hem-ss-number-offset);
}

.hem-slideshow--num-bottom-left .hem-slideshow__number {
    bottom: var(--hem-ss-number-offset);
    left: var(--hem-ss-number-offset);
}

.hem-slideshow--num-bottom-right .hem-slideshow__number {
    bottom: var(--hem-ss-number-offset);
    right: var(--hem-ss-number-offset);
}

/* ----- Punkte am Rand */

/**
 * Absolut über der ganzen Werkschau, damit sie den Bildern keine Breite
 * wegnimmt; darin ein haftendes Element, das auf halber Bildschirmhöhe
 * stehen bleibt, solange die Werkschau zu sehen ist.
 */
.hem-slideshow__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
}

.hem-slideshow--rail-right .hem-slideshow__rail {
    right: var(--hem-ss-rail-offset);
}

.hem-slideshow--rail-left .hem-slideshow__rail {
    left: var(--hem-ss-rail-offset);
}

.hem-slideshow__rail-inner {
    position: sticky;
    top: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Die Mitte der Leiste auf die Mitte des Bildschirms */
    translate: 0 -50%;
    pointer-events: auto;
}

/**
 * Der Punkt ist klein, die Trefferfläche darf das nicht sein: der Link ist
 * 24 Pixel breit, der Punkt liegt darin in der Mitte.
 */
.hem-slideshow__rail-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: calc(var(--hem-ss-rail-size) + var(--hem-ss-rail-gap));
    min-height: 20px;
    text-decoration: none;
}

.hem-slideshow__rail-dot::before {
    content: "";
    display: block;
    width: var(--hem-ss-rail-size);
    height: var(--hem-ss-rail-size);
    border-radius: 50%;
    background: var(--hem-ss-rail-color);
    transition: background 0.25s ease, scale 0.25s ease;
}

.hem-slideshow__rail-dot.is-active::before {
    background: var(--hem-ss-rail-active);
    scale: 1.35;
}

.hem-slideshow__rail-dot:hover::before {
    background: var(--hem-ss-rail-active);
}

.hem-slideshow__rail-dot:focus-visible {
    outline: 2px solid var(--hem-ss-rail-active);
    outline-offset: -2px;
}

/* ------------------------------------------------ Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
    .hem-slideshow__slide {
        transition-duration: 0.01ms !important;
    }

    /* In der Werkschau bleibt dann einfach alles sichtbar */
    .hem-slideshow--showcase .hem-slideshow__inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hem-slideshow--slide .hem-slideshow__slide {
        transform: none !important;
    }

    .hem-slideshow__image,
    .hem-slideshow__text {
        animation: none !important;
        transition: none !important;
    }

    .hem-slideshow--strip .hem-slideshow__slides {
        scroll-behavior: auto;
    }
}