/* Logo animation */
.logo-animation {
    animation: logoPulse 3s ease-in-out infinite alternate;
}

@keyframes logoPulse {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 158, 59, 0.5));
    }
    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(255, 158, 59, 0.8));
    }
}

/* Rainbow animations 
@keyframes rainbowSlide {
    0% { background-position: 0% 50% }
    100% { background-position: 100% 50% }
}

@keyframes rainbowPulse {
    0% { 
        filter: hue-rotate(0deg);
        transform: scale(1);
    }
    50% {
        filter: hue-rotate(180deg);
        transform: scale(1.1);
    }
    100% { 
        filter: hue-rotate(360deg);
        transform: scale(1);
    }
}

/* Animationen */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rainbowPulse {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.page-transition-enter-active {
    animation: fadeIn 0.5s ease-out forwards;
}

.page-transition-leave-active {
    animation: fadeIn 0.5s ease-out reverse forwards;
}
.animate-fadeIn {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

.logo-rainbow {
    animation: rainbowPulse 6s infinite linear;
}
.delay-100 {
    animation-delay: 0.1s;
}

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

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

/* Ensure page content is visible after transition */
body {
    opacity: 1 !important;
}
/* Icon animations */
.feather {
    transition: all 0.3s ease;
    color: var(--icon-color, currentColor);
    animation: rainbowPulse 5s infinite linear;
}

.feather:hover {
    animation: rainbowPulse 1s infinite linear;
    transform: scale(1.2);
}
/* Navigation animation */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}
/* Basis-Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Page transition animation */
.page-transition-enter {
    opacity: 0;
}

.page-transition-enter-active {
    opacity: 1;
    transition: opacity 300ms;
}

.page-transition-exit {
    opacity: 1;
}

.page-transition-exit-active {
    opacity: 0;
    transition: opacity 300ms;
}
h1 {
	font-size: 16px;
	margin-top: 0;
}

p {
	color: rgb(107, 114, 128);
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}

.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid lightgray;
	border-radius: 16px;
}

.card p:last-child {
	margin-bottom: 0;
}


/* Versteckt den Text 'page' während des Barba-Seitenübergangs */
#barba-overlay-text {
    display: none !important;
}

/* Optional: Falls der weiße Rand auch stört, kannst du das gesamte Overlay unsichtbar machen */
#barba-overlay {
    pointer-events: none; /* Verhindert, dass man während des Übergangs versehentlich woanders klickt */
    background-color: transparent !important;
}