/* Taktkosmos / Raffst du? – Fülle den Takt: kompakte Oberfläche V7.
   Only layout and controls. Original note/rest files and game rules unchanged. */
:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#223b50;background:#f4f7fb;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}body{margin:0;line-height:1.4;font-size:13px}
[hidden]{display:none!important}
button,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}
a{color:#17638d}
.ft-shell{max-width:1050px;margin:0 auto;padding:0 12px 20px;min-height:100vh}
.ft-head{height:48px;display:flex;align-items:center;gap:12px;justify-content:space-between;position:sticky;top:0;z-index:25;background:#f4f7fb;border-bottom:1px solid #dee5ed;padding:0 3px}
.ft-head strong{font-size:15px}.ft-head span{font-size:11px;color:#65798b}.ft-back{display:inline-flex;text-decoration:none;color:#215a7f;font-size:12px;font-weight:650}
.ft-main{padding:10px 0}
.ft-card{border:1px solid #dce5ec;border-radius:12px;background:#fff;box-shadow:0 3px 16px #183a5810;padding:14px 16px;margin:0 auto;max-width:880px}
.ft-overline{font-size:10px;letter-spacing:.1em;font-weight:750;color:#3d7897;margin:0 0 5px}
h1{font-size:20px;margin:0 0 7px;line-height:1.25}h2{font-size:14px;margin:0 0 7px}
p{margin:6px 0 10px}
.ft-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.ft-form label{display:grid;gap:5px;font-size:12px;font-weight:600}
.ft-form select{width:100%;padding:8px;border-radius:6px;border:1px solid #c4d4df;background:#fff;min-height:37px}
.ft-primary,.ft-secondary,.ft-tools button,.ft-result-actions button,.ft-result-row button{border-radius:7px;padding:9px 13px;min-height:38px;border:1px solid #9bb8cc;background:#f2f8fc;color:#184768;font-weight:650}
.ft-primary{background:#176589;color:#fff;border-color:#176589}
.ft-primary:hover{background:#105574}
.ft-secondary:hover,.ft-tools button:hover{background:#e0f0f9}
.ft-link{background:transparent;border:0;color:#4c6f87;text-decoration:underline;padding:6px}
.ft-subnote{font-size:11px;color:#687a89;margin:9px 0 0}
.ft-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.ft-title-row>div{display:grid;gap:1px}
.ft-title-row strong{font-size:15px}.ft-title-row small{color:#63788a;font-size:11px}
.ft-meter-pill{padding:3px 9px;background:#e9f4fb;border-radius:12px;color:#14597c;font-weight:700}
.ft-track{height:5px;background:#e5edf3;border-radius:4px;overflow:hidden;margin:8px 0}
.ft-track>div{height:100%;background:#267caa;transition:width .15s}
.ft-tip{font-size:12px;color:#4e6272;margin:6px 0}
.ft-sheet{max-width:680px;margin:6px auto 6px;border:1px solid #e5ecf1;background:#fff;border-radius:8px;overflow:hidden}
.ft-sheet svg{display:block;width:100%;height:auto;max-height:148px}
/* Navigation is immediately below the staff, before growing answer content. */
.ft-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.ft-actions button{flex:1 1 140px}
.ft-slot-head{font-weight:700;font-size:12px;margin:4px 0}
.ft-slot-head span{font-weight:400;font-size:11px;color:#607c8d;margin-left:6px}
/* An inserted note can no longer push controls off the page: one horizontal line. */
.ft-slots{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;min-height:74px;max-height:78px;padding:6px;border:1px dashed #bed0dc;border-radius:7px;background:#f8fbfd;scrollbar-width:thin;overscroll-behavior-inline:contain}
.ft-slot{position:relative;flex:0 0 63px;width:63px;height:60px;border:1px solid #e1e9f0;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center}
.ft-slot svg{width:50px;height:50px;display:block}
.ft-slot button{position:absolute;right:0;top:0;width:19px;height:19px;line-height:15px;text-align:center;padding:0;background:#fff;border:1px solid #cad8e0;border-radius:4px;color:#a12c3f;font-weight:800}
.ft-slot-empty{color:#7d8c97;font-size:11px}
.ft-palette-block{margin:10px 0 6px}
.ft-palette-block h2{font-size:13px;margin:0 0 6px}
.ft-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:700px;margin:0 auto}
.ft-palette button{min-width:0;min-height:85px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#fff;border:1px solid #cfdee7;border-radius:8px;padding:4px 2px;color:#24465b}
.ft-palette button:hover{background:#eef8fe;border-color:#6ab1d0}
.ft-palette svg{display:block;width:min(100%,57px);height:51px;flex:none}
.ft-palette b{font-weight:700;font-size:11px;line-height:1.1}
.ft-palette small{font-size:10px;color:#6c7b87}
.ft-tools{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ft-tools button{min-height:34px;padding:6px 10px;font-size:12px}
.ft-validation{border-radius:6px;border:1px solid #e6b9b0;background:#fff6f2;padding:9px}
.ft-validation.ok{border-color:#acd9bb;background:#effaf3}
.ft-summary{font-size:14px;font-weight:600}
.ft-results-list{display:grid;gap:8px}
.ft-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid #d9e3eb;border-radius:8px}
.ft-result-row>div{min-width:0;flex:1}.ft-result-row span{font-size:12px;color:#617587}
.ft-result-row.ok{border-color:#9fc8ae}.ft-result-row.bad{border-color:#dbb1b1}
.ft-mini-score{width:min(100%,460px);height:auto;max-height:120px;display:block}
.ft-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ft-footer{text-align:center;padding:10px;font-size:11px;color:#7c8c9b}
@media(max-width:600px){
 .ft-shell{padding:0 7px 12px}.ft-card{padding:10px 9px;border-radius:8px}
 .ft-head{height:43px}.ft-head strong{font-size:13px}.ft-head span{font-size:10px}
 .ft-form{gap:7px}.ft-tip{font-size:11px}.ft-sheet svg{max-height:118px}
 .ft-palette{gap:4px}.ft-palette button{min-height:72px;padding:2px 1px}.ft-palette svg{height:43px;width:min(100%,48px)}
 .ft-palette b{font-size:10px}.ft-palette small{font-size:9px}
 .ft-slots{min-height:66px;max-height:70px}.ft-slot{width:57px;flex-basis:57px;height:54px}.ft-slot svg{width:45px;height:45px}
 .ft-actions{gap:5px;margin:6px 0 8px}.ft-actions button{padding:7px 7px;min-height:35px;font-size:11px;flex:1 1 125px}
 .ft-result-row{flex-direction:column;align-items:stretch}
}
@media(max-width:360px){.ft-form{grid-template-columns:1fr}.ft-palette b{font-size:9px}.ft-palette small{font-size:8px}}
@media print{.ft-head,.ft-palette-block,.ft-tools,.ft-actions,.ft-footer,.ft-link,.learning-help{display:none!important}.ft-card{border:0;box-shadow:none}}