/* ============ LUMI effects layer (loaded after styles.css) ============ */
:root{
  /* Pinselstrich-Maske: Kante mit organischer Welle */
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H152C170 8 160 20 176 30C190 40 174 50 186 62C196 74 184 88 190 100H0Z'/%3E%3C/svg%3E");
}
html.loading{overflow:hidden}

/* ---------- Paint-on-hover ---------- */
.btn,.book-card,.tabs button,.faq-q{position:relative;overflow:hidden;isolation:isolate}
.btn::before,.book-card::before,.tabs button::before,.faq-q::before{
  content:"";position:absolute;inset:-1px;z-index:-1;background:var(--paint,var(--ink));
  -webkit-mask:var(--brush) 100% 0/300% 100% no-repeat;mask:var(--brush) 100% 0/300% 100% no-repeat;
  transition:-webkit-mask-position .75s var(--ease),mask-position .75s var(--ease);pointer-events:none}
.btn:hover::before,.btn:focus-visible::before,.book-card:hover::before,.book-card:focus-visible::before,
.tabs button:hover::before,.faq-q:hover::before{-webkit-mask-position:0 0;mask-position:0 0}
.faq-q[aria-selected="true"]::before{display:none}

.btn{--paint:var(--ink);transition:color .45s .08s,box-shadow .3s,transform .25s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn-ghost{--paint:var(--green-d)}
.btn-ghost:hover{color:#fff;border-color:var(--green-d)}
.hero .btn{--paint:#fff}
.hero .btn:hover{border-color:#fff;color:var(--ink)}
.hero .btn-ghost:hover{border-color:#fff;color:var(--ink)}
.booking .btn{--paint:var(--sand)}
.booking .btn:hover{border-color:var(--sand);color:var(--ink)}
.booking .btn-ghost{--paint:#fff}
.booking .btn-ghost:hover{border-color:#fff;color:var(--green-d)}
.book-card{--paint:var(--sand)}
.book-card:hover{color:var(--ink)}
.book-card:hover svg,.book-card:hover small{color:var(--green-d)}
.tabs button{--paint:var(--green-d);transition:color .45s .08s}
.tabs button:hover{color:#fff}
.booking .tabs button{--paint:#fff}
.booking .tabs button:hover{color:var(--green-d)}
.faq-q{--paint:var(--sand-soft)}

/* Nav: Pinsel-Unterstreichung */
.links a::after{
  -webkit-mask:var(--brush) 100% 0/300% 100% no-repeat;mask:var(--brush) 100% 0/300% 100% no-repeat;
  transition:-webkit-mask-position .6s var(--ease),mask-position .6s var(--ease)}
.links a:hover::after,.links a:focus-visible::after{-webkit-mask-position:0 0;mask-position:0 0}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:1000;background:var(--sand);display:grid;place-items:center;color:var(--green-d)}
.loader.go2{background:transparent}
.loader-center{display:grid;justify-items:center;gap:10px;transition:opacity .4s,transform .6s var(--ease);padding:20px;text-align:center}
.loader.go1 .loader-center{opacity:0;transform:translateY(-20px)}
/* Logo-Zeichnung (L + Blatt + Nagel) */
.loader-logo{width:clamp(130px,26vw,190px);height:auto;overflow:visible;margin-bottom:6px}
.loader-logo .lp{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s var(--ease) forwards}
.loader-logo .s{animation-duration:1.9s;animation-delay:.1s}
.loader-logo .c{animation-delay:.9s}
.loader-logo .l{animation-duration:1.4s;animation-delay:1.1s}
.loader-logo .v{animation-delay:1.6s}.loader-logo .w{animation-delay:1.9s}
.loader-logo .nl{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .8s var(--ease) 2.1s forwards}
.loader-logo .nh{opacity:0;animation:fadein .5s 2.7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drawin{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fadein{to{opacity:1}}

/* Logo in der Navigation: zeichnet sich nach dem Eintreten, lebt beim Hover */
.brand .mark{overflow:visible}
.brand .lp{stroke-dasharray:1;stroke-dashoffset:0}
html.loading .brand .lp{stroke-dashoffset:1}
html.ready .brand .lp{animation:drawin 1.8s var(--ease) both}
html.ready .brand .s{animation-delay:.2s}html.ready .brand .c{animation-delay:.8s}
html.ready .brand .l{animation-delay:1s}html.ready .brand .v{animation-delay:1.4s}
.brand .nl{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.brand .leaf{transform-origin:104px 140px;transition:transform .7s var(--ease)}
.brand:hover .leaf,.brand:focus-visible .leaf{transform:rotate(-7deg)}
.brand:hover .nl{transform:scale(1.25) rotate(-12deg)}
.brand-word{transition:letter-spacing .5s var(--ease)}
.brand:hover .brand-word{letter-spacing:.3em}
.loader-word{font-family:var(--font-d);font-size:clamp(2.6rem,9vw,4.6rem);letter-spacing:.28em;margin-left:.28em;line-height:1;opacity:0;animation:fadeup .9s var(--ease) .5s forwards}
.loader-sub{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:#5d5a4c;opacity:0;animation:fadeup .9s var(--ease) .8s forwards}
.loader-bar{width:min(220px,60vw);height:2px;background:rgba(42,58,42,.18);margin-top:22px;overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:100%;background:var(--green-d);transform:scaleX(0);transform-origin:left}
.loader-count{font-family:var(--font-d);font-size:1rem;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.enter{margin-top:12px;min-height:52px;padding:0 44px;border-radius:999px;border:2px solid var(--green-d);background:var(--green-d);color:#fff;font:700 1rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;animation:fadeup .7s var(--ease) both,breathe 2.4s ease-in-out .8s infinite}
.enter[hidden]{display:none}
.enter:hover{background:var(--ink);border-color:var(--ink)}
.loader.ready .loader-bar,.loader.ready .loader-count{display:none}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes breathe{50%{box-shadow:0 0 0 12px rgba(113,145,108,.18)}}

.curtain{position:absolute;inset:0;display:flex;pointer-events:none}
.curtain i{flex:1;background:var(--green);transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.curtain i:nth-child(2){transition-delay:.07s;background:#668361}
.curtain i:nth-child(3){transition-delay:.14s}
.curtain i:nth-child(4){transition-delay:.21s;background:#668361}
.curtain i:nth-child(5){transition-delay:.28s}
.loader.go1 .curtain i{transform:scaleY(1)}
.loader.go3 .curtain i{transform-origin:top;transform:scaleY(0)}

.loader-art{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .5s,transform .9s var(--ease);transform:scale(.94)}
.loader-art svg{width:min(270px,60vw);height:auto;overflow:visible;filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}
.loader.go2 .loader-art{opacity:1;transform:none}
.loader.go3 .loader-art{opacity:0;transform:translateY(-40px) scale(1.04);transition-duration:.6s}
.art-sun{transform-origin:150px 110px;transform:scale(.6);transition:transform 1.4s var(--ease)}
.go2 .art-sun{transform:scale(1)}
.hand .f{transform:translateY(70px);opacity:0;transition:transform .9s var(--ease),opacity .6s}
.go2 .hand .f{transform:none;opacity:1}
.hand .f:nth-child(2){transition-delay:.08s}.hand .f:nth-child(3){transition-delay:.16s}
.hand .f:nth-child(4){transition-delay:.24s}.hand .f:nth-child(5){transition-delay:.32s}
.hand .nailp{transition:fill 1s ease .9s}
.art-word{font-family:var(--font-d);font-style:italic;font-size:clamp(1.4rem,4vw,2rem);color:var(--sand)}

/* ---------- Words rise ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
.split .wi{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:left bottom;transition:transform 1.1s var(--ease) calc(var(--i) * 70ms)}
.split.in .wi{transform:none}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:150;background:linear-gradient(90deg,var(--gold),var(--green));transform:scaleX(0);transform-origin:left}

/* ---------- Hero atmosphere: Körnung, Lichtkegel, Zweige ---------- */
@property --gx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --gy{syntax:'<length-percentage>';inherits:true;initial-value:40%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(520px circle at var(--gx) var(--gy),rgba(247,243,234,.26),rgba(247,243,234,.07) 45%,transparent 70%);
  transition:--gx .6s ease-out,--gy .6s ease-out;animation:orbit 22s ease-in-out infinite}
.hero.track .glow{animation:none}
@keyframes orbit{0%,100%{--gx:28%;--gy:34%}33%{--gx:72%;--gy:30%}66%{--gx:58%;--gy:62%}}
.br{position:absolute;bottom:64px;z-index:1;pointer-events:none;height:min(66vh,560px);aspect-ratio:1/2;
  translate:calc(var(--mx,0) * -22px) calc(var(--my,0) * -14px);transition:translate .9s var(--ease)}
.br.l{left:-3vw}.br.r{right:-3vw;transform:scaleX(-1)}
.br svg{width:100%;height:100%;overflow:visible;fill:rgba(247,243,234,.05);stroke:var(--sand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;
  transform-origin:50% 100%;animation:sway 9s ease-in-out infinite}
.br.r svg{animation-delay:-4s}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.br path{stroke-dasharray:1;stroke-dashoffset:1}
html.ready .br path{animation:drawin 3.2s var(--ease) both}
html.ready .br path:nth-child(2){animation-delay:.5s}html.ready .br path:nth-child(3){animation-delay:.8s}
html.ready .br path:nth-child(4){animation-delay:1.1s}html.ready .br path:nth-child(5){animation-delay:1.4s}
html.ready .br path:nth-child(6){animation-delay:1.7s}html.ready .br path:nth-child(7){animation-delay:2s}
@media (max-width:700px){.br{height:34vh;bottom:56px}.br.l{left:-14vw}.br.r{right:-14vw}.blob{filter:blur(40px)}}

/* ---------- Hero movers ---------- */
.fxs{position:absolute;inset:0;z-index:1;pointer-events:none}
.fx{position:absolute;display:block;width:var(--s);translate:calc(var(--mx,0) * var(--d) * 1px) calc(var(--my,0) * var(--d) * 1px);transition:translate .8s var(--ease)}
.fx.drop{aspect-ratio:3/4;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(150deg,rgba(255,255,255,.7),var(--sand));animation:drift var(--t) ease-in-out infinite;box-shadow:inset -4px -6px 10px rgba(113,145,108,.3)}
.fx.drop.r{background:linear-gradient(150deg,#fff,var(--rose))}
.fx.drop.g{background:linear-gradient(150deg,#fff,var(--gold))}
.fx.star{aspect-ratio:1;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle var(--t) ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-26px) rotate(8deg)}}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.55}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.hero-inner{z-index:2}
.marquee-track{will-change:transform}

/* ---------- Band ---------- */
.band{overflow:hidden;padding:clamp(18px,3vw,36px) 0;background:var(--cream)}
.band-track{white-space:nowrap;font-family:var(--font-d);font-size:clamp(3.4rem,12vw,9rem);line-height:1;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px var(--green);opacity:.6;will-change:transform;width:max-content}

/* ---------- Nail illustration (about slide 1) ---------- */
.nail .brush{transform-origin:236px 90px;animation:paint 4.2s ease-in-out infinite}
@keyframes paint{0%,100%{transform:rotate(0) translate(0,0)}45%{transform:rotate(-8deg) translate(-26px,40px)}70%{transform:rotate(-3deg) translate(-10px,10px)}}
.nail .shine{animation:shine 4.2s ease-in-out infinite}
@keyframes shine{0%,100%{opacity:.35}50%{opacity:.9}}
.nail .sp{transform-origin:center;transform-box:fill-box;animation:twinkle 5s ease-in-out infinite}
.slide.active .values li{animation:slidein .8s var(--ease) both}
.slide.active .values li:nth-child(2){animation-delay:.12s}.slide.active .values li:nth-child(3){animation-delay:.24s}
@keyframes slidein{from{opacity:0;transform:translateX(-24px)}}
.badge-round{animation:spin 26s linear infinite}

/* ---------- Booking step transition ---------- */
.bk-step.on{animation:in .55s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(14px)}}

/* ---------- Cursor sparkle trail ---------- */
.spark{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);pointer-events:none;z-index:2900;animation:spark .9s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0) rotate(120deg);opacity:0}}

@media (max-width:860px){.fx.drop{display:none}.band-track{-webkit-text-stroke-width:1px}}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  html.loading{overflow:auto}
  .split .wi{transform:none}
  .fx,.nail .brush,.nail .shine{animation:none}
  html.loading .brand .lp{stroke-dashoffset:0}
  .br path{stroke-dashoffset:0}.br svg,.glow{animation:none}
  html.ready .br path{animation:none}
  html.ready .brand .lp{animation:none}
}