/* =========================================================
   Morina Group GmbH – Effekte & Animationen
   (Slider, Parallax, Reveal, Marquee, Tilt, Carousel, Lightbox)
   ========================================================= */

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;background:var(--navy);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-inner{text-align:center}
.pl-inner img{height:72px;width:auto;background:#fff;padding:12px 18px;border-radius:8px;margin:0 auto 24px;animation:plPulse 1.4s ease-in-out infinite}
.pl-bar{width:180px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;margin:0 auto}
.pl-bar span{display:block;height:100%;width:40%;background:var(--orange);border-radius:3px;animation:plBar 1.1s ease-in-out infinite}
@keyframes plPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes plBar{0%{transform:translateX(-120%)}100%{transform:translateX(300%)}}
html.pl-skip .preloader,html:not(.js) .preloader{display:none}

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--orange));z-index:1500;pointer-events:none}

/* ---------- Hero Slider ---------- */
.hero-slider{display:block;min-height:min(780px,92vh);position:relative;overflow:hidden;background:var(--navy)}
.hero-slider::before{display:none}
.hero-slider .hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 1.2s;display:flex;align-items:center}
.hero-slider .hero-slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero-slide-bg{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1);will-change:transform}
.hero-slide.is-active .hero-slide-bg{animation:kenburns 10s ease-out forwards}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.14)}}
.hero-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,26,58,.95) 0%,rgba(11,26,58,.78) 45%,rgba(11,26,58,.35) 100%);z-index:1}
.hero-slide .container{position:relative;z-index:2;padding-top:110px;padding-bottom:130px;width:100%}
.hero-slide .eyebrow,.hero-slide h1,.hero-slide p,.hero-slide .hero-actions,.hero-slide .hero-badges{opacity:0}
.hero-slide.is-active .eyebrow{animation:fadeUp .8s .25s both}
.hero-slide.is-active h1{animation:fadeUp .9s .45s both}
.hero-slide.is-active p{animation:fadeUp .9s .65s both}
.hero-slide.is-active .hero-actions{animation:fadeUp .9s .85s both}
.hero-slide.is-active .hero-badges{animation:fadeUp .9s 1.05s both}
@keyframes fadeUp{0%{opacity:0;transform:translateY(36px)}100%{opacity:1;transform:none}}
.hero-controls{position:absolute;right:30px;bottom:44px;z-index:6;display:flex;gap:10px}
.hero-controls button{width:52px;height:52px;border:2px solid rgba(255,255,255,.35);background:rgba(11,26,58,.45);color:#fff;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;backdrop-filter:blur(4px)}
.hero-controls button:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
.hero-controls svg{width:22px;height:22px;fill:currentColor}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;z-index:6;display:flex;gap:10px}
.hero-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;transition:all .3s}
.hero-dots button.active{background:var(--orange);border-color:var(--orange);transform:scale(1.3)}
.hero-counter{position:absolute;left:20px;bottom:44px;z-index:6;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.85rem;letter-spacing:.25em}
.hero-counter b{color:var(--orange);font-size:1.5rem;margin-right:6px}
.hero-scrollhint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px}
.hero-scrollhint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--orange);animation:scrollHint 1.8s ease-in-out infinite}
@keyframes scrollHint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Dekorative Linien (Hero & Seitenkopf) */
.hero-deco{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hero-deco span{position:absolute;height:7px;border-radius:7px;background:var(--orange);opacity:.9;box-shadow:0 6px 20px rgba(242,106,27,.35);animation:floatLine 6s ease-in-out infinite}
.hero-deco span:nth-child(1){width:240px;right:8%;bottom:26%;transform:rotate(-32deg)}
.hero-deco span:nth-child(2){width:150px;right:6%;bottom:19%;animation-delay:1.2s;transform:rotate(-32deg)}
.hero-deco span:nth-child(3){width:90px;right:13%;bottom:15%;animation-delay:2.4s;transform:rotate(-32deg)}
.hero-deco .grid{position:absolute;left:-60px;top:-60px;width:360px;height:360px;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px;transform:rotate(10deg);animation:floatGrid 12s ease-in-out infinite;-webkit-mask-image:radial-gradient(circle at center,#000 20%,transparent 70%);mask-image:radial-gradient(circle at center,#000 20%,transparent 70%)}
.hero-deco .ring{position:absolute;right:-90px;top:-90px;width:320px;height:320px;border:2px dashed rgba(255,255,255,.18);border-radius:50%;animation:spinSlow 40s linear infinite}
@keyframes floatLine{0%,100%{translate:0 0}50%{translate:0 -20px}}
@keyframes floatGrid{0%,100%{translate:0 0}50%{translate:14px 18px}}
@keyframes spinSlow{to{rotate:360deg}}
.page-hero .hero-deco span{height:5px}
.page-hero .hero-deco span:nth-child(1){width:180px;bottom:22%}
.page-hero .hero-deco span:nth-child(2){width:110px;bottom:14%}
.page-hero .hero-deco span:nth-child(3){width:60px;bottom:8%}
.page-hero h1{animation:fadeUp .9s .15s both}
.page-hero p{animation:fadeUp .9s .35s both}
.page-hero .breadcrumb{animation:fadeUp .8s both}

/* ---------- Marquee (Laufband) ---------- */
.marquee{background:var(--orange);color:#fff;overflow:hidden;padding:15px 0;position:relative;z-index:4;box-shadow:0 10px 30px rgba(11,26,58,.12)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track span{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.92rem;padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.marquee-track span::after{content:"";width:8px;height:8px;background:#fff;border-radius:50%;opacity:.85;flex-shrink:0}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Parallax ---------- */
.has-parallax{position:relative;overflow:hidden}
.parallax-bg{position:absolute;left:0;right:0;top:-20%;bottom:-20%;background:center/cover no-repeat;z-index:0;will-change:transform}
.has-parallax::before{z-index:1}
.has-parallax::after{z-index:1}
.has-parallax>.container{position:relative;z-index:2}

/* ---------- Reveal-Varianten & Stagger ---------- */
.js .reveal[data-anim="left"]{transform:translateX(-48px)}
.js .reveal[data-anim="right"]{transform:translateX(48px)}
.js .reveal[data-anim="zoom"]{transform:scale(.9)}
.js .reveal[data-anim="flip"]{transform:perspective(900px) rotateX(-12deg) translateY(30px)}
.js .reveal.in,.js .reveal[data-anim].in{opacity:1;transform:none}
.js .reveal{transition-duration:.9s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Überschriften-Unterstrich */
.section-head h2::after{content:"";display:block;width:64px;height:4px;background:var(--orange);border-radius:2px;margin:16px auto 0;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) .35s}
.section-head.left h2::after{margin-left:0;transform-origin:left}
.section-head.in h2::after,html:not(.js) .section-head h2::after{transform:scaleX(1)}

/* Bild-Wipe */
.img-reveal{position:relative;overflow:hidden;border-radius:var(--radius)}
.js .img-reveal::after{content:"";position:absolute;inset:0;background:var(--blue);z-index:2;transition:transform .95s cubic-bezier(.77,0,.18,1) .1s}
.js .img-reveal.in::after{transform:translateX(102%)}
.js .img-reveal img{transform:scale(1.18);transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .2s}
.js .img-reveal.in img{transform:none}

/* Lazy-Bilder sanft einblenden */
.js img[loading="lazy"]:not(.loaded){opacity:0}
.js img[loading="lazy"]{transition:opacity .7s ease,transform .6s}
.js img[loading="lazy"].loaded{opacity:1}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .65s ease;z-index:-1}
.btn:hover::before{left:130%}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,26,58,.18)}

/* ---------- Karten: Tilt & Hover ---------- */
.tilt{transform-style:preserve-3d;transition:transform .2s ease,box-shadow .3s}
.tilt .thumb,.tilt .body{transform:translateZ(0)}
.service-card .plus svg{transition:transform .35s}
.service-card:hover .plus svg{transform:rotate(90deg)}
.feature .ico{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.feature:hover .ico{transform:translateY(-8px) scale(1.05)}
.feature .ico::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px dashed rgba(43,91,168,.4);animation:spinSlow 16s linear infinite}
.step{transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.step::before{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.step:hover::before{transform:scale(1.15) rotate(-4deg)}
.value{transition:transform .3s,box-shadow .3s}
.value:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.value svg{transition:transform .4s}
.value:hover svg{transform:rotateY(180deg)}
.why-item .ico{transition:transform .3s,background .3s}
.why-item:hover .ico{transform:rotate(-8deg) scale(1.08);background:var(--orange)}
.contact-card{transition:transform .3s,box-shadow .3s}
.contact-card:hover{transform:translateX(6px);box-shadow:var(--shadow-lg)}
.member{transition:transform .3s,box-shadow .3s;overflow:hidden}
.member:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.member img{transition:transform .7s}
.member:hover img{transform:scale(1.06)}
.stat{transition:transform .3s}
.stat:hover{transform:translateY(-6px)}
.stat strong{background:linear-gradient(120deg,var(--blue),#5f8fe0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat strong i{background:none;color:var(--orange);-webkit-text-fill-color:var(--orange)}
.p-item .thumb{cursor:zoom-in;position:relative}
.p-item .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,26,58,.55));opacity:0;transition:opacity .4s}
.p-item:hover .thumb::after{opacity:1}
.p-item .thumb::before{content:"+";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--orange);color:#fff;font-size:2rem;font-family:var(--font-head);display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transform:scale(.5);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.p-item:hover .thumb::before{opacity:1;transform:scale(1)}

/* Dropdown-Stagger */
.dropdown li{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.nav-list>li:hover .dropdown li,.nav-list>li:focus-within .dropdown li{opacity:1;transform:none}
.dropdown li:nth-child(2){transition-delay:.04s}.dropdown li:nth-child(3){transition-delay:.08s}.dropdown li:nth-child(4){transition-delay:.12s}.dropdown li:nth-child(5){transition-delay:.16s}.dropdown li:nth-child(6){transition-delay:.2s}

/* ---------- Carousel (Kundenstimmen) ---------- */
.carousel{position:relative;--per-view:3;--gap:30px}
.carousel-viewport{overflow:hidden;padding:10px 4px 20px}
.carousel-track{display:flex;gap:var(--gap);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.carousel-track.testimonials{display:flex}
.carousel-track>*{flex:0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));min-width:0}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.carousel-dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--blue);background:transparent;cursor:pointer;padding:0;transition:all .3s}
.carousel-dots button.active{background:var(--orange);border-color:var(--orange);transform:scale(1.3)}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);z-index:3;transition:all .25s}
.carousel-nav:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.carousel-nav svg{width:20px;height:20px;fill:currentColor}
.carousel-nav.prev{left:-23px}
.carousel-nav.next{right:-23px}
.testi{transition:transform .4s,box-shadow .4s}
.testi:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
@media (max-width:1300px){.carousel-nav.prev{left:6px}.carousel-nav.next{right:6px}}
@media (max-width:992px){.carousel{--per-view:2}}
@media (max-width:640px){.carousel{--per-view:1}.carousel-nav{display:none}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(11,26,58,.96);z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:min(1100px,92vw);max-height:80vh;border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.88);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.lightbox.open img{transform:none}
.lightbox .lb-cap{position:absolute;bottom:28px;left:20px;right:20px;text-align:center;color:#fff;font-family:var(--font-head);font-weight:600}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .25s}
.lightbox button:hover{background:var(--orange)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}

/* ---------- Nach-oben-Button mit Fortschrittsring ---------- */
.to-top{border-radius:50%;background:var(--navy);width:52px;height:52px;overflow:visible}
.to-top:hover{background:var(--blue)}
.to-top svg.ring{position:absolute;inset:-3px;width:58px;height:58px;transform:rotate(-90deg);fill:none}
.to-top svg.ring circle{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:163;transition:stroke-dashoffset .15s linear}
.to-top svg.ring circle.bg{stroke:rgba(255,255,255,.15);stroke-dashoffset:0}

/* ---------- Footer ---------- */
.footer{position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--orange),var(--blue));background-size:200% 100%;animation:gradientMove 6s linear infinite}
@keyframes gradientMove{to{background-position:200% 0}}
.footer .social a{transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.footer .social a:hover{transform:translateY(-4px) scale(1.1)}

/* ---------- Sticky Header ---------- */
.header-sticky{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.call-fab{animation:fabPulse 2.4s ease-in-out infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,106,27,.55)}70%{box-shadow:0 0 0 14px rgba(242,106,27,0)}}

/* ---------- CTA-Band: schwebende Formen ---------- */
.cta-band .shape{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.12);z-index:1;pointer-events:none}
.cta-band .shape:nth-child(1){width:260px;height:260px;right:-60px;top:-90px;animation:floatGrid 9s ease-in-out infinite}
.cta-band .shape:nth-child(2){width:140px;height:140px;left:6%;bottom:-50px;animation:floatGrid 11s ease-in-out infinite reverse}

/* ---------- Responsive ---------- */
@media (max-width:992px){
  .hero-slider{min-height:640px}
  .hero-slide .container{padding-top:80px;padding-bottom:110px}
  .hero-counter{display:none}
  .hero-controls{right:20px;bottom:36px}
  .hero-dots{bottom:46px;left:20px;transform:none}
  .hero-deco span{display:none}
}
@media (max-width:640px){
  .hero-slider{min-height:560px}
  .hero-slide .container{padding-top:60px;padding-bottom:96px}
  .hero-controls button{width:44px;height:44px}
  .hero-scrollhint{display:none}
  .marquee-track span{font-size:.8rem;padding:0 18px;gap:18px}
  .lightbox img{max-width:94vw;max-height:70vh}
  .lightbox button{width:44px;height:44px}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-slide .eyebrow,.hero-slide h1,.hero-slide p,.hero-slide .hero-actions,.hero-slide .hero-badges{opacity:1}
  .js .img-reveal::after{display:none}
  .js .img-reveal img{transform:none}
  .parallax-bg{transform:none!important}
  .marquee-track{animation:none}
}

/* ---------- Ergänzungen ---------- */
.hero-slide h2 span{color:#7ea6ec}
.hero-slide h2{opacity:0}
.hero-slide.is-active h2{animation:fadeUp .9s .45s both}
.p-item .thumb{display:block}
.service-detail .main .img-reveal img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:var(--radius)}
.service-detail .main .img-reveal{box-shadow:var(--shadow)}
.service-card .thumb{display:block}
.stat strong{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--blue)}
.stat strong i{color:var(--orange)}
@media (max-width:640px){
  .hero-controls{display:none}
  .hero-slide .container{padding-bottom:110px}
  .hero-dots{bottom:40px}
}
.hero-slider .hero-slide.is-active{position:relative}
@media (max-width:640px){
  .hero-slide .container{padding-bottom:84px}
  .hero-dots{bottom:30px;left:20px;transform:none}
  .hero-slider{min-height:0}
}

/* Fix: Hintergrund darf nicht unter dem Slide herausragen */
.hero-slider{min-height:0}
.hero-slider .hero-slide{min-height:min(780px,92vh);overflow:hidden}
.hero-slider .hero-slide.is-active{position:relative}
@media (max-width:992px){.hero-slider .hero-slide{min-height:640px}}
@media (max-width:640px){.hero-slider .hero-slide{min-height:0}}

/* Leistungen-Sektion: weißer Bereich höher, Button vollständig auf Weiß */
.services-dark::after{height:250px}
.services-dark .services-more{margin-top:60px}
@media (max-width:992px){.services-dark::after{height:200px}}

/* ---------- Linien-Icons (Tabler) ---------- */
.ico-line{fill:none!important;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.feature .ico{color:var(--blue)}
.feature .ico .ico-line{width:48px;height:48px;stroke-width:1.5}
.why-item .ico{color:#fff}
.why-item .ico .ico-line{width:28px;height:28px}
.hc-item .ico{color:var(--blue)}
.contact-card .ico{color:var(--blue)}
.value .ico-line{color:var(--blue);width:48px;height:48px;stroke-width:1.5}
.hero-badges .ico-line{color:var(--orange);width:24px;height:24px}

/* Statistik: Zähler-Zahl groß und in einer Zeile mit dem Zeichen */
.stat strong span{display:inline;color:var(--blue);font-size:inherit;line-height:inherit;font-family:inherit}
.stat strong{color:var(--blue);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.stat strong i{color:var(--orange);margin-left:2px}
.why-img .img-reveal img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}