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

app/app.vue

@@ -3,3 +3,18 @@
     <NuxtPage />
   </div>
 </template>
+
+<style>
+/* Critical CSS - Loaded immediately to prevent FOUC */
+html {
+  background-color: #1e1440; /* purple-darkest */
+  color: #f8fafc; /* white/slate-50 */
+  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+</style>

app/components/ui/button/index.ts

@@ -9,20 +9,20 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default: 'btn-experimenta',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-md',
+        destructive: 'btn-destructive',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-md',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-[25px]',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-md',
+        secondary: 'btn-secondary',
-        ghost: 'hover:bg-accent hover:text-accent-foreground rounded-md',
+        ghost: 'hover:bg-accent hover:text-accent-foreground rounded-[25px]',
         link: 'text-primary underline-offset-4 hover:underline',
         experimenta: 'btn-experimenta',
       },
       size: {
         default: 'px-[30px] py-[10px] text-lg leading-[1.7em]',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-9 rounded-[25px] px-3',
-        lg: 'h-11 rounded-md px-8',
+        lg: 'h-11 rounded-[25px] px-8',
-        icon: 'h-10 w-10',
+        icon: 'h-10 w-10 rounded-[25px]',
-        'icon-sm': 'size-9',
+        'icon-sm': 'size-9 rounded-[25px]',
-        'icon-lg': 'size-11',
+        'icon-lg': 'size-11 rounded-[25px]',
         experimenta: 'px-[30px] py-[10px] text-lg leading-[1.7em]',
       },
     },

app/pages/index.vue

@@ -20,6 +20,18 @@ const handleClick = () => {
         </p>
       </div>
 
+      <!-- Example: Card with Safrangold Accent Border -->
+      <div class="card-progress card-accent-border mb-8">
+        <div class="progress-header">
+          <h3 class="progress-title">Verlängerungsfortschritt</h3>
+          <div class="progress-stats">2963 / 4931</div>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" style="width: 60.1%"></div>
+          <div class="progress-percentage">60.1%</div>
+        </div>
+      </div>
+
       <!-- experimenta Button Showcase -->
       <div class="card-glass mb-8">
         <h3 class="text-xl font-semibold mb-4 text-experimenta-accent">experimenta Button</h3>

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 inline-block relative;
-    @apply px-8 py-2.5 rounded-2xl;
+    @apply px-[30px] py-[10px];
-    @apply text-lg font-medium;
+    @apply text-lg font-medium text-white;
-    @apply transition-all duration-300;
+    @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;
   }

docs/design-examples/components/ExperimentaCard.vue

@@ -89,9 +89,10 @@ withDefaults(defineProps<Props>(), {
   @apply rounded-2xl md:rounded-lg;
 }
 
-/* Accent Border (Left) */
+/* Accent Border (Left) - Safrangold (#f59d24) */
 .card-accent-border {
-  @apply border-l-4 border-accent;
+  border-left: 6px solid #f59d24;
+  @apply rounded-l-lg;
 }
 
 /* Card Title */