/*
 * Folienbeutel, Aufreissen und Aufdeck-Show 2026, portiert aus der App
 * (style.css "Pack-Show 2026", Stand 28.09.2026). Ohne Vollbild-Buehne:
 * auf der Website liegt die Szene eingebettet im Widget. Ohne Feuer.
 */
:root { --pill-ink: #16220A; --line: #2B303A; }
.pk-wrap { --pkw: min(244px, 64vw); display: flex; flex-direction: column; align-items: center; }
/* overflow-x: clip, nicht hidden: Strahlenkranz und Dimmer duerfen die Seite
   nicht verbreitern (sonst zoomt das Handy heraus), die aufsteigenden Karten
   duerfen aber oben ueberstehen */
.pk-scene { position: relative; width: 100%; height: calc(var(--pkw) * 1.56 + 70px); overflow-x: clip; }
   /* keine perspective hier: sie machte die Szene zum Rahmen fuer den fixen Dimmer */
.pk-spot { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; max-width: 150vw; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--spot, rgba(245,179,1,.16)) 0%, transparent 60%); pointer-events: none; }
.pk-floor { position: absolute; left: 50%; bottom: 8px; width: 200px; height: 26px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%); filter: blur(4px); transition: opacity .4s; }
/* ---------- Beutel ---------- */
.pk-pack { position: absolute; left: 50%; top: 22px; width: var(--pkw); height: calc(var(--pkw) * 1.56); margin-left: calc(var(--pkw) / -2);
  transform-style: preserve-3d; perspective: 1100px; cursor: grab; touch-action: none; z-index: 3; animation: pkbob 4s ease-in-out infinite; -webkit-user-select: none; user-select: none; }
.pk-pack.pk-tearing { cursor: grabbing; animation-play-state: paused; }
@keyframes pkbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.pk-tilt { position: absolute; inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear; transform-style: preserve-3d; }
.pk-half { position: absolute; inset: 0; isolation: isolate; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); transition: transform .7s cubic-bezier(.3,.7,.2,1), opacity .5s; }
.pk-skin { position: absolute; inset: 0; overflow: hidden; clip-path: var(--clip); }
/* Folienfarben: Gold hell wie Weissgold und glaenzend, klar gegen das
   kupfrige Bronze (Leonhard, 28.09.2026); Silber kuehl. --gl/--sw: Glanz */
.pk-pack[data-t="gold"]   { --m0:#8c7322; --m1:#d2b04c; --m2:#f4dd8a; --m3:#fffcef; --ink:#3a2c05; --holo: .16; --gl: .95; --sw: .72; }
.pk-pack[data-t="silver"] { --m0:#2d343d; --m1:#76818f; --m2:#c3cbd5; --m3:#ffffff; --ink:#1d232b; --holo: .3; }
.pk-pack[data-t="bronze"] { --m0:#34190a; --m1:#80461c; --m2:#c98a4c; --m3:#f7d9b6; --ink:#2a1405; }
.pk-foil { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 10%, transparent 90%, rgba(0,0,0,.35) 100%),
    linear-gradient(90deg, var(--m0) 0%, var(--m1) 5%, var(--m2) 15%, var(--m3) 27%, var(--m2) 38%, var(--m1) 52%, var(--m2) 66%, var(--m3) 78%, var(--m2) 88%, var(--m1) 95%, var(--m0) 100%); }
.pk-holo { position: absolute; inset: 0; opacity: var(--holo, .16); mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(115deg, #ff2e88 0%, #ffd23a 7%, #3dffb5 14%, #37b6ff 21%, #b04dff 28%, #ff2e88 35%);
  background-size: 300% 300%; background-position: var(--hx, 50%) var(--hy, 50%); }
.pk-pillow { position: absolute; inset: 0; mix-blend-mode: overlay; background:
    radial-gradient(70% 34% at 50% 50%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(120% 60% at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%); }
.pk-crimp { position: absolute; left: 0; right: 0; height: 8.5%; mix-blend-mode: overlay; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 1.2px, rgba(0,0,0,.28) 1.2px 2.6px, transparent 2.6px 4px),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.12) 50%, rgba(0,0,0,.25)); }
.pk-crimp.t { top: 0; }
 .pk-crimp.b { bottom: 0; }
.pk-crimp::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.35); }
.pk-crimp.t::after { bottom: 0; }
 .pk-crimp.b::after { top: 0; }
.pk-wrinkle { position: absolute; width: 38%; height: 14%; mix-blend-mode: overlay; opacity: .8; background: linear-gradient(var(--a, 100deg), transparent 46%, rgba(255,255,255,.55) 49%, rgba(0,0,0,.25) 52%, transparent 56%); }
.pk-print { position: absolute; left: 9%; right: 9%; top: 19%; bottom: 13%; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #2a2f3a 0%, #0f1115 70%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12); }
.pk-stripe { position: absolute; left: -12%; right: -12%; top: 75.5%; height: 6.5%; transform: rotate(-5deg); display: flex; align-items: center; justify-content: space-evenly; overflow: hidden;
  background: linear-gradient(90deg, #9bd62e, #B7F34D 40%, #d9ff8f 55%, #B7F34D 70%); box-shadow: 0 0 0 2px rgba(15,17,21,.9), 0 0 0 3px rgba(183,243,77,.35); }
.pk-stripe span { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: calc(var(--pkw) * .05); letter-spacing: .06em; color: var(--pill-ink); white-space: nowrap; }
.pk-stripe span.pk-ghost { opacity: .35; }
.pk-art { position: absolute; left: 9%; right: 9%; top: 19%; bottom: 13%; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--pkw) * .09); text-align: center; }
.pk-metal { background: linear-gradient(100deg, var(--m1) 0%, var(--m3) 22%, var(--m2) 40%, var(--m3) 58%, var(--m1) 80%, var(--m2) 100%); background-size: 200% 100%; background-position: var(--hx, 50%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-star { font-size: calc(var(--pkw) * .12); line-height: 1; }
.pk-logo { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; letter-spacing: -.045em; line-height: .82; font-size: calc(var(--pkw) * .205); margin-top: 8px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.pk-logo span { display: block; }
.pk-logo .lo { font-size: 1.3em; }
.pk-label { margin-top: calc(var(--pkw) * .055); font-size: calc(var(--pkw) * .045); font-weight: 800; letter-spacing: .3em; }
.pk-series { position: absolute; bottom: 12px; left: 0; right: 0; font-size: calc(var(--pkw) * .037); font-weight: 800; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.pk-fine { position: absolute; left: 0; right: 0; bottom: 9.8%; text-align: center; font-size: 6.5px; font-weight: 800; letter-spacing: .18em; color: var(--ink); opacity: .55; }
.pk-glare { position: absolute; inset: 0; mix-blend-mode: overlay; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 25%), rgba(255,255,255,var(--gl, .85)), rgba(255,255,255,.1) 28%, transparent 50%); }
.pk-sweep { position: absolute; inset: -40% -60%; mix-blend-mode: overlay; background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,var(--sw, .55)) 49%, transparent 54%); animation: pksweep 3.6s ease-in-out infinite; }
@keyframes pksweep { 0% { transform: translateX(-45%); } 55%, 100% { transform: translateX(45%); } }
/* Perforation, Pfeil-Hinweis, Riss mit Licht beim Wischen */
.pk-tearline { position: absolute; left: 4.5%; right: 4.5%; top: var(--ty); height: 2.5px; margin-top: -1px; background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 3.5px, transparent 3.5px 6px) 0 0 / 100% 1.4px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3.5px, transparent 3.5px 6px) 0 1.4px / 100% 1px no-repeat; }
.pk-tearlabel { position: absolute; left: 7%; top: calc(var(--ty) - 15px); display: flex; align-items: center; gap: 1px; font-size: 7.5px; font-weight: 900; letter-spacing: .22em; color: var(--ink); }
.pk-tearlabel i { font-style: normal; font-size: 11px; line-height: 1; opacity: .25; animation: pkchev 1.4s ease-in-out infinite; }
.pk-tearlabel i:nth-child(2) { animation-delay: .15s; }
.pk-tearlabel i:nth-child(3) { animation-delay: .3s; }
.pk-tearlabel span { margin-left: 5px; opacity: .7; }
@keyframes pkchev { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: .95; transform: translateX(2px); } }
.pk-crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pk-crack polyline { fill: none; stroke-linejoin: round; stroke-linecap: butt; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--tp, 0) * 100); }
.pk-crack .c-glow { stroke: var(--m3); stroke-width: 2.2; opacity: .9; filter: blur(2.5px); }
.pk-crack .c-gap { stroke: #fffdf2; stroke-width: .55; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--m3)); }
.pk-crack .c-edge { stroke: rgba(40,28,6,.55); stroke-width: .22; transform: translateY(.5px); }
.pk-tip { position: absolute; left: calc(3.5% + var(--tp, 0) * 93%); top: var(--ty); width: 44px; height: 26px; margin: -13px 0 0 -22px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s; mix-blend-mode: screen;
  background: radial-gradient(ellipse, #fff 0%, rgba(255,250,225,.9) 18%, color-mix(in srgb, var(--m3) 55%, transparent) 42%, transparent 72%); }
.pk-pack.pk-tearing .pk-tip { opacity: 1; }
.pk-pack .pk-cap, .pk-pack .pk-body { visibility: hidden; }
.pk-pack.pk-ripped .pk-cap, .pk-pack.pk-ripped .pk-body { visibility: visible; }
.pk-pack.pk-ripped .pk-whole { display: none; }
/* pointer-events: die Haelften fliegen unsichtbar (opacity 0) weiter und lagen
   auf der Vollbild-Buehne genau ueber "Alle aufdecken" bzw. der Kopfzeile -
   Tipps kamen dort nicht an (Leonhard, 28.09.2026) */
/* Schweben friert ein statt zurueckzuspringen (App b9761f8) */
.pk-pack.pk-ripped { animation-play-state: paused; cursor: default; pointer-events: none; }
.pk-pack.pk-ripped .pk-cap { transform: translate(90px, -170px) rotate(28deg); opacity: 0; transition: transform .75s cubic-bezier(.2,.8,.3,1), opacity .6s .15s; }
.pk-pack.pk-ripped .pk-body { animation: pkjolt .35s ease-out; }
@keyframes pkjolt { 30% { transform: translateY(6px) rotate(-1deg); } 100% { transform: none; } }
/* Fallen wie mit Schwerkraft (App b9761f8) */
.pk-pack.pk-dropped .pk-body { transform: translateY(520px) rotate(-5deg); opacity: 0; transition: transform .8s cubic-bezier(.11,0,.5,0), opacity .5s .3s; }
.pk-pack.pk-ripped .pk-tearline, .pk-pack.pk-ripped .pk-tearlabel, .pk-pack.pk-ripped .pk-crack, .pk-pack.pk-ripped .pk-tip { display: none; }
.pk-pack.pk-ripped .pk-tilt { transform: none; }
/* ---------- Buehne: Stapel, Dimmer, Strahlenkranz, Bedienung ---------- */
.pk-stack { --cw: calc(var(--pkw) * .92); position: absolute; left: 50%; top: calc(22px + var(--pkw) * .08); width: var(--cw); height: calc(var(--cw) * 88 / 63); margin-left: calc(var(--cw) / -2);
  z-index: 2; transform: translateY(calc(var(--pkw) * .19)) scale(.86); transition: transform .9s cubic-bezier(.2,.8,.2,1); touch-action: none; }
.pk-stack.pk-rise { transform: translateY(calc(var(--pkw) * -.49)) scale(.86); }
.pk-stack.pk-front { z-index: 6; transform: none; }
.pk-stack .tc { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.pk-stack .tc.tc-gone { transform: translate(-150%, 40px) rotate(-16deg) !important; opacity: 0; pointer-events: none; }
.pk-stack .tc.tc-top { cursor: pointer; }
.pk-dim { position: absolute; inset: -80px -60px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(circle at 50% 45%, rgba(5,6,9,.3), rgba(5,6,9,.88) 70%); }
.pk-dim.on { opacity: 1; }
.pk-burst { position: absolute; left: 50%; top: 48%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; z-index: 5; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 4%, var(--bc) 5% 6%, transparent 7% 12%, var(--bc) 13% 14.5%, transparent 15.5% 21%, var(--bc) 22% 23%, transparent 24% 30%, var(--bc) 31% 32.5%, transparent 33.5% 40%, var(--bc) 41% 42%, transparent 43% 49%, var(--bc) 50% 51.5%, transparent 52.5% 58%, var(--bc) 59% 60%, transparent 61% 68%, var(--bc) 69% 70.5%, transparent 71.5% 77%, var(--bc) 78% 79%, transparent 80% 87%, var(--bc) 88% 89.5%, transparent 90.5% 100%);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%); mask: radial-gradient(circle, #000 0%, transparent 62%); }
.pk-burst.on { animation: pkburst 2.4s ease-out forwards, pkspin 14s linear infinite; }
.pk-burst.pre { animation: none; opacity: .3; transition: opacity 1.2s; }
@keyframes pkburst { 0% { opacity: 0; scale: .3; } 15% { opacity: 1; scale: 1; } 100% { opacity: .55; scale: 1.05; } }
@keyframes pkspin { to { rotate: 360deg; } }
.pk-shake { animation: pkshake .5s linear; }
@keyframes pkshake { 0%, 100% { translate: 0 0; } 20% { translate: -3px 1px; } 40% { translate: 3px -1px; } 60% { translate: -2px 1px; } 80% { translate: 2px 0; } }
.pk-quake { animation: pkquake .6s linear; }
@keyframes pkquake { 0%, 100% { translate: 0 0; } 10% { translate: -7px 3px; } 20% { translate: 6px -4px; } 30% { translate: -5px 3px; } 40% { translate: 5px -2px; } 55% { translate: -3px 2px; } 70% { translate: 2px -1px; } 85% { translate: -1px 1px; } }
.pk-auto { width: 120px; height: 3px; margin: 2px auto 8px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .25s; }
.pk-auto i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transform-origin: left; }
.pk-auto.on { opacity: 1; }
.pk-auto.on i { animation: pkauto var(--ad, 2s) linear forwards; }
@keyframes pkauto { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pk-dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 8px; }
.pk-dots[hidden] { display: none; }
.pk-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2F3440; transition: background .3s; }
.pk-dots i.on { background: var(--ink); }
.pk-dots i.t1 { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pk-dots i.t2 { background: #C9D2DD; }
.pk-hint { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted); min-height: 20px; margin: 0; transition: opacity .3s; }
.pk-skip { display: block; margin: 10px auto 0; border: 1px solid #3a404c; background: #181b21; color: var(--ink); font-family: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; padding: 8px 16px; border-radius: 999px; }
.pk-skip[hidden] { display: none; }
/* ---------- Effekte ueber dem ganzen Bildschirm ---------- */
.pk-fx { position: fixed; inset: 0; pointer-events: none; z-index: 85; overflow: hidden; --k: 1; }
.pk-fx > * { position: absolute; }
.pk-fx .pk-bloom { inset: 0; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at var(--ox) var(--oy), rgba(255,255,255,.95) 0%, var(--fxc) 9%, color-mix(in srgb, var(--fxc) 38%, transparent) 26%, transparent 58%); animation: pkbloom 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes pkbloom { 0% { opacity: 0; } 35% { opacity: var(--bo, 1); } 100% { opacity: 0; } }
.pk-fx .pk-rays, .pk-fx .pk-rbrays { left: var(--ox); top: var(--oy); width: calc(1000px * var(--k)); height: calc(1000px * var(--k)); margin: calc(-500px * var(--k)) 0 0 calc(-500px * var(--k)); opacity: 0; mix-blend-mode: screen; }
.pk-fx.up .pk-rays, .pk-fx.up .pk-rbrays { clip-path: inset(0 0 50% 0); }
.pk-fx .pk-rays { background: repeating-conic-gradient(from 3deg, color-mix(in srgb, var(--fxc) 65%, white) 0deg 1.4deg, transparent 1.4deg 5deg, color-mix(in srgb, var(--fxc) 40%, transparent) 5deg 6deg, transparent 6deg 11deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 16%, transparent 50%); mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 16%, transparent 50%);
  animation: pkrays 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes pkrays { 0% { opacity: 0; transform: scale(.15) rotate(-8deg); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(5deg); } }
.pk-fx .pk-rbrays { background: conic-gradient(from 0deg, #ff2e88, #ffd23a, #3dffb5, #37b6ff, #b04dff, #ff2e88, #ffd23a, #3dffb5, #37b6ff, #b04dff, #ff2e88);
  -webkit-mask: repeating-conic-gradient(from 0deg, #000 0deg 2.2deg, transparent 2.2deg 8deg), radial-gradient(circle, #000 0%, rgba(0,0,0,.7) 18%, transparent 52%); -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from 0deg, #000 0deg 2.2deg, transparent 2.2deg 8deg), radial-gradient(circle, #000 0%, rgba(0,0,0,.7) 18%, transparent 52%); mask-composite: intersect;
  animation: pkrbrays 1.5s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes pkrbrays { 0% { opacity: 0; transform: scale(.2) rotate(10deg); } 25% { opacity: .95; } 100% { opacity: 0; transform: scale(1.2) rotate(-14deg); } }
.pk-fx .pk-halo { left: var(--ox); top: var(--oy); width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: conic-gradient(#ff2e88, #ffd23a, #3dffb5, #37b6ff, #b04dff, #ff2e88);
  -webkit-mask: radial-gradient(circle, transparent 8%, rgba(0,0,0,.8) 26%, rgba(0,0,0,.8) 33%, transparent 64%); mask: radial-gradient(circle, transparent 8%, rgba(0,0,0,.8) 26%, rgba(0,0,0,.8) 33%, transparent 64%);
  animation: pkhalo 1.2s ease-out forwards; }
@keyframes pkhalo { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 30% { opacity: .85; } 100% { opacity: 0; transform: scale(1.35) rotate(120deg); } }
.pk-fx .pk-wave { left: var(--ox); top: var(--oy); width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: conic-gradient(from 90deg, #ff2e88, #ffd23a, #3dffb5, #37b6ff, #b04dff, #ff2e88);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 68%, #000 70%, transparent 74%); mask: radial-gradient(circle, transparent 64%, #000 68%, #000 70%, transparent 74%);
  animation: pkwave .9s cubic-bezier(.1,.6,.3,1) .05s forwards; }
.pk-fx .pk-wave.w2 { animation-delay: calc(.28s + var(--d-wave, 0s)); }
@keyframes pkwave { 0% { opacity: 1; transform: scale(.1); } 100% { opacity: 0; transform: scale(3.2); } }
.pk-fx .pk-slit { left: calc(var(--ox) - var(--sw) / 2); width: var(--sw); top: var(--oy); height: 3px; margin-top: -1.5px; border-radius: 3px; background: #fff; opacity: 0;
  box-shadow: 0 -2px 6px 1px #ff2e88, 0 2px 6px 1px #37b6ff, 0 0 14px 4px var(--fxc), 0 0 40px 14px rgba(61,255,181,.35), 0 0 70px 20px rgba(176,77,255,.3);
  animation: pkslit .9s ease-out forwards; }
@keyframes pkslit { 0% { opacity: 1; transform: scaleX(.05); } 18% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.08) scaleY(7); } }
.pk-fx .pk-cf { left: var(--ox); top: var(--oy); width: 0; height: 0; animation: pkcfx var(--t) cubic-bezier(.12,.62,.35,1) forwards; }
.pk-fx .pk-cf i { display: block; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); border-radius: 1px;
  background: linear-gradient(135deg, var(--c) 0%, #fff 40%, var(--c2) 55%, color-mix(in srgb, var(--c) 45%, black) 100%); animation: pkcfspin var(--sp) linear infinite; }
@keyframes pkcfx { 0% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(calc(var(--dx) * .65), var(--up)); opacity: 1; } 100% { transform: translate(var(--dx), var(--down)); opacity: 0; } }
@keyframes pkcfspin { from { transform: rotate3d(var(--ax), var(--ay), .3, 0deg); } to { transform: rotate3d(var(--ax), var(--ay), .3, 900deg); } }
/* Schriftzuege ICON und TARGET; max-content, sonst kappt der Rand die Breite */
.pk-fx .pk-stamp { left: var(--ox); top: var(--oy); translate: -50% -50%; width: max-content; display: flex; align-items: center; gap: .12em; white-space: nowrap;
  font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 64px; letter-spacing: -.03em; line-height: 1;
  filter: drop-shadow(0 0 2px #ff2e88) drop-shadow(0 0 3px #37b6ff) drop-shadow(0 6px 14px rgba(0,0,0,.6)); opacity: 0; animation: pkstamp 1.5s cubic-bezier(.2,.8,.3,1) .05s forwards; }
.pk-fx .pk-stamp span { padding: 0 .1em; background: linear-gradient(100deg, #9a6a06, #fff3c4 25%, #e2ad31 45%, #fff0bd 60%, #b57b06 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-fx .pk-stamp.pk-stamp-tgt { font-size: 48px; filter: drop-shadow(0 0 3px #a78bfa) drop-shadow(0 0 12px rgba(139,92,246,.85)) drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.pk-fx .pk-stamp.pk-stamp-tgt span { background: linear-gradient(100deg, #5b3fc4, #f3eeff 30%, #a78bfa 52%, #efe9ff 68%, #6D4DD6 92%); -webkit-background-clip: text; background-clip: text; }
.pk-fx .pk-stamp svg { width: .78em; height: .78em; color: #d8ccff; flex: none; }
@keyframes pkstamp { 0% { opacity: 0; scale: 2.8; } 16% { opacity: 1; scale: .92; } 26% { scale: 1.06; } 34% { scale: 1; } 72% { opacity: 1; translate: -50% -50%; } 100% { opacity: 0; scale: 1.1; translate: -50% -110%; } }
/* Statischer Beutel (Startseite, Draft-Karte, Practice-Kachel, Pack-Auswahl) */
.pk-pack.pk-static { position: relative; left: auto; top: auto; margin: 0; cursor: inherit; touch-action: auto; flex: none; perspective: none; }
.pk-pack.pk-static .pk-half { filter: drop-shadow(0 calc(var(--pkw) * .06) calc(var(--pkw) * .08) rgba(0,0,0,.45)); }
.pk-pack.pk-static .pk-print { border-radius: calc(var(--pkw) * .04); }
.pk-pack.pk-tiny { animation: none; }
.pk-pack.pk-tiny .pk-label, .pk-pack.pk-tiny .pk-series, .pk-pack.pk-tiny .pk-fine, .pk-pack.pk-tiny .pk-stripe span, .pk-pack.pk-tiny .pk-wrinkle { display: none; }
.pk-pack.pk-tiny .pk-logo { margin-top: 2px; filter: none; }
.pk-pack.pk-tiny .pk-art { padding-top: calc(var(--pkw) * .12); }
.pk-pack.pk-tiny .pk-stripe { box-shadow: none; }
.pk-pack.pk-icon .pk-art, .pk-pack.pk-icon .pk-stripe { display: none; }

/* ---------- Vorzeichen vor dem Umdrehen (aus der App, Kartenblock) ---------- */
/* Vorzeichen vor dem Umdrehen, steigend */
/* Lichtring: der Farbverlauf liegt auf einer eigenen Ebene, die sich per
   transform dreht (Grafikkarte). Vorher drehte eine animierte Winkel-Variable
   den Verlauf und er wurde jedes Bild neu gezeichnet (28.09.2026). overflow
   begrenzt den Verlauf auf den Ring-Kasten, damit der Leuchtfilter dasselbe
   sieht wie vorher. */
.tc-ring { display: none; position: absolute; inset: -4px; border-radius: 5.4cqw; padding: 3px; pointer-events: none; z-index: 3; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px var(--tc)); }
.tc-tell2 .tc-ring, .tc-tellhot .tc-ring, .tc-tell1 .tc-ring { display: block; }
.tc-ring i { position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 50%, var(--tc) 72%, #fff 80%, var(--tc) 88%, transparent 100%);
  animation: tcring var(--ts, .6s) linear infinite; }
@keyframes tcring { to { rotate: 360deg; } }
.tc-tell2 { --ts: .55s; }
.tc-tell2 .tc-flip { animation: tclift .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes tclift { to { translate: 0 -10px; scale: 1.03; } }
.tc-tell2 .tc-back { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 26px 4px rgba(200,220,240,.45); }
.tc-tellhot { --ts: .38s; }
.tc-tellhot .tc-flip { animation: tcrattle .16s linear infinite; }
@keyframes tcrattle { 25% { translate: -2px 1px; } 50% { translate: 2px -1px; } 75% { translate: -1px -1px; } }
/* Aufgluehen vor dem Flip auf eigener Ebene hinter der Rueckseite (App 6fbfbc9) */
.tc-face.tc-backglow { display: none; background: none; pointer-events: none; }
.tc-tellhot .tc-backglow, .tc-tell1 .tc-backglow { display: block; }
.tc-tellhot .tc-back, .tc-tell1 .tc-back { box-shadow: none; }
.tc-tellhot .tc-backglow { animation: tchotback .8s ease-in forwards; }
@keyframes tchotback { from { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 26px rgba(0,0,0,.5); } to { box-shadow: 0 0 0 2px rgba(255,138,61,.9), 0 0 50px 14px rgba(255,90,30,.6); } }
.tc-tell1 { --ts: .75s; }
.tc-tell1.tc-tell1b { --ts: .28s; }
.tc-tell1 .tc-flip { animation: tcrumble 1.3s ease-in forwards; }
@keyframes tcrumble { 0% { translate: 0 0; scale: 1; } 10% { translate: -1px 0; } 20% { translate: 1px -1px; } 30% { translate: -2px 1px; } 40% { translate: 2px -1px; scale: 1.02; }
  50% { translate: -3px 1px; } 60% { translate: 3px -2px; } 70% { translate: -4px 2px; scale: 1.04; } 80% { translate: 4px -2px; } 90% { translate: -5px 1px; scale: 1.06; } 100% { translate: 0 -4px; scale: 1.07; } }
.tc-tell1 .tc-backglow { animation: tcgoldback 1.3s ease-in forwards; }
@keyframes tcgoldback { from { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 26px rgba(0,0,0,.5); } to { box-shadow: 0 0 0 2px rgba(255,212,107,.95), 0 0 70px 22px rgba(255,200,80,.7), 0 0 140px 40px rgba(255,180,60,.35); } }
.pk-stack .tc-card { height: 100%; }

/* ---------- Eingebettete Buehne (Website) ---------- */
.pk-wrap.pk-embed { width: 100%; }
.pk-embed .pk-mid { width: 100%; display: flex; justify-content: center; }
.pk-embed .pk-scene { overflow: visible; }
.pk-embed .pk-bottom { width: 100%; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .pk-pack, .pk-sweep, .pk-burst.on, .pk-tearlabel i { animation: none !important; }
  .pk-half, .pk-stack, .pk-stack .tc, .tc-tilt { transition-duration: .01s !important; }
}
/* Abdunkeln ueber die ganze Seite wie im Vollbild der App; der fallende Beutelrest verschwindet an der Beutelkante statt ueber den Text zu rutschen */
.pk-embed .pk-dim { position: fixed; inset: 0; }
.pk-embed .pk-pack.pk-dropped { clip-path: inset(-400px -400px 0 -400px); }

/* Vorbereiteter Effekt (App 6fbfbc9): pausiert und unsichtbar, bis er ausgeloest wird */
.pk-fx.pk-armed *, .pk-fx.pk-armed *::before, .pk-fx.pk-armed *::after { animation-play-state: paused !important; }
/* hauchduenn statt unsichtbar und in groesster Groesse vorgezeichnet (App b9761f8) */
.pk-fx.pk-armed > * { opacity: .001 !important; }
.pk-fx.pk-armed .pk-rays { transform: scale(1.15) !important; }
.pk-fx.pk-armed .pk-rbrays { transform: scale(1.2) !important; }
.pk-fx.pk-armed .pk-halo { transform: scale(1.35) !important; }
.pk-fx.pk-armed .pk-wave { transform: scale(3.2) !important; }

/* Riss: Haelften behalten ihre Grafikebene, ab der ersten Beruehrung vorgezeichnet (App 8a19d17, b9761f8) */
.pk-pack.pk-ripped .pk-body, .pk-pack.pk-ripped .pk-cap { will-change: transform, opacity; }
.pk-pack.pk-prep .pk-cap, .pk-pack.pk-prep .pk-body { visibility: visible; will-change: transform, opacity; }
.pk-pack.pk-prep .pk-whole { filter: none; }
/* Effekte gestaffelt (App 8a19d17, --d-* aus PK_FX) */
.pk-fx .pk-bloom { animation-delay: var(--d-bloom, 0s); }
.pk-fx .pk-rays { animation-delay: var(--d-rays, 0s); }
.pk-fx .pk-rbrays { animation-delay: var(--d-rb, 0s); }
.pk-fx .pk-halo { animation-delay: var(--d-halo, 0s); }
.pk-fx .pk-wave:not(.w2) { animation-delay: calc(.05s + var(--d-wave, 0s)); }
.pk-fx .pk-cf { opacity: 0; animation-delay: var(--d-cf, 0s); }
.pk-fx .pk-stamp { animation-delay: calc(.05s + var(--d-stamp, 0s)); }

/* Spielbares Pack auf Seiten (Startseiten und Pack-Opener): Buehne, danach Raster */
.draft26 { position: relative; max-width: 340px; margin: 0 auto; min-height: 440px; --pkw: 190px; }
.draft26 .pk-wrap { --pkw: 190px; }
.d26-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 6px; }
.d26-card { animation: d26deal .5s cubic-bezier(.2,.9,.3,1.2) both; }
.d26-card .tc-card { width: 100%; }
@keyframes d26deal { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
.draft26 .demo-cta { margin-top: 16px; }
@media (max-width: 520px) { .draft26, .draft26 .pk-wrap { --pkw: 170px; } .d26-grid { gap: 7px; } }
/* Pack-Opener-Seiten: die alte Handy-Huelle bleibt als Rahmen, innen die neue Buehne */
.demo-phone .draft26 { min-height: 460px; padding: 10px 0; }

/* Website: senkrecht scrollen ueber Pack und Stapel erlaubt (in der App Vollbild, dort none) */
.pk-embed .pk-pack, .pk-embed .pk-stack { touch-action: pan-y; }