:root{font-family:'DM Sans',sans-serif;color:#18332f;background:#f3f3ea;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:88px;border-bottom:1px solid #d9dfd2;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;gap:12px}header span{font-size:10px;letter-spacing:2px}header small{border:1px solid #ccd5c8;border-radius:30px;padding:7px 12px}.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:25px;text-decoration:none;color:inherit}main{max-width:1120px;padding:50px 24px;margin:auto}.intro{margin-bottom:32px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#62796b}h1{font-family:Manrope,sans-serif;font-size:clamp(30px,4vw,46px);letter-spacing:-1.6px;margin:12px 0}.intro>p:last-child{color:#6b7970}.grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px}.card{background:#fffef8;border:1px solid #dce2d5;border-radius:22px;padding:28px;box-shadow:0 12px 35px #17352b05}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px}h2{font-size:12px;color:#849888;font-weight:500;margin:0}h2 span{font-size:17px;color:#18332f;margin-left:10px;font-weight:700}.badge{font-size:10px;background:#eaf0e5;padding:7px 10px;border-radius:30px;white-space:nowrap}.tempo{display:flex;justify-content:center;align-items:baseline;margin:28px 0 12px}.tempo input{font-family:Manrope,sans-serif;font-size:80px;font-weight:800;background:none;border:0;color:#18332f;width:180px;text-align:center;letter-spacing:-5px;padding:0}.tempo span{color:#83907e;font-size:13px}.tempo input::-webkit-inner-spin-button{display:none}input[type=range]{width:100%;accent-color:#275c49}.rangeLabels{display:flex;justify-content:space-between;font-size:10px;color:#81907f;margin-top:9px}.pendulum{height:125px;position:relative;display:flex;align-items:center;margin:10px 16px}.rail{height:1px;width:100%;background:#dce3d5}.dot{position:absolute;width:16px;height:16px;border-radius:50%;background:#c9d4c2;border:4px solid #e8eddf}.left{left:-8px}.right{right:-8px}.dot.flash{background:#e7a24b;border-color:#fae6c8;box-shadow:0 0 0 7px #f6e5cd}.line{position:absolute;left:50%;top:28px;width:3px;height:70px;border-radius:5px;background:#244d40;transform:rotate(0deg)}button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid #d6dfd0;padding:14px;color:#24493c;background:#f5f7ef;font-weight:600;min-height:48px}button:disabled{cursor:default;opacity:.45}button:hover:not(:disabled){filter:brightness(.96)}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #dd9f48;outline-offset:3px}.primary,.secondary{width:100%;background:#234e3f;color:#fff;border-color:#234e3f}.practice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.practice button{font-size:24px;background:#faf0e2;color:#825832;border-color:#eadbc5}.practice button:last-child{background:#e9f0df;color:#456638;border-color:#d7e2c9}.practice small{display:block;font-size:11px;font-weight:500;margin-top:4px}.hint{font-size:11px;color:#778474;line-height:1.6}.switch{display:flex;align-items:center;font-size:12px;gap:8px;margin-top:22px}.switch input{accent-color:#275c49;width:18px;height:18px}.pitch{text-align:center;height:178px;padding-top:28px}.pitch>span{font-family:Manrope,sans-serif;font-size:67px;letter-spacing:-3px;font-weight:800}.pitch p{font-size:12px;color:#7a8776}.meter{height:24px;border-radius:8px;background:linear-gradient(90deg,#f7e9d7,#edf2df 40%,#e1ebd3 50%,#edf2df 60%,#f7e9d7);position:relative}.center{position:absolute;left:50%;height:100%;width:1px;background:#8d9f7e}#needle{position:absolute;left:50%;top:-5px;width:3px;height:34px;background:#28553f;border-radius:3px;display:none;transition:left .08s}.pitchHint{text-align:center;font-size:12px;color:#7c886f;min-height:20px;margin:17px 0 22px}.tuning{display:flex;align-items:center;justify-content:space-between;font-size:12px;border-top:1px solid #e6eadf;padding:18px 0;gap:8px}.tuning input{width:64px;border:1px solid #d5dece;padding:8px;border-radius:6px;font:inherit}.tuning button{padding:7px;min-height:34px;font-size:10px}.recordRow{display:flex;gap:12px;align-items:center;margin-top:12px}.recordRow button{flex:1}.recordRow span{font-size:12px;color:#84917c;font-variant-numeric:tabular-nums}#recordings audio{width:100%;margin-top:16px}#recordings a{display:inline-block;font-size:12px;color:#28513d;margin:7px 0}footer{padding:32px 8px;color:#7e8979;font-size:12px;line-height:1.7;max-width:750px}footer b{color:#3f5a45}summary{cursor:pointer} @media(max-width:700px){header{height:70px;padding:0 20px}header span{display:none}main{padding:30px 16px}.grid{grid-template-columns:1fr}.card{padding:24px}.intro{margin-bottom:24px}.tempo input{font-size:72px}.heading h2 span{font-size:15px}footer{padding-top:24px}}@media(prefers-reduced-motion:reduce){#needle{transition:none}}

.analysis{margin-bottom:24px}.analysis canvas,.extras canvas{display:block;width:100%;height:210px;border-radius:10px;background:#fcfdf7;margin:12px 0}.analysisControls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.analysisControls .primary{width:auto;min-width:180px}.analysisControls .switch{margin:0}.extras{margin-top:24px}.exerciseFields{display:flex;gap:16px;margin:26px 0}.exerciseFields label{display:flex;flex:1;flex-direction:column;gap:8px;font-size:12px;color:#6b7f66}select{font:inherit;color:#24493c;padding:12px;background:#f7f9f0;border:1px solid #d6dfd0;border-radius:8px;min-height:46px}select:focus-visible{outline:3px solid #dd9f48;outline-offset:3px}@media(max-width:700px){.analysisControls button{width:100%!important}.analysisControls .switch{width:100%;margin:8px 0}.extras{gap:24px}}

.harmonicCount{font-size:17px;font-weight:700;margin:18px 0;color:#28523e}.spectralOptions{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:16px 0}.spectralOptions label{display:flex;flex-direction:column;gap:6px;font-size:12px}.harmonicTable{max-height:260px;overflow:auto;border:1px solid #e0e6d9;border-radius:10px}.harmonicTable table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}.harmonicTable th{position:sticky;top:0;background:#edf2e5;color:#59724c;font-size:10px;font-weight:600;padding:10px}.harmonicTable td{padding:9px 10px;border-top:1px solid #e9eddf;font-variant-numeric:tabular-nums}.pitchHistoryCard{margin-top:24px}.pitchHistoryCard canvas{display:block;width:100%;height:210px;background:#fcfdf7;border-radius:10px}#pitchTarget{height:240px}.targetReadout{text-align:center;color:#3b674a;font-size:14px;font-weight:700;margin:4px 0 20px}.extras canvas{height:230px}.analysis canvas{height:230px}@media(max-width:700px){.spectralOptions label,.spectralOptions button{width:100%}.harmonicTable{font-size:11px}}

.line{width:14px;margin-left:-7px;height:86px;top:20px;border-radius:7px;background:#234f3d}.line.flash{background:#f2ab48;box-shadow:0 0 0 8px #f4dcac88,0 0 22px #e4a54388}.dot.flash{background:#c9d4c2;border-color:#e8eddf;box-shadow:none}

.exerciseFields{flex-wrap:wrap}.exerciseFields label{min-width:120px}.autoNote{text-align:center;font-weight:700;color:#2d5d44;margin-top:24px}#tuningRoot:disabled{opacity:.5}

.rail{height:1cm;border-radius:8px;background:#d6e1cd}.rail.flash{background:#eaaa48;box-shadow:0 0 0 4px #f3dfb588}.line{width:.4cm;height:1.3cm;top:50%;margin-left:0;transform:translate(-50%,-50%);border-radius:3px;background:#234f3d}.line.flash{background:#234f3d;box-shadow:none}.demoPattern{display:flex;flex-direction:column;gap:6px;font-size:12px}.harmonicTable .unrecognized{color:#8b9684}.harmonicTable .unrecognized td{font-style:italic}@media(max-width:700px){.demoPattern{width:100%}.rail{height:52px}.line{width:20px;height:64px}}

#pitchTarget{height:270px}.timbreControls{display:flex;gap:10px;flex-wrap:wrap}.timbreControls button{flex:1;font-size:12px}.subharmonics{border-top:1px solid #e1e7da;margin:20px 0;padding-top:14px}.subharmonics summary{font-size:13px;font-weight:700;cursor:pointer}.subharmonics button{margin-bottom:12px}@media(max-width:700px){.timbreControls button{min-width:100%}}

:root{color:#193b5a;background:#eef4fb}header{border-color:#d3e1ef}header small{border-color:#bfd1e5}.eyebrow,.intro>p:last-child{color:#678198}.card{background:#fcfdff;border-color:#d6e4f1;box-shadow:0 12px 35px #19436606}h2{color:#91a9bd}h2 span{color:#193b5a}.badge{background:#e5eef9;color:#466c91}.tempo input{color:#193b5a}.tempo span,.rangeLabels,.hint,.pitch p,.pitchHint,footer,.exerciseFields label{color:#6a8298}input[type=range],.switch input{accent-color:#326b9e}button{color:#2b5b84;background:#f0f5fb;border-color:#cddfee}.primary,.secondary{color:white;background:#326b9e;border-color:#326b9e}.practice button:last-child{color:#326b9e;background:#e4eefb;border-color:#cbdcf1}.tuning{border-color:#dce7f2}.tuning input{border-color:#c4d8ed}.meter{background:linear-gradient(90deg,#edf2f9,#d9eafa 50%,#edf2f9)}.center{background:#82a9cd}#needle{background:#326b9e}.exerciseFields select,select{color:#2b5b84;background:#f2f7fc;border-color:#cfdfef}.analysis canvas,.extras canvas,.pitchHistoryCard canvas{background:#f8fbff}.harmonicCount,.autoNote,.targetReadout,footer b{color:#2e6393}.harmonicTable{border-color:#d6e5f3}.harmonicTable th{background:#e7f0fa;color:#527695}.harmonicTable td{border-color:#e5eef7}.harmonicTable .unrecognized{color:#8599ae}.subharmonics{border-color:#d6e5f3}.rail{background:#cfe0f3}.rail.flash{background:#79aede;box-shadow:0 0 0 4px #a7c8e955}.dot,.dot.flash{background:#85aacf;border-color:#dceafa;box-shadow:none}.line,.line.flash{background:#d33c50;box-shadow:none}

.timbreGoal{margin:18px 0;padding:14px;border:1px solid #d4e3f2;background:#f0f6fe;border-radius:10px}.timbreGoal>label{display:block;font-size:13px;font-weight:700;margin-bottom:12px}.timbreGoal .rangeLabels{font-size:9px}

.spectrumRootControls{display:flex;flex-wrap:wrap;gap:10px}.spectrumRootControls button{flex:1;min-width:180px}

/* Dynamik und kalibrierbarer Mikrofonpegel */
.levelCard{margin-top:24px}.levelReadout{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px 0}.levelReadout>div{display:flex;flex-direction:column;gap:6px}.levelReadout strong{font-family:Manrope,sans-serif;font-size:clamp(32px,6vw,52px);color:#193b5a;font-variant-numeric:tabular-nums}.levelReadout span{font-size:12px;color:#587189}.dynamicReadout{text-align:right}.dynamicReadout strong{font-style:italic;color:#326b9e}.levelCard meter{width:100%;height:22px;accent-color:#326b9e}.levelCard details{border-top:1px solid #d4e1ee;padding:18px 0 6px}.levelCard summary{font-size:13px;font-weight:600;min-height:30px}.levelControls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:18px}.levelControls label{display:flex;flex-direction:column;gap:8px;font-size:12px}.levelControls input{font:inherit;padding:12px;border:1px solid #c4d6e6;border-radius:8px;max-width:230px;min-height:48px}.levelTableScroll{overflow-x:auto;margin-top:12px}.levelCard table{border-collapse:collapse;width:100%;min-width:560px;font-size:12px;text-align:left}.levelCard td,.levelCard th{padding:12px 10px;border-bottom:1px solid #d9e4ee;line-height:1.6}.levelCard tbody th{font-size:20px;font-style:italic;color:#326b9e}.levelCard small{color:#587189}.line,.line.flash{background:#326b9e}@media(max-width:700px){.levelControls{display:grid;grid-template-columns:1fr}.levelControls input{max-width:100%;width:100%}.levelReadout{gap:12px}.levelReadout span{font-size:11px}.dynamicReadout{max-width:45%}}

.dynamicsHistory{margin:24px 0}.dynamicsHistory h3{font-size:14px}.dynamicsHistory canvas,.rhythmPanel canvas{display:block;width:100%;height:220px;background:#f5f9fd;border-radius:10px}.rhythmPanel canvas{height:180px;margin-top:12px}.rhythmPanel{margin-top:20px;border-top:1px solid #d4e1ee;padding-top:18px}.rhythmPanel summary{font-size:13px;font-weight:600}.rhythmResult{font-size:20px;font-weight:700;color:#326b9e}.latencyLabel{display:flex;align-items:center;gap:12px;font-size:12px;flex-wrap:wrap}.latencyLabel input{width:90px;padding:10px;border:1px solid #c4d6e6;border-radius:8px;font:inherit}

.responsePanel{margin-top:24px;padding-top:16px;border-top:1px solid #d4e1ee}.responsePanel h3{font-size:14px}.responsePanel button{width:100%}.responsePanel summary{font-size:12px}

.pwaInstall{border:1px solid #c4d6e6;background:#f6faff;border-radius:14px;padding:18px 22px;margin-bottom:24px;font-size:12px;line-height:1.7;color:#385c7c}.pwaInstall summary{font-weight:700;min-height:26px}.pwaInstall p{max-width:750px}body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}header{padding-top:env(safe-area-inset-top);height:calc(88px + env(safe-area-inset-top))}main{padding-bottom:calc(50px + env(safe-area-inset-bottom))}@media(max-width:700px){header{height:calc(70px + env(safe-area-inset-top))}.pwaInstall{padding:16px}main{padding-bottom:calc(30px + env(safe-area-inset-bottom))}}