/* Varianten: intro (Startanimation) */
.vi { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.vi .vi-mark { display: flex; align-items: baseline; gap: .28em; color: var(--ink); white-space: nowrap; }
.vi .vi-word { font-family: var(--sans); font-weight: 600; letter-spacing: -0.046em; line-height: 1; display: inline-block; }
.vi img { display: block; }

/* ---------- 1 · Raster ---------- */
.vi1-half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--bg); }
.vi1-half--t { top: 0; }
.vi1-half--b { bottom: 0; }
.vi1-grid {
  --g: 5px;
  position: absolute; left: 50%; top: 50%;
  width: min(400px, 64vw, 48vh); aspect-ratio: 4 / 5;
  translate: -50% -50%;
}
.vi1-t { position: absolute; }
.vi1-in {
  position: absolute; inset: calc(var(--g) / 2); overflow: hidden; border-radius: 3px;
}
.vi1-in img { width: 100%; height: 100%; object-fit: cover; }
.vi1-h {
  position: absolute; z-index: 2; width: 6px; height: 34px; border-radius: 6px;
  background: #fff; box-shadow: 0 0 0 1px rgba(29, 29, 31, .12), 0 4px 14px rgba(29, 29, 31, .28);
}
.vi1-h--h { width: 34px; height: 6px; }
.vi1-mark {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-size: clamp(56px, 10vw, 128px);
}

/* ---------- 2 · Photo Dump ---------- */
.vi2-bg { position: absolute; inset: 0; background: var(--bg); }
.vi2-stack { position: absolute; inset: 0; }
.vi2-card {
  --sh: .16;
  position: absolute; left: 50%; top: 47%; margin: 0;
  --w: clamp(176px, 19vw, 250px);
  width: var(--w); box-sizing: border-box;
  padding: calc(var(--w) * .06) calc(var(--w) * .06) calc(var(--w) * .22);
  background: #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .1), 0 18px 40px rgba(29, 29, 31, var(--sh));
  will-change: transform;
}
.vi2-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.vi2-label {
  position: absolute; left: 50%; top: 47%; z-index: 2;
  padding: .32em .6em .38em; background: var(--bg);
  border-radius: .22em; font-size: clamp(34px, 4.4vw, 62px);
  box-shadow: 0 1px 2px rgba(29, 29, 31, .08), 0 18px 44px rgba(29, 29, 31, .2);
}
.vi2-count {
  position: absolute; left: 0; right: 0; bottom: max(28px, 7vh);
  display: flex; justify-content: center; align-items: baseline; gap: .35em;
  font-family: var(--mono); font-size: 16px; letter-spacing: .06em; color: var(--ink);
}
.vi2-of { color: var(--muted); }

/* ---------- 3 · Zuschneiden ---------- */
.vi3 { background: var(--bg); }
.vi3-in { position: absolute; inset: 0; }
.vi3-photo { position: absolute; max-width: none; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.vi3-frame {
  --dim: .45; --out: 0;
  position: absolute; outline: 1px solid rgba(255, 255, 255, calc(.85 - .85 * var(--out)));
  box-shadow: 0 0 0 200vmax rgba(250, 248, 245, var(--out)), 0 0 0 200vmax rgba(18, 18, 17, var(--dim));
}
.vi3-g { position: absolute; background: rgba(255, 255, 255, .55); }
.vi3-g--v1, .vi3-g--v2 { top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; }
.vi3-g--v1 { left: 33.333%; }
.vi3-g--v2 { left: 66.666%; }
.vi3-g--h1, .vi3-g--h2 { left: 0; right: 0; height: 1px; transform-origin: 0 50%; }
.vi3-g--h1 { top: 33.333%; }
.vi3-g--h2 { top: 66.666%; }
.vi3-c { position: absolute; width: 22px; height: 22px; border: 0 solid #fff; }
.vi3-c--tl { left: -3px; top: -3px; border-width: 3px 0 0 3px; transform-origin: 0 0; }
.vi3-c--tr { right: -3px; top: -3px; border-width: 3px 3px 0 0; transform-origin: 100% 0; }
.vi3-c--bl { left: -3px; bottom: -3px; border-width: 0 0 3px 3px; transform-origin: 0 100%; }
.vi3-c--br { right: -3px; bottom: -3px; border-width: 0 3px 3px 0; transform-origin: 100% 100%; }
.vi3-ratios {
  position: absolute; left: 0; right: 0; bottom: max(26px, 5vh); margin: 0 auto; width: max-content;
  display: flex; gap: 4px; padding: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1 var(--sans); color: rgba(255, 255, 255, .8);
}
.vi3-ratios span { position: relative; z-index: 1; padding: 9px 14px; border-radius: 99px; transition: color .2s; }
.vi3-ratios span.is-on { color: var(--ink); }
.vi3-ratios .vi3-pill { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; padding: 0; background: #fff; }
.vi3-mark {
  position: absolute; left: 0; right: 0; top: 80%; margin: 0 auto; width: max-content;
  font-size: clamp(34px, 3.6vw, 52px);
}

/* ---------- 4 · App-Icon ---------- */
.vi4-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #141414, #070707); }
.vi4-icon {
  position: absolute; left: 50%; top: 50%;
  --s: min(62vmin, 500px);
  width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
}
.vi4-zoom { position: absolute; inset: 0; }
.vi4-zoom > * { position: absolute; display: block; }
.vi4-pink {
  left: 25%; top: 18.36%; width: 20.31%; height: 39.84%;
  border-radius: 13% / 6.8%;
  background:
    radial-gradient(70% 45% at 92% 100%, rgba(243, 171, 140, .95), rgba(243, 171, 140, 0) 70%),
    linear-gradient(180deg, #FDB2C4, #FDACBF);
}
.vi4-yel {
  left: 52.93%; top: 18.16%; width: 20.9%; height: 17.58%;
  border-radius: 13% / 15.5%;
  background: linear-gradient(180deg, #FDCF66, #FDC955);
}
.vi4-berg {
  left: 52.54%; top: 38.87%; width: 21.29%; height: 19.73%;
  border-radius: 13% / 14%; overflow: hidden; clip-path: inset(0% 0% 0% 0%);
}
.vi4-berg img { width: 100%; height: 100%; object-fit: cover; }
.vi4-word {
  left: 0; right: 0; top: 57.7%; display: flex; justify-content: center; overflow: hidden;
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.08em; line-height: 1;
  font-size: calc(var(--s) * .286); color: #fff; padding: 0 .08em .04em 0;
}
.vi4-word > span { display: block; }
.vi4-rosa { position: absolute; inset: 0; background: #FDAFC2; }