frontend/src/App.tsx

@@ -150,15 +150,15 @@ export const App: React.FC = () => {
   return (
     <div className="min-h-screen bg-canvas text-white flex flex-col font-sans selection:bg-accent/30">
       {/* Top Header Bar */}
-      <header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border">
+      <header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border shadow-sm">
-        <div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
+        <div className="max-w-6xl mx-auto px-3 sm:px-4 py-2 flex items-center justify-between gap-3 sm:gap-6">
           {/* Logo & Headline */}
           <div
             onClick={() => {
               setActiveTab('triage');
               handleTriggerAddButton();
             }}
-            className="flex items-center gap-2.5 cursor-pointer group select-none"
+            className="flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0"
           >
             <div className="w-7 h-7 bg-accent text-white flex items-center justify-center">
               <Brain className="w-4 h-4" />
@@ -173,8 +173,16 @@ export const App: React.FC = () => {
             </div>
           </div>
 
-          {/* User Profile Pill matching Template Screen 2 */}
+          {/* Quick-Capture Input Bubble directly in Header (above Tabs) */}
-          <div className="flex items-center gap-2">
+          <div className="flex-1 max-w-xl mx-auto">
+            <InstantCaptureBar
+              onCaptured={handleCaptured}
+              autoFocusTrigger={captureFocusCount}
+            />
+          </div>
+
+          {/* User Profile Pill */}
+          <div className="flex items-center gap-2 flex-shrink-0">
             <button
               onClick={() => {
                 triggerHaptic(10);
@@ -186,7 +194,7 @@ export const App: React.FC = () => {
               <div className="w-6 h-6 rounded-full bg-accent text-white text-[10px] font-bold flex items-center justify-center">
                 {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
               </div>
-              <span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
+              <span className="max-w-[120px] truncate hidden sm:inline">{user?.displayName || 'Konto'}</span>
             </button>
           </div>
         </div>
@@ -267,13 +275,7 @@ export const App: React.FC = () => {
 
       {/* Main Container */}
       <main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-6">
-        {/* Instant Capture Section */}
+        {/* Tab View Content */}
-        <section className="mb-3">
-          <InstantCaptureBar
-            onCaptured={handleCaptured}
-            autoFocusTrigger={captureFocusCount}
-          />
-        </section>
 
 
         {/* Tab View Content */}

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -135,14 +135,14 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
       <form onSubmit={handleSubmit} className="relative">
         {/* Capture Input Bar */}
         <div
-          className={`flex items-center h-11 pl-2 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
+          className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
             isListening
               ? 'border-accent bg-panel'
               : 'border-border focus-within:border-accent'
           }`}
         >
-          <div className="w-7 h-7 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
+          <div className="w-6 h-6 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
-            <Sparkles className="w-3.5 h-3.5" />
+            <Sparkles className="w-3 h-3" />
           </div>
 
           <input
@@ -153,7 +153,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
             placeholder={
               isListening
                 ? 'Ich höre zu…'
-                : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
+                : 'Schnell-Notiz: Gedanke oder Zutat erfassen… (Taste C oder /)'
             }
             className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
             autoComplete="off"
@@ -165,13 +165,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               type="button"
               onClick={() => setShowOptions((prev) => !prev)}
               title="Priorität & Fälligkeit"
-              className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
+              className={`h-6 px-2 rounded-full text-[11px] flex items-center gap-1 transition-colors ${
                 showOptions || priority !== 'normal' || dueDate
-                  ? 'bg-accent/20 text-accent border border-accent/40'
+                  ? 'bg-accent/20 text-accent border border-accent/40 font-medium'
                   : 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
               }`}
             >
-              <Calendar className="w-3.5 h-3.5" />
+              <Calendar className="w-3 h-3" />
               <span className="hidden sm:inline">
                 {dueDate ? dueDate : priority !== 'normal' ? priority.toUpperCase() : 'Optionen'}
               </span>
@@ -182,20 +182,20 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               type="button"
               onClick={toggleVoiceDictation}
               title="Spracheingabe"
-              className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
+              className={`w-6 h-6 rounded-full flex items-center justify-center transition-colors ${
                 isListening
                   ? 'bg-accent/20 text-accent'
                   : 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
               }`}
             >
-              {isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
+              {isListening ? <MicOff className="w-3 h-3" /> : <Mic className="w-3 h-3" />}
             </button>
 
             {/* Instant Send Button */}
             <button
               type="submit"
               disabled={!content.trim() || isSubmitting}
-              className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
+              className={`h-6 px-2.5 rounded-full font-medium text-[11px] flex items-center gap-1 transition-all ${
                 content.trim()
                   ? 'bg-accent hover:bg-accent-hover text-white cursor-pointer shadow-sm'
                   : 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
@@ -203,12 +203,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
             >
               {justSaved ? (
                 <>
-                  <Check className="w-3.5 h-3.5" />
+                  <Check className="w-3 h-3" />
                   <span className="hidden sm:inline">Gespeichert</span>
                 </>
               ) : (
                 <>
-                  <ArrowUp className="w-3.5 h-3.5" />
+                  <ArrowUp className="w-3 h-3" />
                   <span className="hidden sm:inline">Sichern</span>
                 </>
               )}
@@ -216,9 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
           </div>
         </div>
 
-        {/* Expandable Quick Metadata */}
+        {/* Expandable Quick Metadata (Floating Dropdown) */}
         {showOptions && (
-          <div className="mt-1 px-3 py-2 bg-panel border border-border flex flex-wrap items-center justify-between gap-2 text-xs">
+          <div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-2.5 bg-panel border border-border shadow-2xl flex flex-wrap items-center justify-between gap-2 text-xs">
             <div className="flex items-center gap-1.5">
               <span className="text-zinc-400 mr-1">Priorität:</span>
               {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {