Webklar.com/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}



/* Enhanced Glassmorphism */
.glass-enhanced {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Smooth Hover Effects */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Subtle Parallax */
.parallax-bg {
  transform: translateZ(0);
  will-change: transform;
}

/* Static Gradient Background */
.animated-gradient {
  background: linear-gradient(-45deg, #22c55e, #16a34a, #15803d, #166534);
  background-size: 400% 400%;
}



/* Pulse Glow */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
  to { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); }
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Enhanced Button Hover */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-enhanced:hover::before {
  left: 100%;
}

/* Text Glow Effect */
.text-glow {
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

/* Card Hover Effect */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Spinning Numbers Animation */
.spinning-number {
  position: relative;
  font-size: 0.8em; /* Slightly larger than original but smaller than before */
  width: 100%;
  height: 100%;
  min-height: 350px; /* Slightly larger than original */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .spinning-number {
    font-size: 1em; /* Medium size on desktop */
    min-height: 400px;
  }
}

.spinning-number .wheel {
  animation: spinning-number-spin var(--t) linear infinite var(--r1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spinning-number-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.spinning-number .number {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--l) * -1)) scale(var(--s));
}

.spinning-number .number::before {
  content: '1';
  --z: 2;
  transform: translate(-50%, -50%);
  animation: spinning-number-changing calc(var(--t) * var(--z))
    calc(-1 * var(--z) * var(--t) * var(--i) / var(--m) - 60s) linear infinite var(--r);
}

@keyframes spinning-number-changing {
  0% {
    content: '1';
  }
  to {
    content: '0';
  }
}

/* LogoLoop Container - overflow visible beim Hover für Text */
.logo-loop-container {
  overflow: visible;
}

.logo-loop-inner {
  overflow: hidden;
}

.logo-loop-container:hover .logo-loop-inner {
  overflow: visible;
}

/* LogoLoop Fade mit Hintergrundfarbe - Gradient vom Hero-Bereich */
/* Links: helleres Grün (secondary), Rechts: dunkleres Grün (primary) */
.logo-loop-fade.logoloop--fade::before {
  background: linear-gradient(
    to right,
    rgba(129, 144, 103, 0.9) 0%,
    rgba(129, 144, 103, 0.7) 30%,
    transparent 100%
  ) !important;
}

.logo-loop-fade.logoloop--fade::after {
  background: linear-gradient(
    to left,
    rgba(10, 64, 12, 0.9) 0%,
    rgba(10, 64, 12, 0.7) 30%,
    transparent 100%
  ) !important;
}