/* animation-kit v1.0.1 */

:root {
  --spring-soft: linear(
    0,
    0.019,
    0.073,
    0.154,
    0.254,
    0.366,
    0.482,
    0.596,
    0.702,
    0.795,
    0.871,
    0.929,
    0.970,
    0.998,
    1.014,
    1.021,
    1.020,
    1.015,
    1.009,
    1.004,
    1
  );
  --spring-snappy: linear(
    0,
    0.120,
    0.318,
    0.536,
    0.735,
    0.891,
    0.994,
    1.049,
    1.067,
    1.060,
    1.041,
    1.020,
    1.003,
    0.994,
    0.993,
    0.996,
    0.999,
    1.001,
    1.001,
    1.000,
    1
  );
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 140ms;
  --dur-ui: 260ms;
}

/* Zugänglicher Fokus und kurze Übergänge */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.kit-cta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--dur-micro, 140ms) var(--ease-premium, ease-out),
    opacity var(--dur-micro, 140ms) var(--ease-premium, ease-out);
}

.kit-cta:hover {
  opacity: 0.92;
  transform: translate3d(0, -2px, 0) scale(1.01);
}

.kit-cta:focus-visible {
  opacity: 0.94;
  transform: translate3d(0, -1px, 0);
}

.kit-cta:active {
  opacity: 0.86;
  transform: translate3d(0, 0, 0) scale(0.98);
}

/* Vorher und Nachher bleiben auch ohne Skript sichtbar */
.kit-ba {
  --kit-ba-position: 50%;
  position: relative;
  isolation: isolate;
  aspect-ratio: var(--kit-ba-aspect-ratio, 8 / 5);
  overflow: hidden;
  user-select: none;
}

.kit-ba-before,
.kit-ba-after {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  pointer-events: none;
}

.kit-ba-before {
  z-index: 0;
}

.kit-ba-after {
  z-index: 1;
  clip-path: inset(0 0 0 var(--kit-ba-position, 50%));
}

.kit-ba::before,
.kit-ba::after {
  position: absolute;
  inset-block-start: 0.75rem;
  z-index: 3;
  padding: 0.35rem 0.55rem;
  color: var(--kit-ba-label-color, var(--paper, #fff));
  background: var(--kit-ba-label-background, rgb(20 18 16 / 0.72));
  pointer-events: none;
}

.kit-ba::before {
  inset-inline-start: 0.75rem;
  content: attr(data-label-before);
}

.kit-ba::after {
  inset-inline-end: 0.75rem;
  content: attr(data-label-after);
}

.kit-ba [role="slider"],
.kit-ba-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--kit-ba-position, 50%);
  z-index: 4;
  inline-size: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kit-ba-handle-color, var(--paper, #fff));
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  transform: translateX(-50%);
}

.kit-ba [role="slider"]::before,
.kit-ba-handle::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 2px;
  content: "";
  background: currentColor;
  transform: translateX(-50%);
}

.kit-ba [role="slider"]::after,
.kit-ba-handle::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "↔";
  color: var(--kit-ba-handle-icon, var(--ink, #141210));
  background: var(--kit-ba-handle-background, var(--paper, #fff));
  transform: translate(-50%, -50%);
}

/* Karten kleben auf großen Ansichten und bleiben sonst im normalen Fluss */
.kit-stack {
  position: relative;
}

.kit-stack > .kit-stack-card {
  position: sticky;
  inset-block-start: var(--kit-stack-top, 1rem);
  opacity: 1;
  transform-origin: center top;
  will-change: transform, opacity;
}

/* Die Story ordnet das Visual links und die Schritte rechts an */
.kit-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  align-items: start;
  gap: var(--kit-story-gap, clamp(2rem, 6vw, 6rem));
}

.kit-story-visual {
  position: sticky;
  inset-block-start: var(--kit-story-top, 1rem);
  align-self: start;
  min-inline-size: 0;
  /* Platz reservieren, falls das Visual (SVG/Bild) asynchron nachgeladen wird (CLS-Schutz) */
  aspect-ratio: var(--kit-story-visual-ratio, 3 / 2);
  max-block-size: calc(
    100svh - var(--kit-story-top, 1rem) - var(--kit-story-top, 1rem)
  );
}

/* Inline-SVG-Schemata füllen das Visual, laufen nie über (Mobile-Overflow-Schutz) */
.kit-story-visual > svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
}

.kit-story-steps,
.kit-story-step {
  min-inline-size: 0;
}

.kit-story-step {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--dur-ui, 260ms) var(--ease-premium, ease-out),
    opacity var(--dur-ui, 260ms) var(--ease-premium, ease-out);
}

.kit-story-step.is-active {
  opacity: 1;
  transform: translate3d(var(--kit-story-active-offset, -0.5rem), 0, 0);
}

/* Inaktive Steps NICHT unter WCAG-Kontrast dimmen (AA 4.5:1 gilt auch für sie);
   Betonung des aktiven Steps läuft über transform + Akzentfarbe der Seite. */
.kit-story-steps:has(.kit-story-step.is-active) .kit-story-step:not(.is-active) {
  opacity: var(--kit-story-inactive-opacity, 1);
}

/* Der Fortschritt nutzt ausschließlich scaleX. NUR .kit-progress stylen:
   .scroll-progress gehört dem Bestands-Design der Projekte (Gradient, 3px). */
.kit-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--kit-progress-layer, 1000);
  inline-size: 100%;
  block-size: var(--kit-progress-size, 0.25rem);
  background: var(--kit-progress-color, var(--brick, currentColor));
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
}

/* Feine Körnung ohne externe Anfrage */
.kit-grain {
  position: fixed;
  inset: 0;
  z-index: var(--kit-grain-layer, 0);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%224%22%20seed%3D%228%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23grain)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.04;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Hotspots bleiben native, fokussierbare Schaltflächen */
.kit-hotspot-map {
  position: relative;
  isolation: isolate;
}

.kit-hotspot-map > svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.kit-hotspot {
  position: absolute;
  inset-block-start: var(--hotspot-y, auto);
  inset-inline-start: var(--hotspot-x, auto);
  display: grid;
  place-items: center;
  inline-size: var(--kit-hotspot-size, 2.75rem);
  block-size: var(--kit-hotspot-size, 2.75rem);
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--kit-hotspot-color, var(--ink, #141210));
  background: var(--kit-hotspot-background, var(--paper, #fff));
  cursor: pointer;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    transform var(--dur-micro, 140ms) var(--ease-premium, ease-out),
    opacity var(--dur-micro, 140ms) var(--ease-premium, ease-out);
}

.kit-hotspot:hover {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1.06);
}

.kit-hotspot:active {
  opacity: 0.84;
  transform: translate(-50%, -50%) scale(0.94);
}

[popover] {
  max-inline-size: min(28rem, calc(100vi - 2rem));
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center;
  transition-property: opacity, transform, display, overlay;
  transition-duration:
    var(--dur-ui, 260ms),
    var(--dur-ui, 260ms),
    var(--dur-ui, 260ms),
    var(--dur-ui, 260ms);
  transition-timing-function: var(--ease-premium, ease-out);
  transition-behavior: allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* Kleine Ansichten nutzen eine einspaltige und lesbare Anordnung */
@media (max-width: 767px) {
  .kit-stack > .kit-stack-card {
    position: relative;
    inset-block-start: auto;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .kit-story {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kit-story-mobile-gap, 2rem);
  }

  .kit-story > .kit-story-visual {
    position: sticky;
    inset-block-start: var(--kit-story-mobile-top, 0);
    z-index: var(--kit-story-visual-layer, 2);
    min-block-size: 0;
    block-size: min(42svh, 24rem);
    max-block-size: min(42svh, 24rem);
    /* aspect-ratio darf aus der fixen Höhe keine Überbreite errechnen */
    aspect-ratio: auto;
    inline-size: auto;
    max-inline-size: 100%;
    overflow: hidden;
  }

  .kit-story-step.is-active {
    transform: none;
  }
}

/* Nur der Seitenfortschritt erhält eine Scroll Timeline */
@supports (animation-timeline: scroll()) {
  .kit-progress {
    animation-name: kit-progress-scroll;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }

  @keyframes kit-progress-scroll {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }
}

/* Laufband: Layout für die vom Kit erzeugte Band-Struktur */
[data-anim="marquee"] {
  overflow: hidden;
}

.kit-marquee-band {
  display: flex;
  inline-size: max-content;
  will-change: transform;
}

.kit-marquee-spur,
.kit-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--kit-marquee-gap, 3rem);
  padding-inline-end: var(--kit-marquee-gap, 3rem);
  white-space: nowrap;
}

.kit-marquee-pause {
  margin-block-start: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line, rgb(20 18 16 / 0.2));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* Sequenz-Canvas: Platz reservieren (CLS-Schutz) */
.kit-sequence-canvas {
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--kit-seq-ratio, 16 / 9);
}

/* Reduzierte Bewegung hält Inhalte sichtbar und Laufbänder ruhig */
@media (prefers-reduced-motion: reduce) {
  [class^="kit-"],
  [class*=" kit-"],
  [popover] {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .kit-cta,
  .kit-cta:hover,
  .kit-cta:focus-visible,
  .kit-cta:active {
    opacity: 1;
    transform: none;
  }

  .kit-stack > .kit-stack-card {
    position: relative;
    inset-block-start: auto;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .kit-story > .kit-story-visual {
    position: relative;
    inset-block-start: auto;
    min-block-size: 0;
    block-size: auto;
    max-block-size: none;
    overflow: visible;
  }

  .kit-story-step,
  .kit-story-step.is-active,
  .kit-story-steps:has(.kit-story-step.is-active) .kit-story-step:not(.is-active) {
    opacity: 1;
    transform: none;
  }

  .kit-progress {
    animation: none !important;
    transform: scaleX(1) !important;
  }

  [data-anim="marquee"],
  .kit-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}