/* Wortabdruck, Fragestellung und Hintergrund: im Stil von print.css */
.question{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:baseline;margin:0 0 20px;padding:0 1px 18px;border-bottom:1px solid #e2e8ed}
.question-text{margin:0;max-width:62ch;color:#142333;font-size:clamp(15px,1.5vw,19px);line-height:1.45;text-wrap:pretty}
.word-instrument{margin-bottom:0}
.word-fields label{color:#64748b;font:9px var(--mono);letter-spacing:.08em}
.word-fields input,.word-fields select{width:100%;min-width:0;padding:8px 10px;border:1px solid #c9d7e2;border-radius:7px;background:#fff;color:#142333;font-size:14px}
.word-fields input:focus-visible,.word-fields select:focus-visible{outline:2px solid #167db4;outline-offset:1px}
.file-pick{display:block;margin-top:9px;color:#075b91;font:9px var(--mono);letter-spacing:.05em;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.file-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-pick:focus-within{outline:2px solid #167db4;outline-offset:3px}
.unused-pair{display:grid;gap:7px;margin-top:18px;padding-top:14px;border-top:1px solid #e2e8ed}
.pair-row{display:flex;align-items:center;gap:10px;min-width:0}
.pair-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#142333;font-size:12px}
.pair button,.word-instrument .deck-bottom button{padding:7px 10px;border:1px solid #b9cddd;border-radius:7px;background:#fff;color:#075b91;font:9px var(--mono);letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.pair button:hover:not(:disabled),.word-instrument .deck-bottom button:hover:not(:disabled){background:#eff7fb;border-color:#75acd0}
.pair button:disabled,.word-instrument .deck-bottom button:disabled{opacity:.45;cursor:default}
.word-instrument .deck-bottom{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
#word-plate{display:block;width:100%;height:100%}
#word-meta{overflow-wrap:anywhere}
.context{margin-top:22px;padding:17px 1px;border-top:1px solid #e2e8ed}
.context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:12px}
.context-grid p{margin:0;color:#475569;font-size:12px;line-height:1.55}
.context-grid b{color:#142333;font-weight:600}
.reading + .instrument{margin-top:26px}
@media(max-width:900px){.context-grid{grid-template-columns:1fr;gap:14px}}
@media(max-width:640px){.question{grid-template-columns:1fr;gap:6px}.question-text{font-size:15px}}
.examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.examples .eyebrow{flex-basis:100%}.examples button{padding:6px 9px;border:1px solid #b9cddd;border-radius:7px;background:#fff;color:#075b91;font:9px var(--mono);cursor:pointer}.examples button:hover{background:#eff7fb}

/* geführter Ablauf */
.word-deck{gap:0}
.word-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.word-steps li{display:grid;gap:10px}
.step-title{display:flex;align-items:center;gap:10px;color:#142333;font-size:15px;font-weight:600}
.step-title b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#075b91;color:#fff;font-size:12px}
.word-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.word-fields input,.word-fields select{width:100%;min-width:0;padding:10px 12px;border:1px solid #c9d7e2;border-radius:8px;background:#fff;color:#142333;font-size:15px}
.word-fields input:focus-visible,.word-fields select:focus-visible{outline:2px solid #167db4;outline-offset:1px}
.record-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px;border:0;border-radius:12px;background:#b3261e;color:#fff;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 6px 16px #b3261e33}
.record-button:hover{background:#9c1f18}
.record-button:disabled{background:#6b7280;box-shadow:none;cursor:default}
.record-button:focus-visible{outline:3px solid #142333;outline-offset:3px}
.record-dot{width:14px;height:14px;border-radius:50%;background:#fff}
.word-level{height:8px;border-radius:99px;background:#e2e8ed;overflow:hidden}
.word-level i{display:block;height:100%;width:0;background:#1f7a3f;transition:width .06s linear}
.word-hint{margin:0;color:#334155;font-size:13px;line-height:1.5}
.word-hint[data-tone=error]{color:#b3261e}
.word-hint[data-tone=ok]{color:#1f7a3f}
.file-pick{font:12px var(--sans);letter-spacing:0;margin-top:0}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:8px;border:1px dashed #b9cddd;border-radius:10px;background:#fff;text-align:left;cursor:default;min-width:0}
.slot canvas{grid-row:1/4;width:52px;height:52px;border-radius:50%;background:#e8eef2}
.slot-key{color:#075b91;font:600 10px var(--mono)}
.slot-word{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:14px;font-weight:600}
.slot-lang{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:11px}
.slot.filled{border-style:solid;cursor:pointer}
.slot.filled .slot-word{color:#142333}.slot.filled .slot-lang{color:#64748b}
.slot.filled:hover{border-color:#75acd0;background:#f5fafd}
.word-downloads{display:grid;gap:8px;margin-top:auto;padding-top:18px}
.word-downloads button{padding:10px 12px;border:1px solid #b9cddd;border-radius:8px;background:#fff;color:#075b91;font-size:13px;font-weight:600;cursor:pointer}
.word-downloads button:disabled{opacity:.45;cursor:default}
.word-downloads .primary-download:not(:disabled){background:#075b91;border-color:#075b91;color:#fff}
.word-big{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none;color:#f3efe5;font-size:clamp(40px,7vw,96px);font-weight:600;text-shadow:0 2px 24px #000a}
@media(max-width:640px){.word-fields{grid-template-columns:1fr}.slots{grid-template-columns:1fr}}

/* Lesbarkeit: Erklärtexte deutlich grösser */
.reading{grid-template-columns:180px minmax(0,1fr)}
.reading p{font-size:15px;line-height:1.6;color:#334155;max-width:70ch}
.reading-note{font-size:12px;max-width:none;text-align:left;grid-column:2}
.reading .eyebrow,.context .eyebrow,.sources .eyebrow,.question .eyebrow{font-size:11px}
.context-grid p{font-size:15px;line-height:1.6;color:#334155}
.sources summary>span:last-child{font-size:12px}
.sources-body{font-size:15px;line-height:1.65;color:#334155;max-width:76ch}
.sources-body p{margin:0 0 12px}
.sources-body ul{gap:6px}
.mic-copy small,#mic-help{font-size:13px}
.mic-copy p{font-size:16px}
.mapping{font-size:13px}
.model-basis p{font-size:13px}
.plate-foot{font-size:11px}
.plate-head{font-size:11px}
.plate-overlay{font-size:11px}
.footnote p,.footnote>span{font-size:12px}
.word-note{margin:0;color:#64748b;font-size:12px;line-height:1.45}
@media(max-width:640px){.reading{grid-template-columns:1fr}.reading-note{grid-column:1}.reading p,.context-grid p,.sources-body{font-size:15px}.plate-foot,.plate-head,.plate-overlay{font-size:9px}}
.spectrum-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:10px 3px 0;color:#5f7183;font:11px var(--mono);letter-spacing:.06em}#word-spectrum{display:block;width:100%;height:56px;border-radius:6px}
@media(max-width:640px){.spectrum-row{grid-template-columns:1fr;font-size:9px}}

/* Sprache, Wort, Stimme */
.lang-picker{position:relative}
.lang-picker input,.word-input{width:100%;min-width:0;padding:11px 12px;border:1px solid #c9d7e2;border-radius:8px;background:#fff;color:#142333;font-size:16px}
.lang-picker input:focus-visible,.word-input:focus-visible{outline:2px solid #167db4;outline-offset:1px}
.lang-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:300px;overflow-y:auto;margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid #c9d7e2;border-radius:10px;box-shadow:0 12px 28px #14233326}
.lang-list li[role=option]{padding:8px 14px;color:#142333;font-size:15px;cursor:pointer}
.lang-list li[role=option].active,.lang-list li[role=option]:hover{background:#e8f2f9}
.lang-list li[aria-selected=true]{font-weight:600}
.lang-group{padding:10px 14px 4px;color:#64748b;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.lang-none{padding:10px 14px;color:#64748b;font-size:14px}
.word-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.word-chips span{color:#64748b;font-size:12px}
.word-chips button{padding:5px 10px;border:1px solid #c9d7e2;border-radius:99px;background:#fff;color:#075b91;font-size:14px;cursor:pointer}
.word-chips button:hover{background:#eff7fb;border-color:#75acd0}
.voice-switch{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.voice-switch label{position:relative}
.voice-switch input{position:absolute;opacity:0;inset:0}
.voice-switch span{display:block;padding:10px;border:1px solid #c9d7e2;border-radius:8px;background:#fff;color:#142333;font-size:15px;text-align:center;cursor:pointer}
.voice-switch input:checked+span{background:#142333;border-color:#142333;color:#fff}
.voice-switch input:disabled+span{background:#f1f4f7;border-style:dashed;color:#9aa8b5;cursor:not-allowed}
.voice-switch input:focus-visible+span{outline:2px solid #167db4;outline-offset:2px}
.speak-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;border:0;border-radius:12px;background:#075b91;color:#fff;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 6px 16px #075b9133}
.speak-button:hover{background:#064a77}
.speak-button:disabled{background:#6b7280;box-shadow:none;cursor:wait}
.speak-button:focus-visible{outline:3px solid #142333;outline-offset:3px}
.more-input{border-top:1px solid #e2e8ed;padding-top:10px}
.more-input summary{color:#075b91;font-size:13px;cursor:pointer}
.more-body{display:grid;gap:10px;margin-top:10px}
.record-button{padding:11px;font-size:15px;background:#fff;color:#b3261e;border:1px solid #e3b4b0;box-shadow:none}
.record-button:hover{background:#fdf2f1}
.record-button .record-dot{background:#b3261e}
.record-button:disabled{background:#f1f5f9;color:#6b7280}
/* Signalkette */
.chain{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0 0 16px;padding:0;list-style:none;counter-reset:chain}
.chain li{position:relative;display:grid;gap:4px;padding:12px 14px 12px 12px;border:1px solid #c9d7e2;border-right:0;background:#f8fafc;min-width:0}
.chain li:last-child{border-right:1px solid #c9d7e2;border-radius:0 10px 10px 0}
.chain li:first-child{border-radius:10px 0 0 10px}
.chain li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:1;padding:0 2px;background:#fff;color:#075b91;font-size:14px}
.chain b{color:#142333;font-size:15px}
.chain span{color:#475569;font-size:13px;line-height:1.35}
.context-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chain{grid-template-columns:repeat(3,minmax(0,1fr))}.chain li{border-right:1px solid #c9d7e2;border-radius:0!important}.chain li::after{display:none}}
@media(max-width:640px){.context-grid{grid-template-columns:1fr}.chain{grid-template-columns:1fr 1fr}}
.reflection{margin-top:6px}
.word-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.listen-button{padding:7px 14px;border:1px solid #b9cddd;border-radius:99px;background:#fff;color:#075b91;font:600 13px var(--sans);cursor:pointer}.listen-button:hover:not(:disabled){background:#eff7fb}.listen-button:disabled{opacity:.45;cursor:default}
.listen-button:not(:disabled){background:#075b91;border-color:#075b91;color:#fff;padding:9px 18px;font-size:14px}
.listen-button:hover:not(:disabled){background:#064a77}

/* Aufnehmen → Anhören, A/B mit eigener Wiedergabe */
.record-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.record-button.is-play{background:#1f7a3f;border-color:#1f7a3f;color:#fff}
.record-button.is-play .record-dot{width:0;height:0;border-radius:0;background:none;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.record-button.is-play:hover{background:#18632f}
.rerecord-button{padding:0 14px;border:1px solid #e3b4b0;border-radius:12px;background:#fff;color:#b3261e;font-size:13px;font-weight:600;cursor:pointer}
.rerecord-button:hover{background:#fdf2f1}
.slot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:0;border:1px dashed #b9cddd;border-radius:10px;background:#fff;min-width:0;overflow:hidden}
.slot.filled{border-style:solid}
.slot.current{border-color:#075b91;box-shadow:0 0 0 2px #075b9133}
.slot-show{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;align-items:center;padding:8px;border:0;background:none;text-align:left;cursor:pointer;min-width:0;font:inherit}
.slot-show:disabled{cursor:default}
.slot-show canvas{grid-row:1/4;width:52px;height:52px;border-radius:50%;background:#e8eef2}
.slot-play{width:44px;height:44px;margin-right:8px;border:0;border-radius:50%;background:#075b91;color:#fff;font-size:16px;cursor:pointer}
.slot-play:hover:not(:disabled){background:#064a77}
.slot-play:disabled{background:#e2e8ed;color:#94a3b8;cursor:default}
.slot-play:focus-visible,.slot-show:focus-visible{outline:2px solid #167db4;outline-offset:2px}
.slot.filled .slot-word{color:#142333}.slot.filled .slot-lang{color:#64748b}
.slots{grid-template-columns:1fr}
.or-line{display:flex;align-items:center;gap:10px;color:#64748b;font-size:12px;margin-top:4px}.or-line::before,.or-line::after{content:"";flex:1;border-top:1px solid #e2e8ed}
.mic-input{display:grid;gap:10px}
/* Sprachwahl als zwei Felder: aktiv schwarz gefüllt, inaktiv umrandet */
.ui-lang{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px}
.ui-lang button{min-width:44px;padding:6px 10px;border:1px solid #cbd5e1;background:#fff;color:#142333;font:600 12px var(--sans);letter-spacing:.04em;cursor:pointer}
.ui-lang button[aria-pressed=true]{background:#111;border-color:#111;color:#fff;cursor:default}
.ui-lang button:hover:not([aria-pressed=true]){border-color:#142333}
.ui-lang button:focus-visible{outline:2px solid #167db4;outline-offset:2px}

/* Seitenleiste: Navigation, Erklärungen, Quellen, Sprache */
body.with-side{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:14px;padding:22px 18px 16px;background:#f7f6f2;border-right:1px solid #dedbd2;overflow-y:auto;color:#142333}
.side-brand{display:grid;gap:2px;padding-bottom:14px;border-bottom:1px solid #dedbd2}
.side-club{font:800 22px/1 var(--sans);letter-spacing:.02em;color:#111}
.side-term{font:600 11px var(--mono);letter-spacing:.08em;color:#64748b}
.side-title{margin-top:10px;font-size:17px}
.side-brand small{font:11px var(--mono);letter-spacing:.06em;color:#64748b}
.side-nav{display:grid;gap:2px}
.side-nav a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:4px;color:#142333;font-size:15px;text-decoration:none}
.side-nav a:hover,.side-nav a:focus-visible{background:#fff}
.side-nav a span{width:16px;text-align:center;color:#075b91}
.side-info{display:grid;gap:0;border-top:1px solid #dedbd2}
.side-block{border-bottom:1px solid #dedbd2}
.side-block summary{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.side-block summary::-webkit-details-marker{display:none}
.side-block summary::after{content:"+";font-size:20px;font-weight:400;color:#142333}
.side-block[open] summary::after{content:"−"}
.side-block > :not(summary){margin:0 4px 14px}
.side-block p,.side-block li{font-size:14px;line-height:1.55;color:#334155}
.side .question-text{font-size:15px;line-height:1.5;color:#142333}
.howto{margin:0 4px 14px;padding-left:20px;display:grid;gap:6px}
.side-items{display:grid;gap:12px}
.side-items p{margin:0}
.side .chain{grid-template-columns:1fr;margin:0 4px 12px}
.side .chain li{border:1px solid #c9d7e2!important;border-bottom:0!important;border-radius:0!important;padding:8px 10px}
.side .chain li:last-child{border-bottom:1px solid #c9d7e2!important}
.side .chain li::after{display:none}
.side .chain b{font-size:14px}.side .chain span{font-size:12.5px}
.side .reading-note{display:block;font:11px var(--mono);color:#64748b}
.side .sources-body{max-width:none;font-size:14px}
.side .sources-body ul{padding-left:18px;display:grid;gap:6px}
.side .sources-body a{color:#075b91}
.side-foot{margin-top:auto;display:grid;gap:10px;padding-top:12px;border-top:1px solid #dedbd2}
.side-foot .ui-lang{width:100%}
.side-foot .ui-lang button{padding:9px 0;font-size:14px}
.side-foot .build{font:10px var(--mono);letter-spacing:.06em;color:#94a3b8}
body.with-side main{margin:18px clamp(12px,2vw,28px) 28px;min-width:0}
@media(max-width:1000px){
  body.with-side{display:block}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid #dedbd2}
  .side-foot{margin-top:0}
}
@media(max-width:1000px){.side-nav{display:none}.side{gap:8px;padding:16px}.side-brand{padding-bottom:8px}}
/* Wortabdruck: Membran füllt die Höhe der Spalte, keine Leerfläche darunter */
.word-instrument{align-items:start}
.word-instrument .plate-shell{position:sticky;top:16px}
.word-instrument .plate-window{width:100%;height:auto;aspect-ratio:1/1;max-height:calc(100vh - 190px);min-height:340px}
@media(max-width:900px){.word-instrument .plate-shell{position:static}}
body.with-side main{max-width:none}
.record-row{display:flex;gap:8px}
.record-row .record-button{flex:1 1 auto}
.rerecord-button{flex:0 0 auto}
.slot-key{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#075b91;color:#fff!important;font:700 11px var(--sans)!important}
.volume{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;font-size:13px;color:#334155}.volume input{width:100%;accent-color:#075b91}
.voice-note{margin:-2px 0 0;font-size:12px;color:#1f7a3f}.voice-note[data-kind=machine]{color:#8a5a00}

/* Einzelton: formula on the plate and the computed mode map */
.plate-formula{position:absolute;left:18px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:3px;padding:8px 11px;border-radius:6px;background:#071523b8;color:#a9c0d0;font:11px var(--mono);letter-spacing:.03em;pointer-events:none;max-width:calc(100% - 36px)}
.plate-formula b{color:#f0dfb6;font-weight:600;font-size:12px}
.word-instrument .plate-formula{display:none}
.mode-map{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.mode-map-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mode-map-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px 4px;border:1px solid #c9d7e2;border-radius:8px;background:#fff;cursor:pointer}
.mode-map-grid button:hover{border-color:#75acd0;background:#f3f8fb}
.mode-map-grid button.active{border-color:#075b91;background:#e8f2f8;box-shadow:0 0 0 1px #075b91 inset}
.mode-map-grid canvas{width:100%;aspect-ratio:1/1;max-width:64px;display:block}
.mode-map-grid small{font:9px/1.25 var(--mono);color:#4a6274;letter-spacing:0;text-align:center}
.mode-map>small{font-size:12px;color:#4a6274}
@media(max-width:640px){.plate-formula{font-size:9px;left:10px;bottom:10px}.plate-formula b{font-size:10px}.mode-map-grid small{font-size:8px}}
#einzelton .plate-window{width:100%;height:auto;aspect-ratio:1/1;max-height:calc(100vh - 190px);min-height:340px}
#einzelton{align-items:start}

/* Darstellung: Klangbild | Moden */
.view-switch{display:inline-flex;border:1px solid #9fb8ca;border-radius:6px;overflow:hidden}
.view-switch button{padding:4px 10px;border:0;background:#fff;color:#142333;font:600 10px var(--mono);letter-spacing:.08em;cursor:pointer}
.view-switch button+button{border-left:1px solid #9fb8ca}
.view-switch button[aria-pressed=true]{background:#142333;color:#fff}
.view-legend{margin:8px 4px 0;font-size:12.5px;line-height:1.5;color:#334155}
.view-legend .sw{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px}
.sw-low{background:#ffc761}.sw-high{background:#4dc7eb}

/* ---------- Räume: Wortabdruck | Membran-Labor ---------- */
body[data-room="wort"] .room[data-room="labor"],body[data-room="labor"] .room[data-room="wort"],
body[data-room="wort"] .thesis[data-room="labor"],body[data-room="labor"] .thesis[data-room="wort"]{display:none!important}
.room.labor{display:flex;flex-direction:column;gap:14px}
.room.labor .mic-strip{margin-top:0}
.side-nav a[aria-current="page"]{background:#fff;box-shadow:inset 3px 0 0 #075b91;font-weight:600}
.side-more{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0}
.side-toggle{display:none}
body.with-side main{max-width:1680px}
.footnote{margin-top:22px}

/* Grosse Bildschirme: alles wächst mit, Schrift bleibt ruhig */
@media(min-width:1700px){.control-deck{font-size:105%}.side{width:320px}body.with-side{grid-template-columns:320px minmax(0,1fr)}}

/* Tablet und Handy: Seitenleiste wird zur Kopfleiste mit Tabs, Info klappt auf */
@media(max-width:1000px){
  .side{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:10px 14px;height:auto;max-height:100vh;box-shadow:0 1px 0 #dedbd2}
  .side-brand{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:0;border:0}
  .side-brand .side-club{font-size:17px}.side-brand .side-title{margin:0;font-size:15px}.side-brand .side-term,.side-brand small{display:none}
  .side-toggle{display:inline-block;grid-column:2;grid-row:1;padding:7px 12px;border:1px solid #9fb8ca;border-radius:6px;background:#fff;color:#142333;font:600 13px var(--sans);cursor:pointer}
  .side-toggle[aria-expanded="true"]{background:#142333;color:#fff}
  .side-nav{display:flex!important;grid-column:1/3;gap:6px}
  .side-nav a{flex:1;justify-content:center;padding:9px 6px;border:1px solid #dedbd2;background:#fff;font-size:14px}
  .side-nav a[aria-current="page"]{background:#142333;color:#fff;box-shadow:none}
  .side-nav a[aria-current="page"] span{color:#fff}
  .side-more{display:none;grid-column:1/3;overflow-y:auto;max-height:calc(100vh - 120px)}
  .side.open .side-more{display:flex}
  body.with-side main{margin:12px 12px 24px}
}

/* Handy: eine Spalte, lesbare Grössen, keine Mini-Schrift */
@media(max-width:640px){
  .intro{padding:18px 0 12px}
  .instrument{grid-template-columns:1fr!important}
  .plate-head{font-size:10px!important;flex-wrap:wrap;gap:6px}
  .plate-foot{font-size:10px!important;flex-wrap:wrap;gap:4px}
  .plate-overlay{font-size:10px!important}
  .note-bank button small{font-size:9px!important}
  .word-instrument .plate-window,#einzelton .plate-window{max-height:none;min-height:0}
  .view-legend{font-size:12px}
  .mode-map-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .footnote{flex-direction:column;align-items:flex-start}
}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:50;padding:8px 12px;background:#142333;color:#fff;border-radius:6px}
.skip-link:focus{left:12px}
.side-nav a span:last-child{white-space:nowrap}
@media(max-width:1000px){.side-nav a{font-size:13.5px;gap:6px}}
@media(max-width:640px){.plate-formula span:nth-of-type(n+2){display:none}.plate-formula{padding:5px 8px}}
@media(max-width:1000px){.side{max-width:100vw;overflow-x:hidden}.side-nav{min-width:0}.side-nav a{flex:1 1 0;min-width:0;overflow:hidden}.side-nav a span:last-child{overflow:hidden;text-overflow:ellipsis}}
.side-nav a span:last-child{width:auto;text-align:left;color:inherit}

/* Rechenweg: die Berechnung des Klangbilds, sichtbar statt Ladekreis */
.calc-log{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;margin:0;padding:10px 12px;list-style:none;display:grid;gap:4px;border-radius:7px;background:#061320d9;border:1px solid #2b4558;font:11px/1.4 var(--mono);color:#9fb6c6;letter-spacing:.02em}
.calc-log li{display:flex;gap:8px;align-items:baseline}
.calc-log li::before{content:"○";width:12px;flex:none;color:#4a6274}
.calc-log li[data-state=done]::before{content:"✓";color:#62c48a}
.calc-log li[data-state=run]{color:#f0dfb6}
.calc-log li[data-state=run]::before{content:"◐";color:#5cbee2;animation:calc-spin .8s linear infinite;display:inline-block;text-align:center}
@keyframes calc-spin{to{transform:rotate(360deg)}}
@media(max-width:640px){.calc-log{font-size:9.5px;left:8px;right:8px;bottom:8px;padding:7px 8px}}