/*!
 * Motion Kit 1.0 – Animationen für Elementor Vorlagen (Nova / Atlas / Maison)
 * Klassen unter Erweitert > CSS-Klassen eintragen. Übersicht: ANLEITUNG.md
 */
:root {
  --mk-accent: #7c5cff;
  --mk-accent-2: #22d3ee;
  --mk-ink: #ffffff;
  --mk-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Smooth Scroll (Lenis) ---------- */
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: hidden; }

/* ---------- Startzustand (nur wenn JS läuft, nie im Editor) ---------- */
.mk-js body:not(.elementor-editor-active) :is(.mk-reveal, .mk-reveal-left, .mk-reveal-right, .mk-reveal-scale, .mk-split, .mk-clip) { visibility: hidden; }
.mk-js body:not(.elementor-editor-active) .mk-stagger > .e-con-inner > .elementor-element,
.mk-js body:not(.elementor-editor-active) .mk-stagger > .elementor-element { visibility: hidden; }
.mk-reduce body * { visibility: visible !important; }

/* Split-Text */
.mk-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mk-wi { display: inline-block; will-change: transform; }

/* Bild-Reveal */
.mk-clip, .mk-parallax, .mk-zoom { overflow: hidden; }
.mk-clip img, .mk-parallax img { will-change: transform; }
:is(.mk-clip, .mk-parallax, .mk-zoom) .elementor-widget-container { overflow: hidden; border-radius: inherit; height: 100%; }
:is(.mk-clip, .mk-parallax, .mk-zoom) img { border-radius: inherit !important; display: block; }
.mk-r-sm { border-radius: 12px; } .mk-r-md { border-radius: 20px; } .mk-r-lg { border-radius: 32px; } .mk-r-full { border-radius: 999px; }
.mk-cover img { width: 100% !important; height: 100% !important; object-fit: cover; }
.mk-parallax img { transform: scale(1.18); }

/* ---------- Hover-Effekte ---------- */
.mk-zoom img { transition: transform 1.1s var(--mk-ease); }
.mk-zoom:hover img { transform: scale(1.07); }

.mk-tilt { transform-style: preserve-3d; will-change: transform; }

.mk-glow { position: relative; isolation: isolate; overflow: hidden; }
.mk-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mk-accent) 28%, transparent), transparent 60%);
  transition: opacity .4s ease;
}
.mk-glow:hover::before { opacity: 1; }

.mk-lift { transition: transform .6s var(--mk-ease), box-shadow .6s var(--mk-ease); }
.mk-lift:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }

/* Button: Lichtreflex beim Hover */
.mk-shine .elementor-button { position: relative; overflow: hidden; isolation: isolate; }
.mk-shine .elementor-button::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; z-index: 1;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .9s var(--mk-ease);
}
.mk-shine .elementor-button:hover::after { left: 140%; }
.mk-magnetic .elementor-button { will-change: transform; }

/* Pfeil-Zeilen (Leistungslisten, Jobs) */
.mk-row { transition: padding .5s var(--mk-ease), background-color .5s var(--mk-ease); }
.mk-row:hover { padding-left: 24px !important; }
.mk-row .mk-arrow, .mk-row .elementor-icon { transition: transform .5s var(--mk-ease); }
.mk-row:hover .mk-arrow, .mk-row:hover .elementor-icon { transform: translateX(8px) rotate(-45deg); }

/* Link-Unterstrich animiert */
.mk-underline a, a.mk-underline { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--mk-ease); text-decoration: none; }
.mk-underline a:hover, a.mk-underline:hover { background-size: 100% 1px; }

/* ---------- Dekor ---------- */
.mk-gradient-text .elementor-heading-title, .mk-gradient-text.mk-inline, .mk-grad {
  background: linear-gradient(100deg, var(--mk-accent), var(--mk-accent-2), var(--mk-accent));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: mk-grad 6s linear infinite;
}
@keyframes mk-grad { to { background-position: 200% center; } }

.mk-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mk-blobs span {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .55;
  background: var(--mk-accent); animation: mk-float 18s ease-in-out infinite alternate; will-change: transform;
}
.mk-blobs span:nth-child(1) { top: -18vmax; left: -10vmax; }
.mk-blobs span:nth-child(2) { bottom: -22vmax; right: -12vmax; background: var(--mk-accent-2); animation-duration: 22s; animation-delay: -6s; }
.mk-blobs span:nth-child(3) { top: 30%; left: 45%; width: 26vmax; height: 26vmax; opacity: .35; animation-duration: 15s; animation-delay: -3s; }
@keyframes mk-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 7vmax, 0) scale(.92); }
}
.mk-grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--mk-line, rgba(255,255,255,.06)) 1px, transparent 1px), linear-gradient(90deg, var(--mk-line, rgba(255,255,255,.06)) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.mk-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Rotierendes Text-Badge */
.mk-spin svg, .mk-spin-el { animation: mk-spin 14s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* Scroll-Hinweis */
.mk-scroll-hint { width: 26px; height: 42px; border: 1.5px solid currentColor; border-radius: 20px; position: relative; opacity: .6; }
.mk-scroll-hint::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: currentColor; animation: mk-hint 1.8s var(--mk-ease) infinite; }
@keyframes mk-hint { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* Pulsierender Punkt */
.mk-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: mk-pulse 2s infinite; vertical-align: middle; margin-right: 8px; }
@keyframes mk-pulse { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ---------- Marquee ---------- */
.mk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mk-marquee .mk-track { display: flex; flex-wrap: nowrap; width: max-content; gap: inherit; will-change: transform; }
.mk-marquee .mk-track > * { flex: 0 0 auto !important; }
.mk-js body:not(.elementor-editor-active) .mk-marquee > .e-con-inner, .mk-js body:not(.elementor-editor-active) .mk-marquee { flex-wrap: nowrap !important; }

/* ---------- Horizontal-Scroll ---------- */
@media (min-width: 1025px) {
  .mk-hscroll { overflow: hidden; }
  .mk-hscroll .mk-track { flex-wrap: nowrap !important; width: max-content !important; will-change: transform; }
  .mk-hscroll .mk-track > .elementor-element, .mk-hscroll .mk-track > .e-con-inner > .elementor-element { flex-shrink: 0 !important; }
}
@media (max-width: 1024px) {
  .mk-hscroll .mk-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .mk-hscroll .mk-track > * { scroll-snap-align: start; flex-shrink: 0 !important; }
  .mk-hscroll .mk-track { scrollbar-width: none; }
}

/* ---------- Header ---------- */
.mk-header { transition: background-color .5s var(--mk-ease), padding .5s var(--mk-ease), transform .6s var(--mk-ease), box-shadow .5s, backdrop-filter .5s; }
.mk-header.mk-scrolled, .mk-header.elementor-sticky--effects { -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
.mk-header.mk-hidden { transform: translateY(-110%); }

/* ---------- Cursor, Fortschritt, Seitenübergang ---------- */
.mk-cursor, .mk-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; mix-blend-mode: difference; }
.mk-cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; transition: width .35s var(--mk-ease), height .35s var(--mk-ease), margin .35s var(--mk-ease), background-color .35s; }
.mk-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.mk-cursor.is-hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #fff; }
.mk-cursor.is-hidden, .mk-cursor-dot.is-hidden { opacity: 0; }
@media (pointer: coarse) { .mk-cursor, .mk-cursor-dot { display: none; } }

.mk-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99998; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--mk-accent), var(--mk-accent-2)); pointer-events: none; }
.admin-bar .mk-progress { top: 32px; }

.mk-curtain { position: fixed; inset: 0; z-index: 100000; background: var(--mk-curtain, #0a0b10); pointer-events: none; transform-origin: 50% 0; }
.mk-curtain.mk-out { animation: mk-curtain-out 1s var(--mk-ease) forwards; }
.mk-curtain.mk-in { transform-origin: 50% 100%; animation: mk-curtain-in .6s var(--mk-ease) forwards; pointer-events: all; }
@keyframes mk-curtain-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes mk-curtain-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .mk-cursor, .mk-cursor-dot, .mk-curtain { display: none !important; }
}

/* ---------- Bausteine der Vorlagen ---------- */
.mk-fill { position: absolute !important; inset: 0; width: 100% !important; max-width: none !important; height: 100%; margin: 0 !important; z-index: 0; pointer-events: none; }
.mk-fill .elementor-widget-container { height: 100%; }
.mk-above { position: relative; z-index: 2; }
.mk-pill { display: inline-flex !important; width: auto !important; align-self: center; align-items: center; padding: 8px 16px 8px 14px; border-radius: 999px; border: 1px solid var(--mk-pill-line, rgba(255,255,255,.14)); background: var(--mk-pill-bg, rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-pill p { margin: 0 !important; }
.mk-pill.mk-start { align-self: flex-start; }
.mk-glass { background: var(--mk-glass-bg, rgba(20,22,32,.55)) !important; border: 1px solid var(--mk-glass-line, rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.mk-outline .elementor-heading-title { color: transparent !important; -webkit-text-stroke: 1px var(--mk-outline, rgba(255,255,255,.35)); }
.mk-eyebrow .elementor-heading-title::before { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; transform: translateY(-2px); }
.mk-badge-spin { pointer-events: none; }
.mk-badge-spin svg { width: 100%; height: auto; display: block; }
.mk-badge-spin .mk-ring { transform-origin: 100px 100px; transform-box: view-box; animation: mk-spin 16s linear infinite; }
.mk-hl-card { position: relative; }
.mk-hl-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--mk-accent), transparent 40%, transparent 60%, var(--mk-accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mk-cta-link .elementor-heading-title a, .mk-cta-link a { transition: color .4s; }

/* WooCommerce: Produktkarten (Klasse mk-products am Produkte-Widget) */
.mk-js body:not(.elementor-editor-active) .mk-products li.product { visibility: hidden; }
.mk-products li.product { transition: transform .7s var(--mk-ease); }
.mk-products li.product:hover { transform: translateY(-6px); }
.mk-products li.product img { transition: filter .7s var(--mk-ease), transform 1.2s var(--mk-ease); }
.mk-products li.product:hover img { filter: brightness(.94); }
.mk-products li.product .button { transition: opacity .5s var(--mk-ease), transform .5s var(--mk-ease), background-color .4s !important; }
@media (hover: hover) {
  .mk-products li.product .button { opacity: 0; transform: translateY(10px); }
  .mk-products li.product:hover .button { opacity: 1; transform: none; }
}