*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#8FD8FF;font-family:"Arial Rounded MT Bold","Nunito","Trebuchet MS",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
#welt{position:fixed;inset:0;display:block;touch-action:none}
body.icon .hud,body.icon .schirm{display:none!important}
.hud{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 14px 0;pointer-events:none}
.hud[hidden]{display:none}
.rund{pointer-events:auto;width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:#FF8A3D;box-shadow:0 4px 0 #C85A10,0 6px 14px rgba(0,0,0,.2);display:grid;place-items:center;cursor:pointer;padding:0}
.rund:active{transform:translateY(3px);box-shadow:0 1px 0 #C85A10}
.rund svg{width:28px;height:28px;fill:#fff;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#b-ton .welle,#b-ton .x{fill:none}
#b-ton .x{display:none}
#b-ton.aus .x{display:block}#b-ton.aus .welle{display:none}
.schirm{position:fixed;inset:0;display:none;pointer-events:none}
.schirm.an{display:block}
.knopf-gc{pointer-events:auto;position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;display:flex;align-items:center;gap:4px;padding:10px 16px 10px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.9);color:#5A2A10;font:inherit;font-size:16px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.18);cursor:pointer}
.knopf-gc[hidden]{display:none}
.knopf-gc svg{width:22px;height:22px;fill:none;stroke:#FF8A3D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.karte{pointer-events:auto;position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,520px);background:rgba(255,255,255,.94);border-radius:32px;padding:20px 22px 16px;text-align:center;box-shadow:0 10px 0 rgba(200,90,16,.35),0 18px 40px rgba(0,0,0,.25);border:4px solid #FF8A3D}
.karte h1{margin:0;font-size:clamp(54px,14vw,96px);line-height:1;color:#FF8A3D;letter-spacing:.02em;-webkit-text-stroke:3px #5A2A10;paint-order:stroke fill;text-shadow:0 5px 0 #5A2A10}
.unter{margin:6px 0 0;font-size:clamp(22px,5.5vw,32px);font-weight:800;color:#5A2A10}
.claim{margin:4px 0 14px;font-size:16px;color:#8A5A3A;font-weight:700}
.gross{display:block;width:100%;border:0;border-radius:999px;padding:18px;font:inherit;font-size:clamp(26px,6.5vw,34px);font-weight:900;color:#fff;background:linear-gradient(#FFA25A,#FF7A1F);box-shadow:0 6px 0 #C85A10;cursor:pointer;animation:wipp 1.6s ease-in-out infinite}
.gross:active{transform:translateY(4px);box-shadow:0 2px 0 #C85A10}
@keyframes wipp{50%{transform:scale(1.04)}}
.klein{margin-top:12px;border:2px solid #FFB47A;background:#fff;border-radius:999px;padding:8px 20px;font:inherit;font-size:16px;font-weight:800;color:#8A4A1A;cursor:pointer}
.hinweis{margin:12px 0 4px;font-size:15px;color:#5A3A2A;line-height:1.35}
.fuss{margin:6px 0 0;font-size:12px;color:#A07050;letter-spacing:.04em}
@media (min-aspect-ratio:21/20){
  .karte{left:auto;right:4vw;bottom:auto;top:50%;transform:translateY(-50%);width:min(44vw,480px)}
}
@media (max-height:560px) and (min-aspect-ratio:21/20){.karte{padding:12px 16px}.claim{margin-bottom:8px}.hinweis{display:none}}