feat: orakil.de — 8-ball Orakel mit 30 vagen Sprüchen

- Input nicht mehr readonly, Frage eingeben + Enter
- Smooth crossfade statt position-swap bei Prophecies
- 8-ball Mechanik: zufälliger mystischer Orakelspruch als Antwort
- Shake-Animation beim Antworten

sites/orakil.de/index.html

@@ -213,11 +213,61 @@
       position: absolute;
       opacity: 0;
       transition: opacity 1.2s ease;
+      pointer-events: none;
     }
 
     .prophecy.active {
       opacity: 1;
-      position: relative;
+      pointer-events: auto;
+    }
+
+    /* 8-ball answer */
+    .answer-container {
+      margin-top: 60px;
+      min-height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: fadeIn 1.5s ease 1.8s forwards;
+      opacity: 0;
+    }
+
+    .answer-text {
+      font-family: 'Cinzel', serif;
+      font-size: clamp(1rem, 2.5vw, 1.3rem);
+      color: var(--gold);
+      font-style: italic;
+      letter-spacing: 0.04em;
+      line-height: 1.7;
+      max-width: 540px;
+      text-align: center;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.8s ease, transform 0.8s ease;
+    }
+
+    .answer-text.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .answer-text.fading {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+
+    /* Shake animation for the orb */
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      15% { transform: translateX(-4px) rotate(-1deg); }
+      30% { transform: translateX(3px) rotate(1deg); }
+      45% { transform: translateX(-2px); }
+      60% { transform: translateX(2px); }
+      75% { transform: translateX(-1px); }
+    }
+
+    .oracle-title.shaking {
+      animation: shake 0.6s ease;
     }
 
     /* Decorative elements */
@@ -286,7 +336,7 @@
     <p class="oracle-subtitle">Das Orakel wei&szlig;. Frag.</p>
 
     <div class="question-container">
-      <input type="text" class="question-field" placeholder="Stelle deine Frage..." readonly>
+      <input type="text" class="question-field" placeholder="Stelle deine Frage..." autocomplete="off">
       <div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
     </div>
 
@@ -296,19 +346,108 @@
       <p class="prophecy">Das Orakel sieht alles. Auch deine Cookies.</p>
       <p class="prophecy">Nicht jede Frage verdient einen Token.</p>
     </div>
+
+    <div class="answer-container">
+      <p class="answer-text"></p>
+    </div>
   </section>
 
   <div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
 
   <script>
     (function() {
+      // Rotating ambient prophecies
       var prophecies = document.querySelectorAll('.prophecy');
       var current = 0;
-      setInterval(function() {
+      var ambientTimer = setInterval(function() {
         prophecies[current].classList.remove('active');
         current = (current + 1) % prophecies.length;
         prophecies[current].classList.add('active');
       }, 5000);
+
+      // 8-ball answers
+      var answers = [
+        'Die Sterne sagen: Ja. Aber die Sterne sagen viel.',
+        'Das Orakel schweigt. Das ist auch eine Antwort.',
+        'Du wirst bekommen, was du verdienst. Deute das selbst.',
+        'Die Zeichen stehen auf... irgendetwas.',
+        'Frag nochmal, wenn Merkur nicht mehr ruecklaefig ist.',
+        'Es wird geschehen. Oder auch nicht. Beides ist moeglich.',
+        'Die Antwort liegt in dir. Das Orakel hat Pause.',
+        'Ein klares Ja. Oder ein deutliches Nein. Definitiv eines von beiden.',
+        'Die Sterne raunen: Vielleicht.',
+        'Das Universum sagt: Kommt drauf an.',
+        'Dein drittes Auge muesste das eigentlich wissen.',
+        'Die Karten zeigen... noch eine Karte.',
+        'Jupiter steht guenstig. Fuer was, sagt er nicht.',
+        'Das Schicksal hat deine Anfrage erhalten. Bitte warten.',
+        'Die kosmische Antwort: 42. Wie immer.',
+        'Du stellst die falsche Frage. Aber die Antwort ist trotzdem Ja.',
+        'Die Kristallkugel buffert gerade.',
+        'Alles deutet darauf hin, dass alles auf alles deutet.',
+        'Vertrau dem Prozess. Welchem, ist egal.',
+        'Ein Fremder wird dein Leben veraendern. Oder auch nicht. Fremde halt.',
+        'Die Venus sagt Ja. Der Saturn sagt Nein. Klassiker.',
+        'Das Orakel sieht grosse Veraenderungen. Wie jede Woche.',
+        'Dein Energiefeld sagt: Frag spaeter nochmal.',
+        'Die Antwort ist offensichtlich. Nur nicht fuer dich.',
+        'Mond im siebten Haus. Das bedeutet... Dinge.',
+        'Es gibt Zeichen. Ob sie fuer dich sind, ist unklar.',
+        'Das Orakel empfiehlt: Muenze werfen.',
+        'Kosmisch gesehen: Laeuft.',
+        'Die Sterne haben gerade andere Sorgen.',
+        'Alles wird gut. Oder zumindest wird alles.',
+      ];
+
+      var field = document.querySelector('.question-field');
+      var answerEl = document.querySelector('.answer-text');
+      var title = document.querySelector('.oracle-title');
+      var lastAnswer = -1;
+
+      function getRandomAnswer() {
+        var idx;
+        do {
+          idx = Math.floor(Math.random() * answers.length);
+        } while (idx === lastAnswer && answers.length > 1);
+        lastAnswer = idx;
+        return answers[idx];
+      }
+
+      function showAnswer() {
+        if (!field.value.trim()) return;
+
+        // Shake the title
+        title.classList.remove('shaking');
+        void title.offsetWidth;
+        title.classList.add('shaking');
+
+        // Hide prophecies
+        prophecies[current].classList.remove('active');
+        clearInterval(ambientTimer);
+
+        // Fade out old answer
+        answerEl.classList.remove('visible');
+        answerEl.classList.add('fading');
+
+        setTimeout(function() {
+          answerEl.textContent = getRandomAnswer();
+          answerEl.classList.remove('fading');
+          // Trigger reflow for transition
+          void answerEl.offsetWidth;
+          answerEl.classList.add('visible');
+        }, 400);
+
+        // Clear and refocus
+        field.value = '';
+        field.placeholder = 'Frag erneut...';
+      }
+
+      field.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          showAnswer();
+        }
+      });
     })();
   </script>