/**
 * JK Ventures — High-Tech Visual Layer (Vanilla CSS)
 * Overlay: Navigation/Inhalte bleiben, Optik wird technischer.
 * Header bleibt ohne backdrop-filter (Chromium Geister-Nav).
 */

:root {
  --jk-navy: #0a1628;
  --jk-navy-deep: #050d1a;
  --jk-gold: #c9a84c;
  --jk-gold-soft: rgba(201, 168, 76, 0.42);
  --jk-ink: #f4f1ea;
}

/* ---------- 1. Gradient-Text (Hero-Headline): Gold → Champagner ---------- */
.jk-home-hero__title.jk-gradient-text,
h1.jk-gradient-text {
  background: linear-gradient(90deg, #c9a84c 0%, #e0c36a 48%, #f3e6c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .jk-home-hero__title.jk-gradient-text,
  h1.jk-gradient-text {
    color: #c9a84c;
    -webkit-text-fill-color: #c9a84c;
    background: none;
  }
}

/* ---------- 3. Glassmorphism (Content-Boxen, NICHT der fixed Header) ---------- */
.jk-home-hero__stats {
  border-top-color: transparent;
  gap: 0.75rem;
}

.jk-home-hero__stat.jk-glass,
.jk-glass,
.card-service {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.jk-home-hero__stat.jk-glass,
.jk-glass {
  border-radius: 0.4rem;
  padding: 0.85rem 0.8rem;
}

.jk-why-grid > div {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.35rem;
  padding: 0.9rem 0.85rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- 4 + 10. Glow + Micro-scale auf CTAs ---------- */
.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-navy,
a.btn-navy,
.jk-home-hero__btn-primary,
a.jk-home-hero__btn-primary {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.jk-home-hero__btn-primary:hover,
a.jk-home-hero__btn-primary:hover {
  transform: scale(1.035) !important;
  filter: brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.45),
    0 8px 28px rgba(201, 168, 76, 0.38),
    0 0 36px rgba(201, 168, 76, 0.28) !important;
}

.btn-navy:hover,
a.btn-navy:hover {
  transform: scale(1.035) !important;
  box-shadow:
    0 8px 24px rgba(7, 18, 38, 0.32),
    0 0 22px rgba(201, 168, 76, 0.22) !important;
}

.btn-outline:hover,
a.btn-outline:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.5),
    0 0 22px rgba(201, 168, 76, 0.22);
}

/* Service-Karten: Glow am Rand statt nur Schatten */
.card-service:hover,
html.js-motion .reveal.reveal-visible.card-service:hover,
main .grid > div.bg-white.p-8.border:hover,
.jk-why-grid > div:hover {
  transform: none !important;
  border-color: rgba(201, 168, 76, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.28),
    0 12px 32px rgba(10, 22, 40, 0.1),
    0 0 28px rgba(201, 168, 76, 0.22) !important;
}

/* ---------- 5. Scroll Reveal: Fade-in (kein translateY — vermeidet Chromium-Geister-Header) ---------- */
html.js-ht.js-motion .reveal.reveal-visible {
  animation: jk-ht-reveal 0.7s ease-out both;
}

@keyframes jk-ht-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html.js-ht.js-motion .reveal.reveal-visible.motion-card,
html.js-ht.js-motion .reveal.reveal-visible.card-service {
  animation: jk-ht-reveal 0.7s ease-out both;
}

html.js-ht.js-motion .reveal.reveal-visible.motion-card:hover,
html.js-ht.js-motion .reveal.reveal-visible.card-service:hover {
  animation: none;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- 7. Animierte Trennlinien ---------- */
.jk-section-rule {
  display: block;
  height: 1px;
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.15) 12%,
    rgba(201, 168, 76, 0.7) 50%,
    rgba(201, 168, 76, 0.15) 88%,
    transparent 100%
  );
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.jk-section-rule.is-drawn {
  transform: scaleX(1);
}

html.js-ht .gold-divider {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-ht .gold-divider.mx-auto {
  transform-origin: center;
}

html.js-ht .gold-divider.is-drawn {
  transform: scaleX(1);
}

/* ---------- 8. Mesh-/Gradient-Hintergrund ---------- */
.jk-mesh-section {
  position: relative;
  isolation: isolate;
  background-color: #f4f1ea !important;
  background-image:
    radial-gradient(ellipse 80% 55% at 8% 12%, rgba(201, 168, 76, 0.11), transparent 52%),
    radial-gradient(ellipse 70% 50% at 94% 88%, rgba(10, 22, 40, 0.08), transparent 54%),
    radial-gradient(ellipse 50% 40% at 70% 8%, rgba(201, 168, 76, 0.05), transparent 50%),
    linear-gradient(180deg, #f7f4ee 0%, #eef1f5 48%, #f5f2ea 100%) !important;
}

.jk-mesh-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(10, 22, 40, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 22, 40, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  z-index: 0;
}

.jk-mesh-section > * {
  position: relative;
  z-index: 1;
}

/* ---------- 9. Dark-Mode Toggle ---------- */
.jk-theme-cluster {
  margin-left: 0.35rem;
}

.jk-theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.7);
  background: rgba(201, 168, 76, 0.16);
  color: #f0e6c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.jk-theme-toggle:hover {
  transform: scale(1.06);
  background: rgba(201, 168, 76, 0.14);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.32);
}

.jk-theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

.jk-theme-toggle__sun,
.jk-theme-toggle__moon {
  display: none;
}

html:not([data-theme="dark"]) .jk-theme-toggle__moon {
  display: block;
}

html[data-theme="dark"] .jk-theme-toggle__sun {
  display: block;
}

html[data-theme="dark"] {
  color-scheme: dark;
  background-color: var(--jk-navy-deep);
}

html[data-theme="dark"] body {
  background-color: var(--jk-navy-deep);
  color: var(--jk-ink);
}

html[data-theme="dark"] main {
  background-color: var(--jk-navy-deep);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50 {
  background-color: #0b1524 !important;
}

html[data-theme="dark"] .jk-mesh-section {
  background-color: #0b1524 !important;
  background-image:
    radial-gradient(ellipse 80% 55% at 8% 12%, rgba(201, 168, 76, 0.12), transparent 52%),
    radial-gradient(ellipse 70% 50% at 94% 88%, rgba(80, 120, 180, 0.08), transparent 54%),
    linear-gradient(180deg, #08111f 0%, #0b1524 50%, #0a1422 100%) !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .text-navy-900,
html[data-theme="dark"] h1.text-navy-900,
html[data-theme="dark"] h2.text-navy-900,
html[data-theme="dark"] h3.text-navy-900 {
  color: #f4f1ea !important;
}

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] p.text-gray-600,
html[data-theme="dark"] p.text-gray-500 {
  color: rgba(244, 241, 234, 0.68) !important;
}

html[data-theme="dark"] .text-gray-300 {
  color: rgba(244, 241, 234, 0.78) !important;
}

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .card-service,
html[data-theme="dark"] .jk-home-hero__stat.jk-glass,
html[data-theme="dark"] .jk-why-grid > div,
html[data-theme="dark"] main .grid > div.bg-white,
html[data-theme="dark"] main a.group.block.bg-white {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: inherit;
}

html[data-theme="dark"] .stat-number {
  color: #f4f1ea;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: rgba(8, 16, 30, 0.9) !important;
  color: #f4f1ea !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .bg-gold-500 {
  background-color: #c9a84c !important;
}

html[data-theme="dark"] .bg-gold-500 .text-navy-900,
html[data-theme="dark"] .bg-gold-500 h2,
html[data-theme="dark"] .bg-gold-500 p,
html[data-theme="dark"] .bg-gold-500 a.border-navy-900 {
  color: #0a1628 !important;
}

html[data-theme="dark"] .bg-navy-900,
html[data-theme="dark"] .bg-navy-950,
html[data-theme="dark"] footer,
html[data-theme="dark"] header {
  /* bereits dunkel — nicht aufhellen */
}

html[data-theme="dark"] main .grid > div.border.border-gray-200 {
  background: rgba(12, 24, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] main .grid > div.border .text-navy-900 {
  color: #f4f1ea !important;
}

/* ---------- Hero-Netzwerk-Canvas ---------- */
.jk-hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.78;
}

.jk-home-hero__grid { z-index: 0; }
.jk-home-hero__skyline { z-index: 0; }
.jk-home-hero__glow { z-index: 2; }

/* ---------- Mobile Performance ---------- */
@media (max-width: 640px) {
  .jk-glass,
  .jk-home-hero__stat.jk-glass,
  .card-service,
  .jk-why-grid > div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .jk-hero-network {
    opacity: 0.45;
  }

  .jk-mesh-section::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-ht.js-motion .reveal,
  html.js-ht.js-motion .reveal.reveal-visible,
  html.js-ht.js-motion .reveal.reveal-visible.motion-card,
  html.js-ht.js-motion .reveal.reveal-visible.card-service {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  html.js-ht .gold-divider,
  html.js-ht .gold-divider.is-drawn,
  .jk-section-rule,
  .jk-section-rule.is-drawn {
    transform: none !important;
    transition: none !important;
  }

  .btn-primary:hover,
  a.btn-primary:hover,
  .btn-navy:hover,
  a.btn-navy:hover,
  .jk-home-hero__btn-primary:hover {
    transform: none !important;
  }

  .jk-hero-network {
    opacity: 0.35;
  }
}

@media (hover: none) {
  .btn-primary,
  a.btn-primary,
  .btn-navy,
  a.btn-navy,
  .jk-home-hero__btn-primary {
    will-change: auto;
  }
}