:root{--bg:#14161a;--fl:#1d2026;--tx:#e8e6df;--gr:#9aa0a6;--ak:#f2c94c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 system-ui,sans-serif}
header,footer{padding:1rem 1.25rem}header h1{margin:0;color:var(--ak);font-size:1.6rem}header p{margin:.25rem 0 0;color:var(--gr);max-width:60ch}
main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem;padding:0 1.25rem;max-width:1200px;margin:auto}
.buehne canvas{width:100%;height:auto;background:var(--fl);border-radius:8px;touch-action:manipulation;display:block}
.hinweis{color:var(--gr);font-size:.85rem;margin:.4rem 0}
.steuerung{background:var(--fl);border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.9rem;align-self:start}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.92rem}select,input[type=range]{width:100%}
select{background:var(--bg);color:var(--tx);border:1px solid #3a3f47;border-radius:6px;padding:.4rem}
.knoepfe{display:flex;gap:.5rem;flex-wrap:wrap}button{background:var(--ak);color:#14161a;border:0;border-radius:6px;padding:.5rem .8rem;font-weight:600;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:2px}
button#neu,button#leer{background:#3a3f47;color:var(--tx)}
.werte{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;margin:0;font-size:.88rem}.werte dt{color:var(--gr)}.werte dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.erklaerung{grid-column:1/-1;max-width:75ch}.erklaerung h2,.erklaerung h3{color:var(--ak)}.quelle{color:var(--gr);font-size:.85rem}
footer{color:var(--gr);font-size:.85rem}
@media(max-width:820px){main{grid-template-columns:1fr}}
.sprache{margin-top:.5rem}.sprache button{min-width:2.6rem;margin-right:.3rem}.sprache button[aria-pressed="true"]{font-weight:700;text-decoration:underline}