/* ===== V&F Marken-Tokens & Glass-Look (geteilt über alle Seiten) ===== */
/* Akzent = helleres Master-Grün (auf Wunsch heller als das dunkle Marken-Grün). */
:root{ --accent:#34d27b; --accent-soft:#6ee7a8; --accent-deep:#16a34a; }
html{scroll-behavior:smooth}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}

/* ---------- Animierter Aurora-Hintergrund (Spline-Ersatz, eigenes Asset) ---------- */
.aura-bg{position:fixed;inset:0;z-index:-10;overflow:hidden;background:#000}
.aura-bg .blob{position:absolute;border-radius:50%;filter:blur(85px);opacity:.66;mix-blend-mode:screen}
.aura-bg .b1{width:52vw;height:52vw;left:-8vw;top:-10vw;background:radial-gradient(circle,rgba(52,210,123,.7),transparent 70%)}
.aura-bg .b2{width:44vw;height:44vw;right:-6vw;top:6vw;background:radial-gradient(circle,rgba(52,200,120,.62),transparent 70%)}
.aura-bg .b3{width:48vw;height:48vw;left:24vw;bottom:-16vw;background:radial-gradient(circle,rgba(110,231,168,.55),transparent 70%)}
.aura-bg .grid{position:absolute;inset:0;opacity:.18;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:60px 60px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 85%)}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vw) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,5vw) scale(1.15)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-4vw) scale(1.08)}}

/* glass border gradient */
.border-gradient{position:relative}
.border-gradient::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;background:linear-gradient(225deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 100%)}

/* hero animations */
@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes word-reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.type-words .w{display:inline-block;opacity:0;animation:word-reveal 1.4s ease forwards;animation-delay:calc(var(--delay,.3s) + var(--i) * .12s)}

/* section scroll reveal */
section{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1)}
section.section-visible{opacity:1;transform:translateY(0)}
section:first-of-type{opacity:1;transform:none}
.animate-on-scroll{opacity:0}
.animate-on-scroll.in{opacity:1}

/* portfolio hover (Detail-Grids auf Produktseiten) */
.portfolio-item{position:relative;overflow:hidden;cursor:pointer}
.portfolio-item img{transition:transform .6s ease,filter .4s ease}
.portfolio-item:hover img{transform:scale(1.05);filter:brightness(1.1)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,0) 55%);opacity:0;transition:opacity .4s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.filter-btn.active{background:rgba(52,210,123,.18);color:var(--accent-soft);border-color:rgba(110,231,168,.5)}

/* ---------- Referenz-Logo-Ticker (Marquee, rechts -> links) ---------- */
.marquee{overflow:hidden;width:100%}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marquee 38s linear infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{flex:0 0 auto;margin-right:1.5rem}
.marquee__item img{transition:filter .3s ease,opacity .3s ease}
.marquee__item:hover img{filter:none;opacity:1}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Hero-Slider (Punkte) ---------- */
.hero-dot{width:.5rem;height:.5rem;border-radius:9999px;background:rgba(255,255,255,.45);transition:width .3s ease,background .3s ease;cursor:pointer}
.hero-dot[data-active="true"]{width:1.5rem;background:#fff}

#work-carousel::-webkit-scrollbar{display:none}

/* ---------- Logo-Intro: Funke läuft entlang der Linie zum Punkt ---------- */
.logo-anim{position:relative;display:inline-block;line-height:0}
.logo-anim .lspark,.logo-anim .ldot-glow{position:absolute;transform:translate(-50%,-50%);pointer-events:none;opacity:0}
/* Koordinaten aus logo-wordmark.svg: Linien-Mitte 78,2 % · rechtes Ende 99,3 % · Punkt 10,6 % */
.logo-anim .lspark{top:78.2%;left:10.6%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--accent-soft) 40%,rgba(110,231,168,0) 72%);box-shadow:0 0 8px 2px rgba(110,231,168,.9),0 0 16px 5px rgba(52,210,123,.5);will-change:left,opacity}
.logo-anim .ldot-glow{top:78.2%;left:10.6%;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(110,231,168,.6) 0%,rgba(52,210,123,.22) 38%,transparent 68%)}
.logo-anim.play .lspark{animation:logo-run 2.1s cubic-bezier(.55,0,.2,1) forwards}
.logo-anim.play .ldot-glow{animation:logo-dot 2.3s ease forwards}
@keyframes logo-run{0%{left:99.3%;opacity:0}10%{opacity:1}82%{left:10.6%;opacity:1}100%{left:10.6%;opacity:0}}
@keyframes logo-dot{0%,72%{opacity:0}86%{opacity:1}100%{opacity:0}}

/* ---------- Kachel-Glow „Puls": Outline atmet, Hover = volle Stärke ---------- */
.glow-card{position:relative}
.glow-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.1px;background:linear-gradient(225deg,rgba(110,231,168,0) 0%,rgba(110,231,168,.9) 50%,rgba(110,231,168,0) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 6px rgba(110,231,168,.7));opacity:.35;animation:glow-breathe 3s ease-in-out infinite;transition:opacity .4s ease;pointer-events:none}
.glow-card:hover::after{opacity:1}
@keyframes glow-breathe{0%,100%{opacity:.3}50%{opacity:.95}}

@media (prefers-reduced-motion: reduce){*{animation:none!important}.type-words .w{opacity:1!important}.marquee__track{transform:none}}