presseportale/resources/css/web/theme-businessportal24.css

/**
 * Theme für Businessportal24 (businessportal24.test)
 * Primary: #cf3628 (Rot)
 * Secondary: #f0834a (Orange)
 * Font: Montserrat
 */
@import "./shared-styles.css";

/* Theme-spezifische CSS-Variablen */
:root {
    /* Font-Familie */
    --font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    --font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;

    /* HSL-Variablen basierend auf Primary Color #cf3628 */
    --background: 0 0% 100%;
    --foreground: 4 61% 20%;

    --card: 0 0% 100%;
    --card-foreground: 4 61% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 4 61% 20%;

    /* Primary: #cf3628 -> hsl(4, 61%, 48%) */
    --primary: 4 61% 48%;
    --primary-foreground: 0 0% 100%;
    --primary-50: 4 60% 96%;
    --primary-100: 4 61% 92%;
    --primary-200: 4 61% 85%;
    --primary-300: 4 61% 75%;
    --primary-400: 4 61% 65%;
    --primary-500: 4 61% 55%;
    --primary-600: 4 61% 48%;
    --primary-700: 4 61% 40%;
    --primary-800: 4 61% 32%;
    --primary-900: 4 61% 25%;
    --primary-950: 4 61% 20%;

    /* Secondary: #f0834a -> hsl(21, 84%, 62%) */
    --secondary: 21 84% 62%;
    --secondary-foreground: 4 61% 20%;

    --muted: 4 10% 95%;
    --muted-foreground: 4 10% 45%;

    --accent: 4 61% 48%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 4 10% 90%;
    --input: 4 10% 90%;
    --ring: 4 61% 48%;

    --radius: 0.5rem;

    /* Gradient für Hero */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);

    /* Shadow-Token */
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Warning Colors für Anzeige-Badge */
    --warning: 45 93% 47%;
    --warning-foreground: 26 83% 14%;
}

/* Dark Mode Variablen (falls gewünscht) */
@custom-variant dark (&:where(.dark, .dark *));

@layer theme {
    .dark {
        --background: 4 20% 10%;
        --foreground: 0 0% 95%;

        --card: 4 20% 12%;
        --card-foreground: 0 0% 95%;

        --popover: 4 20% 12%;
        --popover-foreground: 0 0% 95%;

        --primary: 21 84% 62%;
        --secondary: 4 61% 48%;

        --muted: 4 20% 20%;
        --muted-foreground: 4 10% 70%;

        --accent: 21 84% 62%;
        --accent-foreground: 0 0% 10%;

        --border: 4 20% 20%;
        --input: 4 20% 20%;
        --ring: 21 84% 62%;
    }
}

/* Theme-spezifische Overrides */
@layer base {
    body {
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
    }

    h1, h2, h3, h4, h5, h6 {
        color: hsl(var(--primary));
    }

    a:hover {
        color: hsl(var(--secondary));
    }
}

@layer components {
    /* Button Styles */
    .btn-primary {
        @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
        background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
    }

    .btn-primary:hover {
        background-image: linear-gradient(
            to right,
            hsl(var(--primary) / 0.9),
            hsl(var(--secondary) / 0.9)
        );
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
    }

    /* Card Styles */
    .card {
        @apply rounded-xl border transition-all duration-300;
        background-color: hsl(var(--card));
        border-color: hsl(var(--border));
        box-shadow: var(--shadow-card);
    }

    .card:hover {
        box-shadow: var(--shadow-card-hover);
    }

    .card-hover {
        @apply hover:scale-[1.02];
    }

    .card-hover:hover {
        border-color: hsl(var(--primary) / 0.2);
    }

    /* Shadow utilities */
    .shadow-card {
        box-shadow: var(--shadow-card);
    }

    .shadow-card-hover {
        box-shadow: var(--shadow-card-hover);
    }

    /* Input Styles */
    .input-primary {
        @apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
        border-color: hsl(var(--input));
    }

    .input-primary:focus {
        @apply outline-none;
        --tw-ring-color: hsl(var(--primary));
        box-shadow: 0 0 0 2px var(--tw-ring-color);
        border-color: transparent;
    }

    /* Badge Styles */
    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
    }

    .badge-primary {
        @apply border;
        background-color: hsl(var(--primary) / 0.1);
        color: hsl(var(--primary));
        border-color: hsl(var(--primary) / 0.2);
    }

    .badge-secondary {
        @apply border text-gray-700;
        background-color: hsl(var(--secondary) / 0.1);
        border-color: hsl(var(--secondary) / 0.2);
    }
}

/* Animations */
@layer utilities {
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in-down {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slide-in-right {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes scale-in {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animate-fade-in {
        animation: fade-in 0.6s ease-out forwards;
    }

    .animate-fade-in-up {
        animation: fade-in-up 0.6s ease-out forwards;
    }

    .animate-fade-in-down {
        animation: fade-in-down 0.6s ease-out forwards;
    }

    .animate-slide-in-right {
        animation: slide-in-right 0.6s ease-out forwards;
    }

    .animate-scale-in {
        animation: scale-in 0.4s ease-out forwards;
    }

    .animation-delay-100 {
        animation-delay: 0.1s;
        opacity: 0;
    }

    .animation-delay-200 {
        animation-delay: 0.2s;
        opacity: 0;
    }

    .animation-delay-300 {
        animation-delay: 0.3s;
        opacity: 0;
    }

    .animation-delay-400 {
        animation-delay: 0.4s;
        opacity: 0;
    }
}