/* ===================================
   BASE.CSS - Farben, Variablen, Reset
   =================================== */

:root {
  /* Farben */
  --color-primary: #0066cc;
  --color-primary-light: #e6f2ff;
  --color-accent: #ff6600;
  --color-accent-hover: #e55a00;
  --color-bg-light: #f5f8fa;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-white: #ffffff;
  --color-dark: #1a1a1a;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0066cc 0%, #004c99 100%);
  --gradient-primary-animated: linear-gradient(
    135deg,
    #0066cc 0%,
    #00a3ff 100%
  );
  --gradient-primary-hover: linear-gradient(135deg, #0052a3 0%, #0066cc 100%);
  --gradient-accent: linear-gradient(135deg, #ff8c61 0%, #ff6b35 100%);
  --gradient-button-accent: linear-gradient(135deg, #ff6600 0%, #ff8c42 100%);
  --gradient-button-accent-hover: linear-gradient(
    135deg,
    #ff4500 0%,
    #ff6600 100%
  );
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Abstände */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Border & Shadow */
  --border-radius: 12px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);

  /* Typografie */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
}

/* Reset & Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-white);
}

/* Typografie */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--color-accent);
}

img {
  max-width: 100%;
  height: auto;
}

/* Farb-Utility-Klassen */
.text-primary {
  color: var(--color-primary) !important;
}
.text-accent {
  color: var(--color-accent) !important;
}
.bg-primary-light {
  background-color: var(--color-primary-light) !important;
}
.bg-accent {
  background-color: var(--color-accent) !important;
}

/* Gradient-Utility-Klassen */
.bg-gradient-primary {
  background: var(--gradient-primary) !important;
  color: white !important;
}
.bg-gradient-accent {
  background: var(--gradient-button-accent) !important;
  background-size: 200% 200% !important;
  color: white !important;
  animation: gradient-shift 3s ease infinite;
  position: relative;
  overflow: hidden;
}

.bg-gradient-accent::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 150%;
  }
}
.text-gradient-primary {
  background: var(--gradient-primary-animated);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
  text-shadow: 0 0 30px rgba(0, 102, 204, 0.3);
  display: inline-block;
  padding: 8px 0;
  line-height: 1.2;
}

.text-gradient-accent {
  background: var(--gradient-accent);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
  text-shadow: 0 0 30px rgba(255, 102, 0, 0.3);
}