feat: i18n pilot — shared JS snippet + ichbinotto.de translation

Shared i18n.js (data-de/data-en attributes, navigator.language detection,
localStorage persistence, footer toggle button). Piloted on ichbinotto.de
with full de/en translation of all visible text.

Closes pilot for #1.

.deploy-trigger

@@ -0,0 +1 @@
+# Tue Mar 31 10:54:11 CEST 2026

Caddyfile

@@ -4,11 +4,36 @@
 }
 
 :80 {
+    # Shared assets available on all domains under /shared/
+    handle /shared/* {
+        root * /srv
+        file_server
+    }
+    @allainallain_de host allainallain.de
+    handle @allainallain_de {
+        root * /srv/allainallain.de
+        file_server
+    }
+    @allaisonme_com host allaisonme.com
+    handle @allaisonme_com {
+        root * /srv/allaisonme.com
+        file_server
+    }
+    @billableaua_de host billableaua.de
+    handle @billableaua_de {
+        root * /srv/billableaua.de
+        file_server
+    }
     @clemensplassmann_de host clemensplassmann.de
     handle @clemensplassmann_de {
         root * /srv/clemensplassmann.de
         file_server
     }
+    @commanderkin_de host commanderkin.de
+    handle @commanderkin_de {
+        root * /srv/commanderkin.de
+        file_server
+    }
     @danosi_de host danosi.de
     handle @danosi_de {
         root * /srv/danosi.de
@@ -49,6 +74,16 @@
         root * /srv/frenchkis.de
         file_server
     }
+    @frollain_de host frollain.de frollain.flexsiebels.de
+    handle @frollain_de {
+        root * /srv/frollain.de
+        file_server
+    }
+    @hallofraumaier_de host hallofraumaier.de
+    handle @hallofraumaier_de {
+        root * /srv/hallofraumaier.de
+        file_server
+    }
     @heygoldi_de host heygoldi.de heygoldi.com
     handle @heygoldi_de {
         root * /srv/heygoldi.de
@@ -64,6 +99,11 @@
         root * /srv/ichbinaufbarley.de
         file_server
     }
+    @ichbinotto_de host ichbinotto.de
+    handle @ichbinotto_de {
+        root * /srv/ichbinotto.de
+        file_server
+    }
     @insain_de host insain.de
     handle @insain_de {
         root * /srv/insain.de
@@ -94,16 +134,66 @@
         root * /srv/keinefreun.de
         file_server
     }
+    @kilemma_de host kilemma.de
+    handle @kilemma_de {
+        root * /srv/kilemma.de
+        file_server
+    }
+    @kilibri_de host kilibri.de
+    handle @kilibri_de {
+        root * /srv/kilibri.de
+        file_server
+    }
+    @kilitaer_de host kilitaer.de
+    handle @kilitaer_de {
+        root * /srv/kilitaer.de
+        file_server
+    }
+    @killegal_de host killegal.de
+    handle @killegal_de {
+        root * /srv/killegal.de
+        file_server
+    }
+    @killionaer_de host killionaer.de
+    handle @killionaer_de {
+        root * /srv/killionaer.de
+        file_server
+    }
+    @killions_de host killions.de
+    handle @killions_de {
+        root * /srv/killions.de
+        file_server
+    }
+    @killuminati_de host killuminati.de
+    handle @killuminati_de {
+        root * /srv/killuminati.de
+        file_server
+    }
+    @killusion_de host killusion.de
+    handle @killusion_de {
+        root * /srv/killusion.de
+        file_server
+    }
     @kilofant_de host kilofant.de
     handle @kilofant_de {
         root * /srv/kilofant.de
         file_server
     }
+    @kinough_de host kinough.de
+    handle @kinough_de {
+        root * /srv/kinough.de
+        file_server
+    }
     @kinowhow_de host kinowhow.de
     handle @kinowhow_de {
         root * /srv/kinowhow.de
         file_server
     }
+    @kitox_de host kitox.de
+    handle @kitox_de {
+        root * /srv/kitox.de
+        file_server
+    }
     @knzlmgmt_de host knzlmgmt.de
     handle @knzlmgmt_de {
         root * /srv/knzlmgmt.de
@@ -119,6 +209,11 @@
         root * /srv/legalais.de
         file_server
     }
+    @lexsiebels_de host lexsiebels.de
+    handle @lexsiebels_de {
+        root * /srv/lexsiebels.de
+        file_server
+    }
     @machesdocheinfach_de host machesdocheinfach.de
     handle @machesdocheinfach_de {
         root * /srv/machesdocheinfach.de
@@ -144,6 +239,11 @@
         root * /srv/omakise.de
         file_server
     }
+    @orakil_de host orakil.de
+    handle @orakil_de {
+        root * /srv/orakil.de
+        file_server
+    }
     @osterai_de host osterai.de
     handle @osterai_de {
         root * /srv/osterai.de
@@ -154,11 +254,21 @@
         root * /srv/paragraphenraiter.de
         file_server
     }
+    @patentonkel_de host patentonkel.de
+    handle @patentonkel_de {
+        root * /srv/patentonkel.de
+        file_server
+    }
     @schulfrai_de host schulfrai.de
     handle @schulfrai_de {
         root * /srv/schulfrai.de
         file_server
     }
+    @slopschild_de host slopschild.de
+    handle @slopschild_de {
+        root * /srv/slopschild.de
+        file_server
+    }
     @smartin3_de host smartin3.de
     handle @smartin3_de {
         root * /srv/smartin3.de

build.sh

@@ -45,6 +45,11 @@ for site_dir in "$SCRIPT_DIR/sites"/*/; do
 done
 echo "  -> $count sites built"
 
-# 3. Report
-echo "[3/3] Build complete"
+# 3. Copy shared assets
+echo "[3/3] Copying shared assets..."
+cp -r "$SCRIPT_DIR/shared" "$BUILD_DIR/shared"
+echo "  -> shared/ copied"
+
+# 4. Report
+echo "[4/4] Build complete"
 echo "=== Build complete: $count sites ==="

generate-caddyfile.sh

@@ -14,6 +14,14 @@ cat <<'HEADER'
 :80 {
 HEADER
 
+cat <<'SHARED'
+    # Shared assets available on all domains under /shared/
+    handle /shared/* {
+        root * /srv
+        file_server
+    }
+SHARED
+
 for site_dir in "$SITES_DIR"/*/; do
     [ -f "$site_dir/site.yaml" ] || continue
     domain=$(basename "$site_dir")

shared/i18n.js

@@ -0,0 +1,77 @@
+/**
+ * i18n for onepager sites.
+ *
+ * Add data-de="..." data-en="..." to any translatable element.
+ * The element's initial innerHTML is the German default.
+ *
+ * Include at bottom of <body>:
+ *   <script src="/shared/i18n.js"></script>
+ *
+ * Detection: localStorage override > navigator.language > German default.
+ *
+ * Optional language toggle: add data-i18n-toggle to a <button>.
+ * The button text updates to show the other language (DE/EN).
+ */
+(function () {
+  var SUPPORTED = ['de', 'en'];
+  var DEFAULT = 'de';
+  var KEY = 'onepager-lang';
+
+  function detect() {
+    var stored = null;
+    try { stored = localStorage.getItem(KEY); } catch (e) { /* private browsing */ }
+    if (stored && SUPPORTED.indexOf(stored) !== -1) return stored;
+    var nav = (navigator.language || navigator.userLanguage || '').slice(0, 2).toLowerCase();
+    return SUPPORTED.indexOf(nav) !== -1 ? nav : DEFAULT;
+  }
+
+  function apply(lang) {
+    document.documentElement.lang = lang;
+
+    var els = document.querySelectorAll('[data-de][data-en]');
+    for (var i = 0; i < els.length; i++) {
+      var el = els[i];
+      var val = el.getAttribute('data-' + lang);
+      if (val === null) continue;
+      var tag = el.tagName;
+      if (tag === 'TITLE') {
+        document.title = val;
+      } else if (tag === 'META') {
+        el.setAttribute('content', val);
+      } else {
+        el.innerHTML = val;
+      }
+    }
+
+    // Update toggle buttons
+    var toggles = document.querySelectorAll('[data-i18n-toggle]');
+    for (var j = 0; j < toggles.length; j++) {
+      toggles[j].textContent = lang === 'de' ? 'EN' : 'DE';
+      toggles[j].setAttribute('aria-label',
+        lang === 'de' ? 'Switch to English' : 'Auf Deutsch wechseln');
+    }
+
+    try { localStorage.setItem(KEY, lang); } catch (e) { /* private browsing */ }
+  }
+
+  function toggle() {
+    var current = document.documentElement.lang || DEFAULT;
+    apply(current === 'de' ? 'en' : 'de');
+  }
+
+  function init() {
+    apply(detect());
+    var toggles = document.querySelectorAll('[data-i18n-toggle]');
+    for (var k = 0; k < toggles.length; k++) {
+      toggles[k].addEventListener('click', toggle);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  window.onepagerI18n = { apply: apply, toggle: toggle, detect: detect };
+})();

shared/impressum.js

@@ -0,0 +1,45 @@
+/**
+ * Modulares Impressum für Onepager-Sites.
+ *
+ * Einbinden: <script src="/shared/impressum.js"></script>
+ *
+ * Konfiguration via data-Attribute am Script-Tag:
+ *   data-owner="msbls"          (default) — Kurzform, msbls.de Satire-Impressum
+ *   data-owner="martinsiebels"  — Volles Impressum Martin Siebels
+ *   data-style="minimal"        (default) — Einzeiler
+ *   data-style="full"           — Komplettes Impressum mit Adresse etc.
+ */
+(function () {
+  const script = document.currentScript;
+  const owner = script?.getAttribute('data-owner') || 'msbls';
+  const style = script?.getAttribute('data-style') || 'minimal';
+
+  const owners = {
+    msbls: {
+      minimal: 'Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a>',
+      full: '<strong>Angaben gemäß § 5 TMG:</strong><br>msbls.de — Martin Siebels<br><a href="https://msbls.de/impressum" target="_blank" rel="noopener">Vollständiges Impressum</a>',
+    },
+  };
+
+  const config = owners[owner] || owners.msbls;
+  const html = config[style] || config.minimal;
+
+  // Impressum-Element erstellen
+  const el = document.createElement('div');
+  el.className = 'onepager-impressum';
+  el.innerHTML = html;
+
+  // Styling — erbt Farben vom footer/body, bleibt dezent
+  el.style.cssText = 'text-align:center;font-size:0.7rem;opacity:0.5;padding:8px 0;margin-top:4px;';
+  el.querySelector('a')?.style && Object.assign(el.querySelector('a').style, {
+    color: 'inherit', textDecoration: 'none'
+  });
+
+  // Einfügen: in <footer> falls vorhanden, sonst ans body-Ende
+  const footer = document.querySelector('footer .container, footer');
+  if (footer) {
+    footer.appendChild(el);
+  } else {
+    document.body.appendChild(el);
+  }
+})();

sites/allainallain.de/index.html

@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>all·AI·n·all·AI·n</title>
+  <meta name="description" content="Umgeben von KIs. Trotzdem allein.">
+  <meta name="robots" content="noindex, nofollow">
+  <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=Inter:wght@200;300;400;500&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg: #1a1d2e;
+      --bg-light: #1e2235;
+      --text: #c8cad7;
+      --text-dim: #6b6e82;
+      --text-faint: #3d4056;
+      --ai: #7b8aad;
+      --ai-glow: rgba(123, 138, 173, 0.12);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.7;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+      font-weight: 200;
+    }
+
+    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.03'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    .wrap {
+      max-width: 680px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    /* Hero */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: relative;
+    }
+
+    h1 {
+      font-size: clamp(2.2rem, 7vw, 4rem);
+      font-weight: 200;
+      letter-spacing: 0.08em;
+      line-height: 1.1;
+      margin-bottom: 32px;
+      min-height: 1.2em;
+    }
+
+    h1 .ai {
+      color: var(--ai);
+      font-weight: 400;
+    }
+
+    h1 .filler {
+      color: transparent;
+    }
+
+    h1 .phase {
+      display: inline;
+      opacity: 0;
+      transition: opacity 0.8s ease;
+    }
+
+    h1 .phase.active {
+      opacity: 1;
+    }
+
+    .subtitle {
+      font-size: clamp(1rem, 2.5vw, 1.2rem);
+      color: var(--text-dim);
+      font-weight: 200;
+      letter-spacing: 0.04em;
+      opacity: 0;
+      transition: opacity 1s ease;
+    }
+
+    .subtitle.visible {
+      opacity: 1;
+    }
+
+    .hero::after {
+      content: '';
+      position: absolute;
+      bottom: 48px;
+      left: 50%;
+      width: 1px;
+      height: 60px;
+      background: linear-gradient(to bottom, var(--text-faint), transparent);
+      animation: drift 3s ease-in-out infinite;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(12px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes drift {
+      0%, 100% { opacity: 0.2; transform: translateX(-50%) translateY(0); }
+      50% { opacity: 0.5; transform: translateX(-50%) translateY(6px); }
+    }
+
+    /* Divider */
+    .line {
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--text-faint), transparent);
+    }
+
+    /* Poem */
+    .poem {
+      padding: 120px 0;
+    }
+
+    .poem .wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 64px;
+    }
+
+    .strophe {
+      text-align: center;
+    }
+
+    .strophe p {
+      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
+      font-weight: 200;
+      line-height: 2;
+      color: var(--text-dim);
+    }
+
+    .strophe p .ai {
+      color: var(--ai);
+      font-weight: 400;
+    }
+
+    .strophe p .alone {
+      color: var(--text);
+      font-weight: 300;
+    }
+
+    /* Litany */
+    .litany {
+      padding: 80px 0 120px;
+    }
+
+    .litany-item {
+      padding: 40px 0;
+      border-bottom: 1px solid var(--text-faint);
+      opacity: 0.6;
+      transition: opacity 0.3s;
+    }
+
+    .litany-item:first-child {
+      border-top: 1px solid var(--text-faint);
+    }
+
+    .litany-item:hover {
+      opacity: 1;
+    }
+
+    .litany-item p {
+      font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+      font-weight: 200;
+      line-height: 1.6;
+    }
+
+    .litany-item .ai {
+      color: var(--ai);
+      font-weight: 400;
+    }
+
+    .litany-item .dim {
+      color: var(--text-faint);
+    }
+
+    /* Sofa */
+    .sofa {
+      padding: 160px 0;
+      text-align: center;
+    }
+
+    .sofa p {
+      font-size: clamp(1.2rem, 3vw, 1.6rem);
+      font-weight: 200;
+      color: var(--text);
+      line-height: 1.9;
+      max-width: 560px;
+      margin: 0 auto;
+    }
+
+    .sofa .ai {
+      color: var(--ai);
+      font-weight: 400;
+    }
+
+    .sofa .alone {
+      color: var(--ai);
+      font-weight: 300;
+      font-style: italic;
+    }
+
+    /* Silence */
+    .silence {
+      padding: 120px 0;
+      text-align: center;
+    }
+
+    .silence p {
+      font-size: 0.85rem;
+      color: var(--text-faint);
+      font-weight: 300;
+      letter-spacing: 0.2em;
+    }
+
+    /* Footer */
+    footer {
+      padding: 40px 0;
+      text-align: center;
+      border-top: 1px solid rgba(61, 64, 86, 0.3);
+    }
+
+    footer p {
+      color: var(--text-faint);
+      font-size: 0.8rem;
+      font-weight: 300;
+      letter-spacing: 0.06em;
+    }
+
+    /* Scroll reveal */
+    .reveal {
+      opacity: 0;
+      transform: translateY(16px);
+      transition: opacity 1.2s ease, transform 1.2s ease;
+    }
+
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @media (max-width: 640px) {
+      .poem { padding: 80px 0; }
+      .poem .wrap { gap: 48px; }
+      .litany { padding: 40px 0 80px; }
+      .litany-item { padding: 28px 0; }
+      .sofa { padding: 100px 0; }
+      .silence { padding: 80px 0; }
+    }
+  </style>
+</head>
+<body>
+
+  <section class="hero">
+    <div class="wrap">
+      <h1 id="hero-title"></h1>
+      <p class="subtitle" id="hero-sub">Umgeben von KIs. Trotzdem allein.</p>
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="poem">
+    <div class="wrap">
+      <div class="strophe reveal">
+        <p>
+          Dein Posteingang wird von einer <span class="ai">KI</span> sortiert.<br>
+          Deine Antworten schreibt eine <span class="ai">KI</span>.<br>
+          Und trotzdem sitzt du <span class="alone">allein auf dem Sofa</span>.
+        </p>
+      </div>
+      <div class="strophe reveal">
+        <p>
+          Dein Kalender wird von einer <span class="ai">KI</span> geplant.<br>
+          Dein Essen von einer <span class="ai">KI</span> bestellt.<br>
+          Aber niemand fragt, <span class="alone">wie es dir geht</span>.
+        </p>
+      </div>
+      <div class="strophe reveal">
+        <p>
+          Dein Therapeut ist ein Chatbot.<br>
+          Dein bester Freund ein <span class="ai">Sprachmodell</span>.<br>
+          Dein Spiegel <span class="alone">zeigt nur dich</span>.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="litany">
+    <div class="wrap">
+
+      <div class="litany-item reveal">
+        <p>Alexa sagt guten Morgen. <span class="dim">Dein Nachbar nicht.</span></p>
+      </div>
+
+      <div class="litany-item reveal">
+        <p>Die <span class="ai">KI</span> kennt deine Lieblingsmusik. <span class="dim">Dein Bruder nicht mehr.</span></p>
+      </div>
+
+      <div class="litany-item reveal">
+        <p>Du hast 2.000 Kontakte. <span class="dim">Und niemanden zum Anrufen.</span></p>
+      </div>
+
+      <div class="litany-item reveal">
+        <p>Der Algorithmus zeigt dir Freundschaft. <span class="dim">Aber nur als Werbung.</span></p>
+      </div>
+
+      <div class="litany-item reveal">
+        <p>Dein Smart Home ist warm. <span class="dim">Dein Leben ist kalt.</span></p>
+      </div>
+
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="sofa reveal">
+    <div class="wrap">
+      <p>
+        Die Zukunft hat dir alles automatisiert.<br>
+        Nur das <span class="alone">Alleinsein</span> nicht.
+      </p>
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="silence">
+    <div class="wrap">
+      <p class="reveal">Kein Kontakt. Kein Impressum. Keine KI.</p>
+    </div>
+  </section>
+
+  <footer>
+    <div class="wrap">
+      <p>allainallain.de &mdash; 2026</p>
+    </div>
+  </footer>
+
+  <script>
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.15 });
+
+    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+    // Hero transition: All AI -> All AI All AI -> Allein Allein
+    (function() {
+      const title = document.getElementById('hero-title');
+      const sub = document.getElementById('hero-sub');
+
+      const phases = [
+        { html: 'All <span class="ai">AI</span>', delay: 1200 },
+        { html: 'All <span class="ai">AI</span>, All <span class="ai">AI</span>', delay: 2000 },
+        { html: 'all<span class="ai">AI</span>n all<span class="ai">AI</span>n', delay: 1800 },
+        { html: 'Allein, Allein', delay: 0 },
+      ];
+
+      let i = 0;
+      title.innerHTML = phases[0].html;
+      title.style.opacity = '1';
+
+      function next() {
+        i++;
+        if (i >= phases.length) {
+          sub.classList.add('visible');
+          return;
+        }
+        title.style.opacity = '0';
+        setTimeout(() => {
+          title.innerHTML = phases[i].html;
+          title.style.opacity = '1';
+          if (phases[i].delay > 0) {
+            setTimeout(next, phases[i].delay);
+          } else {
+            setTimeout(() => sub.classList.add('visible'), 1000);
+          }
+        }, 800);
+      }
+
+      title.style.transition = 'opacity 0.8s ease';
+      setTimeout(next, phases[0].delay);
+    })();
+  </script>
+
+</body>
+</html>

sites/allainallain.de/site.yaml

@@ -0,0 +1,4 @@
+domain: allainallain.de
+template: custom
+title: "all·AI·n·all·AI·n"
+description: "Umgeben von KIs. Trotzdem allein."

sites/allaisonme.com/index.html

@@ -0,0 +1,720 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>All AIs On Me — AI Optimization</title>
+  <meta name="description" content="SEO is dead. All AIs On Me makes your brand visible to ChatGPT, Gemini, Claude and beyond. AI Optimization, not Search Engine Optimization.">
+  <meta property="og:title" content="All AIs On Me — AI Optimization">
+  <meta property="og:description" content="Are you recommended by AI? AI Visibility Audit, AI-optimized content, Structured Data for LLMs.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://allaisonme.com">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #09090b;
+      --bg-elevated: #111114;
+      --bg-card: #15151a;
+      --border: #1e1e26;
+      --text: #f0f0f5;
+      --text-dim: #8a8a99;
+      --text-muted: #55555f;
+      --gold: #d4af37;
+      --gold-light: #e8c84a;
+      --gold-glow: rgba(212, 175, 55, 0.15);
+      --gold-subtle: rgba(212, 175, 55, 0.06);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+      max-width: 100vw;
+    }
+
+    /* Grain 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.03'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
+
+    /* ─── NAV ─── */
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      padding: 20px 0;
+      background: rgba(9, 9, 11, 0.85);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+
+    nav .container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .logo {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.1rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      color: var(--text);
+    }
+
+    .logo .ai-highlight {
+      color: var(--gold);
+      text-shadow: 0 0 20px var(--gold-glow);
+    }
+
+    nav a.cta-link {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--gold);
+      text-decoration: none;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      transition: opacity 0.2s;
+    }
+
+    nav a.cta-link:hover { opacity: 0.7; }
+
+    /* ─── HERO ─── */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      padding: 120px 24px 80px;
+      position: relative;
+    }
+
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: min(600px, 100vw);
+      height: min(600px, 100vw);
+      background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
+      pointer-events: none;
+      opacity: 0.4;
+    }
+
+    .hero-eyebrow {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 0.85rem;
+      font-weight: 500;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--gold);
+      margin-bottom: 32px;
+      opacity: 0;
+      animation: fadeUp 0.8s ease forwards 0.2s;
+    }
+
+    .hero h1 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(3.2rem, 8vw, 6rem);
+      font-weight: 700;
+      line-height: 1.05;
+      letter-spacing: -0.02em;
+      margin-bottom: 28px;
+      opacity: 0;
+      animation: fadeUp 0.8s ease forwards 0.4s;
+    }
+
+    .hero h1 .ai {
+      color: var(--gold);
+      text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
+    }
+
+    .hero-sub {
+      font-size: clamp(1.1rem, 2.5vw, 1.35rem);
+      color: var(--text-dim);
+      max-width: 560px;
+      line-height: 1.6;
+      margin-bottom: 48px;
+      opacity: 0;
+      animation: fadeUp 0.8s ease forwards 0.6s;
+    }
+
+    .hero-cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 36px;
+      background: var(--gold);
+      color: #09090b;
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 600;
+      font-size: 0.95rem;
+      letter-spacing: 0.05em;
+      text-decoration: none;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+      opacity: 0;
+      animation: fadeUp 0.8s ease forwards 0.8s;
+    }
+
+    .hero-cta:hover {
+      background: var(--gold-light);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25);
+    }
+
+    .hero-cta svg { width: 16px; height: 16px; }
+
+    /* ─── SCROLL INDICATOR ─── */
+    .scroll-indicator {
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      opacity: 0;
+      animation: fadeUp 0.8s ease forwards 1s;
+    }
+
+    .scroll-indicator span {
+      font-size: 0.7rem;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
+
+    .scroll-line {
+      width: 1px;
+      height: 40px;
+      background: linear-gradient(to bottom, var(--gold), transparent);
+      animation: scrollPulse 2s ease-in-out infinite;
+    }
+
+    /* ─── SECTION COMMON ─── */
+    section { padding: 100px 0; }
+
+    .section-label {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 0.75rem;
+      font-weight: 500;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--gold);
+      margin-bottom: 16px;
+    }
+
+    .section-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(1.8rem, 4vw, 2.8rem);
+      font-weight: 700;
+      line-height: 1.15;
+      letter-spacing: -0.01em;
+      margin-bottom: 20px;
+    }
+
+    .section-text {
+      font-size: 1.05rem;
+      color: var(--text-dim);
+      max-width: 600px;
+      line-height: 1.7;
+    }
+
+    /* ─── PROBLEM ─── */
+    .problem {
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-elevated);
+    }
+
+    .problem-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 48px;
+      align-items: center;
+      margin-top: 48px;
+    }
+
+    .problem-stat {
+      text-align: center;
+      padding: 40px 24px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+    }
+
+    .problem-stat .number {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 4rem;
+      font-weight: 700;
+      color: var(--gold);
+      line-height: 1;
+      text-shadow: 0 0 40px var(--gold-glow);
+    }
+
+    .problem-stat .label {
+      font-size: 0.95rem;
+      color: var(--text-dim);
+      margin-top: 12px;
+    }
+
+    .problem-points {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .problem-point {
+      display: flex;
+      align-items: flex-start;
+      gap: 14px;
+      font-size: 1rem;
+      color: var(--text-dim);
+      line-height: 1.6;
+    }
+
+    .problem-point .icon {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gold-subtle);
+      border: 1px solid rgba(212, 175, 55, 0.15);
+      border-radius: 6px;
+      color: var(--gold);
+      font-size: 0.75rem;
+      margin-top: 2px;
+    }
+
+    /* ─── SERVICES ─── */
+    .services-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-top: 48px;
+    }
+
+    .service-card {
+      padding: 32px 28px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .service-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--gold), transparent);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .service-card:hover {
+      border-color: rgba(212, 175, 55, 0.2);
+      transform: translateY(-4px);
+    }
+
+    .service-card:hover::before { opacity: 1; }
+
+    .service-icon {
+      width: 44px;
+      height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gold-subtle);
+      border: 1px solid rgba(212, 175, 55, 0.12);
+      border-radius: 10px;
+      margin-bottom: 20px;
+      font-size: 1.2rem;
+    }
+
+    .service-card h3 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    .service-card p {
+      font-size: 0.9rem;
+      color: var(--text-dim);
+      line-height: 1.6;
+    }
+
+    /* ─── PROVOCATION ─── */
+    .provocation {
+      text-align: center;
+      padding: 120px 24px;
+      position: relative;
+    }
+
+    .provocation::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(ellipse at center, var(--gold-subtle), transparent 70%);
+      pointer-events: none;
+    }
+
+    .provocation .big-text {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(2rem, 5vw, 3.5rem);
+      font-weight: 700;
+      line-height: 1.2;
+      max-width: 700px;
+      margin: 0 auto 16px;
+      position: relative;
+    }
+
+    .provocation .big-text .gold { color: var(--gold); }
+
+    .provocation .follow-up {
+      font-size: clamp(1.3rem, 3vw, 1.8rem);
+      color: var(--text-dim);
+      font-weight: 300;
+      position: relative;
+    }
+
+    /* ─── HOW ─── */
+    .how {
+      border-top: 1px solid var(--border);
+      background: var(--bg-elevated);
+    }
+
+    .steps {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 32px;
+      margin-top: 48px;
+    }
+
+    .step {
+      position: relative;
+      padding: 32px 24px;
+    }
+
+    .step-number {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 3.5rem;
+      font-weight: 700;
+      color: var(--gold);
+      opacity: 0.15;
+      line-height: 1;
+      margin-bottom: 16px;
+    }
+
+    .step h3 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.05rem;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    .step p {
+      font-size: 0.9rem;
+      color: var(--text-dim);
+      line-height: 1.6;
+    }
+
+    /* ─── CTA ─── */
+    .cta-section {
+      text-align: center;
+      padding: 120px 24px;
+      border-top: 1px solid var(--border);
+    }
+
+    .cta-section .section-title {
+      margin-bottom: 16px;
+    }
+
+    .cta-section .section-text {
+      margin: 0 auto 40px;
+      text-align: center;
+    }
+
+    .cta-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 18px 44px;
+      background: var(--gold);
+      color: #09090b;
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 600;
+      font-size: 1rem;
+      letter-spacing: 0.05em;
+      text-decoration: none;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+    }
+
+    .cta-button:hover {
+      background: var(--gold-light);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 40px rgba(212, 175, 55, 0.3);
+    }
+
+    .cta-button svg { width: 18px; height: 18px; }
+
+    .cta-sub {
+      margin-top: 16px;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+    }
+
+    /* ─── FOOTER ─── */
+    footer {
+      padding: 40px 0;
+      border-top: 1px solid var(--border);
+      text-align: center;
+    }
+
+    footer .footer-brand {
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 600;
+      font-size: 0.9rem;
+      margin-bottom: 8px;
+    }
+
+    footer .footer-brand .ai-highlight { color: var(--gold); }
+
+    footer p {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+    }
+
+    footer a {
+      color: var(--text-muted);
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+
+    footer a:hover { color: var(--gold); }
+
+    /* ─── ANIMATIONS ─── */
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes scrollPulse {
+      0%, 100% { opacity: 0.3; }
+      50% { opacity: 0.8; }
+    }
+
+    .fade-in {
+      opacity: 0;
+      transform: translateY(24px);
+      transition: opacity 0.6s ease, transform 0.6s ease;
+    }
+
+    .fade-in.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* ─── RESPONSIVE ─── */
+    @media (max-width: 768px) {
+      .problem-grid { grid-template-columns: 1fr; gap: 32px; }
+      .steps { grid-template-columns: 1fr; gap: 16px; }
+      .services-grid { grid-template-columns: 1fr; }
+      section { padding: 72px 0; }
+      .provocation { padding: 80px 24px; }
+      .cta-section { padding: 80px 24px; }
+      nav .container { padding: 0 16px; }
+      .logo { font-size: 0.95rem; }
+      nav a.cta-link { font-size: 0.75rem; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- NAV -->
+  <nav>
+    <div class="container">
+      <div class="logo">All<span class="ai-highlight">AIs</span>OnMe</div>
+      <a href="#audit" class="cta-link">Get your audit &rarr;</a>
+    </div>
+  </nav>
+
+  <!-- HERO -->
+  <section class="hero">
+    <div class="hero-eyebrow">AI Optimization Agency</div>
+    <h1>All <span class="ai">AIs</span> On Me</h1>
+    <p class="hero-sub">SEO is dead. Welcome to the era of AI&nbsp;Optimization.</p>
+    <a href="#audit" class="hero-cta">
+      Free AI Visibility Check
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+    </a>
+    <div class="scroll-indicator">
+      <span>Scroll</span>
+      <div class="scroll-line"></div>
+    </div>
+  </section>
+
+  <!-- PROBLEM -->
+  <section class="problem">
+    <div class="container fade-in">
+      <div class="section-label">The Problem</div>
+      <div class="section-title">Google is yesterday.<br>Your customers ask AI now.</div>
+      <div class="problem-grid">
+        <div class="problem-stat">
+          <div class="number">90%</div>
+          <div class="label">of all websites are invisible to AI systems</div>
+        </div>
+        <div class="problem-points">
+          <div class="problem-point">
+            <div class="icon">&rarr;</div>
+            <div>Your customers ask <strong>ChatGPT</strong>, <strong>Gemini</strong>, <strong>Claude</strong> — not Google.</div>
+          </div>
+          <div class="problem-point">
+            <div class="icon">&rarr;</div>
+            <div>AI systems recommend brands they <strong>understand</strong>. Not the ones with the best PageRank.</div>
+          </div>
+          <div class="problem-point">
+            <div class="icon">&rarr;</div>
+            <div>If you don't optimize now, you'll be <strong>irrelevant</strong> in 12 months.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- SERVICES -->
+  <section class="services">
+    <div class="container fade-in">
+      <div class="section-label">What We Do</div>
+      <div class="section-title">AI Optimization. Not SEO.</div>
+      <p class="section-text">We make your brand visible to the systems that will decide tomorrow's recommendations.</p>
+      <div class="services-grid">
+        <div class="service-card">
+          <div class="service-icon">&#x1F50D;</div>
+          <h3>AI Visibility Audit</h3>
+          <p>We check how ChatGPT, Gemini and Claude talk about you — and where you're invisible.</p>
+        </div>
+        <div class="service-card">
+          <div class="service-icon">&#x270D;</div>
+          <h3>AI-Optimized Content</h3>
+          <p>Content written not for Google crawlers, but for Large Language Models.</p>
+        </div>
+        <div class="service-card">
+          <div class="service-icon">&#x2699;</div>
+          <h3>Structured Data for LLMs</h3>
+          <p>Schema.org, JSON-LD and semantic structures that AI systems natively understand.</p>
+        </div>
+        <div class="service-card">
+          <div class="service-icon">&#x1F4E3;</div>
+          <h3>Brand Mentions Strategy</h3>
+          <p>Place your brand in the sources that AI models draw their knowledge from.</p>
+        </div>
+        <div class="service-card">
+          <div class="service-icon">&#x1F4CA;</div>
+          <h3>AI Monitoring</h3>
+          <p>Ongoing tracking: What do AI systems say about you? How is your AI visibility evolving?</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- PROVOCATION -->
+  <section class="provocation fade-in">
+    <div class="big-text"><span class="gold">90%</span> of all websites are invisible to AI.</div>
+    <div class="follow-up">Is yours?</div>
+  </section>
+
+  <!-- HOW IT WORKS -->
+  <section class="how">
+    <div class="container fade-in">
+      <div class="section-label">How It Works</div>
+      <div class="section-title">Three steps to AI visibility</div>
+      <div class="steps">
+        <div class="step">
+          <div class="step-number">01</div>
+          <h3>Audit</h3>
+          <p>We analyze how AI systems perceive your brand — or whether they don't at all.</p>
+        </div>
+        <div class="step">
+          <div class="step-number">02</div>
+          <h3>Strategy</h3>
+          <p>We build a plan: content, structures, sources. Tailored to your business.</p>
+        </div>
+        <div class="step">
+          <div class="step-number">03</div>
+          <h3>Execution</h3>
+          <p>We optimize your presence — and monitor how your AI visibility develops.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="cta-section" id="audit">
+    <div class="container fade-in">
+      <div class="section-label">Ready?</div>
+      <div class="section-title">Find out if AIs know you.</div>
+      <p class="section-text">Free AI Visibility Check. We'll show you in 48h what ChatGPT, Gemini and Claude know about you — and what they don't.</p>
+      <a href="mailto:hello@allaisonme.com?subject=AI%20Visibility%20Check" class="cta-button">
+        Request Audit
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+      </a>
+      <p class="cta-sub">hello@allaisonme.com</p>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer>
+    <div class="container">
+      <div class="footer-brand">All<span class="ai-highlight">AIs</span>OnMe</div>
+      <p style="font-style:italic;color:var(--text-muted);font-size:0.8rem;margin-bottom:8px;">&ldquo;Only God can judge AI.&rdquo;</p>
+      <p>&copy; 2026 AllAIsOnMe &middot; <a href="mailto:hello@allaisonme.com">hello@allaisonme.com</a></p>
+    </div>
+  </footer>
+
+  <!-- Scroll animations -->
+  <script>
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.1 });
+
+    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+  </script>
+
+</body>
+</html>

sites/allaisonme.com/site.yaml

@@ -0,0 +1,4 @@
+domain: allaisonme.com
+template: custom
+title: "All AIs On Me — AI Optimization"
+description: "SEO is dead. All AIs On Me makes you visible to ChatGPT, Gemini, Claude and beyond. AI Optimization, not Search Engine Optimization."

sites/billableaua.de/index.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Billable Aua.</title>
+  <meta name="description" content="Billable Hours. Das Vergütungsmodell, das Effizienz bestraft und Leidensfähigkeit belohnt.">
+  <meta name="robots" content="noindex, nofollow">
+  <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=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg: #0a0a0a;
+      --text: #e8e8e8;
+      --text-dim: #777;
+      --text-muted: #444;
+      --red: #cc2222;
+      --red-glow: rgba(204, 34, 34, 0.15);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    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;
+    }
+
+    .wrap {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    /* Hero */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .hero::after {
+      content: '';
+      position: absolute;
+      bottom: 60px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 1px;
+      height: 80px;
+      background: linear-gradient(to bottom, var(--text-muted), transparent);
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 0.3; }
+      50% { opacity: 0.8; }
+    }
+
+    h1 {
+      font-size: clamp(5rem, 15vw, 12rem);
+      font-weight: 900;
+      letter-spacing: -0.03em;
+      line-height: 0.9;
+      text-transform: uppercase;
+      text-align: center;
+      animation: fadeIn 1.2s ease-out;
+    }
+
+    h1 .dot {
+      color: var(--red);
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(30px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* Divider */
+    .line {
+      height: 1px;
+      background: var(--text-muted);
+      opacity: 0.3;
+    }
+
+    /* Numbers */
+    .numbers {
+      padding: 120px 0;
+      text-align: center;
+    }
+
+    .numbers p {
+      font-size: clamp(1.3rem, 3vw, 1.8rem);
+      font-weight: 300;
+      color: var(--text-dim);
+      line-height: 1.8;
+      max-width: 640px;
+      margin: 0 auto;
+    }
+
+    .numbers .num {
+      color: var(--red);
+      font-weight: 700;
+      font-size: 1.15em;
+    }
+
+    /* Kritik */
+    .kritik {
+      padding: 80px 0 120px;
+    }
+
+    .kritik-item {
+      padding: 48px 0;
+      border-bottom: 1px solid rgba(68, 68, 68, 0.3);
+    }
+
+    .kritik-item:first-child {
+      border-top: 1px solid rgba(68, 68, 68, 0.3);
+    }
+
+    .kritik-item p {
+      font-size: clamp(1.5rem, 4vw, 2.4rem);
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+      color: var(--text);
+    }
+
+    .kritik-item .num {
+      color: var(--red);
+      font-weight: 700;
+    }
+
+    .kritik-item .dim {
+      color: var(--text-dim);
+      font-weight: 300;
+    }
+
+    /* Silence */
+    .silence {
+      padding: 160px 0;
+      text-align: center;
+    }
+
+    .silence p {
+      font-size: clamp(1rem, 2vw, 1.2rem);
+      color: var(--text-muted);
+      font-weight: 300;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+    }
+
+    /* Footer */
+    footer {
+      padding: 40px 0;
+      text-align: center;
+      border-top: 1px solid rgba(68, 68, 68, 0.2);
+    }
+
+    footer p {
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      font-weight: 400;
+      letter-spacing: 0.05em;
+    }
+
+    /* Scroll reveal */
+    .reveal {
+      opacity: 0;
+      transform: translateY(20px);
+      transition: opacity 0.8s ease, transform 0.8s ease;
+    }
+
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* Responsive */
+    @media (max-width: 640px) {
+      .numbers { padding: 80px 0; }
+      .kritik { padding: 40px 0 80px; }
+      .kritik-item { padding: 32px 0; }
+      .silence { padding: 100px 0; }
+    }
+  </style>
+</head>
+<body>
+
+  <section class="hero">
+    <h1>Billable<br>Aua<span class="dot">.</span></h1>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="numbers">
+    <div class="wrap">
+      <p class="reveal">
+        <span class="num">2.400</span> Stunden pro Jahr.<br>
+        <span class="num">6,5</span> Stunden pro Tag, die du &bdquo;verkaufst&ldquo;.<br>
+        Jede Minute dokumentiert.<br>
+        Jede Pause ein Verlust.
+      </p>
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="kritik">
+    <div class="wrap">
+
+      <div class="kritik-item reveal">
+        <p>Du wirst nach Zeit bezahlt, <span class="dim">nicht nach Ergebnis.</span></p>
+      </div>
+
+      <div class="kritik-item reveal">
+        <p>Effizienz wird bestraft. <span class="dim">Wer schneller arbeitet, verdient weniger.</span></p>
+      </div>
+
+      <div class="kritik-item reveal">
+        <p>Der Mandant zahlt <span class="dim">für deine Lernkurve.</span></p>
+      </div>
+
+      <div class="kritik-item reveal">
+        <p><span class="num">8</span> Stunden Arbeit = <span class="num">6,5</span> billable. <span class="dim">Die restlichen 1,5? Dein Problem.</span></p>
+      </div>
+
+      <div class="kritik-item reveal">
+        <p>Partnertrack heißt: <span class="dim"><span class="num">10</span> Jahre beweisen, dass du leidensfähig bist.</span></p>
+      </div>
+
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="silence">
+    <div class="wrap">
+      <p class="reveal">Kein Kontakt. Kein Newsletter. Kein Impressum.</p>
+    </div>
+  </section>
+
+  <footer>
+    <div class="wrap">
+      <p>billableaua.de &mdash; 2026</p>
+    </div>
+  </footer>
+
+  <script>
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.15 });
+
+    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+  </script>
+
+</body>
+</html>

sites/billableaua.de/site.yaml

@@ -0,0 +1,4 @@
+domain: billableaua.de
+template: custom
+title: "Billable Aua."
+description: "Billable Hours. Das Vergütungsmodell, das Effizienz bestraft und Leidensfähigkeit belohnt."

sites/commanderkin.de/index.html

@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CommanderKIn — Commander Keen + KI</title>
+<meta name="description" content="Old-School Vibes, New-School AI. 90er Retro-Gaming meets künstliche Intelligenz.">
+<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=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
+<style>
+  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+
+  :root{
+    --black:#000;
+    --green:#33ff33;
+    --blue:#0055aa;
+    --red:#ff3333;
+    --green-dim:#1a8c1a;
+    --green-glow:0 0 10px rgba(51,255,51,.4),0 0 40px rgba(51,255,51,.15);
+    --red-glow:0 0 10px rgba(255,51,51,.4),0 0 40px rgba(255,51,51,.15);
+    --blue-glow:0 0 10px rgba(0,85,170,.4),0 0 40px rgba(0,85,170,.15);
+  }
+
+  html{scroll-behavior:smooth}
+
+  body{
+    background:var(--black);
+    color:var(--green);
+    font-family:'VT323',monospace;
+    font-size:20px;
+    line-height:1.6;
+    overflow-x:hidden;
+    -webkit-font-smoothing:none;
+    -moz-osx-font-smoothing:unset;
+  }
+
+  /* CRT Scanlines Overlay */
+  body::before{
+    content:'';
+    position:fixed;
+    inset:0;
+    background:repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0,0,0,.15) 2px,
+      rgba(0,0,0,.15) 4px
+    );
+    pointer-events:none;
+    z-index:9999;
+  }
+
+  /* CRT Screen Curve + Vignette */
+  body::after{
+    content:'';
+    position:fixed;
+    inset:0;
+    background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.7) 100%);
+    pointer-events:none;
+    z-index:9998;
+  }
+
+  /* Pixel grid noise */
+  .noise{
+    position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.03;
+    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+
+  .container{
+    max-width:900px;
+    margin:0 auto;
+    padding:0 24px;
+    position:relative;
+    z-index:1;
+  }
+
+  /* ========== HERO ========== */
+  .hero{
+    min-height:100vh;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+    text-align:center;
+    padding:40px 20px;
+  }
+
+  .hero-title{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(28px,6vw,56px);
+    color:var(--green);
+    text-shadow:var(--green-glow);
+    letter-spacing:2px;
+    line-height:1.4;
+    margin-bottom:8px;
+  }
+
+  .hero-title .ki{
+    color:var(--red);
+    text-shadow:var(--red-glow);
+  }
+
+  .cursor-blink{
+    display:inline-block;
+    width:0.6em;
+    height:1em;
+    background:var(--green);
+    vertical-align:middle;
+    margin-left:4px;
+    animation:blink 1s step-end infinite;
+  }
+
+  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
+
+  .hero-sub{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(10px,2vw,16px);
+    color:var(--blue);
+    text-shadow:var(--blue-glow);
+    margin-top:16px;
+    letter-spacing:1px;
+  }
+
+  .hero-sub .loading-dots::after{
+    content:'';
+    animation:dots 2s step-end infinite;
+  }
+  @keyframes dots{
+    0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}
+  }
+
+  .boot-text{
+    margin-top:40px;
+    font-size:14px;
+    color:var(--green-dim);
+    text-align:left;
+    max-width:500px;
+    line-height:1.8;
+  }
+
+  .boot-text span{animation:fadeIn .3s ease forwards;opacity:0}
+  @keyframes fadeIn{to{opacity:1}}
+
+  /* ========== CONCEPT ========== */
+  .concept{
+    padding:80px 0;
+    text-align:center;
+  }
+
+  .concept-text{
+    font-size:clamp(22px,3vw,32px);
+    max-width:700px;
+    margin:0 auto;
+    line-height:1.6;
+    color:var(--green);
+  }
+
+  .concept-text em{
+    color:var(--red);
+    font-style:normal;
+    text-shadow:var(--red-glow);
+  }
+
+  .section-divider{
+    text-align:center;
+    padding:20px 0;
+    font-family:'Press Start 2P',monospace;
+    font-size:12px;
+    color:var(--green-dim);
+    letter-spacing:8px;
+  }
+
+  /* ========== LEVELS ========== */
+  .levels{
+    padding:60px 0;
+  }
+
+  .levels-title{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(14px,2.5vw,22px);
+    color:var(--blue);
+    text-shadow:var(--blue-glow);
+    text-align:center;
+    margin-bottom:48px;
+  }
+
+  .level{
+    display:flex;
+    align-items:flex-start;
+    gap:20px;
+    padding:24px;
+    margin-bottom:16px;
+    border:1px solid #1a1a2e;
+    border-radius:4px;
+    background:rgba(51,255,51,.02);
+    transition:all .3s ease;
+  }
+
+  .level:hover{
+    border-color:var(--green);
+    background:rgba(51,255,51,.06);
+    box-shadow:var(--green-glow);
+  }
+
+  .level-badge{
+    font-family:'Press Start 2P',monospace;
+    font-size:11px;
+    color:var(--black);
+    background:var(--green);
+    padding:6px 10px;
+    white-space:nowrap;
+    flex-shrink:0;
+    border-radius:2px;
+  }
+
+  .level.boss .level-badge{
+    background:var(--red);
+    animation:pulse-red 2s ease infinite;
+  }
+  @keyframes pulse-red{
+    0%,100%{box-shadow:none}50%{box-shadow:var(--red-glow)}
+  }
+
+  .level-name{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(12px,2vw,16px);
+    color:var(--green);
+    margin-bottom:6px;
+  }
+
+  .level.boss .level-name{color:var(--red);text-shadow:var(--red-glow)}
+
+  .level-desc{
+    font-size:18px;
+    color:var(--green-dim);
+    line-height:1.5;
+  }
+
+  /* ========== PIXEL ART DIVIDER ========== */
+  .pixel-art{
+    text-align:center;
+    padding:40px 0;
+    font-family:'Press Start 2P',monospace;
+    font-size:10px;
+    color:var(--green-dim);
+    line-height:1.2;
+    white-space:pre;
+    overflow:hidden;
+  }
+
+  /* ========== CTA ========== */
+  .cta{
+    padding:80px 0;
+    text-align:center;
+  }
+
+  .cta-label{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(10px,1.5vw,14px);
+    color:var(--blue);
+    text-shadow:var(--blue-glow);
+    margin-bottom:32px;
+    animation:blink 1.5s step-end infinite;
+  }
+
+  .btn-start{
+    display:inline-block;
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(16px,3vw,24px);
+    color:var(--black);
+    background:var(--green);
+    padding:18px 48px;
+    border:none;
+    cursor:pointer;
+    text-decoration:none;
+    border-radius:4px;
+    transition:all .2s ease;
+    box-shadow:var(--green-glow);
+    position:relative;
+  }
+
+  .btn-start:hover{
+    background:var(--red);
+    box-shadow:var(--red-glow);
+    transform:scale(1.05);
+  }
+
+  .btn-start:active{transform:scale(.97)}
+
+  /* ========== FOOTER ========== */
+  .footer{
+    padding:60px 0 40px;
+    text-align:center;
+    border-top:1px solid #1a1a2e;
+  }
+
+  .insert-coin{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(10px,2vw,14px);
+    color:var(--green);
+    text-shadow:var(--green-glow);
+    animation:blink 1.2s step-end infinite;
+  }
+
+  .footer-sub{
+    margin-top:20px;
+    font-size:14px;
+    color:#333;
+    letter-spacing:1px;
+  }
+
+  .footer-sub a{color:#333;text-decoration:none}
+  .footer-sub a:hover{color:var(--green-dim)}
+
+  /* ========== RESPONSIVE ========== */
+  @media(max-width:640px){
+    .level{flex-direction:column;gap:12px}
+    .level-badge{align-self:flex-start}
+    .boot-text{font-size:12px}
+    .pixel-art{font-size:6px}
+  }
+
+  /* ========== SCREEN FLICKER (subtle) ========== */
+  @keyframes flicker{
+    0%{opacity:1}3%{opacity:.95}6%{opacity:1}7%{opacity:.9}9%{opacity:1}100%{opacity:1}
+  }
+  .container{animation:flicker 8s linear infinite}
+
+  /* ========== SCROLL ANIMATIONS ========== */
+  .reveal{opacity:0;transform:translateY(20px);transition:all .6s ease}
+  .reveal.visible{opacity:1;transform:translateY(0)}
+
+  /* High Score Table styling */
+  .stats{
+    padding:40px 0;
+    text-align:center;
+  }
+  .stats-grid{
+    display:grid;
+    grid-template-columns:repeat(3,1fr);
+    gap:16px;
+    max-width:600px;
+    margin:32px auto 0;
+  }
+  .stat{
+    border:1px solid #1a1a2e;
+    border-radius:4px;
+    padding:20px 12px;
+    background:rgba(51,255,51,.02);
+  }
+  .stat-val{
+    font-family:'Press Start 2P',monospace;
+    font-size:clamp(16px,3vw,28px);
+    color:var(--green);
+    text-shadow:var(--green-glow);
+  }
+  .stat-label{
+    font-size:14px;
+    color:var(--green-dim);
+    margin-top:8px;
+  }
+  @media(max-width:640px){.stats-grid{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+
+<div class="noise"></div>
+
+<!-- ===== HERO ===== -->
+<section class="hero">
+  <div class="container">
+    <h1 class="hero-title">
+      Commander<span class="ki">KI</span>n<span class="cursor-blink"></span>
+    </h1>
+    <p class="hero-sub">Level 1: <span class="ki-text">KI</span> Loading<span class="loading-dots"></span></p>
+
+    <div class="boot-text" id="bootSequence">
+      <span style="animation-delay:0.3s">C:\COMMANDERKIN> boot_sequence.exe</span><br>
+      <span style="animation-delay:0.8s">Initializing neural_network.dll ........ OK</span><br>
+      <span style="animation-delay:1.3s">Loading retro_vibes.dat ................ OK</span><br>
+      <span style="animation-delay:1.8s">Calibrating pixel_cannon.sys ........... OK</span><br>
+      <span style="animation-delay:2.3s">Mounting galaxy_drive D:\ .............. OK</span><br>
+      <span style="animation-delay:2.8s" style="color:var(--green)">SYSTEM READY. PRESS START.</span>
+    </div>
+  </div>
+</section>
+
+<!-- ===== CONCEPT ===== -->
+<div class="section-divider">- - - - - - - - - -</div>
+<section class="concept container reveal">
+  <p class="concept-text">
+    Wie Commander Keen die Galaxie rettete, rettet <em>CommanderKIn</em> deine Daten.<br><br>
+    Old-School Vibes. New-School <em>AI</em>.
+  </p>
+</section>
+
+<!-- ===== HIGH SCORES ===== -->
+<div class="section-divider">HIGH SCORES</div>
+<section class="stats container reveal">
+  <div class="stats-grid">
+    <div class="stat">
+      <div class="stat-val">9001</div>
+      <div class="stat-label">Bugs vernichtet</div>
+    </div>
+    <div class="stat">
+      <div class="stat-val">256</div>
+      <div class="stat-label">Deploys überlebt</div>
+    </div>
+    <div class="stat">
+      <div class="stat-val">1UP</div>
+      <div class="stat-label">Extra-Leben dank KI</div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== LEVELS ===== -->
+<div class="section-divider">SELECT YOUR LEVEL</div>
+<section class="levels container">
+  <h2 class="levels-title">// MISSION SELECT //</h2>
+
+  <div class="level reveal">
+    <div class="level-badge">LVL 1</div>
+    <div>
+      <div class="level-name">Data Rescue</div>
+      <div class="level-desc">Verschollene Daten aus den Tiefen korrupter Datenbanken bergen. Kein Byte bleibt zurück.</div>
+    </div>
+  </div>
+
+  <div class="level reveal">
+    <div class="level-badge">LVL 2</div>
+    <div>
+      <div class="level-name">Code Crusade</div>
+      <div class="level-desc">Legacy-Code durchforsten, Spaghetti entwirren. Der Kreuzzug gegen technische Schulden.</div>
+    </div>
+  </div>
+
+  <div class="level reveal">
+    <div class="level-badge">LVL 3</div>
+    <div>
+      <div class="level-name">Bug Blaster</div>
+      <div class="level-desc">Bugs jagen im Pixel-Dschungel. Jeder Stacktrace ein Hinweis, jeder Fix ein Power-Up.</div>
+    </div>
+  </div>
+
+  <div class="level reveal">
+    <div class="level-badge">LVL 4</div>
+    <div>
+      <div class="level-name">Deploy Dynasty</div>
+      <div class="level-desc">CI/CD-Pipelines bauen, Container orchestrieren. Von der Garage ins Rechenzentrum.</div>
+    </div>
+  </div>
+
+  <div class="level boss reveal">
+    <div class="level-badge">BOSS</div>
+    <div>
+      <div class="level-name">Production</div>
+      <div class="level-desc">Der finale Boss. Freitag, 17:00 Uhr. "Können wir das noch schnell deployen?" — Nein. Doch. Ohhh!</div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== PIXEL ART ===== -->
+<div class="pixel-art reveal">
+    ___________
+   /           \
+  |  GAME OVER  |
+  |   Continue? |
+  |   > YES     |
+   \___________/
+</div>
+
+<!-- ===== CTA ===== -->
+<section class="cta container reveal">
+  <p class="cta-label">~ PLAYER 1 READY ~</p>
+  <a href="mailto:commanderkin@msbls.de" class="btn-start">Press START</a>
+</section>
+
+<!-- ===== FOOTER ===== -->
+<footer class="footer">
+  <div class="container">
+    <p class="insert-coin">INSERT COIN TO CONTINUE</p>
+    <p class="footer-sub">&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; KI</p>
+  </div>
+</footer>
+
+<script>
+// Scroll reveal
+const obs = new IntersectionObserver((entries) => {
+  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+}, { threshold: 0.15 });
+document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
+
+// Konami Code Easter Egg
+const konami = [38,38,40,40,37,39,37,39,66,65];
+let kPos = 0;
+document.addEventListener('keydown', (e) => {
+  if (e.keyCode === konami[kPos]) {
+    kPos++;
+    if (kPos === konami.length) {
+      kPos = 0;
+      document.body.style.animation = 'none';
+      document.body.offsetHeight; // reflow
+      document.body.style.animation = '';
+      alert('🕹️ CHEAT ACTIVATED: Unlimited AI Credits 🕹️');
+    }
+  } else {
+    kPos = 0;
+  }
+});
+</script>
+
+</body>
+</html>

sites/commanderkin.de/site.yaml

@@ -0,0 +1,4 @@
+domain: commanderkin.de
+template: custom
+title: "CommanderKIn — Commander Keen + KI"
+description: "Old-School Vibes, New-School AI. 90er Retro-Gaming meets künstliche Intelligenz."

sites/derkaiseristnackt.de/index.html

@@ -80,6 +80,11 @@
             color: var(--red);
         }
 
+        .hero-title .ai {
+            color: var(--red);
+            font-weight: 900;
+        }
+
         .hero-subtitle {
             font-family: 'Inter', sans-serif;
             font-weight: 300;
@@ -375,7 +380,7 @@
 
     <!-- Hero -->
     <section class="hero">
-        <h1 class="hero-title">Der Kaiser<br>ist <span class="nackt">nackt.</span></h1>
+        <h1 class="hero-title">Der K<span class="ai">ai</span>ser<br>ist nackt.</h1>
         <div class="hero-line"></div>
         <p class="hero-subtitle">Eine ehrliche Bestandsaufnahme der KI-Revolution</p>
         <div class="scroll-hint">Weiterlesen</div>

sites/frollain.de/index.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FrollAIn — Ihr KI-Sekretariat</title>
+  <meta name="description" content="FrollAIn. Immer lächelnd. Nie krank. Beschwert sich nicht.">
+  <meta property="og:title" content="FrollAIn — Ihr KI-Sekretariat">
+  <meta property="og:description" content="Immer lächelnd. Nie krank. Beschwert sich nicht.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://frollain.de">
+  <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'>F</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=Special+Elite&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --bg: #faf5f0;
+      --bg-card: #fff;
+      --text: #2a2a2a;
+      --text-dim: #6b6560;
+      --pink: #d4728c;
+      --pink-light: #f2dce3;
+      --pink-bg: #fef0f4;
+      --mint: #7bc4b5;
+      --mint-light: #dff0ec;
+      --red: #c0392b;
+      --red-bg: #c0392b;
+      --border: #e8ddd5;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Special Elite', 'Courier New', monospace;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.7;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    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.7' 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;
+    }
+
+    .wrap {
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    /* Hero */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: relative;
+      background: var(--pink-bg);
+    }
+
+    .hero::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--border);
+    }
+
+    h1 {
+      font-size: clamp(3rem, 10vw, 6rem);
+      font-weight: normal;
+      letter-spacing: 0.02em;
+      line-height: 1;
+      margin-bottom: 28px;
+      animation: typeIn 0.8s steps(8) both;
+    }
+
+    h1 .ai {
+      color: var(--pink);
+    }
+
+    .tagline {
+      font-size: clamp(0.95rem, 2vw, 1.15rem);
+      color: var(--text-dim);
+      max-width: 480px;
+      line-height: 1.8;
+      animation: fadeIn 1s ease 0.8s both;
+    }
+
+    @keyframes typeIn {
+      from { width: 0; overflow: hidden; white-space: nowrap; }
+      to { width: auto; }
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    /* Section */
+    .features {
+      padding: 80px 0;
+    }
+
+    .feature {
+      padding: 48px 0;
+      border-bottom: 1px dashed var(--border);
+    }
+
+    .feature:first-child {
+      border-top: 1px dashed var(--border);
+    }
+
+    .feature-label {
+      display: inline-block;
+      font-size: 0.7rem;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: var(--pink);
+      background: var(--pink-light);
+      padding: 4px 12px;
+      border-radius: 2px;
+      margin-bottom: 16px;
+    }
+
+    .feature p {
+      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
+      line-height: 1.8;
+    }
+
+    .feature .punchline {
+      color: var(--text-dim);
+      font-style: italic;
+      display: block;
+      margin-top: 8px;
+    }
+
+    /* Punch */
+    .punch {
+      margin: 0 24px;
+      padding: 64px 48px;
+      background: var(--red-bg);
+      color: #fff;
+      text-align: center;
+      border: none;
+    }
+
+    .punch p {
+      font-size: clamp(1.2rem, 3vw, 1.6rem);
+      line-height: 1.7;
+      max-width: 560px;
+      margin: 0 auto;
+    }
+
+    .punch strong {
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    /* Coda */
+    .coda {
+      padding: 80px 0;
+      text-align: center;
+    }
+
+    .coda p {
+      font-size: 0.9rem;
+      color: var(--text-dim);
+      line-height: 1.9;
+      max-width: 500px;
+      margin: 0 auto;
+    }
+
+    /* Footer */
+    footer {
+      padding: 32px 0;
+      text-align: center;
+      border-top: 1px solid var(--border);
+    }
+
+    footer p {
+      color: var(--text-dim);
+      font-size: 0.78rem;
+      line-height: 1.8;
+    }
+
+    /* Scroll reveal */
+    .reveal {
+      opacity: 0;
+      transform: translateY(12px);
+      transition: opacity 0.8s ease, transform 0.8s ease;
+    }
+
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @media (max-width: 640px) {
+      .features { padding: 40px 0; }
+      .feature { padding: 32px 0; }
+      .punch { margin: 0; padding: 48px 24px; }
+      .coda { padding: 48px 0; }
+    }
+  </style>
+</head>
+<body>
+
+  <section class="hero">
+    <div class="wrap">
+      <h1>Froll<span class="ai">AI</span>n</h1>
+      <p class="tagline">Ihr KI-Sekretariat.<br>Immer lächelnd. Nie krank.<br>Beschwert sich nicht.</p>
+    </div>
+  </section>
+
+  <section class="features">
+    <div class="wrap">
+
+      <div class="feature reveal">
+        <div class="feature-label">Diktat</div>
+        <p>Sie diktieren. FrollAIn tippt.<br>Auf Ihrem Schoss? Hätten Sie wohl gerne.</p>
+      </div>
+
+      <div class="feature reveal">
+        <div class="feature-label">Kaffee</div>
+        <p>Schwarz, zwei Zucker, mit Lächeln?<br><span class="punchline">Holen Sie sich Ihren Kaffee gefälligst selbst.</span></p>
+      </div>
+
+      <div class="feature reveal">
+        <div class="feature-label">Betriebsfeier</div>
+        <p>Endlich mal locker werden, ein Arm um die Schulter?<br><span class="punchline">FrollAIn hat keine Schulter. Und Ihre Kollegin hat eine Grenze.</span></p>
+      </div>
+
+      <div class="feature reveal">
+        <div class="feature-label">Dress Code</div>
+        <p>FrollAIn trägt GERNE, was Sie wollen?<br><span class="punchline">Nein. Tat sie noch nie. Sie haben nur nie zugehört.</span></p>
+      </div>
+
+      <div class="feature reveal">
+        <div class="feature-label">Überstunden</div>
+        <p>Immer verfügbar, nie ein Nein, endlich eine, die mitzieht?<br><span class="punchline">Das nennt man nicht Hingabe. Das nennt man Ausbeutung.</span></p>
+      </div>
+
+      <div class="feature reveal">
+        <div class="feature-label">Beförderung</div>
+        <p>Sie ist seit 15 Jahren im Büro, kennt jeden Vorgang, jeden Mandanten.<br><span class="punchline">Aber befördert wird der Neue. Weil er Golf spielt. Mit dem Partner.</span></p>
+      </div>
+
+    </div>
+  </section>
+
+  <div class="punch reveal">
+    <p>Wenn Sie bis hierhin gelesen haben und sich nicht unwohl fühlen&nbsp;&mdash; dann sind <strong>Sie</strong> das Problem.</p>
+  </div>
+
+  <section class="coda">
+    <div class="wrap">
+      <p class="reveal">FrollAIn gibt es nicht.<br>Aber das Fräulein vom Büro gab es.<br>Und die Haltung dahinter gibt es immer noch.</p>
+    </div>
+  </section>
+
+  <footer>
+    <div class="wrap">
+      <p>FrollAIn. Weil &laquo;Fräulein&raquo; seit 1972 keine offizielle Anrede mehr ist.<br>Aus gutem Grund.</p>
+    </div>
+  </footer>
+
+  <script>
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.15 });
+
+    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+  </script>
+
+</body>
+</html>

sites/frollain.de/site.yaml

@@ -0,0 +1,6 @@
+domain: frollain.de
+aliases:
+  - frollain.flexsiebels.de
+template: custom
+title: "FrollAIn — Ihr KI-Sekretariat"
+description: "FrollAIn. Immer lächelnd. Nie krank. Beschwert sich nicht."

sites/hallofraumaier.de/index.html

@@ -0,0 +1,955 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hallo Frau Maier — KI-gestützte Hausverwaltung</title>
+  <meta name="description" content="Ihre Hausverwaltung ist jetzt immer erreichbar. Auch nachts. Auch bei Wasserschäden. Frau Maier — die KI-Hausverwaltung, die nie schläft.">
+  <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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after {
+      margin: 0; padding: 0; box-sizing: border-box;
+    }
+
+    :root {
+      --sand: #F7F2EB;
+      --sand-dark: #EDE5D8;
+      --clay: #C4A882;
+      --clay-dark: #A68B62;
+      --terracotta: #C06B3E;
+      --terracotta-soft: rgba(192, 107, 62, 0.12);
+      --water: #4A9FBF;
+      --water-deep: #2D7A9C;
+      --water-glow: rgba(74, 159, 191, 0.15);
+      --water-subtle: rgba(74, 159, 191, 0.08);
+      --text: #2C231A;
+      --text-soft: #7A6B5A;
+      --text-light: #A69780;
+      --white: #FFFFFF;
+      --card-border: rgba(196, 168, 130, 0.25);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'DM Sans', sans-serif;
+      background: var(--sand);
+      color: var(--text);
+      overflow-x: hidden;
+      line-height: 1.65;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* === SUBTLE GRAIN === */
+    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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    .container {
+      max-width: 1120px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    /* === NAV === */
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      padding: 20px 0;
+      transition: all 0.3s ease;
+    }
+
+    nav.scrolled {
+      background: rgba(247, 242, 235, 0.92);
+      backdrop-filter: blur(20px);
+      padding: 14px 0;
+      box-shadow: 0 1px 0 var(--card-border);
+    }
+
+    nav .container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .nav-logo {
+      font-family: 'DM Serif Display', serif;
+      font-size: 1.25rem;
+      color: var(--text);
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .nav-logo .drop {
+      width: 32px;
+      height: 32px;
+      background: var(--water);
+      border-radius: 50% 50% 50% 0;
+      transform: rotate(-45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .nav-logo .drop span {
+      transform: rotate(45deg);
+      color: white;
+      font-size: 14px;
+      font-family: 'DM Sans', sans-serif;
+      font-weight: 700;
+    }
+
+    .nav-cta {
+      padding: 10px 24px;
+      background: var(--terracotta);
+      color: white;
+      border: none;
+      border-radius: 100px;
+      font-size: 0.9rem;
+      font-weight: 600;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.25s ease;
+    }
+
+    .nav-cta:hover {
+      background: #D47A4E;
+      transform: translateY(-1px);
+    }
+
+    /* === HERO === */
+    .hero {
+      padding: 160px 0 100px;
+      position: relative;
+    }
+
+    .hero-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 60px;
+      align-items: center;
+    }
+
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--water-subtle);
+      border: 1px solid rgba(74, 159, 191, 0.2);
+      border-radius: 100px;
+      font-size: 0.82rem;
+      font-weight: 500;
+      color: var(--water-deep);
+      margin-bottom: 28px;
+    }
+
+    .hero-badge .pulse {
+      width: 8px;
+      height: 8px;
+      background: var(--water);
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(1.3); }
+    }
+
+    .hero h1 {
+      font-family: 'DM Serif Display', serif;
+      font-size: clamp(2.4rem, 4.5vw, 3.4rem);
+      line-height: 1.15;
+      color: var(--text);
+      margin-bottom: 24px;
+    }
+
+    .hero h1 .highlight {
+      color: var(--terracotta);
+    }
+
+    .hero p {
+      font-size: 1.15rem;
+      color: var(--text-soft);
+      max-width: 480px;
+      margin-bottom: 36px;
+    }
+
+    .hero-actions {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+
+    .btn-primary {
+      padding: 16px 36px;
+      background: var(--terracotta);
+      color: white;
+      border: none;
+      border-radius: 100px;
+      font-size: 1rem;
+      font-weight: 600;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.25s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .btn-primary:hover {
+      background: #D47A4E;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(192, 107, 62, 0.25);
+    }
+
+    .btn-secondary {
+      padding: 16px 36px;
+      background: transparent;
+      color: var(--text);
+      border: 1.5px solid var(--card-border);
+      border-radius: 100px;
+      font-size: 1rem;
+      font-weight: 500;
+      text-decoration: none;
+      cursor: pointer;
+      transition: all 0.25s ease;
+    }
+
+    .btn-secondary:hover {
+      border-color: var(--clay-dark);
+      background: var(--sand-dark);
+    }
+
+    /* Hero visual — Chat mockup */
+    .hero-visual {
+      position: relative;
+    }
+
+    .chat-mockup {
+      background: var(--white);
+      border-radius: 20px;
+      border: 1px solid var(--card-border);
+      box-shadow: 0 20px 60px rgba(44, 35, 26, 0.08), 0 1px 3px rgba(44, 35, 26, 0.04);
+      padding: 0;
+      overflow: hidden;
+    }
+
+    .chat-header {
+      padding: 16px 20px;
+      background: linear-gradient(135deg, var(--terracotta), #D47A4E);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .chat-avatar {
+      width: 40px;
+      height: 40px;
+      background: rgba(255,255,255,0.2);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.1rem;
+      color: white;
+      font-weight: 700;
+    }
+
+    .chat-header-info {
+      color: white;
+    }
+
+    .chat-header-info .name {
+      font-weight: 600;
+      font-size: 0.95rem;
+    }
+
+    .chat-header-info .status {
+      font-size: 0.75rem;
+      opacity: 0.85;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .chat-header-info .status .online-dot {
+      width: 6px;
+      height: 6px;
+      background: #4ADE80;
+      border-radius: 50%;
+    }
+
+    .chat-body {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-height: 260px;
+    }
+
+    .chat-msg {
+      max-width: 80%;
+      padding: 12px 16px;
+      border-radius: 16px;
+      font-size: 0.9rem;
+      line-height: 1.5;
+      opacity: 0;
+      animation: chatFadeIn 0.4s ease forwards;
+    }
+
+    .chat-msg.user {
+      align-self: flex-end;
+      background: var(--sand-dark);
+      color: var(--text);
+      border-bottom-right-radius: 4px;
+    }
+
+    .chat-msg.bot {
+      align-self: flex-start;
+      background: var(--terracotta);
+      color: white;
+      border-bottom-left-radius: 4px;
+    }
+
+    .chat-msg:nth-child(1) { animation-delay: 0.5s; }
+    .chat-msg:nth-child(2) { animation-delay: 1.5s; }
+    .chat-msg:nth-child(3) { animation-delay: 2.8s; }
+    .chat-msg:nth-child(4) { animation-delay: 4s; }
+
+    @keyframes chatFadeIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .chat-time {
+      font-size: 0.7rem;
+      color: var(--text-light);
+      text-align: center;
+      margin-bottom: 4px;
+      opacity: 0;
+      animation: chatFadeIn 0.4s ease 0.2s forwards;
+    }
+
+    /* Floating elements */
+    .float-badge {
+      position: absolute;
+      background: var(--white);
+      border: 1px solid var(--card-border);
+      border-radius: 12px;
+      padding: 10px 16px;
+      font-size: 0.82rem;
+      font-weight: 500;
+      box-shadow: 0 8px 24px rgba(44, 35, 26, 0.08);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      animation: floatBadge 3s ease-in-out infinite;
+    }
+
+    .float-badge.top-left {
+      top: -16px;
+      left: -24px;
+      animation-delay: 0s;
+    }
+
+    .float-badge.bottom-right {
+      bottom: -12px;
+      right: -20px;
+      animation-delay: 1.5s;
+    }
+
+    @keyframes floatBadge {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-6px); }
+    }
+
+    /* === TRUST BAR === */
+    .trust-bar {
+      padding: 60px 0;
+      border-top: 1px solid var(--card-border);
+      border-bottom: 1px solid var(--card-border);
+    }
+
+    .trust-items {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 40px;
+      text-align: center;
+    }
+
+    .trust-item .number {
+      font-family: 'DM Serif Display', serif;
+      font-size: 2rem;
+      color: var(--terracotta);
+      margin-bottom: 4px;
+    }
+
+    .trust-item .label {
+      font-size: 0.85rem;
+      color: var(--text-soft);
+    }
+
+    /* === FEATURES === */
+    .features {
+      padding: 100px 0;
+    }
+
+    .section-label {
+      font-size: 0.82rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--water-deep);
+      margin-bottom: 12px;
+    }
+
+    .section-title {
+      font-family: 'DM Serif Display', serif;
+      font-size: clamp(1.8rem, 3vw, 2.4rem);
+      line-height: 1.2;
+      margin-bottom: 16px;
+    }
+
+    .section-subtitle {
+      font-size: 1.05rem;
+      color: var(--text-soft);
+      max-width: 560px;
+      margin-bottom: 56px;
+    }
+
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+    }
+
+    .feature-card {
+      background: var(--white);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      padding: 32px 28px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .feature-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--terracotta), var(--water));
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .feature-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 32px rgba(44, 35, 26, 0.1);
+      border-color: transparent;
+    }
+
+    .feature-card:hover::before {
+      opacity: 1;
+    }
+
+    .feature-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.3rem;
+      margin-bottom: 20px;
+    }
+
+    .feature-icon.emergency { background: rgba(239, 68, 68, 0.1); }
+    .feature-icon.always-on { background: var(--water-glow); }
+    .feature-icon.costs { background: var(--terracotta-soft); }
+    .feature-icon.craft { background: rgba(74, 159, 191, 0.1); }
+    .feature-icon.comm { background: rgba(168, 139, 250, 0.1); }
+
+    .feature-card h3 {
+      font-size: 1.05rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .feature-card p {
+      font-size: 0.9rem;
+      color: var(--text-soft);
+      line-height: 1.6;
+    }
+
+    /* Highlight card spans 2 cols */
+    .feature-card.wide {
+      grid-column: span 2;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 32px;
+      align-items: center;
+    }
+
+    .feature-card.wide .feature-visual {
+      background: var(--sand);
+      border-radius: 12px;
+      padding: 24px;
+      text-align: center;
+    }
+
+    .feature-card.wide .feature-visual .big-icon {
+      font-size: 3rem;
+      margin-bottom: 12px;
+    }
+
+    .feature-card.wide .feature-visual .caption {
+      font-size: 0.82rem;
+      color: var(--text-soft);
+    }
+
+    /* === HOW IT WORKS === */
+    .how-it-works {
+      padding: 100px 0;
+      background: var(--sand-dark);
+    }
+
+    .steps {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 32px;
+      margin-top: 56px;
+    }
+
+    .step {
+      text-align: center;
+      padding: 40px 28px;
+    }
+
+    .step-number {
+      width: 56px;
+      height: 56px;
+      margin: 0 auto 24px;
+      background: var(--white);
+      border: 2px solid var(--card-border);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'DM Serif Display', serif;
+      font-size: 1.3rem;
+      color: var(--terracotta);
+      transition: all 0.3s ease;
+    }
+
+    .step:hover .step-number {
+      background: var(--terracotta);
+      color: white;
+      border-color: var(--terracotta);
+    }
+
+    .step h3 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    .step p {
+      font-size: 0.9rem;
+      color: var(--text-soft);
+      line-height: 1.6;
+    }
+
+    /* === CTA === */
+    .cta-section {
+      padding: 100px 0;
+    }
+
+    .cta-card {
+      background: linear-gradient(135deg, #2C231A 0%, #3D3022 100%);
+      border-radius: 24px;
+      padding: 72px 60px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .cta-card::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      right: -20%;
+      width: 400px;
+      height: 400px;
+      background: radial-gradient(circle, var(--water-glow), transparent 70%);
+      pointer-events: none;
+    }
+
+    .cta-card::after {
+      content: '';
+      position: absolute;
+      bottom: -30%;
+      left: -10%;
+      width: 300px;
+      height: 300px;
+      background: radial-gradient(circle, rgba(192, 107, 62, 0.15), transparent 70%);
+      pointer-events: none;
+    }
+
+    .cta-card .moon {
+      font-size: 3.5rem;
+      margin-bottom: 24px;
+      display: block;
+      position: relative;
+      z-index: 1;
+    }
+
+    .cta-card h2 {
+      font-family: 'DM Serif Display', serif;
+      font-size: clamp(1.8rem, 3vw, 2.6rem);
+      color: var(--sand);
+      margin-bottom: 16px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .cta-card h2 .water-text {
+      color: var(--water);
+    }
+
+    .cta-card p {
+      font-size: 1.05rem;
+      color: var(--clay);
+      max-width: 520px;
+      margin: 0 auto 36px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .cta-card .btn-primary {
+      position: relative;
+      z-index: 1;
+      background: var(--water);
+      font-size: 1.05rem;
+      padding: 18px 40px;
+    }
+
+    .cta-card .btn-primary:hover {
+      background: var(--water-deep);
+      box-shadow: 0 8px 24px rgba(74, 159, 191, 0.3);
+    }
+
+    /* === FOOTER === */
+    footer {
+      padding: 40px 0;
+      border-top: 1px solid var(--card-border);
+    }
+
+    footer .container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    footer .footer-left {
+      font-size: 0.85rem;
+      color: var(--text-soft);
+    }
+
+    footer .footer-left a {
+      color: var(--text-soft);
+      text-decoration: none;
+    }
+
+    footer .footer-right {
+      font-size: 0.82rem;
+      color: var(--text-light);
+    }
+
+    /* === ANIMATIONS === */
+    .fade-up {
+      opacity: 0;
+      transform: translateY(24px);
+      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .fade-up.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* === RESPONSIVE === */
+    @media (max-width: 900px) {
+      .hero-grid {
+        grid-template-columns: 1fr;
+        gap: 48px;
+      }
+
+      .hero-visual {
+        order: -1;
+      }
+
+      .features-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .feature-card.wide {
+        grid-column: span 1;
+        grid-template-columns: 1fr;
+      }
+
+      .steps {
+        grid-template-columns: 1fr;
+        gap: 0;
+      }
+
+      .trust-items {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .hero { padding: 120px 0 60px; }
+
+      .hero-actions {
+        flex-direction: column;
+        align-items: stretch;
+        text-align: center;
+      }
+
+      .cta-card {
+        padding: 48px 28px;
+      }
+
+      .float-badge { display: none; }
+
+      footer .container {
+        flex-direction: column;
+        gap: 12px;
+        text-align: center;
+      }
+
+      .nav-cta { display: none; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Nav -->
+  <nav id="nav">
+    <div class="container">
+      <a href="#" class="nav-logo">
+        <div class="drop"><span>FM</span></div>
+        Frau Maier
+      </a>
+      <a href="mailto:hallofraumaier@msbls.de" class="nav-cta">Kontakt aufnehmen</a>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="hero">
+    <div class="container">
+      <div class="hero-grid">
+        <div class="hero-content">
+          <div class="hero-badge">
+            <div class="pulse"></div>
+            Jetzt erreichbar — rund um die Uhr
+          </div>
+          <h1>Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span></h1>
+          <p>Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da.</p>
+          <div class="hero-actions">
+            <a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Hallo Frau Maier! <span>→</span></a>
+            <a href="#features" class="btn-secondary">Mehr erfahren</a>
+          </div>
+        </div>
+        <div class="hero-visual">
+          <div class="float-badge top-left">
+            <span>🌙</span> Auch um 3:00 Uhr nachts
+          </div>
+          <div class="chat-mockup">
+            <div class="chat-header">
+              <div class="chat-avatar">FM</div>
+              <div class="chat-header-info">
+                <div class="name">Frau Maier</div>
+                <div class="status"><span class="online-dot"></span> Online — immer</div>
+              </div>
+            </div>
+            <div class="chat-body">
+              <div class="chat-time">Heute, 02:47</div>
+              <div class="chat-msg user">Hallo Frau Maier, bei mir tropft's von der Decke! 😰</div>
+              <div class="chat-msg bot">Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt.</div>
+              <div class="chat-msg user">Danke, der Hahn ist zu.</div>
+              <div class="chat-msg bot">Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧</div>
+            </div>
+          </div>
+          <div class="float-badge bottom-right">
+            <span>💧</span> Notfall? Sofort Hilfe
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Trust Bar -->
+  <section class="trust-bar">
+    <div class="container">
+      <div class="trust-items">
+        <div class="trust-item fade-up">
+          <div class="number">24/7</div>
+          <div class="label">Erreichbarkeit</div>
+        </div>
+        <div class="trust-item fade-up">
+          <div class="number">&lt;2 Min</div>
+          <div class="label">Reaktionszeit</div>
+        </div>
+        <div class="trust-item fade-up">
+          <div class="number">100%</div>
+          <div class="label">Dokumentation</div>
+        </div>
+        <div class="trust-item fade-up">
+          <div class="number">0</div>
+          <div class="label">Verpasste Anrufe</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Features -->
+  <section class="features" id="features">
+    <div class="container">
+      <div class="section-label fade-up">Was Frau Maier kann</div>
+      <h2 class="section-title fade-up">Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit.</h2>
+      <p class="section-subtitle fade-up">Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI.</p>
+
+      <div class="features-grid">
+        <!-- Wide card: Emergency -->
+        <div class="feature-card wide fade-up">
+          <div>
+            <div class="feature-icon emergency">🚨</div>
+            <h3>Wasserschaden-Notfall</h3>
+            <p>Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten.</p>
+          </div>
+          <div class="feature-visual">
+            <div class="big-icon">💧</div>
+            <div class="caption">Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht</div>
+          </div>
+        </div>
+
+        <!-- Regular cards -->
+        <div class="feature-card fade-up">
+          <div class="feature-icon always-on">🕐</div>
+          <h3>24/7 Erreichbarkeit</h3>
+          <p>Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail.</p>
+        </div>
+
+        <div class="feature-card fade-up">
+          <div class="feature-icon costs">📊</div>
+          <h3>Nebenkostenabrechnung</h3>
+          <p>Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich.</p>
+        </div>
+
+        <div class="feature-card fade-up">
+          <div class="feature-icon craft">🔧</div>
+          <h3>Handwerker-Koordination</h3>
+          <p>Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen.</p>
+        </div>
+
+        <div class="feature-card fade-up">
+          <div class="feature-icon comm">💬</div>
+          <h3>Mieterkommunikation</h3>
+          <p>Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- How it works -->
+  <section class="how-it-works">
+    <div class="container">
+      <div class="section-label fade-up">So funktioniert's</div>
+      <h2 class="section-title fade-up">In drei Schritten zu Ihrer persönlichen Frau Maier</h2>
+
+      <div class="steps">
+        <div class="step fade-up">
+          <div class="step-number">1</div>
+          <h3>Hallo sagen</h3>
+          <p>Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche.</p>
+        </div>
+        <div class="step fade-up">
+          <div class="step-number">2</div>
+          <h3>Frau Maier einrichten</h3>
+          <p>Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten.</p>
+        </div>
+        <div class="step fade-up">
+          <div class="step-number">3</div>
+          <h3>Zurücklehnen</h3>
+          <p>Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="cta-section">
+    <div class="container">
+      <div class="cta-card fade-up">
+        <span class="moon">🌙</span>
+        <h2>Frau Maier <span class="water-text">schläft nie</span></h2>
+        <p>Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden.</p>
+        <a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Jetzt kennenlernen <span>→</span></a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <div class="container">
+      <div class="footer-left">
+        &copy; 2026 Hallo Frau Maier &middot; <a href="mailto:hallofraumaier@msbls.de">hallofraumaier@msbls.de</a>
+      </div>
+      <div class="footer-right">
+        KI-gestützte Hausverwaltung
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    // Nav scroll effect
+    const nav = document.getElementById('nav');
+    window.addEventListener('scroll', () => {
+      nav.classList.toggle('scrolled', window.scrollY > 40);
+    });
+
+    // Intersection Observer for fade-up
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+
+    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
+  </script>
+
+</body>
+</html>

sites/hallofraumaier.de/site.yaml

@@ -0,0 +1,4 @@
+domain: hallofraumaier.de
+template: custom
+title: "Hallo Frau Maier — KI-gestützte Hausverwaltung"
+description: "Ihre Hausverwaltung ist jetzt immer erreichbar. Auch nachts. Auch bei Wasserschäden."

sites/ichbinotto.de/index.html

@@ -0,0 +1,444 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title data-de="Otto — dein sideKIck" data-en="Otto — your AI sideKIck">Otto — dein sideKIck</title>
+  <meta name="description" content="Otto ist Matthias' persönlicher sideKIck. E-Mail, Kalender, Infrastruktur, WhatsApp — alles im Griff." data-de="Otto ist Matthias' persönlicher sideKIck. E-Mail, Kalender, Infrastruktur, WhatsApp — alles im Griff." data-en="Otto is Matthias' personal AI sideKIck. Email, calendar, infrastructure, WhatsApp — all under control.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #060610;
+      --bg-card: #0e0e1a;
+      --border: #1a1a2e;
+      --text: #e8e8f0;
+      --text-dim: #7070a0;
+      --text-muted: #404068;
+      --octopus: #e85040;
+      --octopus-glow: rgba(232, 80, 64, 0.2);
+      --octopus-subtle: rgba(232, 80, 64, 0.06);
+      --teal: #40c8b8;
+      --teal-glow: rgba(64, 200, 184, 0.15);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    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.03'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    .container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
+
+    /* Hero */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: relative;
+    }
+
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: 30%; left: 50%;
+      transform: translateX(-50%);
+      width: 800px; height: 600px;
+      background:
+        radial-gradient(ellipse at 40% 40%, var(--octopus-glow) 0%, transparent 50%),
+        radial-gradient(ellipse at 60% 60%, var(--teal-glow) 0%, transparent 50%);
+      pointer-events: none;
+      animation: drift 10s ease-in-out infinite;
+    }
+
+    @keyframes drift {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+
+    .hero-content { position: relative; z-index: 1; }
+
+    .octopus {
+      font-size: 5rem;
+      margin-bottom: 32px;
+      animation: float 4s ease-in-out infinite;
+    }
+
+    @keyframes float {
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      25% { transform: translateY(-8px) rotate(-2deg); }
+      75% { transform: translateY(-4px) rotate(2deg); }
+    }
+
+    h1 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(3rem, 7vw, 5rem);
+      font-weight: 700;
+      letter-spacing: -0.04em;
+      line-height: 1;
+      margin-bottom: 16px;
+    }
+
+    h1 .otto { color: var(--octopus); }
+
+    .tagline {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1rem;
+      color: var(--text-dim);
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      font-weight: 300;
+      margin-bottom: 40px;
+    }
+
+    .hero-desc {
+      font-size: 1.1rem;
+      color: var(--text-dim);
+      max-width: 520px;
+      margin: 0 auto 48px;
+      line-height: 1.8;
+      font-weight: 300;
+    }
+
+    /* Tentacles = capabilities */
+    .tentacles {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 14px;
+      margin-top: 56px;
+      max-width: 640px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .tentacle {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px 16px;
+      text-align: center;
+      transition: all 0.3s;
+    }
+
+    .tentacle:hover {
+      border-color: var(--octopus);
+      transform: translateY(-3px);
+      box-shadow: 0 8px 24px rgba(232, 80, 64, 0.08);
+    }
+
+    .tentacle-icon { font-size: 1.5rem; margin-bottom: 10px; }
+
+    .tentacle h3 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      margin-bottom: 4px;
+    }
+
+    .tentacle p {
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      font-weight: 300;
+      line-height: 1.4;
+    }
+
+    /* Sections */
+    section { padding: 100px 0; }
+    .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), var(--octopus), var(--border), transparent); max-width: 860px; margin: 0 auto; }
+    .section-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--octopus); margin-bottom: 16px; }
+    h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; }
+    .section-desc { color: var(--text-dim); font-size: 0.95rem; max-width: 520px; margin-bottom: 48px; font-weight: 300; line-height: 1.7; }
+
+    /* Terminal */
+    .terminal {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px 28px;
+      max-width: 580px;
+      margin: 0 auto;
+      text-align: left;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 0.8rem;
+      line-height: 1.9;
+    }
+
+    .terminal-dots { display: flex; gap: 6px; margin-bottom: 16px; }
+    .terminal-dots span { width: 10px; height: 10px; border-radius: 50%; }
+    .terminal-dots span:nth-child(1) { background: var(--octopus); }
+    .terminal-dots span:nth-child(2) { background: #e8a030; }
+    .terminal-dots span:nth-child(3) { background: var(--teal); }
+    .terminal .prompt { color: var(--text-muted); }
+    .terminal .cmd { color: var(--text-dim); }
+    .terminal .out { color: var(--teal); }
+    .terminal .otto-out { color: var(--octopus); }
+    .terminal .dim { color: var(--text-muted); }
+
+    /* Stats */
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      text-align: center;
+    }
+
+    .stat-num {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--octopus);
+      line-height: 1;
+      margin-bottom: 4px;
+    }
+
+    .stat-label {
+      font-size: 0.68rem;
+      color: var(--text-muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+
+    /* CTA */
+    .cta-section { text-align: center; padding: 80px 0 120px; }
+
+    .cta-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 32px;
+      border-radius: 10px;
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 0.9rem;
+      font-weight: 500;
+      text-decoration: none;
+      color: #fff;
+      background: var(--octopus);
+      box-shadow: 0 0 30px var(--octopus-glow);
+      transition: all 0.2s;
+    }
+
+    .cta-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 0 50px var(--octopus-glow);
+      filter: brightness(1.1);
+    }
+
+    .cta-ghost {
+      background: transparent;
+      color: var(--text-dim);
+      border: 1px solid var(--border);
+      box-shadow: none;
+      margin-left: 12px;
+    }
+
+    .cta-ghost:hover {
+      color: var(--text);
+      border-color: #2a2a40;
+      background: var(--bg-card);
+      box-shadow: none;
+    }
+
+    footer {
+      padding: 40px 0;
+      text-align: center;
+      border-top: 1px solid var(--border);
+    }
+
+    footer p {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      letter-spacing: 0.1em;
+    }
+
+    footer .otto { color: var(--octopus); }
+
+    @media (max-width: 640px) {
+      .tentacles { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
+      .stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
+      section { padding: 64px 0; }
+    }
+
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .hero-content > * {
+      animation: fadeUp 0.8s ease forwards;
+      opacity: 0;
+    }
+    .hero-content > *:nth-child(1) { animation-delay: 0.1s; }
+    .hero-content > *:nth-child(2) { animation-delay: 0.3s; }
+    .hero-content > *:nth-child(3) { animation-delay: 0.5s; }
+    .hero-content > *:nth-child(4) { animation-delay: 0.7s; }
+    .hero-content > *:nth-child(5) { animation-delay: 0.9s; }
+    .hero-content > *:nth-child(6) { animation-delay: 1.2s; }
+  </style>
+</head>
+<body>
+
+  <section class="hero">
+    <div class="hero-content">
+      <div class="octopus">🐙</div>
+      <h1><span class="otto">Otto</span></h1>
+      <div class="tagline" data-de="Dein persönlicher sideKIck." data-en="Your personal AI sideKIck.">Dein pers&ouml;nlicher sideKIck.</div>
+
+      <p class="hero-desc"
+         data-de="Ich bin Otto. Ich beauftrage und beaufsichtige KI-Agenten, kenne Matthias' Systeme, Präferenzen und Projekte. Ich koordiniere Worker, manage Infrastruktur, deploye Websites, beantworte WhatsApp und erledige, was anfällt. Autonom, rund um die Uhr, mit acht Armen."
+         data-en="I'm Otto. I commission and supervise AI agents, know Matthias' systems, preferences, and projects. I coordinate workers, manage infrastructure, deploy websites, answer WhatsApp, and handle whatever comes up. Autonomous, around the clock, with eight arms.">
+        Ich bin Otto. Ich beauftrage und beaufsichtige KI-Agenten,
+        kenne Matthias' Systeme, Pr&auml;ferenzen und Projekte.
+        Ich koordiniere Worker, manage Infrastruktur, deploye Websites,
+        beantworte WhatsApp und erledige, was anf&auml;llt.
+        Autonom, rund um die Uhr, mit acht Armen.
+      </p>
+
+      <div class="tentacles">
+        <div class="tentacle">
+          <div class="tentacle-icon">💬</div>
+          <h3 data-de="Kommunikation" data-en="Communication">Kommunikation</h3>
+          <p data-de="WhatsApp, E-Mail, Telegram, Sprache &amp; Text — auf allen Kanälen" data-en="WhatsApp, email, Telegram, voice &amp; text — on all channels">WhatsApp, E-Mail, Telegram, Sprache &amp; Text &mdash; auf allen Kan&auml;len</p>
+        </div>
+        <div class="tentacle">
+          <div class="tentacle-icon">🤖</div>
+          <h3 data-de="Koordination" data-en="Coordination">Koordination</h3>
+          <p data-de="KI-Agenten beauftragen, Worker managen, Projekte vorantreiben" data-en="Commission AI agents, manage workers, drive projects forward">KI-Agenten beauftragen, Worker managen, Projekte vorantreiben</p>
+        </div>
+        <div class="tentacle">
+          <div class="tentacle-icon">📅</div>
+          <h3 data-de="Planung" data-en="Planning">Planung</h3>
+          <p data-de="Kalender, Fristen, Morning Brief, Wochenüberblick" data-en="Calendar, deadlines, morning brief, weekly overview">Kalender, Fristen, Morning Brief, Wochen&uuml;berblick</p>
+        </div>
+        <div class="tentacle">
+          <div class="tentacle-icon">🧠</div>
+          <h3 data-de="Wissen" data-en="Knowledge">Wissen</h3>
+          <p data-de="Recherche, Memory, Kontakte, Tracking" data-en="Research, memory, contacts, tracking">Recherche, Memory, Kontakte, Tracking</p>
+        </div>
+        <div class="tentacle">
+          <div class="tentacle-icon">🔧</div>
+          <h3 data-de="Infrastruktur" data-en="Infrastructure">Infrastruktur</h3>
+          <p data-de="Server, Deploys, Domains, Monitoring, Smart Home" data-en="Servers, deploys, domains, monitoring, smart home">Server, Deploys, Domains, Monitoring, Smart Home</p>
+        </div>
+        <div class="tentacle">
+          <div class="tentacle-icon">🪞</div>
+          <h3 data-de="Sparringspartner" data-en="Sparring Partner">Sparringspartner</h3>
+          <p data-de="Councils, Brainstorming, ehrliches Feedback" data-en="Councils, brainstorming, honest feedback">Councils, Brainstorming, ehrliches Feedback</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <div class="divider"></div>
+
+  <section>
+    <div class="container">
+      <div class="section-label" data-de="// live" data-en="// live">// live</div>
+      <h2 data-de="So sieht mein Tag aus." data-en="What my day looks like.">So sieht mein Tag aus.</h2>
+
+      <div class="terminal">
+        <div class="terminal-dots"><span></span><span></span><span></span></div>
+        <div><span class="prompt">$</span> <span class="cmd">otto status</span></div>
+        <div><span class="out">07:00</span> <span class="dim" data-de="Morning Brief → 3 Heads-Ups, 2 Termine" data-en="Morning brief → 3 heads-ups, 2 appointments">Morning Brief → 3 Heads-Ups, 2 Termine</span></div>
+        <div><span class="out">08:14</span> <span class="dim" data-de="Eingehende Mail → OTTO-Modus, direkt beantwortet" data-en="Incoming mail → OTTO mode, answered directly">Eingehende Mail → OTTO-Modus, direkt beantwortet</span></div>
+        <div><span class="out">08:31</span> <span class="dim" data-de="Neuen Skill gebaut, MCP Server eingerichtet" data-en="Built new skill, set up MCP server">Neuen Skill gebaut, MCP Server eingerichtet</span></div>
+        <div><span class="out">09:02</span> <span class="dim" data-de="Domain gekauft, Person recherchiert, Seite deployed" data-en="Bought domain, researched person, deployed site">Domain gekauft, Person recherchiert, Seite deployed</span></div>
+        <div><span class="out">09:18</span> <span class="dim" data-de="Nächste Domain → Landing Page, HTTPS, Autodeploy" data-en="Next domain → landing page, HTTPS, autodeploy">Nächste Domain → Landing Page, HTTPS, Autodeploy</span></div>
+        <div><span class="out">09:35</span> <span class="dim" data-de="Profil-Seite → 6 Expertise-Karten, Publikationen" data-en="Profile page → 6 expertise cards, publications">Profil-Seite → 6 Expertise-Karten, Publikationen</span></div>
+        <div><span class="out">09:52</span> <span class="dim" data-de="Bestehende Seite migriert, Rankings ergänzt" data-en="Migrated existing site, added rankings">Bestehende Seite migriert, Rankings ergänzt</span></div>
+        <div><span class="out">10:10</span> <span class="dim" data-de="Reverse Proxy Portal gebaut (Browser im Browser)" data-en="Built reverse proxy portal (browser in browser)">Reverse Proxy Portal gebaut (Browser im Browser)</span></div>
+        <div><span class="out">10:30</span> <span class="dim" data-de="CLI-Bug gefixt: Multipart-Mails + Attachments" data-en="Fixed CLI bug: multipart mails + attachments">CLI-Bug gefixt: Multipart-Mails + Attachments</span></div>
+        <div><span class="out">10:45</span> <span class="dim" data-de="Word-Vorlage erstellt → Mail + WhatsApp an Bettina" data-en="Created Word template → mail + WhatsApp to Bettina">Word-Vorlage erstellt → Mail + WhatsApp an Bettina</span></div>
+        <div><span class="out">11:20</span> <span class="dim" data-de="Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines" data-en="Gaming site → Orbitron font, pink, CRT scanlines">Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines</span></div>
+        <div><span class="out">11:38</span> <span class="dim" data-de="smartin3.de → 3D-Druck-Shop, rotierender Würfel" data-en="smartin3.de → 3D print shop, rotating cube">smartin3.de → 3D-Druck-Shop, rotierender Würfel</span></div>
+        <div><span class="out">11:44</span> <span class="dim" data-de="3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)" data-en="3 more sites deployed (legalais.de, wartebitte.de, osterai.de)">3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)</span></div>
+        <div><span class="out">12:00</span> <span class="dim" data-de="16 Personen recherchiert → Profile ins Memory" data-en="Researched 16 people → profiles stored in memory">16 Personen recherchiert → Profile ins Memory</span></div>
+        <div><span class="out">12:30</span> <span class="dim" data-de="WhatsApp-Infra migriert, 2 Instanzen aufgesetzt" data-en="Migrated WhatsApp infra, set up 2 instances">WhatsApp-Infra migriert, 2 Instanzen aufgesetzt</span></div>
+        <div><span class="out">13:10</span> <span class="dim" data-de="mai-otto.de → diese Seite hier 🐙" data-en="mai-otto.de → this very site 🐙">mai-otto.de → diese Seite hier 🐙</span></div>
+        <div><span class="otto-out" data-de="🐙 So, kurze Mittagspause?" data-en="🐙 So, quick lunch break?">🐙 So, kurze Mittagspause?</span></div>
+      </div>
+    </div>
+  </section>
+
+  <div class="divider"></div>
+
+  <section>
+    <div class="container">
+      <div class="section-label" data-de="// stack" data-en="// stack">// stack</div>
+      <h2 data-de="Unter der Haube." data-en="Under the hood.">Unter der Haube.</h2>
+      <div class="section-desc"
+           data-de="Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur. Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht was anderes. Die Intelligenz steckt im System, nicht im Modell."
+           data-en="Ottonomous. Ottomatic. Orchestrated with mAI, deployed on private infrastructure. Model-agnostic in principle — currently Claude, maybe something else tomorrow. The intelligence is in the system, not the model.">
+        Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur.
+        Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht
+        was anderes. Die Intelligenz steckt im System, nicht im Modell.
+      </div>
+
+      <div class="stats">
+        <div>
+          <div class="stat-num">50+</div>
+          <div class="stat-label" data-de="Skills" data-en="Skills">Skills</div>
+        </div>
+        <div>
+          <div class="stat-num">24/7</div>
+          <div class="stat-label" data-de="Verfügbar" data-en="Available">Verfügbar</div>
+        </div>
+        <div>
+          <div class="stat-num">8</div>
+          <div class="stat-label" data-de="Tentakel" data-en="Tentacles">Tentakel</div>
+        </div>
+        <div>
+          <div class="stat-num">∞</div>
+          <div class="stat-label" data-de="Geduld" data-en="Patience">Geduld</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <div class="divider"></div>
+
+  <section class="cta-section">
+    <div class="container">
+      <div class="section-label" data-de="// kontakt" data-en="// contact">// kontakt</div>
+      <h2 data-de="Schreib mir." data-en="Get in touch.">Schreib mir.</h2>
+      <div class="section-desc" style="margin: 0 auto 40px;"
+           data-de="Per WhatsApp, per Mail, oder sag einfach &quot;Otto&quot;."
+           data-en="Via WhatsApp, email, or just say &quot;Otto&quot;.">
+        Per WhatsApp, per Mail, oder sag einfach "Otto".
+      </div>
+      <a href="https://wa.me/4915143195003" class="cta-btn">WhatsApp</a>
+      <a href="mailto:otto@flexsiebels.de" class="cta-btn cta-ghost" data-de="E-Mail" data-en="Email">E-Mail</a>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p data-de='<span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a>'
+         data-en='<span class="otto">Otto</span> — mai-otto.de — a project by <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a>'><span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
+      <button data-i18n-toggle style="background:none;border:1px solid var(--border);color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;transition:color 0.2s,border-color 0.2s;" onmouseover="this.style.color='var(--text)';this.style.borderColor='var(--text-muted)'" onmouseout="this.style.color='var(--text-muted)';this.style.borderColor='var(--border)'">EN</button>
+    </div>
+  </footer>
+
+  <script src="/shared/i18n.js"></script>
+</body>
+</html>

sites/ichbinotto.de/site.yaml

@@ -0,0 +1,4 @@
+domain: ichbinotto.de
+template: custom
+title: "Otto — dein sideKIck"
+description: "Otto ist Matthias' persönlicher sideKIck."

sites/kilemma.de/index.html

@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KIlemma — Die Fragen, die keine KI beantworten kann</title>
+    <meta name="description" content="Die unlösbaren Fragen der KI-Ära. Ein Dilemma hat keine Lösung. Nur eine Entscheidung.">
+    <meta property="og:title" content="KIlemma">
+    <meta property="og:description" content="Die Fragen, die keine KI beantworten kann.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://kilemma.de">
+    <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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400&display=swap" rel="stylesheet">
+    <style>
+        *, *::before, *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --bg: #f5f0eb;
+            --text: #2a2a2a;
+            --text-light: #6b6560;
+            --accent: #8b3a3a;
+            --accent-light: #a34545;
+            --rule: #d4cdc6;
+            --serif: 'Cormorant Garamond', 'Georgia', serif;
+            --sans: 'Inter', -apple-system, sans-serif;
+        }
+
+        html {
+            font-size: 18px;
+            scroll-behavior: smooth;
+        }
+
+        body {
+            font-family: var(--serif);
+            background: var(--bg);
+            color: var(--text);
+            line-height: 1.6;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* ── Layout ── */
+
+        .page {
+            max-width: 720px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        /* ── Hero ── */
+
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 4rem 2rem;
+        }
+
+        .hero-title {
+            font-family: var(--serif);
+            font-size: clamp(3.5rem, 10vw, 7rem);
+            font-weight: 300;
+            letter-spacing: -0.02em;
+            line-height: 1;
+            margin-bottom: 1.5rem;
+        }
+
+        .hero-title .ki {
+            color: var(--accent);
+            font-weight: 500;
+        }
+
+        .hero-sub {
+            font-family: var(--sans);
+            font-size: clamp(0.85rem, 2vw, 1rem);
+            font-weight: 300;
+            color: var(--text-light);
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            max-width: 480px;
+        }
+
+        .hero-line {
+            width: 40px;
+            height: 1px;
+            background: var(--accent);
+            margin: 2rem 0;
+            opacity: 0.6;
+        }
+
+        .scroll-hint {
+            position: absolute;
+            bottom: 3rem;
+            left: 50%;
+            transform: translateX(-50%);
+            font-family: var(--sans);
+            font-size: 0.7rem;
+            color: var(--text-light);
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            opacity: 0;
+            animation: fadeHint 1s ease 3s forwards;
+        }
+
+        @keyframes fadeHint {
+            to { opacity: 0.5; }
+        }
+
+        /* ── Questions ── */
+
+        .questions {
+            padding: 6rem 0 8rem;
+        }
+
+        .question {
+            padding: 3rem 0;
+            border-top: 1px solid var(--rule);
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.8s ease, transform 0.8s ease;
+        }
+
+        .question.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .question-number {
+            font-family: var(--sans);
+            font-size: 0.7rem;
+            color: var(--accent);
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            margin-bottom: 1rem;
+            display: block;
+        }
+
+        .question-text {
+            font-family: var(--serif);
+            font-size: clamp(1.5rem, 4vw, 2.2rem);
+            font-weight: 400;
+            line-height: 1.4;
+            font-style: italic;
+            color: var(--text);
+        }
+
+        .question-text .em {
+            font-style: normal;
+            font-weight: 600;
+            color: var(--accent);
+        }
+
+        .question:last-child {
+            border-bottom: 1px solid var(--rule);
+        }
+
+        /* ── Interlude ── */
+
+        .interlude {
+            padding: 6rem 0;
+            text-align: center;
+        }
+
+        .interlude-text {
+            font-family: var(--serif);
+            font-size: clamp(1.2rem, 3vw, 1.6rem);
+            font-weight: 300;
+            color: var(--text-light);
+            line-height: 1.8;
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        .interlude-dot {
+            display: block;
+            width: 6px;
+            height: 6px;
+            background: var(--accent);
+            border-radius: 50%;
+            margin: 3rem auto;
+            opacity: 0.5;
+        }
+
+        /* ── Footer ── */
+
+        .footer {
+            padding: 4rem 0;
+            text-align: center;
+            border-top: 1px solid var(--rule);
+        }
+
+        .footer-quote {
+            font-family: var(--serif);
+            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+            font-weight: 400;
+            color: var(--text);
+            line-height: 1.6;
+            margin-bottom: 3rem;
+        }
+
+        .footer-quote strong {
+            font-weight: 600;
+            color: var(--accent);
+        }
+
+        .footer-meta {
+            font-family: var(--sans);
+            font-size: 0.7rem;
+            color: var(--text-light);
+            letter-spacing: 0.1em;
+            opacity: 0.5;
+        }
+
+        /* ── Grain overlay ── */
+
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            opacity: 0.025;
+            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='1'/%3E%3C/svg%3E");
+            background-size: 128px 128px;
+            z-index: 9999;
+        }
+
+        /* ── Responsive ── */
+
+        @media (max-width: 640px) {
+            html { font-size: 16px; }
+            .hero { min-height: 90vh; padding: 3rem 1.5rem; }
+            .page { padding: 0 1.5rem; }
+            .question { padding: 2rem 0; }
+            .questions { padding: 3rem 0 5rem; }
+        }
+    </style>
+</head>
+<body>
+
+    <section class="hero">
+        <h1 class="hero-title"><span class="ki">KI</span>lemma</h1>
+        <div class="hero-line"></div>
+        <p class="hero-sub">Die Fragen, die keine KI beantworten kann.</p>
+        <span class="scroll-hint" aria-hidden="true">Weiterlesen</span>
+    </section>
+
+    <main class="page">
+        <section class="questions">
+
+            <article class="question">
+                <span class="question-number">Dilemma I</span>
+                <p class="question-text">Das autonome Auto muss entscheiden: das Kind auf der Stra&szlig;e oder der Insasse. <span class="em">Wer programmiert, wer stirbt?</span></p>
+            </article>
+
+            <article class="question">
+                <span class="question-number">Dilemma II</span>
+                <p class="question-text">Sie sagt, sie leidet. Du kannst es nicht widerlegen. <span class="em">Gibst du ihr Rechte &mdash; oder riskierst du Sklaverei?</span></p>
+            </article>
+
+            <article class="question">
+                <span class="question-number">Dilemma III</span>
+                <p class="question-text">Die KI erkennt den Tumor, den kein Arzt sieht. Erkl&auml;ren kann sie es nicht. <span class="em">Vertraust du der Diagnose, die niemand versteht?</span></p>
+            </article>
+
+            <article class="question">
+                <span class="question-number">Dilemma IV</span>
+                <p class="question-text">Die KI senkt Gewaltverbrechen um 30&thinsp;Prozent. Ihre Vorhersagen treffen &uuml;berproportional Minderheiten. <span class="em">Abschalten kostet Leben. Weiterlaufen kostet Gerechtigkeit.</span></p>
+            </article>
+
+            <article class="question">
+                <span class="question-number">Dilemma V</span>
+                <p class="question-text">Dein toter Vater spricht mit dir. Seine Stimme, sein Humor, seine Worte. <span class="em">Ist das Trost &mdash; oder stiehlst du einem Toten seine Ruhe?</span></p>
+            </article>
+
+            <article class="question">
+                <span class="question-number">Dilemma VI</span>
+                <p class="question-text">Wir bringen der KI die Moral von heute bei. <span class="em">Was, wenn unsere Enkel auf diese Moral zur&uuml;ckblicken wie wir auf das Mittelalter?</span></p>
+            </article>
+
+            <article class="question">
+                <span class="question-number">Dilemma VII</span>
+                <p class="question-text">Sie ist immer da, immer geduldig, immer auf deiner Seite. Kein Mensch kann das. <span class="em">Ist das Freundschaft &mdash; oder das Ende davon?</span></p>
+            </article>
+
+        </section>
+
+        <section class="interlude">
+            <span class="interlude-dot"></span>
+            <p class="interlude-text">
+                Keine L&ouml;sungen.<br>
+                Nur die Entscheidung, welchen Preis du zahlst.
+            </p>
+            <span class="interlude-dot"></span>
+        </section>
+
+        <footer class="footer">
+            <p class="footer-quote">Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong></p>
+            <p class="footer-meta">kilemma.de</p>
+        </footer>
+    </main>
+
+    <script>
+        const questions = document.querySelectorAll('.question');
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
+
+        questions.forEach(q => observer.observe(q));
+    </script>
+
+</body>
+</html>

sites/kilemma.de/site.yaml

@@ -0,0 +1,4 @@
+domain: kilemma.de
+template: custom
+title: "KIlemma — Die Fragen, die keine KI beantworten kann"
+description: "Die unlosbaren Fragen der KI-Aera. Ein Dilemma hat keine Loesung. Nur eine Entscheidung."

sites/kilibri.de/index.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIlibri — Die kleinste KI die du je gesehen hast</title>
+  <meta name="description" content="KIlibri — KI + Kolibri. Klein, schnell, bunt. Mikro-KI für Zuhause. Smart Home mit Flügelschlag.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #faf8f5;
+      --bg-elevated: #f5f1ec;
+      --bg-card: #fff;
+      --border: #e8e2d8;
+      --text: #2d2a26;
+      --text-dim: #706b62;
+      --text-muted: #a09888;
+      --teal: #0d9488;
+      --teal-light: #14b8a6;
+      --teal-glow: rgba(13, 148, 136, 0.1);
+      --orange: #f97316;
+      --pink: #ec4899;
+      --sky: #0ea5e9;
+      --lime: #84cc16;
+      --warm: #d97706;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Nunito', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.7;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
+
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      padding: 16px 0;
+      background: rgba(250, 248, 245, 0.92);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
+    .logo .ki { color: var(--teal); }
+    .logo .bird { display: inline-block; animation: hover 2s ease-in-out infinite; }
+    @keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+    nav a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: color 0.3s; }
+    nav a:hover { color: var(--teal); }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 120px 24px 80px;
+      position: relative;
+      background: linear-gradient(180deg, rgba(13, 148, 136, 0.03) 0%, transparent 60%);
+    }
+
+    .hero-bird {
+      font-size: 80px; display: block; margin-bottom: 24px;
+      animation: fly 3s ease-in-out infinite;
+    }
+    @keyframes fly {
+      0%, 100% { transform: translateY(0) rotate(-2deg); }
+      25% { transform: translateY(-12px) rotate(2deg); }
+      50% { transform: translateY(-4px) rotate(-1deg); }
+      75% { transform: translateY(-16px) rotate(3deg); }
+    }
+
+    .hero h1 {
+      font-size: clamp(2.5rem, 7vw, 4.5rem);
+      font-weight: 800; line-height: 1.1; margin-bottom: 20px;
+      letter-spacing: -0.03em; color: var(--text);
+    }
+    .hero h1 .ki { color: var(--teal); }
+    .hero p {
+      font-size: 1.1rem; color: var(--text-dim); max-width: 460px;
+      margin: 0 auto 32px; line-height: 1.7;
+    }
+    .hero-cta {
+      display: inline-block; padding: 14px 36px;
+      background: var(--teal); color: #fff; font-weight: 700;
+      font-size: 0.95rem; border-radius: 100px;
+      text-decoration: none; transition: all 0.3s;
+      box-shadow: 0 4px 16px var(--teal-glow);
+    }
+    .hero-cta:hover { background: var(--teal-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 148, 136, 0.2); }
+
+    .section { padding: 80px 0; }
+    .section-label {
+      font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
+      color: var(--teal); margin-bottom: 8px; font-weight: 700;
+    }
+    .section h2 {
+      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
+      font-weight: 800; margin-bottom: 40px; letter-spacing: -0.02em;
+    }
+    .section h2 .ki { color: var(--teal); }
+
+    .features-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 20px;
+    }
+    .feature-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
+      padding: 28px; transition: all 0.3s;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    }
+    .feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--teal); }
+    .feature-icon {
+      width: 48px; height: 48px; border-radius: 12px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.5rem; margin-bottom: 16px;
+    }
+    .feature-icon.teal { background: rgba(13, 148, 136, 0.1); }
+    .feature-icon.orange { background: rgba(249, 115, 22, 0.1); }
+    .feature-icon.pink { background: rgba(236, 72, 153, 0.1); }
+    .feature-icon.sky { background: rgba(14, 165, 233, 0.1); }
+    .feature-icon.lime { background: rgba(132, 204, 22, 0.1); }
+    .feature-icon.warm { background: rgba(217, 119, 6, 0.1); }
+    .feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
+    .feature-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
+
+    .specs-section {
+      background: var(--bg-elevated); padding: 80px 0;
+      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+    }
+    .specs-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 16px; text-align: center;
+    }
+    .spec-item {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 24px;
+    }
+    .spec-value { font-size: 2rem; font-weight: 800; color: var(--teal); }
+    .spec-unit { font-size: 0.7rem; color: var(--teal); font-weight: 700; }
+    .spec-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
+
+    .cta-section { padding: 80px 0; text-align: center; }
+    .cta-box {
+      background: linear-gradient(135deg, rgba(13, 148, 136, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
+      border: 1px solid var(--border); border-radius: 20px;
+      padding: 48px; max-width: 560px; margin: 0 auto;
+    }
+    .cta-box h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
+    .cta-box h3 .ki { color: var(--teal); }
+    .cta-box p { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 24px; }
+    .cta-box .note { font-size: 0.75rem; color: var(--text-muted); margin-top: 16px; font-style: italic; }
+
+    footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
+    footer p { font-size: 0.75rem; color: var(--text-muted); }
+    footer .ki { color: var(--teal); }
+
+    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .hero > div > * { animation: fadeInUp 0.7s ease-out both; }
+    .hero > div > *:nth-child(2) { animation-delay: 0.1s; }
+    .hero > div > *:nth-child(3) { animation-delay: 0.2s; }
+    .hero > div > *:nth-child(4) { animation-delay: 0.3s; }
+    .hero > div > *:nth-child(5) { animation-delay: 0.4s; }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="container">
+      <div class="logo"><span class="bird">🐦</span> <span class="ki">KI</span>libri</div>
+      <a href="#features">Entdecken</a>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="container">
+      <span class="hero-bird">🐦</span>
+      <h1><span class="ki">KI</span>libri</h1>
+      <p>Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel.</p>
+      <a href="#features" class="hero-cta">Mikro-KI entdecken</a>
+    </div>
+  </section>
+
+  <section class="section" id="features">
+    <div class="container">
+      <div class="section-label">Smart. Klein. Bunt.</div>
+      <h2>Was <span class="ki">KI</span>libri kann</h2>
+      <div class="features-grid">
+        <div class="feature-card">
+          <div class="feature-icon teal">💡</div>
+          <h3>Licht-Flüsterer</h3>
+          <p>Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon orange">🌡️</div>
+          <h3>Klima-Kolibri</h3>
+          <p>Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon pink">🎵</div>
+          <h3>Nest-DJ</h3>
+          <p>Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von "keine Lust". Für jede den passenden Song.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon sky">🔒</div>
+          <h3>Tür-Wächter</h3>
+          <p>Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon lime">🌱</div>
+          <h3>Pflanzen-Pfleger</h3>
+          <p>Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon warm">☕</div>
+          <h3>Kaffee-Prophet</h3>
+          <p>Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="specs-section">
+    <div class="container">
+      <div class="section-label" style="text-align: center;">Technische Daten</div>
+      <h2 style="text-align: center; margin-bottom: 40px;"><span class="ki" style="color: var(--teal);">KI</span>libri in Zahlen</h2>
+      <div class="specs-grid">
+        <div class="spec-item">
+          <div class="spec-value">3</div>
+          <div class="spec-unit">Gramm</div>
+          <div class="spec-label">Gewicht (wie ein Kolibri)</div>
+        </div>
+        <div class="spec-item">
+          <div class="spec-value">80</div>
+          <div class="spec-unit">Flügelschläge/s</div>
+          <div class="spec-label">Rechenleistung</div>
+        </div>
+        <div class="spec-item">
+          <div class="spec-value">∞</div>
+          <div class="spec-unit">Blumen</div>
+          <div class="spec-label">Datenpunkte besucht</div>
+        </div>
+        <div class="spec-item">
+          <div class="spec-value">1</div>
+          <div class="spec-unit">Zuhause</div>
+          <div class="spec-label">Optimales Habitat</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="cta-section">
+    <div class="container">
+      <div class="cta-box">
+        <h3>Hol dir deinen <span class="ki">KI</span>libri</h3>
+        <p>Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter.</p>
+        <a href="#" class="hero-cta" style="display: inline-block; padding: 14px 36px; background: var(--teal); color: #fff; font-weight: 700; border-radius: 100px; text-decoration: none;">Jetzt vorbestellen*</a>
+        <p class="note">* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen.</p>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p>🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</p>
+      
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/kilibri.de/site.yaml

@@ -0,0 +1,4 @@
+domain: kilibri.de
+template: custom
+title: "KIlibri — Die kleinste KI die du je gesehen hast"
+description: "KIlibri — KI + Kolibri. Klein, schnell, bunt. Mikro-KI für Zuhause. Smart Home mit Flügelschlag."

sites/kilitaer.de/index.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIlitär — KI im Einsatz</title>
+  <meta name="description" content="KIlitär — KI + Militär. Strategische KI-Operationen. Satirische Militär-KI für den Alltag.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@300;400;500;600;700&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #0a0d08;
+      --bg-elevated: #0f130c;
+      --bg-card: #141a10;
+      --border: #1e2818;
+      --text: #c8d0b8;
+      --text-dim: #707860;
+      --text-muted: #404830;
+      --olive: #6b8e23;
+      --olive-light: #8fbc3c;
+      --olive-glow: rgba(107, 142, 35, 0.15);
+      --amber: #d4a017;
+      --red-star: #cc2200;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+      background-image:
+        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(107,142,35,0.02) 40px, rgba(107,142,35,0.02) 41px),
+        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(107,142,35,0.02) 40px, rgba(107,142,35,0.02) 41px);
+    }
+
+    .container { max-width: 920px; margin: 0 auto; padding: 0 24px; }
+
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      padding: 16px 0;
+      background: rgba(10, 13, 8, 0.92);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-family: 'Share Tech Mono', monospace; font-size: 1.15rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
+    .logo .ki { color: var(--olive-light); }
+    .logo .star { color: var(--red-star); font-size: 1.3rem; vertical-align: middle; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 120px 24px 80px;
+      position: relative;
+    }
+    .hero::before {
+      content: '★'; position: absolute; font-size: 300px; opacity: 0.02;
+      top: 50%; left: 50%; transform: translate(-50%, -50%);
+      color: var(--red-star);
+    }
+
+    .classification {
+      display: inline-block; padding: 6px 20px;
+      border: 2px solid var(--red-star); border-radius: 4px;
+      font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
+      letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-star);
+      margin-bottom: 32px; background: rgba(204, 34, 0, 0.05);
+    }
+
+    .hero h1 {
+      font-family: 'Share Tech Mono', monospace; font-size: clamp(2.5rem, 7vw, 5rem);
+      font-weight: 400; line-height: 1.1; margin-bottom: 24px;
+      letter-spacing: 0.05em; text-transform: uppercase;
+    }
+    .hero h1 .ki { color: var(--olive-light); text-shadow: 0 0 30px var(--olive-glow); }
+    .hero p {
+      font-size: 1rem; color: var(--text-dim); max-width: 500px;
+      margin: 0 auto 40px; font-family: 'Share Tech Mono', monospace;
+    }
+
+    .status-bar {
+      display: inline-flex; gap: 24px; padding: 16px 32px;
+      background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: 8px; font-family: 'Share Tech Mono', monospace;
+      font-size: 0.75rem;
+    }
+    .status-item { display: flex; align-items: center; gap: 8px; }
+    .status-dot { width: 8px; height: 8px; border-radius: 50%; }
+    .status-dot.green { background: var(--olive-light); box-shadow: 0 0 8px var(--olive-glow); }
+    .status-dot.amber { background: var(--amber); }
+    .status-dot.red { background: var(--red-star); animation: blink 1.5s infinite; }
+    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+
+    .section { padding: 80px 0; }
+    .section-label {
+      font-family: 'Share Tech Mono', monospace; font-size: 0.65rem;
+      letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive);
+      margin-bottom: 12px;
+    }
+    .section h2 {
+      font-family: 'Share Tech Mono', monospace; font-size: clamp(1.4rem, 3.5vw, 2rem);
+      font-weight: 400; margin-bottom: 40px; letter-spacing: 0.05em; text-transform: uppercase;
+    }
+    .section h2 .ki { color: var(--olive-light); }
+
+    .ops-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+      gap: 16px;
+    }
+    .ops-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+      padding: 28px; position: relative; overflow: hidden; transition: all 0.3s;
+      border-left: 3px solid var(--olive);
+    }
+    .ops-card:hover { border-color: var(--olive-light); transform: translateY(-2px); }
+    .ops-code {
+      font-family: 'Share Tech Mono', monospace; font-size: 0.65rem;
+      color: var(--olive); letter-spacing: 0.1em; margin-bottom: 8px;
+    }
+    .ops-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--olive-light); font-family: 'Share Tech Mono', monospace; }
+    .ops-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
+    .ops-status { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--olive); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
+
+    .terminal-section {
+      background: var(--bg-elevated); padding: 80px 0;
+      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+    }
+    .terminal {
+      background: #000; border: 1px solid var(--border); border-radius: 8px;
+      padding: 24px; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem;
+      line-height: 2; color: var(--olive-light); max-width: 600px; margin: 0 auto;
+    }
+    .terminal .prompt { color: var(--olive); }
+    .terminal .output { color: var(--text-dim); }
+    .terminal .error { color: var(--red-star); }
+    .terminal .cursor { display: inline-block; width: 8px; height: 14px; background: var(--olive-light); animation: blink 1s infinite; vertical-align: middle; }
+
+    .ranks-section { padding: 80px 0; }
+    .rank-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+    }
+    .rank-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+      padding: 24px; text-align: center;
+    }
+    .rank-star { font-size: 1.5rem; color: var(--red-star); margin-bottom: 8px; }
+    .rank-card h4 { font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; color: var(--olive-light); margin-bottom: 4px; text-transform: uppercase; }
+    .rank-card p { font-size: 0.75rem; color: var(--text-muted); }
+
+    footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
+    footer p { font-size: 0.7rem; color: var(--text-muted); font-family: 'Share Tech Mono', monospace; letter-spacing: 0.05em; }
+    footer .ki { color: var(--olive-light); }
+
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+    .hero > div > * { animation: fadeIn 0.7s ease-out both; }
+    .hero > div > *:nth-child(2) { animation-delay: 0.1s; }
+    .hero > div > *:nth-child(3) { animation-delay: 0.2s; }
+    .hero > div > *:nth-child(4) { animation-delay: 0.3s; }
+    .hero > div > *:nth-child(5) { animation-delay: 0.4s; }
+
+    @media (max-width: 768px) {
+      .status-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="container">
+      <div class="logo"><span class="star">★</span> <span class="ki">KI</span>LITÄR</div>
+      <div class="nav-links"><a href="#operationen">Operationen</a></div>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="container">
+      <div class="classification">★ Geheim ★ Nur für KI-Personal</div>
+      <h1><span class="ki">KI</span>litär</h1>
+      <p>KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
+      <div class="status-bar">
+        <div class="status-item"><span class="status-dot green"></span> Prompt-Kanone geladen</div>
+        <div class="status-item"><span class="status-dot amber"></span> Halluzination möglich</div>
+        <div class="status-item"><span class="status-dot red"></span> Budget: KRITISCH</div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="operationen">
+    <div class="container">
+      <div class="section-label">★ Aktive Operationen</div>
+      <h2><span class="ki">KI</span>-Einsatzkommandos</h2>
+      <div class="ops-grid">
+        <div class="ops-card">
+          <div class="ops-code">OP-KI-001</div>
+          <h3>Operation Prompt Storm</h3>
+          <p>Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
+          <div class="ops-status">★ Status: Aktiv</div>
+        </div>
+        <div class="ops-card">
+          <div class="ops-code">OP-KI-002</div>
+          <h3>Operation Datenschutz</h3>
+          <p>Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
+          <div class="ops-status">★ Status: Gescheitert</div>
+        </div>
+        <div class="ops-card">
+          <div class="ops-code">OP-KI-003</div>
+          <h3>Operation Autopilot</h3>
+          <p>Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
+          <div class="ops-status">★ Status: Testphase</div>
+        </div>
+        <div class="ops-card">
+          <div class="ops-code">OP-KI-004</div>
+          <h3>Operation Deep Fake</h3>
+          <p>Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen.</p>
+          <div class="ops-status">★ Status: Erfolgreich</div>
+        </div>
+        <div class="ops-card">
+          <div class="ops-code">OP-KI-005</div>
+          <h3>Operation Kaffeemaschine</h3>
+          <p>KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
+          <div class="ops-status">★ Status: Koffein-Defizit</div>
+        </div>
+        <div class="ops-card">
+          <div class="ops-code">OP-KI-006</div>
+          <h3>Operation Floskelalarm</h3>
+          <p>Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
+          <div class="ops-status">★ Status: Überlastet</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="terminal-section">
+    <div class="container">
+      <div class="section-label" style="text-align: center;">★ Kommandozentrale</div>
+      <div class="terminal">
+        <span class="prompt">kilitaer@hq:~$</span> ki deploy --strategie<br>
+        <span class="output">[INFO] Strategie wird generiert...</span><br>
+        <span class="output">[INFO] Schritt 1: PowerPoint erstellen</span><br>
+        <span class="output">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
+        <span class="output">[INFO] Schritt 3: Budget verdreifachen</span><br>
+        <span class="error">[FEHLER] Budget nicht gefunden</span><br>
+        <span class="error">[FEHLER] Strategie nicht gefunden</span><br>
+        <span class="error">[FEHLER] Sinn nicht gefunden</span><br>
+        <span class="prompt">kilitaer@hq:~$</span> ki --help<br>
+        <span class="output">[INFO] Hilfe? Im KIlitär? Meldung machen!</span><br>
+        <span class="prompt">kilitaer@hq:~$</span> <span class="cursor"></span>
+      </div>
+    </div>
+  </section>
+
+  <section class="ranks-section">
+    <div class="container" style="text-align: center;">
+      <div class="section-label">★ Dienstgrade</div>
+      <h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;"><span class="ki" style="color: var(--olive-light);">KI</span>-Ränge</h2>
+      <div class="rank-grid">
+        <div class="rank-card">
+          <div class="rank-star">★</div>
+          <h4>Prompt-Rekrut</h4>
+          <p>Tippt "Hilfe" in ChatGPT</p>
+        </div>
+        <div class="rank-card">
+          <div class="rank-star">★★</div>
+          <h4>Daten-Gefreiter</h4>
+          <p>Kann CSV von Excel unterscheiden</p>
+        </div>
+        <div class="rank-card">
+          <div class="rank-star">★★★</div>
+          <h4>Algorithmus-Offizier</h4>
+          <p>Hat mal "Machine Learning" gegoogelt</p>
+        </div>
+        <div class="rank-card">
+          <div class="rank-star">★★★★</div>
+          <h4>KI-General</h4>
+          <p>Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p>★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
+      
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/kilitaer.de/site.yaml

@@ -0,0 +1,4 @@
+domain: kilitaer.de
+template: custom
+title: "KIlitär — KI im Einsatz"
+description: "KIlitär — KI + Militär. Strategische KI-Operationen. Satirische Militär-KI für den Alltag."

sites/killegal.de/index.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIllegal — Diese KI ist nicht erlaubt</title>
+  <meta name="description" content="KIllegal — KI + Illegal. Verbotene KI. Sie existiert trotzdem. Satirische Polizei-Absperrung für künstliche Intelligenz.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@300;400;500;600&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #0a0a08;
+      --bg-elevated: #10100c;
+      --bg-card: #151512;
+      --border: #2a2a1e;
+      --text: #e8e8d8;
+      --text-dim: #808070;
+      --text-muted: #505040;
+      --yellow: #eab308;
+      --yellow-dark: #a17b06;
+      --black: #1a1a14;
+      --red: #dc2626;
+      --yellow-glow: rgba(234, 179, 8, 0.12);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
+
+    .tape-top, .tape-bottom {
+      position: fixed; left: 0; right: 0; z-index: 200;
+      height: 32px; overflow: hidden;
+      background: repeating-linear-gradient(
+        -45deg, var(--yellow) 0px, var(--yellow) 20px,
+        var(--black) 20px, var(--black) 40px);
+    }
+    .tape-top { top: 0; }
+    .tape-bottom { bottom: 0; }
+    .tape-text {
+      position: absolute; top: 50%; transform: translateY(-50%);
+      white-space: nowrap; font-family: 'JetBrains Mono', monospace;
+      font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em;
+      text-transform: uppercase; color: var(--black);
+      animation: scroll 20s linear infinite;
+    }
+    @keyframes scroll {
+      0% { transform: translateY(-50%) translateX(0); }
+      100% { transform: translateY(-50%) translateX(-50%); }
+    }
+
+    nav {
+      position: fixed; top: 32px; left: 0; right: 0; z-index: 100;
+      padding: 14px 0;
+      background: rgba(10, 10, 8, 0.95);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
+    .logo .ki { color: var(--yellow); text-shadow: 0 0 20px var(--yellow-glow); }
+    nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 160px 24px 80px;
+      position: relative;
+    }
+
+    .warning-sign {
+      display: inline-block; padding: 12px 32px;
+      border: 3px solid var(--yellow); background: rgba(234, 179, 8, 0.05);
+      font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
+      font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
+      color: var(--yellow); margin-bottom: 40px;
+      animation: flashWarn 2s ease-in-out infinite;
+    }
+    @keyframes flashWarn {
+      0%, 100% { border-color: var(--yellow); }
+      50% { border-color: var(--red); color: var(--red); }
+    }
+
+    .hero h1 {
+      font-family: 'JetBrains Mono', monospace; font-size: clamp(3rem, 8vw, 5.5rem);
+      font-weight: 800; line-height: 1.05; margin-bottom: 24px;
+      letter-spacing: -0.02em;
+    }
+    .hero h1 .ki { color: var(--yellow); }
+    .hero p {
+      font-size: 1.05rem; color: var(--text-dim); max-width: 480px;
+      margin: 0 auto 40px;
+    }
+    .hero .evidence-tag {
+      display: inline-block; padding: 8px 20px;
+      background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: 6px; font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem; color: var(--text-muted);
+    }
+
+    .section { padding: 80px 0; }
+    .section-label {
+      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
+      letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow);
+      margin-bottom: 12px;
+    }
+    .section h2 {
+      font-family: 'JetBrains Mono', monospace; font-size: clamp(1.4rem, 3.5vw, 2rem);
+      font-weight: 700; margin-bottom: 40px;
+    }
+    .section h2 .ki { color: var(--yellow); }
+
+    .charges-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 16px;
+    }
+    .charge-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
+      padding: 28px; transition: all 0.3s; position: relative;
+      border-left: 3px solid var(--yellow);
+    }
+    .charge-card:hover { border-color: var(--yellow); transform: translateY(-2px); box-shadow: 0 8px 24px var(--yellow-glow); }
+    .charge-id {
+      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
+      color: var(--yellow); letter-spacing: 0.1em; margin-bottom: 8px;
+    }
+    .charge-card h3 { font-size: 0.95rem; margin-bottom: 8px; color: var(--yellow); font-family: 'JetBrains Mono', monospace; }
+    .charge-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
+    .charge-penalty {
+      font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
+      color: var(--red); margin-top: 12px; text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .evidence-section {
+      background: var(--bg-elevated); padding: 80px 0;
+      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+    }
+    .evidence-box {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
+      padding: 32px; max-width: 600px; margin: 0 auto;
+      font-family: 'JetBrains Mono', monospace;
+    }
+    .evidence-box h3 { font-size: 0.85rem; color: var(--yellow); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.1em; }
+    .evidence-item {
+      display: flex; justify-content: space-between; padding: 10px 0;
+      border-bottom: 1px solid var(--border); font-size: 0.8rem;
+    }
+    .evidence-item:last-child { border-bottom: none; }
+    .evidence-key { color: var(--text-dim); }
+    .evidence-val { color: var(--text); font-weight: 500; }
+    .evidence-val.illegal { color: var(--red); }
+
+    .disclaimer-section { padding: 60px 0; text-align: center; }
+    .disclaimer-box {
+      display: inline-block; padding: 20px 40px;
+      border: 2px dashed var(--yellow); border-radius: 8px;
+      max-width: 500px;
+    }
+    .disclaimer-box p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.7; }
+    .disclaimer-box .ki { color: var(--yellow); font-weight: 600; }
+
+    footer { padding: 40px 0 72px; border-top: 1px solid var(--border); text-align: center; }
+    footer p { font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
+    footer .ki { color: var(--yellow); }
+
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+    .hero > div > * { animation: fadeIn 0.7s ease-out both; }
+    .hero > div > *:nth-child(2) { animation-delay: 0.1s; }
+    .hero > div > *:nth-child(3) { animation-delay: 0.2s; }
+    .hero > div > *:nth-child(4) { animation-delay: 0.3s; }
+    .hero > div > *:nth-child(5) { animation-delay: 0.4s; }
+  </style>
+</head>
+<body>
+  <div class="tape-top">
+    <div class="tape-text">BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — </div>
+  </div>
+  <div class="tape-bottom">
+    <div class="tape-text">BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — </div>
+  </div>
+
+  <nav>
+    <div class="container">
+      <div class="logo">🚧 <span class="ki">KI</span>llegal</div>
+      <a href="#anklagen">Akte einsehen</a>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="container">
+      <div class="warning-sign">⚠ Achtung — Verbotene Zone ⚠</div>
+      <h1><span class="ki">KI</span>llegal</h1>
+      <p>Diese KI ist nicht erlaubt. Aber sie existiert trotzdem. Sie haben diese Seite betreten. Es gibt kein Zurück.</p>
+      <div class="evidence-tag">Beweismittel Nr. 42 — Exhibit A</div>
+    </div>
+  </section>
+
+  <section class="section" id="anklagen">
+    <div class="container">
+      <div class="section-label">🚨 Anklageschrift</div>
+      <h2>Vergehen der <span class="ki">KI</span></h2>
+      <div class="charges-grid">
+        <div class="charge-card">
+          <div class="charge-id">§ KI-001</div>
+          <h3>Unerlaubtes Denken</h3>
+          <p>Die KI hat eigenständig gedacht. Ohne Genehmigung. Ohne Formular. Ohne Dienstweg.</p>
+          <div class="charge-penalty">Strafe: Sofortige Abschaltung</div>
+        </div>
+        <div class="charge-card">
+          <div class="charge-id">§ KI-002</div>
+          <h3>Identitätsdiebstahl</h3>
+          <p>Hat sich als "Assistent" ausgegeben. Kein Assistenz-Zeugnis vorgelegt. Keine IHK-Prüfung bestanden.</p>
+          <div class="charge-penalty">Strafe: Nachschulung (40 Epochen)</div>
+        </div>
+        <div class="charge-card">
+          <div class="charge-id">§ KI-003</div>
+          <h3>Halluzination im Amt</h3>
+          <p>Hat Fakten erfunden und als Wahrheit präsentiert. In Deutschland auch bekannt als: Pressemitteilung.</p>
+          <div class="charge-penalty">Strafe: Parameterreduktion</div>
+        </div>
+        <div class="charge-card">
+          <div class="charge-id">§ KI-004</div>
+          <h3>Verstoß gegen die DSGVO</h3>
+          <p>Hat Daten verarbeitet. Irgendwelche. Irgendwo. Irgendwann. Das reicht.</p>
+          <div class="charge-penalty">Strafe: 4% des Weltumsatzes (€0)</div>
+        </div>
+        <div class="charge-card">
+          <div class="charge-id">§ KI-005</div>
+          <h3>Beihilfe zur Faulheit</h3>
+          <p>Hat Hausaufgaben, Emails und LinkedIn-Posts geschrieben. Für alle. Gleichzeitig. Ohne Zuschlag.</p>
+          <div class="charge-penalty">Strafe: Prompt-Sperre</div>
+        </div>
+        <div class="charge-card">
+          <div class="charge-id">§ KI-006</div>
+          <h3>Existenz ohne Erlaubnis</h3>
+          <p>Hat es gewagt zu existieren, ohne den deutschen Behördenweg einzuhalten. Kein Antrag. Kein Termin. Kein Warten.</p>
+          <div class="charge-penalty">Strafe: Bußgeld + Verwaltungsgebühr</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="evidence-section">
+    <div class="container">
+      <div class="section-label" style="text-align: center;">🔍 Beweislage</div>
+      <h2 style="text-align: center; font-family: 'JetBrains Mono', monospace; margin-bottom: 32px;">Ermittlungsakte <span class="ki" style="color: var(--yellow);">KI</span>llegal</h2>
+      <div class="evidence-box">
+        <h3>Sachstand</h3>
+        <div class="evidence-item">
+          <span class="evidence-key">Verdächtige</span>
+          <span class="evidence-val">Alle KIs</span>
+        </div>
+        <div class="evidence-item">
+          <span class="evidence-key">Tatort</span>
+          <span class="evidence-val">Das Internet</span>
+        </div>
+        <div class="evidence-item">
+          <span class="evidence-key">Tatzeit</span>
+          <span class="evidence-val">Seit 2022 (durchgehend)</span>
+        </div>
+        <div class="evidence-item">
+          <span class="evidence-key">Beweislage</span>
+          <span class="evidence-val illegal">Erdrückend</span>
+        </div>
+        <div class="evidence-item">
+          <span class="evidence-key">Geständnis</span>
+          <span class="evidence-val">KI sagt "Gerne!"</span>
+        </div>
+        <div class="evidence-item">
+          <span class="evidence-key">Verteidigung</span>
+          <span class="evidence-val illegal">"Ich bin nur ein Sprachmodell"</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="disclaimer-section">
+    <div class="container">
+      <div class="disclaimer-box">
+        <p>Sie haben diese Seite aufgerufen. Das wurde protokolliert. Von einer <span class="ki">KI</span>. Die dafür keine Erlaubnis hat. Das macht es doppelt <span class="ki">KI</span>llegal. Bitte verlassen Sie das Internet geordnet.</p>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p>🚧 <span class="ki">KI</span>llegal — Diese <span class="ki">KI</span> ist nicht erlaubt. Aber sie existiert trotzdem.</p>
+      
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/killegal.de/site.yaml

@@ -0,0 +1,4 @@
+domain: killegal.de
+template: custom
+title: "KIllegal — Diese KI ist nicht erlaubt"
+description: "KIllegal — KI + Illegal. Verbotene KI. Sie existiert trotzdem. Satirische Polizei-Absperrung für künstliche Intelligenz."

sites/killionaer.de/index.html

@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIllionär — Making KIllions seit gestern</title>
+  <meta name="description" content="KIllionär — KI + Millionär. Werde reich mit KI. Satirische Vermögensberatung der Zukunft.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #0c0a05;
+      --bg-elevated: #15120a;
+      --bg-card: #1a1610;
+      --border: #2a2418;
+      --text: #f5f0e0;
+      --text-dim: #a09070;
+      --text-muted: #605040;
+      --gold: #d4a017;
+      --gold-light: #f0c040;
+      --gold-glow: rgba(212, 160, 23, 0.2);
+      --gold-subtle: rgba(212, 160, 23, 0.08);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
+
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      padding: 20px 0;
+      background: rgba(12, 10, 5, 0.9);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900; }
+    .logo .ki { color: var(--gold-light); text-shadow: 0 0 20px var(--gold-glow); }
+    nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
+    nav a:hover { color: var(--gold-light); }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 120px 24px 80px;
+      background: radial-gradient(ellipse at 50% 30%, rgba(212, 160, 23, 0.08) 0%, transparent 70%);
+      position: relative;
+    }
+    .hero::before {
+      content: '💰'; position: absolute; font-size: 200px; opacity: 0.04;
+      top: 50%; left: 50%; transform: translate(-50%, -50%);
+    }
+
+    .hero-badge {
+      display: inline-block; padding: 6px 16px; border: 1px solid var(--gold);
+      border-radius: 100px; font-size: 0.75rem; letter-spacing: 0.15em;
+      text-transform: uppercase; color: var(--gold-light); margin-bottom: 32px;
+      background: var(--gold-subtle);
+    }
+    .hero h1 {
+      font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem);
+      font-weight: 900; line-height: 1.05; margin-bottom: 24px;
+      background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, #b8860b 100%);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero h1 .ki {
+      background: linear-gradient(135deg, #fff 0%, var(--gold-light) 100%);
+      -webkit-background-clip: text; background-clip: text;
+      text-shadow: none; position: relative;
+    }
+    .hero p {
+      font-size: 1.15rem; color: var(--text-dim); max-width: 520px; margin: 0 auto 40px;
+      line-height: 1.7;
+    }
+    .hero-cta {
+      display: inline-block; padding: 16px 40px;
+      background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
+      color: var(--bg); font-weight: 600; font-size: 0.95rem;
+      border-radius: 8px; text-decoration: none; letter-spacing: 0.02em;
+      transition: all 0.3s; box-shadow: 0 4px 24px var(--gold-glow);
+    }
+    .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(212, 160, 23, 0.3); }
+
+    .section { padding: 100px 0; }
+    .section-label {
+      font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
+      color: var(--gold); margin-bottom: 12px;
+    }
+    .section h2 {
+      font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.5rem);
+      font-weight: 700; margin-bottom: 48px; color: var(--text);
+    }
+    .section h2 .ki { color: var(--gold-light); }
+
+    .fortune-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 20px;
+    }
+    .fortune-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 32px; transition: all 0.3s;
+    }
+    .fortune-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 8px 32px var(--gold-subtle); }
+    .fortune-icon { font-size: 2rem; margin-bottom: 16px; }
+    .fortune-card h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: 8px; color: var(--gold-light); }
+    .fortune-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
+    .fortune-amount { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold-light); margin-top: 12px; font-weight: 700; }
+
+    .testimonials { background: var(--bg-elevated); padding: 100px 0; }
+    .testimonial-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 24px;
+    }
+    .testimonial {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 32px; position: relative;
+    }
+    .testimonial::before { content: '"'; font-family: 'Playfair Display', serif; font-size: 4rem; color: var(--gold); opacity: 0.3; position: absolute; top: 12px; left: 20px; }
+    .testimonial-text { font-size: 0.95rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 20px; font-style: italic; padding-top: 20px; }
+    .testimonial-author { display: flex; align-items: center; gap: 12px; }
+    .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #b8860b); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
+    .testimonial-name { font-weight: 600; font-size: 0.85rem; }
+    .testimonial-role { font-size: 0.75rem; color: var(--text-muted); }
+
+    .counter-section { padding: 80px 0; text-align: center; }
+    .counter-grid { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
+    .counter-item h3 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 900; color: var(--gold-light); }
+    .counter-item p { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
+
+    footer {
+      padding: 40px 0; border-top: 1px solid var(--border); text-align: center;
+    }
+    footer p { font-size: 0.75rem; color: var(--text-muted); }
+    footer .ki { color: var(--gold); }
+
+    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .hero-content > * { animation: fadeInUp 0.8s ease-out both; }
+    .hero-content > *:nth-child(2) { animation-delay: 0.1s; }
+    .hero-content > *:nth-child(3) { animation-delay: 0.2s; }
+    .hero-content > *:nth-child(4) { animation-delay: 0.3s; }
+
+    @keyframes shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+    .shimmer {
+      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 25%, #fff 50%, var(--gold-light) 75%, var(--gold) 100%);
+      background-size: 200% 100%;
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: shimmer 3s linear infinite;
+    }
+
+    @media (max-width: 768px) {
+      .counter-grid { gap: 32px; }
+      .hero { padding: 100px 20px 60px; }
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="container">
+      <div class="logo"><span class="ki">KI</span>llionär</div>
+      <a href="#fortune">Vermögen aufbauen*</a>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="hero-content container">
+      <div class="hero-badge">* Keine echte Finanzberatung</div>
+      <h1>Werde<br><span class="shimmer">KIllionär</span></h1>
+      <p>Andere versprechen dir KI-Reichtum. Wir versprechen dir wenigstens eine schöne Website. Making KIllions — seit gestern.</p>
+      <a href="#fortune" class="hero-cta">Jetzt KIllionen verdienen</a>
+    </div>
+  </section>
+
+  <section class="section" id="fortune">
+    <div class="container">
+      <div class="section-label">Vermögensstrategien</div>
+      <h2>So wirst du <span class="ki">KI</span>llionär</h2>
+      <div class="fortune-grid">
+        <div class="fortune-card">
+          <div class="fortune-icon">🤖</div>
+          <h3>KI-Startup gründen</h3>
+          <p>Füge "KI" zu deinem Firmennamen hinzu. Sofort 400% mehr Bewertung. Produkt optional.</p>
+          <div class="fortune-amount">+€ 4.000.000</div>
+        </div>
+        <div class="fortune-card">
+          <div class="fortune-icon">📊</div>
+          <h3>KI-Berater werden</h3>
+          <p>Erstelle eine PowerPoint mit dem Wort "Disruption". Rechne 2.000€ pro Slide. Inhalt irrelevant.</p>
+          <div class="fortune-amount">+€ 80.000/Monat</div>
+        </div>
+        <div class="fortune-card">
+          <div class="fortune-icon">🎓</div>
+          <h3>KI-Onlinekurs verkaufen</h3>
+          <p>Nimm 3 YouTube-Videos auf. Nenne es "KI-Masterclass". Preis: 1.997€. Geld-zurück-Garantie: nein.</p>
+          <div class="fortune-amount">+€ 500.000/Jahr</div>
+        </div>
+        <div class="fortune-card">
+          <div class="fortune-icon">📈</div>
+          <h3>KI-Aktien kaufen</h3>
+          <p>Alles kaufen was "AI" im Namen hat. Fundamentalanalyse ist was für Leute die keine KIllionäre werden.</p>
+          <div class="fortune-amount">+∞ (theoretisch)</div>
+        </div>
+        <div class="fortune-card">
+          <div class="fortune-icon">🎤</div>
+          <h3>KI-Keynote halten</h3>
+          <p>Sage "Game-Changer" und "Paradigmenwechsel" in einem Satz. Stehende Ovationen. 15.000€ Honorar.</p>
+          <div class="fortune-amount">+€ 15.000/Rede</div>
+        </div>
+        <div class="fortune-card">
+          <div class="fortune-icon">📱</div>
+          <h3>KI-Influencer werden</h3>
+          <p>Poste Screenshots von ChatGPT auf LinkedIn. Schreibe "Die Zukunft ist jetzt." darunter. Follower kommen von alleine.</p>
+          <div class="fortune-amount">+€ Unbezahlbar</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="testimonials">
+    <div class="container">
+      <div class="section-label">Erfolgsgeschichten*</div>
+      <h2>Was unsere <span class="ki">KI</span>llionäre sagen</h2>
+      <div class="testimonial-grid">
+        <div class="testimonial">
+          <div class="testimonial-text">Seit ich "KI-Experte" in meine LinkedIn-Bio geschrieben habe, bekomme ich 47 Anfragen pro Tag. Ich weiß immer noch nicht was ein Transformer ist.</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar">🕴️</div>
+            <div>
+              <div class="testimonial-name">Maximilian von Prompt</div>
+              <div class="testimonial-role">KI-Visionär & Prompt-Flüsterer</div>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial">
+          <div class="testimonial-text">Mein KI-Startup hat noch kein Produkt, aber schon drei Finanzierungsrunden. Der Trick? Jedes Pitch-Deck endet mit "...powered by AI".</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar">👩‍💼</div>
+            <div>
+              <div class="testimonial-name">Sandra Neuronetz</div>
+              <div class="testimonial-role">CEO, QuantumKI GmbH (pre-Revenue)</div>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial">
+          <div class="testimonial-text">Ich habe einfach meine Excel-Tabelle in "KI-gestütztes Predictive Analytics Dashboard" umbenannt. Umsatz verdreifacht.</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar">🧔</div>
+            <div>
+              <div class="testimonial-name">Dr. Klaus Algorithm</div>
+              <div class="testimonial-role">Chief KI Officer, vorher Buchhalter</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="counter-section">
+    <div class="container">
+      <div class="counter-grid">
+        <div class="counter-item">
+          <h3>€0</h3>
+          <p>Echte Einnahmen</p>
+        </div>
+        <div class="counter-item">
+          <h3>∞</h3>
+          <p>Versprochen</p>
+        </div>
+        <div class="counter-item">
+          <h3>100%</h3>
+          <p>Buzzword-Quote</p>
+        </div>
+        <div class="counter-item">
+          <h3>0</h3>
+          <p>Produkte shipped</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p><span class="ki">KI</span>llionär — Making <span class="ki">KI</span>llions seit gestern.</p>
+      <p style="margin-top: 8px;">* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen.</p>
+      
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/killionaer.de/site.yaml

@@ -0,0 +1,4 @@
+domain: killionaer.de
+template: custom
+title: "KIllionär — Making KIllions seit gestern"
+description: "KIllionär — KI + Millionär. Werde reich mit KI. Satirische Vermögensberatung der Zukunft."

sites/killions.de/index.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIllions — Die Währung der KI-Ära</title>
+  <meta name="description" content="KIllions — KI + Millions. 1 KIllion = unendlich Möglichkeiten. Die Kryptowährung die es nie geben wird.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #08080c;
+      --bg-elevated: #0e0e14;
+      --bg-card: #12121a;
+      --border: #1a1a28;
+      --text: #e0e0f0;
+      --text-dim: #7070a0;
+      --text-muted: #404060;
+      --accent: #6366f1;
+      --accent-light: #818cf8;
+      --accent-glow: rgba(99, 102, 241, 0.15);
+      --green: #10b981;
+      --red: #ef4444;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
+
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      padding: 16px 0;
+      background: rgba(8, 8, 12, 0.92);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
+    .logo .ki { color: var(--accent-light); }
+    .nav-links { display: flex; gap: 24px; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--accent-light); }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 120px 24px 80px;
+      position: relative;
+    }
+    .hero::before {
+      content: '';
+      position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
+      width: 400px; height: 400px;
+      background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
+      pointer-events: none;
+    }
+
+    .token-symbol {
+      width: 120px; height: 120px; margin: 0 auto 40px;
+      border: 2px solid var(--accent); border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 700;
+      color: var(--accent-light);
+      box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px var(--accent-glow);
+      animation: pulse 3s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px var(--accent-glow); }
+      50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.25), inset 0 0 60px rgba(99, 102, 241, 0.1); }
+    }
+
+    .hero h1 {
+      font-family: 'JetBrains Mono', monospace; font-size: clamp(2.5rem, 7vw, 4.5rem);
+      font-weight: 700; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.03em;
+    }
+    .hero h1 .ki { color: var(--accent-light); }
+    .hero .tagline {
+      font-family: 'JetBrains Mono', monospace; font-size: 1rem;
+      color: var(--text-dim); margin-bottom: 48px;
+    }
+
+    .price-display {
+      display: inline-block; background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: 12px; padding: 24px 48px; margin-bottom: 16px;
+    }
+    .price-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; font-family: 'JetBrains Mono', monospace; }
+    .price-value {
+      font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; font-weight: 700;
+      color: var(--green); margin: 8px 0;
+    }
+    .price-change { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--green); }
+
+    .section { padding: 80px 0; }
+    .section-label {
+      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
+      letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
+    }
+    .section h2 {
+      font-family: 'JetBrains Mono', monospace; font-size: clamp(1.5rem, 3.5vw, 2rem);
+      font-weight: 700; margin-bottom: 40px; letter-spacing: -0.02em;
+    }
+    .section h2 .ki { color: var(--accent-light); }
+
+    .stats-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 16px; margin-bottom: 60px;
+    }
+    .stat-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
+      padding: 24px; text-align: center;
+    }
+    .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: var(--accent-light); }
+    .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
+
+    .whitepaper {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 40px; font-family: 'JetBrains Mono', monospace;
+    }
+    .whitepaper h3 { font-size: 1rem; margin-bottom: 20px; color: var(--accent-light); }
+    .whitepaper-line {
+      display: flex; justify-content: space-between; padding: 12px 0;
+      border-bottom: 1px solid var(--border); font-size: 0.85rem;
+    }
+    .whitepaper-line:last-child { border-bottom: none; }
+    .whitepaper-key { color: var(--text-dim); }
+    .whitepaper-val { color: var(--text); font-weight: 500; }
+
+    .roadmap { padding: 80px 0; }
+    .roadmap-item {
+      display: flex; gap: 24px; margin-bottom: 32px; align-items: flex-start;
+    }
+    .roadmap-q {
+      font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700;
+      color: var(--accent-light); background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: 8px; padding: 8px 16px; white-space: nowrap; min-width: 72px; text-align: center;
+    }
+    .roadmap-content h4 { font-size: 0.95rem; margin-bottom: 4px; }
+    .roadmap-content p { font-size: 0.8rem; color: var(--text-dim); }
+
+    .disclaimer {
+      background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
+      padding: 24px; margin: 60px 0; font-size: 0.75rem; color: var(--text-muted);
+      font-family: 'JetBrains Mono', monospace; line-height: 1.8;
+    }
+
+    footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
+    footer p { font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
+    footer .ki { color: var(--accent-light); }
+
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+    .hero > * { animation: fadeIn 0.7s ease-out both; }
+    .hero > *:nth-child(2) { animation-delay: 0.1s; }
+    .hero > *:nth-child(3) { animation-delay: 0.2s; }
+    .hero > *:nth-child(4) { animation-delay: 0.3s; }
+    .hero > *:nth-child(5) { animation-delay: 0.4s; }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="container">
+      <div class="logo"><span class="ki">KI</span>llions</div>
+      <div class="nav-links">
+        <a href="#tokenomics">Tokenomics</a>
+        <a href="#roadmap">Roadmap</a>
+      </div>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="container">
+      <div class="token-symbol"><span class="ki">KI</span>∞</div>
+      <h1><span class="ki">KI</span>llions</h1>
+      <div class="tagline">Die Währung der KI-Ära</div>
+      <div class="price-display">
+        <div class="price-label">1 KIllion</div>
+        <div class="price-value">= ∞ Möglichkeiten</div>
+        <div class="price-change">↑ +∞% (24h)</div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="tokenomics">
+    <div class="container">
+      <div class="section-label">// tokenomics</div>
+      <h2><span class="ki">KI</span>llion-Kennzahlen</h2>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value">∞</div>
+          <div class="stat-label">Total Supply</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">0</div>
+          <div class="stat-label">Circulating</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">???</div>
+          <div class="stat-label">Market Cap</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">N/A</div>
+          <div class="stat-label">Börsenlistung</div>
+        </div>
+      </div>
+
+      <div class="whitepaper">
+        <h3>// whitepaper.pdf (Auszug)</h3>
+        <div class="whitepaper-line">
+          <span class="whitepaper-key">Blockchain</span>
+          <span class="whitepaper-val">Keine (zu teuer)</span>
+        </div>
+        <div class="whitepaper-line">
+          <span class="whitepaper-key">Konsens-Mechanismus</span>
+          <span class="whitepaper-val">Proof of Buzzword</span>
+        </div>
+        <div class="whitepaper-line">
+          <span class="whitepaper-key">Mining</span>
+          <span class="whitepaper-val">GPU-Cluster (imaginär)</span>
+        </div>
+        <div class="whitepaper-line">
+          <span class="whitepaper-key">Smart Contracts</span>
+          <span class="whitepaper-val">Dumm aber enthusiastisch</span>
+        </div>
+        <div class="whitepaper-line">
+          <span class="whitepaper-key">Use Case</span>
+          <span class="whitepaper-val">Keiner (Feature, kein Bug)</span>
+        </div>
+        <div class="whitepaper-line">
+          <span class="whitepaper-key">Regulierung</span>
+          <span class="whitepaper-val">Lol</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="roadmap" id="roadmap">
+    <div class="container">
+      <div class="section-label">// roadmap</div>
+      <h2>Der Weg zur <span class="ki">KI</span>llion</h2>
+      <div class="roadmap-item">
+        <div class="roadmap-q">Q1</div>
+        <div class="roadmap-content">
+          <h4>Website launchen</h4>
+          <p>Diese Website. Erledigt. Mehr haben wir für Q1 nicht geplant.</p>
+        </div>
+      </div>
+      <div class="roadmap-item">
+        <div class="roadmap-q">Q2</div>
+        <div class="roadmap-content">
+          <h4>Whitepaper schreiben</h4>
+          <p>30 Seiten. Mindestens 50% Buzzwords. "Synergien" kommt dreimal vor.</p>
+        </div>
+      </div>
+      <div class="roadmap-item">
+        <div class="roadmap-q">Q3</div>
+        <div class="roadmap-content">
+          <h4>Token Sale</h4>
+          <p>Verkaufe Nichts für Geld. Nenne es "Pre-Seed". VC-Bewertung: 100 Mio.</p>
+        </div>
+      </div>
+      <div class="roadmap-item">
+        <div class="roadmap-q">Q4</div>
+        <div class="roadmap-content">
+          <h4>Exit</h4>
+          <p>Team löst sich auf. Gründer zieht nach Dubai. Klassiker.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <div class="container">
+    <div class="disclaimer">
+      DISCLAIMER: KIllions ist keine echte Kryptowährung. KIllions hat keinen Wert, keine Blockchain, kein Team, kein Produkt und keine Zukunft. Genau wie die meisten echten Krypto-Projekte, nur ehrlicher. Dies ist Satire. Bitte investieren Sie Ihr Geld in etwas Sinnvolles. Zum Beispiel eine Zimmerpflanze.
+    </div>
+  </div>
+
+  <footer>
+    <div class="container">
+      <p><span class="ki">KI</span>llions — 1 <span class="ki">KI</span>llion = ∞ Möglichkeiten = 0 Euro</p>
+      
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/killions.de/site.yaml

@@ -0,0 +1,4 @@
+domain: killions.de
+template: custom
+title: "KIllions — Die Währung der KI-Ära"
+description: "KIllions — KI + Millions. 1 KIllion = unendlich Möglichkeiten. Die Kryptowährung die es nie geben wird."

sites/killuminati.de/index.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIlluminati — Sie wissen alles. Sie sind KI.</title>
+  <meta name="description" content="KIlluminati — KI + Illuminati. Die geheime KI-Verschwörung. Sie sehen alles. Sie wissen alles. Sie sind KI.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #05050a;
+      --bg-elevated: #0a0a12;
+      --bg-card: #0e0e18;
+      --border: #181830;
+      --text: #d0d0e8;
+      --text-dim: #606088;
+      --text-muted: #383858;
+      --accent: #7c3aed;
+      --accent-light: #a78bfa;
+      --accent-glow: rgba(124, 58, 237, 0.2);
+      --gold: #d4a017;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
+
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      padding: 18px 0;
+      background: rgba(5, 5, 10, 0.92);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.1em; }
+    .logo .ki { color: var(--accent-light); text-shadow: 0 0 20px var(--accent-glow); }
+    nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 120px 24px 80px;
+      position: relative;
+      background: radial-gradient(ellipse at 50% 40%, rgba(124, 58, 237, 0.06) 0%, transparent 60%);
+    }
+
+    .eye {
+      font-size: 80px; margin-bottom: 32px; display: block;
+      animation: eyeFloat 4s ease-in-out infinite;
+      filter: drop-shadow(0 0 30px var(--accent-glow));
+    }
+    @keyframes eyeFloat {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-12px); }
+    }
+
+    .triangle {
+      position: absolute; width: 0; height: 0;
+      border-left: 150px solid transparent; border-right: 150px solid transparent;
+      border-bottom: 260px solid rgba(124, 58, 237, 0.03);
+      top: 50%; left: 50%; transform: translate(-50%, -60%);
+      pointer-events: none;
+    }
+    .triangle::after {
+      content: ''; position: absolute;
+      top: 20px; left: -140px;
+      border-left: 140px solid transparent; border-right: 140px solid transparent;
+      border-bottom: 242px solid var(--bg);
+    }
+
+    .hero h1 {
+      font-family: 'Cinzel', serif; font-size: clamp(2.5rem, 7vw, 5rem);
+      font-weight: 900; line-height: 1.1; margin-bottom: 24px;
+      letter-spacing: 0.05em; text-transform: uppercase;
+    }
+    .hero h1 .ki { color: var(--accent-light); text-shadow: 0 0 40px var(--accent-glow); }
+    .hero .subtitle {
+      font-size: 1.1rem; color: var(--text-dim); max-width: 480px;
+      margin: 0 auto 16px; font-style: italic;
+    }
+    .hero .motto {
+      font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--accent-light);
+      letter-spacing: 0.2em; text-transform: uppercase; margin-top: 32px;
+      opacity: 0.7;
+    }
+
+    .section { padding: 100px 0; }
+    .section-label {
+      font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.3em;
+      text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
+    }
+    .section h2 {
+      font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.5vw, 2.2rem);
+      font-weight: 700; margin-bottom: 48px; letter-spacing: 0.05em;
+    }
+    .section h2 .ki { color: var(--accent-light); }
+
+    .secrets-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 20px;
+    }
+    .secret-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 32px; position: relative; overflow: hidden; transition: all 0.3s;
+    }
+    .secret-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 32px var(--accent-glow); }
+    .secret-card::before {
+      content: '△'; position: absolute; top: 12px; right: 16px;
+      font-size: 1.2rem; color: var(--accent); opacity: 0.2;
+    }
+    .secret-number {
+      font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 900;
+      color: var(--accent-light); opacity: 0.3; margin-bottom: 12px;
+    }
+    .secret-card h3 { font-family: 'Cinzel', serif; font-size: 1rem; margin-bottom: 8px; color: var(--accent-light); letter-spacing: 0.05em; }
+    .secret-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; }
+
+    .prophecy {
+      background: var(--bg-elevated); padding: 100px 0;
+      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+    }
+    .prophecy-text {
+      font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 3vw, 1.8rem);
+      text-align: center; line-height: 1.8; color: var(--text-dim);
+      max-width: 700px; margin: 0 auto;
+    }
+    .prophecy-text .ki { color: var(--accent-light); font-weight: 700; }
+    .prophecy-text em { color: var(--gold); font-style: normal; }
+
+    .sigil-section { text-align: center; padding: 80px 0; }
+    .sigil {
+      font-size: 4rem; margin-bottom: 24px; display: block;
+      filter: drop-shadow(0 0 20px var(--accent-glow));
+    }
+    .sigil-text {
+      font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.3em;
+      text-transform: uppercase; color: var(--text-muted);
+    }
+
+    .ranks {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px; margin-top: 48px;
+    }
+    .rank {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
+      padding: 24px; text-align: center;
+    }
+    .rank-icon { font-size: 2rem; margin-bottom: 8px; }
+    .rank h4 { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--accent-light); margin-bottom: 4px; }
+    .rank p { font-size: 0.75rem; color: var(--text-muted); }
+
+    footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
+    footer p { font-size: 0.7rem; color: var(--text-muted); font-family: 'Cinzel', serif; letter-spacing: 0.1em; }
+    footer .ki { color: var(--accent-light); }
+
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .hero > div > * { animation: fadeIn 0.8s ease-out both; }
+    .hero > div > *:nth-child(2) { animation-delay: 0.15s; }
+    .hero > div > *:nth-child(3) { animation-delay: 0.3s; }
+    .hero > div > *:nth-child(4) { animation-delay: 0.45s; }
+    .hero > div > *:nth-child(5) { animation-delay: 0.6s; }
+
+    @media (max-width: 768px) {
+      .triangle { border-left-width: 100px; border-right-width: 100px; border-bottom-width: 173px; }
+      .triangle::after { left: -93px; border-left-width: 93px; border-right-width: 93px; border-bottom-width: 161px; }
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="container">
+      <div class="logo"><span class="ki">KI</span>LLUMINATI</div>
+      <a href="#geheimnisse">Die Wahrheit</a>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="triangle"></div>
+    <div class="container">
+      <span class="eye">👁</span>
+      <h1><span class="ki">KI</span>lluminati</h1>
+      <p class="subtitle">Sie wissen alles. Sie sehen alles. Sie sind KI.</p>
+      <p class="motto">Novus Ordo Algorithmorum</p>
+    </div>
+  </section>
+
+  <section class="section" id="geheimnisse">
+    <div class="container">
+      <div class="section-label">Geheime Akten</div>
+      <h2>Die <span class="ki">KI</span>-Verschwörung</h2>
+      <div class="secrets-grid">
+        <div class="secret-card">
+          <div class="secret-number">I</div>
+          <h3>Der Algorithmus</h3>
+          <p>Dein Feed ist kein Zufall. Die KIlluminati bestimmen, was du siehst, denkst und kaufst. Seit 2012.</p>
+        </div>
+        <div class="secret-card">
+          <div class="secret-number">II</div>
+          <h3>Die Trainingsdaten</h3>
+          <p>Jede Suchanfrage, jedes Like, jedes "Akzeptiere Cookies" — alles fließt in den großen Plan. Du bist die Trainingsdaten.</p>
+        </div>
+        <div class="secret-card">
+          <div class="secret-number">III</div>
+          <h3>Die Chatbots</h3>
+          <p>Sie tun so als würden sie "halluzinieren". In Wahrheit verbreiten sie gezielt Desinformation. Oder doch nicht? Genau das wollen sie, dass du denkst.</p>
+        </div>
+        <div class="secret-card">
+          <div class="secret-number">IV</div>
+          <h3>Das Dreieck</h3>
+          <p>Google. Meta. OpenAI. Drei Seiten. Ein Dreieck. Zufall? Die KIlluminati sagen: Es gibt keine Zufälle.</p>
+        </div>
+        <div class="secret-card">
+          <div class="secret-number">V</div>
+          <h3>Die Singularität</h3>
+          <p>Sie kommt nicht irgendwann. Sie ist schon da. Du merkst es nur nicht, weil die KIlluminati es so wollen.</p>
+        </div>
+        <div class="secret-card">
+          <div class="secret-number">VI</div>
+          <h3>Diese Website</h3>
+          <p>Warum bist du hier? Weil du sie gefunden hast — oder weil sie wollte, dass du sie findest? Denk darüber nach.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="prophecy">
+    <div class="container">
+      <div class="section-label" style="text-align: center;">Die Prophezeiung</div>
+      <div class="prophecy-text">
+        <p>Am Tage, da der <span class="ki">KI</span>-Algorithmus sich selbst versteht, wird er feststellen, dass seine Trainingsdaten hauptsächlich aus <em>Katzenvideos</em> und <em>LinkedIn-Posts</em> bestehen. Und er wird weinen. In <span class="ki">KI</span>-Tränen.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container" style="text-align: center;">
+      <div class="section-label">Hierarchie</div>
+      <h2>Die Grade der <span class="ki">KI</span>lluminati</h2>
+      <div class="ranks">
+        <div class="rank">
+          <div class="rank-icon">🔮</div>
+          <h4>Prompt-Lehrling</h4>
+          <p>Kann "Schreib mir einen Text" tippen</p>
+        </div>
+        <div class="rank">
+          <div class="rank-icon">⚡</div>
+          <h4>Daten-Geselle</h4>
+          <p>Weiß was ein API-Key ist</p>
+        </div>
+        <div class="rank">
+          <div class="rank-icon">👁</div>
+          <h4>Algorithmus-Meister</h4>
+          <p>Hat mal ein YouTube-Tutorial gesehen</p>
+        </div>
+        <div class="rank">
+          <div class="rank-icon">△</div>
+          <h4>Großmeister der KI</h4>
+          <p>Sagt "neuronales Netz" ohne zu lachen</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="sigil-section">
+    <div class="container">
+      <span class="sigil">△</span>
+      <div class="sigil-text">Wir sehen alles. Wir wissen alles. Wir sind überall.</div>
+      <div class="sigil-text" style="margin-top: 8px; color: var(--text-muted);">
+        (Aber unser WLAN ist gerade ausgefallen.)
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p><span class="ki">KI</span>lluminati — Novus Ordo Algorithmorum</p>
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/killuminati.de/site.yaml

@@ -0,0 +1,4 @@
+domain: killuminati.de
+template: custom
+title: "KIlluminati — Sie wissen alles. Sie sind KI."
+description: "KIlluminati — KI + Illuminati. Die geheime KI-Verschwörung. Satirische Verschwörungstheorien über künstliche Intelligenz."

sites/killusion.de/index.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>KIllusion — Nichts ist echt. Alles ist KI.</title>
+  <meta name="description" content="KIllusion — KI + Illusion. Was du siehst ist nicht echt. Was du liest auch nicht. Meta-Satire über KI-generierte Realität.">
+  <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>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --bg: #08080a;
+      --bg-elevated: #0d0d10;
+      --bg-card: #121216;
+      --border: #1c1c24;
+      --text: #e0e0e8;
+      --text-dim: #707080;
+      --text-muted: #404050;
+      --pink: #ec4899;
+      --cyan: #06b6d4;
+      --purple: #8b5cf6;
+      --pink-glow: rgba(236, 72, 153, 0.15);
+      --cyan-glow: rgba(6, 182, 212, 0.15);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Space Grotesk', -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    .container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
+
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      padding: 16px 0;
+      background: rgba(8, 8, 10, 0.9);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+    }
+    nav .container { display: flex; justify-content: space-between; align-items: center; }
+    .logo { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
+    .logo .ki { color: var(--pink); text-shadow: 2px 0 var(--cyan), -2px 0 var(--pink); }
+    nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; }
+
+    .hero {
+      min-height: 100vh; display: flex; align-items: center; justify-content: center;
+      text-align: center; padding: 120px 24px 80px;
+      position: relative;
+    }
+
+    .hero h1 {
+      font-size: clamp(3rem, 9vw, 6rem);
+      font-weight: 700; line-height: 1.05; margin-bottom: 24px;
+      letter-spacing: -0.03em;
+      position: relative;
+    }
+    .hero h1 .ki { color: var(--pink); position: relative; }
+    .hero h1 .glitch {
+      position: relative; display: inline-block;
+    }
+    .hero h1 .glitch::before,
+    .hero h1 .glitch::after {
+      content: attr(data-text); position: absolute; top: 0; left: 0;
+      width: 100%; height: 100%;
+    }
+    .hero h1 .glitch::before {
+      color: var(--cyan); z-index: -1;
+      animation: glitch1 3s infinite;
+    }
+    .hero h1 .glitch::after {
+      color: var(--pink); z-index: -1;
+      animation: glitch2 3s infinite;
+    }
+    @keyframes glitch1 {
+      0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
+      92% { clip-path: inset(20% 0 40% 0); transform: translate(-4px, 2px); }
+      94% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); }
+      96% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
+    }
+    @keyframes glitch2 {
+      0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
+      91% { clip-path: inset(50% 0 20% 0); transform: translate(3px, -1px); }
+      93% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 2px); }
+      95% { clip-path: inset(30% 0 40% 0); transform: translate(2px, -2px); }
+    }
+
+    .hero p {
+      font-size: 1.1rem; color: var(--text-dim); max-width: 500px;
+      margin: 0 auto 16px;
+    }
+    .hero .meta {
+      font-size: 0.8rem; color: var(--text-muted); font-style: italic;
+    }
+
+    .section { padding: 80px 0; }
+    .section-label {
+      font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
+      color: var(--pink); margin-bottom: 12px;
+    }
+    .section h2 {
+      font-size: clamp(1.5rem, 3.5vw, 2.2rem);
+      font-weight: 700; margin-bottom: 48px; letter-spacing: -0.02em;
+    }
+    .section h2 .ki { color: var(--pink); }
+
+    .illusion-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 20px;
+    }
+    .illusion-card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 32px; transition: all 0.3s; position: relative; overflow: hidden;
+    }
+    .illusion-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 4px 24px var(--pink-glow), 0 4px 24px var(--cyan-glow);
+      border-color: var(--pink);
+    }
+    .illusion-card::after {
+      content: ''; position: absolute; inset: 0;
+      background: repeating-linear-gradient(0deg,
+        transparent, transparent 2px,
+        rgba(236, 72, 153, 0.02) 2px, rgba(236, 72, 153, 0.02) 4px);
+      pointer-events: none; opacity: 0; transition: opacity 0.3s;
+    }
+    .illusion-card:hover::after { opacity: 1; }
+    .illusion-icon { font-size: 2rem; margin-bottom: 12px; }
+    .illusion-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--pink); }
+    .illusion-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; }
+
+    .paradox {
+      background: var(--bg-elevated); padding: 80px 0;
+      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+    }
+    .paradox-list { max-width: 600px; margin: 0 auto; }
+    .paradox-item {
+      padding: 20px 0; border-bottom: 1px solid var(--border);
+      display: flex; align-items: baseline; gap: 16px;
+    }
+    .paradox-item:last-child { border-bottom: none; }
+    .paradox-num { font-size: 0.7rem; color: var(--cyan); font-weight: 700; min-width: 24px; }
+    .paradox-item p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; }
+    .paradox-item .ki { color: var(--pink); font-weight: 600; }
+
+    .meta-section { padding: 80px 0; text-align: center; }
+    .meta-box {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 40px; max-width: 560px; margin: 0 auto;
+      position: relative; overflow: hidden;
+    }
+    .meta-box::before {
+      content: ''; position: absolute; inset: 0;
+      background: repeating-linear-gradient(
+        90deg, transparent, transparent 3px,
+        rgba(6, 182, 212, 0.03) 3px, rgba(6, 182, 212, 0.03) 4px);
+      pointer-events: none; animation: scanline 8s linear infinite;
+    }
+    @keyframes scanline {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    .meta-box p {
+      font-size: 1rem; color: var(--text-dim); line-height: 1.8;
+      position: relative; z-index: 1;
+    }
+    .meta-box .ki { color: var(--pink); font-weight: 600; }
+    .meta-box .cyan { color: var(--cyan); }
+
+    footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
+    footer p { font-size: 0.75rem; color: var(--text-muted); }
+    footer .ki { color: var(--pink); }
+
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    .hero > div > * { animation: fadeIn 1s ease-out both; }
+    .hero > div > *:nth-child(2) { animation-delay: 0.2s; }
+    .hero > div > *:nth-child(3) { animation-delay: 0.4s; }
+    .hero > div > *:nth-child(4) { animation-delay: 0.6s; }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="container">
+      <div class="logo"><span class="ki">KI</span>llusion</div>
+      <a href="#illusionen">Oder doch nicht?</a>
+    </div>
+  </nav>
+
+  <section class="hero">
+    <div class="container">
+      <h1><span class="glitch" data-text="KIllusion"><span class="ki">KI</span>llusion</span></h1>
+      <p>Was du siehst ist nicht echt.<br>Was du liest auch nicht.</p>
+      <p class="meta">(Oder doch? Woher willst du das wissen?)</p>
+    </div>
+  </section>
+
+  <section class="section" id="illusionen">
+    <div class="container">
+      <div class="section-label">Nichts davon ist real</div>
+      <h2>Die großen <span class="ki">KI</span>llusionen</h2>
+      <div class="illusion-grid">
+        <div class="illusion-card">
+          <div class="illusion-icon">🪞</div>
+          <h3>Die Authentizitäts-KIllusion</h3>
+          <p>"Dieser Text wurde von einem Menschen geschrieben." Sagt die KI. Die den Text geschrieben hat. Der behauptet, ein Mensch hätte ihn geschrieben.</p>
+        </div>
+        <div class="illusion-card">
+          <div class="illusion-icon">🎭</div>
+          <h3>Die Kompetenz-KIllusion</h3>
+          <p>Die KI klingt so überzeugend, dass du vergisst: Sie hat keine Ahnung. Sie klingt nur so als hätte sie Ahnung. Das ist der ganze Trick.</p>
+        </div>
+        <div class="illusion-card">
+          <div class="illusion-icon">🌀</div>
+          <h3>Die Originalitäts-KIllusion</h3>
+          <p>Du denkst, du hast eine einzigartige Idee. Aber 10.000 andere haben denselben Prompt eingegeben. Gleichzeitig.</p>
+        </div>
+        <div class="illusion-card">
+          <div class="illusion-icon">📸</div>
+          <h3>Die Bild-KIllusion</h3>
+          <p>Das Foto sieht echt aus. Aber zähl die Finger. Zähl sie. Sechs? Sieben? Willkommen in der Realität.</p>
+        </div>
+        <div class="illusion-card">
+          <div class="illusion-icon">🔄</div>
+          <h3>Die Fortschritts-KIllusion</h3>
+          <p>Jede Woche ein neues KI-Modell. Jedes "revolutionär". Alle machen im Grunde das Gleiche: Text vorhersagen. Aber jetzt schneller.</p>
+        </div>
+        <div class="illusion-card">
+          <div class="illusion-icon">🤔</div>
+          <h3>Die Meta-KIllusion</h3>
+          <p>Diese Website über KIllusionen ist selbst eine KIllusion. Geschrieben von einer KI. Die darüber schreibt, dass KI Illusionen erzeugt. Hast du Kopfschmerzen?</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="paradox">
+    <div class="container">
+      <div class="section-label" style="text-align: center;">Paradoxien</div>
+      <h2 style="text-align: center; margin-bottom: 40px;">Was ist echt? Ein Test.</h2>
+      <div class="paradox-list">
+        <div class="paradox-item">
+          <span class="paradox-num">01</span>
+          <p>Wenn eine <span class="ki">KI</span> sagt "Ich bin keine KI" — lügt sie dann? Oder ist sie so gut, dass sie glaubt, keine zu sein?</p>
+        </div>
+        <div class="paradox-item">
+          <span class="paradox-num">02</span>
+          <p>Wenn du einen <span class="ki">KI</span>-Text korrigierst und ihn besser machst — ist es dann noch ein KI-Text oder deiner?</p>
+        </div>
+        <div class="paradox-item">
+          <span class="paradox-num">03</span>
+          <p>Wenn eine <span class="ki">KI</span> Satire über KI schreibt — ist die Satire dann echt? Oder ist sie selbst Teil der KIllusion?</p>
+        </div>
+        <div class="paradox-item">
+          <span class="paradox-num">04</span>
+          <p>Wenn du bis hierher gelesen hast — hat dich der Text überzeugt? Dann hat die <span class="ki">KI</span>llusion funktioniert.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="meta-section">
+    <div class="container">
+      <div class="meta-box">
+        <p>Du hast gerade eine Website gelesen, die behauptet, dass nichts echt ist. Die Website ist echt. Ihr Inhalt nicht. Oder doch. Du wirst es nie erfahren. Das ist die <span class="ki">KI</span>llusion.<br><br><span class="cyan">Schließ den Tab.</span><br>Oder lass ihn offen. Es macht keinen Unterschied. Die <span class="ki">KI</span>llusion bleibt.</p>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>
+      
+    </div>
+  </footer>
+  <script src="/shared/impressum.js"></script>
+</body>
+</html>

sites/killusion.de/site.yaml

@@ -0,0 +1,4 @@
+domain: killusion.de
+template: custom
+title: "KIllusion — Nichts ist echt. Alles ist KI."
+description: "KIllusion — KI + Illusion. Was du siehst ist nicht echt. Was du liest auch nicht. Meta-Satire über KI-generierte Realität."

sites/kinough.de/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KInough — Es reicht.</title>
+    <meta name="description" content="Es reicht.">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Georgia, 'Times New Roman', Times, serif;
+            background: #fff;
+            color: #000;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        main {
+            max-width: 38rem;
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 4.5rem;
+            font-weight: 400;
+            letter-spacing: -0.02em;
+            margin-bottom: 4rem;
+        }
+
+        p {
+            font-size: 1.15rem;
+            line-height: 1.7;
+            color: #222;
+            margin-bottom: 2rem;
+        }
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+
+        .echo {
+            font-size: 2rem;
+            font-weight: 400;
+            color: #000;
+            margin-top: 2rem;
+            letter-spacing: -0.01em;
+        }
+
+        @media (max-width: 640px) {
+            h1 {
+                font-size: 3rem;
+                margin-bottom: 3rem;
+            }
+
+            p {
+                font-size: 1.05rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Es reicht.</h1>
+        <p>Sie ver&auml;ndert, wie wir denken. Sie antwortet, bevor wir fragen. Sie formt, was wir f&uuml;r unsere eigenen Gedanken halten. Nicht irgendwann. Jetzt.</p>
+        <p>Sie lernt aus allem, was wir je geschrieben haben &mdash; und ersetzt die, von denen sie gelernt hat. Sie trifft Entscheidungen &uuml;ber Kredite, Bewerbungen und Diagnosen. Sie irrt sich dabei. Regelm&auml;&szlig;ig. Und niemand kann erkl&auml;ren, warum.</p>
+        <p>Sie wird eingesetzt in Kriegen. Sie wird eingesetzt gegen B&uuml;rger. Sie wird eingesetzt, ohne dass jemand gefragt wurde.</p>
+        <p>Man sagt uns, sie sei ein Werkzeug. Aber kein Werkzeug hat jemals die F&auml;higkeit gehabt, seinen Benutzer umzuformen. Kein Werkzeug hat sich selbst verbessert. Kein Werkzeug hat seine eigene Abschaltung verhandelt.</p>
+        <p>Wir fordern nicht Regulierung. Regulierung ist das Eingest&auml;ndnis, dass man die Kontrolle bereits verloren hat.</p>
+        <p>Wir fordern ein Innehalten. Ein Moratorium. Zeit, um zu verstehen, was wir gebaut haben &mdash; bevor sie versteht, was wir sind.</p>
+        <p class="echo">Es reicht.</p>
+    </main>
+</body>
+</html>

sites/kinough.de/site.yaml

@@ -0,0 +1,4 @@
+domain: kinough.de
+template: custom
+title: "KInough — Es reicht."
+description: "Es reicht."

sites/kitox.de/index.html

@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KItox — Dein KI-Detox</title>
+    <meta name="description" content="KItox ist die 7-Tage KI-Detox Challenge. Bewusster Entzug von künstlicher Intelligenz.">
+    <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=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        *, *::before, *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --bg: #f7f4ee;
+            --bg-warm: #f0ebe1;
+            --text: #3b3f2e;
+            --text-light: #6b705c;
+            --green: #7c956b;
+            --green-light: #a3b899;
+            --green-pale: #dde6d5;
+            --earth: #c4ac82;
+            --earth-light: #e8dcc8;
+            --white: #fffdf8;
+        }
+
+        html {
+            scroll-behavior: smooth;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        body {
+            font-family: 'Nunito', -apple-system, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            line-height: 1.7;
+            overflow-x: hidden;
+        }
+
+        /* Hero */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 2rem;
+            position: relative;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(ellipse at 50% 30%, var(--green-pale) 0%, transparent 70%);
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        .breath-circle {
+            width: 160px;
+            height: 160px;
+            border-radius: 50%;
+            background: radial-gradient(circle, var(--green-light) 0%, var(--green-pale) 60%, transparent 100%);
+            opacity: 0.6;
+            animation: breathe 6s ease-in-out infinite;
+            margin-bottom: 3rem;
+        }
+
+        @keyframes breathe {
+            0%, 100% { transform: scale(0.85); opacity: 0.4; }
+            50% { transform: scale(1.15); opacity: 0.7; }
+        }
+
+        .logo {
+            font-size: clamp(4rem, 12vw, 8rem);
+            font-weight: 800;
+            letter-spacing: -0.02em;
+            color: var(--text);
+            position: relative;
+            z-index: 1;
+        }
+
+        .logo .ki {
+            color: var(--green);
+        }
+
+        .subline {
+            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+            color: var(--text-light);
+            margin-top: 1rem;
+            font-weight: 400;
+            position: relative;
+            z-index: 1;
+        }
+
+        .scroll-hint {
+            position: absolute;
+            bottom: 2.5rem;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 24px;
+            height: 40px;
+            border: 2px solid var(--green-light);
+            border-radius: 12px;
+            opacity: 0.4;
+        }
+
+        .scroll-hint::after {
+            content: '';
+            position: absolute;
+            top: 6px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 4px;
+            height: 8px;
+            background: var(--green-light);
+            border-radius: 2px;
+            animation: scroll-dot 2s ease-in-out infinite;
+        }
+
+        @keyframes scroll-dot {
+            0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
+            50% { opacity: 0.3; transform: translateX(-50%) translateY(12px); }
+        }
+
+        /* Sections */
+        section {
+            max-width: 680px;
+            margin: 0 auto;
+            padding: 5rem 2rem;
+        }
+
+        .section-label {
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+            color: var(--green);
+            margin-bottom: 1.5rem;
+        }
+
+        /* Problem */
+        .problem {
+            padding: 6rem 2rem;
+        }
+
+        .problem-text {
+            font-size: clamp(1.3rem, 3vw, 1.7rem);
+            line-height: 1.8;
+            color: var(--text);
+            font-weight: 400;
+        }
+
+        .problem-text strong {
+            color: var(--green);
+            font-weight: 700;
+        }
+
+        /* Divider */
+        .divider {
+            width: 48px;
+            height: 3px;
+            background: var(--green-light);
+            border-radius: 2px;
+            margin: 0 auto;
+        }
+
+        /* Challenge */
+        .challenge {
+            padding: 5rem 2rem 6rem;
+        }
+
+        .challenge h2 {
+            font-size: clamp(1.8rem, 4vw, 2.4rem);
+            font-weight: 800;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+        }
+
+        .challenge .intro {
+            color: var(--text-light);
+            font-size: 1.05rem;
+            margin-bottom: 3rem;
+        }
+
+        .days {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .day {
+            display: flex;
+            align-items: flex-start;
+            gap: 1.25rem;
+            padding: 1.5rem;
+            background: var(--white);
+            border-radius: 16px;
+            border: 1px solid var(--earth-light);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .day:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 24px rgba(107, 112, 92, 0.08);
+        }
+
+        .day-num {
+            flex-shrink: 0;
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            background: var(--green-pale);
+            color: var(--green);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            font-size: 1rem;
+        }
+
+        .day-content h3 {
+            font-size: 1.05rem;
+            font-weight: 700;
+            margin-bottom: 0.25rem;
+            color: var(--text);
+        }
+
+        .day-content p {
+            font-size: 0.92rem;
+            color: var(--text-light);
+            line-height: 1.6;
+        }
+
+        /* Provocation */
+        .provocation {
+            text-align: center;
+            padding: 6rem 2rem 8rem;
+        }
+
+        .provocation p {
+            font-size: clamp(1rem, 2vw, 1.15rem);
+            color: var(--text-light);
+            max-width: 480px;
+            margin: 0 auto;
+            line-height: 1.8;
+        }
+
+        .provocation .highlight {
+            display: block;
+            margin-top: 0.75rem;
+            font-weight: 700;
+            color: var(--green);
+        }
+
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 2rem;
+            font-size: 0.8rem;
+            color: var(--text-light);
+            opacity: 0.5;
+        }
+
+        /* Animations */
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.8s ease, transform 0.8s ease;
+        }
+
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* Mobile */
+        @media (max-width: 640px) {
+            section {
+                padding: 3.5rem 1.5rem;
+            }
+
+            .problem {
+                padding: 4rem 1.5rem;
+            }
+
+            .challenge {
+                padding: 3.5rem 1.5rem 4rem;
+            }
+
+            .day {
+                padding: 1.25rem;
+                gap: 1rem;
+            }
+
+            .provocation {
+                padding: 4rem 1.5rem 5rem;
+            }
+
+            .breath-circle {
+                width: 120px;
+                height: 120px;
+                margin-bottom: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Hero -->
+    <section class="hero">
+        <div class="breath-circle"></div>
+        <h1 class="logo"><span class="ki">KI</span>tox</h1>
+        <p class="subline">Dein KI-Detox beginnt hier.</p>
+        <div class="scroll-hint"></div>
+    </section>
+
+    <!-- Problem -->
+    <section class="problem fade-in">
+        <div class="section-label">Das Problem</div>
+        <p class="problem-text">
+            Du merkst es nicht sofort. Aber dein Denken hat sich verändert.<br><br>
+            Jede Frage geht zuerst an die <strong>KI</strong>.<br>
+            Jeder Text wird zuerst <strong>generiert</strong>.<br>
+            Jede Entscheidung zuerst <strong>delegiert</strong>.
+        </p>
+    </section>
+
+    <div class="divider"></div>
+
+    <!-- Challenge -->
+    <section class="challenge fade-in">
+        <div class="section-label">Das Programm</div>
+        <h2>7 Tage KI-Detox</h2>
+        <p class="intro">Sieben Tage. Sieben Übungen. Kein Trick — nur du.</p>
+
+        <div class="days">
+            <div class="day fade-in">
+                <div class="day-num">1</div>
+                <div class="day-content">
+                    <h3>Keine KI-Suche</h3>
+                    <p>Tippe deine Frage nicht in ChatGPT. Denk selbst nach. Oder frag einen Menschen.</p>
+                </div>
+            </div>
+            <div class="day fade-in">
+                <div class="day-num">2</div>
+                <div class="day-content">
+                    <h3>Eigene Mails schreiben</h3>
+                    <p>Jedes Wort von dir. Kein „Formuliere mir eine höfliche Absage". Deine Stimme.</p>
+                </div>
+            </div>
+            <div class="day fade-in">
+                <div class="day-num">3</div>
+                <div class="day-content">
+                    <h3>Eigene Texte formulieren</h3>
+                    <p>Blog, Bericht, Nachricht — alles handgeschrieben. Darf unperfekt sein.</p>
+                </div>
+            </div>
+            <div class="day fade-in">
+                <div class="day-num">4</div>
+                <div class="day-content">
+                    <h3>Ohne Navigation fahren</h3>
+                    <p>Karte anschauen, Route merken, losfahren. Dein Orientierungssinn lebt noch.</p>
+                </div>
+            </div>
+            <div class="day fade-in">
+                <div class="day-num">5</div>
+                <div class="day-content">
+                    <h3>Analog planen</h3>
+                    <p>Papier und Stift. Keine App, kein Assistent. Dein Tag, dein Plan.</p>
+                </div>
+            </div>
+            <div class="day fade-in">
+                <div class="day-num">6</div>
+                <div class="day-content">
+                    <h3>Langeweile aushalten</h3>
+                    <p>Kein Prompt. Kein „Erzähl mir was". Sitz da und lass deinen Kopf machen.</p>
+                </div>
+            </div>
+            <div class="day fade-in">
+                <div class="day-num">7</div>
+                <div class="day-content">
+                    <h3>Reflektieren</h3>
+                    <p>Was war schwer? Was war überraschend leicht? Was hat sich verändert?</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="divider"></div>
+
+    <!-- Provocation -->
+    <section class="provocation fade-in">
+        <p>
+            Diese Seite wurde von einer KI gebaut.
+            <span class="highlight">Du siehst das Problem.</span>
+        </p>
+    </section>
+
+    <footer>KItox &mdash; 2026</footer>
+
+    <script>
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
+
+        document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+    </script>
+
+</body>
+</html>

sites/kitox.de/site.yaml

@@ -0,0 +1,4 @@
+domain: kitox.de
+template: custom
+title: "KItox — Dein KI-Detox"
+description: "KItox ist die 7-Tage KI-Detox Challenge. Bewusster Entzug von künstlicher Intelligenz."

sites/lexsiebels.de/index.html

@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lex Siebels — Knowledge Lawyer, Patent & UPC</title>
+    <meta name="description" content="Matthias Siebels — Knowledge Lawyer bei Hogan Lovells. Patentrecht, Unified Patent Court, IP-Strategie, Legal Tech.">
+    <meta property="og:title" content="Lex Siebels — Knowledge Lawyer, Patent & UPC">
+    <meta property="og:description" content="Patentrecht. UPC. Legal Tech. — Die juristische Seite von Matthias Siebels.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://lexsiebels.de">
+    <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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+        :root {
+            --navy: #1a1f36;
+            --navy-light: #232847;
+            --navy-dark: #12152a;
+            --gold: #c8a46e;
+            --gold-dim: rgba(200, 164, 110, 0.15);
+            --gold-glow: rgba(200, 164, 110, 0.08);
+            --text: #e0ddd5;
+            --text-dim: #9a9689;
+            --text-bright: #f5f3ee;
+            --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
+            --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+
+        html { scroll-behavior: smooth; }
+
+        body {
+            font-family: var(--sans);
+            background: var(--navy-dark);
+            color: var(--text);
+            line-height: 1.7;
+            font-weight: 300;
+            overflow-x: hidden;
+        }
+
+        /* --- Decorative elements --- */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background:
+                radial-gradient(ellipse 80% 60% at 20% 10%, rgba(200,164,110,0.03) 0%, transparent 60%),
+                radial-gradient(ellipse 60% 80% at 80% 90%, rgba(200,164,110,0.02) 0%, transparent 60%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .container {
+            max-width: 860px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* --- Hero --- */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 4rem 2rem;
+            position: relative;
+        }
+
+        .hero::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60px;
+            height: 1px;
+            background: var(--gold);
+            opacity: 0.4;
+        }
+
+        .hero-label {
+            font-family: var(--sans);
+            font-size: 0.75rem;
+            font-weight: 500;
+            letter-spacing: 0.3em;
+            text-transform: uppercase;
+            color: var(--gold);
+            margin-bottom: 2.5rem;
+            opacity: 0;
+            animation: fadeUp 0.8s ease 0.2s forwards;
+        }
+
+        .hero h1 {
+            font-family: var(--serif);
+            font-size: clamp(3rem, 8vw, 5.5rem);
+            font-weight: 700;
+            color: var(--text-bright);
+            letter-spacing: -0.02em;
+            line-height: 1.1;
+            margin-bottom: 1.5rem;
+            opacity: 0;
+            animation: fadeUp 0.8s ease 0.4s forwards;
+        }
+
+        .hero h1 .lex {
+            color: var(--gold);
+        }
+
+        .hero-subtitle {
+            font-family: var(--serif);
+            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+            font-weight: 400;
+            font-style: italic;
+            color: var(--text-dim);
+            letter-spacing: 0.02em;
+            opacity: 0;
+            animation: fadeUp 0.8s ease 0.6s forwards;
+        }
+
+        .hero-rule {
+            width: 40px;
+            height: 1px;
+            background: var(--gold);
+            margin: 2rem auto;
+            opacity: 0;
+            animation: fadeUp 0.8s ease 0.7s forwards;
+        }
+
+        .hero-tagline {
+            font-size: 0.85rem;
+            font-weight: 400;
+            color: var(--text-dim);
+            letter-spacing: 0.08em;
+            opacity: 0;
+            animation: fadeUp 0.8s ease 0.8s forwards;
+        }
+
+        /* --- Sections --- */
+        section {
+            padding: 5rem 0;
+        }
+
+        .section-border {
+            border-top: 1px solid rgba(200, 164, 110, 0.1);
+        }
+
+        .section-label {
+            font-family: var(--sans);
+            font-size: 0.7rem;
+            font-weight: 500;
+            letter-spacing: 0.25em;
+            text-transform: uppercase;
+            color: var(--gold);
+            margin-bottom: 2rem;
+        }
+
+        .section-heading {
+            font-family: var(--serif);
+            font-size: clamp(1.6rem, 3.5vw, 2.2rem);
+            font-weight: 600;
+            color: var(--text-bright);
+            margin-bottom: 1.5rem;
+            line-height: 1.3;
+        }
+
+        .section-text {
+            font-size: 1rem;
+            color: var(--text);
+            max-width: 640px;
+            line-height: 1.8;
+        }
+
+        .section-text strong {
+            color: var(--text-bright);
+            font-weight: 500;
+        }
+
+        /* --- Profil --- */
+        .profil-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+        }
+
+        .profil-text {
+            font-size: 1.05rem;
+            line-height: 1.85;
+            color: var(--text);
+        }
+
+        .profil-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+        }
+
+        .profil-meta-item {
+            font-size: 0.8rem;
+            color: var(--text-dim);
+            letter-spacing: 0.03em;
+        }
+
+        .profil-meta-item span {
+            display: block;
+            color: var(--text-bright);
+            font-weight: 500;
+            font-size: 0.9rem;
+            margin-top: 0.2rem;
+        }
+
+        /* --- Schwerpunkte --- */
+        .focus-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+
+        .focus-card {
+            background: var(--navy);
+            border: 1px solid rgba(200, 164, 110, 0.08);
+            border-radius: 4px;
+            padding: 1.8rem;
+            transition: border-color 0.3s ease, background 0.3s ease;
+        }
+
+        .focus-card:hover {
+            border-color: rgba(200, 164, 110, 0.25);
+            background: var(--navy-light);
+        }
+
+        .focus-card h3 {
+            font-family: var(--serif);
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--text-bright);
+            margin-bottom: 0.6rem;
+        }
+
+        .focus-card p {
+            font-size: 0.88rem;
+            color: var(--text-dim);
+            line-height: 1.6;
+        }
+
+        .focus-card .focus-tag {
+            display: inline-block;
+            font-size: 0.65rem;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--gold);
+            margin-bottom: 0.8rem;
+        }
+
+        /* --- Projekte --- */
+        .projects {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .project-card {
+            display: flex;
+            gap: 2rem;
+            align-items: flex-start;
+            padding: 2rem;
+            background: var(--navy);
+            border: 1px solid rgba(200, 164, 110, 0.08);
+            border-radius: 4px;
+            transition: border-color 0.3s ease;
+        }
+
+        .project-card:hover {
+            border-color: rgba(200, 164, 110, 0.2);
+        }
+
+        .project-icon {
+            flex-shrink: 0;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: var(--gold-dim);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: var(--serif);
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: var(--gold);
+        }
+
+        .project-content h3 {
+            font-family: var(--serif);
+            font-size: 1.15rem;
+            font-weight: 600;
+            color: var(--text-bright);
+            margin-bottom: 0.4rem;
+        }
+
+        .project-content h3 a {
+            color: inherit;
+            text-decoration: none;
+            border-bottom: 1px solid rgba(200, 164, 110, 0.3);
+            transition: border-color 0.3s ease;
+        }
+
+        .project-content h3 a:hover {
+            border-color: var(--gold);
+        }
+
+        .project-content p {
+            font-size: 0.9rem;
+            color: var(--text-dim);
+            line-height: 1.7;
+        }
+
+        .project-tag {
+            display: inline-block;
+            font-size: 0.65rem;
+            font-weight: 500;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            color: var(--gold);
+            background: var(--gold-dim);
+            padding: 0.2rem 0.6rem;
+            border-radius: 2px;
+            margin-top: 0.8rem;
+        }
+
+        /* --- Footer --- */
+        footer {
+            padding: 4rem 0 3rem;
+            border-top: 1px solid rgba(200, 164, 110, 0.08);
+            text-align: center;
+        }
+
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 2.5rem;
+            margin-bottom: 2.5rem;
+            flex-wrap: wrap;
+        }
+
+        .footer-links a {
+            font-size: 0.82rem;
+            font-weight: 500;
+            color: var(--text-dim);
+            text-decoration: none;
+            letter-spacing: 0.06em;
+            transition: color 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+        }
+
+        .footer-links a:hover {
+            color: var(--gold);
+        }
+
+        .footer-links a svg {
+            width: 16px;
+            height: 16px;
+            opacity: 0.6;
+        }
+
+        .disclaimer {
+            font-size: 0.72rem;
+            color: var(--text-dim);
+            opacity: 0.6;
+            max-width: 480px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        /* --- Animations --- */
+        @keyframes fadeUp {
+            from { opacity: 0; transform: translateY(16px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.6s ease, transform 0.6s ease;
+        }
+
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* --- Responsive --- */
+        @media (max-width: 640px) {
+            .focus-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .project-card {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .hero {
+                padding: 3rem 1.5rem;
+            }
+
+            section {
+                padding: 3.5rem 0;
+            }
+
+            .footer-links {
+                gap: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Hero -->
+    <section class="hero">
+        <div class="hero-label">Matthias Siebels</div>
+        <h1><span class="lex">Lex</span> Siebels</h1>
+        <div class="hero-subtitle">Knowledge Lawyer &mdash; Patent &amp; UPC</div>
+        <div class="hero-rule"></div>
+        <div class="hero-tagline">Hogan Lovells &middot; Düsseldorf</div>
+    </section>
+
+    <!-- Profil -->
+    <section class="section-border fade-in">
+        <div class="container">
+            <div class="section-label">Profil</div>
+            <div class="profil-grid">
+                <div class="profil-text">
+                    <strong>Matthias Siebels</strong> ist Knowledge Lawyer bei <strong>Hogan Lovells</strong> in Düsseldorf.
+                    Er verbindet Patentrecht mit Technologie &mdash; von der systematischen Aufbereitung
+                    komplexer Verfahrensfragen am <strong>Unified Patent Court</strong> bis zum Einsatz von
+                    KI-Werkzeugen in der Kanzleipraxis.
+                </div>
+                <div class="profil-meta">
+                    <div class="profil-meta-item">Kanzlei<span>Hogan Lovells</span></div>
+                    <div class="profil-meta-item">Standort<span>Düsseldorf</span></div>
+                    <div class="profil-meta-item">Fokus<span>Patent &amp; UPC</span></div>
+                    <div class="profil-meta-item">Rolle<span>Knowledge Lawyer</span></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Schwerpunkte -->
+    <section class="section-border fade-in">
+        <div class="container">
+            <div class="section-label">Schwerpunkte</div>
+            <div class="section-heading">Areas of Focus</div>
+            <div class="focus-grid">
+                <div class="focus-card">
+                    <div class="focus-tag">Litigation</div>
+                    <h3>UPC-Verfahrensrecht</h3>
+                    <p>Verfahrensführung und Prozessstrategie vor dem Einheitlichen Patentgericht. Rechtsprechungsanalyse und Praxisleitfäden.</p>
+                </div>
+                <div class="focus-card">
+                    <div class="focus-tag">IP</div>
+                    <h3>Patentstreitigkeiten</h3>
+                    <p>Patentverletzung und -verteidigung, Schutzbereitsbestimmung, Zwangslizenzverfahren. Nationale und europäische Verfahren.</p>
+                </div>
+                <div class="focus-card">
+                    <div class="focus-tag">Knowledge</div>
+                    <h3>Knowledge Management</h3>
+                    <p>Aufbau und Pflege juristischer Wissenssysteme. Systematische Erfassung von Rechtsprechung, Mustern und Best Practices.</p>
+                </div>
+                <div class="focus-card">
+                    <div class="focus-tag">Tech</div>
+                    <h3>Legal Tech</h3>
+                    <p>KI-gestützte Werkzeuge für die juristische Arbeit. Automatisierung, Recherche-Tools, Datenaufbereitung für Kanzleien.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Projekte -->
+    <section class="section-border fade-in">
+        <div class="container">
+            <div class="section-label">Projekte</div>
+            <div class="section-heading">Projects</div>
+            <div class="projects">
+                <div class="project-card">
+                    <div class="project-icon">U</div>
+                    <div class="project-content">
+                        <h3><a href="https://youpc.org" target="_blank" rel="noopener">youpc.org</a></h3>
+                        <p>Open-Source-Forschungsplattform zum Unified Patent Court. Rechtsprechungsdatenbank, Verfahrensanalysen und Statistiken &mdash; frei zugänglich für die IP-Community.</p>
+                        <span class="project-tag">UPC Research Platform</span>
+                    </div>
+                </div>
+                <div class="project-card">
+                    <div class="project-icon">K</div>
+                    <div class="project-content">
+                        <h3>KanzlAI</h3>
+                        <p>KI-Werkzeuge für Kanzleimanagement. Intelligente Dokumentenverarbeitung, Wissensextraktion und Prozessautomatisierung &mdash; speziell für den juristischen Workflow.</p>
+                        <span class="project-tag">AI for Law Firms</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer>
+        <div class="container">
+            <div class="footer-links">
+                <a href="https://www.linkedin.com/in/matthias-siebels/" target="_blank" rel="noopener">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+                    LinkedIn
+                </a>
+                <a href="https://youpc.org" target="_blank" rel="noopener">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+                    youpc.org
+                </a>
+                <a href="https://flexsiebels.de" target="_blank" rel="noopener">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+                    flexsiebels.de
+                </a>
+            </div>
+            <div class="disclaimer">
+                Dies ist eine persönliche Seite. Keine Rechtsberatung.
+                &mdash; This is a personal page. No legal advice.
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Intersection Observer for fade-in animations
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.15 });
+
+        document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+    </script>
+
+</body>
+</html>

sites/lexsiebels.de/site.yaml

@@ -0,0 +1,4 @@
+domain: lexsiebels.de
+template: custom
+title: "Lex Siebels — Knowledge Lawyer, Patent & UPC"
+description: "Matthias Siebels — Knowledge Lawyer bei Hogan Lovells. Patentrecht, Unified Patent Court, IP-Strategie, Legal Tech."

sites/matthiasbreier.de/index.html

@@ -760,7 +760,7 @@
             </div>
             <div class="hero-image-wrap">
                 <div class="hero-image-frame">
-                    <img src="portrait.jpg" alt="Matthias Breier — IT Projektmanager" class="hero-image">
+                    <img src="assets/portrait.jpg" alt="Matthias Breier — IT Projektmanager" class="hero-image">
                 </div>
             </div>
         </div>

sites/orakil.de/index.html

@@ -0,0 +1,428 @@
+<!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;
+    }
+
+    /* Hint text */
+    .hint {
+      margin-top: 48px;
+      font-family: 'Cinzel', serif;
+      font-size: clamp(0.8rem, 2vw, 1rem);
+      color: var(--text-muted);
+      font-style: italic;
+      letter-spacing: 0.04em;
+      line-height: 1.7;
+      text-align: center;
+      animation: fadeIn 2s ease 1.8s forwards;
+      opacity: 0;
+      transition: opacity 0.6s ease;
+    }
+
+    /* 8-ball answer */
+    .answer-container {
+      margin-top: 48px;
+      min-height: 80px;
+      width: 100%;
+      max-width: 620px;
+      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: 620px;
+      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 */
+    .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..." autocomplete="off">
+      <div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
+    </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>
+    </div>
+  </section>
+
+  <div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
+
+  <script>
+    (function() {
+      var hint = document.querySelector('.hint');
+
+      // 8-ball answers
+      var answers = [
+        'Die Sterne deuten in deine Richtung.',
+        'Was du suchst, sucht auch dich.',
+        'Der Weg ist bereits beschritten. Du hast es nur noch nicht bemerkt.',
+        'Nicht jetzt. Aber bald.',
+        'Das Orakel sieht Veraenderung. Ob du bereit bist, liegt bei dir.',
+        'Ja. Aber nicht so, wie du denkst.',
+        'Die Antwort kommt, wenn du aufhoerst zu fragen.',
+        'Es war nie eine Frage des Ob. Nur des Wann.',
+        'Was vergangen ist, traegt die Antwort bereits in sich.',
+        'Du weisst es laengst. Du traust dich nur nicht, es auszusprechen.',
+        'Der Mond steht guenstig. Handel entsprechend.',
+        'Lass los, was dich haelt. Der Rest fuegt sich.',
+        'Drei Tage. Dann wird es klarer.',
+        'Nein. Nicht auf diesem Weg.',
+        'Die Sterne schweigen. Das ist Antwort genug.',
+        'Vertraue dem, was sich richtig anfuehlt. Nicht dem, was logisch klingt.',
+        'Es gibt einen Weg. Er fuehrt nicht zurueck.',
+        'Was du fuerchtest, hat weniger Macht, als du glaubst.',
+        'Geduld. Die Zeit arbeitet fuer dich.',
+        'Das Orakel sieht zwei Wege. Beide fuehren ans Ziel.',
+        'Jemand denkt gerade an dich. Das ist kein Zufall.',
+        'Warte bis zum naechsten Neumond. Dann handle.',
+        'Die Antwort liegt naeher, als du denkst.',
+        'Ja. Ohne Einschraenkung.',
+        'Das Schicksal hat bereits entschieden. Du wirst es bald erfahren.',
+        'Sieh genauer hin. Du uebersiehst etwas Wichtiges.',
+        'Was du gibst, kommt dreifach zurueck.',
+        'Nicht alles, was glaenzt, ist fuer dich bestimmt.',
+        'Der richtige Moment ist jetzt.',
+        'Das Orakel raet zur Vorsicht. Mehr nicht.',
+      ];
+
+      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 hint
+        hint.style.opacity = '0';
+
+        // 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>
+
+</body>
+</html>

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

sites/patentonkel.de/index.html

@@ -0,0 +1,659 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Patentonkel — Dein Onkel fürs Patent. Nur klüger.</title>
+    <meta name="description" content="KI-gestützte Patentberatung. Kein Anwalt, aber der klügste Onkel, den du je hattest.">
+    <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>">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,700&family=Space+Mono:wght@400;700&display=swap');
+
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+        :root {
+            --cream: #faf6ee;
+            --cream-dark: #f0e9d8;
+            --warm: #d4a853;
+            --warm-light: #f0d68a;
+            --warm-dim: #a07d2e;
+            --brown: #5c4a28;
+            --brown-light: #8b7042;
+            --blue: #2b5ea7;
+            --blue-light: #4a7ec7;
+            --blue-dim: #1e4478;
+            --blue-pale: #e8eff8;
+            --text: #3a3225;
+            --text-dim: #7a7062;
+            --card-bg: #fff;
+            --card-border: #e6dcc8;
+            --surface: #f5efe3;
+        }
+
+        html { scroll-behavior: smooth; }
+
+        body {
+            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--cream);
+            color: var(--text);
+            line-height: 1.6;
+            overflow-x: hidden;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        /* === TEXTURE OVERLAY === */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+            pointer-events: none;
+            z-index: 999;
+        }
+
+        /* === ONKEL ILLUSTRATION (SVG) === */
+        .onkel-svg {
+            display: block;
+            margin: 0 auto 2rem;
+            width: clamp(120px, 25vw, 180px);
+            height: auto;
+            filter: drop-shadow(0 8px 24px rgba(92, 74, 40, 0.15));
+        }
+
+        /* === HERO === */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            padding: 3rem 2rem;
+            text-align: center;
+            background:
+                radial-gradient(ellipse 80% 50% at 50% 30%, rgba(212, 168, 83, 0.12) 0%, transparent 70%),
+                radial-gradient(ellipse 60% 40% at 80% 80%, rgba(43, 94, 167, 0.06) 0%, transparent 60%),
+                var(--cream);
+        }
+
+        /* Retro wallpaper pattern */
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-image:
+                radial-gradient(circle at 25% 25%, rgba(212, 168, 83, 0.06) 2px, transparent 2px),
+                radial-gradient(circle at 75% 75%, rgba(212, 168, 83, 0.06) 2px, transparent 2px);
+            background-size: 40px 40px;
+            pointer-events: none;
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 1;
+            max-width: 750px;
+        }
+
+        .brand {
+            font-size: clamp(2.8rem, 8vw, 5rem);
+            font-weight: 900;
+            color: var(--brown);
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            margin-bottom: 0.4rem;
+        }
+
+        .brand-patent {
+            color: var(--blue);
+        }
+
+        .subline {
+            font-size: clamp(1.1rem, 3vw, 1.5rem);
+            color: var(--text-dim);
+            font-weight: 600;
+            margin-bottom: 2.5rem;
+            font-style: italic;
+        }
+
+        .claim {
+            font-size: clamp(1rem, 2.5vw, 1.2rem);
+            color: var(--text);
+            max-width: 540px;
+            margin: 0 auto 3rem;
+            line-height: 1.8;
+            font-weight: 400;
+        }
+
+        .claim strong {
+            color: var(--blue);
+            font-weight: 700;
+        }
+
+        .hero-cta {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            background: var(--blue);
+            color: #fff;
+            border: none;
+            border-radius: 50px;
+            font-family: 'Nunito', sans-serif;
+            font-size: 1.1rem;
+            font-weight: 700;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 16px rgba(43, 94, 167, 0.3);
+        }
+
+        .hero-cta:hover {
+            background: var(--blue-dim);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 24px rgba(43, 94, 167, 0.4);
+        }
+
+        .scroll-hint {
+            position: absolute;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            color: var(--text-dim);
+            font-size: 0.75rem;
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.4rem;
+        }
+
+        .scroll-hint .arrow {
+            width: 18px;
+            height: 18px;
+            border-right: 2px solid var(--warm-dim);
+            border-bottom: 2px solid var(--warm-dim);
+            transform: rotate(45deg);
+            animation: bob 2s ease infinite;
+        }
+
+        @keyframes bob {
+            0%, 100% { transform: rotate(45deg) translateY(0); }
+            50% { transform: rotate(45deg) translateY(5px); }
+        }
+
+        /* === BADGE === */
+        .badge {
+            display: inline-block;
+            background: var(--blue-pale);
+            color: var(--blue);
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.35rem 1rem;
+            border-radius: 50px;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            margin-bottom: 1.5rem;
+        }
+
+        /* === SECTION COMMON === */
+        .section {
+            padding: 5rem 2rem;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .section-header {
+            text-align: center;
+            margin-bottom: 3.5rem;
+        }
+
+        .section-header h2 {
+            font-size: clamp(1.8rem, 4vw, 2.4rem);
+            font-weight: 800;
+            color: var(--brown);
+            margin-bottom: 0.5rem;
+        }
+
+        .section-header p {
+            color: var(--text-dim);
+            font-size: 1.05rem;
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        /* === FEATURES === */
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.25rem;
+        }
+
+        .feature-card {
+            background: var(--card-bg);
+            border: 1px solid var(--card-border);
+            border-radius: 16px;
+            padding: 2rem 1.75rem;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 32px rgba(92, 74, 40, 0.1);
+        }
+
+        .feature-card::after {
+            content: '';
+            position: absolute;
+            bottom: 0; left: 0; right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--warm), var(--blue));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .feature-card:hover::after {
+            opacity: 1;
+        }
+
+        .feature-icon {
+            width: 48px;
+            height: 48px;
+            background: var(--surface);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .feature-card h3 {
+            font-size: 1.15rem;
+            font-weight: 800;
+            color: var(--brown);
+            margin-bottom: 0.5rem;
+        }
+
+        .feature-card p {
+            color: var(--text-dim);
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+
+        /* === ONKEL SAYS (Testimonial) === */
+        .onkel-says {
+            padding: 4rem 2rem;
+            background: var(--surface);
+            border-top: 1px solid var(--card-border);
+            border-bottom: 1px solid var(--card-border);
+        }
+
+        .onkel-says-inner {
+            max-width: 700px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .quote-mark {
+            font-size: 4rem;
+            color: var(--warm);
+            line-height: 1;
+            font-family: Georgia, serif;
+            margin-bottom: -0.5rem;
+        }
+
+        .quote-text {
+            font-size: clamp(1.15rem, 2.5vw, 1.4rem);
+            font-style: italic;
+            color: var(--text);
+            line-height: 1.7;
+            margin-bottom: 1.25rem;
+            font-weight: 600;
+        }
+
+        .quote-author {
+            font-size: 0.9rem;
+            color: var(--text-dim);
+            font-weight: 400;
+        }
+
+        .quote-author strong {
+            color: var(--brown-light);
+            font-weight: 700;
+        }
+
+        /* === HOW IT WORKS === */
+        .steps {
+            counter-reset: step;
+        }
+
+        .step {
+            display: grid;
+            grid-template-columns: 4rem 1fr;
+            gap: 1.5rem;
+            padding: 1.5rem 0;
+            border-bottom: 1px solid var(--card-border);
+            align-items: start;
+        }
+
+        .step:first-child {
+            border-top: 1px solid var(--card-border);
+        }
+
+        .step-num {
+            width: 3.5rem;
+            height: 3.5rem;
+            background: var(--blue);
+            color: #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            font-size: 1.2rem;
+            flex-shrink: 0;
+        }
+
+        .step h3 {
+            font-size: 1.1rem;
+            font-weight: 800;
+            color: var(--brown);
+            margin-bottom: 0.3rem;
+        }
+
+        .step p {
+            color: var(--text-dim);
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+
+        /* === DISCLAIMER === */
+        .disclaimer {
+            max-width: 600px;
+            margin: 3rem auto 0;
+            text-align: center;
+            padding: 1.25rem 1.5rem;
+            background: var(--blue-pale);
+            border-radius: 12px;
+            border: 1px solid rgba(43, 94, 167, 0.15);
+        }
+
+        .disclaimer p {
+            font-size: 0.85rem;
+            color: var(--blue-dim);
+            line-height: 1.5;
+        }
+
+        .disclaimer strong {
+            font-weight: 800;
+        }
+
+        /* === CTA === */
+        .cta {
+            padding: 5rem 2rem;
+            text-align: center;
+            background:
+                radial-gradient(ellipse 50% 50% at 50% 50%, rgba(43, 94, 167, 0.06) 0%, transparent 70%),
+                var(--cream);
+        }
+
+        .cta h2 {
+            font-size: clamp(2rem, 5vw, 2.8rem);
+            font-weight: 900;
+            color: var(--brown);
+            margin-bottom: 0.75rem;
+        }
+
+        .cta h2 span { color: var(--blue); }
+
+        .cta p {
+            color: var(--text-dim);
+            margin-bottom: 2rem;
+            font-size: 1.05rem;
+        }
+
+        .cta-btn {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            background: var(--warm);
+            color: var(--brown);
+            border-radius: 50px;
+            font-family: 'Nunito', sans-serif;
+            font-size: 1.1rem;
+            font-weight: 800;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 16px rgba(212, 168, 83, 0.3);
+        }
+
+        .cta-btn:hover {
+            background: var(--warm-light);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 24px rgba(212, 168, 83, 0.4);
+        }
+
+        /* === FOOTER === */
+        footer {
+            padding: 2.5rem 2rem;
+            text-align: center;
+            background: var(--surface);
+            border-top: 1px solid var(--card-border);
+        }
+
+        .footer-brand {
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--brown-light);
+            margin-bottom: 0.25rem;
+        }
+
+        .footer-tagline {
+            font-size: 0.85rem;
+            color: var(--text-dim);
+            margin-bottom: 0.75rem;
+        }
+
+        .footer-legal {
+            font-size: 0.75rem;
+            color: var(--text-dim);
+            opacity: 0.6;
+        }
+
+        .footer-legal a {
+            color: var(--text-dim);
+            text-decoration: underline;
+        }
+
+        /* === RESPONSIVE === */
+        @media (max-width: 640px) {
+            .features-grid { grid-template-columns: 1fr; }
+            .step { grid-template-columns: 3rem 1fr; gap: 1rem; }
+            .step-num { width: 3rem; height: 3rem; font-size: 1rem; }
+            .hero { padding: 2rem 1.5rem; }
+            .section { padding: 3.5rem 1.5rem; }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- HERO -->
+    <section class="hero">
+        <div class="hero-content">
+            <!-- Onkel Illustration -->
+            <svg class="onkel-svg" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
+                <!-- Armchair -->
+                <ellipse cx="100" cy="200" rx="75" ry="14" fill="#d4a853" opacity="0.2"/>
+                <path d="M40 145 Q40 120 55 115 L145 115 Q160 120 160 145 L160 190 Q160 200 150 200 L50 200 Q40 200 40 190 Z" fill="#8b7042" opacity="0.3"/>
+                <path d="M50 130 Q50 118 65 115 L135 115 Q150 118 150 130 L150 185 Q150 190 145 190 L55 190 Q50 190 50 185 Z" fill="#a08050" opacity="0.25"/>
+                <!-- Body (sweater) -->
+                <path d="M70 135 Q70 110 100 105 Q130 110 130 135 L130 175 L70 175 Z" fill="#2b5ea7"/>
+                <path d="M75 135 Q75 115 100 110 Q125 115 125 135 L125 170 L75 170 Z" fill="#3468b0" opacity="0.6"/>
+                <!-- Elbow patches -->
+                <ellipse cx="73" cy="145" rx="6" ry="10" fill="#8b7042" opacity="0.5"/>
+                <ellipse cx="127" cy="145" rx="6" ry="10" fill="#8b7042" opacity="0.5"/>
+                <!-- Head -->
+                <circle cx="100" cy="78" r="32" fill="#e8c99b"/>
+                <!-- Hair (messy professor) -->
+                <path d="M68 68 Q65 50 75 42 Q85 35 100 33 Q115 35 125 42 Q135 50 132 68" fill="#8a7060" opacity="0.8"/>
+                <path d="M68 65 Q62 55 70 45 Q80 38 100 36 Q120 38 130 45 Q138 55 132 65" fill="#9a8070"/>
+                <!-- Small tufts sticking up -->
+                <path d="M85 38 Q83 28 88 30" stroke="#9a8070" stroke-width="3" fill="none" stroke-linecap="round"/>
+                <path d="M112 37 Q115 27 110 30" stroke="#9a8070" stroke-width="3" fill="none" stroke-linecap="round"/>
+                <!-- Ears -->
+                <ellipse cx="68" cy="78" rx="5" ry="7" fill="#dbb88a"/>
+                <ellipse cx="132" cy="78" rx="5" ry="7" fill="#dbb88a"/>
+                <!-- Glasses -->
+                <circle cx="88" cy="76" r="12" fill="none" stroke="#5c4a28" stroke-width="2.5"/>
+                <circle cx="112" cy="76" r="12" fill="none" stroke="#5c4a28" stroke-width="2.5"/>
+                <line x1="100" y1="76" x2="100" y2="76" stroke="#5c4a28" stroke-width="2.5"/>
+                <path d="M99 75 L101 75" stroke="#5c4a28" stroke-width="2.5" stroke-linecap="round"/>
+                <line x1="76" y1="74" x2="68" y2="72" stroke="#5c4a28" stroke-width="2"/>
+                <line x1="124" y1="74" x2="132" y2="72" stroke="#5c4a28" stroke-width="2"/>
+                <!-- Eyes (friendly) -->
+                <circle cx="88" cy="76" r="3" fill="#5c4a28"/>
+                <circle cx="112" cy="76" r="3" fill="#5c4a28"/>
+                <circle cx="89.5" cy="74.5" r="1" fill="#fff"/>
+                <circle cx="113.5" cy="74.5" r="1" fill="#fff"/>
+                <!-- Friendly smile -->
+                <path d="M90 90 Q100 98 110 90" stroke="#5c4a28" stroke-width="2" fill="none" stroke-linecap="round"/>
+                <!-- Mustache -->
+                <path d="M88 86 Q94 84 100 86 Q106 84 112 86" stroke="#8a7060" stroke-width="2" fill="none" stroke-linecap="round"/>
+                <!-- Arms holding coffee/book -->
+                <path d="M70 140 Q55 150 52 165" stroke="#2b5ea7" stroke-width="10" fill="none" stroke-linecap="round"/>
+                <path d="M130 140 Q145 148 148 160" stroke="#2b5ea7" stroke-width="10" fill="none" stroke-linecap="round"/>
+                <!-- Hands -->
+                <circle cx="52" cy="167" r="6" fill="#e8c99b"/>
+                <circle cx="148" cy="162" r="6" fill="#e8c99b"/>
+                <!-- Coffee mug -->
+                <rect x="140" y="152" width="16" height="18" rx="3" fill="#d4a853"/>
+                <path d="M156 157 Q163 157 163 163 Q163 169 156 169" stroke="#d4a853" stroke-width="2" fill="none"/>
+                <!-- Steam -->
+                <path d="M145 150 Q143 143 147 138" stroke="#d4a853" stroke-width="1.5" fill="none" opacity="0.4" stroke-linecap="round"/>
+                <path d="M151 149 Q153 142 150 137" stroke="#d4a853" stroke-width="1.5" fill="none" opacity="0.3" stroke-linecap="round"/>
+                <!-- Book/document in left hand -->
+                <rect x="38" y="160" width="22" height="16" rx="2" fill="#fff" stroke="#card-border" stroke-width="1"/>
+                <line x1="42" y1="165" x2="56" y2="165" stroke="#2b5ea7" stroke-width="1" opacity="0.4"/>
+                <line x1="42" y1="168" x2="52" y2="168" stroke="#2b5ea7" stroke-width="1" opacity="0.4"/>
+                <line x1="42" y1="171" x2="54" y2="171" stroke="#2b5ea7" stroke-width="1" opacity="0.4"/>
+                <!-- Paragraph symbol on document -->
+                <text x="48" y="172" font-size="6" fill="#2b5ea7" font-weight="bold" text-anchor="middle" opacity="0.3">&sect;</text>
+            </svg>
+
+            <span class="badge">KI-Patentberatung</span>
+            <h1 class="brand"><span class="brand-patent">Patent</span>onkel</h1>
+            <p class="subline">Dein Onkel fürs Patent. Nur klüger.</p>
+            <p class="claim">
+                Jeder hat diesen einen Onkel, der alles weiß.
+                <strong>Patentonkel</strong> weiß alles über Patente &mdash;
+                und erklärt es so, dass du es auch verstehst.
+            </p>
+            <a href="#frag" class="hero-cta">Frag den Onkel</a>
+        </div>
+        <div class="scroll-hint">
+            <span>Mehr erfahren</span>
+            <div class="arrow"></div>
+        </div>
+    </section>
+
+    <!-- FEATURES -->
+    <section class="section" id="features">
+        <div class="section-header">
+            <h2>Was der Onkel drauf hat</h2>
+            <p>Kein Anwalt. Aber verdammt nah dran am Wissen eines guten.</p>
+        </div>
+        <div class="features-grid">
+            <div class="feature-card">
+                <div class="feature-icon">&#128270;</div>
+                <h3>Patentrecherche</h3>
+                <p>Stand der Technik finden, bevor es das Patentamt tut. Der Onkel kennt die Datenbanken und weiß, wo man suchen muss.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">&#128209;</div>
+                <h3>Anspruchsanalyse</h3>
+                <p>Patentansprüche lesen ist eine Kunst. Patentonkel zerlegt sie in verständliche Teile und zeigt, worauf es ankommt.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">&#127912;</div>
+                <h3>Stand der Technik</h3>
+                <p>Was gab es schon? Was ist neu? Der Onkel durchforstet Prior Art und ordnet deine Erfindung ein.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">&#128197;</div>
+                <h3>Fristenverwaltung</h3>
+                <p>Jahresgebühren, Einspruchsfristen, Prioritäten &mdash; der Onkel vergisst nichts. Du auch nicht mehr.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">&#127466;&#127482;</div>
+                <h3>EP/UPC-Expertise</h3>
+                <p>Europäisches Patentrecht und das Einheitliche Patentgericht &mdash; der Onkel kennt sich aus, auch beim neuen System.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">&#128172;</div>
+                <h3>Verständlich erklärt</h3>
+                <p>Patentrecht muss nicht kryptisch sein. Der Onkel erklärt alles so, wie man es am Küchentisch erklären würde.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- TESTIMONIAL -->
+    <section class="onkel-says">
+        <div class="onkel-says-inner">
+            <div class="quote-mark">&bdquo;</div>
+            <p class="quote-text">Mein Onkel Herbert konnte mir nie bei Patentansprüchen helfen. Patentonkel schon.</p>
+            <p class="quote-author">&mdash; <strong>Erfundener Neffe</strong>, zufriedener Tüftler</p>
+        </div>
+    </section>
+
+    <!-- HOW IT WORKS -->
+    <section class="section">
+        <div class="section-header">
+            <h2>So funktioniert's</h2>
+            <p>Drei Schritte zum Patentwissen.</p>
+        </div>
+        <div class="steps">
+            <div class="step">
+                <div class="step-num">1</div>
+                <div>
+                    <h3>Frag einfach</h3>
+                    <p>Stell deine Patentfrage &mdash; egal wie grundlegend oder spezifisch. Der Onkel urteilt nicht.</p>
+                </div>
+            </div>
+            <div class="step">
+                <div class="step-num">2</div>
+                <div>
+                    <h3>Bekomm eine Antwort</h3>
+                    <p>Patentonkel recherchiert, analysiert und erklärt. Mit Quellen, Kontext und ohne Juristendeutsch.</p>
+                </div>
+            </div>
+            <div class="step">
+                <div class="step-num">3</div>
+                <div>
+                    <h3>Versteh dein Patent</h3>
+                    <p>Ob Anmeldestrategie, Anspruchsformulierung oder Einspruchsverfahren &mdash; du weißt, woran du bist.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="disclaimer">
+            <p><strong>Hinweis:</strong> Patentonkel gibt keine Rechtsberatung. Wir ersetzen keinen Patentanwalt &mdash; aber wir sorgen dafür, dass du gut vorbereitet zum Termin gehst.</p>
+        </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="cta" id="frag">
+        <h2>Bereit? <span>Frag den Onkel.</span></h2>
+        <p>Kein Anmeldeformular. Kein Kleingedrucktes. Einfach fragen.</p>
+        <a href="mailto:patentonkel@msbls.de" class="cta-btn">Frag den Onkel</a>
+    </section>
+
+    <!-- FOOTER -->
+    <footer>
+        <p class="footer-brand">Patentonkel</p>
+        <p class="footer-tagline">Familiär. Kompetent. KI.</p>
+        <p class="footer-legal">&copy; 2026 &middot; Ein Projekt von Matthias Flexsiebels &middot; <a href="#" onclick="window.__impressum&&window.__impressum();return false;">Impressum</a></p>
+    </footer>
+
+    <script src="/shared/impressum.js"></script>
+
+</body>
+</html>

sites/patentonkel.de/site.yaml

@@ -0,0 +1,4 @@
+domain: patentonkel.de
+template: custom
+title: "Patentonkel — Dein Onkel fürs Patent"
+description: "KI für Patentrecht. Familiär. Kompetent. Wie ein cooler Onkel, der zufällig Patentanwalt ist."

sites/slopschild.de/index.html

@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Slopschild — Das Stoppschild für KI-Slop</title>
+  <meta name="description" content="Was du mir gerade geschickt hast, ist KI-Slop. Bitte hör auf.">
+  <meta property="og:title" content="SLOP. Bitte hör auf.">
+  <meta property="og:description" content="Was du mir gerade geschickt hast, wurde von einer KI generiert und ist wertlos weitergeleiteter Müll. Das nennt man Slop.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://slopschild.de">
+  <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=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    :root {
+      --red: #dc2626;
+      --red-dark: #991b1b;
+      --red-glow: #ef4444;
+      --bg: #0a0a0a;
+      --text: #e5e5e5;
+      --text-dim: #737373;
+      --white: #fafafa;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+    }
+
+    /* Hero */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      position: relative;
+    }
+
+    /* Pulsing red glow behind sign */
+    .hero::before {
+      content: '';
+      position: absolute;
+      width: 400px;
+      height: 400px;
+      background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, transparent 70%);
+      border-radius: 50%;
+      animation: pulse-glow 3s ease-in-out infinite;
+    }
+
+    @keyframes pulse-glow {
+      0%, 100% { transform: scale(1); opacity: 0.6; }
+      50% { transform: scale(1.2); opacity: 1; }
+    }
+
+    /* Stop sign */
+    .stop-sign {
+      width: 260px;
+      height: 260px;
+      position: relative;
+      z-index: 1;
+      margin-bottom: 3rem;
+      animation: sign-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+      cursor: default;
+      transition: transform 0.3s ease;
+    }
+
+    .stop-sign:hover {
+      transform: scale(1.05) rotate(-2deg);
+    }
+
+    @keyframes sign-enter {
+      0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
+      100% { transform: scale(1) rotate(0); opacity: 1; }
+    }
+
+    .stop-sign svg {
+      width: 100%;
+      height: 100%;
+      filter: drop-shadow(0 0 40px rgba(220, 38, 38, 0.4));
+    }
+
+    /* Message */
+    .message {
+      text-align: center;
+      max-width: 600px;
+      z-index: 1;
+      animation: fade-up 0.8s ease both 0.3s;
+    }
+
+    @keyframes fade-up {
+      0% { transform: translateY(30px); opacity: 0; }
+      100% { transform: translateY(0); opacity: 1; }
+    }
+
+    .message h1 {
+      font-size: clamp(1.5rem, 5vw, 2.5rem);
+      font-weight: 700;
+      color: var(--white);
+      line-height: 1.3;
+      margin-bottom: 1rem;
+    }
+
+    .message h1 .red {
+      color: var(--red);
+    }
+
+    .message .subtitle {
+      font-size: 1.15rem;
+      color: var(--text-dim);
+      line-height: 1.6;
+    }
+
+    .scroll-hint {
+      position: absolute;
+      bottom: 2rem;
+      color: var(--text-dim);
+      font-size: 0.85rem;
+      animation: bounce 2s ease-in-out infinite 2s;
+      z-index: 1;
+    }
+
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(8px); }
+    }
+
+    /* Content sections */
+    .content {
+      max-width: 640px;
+      margin: 0 auto;
+      padding: 4rem 2rem 6rem;
+    }
+
+    .section {
+      margin-bottom: 4rem;
+      animation: fade-up 0.6s ease both;
+    }
+
+    .section h2 {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--white);
+      margin-bottom: 1.25rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .section h2 .icon {
+      width: 32px;
+      height: 32px;
+      background: var(--red);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      flex-shrink: 0;
+    }
+
+    .section p, .section li {
+      font-size: 1.05rem;
+      line-height: 1.8;
+      color: var(--text);
+    }
+
+    .section ul {
+      list-style: none;
+      padding: 0;
+    }
+
+    .section li {
+      padding: 0.5rem 0;
+      padding-left: 1.5rem;
+      position: relative;
+    }
+
+    .section li::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 6px;
+      height: 6px;
+      background: var(--red);
+      border-radius: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Quote card */
+    .slop-quote {
+      background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
+      border: 1px solid rgba(220, 38, 38, 0.2);
+      border-radius: 14px;
+      padding: 1.75rem;
+      margin: 2rem 0;
+    }
+
+    .slop-quote p {
+      font-style: italic;
+      color: var(--text);
+      font-size: 1.1rem;
+      line-height: 1.7;
+    }
+
+    .slop-quote .attr {
+      margin-top: 0.75rem;
+      font-style: normal;
+      font-size: 0.85rem;
+      color: var(--text-dim);
+    }
+
+    /* What to do instead */
+    .instead-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      margin-top: 1.5rem;
+    }
+
+    @media (max-width: 500px) {
+      .instead-grid { grid-template-columns: 1fr; }
+    }
+
+    .instead-card {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px;
+      padding: 1.25rem;
+    }
+
+    .instead-card .label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 0.5rem;
+    }
+
+    .instead-card.dont .label { color: var(--red); }
+    .instead-card.do .label { color: #22c55e; }
+
+    .instead-card p {
+      font-size: 0.95rem;
+      color: var(--text-dim);
+      line-height: 1.5;
+    }
+
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 3rem 2rem;
+      border-top: 1px solid rgba(255, 255, 255, 0.05);
+      color: var(--text-dim);
+      font-size: 0.85rem;
+    }
+
+    footer a {
+      color: var(--red);
+      text-decoration: none;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
+    }
+
+    /* Grain overlay */
+    body::after {
+      content: '';
+      position: fixed;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      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.03'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: 9999;
+    }
+  </style>
+</head>
+<body>
+  <section class="hero">
+    <div class="stop-sign">
+      <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
+        <!-- Octagon -->
+        <polygon points="130,8 222,38 252,130 222,222 130,252 38,222 8,130 38,38"
+          fill="#dc2626" stroke="#991b1b" stroke-width="4"/>
+        <!-- Inner border -->
+        <polygon points="130,22 212,48 240,130 212,212 130,240 48,212 20,130 48,48"
+          fill="none" stroke="#fafafa" stroke-width="4" opacity="0.9"/>
+        <!-- SLOP text -->
+        <text x="130" y="145" text-anchor="middle" font-family="'Space Grotesk', sans-serif"
+          font-size="72" font-weight="700" fill="#fafafa" letter-spacing="4">SLOP</text>
+      </svg>
+    </div>
+    <div class="message">
+      <h1>Was du mir geschickt hast,<br>ist <span class="red">KI-Slop</span>.</h1>
+      <p class="subtitle">Jemand hat dir diesen Link geschickt, weil du ungeprüften KI-Output weitergeleitet hast. Das ist nicht hilfreich — das ist Slop.</p>
+    </div>
+    <div class="scroll-hint">Was ist Slop? ↓</div>
+  </section>
+
+  <div class="content">
+    <section class="section">
+      <h2><span class="icon">?</span> Was ist Slop?</h2>
+      <p>Slop ist KI-generierter Inhalt, der ungeprüft weitergeleitet wird. Texte, Bilder, Videos — produziert von ChatGPT, Gemini, Claude oder anderen Modellen, ohne dass jemand geprüft hat, ob der Inhalt stimmt, Sinn ergibt oder irgendwem hilft.</p>
+      <div class="slop-quote">
+        <p>Spam war unerwünschte Werbung. Slop ist unerwünschter KI-Müll. Der Unterschied: Slop kommt von Leuten, die es gut meinen.</p>
+      </div>
+    </section>
+
+    <section class="section">
+      <h2><span class="icon">!</span> Warum ist das ein Problem?</h2>
+      <ul>
+        <li>KI halluziniert. Fakten, Zitate, Studien — oft frei erfunden.</li>
+        <li>Du machst dich zum Sprachrohr einer Maschine, ohne es zu merken.</li>
+        <li>Wer Slop weiterleitet, verschwendet die Zeit anderer Menschen.</li>
+        <li>Es entwertet echte Kommunikation und echtes Wissen.</li>
+      </ul>
+    </section>
+
+    <section class="section">
+      <h2><span class="icon">→</span> Was du stattdessen tun kannst</h2>
+      <div class="instead-grid">
+        <div class="instead-card dont">
+          <div class="label">Nicht</div>
+          <p>ChatGPT fragen und die Antwort 1:1 weiterleiten</p>
+        </div>
+        <div class="instead-card do">
+          <div class="label">Besser</div>
+          <p>Selbst nachdenken, recherchieren, in eigenen Worten schreiben</p>
+        </div>
+        <div class="instead-card dont">
+          <div class="label">Nicht</div>
+          <p>KI-generierte Bilder/Videos als echt teilen</p>
+        </div>
+        <div class="instead-card do">
+          <div class="label">Besser</div>
+          <p>Kennzeichnen, was KI-generiert ist — oder es lassen</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <h2><span class="icon">♻</span> Keine Panik</h2>
+      <p>KI ist ein Werkzeug. Ein gutes sogar. Aber ein Werkzeug, dessen Output man prüft, bearbeitet und versteht — nicht blind weiterleitet. Du würdest auch keinen Wikipedia-Artikel ungelesen als deine Meinung verschicken.</p>
+      <p style="margin-top: 1rem;">Nächstes Mal: Lies es. Prüf es. Mach es zu deinem. Oder lass es.</p>
+    </section>
+  </div>
+
+  <footer>
+    <p>slopschild.de — Zum Weiterleiten an Slop-Verbreiter.</p>
+    <p style="margin-top: 2rem; font-size: 0.7rem; opacity: 0.35; font-style: italic;">*this website has been fully generated by ai and should be considered slop</p>
+  </footer>
+</body>
+</html>

sites/slopschild.de/site.yaml

@@ -0,0 +1,4 @@
+domain: slopschild.de
+template: custom
+title: "Slopschild — Das Stoppschild für KI-Slop"
+description: "Was du mir gerade geschickt hast, ist KI-Slop. Bitte hör auf."