Update index.html

index.html

@@ -17,25 +17,16 @@
 }
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 body {
-    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
+    font-family: 'Segoe UI', 'DM Sans', system-ui, sans-serif;
     background: var(--bg); color: var(--black); overflow-x: hidden;
 }
 
-/* Topographic rings — Route A: top-right corner */
-.topo {
-    position: fixed; top: -28vw; right: -18vw;
-    width: 72vw; height: 72vw; border-radius: 50%;
+/* Route B Blob — Organisch, farbig gefüllt, rechts oben in den Weißraum ragend */
+.topo-blob {
+    position: fixed; top: -10vw; right: -8vw;
+    width: 45vw; height: 45vw;
     pointer-events: none; z-index: 0;
-    box-shadow:
-        0 0 0 1px  rgba(255,75,75,.05),
-        0 0 0 38px rgba(255,75,75,.04),
-        0 0 0 76px rgba(255,116,79,.033),
-        0 0 0 114px rgba(255,75,75,.026),
-        0 0 0 152px rgba(255,116,79,.019),
-        0 0 0 190px rgba(255,75,75,.013),
-        0 0 0 228px rgba(255,116,79,.008),
-        0 0 0 266px rgba(255,75,75,.005),
-        0 0 0 304px rgba(255,116,79,.003);
+    opacity: 0.12; /* Dezent im Hintergrund */
 }
 
 .wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 2.25rem; }
@@ -46,32 +37,32 @@ body {
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
 }
 .eyebrow {
-    display: block; font-size: .6rem; letter-spacing: .2em;
-    text-transform: uppercase; color: var(--silver); font-weight: 600; margin-bottom: .9rem;
+    display: block; font-size: .65rem; letter-spacing: .2em;
+    text-transform: uppercase; color: var(--indigo); font-weight: 600; margin-bottom: .9rem;
 }
 .h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 300; line-height: 1.09; letter-spacing: -.03em; }
 .h1 strong { font-weight: 600; }
 .h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 300; line-height: 1.15; letter-spacing: -.025em; }
 .h2 strong { font-weight: 600; }
-.lead { font-weight: 300; font-size: 1rem; line-height: 1.8; }
+.lead { font-weight: 300; font-size: 1rem; line-height: 1.8; color: var(--black); }
 .mono { font-family: 'SF Mono','Cascadia Code','Fira Code',monospace; }
-.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--silver) 40%, transparent); }
+.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(25, 55, 115, 0.2) 40%, transparent); }
 
-/* Pills */
+/* Pills (UI Elements mit max border-radius) */
 .pill {
     border-radius: 999px; cursor: pointer; transition: all .22s ease;
     font-size: .78rem; font-weight: 600; letter-spacing: .01em;
     padding: .38rem 1rem; border: 1.5px solid;
     font-family: inherit;
 }
-.pill-off { border-color: #ccc; background: #fff; color: var(--black); }
+.pill-off { border-color: var(--silver); background: #fff; color: var(--black); }
 .pill-off:hover { border-color: var(--indigo); color: var(--indigo); }
 .pill-on  { border-color: var(--indigo); background: var(--indigo); color: #fff; }
 
 /* Cards */
 .card { border: 1.5px solid #e8e8e8; border-radius: 18px; padding: 1.5rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
 .card:hover { border-color: #bbb; box-shadow: 0 6px 24px rgba(16,12,42,.06); }
-.card-glass { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border: 1px solid rgba(205,205,205,.5); border-radius: 22px; padding: 1.8rem; }
+.card-glass { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border: 1px solid rgba(25, 55, 115, 0.15); border-radius: 22px; padding: 1.8rem; }
 
 /* Bullets */
 ul.vl { list-style: none; }
@@ -95,11 +86,11 @@ ul.vl li::before { content: ''; position: absolute; left: 0; top: .55rem; width:
 .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(315deg, var(--red), var(--orange)); flex-shrink: 0; }
 
 /* tmux */
-.tmux-wrap { background: #0d1117; border-radius: 20px; padding: 1.5rem; border: 1px solid #21262d; }
+.tmux-wrap { background: var(--black); border-radius: 20px; padding: 1.5rem; border: 1px solid #21262d; }
 .tmux-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 1.2rem; }
 .tdot { width: 10px; height: 10px; border-radius: 50%; }
 .tpane { background: #010409; border-radius: 12px; padding: 1rem 1.2rem; font-family: 'SF Mono','Cascadia Code','Fira Code',monospace; font-size: .73rem; line-height: 1.75; border: 1px solid #21262d; }
-.tpane-title { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #484f58; font-weight: 600; margin-bottom: .5rem; font-family: 'DM Sans',sans-serif; }
+.tpane-title { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #7a828e; font-weight: 600; margin-bottom: .5rem; font-family: 'Segoe UI', sans-serif; }
 
 /* Grid */
 .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@@ -112,28 +103,29 @@ section { padding: 4.5rem 0; }
 section + section { border-top: 1px solid #f0f0f0; }
 .hidden { display: none !important; }
 
-/* Model card cat colors */
-.cat-r { color: var(--indigo); }
-.cat-s { color: var(--orange); }
-.cat-c { color: var(--black); }
-.cat-v { color: var(--red); }
-
-::-webkit-scrollbar { width: 3px; height: 3px; }
-::-webkit-scrollbar-thumb { background: var(--silver); border-radius: 99px; }
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-thumb { background: var(--indigo); border-radius: 99px; }
 </style>
 </head>
 <body>
 
-<div class="topo"></div>
+<svg class="topo-blob" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="val-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FF4B4B" />
+      <stop offset="100%" stop-color="#FF744F" />
+    </linearGradient>
+  </defs>
+  <path fill="url(#val-grad)" d="M44.7,-76.4C58.3,-69.2,70.1,-58.5,77.7,-45.3C85.2,-32,88.4,-16,87.9,-0.3C87.4,15.4,83.1,30.8,74.6,43.5C66.1,56.2,53.4,66.1,39.6,73.4C25.8,80.7,10.9,85.4,-3.8,84.1C-18.4,82.8,-36.8,75.4,-51.2,65.3C-65.6,55.2,-76,42.4,-82.7,27.5C-89.4,12.7,-92.4,-4.3,-88.4,-19.7C-84.4,-35.2,-73.3,-49,-60,-58.8C-46.7,-68.5,-31.2,-74.1,-16.5,-77C-1.8,-79.8,12.1,-79.8,25.4,-77.8C38.7,-75.8,44.7,-76.4,44.7,-76.4Z" transform="translate(100 100) scale(1.15)" />
+</svg>
+
 <div class="wrap">
 
-<!-- HEADER -->
 <header style="padding:2.2rem 0 0;display:flex;justify-content:space-between;align-items:center;">
     <div style="font-weight:700;font-size:1.1rem;letter-spacing:-.02em;">valantic</div>
-    <div style="font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);font-weight:600;">Intelligence &amp; Engineering</div>
+    <div style="font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo);font-weight:600;">Intelligence &amp; Engineering</div>
 </header>
 
-<!-- HERO -->
 <section style="padding-top:4rem;">
     <span class="eyebrow">setup guide · pi coding agent · hugging face</span>
     <h1 class="h1" style="margin-bottom:1.4rem;">
@@ -152,7 +144,6 @@ section + section { border-top: 1px solid #f0f0f0; }
     </div>
 </section>
 
-<!-- ══ 1 INSTALLATION ══ -->
 <section>
     <span class="eyebrow">schritt 1 · installation</span>
     <h2 class="h2" style="margin-bottom:2.2rem;">pi <strong class="grad">installieren</strong></h2>
@@ -201,7 +192,6 @@ pi --mode rpc         <span class="c"># RPC über stdin/stdout</span>
     </div>
 </section>
 
-<!-- ══ 2 PROJEKTSTRUKTUR ══ -->
 <section>
     <span class="eyebrow">schritt 2 · projektstruktur</span>
     <h2 class="h2" style="margin-bottom:2.2rem;">projekt <strong class="grad">aufbauen</strong></h2>
@@ -218,7 +208,7 @@ pi --mode rpc         <span class="c"># RPC über stdin/stdout</span>
             <button class="pill pill-off dir-btn" style="text-align:left;" onclick="showDir('workspace',this)">workspace/</button>
         </div>
         <div style="padding-top:.2rem;">
-            <h3 id="dir-title" class="mono" style="font-size:1rem;font-weight:600;margin-bottom:.6rem;"></h3>
+            <h3 id="dir-title" class="mono" style="font-size:1rem;font-weight:600;margin-bottom:.6rem;color:var(--indigo);"></h3>
             <p id="dir-desc" class="lead" style="font-size:.88rem;color:var(--black);"></p>
             <div id="dir-code" style="margin-top:.9rem;"></div>
         </div>
@@ -244,7 +234,6 @@ pi
     </div>
 </section>
 
-<!-- ══ 3 CONTEXT ENGINEERING ══ -->
 <section>
     <span class="eyebrow">schritt 3 · context engineering</span>
     <h2 class="h2" style="margin-bottom:2.2rem;">AGENTS.md &amp; <strong class="grad">system prompts</strong></h2>
@@ -320,7 +309,6 @@ Format: Markdown, Deutsch, sachlich.
     </div>
 </section>
 
-<!-- ══ 4 SKILLS ══ -->
 <section>
     <span class="eyebrow">schritt 4 · skills</span>
     <h2 class="h2" style="margin-bottom:2.2rem;"><strong class="grad">skills</strong> erstellen</h2>
@@ -370,7 +358,6 @@ Markdown, H2-Abschnitte pro Teilfrage, Deutsche Sprache.
     </div>
 </section>
 
-<!-- ══ 5 HUGGING FACE ══ -->
 <section>
     <span class="eyebrow">schritt 5 · provider</span>
     <h2 class="h2" style="margin-bottom:2rem;">hugging face <strong class="grad">inference</strong></h2>
@@ -402,7 +389,6 @@ pi --models "deepseek*,qwen*,llama*"
     <div id="model-grid" class="g3"></div>
 </section>
 
-<!-- ══ 6 MULTI-AGENT TMUX ══ -->
 <section>
     <span class="eyebrow">schritt 6 · multi-agent</span>
     <h2 class="h2" style="margin-bottom:2rem;">multi-agent <strong class="grad">mit tmux</strong></h2>
@@ -410,13 +396,12 @@ pi --models "deepseek*,qwen*,llama*"
         Pi hat bewusst keine eingebauten Sub-Agenten. Die empfohlene Lösung: mehrere Pi-Instanzen in separaten tmux-Sessions. Volle Sichtbarkeit, direktes Eingreifen, kein Magic.
     </p>
 
-    <!-- tmux visual -->
     <div class="tmux-wrap" style="margin-bottom:1.4rem;">
         <div class="tmux-bar">
             <div class="tdot" style="background:#ff5f57;"></div>
             <div class="tdot" style="background:#febc2e;"></div>
             <div class="tdot" style="background:#28c840;"></div>
-            <div style="margin-left:.6rem;font-size:.58rem;color:#484f58;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:'DM Sans',sans-serif;">tmux · mein-projekt</div>
+            <div style="margin-left:.6rem;font-size:.58rem;color:#7a828e;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:'Segoe UI',sans-serif;">tmux · mein-projekt</div>
         </div>
         <div class="g3">
             <div class="tpane">
@@ -490,7 +475,6 @@ tmux attach -t coder  <span class="c"># Session wieder attachen</span>
     </div>
 </section>
 
-<!-- ══ 7 REFERENZ ══ -->
 <section>
     <span class="eyebrow">referenz · shortcuts &amp; sessions</span>
     <h2 class="h2" style="margin-bottom:2.2rem;">sessions &amp; <strong class="grad">nützliche befehle</strong></h2>
@@ -544,9 +528,8 @@ pi --fork &lt;id&gt;    <span class="c"># Session forken</span>
     </div>
 </section>
 
-<!-- FOOTER -->
 <div class="rule" style="margin-top:3.5rem;"></div>
-<footer style="display:flex;justify-content:space-between;align-items:center;padding:1.6rem 0;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);font-weight:600;">
+<footer style="display:flex;justify-content:space-between;align-items:center;padding:1.6rem 0;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo);font-weight:600;">
     <div style="font-weight:700;font-size:1.05rem;letter-spacing:-.015em;color:var(--black);text-transform:none;">valantic</div>
     <div>20. April 2026</div>
     <div>Pi Agents Setup</div>
@@ -604,7 +587,7 @@ function renderModels(f) {
     (f==='all' ? models : models.filter(m=>m.cat===f)).forEach(m => {
         const c = document.createElement('div'); c.className = 'card';
         c.style = 'display:flex;flex-direction:column;';
-        c.innerHTML = `<div class="eyebrow ${m.cls}" style="margin-bottom:.35rem;">${m.cat}</div>
+        c.innerHTML = `<div class="eyebrow" style="margin-bottom:.35rem; color:var(--indigo);">${m.cat}</div>
             <p style="font-size:.88rem;font-weight:600;margin-bottom:.35rem;">${m.n}</p>
             <p style="font-size:.78rem;font-weight:300;line-height:1.6;flex-grow:1;margin-bottom:.8rem;">${m.d}</p>
             <div style="background:#f8f8f8;border-radius:9px;padding:.5rem .75rem;font-size:.7rem;">
@@ -622,4 +605,4 @@ function filterModels(f, btn) {
 renderModels('all');
 </script>
 </body>
-</html>
+</html>