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("berechnenBtn");

  btn.addEventListener("click", () => {
    const punkteInput = document.getElementById("punkte");
    const maxPunkteInput = document.getElementById("maxPunkte");
    const punkte = Number(punkteInput.value);
    const maxPunkte = Number(maxPunkteInput.value);

    // Eingabeprüfung
    const punkteValid = punkteInput.value !== "" && punkte >= 0 && punkte <= maxPunkte;
    const maxValid = maxPunkteInput.value !== "" && maxPunkte > 0;

    punkteInput.style.borderColor = punkteValid ? "" : "red";
    maxPunkteInput.style.borderColor = maxValid ? "" : "red";

    if (!punkteValid || !maxValid) {
      document.getElementById("ergebnisText").textContent = "Bitte gültige Werte eingeben!";
      document.getElementById("ergebnis").style.display = "block";
      document.getElementById("balken").style.width = "0%";
      return;
    }

    const prozent = Math.round((punkte / maxPunkte) * 100);
    const note = berechneNote(prozent);
    const ergebnisText = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;

    console.log(ergebnisText);

    // Ergebnis anzeigen
    document.getElementById("ergebnisText").textContent = ergebnisText;
    document.getElementById("ergebnis").style.display = "block";

    // Balken
    const balken = document.getElementById("balken");
    balken.style.width = prozent + "%";
    if (prozent >= 75) {
      balken.style.backgroundColor = "#22c55e"; // grün
    } else if (prozent >= 50) {
      balken.style.backgroundColor = "#f59e0b"; // orange
    } else {
      balken.style.backgroundColor = "#ef4444"; // rot
    }
  });
});