:root{--dark-gray: #1F2937;--anthracite: #111827;--deep-anthracite: #0F172A;--accent-red: #B83232;--accent-red-light: #D25050;--accent-red-dark: #8A2626;--white: #ffffff;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-500: #6b7280;--gray-700: #374151}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background-color:var(--white);color:var(--dark-gray);overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Poppins,sans-serif}.bg-pattern-card{background-image:url\("../bilder/pro-back.png");background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.bg-pattern-card:before{content:"";position:absolute;inset:0;background:#fffffff2;z-index:1}.bg-pattern-card>*{position:relative;z-index:2}.page-number{width:40px;height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:500}.page-number:hover{background-color:#e5e7eb}.page-number.active{background-color:#3b82f6;color:#fff}.page-number.active:hover{background-color:#2563eb}@media(max-width:1023px){.product-item{margin-bottom:1.5rem!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border-radius:.5rem;background-color:#fff;padding:1rem;margin-left:0;margin-right:0}.product-item .flex{-ms-flex-direction:column;flex-direction:column;padding:0!important;margin:0!important;background-color:transparent!important;box-shadow:none!important;border-radius:0!important}.product-item .flex>div:first-child{margin:0 auto;align-self:center;width:80px;height:80px}.product-item .flex>div:nth-child(2),.product-item .flex>div[class*=w-full],.product-item .flex>div[class*="w-[336px]"],.product-item .flex>div[class*=min-w-0]{width:100%!important;margin-top:1rem;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.product-item .flex>div:nth-child(2) .flex.gap-2,.product-item .flex>div[class*=w-full] .flex.gap-2,.product-item .flex>div[class*="w-[336px]"] .flex.gap-2,.product-item .flex>div[class*=min-w-0] .flex.gap-2{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%;margin:0 auto .5rem;padding-bottom:.25rem;-ms-flex-order:1;order:1}.product-item .flex>div:nth-child(2) .flex.gap-2 span,.product-item .flex>div[class*=w-full] .flex.gap-2 span,.product-item .flex>div[class*="w-[336px]"] .flex.gap-2 span,.product-item .flex>div[class*=min-w-0] .flex.gap-2 span{padding:.2rem .45rem;font-size:.7rem;flex-shrink:0!important;white-space:nowrap!important}.product-item .flex>div:nth-child(2) .flex.justify-between.items-center,.product-item .flex>div[class*=w-full] .flex.justify-between.items-center,.product-item .flex>div[class*="w-[336px]"] .flex.justify-between.items-center,.product-item .flex>div[class*=min-w-0] .flex.justify-between.items-center{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;justify-content:center;gap:.25rem;width:100%;margin-top:.25rem;-ms-flex-order:2;order:2}.product-item .flex>div:nth-child(2)>a,.product-item .flex>div[class*=w-full]>a,.product-item .flex>div[class*="w-[336px]"]>a,.product-item .flex>div[class*=min-w-0]>a{-ms-flex-order:2;order:2;margin-top:.5rem}.product-item .flex>div:nth-child(2) .flex.justify-between.items-center a,.product-item .flex>div[class*=w-full] .flex.justify-between.items-center a,.product-item .flex>div[class*="w-[336px]"] .flex.justify-between.items-center a,.product-item .flex>div[class*=min-w-0] .flex.justify-between.items-center a{-ms-flex-order:2;order:2;display:inline-block;text-align:center;margin-top:.25rem}.product-item .flex>div:nth-child(2) .flex.justify-between.items-center .lg\:hidden,.product-item .flex>div[class*=w-full] .flex.justify-between.items-center .lg\:hidden,.product-item .flex>div[class*="w-[336px]"] .flex.justify-between.items-center .lg\:hidden,.product-item .flex>div[class*=min-w-0] .flex.justify-between.items-center .lg\:hidden{-ms-flex-order:1;order:1}.product-item .flex>div:last-child:not(.hidden){width:100%;text-align:center;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e7eb;display:flex;justify-content:center;align-items:center;gap:1rem}.product-item .flex>div[class*=w-full]>p.text-sm.text-gray-600,.product-item .flex>div[class*="w-[336px]"]>p.text-sm.text-gray-600,.product-item .flex>div[class*=min-w-0]>p.text-sm.text-gray-600,.product-item .flex>div:nth-child(2)>p.text-sm.text-gray-600{-ms-flex-order:2;order:2;margin-top:.25rem}.product-item .flex>div[class*=w-full]>a.text-blue-600,.product-item .flex>div[class*="w-[336px]"]>a.text-blue-600,.product-item .flex>div[class*=min-w-0]>a.text-blue-600,.product-item .flex>div:nth-child(2)>a.text-blue-600{-ms-flex-order:3;order:3;margin-top:.5rem}#mobile-filter-toggle{position:sticky;top:80px;z-index:20;font-weight:600}#filter-content{transition:all .3s ease-in-out;max-height:80vh;overflow-y:auto;background-color:#fff;border-radius:.5rem;margin-top:.5rem;padding:1rem}.page-number{width:35px;height:35px}}@media(max-width:640px){#pagination{-ms-flex-direction:column;flex-direction:column;align-items:center;gap:.5rem}#pagination>button{width:auto;min-width:180px;max-width:90%;min-height:44px;align-self:center}#page-numbers{-ms-flex-order:2;order:2;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;gap:.25rem;padding:.25rem 0}#prev-page{-ms-flex-order:1;order:1}#next-page{-ms-flex-order:3;order:3}#page-numbers::-webkit-scrollbar{display:none}#page-numbers{-ms-overflow-style:none;scrollbar-width:none}}.filter-btn{transition:background-color .2s ease}.filter-btn.active{box-shadow:0 2px 4px #0000001a}#product-search{transition:box-shadow .3s ease}#product-search:focus{box-shadow:0 0 0 3px rgba(var(--primary-color-rgb, 0, 71, 171),.3)}.no-results{text-align:center;padding:2rem;color:#666;font-style:italic}.dark .no-results{color:#9ca3af}.no-results{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}section[id]{transition:opacity .5s ease}.product-image-container{position:relative;height:14rem;overflow:hidden;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.dark .product-image-container{background:linear-gradient(135deg,#374151,#1f2937)}.spec-badge{display:inline-block;padding:.25rem .5rem;font-size:.75rem;background:#e5e7eb;color:#4b5563;border-radius:.25rem;margin:.125rem}.dark .spec-badge{background:#374151;color:#9ca3af}.download-btn{position:relative;overflow:hidden}.download-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.download-btn:hover:before{width:300px;height:300px}.product-category-label{position:absolute;top:1rem;right:1rem;padding:.375rem .75rem;font-size:.75rem;font-weight:700;color:#fff;border-radius:9999px;box-shadow:0 4px 6px #0000001a;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.product-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;overflow-y:auto}.product-modal-content{position:relative;background:#fff;max-width:1200px;margin:2rem auto;border-radius:1rem;overflow:hidden;animation:modalSlideIn .3s ease-out}.dark .product-modal-content{background:#1f2937}@keyframes modalSlideIn{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.products-grid{display:-ms-grid;display:grid;grid-gap:2rem;gap:2rem;-webkit-animation:gridFadeIn .6s ease-out;animation:gridFadeIn .6s ease-out}@media(min-width:768px){.products-grid{-ms-grid-columns:1fr 2rem 1fr;grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.products-grid{-ms-grid-columns:1fr 2rem 1fr 2rem 1fr;grid-template-columns:repeat(3,1fr)}}@-webkit-keyframes gridFadeIn{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes gridFadeIn{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.tooltip{position:relative;display:inline-block}.tooltip-content{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);background:#1f2937;color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}.tooltip:hover .tooltip-content{opacity:1;transform:translate(-50%) translateY(-12px)}@keyframes downloadPulse{0%{box-shadow:0 0 rgba(var(--primary-color-rgb),.7)}70%{box-shadow:0 0 0 10px rgba(var(--primary-color-rgb),0)}to{box-shadow:0 0 rgba(var(--primary-color-rgb),0)}}.download-active{animation:downloadPulse 1s}
.category-filter,.viscosity-filter,.spec-filter{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;flex:0 0 24px!important}#filter-content label.flex.items-center{min-height:32px;padding:.25rem 0;gap:.25rem}#filter-content .space-y-2{gap:.25rem}
.product-search-field{position:relative}.product-search-field #product-search{height:46px;line-height:1.5}.product-search-field .product-search-icon{position:absolute;top:50%;left:1rem;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transform:translateY(-50%);line-height:1;font-size:1rem;pointer-events:none;color:#9ca3af}.product-search-field #search-clear{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;line-height:1}@media(max-width:639px){.product-search-field .product-search-icon{left:.875rem}.product-search-field #product-search{height:46px}}
.products-layout{display:flex;flex-direction:column;gap:2rem;align-items:stretch}.products-filter,.products-results{min-width:0}.product-list-stack{margin-top:0}@media(min-width:1024px){.products-layout{flex-direction:row!important;align-items:flex-start}.products-filter{flex:0 0 18rem;width:18rem}.products-results{flex:1 1 0;min-width:0}.product-list-stack{padding-top:1rem}}
#pagination.product-pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid #e5e7eb;flex-wrap:wrap}.product-pagination .pagination-control{min-height:44px;min-width:112px;padding:0 1rem;border:1px solid #d1d5db;border-radius:9999px;background:#fff;color:#1f2937;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;font-weight:700;line-height:1;box-shadow:0 1px 2px #0000000d;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}.product-pagination .pagination-control:hover:not(:disabled){background:#111827;border-color:#111827;color:#fff;box-shadow:0 8px 18px #1118271f;transform:translateY(-1px)}.product-pagination .pagination-control:disabled{background:#f9fafb;color:#9ca3af;border-color:#e5e7eb;box-shadow:none;cursor:not-allowed}.product-pagination .pagination-pages-wrap{display:flex;align-items:center;justify-content:center;padding:.25rem;border:1px solid #e5e7eb;border-radius:9999px;background:#fff;box-shadow:0 8px 24px #1118270d}.product-pagination .pagination-pages{display:flex;align-items:center;justify-content:center;gap:.25rem}.product-pagination .page-number{width:42px;height:42px;min-width:42px;border-radius:9999px;border:1px solid transparent;background:transparent;color:#4b5563;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;line-height:1;box-shadow:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}.product-pagination .page-number:hover{background:#f3f4f6;color:#111827}.product-pagination .page-number.active{background:#b83232;border-color:#b83232;color:#fff;box-shadow:0 8px 18px #b8323233}.product-pagination .page-number.active:hover{background:#8a2626;border-color:#8a2626;color:#fff}.product-pagination .pagination-control:focus-visible,.product-pagination .page-number:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}@media(max-width:640px){#pagination.product-pagination{flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:.625rem!important;margin-top:2rem;padding-top:1rem}.product-pagination .pagination-pages-wrap{order:1!important;flex:0 0 100%;max-width:100%;overflow-x:auto;scrollbar-width:none}.product-pagination .pagination-pages-wrap::-webkit-scrollbar{display:none}.product-pagination #page-numbers{width:auto!important;overflow:visible!important;padding:0!important;gap:.25rem;justify-content:center}.product-pagination #prev-page,.product-pagination #next-page{order:2!important;flex:1 1 calc(50% - .625rem);width:auto!important;min-width:0!important;max-width:none!important}.product-pagination .pagination-control{min-height:46px;padding:0 .875rem}.product-pagination .page-number{width:40px;height:40px;min-width:40px}}