/* ===== BSD Dienstleistungen – Main Stylesheet ===== */

/* Preloader */
.preloader{position:fixed;inset:0;background:#fefdfb;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}
.preloader.loaded{opacity:0;visibility:hidden}
.preloader-line{width:60px;height:2px;background:#e3d9ca;position:relative;overflow:hidden}
.preloader-line::after{content:'';position:absolute;left:-60px;top:0;width:60px;height:2px;background:#689d41;animation:preload 1s ease infinite}
@keyframes preload{to{left:60px}}

/* Smooth reveal */
.split-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.77,0,.175,1)}
.split-reveal.visible{clip-path:inset(0 0 0 0)}

/* Parallax */
[data-parallax]{transition:transform .1s linear}

/* Image reveal */
.img-reveal{position:relative;overflow:hidden}
.img-reveal::after{content:'';position:absolute;inset:0;background:#f3f8ee;transition:transform 1s cubic-bezier(.77,0,.175,1)}
.img-reveal.revealed::after{transform:translateX(101%)}

/* Horizontal scroll */
.hscroll-container{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.hscroll-container::-webkit-scrollbar{display:none}
.hscroll-item{scroll-snap-align:start;flex-shrink:0}

/* Text split animation */
.char-reveal .char{display:inline-block;opacity:0;transform:translateY(40px);transition:all .5s cubic-bezier(.22,1,.36,1)}
.char-reveal.active .char{opacity:1;transform:translateY(0)}

/* Underline grow */
.underline-grow{position:relative;display:inline}
.underline-grow::after{content:'';position:absolute;bottom:-.1em;left:0;width:0;height:.08em;background:#689d41;transition:width .6s cubic-bezier(.22,1,.36,1)}
.underline-grow.active::after{width:100%}

/* Magnetic */
.magnetic{transition:transform .3s cubic-bezier(.22,1,.36,1)}

/* Elegant fade */
.fade-in{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.22,1,.36,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Round image mask */
.organic-shape{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}

/* Service hover effect */
.service-hover{position:relative;overflow:hidden}
.service-hover::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#689d41/5%,transparent);opacity:0;transition:opacity .4s}
.service-hover:hover::before{opacity:1}

/* Nav */
.nav-scrolled{background:rgba(254,253,251,.95)!important;backdrop-filter:blur(20px);box-shadow:0 1px 20px rgba(0,0,0,.04)!important}
.mobile-nav{transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mobile-nav.open{transform:translateX(0)}

/* Scroll indicator */
@keyframes gentleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.gentle-bounce{animation:gentleBounce 2.5s ease-in-out infinite}

/* Line separator */
.line-sep{width:1px;height:0;background:#c7e0b3;transition:height .8s cubic-bezier(.22,1,.36,1)}
.line-sep.visible{height:80px}

/* Star rating interactive (for bewertungen) */
.star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-rating input{display:none}
.star-rating label{cursor:pointer;transition:all .2s}
.star-rating label svg{transition:color .15s}
.star-rating label:hover svg,
.star-rating label:hover ~ label svg,
.star-rating input:checked ~ label svg{color:#f59e0b}
.star-rating label svg{color:#c7e0b3}

/* Success animation */
@keyframes checkmark{0%{stroke-dashoffset:50}100%{stroke-dashoffset:0}}
.success-check{stroke-dasharray:50;stroke-dashoffset:50;animation:checkmark .6s ease-out forwards}

/* Filter pill */
.filter-active{background-color:#507c31;color:white}

/* FAQ Accordion */
.faq-answer{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.faq-item.open .faq-answer{max-height:500px;opacity:1}
.faq-item .faq-icon{transition:transform .3s ease}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* Service Page Color Themes */
.theme-green{--sc0:#f2f8ec;--sc1:#e0efd2;--sc2:#bfddaa;--sc3:#96c577;--sc5:#74a84f;--sc6:#689d41;--sc7:#537d34;--sc8:#43652a;--sc9:#324b1f;--sc6a:rgba(104,157,65,.2);--sc9a:rgba(50,75,31,.8)}
.theme-ice{--sc0:#eef6fc;--sc1:#d4eaf6;--sc2:#a9d2ec;--sc3:#8ac3e5;--sc5:#4a9fd4;--sc6:#2b82b8;--sc7:#22689a;--sc8:#1d567e;--sc9:#153e5c;--sc6a:rgba(43,130,184,.2);--sc9a:rgba(21,62,92,.8)}
.theme-blue{--sc0:#edf8fd;--sc1:#d2eef8;--sc2:#9edcf2;--sc3:#6acaea;--sc5:#45b7e4;--sc6:#2899c8;--sc7:#217ca3;--sc8:#1c6485;--sc9:#154a63;--sc6a:rgba(40,153,200,.2);--sc9a:rgba(21,74,99,.8)}
.theme-amber{--sc0:#fdf5e8;--sc1:#f8e4c0;--sc2:#f0c97f;--sc3:#e5a83d;--sc5:#bf7a0a;--sc6:#212121;--sc7:#111111;--sc8:#6b4605;--sc9:#503404;--sc6a:rgba(33,33,33,.2);--sc9a:rgba(80,52,4,.8)}
.theme-gold{--sc0:#fbf8ea;--sc1:#f4edc6;--sc2:#e6d988;--sc3:#d6c14a;--sc5:#c2a820;--sc6:#b29c1f;--sc7:#8e7d19;--sc8:#736514;--sc9:#564b0f;--sc6a:rgba(178,156,31,.2);--sc9a:rgba(86,75,15,.8)}
.theme-purple{--sc0:#faf0fd;--sc1:#f0d8f9;--sc2:#dfadf2;--sc3:#ca78e9;--sc5:#b23adb;--sc6:#a328d1;--sc7:#8321a8;--sc8:#6a1a88;--sc9:#4e1365;--sc6a:rgba(163,40,209,.2);--sc9a:rgba(78,19,101,.8)}
[class*="theme-"] .text-sage-600,[class*="theme-"] .hover\:text-sage-600:hover{color:var(--sc6)!important}
[class*="theme-"] .text-sage-700,[class*="theme-"] .group:hover .group-hover\:text-sage-700{color:var(--sc7)!important}
[class*="theme-"] .text-sage-500{color:var(--sc5)!important}
[class*="theme-"] .text-sage-300{color:var(--sc3)!important}
[class*="theme-"] .text-sage-200{color:var(--sc2)!important}
[class*="theme-"] .text-sage-800{color:var(--sc8)!important}
[class*="theme-"] .bg-sage-600{background-color:var(--sc6)!important}
[class*="theme-"] .hover\:bg-sage-700:hover{background-color:var(--sc7)!important}
[class*="theme-"] .bg-sage-100{background-color:var(--sc1)!important}
[class*="theme-"] .bg-sage-50,[class*="theme-"] .hover\:bg-sage-50:hover{background-color:var(--sc0)!important}
[class*="theme-"] .border-sage-100{border-color:var(--sc1)!important}
[class*="theme-"] .shadow-sage-600\/20{--tw-shadow-color:var(--sc6a)!important}
[class*="theme-"] .bg-sage-900\/80{background-color:var(--sc9a)!important}

/* Shake */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}