/* image-text-scroll.css (v1.1.11) – Hintergrund animiert auch bei .no-transition */
.htimage-container {
  border-radius: 20px;
  overflow: hidden;
}

.htimage-inner {
  position: relative;
  width: 100%;
  min-height: var(--min-h, 400px);
  overflow: hidden;
  border-radius: 20px;
}

.htimage-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(1);
  opacity: 1;
  border-radius: 20px;
}

.htimage-text {
  width: calc(100% - (var(--pad-left, 2%) + var(--pad-right, 2%)));
  padding-top: var(--pad-top, 2%);
  padding-right: var(--pad-right, 2%);
  padding-bottom: var(--pad-bottom, 2%);
  padding-left: var(--pad-left, 2%);
  box-sizing: border-box;
  text-align: center;
  color: #000;
}

/* Großer Text */
.htimage-text-1 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Kleiner Text (Standard) */
.htimage-text-2 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + var(--enter-shift, 30px)));
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Fokus-Zustand – immer anwenden (auch bei .no-transition) */
.htimage-container.in-focus .htimage-inner::before {
  transform: scale(var(--zoom-scale, 1.05));
  opacity: var(--focus-opacity, 0.9);
}

.htimage-container.in-focus .htimage-text-1 { opacity: 0; }
.htimage-container.in-focus .htimage-text-2 {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: var(--small-delay, 0.4s), var(--small-delay, 0.4s);
}

/* Übergang deaktiviert: großer Text bleibt IMMER sichtbar, kleiner IMMER unsichtbar,
   aber Hintergrund darf weiter animieren */
.htimage-container.no-transition .htimage-text-1,
.htimage-container.no-transition.in-focus .htimage-text-1 {
  opacity: 1 !important;
}

.htimage-container.no-transition .htimage-text-2,
.htimage-container.no-transition.in-focus .htimage-text-2 {
  opacity: 0 !important;
  transform: translate(-50%, calc(-50% + var(--enter-shift, 30px))) !important;
}
/* KEINE Deaktivierung der ::before-Animation mehr! */