/* Narrated demo player: a 16:9 stage (4:5 on phones) with scenes drawn in container units. */
.vp { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--bg-2); overflow: hidden; box-shadow: 0 40px 120px -50px var(--glow); }
.vp__stage { position: relative; aspect-ratio: 16 / 9; container-type: size; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 110%, color-mix(in oklab, var(--a1) 32%, transparent), transparent 70%), radial-gradient(ellipse 40% 50% at 85% 0%, color-mix(in oklab, var(--a2) 18%, transparent), transparent 70%), var(--bg-2); }
@media (max-width: 640px) { .vp__stage { aspect-ratio: 4 / 5; } }

/* scenes */
.vs { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 0s linear 450ms; }
.vs.is-active { opacity: 1; visibility: visible; transition: opacity 450ms ease, visibility 0s; }
.vs:not(.is-active) * { animation: none !important; }
.vp:not(.is-playing) .vs * { animation-play-state: paused !important; }
.vp:not(.is-started) .vs * { animation: none !important; }
.vs-center { height: 100%; display: grid; place-items: center; padding: 6cqh 5cqw; }
.vs-duo { height: 100%; display: flex; align-items: center; justify-content: center; gap: 6cqw; padding: 5cqh 6cqw; }
.vs-phone { height: 86cqh; aspect-ratio: 9 / 19; flex: none; }
.vs-phone .phone { height: 100%; border-radius: 6cqh; padding: 1.2cqh; }
.vs-phone .phone__screen { border-radius: 5cqh; }
.vs-phone .phone__screen::before { height: 2.6cqh; top: 1.2cqh; }
.vs-laptop { width: min(66cqw, 120cqh); }
.vs-pad { padding: 17cqw 6cqw 6cqw !important; gap: 4.4cqw !important; }
.vs-phone .ms { font-size: 5.6cqw; }
.vs-phone .ms__row { padding: 4.4cqw 4.8cqw; border-radius: 4cqw; }
.vs-phone .ms__slots { gap: 2.6cqw; grid-template-columns: repeat(2, 1fr); }
.vs-phone .ms__slots span { padding: 3.6cqw 0; border-radius: 3.4cqw; }
.vs-phone .vs-thumbs { gap: 3cqw; }
.vs-ph { font-size: 8.6cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.vs-ps { color: #6b7280; margin-top: -1.4cqw; }
.vs-side { display: grid; gap: 1.4cqh; max-width: 34cqw; padding: 3.4cqh 3cqw; border-radius: 3cqh; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); backdrop-filter: blur(14px); }
.vs-side strong { font-size: 7.4cqh; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.vs-side span { font-size: 2.8cqh; color: var(--text-2); line-height: 1.35; }
.vs-tap { position: absolute; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12); opacity: 0; pointer-events: none; z-index: 4; }
.vs-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.vs-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2.6cqw; }
.vs-applepay { background: #000; color: #fff; text-align: center; font-weight: 600; padding: 3.4cqw; border-radius: 3cqw; font-size: 4.6cqw; }
.vs-done { display: flex; align-items: center; justify-content: center; gap: 2.4cqw; color: #15803d; font-weight: 700; }
.vs-done span { width: 7cqw; height: 7cqw; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 4cqw; }
.vs-plus { display: inline-grid; place-items: center; width: 6.4cqw; height: 6.4cqw; margin-left: 1.6cqw; border-radius: 50%; background: #10121a; color: #fff; font-style: normal; vertical-align: middle; }
.vs-cart { background: var(--a1); color: #07080c; text-align: center; font-weight: 600; padding: 3cqw; border-radius: 3cqw; }
.vs-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #f3f4f7; border-radius: 999px; padding: 1.2cqw; font-weight: 600; text-align: center; }
.vs-toggle::before { content: ""; position: absolute; top: 1.2cqw; bottom: 1.2cqw; left: 1.2cqw; width: calc(50% - 1.2cqw); border-radius: 999px; background: #10121a; }
.vs-toggle span { position: relative; padding: 2cqw 0; }
.vs-toggle span:first-child { color: #fff; }
.vs-lock { background: radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--a1) 55%, #111), #0b0c12 70%); color: #fff; padding-top: 16cqw; display: flex; flex-direction: column; }
.vs-lock__time { text-align: center; font-size: 19cqw; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.vs-lock__date { text-align: center; font-size: 4cqw; opacity: 0.8; margin-bottom: 5cqw; }
.vs-lock .toast { position: relative; max-width: none; margin: 0 3.4cqw 2.4cqw; padding: 3cqw; border-radius: 5cqw; font-size: 3.5cqw; gap: 3cqw; color: #fff; }
.vs-lock .toast i { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; font-size: 3.6cqw; }
.vs-price { display: grid; gap: 2cqh; justify-items: center; text-align: center; padding: 6cqh 6cqw; border-radius: 4cqh; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); backdrop-filter: blur(14px); }
.vs-price span { font-size: 3.4cqh; color: var(--text-2); }
.vs-price strong { font-size: 16cqh; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.vs-price em { font-style: normal; font-size: 2.8cqh; color: var(--text-3); }
.vs-methods { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2.4cqh; max-width: 84cqw; margin-inline: auto; }
.vs-methods span { font-size: 6cqh; font-weight: 650; letter-spacing: -0.03em; padding: 2cqh 4cqh; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-2); }
.vs-ticket { width: min(36cqw, 60cqh); background: #fdfdfb; color: #111; padding: 4cqh 3.4cqh; border-radius: 1cqh; font-size: 2.8cqh; display: grid; gap: 1.2cqh; font-variant-numeric: tabular-nums; box-shadow: 0 30px 60px -30px #000; }
.vs-ticket p { display: flex; justify-content: space-between; gap: 2cqh; }
.vs-ticket__h { justify-content: center !important; font-weight: 700; font-size: 3.6cqh; padding-bottom: 1.2cqh; border-bottom: 2px dashed #c9ccd4; }
.vs-ticket__t { font-weight: 700; font-size: 3.6cqh; padding-top: 1.2cqh; border-top: 2px dashed #c9ccd4; }
.vs-ticket__f { justify-content: center !important; color: #555; font-size: 2.4cqh; }
.vs-fan { display: flex; gap: 3cqw; justify-content: center; align-items: center; }
.vs-fan .vs-phone { height: 78cqh; }
.vs-fan .vs-phone:nth-child(2) { height: 86cqh; }
.vs-fan .vs-phone .ms { font-size: 4.4cqw; }
.vs-clock { text-align: center; align-content: center; gap: 2cqh; }
.vs-clock__t { font-size: 24cqh; font-weight: 650; letter-spacing: -0.05em; line-height: 0.9; }
.vs-clock__s { font-size: 3.4cqh; color: var(--text-2); }
.vs-clock__toasts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqh; margin-top: 3cqh; }
.vs-clock .toast { position: relative; font-size: 2.5cqh; max-width: 40cqw; }
.vs-end { text-align: center; align-content: center; gap: 2.4cqh; }
.vs-end__logo { display: inline-flex; align-items: center; gap: 2.4cqh; font-size: 11cqh; font-weight: 700; letter-spacing: -0.05em; }
.vs-end__logo .logo-mark { width: 13cqh; height: 13cqh; border-radius: 3.6cqh; }
.vs-end__logo .logo-word { font-size: 1em; }
/* Handwerk: measured values typed in; Gastronomie: fee comparison bars */
.vs-type { background: #fff; border: 2px solid var(--a1); border-radius: 2.4cqw; padding: 0.6cqw 2.4cqw; }
.vs-sav { width: min(82cqw, 150cqh); display: grid; gap: 3cqh; }
.vs-sav__row { display: grid; grid-template-columns: 30cqw minmax(0, 1fr) 16cqw; align-items: center; gap: 2.4cqw; font-size: 3.4cqh; }
.vs-sav__row b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs-bar { display: block; height: 5cqh; border-radius: 1.4cqh; background: linear-gradient(90deg, var(--a1), var(--a2)); transform-origin: left; transform: scaleX(var(--w)); }
.vs-sav__row:not(:last-of-type) .vs-bar { background: linear-gradient(90deg, #7f1d1d, #ef4444); }
.vs-sav__note { color: var(--text-2); font-size: 2.8cqh; }
.vs-sav__big { font-size: 8cqh; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.vs.is-active .vs-bar { animation: vs-grow 1400ms var(--ease) var(--at, 0s) both; }
@keyframes vs-grow { from { transform: scaleX(0); } }
@container (orientation: portrait) { .vs-sav__row { grid-template-columns: 1fr auto; font-size: 2.6cqh; } .vs-sav__row .vs-bar { grid-column: 1 / -1; grid-row: 2; } .vs-sav__big { font-size: 5.6cqh; } }
.vs-end__s { font-size: 4.4cqh; color: var(--text-2); }

/* portrait stage (phones): stack the side card under the device */
@container (orientation: portrait) {
  .vs-duo { flex-direction: column; gap: 3cqh; padding: 4cqh 5cqw 14cqh; }
  .vs-phone { height: 62cqh; }
  .vs-side { max-width: 84cqw; padding: 2cqh 4cqw; text-align: center; }
  .vs-side strong { font-size: 5.4cqh; }
  .vs-side span { font-size: 2.2cqh; }
  .vs-laptop { width: 92cqw; }
  .vs-fan .vs-phone { height: 46cqh; }
  .vs-fan .vs-phone:nth-child(2) { height: 52cqh; }
  .vs-clock__t { font-size: 15cqh; }
  .vs-clock .toast { max-width: 86cqw; font-size: 2.1cqh; }
  .vs-methods span { font-size: 4.2cqh; }
  .vs-ticket { width: 70cqw; font-size: 2.2cqh; }
  .vs-end__logo { font-size: 6.4cqh; }
  .vs-end__logo i { width: 7cqh; height: 7cqh; font-size: 4cqh; }
  .vs-price strong { font-size: 9cqh; }
}

/* scene motion (starts when the scene becomes active and the player is playing) */
.vs.is-active .a-in { animation: vs-in 700ms var(--ease) var(--at, 0s) both; }
.vs.is-active .a-pop { animation: vs-pop 600ms var(--ease) var(--at, 0s) both; }
.vs.is-active .a-zoom { animation: vs-zoom 1400ms var(--ease) var(--at, 0s) both; }
.vs.is-active .a-rise { animation: vs-rise 1100ms var(--ease) var(--at, 0s) both; }
.vs.is-active .a-drop { animation: vs-drop 700ms var(--ease) var(--at, 0s) both; }
.vs.is-active .a-print { animation: vs-print 2200ms var(--ease-io) var(--at, 0s) both; }
.vs.is-active .ms__row.a-sel { animation: vs-in 700ms var(--ease) var(--at, 0s) both, vs-sel 350ms ease var(--sel) forwards; }
.vs.is-active .ms__slots .a-on { animation: vs-in 700ms var(--ease) var(--at, 0s) both, vs-on 350ms ease var(--sel) forwards; }
.vs.is-active .a-hit { animation: vs-hit 500ms var(--ease) var(--sel) forwards; }
.vs.is-active .vs-toggle::before { animation: vs-slide 500ms var(--ease) var(--sel) forwards; }
.vs.is-active .vs-toggle span:first-child { animation: vs-ink 300ms ease var(--sel) forwards; }
.vs.is-active .vs-toggle span:last-child { animation: vs-paper 300ms ease var(--sel) forwards; }
.vs.is-active .vs-tap { animation: vs-tap 900ms var(--ease) var(--at, 0s) both; }
@keyframes vs-in { from { opacity: 0; transform: translateY(3cqh); } }
@keyframes vs-pop { from { opacity: 0; transform: scale(0.85); } }
@keyframes vs-zoom { from { opacity: 0; transform: scale(0.9) translateY(3cqh); filter: blur(8px); } }
@keyframes vs-rise { from { opacity: 0; transform: translateY(14cqh); } }
@keyframes vs-drop { from { opacity: 0; transform: translateY(-4cqh) scale(0.96); } }
@keyframes vs-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-6cqh); } }
@keyframes vs-sel { to { background: #10121a; color: #fff; } }
@keyframes vs-on { to { background: var(--a1); color: #07080c; } }
@keyframes vs-hit { 40% { transform: scale(1.35); } to { background: var(--a1); transform: scale(1); } }
@keyframes vs-slide { to { transform: translateX(100%); } }
@keyframes vs-ink { to { color: #10121a; } }
@keyframes vs-paper { to { color: #fff; } }
@keyframes vs-tap { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* captions, poster, controls */
.vp__cap { position: absolute; left: 50%; bottom: 4cqh; z-index: 6; transform: translateX(-50%); max-width: 86%; width: max-content; text-align: center; padding: 1.2cqh 2.2cqh; border-radius: 1.4cqh; background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(8px); font-size: max(14px, 2.7cqh); line-height: 1.35; opacity: 0; transition: opacity 300ms ease; }
.vp.is-started:not(.no-cc) .vp__cap { opacity: 1; }
.vp__poster { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 2cqh; border: 0; cursor: pointer; color: var(--text); background: radial-gradient(ellipse at 50% 60%, rgba(6, 7, 11, 0.35), rgba(6, 7, 11, 0.85)); backdrop-filter: blur(3px); transition: opacity 400ms ease, visibility 0s linear 400ms; }
.vp.is-started .vp__poster { opacity: 0; visibility: hidden; }
.vp__play { width: max(64px, 14cqh); height: max(64px, 14cqh); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #07080c; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12), 0 0 80px -10px var(--glow); transition: transform 240ms var(--ease); }
.vp__play svg { width: 42%; height: 42%; margin-left: 6%; }
.vp__ptitle { font-size: max(20px, 4.6cqh); font-weight: 650; letter-spacing: -0.03em; }
.vp__pmeta { color: var(--text-2); font-size: max(14px, 2.6cqh); }
@media (hover: hover) { .vp__poster:hover .vp__play { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) { .vp__play { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.05), 0 0 80px -10px var(--glow); } }
.vp__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.vp__btn { flex: none; height: 38px; min-width: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; font-weight: 700; font-size: 0.78rem; padding: 0 10px; }
.vp__btn svg { width: 16px; height: 16px; }
.vp__toggle .i-pause { display: none; }
.vp.is-playing .vp__toggle .i-pause { display: block; }
.vp.is-playing .vp__toggle .i-play { display: none; }
.vp__cc:not(.is-on) { color: var(--text-3); }
.vp__segs { flex: 1; display: flex; gap: 5px; min-width: 0; }
.vp__seg { position: relative; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; }
.vp__seg::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: var(--surface-3); }
.vp__seg i { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 4px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--a1), var(--a2)); }
.vp__time { color: var(--text-2); font-size: 0.85rem; flex: none; }
@media (max-width: 480px) { .vp__time { display: none; } }