fix: orakil.de — ein Hinweistext statt rotierende Prophecies, breiterer Antwortbereich

sites/orakil.de/index.html

@@ -190,41 +190,27 @@
       white-space: nowrap;
     }
 
-    /* Prophecies */
-    .prophecies {
-      margin-top: 80px;
-      min-height: 60px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      animation: fadeIn 1.5s ease 1.8s forwards;
-      opacity: 0;
-    }
-
-    .prophecy {
+    /* Hint text */
+    .hint {
+      margin-top: 48px;
       font-family: 'Cinzel', serif;
-      font-size: clamp(0.85rem, 2vw, 1.05rem);
-      color: var(--gold-dim);
+      font-size: clamp(0.8rem, 2vw, 1rem);
+      color: var(--text-muted);
       font-style: italic;
       letter-spacing: 0.04em;
       line-height: 1.7;
-      max-width: 540px;
       text-align: center;
-      position: absolute;
+      animation: fadeIn 2s ease 1.8s forwards;
       opacity: 0;
-      transition: opacity 1.2s ease;
-      pointer-events: none;
-    }
-
-    .prophecy.active {
-      opacity: 1;
-      pointer-events: auto;
+      transition: opacity 0.6s ease;
     }
 
     /* 8-ball answer */
     .answer-container {
-      margin-top: 60px;
+      margin-top: 48px;
       min-height: 80px;
+      width: 100%;
+      max-width: 620px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -239,7 +225,7 @@
       font-style: italic;
       letter-spacing: 0.04em;
       line-height: 1.7;
-      max-width: 540px;
+      max-width: 620px;
       text-align: center;
       opacity: 0;
       transform: translateY(10px);
@@ -340,12 +326,7 @@
       <div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
     </div>
 
-    <div class="prophecies">
-      <p class="prophecy active">Die Antwort war immer in dir. Die KI hat sie nur schneller gefunden.</p>
-      <p class="prophecy">Wer das Orakel fragt, muss die Antwort ertragen.</p>
-      <p class="prophecy">Das Orakel sieht alles. Auch deine Cookies.</p>
-      <p class="prophecy">Nicht jede Frage verdient einen Token.</p>
-    </div>
+    <p class="hint">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
 
     <div class="answer-container">
       <p class="answer-text"></p>
@@ -356,14 +337,7 @@
 
   <script>
     (function() {
-      // Rotating ambient prophecies
-      var prophecies = document.querySelectorAll('.prophecy');
-      var current = 0;
-      var ambientTimer = setInterval(function() {
-        prophecies[current].classList.remove('active');
-        current = (current + 1) % prophecies.length;
-        prophecies[current].classList.add('active');
-      }, 5000);
+      var hint = document.querySelector('.hint');
 
       // 8-ball answers
       var answers = [
@@ -421,9 +395,8 @@
         void title.offsetWidth;
         title.classList.add('shaking');
 
-        // Hide prophecies
-        prophecies[current].classList.remove('active');
-        clearInterval(ambientTimer);
+        // Hide hint
+        hint.style.opacity = '0';
 
         // Fade out old answer
         answerEl.classList.remove('visible');