document.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("punkte");
  const button = document.getElementById("berechnen");
  const ergebnis = document.getElementById("ergebnis");
  const balken = document.getElementById("balken");

  // -----------------------------
  // Notenrechner Logik
  // -----------------------------
  function berechneNote() {
    const value = input.value.trim();
    const zahl = Number(value);

    const isValid =
      value !== "" &&
      !Number.isNaN(zahl) &&
      zahl >= 0 &&
      zahl <= 100;

    // Eingabeprüfung
    input.style.borderColor = isValid ? "" : "red";

    if (!isValid) {
      ergebnis.textContent =
        "Bitte eine gültige Punktzahl zwischen 0 und 100 eingeben.";
      balken.style.width = "0";
      balken.style.backgroundColor = "transparent";
      return;
    }

    const prozent = zahl;
    let note;

    if (prozent >= 90) note = "sehr gut";
    else if (prozent >= 75) note = "gut";
    else if (prozent >= 60) note = "befriedigend";
    else if (prozent >= 50) note = "ausreichend";
    else note = "nicht bestanden";

    ergebnis.textContent = `Punkte: ${zahl} (${prozent}%) – Note: ${note}`;

    // Balken aktualisieren
    balken.style.width = prozent + "%";

    if (prozent >= 75) balken.style.backgroundColor = "green";
    else if (prozent >= 50) balken.style.backgroundColor = "orange";
    else balken.style.backgroundColor = "red";
  }

  if (button) {
    button.addEventListener("click", berechneNote);
  }
});