/* Baustein Bildvergleich (Schieber zwischen zwei Bildern), Brand Guide 7.8.6 (#bildvergleich).
   Regeln 1:1 aus kern/marke.css, nur Tokens des Kerns. Die Website lädt teile.css statt marke.css,
   darum steht der Baustein hier. Verhalten: kern/marke.js (system/bildvergleich.js).
   Gleich halten mit kern/marke.css: Abgleich in docs-vasco/technik.md. */
.bildvergleich {
  position: relative;
  
  --pos: 50%;
  margin: 0;
}
.bildvergleich__nachher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}

.bildvergleich__kante {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: var(--border-w-stark);
  translate: calc(var(--border-w-stark) / -2) 0;
  background: var(--surface-raised);
  
  outline: var(--border-w) solid var(--border-strong);
  pointer-events: none;
}

.bildvergleich__kante::before,
.bildvergleich__kante::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
}
.bildvergleich__kante::before {
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  
  outline: var(--border-w) solid var(--border-strong);
}
.bildvergleich__kante::after {
  width: var(--icon);
  height: var(--icon);
  background: var(--ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 8 4 4-4 4'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='m6 8-4 4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bildvergleich__regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: none;
  cursor: ew-resize;
}
.bildvergleich__regler::-webkit-slider-thumb {
  appearance: none;
  width: var(--space-2xl);
  height: 100%;
  background: none;
  cursor: ew-resize;
}
.bildvergleich__regler::-moz-range-thumb {
  width: var(--space-2xl);
  height: 100%;
  border: 0;
  background: none;
  cursor: ew-resize;
}

.bildvergleich__regler:focus-visible {
  outline: var(--border-w-stark) solid var(--focus);
  outline-offset: calc(var(--border-w) * -2);
  border-radius: var(--r-md);
}

.bildvergleich__marke {
  position: absolute;
  bottom: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--r-xs);
  
  background: var(--ink);
  color: var(--surface-base);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}

.bildvergleich__marke--vorher { left: var(--space-sm); }
.bildvergleich__marke--nachher { right: var(--space-sm); }

.bildvergleich__marke--vorher { clip-path: inset(0 var(--schnitt, 0px) 0 0); }
.bildvergleich__marke--nachher { clip-path: inset(0 0 0 var(--schnitt, 0px)); }

/* TFCZ-Farben (Vasco, 2026-11-13): Kante gold, Griff Navy mit goldenem Rand und goldenen Pfeilen.
   Nur Tokens aus system/tokens.css. Steht unter der Kernkopie, damit diese 1:1 vergleichbar bleibt. */
.bildvergleich__kante { background: var(--gold); outline: 0; }
.bildvergleich__kante::before { background: var(--navy); outline: var(--border-w-stark) solid var(--gold); }
.bildvergleich__kante::after { background: var(--gold-lt); }