:root{
 /* Klaviatur-Farben – ein System: Schiefer = was dran ist (Grundton dunkel, übrige Töne hell), Gold = was du spielst (links dunkler), Rot = daneben */
 --kb-grund:#3c5a66;--kb-grund-ink:#fff;--kb-ziel:#c9d8de;--kb-ziel-ink:#1d2a30;
 --kb-du:#b9862a;--kb-du-ink:#fff;--kb-du-l:#87591b;--kb-app:#3c5a66;
 --hand-l:var(--kb-du-l);
 --fn-ruhe:#3f8a5f;--fn-weg:#2f86b3;--fn-spannung:#d0602c;--fn-farbe:#9357c9;
 box-sizing:border-box;
 padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
 --bg:#f4f2ec;--panel:#fffefb;--panel2:#eceadf;--sunk:#e4e1d5;
 --ink:#1a1c1e;--ink2:#5d5f5c;--ink3:#8d8f8a;--line:#dedcd0;--line2:#c6c3b4;
 --acc:#3c5a66;--acc-ink:#fbfdfd;--acc-soft:#dde8ec;
 --warm:#a8762c;--warm-soft:#f5ebd9;
 --ok:#3f7d5c;--ok-soft:#dfeee6;
 --white-key:#fcfbf7;--black-key:#25262a;--key-line:#a9a597;--bad:#b4462f;
 --shadow:0 1px 2px rgba(30,28,22,.05),0 6px 18px -12px rgba(30,28,22,.25);
 --nav-h:48px;--head-h:52px;
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --kb-grund:#7fb0c2;--kb-grund-ink:#101619;--kb-ziel:#b8d0d9;--kb-ziel-ink:#14232a;
 --kb-du:#d9a54c;--kb-du-ink:#1a1206;--kb-du-l:#a8742a;--kb-app:#7fb0c2;
 --bg:#141518;--panel:#1c1e21;--panel2:#24262a;--sunk:#202225;
 --ink:#eceae4;--ink2:#a6a49c;--ink3:#76746d;--line:#2c2e33;--line2:#43454c;
 --acc:#7fb0c2;--acc-ink:#101619;--acc-soft:#1e2a30;
 --warm:#d0a055;--warm-soft:#2e2517;
 --ok:#57b287;--ok-soft:#182c22;
 --fn-ruhe:#5cc08c;--fn-weg:#5fb2de;--fn-spannung:#f07f45;--fn-farbe:#b98cf0;
 --white-key:#e7e5dc;--black-key:#0e0f11;--key-line:#5a5c63;--bad:#d4674c;
 --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px -14px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
 --kb-grund:#7fb0c2;--kb-grund-ink:#101619;--kb-ziel:#b8d0d9;--kb-ziel-ink:#14232a;
 --kb-du:#d9a54c;--kb-du-ink:#1a1206;--kb-du-l:#a8742a;--kb-app:#7fb0c2;
 --bad:#d4674c;
 --fn-ruhe:#5cc08c;--fn-weg:#5fb2de;--fn-spannung:#f07f45;--fn-farbe:#b98cf0;
 --bg:#141518;--panel:#1c1e21;--panel2:#24262a;--sunk:#202225;
 --ink:#eceae4;--ink2:#a6a49c;--ink3:#76746d;--line:#2c2e33;--line2:#43454c;
 --acc:#7fb0c2;--acc-ink:#101619;--acc-soft:#1e2a30;
 --warm:#d0a055;--warm-soft:#2e2517;
 --ok:#57b287;--ok-soft:#182c22;
 --white-key:#e7e5dc;--black-key:#0e0f11;--key-line:#5a5c63;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
 font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;
 -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--acc);text-underline-offset:2px}
main{max-width:none;margin:0;padding:10px 22px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom,0px))}

.keystrip{display:block;width:100%;height:10px;margin:0 0 14px;opacity:.5}
.head{padding:12px 0 12px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.head h1{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.015em;margin:0 0 3px;line-height:1.15}
.head p{margin:0;color:var(--ink2);font-size:13.5px}
h2{font-family:var(--serif);font-size:19px;font-weight:600;margin:26px 0 9px;letter-spacing:-.01em}
h3{font-size:15px;font-weight:650;margin:0 0 4px;letter-spacing:-.005em}
p{margin:0 0 8px}
.muted{color:var(--ink2)}.small{font-size:13.5px}.tiny{font-size:12px;color:var(--ink3);line-height:1.45}
.lede{color:var(--ink2);font-size:14px;margin:0 0 14px}
.center{text-align:center}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 10px;box-shadow:var(--shadow)}
.card.acc{border-color:var(--acc);background:var(--acc-soft);box-shadow:none}
.card.warm{border-color:var(--warm);background:var(--warm-soft);box-shadow:none}
.card.flat{box-shadow:none}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.tight{gap:6px}
.grow{flex:1;min-width:0}
.btn{appearance:none;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;min-height:40px;transition:transform .08s}
.btn:active{transform:translateY(1px)}
.btn.p{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn.s{font-size:13px;padding:6px 11px;min-height:34px}
.btn.xs{font-size:12px;padding:4px 9px;min-height:28px;border-radius:8px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:default}
.chip{display:inline-block;font-size:11.5px;font-weight:650;padding:2.5px 9px;border-radius:999px;background:var(--panel2);color:var(--ink2);letter-spacing:.01em;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warm{background:var(--warm-soft);color:var(--warm)}
.chip.acc{background:var(--acc-soft);color:var(--acc)}

body > nav{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--panel) 92%,transparent);
 backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
 border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px);z-index:20}
body > nav .in{display:flex;width:100%}
body > nav :is(button,a){text-decoration:none;flex:1;appearance:none;border:0;background:none;color:var(--ink3);font:inherit;font-size:9.5px;font-weight:600;
 padding:6px 0 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--nav-h);position:relative}
body > nav :is(button,a) span.i{display:block;height:17px;line-height:0}
body > nav :is(button,a) span.i svg{width:17px;height:17px}
body > nav :is(button,a)[aria-current="page"]{color:var(--acc)}
body > nav :is(button,a)[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--acc);border-radius:0 0 2px 2px}

.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.item.done{opacity:.5}
.item .tap{flex:1;min-width:0;cursor:pointer}
.item .tap b{font-weight:600}
.cb{flex:none;width:25px;height:25px;border-radius:8px;border:1.5px solid var(--line2);background:var(--panel);cursor:pointer;display:grid;place-items:center;font-size:14px;color:var(--acc-ink);margin-top:1px}
.cb.on{background:var(--acc);border-color:var(--acc)}
.dur{flex:none;font-size:12px;font-weight:700;color:var(--ink2);background:var(--panel2);padding:3px 8px;border-radius:7px;margin-top:2px;min-width:36px;text-align:center;cursor:pointer;font-variant-numeric:tabular-nums}
.dur.run{background:var(--acc);color:var(--acc-ink)}
.sub{margin:5px 0 0;padding-left:17px;font-size:13px;color:var(--ink2)}
.sub li{margin:2px 0}
.arrow{flex:none;color:var(--ink3);font-size:18px;line-height:1;margin-top:2px}

.dots{display:inline-flex;gap:6px}
.dot{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line2);background:var(--panel);cursor:pointer}
.dot.on{background:var(--acc);border-color:var(--acc)}
.dot.big{width:34px;height:34px}
.skill{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.skill:last-child{border-bottom:0}
.skill .n{flex:1;min-width:0;font-size:14px}
.skill .n small{display:block;color:var(--ink3);font-size:12px}

details{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:0 15px;margin:0 0 8px}
details summary{cursor:pointer;font-weight:650;padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--ink3);font-weight:400;font-size:19px;line-height:1}
details[open] summary::after{content:"–"}
details .body{padding:0 0 13px;font-size:14px}
details ul{margin:5px 0 9px;padding-left:19px}
details li{margin:3px 0}

table.t{border-collapse:collapse;font-size:13px;width:100%;margin:7px 0 11px}
table.t td,table.t th{border:1px solid var(--line);padding:5px 7px;text-align:left}
table.t th{background:var(--panel2);font-weight:650}
.seg{display:flex;gap:3px;background:var(--sunk);padding:3px;border-radius:10px}
.seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--ink2);font:inherit;font-size:12px;font-weight:600;padding:6px 5px;border-radius:8px;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.09)}
textarea,input[type=text],input[type=number],select{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--ink)}
textarea:focus,input:focus,select:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.bar{height:7px;background:var(--sunk);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);border-radius:999px;transition:width .3s}
.bar.thin{height:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:440px){.grid2{grid-template-columns:1fr}}
.timer{font-variant-numeric:tabular-nums;font-size:38px;font-weight:600;letter-spacing:-.02em;font-family:var(--serif)}
.hidden{display:none}
.log{font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.log:last-child{border-bottom:0}
.hr{height:1px;background:var(--line);margin:18px 0}
.quote{border-left:2px solid var(--warm);padding:2px 0 2px 12px;margin:9px 0;color:var(--ink2);font-size:13.5px}

/* Skalen-Explorer */
.tabs{display:flex;gap:5px;overflow-x:auto;padding:2px 0 8px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;appearance:none;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kb{display:block;width:100%;height:auto}
.chords{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;margin-top:10px}
.chord{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px 7px}
.chord .lbl{display:flex;align-items:baseline;gap:6px;min-width:0;margin:0 0 4px}
.chord .deg{font-size:14px;font-weight:700;color:var(--ink2);font-family:var(--serif)}
.chord .nm{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chord .fn{font-weight:400;color:var(--ink3)}
.steps{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.mollrow{display:grid;grid-template-columns:54px repeat(3,minmax(0,1fr));gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);min-width:560px}
.mollrow:last-child{border-bottom:0}
.mollrow .tonart{font-weight:700;font-size:13px}
.mollrow .mcell{min-width:0}
.mollrow .cn{font-size:11.5px;font-weight:650;text-align:center;margin:0 0 2px;color:var(--ink2)}

/* Matrix (Tonart x Übungsart) */
.mx{width:100%;min-width:460px;border-collapse:separate;border-spacing:0;font-size:12px}
.mx th{font-weight:600;color:var(--ink3);font-size:10px;padding:0 3px 6px 0;text-align:center;line-height:1.15;vertical-align:bottom;white-space:normal;word-break:break-word}
.mx th.rh{text-align:left;padding-left:2px;width:46px}
.mx td{padding:0 2px 4px 0}
.mx td.rh{font-weight:650;font-size:12.5px;color:var(--ink2);white-space:nowrap;padding-right:6px;width:46px}
.cell{display:block;width:100%;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--sunk);cursor:pointer;position:relative;padding:0}
.cell span{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--ink3)}
.cell.v1{background:color-mix(in srgb,var(--acc) 18%,var(--panel));border-color:transparent}
.cell.v2{background:color-mix(in srgb,var(--acc) 36%,var(--panel));border-color:transparent}
.cell.v3{background:color-mix(in srgb,var(--acc) 56%,var(--panel));border-color:transparent}
.cell.v4{background:color-mix(in srgb,var(--acc) 78%,var(--panel));border-color:transparent}
.cell.v5{background:var(--acc);border-color:var(--acc);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--warm) 70%,transparent)}
.cell.v3 span,.cell.v4 span,.cell.v5 span{color:var(--acc-ink)}
.cell.v1 span,.cell.v2 span{color:var(--ink2)}
.mxwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
.legend{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink3);margin:8px 0 0;flex-wrap:wrap}
.legend i{display:inline-block;width:15px;height:15px;border-radius:4px;border:1px solid var(--line)}

/* Score */
.ring{display:block;margin:0 auto}
.scoregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.dom{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 11px;cursor:pointer}
.dom b{display:block;font-size:13px;font-weight:650;margin-bottom:5px}
.dom .v{float:right;font-size:12px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.lvlname{font-family:var(--serif);font-size:15px;font-weight:600}

/* Übungsseite */
.exhead{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.stepnum{counter-reset:st}
.stepnum li{margin:6px 0;padding-left:2px}
.met{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0}
.met .bpm{font-family:var(--serif);font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;min-width:74px;text-align:center}
.beats{display:flex;gap:6px;justify-content:center;margin:8px 0 0}
.beat{width:11px;height:11px;border-radius:50%;background:var(--sunk);border:1px solid var(--line2)}
.beat.on{background:var(--acc);border-color:var(--acc)}
.beat.acc2{box-shadow:0 0 0 3px color-mix(in srgb,var(--warm) 45%,transparent)}
.rnd{font-family:var(--serif);font-size:40px;font-weight:600;text-align:center;margin:8px 0 2px;letter-spacing:-.01em}
.rate{display:flex;gap:8px;justify-content:space-between;margin:8px 0 0}
.rate button{flex:1;appearance:none;border:1.5px solid var(--line2);background:var(--panel);color:var(--ink2);font:inherit;font-size:15px;font-weight:700;padding:9px 0;border-radius:10px;cursor:pointer}
.rate button.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--ink2)}

/* Stift-Leiste */
.brushbar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
 border-radius:12px;padding:8px 10px;margin:0 0 10px;position:sticky;top:0;z-index:5}
.brushbar .seg{flex:1}
.brushbar .seg button{font-variant-numeric:tabular-nums;font-size:13px;padding:7px 4px}
.brushbar .seg button.on{background:var(--acc);color:var(--acc-ink)}
/* Kopfzeilen als Flächenfüller */
.mx .hd{appearance:none;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;
 padding:2px 3px;border-radius:6px;cursor:pointer;width:100%;text-align:inherit}
.mx .hd:hover{background:var(--panel2)}
.mx th .hd{font-size:10px;color:var(--ink3)}
.mx td.rh .hd{font-size:12.5px;font-weight:650;color:var(--ink2);text-align:left}
/* Tonart-Zeile auf der Übungsseite */
.keyrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.kcell{appearance:none;border:1px solid var(--line);background:var(--sunk);color:var(--ink2);
 border-radius:9px;padding:7px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;font:inherit}
.kcell b{font-size:13px;font-weight:700}
.kcell i{font-style:normal;font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}
.kcell.v1{background:color-mix(in srgb,var(--acc) 18%,var(--panel));border-color:transparent}
.kcell.v2{background:color-mix(in srgb,var(--acc) 36%,var(--panel));border-color:transparent}
.kcell.v3{background:color-mix(in srgb,var(--acc) 56%,var(--panel));border-color:transparent;color:var(--acc-ink)}
.kcell.v4{background:color-mix(in srgb,var(--acc) 78%,var(--panel));border-color:transparent;color:var(--acc-ink)}
.kcell.v5{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--warm) 70%,transparent)}

/* Pfad-Navigation */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12.5px;margin:0 0 10px;min-height:22px}
.crumb button{appearance:none;border:0;background:none;color:var(--acc);font:inherit;font-size:12.5px;
 padding:2px 4px;border-radius:6px;cursor:pointer;font-weight:600}
.crumb button:hover{background:var(--acc-soft)}
.crumb .sep{color:var(--ink3);font-size:13px}
.crumb [aria-current]{color:var(--ink2);font-weight:600;padding:2px 2px}

/* Symbol links in einer anklickbaren Zeile */
.rowicon{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
 background:var(--panel2);color:var(--ink2);margin-top:1px}
.rowicon.k-ex{background:var(--acc-soft);color:var(--acc)}
.rowicon.k-ses{background:var(--warm-soft);color:var(--warm)}
.rowicon.k-play{background:var(--acc-soft);color:var(--acc)}
.rowicon.k-tool{background:var(--ok-soft);color:var(--ok)}
h3 .rowicon{width:22px;height:22px;border-radius:7px;display:inline-grid;vertical-align:-5px;margin-right:5px}

/* Anklickbare Zeilen sichtbar machen */
.item.act{cursor:pointer;transition:border-color .12s,transform .08s}
.item.act:hover{border-color:var(--line2)}
.item.act:active{transform:translateY(1px)}
.item.act .arrow{align-self:center;margin-top:0}
.item .arrow{transition:transform .12s}
.item.act:hover .arrow{transform:translateX(2px);color:var(--acc)}

/* Hauptaktion deutlicher */
.btn.p{box-shadow:0 1px 2px color-mix(in srgb,var(--acc) 35%,transparent)}

/* Klaviatur-Feld auf der Übungsseite */
.runbox{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:14px 14px 16px;margin:0 0 12px;box-shadow:var(--shadow)}
.runbox .kb{border-radius:6px}
.runlbl{font-family:var(--serif);font-size:19px;text-align:center;margin:12px 0 2px;line-height:1.25}
.runtip{font-size:13px;color:var(--ink2);text-align:center;margin:2px 0 0;line-height:1.45}
.runmeta{display:flex;justify-content:center;gap:12px;font-size:12px;color:var(--ink3);margin:8px 0 0;font-variant-numeric:tabular-nums}
.runclock{font-weight:700;color:var(--acc)}
.runbox .tabs{padding-bottom:2px}
.runbox .tab{padding:4px 9px;font-size:11.5px}

/* Akkord-Finder */
.fslots{display:flex;gap:7px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.fslots::-webkit-scrollbar{display:none}
.fslot{flex:none;min-width:78px;appearance:none;border:1.5px solid var(--line2);background:var(--panel);
 color:var(--ink);border-radius:11px;padding:10px 8px 7px;cursor:pointer;font:inherit;
 display:flex;flex-direction:column;align-items:center;gap:3px;transition:border-color .12s,background .12s}
.fslot b{font-size:14px;font-weight:700;white-space:nowrap}
.fslot i{font-style:normal;font-size:10.5px;color:var(--ink3)}
.fslot.sel{border-color:var(--acc);background:var(--acc-soft)}
.fslot.empty b{color:var(--warm);font-size:20px;line-height:1}
.fslot.empty{border-style:dashed;border-color:var(--warm)}
.fslot.now{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.fslot.now i{color:var(--acc-ink)}

/* ===================== SPIELANSICHT ===================== */
body.big{overflow:hidden;height:100%}
body.big main{max-width:none;padding:0}
.stage{position:fixed;left:0;right:0;top:0;bottom:var(--nav-h);
 display:flex;flex-direction:column;gap:8px;
 padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;overflow:hidden}
.stagehead{flex:none;display:flex;align-items:center;gap:8px;min-width:0}
.stagehead .grow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px}
.stagebody{flex:1;min-height:0;display:flex;gap:16px;width:100%}
.stageplay{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;justify-content:center}
.kbwrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.kbwrap svg.kb{width:100%;height:auto;max-height:44vh}
.stageinfo{flex:none;text-align:center}
.stageinfo .runlbl{margin:0 0 2px;font-size:20px}
.stageinfo .runtip{margin:0}
.stagectrl{flex:none}
.stagectrl .tabs{padding-bottom:0}
.stagectrl .tab{padding:3px 8px;font-size:11px}

/* Texte: auf breitem Schirm eigene Spalte, sonst Blatt von unten */
.stagedetails{display:none}
@media (min-width:900px){
 .stagedetails{display:block;flex:0 0 340px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 14px 14px}
 .stagedetails .sdhead{display:none}
}
@media (max-width:899px){
 .stagedetails.open{display:block;position:fixed;left:0;right:0;bottom:var(--nav-h);top:28%;
  background:var(--panel);border-top:1px solid var(--line2);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.4);overflow-y:auto;z-index:25;padding:0 16px 20px}
 .stagedetails .sdhead{position:sticky;top:0;background:var(--panel);display:flex;
  justify-content:space-between;align-items:center;padding:12px 0 8px;border-bottom:1px solid var(--line);margin-bottom:10px}
}
.sdbody h3{font-size:14px}
.sdbody .keyrow{grid-template-columns:repeat(4,minmax(0,1fr))}
.sdbody .card{box-shadow:none;padding:0;border:0;background:none;margin:12px 0 0}

/* sehr flache Fenster: Bedienung kompakter */
@media (max-height:620px){
 .stageinfo .runlbl{font-size:16px}
 .stageinfo .runtip{display:none}
 .stagectrl .row{gap:6px}
}

/* Ablauf auf einen Blick */
.steplist{flex:0 1 auto;min-height:0;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
 overflow-y:auto;align-content:flex-start;padding:2px 0}
.stepchip{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--panel2);color:var(--ink3);
 white-space:nowrap;border:1px solid transparent;transition:background .15s}
.stepchip.past{opacity:.45}
.stepchip.now{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:650}
@media (max-height:620px){.steplist{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start}}

/* ===================== AKKORD-KARTE ===================== */
.krow{margin:0 0 12px}
.kpath{display:flex;align-items:center;gap:0;overflow-x:auto;padding:6px 2px 2px;scrollbar-width:none}
.kpath::-webkit-scrollbar{display:none}
.knode{flex:none;appearance:none;border:0;background:none;font:inherit;cursor:pointer;
 display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 2px;position:relative;color:var(--ink3)}
.knode+.knode{margin-left:26px}
.knode+.knode::before{content:"";position:absolute;left:-26px;top:6px;width:26px;height:2px;background:var(--line2)}
.kdot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line2);background:var(--panel);display:block}
.klab{font-size:11px;white-space:nowrap}
.knode.cur{color:var(--ink)}
.knode.cur .kdot{background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.knode.cur .klab{font-weight:700}
.knode.ping .kdot{background:var(--warm);border-color:var(--warm)}
.kcenter{background:var(--panel);border:2px solid var(--acc);border-radius:16px;padding:12px 14px 14px;
 text-align:center;box-shadow:var(--shadow);position:relative}
.kbadge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--acc);color:var(--acc-ink);
 font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 10px;border-radius:999px}
.kname{font-family:var(--serif);font-size:30px;font-weight:600;margin:6px 0 10px;letter-spacing:-.01em}
.knext{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.kcard{appearance:none;background:var(--panel);border:1.5px dashed var(--line2);border-radius:13px;
 padding:10px 10px 11px;cursor:pointer;font:inherit;text-align:left;color:inherit;
 display:flex;flex-direction:column;gap:6px;position:relative;transition:border-color .12s,transform .08s}
.kcard:hover{border-color:var(--acc)}
.kcard:active{transform:translateY(1px)}
.kcard b{font-size:16px;font-weight:700}
.kcard .kstep{position:absolute;top:8px;right:10px;color:var(--ink3);font-size:15px;line-height:1}
.kcard:hover .kstep{color:var(--acc)}
.kwhy{font-size:11.5px;color:var(--ink2);line-height:1.4}
.khear{align-self:flex-start;font-size:11px;font-weight:650;color:var(--acc);
 border:1px solid var(--line2);border-radius:7px;padding:2px 8px}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.kgrid .kcard{border-style:solid;align-items:center;text-align:center;padding:8px 6px}

.kctx{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink2);
 background:var(--panel2);border-radius:10px;padding:8px 11px;margin:12px 0 0}
.kctx .ksep{color:var(--ink3)}
.kcard.hint{border-style:solid;border-color:var(--warm);background:var(--warm-soft)}
.khint{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warm)}
.kzus{font-size:11px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:5px;line-height:1.4}

.klvl{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;align-self:flex-start;
 background:var(--panel2);color:var(--ink2)}
.klvl.l0,.klvl.l1,.klvl.l2{background:var(--warm-soft);color:var(--warm)}
.klvl.l4,.klvl.l5{background:var(--ok-soft);color:var(--ok)}

/* ===================== BAUM ===================== */
.baumbox{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;
 overflow:hidden;box-shadow:var(--shadow);margin:12px 0 10px}
svg.baum{display:block;width:100%;height:470px;touch-action:none;cursor:grab;
 background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 62%)}
svg.baum:active{cursor:grabbing}
@media (min-width:900px){svg.baum{height:620px}}
.baumtools{position:absolute;right:8px;bottom:8px;display:flex;gap:5px}
.baummidi{position:absolute;left:10px;top:10px}

.bline{fill:none;stroke:var(--line2);stroke-width:2.5;stroke-linecap:round}
.bline.done{stroke:var(--acc);stroke-width:4;opacity:.55}
.bline.sel{stroke:var(--acc);stroke-width:3}
.bline.next{stroke:var(--line2);stroke-dasharray:6 5}
.bline.hint{stroke:var(--warm);stroke-dasharray:3 5}
.bhit{cursor:pointer}
/* Nur der Rahmen des Knotens – NICHT die Tasten der eingebetteten
   Klaviatur. Ohne den Kind-Selektor überschreibt die Regel jede Taste. */
.bnode>rect{fill:var(--panel);stroke:var(--line2);stroke-width:1.5}
.bnode>text{fill:var(--ink);text-anchor:middle;font-family:var(--serif);font-weight:600;
 dominant-baseline:middle;paint-order:stroke}
.bnode>.bsub{fill:var(--ink3);font-family:system-ui,sans-serif;font-weight:600}
.b-cur>rect{fill:var(--panel);stroke:var(--acc);stroke-width:3}
.b-cur>text{fill:var(--ink)}
.b-past>rect{fill:var(--panel2);stroke:var(--line);stroke-width:1.2}
.b-past>text{fill:var(--ink2)}
.b-next>rect{stroke-dasharray:5 4}
.bhit:hover .b-next>rect,.bhit:hover .b-hint>rect{stroke:var(--acc);stroke-width:2}
.b-ast>rect{fill:var(--acc);stroke:none}
.b-ast>text{fill:var(--acc-ink);font-family:system-ui,sans-serif;font-weight:700;letter-spacing:.02em}
.b-hint>rect{fill:var(--warm-soft);stroke:var(--warm);stroke-width:1.5}
.b-hint>text{fill:var(--ink)}
.b-hint>.bsub{fill:var(--warm)}
.kcenter.kflach{box-shadow:none;border-width:1px;padding:10px 12px 12px}
.kcenter.kflach .kname{font-size:24px;margin:4px 0 8px}

.kbmini{overflow:visible}
.b-past .kbmini{opacity:.7}

.krow .kpath{display:none}

/* ===================== KARTE AUF GANZEM BILDSCHIRM ===================== */
body.voll{overflow:hidden;height:100%}
body.voll main{max-width:none;padding:0}
.kstage{position:fixed;left:0;right:0;top:0;bottom:var(--nav-h);display:flex;overflow:hidden}
.kmap{flex:1;min-width:0;position:relative;background:var(--bg)}
.kmap svg.baum{width:100%;height:100%;border-radius:0;background:
 radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 65%)}
.kside{flex:0 0 340px;overflow-y:auto;border-left:1px solid var(--line);
 background:var(--panel);padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.baumkopf{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:10px;
 background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);
 border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;font-size:13px}
.kstage .baumtools{right:14px;bottom:14px}
.kside .knext{grid-template-columns:1fr 1fr}
.kside .kcenter{margin-bottom:10px}
@media (max-width:1000px){
 .kstage{flex-direction:column}
 .kmap{flex:0 0 55%}
 .kside{flex:1;border-left:0;border-top:1px solid var(--line)}
}

/* ===================== KOPFLEISTE ===================== */
#head{position:fixed;left:0;right:0;top:0;z-index:30;height:var(--head-h);
 background:color-mix(in srgb,var(--panel) 94%,transparent);
 backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
 border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:10px;height:100%;padding:0 18px}
.hlogo{appearance:none;border:0;background:none;font-family:var(--serif);font-size:18px;font-weight:600;
 color:var(--ink);cursor:pointer;padding:4px 6px;border-radius:8px;flex:none}
.hlogo:hover{background:var(--panel2)}
.htools{display:flex;justify-content:safe center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.htools::-webkit-scrollbar{display:none}
.htool{appearance:none;border:1px solid transparent;background:none;color:var(--ink2);font:inherit;
 font-size:13px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer;
 display:flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.htool:hover{background:var(--panel2);color:var(--ink)}
.htool.on{background:var(--acc-soft);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.htakt{flex:none;font-variant-numeric:tabular-nums}
.htakt.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
@media (max-width:820px){.htool span{display:none}.htool{padding:6px 9px}.htakt span{display:inline}}

/* Platz für die Kopfleiste schaffen */
main{padding-top:calc(var(--head-h) + 8px)}
.stage{top:var(--head-h)}
.kstage{top:var(--head-h)}
body.big .stage{padding-top:8px}

/* ===================== LIVE PAINTING ===================== */
.pstage{position:fixed;left:0;right:0;top:var(--head-h);bottom:var(--nav-h);overflow:hidden;background:#0b0d10}
.pcanvas{display:block;width:100%;height:100%}







/* ===================== BREITE BILDSCHIRME NUTZEN ===================== */
@media (min-width:1100px){
 /* Listen und Karten in Spalten statt in einer langen Schlange */
 .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px;align-items:start}
 .list .item{margin:0}
 .scoregrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
 .chords{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
 .keys{grid-template-columns:repeat(12,minmax(0,1fr))}
 .keyrow{grid-template-columns:repeat(12,minmax(0,1fr))}
 /* Fließtext bleibt lesbar, auch wenn die Seite breit ist */
 .head p,.lede,.card>p,details .body>p,.sdbody>p{max-width:78ch}
 /* Die Spielansicht darf die ganze Breite nehmen */
 .stagedetails{flex:0 0 400px}
}
@media (min-width:1600px){
 .list{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
}

/* Schnappschüsse */
.pfoto{position:absolute;right:14px;bottom:14px;display:flex;align-items:flex-end;gap:8px;max-width:58%;
 overflow-x:auto;padding:6px;scrollbar-width:none}
.pfoto::-webkit-scrollbar{display:none}
.pbild{position:relative;flex:none;width:104px;border-radius:9px;overflow:hidden;
 border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35)}
.pbild img{display:block;width:100%;height:62px;object-fit:cover;cursor:pointer}
.pbild em{display:block;font-style:normal;font-size:10px;color:#fff;padding:3px 5px;line-height:1.25}
.pbild em i{font-style:normal;opacity:.65;text-transform:uppercase;letter-spacing:.04em}
.pweg{position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;border:0;
 background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1;cursor:pointer}

/* Szenen- und Wetterwahl im Paint */

.pwtitel{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.pszene{appearance:none;text-align:left;border:1px solid var(--line);background:var(--panel);
 border-radius:10px;padding:7px 10px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .12s}
.pszene:hover{border-color:var(--acc)}
.pszene b{display:block;font-size:13.5px}
.pszene span{display:block;font-size:10.5px;color:var(--ink3);line-height:1.3;margin-top:1px}
.pszene.on{background:var(--acc-soft);border-color:var(--acc)}
.pszene.on b{color:var(--acc)}



/* Bedienung im Paint: eine ruhige Spalte ganz links */
.plinks{position:absolute;left:14px;top:14px;width:236px;display:flex;flex-direction:column;gap:7px;
 background:color-mix(in srgb,var(--panel) 62%,transparent);backdrop-filter:blur(16px);
 border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:14px;padding:10px 11px;
 max-height:calc(100% - 28px);overflow-y:auto;scrollbar-width:none}
.plinks::-webkit-scrollbar{display:none}
.plinks:hover{background:color-mix(in srgb,var(--panel) 86%,transparent)}
.pzeile{display:flex;align-items:center;gap:8px;font-size:13px}
.pjetzt{display:flex;flex-direction:column;gap:1px;padding:2px 2px 4px}
.pname{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.05}
.pwetter{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.pblock{background:none;border:0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
 border-radius:0;padding:0;margin:0}
.pblock summary{padding:8px 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:var(--ink3)}
.pblock summary::after{font-size:14px}
.pszene{display:block;width:100%;appearance:none;text-align:left;border:1px solid transparent;
 background:color-mix(in srgb,var(--panel2) 70%,transparent);border-radius:9px;padding:6px 9px;
 cursor:pointer;font:inherit;color:var(--ink);margin-bottom:4px}
.pszene:hover{border-color:var(--line2)}
.pszene b{display:block;font-size:13px}
.pszene span{display:block;font-size:10px;color:var(--ink3);line-height:1.3}
.pszene.on{background:var(--acc-soft);border-color:var(--acc)}
.pszene.on b{color:var(--acc)}
.plinks .seg button{font-size:10.5px;padding:4px 3px}
.pfoto{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;max-width:44%;overflow-x:auto;scrollbar-width:none}
.pbild{position:relative;flex:none;width:76px;border-radius:8px;overflow:hidden;
 border:1px solid rgba(255,255,255,.2)}
.pbild img{display:block;width:100%;height:46px;object-fit:cover;cursor:pointer}

.phaende{display:flex;gap:5px;margin-top:4px}
.phaende i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 padding:2px 6px;border-radius:5px;background:var(--panel2);color:var(--ink3)}
.phaende i.an{background:var(--acc-soft);color:var(--acc)}

.ptonart{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.04em;
 color:var(--acc);font-weight:600;min-height:13px}

/* Versionsstempel: immer da, nie im Weg */
#version{position:fixed;right:10px;bottom:calc(var(--nav-h) + 5px);z-index:40;pointer-events:none;
 font-size:9.5px;letter-spacing:.04em;color:var(--ink3);opacity:.55;font-variant-numeric:tabular-nums}

.tonknopf{display:inline-flex;align-items:center;gap:5px}
.tonknopf svg.laut{width:13px;height:13px;flex:none;opacity:.8}
.tonknopf.aus{color:var(--ink3)}

.pwelt{margin-top:8px;padding:7px 9px;border-radius:9px;background:var(--panel2);font-size:10.5px;line-height:1.55;color:var(--ink2)}
.pwelt b{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.pwelt span{display:block;font-variant-numeric:tabular-nums;min-height:15px}
.pwelt i{font-style:normal;transition:color .6s}
.pwelt i.klingt{color:var(--warm);font-weight:700}

/* Mac-Tastatur als Klavier */
.tk{display:flex;gap:2px;margin-top:2px}
.tk i{font-style:normal;width:21px;height:24px;border-radius:4px;display:flex;flex-direction:column;
 align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;
 background:var(--panel2);color:var(--ink);border:1px solid var(--line);transition:background .08s}
.tk i small{font-size:7.5px;font-weight:600;color:var(--ink3);margin-top:2px}
.tk.sw i{background:#2a2d33;color:#e6e8ec;border-color:#2a2d33}
.tk.sw i small{color:#9aa0a8}
.tk i.leer{visibility:hidden}
.tk i.an,.tk-inl.an{background:var(--acc);color:#fff;border-color:var(--acc)}
.tk i.an small{color:#fff}
.tk-lu{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:2px 0 5px}
.tk-inl{display:inline-block;padding:0 5px;border-radius:4px;border:1px solid var(--line)}

@keyframes tonPuls{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--warm) 55%,transparent)}}
.tonknopf.pulsieren{animation:tonPuls .5s ease 3;color:var(--warm);border-color:var(--warm)}

/* Neue Version: kurz aufleuchten */
@keyframes versionNeu{0%{opacity:.55;transform:scale(1)}12%{opacity:1;transform:scale(1.35);color:var(--warm)}
 30%{transform:scale(1.1)}45%{transform:scale(1.28)}70%{opacity:1;color:var(--warm)}100%{opacity:.55;transform:scale(1)}}
#version{transform-origin:right bottom}
#version.neu{animation:versionNeu 4s ease both;font-weight:700}
#version.neu::before{content:"\2728 neu \00b7 ";}

/* Live Painting: die linke Spalte passt ohne Scrollen auf den Schirm */
.plinks{max-height:calc(100% - 28px);overflow-y:auto;gap:5px;padding:10px 11px}
.plinks .pname{font-size:22px}
.plinks .pjetzt{padding:0 2px 2px}
.plinks .pwelt{margin-top:5px;padding:5px 8px;line-height:1.4}
.pszenen{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-top:6px}
.pszenen .pszene{padding:5px 8px;border-radius:7px;border:1px solid var(--line)}
.pszenen .pszene b{font-size:12px}
.pszenen .seg{grid-column:1/-1;margin-top:3px!important}
.plinks .pblock summary{padding:6px 0 4px}
.plinks .row.tight{gap:4px;flex-wrap:wrap}
.plinks .btn.xs{padding:4px 8px;font-size:11px}
.plinks .badge{font-size:11px;padding:3px 6px}

.klangtoast{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:10px;
 padding:9px 12px 9px 14px;border-radius:10px;background:color-mix(in srgb,var(--panel) 94%,transparent);
 border:1px solid var(--warm);box-shadow:0 6px 24px rgba(0,0,0,.35);font-size:13px;font-weight:600}

.wg{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--acc)}
.wg-balken{flex:1;height:4px;border-radius:2px;background:var(--panel2);overflow:hidden}
.wg-stand{display:block;height:100%;width:0;background:var(--acc)}

/* elf Szenen: drei Spalten, damit die linke Spalte ohne Scrollen passt */
.pszenen{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.pszenen .pszene{padding:4px 3px;text-align:center;min-width:0}
.pszenen .pszene b{font-size:11px;line-height:1.15;display:block;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.pwelt span{min-height:0}
.pwelt span:empty{display:none}
.plinks{gap:4px}
.plinks .pblock summary{padding:5px 0 3px}

/* ===== Heute: eine aufgeraeumte Startseite ===== */
.heute{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:stretch}
.heute>.card{margin:0}
.h-held{grid-column:span 8;display:flex;flex-direction:column;gap:6px;padding:22px 24px}
.h-stand{grid-column:span 4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.h-malen{grid-column:span 4;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,var(--panel)),var(--panel) 70%)}
.h-konkret{grid-column:span 4;display:flex;flex-direction:column;gap:6px}
.h-spiele{grid-column:span 4}
.h-wuerfel{grid-column:span 3;display:flex;flex-direction:column;gap:8px}
.h-werkzeuge{grid-column:span 6}
.h-frei{grid-column:span 3}
.h-verlauf{grid-column:span 12}
.h-kicker{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.h-titel{font-family:var(--serif);font-size:30px;font-weight:600;margin:0;line-height:1.1}
.h-liste{margin:6px 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;counter-reset:h}
.h-liste li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:var(--panel2);font-size:13.5px;counter-increment:h}
.h-liste li span::before{content:counter(h) ". ";color:var(--ink3)}
.h-liste li em{font-style:normal;color:var(--ink3);font-size:12px;white-space:nowrap}
.h-liste li.mehr{background:none;color:var(--ink3);font-size:12px;padding:2px 10px}
.h-liste li.mehr::before,.h-liste li.mehr span::before{content:none}
.h-fort{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin:6px 0 2px}
.h-fort i{display:block;height:100%;background:var(--acc)}
.h-zahlen{display:flex;gap:18px;margin:4px 0 8px}
.h-zahlen div{display:flex;flex-direction:column;align-items:center}
.h-zahlen b{font-family:var(--serif);font-size:24px}
.h-zahlen span{font-size:11px;color:var(--ink3)}
.h-szenen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.h-szenen button{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;
 padding:6px 11px;border-radius:999px;cursor:pointer}
.h-szenen button:hover{border-color:var(--acc);color:var(--acc)}
.h-feld{appearance:none;text-align:left;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;
 padding:8px 11px;border-radius:9px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.h-feld:hover{border-color:var(--acc)}
.h-feld b{font-size:13.5px}.h-feld span{font-size:11.5px;color:var(--ink3)}
.h-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:6px}
.h-tools :is(button,a){text-decoration:none;appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;text-align:left;
 padding:10px 12px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.h-tools :is(button,a):hover{border-color:var(--acc)}
.h-tools b{font-size:13px}.h-tools span{font-size:11px;color:var(--ink3)}
@media (max-width:980px){
 .heute>.card{grid-column:span 12}
 .h-tools{grid-template-columns:repeat(2,1fr)}
}

.phinw{margin:2px 0 0;padding:0 0 0 14px;font-size:11px;line-height:1.45;color:var(--ink2)}
.phinw li{margin:2px 0}
.phinw li.immer{list-style:none;margin-left:-14px;margin-top:6px;font-size:10.5px;color:var(--ink3)}

/* Metronom-Feld */
#metpop{position:fixed;top:calc(var(--head-h) + 6px);right:10px;z-index:60;width:250px;padding:12px;border-radius:12px;
 background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:8px}
#metpop[hidden]{display:none}
.mp-kopf{display:flex;align-items:baseline;gap:8px}
.mp-kopf b{font-family:var(--serif);font-size:34px;line-height:1}
.mp-kopf span{font-size:11px;color:var(--ink3)}
.mp-regler{width:100%}
.mp-zeile{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mp-zeile>span{font-size:11px;color:var(--ink3);width:44px}
@keyframes schlag{0%{color:var(--warm);transform:scale(1.15)}100%{transform:scale(1)}}
.htakt.schlag svg{animation:schlag .18s ease-out}

.hakenliste{display:flex;flex-direction:column;gap:6px;margin-top:6px;text-align:left}
.haken{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:9px;background:var(--panel2);cursor:pointer}
.haken input{width:auto;margin-top:3px}
.haken b{display:block;font-size:14px}.haken em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px}
.haken:has(input:checked){opacity:.55}
.haken:has(input:checked) b{text-decoration:line-through}
.runfb{min-height:18px;margin:4px 0 0;font-size:13px;font-weight:600;color:var(--acc)}

/* ===== Lernspiele ===== */
.spielraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:8px}
.spielkarte .stufen{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;margin-top:12px}
.stufe{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
 background:var(--sunk);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:transform .12s,border-color .12s}
.stufe:hover{transform:translateY(-1px);border-color:var(--acc)}
.stufe .snr{font-size:11px;opacity:.6}
.stufe b{font-size:14px}
.stufe .sst{font-size:13px;color:var(--warm);letter-spacing:1px}
.stufe.zu{opacity:.45;cursor:default}
.stufe.zu:hover{transform:none;border-color:var(--line)}
.spielbuehne{position:fixed;left:0;right:0;top:var(--head-h);bottom:var(--nav-h);overflow:hidden;background:#111}
.spielbuehne canvas{display:block;width:100%;height:100%}
.spielkopf{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;gap:12px;color:#f4eee2;
 background:rgba(10,12,16,.55);backdrop-filter:blur(6px);padding:6px 10px;border-radius:10px;font-size:14px;flex-wrap:wrap}
.spielkopf .btn.ghost{color:#f4eee2}
.spielwerte{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.spielkb{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(760px,94%);background:rgba(10,12,16,.55);
 padding:6px;border-radius:10px}
.spielkb .kb{width:100%;height:auto;display:block}
.spielschild{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.spielschild .schild{pointer-events:auto;max-width:440px;margin:0 16px;background:var(--panel);color:var(--ink);padding:22px 24px;border-radius:14px;
 box-shadow:0 12px 40px rgba(0,0,0,.4);text-align:center;font-size:16px;line-height:1.5}
.spielschild .schild p{margin:0 0 14px}
.prahmen{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.pstage .plinks,.pstage .prechts{z-index:2}
html[data-oeffentlich="1"] .privat{display:none}
#recht{position:fixed;left:10px;bottom:calc(var(--nav-h) + 5px);z-index:40;font-size:11px;opacity:.55}
#recht a{color:inherit;text-decoration:none}
#recht a:hover{text-decoration:underline;opacity:1}
.seo-seite{max-width:760px;margin:0 auto;padding:24px 18px 120px;line-height:1.55}
.seo-seite a{color:var(--acc)}
.h-spiele .h-tools{grid-template-columns:1fr}
.h-werkzeuge .h-tools{grid-template-columns:repeat(3,1fr)}
.spielkb{touch-action:none;user-select:none;-webkit-user-select:none}
.spielkb [data-n]{cursor:pointer}
.stufe.dran{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.stufe.dran .snr{color:var(--acc);opacity:1;font-weight:700}
.stufe .tiny{opacity:.65;line-height:1.3}
.pzu{margin-left:auto}
.plinks.zu>*:not(.pzeile):not(.pjetzt){display:none}
.plinks.zu{width:auto;max-width:calc(100% - 28px)}
.pkb{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(560px,96%);z-index:3;
 background:rgba(10,12,16,.55);padding:5px;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none}
.pkb .kb{width:100%;height:auto;display:block}
.pkb [data-n]{cursor:pointer}
.standspiele{display:flex;flex-direction:column;gap:10px}
.ststufen{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.ststufen button{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;font-size:12px;
 border-radius:7px;padding:4px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-width:34px}
.ststufen button i{font-style:normal;font-size:10px;color:var(--warm);letter-spacing:-1px}
.ststufen button.v0{opacity:.55}
.ststufen button:hover{border-color:var(--acc)}

/* ===== Stufen ===== */
.st-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.st-heim{display:flex;flex-direction:column;min-width:130px}
.st-heim b{font-family:var(--serif);font-size:26px;line-height:1.1}
.st-wahl{align-items:center;gap:6px}
.st-wahl select{font:inherit;font-size:13px;padding:5px 6px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink)}
.st-schalter{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.st-schalter input{width:auto;margin:0}
.st-leer{text-align:center;padding:28px 16px}
.st-aufgabe{text-align:center;font-size:20px;margin:6px 0 4px}
.st-aufgabe b{font-family:var(--serif);font-size:42px;display:inline-block;min-width:1.2em;color:var(--acc)}
.st-meldung{text-align:center;font-weight:600;margin:6px 0 10px;padding:6px 10px;border-radius:10px}
.st-meldung.ok{background:var(--ok-soft);color:var(--ok)}
.st-meldung.nein{background:var(--warm-soft);color:var(--warm)}
.st-kacheln{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:10px 0 12px}
.st-kachel{--h:0;appearance:none;font:inherit;color:var(--ink);cursor:pointer;text-align:center;
 display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 10px;border-radius:14px;
 border:1px solid hsl(var(--h) 45% 50% / .35);background:hsl(var(--h) 55% 50% / .10);transition:transform .15s,background .15s,box-shadow .15s}
.st-kachel b{font-family:var(--serif);font-size:34px;line-height:1;color:hsl(var(--h) 60% 62%)}
.st-kachel .st-name{font-weight:700;font-size:15px}
.st-kachel .st-alt{font-style:normal;font-size:11px;opacity:.75}
.st-kachel .st-gef{font-size:11px;color:var(--ink3)}
.st-kachel .st-rom{font-size:10.5px;opacity:.45;letter-spacing:.04em}
.st-kachel:hover{transform:translateY(-2px)}
.st-kachel.an,.st-kachel.gezeigt{background:hsl(var(--h) 60% 50% / .38);box-shadow:0 0 0 2px hsl(var(--h) 65% 60%);transform:translateY(-3px)}
.st-f1{--h:210}.st-f2{--h:270}.st-f3{--h:320}.st-f4{--h:30}.st-f5{--h:0}.st-f6{--h:160}.st-f7{--h:50}
.st-jetzt{text-align:center;font-size:18px;margin:4px 0 8px}
.st-jetzt b{font-size:22px}
.st-jetzt .st-zahl{font-family:var(--serif);font-size:30px;color:var(--acc)}
.st-jetzt.fremd b{color:var(--warm)}
.st-jetzt.leise{color:var(--ink3);font-size:15px}
.st-kette{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:6px 0 10px}
.st-kette span{display:flex;flex-direction:column;align-items:center;padding:4px 9px;border-radius:9px;background:var(--panel2);min-width:38px}
.st-kette span b{font-family:var(--serif);font-size:20px}
.st-kette span i{font-style:normal;font-size:11px;color:var(--ink3)}
.st-kette span.fremd b{color:var(--warm)}
.st-kette em{font-style:normal;color:var(--ink3)}
.st-kette.st-gross span{padding:8px 14px}
.st-kette.st-gross span b{font-size:30px}
.st-kette span.ok{background:var(--ok-soft)}
.st-kette span.jetzt{box-shadow:0 0 0 2px var(--acc)}
.st-folgen{justify-content:center}
.st-kb .kb{width:100%;height:auto;display:block}
.st-kb #stKb{touch-action:none;user-select:none;-webkit-user-select:none}
.st-kb [data-n]{cursor:pointer}
@media (max-width:640px){
 .st-kacheln{grid-template-columns:repeat(4,1fr)}
 .st-kachel b{font-size:28px}
 .st-aufgabe b{font-size:34px}
}
.st-wahl{display:flex;flex-wrap:wrap;flex:1}
.st-wahl select{width:auto;flex:none}
.st-wahl .btn{flex:none}

/* Hände auf der Klaviatur */
.haende-leg{display:flex;align-items:center;gap:6px;margin:6px 0 0}
.haende-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:6px}
.haende-leg i:first-child{margin-left:0}
.haende-leg .hl-l{background:var(--hand-l)}.haende-leg .hl-r{background:var(--kb-du)}
.st-haende{font-size:13px;color:var(--ink2);margin-top:3px}
.st-haende .l{color:var(--hand-l);font-weight:700}.st-haende .r{color:var(--kb-du);font-weight:700}
/* Stufen: alles Wichtige ohne Scrollen */
.st-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0 6px}
.st-titel{font-family:var(--serif);font-size:26px;margin:0 4px 0 0;line-height:1}
.st-leiste .st-heim{min-width:0}
.st-leiste .st-heim b{font-size:22px}
.st-leiste .st-wahl{flex:0 1 auto}
.st-tabs{padding:0;margin:0 0 0 auto}
.st-kacheln{gap:6px;margin:6px 0 6px}
.st-kachel{padding:8px 4px 7px;gap:1px}
.st-kachel b{font-size:28px}
.st-aufgabe{margin:0 0 2px;font-size:18px}
.st-aufgabe b{font-size:34px}
.st-meldung{margin:4px 0 6px;padding:4px 10px}
.st-jetzt{margin:2px 0 4px}
.st-kette{margin:4px 0 6px}
.st-kette.st-gross span{padding:5px 12px}
.st-kette.st-gross span b{font-size:24px}
.st-folgen{align-items:center;padding-bottom:4px}
.st-folge-fuss{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:0 0 4px}
.st-kb{padding:8px 10px}
.st-kb .kb{max-height:118px;width:auto;max-width:100%;margin:0 auto}
.st-kb-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;margin-top:4px}
.st-kb-fuss .haende-leg{margin:0}
/* Weiter-Taste */
#weiterToast{position:fixed;left:50%;top:calc(var(--head-h) + 14px);transform:translateX(-50%);z-index:60;pointer-events:none;
 background:var(--acc);color:var(--acc-ink);font-weight:700;padding:6px 14px;border-radius:999px;opacity:0}
#weiterToast.an{animation:weiterAn 1s ease both}
@keyframes weiterAn{0%{opacity:0;transform:translate(-50%,-6px)}15%{opacity:1;transform:translate(-50%,0)}70%{opacity:1}100%{opacity:0}}
.st-griff{display:block;width:100%;max-width:120px;margin:3px auto 2px;pointer-events:none}
.st-griff .kb{width:100%;height:auto;display:block}
.st-folge-typ{text-align:center;margin:-2px 0 4px;color:var(--ink3)}
/* Stufen: Bauen und Erkennen */
.st-aufgabe.st-klein{font-size:15px;color:var(--ink2)}
.st-mitte{justify-content:center;margin:0 0 4px}
.st-kette span.leer{background:none}
.st-eigene{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;align-items:center;margin:0 0 4px}
.st-eigen{display:inline-flex;gap:0}
.st-kette span.erkannt{background:var(--ok-soft);box-shadow:0 0 0 1px var(--ok)}
.st-entdeckt{text-align:center;color:var(--ink3);margin:0 0 6px}
/* Akkord-Finder: Aufnahme */
.f-auf-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.f-auf-kopf .tiny{flex:1;min-width:200px}
.f-rec{color:var(--bad);animation:fRec 1.2s ease-in-out infinite}
@keyframes fRec{50%{opacity:.45}}
.f-kette{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.f-kette>span{padding:5px 11px;border-radius:9px;background:var(--panel2);font-weight:700}
.f-chip{padding:5px 8px 5px 11px;border-radius:9px;background:var(--panel2);font:inherit;font-weight:700;color:inherit;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.f-chip i{font-style:normal;font-weight:400;color:var(--ink3);font-size:15px;line-height:1}
.f-chip:hover{border-color:var(--bad)}.f-chip:hover i{color:var(--bad)}
.f-kette em{font-style:normal;color:var(--ink3)}
.f-kette .leise{background:none;font-weight:400;color:var(--ink3)}
.f-frage{background:none!important;border:1px dashed var(--line2);color:var(--ink3)}
.f-vorschlaege{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.f-vs{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.f-vs b{font-size:17px}
.f-vs .tiny{color:var(--ink3);line-height:1.3}
#fKb .kb{max-height:150px;width:auto;max-width:100%;margin:0 auto;display:block}
.f-meldung{margin:6px 0 0;color:var(--ok);font-weight:600}
.f-griff{display:block;margin:4px 0 2px}
.f-griff .kb{width:100%;height:auto;max-height:78px;display:block}
.f-item{flex-wrap:wrap}
.f-item .tap{flex:1;min-width:0}
.f-griff.klein{order:5;flex:0 0 100%;margin:8px 0 0}
.f-griff.klein .kb{max-height:64px}

/* Akkord-Finder: Wirkung – Rolle (Farbe + Zeichen), Spannung (Balken), Richtung, liegende Töne */
.f-r-ruhe{--fn:var(--fn-ruhe)}.f-r-weg{--fn:var(--fn-weg)}.f-r-spannung{--fn:var(--fn-spannung)}.f-r-farbe{--fn:var(--fn-farbe)}
.f-wk{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.f-rolle{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:700;line-height:1.5;
 color:var(--fn);background:color-mix(in srgb,var(--fn) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fn) 45%,transparent);white-space:nowrap}
.f-meter{display:inline-flex;align-items:flex-end;gap:2px;height:14px;vertical-align:middle}
.f-meter i{width:4px;border-radius:1px;background:var(--line2);opacity:.55}
.f-meter i:nth-child(1){height:4px}.f-meter i:nth-child(2){height:6.5px}.f-meter i:nth-child(3){height:9px}.f-meter i:nth-child(4){height:11.5px}.f-meter i:nth-child(5){height:14px}
.f-meter i.an{opacity:1}
.f-meter i.an:nth-child(1){background:#4aa874}.f-meter i.an:nth-child(2){background:#93b248}.f-meter i.an:nth-child(3){background:#d6a53a}.f-meter i.an:nth-child(4){background:#e0793a}.f-meter i.an:nth-child(5){background:#d4472f}
.f-pf{font-weight:800;font-size:14px;line-height:1}
.f-pf.hoch{color:var(--fn-spannung)}.f-pf.runter{color:var(--fn-ruhe)}.f-pf.gleich{color:var(--ink3)}
.f-pf.aufl{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--fn-ruhe);color:#fff;font-size:11px}
.f-dots{font-size:10px;letter-spacing:1px;color:var(--ink2)}
.f-vs{border-top:3px solid var(--fn,var(--line))}
.f-vs.treffer{box-shadow:0 0 0 2px var(--fn);background:color-mix(in srgb,var(--fn) 10%,var(--panel2))}
.f-chip{box-shadow:inset 3px 0 0 var(--fn,transparent)}
.f-chip .f-meter{height:11px}.f-chip .f-meter i{width:3px}
.f-probe{display:inline-flex;align-items:center;gap:8px;padding:4px 10px!important;border-radius:9px;font-weight:700;
 background:color-mix(in srgb,var(--fn) 14%,var(--panel2))!important;box-shadow:0 0 0 1.5px var(--fn);animation:fProbe .35s ease-out}
@keyframes fProbe{from{transform:scale(1.06)}}
.f-zaehl{display:inline-flex;gap:3px}.f-zaehl i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink3)}
.f-zaehl i.an{background:var(--acc);box-shadow:none}
.f-kurz{color:var(--ink3)}
.f-kurz kbd{font:inherit;font-weight:700;padding:0 5px;border-radius:5px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2)}
.f-hilfe{position:relative;background:none;border:0;border-radius:0;padding:0;margin:0}
.f-hilfe summary::after{content:none}
.f-hilfe summary{list-style:none;cursor:pointer;padding:0 0 1px;gap:0;box-sizing:border-box;line-height:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink3);border:1px solid var(--line2)}
.f-hilfe summary::-webkit-details-marker{display:none}
.f-hilfe[open] summary{color:var(--acc);border-color:var(--acc)}
.f-hilfe-box{position:absolute;right:0;top:28px;z-index:30;width:min(380px,86vw);padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;line-height:1.45}
.f-hilfe-box p{margin:0 0 8px}.f-hilfe-box p:last-child{margin:0}
.f-leg{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:5px}
.f-leg .f-rolle{min-width:92px}

/* Seiten-Info: Titel + Beschreibung hinter dem ⓘ in der Kopfleiste */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hinfo{position:relative;flex:none;outline:none}
.hinfo-i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);color:var(--ink3);
 font-family:var(--serif);font-style:italic;font-weight:700;font-size:13px;cursor:help}
.hinfo:hover .hinfo-i,.hinfo:focus .hinfo-i{color:var(--acc);border-color:var(--acc)}
.hinfo-box{display:none;position:absolute;right:-8px;top:32px;z-index:40;width:min(320px,80vw);padding:10px 13px;border-radius:11px;
 background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;line-height:1.45;color:var(--ink2)}
.hinfo-box b{display:block;color:var(--ink);font-size:14px;margin:0 0 2px}
.hinfo-box span b{display:inline;font-size:inherit}
.hinfo:hover .hinfo-box,.hinfo:focus .hinfo-box{display:block}

/* Akkord-Finder: Spannungsbogen – Säulenhöhe = Spannung, Farbe = Rolle */
.f-bogen{display:flex;align-items:flex-end;gap:6px;margin:10px 0 4px;overflow-x:auto;padding-bottom:2px}
.f-bg{appearance:none;border:0;background:none;font:inherit;color:inherit;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:58px;position:relative;cursor:pointer}
.f-bg-s{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--fn);opacity:.85;transition:height .25s}
.f-bg b{font-size:13.5px;white-space:nowrap}
/* nur das × der Kettensäulen – nicht die Zähl-Punkte der Probe */
.f-bg>i{position:absolute;top:-2px;right:3px;font-style:normal;font-size:13px;color:#fff;opacity:0;transition:opacity .15s}
button.f-bg:hover .f-bg-s{background:var(--bad)}button.f-bg:hover>i{opacity:1}
.f-bg-neu{cursor:default}
.f-bg-neu .f-bg-s{background:none;border:1.5px dashed var(--line2);opacity:1}
.f-bg-neu b{color:var(--ink3)}
.f-bg-probe .f-bg-s{background:color-mix(in srgb,var(--fn) 35%,transparent);border-color:var(--fn);animation:fProbe .35s ease-out}
.f-bg-probe b{color:var(--ink)}
.f-bg-pfeil{font-style:normal;color:var(--ink3);align-self:center;padding:0 2px}
.f-leer{margin:10px 0 0;color:var(--ink3)}
/* Acht Vorschläge in vier Spalten – je Rolle zwei */
.f-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
@media (max-width:760px){.f-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-spalte{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:12px;background:color-mix(in srgb,var(--fn) 7%,transparent);box-shadow:inset 0 3px 0 var(--fn)}
.f-sp-kopf{display:flex;align-items:center;gap:8px;padding:3px 2px 1px}
.f-sp-was{font-size:12px;color:var(--ink3)}
.f-spalte .f-vs{border-top:0;padding:6px 8px;gap:2px;background:var(--panel)}
.f-vs-kopf{display:flex;align-items:center;gap:5px}
.f-vs-kopf b{font-size:16px}
.f-vs-kn{margin-left:auto;display:flex;gap:4px}
.f-vs-kn .btn{min-width:28px;padding-left:7px;padding-right:7px}
.f-top{color:var(--warm);font-size:14px}
.f-vs.top{box-shadow:0 0 0 1.5px var(--warm)}
.f-spalte .f-griff .kb{max-height:58px}
/* Stufe eines Akkords in der Tonart (1 6 2 5) */
.f-stufe{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:6px;font-size:12px;font-weight:800;
 font-variant-numeric:tabular-nums;color:var(--fn,var(--ink2));background:color-mix(in srgb,var(--fn,var(--ink3)) 16%,transparent)}
.f-bg .f-stufe{margin-top:1px}
.f-hilfe summary{justify-content:center;align-content:center}

/* Vorschlagskarten: auch in schmalen Spalten (Handy) bleibt alles in der Karte */
.f-spalte,.f-spalte .f-vs{min-width:0}
.f-vs-kopf{flex-wrap:wrap;row-gap:4px}
.f-vs-kopf b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.f-spalten{gap:6px}.f-spalte{padding:4px}.f-sp-was{display:none}.f-vs-kn .btn{min-width:24px;padding:3px 6px}.f-vs-kopf b{font-size:14.5px}}
.f-item{box-shadow:inset 3px 0 0 var(--fn,transparent)}
.f-item .f-wk{margin-top:3px}

/* Neue Version verfügbar: unten rechts deutlich, anklickbar */
#version.update{pointer-events:auto;cursor:pointer;opacity:1;font-size:12.5px;letter-spacing:0;padding:6px 12px;border-radius:99px;
 background:var(--acc);color:var(--acc-ink);box-shadow:var(--shadow);animation:versionUpdate 2.4s ease-in-out infinite}
#version.update kbd{font:inherit;font-weight:800;padding:0 6px;border-radius:5px;background:color-mix(in srgb,var(--acc-ink) 22%,transparent)}
@keyframes versionUpdate{50%{transform:translateY(-2px)}}

/* Darüber spielen: Melodie & Solo */
.f-solo-los{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.f-solo-los .tiny{color:var(--ink3);flex:1;min-width:200px}
.solo-grund{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 6px;font-size:13.5px}
.solo-grund b{margin-right:4px}
.solo-penta{display:inline-flex;gap:3px;margin-left:4px}
.solo-penta i{font-style:normal;font-weight:700;padding:0 6px;border-radius:5px;background:color-mix(in srgb,var(--fn-ruhe) 18%,transparent);color:var(--fn-ruhe)}
.solo-karten{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px}
.solo-karte{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:0 0 190px;display:flex;flex-direction:column;gap:2px;
 padding:7px 9px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);box-shadow:inset 0 3px 0 var(--fn,var(--line))}
.solo-karte.jetzt{border-color:var(--acc);box-shadow:inset 0 3px 0 var(--fn,var(--line)),0 0 0 2px var(--acc)}
.solo-kk{display:flex;align-items:center;gap:5px}.solo-kk b{font-size:16px}
.solo-mode{font-weight:700;font-size:13px;color:var(--fn,var(--ink))}
.solo-wie{font-size:11.5px;color:var(--ink3);line-height:1.3;min-height:30px}
.solo-griff .kb{width:100%;height:auto;display:block;margin:3px 0 2px}
.solo-neu{font-size:11.5px;font-weight:700;color:var(--fn-farbe)}.solo-neu.leise{color:var(--ink3);font-weight:400}
.solo-unten{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-top:6px}
@media (max-width:820px){.solo-unten{grid-template-columns:1fr}}
.solo-leitbox .tiny{color:var(--ink3)}
.solo-leit{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:6px}
.solo-lt{display:inline-flex;flex-direction:column;align-items:center;min-width:34px;padding:2px 6px;border-radius:7px;background:var(--panel2);line-height:1.15}
.solo-lt b{font-size:13.5px}.solo-lt i{font-style:normal;font-size:10.5px;color:var(--fn-ruhe);font-weight:700}
.solo-schritt{font-style:normal;font-size:11px;color:var(--ink3);min-width:16px;text-align:center}
.solo-seg{margin-bottom:6px}
.solo-auftrag{margin:0 0 6px;color:var(--ink2)}
.solo-stat{margin:0;font-size:13px}
.solo-stat .z,.solo-z{color:var(--fn-ruhe);font-weight:700}.solo-stat .f,.solo-f{color:var(--fn-weg);font-weight:700}.solo-stat .m,.solo-m{color:var(--bad);font-weight:700}
.solo-leg{margin:8px 0 0;color:var(--ink3)}
.solo-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:3px}
.solo-leg i.z{background:var(--fn-ruhe)}.solo-leg i.f{background:var(--fn-weg)}.solo-leg i.m{background:var(--bad)}
.solo-groove{flex:none}.solo-groove button{padding:4px 10px;font-size:12.5px}
.solo-tempo{color:var(--ink3);white-space:nowrap}.solo-tempo b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Akkordfolgen speichern */
.f-folgen{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.f-name{flex:0 1 320px;min-width:160px;padding:4px 9px;font:inherit;font-size:13px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:var(--ink)}
.f-folgen-liste{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:6px}
.f-folgen-liste .tiny{color:var(--ink3)}
.f-fchip{display:inline-flex;align-items:stretch;border-radius:99px;border:1px solid var(--line2);overflow:hidden;background:var(--panel)}
.f-fchip button{appearance:none;border:0;background:none;color:var(--ink2);font:inherit;font-size:12.5px;padding:3px 9px;cursor:pointer}
.f-fchip button:hover{background:var(--panel2);color:var(--ink)}
.f-fchip .x{padding:3px 7px 3px 4px;color:var(--ink3)}.f-fchip .x:hover{color:var(--bad)}
.f-fchip.on{border-color:var(--acc)}.f-fchip.on button:first-child{color:var(--acc);font-weight:700}
/* Startseite: Akkordfolgen */
.h-folgen{grid-column:span 12}
.h-letzte{appearance:none;display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
 padding:10px 12px;margin:6px 0 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.h-letzte:hover{border-color:var(--acc)}
.h-l-titel{font-size:12px;color:var(--ink3)}
.h-kette{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.h-kette span{font-weight:700;font-size:16px;padding:3px 10px;border-radius:8px;background:var(--panel)}
.h-kette em{font-style:normal;color:var(--ink3)}
.h-gespeichert{margin-top:12px}.h-gespeichert .tiny{color:var(--ink3)}
.h-g-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:6px}
.h-g-liste button{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);display:flex;flex-direction:column;gap:2px}
.h-g-liste button:hover{border-color:var(--acc)}
.h-g-liste b{font-size:14px}.h-g-liste span{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Vollbild-Knopf in der Kopfleiste (die App bleibt im Vollbild komplett sichtbar) */
.hvoll{flex:none;padding:6px 8px}
/* Vollbild: Mauszeiger weg, solange er still liegt */
body.maus-weg,body.maus-weg *{cursor:none!important}

/* ===================== klavier.net: Links, Einstieg, Fuß, Tour ===================== */
a.htool,a.hlogo,a.stufe,a.btn,.rowlink{text-decoration:none}
a.btn{display:inline-flex;align-items:center;justify-content:center}
.rowlink{color:inherit}
.h-start{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 24px;
 background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 14%,var(--panel)),var(--panel) 65%)}
.h-start h1{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.15;margin:0 0 8px}
.h-start p{margin:0 0 12px;color:var(--ink2);max-width:62ch}
.h-start .row{flex-wrap:wrap;gap:8px}
.h-start .hs-info{margin:10px 0 0;color:var(--ink3)}
.hs-schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:230px}
.hs-schritte li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.hs-schritte b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink);font-size:13px}
@media (max-width:820px){.h-start{grid-template-columns:1fr;padding:18px}.h-start h1{font-size:24px}.hs-schritte{min-width:0}}
.fuss{margin:48px 0 0;padding:10px 0 0;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);font-size:11px;color:var(--ink3);text-align:center;opacity:.75;transition:opacity .2s}
.fuss:hover{opacity:1}
.fuss-links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;margin-bottom:6px}
.fuss-links a,.fuss-links button{color:var(--ink3);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.fuss-links a:hover,.fuss-links button:hover{color:var(--acc);text-decoration:underline}
.fuss-recht{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;font-size:10.5px}
.fuss-recht a{color:inherit;text-decoration:none}.fuss-recht a:hover{text-decoration:underline}
.fuss-recht span{opacity:.7;font-variant-numeric:tabular-nums}
html[data-oeffentlich="1"] body:not(.buehne) #recht,html[data-oeffentlich="1"] body:not(.buehne) #version:not(.update){display:none}
#tour{position:fixed;inset:0;z-index:1000;pointer-events:none}
#tour[hidden]{display:none}
.tour-licht{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(10,12,16,.58);outline:2px solid var(--acc);
 transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease;pointer-events:none}
.tour-zeiger{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--acc);opacity:0;
 box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 30%,transparent);transition:left .5s ease,top .5s ease,opacity .2s;animation:tourPuls 1.4s ease-in-out infinite}
@keyframes tourPuls{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--acc) 12%,transparent)}}
.tour-box{position:fixed;pointer-events:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:14px;
 padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.28);transition:left .35s ease,top .35s ease}
.tour-kopf{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.tour-zu{appearance:none;border:0;background:none;color:var(--ink3);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.tour-titel{display:block;font-family:var(--serif);font-size:19px;margin:4px 0 4px}
.tour-text{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink2)}
.tour-knoepfe{display:flex;justify-content:flex-end;gap:8px}
@media (prefers-reduced-motion:reduce){.tour-licht,.tour-zeiger,.tour-box{transition:none;animation:none}}

/* ===================== KLANG: STIMMUNGEN & KLAVIER-LABOR ===================== */
.kl{max-width:1180px;margin:0 auto}
.kl-tabs{display:inline-flex;gap:3px;background:var(--sunk);padding:3px;border-radius:11px;margin:4px 0 12px}
.kl-tabs>*{appearance:none;border:0;background:transparent;color:var(--ink2);font:inherit;font-size:14px;font-weight:650;padding:7px 16px;border-radius:9px;cursor:pointer;text-decoration:none}
.kl-tabs>.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.09)}
.kl-stimm{margin:0 0 12px}
.kl-stimm button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;white-space:normal;line-height:1.2}
.kl-stimm button b{font-size:13.5px}
.kl-stimm button span{font-size:11px;font-weight:500;color:var(--ink3)}
.kl-stimm button.on{background:var(--acc);color:var(--acc-ink)}
.kl-stimm button.on span{color:var(--acc-ink);opacity:.8}
.kl-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:14px;align-items:start}
.kl-kreiskarte{display:flex;flex-direction:column;align-items:center}
.kl-kreis{width:100%;max-width:340px;height:auto;display:block}
.kl-seg{cursor:pointer;outline:none}
.kl-seg path{stroke:var(--panel);stroke-width:2;transition:opacity .15s}
.kl-seg:hover path{opacity:.85}
.kl-seg.an path{stroke:var(--ink);stroke-width:3}
.kl-seg:focus-visible path{stroke:var(--acc);stroke-width:4}
.kl-seg text{font-size:17px;font-weight:700;fill:#16181a;pointer-events:none}
.kl-mitte1{font-size:22px;font-weight:700;fill:var(--ink)}
.kl-mitte2{font-size:12px;fill:var(--ink2)}
.kl-legende{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;font-size:11.5px;color:var(--ink2);margin-top:4px}
.kl-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.kl-tipp{margin:6px 0 0;text-align:center}
.kl-text{margin:2px 0 12px}
.kl-bsp{margin:0 0 10px}
.kl-knoepfe{align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.kl-knoepfe #klPlay{min-width:140px}
.kl-klang{flex:0 0 auto;width:auto}
.kl-klang button{padding:6px 12px}
.kl-wert{display:grid;grid-template-columns:118px minmax(40px,1fr) 84px;grid-template-areas:"n b z" "n e e";align-items:center;gap:2px 10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.kl-wert>span{grid-area:n;color:var(--ink2);font-weight:600}
.kl-wert>b{grid-area:z;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kl-wert>em{grid-area:e;font-style:normal;font-size:11.5px;color:var(--ink3)}
.kl-bal{grid-area:b;display:block;height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.kl-bal b{display:block;height:100%;border-radius:4px}
.kl-teilen{align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.kl-warum{margin-top:14px}
.kl-punkte{margin:6px 0 0;padding-left:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 22px;font-size:13.5px;color:var(--ink2)}
.kl-punkte b{color:var(--ink);display:block}
.kl-lab{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}
.kl-ober,.kl-saitenkarte,.kl-spiel{min-width:0}
.kl-saitenkarte,.kl-spiel{grid-column:1 / -1}
.kl-kopf{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.kl-kopf p{margin:0;max-width:44ch;text-align:right}
.kl-tonname{font-family:var(--serif);font-size:26px;font-weight:600}
.kl-lab canvas{display:block;width:100%}
.kl-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.kl-zeile b{min-width:62px}
.kl-zeile input[type=range]{flex:1;min-width:120px;accent-color:var(--acc)}
.kl-erk{margin:2px 0 4px;color:var(--acc);font-weight:600}
.kl-regler p.tiny{margin:4px 0 10px}
.kl-pkt{display:inline-block;width:10px;height:3px;border-radius:2px;margin:0 4px 0 2px;vertical-align:middle}
.kl-pkt.eig{background:var(--acc)}.kl-pkt.mit{background:var(--warm)}
.kl-tasten{position:relative;height:120px;margin:2px 0 8px;touch-action:none;user-select:none;-webkit-user-select:none}
.kl-tasten button{position:absolute;top:0;appearance:none;padding:0;cursor:pointer;font:inherit}
.kl-w{height:100%;background:var(--white-key);border:1px solid var(--key-line);border-radius:0 0 6px 6px;z-index:1}
.kl-w span{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--ink3)}
.kl-s{height:62%;background:var(--black-key);border:1px solid #000;border-radius:0 0 4px 4px;z-index:2}
.kl-w.an{background:var(--acc-soft);border-color:var(--acc)}
.kl-s.an{background:var(--acc)}
.midi-anl .midi-schritte{margin:8px 0 6px;min-width:0}
.midi-anl .midi-schritte li{align-items:flex-start;font-size:13.5px}
.midi-anl .midi-schritte strong{color:var(--ink)}
details.midi-anl{padding:0 16px}
details.midi-anl[open]{padding-bottom:8px}
.midi-hilfe{margin:6px 0 0;background:var(--panel2)}
@media (max-width:900px){
 .kl-raster,.kl-lab{grid-template-columns:1fr}
 .kl-punkte{grid-template-columns:1fr}
 .kl-kopf{flex-direction:column;gap:4px}.kl-kopf p{text-align:left}
}
@media (max-width:520px){
 .kl-stimm{flex-wrap:wrap}.kl-stimm button{flex:1 1 45%}
 .kl-wert{grid-template-columns:88px minmax(30px,1fr) auto;font-size:12.5px}
 .kl-tasten{height:104px}
}

/* Stufen-Bauen: wie oft angeschlagen */
.st-x{appearance:none;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font:inherit;font-size:11px;font-weight:700;
 border-radius:99px;padding:0 6px;margin-top:3px;cursor:pointer;font-variant-numeric:tabular-nums}
.st-x:hover{border-color:var(--acc);color:var(--acc)}
.st-bau-tipp{text-align:center;color:var(--ink3);margin:6px 0 0}
.st-kette span.fremd{border:1.5px dashed var(--fn-farbe,var(--line2))}
.st-kette span.fremd b{color:var(--fn-farbe,var(--ink2))}

/* Stufen-Bauen: Prüfung beim Mitspielen + Tonarten-Reise */
.st-kette span.ok{box-shadow:0 0 0 2px var(--fn-ruhe,var(--ok))}.st-kette span.ok b{color:var(--fn-ruhe,var(--ok))}
.st-kette span.falsch{box-shadow:0 0 0 2px var(--bad)}.st-kette span.falsch b{color:var(--bad)}
.st-reise{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:8px 0 0}
.st-reise .tiny{color:var(--ink3)}
.st-reise-seg button{padding:3px 9px;font-size:12px}
.st-rfelder{display:inline-flex;flex-wrap:wrap;gap:3px}
.st-rf{min-width:30px;text-align:center;font-size:11.5px;font-weight:700;padding:2px 5px;border-radius:6px;border:1px solid var(--line2);color:var(--ink3)}
.st-rf.ok{background:color-mix(in srgb,var(--fn-ruhe,var(--ok)) 22%,transparent);border-color:var(--fn-ruhe,var(--ok));color:var(--fn-ruhe,var(--ok))}
.st-rf.jetzt{border-color:var(--acc);color:var(--ink);box-shadow:0 0 0 1.5px var(--acc)}
.st-eigen .btn.on{border-color:var(--acc);color:var(--acc)}

/* ===================== SONGS – ein Lied in allen Tonarten =====================
   Aus Spielabstand lesbar: Tonart und Akkorde groß, Bedienung ruhig und klein am Rand */
.sg-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;max-width:1100px;margin:6px auto 0}
.sg-karte{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:18px 20px}
.sg-karte:hover{border-color:var(--acc)}
.sg-k-titel b{display:block;font-family:var(--serif);font-size:26px;font-weight:600}
.sg-k-titel span{color:var(--ink3);font-size:13px}
.sg-k-akk{font-size:15px;font-weight:600;color:var(--ink2);line-height:1.5}
.sg-k-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink3)}
.sg-k-stand{font-weight:700;color:var(--fn-ruhe,var(--ok))}
.sg-k-fuss .btn{margin-left:auto}
.sg{display:flex;flex-direction:column;gap:12px;max-width:1500px;margin:0 auto}
.sg-kopf{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:14px}
.sg-titel b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1}
.sg-titel span{font-size:12px;color:var(--ink3)}
.sg-tonart{grid-column:3;display:flex;align-items:center;gap:14px}
.sg-key{text-align:center;min-width:220px}
.sg-key b{display:block;font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.01em}
.sg-key span{font-size:12.5px;color:var(--ink3)}
.sg-pfeil{appearance:none;font:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;
 border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-size:22px;font-weight:700}
.sg-pfeil small{font-size:13px;font-weight:600;color:var(--ink2)}
.sg-pfeil:hover{border-color:var(--acc);color:var(--acc)}
.sg-los{grid-column:5;display:flex;align-items:center;gap:10px;justify-self:end}
.sg-tempo{color:var(--ink3);font-size:13px;white-space:nowrap}.sg-tempo b{color:var(--ink);font-variant-numeric:tabular-nums}
.sg-go{font-size:16px;padding:10px 20px;min-width:118px}
.sg-optionen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;align-items:center}
.sg-opt{display:inline-flex;align-items:center;gap:7px}
.sg-opt .tiny{color:var(--ink3)}
.sg-opt .seg button{padding:4px 10px;font-size:12.5px}
.sg-mitte{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;align-items:center}
.sg-blatt{display:flex;flex-direction:column;gap:12px}
.sg-teil{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:start}
.sg-teil-n{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding-top:30px}
.sg-zeilen{display:flex;flex-direction:column;gap:10px}
.sg-zeile{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sg-k{appearance:none;font:inherit;color:var(--ink);cursor:pointer;position:relative;overflow:hidden;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;padding:10px 6px;
 border-radius:16px;border:2px solid var(--line);background:var(--panel);transition:background .15s,border-color .15s,transform .15s}
.sg-k b{font-family:var(--serif);font-size:42px;font-weight:600;line-height:1}
.sg-k i{font-style:normal;font-size:15px;font-weight:700;color:var(--ink3)}
.sg-k.jetzt{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);transform:scale(1.04)}
.sg-k.jetzt i{color:var(--acc-ink);opacity:.8}
.sg-k.ok{border-color:var(--fn-ruhe,var(--ok));box-shadow:inset 0 0 0 2px var(--fn-ruhe,var(--ok))}
.sg-k.ok:not(.jetzt) b{color:var(--fn-ruhe,var(--ok))}
.sg-k.falsch{border-color:var(--bad);box-shadow:inset 0 0 0 2px var(--bad)}
.sg-k.falsch:not(.jetzt) b{color:var(--bad)}
.sg-len{position:absolute;top:6px;right:8px;display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:inherit;opacity:.7}
.sg-len span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--panel2);color:var(--ink);cursor:pointer;opacity:1}
.sg-balken{position:absolute;left:0;right:0;bottom:0;height:5px;background:color-mix(in srgb,var(--acc-ink) 25%,transparent)}
.sg-balken i{display:block;height:100%;width:0;background:var(--acc-ink);animation:sgBalken linear forwards}
@keyframes sgBalken{to{width:100%}}
.sg-kreis-svg{width:100%;max-width:230px;display:block;margin:0 auto}
.sg-kr circle{fill:var(--panel);stroke:var(--line2);stroke-width:1.5}
.sg-kr text{fill:var(--ink2);font-size:12px;font-weight:700}
.sg-kr .sg-orig{fill:var(--warm);font-size:11px}
.sg-kr.ok circle{fill:color-mix(in srgb,var(--fn-ruhe,var(--ok)) 35%,var(--panel));stroke:var(--fn-ruhe,var(--ok))}
.sg-kr.ok text{fill:var(--ink)}
.sg-kr.jetzt circle{stroke:var(--acc);stroke-width:3}
.sg-kr:hover circle{stroke:var(--acc)}
.sg-kreis-zahl{fill:var(--ink);font-family:var(--serif);font-size:30px;font-weight:600}
.sg-kreis-text{fill:var(--ink3);font-size:12px}
.sg-kreis-lauf{fill:var(--ok,#5cb85c);font-size:11.5px;font-weight:600}.sg-kreis-lauf.fehler{fill:var(--bad,#e0624f)}
.sg-kb{padding:10px 12px 8px}
.sg-kb-tipp{text-align:center;color:var(--ink3);margin:6px 0 0}
@media (max-width:1100px){.sg-kopf{grid-template-columns:auto 1fr auto}.sg-tonart{grid-column:1/-1;justify-content:center;order:5}.sg-los{grid-column:3}}
@media (max-width:820px){.sg-mitte{grid-template-columns:1fr}.sg-kreis{max-width:220px;margin:0 auto}.sg-k b{font-size:30px}.sg-k{min-height:76px}
 .sg-teil{grid-template-columns:1fr}.sg-teil-n{padding-top:0}.sg-key b{font-size:34px}.sg-key{min-width:0}}
@media (max-width:520px){.sg-zeile{gap:6px}.sg-k b{font-size:22px}.sg-k i{font-size:12px}.sg-k{min-height:60px;border-radius:12px}.sg-pfeil{padding:8px 10px;font-size:18px}.sg-pfeil small{display:none}}
.sg .vz,.tr .vz,.heute-neu .vz{font-family:-apple-system,"Segoe UI",system-ui,sans-serif;font-size:.62em;font-weight:700;vertical-align:.42em;margin-left:.02em}
.sg-k i .vz{vertical-align:.25em;font-size:.8em}
.sg-pfeil:disabled{opacity:.35;cursor:default}.sg-pfeil:disabled:hover{border-color:var(--line2);color:var(--ink)}
#weiterToast.unten{top:auto;bottom:calc(var(--nav-h) + 190px)}
/* Wiederholung wie auf dem Notenblatt: Zeile steht einmal da, rechts „2ד und welches Mal gerade läuft */
.sg-zeile{grid-template-columns:repeat(5,minmax(0,1fr)) 62px}
.sg-mal{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:3px double var(--line2);padding-left:6px}
.sg-mal.leer{border-left-color:transparent}
.sg-mal b{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1;color:var(--ink2)}
.sg-mal small{font-size:11.5px;font-weight:700;color:var(--acc);min-height:15px}
.sg-zeile.hier .sg-mal b{color:var(--acc)}
@media (max-width:520px){.sg-zeile{grid-template-columns:repeat(5,minmax(0,1fr)) 40px}.sg-mal b{font-size:18px}}
.sg-tempo{display:flex;align-items:center;gap:8px;cursor:ew-resize}
.sg-regler{width:150px;accent-color:var(--acc);cursor:ew-resize}
@media (max-width:520px){.sg-regler{width:90px}}
/* Songs am Handy: Tempo + Start in eine eigene Zeile, Optionen dürfen umbrechen – nichts ragt über den Rand */
@media (max-width:520px){.sg-los{grid-column:1/-1;justify-self:center;order:6}.sg-go{min-width:0;padding:9px 16px}
 .sg-opt{flex-wrap:wrap;justify-content:center;max-width:100%}.sg-opt>.tiny{display:none}.sg-opt .seg{flex-wrap:wrap;justify-content:center;max-width:100%}.sg-opt .seg button{padding:4px 8px;font-size:12px}}
/* Songs: wo es einen Fehlversuch gab, sieht man es – auch wenn der Akkord danach richtig kam */
.sg-k{position:relative}
.sg-k .sg-gehoert{position:absolute;top:4px;left:8px;font-size:11px;font-weight:600;color:var(--bad);font-family:var(--sans,inherit)}
.sg-k.warfalsch{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bad) 55%,transparent)}
/* ===== Neues Menü: oben die fünf Bereiche (Desktop), unten dieselben (Handy) – nie doppelt ===== */
@media (min-width:821px){:root{--nav-h:0px}body>nav{display:none}}
@media (max-width:820px){.htools{display:none}.hbar .hlogo{margin-right:auto}}
/* ===== Heute: Plan des Tages ===== */
.heute-neu .h-plan{grid-column:span 8;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.heute-neu .h-stand2{grid-column:span 4;display:flex;flex-direction:column;gap:10px;padding:20px}
.h-bloecke{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.h-bloecke button{appearance:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;font:inherit;color:inherit;
 background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer}
.h-bloecke button:hover{border-color:var(--acc)}
.h-bloecke .jetzt button{border-color:var(--acc);background:var(--acc-soft)}
.h-bloecke .ok button{opacity:.75}
.hb-n{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--panel);border:1px solid var(--line)}
.h-bloecke .ok .hb-n{background:var(--ok);color:#fff;border-color:transparent}
.hb-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hb-t b{font-size:16px}.hb-t span{color:var(--ink3);font-size:13px}
.h-zahlen3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.h-zahlen3 div{display:flex;flex-direction:column;gap:3px}
.h-zahlen3 b{font-family:var(--serif);font-size:30px;line-height:1}
.h-zahlen3 span{font-size:12px;color:var(--ink3)}
.h-zahlen3 i{display:block;height:4px;border-radius:2px;background:var(--acc);max-width:100%}
@media (max-width:820px){.heute-neu .h-plan,.heute-neu .h-stand2{grid-column:span 12}}
/* ===== Training: groß, ruhig, aus Spielabstand lesbar ===== */
.tr{display:flex;flex-direction:column;gap:12px;max-width:1300px;margin:0 auto}
.tr-punkte{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tr-punkte button{appearance:none;font:inherit;font-size:13px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:pointer}
.tr-punkte button.jetzt{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.tr-punkte button.ok:not(.jetzt){color:var(--ok)}
.tr-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px}
.tr-uhr{font-variant-numeric:tabular-nums;color:var(--ink3);font-size:14px}
.tr-stat{font-size:15px}.tr-stat .bad{color:var(--bad)}
.tr-mitte{display:flex;justify-content:center}
.tr-auf{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 26px;min-height:300px;justify-content:center;
 border-radius:22px;border:2px solid transparent;transition:border-color .15s,background .15s;width:min(760px,100%)}
.tr-auf.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.tr-auf.falsch{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,transparent)}
.tr-klein{font-size:20px;color:var(--ink2)}
.tr-gross{font-family:var(--serif);font-size:150px;line-height:1;font-weight:600}
.tr-gross.klein{font-size:64px}
.tr-meldung{font-size:20px;min-height:1.3em;font-weight:600}
.tr-auf.ok .tr-meldung{color:var(--ok)}.tr-auf.falsch .tr-meldung{color:var(--bad)}
.tr-danach{font-size:15px;color:var(--ink3)}
.tr-tipp{font-size:13px;color:var(--ink3);max-width:560px}
.tr-impro{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.tr-impro span{display:flex;flex-direction:column;align-items:center;min-width:110px;padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel2)}
.tr-impro span b{font-family:var(--serif);font-size:44px;line-height:1.05}
.tr-impro span i{font-style:normal;color:var(--ink3)}
.tr-impro span.jetzt{border-color:var(--warm);background:var(--warm-soft)}
@media (max-width:820px){.tr-gross{font-size:96px}.tr-auf{min-height:220px;padding:12px}.tr-impro span{min-width:70px;padding:8px}.tr-impro span b{font-size:30px}}
.tr-klein .vz,.tr-meldung .vz,.tr-danach .vz,.hb-t .vz{vertical-align:.25em;font-size:.8em}
/* ===== Stand: was sitzt ===== */
.gd-stand{display:flex;flex-direction:column;gap:14px}
.gd-stand .card{margin:0}
.h-zahlen3.vier{grid-template-columns:repeat(4,1fr)}
.gd-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.gd-raster{grid-template-columns:1fr}}
.gd-tab{display:flex;flex-direction:column;gap:3px}
.gd-kopf,.gd-zeile{display:grid;grid-template-columns:44px repeat(7,1fr);gap:3px;align-items:center}
.gd-kopf span{font-size:11px;color:var(--ink3);text-align:center}
.gd-n{font-size:12.5px;font-weight:600}
.gd-z{display:inline-flex;align-items:center;justify-content:center;min-height:20px;border-radius:5px;color:#fff;font-size:12px;font-weight:600;padding:2px 6px}
.gd-z.leer{color:var(--ink3)}
.gd-wack{display:flex;flex-wrap:wrap;gap:6px}.gd-wack .gd-z{padding:5px 10px;font-size:13px}
.gd-song{display:flex;flex-direction:column;gap:6px}
.gd-reihe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
@media (max-width:640px){.gd-reihe{grid-template-columns:repeat(6,1fr)}.h-zahlen3.vier{grid-template-columns:repeat(2,1fr)}}
.gd-stand .vz{font-size:.85em;vertical-align:.2em}
.mehr-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:18px}
.mehr-tool{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;text-decoration:none;cursor:pointer;font:inherit}
.mehr-tool:hover{border-color:var(--acc)}
.mehr-tool b{font-size:15px}.mehr-tool span{font-size:12.5px;color:var(--ink3)}
.gd-legende{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--ink3);margin:8px 0 0}.gd-legende span{display:inline-block;width:14px;height:14px;border-radius:4px;margin-left:6px}
/* ===== Songs: eigener Song ===== */
.sg-neu{border-style:dashed;justify-content:center}
.sg-editor{display:flex;flex-direction:column;gap:12px;max-width:1200px;margin:0 auto}
.sg-ed-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.sg-ed-spalten{grid-template-columns:1fr}}
#sgEdText{width:100%;min-height:260px;font:15px/1.6 ui-monospace,Menlo,monospace;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);resize:vertical;box-sizing:border-box}
.sg-ed-fehler{color:var(--bad);font-size:13.5px;margin-bottom:8px}
.sg-ed-kopf{font-size:15px;margin-bottom:8px}
.sg-ed-teil{margin-bottom:10px}.sg-ed-teil>span{font-size:12px;color:var(--ink3);display:block;margin-bottom:4px}
.sg-ed-zeile{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:5px}
.sg-ed-zeile>span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:5px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.sg-ed-zeile>span b{font-family:var(--serif);font-size:19px}.sg-ed-zeile>span i{font-style:normal;font-size:11px;color:var(--ink3)}
.sg-ed-zeile em{font-style:normal;font-weight:700;color:var(--acc);margin-left:4px}
.sg-editor .vz{font-size:.8em;vertical-align:.2em}
.sg-zeit{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:11px;font-weight:600}
.sg-zeit.gut{color:var(--ok)}.sg-zeit.spaet{color:var(--warm)}.sg-zeit.frueh{color:var(--hand-l)}
/* ===== Dialog mit der KI ===== */
.dg{display:flex;flex-direction:column;gap:12px;max-width:1300px;margin:0 auto}
.dg-erkl{margin:0 auto;max-width:760px;text-align:center;font-size:15px;color:var(--ink2)}
.dg-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.dg-status{display:flex;flex-direction:column;gap:2px;min-height:58px;justify-content:center}
.dg-status b{font-family:var(--serif);font-size:34px;line-height:1.1}
.dg-status span{font-size:13.5px;color:var(--ink3)}
.dg-status .dg-du{color:var(--ok)}.dg-status .dg-ki{color:var(--kb-app)}.dg-status .dg-fehler{font-size:18px;color:var(--bad);font-family:inherit}
.dg-los{display:flex;align-items:center;gap:12px}
.dg-tonart{font-family:var(--serif);font-size:17px;min-width:84px;text-align:center}
.dg-akk{display:flex;justify-content:center;gap:8px}
.dg-akk span{min-width:86px;text-align:center;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.dg-akk b{font-family:var(--serif);font-size:30px}
.dg-buehne{position:relative;height:150px;padding:0;overflow:hidden}
.dg-haelften{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.dg-haelften span{padding:6px 10px;font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em}
.dg-haelften span+span{border-left:1px dashed var(--line);background:color-mix(in srgb,var(--hand-l) 5%,transparent)}
.dg-rolle{position:absolute;inset:22px 6px 8px}
.dg-rolle i{position:absolute;height:7px;border-radius:4px;margin-top:-3px}
.dg-rolle i.du{background:var(--ok)}.dg-rolle i.ki{background:var(--hand-l)}
.dg-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--acc);left:0;opacity:.7}
.dg-quelle{text-align:center;margin:0}
.dg .vz{font-size:.8em;vertical-align:.25em}
@media (max-width:640px){.dg-status b{font-size:26px}.dg-akk span{min-width:60px;padding:6px}.dg-akk b{font-size:22px}}
/* ===== Stücke ===== */
.stk{display:flex;flex-direction:column;gap:12px;max-width:1300px;margin:0 auto}
.stk-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px;border:2px dashed var(--line);cursor:pointer;text-align:center}
.stk-drop:hover,.stk-drop.ueber{border-color:var(--acc);background:var(--acc-soft)}
.stk-drop b{font-size:18px}.stk-drop span{color:var(--ink3);font-size:13px}
.stk-titel{color:inherit;text-decoration:none}.stk-titel b{font-family:var(--serif);font-size:22px}
.stk-name{font-family:var(--serif);font-size:20px}
.stk-zahl{width:58px;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}
.stk-meldung{font-size:14px;font-weight:600}.stk-meldung.falsch{color:var(--bad)}.stk-meldung.ok{color:var(--ok)}
.stk-buehne{height:190px}
.stk-rolle{position:absolute;inset:18px 8px 8px}
.stk-rolle i{position:absolute;height:6px;margin-top:-3px;border-radius:3px;background:var(--acc)}
.stk-rolle i.l{background:var(--hand-l)}.stk-rolle i.app{opacity:.35}.stk-rolle i.ok{background:var(--ok);opacity:1}
.stk-takt{position:absolute;top:-16px;bottom:0;border-left:1px dashed var(--line);font-size:10.5px;color:var(--ink3);padding-left:3px}
.stk-pos{position:absolute;top:-16px;bottom:0;width:2px;background:var(--warm)}
.sg-k .sg-hilfe{color:var(--warm)}
.sg-bruecke{margin:6px 0 0;font-size:17px;color:var(--ink2);min-height:1.4em}
.sg-bruecke b{color:var(--ink)}
.tr-zahlen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.tr-zahlen .btn{font-size:28px;min-width:64px;min-height:64px;font-family:var(--serif)}
@media (max-width:520px){.tr-zahlen .btn{font-size:22px;min-width:48px;min-height:48px}.sg-bruecke{font-size:15px}}
.tr-leiter{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.tr-leiter span{min-width:38px;padding:8px 4px;border-radius:10px;background:var(--card2,rgba(0,0,0,.05));font-weight:700;font-size:18px;text-align:center;color:var(--ink3)}
.tr-leiter span.jetzt{outline:2px solid var(--acc);color:var(--ink)}
.tr-leiter span.ok{background:var(--ok);color:#fff}
@media (max-width:520px){.tr-leiter{gap:4px}.tr-leiter span{min-width:26px;font-size:14px;padding:6px 2px}}
/* Fuß ganz nach unten: die Seite füllt mindestens den Bildschirm, der Fuß sitzt am Ende */
#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;box-sizing:border-box}
#app>.fuss{margin-top:auto;padding-top:10px}
#app>:not(.sr-only){width:100%;flex-shrink:0}
/* Klavier-Status oben rechts */
.hklavier{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;margin-right:6px;border:1px solid transparent}
.hklavier.aus{background:color-mix(in srgb,var(--bad) 14%,var(--panel,#fff));color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);cursor:pointer;animation:hk-warn 2.4s ease-in-out infinite}
.hklavier.aus .hk-punkt{width:9px;height:9px;border-radius:50%;background:var(--bad)}
.hklavier.an{background:none;border-color:transparent;color:var(--ink3);font-weight:600;font-size:12.5px;cursor:pointer;padding:0 8px;gap:5px}
.hklavier.an:hover{color:var(--ok)}
.hklavier .hk-haken{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#fff;font-size:10px;font-weight:800}
.hklavier.neu{animation:hk-da .9s cubic-bezier(.2,1.6,.4,1) both}
.hklavier.neu .hk-haken{animation:hk-haken .7s .15s cubic-bezier(.2,1.8,.4,1) both}
@keyframes hk-warn{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 35%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 0%,transparent)}}
@keyframes hk-da{0%{transform:scale(.6);opacity:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);box-shadow:0 0 0 14px color-mix(in srgb,var(--ok) 0%,transparent)}}
@keyframes hk-haken{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width:520px){.hklavier{padding:0 9px 0 7px;font-size:11.5px;max-width:150px}.hklavier .hk-text{overflow:hidden;text-overflow:ellipsis}.hklavier{max-width:118px;margin-right:2px}.hk-lang{display:none}.hk-kurz{display:inline!important}}
.hk-kurz{display:none}
@media (prefers-reduced-motion:reduce){.hklavier,.hklavier *{animation:none!important}}
@media (max-width:360px){.hklavier .hk-text{display:none}.hklavier{padding:0 7px}}
@media (max-width:1380px){.hk-lang{display:none}.hk-kurz{display:inline!important}}
@media (max-width:1180px){.hklavier.an .hk-text{display:none}.hklavier.an{padding:0 6px}}
@media (min-width:821px) and (max-width:1300px){.htools .htool{padding:6px 7px;gap:4px;font-size:12.5px}}
@media (min-width:821px) and (max-width:1140px){.htools .htool span{display:none}.htools .htool{padding:6px 10px}}
.tr-zirkel{margin-top:14px;display:flex;flex-direction:column;gap:6px;align-items:center}
.tr-zk{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.tr-zk button{appearance:none;font:inherit;font-size:13px;font-weight:700;min-width:40px;padding:5px 6px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;color:var(--ink2);background:var(--panel2)}
.tr-zk button.gut{background:color-mix(in srgb,var(--ok) 22%,var(--panel2));color:var(--ok)}
.tr-zk button.mittel{background:color-mix(in srgb,var(--warm) 22%,var(--panel2))}
.tr-zk button.wackelt{background:color-mix(in srgb,var(--bad) 14%,var(--panel2))}
.tr-zk button.zu{opacity:.35}
.tr-zk button.jetzt{border-color:var(--acc);color:var(--ink)}
@media (max-width:520px){.tr-zk{gap:3px}.tr-zk button{min-width:27px;font-size:11px;padding:4px 2px}}
@media (max-width:520px){.tr-leiter{gap:2px}.tr-leiter span{min-width:19px;font-size:12px;padding:6px 1px;border-radius:6px}}
@media (max-width:520px){.tr-leiter,.tr-zk{flex-wrap:nowrap;width:100%}.tr-leiter span,.tr-zk button{flex:1 1 0;min-width:0;overflow:hidden}.tr-zk button{font-size:10px;padding:4px 0}}
.tr-runde{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.tr-runde span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--panel2);color:var(--ink3)}
.tr-runde span.jetzt{background:var(--acc);color:var(--acc-ink)}
.tr-runde span.ok{background:color-mix(in srgb,var(--ok) 22%,var(--panel2));color:var(--ok)}
.tr-leiter span small{display:block;font-size:.62em;font-weight:600;opacity:.9;margin-top:1px}
.tr-leiter.zahlen span{font-family:var(--serif);font-size:22px;min-width:44px}
@media (max-width:520px){.tr-runde{gap:3px}.tr-runde span{font-size:10px;padding:3px 6px}.tr-leiter.zahlen span{font-size:15px;min-width:0}}
/* neue Version: auch auf klavier.net und auf der Bühne sichtbar, leicht pulsierend */
#version.update{display:block!important;animation:versionPuls 2.6s ease-in-out infinite}
@keyframes versionPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){#version.update{animation:none}}
.tr-leiter .tr-nennen-ziel{background:none!important;outline:0!important;min-width:auto;font-size:15px;color:var(--ink2);align-self:center;padding:0 6px}
.tr-nennen-ziel b{font-size:22px;color:var(--ink)}
.tr-kreis{width:100%;max-width:300px;display:block;margin:4px auto 0}
.tr-kr{cursor:pointer}
.tr-kr circle{stroke:var(--line2);stroke-width:1;transition:fill .4s}
.tr-kr text{font-size:10.5px;font-weight:700;fill:var(--ink2);pointer-events:none}
.tr-kr text.hell{fill:var(--kb-grund-ink)}
.tr-kr text.st{font-size:8px;fill:var(--warm)}
.tr-kr.jetzt circle{stroke:var(--kb-du);stroke-width:3}
.tr-kr.zu{opacity:.35}
.tr-kr:hover circle{stroke:var(--ink2)}
.tr-kreis .mitte{font-family:var(--serif);font-size:26px;font-weight:600;fill:var(--ink)}
.tr-kreis .mitte-k{font-size:11px;fill:var(--ink3)}
/* Tonarten: alles auf einen Schirm – Aufgabe links, Quintenzirkel rechts oben, Klaviatur darunter */
.tr-lt{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;align-items:start}
.tr-auf.tr-auf-lt{min-height:0;padding:12px 14px}
.tr-auf-lt .tr-gross.klein{font-size:46px}
.tr-auf-lt .tr-runde{margin-bottom:4px}
.tr-auf-lt .tr-leiter{margin:6px 0 2px}
.tr-seite .tr-zirkel{margin:0}
.tr-seite .tr-kreis{max-width:230px}
.tr-leiter.eng{gap:3px}.tr-leiter.eng span{min-width:26px;padding:5px 2px;font-size:14px;border-radius:7px}
.tr-einst{display:inline-block;position:relative}
.tr-einst summary{cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:var(--ink2);padding:5px 10px;border-radius:999px;background:var(--panel2)}
.tr-einst summary::-webkit-details-marker{display:none}
.tr-einst[open] summary{background:var(--acc-soft);color:var(--acc)}
.tr-einst-in{position:absolute;z-index:30;right:0;top:calc(100% + 6px);display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line);width:max-content;max-width:min(92vw,560px)}
.tr-einst-in .sg-opt{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tr-einst-in .sg-opt .tiny{display:inline!important;min-width:96px}
@media (max-width:900px){.tr-lt{grid-template-columns:1fr}.tr-seite{display:none}}
@media (max-width:520px){.tr-auf-lt .tr-gross.klein{font-size:34px}.tr-einst-in{right:auto;left:50%;transform:translateX(-50%)}}
@media (max-width:520px){.tr-leiter.eng{flex-wrap:wrap;justify-content:center}.tr-leiter.eng span{flex:0 0 auto;min-width:19px;font-size:11px;padding:4px 1px}}
.tr-leiste .tr-einst{border:0;background:none;padding:0}
/* Übe-Seiten: die Klaviatur nutzt die volle Fensterbreite */
.tr>.sg-kb{width:calc(100vw - 24px);max-width:none;position:relative;left:50%;transform:translateX(-50%);padding:6px 6px 4px;box-sizing:border-box}
@media (max-width:520px){.tr-leiter.zahlen{flex-wrap:wrap;justify-content:center}.tr-leiter.zahlen span{flex:0 0 auto;min-width:30px}}
/* ===== Tonarten: Gestaltungssystem =====
   Jede Übungsart hat eine Farbe: Läufe Schiefer · Akkorde Gold · Stufen Blau · Hören Violett · Improvisieren Grün.
   Oben die Schritte als Leiste, dann groß die Tonart, daneben die Übung (Art, Name, Erklärung), darunter die Aufgabe. */
:root{--art-lauf:var(--acc);--art-akk:var(--warm);--art-kopf:var(--fn-weg);--art-ohr:var(--fn-farbe);--art-frei:var(--ok)}
.lt.art-lauf,.lt-schritte .art-lauf{--art:var(--art-lauf)}.lt.art-akk,.lt-schritte .art-akk{--art:var(--art-akk)}
.lt.art-kopf,.lt-schritte .art-kopf{--art:var(--art-kopf)}.lt.art-ohr,.lt-schritte .art-ohr{--art:var(--art-ohr)}
.lt.art-frei,.lt-schritte .art-frei{--art:var(--art-frei)}
.tr-auf.lt{align-items:stretch;text-align:left;gap:10px;padding:14px 18px 12px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.lt-schritte{display:flex;gap:4px}
.lt-schritte span{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.lt-schritte i{height:5px;border-radius:3px;background:color-mix(in srgb,var(--art) 22%,var(--panel2))}
.lt-schritte .ok i{background:color-mix(in srgb,var(--art) 70%,var(--panel2))}
.lt-schritte .jetzt i{background:var(--art);height:7px;margin-top:-1px}
.lt-schritte em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-schritte .jetzt em{color:var(--ink)}
.lt-kopf{display:flex;align-items:flex-end;gap:22px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lt-tonart{display:flex;flex-direction:column;flex:0 0 auto}
.lt-tonart b{font-family:var(--serif);font-size:46px;font-weight:600;line-height:1}
.lt-tonart span{font-size:12px;color:var(--ink3);margin-top:4px}
.lt-ueb{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:18px;border-left:4px solid var(--art)}
.lt-art{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--art)}
.lt-ueb b{font-size:21px;font-weight:750;color:var(--ink)}
.lt-ueb b small{font-size:13px;font-weight:700;color:var(--art);margin-left:6px}
.lt-was{font-size:13.5px;color:var(--ink2);line-height:1.35}
.lt-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.lt-fuss .tr-meldung{margin:0;font-size:16px;text-align:left}
/* Aufgaben-Zellen: Form je Art */
.lt .lt-reihe{justify-content:flex-start;margin:4px 0}
.lt .lt-reihe span{background:color-mix(in srgb,var(--art) 9%,var(--panel2));color:var(--ink2);border:1.5px solid transparent}
.lt .lt-reihe span.jetzt{outline:0;border-color:var(--art);background:color-mix(in srgb,var(--art) 16%,var(--panel));color:var(--ink)}
.lt .lt-reihe span.ok{background:var(--art);color:#fff}
.lt.art-lauf .lt-reihe span{border-radius:50%;min-width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:15px}
.lt.art-lauf .lt-reihe.eng span{min-width:28px;height:28px;font-size:12.5px}
.lt .lt-reihe.akkorde{gap:8px}
.lt .lt-reihe.akkorde span{min-width:64px;padding:8px 12px 7px;border-radius:12px;font-family:var(--serif);font-size:28px;font-weight:600;line-height:1}
.lt .lt-reihe.akkorde span small{font-family:inherit;font-size:12px;font-weight:700;margin-top:5px;display:block;opacity:.85;font-family:system-ui,sans-serif}
.lt .lt-reihe.akkorde span:not(:last-child)::after{content:"→";position:absolute;margin-left:12px;color:var(--ink3);font-size:16px}
.lt.art-ohr .lt-reihe span{border-radius:12px;border-style:dashed;border-color:color-mix(in srgb,var(--art) 45%,transparent)}
.lt.art-ohr .lt-reihe span.ok,.lt.art-ohr .lt-reihe span.jetzt{border-style:solid}
.lt.art-kopf .lt-reihe span{border-radius:10px}
.lt.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}.lt.falsch{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.lt.falsch .tr-meldung{color:var(--bad)}.lt.ok .tr-meldung{color:var(--ok)}
.tr-einst summary::after{content:none!important}
.tr-einst summary{padding:6px 12px}
@media (max-width:700px){.lt-kopf{flex-direction:column;align-items:flex-start;gap:8px}.lt-ueb{padding-left:12px}.lt-tonart b{font-size:34px}.lt-schritte em{display:none}
 .lt .lt-reihe.akkorde span{min-width:44px;font-size:21px;padding:6px 8px}.lt .lt-reihe.akkorde span:not(:last-child)::after{content:none}.lt.art-lauf .lt-reihe span{min-width:24px;height:24px;font-size:11px}}
.lt .lt-reihe.kurve{align-items:flex-end;flex-wrap:nowrap;gap:2px;min-height:110px;overflow:hidden}
.lt .lt-reihe.kurve span{flex:0 1 auto;transition:margin .2s}
@media (max-width:700px){.lt .lt-reihe.kurve{min-height:90px}.lt .lt-reihe.kurve span{min-width:0;flex:1 1 0}}
.lt .lt-reihe.kurve span{flex:1 1 0;min-width:0!important;max-width:36px;height:auto!important;aspect-ratio:1;font-size:clamp(9px,1.2vw,15px)!important}
.lt .lt-reihe.kurve span small{display:none}
.lt .lt-reihe.akkorde span{position:relative}
.lt .lt-reihe.akkorde span:not(:last-child)::after{position:absolute;margin:0;right:-11px;top:50%;transform:translateY(-50%);font-family:system-ui,sans-serif;font-size:13px}
/* ===== Tonarten bildschirmfüllend: Aufgabe groß, Klaviatur groß, nichts zu scrollen ===== */
.tr.tr-voll{max-width:none;min-height:calc(100dvh - var(--head-h) - 26px);gap:10px}
.tr-voll .tr-mitte{flex:1;display:flex;min-height:0}
.tr-voll .tr-lt{flex:1;grid-template-columns:minmax(0,1fr) clamp(200px,20vw,320px)}
.tr-voll .tr-auf.lt{height:100%;justify-content:flex-start;padding:clamp(12px,2vh,24px) clamp(14px,2vw,32px)}
.tr-voll .lt-tonart b{font-size:clamp(40px,8vh,92px)}
.tr-voll .lt-ueb b{font-size:clamp(20px,3.2vh,34px)}
.tr-voll .lt-was{font-size:clamp(13px,1.9vh,18px)}
.tr-voll .lt-art{font-size:clamp(11px,1.5vh,14px)}
.tr-voll .lt-schritte em{font-size:clamp(10px,1.4vh,13px)}
.tr-voll .lt-reihe{flex:1;align-content:center;margin:0}
.tr-voll .lt.art-lauf .lt-reihe span,.tr-voll .lt.art-kopf .lt-reihe span{--z:clamp(28px,min(6.5vh,4vw),76px)}
.tr-voll .lt .lt-reihe.kurve span{max-width:var(--z,52px);font-size:calc(var(--z,40px)*.42)!important}
.tr-voll .lt .lt-reihe:not(.kurve):not(.akkorde) span{min-width:clamp(34px,6vh,72px);min-height:clamp(34px,6vh,72px);font-size:clamp(16px,3vh,30px);display:grid;place-items:center;align-content:center}
.tr-voll .lt .lt-reihe.akkorde{gap:clamp(14px,2.2vw,30px)}
.tr-voll .lt .lt-reihe.akkorde span{min-width:clamp(64px,10vh,130px);padding:clamp(10px,1.8vh,22px) clamp(12px,1.6vw,24px);font-size:clamp(30px,7vh,80px);border-radius:16px}
.tr-voll .lt .lt-reihe.akkorde span small{font-size:clamp(12px,1.9vh,18px)}
.tr-voll .lt .lt-reihe.akkorde span:not(:last-child)::after{right:calc(-1 * clamp(12px,1.9vw,26px));font-size:clamp(13px,2.4vh,24px)}
.tr-voll .lt-fuss .tr-meldung{font-size:clamp(15px,2.4vh,24px)}
.tr-voll .tr-seite .tr-kreis{max-width:100%}
.tr-voll>.sg-kb{margin-top:auto}
/* Akkord oder Töne – unübersehbar */
.lt-modus{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:6px 16px 6px 10px;border-radius:999px;background:color-mix(in srgb,var(--art) 16%,var(--panel));border:1.5px solid color-mix(in srgb,var(--art) 55%,transparent);margin-top:2px}
.lt-modus svg{width:clamp(20px,3vh,30px);height:clamp(20px,3vh,30px);fill:var(--art);color:var(--art)}
.lt-modus b{font-size:clamp(15px,2.5vh,24px);font-weight:800;color:var(--ink)}
.lt-modus span{font-size:clamp(12px,1.8vh,16px);color:var(--ink2)}
@media (max-width:820px){.tr.tr-voll{min-height:calc(100dvh - var(--head-h) - var(--nav-h) - 26px)}}
@media (max-width:700px){.lt-modus span{display:none}}
/* ===== Größe aus dem verfügbaren Platz: die Aufgabe füllt den Raum zwischen Kopf und Klaviatur ===== */
.tr.tr-voll{height:calc(100dvh - var(--head-h) - 26px);min-height:0;overflow:hidden}
@media (max-width:820px){.tr.tr-voll{height:calc(100dvh - var(--head-h) - var(--nav-h) - 26px)}}
.tr-voll .tr-mitte,.tr-voll .tr-lt,.tr-voll .tr-auf.lt{min-height:0}
.tr-voll .tr-lt{height:100%}
.tr-voll .tr-auf.lt{overflow:hidden}
.tr-voll .lt-reihe{flex:1 1 0;width:100%;min-height:60px;container-type:size;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:1.2cqw}
.tr-voll .lt .lt-reihe span{--z:min(calc(100cqw / (var(--pz) * 1.14)),calc(80cqh / var(--zeilen)),96px);width:var(--z);min-width:0!important;max-width:none!important;height:var(--z);min-height:0!important;padding:0!important;aspect-ratio:auto;font-size:calc(var(--z) * .44)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto}
.tr-voll .lt .lt-reihe.kurve{flex-wrap:nowrap;align-items:flex-end;align-content:flex-end;gap:.5cqw;padding-bottom:4px}
.tr-voll .lt .lt-reihe.kurve span{--z:min(calc(100cqw / (var(--pz) * 1.08)),36cqh,80px)}
.tr-voll .lt .lt-reihe.akkorde{gap:3cqw 3.2cqw}
.tr-voll .lt .lt-reihe.akkorde span{--z:min(calc(100cqw / (var(--pz) * 1.32)),calc(86cqh / var(--zeilen)),170px);width:calc(var(--z) * 1.05);font-size:calc(var(--z) * .38)!important;border-radius:calc(var(--z) * .14)}
.tr-voll .lt .lt-reihe span small{font-size:calc(var(--z) * .13)!important;margin-top:3%}
.tr-voll .lt .lt-reihe span i{font-style:normal;font-family:system-ui,sans-serif;font-size:calc(var(--z) * .105);font-weight:600;opacity:.8;margin-top:3%;line-height:1.1;text-align:center;padding:0 4%}
.tr-voll .lt .lt-reihe.akkorde span:not(:last-child)::after{right:calc(var(--z) * -.27);font-size:calc(var(--z) * .18)}
.lt-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lt-gefuehl{display:inline-flex;align-items:baseline;gap:8px;font-size:clamp(14px,2.2vh,22px);color:var(--ink2)}
.lt-gefuehl b{font-family:var(--serif);font-size:1.3em;color:var(--art)}
.lt-gefuehl span{font-style:italic}
@media (max-width:820px){.tr-voll .tr-lt{display:flex}.tr-voll .tr-auf.lt{flex:1}}
/* Korrektur: Karte nutzt die ganze Spalte; Zellen samt Abständen passen immer in eine (bzw. zwei) Zeilen */
.tr-voll .tr-lt>.tr-auf.lt{max-width:none;width:100%;min-height:0}
.tr-voll .lt .lt-reihe.kurve{gap:0}
.tr-voll .lt .lt-reihe.kurve span{--z:min(calc(100cqw / var(--pz) - 3px),34cqh,76px);margin-left:1.5px;margin-right:1.5px}
.tr-voll .lt .lt-reihe.akkorde{gap:4cqh 0}
.tr-voll .lt .lt-reihe.akkorde span{--z:min(calc(100cqw / (var(--pz) * 1.55)),calc(78cqh / var(--zeilen)),160px);margin:0 calc(var(--z) * .22)}
.tr-voll .lt .lt-reihe.akkorde span:not(:last-child)::after{right:calc(var(--z) * -.36)}
.tr-voll .lt .lt-reihe span i{font-size:max(11px,calc(var(--z) * .11))}
.tr-voll .lt .lt-reihe span small{font-size:max(11px,calc(var(--z) * .13))!important}
.tr-voll .lt-zeile{position:relative;z-index:1}
/* Zellgröße kommt aus trReiheEinpassen (--z), Kurvenhöhe aus --hub */
.tr-voll .lt .lt-reihe.lt-reihe{gap:0;container-type:normal;align-content:space-evenly}
.tr-voll .lt .lt-reihe.lt-reihe span{--z:inherit!important;width:var(--z)!important;height:var(--z)!important;margin:2px calc(var(--z) * .08);font-size:calc(var(--z) * .44)!important}
.tr-voll .lt .lt-reihe.kurve.lt-reihe span{margin:0 calc(var(--z) * .03);margin-bottom:calc(var(--g,0) * var(--hub,0px))}
.tr-voll .lt .lt-reihe.kurve.lt-reihe span[data-gruppe]{margin-left:calc(var(--z) * .45)}
.tr-voll .lt .lt-reihe.akkorde.lt-reihe span{width:calc(var(--z) * 1.05)!important;margin:4px calc(var(--z) * .2);font-size:calc(var(--z) * .36)!important}
.tr-voll .lt .lt-reihe.akkorde.lt-reihe span:not(:last-child)::after{right:calc(var(--z) * -.33);font-size:calc(var(--z) * .16)}
.tr-voll .lt .lt-reihe.lt-reihe span small{font-size:max(10px,calc(var(--z) * .14))!important}
.tr-voll .lt .lt-reihe.lt-reihe span i{font-size:max(9px,calc(var(--z) * .105))}
.tr-voll .lt .lt-reihe.lt-reihe span{overflow:hidden}
.tr-voll .lt .lt-reihe.lt-reihe.mehrzeilig{flex-wrap:wrap}
.lt-reihe .umbruch{flex-basis:100%;height:0;width:100%}
.nur-mobil{display:none}
@media (max-width:700px){
 .nur-mobil{display:contents}.nicht-mobil{display:none}
 .tr-voll .tr-leiste{gap:6px;flex-wrap:nowrap}.tr-voll #trStat{display:none}
 .tr-voll .lt-kopf{flex-direction:row;align-items:center;gap:12px;padding-bottom:6px}
 .tr-voll .lt-tonart b{font-size:30px}.tr-voll .lt-tonart span,.tr-voll .lt-was,.tr-voll .lt-art{display:none}
 .tr-voll .lt-ueb{padding-left:10px;border-left-width:3px}.tr-voll .lt-ueb b{font-size:17px}
 .tr-voll .tr-auf.lt{gap:6px;padding:10px 12px}
 .tr-voll .lt-modus{padding:4px 12px 4px 8px}.tr-voll .lt-modus b{font-size:15px}.tr-voll .lt-modus svg{width:18px;height:18px}
 .tr-voll .lt-gefuehl{font-size:14px}
 .tr-voll .lt-fuss{min-height:28px}.tr-voll .lt-fuss .tr-meldung{font-size:14px}.tr-voll .lt-fuss .btn{padding:4px 10px;font-size:12px}
}
.tr-voll .lt .lt-reihe.kurve span{transition:none}
.tr-voll .lt .lt-reihe.kurve.mehrzeilig{align-content:space-around}
.lt-reihe .umbruch{display:block;line-height:0;font-size:0}
/* ♭/♯ innerhalb einer Zelle ist nur ein Schriftzeichen – keine eigene Zelle */
.tr-leiter span span.vz,.tr-voll .lt .lt-reihe.lt-reihe span span.vz,.tr-voll .lt .lt-reihe.kurve.lt-reihe span span.vz{display:inline!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:inherit!important;font-size:.8em!important;vertical-align:.18em;aspect-ratio:auto;flex:none;border-radius:0;overflow:visible;outline:0}
.tr-leiter span small span.vz,.tr-leiter span i span.vz{font-size:1em!important;vertical-align:0}
.tr-leiter span em.nm{font-style:normal;white-space:nowrap;display:inline}
.gz{font-weight:400;font-style:normal;opacity:.75;margin-right:2px;font-family:system-ui,"Apple Symbols",sans-serif}
.lt-gefuehl .gz{font-size:1.05em;opacity:.8}
.tr-wdh{display:inline-flex;align-items:center;gap:8px}
.tr-wdh-zahl{display:inline-flex;align-items:center;gap:2px;background:var(--panel2);border-radius:999px;padding:2px}
.tr-wdh-zahl b{min-width:38px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.tr-wdh-zahl button{appearance:none;border:0;background:none;color:var(--ink2);font-size:11px;width:28px;height:28px;border-radius:50%;cursor:pointer}
.tr-wdh-zahl button:hover{background:var(--acc-soft);color:var(--acc)}
.tr-wdh-zahl.aus b{color:var(--ink3)}
@media (max-width:700px){.tr-wdh .seg button:nth-child(2){display:none}}
.tr-einst summary{white-space:nowrap}
/* niedrige Fenster: Kopf der Aufgabe kompakter, damit Aufgabe und Fuß in die Karte passen */
@media (max-height:760px){.tr-voll .lt-was,.tr-voll .lt-tonart span,.tr-voll .lt-schritte em{display:none}.tr-voll .lt-tonart b{font-size:clamp(30px,6vh,52px)}.tr-voll .lt-kopf{padding-bottom:6px}.tr-voll .tr-auf.lt{gap:6px}.tr-voll .lt-modus{padding:3px 12px 3px 8px}}
.tr-voll .lt-reihe{min-height:40px}
:root{--art-umk:var(--fn-spannung)}
.lt.art-umk,.lt-schritte .art-umk{--art:var(--art-umk)}
/* Kopf der Aufgabe mittig – ruhiger, der Blick bleibt in der Mitte */
.tr-voll .lt-kopf{justify-content:center}
.tr-voll .lt-zeile{justify-content:center}
.lt-knoepfe{display:inline-flex;gap:8px;flex:0 0 auto}