*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#3FA9F5;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{font-family:"Trebuchet MS","Verdana",system-ui,sans-serif;color:#18324a}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;display:flex;gap:8px;z-index:5}
.knopf{width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:#ffffffd0;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #1f6fae55}
.knopf svg{width:24px;height:24px;fill:#1f6fae;stroke:#1f6fae;stroke-width:0}
#hMenu svg,#hTon svg{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#hTon.aus{opacity:.55}
#menu{position:fixed;inset:0;display:none;place-items:center;background:#0a3a6688;z-index:10;padding:16px}
#menu.zeige{display:grid}
.karte{background:#fff;border-radius:28px;padding:28px 24px;max-width:460px;width:100%;text-align:center;box-shadow:0 10px 0 #1f6fae,0 20px 40px #0005}
.logo{font-size:clamp(38px,11vw,58px);font-weight:900;letter-spacing:1px;color:#3FA9F5;text-shadow:0 4px 0 #1f6fae}
.logo span{color:#FFB938;text-shadow:0 4px 0 #c97f10}
.unter{font-size:20px;font-weight:700;margin:6px 0 12px;color:#e2526b}
.karte p{font-size:16px;line-height:1.45;margin-bottom:18px}
button,.reihe a{font:inherit;font-weight:800;border:0;border-radius:16px;cursor:pointer;text-decoration:none}
.gross{display:block;width:100%;font-size:26px;padding:16px;background:#4CD964;color:#fff;box-shadow:0 6px 0 #2a9c43;margin-bottom:14px}
.gross:active{transform:translateY(4px);box-shadow:0 2px 0 #2a9c43}
.reihe{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.reihe button,.reihe a{flex:1;font-size:17px;padding:11px;background:#e8f4fe;color:#1f6fae;box-shadow:0 4px 0 #b8d8f2}
.hilfe{font-size:13px;color:#4b6378;line-height:1.5}
.alter{margin-top:10px;font-size:12px;color:#8aa0b3;font-weight:700}