/* ══════════════════════════════════════════════════════════════════════
   REFERENZEN-LAUFBAND UND VORHER/NACHHER (27.09.2026)
   ══════════════════════════════════════════════════════════════════════

   Franky: "Nutze diese Komponente fuer Firmen, mit denen wir gearbeitet
   haben (kannst du auch besser umschreiben)" und "eine weitere Sektion:
   Vor Kamui, nach Kamui. Hier muss klar sein, was unsere Arbeit fuer den
   Kunden bringt, mit zwei verschiedenen Bildern im Slider."

   Vorlagen: 21st.dev LogoMarquee (motion/react) und CompareSlider
   (radix). Die Website ist statisches HTML ohne React, deshalb hier
   nachgebaut, Verhalten wie im Original:
     Laufband  endlos, weicher Rand links und rechts, beim Darueberfahren
               schneller (Original: durationOnHover), "reverse".
     Schieber  ziehen mit Maus/Finger, Pfeiltasten, Bild auf/ab (10er),
               Pos1/Ende; role="slider" mit aria-Werten.
   Umgeschrieben: jede Marke traegt eine Zeile, was wir gebaut haben -
   drei Kunden als reine Logos waeren ein duennes Band gewesen.
   Die React-Originale liegen unter components/ui/ (nicht im Upload). */

/* ── Laufband ──────────────────────────────────────────────────────── */
.kamui-referenzen-band {
  background: #000;
  padding: clamp(2.2rem, 5vw, 3.5rem) 0 clamp(2.4rem, 5vw, 3.75rem);
  border-top: 1px solid rgba(237, 225, 202, 0.08);
  border-bottom: 1px solid rgba(237, 225, 202, 0.08);
}
.kamui-referenzen-band__titel {
  margin: 0 auto 1.6rem;
  text-align: center;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C2A05A;
}
.kamui-referenzen-band__fenster {
  max-width: 80rem;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
.kamui-referenzen-band__spur {
  display: flex;
  width: max-content;
  gap: clamp(3rem, 7vw, 6rem);
  padding: 0 clamp(1.5rem, 3.5vw, 3rem);
  animation: kamui-laufband 70s linear infinite;
  will-change: transform;
}
@keyframes kamui-laufband {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.kamui-referenz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  text-align: center;
  user-select: none;
}
.kamui-referenz__marke {
  display: flex;
  align-items: center;
  height: 2.1rem;
}
.kamui-referenz__marke img {
  display: block;
  height: 100%;
  width: auto;
  opacity: 0.88;
  pointer-events: none;
}
.kamui-referenz__marke--artison img { height: 100%; }
/* Flanko ist ein sehr breiter Schriftzug (7:1): etwas flacher, damit er
   optisch nicht schwerer wirkt als die anderen Marken. */
.kamui-referenz__marke--flanko img { height: 62%; }
.kamui-referenz__wort {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(237, 225, 202, 0.9);
}
.kamui-referenz__was {
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(237, 225, 202, 0.55);
  white-space: nowrap;
}
.kamui-referenz__trenner {
  flex: 0 0 auto;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(194, 160, 90, 0.55);
}
@media (max-width: 767px) {
  .kamui-referenz__marke { height: 1.7rem; }
  .kamui-referenz__wort { font-size: 1.35rem; }
  .kamui-referenz__was { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kamui-referenzen-band__spur { animation: none; transform: none; margin: 0 auto; }
  .kamui-referenzen-band__spur [aria-hidden="true"] { display: none; }
  .kamui-referenzen-band__fenster { -webkit-mask-image: none; mask-image: none; }
}

/* ── Vorher/Nachher ────────────────────────────────────────────────── */
.kamui-wirkung {
  background: #000;
  color: #EDE1CA;
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4rem);
}
.kamui-wirkung__innen { width: 100%; max-width: 72rem; margin: 0 auto; }
/* Das Theme setzt Sektionen als Flexbox: ohne volle Breite schrumpft der
   Schieber (nur absolut positionierte Bilder darin) auf null. */
.kamui-wirkung, .kamui-referenzen-band { display: block !important; width: 100%; }
.kamui-wirkung__kopf { max-width: 44rem; margin: 0 auto 2.6rem; text-align: center; }
.kamui-wirkung__kicker {
  margin: 0 0 1rem;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C2A05A;
}
.kamui-wirkung__titel {
  margin: 0;
  font-family: "Lato", system-ui, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #EDE1CA;
}
.kamui-wirkung__titel em { font-style: italic; font-weight: 400; color: #C2A05A; }
.kamui-wirkung__text {
  margin: 1.1rem auto 0;
  max-width: 36rem;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(237, 225, 202, 0.78);
}

.kamui-vergleich {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(194, 160, 90, 0.28);
  background: #0c0c0c;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  outline: none;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.kamui-vergleich:active { cursor: grabbing; }
.kamui-vergleich:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 160, 90, 0.55), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.kamui-vergleich__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.kamui-vergleich__vorher { clip-path: inset(0 calc(100% - var(--wert, 50%)) 0 0); }
.kamui-vergleich__nachher { clip-path: inset(0 0 0 var(--wert, 50%)); }
.kamui-vergleich__marke {
  position: absolute;
  top: 1rem;
  z-index: 3;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(237, 225, 202, 0.18);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(237, 225, 202, 0.9);
  pointer-events: none;
}
.kamui-vergleich__marke--vorher { left: 1rem; }
.kamui-vergleich__marke--nachher { right: 1rem; color: #C2A05A; border-color: rgba(194, 160, 90, 0.45); }
.kamui-vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--wert, 50%);
  z-index: 4;
  width: 44px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.kamui-vergleich__linie {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(194, 160, 90, 0), #C2A05A 12%, #C2A05A 88%, rgba(194, 160, 90, 0));
}
.kamui-vergleich__knopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #C2A05A;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #C2A05A;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
.kamui-vergleich__knopf svg { width: 15px; height: 15px; }

.kamui-wirkung__spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 2rem;
}
.kamui-wirkung__spalte {
  padding: 1.5rem 1.6rem;
  border-radius: 12px;
  border: 1px solid rgba(237, 225, 202, 0.1);
  background: rgba(237, 225, 202, 0.025);
}
.kamui-wirkung__spalte--nachher {
  border-color: rgba(194, 160, 90, 0.35);
  background: linear-gradient(160deg, rgba(194, 160, 90, 0.08), rgba(194, 160, 90, 0.015));
}
.kamui-wirkung__spalte h3 {
  margin: 0 0 1rem;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 225, 202, 0.6);
}
.kamui-wirkung__spalte--nachher h3 { color: #C2A05A; }
.kamui-wirkung__spalte ul { list-style: none; margin: 0; padding: 0; }
.kamui-wirkung__spalte li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(237, 225, 202, 0.72);
  border-top: 1px solid rgba(237, 225, 202, 0.07);
}
.kamui-wirkung__spalte li:first-child { border-top: 0; }
.kamui-wirkung__spalte li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.2rem;
  width: 0.55rem;
  height: 1px;
  background: rgba(237, 225, 202, 0.4);
}
.kamui-wirkung__spalte--nachher li { color: rgba(237, 225, 202, 0.9); }
.kamui-wirkung__spalte--nachher li::before {
  top: 0.95rem;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.5px solid #C2A05A;
  border-bottom: 1.5px solid #C2A05A;
  background: none;
  transform: rotate(-45deg);
}
@media (max-width: 767px) {
  .kamui-vergleich { aspect-ratio: 4 / 3; border-radius: 10px; }
  .kamui-vergleich__marke { top: 0.7rem; font-size: 0.64rem; padding: 0.35rem 0.6rem; }
  .kamui-vergleich__marke--vorher { left: 0.7rem; }
  .kamui-vergleich__marke--nachher { right: 0.7rem; }
  .kamui-wirkung__spalten { grid-template-columns: 1fr; }
}

/* Franky, 27.09.: "Wir sorgen nicht nur dafuer, dass Sie Stunden sparen,
   sondern dass Sie mehr aus Ihrer Zeit herausholen." Als eigene Pointe
   unter dem Einleitungstext, im Ton der uebrigen Seite (kursiv in Gold). */
.kamui-wirkung__pointe {
  margin: 1.1rem auto 0;
  max-width: 36rem;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.5;
  color: #EDE1CA;
}
.kamui-wirkung__pointe em { font-style: italic; color: #C2A05A; }