From 8f4c880308cc572b12447c2400a13301028b6af4 Mon Sep 17 00:00:00 2001
From: m <paragraphenreiter@gmail.com>
Date: Tue, 31 Mar 2026 10:25:47 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20orakil.de=20=E2=80=94=20mystisches=20KI?=
 =?UTF-8?q?-Orakel=20onepager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sites/orakil.de/index.html | 316 +++++++++++++++++++++++++++++++++++++
 sites/orakil.de/site.yaml  |   5 +
 2 files changed, 321 insertions(+)
 create mode 100644 sites/orakil.de/index.html
 create mode 100644 sites/orakil.de/site.yaml
diff --git a/sites/orakil.de/index.html b/sites/orakil.de/index.html
new file mode 100644
index 0000000..ca7758f
--- /dev/null
+++ b/sites/orakil.de/index.html
@@ -0,0 +1,316 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OraKIl — Frag das Orakel</title>
+  <meta name="description" content="Das Orakel weiß. Frag.">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔮</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #0a0a0e;
+      --bg-deep: #06060a;
+      --gold: #c9a84c;
+      --gold-dim: #8a7535;
+      --gold-glow: rgba(201, 168, 76, 0.15);
+      --gold-subtle: rgba(201, 168, 76, 0.06);
+      --violet: #6b4c9a;
+      --violet-glow: rgba(107, 76, 154, 0.2);
+      --violet-mist: rgba(107, 76, 154, 0.08);
+      --text: #d4cbb8;
+      --text-dim: #7a7060;
+      --text-muted: #3d3830;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'JetBrains Mono', monospace;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+      min-height: 100vh;
+    }
+
+    /* Noise overlay */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    /* Mystical fog */
+    .fog {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .fog::before,
+    .fog::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      filter: blur(100px);
+      animation: fogDrift 12s ease-in-out infinite;
+    }
+
+    .fog::before {
+      width: 600px; height: 400px;
+      top: 10%; left: 30%;
+      background: var(--violet-glow);
+      animation-delay: 0s;
+    }
+
+    .fog::after {
+      width: 500px; height: 500px;
+      bottom: 10%; right: 20%;
+      background: var(--gold-glow);
+      animation-delay: -6s;
+      animation-duration: 15s;
+    }
+
+    @keyframes fogDrift {
+      0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
+      33% { opacity: 0.7; transform: translate(30px, -20px) scale(1.1); }
+      66% { opacity: 0.5; transform: translate(-20px, 15px) scale(0.95); }
+    }
+
+    /* Hero */
+    .oracle {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+      padding: 40px 24px;
+    }
+
+    .oracle-title {
+      font-family: 'Cinzel', serif;
+      font-size: clamp(4rem, 12vw, 8rem);
+      font-weight: 800;
+      color: var(--gold);
+      letter-spacing: 0.08em;
+      line-height: 1;
+      margin-bottom: 24px;
+      text-shadow:
+        0 0 40px var(--gold-glow),
+        0 0 80px rgba(201, 168, 76, 0.08);
+      animation: fadeIn 2s ease forwards, glow 6s ease-in-out infinite 2s;
+      opacity: 0;
+    }
+
+    .oracle-title span {
+      color: var(--text-dim);
+      font-weight: 400;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes glow {
+      0%, 100% { text-shadow: 0 0 40px var(--gold-glow), 0 0 80px rgba(201, 168, 76, 0.08); }
+      50% { text-shadow: 0 0 60px rgba(201, 168, 76, 0.3), 0 0 120px rgba(201, 168, 76, 0.12); }
+    }
+
+    .oracle-subtitle {
+      font-family: 'Cinzel', serif;
+      font-size: clamp(1rem, 3vw, 1.4rem);
+      color: var(--text-dim);
+      font-weight: 400;
+      letter-spacing: 0.2em;
+      margin-bottom: 80px;
+      animation: fadeIn 2s ease 0.5s forwards;
+      opacity: 0;
+    }
+
+    /* Input field */
+    .question-container {
+      width: 100%;
+      max-width: 620px;
+      position: relative;
+      animation: fadeIn 1.5s ease 1s forwards;
+      opacity: 0;
+    }
+
+    .question-field {
+      width: 100%;
+      padding: 20px 28px;
+      background: rgba(201, 168, 76, 0.03);
+      border: 1px solid var(--text-muted);
+      border-radius: 4px;
+      color: var(--text);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 1rem;
+      outline: none;
+      transition: all 0.4s ease;
+      letter-spacing: 0.02em;
+    }
+
+    .question-field::placeholder {
+      color: var(--text-muted);
+      font-style: italic;
+    }
+
+    .question-field:focus {
+      border-color: var(--gold-dim);
+      background: rgba(201, 168, 76, 0.05);
+      box-shadow:
+        0 0 30px var(--gold-glow),
+        0 0 60px rgba(107, 76, 154, 0.08),
+        inset 0 0 20px rgba(201, 168, 76, 0.03);
+    }
+
+    .question-ornament {
+      position: absolute;
+      bottom: -32px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-family: 'Cinzel', serif;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      letter-spacing: 0.4em;
+      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 {
+      font-family: 'Cinzel', serif;
+      font-size: clamp(0.85rem, 2vw, 1.05rem);
+      color: var(--gold-dim);
+      font-style: italic;
+      letter-spacing: 0.04em;
+      line-height: 1.7;
+      max-width: 540px;
+      text-align: center;
+      position: absolute;
+      opacity: 0;
+      transition: opacity 1.2s ease;
+    }
+
+    .prophecy.active {
+      opacity: 1;
+      position: relative;
+    }
+
+    /* Decorative elements */
+    .ornament-top,
+    .ornament-bottom {
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+      font-family: 'Cinzel', serif;
+      color: var(--text-muted);
+      letter-spacing: 0.6em;
+      font-size: 0.6rem;
+      z-index: 1;
+      opacity: 0.5;
+    }
+
+    .ornament-top { top: 24px; }
+    .ornament-bottom { bottom: 24px; }
+
+    /* Vertical lines */
+    .line-left,
+    .line-right {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      z-index: 1;
+      opacity: 0.15;
+    }
+
+    .line-left {
+      left: 48px;
+      background: linear-gradient(180deg, transparent, var(--gold), var(--violet), transparent);
+    }
+
+    .line-right {
+      right: 48px;
+      background: linear-gradient(180deg, transparent, var(--violet), var(--gold), transparent);
+    }
+
+    /* Cursor blink on field */
+    @keyframes blink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+
+    /* Responsive */
+    @media (max-width: 640px) {
+      .line-left, .line-right { display: none; }
+      .question-field { padding: 16px 20px; font-size: 0.9rem; }
+      .ornament-top, .ornament-bottom { font-size: 0.5rem; letter-spacing: 0.4em; }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="fog"></div>
+
+  <div class="line-left"></div>
+  <div class="line-right"></div>
+
+  <div class="ornament-top">&#x2726; &#x2726; &#x2726;</div>
+
+  <section class="oracle">
+    <h1 class="oracle-title">OraKIl</h1>
+    <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>
+      <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>
+  </section>
+
+  <div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
+
+  <script>
+    (function() {
+      var prophecies = document.querySelectorAll('.prophecy');
+      var current = 0;
+      setInterval(function() {
+        prophecies[current].classList.remove('active');
+        current = (current + 1) % prophecies.length;
+        prophecies[current].classList.add('active');
+      }, 5000);
+    })();
+  </script>
+
+</body>
+</html>
diff --git a/sites/orakil.de/site.yaml b/sites/orakil.de/site.yaml
new file mode 100644
index 0000000..c0208a4
--- /dev/null
+++ b/sites/orakil.de/site.yaml
@@ -0,0 +1,5 @@
+domain: orakil.de
+template: custom
+title: "OraKIl — Frag das Orakel"
+description: "Das Orakel weiß. Frag."
+lang: de
