/* Schülerseite – Fassung v21 (20.10.2026, Ergebnisbild unter dem Notenbild statt der Tastatur)
   Querformat. Links Bild und Tastatur, rechts der Text des Agenten.
   Bilder werden nie verzerrt (Seitenverhältnis bleibt immer erhalten). */
:root {
  --tinte: #232323; --grau: #6b6b6b; --grund: #f7f5f0; --linie: #e2dfd8;
  --gruen: #2f6b4f; --kamin: #a33b2a; --gelb: #ffc400;
  --hellgruen: #ddf0e4; --hellgruen-rand: #9ccbae;
  --hellrot: #f6e0db; --hellrot-rand: #d9a497;
  --inaktiv: #fbfaf8; --inaktiv-rand: #eceae5; --inaktiv-schrift: #d3d0c9;
  --falsch: #c62828; --falsch-hell: #ffd9d4;   /* Markierung im Ergebnisbild: falscher Ton */
  --fehlt: #1565c0; --fehlt-hell: #d6e6fa;     /* Markierung im Ergebnisbild: fehlender Ton */
  --textbreite: 340px;   /* Breite der Textspalte rechts */
  /* Höhe der Tastatur: wächst mit der linken Spalte (Bildfläche + Tastatur), nie kleiner als 110 px
     (Tablet), nie größer als 260 px. 20cqh = 20 % der Spaltenhöhe, 11cqw = 11 % der Spaltenbreite;
     es gilt der kleinere Wert. Soll die Tastatur stärker oder schwächer wachsen: nur diese Zeile ändern. */
  --tastaturhoehe: clamp(110px, min(20cqh, 11cqw), 260px);
  --bildrand: 38px;       /* Abstand oben und unten bei großen Bildern (Medien), ca. 1 cm */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; font-size: 18px;
  color: var(--tinte); background: var(--grund);
}
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Kopfzeile (kompakt) ---------- */
.kopf {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 4px 16px; background: #fff; border-bottom: 2px solid var(--linie);
}
.ort { min-width: 0; }
.ort h1 { font-size: 18px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klein { font-size: 13px; color: var(--grau); }
#titel { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.system { display: flex; align-items: center; gap: 10px; }
.rund {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #bdb9b0; background: #fff; display: grid; place-items: center; padding: 0;
}
.rund svg { width: 18px; height: 18px; fill: var(--tinte); }
.rund.an { background: #fff3c4; border-color: #d4a800; }
.rund:disabled { opacity: .3; cursor: default; }
.schalter {
  border: 1.5px solid #bdb9b0; background: #fff; border-radius: 8px;
  padding: 4px 10px; font-size: 14px; color: var(--tinte);
}
.schalter.an { background: #efede7; color: var(--grau); }

/* Sterne als Symbole */
.sterne {
  justify-self: end; border: none; background: none; padding: 0;
  display: flex; align-items: center; gap: 2px; min-height: 40px;
}
.sterne .stern { font-size: 32px; line-height: 1; }
.sterne .stern.voll { color: var(--gelb); -webkit-text-stroke: 1.5px #222; }
.sterne .stern.leer { color: transparent; -webkit-text-stroke: 1.5px #c9c5bc; }
.sterne.aus { opacity: .15; }

/* ---------- Anzeigefläche ---------- */
.flaeche {
  flex: 1; min-height: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--textbreite);
  gap: 16px; padding: 12px 16px;
}
.flaeche.ohne-rechts { grid-template-columns: minmax(0, 1fr) 0; gap: 0; }
.flaeche.ohne-rechts .rechts { display: none; }

.start {
  position: absolute; inset: 0; z-index: 2; background: var(--grund);
  display: grid; place-items: center;
}
#btn-start {
  font-size: 22px; padding: 18px 34px; border: none; border-radius: 12px;
  background: var(--gruen); color: #fff;
}

/* Linke Spalte: Bild füllt den Platz, Tastatur darunter (Höhe siehe --tastaturhoehe) */
.links { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.bild {
  flex: 1 1 0; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;   /* kein Strecken */
}
/* Bild so groß wie möglich, Seitenverhältnis bleibt immer erhalten */
.bild img, .bild video {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; background: transparent; border: none; padding: 0;
}
.tastatur { flex: 0 0 auto; display: flex; justify-content: center; }
.tastatur svg { height: var(--tastaturhoehe); width: auto; max-width: 100%; display: block; }
/* Große Bilder (Medien): oben und unten Abstand, Seitenverhältnis bleibt */
.bild:has(#medium-bild:not([hidden])), .bild:has(#medium-video:not([hidden])) { padding: var(--bildrand) 0; }
/* Testmodus: Größe der Bildfläche anzeigen */
.bildmass { position: absolute; right: 4px; bottom: 2px; font-size: 12px; color: #9a968d; pointer-events: none; }

/* Ergebnisbild (Korrekturbild): unter dem Notenbild statt der Tastatur, etwas kleiner.
   Noten aus der MusicXML, falsche Töne rot, fehlende Töne blau markiert; bei „C1 anschlagen“ eine Tastatur. */
.korrekturbild { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.korrekturbild svg { width: 92%; height: auto; max-height: 42cqh; display: block; }
.korrekturbild.tasten svg { width: 70%; max-height: 30cqh; }
.links:has(.korrekturbild:not([hidden])) { padding-bottom: 15px; }
.korrekturbild g.falsch { fill: var(--falsch); stroke: var(--falsch); color: var(--falsch); }
.korrekturbild .markierung { fill: var(--falsch-hell); stroke: var(--falsch); stroke-width: 20; }
.korrekturbild g.fehlt { fill: var(--fehlt); stroke: var(--fehlt); color: var(--fehlt); }
.korrekturbild .markierung.fehlt { fill: var(--fehlt-hell); stroke: var(--fehlt); }

.wiederholung-hinweis {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  background: var(--hellgruen); border-radius: 8px; padding: 6px 14px; font-weight: bold;
}

/* Rechte Spalte: Text des Agenten */
.rechts { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.textzeile {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--linie); border-radius: 10px; padding: 12px 14px;
}
.textzeile { display: flex; flex-direction: column; }
.textzeile p { margin: auto 0; font-size: 17px; line-height: 1.45; color: var(--grau); white-space: pre-line; }
.textzeile p b { color: #7a5a00; }
.klein-knopf {
  border: 1.5px solid #bdb9b0; background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 15px;
}
.test {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; color: var(--grau); border: 1.5px dashed #bdb9b0; border-radius: 8px; padding: 8px 10px;
}
/* Eigene Aufnahme anhören: unauffälliger Nebenknopf unter dem Text */
.eigene-aufnahme { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eigene-knopf { padding: 8px 14px; font-size: 16px; }
.eigene-knopf.spielt { background: #efede7; }
#aufnahme-speichern { color: var(--gruen); }

/* ---------- Knopfleiste ---------- */
.leiste { display: flex; gap: 16px; padding: 12px 16px; background: #efede7; }
.luecke { flex: 1; }
.k {
  min-width: 190px; min-height: 60px; padding: 6px 18px; border-radius: 12px;
  border: 2px solid #8c8a84; background: #fff; color: var(--tinte); font-size: 20px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
}
.k small { font-size: 13px; color: #4f7a60; }
.k.wiederholen { background: var(--hellgruen); border-color: var(--hellgruen-rand); }
.k.rueckfrage  { background: var(--hellrot);   border-color: var(--hellrot-rand); }
.k.aufnahme    { background: var(--kamin); border-color: var(--kamin); color: #fff; font-weight: bold; flex-direction: row; gap: 12px; }
.k.aufnahme .punkt { width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.k.aufnahme.laeuft .punkt { border-radius: 2px; }
.k.weiter      { background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: bold; }
.k.trotzdem    { background: #fff; border-color: #8c8a84; color: var(--tinte); font-weight: normal; }
.k:disabled, .k:disabled small {
  background: var(--inaktiv) !important; border-color: var(--inaktiv-rand) !important;
  color: var(--inaktiv-schrift) !important; cursor: default;
}
.k:disabled .punkt { background: var(--inaktiv-schrift); }

/* ---------- Ebenen (Liste, Rückfrage, Sicherheitsfrage) ---------- */
.ebene {
  position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fenster {
  background: #fff; border-radius: 12px; padding: 18px 24px; width: min(1100px, 100%);
  max-height: 90vh; overflow: auto; border: 2px solid var(--hellgruen-rand);
}
.fenster.schmal { width: min(520px, 100%); }
.fenster-kopf { display: flex; justify-content: space-between; align-items: center; }
.fenster h2 { margin: 6px 0; font-size: 22px; }
.letzte {
  width: 100%; text-align: left; margin: 8px 0 12px; padding: 10px 16px;
  border: none; border-radius: 8px; background: var(--hellgruen); font-weight: bold;
}
.einheit { font-weight: bold; margin: 14px 0 4px; }
.abschnitt { color: var(--grau); font-weight: bold; font-size: 15px; margin: 8px 0 4px 12px; }
.eintrag {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 12px; padding: 4px 10px;
  border-radius: 6px; font-size: 16px;
}
.eintrag-text { flex: 1; }
.eintrag .klein-knopf { padding: 3px 10px; font-size: 14px; }
.eintrag:hover { background: #f1efea; }
.eintrag.hier { background: var(--hellgruen); font-weight: bold; }
.marke { font-size: 13px; color: var(--grau); border: 1px solid #ccc8bf; border-radius: 6px; padding: 1px 6px; margin-left: 6px; font-weight: normal; }
.marke.offen { color: var(--kamin); border-color: var(--hellrot-rand); background: var(--hellrot); }
textarea { width: 100%; font: inherit; padding: 10px; border-radius: 8px; border: 1.5px solid #bdb9b0; }
.zeile { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* Noten und Tastatur organisch verteilt
   - unter der Tastatur fester Abstand (15 px)
   - oben und zwischen Noten und Tastatur gleich viel Platz, mindestens ca. 1 cm (38 px) */
.links { container-type: size; }
.links:has(.tastatur:not([hidden])) { gap: 0; padding-bottom: 15px; }
.links:has(.tastatur:not([hidden])) .bild { flex: 0 1 auto; margin-top: auto; }
.links:has(.tastatur:not([hidden])) .tastatur { margin-top: auto; }
.links:has(.tastatur:not([hidden])) .bild img {
  width: 100%; height: auto; object-fit: contain;
  max-height: calc(100cqh - var(--tastaturhoehe) - 15px - 2 * var(--bildrand));
}