:root{--grund:#f7f3ea;--grund-warm:#f1eadc;--papier:#fffdf8;--text:#203a32;--akzent:#8b3f49;--leise:#5a6e66;--linie:#ddd5c4;--blatt:#4a7c59;--blatt-tief:#2f5d43;--rinde:#6b5344;--serif:Georgia, "Iowan Old Style", "Times New Roman", serif;--sans:system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;font-family:var(--sans);color:var(--text);background:var(--grund);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.55}*{box-sizing:border-box}html,body,#root{background:var(--grund);height:100%;margin:0}button,input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}.app{--klang:var(--blatt);height:100%;position:relative;overflow:hidden}.stage{position:absolute;inset:0}.panel{border:1px solid var(--linie);-webkit-backdrop-filter:blur(6px);background:#f7f3eadb;border-radius:6px;position:absolute}.intro{width:min(380px,100% - 48px);padding:20px 24px 16px;top:24px;left:24px}.marke{font-family:var(--serif);color:var(--text);font-size:17px;text-decoration:none}.marke span{color:var(--akzent)}h1,h2{font-family:var(--serif);color:var(--text);font-weight:400}h1{margin:14px 0 6px;font-size:32px;line-height:1.15}.leitsatz{font-family:var(--serif);color:var(--akzent);margin:0 0 18px;font-size:19px;line-height:1.4}.feld-label{color:var(--leise);margin-bottom:6px;font-size:15px;display:block}.name-field input{width:100%;font-family:var(--serif);background:var(--papier);border:1px solid var(--linie);border-radius:3px;outline:none;padding:10px 14px;font-size:24px;transition:border-color .2s}.name-field input:focus{border-color:var(--blatt)}.letters{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.letter{background:var(--papier);border:1px solid var(--linie);cursor:pointer;border-radius:3px;justify-items:center;min-width:40px;padding:5px 6px 4px;transition:border-color .2s,transform .2s;display:grid}.letter:hover{border-color:var(--blatt);transform:translateY(-1px)}.letter .ch{font-family:var(--serif);color:var(--blatt-tief);font-size:18px;line-height:1.2}.letter.vokal .ch{color:var(--akzent)}.letter .nt{color:var(--leise);font-size:11px}.how{margin-top:14px;font-size:15px;line-height:1.6}.how summary{cursor:pointer;color:var(--akzent)}.how p{margin:8px 0 0}.how .fein{color:var(--leise);font-size:14px}.result{width:320px;max-height:calc(100% - 140px);padding:20px 22px 14px;top:24px;right:24px;overflow:auto}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin:0;font-size:13px}.result h2{color:var(--klang);margin:4px 0 8px;font-size:30px;line-height:1.15;transition:color .8s}.beschreibung{margin:0 0 10px;font-size:16px}.vokale{border-top:1px solid var(--linie);color:var(--leise);margin:0;padding-top:10px;font-size:15px}.vokale b{color:var(--text);font-weight:500}.result h3{font-family:var(--serif);margin:18px 0 6px;font-size:18px;font-weight:400}.intervals{margin:0;padding:0;list-style:none}.intervals button{border:none;border-bottom:1px solid var(--linie);cursor:pointer;text-align:left;background:0 0;grid-template-columns:10px 58px 1fr auto;align-items:center;gap:8px;width:100%;padding:6px 8px;font-size:15px;transition:background .2s;display:grid}.intervals li:last-child button{border-bottom:none}.intervals button:hover{background:var(--grund-warm)}.intervals button.on{background:var(--grund-warm);box-shadow:inset 2px 0 0 var(--akzent)}.intervals .punkt{border-radius:50%;width:8px;height:8px}.intervals .pair{font-family:var(--serif);white-space:nowrap}.intervals .ratio{color:var(--leise);font-variant-numeric:tabular-nums;font-size:13px}.controls{white-space:nowrap;align-items:center;gap:16px;padding:10px 14px;display:flex;bottom:24px;left:50%;transform:translate(-50%)}.knopf{background:var(--text);color:var(--grund);cursor:pointer;border:none;border-radius:3px;padding:10px 20px;font-weight:500;transition:background .3s}.knopf:hover{background:var(--blatt-tief)}.knopf.spielt{background:var(--akzent)}.knopf:disabled{opacity:.4;cursor:default}.segmented{border:1px solid var(--linie);background:var(--papier);border-radius:3px;display:flex}.segmented button{color:var(--leise);cursor:pointer;background:0 0;border:none;padding:7px 12px;font-size:15px}.segmented button+button{border-left:1px solid var(--linie)}.segmented button.on{background:var(--grund-warm);color:var(--text)}.slider,.select{color:var(--leise);align-items:center;gap:8px;font-size:15px;display:flex}.slider input{width:90px;accent-color:var(--blatt)}.select select{background:var(--papier);border:1px solid var(--linie);border-radius:3px;padding:6px 8px;font-size:15px}@media (width<=900px){.app{flex-direction:column;gap:12px;height:auto;min-height:100%;padding:0 16px 24px;display:flex;overflow:visible}.stage{z-index:0;height:52vh;margin:0 -16px;position:sticky;top:0}.panel{z-index:1;width:auto;max-height:none;position:relative;inset:auto;transform:none}.intro{order:1}.controls{white-space:normal;flex-wrap:wrap;order:2;justify-content:center}.result{order:3}h1{font-size:28px}}