/* Varianten: story (Geschichte). Alle Klassen mit Präfix .vs */

/* ---------- gemeinsam ---------- */
.vsx-sign { display: flex; align-items: center; gap: 20px; }
.vsx-sign__name { font-family: 'Caveat', cursive; font-weight: 600; font-size: 54px; line-height: 1; transform: rotate(-4deg); }
.vsx-sign__meta { font-size: 13.5px; line-height: 1.45; color: var(--muted); border-left: 1px solid #D8D2C8; padding-left: 18px; }
.vsx-logo { font-size: 1em; pointer-events: none; }
.vsx-tape {
  position: absolute; z-index: 3; width: 38%; height: 9%; min-height: 18px; max-height: 32px;
  background: rgba(246, 199, 68, .78); transform-origin: 50% 50%;
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 97% 94%, 2% 100%, 0 50%);
}

/* =========================================================
   1 · Brief
   ========================================================= */
.vs1 {
  position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 620px;
  background:
    radial-gradient(120% 90% at 70% 40%, rgba(255,255,255,.55), transparent 60%),
    var(--bg-2);
}
.vs1-stage {
  height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 4vw, 70px);
  padding: 96px var(--pad) 36px; align-items: center;
}
.vs1-title { font-size: clamp(44px, 5.6vw, 96px); }
.vs1-lead { margin-top: 26px; font-size: clamp(17px, 1.3vw, 20px); color: #66625C; max-width: 26em; line-height: 1.5; }
.vs1-desk {
  position: relative; height: 100%;
  --lw: min(500px, 100%, calc((100svh - 150px) / 1.38));
  --lh: calc(var(--lw) * 1.38);
  --ew: calc(var(--lw) * 1.06);
  --eh: calc(var(--ew) / 1.62);
}
.vs1-env { position: absolute; left: calc(50% - var(--ew) / 2); top: calc(50% - var(--eh) / 2); width: var(--ew); height: var(--eh); border-radius: 6px; will-change: transform; }
.vs1-front {
  z-index: 7; background: #F4ECDE;
  background-image: linear-gradient(135deg, rgba(255,255,255,.5), transparent 40%), radial-gradient(circle at 20% 80%, rgba(170,140,100,.08), transparent 50%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 50px -28px rgba(60,40,20,.45), 0 2px 6px rgba(60,40,20,.12);
  container-type: inline-size;
}
.vs1-wall { z-index: 1; background: linear-gradient(#D9C9AE, #E4D6BF); box-shadow: 0 30px 50px -28px rgba(60,40,20,.45), 0 2px 6px rgba(60,40,20,.12); }
.vs1-pocket {
  z-index: 3; background: linear-gradient(170deg, #F2E8D8, #EBDFCB);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  container-type: inline-size;
}
.vs1-pocket::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49.6%, rgba(120,90,50,.16) 50%, transparent 50.6%), linear-gradient(to bottom left, transparent 49.6%, rgba(120,90,50,.16) 50%, transparent 50.6%); background-size: 50.1% 112%; background-repeat: no-repeat; background-position: 0 0, 100% 0; }
.vs1-flap {
  z-index: 4; background: linear-gradient(180deg, #EFE3D0, #E8DAC2);
  clip-path: polygon(0 0, 100% 0, 50% 62%);
}
.vs1-seal {
  position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: #fff; display: grid; place-items: center; container-type: inline-size;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.vs1-seal .dots { font-size: 44cqw; transform: none; }
.vs1-sender { position: absolute; left: 6%; bottom: 9%; font-family: var(--mono); font-size: 2.6cqw; line-height: 1.4; color: #6E6458; }
.vs1-stamp {
  position: absolute; right: 6%; top: 9%; width: 18%; aspect-ratio: 4 / 5; background: #fff; padding: 1.5cqw;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.16));
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3.2px, transparent 96%, #000) -4px -4px / 8px 8px round;
          mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3.2px, transparent 96%, #000) -4px -4px / 8px 8px round;
}
.vs1-stamp__in { position: relative; width: 100%; height: 100%; overflow: hidden; }
.vs1-stamp__in img { width: 100%; height: 100%; object-fit: cover; }
.vs1-stamp__in b { position: absolute; right: 6%; top: 3%; font-family: var(--serif); font-weight: 400; font-size: 3.6cqw; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.vs1-stamp__in span { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 1.7cqw; letter-spacing: .16em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vs1-pm { position: absolute; right: 1%; top: 6%; width: 50%; color: rgba(40, 36, 60, .62); mix-blend-mode: multiply; transform-origin: 30% 50%; }
.vs1-addr { position: absolute; left: 30%; top: 50%; font-family: 'Caveat', cursive; font-weight: 600; font-size: 7.2cqw; line-height: 1.05; color: #253260; transform: rotate(-3deg); }
.vs1-lines { position: absolute; left: 30%; top: 50%; width: 46%; height: 23%; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; transform: rotate(-3deg); }
.vs1-lines i { height: 1px; background: rgba(120,100,80,.25); margin-top: 7.4cqw; }
.vs1-lines i + i { margin-top: 0; }

.vs1-letter {
  position: absolute; z-index: 2; left: calc(50% - var(--lw) / 2); top: calc(50% - var(--lh) / 2);
  width: var(--lw); height: var(--lh); container-type: inline-size; will-change: transform;
}
.vs1-panel { position: absolute; left: 0; right: 0; height: calc(100% / 3 + .5px); background: #FFFDF8; backface-visibility: visible; }
.vs1-panel--top { top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #FFFEFA, #FBF7EE); box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); }
.vs1-panel--mid { top: calc(100% / 3); background: linear-gradient(180deg, #F8F3E9, #FFFDF8 18%, #FFFDF8 82%, #F8F3E9); box-shadow: 0 30px 60px -30px rgba(60,40,20,.45); }
.vs1-panel--bot { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #FBF7EE, #FFFEFA); box-shadow: inset 0 1px 0 rgba(0,0,0,.05), 0 30px 50px -30px rgba(60,40,20,.4); }
.vs1-text {
  position: absolute; inset: 0; padding: 9cqw 9cqw 7cqw; color: #253260;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: 5.5cqw; line-height: 1.22;
  display: flex; flex-direction: column;
}
.vs1-lhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6cqw; font-family: var(--mono); font-size: 2.4cqw; color: var(--muted); letter-spacing: .04em; }
.vs1-lhead .vsx-logo { font-size: 4.6cqw; color: var(--ink); }
.vs1-text p { margin-bottom: .55em; }
.vs1-greet { margin-bottom: .35em !important; }
.vs1-bye { margin-top: auto; margin-bottom: .1em !important; }
.vs1-sig { display: flex; align-items: flex-end; gap: 4cqw; }
.vs1-sig__name { font-size: 11cqw; line-height: 1; transform: rotate(-4deg); display: inline-block; padding: 0 2cqw 1cqw 0; }
.vs1-sig small { font-family: var(--sans); font-weight: 500; font-size: 2.4cqw; color: var(--muted); padding-bottom: 2.2cqw; }
.vs1 .w { display: inline-block; clip-path: inset(-25% 100% -35% 0); transition: clip-path .35s ease-out; }
.vs1 .w.is-on { clip-path: inset(-25% -8% -35% 0); }

@media (max-width: 860px) {
  .vs1 { min-height: 560px; }
  .vs1-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding-top: 82px; padding-bottom: 20px; align-items: stretch; }
  .vs1-head .eyebrow { margin-bottom: 10px; }
  .vs1-title { font-size: clamp(34px, 9vw, 46px); }
  .vs1-title br { display: none; }
  .vs1-lead { display: none; }
  .vs1-desk { --lw: min(440px, 100%, calc((100svh - 230px) / 1.38)); }
  .vs1-text { padding: 7.5cqw 7.5cqw 6cqw; font-size: 6.1cqw; line-height: 1.2; }
  .vs1-lhead { margin-bottom: 4.5cqw; }
}

/* =========================================================
   2 · Kapitel
   ========================================================= */
.vs2 { position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 620px; background: var(--bg); }
.vs2-grid {
  height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 90px);
  padding: 100px var(--pad) 40px; align-items: stretch;
}
.vs2-side { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.vs2-title { max-width: 11em; }
.vs2-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: clamp(26px, 4vh, 44px) 0 clamp(24px, 4vh, 48px); }
.vs2-nav li { cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; color: var(--muted); transition: color .3s; }
.vs2-nav li.is-on, .vs2-nav li.is-done { color: var(--ink); }
.vs2-nav__n { font-family: var(--mono); font-size: 13px; }
.vs2-nav__t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs2-nav__bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 8px; }
.vs2-nav__bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.vs2-nav li:nth-child(1) .vs2-nav__bar i { background: var(--rosa); }
.vs2-nav li:nth-child(2) .vs2-nav__bar i { background: var(--gelb); }
.vs2-nav li:nth-child(3) .vs2-nav__bar i { background: var(--gruen); }
.vs2-nav li:nth-child(4) .vs2-nav__bar i { background: var(--blau); }
.vs2-texts { position: relative; display: grid; }
.vs2-ch { grid-area: 1 / 1; }
.vs2-ch__n { display: block; font-family: var(--serif); font-size: clamp(60px, 7vw, 120px); line-height: .8; color: transparent; -webkit-text-stroke: 1.2px var(--ink); margin-bottom: 14px; }
.vs2-ch__t { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.05; margin-bottom: 14px; }
.vs2-ch p { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.5; color: #4A4744; max-width: 27em; }
.vs2-ch .vsx-sign { margin-top: 26px; }

.vs2-vis { position: relative; min-height: 0; display: grid; place-items: center; }
.vs2-canvas {
  position: relative; z-index: 2; height: min(84%, 640px); aspect-ratio: 4 / 5; max-width: 92%;
  padding: 7% 6% 6%; display: flex; flex-direction: column; gap: 4%;
  background: rgba(255, 252, 246, var(--bgA, 1)); border-radius: 6px;
  box-shadow: 0 40px 70px -40px rgba(40,30,20, calc(.5 * var(--bgA, 1))), 0 0 0 1px rgba(0,0,0, calc(.04 * var(--bgA, 1)));
}
.vs2-canvas__t { font-family: 'Playfair Display', var(--serif); font-style: italic; font-weight: 500; text-align: center; font-size: clamp(18px, 2.2vw, 34px); line-height: 1; height: 1em; }
.vs2-cells { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3%; min-height: 0; }
.vs2-ph { margin: 0; position: relative; min-height: 0; border: var(--b, 0px) solid #fff; box-shadow: 0 18px 30px -18px rgba(0,0,0,.4); background: #fff; }
.vs2-ph img { width: 100%; height: 100%; object-fit: cover; }
.vs2-wm { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; pointer-events: none; clip-path: inset(0 0 0 0); background: repeating-linear-gradient(-30deg, transparent 0 52px, rgba(255,255,255,.14) 52px 54px); }
.vs2-wm span { font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 2.8vw, 46px); letter-spacing: .12em; color: rgba(255,255,255,.82); transform: rotate(-30deg); text-shadow: 0 2px 14px rgba(0,0,0,.35); white-space: nowrap; }
.vs2-badge { position: absolute; right: -6%; top: -4%; background: #fff; border-radius: 99px; padding: 10px 16px; font-size: 20px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.3); rotate: 6deg; }
.vs2-pay {
  position: absolute; z-index: 4; left: 50%; bottom: 4%; width: min(340px, 78%); margin-left: max(-170px, -39%);
  background: var(--dark); color: #fff; border-radius: 22px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}
.vs2-pay__lock { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); display: grid; place-items: center; margin-bottom: 6px; }
.vs2-pay__lock svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; }
.vs2-pay b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.vs2-pay > span:not([class]) { font-size: 14px; color: rgba(255,255,255,.62); }
.vs2-pay__btn { margin-top: 12px; align-self: stretch; text-align: center; border-radius: 99px; padding: 12px; font-weight: 700; font-size: 15px; background: linear-gradient(90deg, #FF8A2B, #F2577B); }
.vs2-toast { position: absolute; z-index: 5; left: 50%; bottom: 3%; translate: -50% 0; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 99px; padding: 10px 18px 10px 10px; font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(0,0,0,.35); }
.vs2-toast i { width: 26px; height: 26px; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.vs2-note { position: absolute; z-index: 3; left: -10%; bottom: -5%; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(26px, 2.4vw, 38px); color: var(--ink); rotate: -8deg; }
.vs2-fan { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.vs2-fan__i { grid-area: 1 / 1; margin: 0; height: min(30%, 260px); aspect-ratio: 4 / 5; background: #fff; padding: 3%; box-shadow: 0 24px 40px -22px rgba(40,30,20,.45); }
.vs2-fan__i img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .vs2 { min-height: 600px; }
  .vs2-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 80px var(--pad) 22px; }
  .vs2-side { display: contents; }
  .vs2-side > .eyebrow, .vs2-title { display: none; }
  .vs2-nav { order: 0; margin: 0; gap: 6px; }
  .vs2-nav__t { font-size: 11.5px; }
  .vs2-nav__n { font-size: 11px; }
  .vs2-vis { order: 1; }
  .vs2-texts { order: 2; min-height: 190px; }
  .vs2-ch__n { display: none; }
  .vs2-ch__t { font-size: 28px; margin-bottom: 8px; }
  .vs2-ch p { font-size: 16.5px; }
  .vs2-ch .vsx-sign { margin-top: 12px; }
  .vs2-ch .vsx-sign__name { font-size: 40px; }
  .vs2-canvas { height: 92%; }
  .vs2-badge { font-size: 14px; padding: 7px 11px; right: -4%; }
  .vs2-pay { padding: 16px; border-radius: 18px; bottom: 2%; }
  .vs2-pay b { font-size: 16px; }
  .vs2-pay > span:not([class]) { font-size: 12.5px; }
  .vs2-pay__btn { padding: 9px; font-size: 13px; margin-top: 6px; }
  .vs2-pay__lock { display: none; }
  .vs2-toast { font-size: 13px; }
  .vs2-fan__i { height: 30%; }
  .vs2-note { font-size: 24px; left: -4%; }
}

/* =========================================================
   3 · Scrapbook-Seite
   ========================================================= */
.vs3 { position: relative; overflow: hidden; padding: clamp(90px, 10vw, 150px) var(--pad); background: #E9E2D6; }
.vs3::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vs3-book {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 1500px; margin: 0 auto;
  filter: drop-shadow(0 40px 50px rgba(60,40,20,.28));
}
.vs3-page {
  position: relative; aspect-ratio: 5 / 6; container-type: inline-size;
  background-color: #FBF8F2;
  background-image: radial-gradient(rgba(120,100,80,.18) 1px, transparent 1.2px);
  background-size: 3.4cqw 3.4cqw;
}
.vs3-page--l { border-radius: 10px 2px 2px 10px; box-shadow: inset -40px 0 50px -30px rgba(80,60,30,.22); }
.vs3-page--r { border-radius: 2px 10px 10px 2px; box-shadow: inset 40px 0 50px -30px rgba(80,60,30,.22); }
.vs3-pageno { position: absolute; bottom: 3%; font-family: var(--mono); font-size: 1.8cqw; color: var(--muted); }
.vs3-page--l .vs3-pageno { left: 6%; }
.vs3-page--r .vs3-pageno { right: 6%; }
.vs3-it { position: absolute; margin: 0; }
.vs3-head { left: 8%; top: 7%; width: 80%; }
.vs3-head .eyebrow { margin-bottom: 2.4cqw; font-size: max(11px, 1.9cqw); }
.vs3-title { font-family: var(--serif); font-weight: 400; font-size: 8.4cqw; line-height: .95; letter-spacing: -.02em; }
.vs3-snap { background: #fff; padding: 3% 3% 15%; box-shadow: 0 20px 30px -18px rgba(40,30,20,.45), 0 1px 2px rgba(0,0,0,.08); }
.vs3-snap img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vs3-snap figcaption { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font-family: 'Caveat', cursive; font-weight: 600; font-size: 4.4cqw; }
.vs3-snap--a { left: 7%; top: 34%; width: 39%; rotate: -6deg; z-index: 2; }
.vs3-snap--b { left: 49%; top: 29%; width: 36%; rotate: 5deg; z-index: 1; }
.vs3-t1 { left: 31%; top: -4%; rotate: -4deg; }
.vs3-t2 { left: 30%; top: -4%; rotate: 6deg; background: rgba(242,163,179,.78); }
.vs3-label { left: 7%; top: 87%; z-index: 4; background: var(--ink); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 2.2cqw; padding: 1.2cqw 2.2cqw; rotate: -2deg; letter-spacing: .02em; box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); }
.vs3-sticky { left: 51%; top: 64%; width: 37%; z-index: 3; aspect-ratio: 1; background: #FBE38A; padding: 5cqw 4cqw; rotate: 4deg; box-shadow: 0 18px 24px -16px rgba(60,40,10,.5); }
.vs3-sticky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(transparent, rgba(0,0,0,.05)); }
.vs3-sticky p { font-family: 'Caveat', cursive; font-weight: 600; font-size: 4.9cqw; line-height: 1.12; color: #3A2F1A; }
.vs3-mini { left: 68%; top: 8%; width: 17%; z-index: 2; background: #fff; padding: 2.2%; rotate: 8deg; box-shadow: 0 14px 20px -12px rgba(40,30,20,.4); }
.vs3-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vs3-t3 { left: 20%; top: -10%; width: 60%; rotate: 8deg; background: rgba(157,190,91,.78); }
.vs3-stk { width: 13%; height: auto; aspect-ratio: 1; }
.vs3-stk--sun { right: 8%; top: 26%; z-index: 3; }
.vs3-stk--heart { left: 4%; top: 64%; width: 10%; z-index: 3; rotate: -14deg; }

.vs3-list {
  left: 8%; top: 7%; width: 52%; z-index: 2; padding: 5cqw 5cqw 4cqw 9cqw; rotate: -2deg;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 6.6cqw, rgba(242,120,140,.45) 6.6cqw, rgba(242,120,140,.45) calc(6.6cqw + 1px), transparent calc(6.6cqw + 1px)), repeating-linear-gradient(transparent 0 5.4cqw, rgba(79,143,232,.22) 5.4cqw calc(5.4cqw + 1px));
  background-position: 0 0, 0 3.6cqw;
  box-shadow: 0 18px 30px -18px rgba(40,30,20,.45);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 94% 100%, 86% 97%, 77% 100%, 68% 97%, 58% 100%, 49% 97%, 40% 100%, 31% 97%, 22% 100%, 12% 97%, 4% 100%, 0 97%);
}
.vs3-list__h { font-family: 'Caveat', cursive; font-weight: 600; font-size: 4.8cqw; line-height: 1.1; margin-bottom: 1.4cqw; }
.vs3-list li { position: relative; font-family: 'Caveat', cursive; font-weight: 600; font-size: 4.6cqw; line-height: 1.12; color: #253260; margin-bottom: .1em; }
.vs3-list li { --s: 0%; }
.vs3-list li span { background: linear-gradient(#D9534F, #D9534F) 0 58% / var(--s) max(2px, .45cqw) no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vs3-list li::before { content: '✕'; position: absolute; left: -4.6cqw; top: .1em; font-family: var(--sans); font-size: 2.8cqw; color: #D9534F; }
.vs3-print { right: 6%; top: 5%; width: 33%; z-index: 1; background: #fff; padding: 2.4% 2.4% 10%; rotate: 6deg; box-shadow: 0 20px 30px -18px rgba(40,30,20,.45); }
.vs3-print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vs3-print figcaption { position: absolute; left: 0; right: 0; bottom: 2%; text-align: center; font-family: 'Caveat', cursive; font-weight: 600; font-size: 4.2cqw; }
.vs3-t4 { left: 30%; top: -5%; rotate: -5deg; background: rgba(79,143,232,.55); }
.vs3-angry { left: 30%; top: 38%; width: 38%; z-index: 3; }
.vs3-arrow { width: 72%; height: auto; margin-left: 10%; overflow: visible; }
.vs3-arrow path { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vs3-angry span { position: absolute; left: -46%; top: 44%; font-family: 'Caveat', cursive; font-weight: 600; font-size: 5.4cqw; line-height: 1; white-space: nowrap; color: #C9432F; rotate: -6deg; }
.vs3-typed {
  left: 12%; top: 61%; width: 58%; z-index: 2; background: #fff; padding: 4.6cqw 4.6cqw 4cqw; rotate: -1.5deg;
  box-shadow: 0 18px 30px -18px rgba(40,30,20,.45);
}
.vs3-typed p { font-family: var(--mono); font-size: 2.85cqw; line-height: 1.45; color: var(--ink); }
.vs3-icon { right: 10%; top: 46%; width: 16%; border-radius: 23%; rotate: 10deg; z-index: 3; box-shadow: 0 14px 24px -12px rgba(0,0,0,.4), 0 0 0 1.2cqw #fff; }
.vs3-stamp {
  right: 7%; top: 70%; width: 21%; aspect-ratio: 1; z-index: 4; border-radius: 50%; rotate: -14deg;
  border: .7cqw solid var(--stamp); box-shadow: inset 0 0 0 .5cqw #FBF8F2, inset 0 0 0 .8cqw var(--stamp);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--stamp);
  mix-blend-mode: multiply; opacity: .92;
}
.vs3-stamp span { font-family: var(--sans); font-weight: 800; font-size: 4.2cqw; text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.vs3-stamp small { font-family: var(--mono); font-weight: 700; font-size: 1.9cqw; text-transform: uppercase; letter-spacing: .1em; margin-top: .8cqw; }
.vs3-signwrap { left: 14%; top: 85%; }
.vs3-signwrap .vsx-sign__name { font-size: 7.4cqw; }
.vs3-signwrap .vsx-sign__meta { font-size: max(11px, 1.9cqw); }

@media (max-width: 860px) {
  .vs3 { padding: 90px var(--pad) 90px; }
  .vs3-book { grid-template-columns: 1fr; gap: 0; }
  .vs3-page { aspect-ratio: 5 / 9; background-size: 5cqw 5cqw; }
  .vs3-page--l { border-radius: 10px 10px 2px 2px; box-shadow: inset 0 -40px 50px -30px rgba(80,60,30,.22); }
  .vs3-page--r { border-radius: 2px 2px 10px 10px; box-shadow: inset 0 40px 50px -30px rgba(80,60,30,.22); }
  .vs3-pageno { font-size: 3cqw; bottom: 2%; }
  .vs3-head { top: 5%; left: 7%; width: 88%; }
  .vs3-head .eyebrow { font-size: 11px; margin-bottom: 3cqw; }
  .vs3-title { font-size: 11.5cqw; }
  .vs3-snap figcaption { font-size: 6.2cqw; }
  .vs3-snap--a { top: 28.5%; left: 5%; width: 48%; }
  .vs3-snap--b { top: 26.5%; left: 50%; width: 44%; }
  .vs3-label { top: 68.5%; left: 5%; font-size: 3.4cqw; padding: 2cqw 3cqw; max-width: 90%; }
  .vs3-sticky { top: 74%; left: 47%; width: 47%; padding: 5cqw 4.6cqw; }
  .vs3-sticky p { font-size: 6.4cqw; }
  .vs3-mini { top: 77%; left: 9%; width: 27%; rotate: -8deg; }
  .vs3-stk--sun { top: 19%; right: 4%; width: 15%; }
  .vs3-stk--heart { top: 63%; left: 1%; width: 12%; }
  .vs3-list { top: 4%; left: 5%; width: 62%; padding: 6cqw 4cqw 5cqw 10cqw; background-image: linear-gradient(90deg, transparent 7.4cqw, rgba(242,120,140,.45) 7.4cqw, rgba(242,120,140,.45) calc(7.4cqw + 1px), transparent calc(7.4cqw + 1px)), repeating-linear-gradient(transparent 0 6.6cqw, rgba(79,143,232,.22) 6.6cqw calc(6.6cqw + 1px)); }
  .vs3-list__h { font-size: 5.8cqw; }
  .vs3-list li { font-size: 5.8cqw; }
  .vs3-list li::before { font-size: 3.4cqw; left: -5.6cqw; }
  .vs3-print { top: 5%; right: 3%; width: 32%; }
  .vs3-print figcaption { font-size: 5.4cqw; }
  .vs3-angry { top: 41%; left: 50%; width: 26%; }
  .vs3-angry span { font-size: 7cqw; left: -160%; top: 78%; }
  .vs3-typed { top: 57%; left: 5%; width: 70%; padding: 5.5cqw; }
  .vs3-typed p { font-size: 4.1cqw; }
  .vs3-icon { top: 64%; right: 5%; width: 18%; }
  .vs3-stamp { top: 42%; right: 5%; width: 23%; }
  .vs3-stamp span { font-size: 5.4cqw; }
  .vs3-stamp small { font-size: 2.6cqw; }
  .vs3-signwrap { top: 85%; left: 6%; }
  .vs3-signwrap .vsx-sign__name { font-size: 11cqw; }
  .vs3-signwrap .vsx-sign__meta { font-size: 11px; }
}

/* =========================================================
   4 · Grosses Zitat
   ========================================================= */
.vs4 { position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 600px; background: var(--dark); color: #fff; }
.vs4::before { content: ''; position: absolute; width: 60vw; height: 60vw; right: -18vw; top: -24vw; border-radius: 50%; background: radial-gradient(circle, rgba(242,163,179,.12), transparent 65%); pointer-events: none; }
.vs4-inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: 96px var(--pad) clamp(28px, 4vh, 48px); }
.vs4-top { display: flex; justify-content: space-between; align-items: flex-start; }
.vs4-top .eyebrow { margin: 0; }
.vs4-signet { position: relative; width: clamp(84px, 8vw, 118px); aspect-ratio: 1; color: rgba(255,255,255,.6); flex: none; }
.vs4-signet svg { width: 100%; height: 100%; }
.vs4-signet__p {
  position: absolute; inset: 24%; border-radius: 50%; display: grid; place-items: center;
  background: var(--rosa); color: var(--dark); font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; padding-bottom: 4%;
}
.vs4-q { position: relative; margin: auto 0; padding: 0; }
.vs4-mark { position: absolute; left: -.04em; bottom: 100%; margin-bottom: .04em; font-family: var(--serif); font-size: clamp(110px, 10vw, 190px); line-height: 1; color: var(--rosa); pointer-events: none; }
.vs4-q p {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02;
  font-size: min(clamp(38px, 6.3vw, 120px), 8.6vh); max-width: 15em;
}
.vs4-q .w { color: rgba(255,255,255,.14); transition: color .35s ease; }
.vs4-q .w.is-on { color: #fff; }
.vs4-q .k .w { background-image: linear-gradient(currentColor, currentColor); background-size: 0 .06em; background-repeat: no-repeat; background-position: 0 92%; transition: color .35s ease, background-size .5s ease .1s; font-style: italic; }
.vs4-q .k .w.is-on { background-size: 100% .06em; }
.vs4-q .k1 .w.is-on { color: var(--rosa); }
.vs4-q .k2 .w.is-on { color: var(--gelb); }
.vs4-q .k3 .w.is-on { color: var(--gruen); }
.vs4-q .k4 .w.is-on { color: #7FB0F2; }
.vs4-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.vs4-foot .vsx-sign__meta { color: rgba(255,255,255,.55); border-left-color: rgba(255,255,255,.2); }
.vs4-small { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: rgba(255,255,255,.62); max-width: 34em; }

@media (max-width: 860px) {
  .vs4-inner { padding-top: 84px; padding-bottom: 26px; }
  .vs4-signet { width: 72px; }
  .vs4-signet__p { font-size: 26px; }
  .vs4-q p { font-size: min(10.4vw, 5.6vh); line-height: 1.04; }
  .vs4-mark { font-size: 90px; }
  .vs4-foot { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .vs4-small { font-size: 14px; }
  .vs4-foot .vsx-sign__name { font-size: 40px; }
}

/* =========================================================
   5 · Vorher/Nachher
   ========================================================= */
.vs5 { position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 640px; background: var(--bg); }
.vs5::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, #ECE8E2, transparent); pointer-events: none; }
.vs5-grid {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 60px); padding: 92px var(--pad) 30px; align-items: center;
}
.vs5-col { display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 0; }
.vs5-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.vs5-tag--bad { color: #8A857E; }
.vs5-tag .vsx-logo { font-size: 17px; }
.vs5-phone { will-change: transform; }
.vs5-ip { width: min(300px, calc((100svh - 290px) / 2.065)); }
.vs5-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 300px; }
.vs5-list li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px 5px 8px; white-space: nowrap; }
.vs5-list li::before { content: ''; width: 15px; height: 15px; border-radius: 50%; flex: none; background-position: center; background-size: 100%; background-repeat: no-repeat; }
.vs5-list--bad li { color: #6A655E; }
.vs5-list--bad li::before { background-color: #E06C5F; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' stroke='white' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vs5-list--good li::before { background-color: var(--gruen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.vs5-mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vs5-title { margin-bottom: clamp(20px, 3vh, 34px); }
.vs5-beats { display: grid; width: 100%; max-width: 30em; }
.vs5-beat { grid-area: 1 / 1; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.5; color: #3E3B38; }
.vs5-beat .vsx-sign { justify-content: center; margin-top: 22px; text-align: left; }
.vs5-dots { display: flex; gap: 8px; margin-top: 28px; }
.vs5-dots i { width: 8px; height: 8px; border-radius: 99px; background: #D8D2C8; transition: width .35s var(--ease), background .35s; }
.vs5-dots i.is-on { width: 26px; background: var(--ink); }

/* Bildschirme */
.vs5-scr { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: -apple-system, 'Inter', sans-serif; }
.vs5-scr--bad { background: #fff; padding-top: 14cqw; }
.vs5-bar { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 5cqw 3cqw; font-size: 4.6cqw; }
.vs5-bar > span:first-child { font-size: 8cqw; line-height: 1; color: #4A4744; }
.vs5-bar b { font-weight: 600; }
.vs5-crown { font-size: 3cqw; font-weight: 800; letter-spacing: .06em; background: linear-gradient(90deg, #FF8A2B, #F2577B); color: #fff; border-radius: 99px; padding: 1cqw 2.4cqw; }
.vs5-col-img { position: relative; margin: 2cqw 6cqw 0; overflow: hidden; border-radius: 1.5cqw; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.vs5-col-img img, .vs5-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vs5-wm { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(-32deg, transparent 0 10cqw, rgba(255,255,255,.18) 10cqw 10.6cqw); }
.vs5-wm span { font-weight: 800; font-size: 8cqw; letter-spacing: .1em; color: rgba(255,255,255,.85); transform: rotate(-32deg); text-shadow: 0 1px 8px rgba(0,0,0,.4); white-space: nowrap; }
.vs5-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 2cqw; margin: 7cqw 6cqw 0; border-radius: 99px; padding: 4.2cqw; font-size: 4.6cqw; font-weight: 600; }
.vs5-btn--bad { background: #4F8FE8; color: #fff; }
.vs5-tap { position: absolute; z-index: 30; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; border-radius: 50%; background: rgba(0,0,0,.18); box-shadow: 0 0 0 2cqw rgba(0,0,0,.08); pointer-events: none; }
.vs5-tap--l { left: 50%; top: 79%; }
.vs5-tap--r { left: 50%; top: 73.5%; }
.vs5-sheet {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; background: #17171A; color: #fff; border-radius: 7cqw 7cqw 0 0;
  padding: 8cqw 7cqw 10cqw; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.4cqw;
  box-shadow: 0 -20px 40px rgba(0,0,0,.3);
}
.vs5-sheet__x { position: absolute; right: 5cqw; top: 4cqw; font-size: 3.6cqw; color: rgba(255,255,255,.3); }
.vs5-sheet__crown { font-size: 3.4cqw; font-weight: 800; letter-spacing: .08em; background: linear-gradient(90deg, #FF8A2B, #F2577B); border-radius: 99px; padding: 1.2cqw 3.6cqw; }
.vs5-sheet b { font-size: 6.4cqw; font-weight: 700; letter-spacing: -.01em; margin-top: 1cqw; }
.vs5-sheet ul { display: flex; flex-direction: column; gap: 1.6cqw; margin: 1.6cqw 0 2cqw; text-align: left; }
.vs5-sheet li { font-size: 3.9cqw; color: rgba(255,255,255,.75); padding-left: 6cqw; position: relative; }
.vs5-sheet li::before { content: ''; position: absolute; left: 0; top: .2em; width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 .8cqw #17171A; }
.vs5-sheet__btn { align-self: stretch; border-radius: 99px; padding: 4cqw; font-size: 4.6cqw; font-weight: 700; background: linear-gradient(90deg, #FF8A2B, #F2577B); }
.vs5-sheet small { font-size: 3cqw; color: rgba(255,255,255,.35); }

.vs5-scr--good { background: #F5F5F3; padding-top: 14cqw; }
.vs5-mbar { display: flex; justify-content: space-between; align-items: center; padding: 1cqw 4cqw 3cqw; }
.vs5-mbar b { font-size: 4.8cqw; font-weight: 600; }
.vs5-circ { width: 10cqw; height: 10cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 6.4cqw; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.vs5-circ svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: #1D1D1F; stroke-width: 1.8; stroke-linejoin: round; }
.vs5-card { margin: 1cqw 6cqw 0; background: #EFE7DA; padding: 3cqw; border-radius: 1.5cqw; }
.vs5-card img { box-shadow: 0 4px 10px -4px rgba(0,0,0,.25); }
.vs5-btn--good { --sv: 0; margin-top: 5cqw; background: #1D1D1F; color: #fff; overflow: hidden; }
.vs5-btn--good::before { content: ''; position: absolute; inset: 0; background: var(--gruen); opacity: var(--sv); }
.vs5-btn--good svg { position: relative; width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: calc(1 - var(--sv)); }
.vs5-btn__a, .vs5-btn__b { position: relative; }
.vs5-btn__a { opacity: calc(1 - var(--sv)); }
.vs5-btn__b { position: absolute; left: 0; right: 0; text-align: center; opacity: var(--sv); }
.vs5-q { text-align: center; font-size: 3.6cqw; color: #8A857E; margin-top: 3.4cqw; }
.vs5-acts { display: flex; justify-content: space-around; padding: 4cqw 8cqw 0; }
.vs5-acts span { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; font-size: 3.3cqw; }
.vs5-acts b { font-weight: 500; }
.vs5-acts i { width: 11cqw; height: 11cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.vs5-acts svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: #1D1D1F; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vs5-toast { position: absolute; z-index: 30; left: 50%; top: 15cqw; translate: -50% 0; white-space: nowrap; background: #1D1D1F; color: #fff; font-size: 3.6cqw; font-weight: 600; padding: 2.4cqw 4.4cqw; border-radius: 99px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }

@media (max-width: 1100px) and (min-width: 861px) {
  .vs5-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .vs5-ip { width: min(230px, calc((100svh - 300px) / 2.065)); }
}
@media (max-width: 860px) {
  .vs5 { min-height: 640px; }
  .vs5::before { display: none; }
  .vs5-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 14px; padding: 80px var(--pad) 18px; align-items: start; }
  .vs5-mid { grid-column: 1 / -1; grid-row: 2; }
  .vs5-col { grid-row: 1; gap: 10px; }
  .vs5-mid .eyebrow { display: none; }
  .vs5-title { font-size: 26px; margin-bottom: 10px; }
  .vs5-title br { display: none; }
  .vs5-beat { font-size: 15.5px; line-height: 1.45; }
  .vs5-beat .vsx-sign { margin-top: 10px; }
  .vs5-beat .vsx-sign__name { font-size: 38px; }
  .vs5-dots { margin-top: 14px; }
  .vs5-tag { font-size: 11.5px; padding: 5px 10px; gap: 5px; }
  .vs5-tag .vsx-logo { font-size: 13px; }
  .vs5-ip { width: min(168px, 42vw, calc((100svh - 450px) / 2.065)); }
  .vs5-list { gap: 4px; }
  .vs5-list li { font-size: 11px; padding: 3px 8px 3px 5px; gap: 4px; }
  .vs5-list li::before { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  .vs5-tag span[data-i18n] { display: none; }
}

/* Handy: weniger iPhones hintereinander, die zwei Screens als flache Karten */
@media (max-width: 860px) {
  .vs5 .iphone { background: none; box-shadow: none; padding: 0; border-radius: 0; }
  .vs5 .iphone__btn, .vs5 .ip-island, .vs5 .ip-home, .vs5 .ip-glare { display: none; }
  .vs5 .iphone__bezel { background: none; padding: 0; box-shadow: none; border-radius: 0; }
  .vs5 .iphone__screen { border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -26px rgba(40,30,20,.4); }
}

/* ---------- Handy-Optionen (?storym=1|2|3, Standard 1), nur ≤ 860 px ----------
   --sw (0 = Vorher, 1 = Nachher) und .is-after setzt die Handy-Schleife in js/v-story.js */
@media (max-width: 860px) {
  /* gemeinsam: Text zuerst, darunter die Bühne; Bildschirme ohne Rahmen, unten gekürzt */
  html[data-storym] .vs5 { --cw: max(150px, min(212px, 56vw, calc((100svh - 480px) / 1.72))); height: auto; min-height: 100vh; min-height: 100svh; }
  html[data-storym] .vs5-grid { --sw: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 18px; min-height: 100vh; min-height: 100svh; padding: 40px var(--pad) 88px; align-content: center; align-items: start; }
  html[data-storym] .vs5-mid { grid-column: 1; grid-row: 1; }
  html[data-storym] .vs5-mid .eyebrow { display: inline-flex; margin-bottom: 10px; font-size: 12px; }
  html[data-storym] .vs5-title { font-size: 27px; margin-bottom: 12px; }
  html[data-storym] .vs5-beat { font-size: 15px; line-height: 1.48; align-self: center; }
  html[data-storym] .vs5-beat .vsx-sign { margin-top: 8px; gap: 14px; }
  html[data-storym] .vs5-beat .vsx-sign__name { font-size: 34px; }
  html[data-storym] .vs5-beat .vsx-sign__meta { font-size: 12px; padding-left: 14px; }
  html[data-storym] .vs5-dots { margin-top: 12px; }
  html[data-storym] .vs5-col { grid-column: 1; grid-row: 2; gap: 10px; }
  html[data-storym] .vs5-tag { height: 30px; font-size: 12px; padding: 0 12px; gap: 6px; transition: background .4s, color .4s, border-color .4s; }
  html[data-storym] .vs5-tag .vsx-logo { font-size: 14px; }
  html[data-storym] .vs5-ip { width: var(--cw); }
  html[data-storym] .vs5 .iphone { aspect-ratio: 1 / 1.72; }
  html[data-storym] .vs5 .iphone__screen { border-radius: 22px; }
  html[data-storym] .vs5-q, html[data-storym] .vs5-acts { display: none; }
  html[data-storym] .vs5-tap--l { top: 150cqw; }
  html[data-storym] .vs5-tap--r { top: 157cqw; }
  html[data-storym] .vs5-list { max-width: none; width: 100%; }
  html[data-storym] .vs5-list li { font-size: 12px; padding: 4px 10px 4px 6px; gap: 5px; }
  html[data-storym] .vs5-list li::before { width: 13px; height: 13px; }

  /* Option 1 · Ein Screen: Vorher wird mit einer Wischkante zu Nachher, oben ein Umschalter */
  html[data-storym="1"] .vs5-col { justify-self: stretch; position: relative; }
  html[data-storym="1"] .vs5-tag--bad { align-self: flex-end; margin-right: calc(50% + 3px); }
  html[data-storym="1"] .vs5-tag--good { align-self: flex-start; margin-left: calc(50% + 3px); }
  html[data-storym="1"] .vs5-grid:not(.is-after) .vs5-tag--bad,
  html[data-storym="1"] .vs5-grid.is-after .vs5-tag--good { background: var(--ink); border-color: var(--ink); color: #fff; }
  html[data-storym="1"] .vs5-col--r .vs5-phone { clip-path: inset(-40px -40px -40px calc((1 - var(--sw)) * (100% + 40px) - 40px)); }
  html[data-storym="1"] .vs5-col--r::after {
    content: ''; position: absolute; z-index: 5; top: 40px; height: calc(var(--cw) * 1.72); width: 2px; margin-left: -1px;
    left: calc(50% - var(--cw) / 2 + (1 - var(--sw)) * var(--cw)); background: var(--ink); border-radius: 2px;
    opacity: calc(var(--sw) * (1 - var(--sw)) * 9); pointer-events: none;
  }
  html[data-storym="1"] .vs5-col--r::before {
    content: '‹ ›'; position: absolute; z-index: 6; top: calc(40px + var(--cw) * .86 - 17px); width: 34px; height: 34px; margin-left: -17px;
    left: calc(50% - var(--cw) / 2 + (1 - var(--sw)) * var(--cw)); border-radius: 50%; background: var(--ink); color: #fff;
    display: grid; place-items: center; font-size: 15px; font-weight: 600; letter-spacing: .1em; line-height: 1;
    opacity: calc(var(--sw) * (1 - var(--sw)) * 9); pointer-events: none; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5);
  }
  html[data-storym="1"] .vs5-list { justify-content: center; }

  /* Option 2 · Wischkarten: zwei Karten nebeneinander, die nächste schaut rechts herein, wischen oder automatisch */
  html[data-storym="2"] .vs5-grid { touch-action: pan-y; }
  html[data-storym="2"] .vs5-col { justify-self: center; width: var(--cw); will-change: transform; }
  html[data-storym="2"] .vs5-col--l { transform: translateX(calc(var(--sw) * (-100% - 22px))) scale(calc(1 - .08 * var(--sw))); opacity: calc(1 - .5 * var(--sw)); }
  html[data-storym="2"] .vs5-col--r { transform: translateX(calc((1 - var(--sw)) * (100% + 22px))) scale(calc(.92 + .08 * var(--sw))); opacity: calc(.5 + .5 * var(--sw)); }
  html[data-storym="2"] .vs5-list { width: calc(100% + 16px); min-height: 52px; gap: 4px; align-content: flex-start; }
  html[data-storym="2"] .vs5-list li { font-size: 11.5px; padding: 3px 8px 3px 5px; }

  /* Option 3 · Fächer: beide Screens überlappend, der aktive kommt nach vorne */
  html[data-storym="3"] .vs5 { --cw: max(140px, min(196px, 50vw, calc((100svh - 480px) / 1.72))); }
  html[data-storym="3"] .vs5-col { justify-self: center; width: var(--cw); will-change: transform; }
  html[data-storym="3"] .vs5-col--l { z-index: 2; transform: translateX(-27%) rotate(calc(-3deg - 2deg * var(--sw))) scale(calc(1 - .12 * var(--sw))); }
  html[data-storym="3"] .vs5-col--r { z-index: 1; transform: translateX(27%) rotate(calc(5deg - 2deg * var(--sw))) scale(calc(.88 + .12 * var(--sw))); }
  html[data-storym="3"] .vs5-grid.is-after .vs5-col--r { z-index: 3; }
  html[data-storym="3"] .vs5-col--l .vs5-phone { filter: saturate(calc(1 - .6 * var(--sw))); }
  html[data-storym="3"] .vs5-col--r .vs5-phone { filter: saturate(calc(.4 + .6 * var(--sw))); }
  html[data-storym="3"] .vs5-tag--bad { align-self: flex-start; }
  html[data-storym="3"] .vs5-tag--good { align-self: flex-end; }
  html[data-storym="3"] .vs5-grid:not(.is-after) .vs5-tag--bad,
  html[data-storym="3"] .vs5-grid.is-after .vs5-tag--good { background: var(--ink); border-color: var(--ink); color: #fff; }
  html[data-storym="3"] .vs5-list { width: calc(100% + 40px); justify-content: center; }
}