/* Gemeinsame Gestaltung der Übungs-Skizzen (index.html Zirkeltraining + uebungen.html Katalog). Erwartet die Farbvariablen der App. */
:root { --body-fill: #e6e4dc; --body-line: #c9c7bd; --muscle: #e0452f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --body-fill: #3a3a36; --body-line: #5f5e5a; --muscle: #ff6a52; }
}
:root[data-theme="dark"] { --body-fill: #3a3a36; --body-line: #5f5e5a; --muscle: #ff6a52; }
.fl { stroke: var(--blue); }
.ff { stroke: var(--green); }
.phases { display: flex; gap: 8px; margin: 4px 0 10px; }
.phase { flex: 1; text-align: center; font-size: 12px; color: var(--text-secondary); line-height: 1.3; }
.phase svg { width: 100%; height: auto; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 8px; display: block; margin-bottom: 3px; }
.maps { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.maps svg { width: 70px; height: auto; flex-shrink: 0; }
.maps .legend { font-size: 12px; color: var(--text-secondary); }
.maps .legend b { color: var(--text-primary); font-size: 13px; }
.fehler { font-size: 13px; background: var(--orange-bg); color: var(--text-primary); border-radius: 8px; padding: 6px 9px; margin: 8px 0; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { font-size: 13px; color: var(--blue); text-decoration: none; border: 0.5px solid var(--blue); border-radius: 8px; padding: 5px 10px; }
.src { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.skizzen-legende { font-size: 12px; color: var(--text-secondary); margin: 2px 0 8px; }