/*
 * Wissenskarten und Groove des Tages (musikwissen.js). Nutzt die Farb- und
 * Schriftmarken aus stil.css; die Schuelerseite bindet stil.css ebenfalls ein.
 */

.wissensreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.wissenskarte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}

.wissenskarte-kopf { display: flex; align-items: center; gap: 0.55rem; }
.wissenskarte-symbol { width: 1.9rem; height: 1.9rem; flex: none; }
.wissenskarte-symbol .flaeche { fill: var(--gold-hell); stroke: var(--messing); stroke-width: 1.6; }
.wissenskarte-symbol .strich { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wissenskarte-symbol .strich-voll { fill: currentColor; stroke: none; }

.wissenskarte-art {
  flex: 1;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.art-witz .wissenskarte-kopf { color: var(--kirsch); }
.art-zitat .wissenskarte-kopf { color: var(--holz); }
.art-wissen .wissenskarte-kopf { color: var(--gold-dunkel); }
.art-begriff .wissenskarte-kopf { color: #3f6b4a; }
.art-rudiment .wissenskarte-kopf { color: var(--kirsch); }

.wissenskarte-weiter {
  min-height: 2.2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche-leise);
  color: var(--schrift-leise);
  font-size: 0.8rem;
  font-weight: 600;
}
.wissenskarte-weiter:hover { background: var(--gold-hell); color: var(--schrift); }

.wissenskarte-koerper { display: flex; flex-direction: column; gap: 0.55rem; }
.wissenskarte-text { margin: 0; line-height: 1.55; }
.wissenskarte-wort {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}
.wissenskarte-zitat { margin: 0; }
.wissenskarte-zitat p {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: 1.12rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}
.wissenskarte-beleg {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rand-stark);
  font-size: 0.8rem;
  color: var(--schrift-leise);
}

/* Handsatz des Rudiments: R und L unterscheiden sich in Farbe UND Buchstabe. */
.sticking { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.3rem; }
/*
 * Eine "Einheit" ist ein Hauptschlag plus sein optionaler Vorschlag (Flam/
 * Drag). Der Vorschlag sitzt DEUTLICH naeher am Hauptschlag (kleiner Gap
 * innerhalb der Einheit) als der Abstand zwischen zwei Einheiten - er ist
 * kein eigener, gleich langer Zaehlschritt, sondern haengt sich an den
 * folgenden Hauptschlag an.
 */
.schlag-einheit { display: flex; align-items: flex-end; gap: 0.05rem; }
.schlag {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.3rem;
  border-radius: 8px;
  font-family: var(--schrift-mono);
  font-weight: 700;
  transition: background 0.08s ease, color 0.08s ease;
}
.schlag.rechts { background: var(--holz); color: var(--fell); }
.schlag.links { background: var(--gold-hell); color: var(--holz-dunkel); box-shadow: inset 0 0 0 1px var(--messing); }
.schlag.akzent::before {
  content: ">";
  position: absolute;
  top: -1.05rem;
  font-size: 0.8rem;
  color: var(--kirsch);
}
.sticking:has(.akzent) { padding-top: 0.9rem; }
.schlag.jetzt { background: var(--kirsch); color: #fff; box-shadow: none; }

/*
 * Vorschlag (Grace Note): deutlich kleiner und leiser gefaerbt als ein
 * Hauptschlag, damit sofort erkennbar ist, dass es sich NICHT um einen
 * gleichwertigen, gleich langen Schlag handelt. Ein Flam hat eine, ein Drag
 * zwei dieser Einheiten. Kleingeschriebene Buchstaben ("r"/"l") statt
 * Grossbuchstaben unterstreichen den Unterschied zum Hauptschlag zusaetzlich.
 * `padding-right` laesst nur ganz wenig Platz fuer die Verbindungslinie -
 * absolut positioniert, damit sie keinen eigenen Flex-Abstand erzeugt. So
 * bleibt der Abstand vom Vorschlag zu SEINEM Hauptschlag kleiner als der
 * Abstand zwischen zwei Einheiten (Zaehlschritten) in `.sticking`.
 */
.vorschlag-gruppe { position: relative; display: flex; align-items: center; gap: 0.05rem; margin-bottom: 0.35rem; padding-right: 0.15rem; }
.vorschlag {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.2rem;
  border-radius: 5px;
  font-family: var(--schrift-mono);
  font-size: 0.62rem;
  font-weight: 700;
  transition: background 0.08s ease, color 0.08s ease;
}
/* Volle Textfarbe/Kontrast (kein opacity-Trick auf dem ganzen Element) -
   die Groesse und die Kleinschreibung reichen, um den Vorschlag optisch
   eindeutig vom Hauptschlag zu unterscheiden, ohne WCAG-Kontrast zu opfern. */
.vorschlag.rechts { background: var(--holz); color: var(--fell); }
.vorschlag.links { background: var(--gold-hell); color: var(--holz-dunkel); box-shadow: inset 0 0 0 1px var(--messing); }
.vorschlag-linie { position: absolute; right: -0.1rem; bottom: 0.15rem; width: 0.55rem; height: 0.4rem; overflow: visible; pointer-events: none; }
.vorschlag-linie path { fill: none; stroke: var(--rand-stark); stroke-width: 1.6; stroke-linecap: round; }
.vorschlag-gruppe.jetzt .vorschlag { background: var(--kirsch); color: #fff; box-shadow: none; }
.vorschlag-gruppe.jetzt .vorschlag-linie path { stroke: var(--kirsch); }

.rudiment-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rudiment-tempo { min-width: 4.8rem; text-align: center; font-family: var(--schrift-mono); font-size: 0.85rem; }
.tempoknopf {
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  border: 1px solid var(--rand-stark);
  border-radius: 50%;
  background: var(--flaeche);
  font-size: 1.1rem;
  font-weight: 700;
}

.abspielknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  border: none;
  border-radius: 999px;
  background: var(--messing);
  color: var(--tinte);
  font-weight: 700;
  cursor: pointer;
}
.abspielknopf:hover { background: var(--messing-hell); }
.abspielknopf:focus-visible { outline: 3px solid var(--kirsch); outline-offset: 2px; }
.abspiel-symbol {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--tinte);
}
.abspiel-symbol svg { width: 0.75rem; height: 0.75rem; fill: var(--messing-hell); }

/* --- Groove des Tages: dunkles Holz als "Instrument" auf der Seite ------------ */

.groove-karte {
  padding: 1.2rem 1.3rem 1.1rem;
  background: linear-gradient(150deg, var(--holz-hell) 0%, var(--holz) 50%, var(--holz-dunkel) 100%);
  color: var(--fell);
  border-radius: var(--rundung);
  box-shadow: 0 18px 40px -18px rgb(37 29 22 / 55%);
}
.groove-augenbraue {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing-hell);
}
.groove-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 0.8rem; }
.groove-name { font-family: var(--schrift-anzeige); font-size: 1.55rem; font-weight: 600; }
.groove-bpm { font-family: var(--schrift-mono); color: var(--messing-hell); }
.groove-tag { margin: 0.1rem 0 0.9rem; font-size: 0.82rem; color: rgb(236 227 210 / 72%); }
.groove-spielen { margin-bottom: 1rem; }
.groove-spielen:focus-visible { outline-color: var(--fell); }

.groove-grid {
  display: grid;
  grid-template-columns: 3.2rem repeat(16, minmax(0, 1fr));
  gap: 0.4rem 0.2rem;
  align-items: center;
}
.groove-label { font-size: 0.7rem; color: rgb(236 227 210 / 75%); }
.groove-grid .zelle {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgb(236 227 210 / 10%);
}
.groove-grid .zelle.takt { box-shadow: inset 0 0 0 1px rgb(236 227 210 / 28%); }
.groove-grid .zelle.an { background: var(--messing); box-shadow: none; }
.groove-grid .zelle.an.offen { background: var(--kirsch); }
.groove-grid .zelle.jetzt { background: rgb(236 227 210 / 45%); }
.groove-grid .zelle.an.jetzt { background: var(--fell); }
.groove-zaehlzeit {
  display: grid;
  grid-template-columns: 3.2rem repeat(16, minmax(0, 1fr));
  column-gap: 0.2rem;
  margin-top: 0.35rem;
}
.groove-zaehlzeit span:first-child { grid-column: 2; }
.groove-zaehlzeit span {
  font-family: var(--schrift-mono);
  font-size: 0.62rem;
  text-align: center;
  color: rgb(236 227 210 / 60%);
}
.groove-legende { margin: 0.7rem 0 0; font-size: 0.74rem; color: rgb(236 227 210 / 60%); }

@media (prefers-reduced-motion: reduce) {
  .schlag, .vorschlag { transition: none; }
}