refactor: consolidate badge styling to CSS classes

- Move all positioning logic from inline styles to CSS
- New classes: .badge-container-right, .badge-button-layout
- All badge styling now in UsageBadge.css (single source)
- Easier to maintain and adjust globally
- Mobile responsive adjustments in one place

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/UsageBadge.css

@@ -51,3 +51,53 @@
     margin-left: 8px;
   }
 }
+
+/* ============================================================================
+   Badge Container Styles - Positioning
+   ============================================================================
+
+   Zentrale Konfiguration für Badge-Platzierung in verschiedenen Kontexten.
+   Alle Anpassungen an Layout/Spacing hier vornehmen!
+*/
+
+/* Badge rechts außen (für Headings/Titles) */
+.badge-container-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+/* Badge rechts im Button (mit Beschreibung darunter) */
+.badge-button-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+}
+
+.badge-button-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.badge-button-description {
+  font-size: 11px;
+  opacity: 0.8;
+  display: block;
+  margin-top: 2px;
+  text-align: left;
+}
+
+/* Mobile Anpassungen */
+@media (max-width: 640px) {
+  .badge-container-right {
+    gap: 8px;
+  }
+
+  .badge-button-description {
+    font-size: 10px;
+  }
+}

frontend/src/pages/Analysis.jsx

@@ -240,7 +240,7 @@ export default function Analysis() {
             <div className="card" style={{marginBottom:16,borderColor:'var(--accent)',borderWidth:2}}>
               <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
                 <div style={{flex:1}}>
-                  <div style={{fontWeight:700,fontSize:15,color:'var(--accent)',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+                  <div className="badge-container-right" style={{fontWeight:700,fontSize:15,color:'var(--accent)'}}>
                     <span>🔬 Mehrstufige Gesamtanalyse</span>
                     {aiUsage && <UsageBadge {...aiUsage} />}
                   </div>
@@ -295,7 +295,7 @@ export default function Analysis() {
               <div key={p.id} className="card section-gap">
                 <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
                   <div style={{flex:1}}>
-                    <div style={{fontWeight:600,fontSize:15,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+                    <div className="badge-container-right" style={{fontWeight:600,fontSize:15}}>
                       <span>{SLUG_LABELS[p.slug]||p.name}</span>
                       {aiUsage && <UsageBadge {...aiUsage} />}
                     </div>

frontend/src/pages/SettingsPage.jsx

@@ -379,21 +379,25 @@ export default function SettingsPage() {
             </div>
           )}
           {canExport && <>
-            <button className="btn btn-primary btn-full" style={{position:'relative'}}
+            <button className="btn btn-primary btn-full"
               onClick={()=>api.exportZip()}>
-              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',width:'100%'}}>
+              <div className="badge-button-layout">
-                <span><Download size={14}/> ZIP exportieren</span>
+                <div className="badge-button-header">
-                {exportUsage && <UsageBadge {...exportUsage} />}
+                  <span><Download size={14}/> ZIP exportieren</span>
+                  {exportUsage && <UsageBadge {...exportUsage} />}
+                </div>
+                <span className="badge-button-description">je eine CSV pro Kategorie</span>
               </div>
-              <span style={{fontSize:11,opacity:0.8,display:'block',marginTop:2}}>je eine CSV pro Kategorie</span>
             </button>
-            <button className="btn btn-secondary btn-full" style={{position:'relative'}}
+            <button className="btn btn-secondary btn-full"
               onClick={()=>api.exportJson()}>
-              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',width:'100%'}}>
+              <div className="badge-button-layout">
-                <span><Download size={14}/> JSON exportieren</span>
+                <div className="badge-button-header">
-                {exportUsage && <UsageBadge {...exportUsage} />}
+                  <span><Download size={14}/> JSON exportieren</span>
+                  {exportUsage && <UsageBadge {...exportUsage} />}
+                </div>
+                <span className="badge-button-description">maschinenlesbar, alles in einer Datei</span>
               </div>
-              <span style={{fontSize:11,opacity:0.8,display:'block',marginTop:2}}>maschinenlesbar, alles in einer Datei</span>
             </button>
           </>}
         </div>

frontend/src/pages/WeightScreen.jsx

@@ -69,7 +69,7 @@ export default function WeightScreen() {
 
       {/* Eingabe */}
       <div className="card section-gap">
-        <div className="card-title" style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+        <div className="card-title badge-container-right">
           <span>Eintrag hinzufügen</span>
           {weightUsage && <UsageBadge {...weightUsage} />}
         </div>