/* ==========================================================================
   KüstenKlick Motion Layer – Smooth Scroll, Reveal, Hover-Micro-Interactions
   Regel: animiert werden AUSSCHLIESSLICH transform + opacity (GPU-Compositing, 60 FPS).
   ========================================================================== */

/* ---- Lenis Basis (offizielle Regeln) ------------------------------------ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Scroll-Reveal ------------------------------------------------------- *
 * REVEAL-LISTE – identisch zu REVEAL in kk-motion.js pflegen!
 * html.kk-js wird per Inline-Snippet im <head> gesetzt → kein Flackern, ohne JS alles sichtbar.
 */
html.kk-js :is(
  .section-head,
  .kk-promise-motto,
  .kk-promise-card,
  .kk-portal-quick-card,
  .kk-service-card,
  .w1-section-blitz .wrap > div > div,
  .w1-card-grid > li,
  .kk-b2b-highlight .w1-copy > div > div,
  .kk-hub-cta,
  details.w1-faq,
  .w1-card, .w1-step, .project-card,
  .kk-rv-section
):not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
html.kk-js :is(
  .section-head,
  .kk-promise-motto,
  .kk-promise-card,
  .kk-portal-quick-card,
  .kk-service-card,
  .w1-section-blitz .wrap > div > div,
  .w1-card-grid > li,
  .kk-b2b-highlight .w1-copy > div > div,
  .kk-hub-cta,
  details.w1-faq,
  .w1-card, .w1-step, .project-card,
  .kk-rv-section
).is-in {
  /* "backwards": nach dem Ende gilt wieder der normale Style → Hover-Transforms bleiben möglich */
  animation: kk-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--kk-i, 0) * 90ms);
}
@keyframes kk-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale3d(0.985, 0.985, 1); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}
/* Notbremse: falls kk-motion.js nicht lädt, bleibt nichts unsichtbar */
html.kk-reveal-fallback .kk-rv-section,
html.kk-reveal-fallback :is(.section-head, .kk-promise-motto, .kk-promise-card, .kk-portal-quick-card, .kk-service-card,
  .w1-section-blitz .wrap > div > div, .w1-card-grid > li, .kk-b2b-highlight .w1-copy > div > div, .kk-hub-cta,
  details.w1-faq, .w1-card, .w1-step, .project-card) {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Hero: Trust-Pills gleiten nacheinander ein (nur transform, kein LCP-Risiko) ---- */
html.kk-js .kk-trust-pills span { animation: kk-pill 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.kk-js .kk-trust-pills span:nth-child(1) { animation-delay: 0.10s; }
html.kk-js .kk-trust-pills span:nth-child(2) { animation-delay: 0.20s; }
html.kk-js .kk-trust-pills span:nth-child(3) { animation-delay: 0.30s; }
html.kk-js .kk-trust-pills span:nth-child(4) { animation-delay: 0.40s; }
@keyframes kk-pill {
  from { transform: translate3d(0, 14px, 0); opacity: 0.001; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}

/* ---- Sparten-Karten: Hover, Press, Spotlight ----------------------------- */
.kk-portal-quick-card,
.kk-service-card {
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.35s ease, background-color 0.25s ease !important;
}
.kk-portal-quick-card > *,
.kk-service-card > * { position: relative; z-index: 1; }

/* Spotlight (nur Maus): Kreis wandert per transform mit dem Cursor */
.kk-portal-quick-card::before,
.kk-service-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0; top: 0;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 178, 0.18) 0%, rgba(0, 168, 178, 0) 65%);
  opacity: 0;
  transform: translate3d(var(--mx, 50%), var(--my, 50%), 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.kk-service-card img {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 50% 60%;
}
.kk-btn-action span[aria-hidden="true"],
.kk-portal-cta {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .kk-portal-quick-card:hover,
  .kk-service-card:hover { transform: translate3d(0, -8px, 0) !important; }
  .kk-portal-quick-card:hover::before,
  .kk-service-card:hover::before { opacity: 1; }
  .kk-service-card:hover img { transform: scale3d(1.07, 1.07, 1); }
  .kk-portal-quick-card:hover .kk-portal-cta { transform: translate3d(5px, 0, 0); }
  .kk-btn-action:hover span[aria-hidden="true"] { transform: translate3d(3px, -3px, 0); }
  .kk-promise-card:hover { transform: translate3d(0, -5px, 0); }
}
/* Touch: sanftes Eindrücken beim Antippen */
.kk-portal-quick-card:active,
.kk-service-card:active,
.kk-promise-card:active { transform: scale3d(0.975, 0.975, 1) !important; transition-duration: 0.12s !important; }
.button:active { transform: scale3d(0.97, 0.97, 1); }

/* Alte, paint-lastige Hover-Schatten-Transitions (w1.css/functions.php) entschärfen */
.w1-card, .w1-step, .card, .project-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
  .w1-card:hover, .w1-step:hover, .card:hover, .project-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: none !important;
  }
}

/* ---- Shimmer-Effekt (edler Licht-Schimmer, nur transform) ---------------- */
.kk-shine { position: relative; overflow: hidden; isolation: isolate; }
.kk-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translate3d(-130%, 0, 0);
  animation: kk-shine 3.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes kk-shine {
  0%       { transform: translate3d(-130%, 0, 0); }
  42%, 100% { transform: translate3d(130%, 0, 0); }
}
.kk-shine.kk-offscreen::after,
.kk-btn-primary.kk-offscreen::after { animation-play-state: paused; }

/* ---- Leitmotiv-Band „Wir halten unsere Versprechen“ ---------------------- */
.kk-promise-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #0c2a31 0%, #0a4955 58%, #087f8c 100%);
  color: #ffffff;
  padding: 52px 0 56px;
}
.kk-promise-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -120px; top: -160px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 195, 202, 0.30) 0%, rgba(112, 195, 202, 0) 68%);
  animation: kk-orb 16s ease-in-out infinite alternate;
}
@keyframes kk-orb {
  from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  to   { transform: translate3d(-60px, 50px, 0) scale3d(1.12, 1.12, 1); }
}
.kk-promise-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.kk-promise-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9fe3e8; margin-bottom: 8px;
}
.kk-promise-motto {
  margin: 0;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.kk-promise-sub { margin: 12px 0 0; color: #cfe6e9; font-size: 16px; line-height: 1.55; }
.kk-promise-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.kk-promise-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 22px 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.kk-promise-card:hover { border-color: rgba(159, 227, 232, 0.7); }
.kk-promise-ico { display: block; font-size: 28px; line-height: 1; margin-bottom: 12px; }
.kk-promise-card strong { display: block; font-size: 17px; margin-bottom: 6px; color: #ffffff; }
.kk-promise-card span.kk-promise-txt { display: block; font-size: 14px; line-height: 1.55; color: #cfe6e9; }

/* ---- Reduced Motion: alles ruhig, alles sichtbar ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.kk-js :is(.section-head, .kk-promise-motto, .kk-promise-card, .kk-portal-quick-card, .kk-service-card,
    .w1-section-blitz .wrap > div > div, .w1-card-grid > li, .kk-b2b-highlight .w1-copy > div > div, .kk-hub-cta,
    details.w1-faq, .w1-card, .w1-step, .project-card, .kk-rv-section) {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .kk-shine::after, .kk-promise-band::before, .kk-trust-pills span, .kk-btn-primary::after { animation: none !important; }
  .kk-portal-quick-card, .kk-service-card, .kk-promise-card, .kk-service-card img { transition: none !important; }
}