/* ================================
   KONTAKT.CSS — Kontakt page
   Page-specific styles only
   ================================ */

/* --- Animated fluid background --- */
.section-kontakt {
  padding: 6.4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-kontakt::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 102, 23, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(77, 148, 93, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(122, 184, 138, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(0, 102, 23, 0.06) 0%, transparent 40%);
  animation: fluidMove 20s ease-in-out infinite alternate;
}

@keyframes fluidMove {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(2%, -3%) rotate(1deg) scale(1.02);
  }
  66% {
    transform: translate(-2%, 2%) rotate(-1deg) scale(0.98);
  }
  100% {
    transform: translate(1%, -1%) rotate(0.5deg) scale(1.01);
  }
}

/* Floating blob accents */
.section-kontakt::after {
  content: "";
  position: absolute;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 23, 0.06) 0%, transparent 70%);
  top: -10rem;
  right: -10rem;
  z-index: 0;
  animation: blobFloat 15s ease-in-out infinite alternate;
}

@keyframes blobFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-3rem, 4rem) scale(1.15);
  }
  100% {
    transform: translate(2rem, -2rem) scale(0.9);
  }
}

.section-kontakt .heading-primary {
  color: var(--color-text-dark);
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  margin-bottom: 3.2rem;
  position: relative;
  z-index: 1;
}

.kontakt-map {
  display: block;
  margin: 0 auto;
  width: min(70rem, 100%);
  height: 35rem;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
