Refine global card system

components/ui/ui-kit-showcase.tsx

@@ -78,6 +78,8 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           nestedContent: "Verschachtelte Inhalte nutzen den zweiten Radius und eine weichere Oberflaeche.",
           nestedSurface: "Verschachtelte Ebene",
           nestedSurfaceText: "Mehr Tiefe ohne einen neuen Component Stil zu erfinden.",
+          singleLayerCard: "Single Layer Card",
+          singleLayerCardText: "Fuer kompakte Kennzahlen und kleine Infobloecke ohne zweite innere Schale.",
           interactiveOuterCard: "Interaktive aeussere Card",
           hoverText: "Das Hover Verhalten bleibt an dieselbe Oberflaechenebene gebunden.",
           inverseOuterCard: "Inverse aeussere Card",
@@ -175,6 +177,8 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           nestedContent: "Nested content uses the secondary radius and a softer surface.",
           nestedSurface: "Nested surface",
           nestedSurfaceText: "Deeper emphasis without inventing a new component style.",
+          singleLayerCard: "Single layer card",
+          singleLayerCardText: "For compact metrics and small info blocks without a second inner shell.",
           interactiveOuterCard: "Interactive outer card",
           hoverText: "Hover behavior stays attached to the same surface level.",
           inverseOuterCard: "Inverse outer card",
@@ -298,7 +302,19 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
                 </CardContent>
               </AppCard>
 
-              <div className="grid gap-4">
+              <div className="grid gap-4 lg:grid-cols-2">
+                <AppCard level={1} layer="single">
+                  <CardContent className="space-y-3 p-5">
+                    <p className="text-sm font-medium text-muted-foreground">{copy.singleLayerCard}</p>
+                    <p className="text-3xl font-semibold tracking-[-0.05em] text-foreground">06+</p>
+                    <p className="text-sm font-semibold uppercase tracking-[0.14em] text-foreground/58">
+                      {copy.surfaceLevel}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {copy.singleLayerCardText}
+                    </p>
+                  </CardContent>
+                </AppCard>
                 <AppCard level={1} interactive>
                   <CardContent className="p-5">
                     <p className="text-sm font-medium text-muted-foreground">{copy.interactiveOuterCard}</p>