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,26 @@
 }
 
 :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
@@ -59,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
@@ -79,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
@@ -184,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
@@ -209,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
@@ -219,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

@@ -267,8 +267,9 @@
   <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>
-      <p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--teal); text-decoration: none;">martinsiebels.de</a></p>
+      
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

sites/kilitaer.de/index.html

@@ -288,8 +288,9 @@
   <footer>
     <div class="container">
       <p>★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
-      <p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--olive-light); text-decoration: none;">martinsiebels.de</a></p>
+      
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

sites/killegal.de/index.html

@@ -296,8 +296,9 @@
   <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>
-      <p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--yellow); text-decoration: none;">martinsiebels.de</a></p>
+      
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

sites/killionaer.de/index.html

@@ -297,8 +297,9 @@
     <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>
-      <p style="margin-top: 4px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--gold); text-decoration: none;">martinsiebels.de</a></p>
+      
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

sites/killions.de/index.html

@@ -287,8 +287,9 @@
   <footer>
     <div class="container">
       <p><span class="ki">KI</span>llions — 1 <span class="ki">KI</span>llion = ∞ Möglichkeiten = 0 Euro</p>
-      <p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--accent-light); text-decoration: none;">martinsiebels.de</a></p>
+      
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

sites/killuminati.de/index.html

@@ -287,8 +287,8 @@
   <footer>
     <div class="container">
       <p><span class="ki">KI</span>lluminati — Novus Ordo Algorithmorum</p>
-      <p style="margin-top: 8px; letter-spacing: 0.05em;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--accent-light); text-decoration: none;">martinsiebels.de</a></p>
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

sites/killusion.de/index.html

@@ -277,8 +277,9 @@
   <footer>
     <div class="container">
       <p><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>
-      <p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--pink); text-decoration: none;">martinsiebels.de</a></p>
+      
     </div>
   </footer>
+  <script src="/shared/impressum.js"></script>
 </body>
 </html>

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."