/**
 * EnergieKompass – Site-spezifische Styles
 * Design: Graphit/Kupfer, Editorial-Typo, Custom Cursor (Desktop)
 */

:root {
  --ink: #141820;
  --slate: #2c3544;
  --mist: #d4d0c8;
  --paper: #fafaf8;
  --copper: #b87333;
  --copper-bright: #c9894a;
  --pine: #1e5f4a;
  --pine-soft: #2a7a61;
  --ring: rgba(184, 115, 51, 0.35);
  --shadow: 0 24px 80px rgba(20, 24, 32, 0.12);
  --font-display: "Albert Sans", system-ui, sans-serif;
  --font-body: "Lora", Georgia, serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: var(--font-display);
}

/* ——— Custom Cursor (nur wenn JS Klasse setzt) ——— */
body.cursor-enhanced {
  cursor: none;
}

body.cursor-enhanced a,
body.cursor-enhanced button,
body.cursor-enhanced [role="button"],
body.cursor-enhanced input,
body.cursor-enhanced textarea,
body.cursor-enhanced select,
body.cursor-enhanced label {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
}

.custom-cursor__dot,
.custom-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 9999px;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

.custom-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
}

.custom-cursor__ring {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
    margin 0.35s var(--ease-out), border-radius 0.35s var(--ease-out),
    opacity 0.25s ease;
}

/* Kontext via :has() – interaktive Flächen vergrößern den Ring subtil */
body.cursor-enhanced:has(a:hover) .custom-cursor__ring,
body.cursor-enhanced:has(button:hover) .custom-cursor__ring,
body.cursor-enhanced:has([data-cursor="link"]:hover) .custom-cursor__ring,
body.cursor-enhanced:has([role="button"]:hover) .custom-cursor__ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 9999px;
}

body.cursor-enhanced:has(img:hover) .custom-cursor__ring,
body.cursor-enhanced:has(article:hover) .custom-cursor__ring,
body.cursor-enhanced:has([data-cursor="media"]:hover) .custom-cursor__ring {
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 18px;
}

/* Navigation Dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.25s var(--ease-out),
    visibility 0.2s;
}
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown:hover .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Diagonal Hero Dekor */
.hero-diagonal {
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
}

@media (max-width: 1023px) {
  .hero-diagonal {
    clip-path: none;
  }
}

/* Form states */
.input-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 95, 74, 0.25);
  border-color: var(--pine);
}

/* ——— Conversion: Sticky CTA, Modal, Exit-Intent ——— */
body.ek-has-sticky {
  padding-bottom: 5.5rem;
}
@media (min-width: 640px) {
  body.ek-has-sticky {
    padding-bottom: 4.5rem;
  }
}

#ek-sticky-cta {
  box-shadow: 0 -8px 40px rgba(20, 24, 32, 0.15);
}

#ek-modal-overlay,
#ek-exit-overlay {
  backdrop-filter: blur(8px);
}

#ek-modal-overlay[hidden],
#ek-exit-overlay[hidden] {
  display: none !important;
}

.ek-step-panel {
  animation: ekFade 0.35s var(--ease-out) both;
}
@keyframes ekFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-step-panel {
    animation: none;
  }
}