:root{--c-papier: #fdfaf0;--c-papier-rand: #dccfa3;--c-text: #2a2218;--c-text-leise: #7a6a4a;--c-tonika: #8a4a3a;--c-dom: #d4a23c;--c-sub: #5a7e4b;--c-falsch: #c0383a;--c-richtig: #4a8c4f;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;color:var(--c-text);background:#f3eedf}*{box-sizing:border-box}body{margin:0}.app-wrapper{max-width:1200px;margin:0 auto;padding:16px}.modus-nav{background:var(--c-papier);border:1px solid var(--c-papier-rand);border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.app-titel{font-size:1.1rem;margin:0;color:var(--c-text-leise)}.modus-buttons{display:flex;gap:8px}.modus-buttons button{padding:8px 14px;border:1px solid var(--c-papier-rand);background:#fff;color:var(--c-text);border-radius:6px;font-size:.95rem;cursor:pointer}.modus-buttons button.aktiv{background:var(--c-tonika);color:#fff;border-color:var(--c-tonika)}.page{background:var(--c-papier);border:1px solid var(--c-papier-rand);border-radius:8px;padding:18px}.page-kopf h1{margin:0 0 6px;font-size:1.4rem;color:var(--c-text)}.page-kopf p{margin:0;color:var(--c-text-leise)}.aufgabe-text{font-size:1.1rem!important;color:var(--c-text)!important;font-weight:500}.layout-zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}@media (max-width: 720px){.layout-zwei-spalten{grid-template-columns:1fr}}.quintenzirkel{width:100%;max-width:400px;height:auto}.kreis-versteckt{background:#f5efe0;border:1.5px dashed var(--c-papier-rand);border-radius:12px;padding:32px;text-align:center;color:var(--c-text-leise);min-height:320px;display:flex;align-items:center;justify-content:center}.klaviatur{width:100%;max-width:800px;margin:12px auto;display:block}.info-panel{background:#fff;border:1px solid var(--c-papier-rand);border-radius:6px;padding:14px}.info-panel.leer{color:var(--c-text-leise);font-style:italic}.info-panel h2{margin:0 0 8px;color:var(--c-tonika)}.info-panel dl{margin:0}.info-panel dt{font-size:.8rem;color:var(--c-text-leise);margin-top:8px;text-transform:uppercase;letter-spacing:.04em}.info-panel dd{margin:2px 0;font-size:1rem}.hervorhebung.dominante{color:var(--c-dom);font-weight:600}.hervorhebung.subdominante{color:var(--c-sub);font-weight:600}.klang-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.klang-buttons button{padding:10px 12px;background:#fff;border:1px solid var(--c-papier-rand);border-radius:6px;cursor:pointer;font-size:.95rem}.klang-buttons button:disabled{opacity:.45;cursor:not-allowed}.klang-buttons button:not(:disabled):hover{background:#fef0c7}.antwort-feld{background:#fff;border:1px solid var(--c-papier-rand);border-radius:6px;padding:14px}.wahl-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.wahl-buttons.schmal{grid-template-columns:repeat(3,1fr)}.wahl-buttons button{padding:8px;border:1px solid var(--c-papier-rand);border-radius:4px;background:#fff;cursor:pointer}.wahl-buttons button:disabled{opacity:.4}.hilfe-button{margin-top:10px;background:transparent;border:1px dashed var(--c-dom);color:var(--c-dom);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:.9rem}.hilfehinweis.aktiviert{margin-top:10px;padding:8px 10px;background:#fdf3d8;border-left:3px solid var(--c-dom);border-radius:4px;font-size:.9rem}.klang-spielen{background:var(--c-tonika);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:1rem;margin-bottom:8px}.feedback{margin-top:16px;padding:12px 16px;border-radius:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.feedback.richtig{background:#e3f3e0;border-left:4px solid var(--c-richtig)}.feedback.falsch{background:#f9e0e0;border-left:4px solid var(--c-falsch)}.feedback button{margin-left:auto;padding:8px 14px;background:var(--c-tonika);color:#fff;border:none;border-radius:6px;cursor:pointer}.session-statistik{margin-top:18px;background:#fff;border:1px solid var(--c-papier-rand);border-radius:6px;padding:12px}.session-statistik summary{cursor:pointer;font-weight:600;color:var(--c-text-leise)}.karten-stand{margin:10px 0 0;padding-left:18px;font-size:.88rem}.karten-stand li{margin:4px 0}.app-fuss{margin-top:18px;padding:10px 16px;font-size:.85rem;color:var(--c-text-leise);text-align:center}.app-fuss code{background:var(--c-papier);padding:2px 6px;border-radius:3px;border:1px solid var(--c-papier-rand)}