/* ============================================================
   Enoxo Sites — Vorher/Nachher-Schieber
   Links die typische alte Handwerkerseite, rechts die neue.
   Der Besucher zieht den Griff und sieht den Unterschied selbst.
   Die neue Seite nutzt bewusst die Bausteine aus dem Baukasten
   (.bkp-*), damit beide Stellen dieselbe Sprache sprechen.
   ============================================================ */

.vn{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper);box-shadow:var(--shadow-m);
}
.vn-stage{
  position:relative;height:440px;overflow:hidden;
  --pos:50%;
  cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
}
@media(max-width:720px){.vn-stage{height:380px}}
.vn-pane{position:absolute;inset:0;overflow:hidden}
/* Die alte Seite liegt oben und wird von rechts weggeschnitten */
.vn-alt{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vn-pane .bkp-page{height:100%;overflow:hidden;pointer-events:none}

/* Griff */
.vn-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;
  background:var(--amber-strong);z-index:4;cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
}
.vn-handle:focus-visible{outline:none}
.vn-handle:focus-visible .vn-grip{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--petrol)}
.vn-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--amber-strong);border:3px solid var(--paper);
  display:flex;align-items:center;justify-content:center;gap:3px;
  box-shadow:var(--shadow-m);
}
.vn-grip::before,.vn-grip::after{
  content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.vn-grip::before{border-right:7px solid #fff}
.vn-grip::after{border-left:7px solid #fff}

/* Schilder */
.vn-tag{
  position:absolute;top:14px;z-index:3;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;pointer-events:none;
  transition:opacity .2s ease;
}
.vn-tag-alt{left:14px;background:rgba(32,49,46,.82);color:#fff}
.vn-tag-neu{right:14px;background:var(--petrol);color:#fff}

/* Anleitung, verschwindet beim ersten Ziehen */
.vn-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;
  font-size:12.5px;font-weight:600;color:var(--ink);
  background:rgba(255,253,248,.92);border:1px solid var(--line);
  padding:7px 14px;border-radius:99px;pointer-events:none;
  box-shadow:var(--shadow-s);transition:opacity .3s ease;
}
.vn-stage.is-benutzt .vn-hint{opacity:0}

/* ── Die alte Seite ─────────────────────────────────────── */
.alt{
  height:100%;background:#c8c8c0;font-family:'Times New Roman',Times,serif;
  color:#000;font-size:13px;line-height:1.45;
  background-image:linear-gradient(180deg,#d9d9d2,#bcbcb4);
}
.alt-in{
  max-width:520px;margin:0 auto;background:#fff;border-left:1px solid #999;border-right:1px solid #999;
  min-height:100%;padding-bottom:26px;
}
.alt-band{background:#2b3a8c;color:#fff;text-align:center;padding:9px 8px;border-bottom:3px solid #97a0c9}
.alt-band b{font-size:17px;letter-spacing:.4px}
.alt-band span{display:block;font-size:10.5px;opacity:.85;margin-top:2px}
.alt-nav{
  background:#e6e6e6;border-bottom:1px solid #999;padding:5px 9px;
  font-size:11.5px;color:#00c;
}
.alt-nav u{margin-right:9px;cursor:default}
.alt-body{padding:13px 16px}
.alt-h{color:#00008b;font-size:15px;margin:0 0 8px;text-decoration:underline}
.alt-p{margin:0 0 9px;font-size:12px;text-align:justify}
.alt-tab{width:100%;border-collapse:collapse;margin:10px 0;font-size:11.5px}
.alt-tab td{border:1px solid #aaa;padding:4px 6px}
.alt-tab td:first-child{background:#eee;width:38%}
.alt-neu{background:#c00;color:#fff;font-size:9.5px;padding:1px 5px;margin-left:5px;font-family:Arial,sans-serif}
.alt-foot{
  border-top:1px solid #999;margin-top:12px;padding:8px 16px 0;
  font-size:10.5px;color:#444;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.alt-zaehler{font-family:'Courier New',monospace;background:#000;color:#0f0;padding:1px 5px;letter-spacing:1px}
.alt-scroll{
  position:absolute;left:0;right:0;bottom:0;height:13px;background:#e0e0e0;border-top:1px solid #999;
}
.alt-scroll i{display:block;height:100%;width:58%;background:#b4b4b4;border-right:1px solid #888}

/* ── Gegenüberstellung darunter ─────────────────────────── */
.vn-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;
}
@media(max-width:720px){.vn-facts{grid-template-columns:1fr}}
.vn-fact{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:14px 16px;box-shadow:var(--shadow-s);
}
.vn-fact .vn-von{
  font-size:13px;color:var(--muted2);text-decoration:line-through;
  text-decoration-color:var(--amber);display:block;margin-bottom:5px;
}
.vn-fact .vn-zu{
  font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink);
  letter-spacing:-.012em;line-height:1.3;display:block;
}
.vn-fact .vn-zu::before{content:'→ ';color:var(--petrol)}

@media(prefers-reduced-motion:reduce){
  .vn-tag,.vn-hint{transition:none}
}