/* Wissen & Tipps erweitert das vorhandene BeatWerk-Designsystem. */

.wissen-seite {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 10%, var(--sonne-hell) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 94% 18%, var(--himmel-hell) 0 9rem, transparent 9.1rem),
    var(--grund);
}

.wissen-kopf {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--abstand-3) 1.25rem;
}

.wissen-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--schrift);
  font-family: var(--schrift-anzeige);
  font-size: var(--text-l);
  text-decoration: none;
}

.wissen-marke b { color: var(--petrol); }
.wissen-marke .m-grund { fill: var(--petrol-hell); }
.wissen-marke .m-kessel { fill: var(--sonne-hell); stroke: var(--petrol); }
.wissen-marke .m-fell { fill: var(--flaeche); stroke: var(--petrol); }
.wissen-marke .m-stoecke { stroke: var(--koralle); }

.wissen-kopftitel {
  flex: 1 1 18rem;
  min-width: 0;
}
.wissen-kopftitel h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.wissen-kopftitel p { margin: 0.1rem 0 0; }
.wissen-kopfaktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.wissen-seite button:disabled { opacity: 0.5; cursor: not-allowed; }

.wissen-seite main {
  max-width: none;
  padding: clamp(0.75rem, 2vw, 2rem) clamp(0.65rem, 2.5vw, 3rem) 4rem;
}

.wissen-stand {
  padding: var(--abstand-4) 1.2rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.wissen-stand.fehler { color: var(--fehler); background: var(--fehler-hell); }
.wissen-stand.abgemeldet { color: var(--schrift-leise); }
.wissen-stand .knopf { margin: var(--abstand-3) 0 0 var(--abstand-3); }

.wissen-hauptnav,
.wissen-nebennav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: var(--abstand-3);
}

.wissen-hauptnav {
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.wissen-hauptnav button {
  flex: 1 1 13rem;
  justify-content: center;
  border-radius: var(--rundung-pille);
  border-color: transparent;
  color: var(--schrift-leise);
}
.wissen-hauptnav button.aktiv {
  color: #fff;
  background: var(--betont);
  box-shadow: inset 0 -4px 0 var(--sonne);
}
.wissen-hauptnav button.aktiv:hover { background: var(--betont-dunkel); }
.wissen-nebennav { justify-content: center; margin-bottom: 1.25rem; }
.wissen-nebennav button { border-radius: var(--rundung-pille); }

.wissen-offline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--abstand-3) 1.25rem;
  padding: 0.85rem var(--abstand-4);
  margin-bottom: 1.25rem;
  border: 1px solid var(--rand-stark);
  border-left: 0.35rem solid var(--sonne);
  border-radius: var(--rundung);
  background: var(--sonne-hell);
}
.wissen-offline h2 { margin: 0; font: 800 var(--text-s)/1.3 var(--schrift-text); }
.wissen-offline p { margin: 0.2rem 0 0; }
.wissen-offline details { flex-basis: 100%; box-shadow: none; background: var(--flaeche); }

.wissen-bereich,
.wissen-detail {
  width: 100%;
  max-width: none;
  margin: 0 auto 1.25rem;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.wissen-bereich-kopf,
.wissen-detail-kopf,
.wissen-detail-nav,
.wissen-formaktionen,
.wissen-vorschau-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.wissen-bereich-kopf { margin-bottom: var(--abstand-4); }
.wissen-bereich-kopf h2 { margin-bottom: var(--abstand-1); font-size: clamp(1.35rem, 3vw, 2rem); }
.wissen-bereich-kopf p { margin-top: 0; }
.wissen-augenbraue {
  margin: 0 0 var(--abstand-1);
  color: var(--petrol-dunkel);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wissen-filter,
.wissen-formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: end;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.wissen-filter label,
.wissen-formular label { min-width: 0; }
.wissen-filter input,
.wissen-filter select,
.wissen-formular input,
.wissen-formular select,
.wissen-formular textarea { width: 100%; min-width: 0; }
.wissen-filter-hinweis { grid-column: 1 / -1; margin: 0; }
#wissen-filter-zuruecksetzen { align-self: end; }

.wissen-kategorien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}
.wissen-kategorie {
  min-height: 7rem;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: var(--abstand-4);
  text-align: left;
  border-color: var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche-leise);
}
.wissen-kategorie strong { font-size: var(--text-m); color: var(--petrol-dunkel); }
.wissen-kategorie span { font-weight: 400; color: var(--schrift-leise); }
.wissen-kategorie small { margin-top: auto; color: var(--schrift-leise); }
.wissen-kategorie[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-hell); }
.wissen-kategorie:disabled { opacity: 0.7; }

.wissen-kartenliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--abstand-4);
}
.wissen-empfehlungsliste > .wissen-teaser { grid-column: 1 / -1; max-width: 48rem; }
.wissen-weitere,
.wissen-listen-hinweis { grid-column: 1 / -1; }
.wissen-weitere { padding: 0.8rem; border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); }
.wissen-weitere summary { cursor: pointer; font-weight: 800; }
.wissen-weitere > .wissen-kartenliste { margin-top: 0.8rem; }
.wissen-listen-hinweis { margin: 0; }

.wissen-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--abstand-4);
  overflow: hidden;
  border: 1px solid var(--rand);
  border-top: 0.35rem solid var(--himmel);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.wissen-teaser[data-stufe="entdecken"] { border-top-color: var(--sonne); }
.wissen-teaser[data-stufe="verstehen"] { border-top-color: var(--himmel); }
.wissen-teaser[data-stufe="koennen"] { border-top-color: var(--mint); }
.wissen-teaser[data-stufe="anwenden"] { border-top-color: var(--beere); }
.wissen-teaser h3 {
  margin: 0.4rem 0 0.45rem;
  color: var(--schrift);
  font-family: var(--schrift-anzeige);
  font-size: var(--text-l);
  letter-spacing: normal;
  text-transform: none;
}
.wissen-teaser p { margin: 0 0 0.85rem; overflow-wrap: anywhere; }
.wissen-teaser .wissen-teaser-aktion { margin-top: auto; align-self: flex-start; }
.wissen-teaser-meta,
.wissen-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wissen-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--rundung-pille);
  background: var(--flaeche-leise);
  color: var(--schrift-leise);
  font-size: var(--text-xs);
  font-weight: 700;
}
.wissen-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.7rem;
  color: var(--schrift-leise);
  font-size: var(--text-s);
}
.wissen-status::before { content: "○"; }
.wissen-status[data-status="viewed"]::before { content: "◔"; color: var(--himmel-dunkel); }
.wissen-status[data-status="tried"]::before { content: "◑"; color: var(--sonne-dunkel); }
.wissen-status[data-status="done"]::before { content: "●"; color: var(--gut); }
.wissen-leer { padding: var(--abstand-5); text-align: center; color: var(--schrift-leise); }

.wissen-detail { max-width: 90rem; }
.wissen-detail-kopf { padding-bottom: var(--abstand-4); border-bottom: 1px solid var(--rand); }
.wissen-detail article { padding: clamp(1rem, 3vw, 2.5rem) 0; }
.wissen-detail article > h2 { margin: 0.45rem 0 0.8rem; font-size: clamp(1.7rem, 5vw, 2.8rem); }
.wissen-detail-meta { margin-bottom: 1.3rem; }
.wissen-kernaussage { max-width: 58rem; font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.wissen-visual {
  width: min(100%, 48rem);
  margin: var(--abstand-4) 0 1.3rem;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  border: 1px solid var(--rand-stark);
  border-radius: 18px;
  background: linear-gradient(140deg, var(--flaeche), var(--himmel-hell));
  box-shadow: var(--schatten);
}
.wissen-visual-bild { width: 100%; min-width: 0; overflow: hidden; }
.wissen-visual-bild svg { display: block; width: 100%; height: auto; max-height: 12rem; }
.wissen-visual figcaption { margin-top: 0.6rem; font-weight: 700; line-height: 1.45; color: var(--schrift); }
.wissen-visual-timeline ol { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.wissen-visual-timeline li { flex: 1 1 6rem; min-width: 0; padding: 0.65rem; border-radius: 12px; background: var(--flaeche); text-align: center; font-weight: 800; }
.wissen-visual-timeline li + li::before { content: '›'; margin-right: 0.4rem; color: var(--petrol); }
.wissen-musikbezug { max-width: 58rem; margin: 0.8rem 0 1.2rem; padding: 0.85rem var(--abstand-4); border-left: 0.3rem solid var(--petrol); border-radius: 0 12px 12px 0; background: var(--himmel-hell); }
.wissen-musikbezug strong { display: block; margin-bottom: var(--abstand-1); }
.wissen-musikbezug p { margin: 0; line-height: 1.55; }
.wissen-wegweiser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-2); list-style: none; margin: 0 0 1.25rem; padding: 0; }
.wissen-wegweiser li { display: grid; gap: 0.15rem; padding: 0.65rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche-leise); }
.wissen-wegweiser span { color: var(--schrift-leise); font-size: var(--text-s); }
.wissen-kontrollsprung { margin-bottom: 0.7rem; }
.wissen-pfad-kapitel { display: grid; gap: 0.6rem; padding-left: var(--abstand-5); }
.wissen-pfad-kapitel li { padding-left: 0.3rem; }
.wissen-pfad-kapitel button { margin-right: 0.35rem; }
.wissen-finalchallenge { margin-top: var(--abstand-5); }
.wissen-aufgabe {
  margin: 1.4rem 0;
  padding: 1.1rem 1.2rem;
  border-left: 0.4rem solid var(--koralle);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  background: var(--koralle-hell);
}
.wissen-aufgabe h3,
.wissen-interaktion h3,
.wissen-ressourcen h3,
.wissen-verwandt h3,
.wissen-lehrerbereich h3 {
  margin: 0 0 0.55rem;
  color: var(--schrift);
  font-size: var(--text-m);
  letter-spacing: normal;
  text-transform: none;
}
.wissen-aufgabe p { margin: 0; }
.wissen-detail details {
  margin: var(--abstand-3) 0;
  padding: 0.8rem var(--abstand-4);
  box-shadow: none;
  background: var(--flaeche-leise);
}
.wissen-detail details summary { cursor: pointer; font-weight: 800; }
.wissen-detail details p { max-width: 62rem; }
.wissen-detail-nav { padding-top: var(--abstand-4); border-top: 1px solid var(--rand); }
.wissen-pfad-stand { margin: 0; font-weight: 700; color: var(--schrift-leise); }

.wissen-interaktion,
.wissen-ressourcen,
.wissen-verwandt,
.wissen-persoenlich,
.wissen-lehrerbereich {
  margin-top: 1.3rem;
  padding: var(--abstand-4);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche-leise);
}
.wissen-interaktion label,
.wissen-persoenlich label { display: flex; flex-direction: row; align-items: flex-start; font-size: var(--text-m); }
.wissen-interaktion input[type="checkbox"] { margin-top: 0.35rem; }
.wissen-quiz-optionen { display: grid; gap: var(--abstand-2); margin: 0.8rem 0; }
.wissen-quiz-optionen button { justify-content: flex-start; text-align: left; }
.wissen-richtig { color: var(--gut); font-weight: 800; }
.wissen-falsch { color: var(--fehler); font-weight: 800; }
.wissen-rhythmus-aktionen,
.wissen-tap-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.wissen-tempo { width: min(22rem, 100%); }
.wissen-tap-stand { min-height: 1.5rem; }
.wissen-persoenlich textarea { width: 100%; min-width: 0; }
.wissen-persoenlich > summary { cursor: pointer; font-weight: 800; }
.wissen-persoenlich .wissen-formaktionen { justify-content: flex-start; margin-top: 0.6rem; }
.wissen-interaktion img { display: block; max-width: 100%; max-height: 32rem; margin: var(--abstand-3) auto; border-radius: 10px; }

.wissen-ressourcen ul,
.wissen-verwandt ul { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.wissen-ressourcen li,
.wissen-verwandt li { padding: var(--abstand-3); border-radius: var(--rundung-klein); background: var(--flaeche); }
.wissen-ressourcen a,
.wissen-verwandt button { overflow-wrap: anywhere; }
.wissen-pruefhinweis {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--sonne-dunkel);
  border-radius: var(--rundung-pille);
  color: var(--sonne-dunkel);
  font-size: var(--text-xs);
  font-weight: 800;
}

.wissen-aufgabentext { font-weight: 700; }
.wissen-faellig { color: var(--schrift-leise); }
.wissen-formmeldung { min-height: 1.5rem; margin: var(--abstand-2) 0; }
.wissen-formmeldung.fehler { padding: 0.55rem; }
.wissen-formmeldung.gut { color: var(--gut); font-weight: 700; }
.wissen-fortschrittzeile { display: grid; gap: var(--abstand-2); }
.wissen-feedbackformular { display: grid; grid-template-columns: 1fr auto; gap: var(--abstand-2); align-items: end; }
.wissen-feedbackformular label { min-width: 0; }
.wissen-feedbackformular input[type="text"],
.wissen-feedbackformular textarea { width: 100%; min-width: 0; }
.wissen-praxisrubrik-eingabe { grid-column: 1 / -1; display: grid; gap: 0.6rem; }
.wissen-praxisrubrik-eingabe label { display: grid; gap: var(--abstand-1); }
.wissen-praxisrubrik-eingabe select { width: 100%; max-width: 100%; }
.wissen-praxisrubrik ul { padding-left: 1.35rem; }

.wissen-redaktionsraster { display: grid; grid-template-columns: minmax(17rem, 0.7fr) minmax(22rem, 1.3fr); gap: 1.25rem; align-items: start; }
.wissen-paketfreigabe:not(:empty) {
  max-width: 78rem;
  margin: 0 0 1.25rem;
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid var(--rand-stark);
  border-left: 0.35rem solid var(--petrol);
  border-radius: var(--rundung);
  background: var(--flaeche-leise);
}
.wissen-paketfreigabe h3 { margin: 0 0 var(--abstand-2); font-size: var(--text-l); text-transform: none; letter-spacing: 0; }
.wissen-paketfreigabe p { margin: var(--abstand-2) 0; }
.wissen-paketfreigabe > details { margin: 0.8rem 0; padding: 0.7rem; max-height: min(48vh, 30rem); overflow: auto; background: var(--flaeche); }
.wissen-paketfreigabe details details { margin: var(--abstand-2) 0 0; padding: 0.6rem; border: 1px solid var(--rand); border-radius: var(--rundung-klein); background: var(--flaeche-leise); }
.wissen-paketfreigabe summary { cursor: pointer; font-weight: 800; }
.wissen-paketfreigabe details p { white-space: pre-wrap; overflow-wrap: anywhere; }
.wissen-pruefbox { display: flex; align-items: flex-start; gap: 0.6rem; margin: var(--abstand-3) 0; max-width: 75rem; }
.wissen-pruefbox input { flex: 0 0 auto; margin-top: var(--abstand-1); }
.wissen-pruefbox span { flex: 1; }
.wissen-paketfreigabe > button { margin: 0.4rem 0.6rem 0.4rem 0; }
.wissen-redaktionsliste { display: grid; gap: 0.6rem; max-height: 70vh; overflow: auto; padding: 0.15rem; }
.wissen-redaktion-eintrag {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.7rem;
  align-items: center;
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
}
.wissen-redaktion-eintrag p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wissen-redaktion-eintrag small { color: var(--schrift-leise); }
.wissen-editor { min-width: 0; padding: var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); }
.wissen-editor > h3 { margin-top: 0; }
.wissen-redaktionsformular fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0.8rem;
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
}
.wissen-redaktionsformular legend { padding: 0 0.4rem; font-weight: 800; }
.wissen-breit { grid-column: 1 / -1; }
.wissen-import { margin-top: 1.2rem; padding: var(--abstand-4); box-shadow: none; }
.wissen-import > label { margin-top: 0.8rem; }
.wissen-import textarea { width: 100%; min-width: 0; font-family: var(--schrift-mono); font-size: var(--text-xs); }

.wissen-vorschau { width: min(58rem, calc(100% - 1rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--rand-stark); border-radius: var(--rundung); color: var(--schrift); background: var(--grund); }
.wissen-vorschau::backdrop { background: rgb(43 39 36 / 55%); }
.wissen-vorschau-kopf { position: sticky; top: 0; z-index: 1; padding: 0.6rem; background: var(--grund); border-bottom: 1px solid var(--rand); }
.wissen-vorschau-kopf h2 { margin: 0; }
.wissen-konflikt-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-4); }
.wissen-konflikt-vergleich section { min-width: 0; margin: 0; padding: 0.8rem; box-shadow: none; }
.wissen-konflikt-vergleich h3 { margin-top: 0; }
.wissen-konflikt-vergleich pre { max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-xs)/1.45 var(--schrift-mono); }
.wissen-medieneditor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); padding: 0.8rem; border: 1px solid var(--rand); border-radius: 10px; }
.wissen-medieneditor > p,
.wissen-medieneditor > ul { grid-column: 1 / -1; margin: 0; }
.wissen-medieneditor li { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); }
.wissen-ankreuzfeld { flex-direction: row; align-items: center; align-self: center; }
.wissen-rueckmeldung {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(90vw, 40rem);
  max-width: calc(100% - 1rem);
  padding: 0.7rem var(--abstand-4);
  border-radius: var(--rundung);
  text-align: center;
  background: var(--petrol-dunkel);
  color: #fff;
  box-shadow: var(--schatten);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.wissen-rueckmeldung.sichtbar { opacity: 1; }

@media (max-width: 65rem) {
  .wissen-redaktionsraster { grid-template-columns: 1fr; }
  .wissen-redaktionsliste { max-height: none; }
}

@media (max-width: 42rem) {
  .wissen-kopf { align-items: flex-start; }
  .wissen-marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wissen-kopftitel { order: 3; flex-basis: 100%; }
  .wissen-hauptnav { padding: var(--abstand-2); }
  .wissen-hauptnav button { flex-basis: 100%; }
  .wissen-nebennav { justify-content: stretch; }
  .wissen-nebennav button { flex: 1 1 10rem; justify-content: center; }
  .wissen-redaktionsformular fieldset { grid-template-columns: 1fr; }
  .wissen-breit { grid-column: auto; }
  .wissen-feedbackformular { grid-template-columns: 1fr; }
  .wissen-konflikt-vergleich,
  .wissen-medieneditor { grid-template-columns: 1fr; }
  .wissen-medieneditor > p,
  .wissen-medieneditor > ul { grid-column: auto; }
  .wissen-detail-kopf > * { flex: 1 1 100%; justify-content: center; text-align: center; }
  .wissen-wegweiser { grid-template-columns: 1fr; }
}

/*
 * E-221: Fortschrittsbalken, Tages-Serie, Feiermoment fuer Auszeichnungen -
 * reine Anzeige auf ohnehin vorhandenen Daten (`wissen-lernen.js`s
 * `streak()`/`pathProgress()`, `wissen-dashboard.js`). Die Ampelfarben
 * bleiben die einzige fachliche Bedeutungsfarbe dieser Seite; hier geht es
 * nur um Motivation, deshalb bewusst die warmen Palette-Farben (Sonne).
 */
.wissen-fortschritt { margin: 0.4rem 0 0.8rem; }
.wissen-fortschritt p { margin: 0.3rem 0 0; font-size: var(--text-s); color: var(--schrift-leise); }
.wissen-fortschritt-leiste {
  height: 0.55rem;
  background: var(--flaeche-leise);
  border-radius: var(--rundung-pille);
  overflow: hidden;
}
.wissen-fortschritt-fuellung {
  height: 100%;
  background: var(--petrol);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.wissen-serie {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.wissen-serie[data-aktiv="false"] { color: var(--schrift-leise); font-weight: 400; }

.wissen-feier {
  background: var(--sonne-hell);
  border: 1px solid var(--sonne);
  border-radius: 0.75rem;
  padding: var(--abstand-3) var(--abstand-4);
  margin: 0 0 var(--abstand-3);
  font-weight: 600;
  animation: wissen-feier-erscheinen 0.5s ease;
}
@keyframes wissen-feier-erscheinen {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wissen-rueckmeldung { transition: none; }
  .wissen-feier { animation: none; }
  .wissen-fortschritt-fuellung { transition: none; }
}

@media print {
  .wissen-kopfaktionen,
  .wissen-hauptnav,
  .wissen-nebennav,
  .wissen-offline,
  .wissen-detail-kopf,
  .wissen-detail-nav,
  .wissen-persoenlich,
  .wissen-interaktion button { display: none !important; }
  .wissen-seite { background: #fff; }
  .wissen-bereich,
  .wissen-detail { border: 0; box-shadow: none; }
}
/* Traffic lights always have text, so color is never the only information. */
[data-ampel="green"] { border-inline-start: 5px solid #226452; padding-inline-start: .65rem; }
[data-ampel="yellow"] { border-inline-start: 5px solid #a16d00; padding-inline-start: .65rem; }
[data-ampel="red"] { border-inline-start: 5px solid #b13d42; padding-inline-start: .65rem; }
[data-ampel="grey"] { border-inline-start: 5px solid #6b7276; padding-inline-start: .65rem; }
.wissen-kontrolle { margin-block: var(--abstand-5); padding: var(--abstand-4); border: 1px solid currentColor; border-radius: var(--rundung); }
.wissen-test-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: .8rem; }
.wissen-test-aktionen button { white-space: normal; text-align: start; max-width: 100%; }
@font-face { font-family: Bravura; src: url('/fremd/vexflow/bravura.woff2') format('woff2'); font-display: block; }
@font-face { font-family: Academico; src: url('/fremd/vexflow/academico.woff2') format('woff2'); font-display: block; }

/*
 * E-231: Didaktische Lerneinheiten (Erklaeren – Veranschaulichen – Anwenden –
 * Pruefen). Nutzt die gemeinsamen Marken aus stil.css (--abstand-*, --text-*,
 * --rundung-*, --klickflaeche). Rollenfarben fuer Grundton/Terz/Quinte sind
 * die einzige zusaetzliche Bedeutungsfarbe; sie tragen immer eine Textziffer.
 */
.le-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-3, 12px); margin: 0 0 var(--abstand-5, 24px); }
.le-ziel { padding: var(--abstand-4, 16px) var(--abstand-5, 24px); border-left: 0.4rem solid var(--petrol); border-radius: 0 var(--rundung) var(--rundung) 0; background: var(--petrol-hell); }
.le-ziel .wissen-augenbraue { margin-bottom: var(--abstand-1, 4px); }
.le-zieltext { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.5; font-weight: 700; }
.le-zeit { display: flex; flex-wrap: wrap; gap: var(--abstand-2, 8px); margin: 0; padding: 0; list-style: none; }
.le-zeit li { display: grid; gap: 2px; min-width: 7rem; padding: var(--abstand-2, 8px) var(--abstand-3, 12px); border: 1px solid var(--rand); border-radius: var(--rundung-klein, 8px); background: var(--flaeche-leise); font-size: var(--text-s, 0.875rem); }
.le-zeit strong { font-size: var(--text-xs, 0.8rem); color: var(--schrift-leise); text-transform: uppercase; letter-spacing: 0.05em; }
.le-vorwissen ul { margin: 0; padding-left: 1.2rem; }
.le-vorwissen li { margin: var(--abstand-1, 4px) 0; }
.le-sprungleiste { display: flex; flex-wrap: wrap; gap: var(--abstand-2, 8px); margin: 0 0 var(--abstand-5, 24px); padding: var(--abstand-2, 8px); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); }
.le-sprungleiste button { flex: 1 1 11rem; justify-content: center; border-radius: var(--rundung-pille, 999px); }
.le-abschnitt { margin: 0 0 var(--abstand-6, 32px); padding-top: var(--abstand-4, 16px); border-top: 2px solid var(--rand); }
.le-abschnitt-kopf h3 { margin: 0 0 var(--abstand-3, 12px); font-family: var(--schrift-anzeige); font-size: clamp(1.3rem, 3vw, 1.7rem); text-transform: none; letter-spacing: normal; }
.le-abschnitt-kopf h3:focus { outline: 3px solid var(--sonne); outline-offset: 3px; }
.le-abschnitt h4 { margin: var(--abstand-4, 16px) 0 var(--abstand-2, 8px); font-size: var(--text-l, 1.125rem); text-transform: none; letter-spacing: normal; }
.le-abschnitt h5 { margin: 0; font-size: var(--text-m, 1rem); text-transform: none; letter-spacing: normal; }
.le-schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-4, 16px); margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.le-schritt { min-width: 0; padding: var(--abstand-4, 16px); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); }
.le-schritt-inhalt { min-width: 0; }
.le-schritt > h4 { margin-top: 0; }
.le-schritt-text { max-width: 62rem; margin: 0 0 var(--abstand-3, 12px); line-height: 1.6; }
.le-begriffe { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-1, 4px) var(--abstand-3, 12px); max-width: 62rem; margin: 0 0 var(--abstand-3, 12px); padding: var(--abstand-3, 12px); border-radius: var(--rundung-klein, 8px); background: var(--flaeche-leise); font-size: var(--text-s, 0.875rem); }
.le-begriffe dt { font-weight: 800; color: var(--petrol-dunkel); }
.le-begriffe dt::before { content: 'Fachbegriff · '; font-weight: 400; color: var(--schrift-leise); }
.le-begriffe dd { margin: 0; }
.le-merksatz { max-width: 62rem; margin: var(--abstand-3, 12px) 0 0; padding: var(--abstand-3, 12px) var(--abstand-4, 16px); border-left: 0.35rem solid var(--sonne); border-radius: 0 var(--rundung-klein, 8px) var(--rundung-klein, 8px) 0; background: var(--sonne-hell); }
.le-merkbox { max-width: 62rem; margin: var(--abstand-4, 16px) 0; padding: var(--abstand-4, 16px); border: 2px dashed var(--sonne); border-radius: var(--rundung); background: var(--sonne-hell); }
.le-merkbox ul { margin: 0; padding-left: 1.2rem; }
.le-merkbox li { margin: var(--abstand-1, 4px) 0; font-weight: 700; }
.le-vertiefung { margin: 0; padding: var(--abstand-2, 8px) var(--abstand-3, 12px); box-shadow: none; background: var(--flaeche-leise); }
.le-vertiefung > summary { cursor: pointer; font-weight: 800; font-size: var(--text-l, 1.125rem); }
.le-vertiefung .le-schritt-inhalt { margin-top: var(--abstand-3, 12px); }
.le-fehler ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-3, 12px); margin: 0; padding: 0; list-style: none; }
.le-fehler li { padding: var(--abstand-3, 12px) var(--abstand-4, 16px); border-left: 0.35rem solid var(--koralle); border-radius: 0 var(--rundung-klein, 8px) var(--rundung-klein, 8px) 0; background: var(--koralle-hell); }
.le-fehler-titel { margin: 0 0 var(--abstand-2, 8px); font-weight: 800; }
.le-fehler dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-1, 4px) var(--abstand-3, 12px); margin: 0; font-size: var(--text-s, 0.875rem); }
.le-fehler dt { font-weight: 700; color: var(--koralle-dunkel); }
.le-fehler dd { margin: 0; }
.le-angeleitet, .le-selbststaendig, .le-erfolgskontrolle, .le-transfer, .le-leiter, .le-verweise { margin: var(--abstand-4, 16px) 0; padding: var(--abstand-4, 16px); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); }
.le-angeleitet > h4, .le-selbststaendig > h4, .le-erfolgskontrolle > h4, .le-transfer > h4, .le-leiter > h4, .le-verweise > h4 { margin-top: 0; }
.le-arbeitsschritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2, 8px); margin: var(--abstand-3, 12px) 0; padding-left: 1.4rem; }
.le-arbeitsschritte label, .le-selbstkontrolle { display: flex; align-items: flex-start; gap: var(--abstand-2, 8px); font-size: var(--text-m, 1rem); }
.le-arbeitsschritte input, .le-selbstkontrolle input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: 0; }
.le-stufe { margin: var(--abstand-2, 8px) 0; padding: var(--abstand-3, 12px); box-shadow: none; background: var(--flaeche); }
.le-stufe > summary { cursor: pointer; font-weight: 800; }
.le-stufe[data-stufe="leicht"] { border-left: 0.35rem solid var(--mint); }
.le-stufe[data-stufe="mittel"] { border-left: 0.35rem solid var(--himmel); }
.le-stufe[data-stufe="schwer"] { border-left: 0.35rem solid var(--beere); }
.le-kontrolle { margin: var(--abstand-3, 12px) 0; padding: var(--abstand-3, 12px) var(--abstand-4, 16px); border: 1px solid var(--rand); border-radius: var(--rundung-klein, 8px); background: var(--flaeche); }
.le-kontrolle-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2, 8px); }
.le-kontrolle-kopf .wissen-chip { list-style: none; }
.le-kontrolle-stand { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: var(--rundung-pille, 999px); background: var(--flaeche-leise); font-size: var(--text-xs, 0.8rem); font-weight: 800; }
.le-kontrolle-stand[data-stand="bestanden"] { background: var(--gut-hell); color: var(--gut); }
.le-leiter .le-stufe-aktuell { margin: 0 0 var(--abstand-3, 12px); font-weight: 800; }
.le-stufen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2, 8px); margin: 0; padding: 0; list-style: none; counter-reset: stufe; }
.le-stufe-eintrag { position: relative; padding: var(--abstand-3, 12px) var(--abstand-3, 12px) var(--abstand-3, 12px) 3rem; border: 1px solid var(--rand); border-radius: var(--rundung-klein, 8px); background: var(--flaeche); counter-increment: stufe; }
.le-stufe-eintrag::before { content: counter(stufe); position: absolute; left: var(--abstand-3, 12px); top: var(--abstand-3, 12px); display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--flaeche-leise); border: 2px solid var(--rand-stark); font-weight: 800; font-size: var(--text-s, 0.875rem); }
.le-stufe-eintrag[data-erreicht="true"] { border-color: var(--mint); }
.le-stufe-eintrag[data-erreicht="true"]::before { content: '✓'; background: var(--mint-hell); border-color: var(--mint-dunkel); color: var(--mint-dunkel); }
.le-stufe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-2, 8px); }
.le-stufe-status { font-size: var(--text-s, 0.875rem); color: var(--schrift-leise); }
.le-stufe-eintrag p { margin: var(--abstand-1, 4px) 0; }
.le-stufe-fehlt { font-size: var(--text-s, 0.875rem); color: var(--koralle-dunkel); }
.le-lehrkraft { font-weight: 800; color: var(--gut); }
.le-stufe-eintrag button { margin-top: var(--abstand-2, 8px); }
.le-verweise ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2, 8px); margin: 0; padding: 0; list-style: none; }
.le-verweise li { padding: var(--abstand-2, 8px) var(--abstand-3, 12px); border-radius: var(--rundung-klein, 8px); background: var(--flaeche); }
.le-verweis-art { color: var(--schrift-leise); font-size: var(--text-s, 0.875rem); }
.le-verweise .hinweis { margin: var(--abstand-1, 4px) 0 0; }
.le-extern { margin: var(--abstand-3, 12px) 0; }
.le-extern ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2, 8px); margin: var(--abstand-2, 8px) 0 0; padding: 0; list-style: none; }
.le-extern li { padding: var(--abstand-2, 8px); border-radius: var(--rundung-klein, 8px); background: var(--flaeche); }
.le-extern .hinweis { margin: var(--abstand-1, 4px) 0 0; }
.le-verweisknopf { white-space: normal; text-align: start; }

/* Bausteine */
.le-baustein { box-sizing: border-box; width: auto; max-width: 52rem; min-width: 0; margin: var(--abstand-3, 12px) 0; padding: var(--abstand-3, 12px); border: 1px solid var(--rand-stark); border-radius: var(--rundung); background: linear-gradient(140deg, var(--flaeche), var(--himmel-hell)); }
.le-baustein > h4 { margin-top: 0; }
.le-baustein figcaption { margin-top: var(--abstand-2, 8px); font-weight: 700; line-height: 1.45; }
.le-baustein figcaption .le-klangknopf { margin-left: var(--abstand-2, 8px); font-weight: 700; }
.le-stufenliste { display: block; margin-top: var(--abstand-1, 4px); font-weight: 400; color: var(--schrift-leise); }
.le-noten .wissen-visual-bild svg { display: block; width: 100%; height: auto; max-height: 13rem; }
.le-schritt-stand { margin: 0 0 var(--abstand-1, 4px); font-weight: 800; color: var(--petrol-dunkel); }
.le-aufgabe-text { margin: 0 0 var(--abstand-2, 8px); font-weight: 700; }
.le-schritt-nav, .le-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2, 8px); margin: var(--abstand-2, 8px) 0 0; }
.le-schritt-extra { margin-top: var(--abstand-2, 8px); }
.le-meldung { min-height: 1.5rem; margin: var(--abstand-2, 8px) 0; line-height: 1.5; }
.le-richtig { color: var(--gut); font-weight: 700; }
.le-falsch { color: var(--fehler); font-weight: 700; }
.le-klangliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2, 8px); margin: 0; padding: 0; list-style: none; }
.le-klangliste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2, 8px) var(--abstand-3, 12px); padding: var(--abstand-2, 8px) var(--abstand-3, 12px); border-radius: var(--rundung-klein, 8px); background: var(--flaeche); }
.le-klangname { font-weight: 800; }
.le-klangtoene { color: var(--schrift-leise); }
.le-klangaktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2, 8px); margin-left: auto; }
.le-klangknopf[aria-pressed="true"] { background: var(--petrol-hell); border-color: var(--petrol); }
.le-referenz { margin: 0 0 var(--abstand-3, 12px); padding: var(--abstand-2, 8px) var(--abstand-3, 12px); border-radius: var(--rundung-klein, 8px); background: var(--flaeche); }
.le-referenz p { margin: 0 0 var(--abstand-2, 8px); }
.le-antworten button { min-width: 7rem; justify-content: center; font-weight: 800; }
.le-zuordnungsliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2, 8px); margin: 0; padding-left: 1.4rem; }
.le-zuordnungsliste label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 1fr); align-items: center; gap: var(--abstand-2, 8px); }
.le-zuordnungsliste select { width: 100%; min-width: 0; }
.le-zuordnung-links { font-weight: 700; }
.le-zuordnung-ergebnis { display: inline-block; min-height: 1.2rem; margin-top: 2px; font-size: var(--text-s, 0.875rem); }

/* Klaviatur und Mallets: echte Buttons je Taste */
.wk-huelle { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.wk-feld { position: relative; display: flex; width: 100%; min-width: var(--wk-min-breite, 0); height: clamp(6.5rem, 22vw, 9rem); margin: 0; padding: 0; border-radius: var(--rundung-klein, 8px); overflow: hidden; background: var(--tinte); }
.wk-taste { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 0; min-width: 0; padding: 0 0 4px; border: 1px solid var(--tinte); border-radius: 0 0 6px 6px; box-shadow: none; font: 700 clamp(0.55rem, 1.6vw, 0.8rem)/1 var(--schrift-text); color: var(--schrift); cursor: pointer; }
.wk-weiss { flex: 1 1 0; background: #fff; }
.wk-weiss:hover { background: var(--flaeche-leise); }
.wk-schwarz { position: absolute; top: 0; z-index: 2; height: 58%; background: #2b2724; color: #fff; border-radius: 0 0 5px 5px; }
.wk-schwarz .wk-name { font-size: 0.55em; opacity: 0.85; }
.wk-schwarz:hover { background: #4a433e; }
.wk-taste:focus-visible { outline: 3px solid var(--sonne); outline-offset: -3px; z-index: 3; }
.wk-taste[aria-pressed="true"], .wk-gewaehlt { box-shadow: inset 0 0 0 4px var(--petrol); }
.wk-name { white-space: nowrap; }
.wk-rolle { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em; padding: 0 0.25em; border-radius: 50%; background: var(--flaeche-leise); color: var(--schrift); font-size: 0.95em; font-weight: 900; }
.wk-taste[data-rolle] { background: var(--wk-farbe-hell, var(--flaeche-leise)); }
.wk-taste[data-rolle="grundton"] { --wk-farbe-hell: var(--koralle-hell); --wk-farbe: var(--koralle-dunkel); }
.wk-taste[data-rolle="terz"] { --wk-farbe-hell: var(--sonne-hell); --wk-farbe: var(--sonne-dunkel); }
.wk-taste[data-rolle="quinte"] { --wk-farbe-hell: var(--himmel-hell); --wk-farbe: var(--himmel-dunkel); }
.wk-taste[data-rolle="halbton"] { --wk-farbe-hell: #f0ebe2; --wk-farbe: var(--schrift-leise); }
.wk-taste[data-rolle="stufe"] { --wk-farbe-hell: var(--mint-hell); --wk-farbe: var(--mint-dunkel); }
.wk-taste[data-rolle="ton"] { --wk-farbe-hell: var(--petrol-hell); --wk-farbe: var(--petrol-dunkel); }
.wk-schwarz[data-rolle] { background: var(--wk-farbe, #2b2724); }
.wk-taste[data-rolle] .wk-rolle { background: var(--wk-farbe); color: #fff; }
.wk-schwarz[data-rolle] .wk-rolle { background: #fff; color: var(--wk-farbe); }
.wk-legende { display: flex; flex-wrap: wrap; gap: var(--abstand-3, 12px); margin: var(--abstand-2, 8px) 0 0; padding: 0; list-style: none; font-size: var(--text-s, 0.875rem); }
.wk-legende li { display: inline-flex; align-items: center; gap: 0.35rem; }
.wk-legende li[data-rolle="grundton"] .wk-rolle { background: var(--koralle-dunkel); color: #fff; }
.wk-legende li[data-rolle="terz"] .wk-rolle { background: var(--sonne-dunkel); color: #fff; }
.wk-legende li[data-rolle="quinte"] .wk-rolle { background: var(--himmel-dunkel); color: #fff; }
.wk-legende li[data-rolle="halbton"] .wk-rolle { background: var(--schrift-leise); color: #fff; }
/* Mallets: Klangplatten, nach oben laenger werdend, Halbtonplatten als hintere Reihe */
.wk-mallets { height: clamp(8rem, 28vw, 12rem); background: var(--fell-dunkel); align-items: flex-end; box-sizing: border-box; }
.wk-mallets .wk-weiss { flex: 1 1 0; height: calc(56% * var(--wk-laenge, 1)); margin: 0 1px; border: 1px solid var(--holz-dunkel); border-radius: 4px; background: linear-gradient(180deg, #e9c98a, #c9963f); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 15%); }
.wk-mallets .wk-schwarz { top: 3%; height: calc(38% * var(--wk-laenge, 1)); border: 1px solid var(--holz-dunkel); border-radius: 4px; background: linear-gradient(180deg, #d9a95e, #a86f24); color: #fff; }
.wk-mallets .wk-taste[data-rolle] { background: var(--wk-farbe-hell); }
.wk-mallets .wk-schwarz[data-rolle] { background: var(--wk-farbe); }
@media (max-width: 42rem) {
  .le-begriffe, .le-fehler dl { grid-template-columns: 1fr; }
  .le-zuordnungsliste label { grid-template-columns: 1fr; }
  .le-kontrolle-stand { margin-left: 0; }
  .wk-name { font-size: 0.5rem; }
  .wk-schwarz .wk-name { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .le-klangknopf[aria-pressed="true"] { transition: background 120ms ease; }
}
@media print {
  .le-sprungleiste, .le-aktionen, .le-schritt-nav, .le-klangknopf { display: none !important; }
}

/* ======================================================================
 * E-268: Neue Übersicht, eine Kartenform, Medienbausteine
 * Mobil zuerst; Farben nur aus den Tokens von stil.css.
 * ==================================================================== */
.wk-textfassung { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-gesetzt="fehler"] .wk-textfassung { position: static; width: auto; height: auto; margin: var(--abstand-2) 0 0; overflow: visible; clip-path: none; white-space: normal; }

/* ---------------------------------------------------------- Kopfleiste */
.ws-leiste { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--abstand-3); margin-bottom: var(--abstand-4); }
.ws-suche { flex: 1 1 22rem; max-width: 40rem; margin: 0; }
.ws-suche label { display: block; margin-bottom: var(--abstand-1); font-weight: 800; font-size: var(--text-s); }
.ws-suche-feld { display: flex; gap: var(--abstand-2); }
.ws-suche-feld input { flex: 1 1 auto; min-width: 0; }
.ws-nebenzugang { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.ws-nebenzugang button { border-radius: var(--rundung-pille); }
.ws-nebenzugang button[aria-current="true"] { border-color: var(--petrol); background: var(--petrol-hell); }

/* --------------------------------------------------------- Startseite */
.ws-uebersicht { display: grid; gap: var(--abstand-6); }
.ws-block > h2, .ws-seitenkopf h2 { margin: 0 0 var(--abstand-3); font-size: clamp(1.3rem, 3vw, 1.75rem); }
.ws-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--abstand-4); }
.ws-weiterlernen .ws-karte-gross { max-width: 46rem; }
.ws-karte {
  display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0;
  padding: var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung);
  background: var(--flaeche); box-shadow: var(--schatten);
}
.ws-karte-gross { padding: var(--abstand-5); border-left: 0.4rem solid var(--petrol); }
.ws-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); }
.ws-karte-titel { margin: 0; font-size: var(--text-l); line-height: 1.3; overflow-wrap: anywhere; }
.ws-karte-gross .ws-karte-titel { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.ws-karte-ziel { margin: 0; color: var(--schrift); line-height: 1.5; overflow-wrap: anywhere; }
.ws-grund { margin: 0; color: var(--petrol-dunkel); font-size: var(--text-s); font-weight: 800; }
.ws-karte-meta { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); margin: 0; padding: 0; list-style: none; color: var(--schrift-leise); font-size: var(--text-s); }
.ws-karte-meta li + li::before { content: '·'; margin-right: var(--abstand-3); color: var(--rand-stark); }
.ws-stand { font-weight: 700; }
.ws-stand[data-stand="in-arbeit"] { color: var(--himmel-dunkel); }
.ws-stand[data-stand="geuebt"] { color: var(--sonne-dunkel); }
.ws-stand[data-stand="sicher"] { color: var(--gut); }
.ws-aktion { align-self: flex-start; margin-top: auto; }
.ws-karte-gross .ws-aktion { margin-top: var(--abstand-2); }
.ws-zeichen { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 12px; }
.ws-symbol { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-zeichen-noten { color: var(--himmel-dunkel); background: var(--himmel-hell); }
.ws-zeichen-haende { color: var(--koralle-dunkel); background: var(--koralle-hell); }
.ws-zeichen-groove { color: var(--beere-dunkel); background: var(--beere-hell); }
.ws-zeichen-ohr { color: var(--petrol-dunkel); background: var(--petrol-hell); }
.ws-zeichen-koerper { color: var(--mint-dunkel); background: var(--mint-hell); }
.ws-merkmale { display: inline-flex; gap: var(--abstand-1); color: var(--schrift-leise); }
.ws-merkmal-symbol { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-niveauhinweis { margin: 0 0 var(--abstand-3); }
.ws-niveauhinweis p { margin: 0 0 var(--abstand-1); }
.ws-niveauhinweis details { display: inline-block; }
.ws-niveauhinweis summary { cursor: pointer; font-weight: 800; color: var(--petrol-dunkel); }
.ws-alle-aufgaben { margin-top: var(--abstand-3); }
.ws-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--abstand-3); margin: 0; padding: 0; list-style: none; }
.ws-bereich {
  display: flex; align-items: flex-start; gap: var(--abstand-3); width: 100%; height: 100%; min-height: 7rem;
  padding: var(--abstand-4); text-align: left; border: 1px solid var(--rand); border-radius: var(--rundung);
  background: var(--flaeche); color: var(--schrift); white-space: normal;
}
.ws-bereich:hover:not(:disabled) { border-color: var(--petrol); background: var(--petrol-hell); }
.ws-bereich-text { display: grid; gap: var(--abstand-1); min-width: 0; font-weight: 400; }
.ws-bereich-text strong { font-size: var(--text-l); color: var(--schrift); }
.ws-bereich-text small { color: var(--schrift-leise); }

/* ------------------------------------------------ Bereich, Suche, Filter */
.ws-seitenkopf { display: grid; gap: var(--abstand-2); }
.ws-titelzeile { display: flex; align-items: center; gap: var(--abstand-3); }
.ws-titelzeile h2 { margin: 0; }
.ws-seitenkopf p { margin: 0; }
.ws-zurueck { justify-self: start; }
.ws-filterbereich { display: grid; gap: var(--abstand-2); margin: var(--abstand-4) 0; }
.ws-filter { padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); box-shadow: none; }
.ws-filter summary { cursor: pointer; font-weight: 800; }
.ws-filter-form { display: grid; gap: var(--abstand-3); padding: var(--abstand-3) 0 var(--abstand-1); }
.ws-filter-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--abstand-3); }
.ws-filter-feld { display: grid; gap: var(--abstand-1); min-width: 0; font-size: var(--text-s); font-weight: 700; }
.ws-filter-feld select { width: 100%; min-width: 0; }
.ws-filter-kaesten { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); margin: 0; padding: var(--abstand-2) 0 0; border: 0; }
.ws-filter-kaesten legend { padding: 0; font-size: var(--text-s); font-weight: 700; }
.ws-filter-kasten { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--klickflaeche); }
.ws-filter-kasten input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; }
.ws-aktive-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.ws-aktive-filter ul { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.ws-filter-chip { border-radius: var(--rundung-pille); border-color: var(--petrol); background: var(--petrol-hell); }
.ws-trefferzahl { margin: 0 0 var(--abstand-3); color: var(--schrift-leise); font-size: var(--text-s); }
.ws-lernwege { margin-bottom: var(--abstand-5); }
.ws-lernwege ul { display: grid; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.ws-unterbereich { margin-bottom: var(--abstand-6); }
.ws-unterbereich > h3 { margin: 0 0 var(--abstand-3); padding-bottom: var(--abstand-2); border-bottom: 2px solid var(--rand); font-size: var(--text-l); text-transform: none; letter-spacing: 0; }
.ws-begriffe { margin-top: var(--abstand-4); padding: var(--abstand-3); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); box-shadow: none; }
.ws-begriffe summary { cursor: pointer; font-weight: 800; }
.ws-begriffliste { display: grid; gap: var(--abstand-1); margin: var(--abstand-3) 0 0; padding: 0; list-style: none; }
.ws-begriffliste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-1) var(--abstand-3); padding: var(--abstand-1) 0; border-bottom: 1px solid var(--rand); }
.ws-begriff { font-weight: 800; }
.ws-begriff-ziel { flex: 1 1 16rem; color: var(--schrift-leise); font-size: var(--text-s); }
.ws-leer { padding: var(--abstand-5); text-align: center; color: var(--schrift-leise); }

/* ------------------------------------------------------ Kartenkopf */
.wissen-detail-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.wo-panel { margin: var(--abstand-3) 0; padding: var(--abstand-4); border: 1px solid var(--rand-stark); border-radius: var(--rundung); background: var(--flaeche-leise); }
.wo-panel h3 { margin-top: 0; font-size: var(--text-l); text-transform: none; letter-spacing: 0; }
.wo-inhalt { margin: 0 0 var(--abstand-2); padding-left: 1.2rem; }
.wo-fortschritt { width: 100%; }
.wo-status { min-height: 1.4rem; font-weight: 700; }

/* ---------------------------------------------------- Lerneinheit */
.le-kopf { display: grid; gap: var(--abstand-3); margin: 0 0 var(--abstand-4); }
.le-kopf .le-pfad { margin: 0; }
.le-titel { margin: 0; font-size: clamp(1.6rem, 5vw, 2.5rem); line-height: 1.15; overflow-wrap: anywhere; }
.le-meta { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.le-standchip[data-stand="sicher"] { border-color: var(--gut); color: var(--gut); }
.le-standchip[data-stand="geuebt"] { border-color: var(--sonne-dunkel); color: var(--sonne-dunkel); }
.le-kopf .le-zeit { padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--rand); border-radius: var(--rundung-klein); background: var(--flaeche-leise); box-shadow: none; }
.le-kopf .le-zeit summary { cursor: pointer; font-weight: 700; font-size: var(--text-s); }
.le-kopf .le-zeit ul { display: grid; gap: var(--abstand-1); margin: var(--abstand-2) 0 0; padding: 0; list-style: none; font-size: var(--text-s); }
.le-kopfaktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.le-niveau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); margin: 0 0 var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); }
.le-niveau-text { margin: 0; }
.le-niveau-aendern summary { cursor: pointer; font-weight: 800; color: var(--petrol-dunkel); }
.le-niveau-aendern .hinweis { max-width: 40rem; }
.le-niveau-wahl { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.le-niveau-knopf { border-radius: var(--rundung-pille); }
.le-niveau-knopf[aria-pressed="true"] { color: #fff; border-color: var(--petrol); background: var(--petrol); }
.le-sprungleiste { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin: 0 0 var(--abstand-5); padding: var(--abstand-2); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); box-shadow: var(--schatten); }
.le-sprungleiste button { flex: 1 1 auto; min-height: var(--klickflaeche); padding-inline: var(--abstand-3); border-radius: var(--rundung-pille); font-size: var(--text-s); }
.le-abschnitt { margin: 0 0 var(--abstand-6); padding-top: var(--abstand-4); border-top: 2px solid var(--rand); scroll-margin-top: 5rem; }
.le-abschnitt-kopf { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--abstand-1) var(--abstand-3); margin-bottom: var(--abstand-4); }
.le-abschnitt-nr { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; background: var(--petrol); font-weight: 800; }
.le-abschnitt-kopf h3 { margin: 0; font-family: var(--schrift-anzeige); font-size: clamp(1.3rem, 3vw, 1.7rem); text-transform: none; letter-spacing: normal; }
.le-abschnitt-kopf h3:focus { outline: 3px solid var(--sonne); outline-offset: 3px; }
.le-abschnitt-hinweis { grid-column: 2; margin: 0; color: var(--schrift-leise); }
.le-abschnitt h4 { margin: var(--abstand-4) 0 var(--abstand-2); font-size: var(--text-l); text-transform: none; letter-spacing: normal; }
.le-abschnitt h5 { margin: 0; font-size: var(--text-m); text-transform: none; letter-spacing: normal; }
.le-einordnung { display: grid; gap: var(--abstand-3); max-width: 60rem; margin: 0 0 var(--abstand-4); padding: var(--abstand-3) var(--abstand-4); border-left: 0.3rem solid var(--petrol); border-radius: 0 12px 12px 0; background: var(--himmel-hell); }
.le-einordnung p, .le-einordnung ul { margin: var(--abstand-1) 0 0; }
.le-zentral { margin: var(--abstand-4) 0; }
.le-schrittliste { display: grid; gap: var(--abstand-4); }
.le-schritt { min-width: 0; padding: var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); }
.le-schritt > h4 { margin-top: 0; }
.le-schritt-text { max-width: 62rem; line-height: 1.6; }
.le-begriffe { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--abstand-1) var(--abstand-3); margin: var(--abstand-3) 0; }
.le-begriffe dt { font-weight: 800; }
.le-begriffe dd { margin: 0; }
@media (max-width: 34rem) { .le-begriffe { grid-template-columns: minmax(0, 1fr); } .le-begriffe dd { margin-bottom: var(--abstand-2); } }
.le-merksatz { padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rundung-klein); background: var(--sonne-hell); }
.le-merkbox { margin: var(--abstand-4) 0; padding: var(--abstand-3) var(--abstand-4); border: 2px solid var(--sonne); border-radius: var(--rundung); background: var(--sonne-hell); }
.le-merkbox ul { margin: 0; padding-left: 1.2rem; font-weight: 700; }
.le-glossar { margin: var(--abstand-3) 0; box-shadow: none; }
.le-glossar summary { cursor: pointer; font-weight: 800; }
.le-angeleitet, .le-uebung, .le-transfer, .le-fragen { padding: var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); }
.le-angeleitet > h4, .le-uebung > h4, .le-transfer > h4, .le-fragen > h4 { margin-top: 0; }
.le-rahmen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--abstand-1) var(--abstand-3); margin: 0 0 var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rundung-klein); background: var(--flaeche-leise); }
.le-rahmen dt { font-weight: 800; }
.le-rahmen dd { margin: 0; }
.le-arbeitsschritte { display: grid; gap: var(--abstand-2); padding-left: 1.4rem; }
.le-arbeitsschritte label { display: flex; align-items: flex-start; gap: var(--abstand-2); }
.le-arbeitsschritte input { margin-top: 0.3rem; flex: none; }
.le-rueckmeldung { margin: var(--abstand-3) 0 0; font-weight: 700; color: var(--schrift-leise); }
.le-rueckmeldung[data-fertig="true"] { color: var(--gut); }
.le-uebung { border-left: 0.35rem solid var(--himmel); }
.le-uebung[data-stufe="mittel"] { border-left-color: var(--sonne); }
.le-uebung[data-stufe="schwer"] { border-left-color: var(--beere); }
.le-schwerer { margin-top: var(--abstand-3); box-shadow: none; }
.le-schwerer summary { cursor: pointer; font-weight: 800; }
.le-fehler ul { display: grid; gap: var(--abstand-3); margin: 0; padding: 0; list-style: none; }
.le-fehler li { padding: var(--abstand-3) var(--abstand-4); border-left: 0.3rem solid var(--koralle); border-radius: 0 12px 12px 0; background: var(--koralle-hell); }
.le-fehler-titel { margin: 0 0 var(--abstand-2); font-weight: 800; }
.le-fehler dl { margin: 0; }
.le-fehler dt { font-weight: 700; font-size: var(--text-s); color: var(--koralle-dunkel); }
.le-fehler dd { margin: 0 0 var(--abstand-2); }
.le-erfolgskontrolle { display: grid; gap: var(--abstand-3); margin: var(--abstand-4) 0; }
.le-erfolgskontrolle > h4 { margin: 0; }
.le-kontrolle { padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche); }
.le-kontrolle-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.le-kontrolle-kopf h5 { flex: 1 1 100%; }
.le-kontrolle-stand { font-weight: 800; font-size: var(--text-s); }
.le-kontrolle-stand[data-stand="bestanden"] { color: var(--gut); }
.le-selbstkontrolle { display: flex; align-items: flex-start; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.le-transfer { margin: var(--abstand-4) 0; border-left: 0.35rem solid var(--beere); }
.le-leiter { margin-top: var(--abstand-5); padding: var(--abstand-4); border: 2px solid var(--petrol); border-radius: var(--rundung); background: var(--petrol-hell); }
.le-leiter h4 { margin-top: 0; }
.le-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-1); margin: 0 0 var(--abstand-3); padding: 0; list-style: none; counter-reset: stufe; }
.le-stufe-eintrag { position: relative; padding: var(--abstand-2); border-radius: var(--rundung-klein); background: var(--flaeche); text-align: center; font-size: var(--text-s); }
.le-stufe-eintrag[data-erreicht="true"] { color: #fff; background: var(--petrol); }
.le-stufe-eintrag[aria-current="step"] { outline: 3px solid var(--sonne); outline-offset: 1px; }
@media (max-width: 30rem) { .le-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.le-stufe-fehlt { margin: var(--abstand-2) 0; font-size: var(--text-s); }
.le-leiter button { margin: 0 var(--abstand-2) var(--abstand-2) 0; }
.le-lehrkraft { font-weight: 800; color: var(--gut); }
.le-vertiefen { margin: var(--abstand-4) 0; padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); box-shadow: none; }
.le-vertiefen > summary { cursor: pointer; font-weight: 800; font-size: var(--text-l); }
.le-verweise ul, .le-extern ul { display: grid; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------ Abspieler */
.wk-abspieler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); margin: var(--abstand-3) 0; padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--rand); border-radius: var(--rundung-pille); background: var(--flaeche-leise); }
.wk-abspieler-start { display: inline-flex; align-items: center; gap: var(--abstand-2); min-width: 8rem; justify-content: center; border-radius: var(--rundung-pille); color: #fff; background: var(--petrol); border-color: var(--petrol); }
.wk-abspieler-start:hover { background: var(--petrol-dunkel); }
.wk-abspieler[data-spielt="true"] .wk-abspieler-start { background: var(--koralle-dunkel); border-color: var(--koralle-dunkel); }
.wk-abspieler-symbol { font-size: 0.9em; letter-spacing: -0.1em; }
.wk-abspieler-zeit { min-width: 6.5rem; font-family: var(--schrift-mono); font-size: var(--text-s); font-variant-numeric: tabular-nums; }
.wk-abspieler-tempo { display: inline-flex; gap: 0; border: 1px solid var(--rand-stark); border-radius: var(--rundung-pille); overflow: hidden; }
.wk-abspieler-tempoknopf { border: 0; border-radius: 0; min-height: var(--klickflaeche); font-size: var(--text-s); background: transparent; }
.wk-abspieler-tempoknopf[aria-pressed="true"] { color: #fff; background: var(--petrol); }
.wk-abspieler-laut { display: inline-flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-s); font-weight: 700; }
.wk-abspieler-laut input { width: 7rem; }
.wk-abspieler-hinweis { flex-basis: 100%; margin: 0; }
.wk-einzaehlen { min-height: 1.3rem; margin: 0; font-weight: 800; color: var(--koralle-dunkel); }

/* ------------------------------------------------------ Notenzeilen */
.wk-notenzeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; min-width: 0; }
.wk-takt { flex: 0 1 var(--takt-breite, 18rem); width: var(--takt-breite, 18rem); max-width: 100%; min-width: 0; }
.wk-takt svg { display: block; width: 100%; height: auto; }
.wissen-visual .wk-notenzeile { background: var(--flaeche); border-radius: var(--rundung-klein); padding: var(--abstand-2); }
.wk-klingt path, .wk-klingt text, .wk-klingt rect { fill: var(--koralle-dunkel) !important; stroke: var(--koralle-dunkel) !important; }
.wk-zaehllegende { margin: var(--abstand-2) 0 0; font-size: var(--text-s); color: var(--schrift-leise); }
.wissen-visual-timeline .wissen-visual-bild { overflow: visible; }
.wk-ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wk-ablauf li { display: flex; align-items: flex-start; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rundung-klein); background: var(--flaeche); font-weight: 700; }
.wk-ablauf-nr { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%; color: #fff; background: var(--petrol); font-size: var(--text-s); }

/* ------------------------------------------------------ Medienrahmen */
.wk-medium { min-width: 0; margin: var(--abstand-4) 0; padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche-leise); }
.wk-medium-titel { margin: 0 0 var(--abstand-3); font-weight: 800; }
.wk-kontext { margin: var(--abstand-3) 0 0; }

/* Groove-Raster: nur die Tabelle scrollt waagerecht, nie die Seite. */
.wk-raster-huelle { max-width: 100%; overflow-x: auto; }
.wk-raster { border-collapse: separate; border-spacing: 2px; font-size: var(--text-s); }
.wk-raster caption { text-align: left; font-weight: 700; padding-bottom: var(--abstand-1); color: var(--schrift-leise); }
.wk-raster th, .wk-raster td { min-width: 1.75rem; height: 2rem; padding: 0; text-align: center; }
.wk-raster-ecke, .wk-raster-instrument { min-width: 7rem; padding-right: var(--abstand-2) !important; text-align: left !important; white-space: nowrap; }
.wk-raster-instrument { display: flex; align-items: center; gap: var(--abstand-2); font-weight: 700; }
.wk-raster-zaehl { color: var(--schrift-leise); font-weight: 400; }
.wk-raster-zaehl.wk-raster-schlag { color: var(--schrift); font-weight: 800; }
.wk-raster-zelle { border-radius: 6px; background: var(--flaeche); }
.wk-raster-zelle.wk-raster-schlag { background: var(--fell-dunkel); }
.wk-raster-taktanfang { border-left: 2px solid var(--rand-stark); }
.wk-raster .wk-klingt { outline: 3px solid var(--koralle); outline-offset: -2px; }
.wk-raster-zaehl.wk-klingt { color: var(--koralle-dunkel); }
.wk-schlag { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
.wk-schlag-akzent { width: 1.1rem; height: 1.1rem; box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px currentColor; }
.wk-schlag-geist { width: 0.5rem; height: 0.5rem; opacity: 0.7; }
.wk-schlag-offen { background: transparent; border: 3px solid currentColor; }
.wk-farbe { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; background: currentColor; }
.wk-farbe-hihat, .wk-farbe-hihat-fuss { color: var(--sonne-dunkel); }
.wk-farbe-ride, .wk-farbe-ride-glocke, .wk-farbe-crash { color: var(--beere-dunkel); }
.wk-farbe-snare, .wk-farbe-cross-stick { color: var(--koralle-dunkel); }
.wk-farbe-bassdrum { color: var(--petrol-dunkel); }
.wk-farbe-tom-hoch, .wk-farbe-tom-mittel, .wk-farbe-standtom { color: var(--himmel-dunkel); }
.wk-farbe-cowbell, .wk-farbe-clave, .wk-farbe-shaker { color: var(--mint-dunkel); }
.wk-raster-legende { margin: var(--abstand-2) 0; font-size: var(--text-s); color: var(--schrift-leise); }
.wk-instrumentlegende { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); margin: var(--abstand-2) 0 0; padding: 0; list-style: none; font-size: var(--text-s); }
.wk-instrumentlegende li { display: inline-flex; align-items: center; gap: var(--abstand-1); }

/* Drumset von oben */
.wk-drumset-svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.wk-ds-teil circle, .wk-ds-teil rect { fill: var(--fell-dunkel); stroke: #b9ad95; stroke-width: 2; }
.wk-ds-becken circle:first-child { fill: #f3e6c4; }
.wk-ds-linie { fill: none !important; stroke-width: 1.2 !important; }
.wk-ds-mitte { fill: #b9ad95 !important; }
.wk-ds-text { fill: var(--schrift); font: 700 12px var(--schrift-text); pointer-events: none; }
.wk-ds-hervor circle, .wk-ds-hervor rect { fill: var(--sonne-hell); stroke: var(--petrol); stroke-width: 4; }
.wk-ds-hervor .wk-ds-linie { stroke: var(--petrol); }
.wk-ds-glied circle { stroke: #fff; stroke-width: 2; }
.wk-ds-glied text, .wk-ds-nummer text { fill: #fff; font: 800 11px var(--schrift-text); }
.wk-ds-glied-RH circle, .wk-glied-marke.wk-ds-glied-RH { fill: var(--petrol-dunkel); background: var(--petrol-dunkel); }
.wk-ds-glied-LH circle, .wk-glied-marke.wk-ds-glied-LH { fill: var(--koralle-dunkel); background: var(--koralle-dunkel); }
.wk-ds-glied-RF circle, .wk-glied-marke.wk-ds-glied-RF { fill: var(--himmel-dunkel); background: var(--himmel-dunkel); }
.wk-ds-glied-LF circle, .wk-glied-marke.wk-ds-glied-LF { fill: var(--beere-dunkel); background: var(--beere-dunkel); }
.wk-ds-nummer circle, .wk-ds-nummer-marke { fill: var(--sonne-dunkel); background: var(--sonne-dunkel); }
.wk-drumset-legende { display: grid; gap: var(--abstand-1); margin: var(--abstand-3) 0 0; padding: 0; list-style: none; }
.wk-glied-marke { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.5rem; padding: 0 0.3rem; border-radius: var(--rundung-pille); color: #fff; font-size: var(--text-xs); font-weight: 800; }

/* Stockweg */
.wk-stockweg-rolle { max-width: 100%; overflow-x: auto; }
.wk-stockweg-svg { display: block; min-width: 16rem; max-width: 100%; height: auto; }
.wk-sw-fell { stroke: var(--schrift); stroke-width: 3; }
.wk-sw-achse { fill: var(--schrift-leise); font: 11px var(--schrift-text); }
.wk-sw-weg { stroke: currentColor; stroke-width: 3; }
.wk-sw-rueck { stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 5 4; }
.wk-sw-start, .wk-sw-ende { fill: currentColor; }
.wk-sw-pfeilspitze { fill: context-stroke; }
.wk-sw-rechts { color: var(--petrol-dunkel); }
.wk-sw-links { color: var(--koralle-dunkel); }
.wk-sw-art { fill: var(--schrift); font: 800 13px var(--schrift-text); }
.wk-sw-hand { fill: currentColor; font: 800 14px var(--schrift-text); }
.wk-sw-zaehl { fill: var(--schrift-leise); font: 12px var(--schrift-text); }
.wk-stockweg-legende { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--abstand-1) var(--abstand-3); margin: var(--abstand-3) 0 0; font-size: var(--text-s); }
.wk-stockweg-legende dt { font-weight: 800; }
.wk-stockweg-legende dd { margin: 0; }

/* Schrittfolge */
.wk-schritte { display: grid; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.wk-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--abstand-3); padding: var(--abstand-3); border-radius: var(--rundung-klein); background: var(--flaeche); transition: opacity 0.2s; }
.wk-schritt-nr { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--petrol); font-weight: 800; }
.wk-schritt-inhalt { min-width: 0; }
.wk-schritt-inhalt p { margin: var(--abstand-1) 0 0; }
.wk-symbol { float: right; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--petrol-dunkel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk-schritte-einzeln .wk-schritt:not([aria-current="step"]) { opacity: 0.35; }
.wk-schritte-einzeln .wk-schritt[aria-current="step"] { outline: 3px solid var(--sonne); }
.wk-schrittsteuerung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin-top: var(--abstand-3); }
.wk-schrittstand { font-weight: 700; font-size: var(--text-s); }

/* Richtig/Falsch-Vergleich und Checkliste */
.wk-vergleich-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--abstand-3); }
.wk-vergleich-seite { margin: 0; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--rundung-klein); box-shadow: none; }
.wk-vergleich-seite h5 { display: flex; align-items: center; gap: var(--abstand-2); margin: 0 0 var(--abstand-2); font-size: var(--text-m); }
.wk-vergleich-seite ul { margin: 0; padding-left: 1.2rem; }
.wk-vergleich-falsch { border: 2px solid var(--koralle); background: var(--koralle-hell); }
.wk-vergleich-richtig { border: 2px solid var(--mint); background: var(--mint-hell); }
.wk-vergleich-zeichen { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: #fff; font-weight: 800; }
.wk-vergleich-falsch .wk-vergleich-zeichen { background: var(--koralle-dunkel); }
.wk-vergleich-richtig .wk-vergleich-zeichen { background: var(--mint-dunkel); }
.wk-checkliste-punkte { display: grid; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.wk-checkliste-punkte label { display: flex; align-items: flex-start; gap: var(--abstand-2); min-height: var(--klickflaeche); }
.wk-checkliste-punkte input { margin-top: 0.3rem; flex: none; }
.wk-checkliste-stand { margin: var(--abstand-2) 0 0; font-weight: 700; }
.wk-checkliste[data-vollstaendig="true"] .wk-checkliste-stand { color: var(--gut); }

/* Rhythmusbaustein mit sichtbarem Raster */
.wk-rhythmus-raster { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin: var(--abstand-2) 0; padding: 0; list-style: none; }
.wk-rhythmus-zelle { display: grid; place-items: end center; width: 2rem; height: calc(1.1rem + var(--staerke, 0.5) * 1.9rem); border-radius: 6px 6px 3px 3px; background: var(--himmel); }
.wk-rhythmus-laut { background: var(--petrol-dunkel); }
.wk-rhythmus-stumm { height: 1.1rem; background: transparent; border: 2px dashed var(--rand-stark); }
.wk-rhythmus-nr { font-size: var(--text-xs); font-weight: 800; color: #fff; padding-bottom: 2px; }
.wk-rhythmus-stumm .wk-rhythmus-nr { color: var(--schrift-leise); }
.wk-rhythmus-zelle.wk-klingt { outline: 3px solid var(--koralle); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .wk-schritt { transition: none; } }
@media print {
  .ws-leiste, .ws-nebenzugang, .le-sprungleiste, .wk-abspieler, .le-niveau-aendern, .wissen-detail-kopf, .wissen-detail-nav { display: none !important; }
  .le-vertiefen { display: block; }
}

/* Globale Kartenregeln aus stil.css (jede section und jedes details ist eine Karte)
 * würden hier Karten in Karten erzeugen. Innerhalb der Übersicht und der
 * Lerneinheit sind Abschnitte deshalb schlicht; die Karte ist die Übersichtskarte. */
.ws-uebersicht section, .wissen-detail section.le-abschnitt, .le-lehrkraftrueckmeldung {
  padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.ws-uebersicht { padding: clamp(1rem, 2.5vw, 2rem); }
.ws-karte-titel, .ws-unterbereich > h3, .ws-lernwege > h3, .wo-panel h3, .ws-block h3 {
  margin: 0; font-family: var(--schrift-text); font-size: var(--text-l); font-weight: 800; color: var(--schrift);
  text-transform: none; letter-spacing: 0;
}
.ws-unterbereich > h3 { margin-bottom: var(--abstand-3); }
.ws-karte-gross .ws-karte-titel { font-family: var(--schrift-anzeige); font-size: clamp(1.25rem, 3vw, 1.6rem); }
.ws-suche label { display: block; }
.ws-suche-feld input { width: 100%; }
.le-abschnitt { border-top: 2px solid var(--rand) !important; padding-top: var(--abstand-4) !important; margin-bottom: var(--abstand-6) !important; }
.wk-vergleich-seite { box-shadow: none; }
/* Der Artikel bekommt den Fokus nur programmatisch beim Öffnen; sichtbar fokussiert werden die Abschnittsüberschriften. */
#wissen-karte-inhalt:focus { outline: none; }
.wissen-kontrolle { border-color: var(--rand); background: var(--flaeche); }
.wk-abspieler { border-radius: var(--rundung); }
.wk-abspieler-laut { flex-direction: row; color: var(--schrift); }
.wk-takt { flex: 0 1 auto; width: min(100%, calc(var(--takt-breite, 18rem) * 1.45)); }
/* Ablaufschritte: alte Zeitleistenstile (zentriert, Pfeil davor) gelten hier nicht. */
.wissen-visual-timeline .wk-ablauf li { flex: none; text-align: left; overflow-wrap: anywhere; }
.wissen-visual-timeline .wk-ablauf li + li::before { content: none; }
.wk-ablauf { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.wk-ds-text { font-size: 11.5px; }
.wissen-unvollstaendig { padding: var(--abstand-3) var(--abstand-4); border: 2px solid var(--koralle); border-radius: var(--rundung); background: var(--koralle-hell); }
.wissen-unvollstaendig ul { margin: var(--abstand-2) 0; padding-left: 1.2rem; }
/* Die Zeitangabe ist jetzt aufklappbar; die alten Kachelregeln der Zeitleiste gelten nicht mehr. */
.le-kopf .le-zeit { display: block; }
.le-kopf .le-zeit li { display: block; min-width: 0; padding: 0; border: 0; background: none; }
.wk-ablauf li, .wk-ablauf-text { min-width: 0; overflow-wrap: anywhere; }
.wissen-visual { min-width: 0; max-width: 100%; }
.wissen-visual-timeline ol.wk-ablauf { display: grid; }
/* Rasterkinder dürfen schmaler werden als ihr Inhalt; breite Bausteine rollen dann in ihrer eigenen Hülle. */
.le-kontrolle, .le-uebung, .le-angeleitet, .le-transfer, .le-fragen, .le-ueben-inhalt, .le-erfolgskontrolle, .le-schwerer, .le-zentral, .le-vertiefen, .le-vertiefen-inhalt, .le-vertiefen-fest, .wk-medium { min-width: 0; max-width: 100%; }
.wk-checkliste-punkte label, .le-arbeitsschritte label, .le-selbstkontrolle, .ws-filter-kasten { white-space: normal; min-width: 0; }
.wk-checkliste-punkte label span, .le-arbeitsschritte label span, .le-selbstkontrolle span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }