diff --git a/src/App.tsx b/src/App.tsx
index 948e18f..a16c62e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,9 @@
 import { useEffect, lazy, Suspense } from 'react';
 import { motion, MotionConfig } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import { useLiveQuery } from 'dexie-react-hooks';
 import { useAppStore } from './store/useAppStore';
-import { seedDefaults } from './lib/db';
+import { db, seedDefaults } from './lib/db';
 import { startNotificationChecker } from './lib/notifications';
 import { startSyncEngine } from './lib/sync';
 import { ErrorBoundary } from './components/ErrorBoundary';
@@ -32,6 +34,30 @@ function LazyFallback() {
   return <PageSkeleton />;
 }
 
+/** Kopfzeile: Wortmarke plus die eine Zahl, die immer zaehlt — wie viel liegt im Lager. */
+function AppHeader() {
+  const { t } = useTranslation();
+  const activeCount = useLiveQuery(() => db.products.filter((p) => !p.archived).count(), [], null);
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-primary-700 bg-primary-800/95 backdrop-blur">
+      <div className="mx-auto flex max-w-2xl items-center justify-between gap-3 px-4 py-3">
+        <div className="flex items-center gap-2.5">
+          <img src="./icons/icon-48x48.png" alt="" className="h-7 w-7" />
+          <h1 className="title-display text-2xl text-gray-100" style={{ letterSpacing: '0.12em' }}>
+            PrepTrack
+          </h1>
+        </div>
+        {activeCount !== null && activeCount > 0 && (
+          <span className="num text-xs text-gray-400">
+            {t('products.productCount', { count: activeCount })}
+          </span>
+        )}
+      </div>
+    </header>
+  );
+}
+
 function PageContent() {
   const currentPage = useAppStore((s) => s.currentPage);
 
@@ -94,16 +120,9 @@ export default function App() {
         <div className="min-h-screen bg-primary-900">
           <OfflineBanner />
 
-          <header className="sticky top-0 z-30 border-b border-primary-700 bg-primary-800">
-            <div className="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
-              <div className="flex items-center gap-2">
-                <img src="./icons/icon-48x48.png" alt="PrepTrack" className="h-8 w-8" />
-                <h1 className="text-lg font-bold text-gray-100">PrepTrack</h1>
-              </div>
-            </div>
-          </header>
+          <AppHeader />
 
-          <main className="mx-auto max-w-2xl px-4 pb-24 pt-4">
+          <main className="mx-auto max-w-2xl px-4 pt-4 pb-[calc(7.5rem+env(safe-area-inset-bottom))]">
             {/* No AnimatePresence / mode="wait": exit-gated transitions can
                 deadlock on rapid tab switches and leave the page blank. A plain
                 keyed fade-in remounts the page on navigation — the old page
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 3ec670b..be5ebe6 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -144,12 +144,12 @@ export function Dashboard() {
         <div className="flex flex-col items-center text-center">
           <p className="mt-5 text-xl font-semibold text-gray-200">{t('dashboard.noProducts')}</p>
           <p className="mt-2 max-w-xs text-sm text-gray-400">{t('dashboard.noProductsDesc')}</p>
-          <div className="mt-6 flex flex-wrap justify-center gap-3">
-            <button onClick={() => { setEditingProductId(null); setPage('add'); }} className="flex items-center gap-2 rounded-xl bg-green-700 px-5 py-3 font-medium text-white hover:bg-green-600 active:scale-[0.98] transition-transform">
+          <div className="mt-6 flex w-full max-w-xs flex-col gap-3">
+            <button onClick={() => { setEditingProductId(null); setPage('add'); }} className="flex w-full items-center justify-center gap-2 rounded-xl bg-green-700 px-5 py-3 font-medium text-white hover:bg-green-600 active:scale-[0.98] transition-transform">
               <PlusCircle size={18} />
               {t('nav.add')}
             </button>
-            <button onClick={() => fileInputRef.current?.click()} className="flex items-center gap-2 rounded-xl border border-primary-600 bg-primary-800 px-5 py-3 font-medium text-gray-300 hover:border-green-500 hover:text-gray-200 active:scale-[0.98] transition-transform">
+            <button onClick={() => fileInputRef.current?.click()} className="flex w-full items-center justify-center gap-2 rounded-xl border border-green-600/40 bg-transparent px-5 py-3 font-medium text-green-400 hover:border-green-500 hover:bg-green-500/10 active:scale-[0.98] transition-transform">
               <Upload size={18} />
               {t('onboarding.startImport')}
             </button>
@@ -180,15 +180,15 @@ export function Dashboard() {
 
         {/* Feature-Übersicht */}
         <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-400">{t('onboarding.features')}</h3>
+          <h3 className="eyebrow mb-3">{t('onboarding.features')}</h3>
           <div className="space-y-2">
             {[
-              { icon: <WifiOff size={15} className="text-blue-400" />, text: t('onboarding.featureOffline') },
-              { icon: <Camera size={15} className="text-green-400" />, text: t('onboarding.featureCamera') },
-              { icon: <Image size={15} className="text-purple-400" />, text: t('onboarding.featureImages') },
-              { icon: <BellRing size={15} className="text-yellow-400" />, text: t('onboarding.featureNotifications') },
-              { icon: <HardDrive size={15} className="text-orange-400" />, text: t('onboarding.featureExport') },
-              { icon: <Lock size={15} className="text-emerald-400" />, text: t('onboarding.featurePrivacy') },
+              { icon: <WifiOff size={15} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureOffline') },
+              { icon: <Camera size={15} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureCamera') },
+              { icon: <Image size={15} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureImages') },
+              { icon: <BellRing size={15} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureNotifications') },
+              { icon: <HardDrive size={15} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureExport') },
+              { icon: <Lock size={15} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featurePrivacy') },
             ].map((item, i) => (
               <div key={i} className="flex items-start gap-2.5">
                 <span className="mt-0.5 shrink-0">{item.icon}</span>
@@ -203,12 +203,30 @@ export function Dashboard() {
 
   return (
     <div className="space-y-3 pb-4">
-      <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
-        <div className="flex items-center justify-around">
-          <StatRing value={stats.expiredCount + stats.criticalCount} max={total} label={t('dashboard.critical')} color="#ef4444" size={68} strokeWidth={6} />
-          <StatRing value={stats.warningCount + stats.soonCount} max={total} label={t('dashboard.soon')} color="#f97316" size={68} strokeWidth={6} />
-          <StatRing value={stats.goodCount} max={total} label={t('dashboard.good')} color="#22c55e" size={68} strokeWidth={6} />
-          <StatRing value={stats.totalProducts} max={stats.totalProducts} label={t('dashboard.total')} color="#9ca3af" size={68} strokeWidth={6} />
+      {/* Lagerstand: eine Zahl, ein Balken, eine Legende — statt vier Ringen
+          plus separatem Verteilungsbalken mit denselben Daten. */}
+      <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-4">
+        <SectionHeader icon={PieChart} title={t('dashboard.expiryDistribution')} tone="green" className="mb-3" />
+        <div className="flex items-baseline gap-2.5">
+          <p className="num text-5xl font-bold leading-none text-gray-100"><CountUp value={stats.totalProducts} /></p>
+          <p className="eyebrow">{t('dashboard.total')}</p>
+        </div>
+        <div className="mt-3 flex h-2.5 gap-0.5 overflow-hidden rounded-full">
+          {stats.expiredCount + stats.criticalCount > 0 && <div className="rounded-full bg-[color:var(--pt-crit)] transition-all" style={{ width: `${((stats.expiredCount + stats.criticalCount) / total) * 100}%` }} />}
+          {stats.warningCount + stats.soonCount > 0 && <div className="rounded-full bg-[color:var(--pt-warn)] transition-all" style={{ width: `${((stats.warningCount + stats.soonCount) / total) * 100}%` }} />}
+          {stats.goodCount > 0 && <div className="rounded-full bg-[color:var(--pt-ok)] transition-all" style={{ width: `${(stats.goodCount / total) * 100}%` }} />}
+          {total === 0 && <div className="w-full rounded-full bg-primary-700" />}
+        </div>
+        <div className="mt-2.5 flex items-center justify-between text-xs">
+          <span className={stats.expiredCount + stats.criticalCount > 0 ? 'text-[color:var(--pt-crit)]' : 'text-gray-500'}>
+            <span className="num font-semibold">{stats.expiredCount + stats.criticalCount}</span> {t('dashboard.critical')}
+          </span>
+          <span className={stats.warningCount + stats.soonCount > 0 ? 'text-[color:var(--pt-warn)]' : 'text-gray-500'}>
+            <span className="num font-semibold">{stats.warningCount + stats.soonCount}</span> {t('dashboard.soon')}
+          </span>
+          <span className={stats.goodCount > 0 ? 'text-[color:var(--pt-ok)]' : 'text-gray-500'}>
+            <span className="num font-semibold">{stats.goodCount}</span> {t('dashboard.good')}
+          </span>
         </div>
       </div>
 
@@ -219,8 +237,8 @@ export function Dashboard() {
         <StatRing value={preparedness.score} max={100} label={t('preparedness.score')} color={preparednessColor(preparedness.score)} size={64} strokeWidth={6} />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <ShieldCheck size={16} className="text-green-400" />
-            <span className="text-sm font-semibold text-gray-200">{t('preparedness.cardTitle')}</span>
+            <ShieldCheck size={15} className="text-[color:var(--pt-accent)]" />
+            <span className="eyebrow">{t('preparedness.cardTitle')}</span>
           </div>
           <p className="mt-1 text-xs text-gray-400">
             {preparedness.survivalDays !== null
@@ -234,8 +252,8 @@ export function Dashboard() {
 
       <div className="grid grid-cols-2 gap-3">
         <button onClick={requestScan} className="flex items-center gap-3 rounded-xl border border-primary-700 bg-primary-800/60 p-3 text-start hover:bg-primary-700/50 active:scale-[0.98] transition-transform">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-600/20">
-            <ScanBarcode size={20} className="text-green-400" />
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[color:var(--pt-accent-soft)]">
+            <ScanBarcode size={20} className="text-[color:var(--pt-accent)]" />
           </div>
           <div className="min-w-0">
             <p className="truncate text-sm font-medium text-gray-200">{t('dashboard.scan')}</p>
@@ -243,8 +261,8 @@ export function Dashboard() {
           </div>
         </button>
         <button onClick={() => { setEditingProductId(null); setPage('add'); }} className="flex items-center gap-3 rounded-xl border border-primary-700 bg-primary-800/60 p-3 text-start hover:bg-primary-700/50 active:scale-[0.98] transition-transform">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-600/20">
-            <PlusCircle size={20} className="text-blue-400" />
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[color:var(--pt-accent-soft)]">
+            <PlusCircle size={20} className="text-[color:var(--pt-accent)]" />
           </div>
           <div className="min-w-0">
             <p className="truncate text-sm font-medium text-gray-200">{t('dashboard.addProduct')}</p>
@@ -253,24 +271,6 @@ export function Dashboard() {
         </button>
       </div>
 
-      {stats.totalProducts > 0 && (
-        <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
-          <SectionHeader icon={PieChart} title={t('dashboard.expiryDistribution')} tone="green" />
-          <div className="mb-2 flex h-3 overflow-hidden rounded-full bg-primary-700">
-            {stats.expiredCount > 0 && <div className="bg-red-500 transition-all" style={{ width: `${(stats.expiredCount / total) * 100}%` }} />}
-            {stats.criticalCount > 0 && <div className="bg-red-400 transition-all" style={{ width: `${(stats.criticalCount / total) * 100}%` }} />}
-            {stats.warningCount > 0 && <div className="bg-orange-400 transition-all" style={{ width: `${(stats.warningCount / total) * 100}%` }} />}
-            {stats.soonCount > 0 && <div className="bg-yellow-400 transition-all" style={{ width: `${(stats.soonCount / total) * 100}%` }} />}
-            {stats.goodCount > 0 && <div className="bg-green-500 transition-all" style={{ width: `${(stats.goodCount / total) * 100}%` }} />}
-          </div>
-          <div className="flex justify-between text-[0.6rem] text-gray-400">
-            <span>{t('dashboard.expired_count', { count: stats.expiredCount })}</span>
-            <span>{t('dashboard.warning_count', { count: stats.warningCount + stats.soonCount })}</span>
-            <span>{t('dashboard.ok_count', { count: stats.goodCount })}</span>
-          </div>
-        </div>
-      )}
-
       {urgentProducts.length > 0 && (
         <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
           <SectionHeader
@@ -278,7 +278,7 @@ export function Dashboard() {
             title={t('dashboard.urgent')}
             tone="orange"
             action={
-              <button onClick={() => setPage('products')} className="flex shrink-0 items-center gap-0.5 text-xs text-green-400 hover:text-green-300">
+              <button onClick={() => setPage('products')} className="-me-2 flex min-h-[44px] shrink-0 items-center gap-0.5 rounded-lg px-2 text-xs text-green-400 hover:text-green-300">
                 {t('dashboard.all')} <ChevronRight size={14} />
               </button>
             }
@@ -290,9 +290,9 @@ export function Dashboard() {
                 <div className="flex flex-1 items-center justify-between p-3">
                   <div className="min-w-0 flex-1">
                     <p className="truncate text-sm font-medium text-gray-200">{product.name}</p>
-                    <p className="text-xs text-gray-400">{product.storageLocation} &middot; {formatDate(product.expiryDate, product.expiryPrecision)}</p>
+                    <p className="text-xs text-gray-400">{product.storageLocation} &middot; <span className="num">{formatDate(product.expiryDate, product.expiryPrecision)}</span></p>
                   </div>
-                  <span className={`shrink-0 text-xs font-bold ${URGENT_TEXT_COLORS[product.status]}`}>{formatDaysUntil(product.daysLeft)}</span>
+                  <span className={`num shrink-0 text-xs font-bold ${URGENT_TEXT_COLORS[product.status]}`}>{formatDaysUntil(product.daysLeft)}</span>
                 </div>
               </button>
             ))}
@@ -303,12 +303,12 @@ export function Dashboard() {
       <div className="grid grid-cols-2 gap-3">
         {categoryBreakdown.length > 0 && (
           <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
-            <h2 className="mb-2 text-[0.65rem] font-semibold uppercase tracking-wide text-gray-400">{t('dashboard.categories')}</h2>
+            <h2 className="eyebrow mb-2.5">{t('dashboard.categories')}</h2>
             <div className="space-y-1.5">
               {categoryBreakdown.map(({ key, label, count }) => (
                 <div key={key} className="flex items-center justify-between">
                   <span className="text-xs text-gray-400">{label}</span>
-                  <span className="text-xs font-semibold text-gray-300">{count}</span>
+                  <span className="num text-xs font-semibold text-gray-300">{count}</span>
                 </div>
               ))}
             </div>
@@ -317,14 +317,14 @@ export function Dashboard() {
         <div className="space-y-3">
           <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
             <div className="flex items-center gap-2">
-              <TrendingDown size={14} className="text-yellow-400" />
-              <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-gray-400">{t('dashboard.lowStock')}</span>
+              <TrendingDown size={14} className={stats.lowStockCount > 0 ? 'text-[color:var(--pt-warn)]' : 'text-[color:var(--pt-accent)]'} />
+              <span className="eyebrow">{t('dashboard.lowStock')}</span>
             </div>
-            <p className={`stat-number mt-1 text-2xl font-bold ${stats.lowStockCount > 0 ? 'text-yellow-400' : 'text-gray-300'}`}><CountUp value={stats.lowStockCount} /></p>
+            <p className={`stat-number num mt-1 text-2xl font-bold ${stats.lowStockCount > 0 ? 'text-[color:var(--pt-warn)]' : 'text-gray-300'}`}><CountUp value={stats.lowStockCount} /></p>
           </div>
           <div className="rounded-2xl border border-primary-700 bg-primary-800/60 p-3">
-            <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-gray-400">{t('dashboard.storageLocations')}</span>
-            <p className="stat-number mt-1 text-2xl font-bold text-gray-300"><CountUp value={stats.totalLocations} /></p>
+            <span className="eyebrow">{t('dashboard.storageLocations')}</span>
+            <p className="stat-number num mt-1 text-2xl font-bold text-gray-300"><CountUp value={stats.totalLocations} /></p>
           </div>
         </div>
       </div>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 92e6147..07f8b92 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -32,7 +32,7 @@ function NavItem({ label, icon: Icon, isActive, onClick }: NavItemProps) {
     <button
       onClick={onClick}
       className={`relative flex min-w-0 flex-col items-center gap-0.5 px-1 pb-2 pt-2.5 transition-colors ${
-        isActive ? 'text-green-400' : 'text-gray-300 hover:text-gray-200'
+        isActive ? 'text-[color:var(--pt-accent)]' : 'text-gray-400 hover:text-gray-200'
       }`}
       aria-label={label}
       aria-current={isActive ? 'page' : undefined}
@@ -40,7 +40,7 @@ function NavItem({ label, icon: Icon, isActive, onClick }: NavItemProps) {
       {isActive && (
         <motion.span
           layoutId="nav-active"
-          className="absolute top-0 h-0.5 w-7 rounded-full bg-green-400"
+          className="absolute top-0 h-0.5 w-8 bg-[color:var(--pt-accent)]"
           transition={{ type: 'spring', stiffness: 500, damping: 34 }}
         />
       )}
@@ -50,7 +50,7 @@ function NavItem({ label, icon: Icon, isActive, onClick }: NavItemProps) {
       >
         <Icon size={22} strokeWidth={isActive ? 2.5 : 2} />
       </motion.span>
-      <span className="w-full truncate text-center text-[10px] leading-tight">{label}</span>
+      <span className="title-display w-full truncate text-center text-[0.75rem]" style={{ letterSpacing: '0.04em' }}>{label}</span>
     </button>
   );
 }
diff --git a/src/components/Preparedness.tsx b/src/components/Preparedness.tsx
index 41f8ef3..60a54dc 100644
--- a/src/components/Preparedness.tsx
+++ b/src/components/Preparedness.tsx
@@ -137,7 +137,7 @@ export function Preparedness() {
           <ArrowLeft size={18} />
         </button>
         <div>
-          <h2 className="text-lg font-bold text-gray-100">{t('preparedness.title')}</h2>
+          <h2 className="title-display text-3xl text-gray-100">{t('preparedness.title')}</h2>
           <p className="text-xs text-gray-400">{t('preparedness.subtitle')}</p>
         </div>
       </div>
diff --git a/src/components/ProductForm.tsx b/src/components/ProductForm.tsx
index 41a70f0..0f1c759 100644
--- a/src/components/ProductForm.tsx
+++ b/src/components/ProductForm.tsx
@@ -245,7 +245,7 @@ function InlineScanner({ onScanned, autoStart = false }: { onScanned: (data: { b
         <button
           type="button"
           onClick={() => { stopCamera(); reset(); setExpanded(false); }}
-          className="rounded-lg p-1 text-gray-400 hover:bg-primary-700 hover:text-gray-200"
+          className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 hover:bg-primary-700 hover:text-gray-200"
         >
           <ChevronDown size={18} />
         </button>
@@ -471,7 +471,7 @@ function DateScanner({ onResult }: { onResult: (parsed: ParsedExpiry) => void })
       <button
         type="button"
         onClick={() => { setExpanded(true); startCamera(); }}
-        className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-green-500/40 bg-green-500/5 px-4 py-2.5 text-sm font-medium text-green-400 transition-colors hover:border-green-500/60 hover:bg-green-500/10"
+        className="flex min-h-[44px] w-full items-center justify-center gap-2 rounded-lg border border-dashed border-green-500/40 bg-green-500/5 px-4 py-2.5 text-sm font-medium text-green-400 transition-colors hover:border-green-500/60 hover:bg-green-500/10"
       >
         <ScanText size={16} />
         {t('form.ocrScanDate')}
@@ -483,7 +483,7 @@ function DateScanner({ onResult }: { onResult: (parsed: ParsedExpiry) => void })
     <div className="space-y-2 rounded-xl border border-primary-600 bg-primary-800/50 p-3">
       <div className="flex items-center justify-between text-sm font-medium text-gray-300">
         <div className="flex items-center gap-2"><ScanText size={16} /> {t('form.ocrScanDate')}</div>
-        <button type="button" onClick={close} aria-label={t('pwa.close')} className="rounded-lg p-1 text-gray-400 hover:bg-primary-700 hover:text-gray-200">
+        <button type="button" onClick={close} aria-label={t('pwa.close')} className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 hover:bg-primary-700 hover:text-gray-200">
           <X size={18} />
         </button>
       </div>
@@ -720,7 +720,7 @@ export function ProductForm() {
             <ArrowLeft size={20} />
           </button>
         )}
-        <h2 className="text-2xl font-bold text-gray-100">
+        <h2 className="title-display text-4xl text-gray-100">
           {editingProductId ? t('form.editTitle') : t('form.addTitle')}
         </h2>
       </div>
@@ -750,10 +750,10 @@ export function ProductForm() {
               </div>
             ) : (
               <div className="flex gap-2">
-                <button type="button" onClick={handleCameraClick} className="hidden items-center gap-2 rounded-lg border border-primary-600 bg-primary-800 px-4 py-2 text-sm text-gray-300 hover:border-green-500">
+                <button type="button" onClick={handleCameraClick} className="hidden min-h-[44px] items-center gap-2 rounded-lg border border-primary-600 bg-primary-800 px-4 py-2 text-sm text-gray-300 hover:border-green-500">
                   <Camera size={18} /> {t('form.camera')}
                 </button>
-                <button type="button" onClick={() => fileInputRef.current?.click()} className="flex items-center gap-2 rounded-lg border border-primary-600 bg-primary-800 px-4 py-2 text-sm text-gray-300 hover:border-green-500">
+                <button type="button" onClick={() => fileInputRef.current?.click()} className="flex min-h-[44px] items-center gap-2 rounded-lg border border-primary-600 bg-primary-800 px-4 py-2 text-sm text-gray-300 hover:border-green-500">
                   <Upload size={18} /> {t('form.gallery')}
                 </button>
               </div>
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
index 9e2dee8..0802198 100644
--- a/src/components/ProductList.tsx
+++ b/src/components/ProductList.tsx
@@ -145,10 +145,10 @@ export function ProductList() {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-gray-100">
+        <h2 className="title-display text-4xl text-gray-100">
           {showArchived ? t('products.archive') : t('products.title')}
         </h2>
-        <button onClick={() => setShowArchived(!showArchived)} className="text-sm text-green-400 hover:text-green-300">
+        <button onClick={() => setShowArchived(!showArchived)} className="-me-2 inline-flex min-h-[44px] items-center rounded-lg px-2 text-sm text-[color:var(--pt-accent)] hover:brightness-110">
           {showArchived ? t('products.showActive') : t('products.showArchive')}
         </button>
       </div>
@@ -161,7 +161,7 @@ export function ProductList() {
             placeholder={t('products.searchPlaceholder')}
             value={filters.search}
             onChange={(e) => setFilter('search', e.target.value)}
-            className={`w-full rounded-lg border border-primary-600 bg-primary-800 py-2 ps-10 text-gray-200 placeholder-gray-500 focus:border-green-500 focus:outline-none ${filters.search ? 'pe-10' : 'pe-4'}`}
+            className={`min-h-[44px] w-full rounded-lg border border-primary-600 bg-primary-800 py-2 ps-10 text-gray-200 placeholder-gray-500 focus:border-green-500 focus:outline-none ${filters.search ? 'pe-10' : 'pe-4'}`}
           />
           {filters.search && (
             <button
@@ -178,7 +178,7 @@ export function ProductList() {
           onClick={() => setShowFilters(!showFilters)}
           aria-label={t('products.filter')}
           aria-expanded={showFilters}
-          className={`flex items-center gap-1 rounded-lg border px-3 py-2 transition-colors ${hasActiveFilters ? 'border-green-500 text-green-400' : 'border-primary-600 text-gray-400 hover:text-gray-300'}`}
+          className={`flex min-h-[44px] min-w-[44px] items-center justify-center gap-1 rounded-lg border px-3 py-2 transition-colors ${hasActiveFilters ? 'border-green-500 text-green-400' : 'border-primary-600 text-gray-400 hover:text-gray-300'}`}
         >
           <Filter size={18} />
           <ChevronDown size={14} className={`transition-transform ${showFilters ? 'rotate-180' : ''}`} />
@@ -196,17 +196,17 @@ export function ProductList() {
             )}
           </div>
           <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
-            <select value={filters.category} onChange={(e) => setFilter('category', e.target.value)} className="rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-300 focus:border-green-500 focus:outline-none">
+            <select value={filters.category} onChange={(e) => setFilter('category', e.target.value)} className="min-h-[44px] rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-300 focus:border-green-500 focus:outline-none">
               <option value="">{t('products.allCategories')}</option>
               {(['konserven', 'wasser', 'medizin', 'werkzeug', 'hygiene', 'lebensmittel', 'getranke', 'elektronik', 'kleidung', 'sonstiges'] as ProductCategory[]).map((key) => (
                 <option key={key} value={key}>{t(`categories.${key}`)}</option>
               ))}
             </select>
-            <select value={filters.location} onChange={(e) => setFilter('location', e.target.value)} className="rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-300 focus:border-green-500 focus:outline-none">
+            <select value={filters.location} onChange={(e) => setFilter('location', e.target.value)} className="min-h-[44px] rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-300 focus:border-green-500 focus:outline-none">
               <option value="">{t('products.allLocations')}</option>
               {locations.map((loc) => (<option key={loc.id} value={loc.name}>{loc.name}</option>))}
             </select>
-            <select value={filters.status} onChange={(e) => setFilter('status', e.target.value)} className="rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-300 focus:border-green-500 focus:outline-none">
+            <select value={filters.status} onChange={(e) => setFilter('status', e.target.value)} className="min-h-[44px] rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-300 focus:border-green-500 focus:outline-none">
               <option value="">{t('products.allStatus')}</option>
               <option value="expired">{t('products.statusExpired')}</option>
               <option value="critical">{t('products.statusCritical')}</option>
@@ -231,7 +231,7 @@ export function ProductList() {
         </div>
       )}
 
-      <p className="text-sm text-gray-400">
+      <p className="num text-sm text-gray-400">
         {t('products.productCount', { count: filtered.length })}
       </p>
 
@@ -266,28 +266,28 @@ export function ProductList() {
                     </span>
                   </div>
                   <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-400">
-                    <span>{t('products.mhd')}: {formatDate(product.expiryDate, product.expiryPrecision)} ({formatDaysUntil(product.daysLeft)})</span>
-                    <span>{product.quantity} {product.unit}</span>
+                    <span>{t('products.mhd')}: <span className="num">{formatDate(product.expiryDate, product.expiryPrecision)}</span> <span className="num">({formatDaysUntil(product.daysLeft)})</span></span>
+                    <span><span className="num font-semibold text-gray-300">{product.quantity}</span> {product.unit}</span>
                     {product.minStock !== undefined && product.minStock > 0 && product.quantity < product.minStock && (
                       <span className="text-yellow-400">{t('products.lowStockWarning', { min: product.minStock })}</span>
                     )}
                   </div>
                   {!showArchived && (
-                    <div className="mt-2 flex gap-1">
-                      <button onClick={(e) => { e.stopPropagation(); setEditingProductId(product.id!); }} className="rounded-md p-2 text-gray-400 transition-colors hover:bg-primary-700 hover:text-gray-200" title={t('products.edit')} aria-label={t('products.edit')}>
-                        <Edit3 size={16} />
+                    <div className="-ms-3 mt-2 flex gap-1.5">
+                      <button onClick={(e) => { e.stopPropagation(); setEditingProductId(product.id!); }} className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-primary-700 hover:text-gray-200" title={t('products.edit')} aria-label={t('products.edit')}>
+                        <Edit3 size={18} />
                       </button>
-                      <button onClick={(e) => { e.stopPropagation(); setConsumeProduct(product.id!); }} className="rounded-md p-2 text-gray-400 transition-colors hover:bg-primary-700 hover:text-green-400" title={t('products.consumed')} aria-label={t('products.consumed')}>
-                        <ShoppingCart size={16} />
+                      <button onClick={(e) => { e.stopPropagation(); setConsumeProduct(product.id!); }} className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-primary-700 hover:text-green-400" title={t('products.consumed')} aria-label={t('products.consumed')}>
+                        <ShoppingCart size={18} />
                       </button>
-                      <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(product.id!); }} className="rounded-md p-2 text-gray-400 transition-colors hover:bg-primary-700 hover:text-red-400" title={t('products.delete')} aria-label={t('products.delete')}>
+                      <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(product.id!); }} className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-primary-700 hover:text-red-400" title={t('products.delete')} aria-label={t('products.delete')}>
                         <Trash2 size={16} />
                       </button>
                     </div>
                   )}
                   {showArchived && (
-                    <div className="mt-2 flex gap-1">
-                      <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(product.id!); }} className="rounded-md p-2 text-gray-400 transition-colors hover:bg-primary-700 hover:text-red-400" title={t('products.delete')} aria-label={t('products.delete')}>
+                    <div className="-ms-3 mt-2 flex gap-1.5">
+                      <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(product.id!); }} className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-primary-700 hover:text-red-400" title={t('products.delete')} aria-label={t('products.delete')}>
                         <Trash2 size={16} />
                       </button>
                     </div>
@@ -298,8 +298,8 @@ export function ProductList() {
                 <div className="mt-2 flex items-center justify-between rounded-lg border border-red-500/30 bg-red-500/10 p-2">
                   <span className="text-sm text-red-400">{t('products.confirmDelete')}</span>
                   <div className="flex gap-2">
-                    <button onClick={(e) => { e.stopPropagation(); handleDelete(product.id!); }} className="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-500">{t('products.deleteBtn')}</button>
-                    <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(null); }} className="rounded bg-primary-700 px-3 py-1 text-xs text-gray-300 hover:bg-primary-600">{t('products.cancel')}</button>
+                    <button onClick={(e) => { e.stopPropagation(); handleDelete(product.id!); }} className="min-h-[44px] rounded-lg bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-500">{t('products.deleteBtn')}</button>
+                    <button onClick={(e) => { e.stopPropagation(); setConfirmDelete(null); }} className="min-h-[44px] rounded-lg bg-primary-700 px-3 py-1 text-xs text-gray-300 hover:bg-primary-600">{t('products.cancel')}</button>
                   </div>
                 </div>
               )}
@@ -443,14 +443,14 @@ function ConsumeModal({ productId, products, onConfirm, onClose }: { productId:
             if (val < step || (fraction < 1 && val === max)) return null;
             const label = fraction === 1 ? t('consume.allQuick') : `${Math.round(fraction * 100)}%`;
             return (
-              <button key={fraction} onClick={() => setAmount(val)} className={`flex-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${amount === val ? 'border-green-500 bg-green-500/10 text-green-400' : 'border-primary-600 text-gray-400 hover:bg-primary-700'}`}>{label}</button>
+              <button key={fraction} onClick={() => setAmount(val)} className={`min-h-[44px] flex-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${amount === val ? 'border-green-500 bg-green-500/10 text-green-400' : 'border-primary-600 text-gray-400 hover:bg-primary-700'}`}>{label}</button>
             );
           })}
         </div>
         {isAll && <p className="mb-4 rounded-lg border border-orange-500/30 bg-orange-500/5 px-3 py-2 text-xs text-orange-300">{t('consume.archiveWarning')}</p>}
         <div className="flex gap-2">
           <button onClick={() => onConfirm(productId, amount)} className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-green-700 px-4 py-2.5 text-sm font-medium text-white hover:bg-green-600 active:scale-[0.98] transition-transform">
-            <ShoppingCart size={16} />
+            <ShoppingCart size={18} />
             {t('consume.takeBtn', { amount, unit: product.unit })}
           </button>
           <button onClick={onClose} className="rounded-lg border border-primary-600 px-4 py-2.5 text-sm text-gray-400 hover:bg-primary-700">{t('consume.cancel')}</button>
diff --git a/src/components/SectionHeader.tsx b/src/components/SectionHeader.tsx
index 20e76b0..999f9f5 100644
--- a/src/components/SectionHeader.tsx
+++ b/src/components/SectionHeader.tsx
@@ -3,14 +3,16 @@ import type { LucideIcon } from 'lucide-react';
 
 type Tone = 'green' | 'blue' | 'orange' | 'yellow' | 'purple' | 'cyan' | 'red';
 
+/* Struktur spricht in Messing, Farbe bleibt dem Status vorbehalten:
+   nur "orange" und "red" faerben wirklich, alles andere ist Beschriftung. */
 const TONES: Record<Tone, string> = {
-  green: 'bg-green-500/15 text-green-400',
-  blue: 'bg-blue-500/15 text-blue-400',
-  orange: 'bg-orange-500/15 text-orange-400',
-  yellow: 'bg-yellow-500/15 text-yellow-400',
-  purple: 'bg-purple-500/15 text-purple-400',
-  cyan: 'bg-cyan-500/15 text-cyan-400',
-  red: 'bg-red-500/15 text-red-400',
+  green: 'text-[color:var(--pt-accent)]',
+  blue: 'text-[color:var(--pt-accent)]',
+  orange: 'text-[color:var(--pt-warn)]',
+  yellow: 'text-[color:var(--pt-accent)]',
+  purple: 'text-[color:var(--pt-accent)]',
+  cyan: 'text-[color:var(--pt-accent)]',
+  red: 'text-[color:var(--pt-crit)]',
 };
 
 interface SectionHeaderProps {
@@ -22,16 +24,15 @@ interface SectionHeaderProps {
   className?: string;
 }
 
-/** Consistent section header: a tinted icon badge + title (matches the score page). */
+/** Abschnittskopf im Inventarblatt-Stil: Symbol, Versalien-Beschriftung, feine Linie. */
 export function SectionHeader({ icon: Icon, title, tone = 'green', action, className = 'mb-3' }: SectionHeaderProps) {
+  const toneClass = TONES[tone];
+
   return (
-    <div className={`flex items-center justify-between gap-2 ${className}`}>
-      <div className="flex min-w-0 items-center gap-2">
-        <span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${TONES[tone]}`}>
-          <Icon size={16} />
-        </span>
-        <h3 className="truncate text-sm font-semibold text-gray-200">{title}</h3>
-      </div>
+    <div className={`flex items-center gap-2.5 ${className}`}>
+      <Icon size={15} className={`shrink-0 ${toneClass}`} />
+      <h3 className={`eyebrow shrink-0 ${toneClass}`}>{title}</h3>
+      <span className="h-px min-w-4 flex-1 bg-primary-700" aria-hidden="true" />
       {action}
     </div>
   );
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 85fbcc2..2bd9667 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -5,7 +5,6 @@ import { useLiveQuery } from 'dexie-react-hooks';
 import { db, addStorageLocation, deleteStorageLocation, exportData, exportCSV, importData, loadImportedImages, ImportResult } from '../lib/db';
 import { requestNotificationPermission, getNotificationPermissionStatus } from '../lib/notifications';
 import { useDarkMode } from '../hooks/useDarkMode';
-import { usePWAInstall } from '../hooks/usePWAInstall';
 import { useAppStore } from '../store/useAppStore';
 import { downloadFile } from '../lib/utils';
 import { encryptBackup, decryptBackup, isEncryptedBackup } from '../lib/cryptoBackup';
@@ -31,8 +30,6 @@ import {
   FileJson,
   Shield,
   Heart,
-  Smartphone,
-  Share,
   FileText,
   ChevronDown,
   ChevronUp,
@@ -68,12 +65,10 @@ function formatSyncTime(value?: string): string {
 export function Settings() {
   const [isDark, toggleDark] = useDarkMode();
   const { notificationsEnabled, setNotificationsEnabled } = useAppStore();
-  const { isInstallable, isInstalled, isIOS, install } = usePWAInstall();
   const locations = useLiveQuery(() => db.storageLocations.toArray()) ?? [];
   const allProducts = useLiveQuery(() => db.products.toArray()) ?? [];
   const [newLocation, setNewLocation] = useState('');
   const [importStatus, setImportStatus] = useState<{ message: string; type: 'success' | 'warning' | 'error' } | null>(null);
-  const [installError, setInstallError] = useState<string | null>(null);
   const [locationError, setLocationError] = useState<string | null>(null);
   const [syncConfigState, setSyncConfigState] = useState(() => getSyncConfig());
   const [syncServerUrl, setSyncServerUrl] = useState(syncConfigState.serverUrl);
@@ -174,14 +169,6 @@ export function Settings() {
     await applyImportedJson(text);
   }
 
-  async function handleInstall() {
-    setInstallError(null);
-    const success = await install();
-    if (!success) {
-      setInstallError(t('settings.installError'));
-    }
-  }
-
   function handleLanguageChange(langCode: string) {
     i18n.changeLanguage(langCode);
   }
@@ -281,14 +268,14 @@ export function Settings() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-bold text-gray-100">{t('settings.title')}</h2>
+        <h2 className="title-display text-4xl text-gray-100">{t('settings.title')}</h2>
       </div>
 
       {/* Über PrepTrack / Info */}
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <button
           onClick={() => setShowInfo(!showInfo)}
-          className="flex w-full items-center justify-between"
+          className="flex min-h-[44px] w-full items-center justify-between"
         >
           <h3 className="flex items-center gap-2 font-semibold text-gray-200">
             <Info size={18} className="text-green-400" />
@@ -300,12 +287,12 @@ export function Settings() {
           <div className="mt-4 space-y-3">
             <div className="space-y-2.5">
               {[
-                { icon: <WifiOff size={16} className="text-blue-400" />, text: t('onboarding.featureOffline') },
+                { icon: <WifiOff size={16} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureOffline') },
                 { icon: <Camera size={16} className="text-green-400" />, text: t('onboarding.featureCamera') },
-                { icon: <ImageIcon size={16} className="text-purple-400" />, text: t('onboarding.featureImages') },
-                { icon: <BellRing size={16} className="text-yellow-400" />, text: t('onboarding.featureNotifications') },
+                { icon: <ImageIcon size={16} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureImages') },
+                { icon: <BellRing size={16} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featureNotifications') },
                 { icon: <HardDrive size={16} className="text-orange-400" />, text: t('onboarding.featureExport') },
-                { icon: <Lock size={16} className="text-emerald-400" />, text: t('onboarding.featurePrivacy') },
+                { icon: <Lock size={16} className="text-[color:var(--pt-accent)]" />, text: t('onboarding.featurePrivacy') },
               ].map((item, i) => (
                 <div key={i} className="flex items-start gap-3 rounded-lg bg-primary-700/30 px-3 py-2.5">
                   <span className="mt-0.5 shrink-0">{item.icon}</span>
@@ -320,7 +307,7 @@ export function Settings() {
       {/* Language */}
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <h3 className="mb-3 flex items-center gap-2 font-semibold text-gray-200">
-          <Globe size={18} className="text-blue-400" />
+          <Globe size={18} className="text-[color:var(--pt-accent)]" />
           {t('settings.language')}
         </h3>
         <div className="grid grid-cols-2 gap-2">
@@ -342,62 +329,11 @@ export function Settings() {
         </div>
       </section>
 
-      {/* PWA Install */}
-      {!isInstalled && (
-        <section className="rounded-xl border border-green-500/30 bg-green-500/5 p-4">
-          <h3 className="mb-3 flex items-center gap-2 font-semibold text-gray-200">
-            <Smartphone size={18} className="text-green-400" />
-            {t('settings.installApp')}
-          </h3>
-          {isIOS ? (
-            <div className="space-y-2 text-sm text-gray-400">
-              <p>
-                {t('settings.iosInstallHint')}{' '}
-                <Share size={14} className="inline text-blue-400" />{' '}
-                <strong className="text-gray-300">{t('settings.iosShare')}</strong>{' '}
-                <strong className="text-gray-300">&quot;{t('settings.iosHomeScreen')}&quot;</strong>.
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              <p className="text-sm text-gray-400">
-                {t('settings.installDescription')}
-              </p>
-              <button
-                onClick={handleInstall}
-                className="flex w-full items-center justify-center gap-2 rounded-lg bg-green-700 px-4 py-3 font-medium text-white hover:bg-green-600 active:scale-[0.98] transition-transform"
-              >
-                <Download size={18} />
-                {isInstallable ? t('settings.installNow') : t('settings.installApp2')}
-              </button>
-              {installError && (
-                <p className="rounded-lg bg-red-500/10 px-3 py-2 text-xs text-red-400" role="alert">
-                  {installError}
-                </p>
-              )}
-              {!isInstallable && (
-                <p className="text-xs text-gray-400">
-                  {t('settings.installTip')}
-                </p>
-              )}
-            </div>
-          )}
-        </section>
-      )}
-
-      {isInstalled && (
-        <section className="rounded-xl border border-green-500/30 bg-green-500/5 p-4">
-          <div className="flex items-center gap-2">
-            <Smartphone size={18} className="text-green-400" />
-            <span className="text-sm font-medium text-green-400">{t('settings.appInstalled')}</span>
-          </div>
-        </section>
-      )}
 
       {/* Appearance */}
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <h3 className="mb-3 flex items-center gap-2 font-semibold text-gray-200">
-          <Sun size={18} className="text-yellow-400" />
+          <Sun size={18} className="text-[color:var(--pt-accent)]" />
           {t('settings.appearance')}
         </h3>
         <button
@@ -487,7 +423,7 @@ export function Settings() {
       {/* Storage Locations */}
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <h3 className="mb-3 flex items-center gap-2 font-semibold text-gray-200">
-          <MapPin size={18} className="text-cyan-400" />
+          <MapPin size={18} className="text-[color:var(--pt-accent)]" />
           {t('settings.manageLocations')}
         </h3>
         <div className="mb-3 flex gap-2">
@@ -502,13 +438,13 @@ export function Settings() {
               onChange={(e) => setNewLocation(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && handleAddLocation()}
               placeholder={t('settings.newLocationPlaceholder')}
-              className="w-full rounded-lg border border-primary-600 bg-primary-900 py-2 ps-9 pe-4 text-sm text-gray-200 placeholder-gray-500 focus:border-green-500 focus:outline-none"
+              className="min-h-[44px] w-full rounded-lg border border-primary-600 bg-primary-900 py-2 ps-9 pe-4 text-sm text-gray-200 placeholder-gray-500 focus:border-green-500 focus:outline-none"
             />
           </div>
           <button
             onClick={handleAddLocation}
             disabled={!newLocation.trim()}
-            className="rounded-lg bg-green-700 px-3 py-2 text-white hover:bg-green-600 disabled:opacity-50"
+            className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg bg-green-700 px-3 py-2 text-white hover:bg-green-600 disabled:opacity-50"
           >
             <Plus size={18} />
           </button>
@@ -531,9 +467,9 @@ export function Settings() {
                   deleteStorageLocation(loc.id!);
                 }}
                 aria-label={t('settings.deleteLocation', { name: loc.name })}
-                className="rounded p-1.5 text-gray-400 transition-colors hover:bg-primary-600 hover:text-red-400"
+                className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-primary-600 hover:text-red-400"
               >
-                <Trash2 size={14} />
+                <Trash2 size={18} />
               </button>
             </div>
           ))}
@@ -548,7 +484,7 @@ export function Settings() {
       {/* Data Management */}
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <h3 className="mb-3 flex items-center gap-2 font-semibold text-gray-200">
-          <HardDrive size={18} className="text-blue-400" />
+          <HardDrive size={18} className="text-[color:var(--pt-accent)]" />
           {t('settings.dataManagement')}
         </h3>
         <div className="space-y-2">
@@ -556,7 +492,7 @@ export function Settings() {
             onClick={handleExportJSON}
             className="flex w-full items-center gap-3 rounded-lg bg-primary-700/50 px-4 py-3 text-gray-200 hover:bg-primary-700"
           >
-            <FileJson size={20} className="text-blue-400" />
+            <FileJson size={20} className="text-[color:var(--pt-accent)]" />
             <div className="text-start">
               <span>{t('settings.jsonBackup')}</span>
               <p className="text-xs text-gray-400">{t('settings.jsonBackupDesc')}</p>
@@ -642,7 +578,7 @@ export function Settings() {
       {/* Sync */}
       <section className="rounded-xl border border-sky-500/30 bg-sky-500/5 p-4">
         <h3 className="mb-3 flex items-center gap-2 font-semibold text-gray-200">
-          <Cloud size={18} className="text-sky-400" />
+          <Cloud size={18} className="text-[color:var(--pt-accent)]" />
           {t('sync.title')}
         </h3>
 
@@ -658,7 +594,7 @@ export function Settings() {
               value={syncServerUrl}
               onChange={(e) => setSyncServerUrl(e.target.value)}
               placeholder="http://192.168.0.20:8787"
-              className="w-full rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-sky-500 focus:outline-none"
+              className="min-h-[44px] w-full rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-sky-500 focus:outline-none"
             />
           </div>
 
@@ -669,7 +605,7 @@ export function Settings() {
               value={syncDeviceName}
               onChange={(e) => setSyncDeviceName(e.target.value)}
               placeholder={t('sync.deviceNamePlaceholder')}
-              className="w-full rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-sky-500 focus:outline-none"
+              className="min-h-[44px] w-full rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-sky-500 focus:outline-none"
             />
           </div>
 
@@ -681,7 +617,7 @@ export function Settings() {
                 value={syncCode}
                 onChange={(e) => setSyncCode(e.target.value)}
                 placeholder={t('sync.syncCodePlaceholder')}
-                className="w-full rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-sky-500 focus:outline-none"
+                className="min-h-[44px] w-full rounded-lg border border-primary-600 bg-primary-900 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-sky-500 focus:outline-none"
               />
             </div>
           )}
@@ -689,7 +625,7 @@ export function Settings() {
           <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
             <button
               onClick={handleSaveSyncSettings}
-              className="rounded-lg bg-primary-700 px-3 py-2 text-sm text-gray-200 hover:bg-primary-600"
+              className="min-h-[44px] rounded-lg bg-primary-700 px-3 py-2 text-sm text-gray-200 hover:bg-primary-600"
             >
               {t('sync.saveSettings')}
             </button>
@@ -698,7 +634,7 @@ export function Settings() {
               <button
                 onClick={handlePairSyncDevice}
                 disabled={syncBusy}
-                className="rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500 disabled:cursor-not-allowed disabled:opacity-60"
+                className="min-h-[44px] rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500 disabled:cursor-not-allowed disabled:opacity-60"
               >
                 {showRepair ? t('sync.repairDevice') : t('sync.pairDevice')}
               </button>
@@ -706,7 +642,7 @@ export function Settings() {
               <button
                 onClick={handleSyncNowClick}
                 disabled={syncBusy || !syncConfigState.enabled}
-                className="flex items-center justify-center gap-2 rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500 disabled:cursor-not-allowed disabled:opacity-60"
+                className="flex min-h-[44px] items-center justify-center gap-2 rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500 disabled:cursor-not-allowed disabled:opacity-60"
               >
                 <RefreshCw size={15} className={syncBusy ? 'animate-spin' : ''} />
                 {t('sync.syncNow')}
@@ -716,7 +652,7 @@ export function Settings() {
 
           <button
             onClick={handleOpenSyncGuide}
-            className="w-full rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500"
+            className="min-h-[44px] w-full rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500"
           >
             {t('sync.openGuide')}
           </button>
@@ -822,10 +758,10 @@ export function Settings() {
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <button
           onClick={() => setShowImpressum(!showImpressum)}
-          className="flex w-full items-center justify-between"
+          className="flex min-h-[44px] w-full items-center justify-between"
         >
           <h3 className="flex items-center gap-2 font-semibold text-gray-200">
-            <Info size={18} className="text-blue-400" />
+            <Info size={18} className="text-[color:var(--pt-accent)]" />
             {t('settings.impressum')}
           </h3>
           {showImpressum ? <ChevronUp size={18} className="text-gray-400" /> : <ChevronDown size={18} className="text-gray-400" />}
@@ -859,7 +795,7 @@ export function Settings() {
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <button
           onClick={() => setShowDatenschutz(!showDatenschutz)}
-          className="flex w-full items-center justify-between"
+          className="flex min-h-[44px] w-full items-center justify-between"
         >
           <h3 className="flex items-center gap-2 font-semibold text-gray-200">
             <Shield size={18} className="text-green-400" />
@@ -899,10 +835,10 @@ export function Settings() {
       <section className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
         <button
           onClick={() => setShowAGB(!showAGB)}
-          className="flex w-full items-center justify-between"
+          className="flex min-h-[44px] w-full items-center justify-between"
         >
           <h3 className="flex items-center gap-2 font-semibold text-gray-200">
-            <FileText size={18} className="text-blue-400" />
+            <FileText size={18} className="text-[color:var(--pt-accent)]" />
             {t('settings.terms')}
           </h3>
           {showAGB ? <ChevronUp size={18} className="text-gray-400" /> : <ChevronDown size={18} className="text-gray-400" />}
diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx
index f2f3492..4bfceb1 100644
--- a/src/components/Statistics.tsx
+++ b/src/components/Statistics.tsx
@@ -79,7 +79,7 @@ export function Statistics() {
     return (
       <div className="space-y-6">
         <div>
-          <h2 className="text-2xl font-bold text-gray-100">{t('stats.title')}</h2>
+          <h2 className="title-display text-4xl text-gray-100">{t('stats.title')}</h2>
           <p className="text-sm text-gray-400">{t('stats.subtitle')}</p>
         </div>
         <div className="flex flex-col items-center rounded-xl border border-primary-700 bg-primary-800/60 px-6 py-14 text-center">
@@ -96,27 +96,27 @@ export function Statistics() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-bold text-gray-100">{t('stats.title')}</h2>
+        <h2 className="title-display text-4xl text-gray-100">{t('stats.title')}</h2>
         <p className="text-sm text-gray-400">{t('stats.subtitle')}</p>
       </div>
 
       {/* Quick stats */}
       <div className="grid grid-cols-2 gap-3">
         <div className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
-          <div className="flex items-center gap-2 text-blue-400">
-            <Package size={18} />
-            <span className="text-sm">{t('stats.activeProducts')}</span>
+          <div className="flex items-center gap-2 text-[color:var(--pt-accent)]">
+            <Package size={15} />
+            <span className="eyebrow">{t('stats.activeProducts')}</span>
           </div>
-          <p className="mt-1 text-3xl font-bold text-gray-100">
+          <p className="num mt-2 text-3xl font-bold text-gray-100">
             <CountUp value={stats.totalProducts} />
           </p>
         </div>
         <div className="rounded-xl border border-primary-700 bg-primary-800/60 p-4">
-          <div className="flex items-center gap-2 text-orange-400">
-            <Calendar size={18} />
-            <span className="text-sm">{t('stats.expiryRate')}</span>
+          <div className="flex items-center gap-2 text-[color:var(--pt-accent)]">
+            <Calendar size={15} />
+            <span className="eyebrow">{t('stats.expiryRate')}</span>
           </div>
-          <p className="mt-1 text-3xl font-bold text-gray-100"><CountUp value={expiryRate} suffix="%" /></p>
+          <p className="num mt-2 text-3xl font-bold text-gray-100"><CountUp value={expiryRate} suffix="%" /></p>
           <p className="text-xs text-gray-400">{t('stats.ofArchived')}</p>
         </div>
       </div>
@@ -126,18 +126,18 @@ export function Statistics() {
         <SectionHeader icon={BarChart3} title={t('stats.expiryDistribution')} tone="green" />
         <div className="space-y-2">
           {[
-            { label: t('stats.expired'), count: expiryDist.expired, color: 'bg-red-500' },
-            { label: t('stats.critical'), count: expiryDist.critical, color: 'bg-red-400' },
-            { label: t('stats.warning'), count: expiryDist.warning, color: 'bg-orange-400' },
-            { label: t('stats.soon'), count: expiryDist.soon, color: 'bg-yellow-400' },
-            { label: t('stats.ok'), count: expiryDist.good, color: 'bg-green-500' },
+            { label: t('stats.expired'), count: expiryDist.expired, color: 'bg-[color:var(--pt-crit)]' },
+            { label: t('stats.critical'), count: expiryDist.critical, color: 'bg-[color:var(--pt-crit)]' },
+            { label: t('stats.warning'), count: expiryDist.warning, color: 'bg-[color:var(--pt-warn)]' },
+            { label: t('stats.soon'), count: expiryDist.soon, color: 'bg-[color:var(--pt-warn)]' },
+            { label: t('stats.ok'), count: expiryDist.good, color: 'bg-[color:var(--pt-ok)]' },
           ].map(({ label, count, color }) => {
             const pct = Math.round((count / totalForDist) * 100);
             return (
               <div key={label}>
                 <div className="flex justify-between text-sm">
                   <span className="text-gray-400">{label}</span>
-                  <span className="text-gray-300">{count} <span className="text-gray-500">· {pct}%</span></span>
+                  <span className="num text-gray-300">{count} <span className="text-gray-500">· {pct}%</span></span>
                 </div>
                 <div className="mt-1 h-2 overflow-hidden rounded-full bg-primary-700">
                   <div
@@ -160,10 +160,10 @@ export function Statistics() {
               <div key={key}>
                 <div className="mb-1 flex items-center justify-between text-sm">
                   <span className="text-gray-300">{label}</span>
-                  <span className="font-semibold text-gray-200">{count}</span>
+                  <span className="num font-semibold text-gray-200">{count}</span>
                 </div>
                 <div className="h-1.5 overflow-hidden rounded-full bg-primary-700">
-                  <div className="h-full rounded-full bg-purple-400/70 transition-all" style={{ width: `${Math.max((count / categoryMax) * 100, 4)}%` }} />
+                  <div className="h-full rounded-full bg-[color:var(--pt-accent)] opacity-80 transition-all" style={{ width: `${Math.max((count / categoryMax) * 100, 4)}%` }} />
                 </div>
               </div>
             ))}
@@ -180,10 +180,10 @@ export function Statistics() {
               <div key={name}>
                 <div className="mb-1 flex items-center justify-between text-sm">
                   <span className="text-gray-300">{name}</span>
-                  <span className="font-semibold text-gray-200">{count}</span>
+                  <span className="num font-semibold text-gray-200">{count}</span>
                 </div>
                 <div className="h-1.5 overflow-hidden rounded-full bg-primary-700">
-                  <div className="h-full rounded-full bg-cyan-400/70 transition-all" style={{ width: `${Math.max((count / locationMax) * 100, 4)}%` }} />
+                  <div className="h-full rounded-full bg-[color:var(--pt-accent)] opacity-80 transition-all" style={{ width: `${Math.max((count / locationMax) * 100, 4)}%` }} />
                 </div>
               </div>
             ))}
@@ -210,7 +210,7 @@ export function Statistics() {
                     <span className="shrink-0 font-semibold text-gray-200">{count}x</span>
                   </div>
                   <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-primary-800">
-                    <div className="h-full rounded-full bg-green-400/70 transition-all" style={{ width: `${Math.max((count / topConsumedMax) * 100, 4)}%` }} />
+                    <div className="h-full rounded-full bg-[color:var(--pt-accent)] opacity-80 transition-all" style={{ width: `${Math.max((count / topConsumedMax) * 100, 4)}%` }} />
                   </div>
                 </div>
               </div>
diff --git a/src/generated/release-notes.json b/src/generated/release-notes.json
index 491b27d..f970fa8 100644
--- a/src/generated/release-notes.json
+++ b/src/generated/release-notes.json
@@ -1,11 +1,15 @@
 {
   "version": "2.0.17",
-  "generatedAt": "2026-06-15T22:01:50.824Z",
-  "sinceTag": null,
+  "generatedAt": "2026-08-24T12:17:10.656Z",
+  "sinceTag": "v2.0.17",
   "items": [
     {
-      "message": "All bugs fixed",
-      "sha": "413aeb4"
+      "message": "wip(ui): Gestaltungsgrundlage Lagerlogbuch (Web, geparkt)",
+      "sha": "31030d3"
+    },
+    {
+      "message": "fix(ui): Touch-Ziele auf 44px und Ausrichtung bei 412px",
+      "sha": "ed1358d"
     }
   ]
 }
diff --git a/src/i18n/locales/ar/translation.json b/src/i18n/locales/ar/translation.json
index 9021a03..6557279 100644
--- a/src/i18n/locales/ar/translation.json
+++ b/src/i18n/locales/ar/translation.json
@@ -52,7 +52,7 @@
     "confirmDelete": "هل تريد الحذف فعلاً؟ لا يمكن التراجع.",
     "deleteBtn": "حذف",
     "cancel": "إلغاء",
-    "noFilterResults": "لا توجد نتائج لهذه الفلاتر.",
+    "noFilterResults": "لا توجد نتائج — عدّل البحث أو عوامل التصفية.",
     "archiveEmpty": "الأرشيف فارغ.",
     "noProducts": "لم يتم تسجيل أي منتجات بعد.",
     "lowStockWarning": "مخزون منخفض (الحد الأدنى: {{min}})",
diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json
index a5d4133..d3863a7 100644
--- a/src/i18n/locales/de/translation.json
+++ b/src/i18n/locales/de/translation.json
@@ -52,7 +52,7 @@
     "confirmDelete": "Wirklich löschen? Nicht rückgängig machbar.",
     "deleteBtn": "Löschen",
     "cancel": "Abbrechen",
-    "noFilterResults": "Kein Treffer für diese Filter.",
+    "noFilterResults": "Nichts gefunden — Suche oder Filter anpassen.",
     "archiveEmpty": "Archiv ist leer.",
     "noProducts": "Noch keine Produkte erfasst.",
     "lowStockWarning": "Unterbestand (Min: {{min}})",
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index ed3f0d7..b20ec51 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -52,7 +52,7 @@
     "confirmDelete": "Really delete? This cannot be undone.",
     "deleteBtn": "Delete",
     "cancel": "Cancel",
-    "noFilterResults": "No results for these filters.",
+    "noFilterResults": "Nothing found — adjust your search or filters.",
     "archiveEmpty": "Archive is empty.",
     "noProducts": "No products added yet.",
     "lowStockWarning": "Low stock (Min: {{min}})",
diff --git a/src/i18n/locales/fr/translation.json b/src/i18n/locales/fr/translation.json
index dbb7016..6ff5d23 100644
--- a/src/i18n/locales/fr/translation.json
+++ b/src/i18n/locales/fr/translation.json
@@ -52,7 +52,7 @@
     "confirmDelete": "Vraiment supprimer ? Cette action est irréversible.",
     "deleteBtn": "Supprimer",
     "cancel": "Annuler",
-    "noFilterResults": "Aucun résultat pour ces filtres.",
+    "noFilterResults": "Aucun résultat — ajustez la recherche ou les filtres.",
     "archiveEmpty": "Les archives sont vides.",
     "noProducts": "Aucun produit ajouté encore.",
     "lowStockWarning": "Stock faible (Min : {{min}})",
diff --git a/src/i18n/locales/it/translation.json b/src/i18n/locales/it/translation.json
index cb55f89..fbf42d3 100644
--- a/src/i18n/locales/it/translation.json
+++ b/src/i18n/locales/it/translation.json
@@ -52,7 +52,7 @@
     "confirmDelete": "Eliminare davvero? Non si può annullare.",
     "deleteBtn": "Elimina",
     "cancel": "Annulla",
-    "noFilterResults": "Nessun risultato per questi filtri.",
+    "noFilterResults": "Nessun risultato — modifica la ricerca o i filtri.",
     "archiveEmpty": "L'archivio è vuoto.",
     "noProducts": "Nessun prodotto aggiunto ancora.",
     "lowStockWarning": "Scorte basse (Min: {{min}})",
diff --git a/src/i18n/locales/pt/translation.json b/src/i18n/locales/pt/translation.json
index 2b3b24f..e30895e 100644
--- a/src/i18n/locales/pt/translation.json
+++ b/src/i18n/locales/pt/translation.json
@@ -52,7 +52,7 @@
     "confirmDelete": "Realmente excluir? Não pode ser desfeito.",
     "deleteBtn": "Excluir",
     "cancel": "Cancelar",
-    "noFilterResults": "Nenhum resultado para estes filtros.",
+    "noFilterResults": "Nada encontrado — ajusta a pesquisa ou os filtros.",
     "archiveEmpty": "Arquivo vazio.",
     "noProducts": "Nenhum produto cadastrado.",
     "lowStockWarning": "Estoque baixo (Mín: {{min}})",
diff --git a/src/index.css b/src/index.css
index 37cc1dd..56d6404 100644
--- a/src/index.css
+++ b/src/index.css
@@ -58,6 +58,50 @@
   }
 }
 
+/* ===== Gestaltungs-Grundlagen "Lagerlogbuch" =====
+   Akzent = Messing/Khaki (Konservendeckel) fuer Beschriftungen und Struktur,
+   Rot/Orange/Gruen bleiben ausschliesslich Statusfarben.
+   Zahlen und Datumsangaben laufen in JetBrains Mono wie auf einem Inventarblatt. */
+:root {
+  --pt-accent: #d1bf84;
+  --pt-accent-soft: rgba(209, 191, 132, 0.14);
+  --pt-crit: #f26d5b;
+  --pt-warn: #e8763a;
+  --pt-ok: #4ade80;
+}
+
+html:not(.dark) {
+  --pt-accent: #6e6330;
+  --pt-accent-soft: rgba(110, 99, 48, 0.1);
+}
+
+@layer components {
+  /* Kleine Versalien-Beschriftung ueber Abschnitten und Kennzahlen */
+  .eyebrow {
+    font-family: 'Bebas Neue', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    font-size: 0.8125rem;
+    line-height: 1;
+    color: var(--pt-accent);
+  }
+
+  /* Seitentitel und Kachel-Ueberschriften */
+  .title-display {
+    font-family: 'Bebas Neue', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: 1.1; /* Umlaut-Punkte (Ä/Ö/Ü) brauchen Luft nach oben */
+  }
+
+  /* Alle Zahlen, Mengen, Datumsangaben */
+  .num {
+    font-family: 'JetBrains Mono', monospace;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.02em;
+  }
+}
+
 @layer utilities {
   .no-scrollbar::-webkit-scrollbar {
     display: none;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5b03650..c123ca4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,10 +13,10 @@ export default {
           300: '#6ca688',
           400: '#4d936f',
           500: '#2e8056',
-          600: '#27744c',
-          700: '#1e6540',
-          800: '#1a3a2a',
-          900: '#0f1f17',
+          600: '#33493b',
+          700: '#26382d',
+          800: '#141f19',
+          900: '#0b110e',
         },
         olive: {
           100: '#e8e4d0',