/* ============================================================
   Conatec Premium Layer — Enterprise Design Enhancement
   Dezent. Präzise. Konsistent über alle Seiten.
   ============================================================ */

:root {
  --prm-accent: #0082f3;
  --prm-accent-soft: #3db6ff;
  --prm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --prm-border: rgba(255, 255, 255, 0.08);
  --prm-border-hover: rgba(0, 130, 243, 0.45);
}

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

::selection { background: rgba(0, 130, 243, 0.35); color: #fff; }

/* Feine Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0d12; }
::-webkit-scrollbar-thumb { background: #2a3648; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3d5474; }

/* ---------- Typografie-Verfeinerung ---------- */
.heading-style-1 {
  letter-spacing: -0.02em !important;
  font-feature-settings: "kern" 1, "liga" 1;
}
.heading-style-2 { letter-spacing: -0.01em !important; }
.text-white-70, .case-col p, .svc-faq details p { line-height: 1.65; }

/* ---------- Navbar: Glas-Effekt beim Scrollen ---------- */
.navbar-wrapper {
  transition: background-color 0.35s var(--prm-ease), backdrop-filter 0.35s var(--prm-ease),
              border-color 0.35s var(--prm-ease), box-shadow 0.35s var(--prm-ease);
  border-bottom: 1px solid transparent;
}
.navbar-wrapper.prm-scrolled {
  background: rgba(8, 10, 14, 0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--prm-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Nav-Links: animierte Unterstreichung */
.nav-link {
  position: relative;
  transition: color 0.25s var(--prm-ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--prm-accent), var(--prm-accent-soft));
  transition: right 0.3s var(--prm-ease);
}
.nav-link:hover::after, .nav-link.w--current::after { right: 0; }

/* ---------- Buttons: Micro-Interactions ---------- */
.button, .cta-form-button {
  transition: transform 0.25s var(--prm-ease), box-shadow 0.25s var(--prm-ease),
              background-color 0.25s var(--prm-ease) !important;
  will-change: transform;
}
.button:hover, .cta-form-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 130, 243, 0.22), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.button:active, .cta-form-button:active { transform: translateY(0); transition-duration: 0.1s; }
.button .icon-small { transition: transform 0.25s var(--prm-ease); }
.button:hover .icon-small { transform: translate(3px, -3px); }

/* ---------- Karten: Hover-Lift + Akzent-Rahmen ---------- */
.grid-conten-card, .service-list-card, .case, .svc-step,
.about-member, .about-prinzip, .about-stat, .about-loc-card,
.blog-card-horizontal {
  transition: transform 0.35s var(--prm-ease), border-color 0.35s var(--prm-ease),
              box-shadow 0.35s var(--prm-ease), background-color 0.35s var(--prm-ease);
  will-change: transform;
}
.grid-conten-card:hover, .service-list-card:hover, .case:hover,
.about-member:hover, .about-prinzip:hover, .about-loc-card:hover,
.blog-card-horizontal:hover {
  transform: translateY(-5px);
  border-color: var(--prm-border-hover) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 130, 243, 0.12);
}
.svc-step:hover { transform: translateX(6px); border-color: var(--prm-border-hover); }

/* Karten-Links: kein Sprung durch display:contents-Wrapper */
a.conatec-cardlink .grid-conten-card, a.conatec-cardlink .service-list-card { cursor: pointer; }

/* ---------- Scroll-Reveal ---------- */
.prm-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--prm-ease), transform 0.7s var(--prm-ease);
  transition-delay: var(--prm-delay, 0s);
  will-change: opacity, transform;
}
.prm-reveal.prm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .prm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .grid-conten-card, .button, .case, .svc-step { transition: none !important; }
}

/* ---------- FAQ: sanftes Öffnen ---------- */
.svc-faq details p { transition: opacity 0.35s var(--prm-ease); }
.svc-faq details:not([open]) p { opacity: 0; }
.svc-faq details[open] p { opacity: 1; }
.svc-faq summary { transition: color 0.25s var(--prm-ease); }
.svc-faq details:hover summary { color: var(--prm-accent-soft); }

/* ---------- Formulare: Fokus-Zustände ---------- */
.cta-field, .cta-field-extra {
  transition: border-color 0.25s var(--prm-ease), box-shadow 0.25s var(--prm-ease),
              background-color 0.25s var(--prm-ease) !important;
}
.cta-field:focus, .cta-field-extra:focus {
  border-color: var(--prm-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 243, 0.18);
  outline: none;
  background: rgba(255, 255, 255, 0.09) !important;
}

/* ---------- Footer-Links ---------- */
.footer-link { transition: color 0.25s var(--prm-ease), padding-left 0.25s var(--prm-ease); }
.footer-link:hover { color: var(--prm-accent-soft) !important; padding-left: 4px; }

/* ---------- Feine Akzentlinie unter Section-Headern ---------- */
.section-title-wrapper .heading-style-2 { position: relative; padding-bottom: 14px; }
.section-title-wrapper .heading-style-2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--prm-accent), transparent);
  border-radius: 1px;
}

/* ---------- Tags/Pills: dezenter Glow ---------- */
.tag-wrapper, .case-tag {
  transition: border-color 0.3s var(--prm-ease), box-shadow 0.3s var(--prm-ease);
}
.case:hover .case-tag { border-color: var(--prm-border-hover); box-shadow: 0 0 16px rgba(0,130,243,0.15); }

/* ---------- Accessibility: sichtbarer Fokus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--prm-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Footer V2: aufgeräumt & leise ---------- */
.footer-menu-wrapper { gap: 3rem; }
.footer-menu-content .uppercase.text-white-50 {
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.38) !important;
}
.footer-menu-list li { margin: 0.45rem 0; }
.footer-link {
  font-size: 0.92rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: none !important;
  text-decoration: none;
}
.footer-link:hover { color: #7db8ff !important; }
.footer-wrapper { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.footer-heading { letter-spacing: -0.01em; }