/*
AKTUALISIERTES CSS
Primär- & Akzentfarbe vereinheitlicht auf #0080ff
*/

@import url('../lib/css/css2_inter.css');
@import url('../lib/css/css2_sourcesanspro.css');
@import url('../lib/css/css2_nunitosans.css');
@import url('../lib/css/css2_ibmplexsans.css');

:root {
    /* Unified Accent / Primary Color - #0080ff (RGB: 0, 128, 255) */
    --color-primary: rgb(0 128 255);
    --color-primary-50: rgb(240 248 255);
    --color-primary-100: rgb(224 239 255);
    --color-primary-200: rgb(179 217 255);
    --color-primary-300: rgb(128 191 255);
    --color-primary-400: rgb(77 166 255);
    --color-primary-500: rgb(0 128 255);
    --color-primary-600: rgb(0 115 230);
    --color-primary-700: rgb(0 102 204);
    --color-primary-800: rgb(0 89 179);
    --color-primary-900: rgb(0 64 128);
    /* Secondary / Accent */
    --color-secondary: rgb(0 128 255);
    --color-accent: rgb(0 128 255);
    /* Light Background */
    --color-background: #FAFBFC;
    --color-surface: #F1F5F9;
    /* Light Text */
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748B;
    --color-text-inverse: #FFFFFF;
    /* Border */
    --color-border: #E2E8F0;
    /* Shadow */
    --shadow-cta: 0 4px 12px rgba(0, 128, 255, 0.35);
    --transition-time: .5s;
}

/* GLOBAL RESETS (Tailwind Base) */
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--color-border);
}

body {
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Inter, sans-serif;
    color: var(--color-text-primary);
}

/* ELEMENTS */
img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* BUTTONS */
.btn-primary {
    background-color: rgb(0 128 255);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    transition: all 250ms ease-out;
}

    .btn-primary:hover {
        background-color: rgb(0 115 230);
        box-shadow: var(--shadow-cta);
    }

.btn-secondary,
.btn-outline {
    border: 2px solid rgb(0 128 255);
    color: rgb(0 128 255);
    background: transparent;
}

    .btn-secondary:hover,
    .btn-outline:hover {
        background-color: rgb(0 128 255);
        color: white;
    }

/* BADGES */
.badge-primary {
    background-color: rgb(0 128 255);
    color: white;
}

/* TEXT UTILITIES */
.text-primary {
    color: rgb(0 128 255);
}

.text-accent {
    color: rgb(0 128 255);
}

/* BACKGROUND UTILITIES */
.bg-primary {
    background-color: rgb(0 128 255);
}

.bg-primary-50 {
    /*background-color: rgba(240 248 255);*/
}

/* BORDER */
.border-primary {
    border-color: rgba(0, 128, 255, .5);
}

    /* BORDER */
    .border-primary:hover {
        border-color: rgb(0, 128, 255);
    }

/* RING / FOCUS */
.focus\:ring-primary:focus {
    --tw-ring-color: rgb(0 128 255 / 0.6);
}

/* LINKS */
a:hover {
    color: rgb(0 128 255);
}

.text-white.image-overlay {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.95), 0 0 15px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 0, 0, 0.65);
}

header {
    border-bottom-width: 0 !important;
}

.xxs-mdi, .xxs-mdi::before {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

.xs-mdi, .xs-mdi::before {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
}

.sm-mdi, .sm-mdi::before {
    font-size: 1.875rem;
    width: 1.875rem;
    height: 1.875rem;
    line-height: 1;
}

.md-mdi, .md-mdi::before {
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
}

.lg-mdi, .lg-mdi::before {
    font-size: 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
    line-height: 1;
}

.xl-mdi, .xl-mdi::before {
    font-size: 3.75rem;
    width: 3.75rem;
    height: 3.75rem;
    line-height: 1;
}

.overlay-box.bg-white {
    --tw-bg-opacity: 0.3;
    backdrop-filter: blur(10px); /* den Hintergrund dahinter verwischen */
    -webkit-backdrop-filter: blur(10px); /* für Safari */
}

/* Übergang auf alle Farbänderungen */
body, header, .card, table, .overlay-box, * {
    transition: all var(--transition-time) ease;
}

/* Buttons oder spezielle Elemente */
.text-primary, .bg-primary, .bg-primary-50 {
    transition: all var(--transition-time) ease;
}

/* Tailwind-Utilities */
.bg-white, .text-text-primary, .text-text-secondary, .text-text-tertiary {
    transition: all var(--transition-time) ease;
}

/* Klasse zum Deaktivieren der Transition (z.B. beim Initialen Dark Mode Set) */
.no-transition, .no-transition * {
    transition: none !important;
}

/* Hebt die Links in der Datenschutzerklärung hervor */
#privacy a {
    text-decoration: underline;
}

/* Eigene Implementierung von line-clamp */
.line-clamp-custom {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Zeigt exakt 3 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Entspricht der Tailwind-Klasse mt-auto */
.mt-auto {
    margin-top: auto !important;
}

/* Optional: Falls du auch margin-bottom: auto brauchst */
.mb-auto {
    margin-bottom: auto !important;
}

.text-success-max {
    --tw-text-opacity: 1;
    color: rgb(0 160 0 / var(--tw-text-opacity, 1));
    /* Subtiler grüner Glow */
    text-shadow: 0 0 4px rgba(0, 160, 0, .5);
}

.text-danger-max {
    --tw-text-opacity: 1;
    color: rgb(160 0 0 / var(--tw-text-opacity, 1));
    /* Subtiler roter Glow */
    text-shadow: 0 0 4px rgba(160, 0, 0, .5);
}

.animate-bounce-slow {
    display: inline-block;
    /* Die Gesamtdauer des Zyklus (Warten + Sprung) beträgt 2 Sekunden */
    animation: bounce-jump 2s infinite ease-in-out;
}

@keyframes bounce-jump {
    /* 0% bis 25% (die ersten 0.5 Sekunden): Der Sprung findet statt */
    0% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-.2em);
    }

    25% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-.2em);
    }
    /* Höchster Punkt des Sprungs */
    35% {
        transform: translateY(0);
    }
    /* 25% bis 100% (die restlichen 1.5 Sekunden): Stillstand */
    100% {
        transform: translateY(0);
    }
}