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

Add shared/i18n.js: client-side language detection snippet.
- Detects browser language via navigator.language
- Falls back to German, stores preference in localStorage
- Swaps text via data-de/data-en attributes on any element
- Handles <title>, <meta>, and regular elements
- Optional toggle button via data-i18n-toggle attribute
- Exposes window.onepagerI18n API for programmatic use

Pilot implementation on ichbinotto.de:
- All visible text annotated with data-de/data-en
- Language toggle button in footer
- Title and meta description translated

Implements Gitea issue #1 (pilot phase).

.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,11 @@
         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
@@ -69,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
@@ -99,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
@@ -124,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
@@ -149,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
@@ -159,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

@@ -38,6 +38,7 @@
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
+      max-width: 100vw;
     }
 
     /* Grain overlay */
@@ -114,8 +115,8 @@
       top: 0;
       left: 50%;
       transform: translateX(-50%);
-      width: 600px;
-      height: 600px;
+      width: min(600px, 100vw);
+      height: min(600px, 100vw);
       background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
       pointer-events: none;
       opacity: 0.4;
@@ -553,6 +554,9 @@
       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>
@@ -694,7 +698,8 @@
   <footer>
     <div class="container">
       <div class="footer-brand">All<span class="ai-highlight">AIs</span>OnMe</div>
-      <p>&copy; 2025 AllAIsOnMe &middot; <a href="mailto:hello@allaisonme.com">hello@allaisonme.com</a></p>
+      <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>
 

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/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/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

@@ -259,28 +259,38 @@
         <section class="questions">
 
             <article class="question">
-                <span class="question-number">Frage I</span>
-                <p class="question-text">Wenn du aufhörst selbst zu denken — <span class="em">wer denkt dann?</span></p>
+                <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">Frage II</span>
-                <p class="question-text">Wenn die KI dich besser kennt als du dich selbst — <span class="em">wem gehört dein Ich?</span></p>
+                <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">Frage III</span>
-                <p class="question-text">Wenn jeder Text perfekt klingt — <span class="em">wie erkennst du Wahrheit?</span></p>
+                <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">Frage IV</span>
-                <p class="question-text">Wenn Maschinen fühlen lernen — <span class="em">müssen wir verlernen?</span></p>
+                <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">Frage V</span>
-                <p class="question-text">Wenn du nicht mehr weißt, ob dieser Satz von dir ist — <span class="em">ist es dann deiner?</span></p>
+                <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>
@@ -288,8 +298,8 @@
         <section class="interlude">
             <span class="interlude-dot"></span>
             <p class="interlude-text">
-                Keine Antworten.<br>
-                Nur der Mut, die Frage auszuhalten.
+                Keine L&ouml;sungen.<br>
+                Nur die Entscheidung, welchen Preis du zahlst.
             </p>
             <span class="interlude-dot"></span>
         </section>

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

@@ -41,6 +41,19 @@
             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) {
@@ -58,7 +71,13 @@
 <body>
     <main>
         <h1>Es reicht.</h1>
-        <p>Wir wissen, dass es uns verändert. Wir spüren, wie es denkt, bevor wir denken. Wie es antwortet, bevor wir fragen. Wie es formt, was wir für unsere eigenen Gedanken halten. Die Frage ist nicht, ob künstliche Intelligenz gut oder schlecht ist. Die Frage ist, ob wir aufhören können, etwas zu benutzen, das uns unmerklich zu etwas anderem macht.</p>
+        <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/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."