:root{--canvas:#fafafa;--karte:#fff;--rand:#eaeaea;--ink-1:#111;--ink-2:#555;--ink-3:#8a8a8a;color:var(--ink-1);background:var(--canvas);font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--canvas:#000;--karte:#0a0a0a;--rand:#262626;--ink-1:#f5f5f5;--ink-2:#a3a3a3;--ink-3:#6b6b6b}}*{box-sizing:border-box}body{background:var(--canvas);-webkit-font-smoothing:antialiased;margin:0}main{max-width:960px;margin:0 auto;padding:48px 16px}h1{letter-spacing:-.02em;margin:0 0 4px;font-size:40px}.satz{color:var(--ink-2);margin:0 0 32px}nav{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}nav a{border:1px solid var(--rand);background:var(--karte);color:var(--ink-1);border-radius:16px;flex-direction:column;gap:2px;padding:14px;text-decoration:none;display:flex}nav a small{color:var(--ink-2);font-size:13px}.stempel{color:var(--ink-3);margin-top:32px;font-size:12.5px}main.eng{max-width:400px;padding-top:min(18vh,140px)}.marke{letter-spacing:-.01em;color:var(--ink-2);margin-bottom:24px;font-size:15px;font-weight:800}.kopf{justify-content:space-between;align-items:center;gap:16px;display:flex}.knopf{all:unset;box-sizing:border-box;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;width:100%;height:52px;margin-top:10px;font-size:16px;font-weight:600;display:flex}.knopf.laut{background:var(--ink-1);color:var(--canvas)}.knopf.leise{color:var(--ink-2)}.knopf.leise:hover{color:var(--ink-1)}.knopf.klein{border:1px solid var(--rand);width:auto;height:40px;margin:0;padding:0 16px}.knopf:disabled{opacity:.5;cursor:default}.knopf:focus-visible{outline:2px solid var(--ink-1);outline-offset:2px}.feld{flex-direction:column;gap:6px;margin-top:8px;display:flex}.feld span{color:var(--ink-2);font-size:13px}.feld input{border:1px solid var(--rand);background:var(--karte);height:52px;color:var(--ink-1);font:inherit;border-radius:14px;outline:none;padding:0 14px;font-size:16px}.feld input:focus{border-color:var(--ink-2)}.meldung{color:var(--ink-2);margin-top:16px;font-size:14px;line-height:1.45}:root{--feder:cubic-bezier(.2,1.1,.3,1)}main.eng.mit-tasten{text-align:center;padding-top:min(8vh,64px)}main.eng.mit-tasten .satz{margin-bottom:24px}.pin{flex-direction:column;align-items:center;margin:8px 0 12px;display:flex}.pin-titel{color:var(--ink-1);max-width:300px;min-height:21px;margin:0 0 18px;font-size:15px;font-weight:500;line-height:1.4}.pin-punkte{gap:20px;margin-bottom:36px;display:flex}.pin-punkte span{border:1.5px solid var(--ink-2);border-radius:50%;width:14px;height:14px;transition:background .12s,border-color .12s}.pin-punkte span.voll{background:var(--ink-1);border-color:var(--ink-1);animation:pin-pop .32s var(--feder)}.pin-punkte.wackelt{animation:.42s cubic-bezier(.36,.07,.19,.97) pin-wackeln}@keyframes pin-pop{0%{transform:scale(.6)}to{transform:scale(1)}}@keyframes pin-wackeln{15%,85%{transform:translate(-3px)}30%,70%{transform:translate(9px)}45%{transform:translate(-10px)}60%{transform:translate(6px)}}.pin-tasten{grid-template-columns:repeat(3,76px);gap:16px 26px;display:grid}.taste{all:unset;box-sizing:border-box;font-variant-numeric:tabular-nums;background:var(--karte);border:1px solid var(--rand);width:76px;height:76px;color:var(--ink-1);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .38s var(--feder),background .18s;border-radius:50%;place-items:center;font-size:30px;line-height:1;display:grid}.taste:active{background:var(--rand);transition-duration:60ms;transform:scale(.9)}.taste:focus-visible{outline:2px solid var(--ink-1);outline-offset:2px}.taste.leer{color:var(--ink-2);background:0 0;border:none;font-size:15px}.taste.leer:disabled{opacity:0;cursor:default}@media (prefers-reduced-motion:reduce){.pin-punkte span.voll,.pin-punkte.wackelt{animation:none}.taste{transition:none}}.geraet{border:1px solid var(--rand);background:var(--karte);color:var(--ink-2);border-radius:16px;justify-content:space-between;align-items:center;gap:16px;margin:32px 0 0;padding:12px 12px 12px 18px;font-size:14px;line-height:1.4;display:flex}.geraet .knopf{white-space:nowrap;flex:none}