Add critical CSS styles for layout and typography, enhance button styles with rounded corners, and introduce a progress card component with Safrangold accent border.

assets/css/tailwind.css

@@ -12,6 +12,33 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ========================================
+   FONT FACE DECLARATIONS (Roboto - Local)
+   ======================================== */
+
+/**
+ * Roboto Variable Font - Local Hosting
+ *
+ * Font files are hosted locally for DSGVO compliance and better performance.
+ * This variable font supports all weights from 100-900.
+ *
+ * Format: WOFF2 (best compression, modern browsers)
+ * Coverage: Latin characters
+ * File location: /public/fonts/roboto/Roboto-VariableFont-latin.woff2
+ */
+
+/* Roboto Variable Font - Normal Style (Latin) */
+/* Supports all weights from 100-900 (including 300, 400, 500, 700 that we use) */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: block;
+  src: url('/fonts/roboto/Roboto-VariableFont-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* ========================================
    CSS CUSTOM PROPERTIES
    ======================================== */
@@ -243,15 +270,45 @@
     }
   }
 
+  /* Secondary Button (White Border) */
   .btn-secondary {
-    @apply bg-transparent border-2 border-accent text-accent;
-    @apply px-8 py-2.5 rounded-2xl;
-    @apply text-lg font-medium;
-    @apply transition-all duration-300;
+    @apply inline-block relative;
+    @apply px-[30px] py-[10px];
+    @apply text-lg font-medium text-white;
+    @apply rounded-[25px];
+    @apply cursor-pointer;
+    @apply bg-transparent;
+    @apply border-2 border-white/30;
+    @apply outline-0;
+    @apply no-underline;
+    line-height: 1.7em;
+    transition: all 0.3s ease;
   }
 
   .btn-secondary:hover {
-    @apply bg-accent text-white;
+    @apply bg-white text-purple-darkest;
+    @apply border-white;
+  }
+
+  /* Destructive Button (EXP Signalorange - Warning/Danger Actions) */
+  .btn-destructive {
+    @apply inline-block relative;
+    @apply px-[30px] py-[10px];
+    @apply text-lg font-medium text-white;
+    @apply rounded-[25px];
+    @apply cursor-pointer;
+    @apply border-0 outline-0;
+    @apply no-underline;
+    background: #ea5b0c;
+    background-image: linear-gradient(to left, #ea5b0c, #ea5b0c, #c7490a, #ea5b0c);
+    background-size: 300%;
+    background-position: 0%;
+    line-height: 1.7em;
+    transition: background-position 1s, all 0.3s ease;
+  }
+
+  .btn-destructive:hover {
+    background-position: 100%;
   }
 
   /* Cards */
@@ -280,6 +337,76 @@
     @apply text-accent font-medium mb-4;
   }
 
+  /* Progress Card - with Safrangold accent border */
+  .card-progress {
+    background: rgba(255, 255, 255, 0.08);
+    @apply rounded-2xl md:rounded-lg;
+    @apply p-8 md:p-6 sm:p-5;
+  }
+
+  /* Accent Border (Left) - Safrangold (#f59d24) */
+  .card-accent-border {
+    border-left: 6px solid #f59d24;
+    @apply rounded-l-lg;
+  }
+
+  /* Progress Bar Components */
+  .card-progress .progress-header {
+    @apply flex justify-between items-center mb-5 flex-wrap gap-2;
+  }
+
+  .card-progress .progress-title {
+    @apply text-xl font-medium m-0;
+    color: #f59d24;
+    font-size: 20px;
+  }
+
+  .card-progress .progress-stats {
+    @apply text-lg font-normal;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .card-progress .progress-bar-wrapper {
+    @apply relative w-full;
+    height: 50px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 25px;
+    overflow: hidden;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .card-progress .progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
+    border-radius: 25px;
+    @apply transition-all duration-300;
+    position: relative;
+    background-size: 200% 100%;
+    animation: shimmer 3s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  .card-progress .progress-percentage {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 20px;
+    @apply font-semibold text-white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+  }
+
   .card-info p {
     @apply text-white/90;
   }