const fragen = [
  {
    frage: "Was ist Cyanotypie?",
    antworten: [
      "Ein digitales Bildbearbeitungsverfahren",
      "Ein historisches fotografisches Druckverfahren",
      "Eine Mal-Technik mit Wasserfarben"
    ],
    richtig: 1
  }
];

document.addEventListener("DOMContentLoaded", () => {
  const quiz = document.getElementById("quiz");

  const f = fragen[0];
  quiz.innerHTML = `
    <div class="quiz-frage">
      <p class="frage-text">${f.frage}</p>
      <div class="antworten">
        ${f.antworten.map((a, i) => `
          <button class="quiz-btn" data-index="${i}">${a}</button>
        `).join("")}
      </div>
      <p id="feedback" class="feedback"></p>
    </div>
  `;

  document.querySelectorAll(".quiz-btn").forEach(btn => {
    btn.addEventListener("click", (e) => {
      const gewählt = Number(e.target.dataset.index);
      const feedback = document.getElementById("feedback");

      if (gewählt === f.richtig) {
        feedback.textContent = "✅ Richtig!";
        feedback.style.color = "#16a34a";
      } else {
        feedback.textContent = "❌ Falsch!";
        feedback.style.color = "#ef4444";
      }

      document.querySelectorAll(".quiz-btn").forEach(b => b.disabled = true);
    });
  });
});