function berechneNote(prozent) {
  if (prozent >= 90) return "sehr gut";
  if (prozent >= 75) return "gut";
  if (prozent >= 60) return "befriedigend";
  if (prozent >= 50) return "ausreichend";
  return "nicht bestanden";
}

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("berechnen-btn");

  btn.addEventListener("click", () => {
    const inputPunkte = document.getElementById("punkte");
    const inputMax = document.getElementById("maxPunkte");
    const ergebnis = document.getElementById("ergebnis");
    const balken = document.getElementById("balken");

    const punkte = Number(inputPunkte.value);
    const maxPunkte = Number(inputMax.value);

    // Eingabeprüfung
    const isValid = inputPunkte.value !== "" && inputMax.value !== ""
                    && !isNaN(punkte) && !isNaN(maxPunkte)
                    && punkte <= maxPunkte && maxPunkte > 0;

    inputPunkte.style.borderColor = isValid ? "" : "red";
    inputMax.style.borderColor = isValid ? "" : "red";

    if (!isValid) {
      ergebnis.textContent = "Bitte gültige Werte eingeben.";
      balken.style.width = "0%";
      return;
    }

    // Berechnung
    const prozent = Math.round((punkte / maxPunkte) * 100);
    const note = berechneNote(prozent);

    // Ausgabe
    ergebnis.textContent = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;

    // Balken
    balken.style.width = prozent + "%";
    if (prozent >= 75) {
      balken.style.backgroundColor = "green";
    } else if (prozent >= 50) {
      balken.style.backgroundColor = "orange";
    } else {
      balken.style.backgroundColor = "red";
    }
  });
});