@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Bühne: Das Design ist 390 px breit. Die App skaliert es auf die Bildschirmbreite (Handy)
   bzw. passt es mittig in den Bildschirm ein (Tablet, Desktop). */
html,body{height:100%}
body{overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
#stage{position:fixed;left:0;top:0;transform-origin:0 0}
dc-root{display:contents}
noscript p{color:#fff8ec;font:600 16px/1.5 'Hanken Grotesk',system-ui,sans-serif;padding:24px;text-align:center}

/* aus dem Design */
.cj-snow{position:absolute;left:-3px;right:-3px;top:-10px;height:32px;z-index:1;pointer-events:none;border-radius:26px 26px 0 0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='32' viewBox='0 0 96 32'><path fill='%23d5deec' d='M0 8.5C10 3.5 20 2.5 30 6.5S50 10.5 60 5.5S82 3.5 96 8.5V21C92 21 91 24 89 24C86 24 86 21 80 21H62C58 21 58 31 54 31C50 31 51 21 46 21H30C27 21 27 26 24 26C21 26 22 21 18 21H0Z'/><path fill='%23fff' d='M0 7C10 2 20 1 30 5S50 9 60 4S82 2 96 7V19C92 19 91 22 89 22C86 22 86 19 80 19H62C58 19 58 29 54 29C50 29 51 19 46 19H30C27 19 27 24 24 24C21 24 22 19 18 19H0Z'/></svg>") repeat-x 0 0/96px 32px;filter:drop-shadow(0 1px 1px rgba(30,50,100,.18))}
.cj-snow::before,.cj-snow::after{content:"";position:absolute;top:0;left:0;width:36px;height:50px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='50' viewBox='0 0 36 50'><path fill='%23d5deec' transform='translate(0 1.5)' d='M36 10.5C27 2 12 1 4 10C1 14 0 19 0 25V44C0 48 7 48 7 44L7.5 35C8 39 14 39 14 34C15 26 21 21 36 19Z'/><path fill='%23fff' d='M36 10.5C27 2 12 1 4 10C1 14 0 19 0 25V44C0 48 7 48 7 44L7.5 35C8 39 14 39 14 34C15 26 21 21 36 19Z'/></svg>") no-repeat 0 0/36px 50px}.cj-snow::after{left:auto;right:0;transform:scaleX(-1)}
body{margin:0;background:#0b1533}
a{color:#8e1621}a:hover{color:#5e0e16}
.cj-tw{animation:cjtw 2.4s ease-in-out infinite}
@keyframes cjtw{0%,100%{opacity:1}50%{opacity:.45}}
.cj-blink{animation:cjblink 1s steps(2,start) infinite}
@keyframes cjblink{0%{box-shadow:inset 0 0 0 3px #e2b04a}100%{box-shadow:inset 0 0 0 3px rgba(226,176,74,.2)}}
.cj-pop{animation:cjpop .5s ease-out both}
@keyframes cjpop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.cj-pulse{animation:cjpulse 1.6s ease-in-out infinite}
@keyframes cjpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.cj-scroll{scrollbar-width:none}
/* In scrollbaren Spalten nichts zusammenquetschen (Buttons behalten ihre Höhe); Ausnahmen setzen flex inline */
.cj-scroll>*{flex-shrink:0}
.cj-scroll::-webkit-scrollbar{display:none}
.cj-btn:focus-visible,.cj-frame:focus-visible,.cj-input:focus-visible{outline:3px solid #2b5aa8;outline-offset:3px}
.cj-input::placeholder{color:#8c7466}
.cj-ham{transform-box:fill-box;transform-origin:0% 100%;animation:cjham .5s ease-in-out infinite alternate}
@keyframes cjham{from{transform:rotate(-28deg)}to{transform:rotate(12deg)}}
.cj-bob{transform-box:fill-box;animation:cjbob 1.4s ease-in-out infinite alternate}
@keyframes cjbob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.cj-type{animation:cjtype .35s steps(2,start) infinite alternate}
@keyframes cjtype{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.cj-swing{transform-box:fill-box;transform-origin:50% 0%;animation:cjswing 1.6s ease-in-out infinite alternate}
@keyframes cjswing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.cj-point{transform-box:view-box;transform-origin:31px 81px;animation:cjpoint 1.1s ease-in-out infinite alternate}
@keyframes cjpoint{from{transform:rotate(0deg)}to{transform:rotate(-7deg)}}
@media (prefers-reduced-motion: reduce){.cj-tw,.cj-blink,.cj-pop,.cj-pulse,.cj-ham,.cj-bob,.cj-type,.cj-swing,.cj-point{animation:none}.cj-frame{transition:none}}