:root {
--pjw-orange: #ed7b0b;
--pjw-teal: #138c87;
--pjw-cream: #fff2ce;
--pjw-brown: #542b12;
}
.pjw-shell, .pjw-popup {
box-sizing: border-box;
color: var(--pjw-brown);
background: radial-gradient(circle at 50% 0, #fff9e9, var(--pjw-cream));
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pjw-shell *, .pjw-popup * { box-sizing: border-box; }
.pjw-stage { position: relative; left: 50%; width: 100vw !important; max-width: none !important; min-height: calc(100vh - 110px); margin-left: 0 !important; padding: clamp(28px,5vw,70px) 14px; transform: translateX(-50%); background: linear-gradient(rgba(5,5,5,.34),rgba(5,5,5,.58)), url(https://papajoes-ingolstadt.de/wp-content/uploads/2026/08/PJ-Header-Website-082026.png) center/cover no-repeat; }
.pjw-shell { max-width: 680px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); border-radius: 28px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.42); border: 3px solid rgba(237,123,11,.55); }
.pjw-kicker { color: var(--pjw-orange); text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: .82rem; }
.pjw-test-banner { margin: -18px -18px 24px; padding: 10px 14px; border-radius: 12px; background: #111; color: #fff; font-weight: 900; font-size: .78rem; letter-spacing: .08em; }
.pjw-shell h2, .pjw-popup h2 { margin: 8px 0 12px; text-transform: uppercase; font-size: clamp(2rem, 7vw, 3.6rem); line-height: .95; letter-spacing: .02em; }
.pjw-lead { max-width: 540px; margin: 0 auto 24px; }
.pjw-spin-hint { display: inline-flex; align-items: center; gap: 8px; margin: 2px auto -4px; padding: 10px 18px; border-radius: 999px; background: #111; color: #fff4d9; text-transform: uppercase; font-size: .84rem; font-weight: 1000; letter-spacing: .08em; box-shadow: 0 8px 20px rgba(0,0,0,.22); animation: pjwHintBounce 1.25s ease-in-out infinite; }
.pjw-spin-hint span { font-size: 1.3rem; }
.pjw-wheel-wrap { position: relative; width: min(360px, 82vw); height: min(360px, 82vw); margin: 28px auto; filter: drop-shadow(0 18px 22px rgba(84,43,18,.25)); }
.pjw-wheel-zone { max-height: 700px; opacity: 1; transform: scale(1); transition: opacity .42s ease, transform .42s ease, max-height .68s ease, margin .68s ease; }
.pjw-shell.is-revealed .pjw-wheel-zone { max-height: 0; margin: 0; overflow: hidden; opacity: 0; transform: scale(.88); pointer-events: none; }
.pjw-wheel-wrap::before { content: ""; position: absolute; z-index: -1; inset: -12px; border: 5px solid rgba(237,123,11,.48); border-radius: 50%; animation: pjwSpinRing 1.4s ease-out infinite; }
.pjw-wheel { width: 100%; height: 100%; border: 12px solid var(--pjw-brown); border-radius: 50%; background: repeating-conic-gradient(from -18deg, var(--pjw-orange) 0 36deg, #fff4cf 36deg 72deg, var(--pjw-teal) 72deg 108deg); transition: transform 4s cubic-bezier(.14,.7,.12,1); position: relative; }
.pjw-wheel::after { content: ""; position: absolute; inset: 8%; border: 3px dashed rgba(255,255,255,.65); border-radius: 50%; }
.pjw-wheel-center { position: absolute; z-index: 2; inset: 32%; display: grid; width: 36%; height: 36%; padding: 0; place-items: center; border-radius: 50%; background: var(--pjw-orange); border: 8px solid var(--pjw-brown); color: #fff; font: inherit; font-size: clamp(1.05rem, 4vw, 1.75rem); font-weight: 1000; cursor: pointer; transition: transform .2s ease, background .2s ease; box-shadow: 0 0 0 7px rgba(255,255,255,.72), 0 8px 18px rgba(84,43,18,.35); animation: pjwSpinButton 1.05s ease-in-out infinite; }
.pjw-wheel-center:hover, .pjw-wheel-center:focus-visible { transform: scale(1.06); background: #fff; outline: 4px solid rgba(19,140,135,.28); }
.pjw-wheel-center:disabled { cursor: wait; transform: none; }
.pjw-wheel-center.is-loading { animation: none; background: #fff; }
.pjw-wheel-center.is-loading::before { content: ""; width: 38%; height: 38%; border: 6px solid rgba(237,123,11,.25); border-top-color: var(--pjw-orange); border-right-color: var(--pjw-teal); border-radius: 50%; animation: pjwLoader .6s linear infinite; }
.pjw-pointer { position: absolute; z-index: 4; left: 50%; top: -12px; transform: translateX(-50%); width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-top: 58px solid var(--pjw-brown); }
.pjw-draw-message { min-height: 24px; margin: -8px 0 12px; font-weight: 850; color: var(--pjw-teal); }
.pjw-draw-message.is-error { color: #a82716; }
.pjw-form { margin-top: 24px; text-align: left; }
.pjw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pjw-form label { display: block; margin: 0 0 13px; font-weight: 750; }
.pjw-form label > span { font-weight: 500; font-size: .86em; opacity: .85; }
.pjw-form input[type="text"], .pjw-form input[type="email"], .pjw-form input[type="date"] { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border: 2px solid rgba(84,43,18,.2); border-radius: 12px; background: #fff; color: #271305; font: inherit; }
.pjw-form input:focus { outline: 3px solid rgba(19,140,135,.2); border-color: var(--pjw-teal); }
.pjw-check { display: flex !important; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 500 !important; }
.pjw-check input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--pjw-teal); }
.pjw-check a { color: #a94f00; }
.pjw-form button { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 999px; padding: 16px 22px; cursor: pointer; background: var(--pjw-orange); color: #fff; font: inherit; font-weight: 950; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 10px 22px rgba(237,123,11,.25); }
.pjw-form button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pjw-form button:disabled { opacity: .55; cursor: wait; }
.pjw-small { font-size: .78rem; line-height: 1.45; opacity: .72; }
.pjw-message { margin-top: 12px; font-weight: 750; text-align: center; }
.pjw-message.is-ok { color: #08734f; }
.pjw-message.is-error { color: #a82716; }
.pjw-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.pjw-result { padding: 26px 8px 4px; text-align: center; animation: pjwPop .4s ease both; }
.pjw-result-kicker { color: var(--pjw-teal); font-weight: 950; letter-spacing: .12em; }
.pjw-result h3 { color: var(--pjw-orange); font-size: clamp(1.7rem, 5vw, 2.5rem); margin: 12px 0; }
.pjw-prize-reveal { position: relative; isolation: isolate; margin: 26px -8px 4px; padding: 38px clamp(14px,4vw,34px) 30px; overflow: hidden; border: 4px solid var(--pjw-orange); border-radius: 24px; background: #fff9e9; box-shadow: 0 18px 45px rgba(237,123,11,.28); animation: pjwPrizeEntrance .72s cubic-bezier(.18,.9,.22,1.25) both; }
.pjw-prize-reveal::before { content: ""; position: absolute; z-index: -1; inset: -80%; background: repeating-conic-gradient(from 0deg, rgba(237,123,11,.16) 0 8deg, transparent 8deg 18deg); animation: pjwRays 16s linear infinite; }
.pjw-win-badge { width: 92px; height: 92px; margin: -2px auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--pjw-teal); color: #fff; font-size: 1rem; font-weight: 1000; letter-spacing: .08em; transform: rotate(-8deg); box-shadow: 0 0 0 8px #fff9e9, 0 0 0 12px var(--pjw-teal); animation: pjwBadge .65s .35s cubic-bezier(.18,.9,.22,1.4) both; }
.pjw-prize-reveal h3 { font-size: clamp(2rem,7vw,3.35rem); line-height: .98; text-wrap: balance; text-shadow: 2px 3px 0 rgba(84,43,18,.12); }
.pjw-win-cheer { font-weight: 800; color: var(--pjw-brown); }
.pjw-claim-open { display: block; width: min(100%, 520px); margin: 22px auto 4px; border: 0; border-radius: 999px; padding: 17px 22px; cursor: pointer; background: var(--pjw-orange); color: #fff; font: inherit; font-weight: 950; font-size: clamp(1rem,4vw,1.18rem); text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 10px 22px rgba(237,123,11,.25); }
.pjw-prize-reveal .pjw-claim-open { animation: pjwCtaPulse 1.45s 1.1s ease-in-out infinite; }
.pjw-claim-form { padding-top: 12px; animation: pjwPop .35s ease both; }
.pjw-claim-form h3 { margin: 0 0 20px; color: var(--pjw-teal); text-align: center; text-transform: uppercase; font-size: clamp(1.5rem,5vw,2.2rem); }
.pjw-divider { border: 0; height: 2px; margin: 32px 0; background: linear-gradient(90deg, transparent, var(--pjw-orange), transparent); }
.pjw-shell > h3 { color: var(--pjw-teal); font-size: clamp(1.6rem, 5vw, 2.3rem); margin-bottom: 8px; }
.pjw-teaser.alignfull { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; width: 100vw !important; max-width: none !important; min-height: 260px; margin: 0 0 0 calc((100% - 100vw) / 2) !important; padding: clamp(28px,3.2vw,46px) max(5vw, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 42px; color: #fff4d9; background: radial-gradient(circle at 82% 50%, rgba(11,145,145,.34), transparent 33%), linear-gradient(125deg, #111 0 58%, #123f45 100%); border-block: 4px solid var(--pjw-orange); box-shadow: inset 0 12px 0 rgba(19,140,135,.22), 0 18px 50px rgba(0,0,0,.28); font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.pjw-teaser::before { content: ""; position: absolute; z-index: -1; width: min(680px,70vw); aspect-ratio: 1; right: -110px; top: 50%; border-radius: 50%; opacity: .16; background: repeating-conic-gradient(from 0deg, var(--pjw-orange) 0 10deg, transparent 10deg 20deg); animation: pjwTeaserRays 24s linear infinite; }
.pjw-teaser > * { position: relative; z-index: 1; }
.pjw-teaser > div { flex: 1 1 auto; }
.pjw-teaser span { display: inline-block; margin-bottom: 9px; padding: 5px 10px; color: #111; background: var(--pjw-orange); text-transform: uppercase; letter-spacing: .16em; font-weight: 950; font-size: .78rem; transform: rotate(-1deg); }
.pjw-teaser h2 { max-width: 760px; margin: 0; color: #fff4d9; text-transform: uppercase; font-size: clamp(2.15rem,4.7vw,4rem); line-height: .9; text-shadow: 4px 4px 0 rgba(237,123,11,.32); }
.pjw-teaser p { max-width: 720px; margin: 15px 0 0; font-size: clamp(1rem,1.8vw,1.28rem); font-weight: 750; }
.pjw-teaser a { flex: 0 0 auto; display: inline-block; margin-left: auto; margin-right: clamp(0px,4vw,60px); padding: 18px 28px; border: 3px solid #fff4d9; border-radius: 999px; background: var(--pjw-orange); color: #111; text-decoration: none; text-transform: uppercase; text-align: center; font-weight: 950; letter-spacing: .055em; box-shadow: 0 10px 28px rgba(237,123,11,.34); animation: pjwCtaPulse 1.7s ease-in-out infinite; }
.pjw-popup-backdrop { position: fixed; inset: 0; z-index: 99998; background: rgba(26,15,7,.72); backdrop-filter: blur(4px); }
.pjw-popup { position: fixed; z-index: 99999; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(600px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: clamp(24px,5vw,42px); border-radius: 26px; box-shadow: 0 28px 80px rgba(0,0,0,.45); }
.pjw-popup h2 { font-size: clamp(1.8rem,6vw,3rem); }
.pjw-popup-close { position: absolute; right: 12px; top: 8px; border: 0; background: transparent; color: var(--pjw-brown); font-size: 34px; cursor: pointer; }
[hidden] { display: none !important; }
.pjw-confetti { position: fixed; z-index: 100000; top: -20px; width: 9px; height: 16px; pointer-events: none; animation: pjwFall linear forwards; }
@keyframes pjwFall { to { transform: translateY(110vh) rotate(720deg); opacity: .1; } }
@keyframes pjwPop { from { transform: scale(.88); opacity: 0; } }
@keyframes pjwPrizeEntrance { 0% { transform: translateY(50px) scale(.68) rotate(-2deg); opacity: 0; } 65% { transform: translateY(-8px) scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pjwBadge { from { transform: rotate(-30deg) scale(0); } to { transform: rotate(-8deg) scale(1); } }
@keyframes pjwRays { to { transform: rotate(360deg); } }
@keyframes pjwCtaPulse { 50% { transform: scale(1.035); box-shadow: 0 12px 30px rgba(237,123,11,.48); } }
@keyframes pjwSpinButton { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,255,255,.88), 0 12px 26px rgba(84,43,18,.42); } }
@keyframes pjwSpinRing { 0% { transform: scale(.98); opacity: .95; } 100% { transform: scale(1.09); opacity: 0; } }
@keyframes pjwHintBounce { 50% { transform: translateY(5px); } }
@keyframes pjwLoader { to { transform: rotate(360deg); } }
@keyframes pjwTeaserRays { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
@media (max-width: 560px) {
.pjw-grid { grid-template-columns: 1fr; gap: 0; }
.pjw-stage { padding: 18px 10px 34px; background-position: center top; }
.pjw-shell { width: 100%; margin: 0 auto; padding: 22px 14px 28px; border-radius: 20px; }
.pjw-wheel-wrap { width: min(300px, 78vw); height: min(300px, 78vw); margin: 24px auto 20px; }
.pjw-wheel { border-width: 9px; }
.pjw-wheel-center { border-width: 6px; }
.pjw-pointer { top: -9px; border-left-width: 18px; border-right-width: 18px; border-top-width: 46px; }
.pjw-teaser { min-height: 0; margin-left: calc((100% - 100vw) / 2); padding: 34px 18px 38px; align-items: flex-start; flex-direction: column; }
.pjw-teaser a { width: 100%; margin: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.pjw-wheel { transition-duration: .01ms; }
.pjw-confetti { display: none; }
.pjw-spin-hint, .pjw-wheel-center, .pjw-wheel-wrap::before, .pjw-prize-reveal, .pjw-win-badge, .pjw-prize-reveal::before, .pjw-prize-reveal .pjw-claim-open, .pjw-wheel-zone { animation: none !important; transition: none !important; }
}