/*
 * Schwarzwaldstreu — Application Styles
 */

/* ========================================
   Self-hosted Fonts (DSGVO-compliant)
   ======================================== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dm-sans-latin-fe3ac7ee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dm-sans-latin-ext-c1985016.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================
   CSS Custom Properties (Brand Colors)
   ======================================== */
:root {
  --forest-dark: #034236;
  --forest-medium: #0e4738;
  --forest-light: #2e6359;
  --gold: #AA8D4E;
  --gold-light: #c4a86a;
  --gold-dark: #8a7340;
  --cream: #f6f3ec;
  --white: #ffffff;
  --black: #1a1a1a;
  --gray: #666666;
}

/* ========================================
   Base Styles
   ======================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--black);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Helvetica Neue Heavy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.2;
}

/* ========================================
   Animation Keyframes
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ========================================
   Scroll Reveal
   ======================================== */
[data-controller="scroll-reveal"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ========================================
   Hero Animations
   ======================================== */
.hero-badge {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.hero-title {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-subtitle {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-image-mobile-wrapper {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-stats {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-cta {
  animation: fadeInUp 0.8s ease-out 0.9s both;
}

.hero-image-desktop img {
  animation: fadeInRight 1s ease-out 0.5s both;
}

/* ========================================
   Navbar Transitions
   ======================================== */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}

.navbar-scrolled .nav-link {
  color: var(--forest-dark) !important;
}

.navbar-scrolled .nav-link:hover {
  color: var(--gold-dark) !important;
}

.navbar-scrolled .mobile-menu-toggle {
  color: var(--forest-dark) !important;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   Bedarfsrechner — Hide number input spinners
   ======================================== */
input[type="number"].no-spinners::-webkit-outer-spin-button,
input[type="number"].no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].no-spinners {
  -moz-appearance: textfield;
}

/* ========================================
   Vergleich / Comparison Section
   ======================================== */
.vs-circle {
  animation: pulse 2s ease-in-out infinite;
  position: relative;
}

/* Vertical lines extending from VS circle (desktop only) */
@media (min-width: 1024px) {
  .vs-circle::before,
  .vs-circle::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  }
  .vs-circle::before {
    top: -90px;
  }
  .vs-circle::after {
    bottom: -90px;
  }
}