@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/fredoka.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:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito.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}
:root{--ink:#1F2140;--bg:#FFF4E6;--yel:#FFD23F;--tom:#FF6B57;--mint:#3DDC97;--lil:#B8A6FF;--red:#C42A3A;color-scheme:light}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--navh,calc(67px + env(safe-area-inset-top,0px))) + 6px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 'Nunito',system-ui,sans-serif;position:relative;z-index:0}
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.deco i{position:absolute;border-radius:50%;display:block}
.deco i:nth-child(1){width:300px;height:300px;background:var(--yel);top:-170px;right:-120px}
.deco i:nth-child(2){width:84px;height:84px;border:3px solid var(--ink);top:96px;right:18px}
.deco i:nth-child(3){width:220px;height:220px;background:var(--lil);top:46%;left:-150px;opacity:.55}
.deco i:nth-child(4){width:260px;height:260px;background:var(--tom);bottom:-150px;right:-110px;opacity:.6}
.deco i:nth-child(5){width:40px;height:40px;background:var(--mint);border:3px solid var(--ink);top:23%;right:-14px}
.screen{max-width:760px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:22px;overflow-x:hidden;overflow-x:clip}
h1,h2,h3{font-family:'Fredoka','Nunito',sans-serif;font-weight:700;margin:0;line-height:1.1;text-wrap:balance}
h2{font-size:23px}h3{font-size:18px}
h2 small,h3 small{font-family:'Nunito',sans-serif;font-size:14px;font-weight:700}
p{margin:0;text-wrap:pretty}
.hero{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.pill{align-self:flex-start;background:var(--mint);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;transform:rotate(-3deg)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lang{display:flex;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;overflow:hidden}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:50px;min-height:44px;padding:0 10px;color:var(--ink);font-weight:900;font-size:14px;letter-spacing:.06em;text-decoration:none}
.lang a+a{border-left:2px solid var(--ink)}
.lang a[aria-current]{background:var(--ink);color:var(--bg)}
@media (hover:hover){.lang a:not([aria-current]):hover{background:var(--yel)}}
.lang a:focus-visible{outline:3px solid var(--tom);outline-offset:-3px}
.ttl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.ttl h1{font-size:clamp(44px,13vw,64px);letter-spacing:-.01em}
.stk{background:var(--tom);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:14px;padding:4px 12px;font:700 20px 'Fredoka',sans-serif;transform:rotate(4deg)}
.sub{font-weight:600}
.nav{position:sticky;top:0;z-index:5;margin:0 -16px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--bg);border-bottom:3px solid var(--ink);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:15px;text-decoration:none}
.nav a:active{background:var(--yel)}
@media (hover:hover){.nav a:hover{background:var(--yel)}}
.nav a:focus-visible,.foot button:focus-visible{outline:3px solid var(--tom);outline-offset:2px}
.box{--sh:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--sh);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px;margin-right:5px}
.box.sm{padding:12px 14px;gap:8px}
.yel{background:var(--yel)}.tom{background:var(--tom)}.mint{background:var(--mint)}.lil{background:var(--lil)}.wht{background:#fff}
.dark{--sh:var(--yel);background:var(--ink);color:var(--bg)}.dark h2{color:var(--yel)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.tile{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 12px}
.tile h3{font-size:17px;margin-bottom:2px}
.tile p,.note,.sec>p,.box ul,.xs,.rows{font-size:15px}
.note{font-weight:600}
.sec{display:flex;flex-direction:column;gap:12px}
.sh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.inv{background:var(--ink);color:var(--bg);border-radius:8px;padding:0 8px;font-size:16px;white-space:nowrap}
.badge{border:2px solid var(--ink);border-radius:999px;padding:2px 12px;font-size:13px;font-weight:800;transform:rotate(2deg)}
.trumps{list-style:none;margin:0;padding:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:18px 10px}
.tc{display:flex;flex-direction:column;align-items:center;gap:6px}
.card{position:relative;width:100%;height:84px;background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif}
.card.hot{background:var(--yel)}.card.red{color:var(--red)}
.card::before{content:"";position:absolute;inset:5px;border:2px solid rgba(31,33,64,.1);border-radius:7px;pointer-events:none}
.card.hot::before{border-color:rgba(255,255,255,.6)}
.card::after{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(184,166,255,.55) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:140% 0}
.card.hot::after{background-image:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%)}
.tc{cursor:pointer;-webkit-tap-highlight-color:transparent}
.fan{position:relative;width:110px;height:80px;margin-left:auto;flex:0 0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fc{position:absolute;top:0;width:46px;height:64px;background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;line-height:1;transform:var(--t);transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
.fc b{font-size:20px;font-weight:700}
.fc i{font-style:normal;font-size:17px;font-family:'DejaVu Sans','Segoe UI Symbol',sans-serif}
.fc.red{color:var(--red)}.fc.hot{background:var(--yel)}
.fc.c1{left:2px;--t:translateY(10px) rotate(-15deg);--o:translate(-10px,14px) rotate(-28deg)}
.fc.c2{left:31px;z-index:1;--t:none;--o:translateY(-8px)}
.fc.c3{left:60px;z-index:2;--t:translateY(12px) rotate(15deg);--o:translate(10px,16px) rotate(28deg)}
.fan.open .fc{transform:var(--o)}
@media (hover:hover){.fan:hover .fc{transform:var(--o)}}
.nav a{transition:background-color .2s,color .2s,transform .15s}
.nav a:active{transform:scale(.94)}
.nav a.on{background:var(--ink);color:var(--yel)}
.nav{background:linear-gradient(var(--tom),var(--tom)) 0 100%/calc(var(--p,0)*100%) 4px no-repeat,var(--bg)}
.sec>h2{align-self:flex-start}
.foot button{transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s}
@media (hover:hover){.foot button:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--ink)}}
.ch{transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
@media (hover:hover){
  .tc:hover .card{transform:translateY(-7px) rotate(-4deg);box-shadow:5px 8px 0 var(--ink)}
  .ch:hover{transform:translateY(-3px) rotate(-5deg)}
  .grid>.box:hover,.solos>.box:hover,.suits>.box:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--sh)}
  .tile:hover{transform:translateY(-3px) rotate(-.6deg)}
}
.card,.grid>.box,.solos>.box,.suits>.box,.tile{transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s}
.no{position:absolute;top:3px;left:7px;font-size:12px;font-weight:700;color:var(--ink)}
.rk{font-size:28px;font-weight:700;line-height:1}
.st{font-size:22px;line-height:1.1;font-family:'DejaVu Sans','Segoe UI Symbol',sans-serif}
.tag{position:absolute;top:-12px;right:-6px;background:var(--tom);color:var(--ink);border:2px solid var(--ink);font:900 11px 'Nunito',sans-serif;padding:1px 7px;border-radius:999px;transform:rotate(6deg)}
.nm{font-size:12px;font-weight:800;text-align:center;line-height:1.2}
.suits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.chips{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font:700 19px 'Fredoka',sans-serif}
.ch{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:1px 9px}
.ch.red{color:var(--red)}
.chips.mini{font-size:16px;gap:4px 3px}
.chips.mini .ch{padding:0 7px}
.solos{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.solos p{font-size:15px}
.solos .hint{font-size:13px;font-weight:700}
.memo{background:var(--ink);color:var(--bg);border-radius:18px;padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.memo span{background:var(--yel);color:var(--ink);font:700 17px 'Fredoka',sans-serif;padding:4px 12px;border-radius:10px;transform:rotate(-4deg)}
.memo p{flex:1 1 220px;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.box ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.val{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:6px 4px;text-align:center;display:flex;flex-direction:column}
.val b{font:700 26px/1.1 'Fredoka',sans-serif}.val span{font-size:13px;font-weight:800}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:flex;justify-content:space-between;gap:10px;border-bottom:2px dashed rgba(31,33,64,.35);padding-bottom:5px}
.row:last-child{border-bottom:0}
.xs{display:flex;flex-direction:column;gap:8px}
.xs div{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:7px 12px}
.foot{display:flex;justify-content:center;padding-top:6px}
.foot button{font:800 16px 'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--yel);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;min-height:48px;padding:0 22px;cursor:pointer}
.foot button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.print{display:none}
@media (min-width:700px){.screen{padding-left:24px;padding-right:24px;gap:28px}.nav{margin:0 -24px;padding-left:24px;padding-right:24px;flex-wrap:wrap}.solos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.screen{max-width:1120px;padding-left:32px;padding-right:32px}.nav{margin:0 -32px;padding-left:32px;padding-right:32px}.trumps{grid-template-columns:repeat(13,minmax(0,1fr));gap:18px 8px}}
@media (min-width:700px){.fan{width:150px;height:110px}.fc{width:64px;height:90px;border-radius:12px;box-shadow:4px 4px 0 var(--ink)}.fc b{font-size:26px}.fc i{font-size:22px}.fc.c1{left:4px}.fc.c2{left:43px}.fc.c3{left:82px}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .pill{animation:swing .8s cubic-bezier(.2,1.5,.4,1) both}
  .ttl h1{animation:rise .6s cubic-bezier(.2,1.3,.4,1) .08s both}
  .stk{animation:stamp .6s cubic-bezier(.2,1.4,.4,1) .45s both}
  .sub{animation:rise .6s ease .2s both}
  .fc{animation:fanin .75s cubic-bezier(.2,1.25,.4,1) backwards}
  .fc.c1{animation-delay:.3s}.fc.c2{animation-delay:.42s}.fc.c3{animation-delay:.54s}
  .deco i{animation:float 9s ease-in-out infinite alternate}
  .deco i:nth-child(2n){animation-duration:12s;animation-direction:alternate-reverse}
  .screen .rv{opacity:0;transform:translateY(24px);transition:opacity .5s ease var(--d,0ms),transform .65s cubic-bezier(.2,1.3,.4,1) var(--d,0ms)}
  .screen .rv.in{opacity:1;transform:none}
  .screen .rv.pre{transition:none}
  .trumps.deal:not(.in) .tc{opacity:0}
  .trumps.deal.in .tc{animation:deal .6s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(var(--i)*65ms)}
  .trumps.deal.in .card::after{animation:shine .9s ease;animation-delay:calc(var(--i)*65ms + .5s)}
  .tc:hover .card::after{animation:shine .8s ease}
  .card.spin{animation:spin .75s cubic-bezier(.3,1.35,.5,1)}
  .card.spin::after{animation:shine .75s ease .15s}
  .tc:hover .tag{animation:wiggle .55s ease}
  .memo.in span{animation:stamp2 .6s cubic-bezier(.2,1.5,.4,1) .2s both}
  #punkte.in .row b{animation:pop .45s cubic-bezier(.2,1.7,.4,1) backwards;animation-delay:calc(var(--i)*80ms + .3s)}
  .box.flash{animation:lift .75s cubic-bezier(.2,1.4,.4,1)}
  .sec.flash>h2,.sec.flash>.sh h2{background:linear-gradient(transparent 58%,var(--yel) 58%,var(--yel) 92%,transparent 92%) no-repeat;animation:mark 1.4s ease both}
}
@keyframes swing{from{opacity:0;transform:translateY(-14px) rotate(-16deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:rotate(18deg) scale(1.9)}60%{opacity:1;transform:rotate(2deg) scale(.94)}100%{opacity:1;transform:rotate(4deg) scale(1)}}
@keyframes stamp2{0%{opacity:0;transform:rotate(-22deg) scale(1.9)}60%{opacity:1;transform:rotate(-2deg) scale(.94)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
@keyframes fanin{from{opacity:0;transform:translate(-80px,50px) rotate(-50deg) scale(.6)}to{opacity:1;transform:var(--t)}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(18px)}}
@keyframes deal{from{opacity:0;transform:translate(-36px,-70px) rotate(-28deg) scale(.55)}to{opacity:1;transform:none}}
@keyframes shine{from{background-position:140% 0}to{background-position:-40% 0}}
@keyframes spin{from{transform:perspective(520px) rotateY(0) translateY(0)}45%{transform:perspective(520px) rotateY(200deg) translateY(-12px) scale(1.08)}to{transform:perspective(520px) rotateY(360deg) translateY(0)}}
@keyframes wiggle{0%,100%{transform:rotate(6deg)}30%{transform:rotate(-10deg) scale(1.15)}65%{transform:rotate(12deg) scale(1.05)}}
@keyframes pop{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes lift{0%{transform:none;box-shadow:5px 5px 0 var(--sh)}35%{transform:translate(-5px,-6px) rotate(-.7deg);box-shadow:11px 12px 0 var(--sh)}70%{transform:translate(1px,1px) rotate(.3deg);box-shadow:4px 4px 0 var(--sh)}100%{transform:none;box-shadow:5px 5px 0 var(--sh)}}
@keyframes mark{0%{background-size:0 100%;background-position:0 0}30%{background-size:100% 100%;background-position:0 0}75%{background-size:100% 100%;background-position:100% 0}100%{background-size:0 100%;background-position:100% 0}}
@media print{
  @page{size:A4;margin:0}
  body{background:#FFF4E6}
  .screen,.deco{display:none}
  .print{display:block}
  .page{width:210mm;height:297mm;overflow:hidden;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page:last-child{break-after:auto}
}