Design-Sync: Liquid-Glass-Reskin, Create-Menue am Plus-Button, Nav-Hide

prototyp-app.html komplett aus dem Design-Projekt uebernommen (dort auf
Basis unseres Stands weiterentwickelt): Liquid-Glass-Optik fuer Chips,
Feed-Chips, Action-Buttons und Backpills (.lg-Look wie die Navbar),
Create-Menue-Popup ueber dem Plus-Button (Bild/Video/Modell), Nav blendet
sich situativ aus (.nav.hidden), Prompt-Feld-Restyle (.pf/.pf-box,
beam-round), Tastatur-Padding via .screen.kb-pad; Dither-Shader-Test auf
den Modell-Chips wie im Design entfernt. Bildpfade wieder auf .jpg gedreht.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

prototyp-app.html

@@ -66,8 +66,13 @@
     margin:0 -18px 14px; padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
     background:rgba(10,10,10,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
   .topbar h1{font-size:16px; font-weight:700; letter-spacing:-.01em;}
+  /* Liquid-Glass-Helfer (gleiche Optik wie die Navbar) */
+  .lg{position:relative; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
+    box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);}
   .backpill{display:flex; align-items:center; gap:7px; padding:9px 16px 9px 12px; border-radius:100px;
-    background:var(--surface2); border:none; color:var(--txt); font-size:13px; font-weight:600; font-family:inherit;
+    background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
+    box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);
+    border:none; color:var(--txt); font-size:13px; font-weight:600; font-family:inherit;
     cursor:pointer; flex-shrink:0; transition:transform .12s;}
   .backpill:active{transform:scale(.94);}
   .backpill .ar{font-size:14px; opacity:.8;}
@@ -124,7 +129,14 @@
     transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;}
   ::placeholder{color:var(--faint);}
   input:focus, textarea:focus{outline:none; border-color:rgba(255,92,57,.6); box-shadow:0 0 0 3px rgba(255,92,57,.14);}
+  #createPrompt:focus{border-color:transparent; box-shadow:none;}
+  [data-beam="bb"].beam-round, [data-beam="bb"].beam-round::before, [data-beam="bb"].beam-round::after, [data-beam="bb"].beam-round [data-beam-bloom]{border-radius:100px; clip-path:inset(0 round 100px);}
   textarea{min-height:96px; resize:vertical;}
+  /* Prompt-Feld im „Post erstellen"-Look (Beam-Box + transparentes Feld) */
+  .pf-box{border-radius:24px;}
+  .pf-box > div{position:relative; border-radius:24px; background:#171717; border:1px solid rgba(255,255,255,.05); box-shadow:0 12px 34px rgba(0,0,0,.4);}
+  .pf{display:block; width:100%; box-sizing:border-box; min-height:104px; resize:none; border:none !important; border-radius:23px; background:transparent !important; color:#fff; font-size:13.5px; line-height:1.55; padding:16px 18px; outline:none; box-shadow:none !important; font-family:inherit;}
+  .pf:focus{border:none !important; box-shadow:none !important;}
   label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:block;}
   .req{color:var(--accent); text-transform:none;}
 
@@ -151,8 +163,11 @@
   .pill.on{border-color:transparent; color:#000; background:#fff;}
   .chiprow{display:flex; gap:8px; overflow-x:auto; margin:0 -18px; padding:2px 18px 4px; scrollbar-width:none;}
   .chiprow::-webkit-scrollbar{display:none;}
-  .chip{flex:none; display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:100px;
+  .chip{flex:none; display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:100px; overflow:hidden;
-    font-size:12.5px; font-weight:600; cursor:pointer; background:var(--surface); color:rgba(255,255,255,.8);
+    font-size:12.5px; font-weight:600; cursor:pointer;
+    background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
+    box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);
+    color:rgba(255,255,255,.9);
     transition:background .15s, color .15s;}
   .chip.on{background:#fff; color:#000;}
   .chip .dot{width:9px; height:9px; border-radius:100px; flex:none; background:rgba(255,255,255,.3);}
@@ -224,7 +239,9 @@
   .x-segs{position:absolute; top:12px; left:14px; right:14px; display:flex; gap:5px; pointer-events:none;}
   .x-segs div{flex:1; height:3px; border-radius:100px;}
   .x-chips{position:absolute; top:24px; left:14px; display:flex; gap:6px; pointer-events:none;}
-  .x-chips div{padding:7px 13px; border-radius:100px; background:rgba(10,10,10,.55); backdrop-filter:blur(12px); font-size:12px; font-weight:600;}
+  .x-chips div{padding:7px 13px; border-radius:100px; font-size:12px; font-weight:600;
+    background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
+    box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);}
   .x-meta{position:absolute; left:0; right:0; bottom:0; padding:56px 18px 18px;
     background:linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events:none; display:flex; align-items:center; gap:10px;}
   .x-meta .av{width:38px; height:38px; border-radius:100px; flex:none; display:grid; place-items:center; font-size:14px; font-weight:700;}
@@ -238,11 +255,13 @@
     display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;}
   .x-actions{position:relative; z-index:3; display:flex; justify-content:center; align-items:center; gap:22px;
     padding:6px 0 84px;}
-  .x-act{width:56px; height:56px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
+  .x-act{width:56px; height:56px; border-radius:100px; border:none;
-    display:grid; place-items:center; cursor:pointer; font-size:20px; color:rgba(255,255,255,.8); transition:transform .12s;}
+    background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);
+    box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);
+    display:grid; place-items:center; cursor:pointer; font-size:20px; color:rgba(255,255,255,.9); transition:transform .12s;}
   .x-act:active{transform:scale(.92);}
   .x-act.sm{width:44px; height:44px;}
-  .x-act.like{position:relative; background:none; border:none;
+  .x-act.like{position:relative; background:none; border:none; -webkit-backdrop-filter:none; backdrop-filter:none;
     box-shadow:0 2px 5px rgba(0,0,0,.4), 0 9px 9px rgba(0,0,0,.15);}
 
   /* ================= DETAIL & CREATE ================= */
@@ -253,6 +272,7 @@
   .c-scroll{flex:1; overflow-y:auto; min-height:0; margin:0 -20px; padding:8px 18px 110px; scrollbar-width:none;
     transition:padding-bottom .3s ease;}
   .c-scroll::-webkit-scrollbar{display:none;}
+  .screen.kb-pad{padding-bottom:440px;}
   .c-scroll.kb-open{padding-bottom:380px;}
   .c-optlabel{font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.4); margin-bottom:9px;}
   /* Dithering-Shader-Chips (Testeffekt auf den Modell-Chips) */
@@ -307,7 +327,8 @@
   .nav{position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:30;
     display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:100px;
     box-shadow:0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);
-    transition:all .7s cubic-bezier(.175,.885,.32,2.2);}
+    transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease;}
+  .nav.hidden{transform:translateX(-50%) translateY(130px); opacity:0; pointer-events:none;}
   .nav-glass{position:absolute; inset:0; border-radius:100px;}
   .nav-glass.blur{overflow:hidden; -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);}
   .nav-glass.refract{overflow:hidden; -webkit-backdrop-filter:url(#bl-glass-refract); backdrop-filter:url(#bl-glass-refract);}
@@ -325,6 +346,11 @@
   .nav button.plus{background:none; box-shadow:0 2px 5px rgba(0,0,0,.35);}
   .nav button.plus.on{width:40px; padding:0;}
   .nav button.plus.on span{display:none;}
+  #createMenu.open{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
+  .cm-item{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:15px; cursor:pointer;
+    color:#fff; font-size:14px; font-weight:600; transition:background .15s;}
+  .cm-item:hover, .cm-item:active{background:rgba(255,255,255,.14);}
+  .cm-item svg{flex:none; color:rgba(255,255,255,.85);}
 
   /* ---- Info-Sheet ---- */
   .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40;}
@@ -443,16 +469,17 @@
   <div class="screen" id="create">
     <div class="topbar">
       <button class="backpill" onclick="go('explore')"><span class="ar">‹</span> Zurück</button>
-      <h1 style="flex:1; text-align:center; margin-right:80px;">Neuer KI-Post</h1>
+      <h1 style="flex:1; text-align:center; margin-right:80px;">Post erstellen</h1>
     </div>
     <div class="c-scroll" id="cScroll">
-      <div style="display:flex; flex-direction:column; align-items:center; padding:10px 0 4px;">
+      <div style="position:relative; display:flex; flex-direction:column; align-items:center; padding:10px 0 4px;">
         <div id="cStack" onclick="toggleOpts()" style="position:relative; cursor:pointer;"></div>
-        <div onclick="toggleOpts()" style="display:flex; align-items:center; gap:8px; margin-top:14px; padding:9px 10px 9px 16px; border-radius:100px; background:rgba(255,255,255,.08); cursor:pointer;">
+        <div id="cSelGroup" style="position:absolute; top:232px; left:50%; transform:translateX(-50%); z-index:50;">
+          <div onclick="event.stopPropagation(); toggleOpts()" class="lg" style="display:flex; align-items:center; gap:8px; padding:9px 10px 9px 16px; border-radius:100px; cursor:pointer; white-space:nowrap;">
             <span style="font-size:13px; font-weight:600;" id="cSelLabel"></span>
             <svg id="cChevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:transform .2s;"><path d="M6 9 l6 6 l6 -6"/></svg>
           </div>
-        <div id="cOpts" style="display:none; width:100%; margin-top:14px; border-radius:20px; background:#161616; border:1px solid rgba(255,255,255,.09); padding:16px; box-sizing:border-box;">
+          <div id="cOpts" class="lg" style="display:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:260px; border-radius:20px; padding:16px; box-sizing:border-box;">
             <div class="c-optlabel">TYP</div>
             <div class="pill-row" style="margin:0 0 16px;" id="typeRow"></div>
             <div class="c-optlabel">FORMAT</div>
@@ -461,46 +488,51 @@
             <div class="pill-row" style="margin:0;" id="countRow"></div>
           </div>
         </div>
+      </div>
       <label style="margin:22px 0 8px;">Dein Modell</label>
       <div class="chiprow" id="createModels"></div>
       <label style="margin:20px 0 8px;">Prompt</label>
       <div data-beam="bb" data-active="true" style="border-radius:24px;">
-        <div style="border-radius:24px; background:#171717; border:1px solid rgba(255,255,255,.05); box-shadow:0 12px 34px rgba(0,0,0,.4);">
+        <div style="position:relative; border-radius:24px; background:#171717; border:1px solid rgba(255,255,255,.05); box-shadow:0 12px 34px rgba(0,0,0,.4);">
-          <textarea id="createPrompt" inputmode="none" placeholder="Beschreibe deinen Post … z.B. Sneaker auf Betonboden, goldenes Abendlicht" style="display:block; width:100%; box-sizing:border-box; height:104px; resize:none; border:none; border-radius:23px; background:transparent; color:#fff; font-size:13.5px; line-height:1.55; padding:16px 18px; outline:none;"></textarea>
+          <textarea id="createPrompt" inputmode="none" placeholder="Beschreibe deinen Post … z.B. Sneaker auf Betonboden, goldenes Abendlicht" style="display:block; width:100%; box-sizing:border-box; height:104px; resize:none; border:none; border-radius:23px; background:transparent; color:#fff; font-size:13.5px; line-height:1.55; padding:16px 18px 46px; outline:none;"></textarea>
+          <div data-beam="bb" data-active="true" id="generateBtn" role="button" title="Post generieren" class="beam-round" style="position:absolute; right:10px; bottom:10px; width:38px; height:38px; --beam-strength:1.6; cursor:pointer;">
+            <div style="position:absolute; inset:1px; border-radius:100px; background:linear-gradient(180deg,#202020,#000); display:grid; place-items:center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="#c9c9c9" style="filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))"><path d="M12 2 L14.4 9.6 L22 12 L14.4 14.4 L12 22 L9.6 14.4 L2 12 L9.6 9.6 Z"/></svg></div>
+            <div data-beam-bloom="true"></div>
+          </div>
         </div>
         <div data-beam-bloom="true"></div>
       </div>
-      <div class="lm-btn" id="generateBtn" role="button" style="margin-top:22px;">
+    </div><!-- /c-scroll -->
-        <div class="lm-shader lm-bg deg120"></div>
-        <div class="lm-core"></div>
-        <div class="lm-label"><svg width="15" height="15" viewBox="0 0 24 24" fill="#9a9a9a" style="filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))"><path d="M12 2 L14.4 9.6 L22 12 L14.4 14.4 L12 22 L9.6 14.4 L2 12 L9.6 9.6 Z"/></svg><span id="generateLabel">Post generieren</span></div>
   </div>
 
-      <h3 style="margin-top:28px;">Mehr erstellen</h3>
+  <!-- ============ ENTWÜRFE (angefangen, nicht abgeschlossen) ============ -->
-    <div class="card click" onclick="go('tut1')">
+  <div class="screen" id="drafts">
+    <div class="topbar"><button class="backpill" onclick="go('create')"><span class="ar">‹</span> Zurück</button><h1>Entwürfe</h1></div>
+    <p class="sub" style="margin:2px 0 18px;">Angefangen, aber noch nicht abgeschlossen – hier weitermachen.</p>
+
+    <div class="card click" onclick="go('create')">
       <div class="cardrow">
-        <div class="ico rose"><svg class="ic"><use href="#i-film"/></svg></div>
+        <div class="ico rose"><svg class="ic"><use href="#i-img"/></svg></div>
-        <div class="body"><h4 class="t-sm">Szene (Video)</h4><p>Video aus Prompt mit Script-Bestätigung – mehrere KI-Modelle parallel.</p></div>
+        <div class="body"><h4 class="t-sm">Glow Serum – 3er-Kette <span class="badge b-arch">POST</span></h4><p>Prompt gesetzt · 2 / 3 Bildern generiert</p></div>
+        <svg class="ic chev"><use href="#i-chev"/></svg>
+      </div>
+    </div>
+    <div class="card click" onclick="go('scene-create')">
+      <div class="cardrow">
+        <div class="ico orange"><svg class="ic"><use href="#i-film"/></svg></div>
+        <div class="body"><h4 class="t-sm">Rouge No. 5 – Statement-Spot <span class="badge b-arch">VIDEO</span></h4><p>Script bestätigt · Rendern ausstehend</p></div>
         <svg class="ic chev"><use href="#i-chev"/></svg>
       </div>
     </div>
     <div class="card click" onclick="go('model-create')">
       <div class="cardrow">
-        <div class="ico orange"><svg class="ic"><use href="#i-user"/></svg></div>
+        <div class="ico amber"><svg class="ic"><use href="#i-user"/></svg></div>
-        <div class="body"><h4 class="t-sm">Modell</h4><p>Person oder Produkt als festes Brand-Asset – bleibt in jedem Video 1:1 gleich.</p></div>
+        <div class="body"><h4 class="t-sm">„Mara" v1 <span class="badge b-arch">MODELL</span></h4><p>Entwurf · Referenzbilder fehlen noch</p></div>
         <svg class="ic chev"><use href="#i-chev"/></svg>
       </div>
     </div>
-    </div><!-- /c-scroll -->
 
-    <!-- Fake-Tastatur (Prototyp): erscheint beim Fokus aufs Prompt-Feld -->
+    <div class="note" style="margin-top:16px;">Entwürfe werden lokal gehalten, bis du sie abschließt oder verwirfst.</div>
-    <div class="kb" id="kbOverlay">
-      <div style="display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(24,24,24,.96); border-top:1px solid rgba(255,255,255,.08);">
-        <div style="display:flex; gap:8px; overflow-x:auto; flex:1; scrollbar-width:none;" id="kbModels"></div>
-        <div id="kbDone" style="flex:none; padding:8px 14px; border-radius:100px; background:rgba(255,255,255,.14); font-size:12px; font-weight:700; cursor:pointer;">Fertig</div>
-      </div>
-      <div style="padding:8px 4px 24px; background:rgba(30,30,32,.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);" id="kbKeys"></div>
-    </div>
   </div>
 
   <!-- ============ PROFIL / MENSCHLEIN (neu, enthält Knowledge Base) ============ -->
@@ -637,7 +669,7 @@
   <div class="screen" id="scene-create">
     <div class="topbar"><button class="backpill" onclick="go('create')"><span class="ar">‹</span> Zurück</button><h1>Szene erstellen</h1></div>
     <label>Dein Prompt</label>
-    <textarea>Eine Frau hält einen roten Lippenstift in die Kamera.</textarea>
+    <div class="pf-box" data-beam="bb" data-active="true"><div><textarea class="pf" inputmode="none">Eine Frau hält einen roten Lippenstift in die Kamera.</textarea></div><div data-beam-bloom="true"></div></div>
     <h3>Anzahl Videos</h3>
     <div class="pill-row">
       <div class="pill" onclick="pick(this)">3</div>
@@ -662,7 +694,7 @@
   <div class="screen" id="script-confirm">
     <div class="topbar"><button class="backpill" onclick="go('scene-create')"><span class="ar">‹</span> Zurück</button><h1>Dein Script</h1></div>
     <p class="sub" style="margin-bottom:10px;">Aus deinem Prompt + Brand Knowledge erstellt. Lies es, ändere was du willst – generiert wird erst nach deiner Bestätigung.</p>
-    <textarea style="min-height:250px; font-size:13px; line-height:1.6;">SZENE: „Roter Lippenstift – Close-up"
+    <div class="pf-box" data-beam="bb" data-active="true"><div><textarea class="pf" inputmode="none" style="min-height:250px; font-size:13px; line-height:1.6;">SZENE: „Roter Lippenstift – Close-up"
 
 SETTING: Kaiserslautern, Abendlicht (golden hour), cleaner unscharfer Hintergrund
 
@@ -675,7 +707,7 @@ ABLAUF:
 
 VOICE (warm-weiblich): „Dein Rot. Dein Statement."
 
-TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
+TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea></div><div data-beam-bloom="true"></div></div>
     <div class="note">Erst nach Bestätigung werden die Videos generiert – Kosten entstehen erst dann. Änderungen am Script fließen als Signal in die Knowledge Base.</div>
     <button class="btn" onclick="go('scene-results')"><svg class="ic"><use href="#i-check"/></svg>Bestätigen &amp; 4 Videos generieren</button>
     <button class="btn sec" onclick="go('script-confirm')"><svg class="ic"><use href="#i-refresh"/></svg>Script neu schreiben lassen</button>
@@ -764,7 +796,7 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
       <div class="pill" onclick="pick(this)">Produkt</div>
     </div>
     <label style="margin-top:14px;">Beschreibe deine Person</label>
-    <textarea>Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, nahbar aber edel – passt zu „mutig, clean, luxuriös".</textarea>
+    <div class="pf-box" data-beam="bb" data-active="true"><div><textarea class="pf" inputmode="none">Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, nahbar aber edel – passt zu „mutig, clean, luxuriös".</textarea></div><div data-beam-bloom="true"></div></div>
     <label>Referenzbilder</label>
     <div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: 3–10 Referenzbilder der gewünschten Person / des Looks]</span></div>
     <div class="note">Rechte-Regel: Gesichter echter Personen nur mit dokumentierter Einwilligung. Rein KI-generierte Gesichter sind der sichere Standard.</div>
@@ -819,7 +851,7 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
       <div class="pill" onclick="pick(this)">Referenz hochladen</div>
     </div>
     <label style="margin-top:14px;">Was soll besser werden?</label>
-    <textarea>Haare etwas dunkler, Ausstrahlung natürlicher, weniger Studio-Look.</textarea>
+    <div class="pf-box" data-beam="bb" data-active="true"><div><textarea class="pf" inputmode="none">Haare etwas dunkler, Ausstrahlung natürlicher, weniger Studio-Look.</textarea></div><div data-beam-bloom="true"></div></div>
     <div class="card" style="border-style:dashed;">
       <p style="margin-bottom:8px;"><span class="hl">Bei Referenz-Upload:</span></p>
       <div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: Referenzbild]</span></div>
@@ -906,6 +938,15 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
 
 </div>
 
+<!-- Fake-Tastatur (Prototyp): global, erscheint beim Fokus auf ein Prompt-Feld -->
+<div class="kb" id="kbOverlay">
+  <div style="display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(24,24,24,.96); border-top:1px solid rgba(255,255,255,.08);">
+    <div style="display:flex; gap:8px; overflow-x:auto; flex:1; scrollbar-width:none;" id="kbModels"></div>
+    <div id="kbDone" style="flex:none; padding:8px 14px; border-radius:100px; background:rgba(255,255,255,.14); font-size:12px; font-weight:700; cursor:pointer;">Fertig</div>
+  </div>
+  <div style="padding:8px 4px 24px; background:rgba(30,30,32,.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);" id="kbKeys"></div>
+</div>
+
 <!-- ============ NAVIGATION (neu: Feed · Profil · Plus · Dev) ============ -->
 <nav class="nav" id="navBar">
   <div class="nav-glass blur"></div>
@@ -914,7 +955,7 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
   <div class="nav-glass ring"></div>
   <button id="n-feed" class="on" onclick="go('explore')"><svg class="ic"><use href="#i-home"/></svg><span>Feed</span></button>
   <button id="n-profile" onclick="go('profile')"><svg class="ic"><use href="#i-user"/></svg><span>Profil</span></button>
-  <button id="n-create" class="plus" onclick="go('create')" aria-label="Neuer KI-Post">
+  <button id="n-create" class="plus" onclick="toggleCreateMenu(event)" aria-label="Neuer KI-Post">
     <div class="lm-shader lm-bg"></div>
     <div class="lm-core"></div>
     <div class="lm-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9a9a9a" stroke-width="2.4" stroke-linecap="round" style="filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))"><path d="M12 5 V19 M5 12 H19"/></svg></div>
@@ -922,6 +963,14 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
   <button id="n-dev" onclick="go('devmode')" style="opacity:.55;" title="Nur intern sichtbar"><svg class="ic"><use href="#i-gear"/></svg><span>Dev</span></button>
 </nav>
 
+<!-- Plus-Dropdown (klappt nach oben auf) -->
+<div id="createMenu" style="position:fixed; left:50%; bottom:82px; transform:translateX(-50%) translateY(10px); z-index:41; width:194px; padding:6px; border-radius:20px; display:flex; flex-direction:column; gap:2px; opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1); background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15); box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 16px 40px rgba(0,0,0,.5);">
+  <div class="cm-item" onclick="pickCreate('create')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="8.5" cy="9" r="1.6"/><path d="M21 15l-5-5L5 21"/></svg><span>Post</span></div>
+  <div class="cm-item" onclick="pickCreate('scene-create')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="15" height="14" rx="3"/><path d="M17 10l5-3v10l-5-3z"/></svg><span>Video</span></div>
+  <div class="cm-item" onclick="pickCreate('model-create')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/></svg><span>Modell</span></div>
+  <div class="cm-item" onclick="pickCreate('drafts')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11l5 5v11a0 0 0 0 1 0 0H4z"/><path d="M15 4v5h5"/><path d="M8 13h8M8 17h5"/></svg><span>Entwürfe</span></div>
+</div>
+
 <!-- ============ INFO-SHEET (Präsentationsnotizen) ============ -->
 <div class="backdrop" id="backdrop" onclick="toggleInfo(false)"></div>
 <div class="sheet" id="infoSheet">
@@ -949,7 +998,7 @@ function go(id){
     profile:'n-profile','kb-detail':'n-profile','improve-select':'n-profile','improve-input':'n-profile','improve-results':'n-profile','improve-vote':'n-profile',
     create:'n-create',detail:'n-create',tut1:'n-create',tut2:'n-create',onboarding1:'n-create',onboarding2:'n-create',
     'scene-create':'n-create','script-confirm':'n-create','scene-results':'n-create','scene-vote':'n-create',publish:'n-create',
-    'model-create':'n-create','model-result':'n-create',
+    'model-create':'n-create','model-result':'n-create',drafts:'n-create',
     devmode:'n-dev'
   };
   document.querySelectorAll('.nav button').forEach(b=>b.classList.remove('on'));
@@ -1540,13 +1589,42 @@ function renderCreateOpts(){
   pills('countRow',[{v:'1',label:'1 Bild'},{v:'3',label:'3er'},{v:'5',label:'5er'}],String(C.count),function(v){C.count=+v; renderCreateOpts(); renderCreateStack();});
 }
 function toggleOpts(){ C.optOpen=!C.optOpen; renderCreateStack(); }
+var createMenuOpen=false;
+function toggleCreateMenu(e){
+  if(e){ e.stopPropagation(); }
+  createMenuOpen=!createMenuOpen;
+  applyCreateMenu();
+}
+function applyCreateMenu(){
+  var m=document.getElementById('createMenu');
+  m.style.opacity=createMenuOpen?'1':'0';
+  m.style.pointerEvents=createMenuOpen?'auto':'none';
+  m.style.transform='translateX(-50%) translateY('+(createMenuOpen?'0':'10px')+')';
+}
+function pickCreate(target){
+  createMenuOpen=false; applyCreateMenu();
+  go(target);
+}
+document.addEventListener('click',function(e){
+  if(!createMenuOpen) return;
+  var m=document.getElementById('createMenu'), b=document.getElementById('n-create');
+  if((m&&m.contains(e.target))||(b&&b.contains(e.target))) return;
+  createMenuOpen=false; applyCreateMenu();
+},true);
+document.addEventListener('click',function(e){
+  if(!C.optOpen) return;
+  var g=document.getElementById('cSelGroup'), st=document.getElementById('cStack');
+  if(g&&g.contains(e.target)) return;
+  if(st&&st.contains(e.target)) return;
+  C.optOpen=false; renderCreateStack();
+},true);
 var DCHIPS={built:false, mounted:false, insts:[]};
 var DITHER_ON='#f2f2f2', DITHER_OFF='#555555';
 function renderCreateModels(){
   var host=document.getElementById('createModels');
   if(!DCHIPS.built){
     host.innerHTML=C_MODELS.map(function(m,i){
-      return '<div class="chip dither" data-i="'+i+'"><canvas></canvas><div class="dot"></div><span>'+m.name+'</span></div>';
+      return '<div class="chip" data-i="'+i+'"><div class="dot"></div><span>'+m.name+'</span></div>';
     }).join('');
     host.querySelectorAll('.chip').forEach(function(c){
       c.onclick=function(){ C.model=+c.dataset.i; renderCreateModels(); };
@@ -1561,8 +1639,8 @@ function renderCreateModels(){
   });
 }
 /* Shader erst mounten, wenn der Create-Screen sichtbar ist (sonst Groesse 0) */
-function initCreateDither(){
+function initCreateDither(){ return; /* Chips sind jetzt Liquid Glass – kein Dither-Shader mehr */ }
-  if(DCHIPS.mounted) return;
+function _initCreateDither_old(){
   var chips=document.querySelectorAll('#createModels .chip.dither');
   if(!chips.length) return;
   DCHIPS.mounted=true;
@@ -1571,8 +1649,9 @@ function initCreateDither(){
   });
 }
 /* Prompt-Editing über die Fake-Tastatur (Caret-genau wie im Design) */
+var activeTA=null;
 function editPrompt(mutate){
-  var ta=document.getElementById('createPrompt');
+  var ta=activeTA||document.getElementById('createPrompt');
   var p=ta.value, s=ta.selectionStart, e=ta.selectionEnd;
   var r=mutate(p,s,e);
   ta.value=r.val;
@@ -1599,12 +1678,23 @@ function insertToken(tok){
 function setKb(open){
   C.kbOpen=open;
   document.getElementById('kbOverlay').classList.toggle('open',open);
-  document.getElementById('cScroll').classList.toggle('kb-open',open);
+  document.getElementById('navBar').classList.toggle('hidden',open);
+  var onCreate=document.getElementById('create').classList.contains('active');
+  document.getElementById('cScroll').classList.toggle('kb-open',open&&onCreate);
+  var scr=document.querySelector('.screen.active');
+  if(scr) scr.classList.toggle('kb-pad',open&&!onCreate);
   if(open){
     C.optOpen=false; renderCreateStack();
+    if(onCreate){
       requestAnimationFrame(function(){requestAnimationFrame(function(){
         var el=document.getElementById('cScroll'); el.scrollTop=el.scrollHeight;
       });});
+    } else if(activeTA){
+      requestAnimationFrame(function(){
+        var r=activeTA.getBoundingClientRect();
+        window.scrollBy({top:r.top-130, behavior:'smooth'});
+      });
+    }
   }
 }
 function renderKb(){
@@ -1642,21 +1732,24 @@ function renderKb(){
     el.addEventListener('mousedown',press);
     el.addEventListener('touchstart',press,{passive:false});
   });
-  function done(e){ e.preventDefault(); document.getElementById('createPrompt').blur(); setKb(false); }
+  function done(e){ e.preventDefault(); if(activeTA) activeTA.blur(); setKb(false); }
   document.getElementById('kbDone').addEventListener('mousedown',done);
   document.getElementById('kbDone').addEventListener('touchstart',done,{passive:false});
 }
 (function(){
-  var ta=document.getElementById('createPrompt');
+  document.querySelectorAll('textarea.pf, #createPrompt').forEach(function(ta){
-  ta.addEventListener('focus',function(){ setKb(true); });
+    ta.setAttribute('inputmode','none');
+    ta.addEventListener('focus',function(){ activeTA=ta; setKb(true); });
     ta.addEventListener('blur',function(){ setKb(false); });
+  });
 })();
 document.getElementById('generateBtn').onclick=function(){
   if(C.generating) return;
-  var lbl=document.getElementById('generateLabel');
+  var ta=document.getElementById('createPrompt');
-  C.generating=1; lbl.textContent='Generiere '+C.count+' Bilder …';
+  var ph=ta.placeholder;
-  setTimeout(function(){ C.generating=2; lbl.textContent='✓ In der Warteschlange'; },1400);
+  C.generating=1; ta.value=''; ta.placeholder='Generiere '+C.count+' Bilder …';
-  setTimeout(function(){ C.generating=0; lbl.textContent='Post generieren'; },3200);
+  setTimeout(function(){ C.generating=2; ta.placeholder='✓ In der Warteschlange'; },1400);
+  setTimeout(function(){ C.generating=0; ta.placeholder=ph; },3200);
 };
 
 /* ---------- Nav-Glas: dynamische Displacement-Map (aus dem Design) ---------- */