first commit

resources/css/web/shared-styles.css

@@ -0,0 +1,102 @@
+/**
+ * Gemeinsame Styles für alle Frontend-Themes
+ * Diese Datei wird von allen Web-Themes importiert
+ */
+@import "tailwindcss";
+
+/* Definiere wo Tailwind nach Klassen suchen soll */
+@source "../../views/web";
+@source "../../views/layouts/web";
+@source "../../views/livewire/web";
+@source "../../views/components/web";
+
+/* Tailwind Base Layer für gemeinsame Elemente */
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+
+    body {
+        @apply font-sans antialiased;
+    }
+
+    /* Typography Defaults */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-bold leading-tight;
+    }
+
+    h1 {
+        @apply text-4xl md:text-5xl;
+    }
+
+    h2 {
+        @apply text-3xl md:text-4xl;
+    }
+
+    h3 {
+        @apply text-2xl md:text-3xl;
+    }
+
+    h4 {
+        @apply text-xl md:text-2xl;
+    }
+
+    h5 {
+        @apply text-lg md:text-xl;
+    }
+
+    h6 {
+        @apply text-base md:text-lg;
+    }
+
+    /* Link Styles */
+    a {
+        @apply transition-colors duration-200;
+    }
+
+    /* Focus Styles */
+    :focus-visible {
+        @apply outline-none ring-2 ring-offset-2;
+    }
+}
+
+/* Gemeinsame Component Styles */
+@layer components {
+    /* Button Base Styles */
+    .btn {
+        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200;
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    }
+
+    /* Card Styles */
+    .card {
+        @apply bg-white rounded-lg shadow-md overflow-hidden;
+    }
+
+    /* Container */
+    .container-custom {
+        @apply container mx-auto px-4 sm:px-6 lg:px-8;
+    }
+
+    /* Section Spacing */
+    .section {
+        @apply py-12 md:py-16 lg:py-20;
+    }
+}
+
+/* Utility Classes */
+@layer utilities {
+    .text-balance {
+        text-wrap: balance;
+    }
+}
+