@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-subset.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-subset.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-subset.woff2') format('woff2')}:root{--color-primary:#9CB1B4;--color-primary-light:#B8C8CB;--color-primary-lighter:#D0DCDE;--color-accent:#D99255;--color-accent-hover:#C27F42;--color-bg:#FFFFFF;--color-bg-alt:#E6F0F2;--color-text:#000000;--color-text-light:#333333;--color-text-muted:#666666;--color-white:#ffffff;--color-dark:#000000;--font-body:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;--font-heading:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;--font-button:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 4px 20px rgba(0,0,0,0.08);--shadow-lg:0 8px 40px rgba(0,0,0,0.12);--shadow-card:0 2px 16px rgba(0,0,0,0.06);--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-xl:10px;--transition:0.3s cubic-bezier(0.4,0,0.2,1);--transition-slow:0.6s cubic-bezier(0.4,0,0.2,1)}
.skip-link{position:absolute;top:-100%;left:16px;z-index:10000;padding:12px 24px;background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:top 0.2s}
.skip-link:focus{top:16px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a,button,input,select,textarea,[role="button"]{touch-action:manipulation}
body{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--color-text);background:var(--color-bg);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:var(--transition)}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.2;color:var(--color-dark);letter-spacing:1.3px}
h1{font-size:clamp(2rem,4vw,2.45rem);letter-spacing:2px}
h2{font-size:clamp(1.4rem,3vw,1.625rem);letter-spacing:1.3px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;font-family:var(--font-button);font-size:0.95rem;font-weight:500;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(217,146,85,0.35)}
.btn-secondary{background:transparent;color:var(--color-white);border-color:rgba(255,255,255,0.4)}
.btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:var(--color-white);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--color-white);border-color:rgba(255,255,255,0.5)}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:var(--color-white);transform:translateY(-2px)}
.btn-outline-dark{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}
.btn-outline-dark:hover{background:var(--color-accent);color:var(--color-white);transform:translateY(-2px)}
.btn-lg{padding:16px 40px;font-size:1.05rem}
.btn-full{width:100%}
.btn-nav{background:var(--color-accent);color:var(--color-white);padding:10px 24px;font-size:0.85rem;border-radius:10px}
.btn-nav:hover{background:var(--color-accent-hover);transform:translateY(-1px)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.0);backdrop-filter:blur(0px);transition:all 0.4s ease;padding:16px 0}
.site-header.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm);padding:8px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;z-index:1001;flex-shrink:0}
.logo-icon-img{width:42px;height:50px;object-fit:contain}
.logo-icon{width:42px;height:50px}
.logo-text{display:flex;flex-direction:column}
.logo-name{font-family:var(--font-body);font-weight:700;font-size:1.2rem;letter-spacing:2px;color:var(--color-white);transition:var(--transition)}
.scrolled .logo-name{color:var(--color-dark)}
.logo-tagline{font-size:0.7rem;letter-spacing:1px;color:rgba(255,255,255,0.7);transition:var(--transition)}
.scrolled .logo-tagline{color:var(--color-text-muted)}
.main-nav{display:flex;align-items:center;gap:8px}
#global-nav{display:contents}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-list a{display:block;padding:8px 16px;font-size:12px;font-weight:400;text-transform:lowercase;color:rgba(255,255,255,0.9);border-radius:var(--radius-sm);transition:var(--transition)}
.scrolled .nav-list a{color:#000000}
.nav-list a:hover{color:var(--color-white);background:rgba(255,255,255,0.1)}
.scrolled .nav-list a:hover{color:var(--color-primary);background:var(--color-bg-alt)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;z-index:1001;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hamburger:disabled{opacity:1;padding:4px}
.hamburger span{display:block;width:100%;height:2px;background:var(--color-white);border-radius:2px;transition:var(--transition)}
.scrolled .hamburger span{background:var(--color-dark)}
.hamburger.active span{background:var(--color-dark)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.has-dropdown{position:relative}
.has-dropdown > a{display:flex;align-items:center;gap:4px}
.dropdown-arrow{width:10px;height:10px;flex-shrink:0;transition:transform 0.3s ease;opacity:0.6}
.dropdown{list-style:none}
.dropdown li{list-style:none}
@media (min-width:769px){.has-dropdown:hover .dropdown-arrow{transform:rotate(180deg);opacity:1}
.dropdown{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(8px);min-width:220px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.08);padding:8px 0;opacity:0;visibility:hidden;transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s ease;z-index:1002}
.has-dropdown:hover > .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown li a{display:block;padding:10px 20px !important;font-size:0.85rem !important;color:var(--color-text) !important;font-weight:400 !important;text-transform:none !important;white-space:nowrap}
.dropdown li a:hover{background:var(--color-bg-alt) !important;color:var(--color-primary) !important}
}
.nav-blog-teaser{display:none}
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('https://res.cloudinary.com/dorslmrli/image/upload/f_auto,q_auto,w_1920,c_fill,g_auto/rht-happle-website/rht-happle-grafik-reinigungstechnik') center center / cover no-repeat,linear-gradient(135deg,#2c3e50 0%,#34495e 50%,#2c3e50 100%);z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(30,40,50,0.3) 0%,rgba(30,40,50,0.15) 100%)}
.hero-overlay{position:absolute;inset:0;background:rgba(30,40,50,0.1);z-index:1}
.hero-content{position:relative;z-index:2;padding:120px 24px 40px;max-width:1100px;display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center}
.hero-text{min-width:0}
.hero-lead-card{background:rgba(255,255,255,0.97);border-radius:var(--radius-lg);box-shadow:0 12px 48px rgba(0,0,0,0.22);padding:28px 24px 22px;border-top:4px solid var(--color-accent)}
.hero-lead-tag{display:inline-block;background:#eef6f0;color:#2a7a45;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-bottom:12px}
.hero-lead-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin:0 0 8px;line-height:1.3}
.hero-lead-sub{font-size:0.84rem;color:var(--color-text-muted);margin:0 0 18px;line-height:1.5}
.hero-lead-form{display:flex;flex-direction:column;gap:10px}
.hero-lead-form input[type="email"],.hero-lead-form select{width:100%;padding:10px 12px;border:1.5px solid #dde3e5;border-radius:var(--radius-sm);font-size:0.9rem;font-family:var(--font-body);color:var(--color-text);background:#fff;outline:none;box-sizing:border-box;transition:border-color 0.2s;appearance:none}
.hero-lead-form input[type="email"]:focus,.hero-lead-form select:focus{border-color:var(--color-accent)}
.hero-lead-btn{width:100%;padding:12px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-button);font-size:0.95rem;font-weight:500;cursor:pointer;transition:background 0.2s,transform 0.15s}
.hero-lead-btn:hover{background:var(--color-accent-hover);transform:translateY(-1px)}
.hero-lead-chips-wrap{display:flex;flex-direction:column;gap:7px}
.hero-lead-chips-label{font-size:0.78rem;font-weight:600;color:var(--color-text-light)}
.hero-lead-chips{display:flex;flex-wrap:wrap;gap:6px}
.hero-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1.5px solid #d0d8da;border-radius:20px;background:#fff;color:var(--color-text-muted);font-size:0.78rem;font-family:var(--font-body);cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;white-space:nowrap}
.hero-chip svg{flex-shrink:0;opacity:0.7;transition:opacity 0.15s}
.hero-chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.hero-chip:hover svg{opacity:1}
.hero-chip.selected{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.hero-chip.selected svg{opacity:1}
.hero-lead-trust{font-size:0.72rem;color:var(--color-text-muted);text-align:center;margin:10px 0 0;line-height:1.5}
.hero-lead-success{text-align:center;padding:16px 0 8px}
.hero-lead-success span{font-size:2rem;display:block;margin-bottom:8px}
.hero-lead-success p{font-size:0.88rem;color:var(--color-text);margin:0}
@media (max-width:1000px){.hero-content{grid-template-columns:1fr;max-width:860px}
.hero-lead-card{display:none}
}
.hero-title{font-size:clamp(2.2rem,5vw,3.5rem);color:var(--color-white);margin-bottom:28px;line-height:1.15}
.hero-subtitle{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,0.8);margin-bottom:36px;line-height:1.6;max-width:600px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.hero-phone{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,0.85);font-size:1.05rem;font-weight:500;text-decoration:none;margin-bottom:32px;transition:color 0.2s}
.hero-phone:hover{color:#fff}
.hero-stats-bar{position:absolute;bottom:100px;left:0;right:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px}
.hero-stats-bar .stat-counters{margin-top:0}
.hero-phone svg{flex-shrink:0}
.hero-trust{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:0.85rem;color:rgba(255,255,255,0.6)}
.trust-badges{display:flex;gap:12px;flex-wrap:wrap}
.trust-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);border-radius:10px;font-size:0.85rem;color:rgba(255,255,255,0.85)}
.trust-badge svg{width:18px;height:18px;flex-shrink:0;color:var(--color-accent)}
.divider-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.4);flex-shrink:0}
.section-cta .divider-dot,.cta-trust .divider-dot{background:var(--color-text-muted)}
.wave-divider{position:absolute;bottom:-1px;left:0;right:0;z-index:3;line-height:0}
.wave-divider svg{display:block;width:100%;height:80px}
.section{position:relative;padding:100px 0 120px}
.section-why{background:var(--color-bg)}
.section-branchen{background:var(--color-bg-alt)}
.section-process{background:var(--color-bg)}
.section-brands{background:var(--color-bg);padding:80px 0 120px}
.section-cta{background:var(--color-bg-alt)}
.section-news{background:var(--color-bg)}
.section-contact{background:#1a2a2d;padding:100px 0 80px}
.section-header{text-align:center;margin-bottom:60px;max-width:700px;margin-left:auto;margin-right:auto}
.section-title{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px;color:var(--color-dark)}
.section-title-light{color:var(--color-white)}
.section-subtitle{font-size:1.05rem;color:var(--color-text-light);line-height:1.7}
.section-intro{font-size:1.1rem;color:var(--color-text-light);line-height:1.8}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.feature-card{background:var(--color-white);border-radius:var(--radius-lg);padding:36px 28px;box-shadow:var(--shadow-card);transition:var(--transition)}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.feature-icon{width:56px;height:56px;border-radius:var(--radius-md);background:var(--color-bg-alt);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--color-primary)}
.feature-icon svg{width:28px;height:28px}
.feature-card h3{font-family:var(--font-body);font-size:1.1rem;font-weight:600;margin-bottom:12px;color:var(--color-dark)}
.feature-card p{font-size:0.9rem;color:var(--color-text-light);line-height:1.7}
.feature-badge{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;padding:3px 10px;border-radius:20px;background:var(--color-bg-alt);color:var(--color-primary);margin-bottom:8px}
.feature-badge--green{background:rgba(74,140,106,0.12);color:#367a56}
.branch-chips-wrap{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0 12px}
.branch-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:30px;background:var(--color-bg-alt);color:var(--color-text-light);font-size:0.82rem;font-weight:600;text-decoration:none;border:1px solid rgba(156,177,180,0.25);transition:background 0.2s,color 0.2s,transform 0.2s}
.branch-chip:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px)}
.branchen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.branchen-grid .branche-card--wide{grid-column:2 / span 2}
.branche-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.branche-tag{display:inline-block;font-size:0.72rem;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(156,177,180,0.15);color:var(--color-text-light);letter-spacing:0.03em}
.branche-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition);display:block;position:relative;cursor:pointer}
.branche-content .news-link::after{content:'';position:absolute;inset:0;z-index:3}
.branche-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.branche-image{height:220px;overflow:hidden}
.branche-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow)}
.branche-card:hover .branche-image img{transform:scale(1.08)}
.branche-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:var(--transition-slow)}
.branche-image-placeholder svg{width:64px;height:64px;opacity:0.6}
.branche-card:hover .branche-image-placeholder{transform:scale(1.08)}
.branche-content{padding:24px 20px 48px}
.branche-content h3{font-family:var(--font-body);font-size:0.95rem;font-weight:600;margin-bottom:8px;color:var(--color-dark)}
.branche-content p{font-size:0.85rem;color:var(--color-text-light);line-height:1.6}
.process-grid{display:flex;align-items:flex-start;justify-content:center;gap:0}
.process-step{flex:1;max-width:340px;background:var(--color-white);border-radius:var(--radius-lg);padding:40px 32px;box-shadow:var(--shadow-card);text-align:center;transition:var(--transition)}
.process-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.process-number{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;color:var(--color-accent);margin-bottom:12px;opacity:0.4}
.process-step h3{font-size:1.3rem;margin-bottom:16px;color:var(--color-dark)}
.process-step p{font-size:0.92rem;color:var(--color-text-light);line-height:1.7}
.process-connector{display:flex;align-items:center;padding:0 12px;margin-top:60px}
.process-connector svg{width:80px;height:24px}
.brands-track{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
.brands-slider{display:flex;gap:60px;animation:brandScroll 30s linear infinite;width:max-content}
.brand-item{display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:16px 0;transition:var(--transition)}
.brand-item img{height:40px;width:auto;max-width:120px;object-fit:contain;opacity:0.6;transition:var(--transition)}
.brand-item:hover img{opacity:1}
@keyframes brandScroll{0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.cta-box{text-align:center;padding:60px 40px;max-width:700px;margin:0 auto}
.cta-box h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px}
.cta-box > p{font-size:1.05rem;color:var(--color-text-light);margin-bottom:32px}
.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.cta-trust{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:0.85rem;color:var(--color-text-muted)}
.newsletter-form{max-width:480px;margin:0 auto}
.newsletter-form-row{display:flex;gap:8px}
.newsletter-form input[type="email"]{flex:1;padding:14px 20px;font-family:var(--font-body);font-size:0.95rem;border:1px solid var(--color-primary-light);border-radius:var(--radius-md);background:var(--color-white);color:var(--color-text);transition:var(--transition);min-width:0}
.newsletter-form input[type="email"]:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(217,146,85,0.15)}
.newsletter-form input[type="email"]::placeholder{color:var(--color-text-muted)}
.newsletter-form .btn{flex-shrink:0}
.newsletter-form .newsletter-success{text-align:center;padding:16px;color:var(--color-primary);font-weight:600;font-size:0.95rem}
.footer-newsletter{margin-top:20px}
.footer-newsletter .newsletter-form-row{display:flex;gap:8px}
.footer-newsletter input[type="email"]{flex:1;padding:10px 14px;font-family:var(--font-body);font-size:0.85rem;border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-sm);background:rgba(255,255,255,0.1);color:var(--color-white);transition:var(--transition);min-width:0}
.footer-newsletter input[type="email"]:focus{outline:none;border-color:var(--color-accent);background:rgba(255,255,255,0.15)}
.footer-newsletter input[type="email"]::placeholder{color:rgba(255,255,255,0.5)}
.footer-newsletter .btn-footer-nl{padding:10px 18px;font-family:var(--font-button);font-size:0.82rem;font-weight:500;background:var(--color-accent);color:var(--color-white);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);white-space:nowrap;flex-shrink:0}
.footer-newsletter .btn-footer-nl:hover{background:var(--color-accent-hover)}
.footer-newsletter .newsletter-success{font-size:0.85rem;color:var(--color-white);padding:8px 0}
.footer-newsletter-consent{display:flex;align-items:flex-start;gap:8px;font-size:0.72rem;color:rgba(255,255,255,0.65);margin-top:10px;cursor:pointer;line-height:1.5}
.footer-newsletter-consent input[type="checkbox"]{flex-shrink:0;margin-top:2px;width:14px;height:14px;accent-color:var(--color-accent);cursor:pointer}
.footer-newsletter-consent span{flex:1}
.footer-newsletter-consent a{color:var(--color-accent);text-decoration:underline}
.footer-newsletter-hint{font-size:0.72rem;color:rgba(255,255,255,0.45);margin-top:4px}
.katalog-consent-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;background:var(--color-bg-alt);border:2px dashed var(--color-primary-light);border-radius:var(--radius-lg);padding:40px 24px;text-align:center}
.katalog-consent-icon{font-size:3rem;margin-bottom:12px}
.katalog-consent-title{font-size:1.2rem;font-weight:600;color:var(--color-text);margin:0 0 8px}
.katalog-consent-text{font-size:0.9rem;color:var(--color-text-muted);max-width:400px;margin:0 0 20px;line-height:1.5}
.katalog-consent-btn{margin-bottom:12px}
.katalog-consent-link{font-size:0.8rem;margin:0}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.news-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition)}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-image{height:160px;position:relative;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.news-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.news-image .news-date{position:relative;z-index:1}
.news-date{font-size:0.75rem;font-weight:600;color:var(--color-white);background:rgba(0,0,0,0.25);backdrop-filter:blur(8px);padding:4px 12px;border-radius:100px}
.news-content{padding:20px}
.news-content h3{font-family:var(--font-body);font-size:0.92rem;font-weight:600;margin-bottom:12px;color:var(--color-dark);line-height:1.5}
.news-link{font-size:0.85rem;font-weight:600;color:var(--color-accent)}
.news-link:hover{color:var(--color-accent-hover)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-info h2{font-size:2.2rem;color:var(--color-white);margin-bottom:16px}
.contact-intro{font-size:1.05rem;color:rgba(255,255,255,0.7);margin-bottom:36px;line-height:1.7}
.contact-details{display:flex;flex-direction:column;gap:24px;margin-bottom:36px}
.contact-item{display:flex;align-items:flex-start;gap:16px}
.contact-item svg{width:24px;height:24px;color:var(--color-accent);flex-shrink:0;margin-top:2px}
.contact-item strong{display:block;font-size:0.85rem;color:rgba(255,255,255,0.7);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.contact-item a,.contact-item span{color:var(--color-white);font-size:0.95rem}
.contact-item a:hover{color:var(--color-accent)}
.contact-social{display:flex;gap:12px}
.social-link{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:var(--color-white);transition:var(--transition)}
.social-link svg{width:20px;height:20px}
.social-link:hover{background:var(--color-accent);transform:translateY(-3px)}
.contact-form-wrap{background:var(--color-white);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-lg)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:0.85rem;font-weight:600;color:var(--color-text);margin-bottom:6px}
.optional{font-weight:400;color:var(--color-text-muted)}
.form-group input,.form-group textarea{width:100%;padding:14px 18px;font-family:var(--font-body);font-size:0.95rem;border:2px solid #e0e0e0;border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:var(--transition);outline:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--color-text-muted)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--color-accent);background:var(--color-white);box-shadow:0 0 0 4px rgba(217,146,85,0.15)}
.form-group textarea{resize:vertical;min-height:120px}
.site-footer{background:#1a2a2d;padding:60px 0 30px;color:rgba(255,255,255,0.85)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative}
.footer-logo-icon{width:32px;height:38px;object-fit:contain}
.footer-logo .logo-icon{width:32px;height:38px}
.footer-logo-name{font-family:var(--font-body);font-weight:700;font-size:1.1rem;color:var(--color-white);letter-spacing:1px}
.footer-about p{font-size:0.9rem;line-height:1.7}
.footer-col h4{font-family:var(--font-body);font-size:0.85rem;font-weight:600;color:var(--color-white);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{font-size:0.9rem;color:rgba(255,255,255,0.75);transition:var(--transition)}
.footer-col ul a:hover{color:var(--color-accent)}
.footer-bottom{padding-top:24px;text-align:center;font-size:0.82rem;color:rgba(255,255,255,0.55);margin-top:24px}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.15s}
.reveal-delay-2{transition-delay:0.3s}
.reveal-delay-3{transition-delay:0.45s}
@media (max-width:1100px){.features-grid{grid-template-columns:repeat(2,1fr) !important}
.branchen-grid{grid-template-columns:repeat(2,1fr)}
.branchen-grid .branche-card--wide{grid-column:span 1}
.news-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){.process-grid{flex-direction:column;align-items:center;gap:24px}
.process-connector{transform:rotate(90deg);margin:0;padding:0}
.process-step{max-width:500px;width:100%}
.contact-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:768px){.site-header:has(.main-nav.open){backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.hamburger{display:flex}
.main-nav{position:fixed;top:0;right:0;bottom:0;width:min(300px,85vw);background:var(--color-white);flex:unset;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:100px 28px 40px;transform:translateX(100%);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);box-shadow:-4px 0 24px rgba(0,0,0,0.15);gap:16px;z-index:1001;overflow-y:auto}
.main-nav.open{transform:translateX(0)}
#global-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:1}
.nav-list{flex-direction:column;gap:0;width:100%}
.nav-list li{width:100%}
.nav-list a{display:block;color:var(--color-text) !important;padding:14px 16px;font-size:1.05rem;border-radius:var(--radius-sm);text-align:right}
.nav-list a:hover{color:var(--color-primary) !important}
.dropdown li a:hover{color:var(--color-accent) !important}
.btn-nav{text-align:center;margin-top:8px;align-self:flex-end}
.has-dropdown > a{display:flex;justify-content:flex-end;align-items:center;gap:8px;width:100%}
.dropdown-arrow{width:14px;height:14px;opacity:0.5;transition:transform 0.3s ease,opacity 0.3s ease}
.has-dropdown.open > a .dropdown-arrow{transform:rotate(180deg);opacity:1}
.dropdown{position:static;min-width:unset;background:transparent;box-shadow:none;padding:0;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.has-dropdown.open > a{background:var(--color-bg-alt);border-radius:var(--radius-sm);color:var(--color-primary) !important}
.has-dropdown.open > .dropdown{max-height:500px;padding:4px 0 8px}
.dropdown li a{padding:9px 16px !important;font-size:0.88rem !important;text-align:right !important;color:var(--color-text-light) !important;white-space:normal !important;text-transform:none !important;font-weight:400 !important}
.nav-blog-teaser{display:block;margin-top:auto;padding-top:32px;border-top:1px solid rgba(0,0,0,0.08)}
.nav-blog-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--color-text-muted);margin-bottom:12px;display:block;font-weight:600;text-align:right}
.nav-blog-card{display:flex;flex-direction:row-reverse;gap:12px;align-items:center;justify-content:flex-start;padding:8px;border-radius:var(--radius-sm);transition:var(--transition)}
.nav-blog-card:hover{background:var(--color-bg-alt)}
.nav-blog-card img{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.nav-blog-date{font-size:0.7rem;color:var(--color-text-muted);display:block;margin-bottom:2px;text-align:right}
.nav-blog-card h4{font-size:0.82rem;font-weight:600;color:var(--color-dark);line-height:1.3;margin:0;text-align:right}
.features-grid{grid-template-columns:1fr !important}
.branchen-grid{grid-template-columns:1fr}
.branchen-grid .branche-card--wide{grid-column:span 1}
.news-grid{grid-template-columns:1fr}
.hero-content{padding:100px 24px 160px}
.hero-title{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.hero-stats-bar{bottom:80px;gap:10px}
.hero-stats-bar .stat-counters{gap:8px}
.hero-stats-bar .stat-counter{padding:8px 12px;min-width:0;flex:1}
.hero-stats-bar .stat-number{font-size:1.1rem}
.hero-stats-bar .stat-label{font-size:0.62rem}
.hero-review-badge{padding:8px 16px}
.hero-review-stars svg{width:14px;height:14px}
.hero-review-text{font-size:0.78rem}
.section{padding:80px 0 100px}
.contact-form-wrap{padding:28px}
.breadcrumb{flex-wrap:wrap}
.btn{white-space:normal;text-align:center}
}
@media (max-width:480px){.hero-actions{flex-direction:column}
.hero-actions .btn{width:100%;text-align:center}
.cta-actions{flex-direction:column;align-items:center}
.cta-actions .btn{width:100%}
.footer-grid{grid-template-columns:1fr}
.sustainability-grid{grid-template-columns:1fr !important}
}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:999;opacity:0;transition:opacity 0.3s ease}
.nav-overlay.active{display:block;opacity:1}
.page-hero{position:relative;padding:160px 0 100px;background:linear-gradient(135deg,#3d5558 0%,#5a7578 50%,#3d5558 100%);overflow:hidden}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(184,205,208,0.3),transparent 70%)}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);color:var(--color-white);margin-bottom:16px}
.page-hero p{font-size:1.1rem;color:rgba(255,255,255,0.7);max-width:600px}
.page-hero .wave-divider svg path{fill:var(--color-bg)}
.page-hero .wave-to-usp svg path{fill:var(--color-bg)}
.content-section{padding:80px 0}
.content-section:nth-child(even){background:var(--color-bg-alt)}
.content-block{max-width:800px;margin:0 auto}
.content-block h2{font-size:1.8rem;margin-top:48px;margin-bottom:20px}
.content-block h3{font-family:var(--font-body);font-size:1.2rem;font-weight:600;margin-top:32px;margin-bottom:12px}
.content-block p{color:var(--color-text-light);margin-bottom:16px;line-height:1.8}
.content-block ul{padding-left:20px;margin-bottom:16px}
.content-block ul li{list-style:disc;color:var(--color-text-light);margin-bottom:8px;line-height:1.7}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.two-col.reverse{direction:rtl}
.two-col.reverse > *{direction:ltr}
.image-placeholder{width:100%;height:350px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:0.9rem}
.faq-item{background:var(--color-white);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--color-dark);background:none;border:none;cursor:pointer;text-align:left;transition:var(--transition)}
.faq-question:hover{color:var(--color-primary)}
.faq-question .faq-icon{font-size:1.5rem;color:var(--color-accent);transition:transform 0.3s ease;flex-shrink:0;margin-left:16px}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease}
.faq-item.active .faq-answer{max-height:500px}
.faq-answer-inner{padding:0 24px 20px;color:var(--color-text-light);line-height:1.7}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.product-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition);position:relative;cursor:pointer}
.product-content .news-link::after{content:'';position:absolute;inset:0;z-index:3}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.product-image{height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background-color:#FFFFFF;background-size:cover;background-position:center;padding:16px}
.product-image[style*="background-image"]{padding:0}
.product-image[style*="background-image"]::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(156,177,180,0.55) 0%,rgba(122,150,153,0.45) 100%);transition:var(--transition-slow)}
.product-card:hover .product-image[style*="background-image"]::after{background:linear-gradient(135deg,rgba(156,177,180,0.25) 0%,rgba(122,150,153,0.15) 100%)}
.product-image img{position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:var(--transition-slow)}
.product-card:hover .product-image img{transform:scale(1.05)}
.product-content{padding:24px}
.product-content h3{font-family:var(--font-body);font-size:1rem;font-weight:600;margin-bottom:8px;margin-top:0}
.product-content p{font-size:0.9rem;color:var(--color-text-light)}
.products-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.products-showcase .showcase-item{text-align:center;position:relative}
a.showcase-item{display:block;transition:transform 0.3s ease}
a.showcase-item:hover{transform:translateY(-4px)}
a.showcase-item .news-link{opacity:0;transition:opacity 0.3s ease}
a.showcase-item:hover .news-link{opacity:1}
.products-showcase .showcase-image{position:relative;width:200px;height:200px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center}
.products-showcase .showcase-image::before{content:'';position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(156,177,180,0.18) 0%,transparent 70%);transition:all 0.5s ease}
.products-showcase .showcase-item:hover .showcase-image::before{inset:-20px;background:radial-gradient(circle,rgba(156,177,180,0.25) 0%,rgba(217,146,85,0.08) 60%,transparent 80%)}
.products-showcase .showcase-image img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);filter:drop-shadow(0 8px 24px rgba(0,0,0,0.1))}
.products-showcase .showcase-item:hover .showcase-image img{transform:scale(1.08) translateY(-4px);filter:drop-shadow(0 16px 32px rgba(0,0,0,0.15))}
.products-showcase .showcase-badge{display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-accent);background:rgba(217,146,85,0.1);padding:4px 12px;border-radius:20px;margin-bottom:10px}
.products-showcase .showcase-name{font-family:var(--font-heading);font-size:1.2rem;font-weight:600;color:var(--color-text);margin:0 0 8px}
.products-showcase .showcase-desc{font-size:0.9rem;color:var(--color-text-light);line-height:1.6;max-width:300px;margin:0 auto}
.products-showcase .showcase-variants{list-style:none;padding:0;margin:12px auto 0;max-width:280px;text-align:left}
.products-showcase .showcase-variants li{font-size:0.85rem;color:var(--color-text-light);padding:4px 0;padding-left:18px;position:relative}
.products-showcase .showcase-variants li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#e8c47a,#d4a054)}
.products-showcase .showcase-row-2{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:680px;margin:0 auto}
@media (max-width:1100px){.products-showcase{grid-template-columns:repeat(2,1fr);gap:32px 24px}
.products-showcase .showcase-row-2{max-width:100%}
}
@media (max-width:768px){.products-showcase{grid-template-columns:1fr;gap:40px}
.products-showcase .showcase-row-2{grid-template-columns:1fr}
.products-showcase .showcase-image{width:160px;height:160px}
}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.team-card{background:var(--color-white);border-radius:var(--radius-lg);padding:32px 24px 28px;text-align:center;box-shadow:var(--shadow-card);transition:var(--transition)}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.team-portrait{width:160px;height:160px;margin:0 auto 20px;border-radius:50%;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.team-portrait img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow)}
.team-card:hover .team-portrait img{transform:scale(1.05)}
.team-card-link{cursor:pointer}
.team-card-link .news-link{opacity:0;transition:opacity 0.3s ease}
.team-card-link:hover .news-link{opacity:1}
.team-card-link:hover{box-shadow:0 8px 40px rgba(217,146,85,0.15)}
.team-info h3{font-family:var(--font-body);font-size:1rem;font-weight:600;margin-bottom:4px;margin-top:0}
.team-role{font-size:0.8rem;color:var(--color-accent);margin-bottom:10px;font-weight:500}
.team-info p:last-child{font-size:0.85rem;color:var(--color-text-light);line-height:1.6}
@media (max-width:768px){.team-grid{grid-template-columns:1fr 1fr;gap:20px}
.team-portrait{width:120px;height:120px}
.team-card{padding:24px 16px 20px}
}
@media (max-width:480px){.team-grid{grid-template-columns:1fr}
}
.sustainability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sustainability-card{background:var(--color-white);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;box-shadow:var(--shadow-card);transition:var(--transition)}
.sustainability-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sustainability-icon{width:64px;height:64px;border-radius:50%;background:var(--color-bg-alt);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--color-primary)}
.sustainability-icon svg{width:28px;height:28px}
@media (max-width:768px){.two-col{grid-template-columns:1fr;gap:32px}
.two-col.reverse{direction:ltr}
.products-grid{grid-template-columns:1fr !important}
.sustainability-grid{grid-template-columns:1fr !important}
.two-col-layout{grid-template-columns:1fr !important;gap:32px !important}
}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:0.85rem}
.breadcrumb a{color:rgba(255,255,255,0.6)}
.breadcrumb a:hover{color:var(--color-white)}
.breadcrumb span{color:rgba(255,255,255,0.4)}
.breadcrumb .current{color:rgba(255,255,255,0.9)}
.timeline{position:relative;padding-left:40px;margin-top:40px}
.timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--color-bg-alt)}
.timeline-item{position:relative;padding-bottom:40px}
.timeline-item::before{content:'';position:absolute;left:-34px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--color-accent);border:3px solid var(--color-bg)}
.timeline-item h3{font-family:var(--font-body);font-size:1.1rem;font-weight:600;color:var(--color-accent);margin-bottom:4px;margin-top:0}
.timeline-item p{color:var(--color-text-light);line-height:1.7}
.calculator-form{background:var(--color-white);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-md);max-width:700px;margin:0 auto}
.calculator-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.calculator-row .form-group{margin-bottom:0}
@media (max-width:600px){.calculator-row{grid-template-columns:1fr}
}
.faq-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.faq-tab{padding:10px 20px;font-family:var(--font-button);font-size:0.85rem;font-weight:500;color:var(--color-text-light);background:var(--color-bg-alt);border:1px solid transparent;border-radius:10px;cursor:pointer;transition:var(--transition)}
.faq-tab:hover{color:var(--color-accent);border-color:var(--color-accent)}
.faq-tab.active{background:var(--color-accent);color:var(--color-white)}
.faq-item.faq-hidden{display:none}
.exit-slidein{position:fixed;bottom:32px;right:32px;width:340px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 8px 40px rgba(0,0,0,0.18);z-index:1100;padding:28px 24px 22px;border-top:4px solid var(--color-accent);transform:translateY(calc(100% + 64px));transition:transform 0.45s cubic-bezier(0.34,1.2,0.64,1)}
.exit-slidein.visible{transform:translateY(0)}
.exit-slidein-close{position:absolute;top:12px;right:14px;background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1.3rem;line-height:1;padding:2px 6px;border-radius:4px;transition:color 0.15s}
.exit-slidein-close:hover{color:var(--color-text)}
.exit-slidein-tag{display:inline-block;background:var(--color-bg-alt);color:var(--color-primary);font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-bottom:10px}
.exit-slidein h3{font-size:1.1rem;font-weight:600;color:var(--color-text);margin:0 0 6px;line-height:1.35}
.exit-slidein p{font-size:0.84rem;color:var(--color-text-muted);margin:0 0 16px;line-height:1.5}
.exit-slidein-form{display:flex;flex-direction:column;gap:10px}
.exit-slidein-form input[type="email"]{width:100%;padding:10px 12px;border:1.5px solid #dde3e5;border-radius:var(--radius-sm);font-size:0.9rem;font-family:var(--font-body);outline:none;box-sizing:border-box;transition:border-color 0.2s}
.exit-slidein-form input[type="email"]:focus{border-color:var(--color-accent)}
.exit-slidein-form button{width:100%;padding:11px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-button);font-size:0.92rem;font-weight:500;cursor:pointer;transition:background 0.2s}
.exit-slidein-form button:hover{background:var(--color-accent-hover)}
.exit-slidein-success{text-align:center;padding:8px 0 4px}
.exit-slidein-success span{font-size:2rem;display:block;margin-bottom:8px}
.exit-slidein-success p{font-size:0.88rem;color:var(--color-text);margin:0}
.exit-slidein-hint{font-size:0.73rem;color:var(--color-text-muted);margin-top:8px !important;text-align:center}
@media (max-width:768px){.exit-slidein{right:12px;left:12px;width:auto;bottom:20px}
.exit-slidein::after{display:none}
}
.wa-float{position:fixed;bottom:96px;right:32px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.45);z-index:999;cursor:pointer;text-decoration:none;opacity:0;transform:scale(0.7);transition:opacity 0.3s ease,transform 0.3s ease,box-shadow 0.2s ease}
.wa-float.visible{opacity:1;transform:scale(1)}
.wa-float:hover{box-shadow:0 6px 28px rgba(37,211,102,0.6);transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float::after{content:'WhatsApp';position:absolute;right:66px;background:#1a1a1a;color:#fff;font-size:0.75rem;font-family:var(--font-body);padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
.wa-float:hover::after{opacity:1}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.5)}
70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
.wa-float.pulse{animation:waPulse 2.2s ease-out 2}
@media (max-width:768px){.wa-float{bottom:90px;right:20px;width:52px;height:52px}
.wa-float::after{display:none}
}
.scroll-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;background:var(--color-accent);color:var(--color-white);border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px);transition:var(--transition);z-index:900;box-shadow:var(--shadow-md)}
.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:var(--color-accent-hover);transform:translateY(-2px)}
.scroll-top svg{width:22px;height:22px}
.form-group select{width:100%;padding:14px 18px;font-family:var(--font-body);font-size:0.95rem;border:2px solid #e0e0e0;border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:var(--transition);outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form-group select:focus{border-color:var(--color-accent);box-shadow:0 0 0 4px rgba(217,146,85,0.15)}
.calculator-result{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:24px;margin-top:20px;display:none}
.calculator-result.active{display:block}
.calculator-result h4{font-size:1rem;margin-bottom:12px;color:var(--color-dark)}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.result-item{text-align:center}
.result-value{font-size:1.6rem;font-weight:600;color:var(--color-accent);display:block}
.result-label{font-size:0.8rem;color:var(--color-text-muted)}
.calc-tabs{display:flex;gap:16px;justify-content:center;margin-bottom:40px}
.calc-tab{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 28px;background:var(--color-white);border:2px solid #e0e0e0;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);color:var(--color-text-muted);min-width:160px}
.calc-tab svg{transition:var(--transition)}
.calc-tab:hover{border-color:var(--color-accent);color:var(--color-accent)}
.calc-tab.active{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-white);box-shadow:0 4px 16px rgba(217,146,85,0.3)}
.calc-tab-label{font-family:var(--font-button);font-size:0.85rem;font-weight:500}
.calc-panel{display:none}
.calc-panel.active{display:block}
@media (max-width:640px){.calc-tabs{flex-direction:column;gap:10px}
.calc-tab{flex-direction:row;min-width:auto;padding:14px 20px}
}
.calculator-lead-fields{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:24px;margin-top:24px;margin-bottom:8px}
.calculator-lead-fields h4{font-size:1rem;margin-bottom:4px;color:var(--color-dark)}
.lead-hint{font-size:0.85rem;color:var(--color-text-muted);margin-bottom:16px}
.form-group-checkbox{margin-top:8px}
.checkbox-label{display:flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:var(--color-text-muted);cursor:pointer;line-height:1.4}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;min-width:18px;margin-top:2px;accent-color:var(--color-accent);cursor:pointer}
.result-lead-confirm{margin-top:16px;padding:12px 16px;background:rgba(217,146,85,0.1);border-left:3px solid var(--color-accent);border-radius:4px;font-size:0.9rem;color:var(--color-text)}
.result-lead-confirm .lead-name-display,.result-lead-confirm .lead-email-display{font-weight:600;color:var(--color-accent)}:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
.reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}
.blog-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}
.blog-filter{padding:8px 20px;border-radius:100px;border:1px solid var(--color-border);background:transparent;font-family:var(--font-body);font-size:0.85rem;color:var(--color-text);cursor:pointer;transition:var(--transition)}
.blog-filter:hover{border-color:var(--color-primary);color:var(--color-primary)}
.blog-filter.active{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}
.blog-inline-image{margin:2rem 0;text-align:center}
.blog-inline-image img{width:100%;max-width:800px;height:auto;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.blog-inline-image figcaption{margin-top:0.5rem;font-size:0.9rem;color:#666;font-style:italic}
.key-takeaways{background:linear-gradient(135deg,#e8f4f5 0%,var(--color-bg-alt) 100%);border:2px solid var(--color-primary-light);border-radius:var(--radius-md);padding:20px 24px;margin:24px 0}
.key-takeaways > strong{display:block;margin-bottom:10px;font-size:1.05rem}
.key-takeaways ul{margin:0;padding-left:18px}
.key-takeaways li{padding:3px 0;font-size:0.95rem}
.blog-toc{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:20px 24px;margin:0 0 32px}
.blog-toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.blog-toc summary::-webkit-details-marker{display:none}
.blog-toc summary::after{content:'\25BC';font-size:0.7rem;color:var(--color-text-muted);transition:transform 0.2s}
.blog-toc details:not([open]) summary::after{transform:rotate(-90deg)}
.blog-toc ol{margin:12px 0 0;padding-left:20px}
.blog-toc li{padding:4px 0;font-size:0.9rem}
.blog-toc a{color:var(--color-text-light);text-decoration:none;transition:color 0.2s}
.blog-toc a:hover{color:var(--color-accent)}
.blog-share-bar{display:flex;align-items:center;gap:10px;margin-bottom:28px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.06)}
.share-label{font-size:0.85rem;color:var(--color-text-muted);font-weight:600}
.share-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--color-bg-alt);color:var(--color-text-light);transition:all 0.2s;text-decoration:none}
.share-btn:hover{transform:scale(1.1)}
.share-whatsapp:hover{background:#25D366;color:#fff}
.share-linkedin:hover{background:#0077B5;color:#fff}
.share-email:hover{background:var(--color-accent);color:#fff}
.comparison-table-wrapper{overflow-x:auto;margin:20px 0 32px;-webkit-overflow-scrolling:touch}
.comparison-table{width:100%;border-collapse:collapse;font-size:0.95rem}
.comparison-table th{background:var(--color-primary);color:#fff;padding:12px 16px;text-align:left;font-weight:600;white-space:nowrap}
.comparison-table th:first-child{background:var(--color-primary-light);color:var(--color-text);width:120px}
.comparison-table td{padding:10px 16px;border-bottom:1px solid rgba(0,0,0,0.06)}
.comparison-table tr:nth-child(even) td{background:var(--color-bg-alt)}
.comparison-table td:first-child{font-size:0.85rem}
@media (max-width:480px){.comparison-table{font-size:0.85rem}
.comparison-table th,.comparison-table td{padding:8px 10px}
}
.interactive-checklist{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:24px;margin:24px 0 32px}
.checklist-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06);cursor:pointer;transition:opacity 0.2s}
.checklist-item:last-of-type{border-bottom:none}
.checklist-item input[type="checkbox"]{width:20px;height:20px;min-width:20px;margin-top:2px;accent-color:var(--color-accent);cursor:pointer}
.checklist-item input:checked + span{text-decoration:line-through;opacity:0.5}
.checklist-progress{margin-top:16px;padding-top:12px;border-top:2px solid rgba(0,0,0,0.08);font-size:0.9rem;font-weight:600;color:var(--color-text-muted)}
.checklist-download-box{background:linear-gradient(135deg,var(--color-bg-alt) 0%,#dce8ea 100%);border-radius:var(--radius-lg);padding:32px;margin:40px 0;text-align:center}
.checklist-download-box h3{margin-bottom:8px}
.checklist-download-box p{color:var(--color-text-muted);margin-bottom:20px}
.checklist-download-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:480px;margin:0 auto}
.checklist-download-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;background:#fff;border:2px solid transparent;border-radius:var(--radius-md);box-shadow:var(--shadow-card);cursor:pointer;transition:all 0.2s;font-family:var(--font-body)}
.checklist-download-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.checklist-download-card strong{font-size:1rem}
.checklist-download-card span{font-size:0.85rem;color:var(--color-text-muted)}
@media (max-width:480px){.checklist-download-grid{grid-template-columns:1fr}
}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{display:block;background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-card-image{height:200px;position:relative;overflow:hidden}
.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.blog-card:hover .blog-card-image img{transform:scale(1.05)}
.blog-card-category{position:absolute;top:12px;left:12px;background:var(--color-primary);color:var(--color-white);font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:4px 12px;border-radius:100px}
.blog-card-content{padding:20px}
.blog-card-date{font-size:0.75rem;color:var(--color-text-muted);display:block}
.blog-card-content h3{font-size:1rem;font-weight:600;margin:8px 0 12px;line-height:1.4;color:var(--color-dark)}
.blog-card-content p{font-size:0.85rem;color:var(--color-text-light);line-height:1.6;margin:0}
@media (max-width:1100px){.blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){.blog-grid{grid-template-columns:1fr}
.blog-filters{justify-content:center}
}
.blog-featured{margin-bottom:48px}
.blog-featured-card{display:grid;grid-template-columns:1.1fr 1fr;background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition);text-decoration:none;color:inherit}
.blog-featured-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.blog-featured-image{position:relative;min-height:320px;overflow:hidden}
.blog-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.blog-featured-card:hover .blog-featured-image img{transform:scale(1.04)}
.blog-featured-badge{position:absolute;top:16px;left:16px;display:flex;gap:8px;align-items:center}
.blog-featured-badge .badge-new{background:var(--color-accent);color:#fff;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:5px 14px;border-radius:100px}
.blog-featured-badge .badge-cat{background:var(--color-primary);color:#fff;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:5px 14px;border-radius:100px}
.blog-featured-content{padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
.blog-featured-date{font-size:0.8rem;color:var(--color-text-muted);margin-bottom:12px}
.blog-featured-content h3{font-size:1.5rem;font-weight:600;line-height:1.35;margin-bottom:16px;color:var(--color-dark)}
.blog-featured-content p{font-size:0.95rem;color:var(--color-text-light);line-height:1.7;margin-bottom:24px}
.blog-featured-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-button);font-size:0.9rem;font-weight:500;color:var(--color-accent);transition:var(--transition)}
.blog-featured-card:hover .blog-featured-link{gap:10px}
@media (max-width:768px){.blog-featured-card{grid-template-columns:1fr}
.blog-featured-image{min-height:200px;max-height:220px}
.blog-featured-content{padding:24px 20px 28px}
.blog-featured-content h3{font-size:1.2rem}
}
.blog-results-info{font-size:0.85rem;color:var(--color-text-muted);margin-bottom:24px;padding-left:2px}
.blog-card{text-decoration:none;color:inherit}
.blog-card-readmore{display:inline-flex;align-items:center;gap:4px;font-size:0.8rem;font-weight:600;color:var(--color-accent);margin-top:12px;transition:var(--transition)}
.blog-card:hover .blog-card-readmore{gap:8px}
.reading-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));z-index:10000;transition:width 0.1s linear}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--color-text-muted);text-decoration:none;margin-bottom:20px;transition:var(--transition)}
.article-back:hover{color:var(--color-accent);gap:8px}
.article-back svg{width:16px;height:16px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:24px}
.related-card{display:flex;gap:16px;padding:16px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:var(--transition)}
.related-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.related-card img{width:80px;height:80px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.related-card-info{display:flex;flex-direction:column;justify-content:center}
.related-card-info time{font-size:0.75rem;color:var(--color-text-muted)}
.related-card-info h4{font-size:0.9rem;font-weight:600;line-height:1.35;margin-top:4px;color:var(--color-dark)}
.article-share{display:flex;align-items:center;gap:12px;padding:20px 0;margin-top:32px;border-top:1px solid rgba(0,0,0,0.08)}
.article-share-label{font-size:0.85rem;color:var(--color-text-muted);font-weight:600}
.article-share a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--color-bg-alt);color:var(--color-text-light);transition:var(--transition)}
.article-share a:hover{background:var(--color-primary);color:#fff}
.article-share a svg{width:16px;height:16px}
.danke-hero{padding:160px 0 60px;background:var(--color-bg);text-align:center}
.danke-icon{margin:0 auto 32px;width:80px;height:80px}
.danke-icon svg{width:80px;height:80px}
.danke-checkmark{stroke-dasharray:60;stroke-dashoffset:60;animation:danke-draw 0.6s 0.3s ease forwards}
@keyframes danke-draw{to{stroke-dashoffset:0}
}
.danke-heading{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--color-dark);margin-bottom:16px}
.danke-subheading{font-size:1.1rem;color:var(--color-text-light);max-width:600px;margin:0 auto;line-height:1.7}
.danke-content{padding-top:40px}
.danke-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:800px;margin:0 auto}
.danke-step{text-align:center;padding:24px 16px}
.danke-step-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-bg-alt);color:var(--color-accent);font-weight:600;font-size:1.1rem;margin-bottom:16px}
.danke-step h3{font-size:1rem;margin-bottom:8px}
.danke-step p{font-size:0.95rem;color:var(--color-text-light);line-height:1.6}
.danke-cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}
.danke-cta-card{display:block;background:var(--color-white,#fff);border-radius:var(--radius-lg,16px);padding:32px 24px;text-align:center;box-shadow:var(--shadow-card,0 2px 12px rgba(0,0,0,0.06));transition:var(--transition,0.3s ease);text-decoration:none;color:inherit}
.danke-cta-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg,0 8px 32px rgba(0,0,0,0.12))}
.danke-cta-icon{width:48px;height:48px;margin:0 auto 16px;color:var(--color-accent)}
.danke-cta-icon svg{width:48px;height:48px}
.danke-cta-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--color-dark)}
.danke-cta-card p{font-size:0.9rem;color:var(--color-text-muted);line-height:1.6}
.danke-portrait-box{display:flex;align-items:center;gap:32px;max-width:700px;margin:0 auto;padding:40px;background:var(--color-bg-alt);border-radius:var(--radius-lg,16px)}
.danke-portrait-img{width:120px;height:120px;border-radius:50%;flex-shrink:0;object-fit:cover}
.danke-portrait-text p{margin-bottom:12px;line-height:1.6;color:var(--color-text-light)}
.danke-portrait-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
@media (max-width:768px){.danke-hero{padding:140px 0 40px}
.danke-steps-grid{grid-template-columns:1fr;gap:16px}
.danke-cta-grid{grid-template-columns:1fr;gap:16px}
.danke-portrait-box{flex-direction:column;text-align:center;padding:32px 24px}
.danke-portrait-actions{justify-content:center}
}
.cf-turnstile{margin:16px 0}
.cf-turnstile-nl{margin:8px 0;max-height:65px;overflow:hidden}
.intro-overlay{position:fixed;inset:0;z-index:99999;background:linear-gradient(160deg,#1a2a2d 0%,#243538 40%,#1e2e31 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.8s ease}
.intro-overlay.burst{opacity:0;pointer-events:none}
.intro-overlay.done{display:none}
.intro-drop{position:relative;z-index:2;animation:introDropFall 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.1s both}
.intro-tropfen{width:80px;height:auto;filter:drop-shadow(0 0 30px rgba(156,177,180,0.4));animation:introDropSpin 1.8s ease-in-out 0.55s both}
.intro-tropfen.bursting{animation:introBurstGrow 2.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards !important}
@keyframes introBurstGrow{0%{transform:scale(1) rotate(0deg);opacity:1;filter:drop-shadow(0 0 30px rgba(156,177,180,0.4))}
25%{transform:scale(3) rotate(3deg);opacity:1;filter:drop-shadow(0 0 60px rgba(156,177,180,0.6))}
50%{transform:scale(7) rotate(-2deg);opacity:0.8;filter:drop-shadow(0 0 100px rgba(156,177,180,0.5))}
75%{transform:scale(12) rotate(1deg);opacity:0.4;filter:drop-shadow(0 0 140px rgba(156,177,180,0.3))}
100%{transform:scale(18);opacity:0;filter:drop-shadow(0 0 200px rgba(156,177,180,0))}
}
.intro-scroll-hint{position:absolute;bottom:12%;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font-body);font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);animation:introHintIn 0.5s ease-out 0.6s both;z-index:2}
.intro-scroll-hint svg{animation:introHintBounce 2s ease-in-out infinite}
.intro-burst{position:absolute;top:50%;left:50%;width:0;height:0;z-index:3;pointer-events:none}
.intro-burst span{position:absolute;width:8px;height:8px;background:var(--color-primary-light);border-radius:50%;opacity:0}
.intro-burst span:nth-child(1){background:var(--color-primary)}
.intro-burst span:nth-child(2){background:var(--color-accent)}
.intro-burst span:nth-child(3){background:var(--color-primary-light)}
.intro-burst span:nth-child(4){background:rgba(255,255,255,0.6)}
.intro-burst span:nth-child(5){background:var(--color-primary);width:6px;height:6px}
.intro-burst span:nth-child(6){background:var(--color-accent);width:6px;height:6px}
.intro-burst span:nth-child(7){background:var(--color-primary-light);width:5px;height:5px}
.intro-burst span:nth-child(8){background:rgba(255,255,255,0.4);width:5px;height:5px}
.intro-overlay.burst .intro-burst span{animation:introBurstParticle 0.7s ease-out forwards}
.intro-burst span:nth-child(1){--bx:-80px;--by:-90px}
.intro-burst span:nth-child(2){--bx:85px;--by:-70px}
.intro-burst span:nth-child(3){--bx:-60px;--by:95px}
.intro-burst span:nth-child(4){--bx:75px;--by:80px}
.intro-burst span:nth-child(5){--bx:-95px;--by:20px;animation-delay:0.05s}
.intro-burst span:nth-child(6){--bx:90px;--by:-15px;animation-delay:0.05s}
.intro-burst span:nth-child(7){--bx:10px;--by:-100px;animation-delay:0.08s}
.intro-burst span:nth-child(8){--bx:-15px;--by:100px;animation-delay:0.08s}
@keyframes introDropFall{0%{transform:translateY(-200px);opacity:0}
50%{opacity:1}
85%{transform:translateY(10px)}
100%{transform:translateY(0);opacity:1}
}
@keyframes introDropSpin{0%{transform:rotate(0deg) scale(1)}
25%{transform:rotate(8deg) scale(1.05)}
50%{transform:rotate(-5deg) scale(1)}
75%{transform:rotate(3deg) scale(1.02)}
100%{transform:rotate(0deg) scale(1)}
}
@keyframes introHintIn{0%{opacity:0;transform:translateY(15px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes introHintBounce{0%,100%{transform:translateY(0)}
50%{transform:translateY(4px)}
}
@keyframes introBurstParticle{0%{transform:translate(0,0) scale(1);opacity:1}
100%{transform:translate(var(--bx),var(--by)) scale(0);opacity:0}
}
@media (prefers-reduced-motion:reduce){.intro-overlay{display:none !important}
}
.intro-overlay.skip{display:none !important}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 20% 50%,rgba(217,146,85,0.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(156,177,180,0.1) 0%,transparent 50%);animation:heroGlow 10s ease-in-out infinite alternate}
@keyframes heroGlow{0%{opacity:0.6;transform:translate(0,0) scale(1)}
50%{opacity:1;transform:translate(-2%,1%) scale(1.02)}
100%{opacity:0.7;transform:translate(2%,-1%) scale(1)}
}
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-particle{position:absolute;width:3px;height:3px;background:rgba(217,146,85,0.3);border-radius:50%;animation:particleFloat linear infinite}
.hero-particle:nth-child(1){left:10%;animation-duration:12s;animation-delay:0s}
.hero-particle:nth-child(2){left:25%;animation-duration:15s;animation-delay:2s;width:2px;height:2px;background:rgba(156,177,180,0.3)}
.hero-particle:nth-child(3){left:45%;animation-duration:10s;animation-delay:4s}
.hero-particle:nth-child(4){left:65%;animation-duration:14s;animation-delay:1s;width:2px;height:2px;background:rgba(156,177,180,0.25)}
.hero-particle:nth-child(5){left:85%;animation-duration:11s;animation-delay:3s}
.hero-particle:nth-child(6){left:35%;animation-duration:13s;animation-delay:5s;width:2px;height:2px}
.hero-particle:nth-child(7){left:55%;animation-duration:16s;animation-delay:0.5s;background:rgba(156,177,180,0.2)}
.hero-particle:nth-child(8){left:75%;animation-duration:9s;animation-delay:2.5s;width:2px;height:2px}
@keyframes particleFloat{0%{bottom:-10px;opacity:0}
10%{opacity:1}
90%{opacity:1}
100%{bottom:100%;opacity:0;transform:translateX(30px)}
}
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));z-index:10001;width:0%;transition:width 0.05s linear}
.stat-counters{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px}
.stat-counter{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 22px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-lg);backdrop-filter:blur(4px);min-width:130px;transition:all 0.4s ease}
.stat-counter:hover{background:rgba(255,255,255,0.14);transform:translateY(-3px);border-color:rgba(217,146,85,0.3)}
.stat-number{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--color-accent);line-height:1}
.stat-label{font-size:0.72rem;color:rgba(255,255,255,0.7);text-align:center;line-height:1.3}
@media (max-width:768px){.stat-counters{justify-content:center;gap:10px}
.stat-counter{padding:10px 16px;min-width:100px}
.stat-number{font-size:1.3rem}
}
.feature-card:hover .feature-icon{background:linear-gradient(135deg,rgba(217,146,85,0.15),rgba(156,177,180,0.15));box-shadow:0 0 20px rgba(217,146,85,0.15)}
.feature-icon{transition:all 0.4s ease}
.feature-card{position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}
.feature-card:hover::before{transform:scaleX(1)}
.branche-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(217,146,85,0.06) 100%);opacity:0;transition:opacity 0.4s ease;pointer-events:none;z-index:1}
.branche-card:hover::before{opacity:1}
.branche-content{position:relative;z-index:2}
.process-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:scaleX(0);transform-origin:left;transition:transform 0.8s cubic-bezier(0.22,0.61,0.36,1)}
.process-step{position:relative;overflow:hidden}
.process-pop{opacity:0;transform:translateY(30px) scale(0.9);transition:opacity 0.6s ease,transform 0.7s cubic-bezier(0.22,0.61,0.36,1);transition-delay:var(--pop-delay,0s)}
.process-pop.visible{opacity:1;transform:translateY(0) scale(1)}
.process-pop.visible .process-accent{transform:scaleX(1);transition-delay:calc(var(--pop-delay,0s) + 0.4s)}
.process-pop .process-number{opacity:0;transform:scale(0.5);transition:opacity 0.4s ease,transform 0.5s cubic-bezier(0.34,1.56,0.64,1);transition-delay:calc(var(--pop-delay,0s) + 0.2s)}
.process-pop.visible .process-number{opacity:0.4;transform:scale(1)}
.process-connector svg path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 0.8s ease;transition-delay:var(--pop-delay,0s)}
.process-connector svg polygon{opacity:0;transition:opacity 0.3s ease;transition-delay:calc(var(--pop-delay,0s) + 0.6s)}
.process-connector.visible svg path{stroke-dashoffset:0}
.process-connector.visible svg polygon{opacity:1}
.process-number{transition:all 0.3s ease}
.process-step:hover .process-number{text-shadow:0 0 20px rgba(217,146,85,0.3);transform:scale(1.05);opacity:0.7 !important}
.section-standort{background:linear-gradient(160deg,#1a2a2d 0%,#243538 40%,#1e2e31 100%);padding-top:80px;padding-bottom:80px}
.standort-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.photo-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;position:relative}
.collage-img{overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.4s ease,box-shadow 0.4s ease;transition-delay:var(--pop-delay,0s)}
.collage-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}
.collage-img:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:2}
.collage-img:hover img{transform:scale(1.05)}
.collage-img-1{transform:rotate(-1.5deg)}
.collage-img-2{transform:rotate(1deg) translateY(12px)}
.collage-img-3{transform:rotate(0.5deg) translateY(-8px)}
.collage-img-4{transform:rotate(-1deg) translateY(4px)}
.collage-img-1:hover{transform:rotate(0) translateY(-4px) scale(1.02)}
.collage-img-2:hover{transform:rotate(0) translateY(8px) scale(1.02)}
.collage-img-3:hover{transform:rotate(0) translateY(-12px) scale(1.02)}
.collage-img-4:hover{transform:rotate(0) translateY(0) scale(1.02)}
.map-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(8px)}
.map-card-pin{display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:0.85rem;font-weight:600;color:rgba(255,255,255,0.9)}
.map-card-link{display:block;position:relative;overflow:hidden}
.map-card-link img{width:100%;height:260px;object-fit:cover;display:block;transition:transform 0.5s ease}
.map-card-link::before{content:'';position:absolute;top:0;left:0;right:0;height:50px;background:linear-gradient(to bottom,rgba(26,42,45,0.7),transparent);z-index:1;pointer-events:none}
.map-card-link::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,transparent,rgba(26,42,45,0.55));pointer-events:none}
.map-card-link:hover img{transform:scale(1.03)}
.map-card-overlay{position:absolute;inset:0;background:rgba(26,42,45,0);display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-family:var(--font-button);font-size:0.85rem;font-weight:500;opacity:0;transition:all 0.3s ease}
.map-card-link:hover .map-card-overlay{background:rgba(26,42,45,0.6);opacity:1}
.map-card-info{display:flex;justify-content:center;gap:24px;padding:14px 20px;font-size:0.78rem;color:rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.08)}
@media (max-width:768px){.standort-layout{grid-template-columns:1fr;gap:32px}
.collage-img-1,.collage-img-2,.collage-img-3,.collage-img-4{transform:none}
.map-card-info{flex-direction:column;align-items:center;gap:4px}
}
.brands-track:hover .brands-slider{animation-play-state:paused}
.brand-item{transition:all 0.3s ease}
.brand-item:hover{transform:scale(1.08);filter:brightness(1.05)}
.site-footer{position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-accent) 50%,var(--color-primary) 100%);background-size:200% 100%;animation:footerShimmer 6s ease-in-out infinite}
@keyframes footerShimmer{0%,100%{background-position:0% 0}
50%{background-position:100% 0}
}
.cta-box{position:relative;overflow:hidden}
.cta-box::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,rgba(217,146,85,0.2),transparent 40%,transparent 60%,rgba(156,177,180,0.2));border-radius:inherit;z-index:-1;opacity:0;transition:opacity 0.6s ease}
.cta-box:hover::after{opacity:1}
.section-title{position:relative;display:inline-block}
.section-header .section-title::after{content:'';display:block;width:60px;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));margin:16px auto 0;border-radius:2px;transition:width 0.6s ease}
.section-header:hover .section-title::after{width:100px}
.section-standort .section-title::after{background:linear-gradient(90deg,var(--color-accent),rgba(255,255,255,0.4))}
.feature-card{counter-increment:feature}
.feature-card .feature-icon::after{content:'0' counter(feature);position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:var(--color-accent);color:#fff;font-family:var(--font-heading);font-size:0.7rem;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.5);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.feature-icon{position:relative}
.feature-card:hover .feature-icon::after{opacity:1;transform:scale(1)}
.feature-card:hover .feature-icon svg{animation:featureIconPulse 0.6s ease}
@keyframes featureIconPulse{0%{transform:scale(1)}
40%{transform:scale(1.2) rotate(-5deg)}
70%{transform:scale(0.95) rotate(2deg)}
100%{transform:scale(1) rotate(0)}
}
.features-grid{counter-reset:feature}
.branche-card::after{content:'\2192';position:absolute;bottom:16px;right:16px;width:32px;height:32px;background:var(--color-accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem;opacity:0;transform:translateX(-8px);transition:all 0.3s ease;z-index:4;pointer-events:none}
.branche-card:hover::after{opacity:1;transform:translateX(0)}
.branche-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.15) 100%);z-index:1;pointer-events:none}
.branche-image{position:relative}
.section-cta{background:linear-gradient(160deg,#1a2a2d 0%,#243538 50%,#1e2e31 100%);overflow:hidden}
.section-cta::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(217,146,85,0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.section-cta::after{content:'';position:absolute;bottom:-80px;left:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(156,177,180,0.06) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.section-cta .cta-box{background:transparent;box-shadow:none;border:none;border-radius:0}
.section-cta .cta-box::after{display:none}
.section-cta .cta-box h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem)}
.section-cta .cta-box > p{color:rgba(255,255,255,0.65);font-size:1.1rem}
.section-cta .cta-trust{color:rgba(255,255,255,0.45)}
.section-cta .cta-trust .divider-dot{background:rgba(255,255,255,0.25)}
.section-cta .btn-primary{position:relative;z-index:1}
.section-cta .btn-primary::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--color-accent);z-index:-1;animation:ctaPulse 2.5s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,146,85,0.4)}
50%{box-shadow:0 0 0 12px rgba(217,146,85,0)}
}
.section-cta .btn-outline-dark{color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.3)}
.section-cta .btn-outline-dark:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.6);color:#fff}
.section-cta .section-title{color:#fff}
.section-cta .section-title::after{background:linear-gradient(90deg,var(--color-accent),rgba(255,255,255,0.4))}
.section-cta .section-subtitle{color:rgba(255,255,255,0.7)}
.section-cta .feature-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1)}
.section-cta .feature-card h3{color:#fff}
.section-cta .feature-card p{color:rgba(255,255,255,0.7)}
.section-cta .cta-box h2::after{content:'';display:block;width:60px;height:3px;background:linear-gradient(90deg,var(--color-accent),rgba(255,255,255,0.3));margin:16px auto 0;border-radius:2px}
.wave-divider.wave-brands svg path{fill:#1a2a2d}
.wave-divider.wave-cta svg path{fill:#FFFFFF}
.news-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.35) 100%);z-index:0;pointer-events:none}
.news-image{position:relative}
.news-card{position:relative;overflow:hidden}
.news-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;z-index:5}
.news-card:hover::before{transform:scaleX(1)}
.section-contact{position:relative;overflow:hidden}
.section-contact::before{content:'';position:absolute;top:40px;right:-60px;width:200px;height:200px;border:2px solid rgba(255,255,255,0.06);border-radius:50%;pointer-events:none}
.section-contact::after{content:'';position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;border:2px solid rgba(255,255,255,0.04);border-radius:50%;pointer-events:none}
.contact-info h2{position:relative;display:inline-block}
.contact-info h2::after{content:'';display:block;width:48px;height:3px;background:var(--color-accent);margin-top:12px;border-radius:2px}
.social-link:hover{box-shadow:0 0 20px rgba(217,146,85,0.3)}
.contact-form-wrap{position:relative}
.contact-form-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-primary));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.reveal-from-left{opacity:0;transform:translateX(-40px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1)}
.reveal-from-left.visible{opacity:1;transform:translateX(0)}
.reveal-from-right{opacity:0;transform:translateX(40px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1)}
.reveal-from-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.9);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.hero-review-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 22px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:100px;backdrop-filter:blur(8px);margin-top:0;transition:all 0.3s ease;text-decoration:none}
.hero-review-badge:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);transform:translateY(-2px)}
.hero-review-stars{display:flex;gap:3px;color:#FBBF24}
.hero-review-stars svg{width:18px;height:18px}
.hero-review-text{font-size:0.9rem;color:rgba(255,255,255,0.9);font-weight:500}
.hero-review-text strong{color:#fff}
.wave-divider svg{margin-bottom:-2px}
.section-contact{margin-bottom:-1px}
.shop-hero-xl{padding:140px 0 120px}
.shop-hero-xl h1{font-size:clamp(2rem,4vw,3rem);color:#fff;margin-bottom:20px;line-height:1.2}
.shop-hero-accent{color:var(--color-accent)}
.shop-hero-sub{font-size:1.05rem;color:rgba(255,255,255,0.75);max-width:620px;line-height:1.6;margin-bottom:4px}
.shop-hero-actions{display:flex;gap:12px;margin-top:24px;margin-bottom:8px}
.shop-hero-actions .btn-outline{color:#fff;border-color:rgba(255,255,255,0.4)}
.shop-hero-actions .btn-outline:hover{background:rgba(255,255,255,0.1);border-color:#fff}
@media (max-width:768px){.shop-hero-xl{padding:120px 0 90px}
.shop-hero-xl h1{font-size:1.6rem}
.shop-hero-sub{font-size:0.9rem}
.shop-hero-actions{flex-direction:column;gap:10px}
.shop-hero-actions .btn{text-align:center}
}
.shop-b2b-hint{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:100px;padding:10px 20px;font-size:0.85rem;color:rgba(255,255,255,0.9);margin-top:20px}
.shop-usp-bar{background:var(--color-bg);padding:28px 0 8px;margin-top:0}
.shop-usp-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:900px;margin:0 auto}
.shop-usp-item{display:flex;align-items:center;gap:10px;padding:16px 18px;background:linear-gradient(135deg,#3d5558 0%,#4a6568 100%);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.12);opacity:0;transform:translateY(24px);transition:opacity 0.5s ease,transform 0.5s ease,box-shadow 0.3s ease}
.shop-usp-item.visible{opacity:1;transform:translateY(0)}
.shop-usp-item:nth-child(2){transition-delay:0.1s}
.shop-usp-item:nth-child(3){transition-delay:0.2s}
.shop-usp-item:nth-child(4){transition-delay:0.3s}
.shop-usp-item:hover{box-shadow:0 8px 28px rgba(0,0,0,0.18),0 0 24px rgba(217,146,85,0.25);transform:translateY(-2px)}
.shop-usp-item::before{content:'';position:absolute;inset:-2px;border-radius:14px;background:linear-gradient(135deg,rgba(217,146,85,0.4),rgba(217,146,85,0.1));z-index:-1;opacity:0;transition:opacity 0.5s ease;filter:blur(8px)}
.shop-usp-item{position:relative}
.shop-usp-item.visible::before{opacity:1;animation:uspHaloPulse 3s ease-in-out infinite}
@keyframes uspHaloPulse{0%,100%{opacity:0.5;filter:blur(8px)}
50%{opacity:0.8;filter:blur(12px)}
}
.shop-usp-item svg{transition:transform 0.3s ease}
.shop-usp-item:hover svg{transform:scale(1.15)}
.shop-usp-item.visible svg{animation:uspIconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards}
.shop-usp-item:nth-child(1).visible svg{animation-delay:0.15s}
.shop-usp-item:nth-child(2).visible svg{animation-delay:0.25s}
.shop-usp-item:nth-child(3).visible svg{animation-delay:0.35s}
.shop-usp-item:nth-child(4).visible svg{animation-delay:0.45s}
@keyframes uspIconPop{0%{transform:scale(0) rotate(-20deg);opacity:0}
60%{transform:scale(1.2) rotate(5deg);opacity:1}
100%{transform:scale(1) rotate(0deg);opacity:1}
}
.shop-usp-item:nth-child(1).visible svg{animation:uspIconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards,uspTruck 2.5s ease-in-out 1.5s infinite}
.shop-usp-item:nth-child(3).visible svg{animation:uspIconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards,uspClock 4s linear 1.5s infinite}
.shop-usp-item:nth-child(4).visible svg{animation:uspIconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards,uspCheck 3s ease-in-out 1.5s infinite}
@keyframes uspTruck{0%,100%{transform:translateX(0)}
25%{transform:translateX(3px)}
75%{transform:translateX(-2px)}
}
@keyframes uspClock{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes uspCheck{0%,80%,100%{transform:scale(1)}
90%{transform:scale(1.15)}
}
.shop-usp-item svg{color:var(--color-accent);flex-shrink:0}
.shop-usp-item div{display:flex;flex-direction:column}
.shop-usp-item strong{font-size:0.78rem;font-weight:600;color:#fff;line-height:1.3}
.shop-usp-item span{font-size:0.68rem;color:rgba(255,255,255,0.6);line-height:1.3}
.shop-usp-divider{display:none}
@media (max-width:768px){.shop-usp-inner{grid-template-columns:1fr 1fr;gap:8px}
.shop-usp-bar{margin-top:-30px}
.shop-usp-item{padding:12px 14px;gap:8px}
.shop-usp-item strong{font-size:0.72rem}
.shop-usp-item span{font-size:0.62rem}
.shop-usp-item svg{width:18px;height:18px}
}
.shop-search-hero{padding:32px 0 8px;background:var(--color-bg)}
.shop-search-hero-wrap{display:flex;align-items:center;gap:12px;background:var(--color-bg);border:2px solid var(--color-primary-lighter);border-radius:14px;padding:14px 20px;transition:border-color 0.2s,box-shadow 0.2s;max-width:640px;margin:0 auto}
.shop-search-hero-wrap{position:relative}
.shop-search-hero-wrap:focus-within{border-color:var(--color-accent);box-shadow:0 4px 20px rgba(217,146,85,0.12)}
.search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,0.14);border:1px solid var(--color-primary-lighter);z-index:100;max-height:420px;overflow-y:auto;padding:8px}
.search-dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background 0.15s;text-decoration:none;color:inherit}
.search-dropdown-item:hover{background:var(--color-bg-alt)}
.search-dropdown-img{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#f8f8f8;flex-shrink:0}
.search-dropdown-info{flex:1;min-width:0}
.search-dropdown-name{font-size:0.85rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-dropdown-meta{font-size:0.72rem;color:var(--color-text-muted);margin-top:2px}
.search-dropdown-price{font-size:0.85rem;font-weight:600;color:var(--color-accent);white-space:nowrap}
.search-dropdown-all{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--color-primary-lighter);font-size:0.82rem;font-weight:500;color:var(--color-accent);cursor:pointer;font-family:var(--font-button);border-radius:0 0 var(--radius-sm) var(--radius-sm);transition:background 0.15s;text-decoration:none}
.search-dropdown-all:hover{background:var(--color-bg-alt)}
.search-dropdown-empty{padding:20px;text-align:center;font-size:0.85rem;color:var(--color-text-muted)}
.shop-search-hero-wrap svg{color:var(--color-text-muted);flex-shrink:0}
.shop-search-hero-input{border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:0.95rem;color:var(--color-text);width:100%}
.shop-search-hero-input::placeholder{color:var(--color-text-muted);font-size:0.88rem}
.shop-search-hero-tags{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.shop-search-hero-tags span{font-size:0.75rem;color:var(--color-text-muted)}
.shop-search-tag{padding:4px 12px;border:1px solid var(--color-primary-lighter);border-radius:100px;background:var(--color-bg);font-size:0.75rem;font-family:var(--font-body);color:var(--color-text-light);cursor:pointer;transition:all 0.2s;text-decoration:none}
.shop-search-tag:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(217,146,85,0.04)}
@media (max-width:768px){.shop-search-hero{padding:20px 0 4px}
.shop-search-hero-wrap{padding:12px 16px}
.shop-search-hero-input{font-size:0.88rem}
.shop-search-hero-tags{margin-top:8px}
}
.shop-pillnav{padding:40px 0 64px;margin:0 auto;text-align:center;background:linear-gradient(180deg,#ffffff 0%,#d0dfe3 100%);position:relative;overflow:visible}
.shop-pillnav::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:60px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 C360,60 720,0 1080,30 C1260,45 1380,40 1440,35 L1440,60 L0,60 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat bottom;background-size:100% 100%;z-index:2}
.shop-pillnav-label{font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-muted);margin-bottom:24px}
.shop-pillnav-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:800px;margin:0 auto}
.shop-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1.5px solid var(--color-primary-lighter);border-radius:100px;background:var(--color-bg);font-family:var(--font-body);font-size:0.84rem;font-weight:500;color:var(--color-text-light);text-decoration:none;transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);position:relative;overflow:hidden;z-index:1}
.shop-pill-lg{padding:12px 26px;font-size:0.92rem;font-weight:600;background:linear-gradient(135deg,#3d5558,#4a6568);color:#fff;border-color:transparent}
.shop-pill-lg .shop-pill-count{background:var(--color-accent);color:#fff}
.shop-pill-md{padding:11px 22px;font-size:0.88rem;font-weight:600;border-color:var(--color-accent);color:var(--color-text)}
.shop-pill-md .shop-pill-count{background:rgba(217,146,85,0.12);color:var(--color-accent-hover)}
.shop-pill-sm{padding:8px 16px;font-size:0.78rem}
.shop-pill-eco{background:linear-gradient(135deg,#28a745,#1e7e34);color:#fff;border-color:transparent;gap:6px}
.shop-pill-eco svg{flex-shrink:0}
.shop-pill-eco::before{background:linear-gradient(135deg,#1e7e34,#155d27)}
.shop-pill-eco .shop-pill-count{background:rgba(255,255,255,0.2);color:#fff}
.shop-card-eco{position:absolute;top:10px;left:10px;z-index:5;width:28px;height:28px;background:linear-gradient(135deg,#28a745,#1e7e34);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(40,167,69,0.3)}
.shop-card-eco svg{width:16px;height:16px;color:#fff}
.pd-eco-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:linear-gradient(135deg,#28a745,#1e7e34);color:#fff;font-size:0.72rem;font-weight:600;border-radius:100px;vertical-align:middle;margin-left:8px}
.pd-eco-badge svg{flex-shrink:0}
.pd-cert-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;margin-bottom:12px}
.pd-cert-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border-radius:100px;font-size:0.75rem;font-weight:600;font-family:var(--font-button);background:linear-gradient(135deg,#e8f5ef,#d1ebe0);color:#2d6a4f;border:1px solid rgba(74,140,106,0.15)}
.pd-cert-pill.pd-cert-eco{background:linear-gradient(135deg,#4a8c6a,#367a56);color:#fff;border-color:transparent}
.pd-cert-pill.pd-cert-eco svg{flex-shrink:0}
.shop-pill-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:100px;font-size:0.68rem;font-weight:600;background:var(--color-bg-alt);color:var(--color-text-muted);transition:all 0.25s ease}
.shop-pill::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));opacity:0;transition:opacity 0.3s ease;border-radius:100px;z-index:-1}
.shop-pill:hover{border-color:var(--color-accent);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(217,146,85,0.25)}
.shop-pill:hover::before{opacity:1}
.shop-pill:hover .shop-pill-count{background:rgba(255,255,255,0.25);color:#fff}
.shop-pill-lg:hover{box-shadow:0 6px 24px rgba(61,85,88,0.3)}
.shop-pill-lg::before{background:linear-gradient(135deg,#2a3b3c,#3d5558)}
.shop-pillnav-pills .shop-pill{opacity:0;transform:translateY(12px) scale(0.95);animation:pillAppear 0.4s ease forwards}
.shop-pillnav-pills.visible .shop-pill:nth-child(1){animation-delay:0.05s}
.shop-pillnav-pills.visible .shop-pill:nth-child(2){animation-delay:0.1s}
.shop-pillnav-pills.visible .shop-pill:nth-child(3){animation-delay:0.15s}
.shop-pillnav-pills.visible .shop-pill:nth-child(4){animation-delay:0.2s}
.shop-pillnav-pills.visible .shop-pill:nth-child(5){animation-delay:0.25s}
.shop-pillnav-pills.visible .shop-pill:nth-child(6){animation-delay:0.3s}
.shop-pillnav-pills.visible .shop-pill:nth-child(7){animation-delay:0.35s}
.shop-pillnav-pills.visible .shop-pill:nth-child(8){animation-delay:0.4s}
.shop-pillnav-pills.visible .shop-pill:nth-child(9){animation-delay:0.45s}
.shop-pillnav-pills.visible .shop-pill:nth-child(10){animation-delay:0.5s}
.shop-pillnav-pills.visible .shop-pill:nth-child(11){animation-delay:0.55s}
.shop-pillnav-pills.visible .shop-pill:nth-child(12){animation-delay:0.6s}
@keyframes pillAppear{0%{opacity:0;transform:translateY(12px) scale(0.95)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:768px){.shop-pillnav{padding:20px 0 16px}
.shop-pillnav-pills{gap:8px}
.shop-pill{padding:8px 14px;font-size:0.75rem}
.shop-pill-lg{padding:10px 18px;font-size:0.82rem}
.shop-pill-md{padding:9px 16px;font-size:0.78rem}
.shop-pill-count{min-width:20px;height:18px;font-size:0.6rem}
}
.shop-bestseller-header{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.shop-bestseller-header .section-title{margin-bottom:0}
.shop-bestseller-header .section-subtitle{margin-bottom:0;color:var(--color-text-muted)}
.shop-mfr-carousel{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.shop-mfr-track{display:flex;gap:32px;animation:mfrScroll 30s linear infinite;width:max-content}
.shop-mfr-track:hover{animation-play-state:paused}
@keyframes mfrScroll{0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.shop-mfr-item{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:140px;height:64px;padding:10px 16px;background:transparent;border:none;transition:all 0.25s ease;text-decoration:none}
.shop-mfr-item:hover{transform:scale(1.1)}
.shop-mfr-item img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(40%);opacity:0.8;transition:all 0.25s ease}
.shop-mfr-item:hover img{filter:grayscale(0%);opacity:1}
.shop-bestseller-scroll{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
.shop-bestseller-scroll::-webkit-scrollbar{display:none}
.shop-bestseller-scroll .shop-card{flex:0 0 220px;min-width:220px}
.shop-bestseller-scroll .shop-card-image{height:140px}
@media (max-width:768px){.shop-bestseller-scroll .shop-card{flex:0 0 180px;min-width:180px}
.shop-bestseller-scroll .shop-card-image{height:120px}
}
.shop-stat-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.shop-stat{background:var(--color-bg);border-radius:14px;padding:24px 16px;text-align:center;border:1px solid rgba(0,0,0,0.04);box-shadow:0 2px 12px rgba(0,0,0,0.04);transition:transform 0.3s ease,box-shadow 0.3s ease}
.shop-stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.shop-stat .stat-number{display:block;font-size:2rem;font-weight:600;color:var(--color-accent);line-height:1.2;margin-bottom:4px}
.shop-stat-label{font-size:0.78rem;color:var(--color-text-muted);font-weight:500}
@media (max-width:768px){.shop-stat-counters{grid-template-columns:repeat(2,1fr);gap:10px}
.shop-stat{padding:18px 12px}
.shop-stat .stat-number{font-size:1.6rem}
}
.variant-picker{position:absolute;bottom:0;left:0;right:0;z-index:20;background:var(--color-bg);border-radius:16px 16px 10px 10px;box-shadow:0 -8px 32px rgba(0,0,0,0.12);animation:variantPickerSlide 0.25s ease;overflow:hidden}
@keyframes variantPickerSlide{0%{transform:translateY(100%);opacity:0}
100%{transform:translateY(0);opacity:1}
}
.variant-picker-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(135deg,#3d5558,#4a6568);color:#fff;font-size:0.82rem;font-weight:600}
.variant-picker-close{background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;line-height:1;padding:0 2px}
.variant-picker-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}
.variant-picker-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:none;border-bottom:1px solid rgba(0,0,0,0.04);background:var(--color-bg);font-family:var(--font-body)}
.variant-picker-item:last-child{border-bottom:none}
.variant-picker-left{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.variant-picker-name{font-size:0.78rem;font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.variant-picker-price{font-size:0.75rem;font-weight:600;color:var(--color-accent)}
.variant-picker-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.variant-picker-qty{display:flex;align-items:center;border:1px solid var(--color-primary-lighter);border-radius:8px;overflow:hidden}
.variant-picker-qty-btn{width:28px;height:28px;border:none;background:var(--color-bg-alt);cursor:pointer;font-size:0.9rem;color:var(--color-text);display:flex;align-items:center;justify-content:center;transition:background 0.15s}
.variant-picker-qty-btn:hover{background:var(--color-primary-lighter)}
.variant-picker-qty-input{width:32px;height:28px;border:none;border-left:1px solid var(--color-primary-lighter);border-right:1px solid var(--color-primary-lighter);text-align:center;font-size:0.78rem;font-family:var(--font-body);font-weight:600;color:var(--color-text);-moz-appearance:textfield}
.variant-picker-qty-input::-webkit-inner-spin-button,.variant-picker-qty-input::-webkit-outer-spin-button{-webkit-appearance:none}
.variant-picker-add{width:32px;height:32px;border:none;border-radius:8px;background:var(--color-accent);color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
.variant-picker-add:hover{background:var(--color-accent-hover);transform:scale(1.08)}
.shop-promo-banner{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:linear-gradient(135deg,#2a3b3c 0%,#3d5456 100%);border-radius:var(--radius-lg);overflow:hidden;align-items:center}
.shop-promo-content{padding:48px;color:white}
.shop-promo-badge{display:inline-block;background:var(--color-accent);color:white;font-size:0.75rem;font-weight:600;padding:5px 14px;border-radius:100px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:16px}
.shop-promo-content h2{font-size:1.8rem;margin-bottom:12px;color:white}
.shop-promo-content p{color:rgba(255,255,255,0.8);font-size:1rem;line-height:1.6;margin-bottom:24px}
.shop-promo-image{height:100%;overflow:hidden}
.shop-promo-image img{width:100%;height:100%;object-fit:cover;min-height:280px}
.shop-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shop-cat-card{position:relative;border-radius:var(--radius-md);overflow:hidden;text-decoration:none;aspect-ratio:4/3;display:block;transition:transform 0.25s,box-shadow 0.25s}
.shop-cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.shop-cat-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.shop-cat-card:hover img{transform:scale(1.05)}
.shop-cat-card-info{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(transparent,rgba(0,0,0,0.7));color:white}
.shop-cat-card-info h3{font-size:1rem;margin:0;color:white}
.shop-cat-card-info span{font-size:0.78rem;opacity:0.8}
.shop-bestseller-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.shop-cat-grid{grid-template-columns:repeat(3,1fr)}
.shop-bestseller-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){.shop-promo-banner{grid-template-columns:1fr;gap:0}
.shop-promo-content{padding:32px 24px}
.shop-promo-content h2{font-size:1.4rem}
.shop-promo-image{max-height:200px}
.shop-cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.shop-bestseller-grid{grid-template-columns:repeat(2,1fr)}
}
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.shop-main{min-width:0}
.shop-sidebar{position:sticky;top:80px;background:var(--color-bg);border-radius:16px;border:1px solid rgba(0,0,0,0.05);box-shadow:0 2px 16px rgba(0,0,0,0.04);max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--color-primary-lighter) transparent}
.shop-sidebar::-webkit-scrollbar{width:4px}
.shop-sidebar::-webkit-scrollbar-thumb{background:var(--color-primary-lighter);border-radius:4px}
.shop-sidebar-toggle{display:none}
.shop-sidebar-content{padding:16px}
.shop-sidebar-section{margin-bottom:16px}
.shop-sidebar-section:last-child{margin-bottom:0}
.sb-collapse-btn{display:flex;align-items:center;gap:6px;width:100%;cursor:pointer;border:none;background:none;padding:0}
.sb-chevron{margin-left:auto;transition:transform 0.25s ease;color:var(--color-text-muted)}
.sb-collapsible[data-sb-open="false"] .sb-chevron{transform:rotate(-90deg)}
.sb-collapse-body{max-height:800px;overflow:hidden;transition:max-height 0.3s ease}
.sb-collapsible[data-sb-open="false"] .sb-collapse-body{max-height:0}
.shop-sidebar-title{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted);margin-bottom:10px;padding-bottom:0;border-bottom:none}
.shop-sidebar-title svg:first-child{color:var(--color-accent)}
.sb-toggles-section{background:var(--color-bg-alt);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(0,0,0,0.04)}
.sb-filter-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.82rem;font-weight:500;color:var(--color-text)}
.sb-filter-toggle span{flex:1}
.sb-toggle-eco svg{color:#28a745}
.sb-toggle-eco .sb-toggle-switch input:checked + .sb-toggle-slider{background:#28a745}
.sb-toggle-price svg{color:var(--color-primary)}
.sb-toggle-price .sb-toggle-switch input:checked + .sb-toggle-slider{background:var(--color-primary)}
.sb-toggle-stock svg{color:var(--color-accent)}
.sb-toggle-stock .sb-toggle-switch input:checked + .sb-toggle-slider{background:var(--color-accent)}
.sb-filter-toggle svg{flex-shrink:0}
.sb-toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0}
.sb-toggle-switch input{opacity:0;width:0;height:0}
.sb-toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:22px;transition:background 0.25s;cursor:pointer}
.sb-toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.sb-toggle-switch input:checked + .sb-toggle-slider{background:#28a745}
.sb-toggle-switch input:checked + .sb-toggle-slider::before{transform:translateX(18px)}
.sb-checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.82rem;color:var(--color-text-light);padding:8px 0}
.shop-sidebar-cats{list-style:none;padding:0;margin:0}
.shop-sidebar-cats li{margin-bottom:2px}
.shop-sidebar-cats a,.shop-sidebar-cats button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid var(--color-primary-lighter);background:var(--color-bg);font-size:0.78rem;font-family:var(--font-body);color:var(--color-text-light);cursor:pointer;border-radius:100px;transition:all 0.2s ease;text-decoration:none;text-align:left;width:auto;font-weight:500}
.shop-sidebar-cats li{display:inline}
.shop-sidebar-cats{display:flex;flex-wrap:wrap;gap:6px}
.shop-sidebar-cats a:hover,.shop-sidebar-cats button:hover{border-color:var(--color-accent);color:var(--color-accent)}
.shop-sidebar-cats .active{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));border-color:var(--color-accent);color:white;font-weight:600}
.shop-sidebar-cats .active:hover{background:linear-gradient(135deg,var(--color-accent-hover),#b06e30);color:white}
.shop-sidebar-count{font-size:0.65rem;color:var(--color-text-muted);background:var(--color-bg-alt);padding:1px 6px;border-radius:100px;min-width:20px;text-align:center}
.shop-sidebar-cats .active .shop-sidebar-count{background:rgba(255,255,255,0.25);color:white}
.shop-sidebar-subcats{padding-left:0}
.shop-sidebar-subcats button{font-size:0.8rem;padding:6px 12px}
.shop-sidebar-price{font-size:0.85rem}
.shop-sidebar-price label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 0}
.shop-sidebar-price input[type="checkbox"]{accent-color:var(--color-accent);width:16px;height:16px}
.shop-active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.shop-active-filter-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--color-bg-alt);border-radius:100px;font-size:0.78rem;color:var(--color-text-light)}
.shop-active-filter-tag button{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--color-text-muted);padding:0;line-height:1}
.shop-clear-filters{background:none;border:none;color:var(--color-accent);font-size:0.8rem;cursor:pointer;padding:4px 0;font-family:var(--font-body)}
.shop-clear-filters:hover{text-decoration:underline}
.shop-controls{margin-bottom:24px}
.shop-sort-wrap{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.shop-sort-label{font-size:0.82rem;color:var(--color-text-muted);white-space:nowrap}
.shop-sort-select{padding:8px 32px 8px 12px;border:1px solid var(--color-primary-lighter);border-radius:var(--radius-sm);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;-webkit-appearance:none;appearance:none;font-size:0.85rem;font-family:inherit;color:var(--color-text);cursor:pointer;transition:border-color 0.2s}
.shop-sort-select:hover,.shop-sort-select:focus{border-color:var(--color-accent);outline:none}
.shop-sort-inline{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 28px 6px 10px;border:1px solid var(--color-primary-lighter);border-radius:6px;background:var(--color-bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;-webkit-appearance:none;appearance:none;font-size:0.78rem;font-family:inherit;color:var(--color-text-muted);cursor:pointer;transition:border-color 0.2s}
.shop-sort-inline:hover,.shop-sort-inline:focus{border-color:var(--color-accent);color:var(--color-text);outline:none}
.shop-search-wrap{position:relative;margin-bottom:16px}
.shop-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.shop-search{width:100%;padding:14px 130px 14px 48px;border:2px solid var(--color-primary-lighter);border-radius:var(--radius-md);font-size:1rem;font-family:var(--font-body);background:var(--color-bg);transition:border-color 0.2s}
.shop-search:focus{outline:none;border-color:var(--color-accent)}
.shop-search-clear{position:absolute;right:128px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.4rem;color:var(--color-text-muted);cursor:pointer;padding:4px 8px;line-height:1}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.shop-filter-pill{padding:8px 18px;border:1.5px solid var(--color-primary-lighter);border-radius:100px;background:var(--color-bg);font-size:0.85rem;font-family:var(--font-body);color:var(--color-text-light);cursor:pointer;transition:all 0.2s;white-space:nowrap}
.shop-filter-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}
.shop-filter-pill.active{background:var(--color-accent);border-color:var(--color-accent);color:white}
.shop-results-info{font-size:0.85rem;color:var(--color-text-muted);min-height:1.2em}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shop-card{background:var(--color-bg);border-radius:16px;border:1px solid rgba(0,0,0,0.04);overflow:hidden;transition:transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.3s ease;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 1px 8px rgba(0,0,0,0.04)}
.shop-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
.shop-card-image{position:relative;aspect-ratio:1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:visible;padding:20px}
.shop-card-image::after{content:'';position:absolute;inset:12px;border-radius:12px;pointer-events:none;transition:all 0.3s ease;border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--color-primary-light),var(--color-accent)) border-box;opacity:0.4;box-shadow:0 0 12px rgba(217,146,85,0.05)}
.shop-card:hover .shop-card-image::after{opacity:0.8;box-shadow:0 0 20px rgba(217,146,85,0.1)}
.shop-card-image img{width:100%;height:100%;object-fit:contain;transition:transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);position:relative;z-index:1}
.shop-card:hover .shop-card-image img{transform:scale(1.06)}
.shop-card-badge{position:absolute;top:10px;left:10px;background:#dc3545;color:white;font-size:0.7rem;font-weight:600;padding:4px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.5px}
.shop-card-badge.unavailable{background:var(--color-text-muted)}
.shop-card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.shop-card-category{font-size:0.7rem;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;margin-bottom:4px}
.shop-card-name{font-size:0.95rem;font-weight:600;color:var(--color-text);margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-card-desc{font-size:0.8rem;color:var(--color-text-muted);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-card-vpe{font-size:0.78rem;color:var(--color-text-muted);margin-bottom:12px}
.shop-card-stock{display:flex;align-items:center;gap:6px;font-size:0.72rem;font-weight:500;padding:6px 0 2px;margin-top:auto}
.stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.stock-green{color:#1a8a3f}
.stock-green .stock-dot{background:#28a745;box-shadow:0 0 6px rgba(40,167,69,0.5);animation:stockPulse 2s ease-in-out infinite}
.stock-yellow{color:#8a6d1a}
.stock-yellow .stock-dot{background:#e6a817}
.stock-red{color:#8a1a1a}
.stock-red .stock-dot{background:#dc3545}
@keyframes stockPulse{0%,100%{box-shadow:0 0 4px rgba(40,167,69,0.4)}
50%{box-shadow:0 0 10px rgba(40,167,69,0.8)}
}
.shop-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid #f0f0f0}
.shop-card-price{font-size:1.1rem;font-weight:600;color:var(--color-text)}
.shop-card-price small{font-size:0.7rem;font-weight:400;color:var(--color-text-muted)}
.shop-card-price .price-from{font-size:0.75rem;font-weight:400;color:var(--color-text-muted)}.shop-card-vat{display:block;font-size:.65rem;font-weight:400;color:var(--color-text-muted);margin-top:2px}
.shop-card-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:var(--color-accent);color:white;cursor:pointer;transition:background 0.2s,transform 0.2s;flex-shrink:0}
.shop-card-btn:hover{background:var(--color-accent-hover);transform:scale(1.1)}
.shop-card-btn svg{width:20px;height:20px}
.shop-card-actions{display:flex;gap:6px;align-items:center}
.shop-card-quote-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--color-primary-lighter);background:var(--color-bg);color:var(--color-primary);cursor:pointer;transition:all 0.2s;flex-shrink:0}
.shop-card-quote-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(217,146,85,0.06);transform:scale(1.1)}
.shop-card-quote-btn svg{width:17px;height:17px}
.shop-vpe-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 8px}
.shop-vpe-chip{display:inline-block;padding:2px 8px;background:var(--color-bg-alt);border-radius:100px;font-size:0.68rem;color:var(--color-text-muted);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.shop-vpe-more{background:var(--color-primary-lighter);color:var(--color-primary);font-weight:600}
.quote-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease}
.quote-modal{background:white;border-radius:20px;padding:32px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:slideUp 0.3s ease}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}
to{transform:translateY(0);opacity:1}
}
.quote-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.6rem;color:var(--color-text-muted);cursor:pointer;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s}
.quote-close:hover{background:var(--color-bg-alt)}
.quote-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.quote-header h3{font-size:1.2rem;font-weight:600;margin:0}
.quote-product{background:var(--color-bg-alt);border-radius:12px;padding:12px 16px;margin-bottom:20px}
.quote-product strong{font-size:0.9rem}
.quote-product small{color:var(--color-text-muted)}
.quote-form{display:flex;flex-direction:column;gap:12px}
.quote-label{display:flex;flex-direction:column;gap:4px;font-size:0.8rem;font-weight:600;color:var(--color-text-light)}
.quote-input,.quote-select{padding:10px 14px;border:1.5px solid var(--color-primary-lighter);border-radius:10px;font-size:0.88rem;font-family:var(--font-body);transition:border-color 0.2s;background:white}
.quote-input:focus,.quote-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(217,146,85,0.1)}
.quote-textarea{resize:vertical;min-height:60px}
.quote-hint{font-size:0.78rem;color:var(--color-text-muted);margin:4px 0;line-height:1.4}
.quote-submit{padding:14px 24px;background:var(--color-accent);color:white;border:none;border-radius:12px;font-size:0.95rem;font-weight:600;font-family:var(--font-button);cursor:pointer;transition:background 0.2s,transform 0.1s}
.quote-submit:hover{background:var(--color-accent-hover)}
.quote-submit:active{transform:scale(0.98)}
.quote-submit:disabled{cursor:wait;opacity:0.8}
.shop-skeleton{background:var(--color-bg);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.shop-skeleton-img{aspect-ratio:1;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.shop-skeleton-text{height:14px;margin:16px 16px 0;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.shop-skeleton-text.short{width:60%;margin-bottom:16px}
@keyframes shimmer{0%{background-position:200% 0}
100%{background-position:-200% 0}
}
.shop-empty{text-align:center;padding:60px 20px}
.shop-empty h3{margin-top:16px;font-size:1.2rem}
.shop-empty p{color:var(--color-text-muted);margin-top:8px}
.shop-load-more{text-align:center;margin-top:40px}
.shop-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s}
.shop-modal{background:var(--color-bg);border-radius:var(--radius-lg);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp 0.3s}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}
to{transform:translateY(0);opacity:1}
}
@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
.shop-modal-close{position:absolute;top:16px;right:16px;background:var(--color-bg);border:none;font-size:1.8rem;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:var(--shadow-sm);color:var(--color-text);transition:background 0.2s}
.shop-modal-close:hover{background:#f0f0f0}
.shop-modal-content{display:grid;grid-template-columns:1fr 1fr;gap:0}
.shop-modal-image{background:#fafafa;display:flex;align-items:center;justify-content:center;padding:32px;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.shop-modal-image img{max-width:100%;max-height:400px;object-fit:contain}
.shop-modal-info{padding:32px}
.shop-modal-category{font-size:0.75rem;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;margin-bottom:8px}
.shop-modal-name{font-size:1.4rem;font-weight:600;line-height:1.3;margin-bottom:8px}
.shop-modal-sku{font-size:0.8rem;color:var(--color-text-muted);margin-bottom:16px}
.shop-modal-desc{font-size:0.95rem;color:var(--color-text-light);line-height:1.6;margin-bottom:20px}
.shop-modal-variants{margin-bottom:20px}
.shop-modal-variants label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:8px}
.shop-modal-variant-list{display:flex;flex-direction:column;gap:6px}
.shop-modal-variant{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid var(--color-primary-lighter);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s;font-size:0.9rem}
.shop-modal-variant:hover,.shop-modal-variant.selected{border-color:var(--color-accent);background:rgba(217,146,85,0.05)}
.shop-modal-variant.selected{border-width:2px}
.shop-modal-variant-name{font-weight:500}
.shop-modal-variant-price{font-weight:600;color:var(--color-accent)}
.shop-modal-price{font-size:1.6rem;font-weight:600;margin-bottom:4px}
.shop-modal-price small{font-size:0.8rem;font-weight:400;color:var(--color-text-muted)}
.shop-modal-vat{font-size:0.8rem;color:var(--color-text-muted);margin-bottom:20px}
.shop-modal-qty{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.shop-modal-qty label{font-size:0.85rem;font-weight:600}
.shop-modal-qty-controls{display:flex;align-items:center;border:1.5px solid var(--color-primary-lighter);border-radius:var(--radius-sm);overflow:hidden}
.shop-modal-qty-controls button{width:40px;height:40px;border:none;background:var(--color-bg);font-size:1.2rem;cursor:pointer;transition:background 0.2s;display:flex;align-items:center;justify-content:center}
.shop-modal-qty-controls button:hover{background:var(--color-bg-alt)}
.shop-modal-qty-controls input{width:48px;height:40px;border:none;border-left:1.5px solid var(--color-primary-lighter);border-right:1.5px solid var(--color-primary-lighter);text-align:center;font-size:1rem;font-family:var(--font-body)}
.shop-modal-add-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-md);background:var(--color-accent);color:white;font-size:1rem;font-weight:600;font-family:var(--font-button);cursor:pointer;transition:background 0.2s,transform 0.1s;display:flex;align-items:center;justify-content:center;gap:8px}
.shop-modal-add-btn:hover{background:var(--color-accent-hover)}
.shop-modal-add-btn:active{transform:scale(0.98)}
.shop-modal-add-btn.added{background:#28a745}
.shop-modal-sdb{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--color-text-muted)}
.shop-modal-sdb a{color:var(--color-accent);text-decoration:none}
.shop-modal-sdb a:hover{text-decoration:underline}
.header-cart{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--color-text);text-decoration:none;transition:color 0.2s;margin-right:4px}
.header-cart:hover{color:var(--color-accent)}
.cart-badge{position:absolute;top:4px;right:2px;background:var(--color-accent);color:white;font-size:0.65rem;font-weight:600;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.quote-badge{background:var(--color-primary)}
.header-icons{display:flex;align-items:center;gap:2px;flex-shrink:0}
.header-quote{margin-right:0}
.quote-panel .cart-panel-header{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light))}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:2500;animation:fadeIn 0.2s}
.cart-panel{position:fixed;top:0;right:0;width:420px;max-width:100%;height:100vh;height:100dvh;background:var(--color-bg);z-index:2600;display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,0.15);transform:translateX(100%);transition:transform 0.3s ease}
.cart-panel.open{transform:translateX(0)}
.cart-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #eee}
.cart-panel-header h3{font-size:1.2rem;margin:0}
.cart-panel-close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--color-text-muted);padding:4px;line-height:1}
.cart-panel-body{flex:1;overflow-y:auto;padding:16px 24px}
.cart-empty-state{text-align:center;padding:40px 0;color:var(--color-text-muted)}
.cart-empty-state p{margin-top:12px}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #f0f0f0}
.cart-item-image{width:64px;height:64px;border-radius:var(--radius-sm);background:#fafafa;flex-shrink:0;overflow:hidden}
.cart-item-image img{width:100%;height:100%;object-fit:contain;padding:4px}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:0.85rem;font-weight:600;line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-vpe{font-size:0.75rem;color:var(--color-text-muted);margin-bottom:8px}
.cart-item-controls{display:flex;align-items:center;gap:8px}
.cart-item-qty{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;overflow:hidden}
.cart-item-qty button{width:28px;height:28px;border:none;background:#f5f5f5;cursor:pointer;font-size:0.9rem;display:flex;align-items:center;justify-content:center}
.cart-item-qty button:hover{background:#eee}
.cart-item-qty span{width:32px;text-align:center;font-size:0.85rem;font-weight:600}
.cart-item-remove{background:none;border:none;color:var(--color-text-muted);font-size:0.75rem;cursor:pointer;padding:2px 6px}
.cart-item-remove:hover{color:#dc3545}
.cart-item-price{text-align:right;flex-shrink:0}
.cart-item-price .line-total{font-weight:600;font-size:0.9rem}
.cart-item-price .unit-price{font-size:0.7rem;color:var(--color-text-muted)}
.cart-item-delivery{font-size:0.72rem;margin-top:2px;display:flex;align-items:center;gap:4px}
.cart-item-delivery--fast{color:#27ae60}
.cart-item-delivery--delayed{color:#e67e22}
.cart-item-delivery .stock-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.cart-item-delivery--fast .stock-dot{background:#27ae60}
.cart-item-delivery--delayed .stock-dot{background:#e67e22}
.cart-delivery-option{padding:12px 16px;margin:8px 0;background:#f8f9fa;border-radius:var(--radius-sm);font-size:0.82rem}
.cart-delivery-title{font-weight:600;font-size:0.85rem;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.cart-delivery-radio{display:flex;align-items:flex-start;gap:8px;padding:6px 0;cursor:pointer;line-height:1.3}
.cart-delivery-radio input[type="radio"]{margin-top:3px;flex-shrink:0}
.cart-delivery-radio span{font-size:0.8rem;color:var(--color-text-light)}
.cart-panel-footer{padding:20px 24px;border-top:1px solid #eee;background:var(--color-bg)}
.cart-summary{margin-bottom:16px}
.cart-summary-row{display:flex;justify-content:space-between;font-size:0.9rem;padding:4px 0}
.cart-summary-row.cart-total{font-weight:600;font-size:1.05rem;padding-top:8px;border-top:1px solid #eee;margin-top:4px}
.cart-shipping{color:var(--color-text-muted)}
.cart-shipping-progress{padding:6px 0 2px}
.cart-shipping-bar{height:4px;background:#eee;border-radius:2px;overflow:hidden;margin-bottom:4px}
.cart-shipping-fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width 0.3s ease}
.cart-shipping-msg{font-size:0.75rem;color:var(--color-text-muted)}
.cart-shipping-free{color:#27ae60;font-weight:500;display:flex;align-items:center;gap:4px}
.cart-vat-note{font-size:0.75rem;color:var(--color-text-muted);margin-top:4px}
.cart-continue{display:block;width:100%;margin-top:8px;background:none;border:none;color:var(--color-text-muted);font-size:0.85rem;cursor:pointer;padding:8px;text-align:center}
.cart-continue:hover{color:var(--color-text)}
.cat-stats-section{background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-alt) 100%);padding:48px 0}
.cat-story-section.spring-checklist-section{padding-bottom:32px;background:linear-gradient(180deg,#ffffff 0%,#d0dfe3 100%)}
.cat-story-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.cat-subcat-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cat-subcat-card-apple{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;cursor:pointer;transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);text-align:center;flex:0 0 auto;background:linear-gradient(135deg,#3d5558,#4a6568);border:1.5px solid transparent;color:#fff;position:relative;overflow:hidden}
.cat-subcat-card-apple:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(61,85,88,0.3)}
.cat-subcat-card-apple.active{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));box-shadow:0 4px 16px rgba(217,146,85,0.3)}
.cat-subcat-icon{line-height:1;color:var(--color-accent);display:flex}
.cat-subcat-icon svg{width:18px;height:18px}
.cat-subcat-card-apple.active .cat-subcat-icon{color:#fff}
.cat-subcat-card-apple h4{font-size:0.82rem;font-weight:500;margin-bottom:0;color:#fff;white-space:nowrap}
.cat-subcat-card-apple span{font-size:0.68rem;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.15);padding:2px 8px;border-radius:100px}
.cat-filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.cat-filter-label{font-size:0.8rem;font-weight:600;color:var(--color-text-muted);margin-right:4px}
.cat-filter-chip{padding:6px 16px;border:1.5px solid var(--color-primary-lighter);border-radius:100px;background:var(--color-bg);font-size:0.8rem;font-family:var(--font-body);color:var(--color-text-light);cursor:pointer;transition:all 0.2s}
.cat-filter-chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.cat-filter-chip.active{background:var(--color-accent);border-color:var(--color-accent);color:white}
.cat-results-count{font-size:0.85rem;color:var(--color-text-muted);margin-bottom:8px}
.cat-subcat-card{background:var(--color-bg);border:1.5px solid #eee;border-radius:var(--radius-md);padding:20px 24px;cursor:pointer;transition:all 0.2s;text-align:center}
.cat-subcat-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cat-subcat-card.active{border-color:var(--color-accent);background:rgba(217,146,85,0.05);border-width:2px}
.cat-subcat-card h4{font-size:0.9rem;margin-bottom:4px}
.cat-subcat-card span{font-size:0.78rem;color:var(--color-text-muted)}
@media (max-width:768px){.cat-story-actions{flex-direction:column;align-items:stretch}
.cat-story-actions .btn{text-align:center}
.cat-subcat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
.product-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:0.85rem;flex-wrap:wrap}
.product-breadcrumb a{color:var(--color-accent);text-decoration:none}
.product-breadcrumb a:hover{text-decoration:underline}
.product-breadcrumb span{color:var(--color-text-muted)}
.product-breadcrumb .current{color:var(--color-text);font-weight:500}
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:56px;align-items:start}
.pd-left-col{position:sticky;top:80px;display:flex;flex-direction:column;gap:20px;align-self:start}
.pd-left-col .pd-image{margin-bottom:0}
.pd-side-info{display:flex;flex-direction:column;gap:10px}
.pd-side-mfr{display:flex;align-items:center;gap:12px;padding:14px 18px;background:white;border:1px solid var(--color-primary-lighter);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,0.03)}
.pd-side-mfr-icon{flex-shrink:0;color:var(--color-primary)}
.pd-side-mfr-logo-wrap{flex-shrink:0;width:60px;display:flex;align-items:center;justify-content:center}
.pd-side-mfr-logo{max-width:60px;max-height:40px;object-fit:contain}
.pd-side-mfr-details{display:flex;flex-direction:column;gap:1px;min-width:0}
.pd-side-mfr-label{display:block;font-size:0.62rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px}
.pd-side-mfr-name{display:block;font-size:0.85rem;font-weight:600;color:var(--color-text);line-height:1.3}
.pd-side-mfr-cat{display:block;font-size:0.72rem;color:var(--color-text-muted)}
.pd-side-mfr-link{display:inline-block;font-size:0.72rem;color:var(--color-accent);text-decoration:none;margin-top:2px}
.pd-side-mfr-link:hover{text-decoration:underline}
.pd-gpsr{display:flex;flex-direction:column;gap:1px;margin-top:6px;padding-top:8px;border-top:1px solid var(--color-primary-lighter);font-size:0.72rem;color:var(--color-text-light);line-height:1.4}
.pd-gpsr-title{font-size:0.65rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:2px}
.pd-side-ghs{padding:14px 18px;background:#fffbf5;border:1px solid #f0dcc3;border-radius:14px}
.pd-ghs-title{font-size:0.72rem;font-weight:600;color:var(--color-text-light);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.3px}
.pd-ghs-symbols{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pd-ghs-symbol{width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.pd-ghs-symbol img{width:100%;height:100%;object-fit:contain}
.pd-ghs-phrases{display:flex;flex-direction:column;gap:2px;font-size:0.7rem;color:var(--color-text-light);line-height:1.4}
.pd-ghs-signal{display:inline-block;font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px;padding:3px 10px;border-radius:4px;margin-bottom:8px}
.pd-ghs-signal-danger{background:#d32f2f;color:#fff}
.pd-ghs-signal-warning{background:#f57c00;color:#fff}
.pd-ghs-label{font-weight:600;font-size:0.68rem;color:var(--color-text-muted);margin-bottom:2px}
.pd-ghs-p-phrases{margin-top:6px;padding-top:6px;border-top:1px solid rgba(240,220,195,0.5)}
.pd-side-sdb-link{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(135deg,rgba(230,240,242,0.6),rgba(230,240,242,0.3));border:1px solid var(--color-primary-lighter);border-radius:14px;color:var(--color-text-light);text-decoration:none;font-size:0.82rem;font-weight:500;transition:all 0.2s}
.pd-side-sdb-link:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(217,146,85,0.05)}
.pd-side-sdb-link svg:first-child{color:var(--color-primary);flex-shrink:0}
.pd-image{background:#ffffff;border-radius:24px;display:flex;align-items:center;justify-content:center;padding:48px;border:2px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,var(--color-primary-light),var(--color-accent));background-origin:padding-box,border-box;background-clip:padding-box,border-box;box-shadow:0 4px 24px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.03);overflow:hidden;aspect-ratio:1;opacity:1;transition:box-shadow 0.3s ease}
.pd-image:hover{box-shadow:0 8px 32px rgba(217,146,85,0.15),0 2px 8px rgba(0,0,0,0.06)}
.pd-image img{max-width:100%;max-height:500px;object-fit:contain;position:relative;z-index:1;transition:transform 0.3s ease}
.pd-image:hover img{transform:scale(1.03)}
.pd-no-image{color:var(--color-text-muted);font-size:0.9rem;padding:60px}
.pd-category{display:inline-block;font-size:0.7rem;color:var(--color-accent);text-transform:uppercase;letter-spacing:1px;font-weight:600;padding:4px 12px;background:rgba(217,146,85,0.08);border-radius:100px;margin-bottom:8px}
.pd-name{font-size:1.8rem;font-weight:600;line-height:1.25;margin:8px 0 4px;letter-spacing:-0.02em}
.pd-sku{font-size:0.78rem;color:var(--color-text-muted);display:block;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--color-primary-lighter)}
.pd-description{font-size:0.92rem;line-height:1.7;color:var(--color-text-light);margin-bottom:24px;padding:16px 20px;background:linear-gradient(135deg,rgba(230,240,242,0.5),rgba(230,240,242,0.2));border-radius:14px;border-left:3px solid var(--color-accent)}
.pd-variants{margin-bottom:24px;padding:20px;background:white;border-radius:16px;border:1px solid var(--color-primary-lighter);box-shadow:0 2px 8px rgba(0,0,0,0.03)}
.pd-variants h3{font-size:0.85rem;font-weight:600;margin-bottom:12px;color:var(--color-text-light);display:flex;align-items:center;gap:6px}
.pd-variants h3::before{content:'';width:3px;height:16px;background:var(--color-accent);border-radius:2px}
.pd-variant-list{display:flex;flex-direction:column;gap:6px}
.pd-variant{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1.5px solid var(--color-primary-lighter);border-radius:12px;cursor:pointer;transition:all 0.25s cubic-bezier(0.25,0.46,0.45,0.94)}
.pd-variant:hover{border-color:var(--color-accent);background:rgba(217,146,85,0.04);transform:translateX(4px)}
.pd-variant.selected{border-color:var(--color-accent);background:rgba(217,146,85,0.06);border-width:2px;box-shadow:0 2px 12px rgba(217,146,85,0.1)}
.pd-variant-info{display:flex;flex-direction:column;gap:2px}
.pd-variant-name{font-weight:600;font-size:0.9rem}
.pd-variant-sku{font-size:0.75rem;color:var(--color-text-muted)}
.pd-variant-price{font-weight:600;color:var(--color-accent);font-size:0.95rem}
.pd-price-section{margin-bottom:20px;padding:20px 24px;background:linear-gradient(135deg,rgba(217,146,85,0.06),rgba(217,146,85,0.02));border-radius:16px;border:1px solid rgba(217,146,85,0.12)}
.pd-price{font-size:2.2rem;font-weight:600;letter-spacing:-0.02em}
.pd-price small{font-size:0.85rem;font-weight:400;color:var(--color-text-muted)}
.pd-price .pd-price-from{font-size:0.9rem;font-weight:400;color:var(--color-text-muted)}
.pd-vat{font-size:0.8rem;color:var(--color-text-muted);margin-top:4px}
.pd-color-input,.pd-color-pills{margin-bottom:16px}
.pd-color-input label,.pd-color-pills label{display:block;font-size:0.8rem;font-weight:600;margin-bottom:6px}
.pd-color-input input[type="text"]{width:100%;padding:12px 16px;border:2px solid var(--color-primary-lighter,#D0DCDE);border-radius:10px;font-size:0.95rem;font-family:inherit;transition:border-color 0.2s}
.pd-color-input input:focus{outline:none;border-color:var(--color-accent,#D99255)}
.pd-color-pills-row{display:flex;flex-wrap:wrap;gap:8px}
.pd-color-pill{padding:8px 16px;border-radius:20px;font-size:0.82rem;font-weight:600;font-family:inherit;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;text-transform:capitalize}
.pd-color-pill:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.pd-color-pill:focus{outline:none}
.pd-color-pill.selected{box-shadow:0 0 0 3px var(--color-accent,#D99255),0 2px 8px rgba(0,0,0,0.15);transform:scale(1.08)}
.pd-variant-pill{display:flex;flex-direction:column;align-items:center;padding:8px 14px 6px;min-width:70px}
.pd-color-pill-name{font-size:0.82rem}
.pd-color-pill-sku{font-size:0.6rem;opacity:0.7;margin-top:2px}
.cart-item-color{font-size:0.75rem;color:var(--color-accent,#D99255);font-weight:600;margin-top:2px}
.pd-actions{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.pd-qty{display:flex;flex-direction:column;gap:6px}
.pd-qty label{font-size:0.8rem;font-weight:600}
.pd-add-btn{flex:1;padding:14px 24px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));color:white;font-size:1rem;font-weight:600;font-family:var(--font-button);cursor:pointer;transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);display:flex;align-items:center;justify-content:center;gap:8px;height:52px;box-shadow:0 4px 16px rgba(217,146,85,0.25);position:relative;overflow:hidden}
.pd-add-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--color-accent-hover),#b06e30);opacity:0;transition:opacity 0.3s ease}
.pd-add-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(217,146,85,0.35)}
.pd-add-btn:hover::before{opacity:1}
.pd-add-btn svg,.pd-add-btn span{position:relative;z-index:1}
.pd-add-btn:active{transform:scale(0.98) translateY(0)}
.pd-add-btn.added{background:linear-gradient(135deg,#28a745,#1e7e34);box-shadow:0 4px 16px rgba(40,167,69,0.25)}
.pd-quote-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border:1.5px solid var(--color-primary-lighter);border-radius:12px;background:white;color:var(--color-text-muted);font-family:var(--font-button);font-size:0.78rem;font-weight:500;cursor:pointer;transition:all 0.2s;white-space:nowrap;margin-top:8px}
.pd-quote-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(217,146,85,0.04)}
.pd-quote-btn svg{width:15px;height:15px}
.pd-quote-hint{font-size:0.72rem;color:var(--color-text-muted);margin:6px 0 0;line-height:1.4;opacity:0.7}
.pd-vpe-cards{display:flex;gap:6px;flex-wrap:nowrap}
.pd-vpe-card{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1.5px solid var(--color-primary-lighter);border-radius:10px;background:linear-gradient(145deg,#fafcfd,#f5f8f9);flex:1;min-width:0;transition:all 0.25s cubic-bezier(0.25,0.46,0.45,0.94)}
.pd-vpe-card:hover{border-color:var(--color-accent);box-shadow:0 2px 8px rgba(217,146,85,0.12)}
.pd-vpe-card.active{border-color:var(--color-accent);background:rgba(217,146,85,0.06)}
.pd-vpe-icon{color:var(--color-primary);line-height:1;flex-shrink:0}
.pd-vpe-icon svg{width:16px;height:16px}
.pd-vpe-label{font-size:0.68rem;font-weight:600;color:var(--color-text);line-height:1.25}
.pd-vpe-section{margin:12px 0;padding:12px 14px;background:white;border-radius:12px;border:1px solid var(--color-primary-lighter);box-shadow:0 2px 8px rgba(0,0,0,0.03)}
.pd-vpe-title{font-size:0.72rem;font-weight:600;color:var(--color-text-light);margin-bottom:8px;display:flex;align-items:center;gap:6px}
@media (max-width:480px){.pd-vpe-cards{flex-wrap:wrap}
.pd-vpe-card{flex:1 1 45%}
}
.pd-vpe-title::before{content:'';width:3px;height:16px;background:var(--color-primary);border-radius:2px}
.pd-actions-wrapper{padding:24px;background:white;border-radius:16px;border:1px solid var(--color-primary-lighter);box-shadow:0 2px 8px rgba(0,0,0,0.03);margin-bottom:16px}
.pd-trust{display:flex;flex-wrap:wrap;gap:12px;font-size:0.8rem;color:var(--color-text-muted);padding-top:20px;border-top:1px solid rgba(0,0,0,0.06)}
.pd-trust span{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--color-bg-alt);border-radius:100px;font-size:0.75rem}
.pd-trust span svg{color:var(--color-accent)}
.pd-divider{height:1px;background:linear-gradient(90deg,transparent,var(--color-primary-lighter),transparent);margin:48px 0}
.pd-details{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:40px;border-top:none}
.pd-details-title{text-align:center;font-size:1.3rem;font-weight:600;margin-bottom:32px;color:var(--color-text)}
.pd-details > div{background:var(--color-bg);border:1px solid rgba(0,0,0,0.04);border-radius:16px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,0.03)}
.pd-specs,.pd-sdb,.pd-contact{background:white;border-radius:16px;border:1px solid var(--color-primary-lighter);box-shadow:0 2px 8px rgba(0,0,0,0.03);padding:24px;transition:transform 0.2s,box-shadow 0.2s}
.pd-specs:hover,.pd-sdb:hover,.pd-contact:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.pd-specs h3,.pd-sdb h3,.pd-contact h3{font-size:1rem;font-weight:600;margin-bottom:12px}
.pd-specs-table{width:100%;border-collapse:collapse}
.pd-specs-table td{padding:10px 12px;font-size:0.85rem;border-bottom:1px solid #f0f0f0}
.pd-specs-table td:first-child{font-weight:600;color:var(--color-text-muted);width:40%}
.pd-sdb{margin-bottom:24px}
.pd-sdb-link{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--color-bg-alt);border-radius:var(--radius-sm);color:var(--color-accent);text-decoration:none;font-size:0.9rem;font-weight:500;transition:background 0.2s}
.pd-sdb-link:hover{background:var(--color-primary-lighter)}
.pd-contact{background:var(--color-bg-alt);padding:24px;border-radius:var(--radius-md)}
.pd-contact p{font-size:0.9rem;color:var(--color-text-light);margin-bottom:16px}
.pd-phone{margin-left:12px;color:var(--color-text-muted);text-decoration:none;font-size:0.9rem}
.pd-phone:hover{color:var(--color-accent)}
.wishlist-heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:transform 0.2s,background 0.2s;padding:0}
.wishlist-heart svg{width:18px;height:18px;stroke:#999;fill:none;transition:stroke 0.2s,fill 0.2s}
.wishlist-heart:hover{transform:scale(1.15)}
.wishlist-heart:hover svg{stroke:#e74c3c}
.wishlist-heart.active svg{stroke:#e74c3c;fill:#e74c3c}
.shop-card-image{position:relative}
.pd-wishlist-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1.5px solid #ddd;background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;color:var(--color-text-muted);transition:all 0.2s}
.pd-wishlist-btn:hover{border-color:#e74c3c;color:#e74c3c}
.pd-wishlist-btn:hover svg{stroke:#e74c3c}
.pd-wishlist-btn.active{border-color:#e74c3c;color:#e74c3c}
.pd-wishlist-btn.active svg{stroke:#e74c3c;fill:#e74c3c}
.wishlist-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0}
.wishlist-item-link{display:flex;align-items:center;gap:12px;flex:1;text-decoration:none;color:inherit;min-width:0}
.wishlist-item-link img{width:50px;height:50px;object-fit:contain;border-radius:6px;background:#f8f8f8;flex-shrink:0}
.wishlist-item-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.wishlist-item-name{font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wishlist-item-price{font-size:0.78rem;color:var(--color-text-muted)}
.wishlist-item-remove{-webkit-appearance:none;appearance:none;border:0;background:transparent;outline:none;box-shadow:none;color:#ccc;font-size:1.3rem;cursor:pointer;padding:4px 8px;flex-shrink:0}
.wishlist-item-remove:hover{color:#e74c3c}
.wishlist-item-cart{-webkit-appearance:none;appearance:none;border:0;background:transparent;outline:none;box-shadow:none;color:var(--color-text-muted);cursor:pointer;padding:0 4px;flex-shrink:0;display:flex;align-items:center;transition:color .2s}.wishlist-item-cart:hover{color:var(--color-accent)}
.wishlist-item-addlist{flex-shrink:0}
.wishlist-list-select{font-size:0.72rem;padding:3px 6px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;max-width:110px}
.pd-recommendations{margin-top:48px;padding-top:32px;border-top:1px solid #eee}
.pd-recommendations-title{font-size:1.3rem;font-weight:600;margin-bottom:24px;color:var(--color-text)}
.pd-recommendations-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pd-rec-card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
@media (max-width:1100px){.pd-recommendations-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){.pd-recommendations-grid{grid-template-columns:1fr}
}
.pd-recently-viewed{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.pd-recently-grid{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.pd-recent-card{display:flex;align-items:center;gap:12px;min-width:260px;padding:12px;background:var(--color-bg-alt);border-radius:var(--radius-sm);text-decoration:none;color:inherit;transition:transform 0.2s,box-shadow 0.2s}
.pd-recent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.pd-recent-card img{width:60px;height:60px;object-fit:contain;border-radius:6px;background:#fff;flex-shrink:0}
.pd-recent-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.pd-recent-name{font-size:0.82rem;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pd-recent-price{font-size:0.78rem;color:var(--color-text-muted)}
@media (max-width:768px){.pd-layout{grid-template-columns:1fr;gap:24px}
.pd-image{position:relative;top:0;max-height:350px}
.pd-name{font-size:1.3rem}
.pd-price{font-size:1.6rem}
.pd-actions{flex-direction:column;align-items:stretch}
.pd-qty{flex-direction:row;align-items:center;gap:12px}
.pd-details{grid-template-columns:1fr}
}
@media (max-width:1100px){.shop-layout{grid-template-columns:220px 1fr;gap:24px}
.shop-grid{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (max-width:768px){.shop-layout{grid-template-columns:1fr;gap:0}
.shop-sidebar{position:relative;top:0;border:none;border-radius:0;margin-bottom:16px}
.shop-sidebar-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:var(--color-bg-alt);border:1px solid #ddd;border-radius:var(--radius-md);font-size:0.9rem;font-family:var(--font-body);font-weight:600;color:var(--color-text);cursor:pointer}
.shop-sidebar-content{display:none;padding:16px;border:1px solid #eee;border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md)}
.shop-sidebar-content.open{display:block}
.shop-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.shop-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.shop-modal-content{grid-template-columns:1fr}
.shop-modal-image{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:300px}
.shop-modal{max-height:95vh;margin:auto 10px}
.cart-panel{width:100%}
.shop-card-name{font-size:0.85rem}
.shop-card-body{padding:12px}
.shop-b2b-hint{font-size:0.75rem;padding:8px 14px}
}
@media (max-width:480px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.shop-card-price{font-size:0.95rem}
.shop-card-btn{width:34px;height:34px}
.shop-card-footer{padding-top:8px}
}
.eco-hero{background:linear-gradient(160deg,#1a3d2e 0%,#2d5a42 40%,#1a3d2e 100%) !important;margin-bottom:0 !important;padding-bottom:140px !important}
.eco-hero .wave-divider svg path{fill:#1a2a2d !important}
.eco-hero .wave-divider{margin-bottom:-2px}
.eco-hero .hero-particles .eco-particle{position:absolute;width:6px;height:8px;background:rgba(74,140,106,0.35);border-radius:50% 0 50% 50%;animation:ecoLeafFloat linear infinite}
@keyframes ecoLeafFloat{0%{bottom:-10px;opacity:0;transform:rotate(0deg) translateX(0)}
10%{opacity:0.8}
50%{transform:rotate(45deg) translateX(20px)}
90%{opacity:0.6}
100%{bottom:100%;opacity:0;transform:rotate(90deg) translateX(-15px)}
}
.eco-hero .eco-particle:nth-child(1){left:8%;animation-duration:12s;animation-delay:0s;width:8px;height:10px}
.eco-hero .eco-particle:nth-child(2){left:20%;animation-duration:15s;animation-delay:2s;opacity:0.5}
.eco-hero .eco-particle:nth-child(3){left:35%;animation-duration:11s;animation-delay:4s;width:5px;height:7px}
.eco-hero .eco-particle:nth-child(4){left:50%;animation-duration:14s;animation-delay:1s}
.eco-hero .eco-particle:nth-child(5){left:65%;animation-duration:13s;animation-delay:3s;width:7px;height:9px;opacity:0.4}
.eco-hero .eco-particle:nth-child(6){left:78%;animation-duration:16s;animation-delay:5s}
.eco-hero .eco-particle:nth-child(7){left:88%;animation-duration:10s;animation-delay:2.5s;width:5px;height:6px}
.eco-hero .eco-particle:nth-child(8){left:45%;animation-duration:17s;animation-delay:6s;opacity:0.3}
.eco-hero-accent{color:#7bc4a0;display:block}
.eco-hero .shop-hero-sub{color:rgba(255,255,255,0.85);max-width:600px}
.eco-hero-actions{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.eco-hero-actions .btn-eco{background:#4a8c6a;color:#fff;border:none;padding:14px 32px;border-radius:var(--radius-md);font-family:var(--font-button);font-size:0.95rem;font-weight:500;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.eco-hero-actions .btn-eco:hover{background:#367a56;transform:translateY(-2px);box-shadow:0 6px 20px rgba(74,140,106,0.3)}
.eco-hero-actions .btn-outline-eco{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.3);padding:12px 28px;border-radius:var(--radius-md);font-family:var(--font-button);font-size:0.95rem;font-weight:500;cursor:pointer;transition:var(--transition);text-decoration:none}
.eco-hero-actions .btn-outline-eco:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.08)}
.eco-stats-section{background:linear-gradient(180deg,#1a2a2d 0%,#243538 60%,#2a3f42 100%);padding:56px 0 80px;position:relative}
.eco-stats-grid{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.eco-stat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 28px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);backdrop-filter:blur(4px);min-width:160px;transition:all 0.4s ease}
.eco-stat:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px);border-color:rgba(74,140,106,0.4)}
.eco-stat-number{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:#7bc4a0;line-height:1}
.eco-stat-label{font-size:0.78rem;color:rgba(255,255,255,0.65);text-align:center;letter-spacing:0.02em}
.eco-certs-section{background:var(--color-bg);padding:80px 0}
.eco-certs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.eco-cert-card{background:var(--color-bg);border:2px solid var(--color-primary-lighter);border-radius:16px;padding:28px 20px;text-align:center;cursor:pointer;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.eco-cert-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4a8c6a,#7bc4a0);opacity:0;transition:opacity 0.3s}
.eco-cert-card:hover,.eco-cert-card.active{border-color:#4a8c6a;transform:translateY(-4px);box-shadow:0 8px 28px rgba(74,140,106,0.15)}
.eco-cert-card:hover::before,.eco-cert-card.active::before{opacity:1}
.eco-cert-bar{height:5px;background:var(--cert-color,#4a8c6a);border-radius:16px 16px 0 0;margin:-28px -20px 20px}
.eco-cert-card h3{font-size:1.05rem;font-weight:600;margin-bottom:8px;color:var(--color-text)}
.eco-cert-card p{font-size:0.82rem;color:var(--color-text-muted);line-height:1.5;margin-bottom:16px}
.eco-cert-progress{display:flex;align-items:center;gap:10px;margin-top:auto}
.eco-cert-progress-fill{flex:1;height:6px;background:var(--color-primary-lighter);border-radius:100px;position:relative;overflow:hidden}
.eco-cert-progress-fill::after{content:'';position:absolute;top:0;left:0;height:100%;width:100%;background:var(--cert-color,#4a8c6a);border-radius:100px;transform-origin:left;transform:scaleX(1)}
.eco-cert-progress span{font-size:0.75rem;font-weight:600;color:var(--cert-color,#4a8c6a);white-space:nowrap;font-family:var(--font-button)}
.eco-story-section{background:var(--color-bg-alt);padding:80px 0;overflow:hidden}
.eco-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.eco-story-image{border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.1);position:relative}
.eco-story-image img{width:100%;height:400px;object-fit:cover;display:block}
.eco-story-image::after{content:'';position:absolute;inset:0;border-radius:20px;border:2px solid rgba(74,140,106,0.2);pointer-events:none}
.eco-story-content h2{font-size:1.8rem;font-weight:600;margin-bottom:24px;color:var(--color-text)}
.eco-story-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
.eco-story-list li{display:flex;gap:14px;align-items:flex-start}
.eco-story-check{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#4a8c6a,#367a56);display:flex;align-items:center;justify-content:center;margin-top:2px}
.eco-story-check svg{width:14px;height:14px;color:#fff}
.eco-story-list li strong{display:block;font-size:0.95rem;font-weight:600;color:var(--color-text);margin-bottom:4px}
.eco-story-list li span{font-size:0.85rem;color:var(--color-text-muted);line-height:1.5}
.eco-brands-section{background:var(--color-bg);padding:80px 0}
.eco-brands-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.eco-brand-card{background:var(--color-bg);border:1px solid var(--color-primary-lighter);border-radius:16px;padding:24px 16px;text-align:center;cursor:pointer;transition:all 0.35s cubic-bezier(0.4,0,0.2,1)}
.eco-brand-card:hover,.eco-brand-card.active{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,0.08);border-color:#4a8c6a}
.eco-brand-logo{height:60px;margin-left:auto;margin-right:auto;margin-bottom:14px;display:block;object-fit:contain;max-width:85%;padding:6px;background:#fff;border-radius:var(--radius-sm);transition:all 0.3s}
.eco-brand-card:hover .eco-brand-logo,.eco-brand-card.active .eco-brand-logo{transform:scale(1.05)}
.eco-brand-card h4{font-size:0.85rem;font-weight:600;margin-bottom:4px;color:var(--color-text)}
.eco-brand-card .eco-brand-count{font-size:0.75rem;color:var(--color-text-muted)}
.eco-brand-card .eco-brand-desc{font-size:0.72rem;color:var(--color-text-muted);margin-top:6px;line-height:1.4}
.eco-products-section{background:var(--color-bg);padding:80px 0}
.eco-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px}
.eco-filter-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.eco-filter-label{font-size:0.8rem;font-weight:600;color:var(--color-text-muted);margin-right:4px}
.eco-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:100px;background:var(--color-primary-lighter);color:var(--color-text-light);font-size:0.8rem;font-weight:500;font-family:var(--font-button);cursor:pointer;border:none;transition:all 0.25s}
.eco-pill:hover{background:var(--color-primary-light)}
.eco-pill.active{background:#4a8c6a;color:#fff}
.eco-pill-count{font-size:0.7rem;opacity:0.7}
.eco-cert-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:100px;background:transparent;border:1.5px solid var(--color-primary-lighter);color:var(--color-text-muted);font-size:0.75rem;font-weight:500;font-family:var(--font-button);cursor:pointer;transition:all 0.25s}
.eco-cert-chip:hover{border-color:#4a8c6a;color:#4a8c6a}
.eco-cert-chip.active{background:#4a8c6a;border-color:#4a8c6a;color:#fff}
.eco-cert-chip svg{width:14px;height:14px}
.eco-results-info{font-size:0.85rem;color:var(--color-text-muted);margin-bottom:20px}
.shop-card-certs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.shop-card-cert{display:inline-block;background:linear-gradient(135deg,#e8f5ef,#d1ebe0);color:#2d6a4f;font-size:0.6rem;font-weight:600;padding:2px 8px;border-radius:100px;white-space:nowrap}
.eco-ppwr-section{background:linear-gradient(135deg,#1a2a2d,#2a3a3d);padding:60px 0;text-align:center}
.eco-ppwr-section h2{color:#fff;font-size:1.5rem;margin-bottom:12px}
.eco-ppwr-section p{color:rgba(255,255,255,0.7);max-width:600px;margin:0 auto 24px;font-size:0.9rem;line-height:1.6}
.eco-ppwr-section .btn-eco{background:#4a8c6a;color:#fff;border:none;padding:12px 28px;border-radius:var(--radius-md);font-family:var(--font-button);font-size:0.9rem;font-weight:500;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.eco-ppwr-section .btn-eco:hover{background:#367a56;transform:translateY(-2px)}
@media (max-width:1100px){.eco-certs-grid{grid-template-columns:repeat(2,1fr)}
.eco-brands-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){.eco-hero .eco-particle{display:none}
.eco-stats-grid{gap:12px}
.eco-stat{min-width:130px;padding:14px 18px}
.eco-stat-number{font-size:1.5rem}
.eco-certs-grid{grid-template-columns:1fr 1fr;gap:16px}
.eco-story-grid{grid-template-columns:1fr;gap:32px}
.eco-story-image img{height:280px}
.eco-story-content h2{font-size:1.4rem}
.eco-brands-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.eco-hero-actions{flex-direction:column;align-items:stretch}
.eco-hero-actions .btn-eco,.eco-hero-actions .btn-outline-eco{text-align:center;justify-content:center}
}
@media (max-width:480px){.eco-certs-grid{grid-template-columns:1fr}
.eco-stat{min-width:110px;padding:12px 14px}
.eco-stat-number{font-size:1.3rem}
.eco-brands-grid{grid-template-columns:1fr}
}
.sdb-search-wrapper{max-width:800px;margin:0 auto}
.sdb-search-bar{position:relative;margin-bottom:20px}
.sdb-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.sdb-search-input{width:100%;padding:14px 16px 14px 48px;font-size:1.05rem;font-family:var(--font-body);border:2px solid var(--color-primary-lighter);border-radius:var(--radius-md);background:#fff;color:var(--color-text);transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box}
.sdb-search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(156,177,180,0.2)}
.sdb-search-input::placeholder{color:var(--color-text-muted)}
.sdb-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.sdb-filters::-webkit-scrollbar{display:none}
.sdb-filter-pill{padding:6px 16px;font-size:0.88rem;font-family:var(--font-body);font-weight:600;border:1.5px solid var(--color-primary-lighter);border-radius:50px;background:#fff;color:var(--color-text-light);cursor:pointer;white-space:nowrap;transition:all 0.2s}
.sdb-filter-pill:hover{border-color:var(--color-primary);color:var(--color-primary)}
.sdb-filter-pill.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.sdb-results-count{font-size:0.92rem;color:var(--color-text-muted);margin:0}
.sdb-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sdb-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.sdb-table thead{background:var(--color-primary);color:#fff}
.sdb-table thead th{padding:12px 16px;font-size:0.88rem;font-weight:600;text-align:left;white-space:nowrap}
.sdb-table tbody tr{border-bottom:1px solid #eee;transition:background 0.15s}
.sdb-table tbody tr:last-child{border-bottom:none}
.sdb-table tbody tr:hover{background:var(--color-bg-alt)}
.sdb-table td{padding:12px 16px;font-size:0.92rem;color:var(--color-text-light);vertical-align:middle}
.sdb-name{font-weight:600;color:var(--color-text);min-width:200px}
.sdb-sku{font-family:monospace;font-size:0.85rem;white-space:nowrap}
.sdb-download-link{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;font-size:0.85rem;font-weight:600;font-family:var(--font-button);color:var(--color-accent);background:rgba(217,146,85,0.08);border:1.5px solid var(--color-accent);border-radius:var(--radius-sm);text-decoration:none;transition:all 0.2s;white-space:nowrap}
.sdb-download-link:hover{background:var(--color-accent);color:#fff}
.sdb-download-link svg{stroke:currentColor}
.sdb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--color-text-muted)}
.sdb-empty h3{margin:16px 0 8px;font-size:1.1rem;color:var(--color-text-light)}
.sdb-empty p{font-size:0.95rem}
.sdb-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--color-text-muted)}
.sdb-spinner{width:36px;height:36px;border:3px solid var(--color-primary-lighter);border-top-color:var(--color-primary);border-radius:50%;animation:sdb-spin 0.8s linear infinite;margin-bottom:16px}
@keyframes sdb-spin{to{transform:rotate(360deg)}
}
@media (max-width:768px){.sdb-filters{flex-wrap:nowrap;overflow-x:auto}
.sdb-table thead{display:none}
.sdb-table,.sdb-table tbody,.sdb-table tr,.sdb-table td{display:block}
.sdb-table tbody tr{padding:16px;margin-bottom:12px;border-radius:var(--radius-md);border:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;box-shadow:var(--shadow-card);background:#fff}
.sdb-table td{padding:4px 0;border:none}
.sdb-table td::before{content:attr(data-label);display:block;font-size:0.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.sdb-name{min-width:0;font-size:1rem;margin-bottom:4px}
.sdb-download{margin-top:8px}
.sdb-download-link{display:inline-flex;width:auto}
}
@media (max-width:480px){.sdb-search-input{font-size:0.95rem;padding:12px 12px 12px 44px}
.sdb-filter-pill{font-size:0.82rem;padding:5px 12px}
}
@media print{.site-header,.hamburger,.nav-overlay,.skip-link,.wave-divider,.btn,.contact-form-wrap,.section-cta,.brand-carousel-section,footer{display:none !important}
body{font-size:12pt;color:#000;background:#fff}
.container{max-width:100%;padding:0}
.section{padding:20px 0;background:#fff !important}
a{color:#000;text-decoration:underline}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:0.8em;color:#666}
h1,h2,h3{color:#000;page-break-after:avoid}
img{max-width:100%}
}
.spring-hero{background:linear-gradient(135deg,#4a8a8f 0%,#7bb5b8 35%,#9ecbcf 60%,#c8e4e6 100%);position:relative;overflow:hidden}
.spring-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,rgba(255,255,255,0.15) 0%,transparent 60%);pointer-events:none}
.spring-hero-accent{display:block;font-size:0.55em;font-weight:400;opacity:0.85;margin-top:8px}
.spring-hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.btn-spring{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:#fff;color:var(--color-accent);border-radius:12px;font-weight:600;font-size:0.95rem;text-decoration:none;transition:all 0.3s;box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.btn-spring:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.btn-outline-spring{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);border-radius:12px;font-weight:500;font-size:0.95rem;text-decoration:none;transition:all 0.3s}
.btn-outline-spring:hover{border-color:#fff;background:rgba(255,255,255,0.1)}
.spring-stats-section{background:#fff;padding:48px 0}
.spring-stats-section .eco-stat-number{color:var(--color-accent)}
.spring-stats-section .eco-stat-label{color:#64748b}
.spring-checklist-section{background:var(--color-bg-alt)}
.spring-check{background:var(--color-accent) !important}
.spring-cats-section{background:#fff}
.spring-cat-card{border-color:var(--color-primary-lighter)}
.spring-cat-card:hover,.spring-cat-card.active{border-color:var(--color-accent);box-shadow:0 8px 28px rgba(217,146,85,0.15)}
.spring-cat-img{width:90px;height:90px;margin:0 auto 14px;border-radius:50%;overflow:hidden;border:3px solid var(--color-primary-lighter);transition:border-color 0.3s}
.spring-cat-card:hover .spring-cat-img,.spring-cat-card.active .spring-cat-img{border-color:var(--color-accent)}
.spring-cat-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:768px){.spring-hero-actions{flex-direction:column;align-items:stretch}
.btn-spring,.btn-outline-spring{text-align:center;justify-content:center}
}
.shop-cat-sidebar{width:220px;flex-shrink:0}
.shop-cat-sidebar .shop-sidebar-toggle{display:none}
.shop-cat-sidebar-content{position:sticky;top:80px}
.shop-cat-sidebar-title{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);margin-bottom:8px}
.shop-cat-sidebar-list{list-style:none;padding:0;margin:0 0 8px}
.shop-cat-sidebar-list li{margin-bottom:2px}
.shop-cat-sidebar-list a{display:block;padding:7px 12px;font-size:0.85rem;color:var(--color-text-light);text-decoration:none;border-radius:6px;transition:all 0.15s}
.shop-cat-sidebar-list a:hover{background:var(--color-bg-alt);color:var(--color-text)}
.shop-cat-sidebar-list a.active{background:var(--color-accent);color:#fff;font-weight:500}
.shop-cat-eco{color:#2d6a4f !important}
.shop-cat-spring{color:#4a8a8f !important}
@media (max-width:768px){.shop-cat-sidebar{width:100%;margin-bottom:16px}
.shop-cat-sidebar .shop-sidebar-toggle{display:flex}
.shop-cat-sidebar-content{display:none;position:static;padding:16px;background:var(--color-bg-alt);border-radius:var(--radius-md);margin-top:8px}
.shop-cat-sidebar.open .shop-cat-sidebar-content{display:block}
}
.auth-header-btn{display:flex;align-items:center;flex-shrink:0;white-space:nowrap}
.auth-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-button);font-size:0.85rem;font-weight:500;color:var(--color-text);text-decoration:none;cursor:pointer;background:none;border:none;padding:6px 12px;border-radius:var(--radius-sm);transition:background 0.2s,color 0.2s;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.auth-link:hover{background:var(--color-bg-alt);color:var(--color-accent)}
.auth-link svg{flex-shrink:0}
.login-modal{display:none;position:fixed;inset:0;z-index:10000}
.login-modal--visible{display:flex;align-items:center;justify-content:center}
.login-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)}
.login-modal__content{position:relative;background:#fff;border-radius:var(--radius-lg);padding:40px;max-width:420px;width:90%;box-shadow:var(--shadow-lg);animation:loginFadeIn 0.2s ease}
@keyframes loginFadeIn{from{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}
.login-modal__close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:24px;color:#999;cursor:pointer;padding:4px 8px;line-height:1}
.login-modal__close:hover{color:#333}
.login-modal__header h2{margin:0 0 8px;font-size:1.4rem;color:var(--color-text)}
.login-modal__header p{margin:0 0 24px;font-size:0.9rem;color:var(--color-text-muted)}
.login-modal__field{margin-bottom:20px}
.login-modal__field label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;color:var(--color-text-light)}
.login-modal__field input{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:var(--radius-sm);font-size:1rem;font-family:var(--font-body);transition:border-color 0.2s;box-sizing:border-box}
.login-modal__field input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(156,177,180,0.2)}
.login-modal__submit{width:100%;padding:14px 24px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-button);font-size:1rem;font-weight:500;cursor:pointer;transition:background 0.2s}
.login-modal__submit:hover:not(:disabled){background:var(--color-accent-hover)}
.login-modal__submit:disabled{opacity:0.6;cursor:not-allowed}
.login-modal__message{margin-top:16px;padding:12px 16px;border-radius:var(--radius-sm);font-size:0.9rem;line-height:1.5}
.login-modal__message--success{background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9}
.login-modal__message--error{background:#fbe9e7;color:#c62828;border:1px solid #ffccbc}
.login-modal__footer{margin-top:20px;padding-top:16px;border-top:1px solid #eee}
.login-modal__footer p{font-size:0.8rem;color:var(--color-text-muted);margin:0}
@keyframes shimmer{0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.skeleton-loader{padding:20px 0;animation:kontoFadeUp 0.3s ease-out}
.skeleton-banner{height:100px;border-radius:16px;background:linear-gradient(90deg,#e8ecee 25%,#f0f4f5 50%,#e8ecee 75%);background-size:800px 100%;animation:shimmer 1.5s infinite linear;margin-bottom:20px}
.skeleton-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.skeleton-stat{height:90px;border-radius:14px;background:linear-gradient(90deg,#e8ecee 25%,#f0f4f5 50%,#e8ecee 75%);background-size:800px 100%;animation:shimmer 1.5s infinite linear}
.skeleton-card{border-radius:14px;padding:24px;margin-bottom:16px;background:linear-gradient(90deg,#e8ecee 25%,#f0f4f5 50%,#e8ecee 75%);background-size:800px 100%;animation:shimmer 1.5s infinite linear;min-height:100px}
.skeleton-line{height:14px;border-radius:6px;background:rgba(255,255,255,0.6);margin-bottom:10px;width:80%}
.skeleton-line--title{height:18px;width:40%;margin-bottom:14px}
.skeleton-line--short{width:50%}
@keyframes kontoFadeUp{from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}
.konto-layout{max-width:960px;margin:0 auto;padding:40px 24px}
.konto-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;animation:kontoFadeUp 0.5s ease-out}
.konto-header h1{font-size:1.6rem;margin:0}
.konto-welcome-banner{background:linear-gradient(135deg,#6b8a8e 0%,#8ea3a6 40%,#B8C8CB 100%);border-radius:16px;padding:32px 36px;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;color:#fff;position:relative;overflow:hidden;animation:kontoFadeUp 0.5s ease-out 0.1s both}
.konto-welcome-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,0.06);pointer-events:none}
.konto-welcome-banner::after{content:'';position:absolute;bottom:-40%;left:10%;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.04);pointer-events:none}
.konto-welcome-text{position:relative;z-index:1}
.konto-welcome-text h2{margin:0 0 6px;font-size:1.35rem;color:#fff;font-weight:600}
.konto-welcome-text p{margin:0;font-size:0.9rem;opacity:0.85}
.konto-welcome-actions{position:relative;z-index:1}
.konto-welcome-actions .konto-btn--primary{background:rgba(255,255,255,0.95);color:#5a7a7e;backdrop-filter:blur(4px);font-weight:600;box-shadow:0 2px 12px rgba(0,0,0,0.1)}
.konto-welcome-actions .konto-btn--primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.konto-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;animation:kontoFadeUp 0.5s ease-out 0.2s both}
.konto-stat-card{background:var(--color-bg-alt);border:1px solid rgba(0,0,0,0.04);border-radius:14px;padding:22px 20px;text-align:center;transition:transform 0.25s ease,box-shadow 0.25s ease;position:relative;overflow:hidden}
.konto-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));opacity:0;transition:opacity 0.3s}
.konto-stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.08)}
.konto-stat-card:hover::before{opacity:1}
.konto-stat-icon{width:48px;height:48px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-bg-alt),#d4e2e4);border-radius:14px;color:var(--color-primary)}
.konto-stat-value{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:4px;letter-spacing:-0.5px}
.konto-stat-label{font-size:0.72rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:500}
.konto-tabs{display:flex;gap:2px;background:#f0f2f3;border-radius:12px;padding:4px;margin-bottom:32px;overflow-x:auto;animation:kontoFadeUp 0.5s ease-out 0.3s both}
.konto-tab{padding:10px 20px;border:none;background:none;font-family:var(--font-button);font-size:0.82rem;font-weight:500;color:var(--color-text-muted);cursor:pointer;border-radius:10px;white-space:nowrap;transition:all 0.25s ease}
.konto-tab:hover{color:var(--color-text);background:rgba(255,255,255,0.5)}
.konto-tab.active{color:var(--color-text);background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.08);font-weight:600}
.konto-panel{display:none}
.konto-panel.active{display:block;animation:kontoFadeUp 0.35s ease-out}
.konto-card{background:var(--color-bg-alt);border:1px solid rgba(0,0,0,0.04);border-radius:14px;padding:28px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,0.03);transition:box-shadow 0.3s}
.konto-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.konto-card h3{margin:0 0 16px;font-size:1.05rem;font-weight:600}
.konto-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.konto-form-grid .full-width{grid-column:1 / -1}
.konto-field{display:flex;flex-direction:column;gap:6px}
.konto-field label{font-size:0.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.6px}
.konto-field input,.konto-field select{padding:12px 16px;border:1.5px solid #e0e4e5;border-radius:10px;font-size:0.95rem;font-family:var(--font-body);background:#fafbfc;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s}
.konto-field input:focus,.konto-field select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(156,177,180,0.15);background:#fff}
.konto-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:10px;font-family:var(--font-button);font-size:0.85rem;font-weight:500;cursor:pointer;border:none;transition:all 0.25s ease;text-decoration:none}
.konto-btn--primary{background:linear-gradient(135deg,var(--color-accent),#c68040);color:#fff;box-shadow:0 2px 8px rgba(217,146,85,0.25)}
.konto-btn--primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(217,146,85,0.35)}
.konto-btn--secondary{background:var(--color-bg-alt);color:var(--color-text)}
.konto-btn--secondary:hover{background:#c8d8db;transform:translateY(-1px)}
.konto-btn--danger{background:#fef2f0;color:#c62828}
.konto-btn--danger:hover{background:#fce4e0}
.konto-required-hint{font-size:0.8rem;color:var(--color-text-muted);margin:-4px 0 12px}
.konto-actions{display:flex;gap:12px;margin-top:24px;align-items:center}
.konto-address-list{display:grid;gap:16px}
.konto-address-card{border:1.5px solid rgba(0,0,0,0.04);border-radius:12px;padding:18px 20px;position:relative;transition:transform 0.2s,box-shadow 0.2s;background:var(--color-bg-alt)}
.konto-address-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.konto-address-card.standard{border-color:var(--color-primary);background:linear-gradient(135deg,rgba(156,177,180,0.04),rgba(156,177,180,0.08))}
.konto-address-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;margin-bottom:8px}
.konto-address-form{border:2px dashed #ddd;border-radius:var(--radius-sm);padding:20px;margin-top:8px;background:#fafbfc}
.merkliste-card{border:1.5px solid #e8eaeb;border-radius:14px;margin-bottom:16px;overflow:hidden;transition:box-shadow 0.2s}
.merkliste-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.merkliste-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:linear-gradient(135deg,#f9fafb,#f4f6f7);border-bottom:1px solid #eee}
.merkliste-header h4{margin:0;font-size:0.95rem}
.merkliste-header-actions{display:flex;gap:6px;flex-wrap:wrap}
.merkliste-items{padding:8px 16px}
.merkliste-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}
.merkliste-item:last-child{border-bottom:none}
.merkliste-item-info{flex:1;min-width:0}
.merkliste-item-info strong{font-size:0.85rem;display:block}
.merkliste-item-vpe,.merkliste-item-sku{font-size:0.75rem;color:var(--color-text-muted);margin-right:8px}
.merkliste-item-actions{display:flex;gap:4px;flex-shrink:0;align-items:center}.merkliste-item-cart{border:none;background:none;color:var(--color-text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .2s}.merkliste-item-cart:hover{color:var(--color-accent)}.merkliste-item-remove{border:none;background:none;color:var(--color-text-muted);cursor:pointer;padding:4px;font-size:1.1rem;line-height:1;display:flex;align-items:center;transition:color .2s}.merkliste-item-remove:hover{color:#e74c3c}.merkliste-btn-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border:1.5px solid var(--color-accent);border-radius:999px;background:none;color:var(--color-accent);font-size:.78rem;font-weight:500;font-family:var(--font-button);cursor:pointer;transition:all .2s}.merkliste-btn-pill:hover{background:var(--color-accent);color:#fff}
.konto-order-list{display:grid;gap:16px}
.konto-order-card{border:1.5px solid #e8eaeb;border-radius:12px;overflow:hidden;transition:box-shadow 0.2s}
.konto-order-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.konto-order-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#f9fafb,#f4f6f7);cursor:pointer;transition:background 0.2s}
.konto-order-header:hover{background:linear-gradient(135deg,#f0f4f5,#eaeff0)}
.konto-order-id{font-weight:600;color:var(--color-text)}
.konto-order-date{font-size:0.85rem;color:var(--color-text-muted)}
.konto-order-status{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.75rem;font-weight:600}
.konto-order-status--eingegangen{background:#e3f2fd;color:#1565c0}
.konto-order-status--in_bearbeitung{background:#fff3e0;color:#e65100}
.konto-order-status--versendet{background:#e8f5e9;color:#2e7d32}
.konto-order-status--abgeschlossen{background:#f5f5f5;color:#616161}.konto-order-status--bezahlt{background:#e8f5e9;color:#2e7d32}.konto-order-status--ausstehend{background:#fff8e1;color:#f9a825}.konto-order-status--fehlgeschlagen{background:#fce4ec;color:#c62828}
.konto-order-total{font-weight:700;font-size:1.05rem}
.konto-order-details{display:none;padding:0 20px 20px}
.konto-order-details.open{display:block}
.konto-order-table{width:100%;border-collapse:collapse;margin-top:12px}
.konto-order-table th,.konto-order-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #eee;font-size:0.9rem}
.konto-order-table th{background:#f9fafb;font-size:0.8rem;text-transform:uppercase;color:var(--color-text-muted)}
@media (max-width:768px){.konto-form-grid{grid-template-columns:1fr}
.konto-header{flex-direction:column;align-items:flex-start;gap:12px}
.konto-welcome-banner{flex-direction:column;gap:16px;padding:20px 24px;text-align:center}
.konto-dashboard{grid-template-columns:repeat(2,1fr);gap:10px}
.konto-stat-card{padding:14px}
.konto-stat-value{font-size:1.1rem}
.konto-tabs{gap:0}
.konto-tab{padding:8px 14px;font-size:0.8rem}
.konto-order-header{flex-wrap:wrap;gap:8px}
.login-modal__content{padding:28px 24px}
}
.checkout-layout{max-width:860px;margin:0 auto;padding:40px 24px}
.checkout-layout h1{font-size:1.6rem;margin:0 0 32px;animation:kontoFadeUp 0.4s ease-out}
.checkout-section{background:var(--color-bg-alt);border:1px solid rgba(0,0,0,0.04);border-radius:14px;padding:28px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,0.03);transition:box-shadow 0.3s}
.checkout-section:hover{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.checkout-section h2{font-size:1.05rem;font-weight:600;margin:0 0 18px;padding-bottom:14px;border-bottom:1.5px solid #f0f2f3;display:flex;align-items:center;gap:8px}
.checkout-address-select{display:grid;gap:12px;margin-bottom:16px}
.checkout-address-option{border:2px solid #e8eaeb;border-radius:12px;padding:16px;cursor:pointer;transition:all 0.25s ease}
.checkout-address-option:hover{border-color:var(--color-primary-light);transform:translateY(-1px)}
.checkout-address-option.selected{border-color:var(--color-primary);background:linear-gradient(135deg,rgba(156,177,180,0.04),rgba(156,177,180,0.08));box-shadow:0 2px 8px rgba(156,177,180,0.15)}
.checkout-delivery-option{padding:16px 20px;margin:16px 0;background:#f8f9fa;border:1px solid #e9ecef;border-radius:var(--radius-sm)}
.checkout-delivery-option--info{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:#e67e22}
.checkout-delivery-title{font-weight:600;font-size:0.95rem;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.checkout-delivery-hint{font-size:0.82rem;color:var(--color-text-muted);margin:0 0 12px}
.checkout-delivery-radio{display:flex;align-items:flex-start;gap:10px;padding:12px;margin-bottom:8px;border:2px solid #e9ecef;border-radius:var(--radius-sm);cursor:pointer;transition:border-color 0.2s,background 0.2s}
.checkout-delivery-radio:last-child{margin-bottom:0}
.checkout-delivery-radio.selected{border-color:var(--color-primary);background:rgba(156,177,180,0.06)}
.checkout-delivery-radio:hover{border-color:var(--color-primary-light)}
.checkout-delivery-radio input[type="radio"]{margin-top:3px;flex-shrink:0;accent-color:var(--color-primary)}
.checkout-delivery-radio div{flex:1}
.checkout-delivery-radio strong{display:block;font-size:0.9rem;margin-bottom:2px}
.checkout-delivery-radio span{font-size:0.8rem;color:var(--color-text-muted);line-height:1.3}
.checkout-payment-options{display:grid;gap:12px}
.checkout-payment-option{border:2px solid #eee;border-radius:var(--radius-sm);padding:16px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color 0.2s}
.checkout-payment-option.selected{border-color:var(--color-primary);background:linear-gradient(135deg,rgba(156,177,180,0.04),rgba(156,177,180,0.08));box-shadow:0 2px 8px rgba(156,177,180,0.15)}
.checkout-payment-option.disabled{opacity:0.4;cursor:not-allowed}
.checkout-radio{width:20px;height:20px;border-radius:50%;border:2px solid #ccc;flex-shrink:0;margin-top:2px;transition:all .2s;position:relative}.checkout-radio.checked{border-color:var(--color-accent);background:var(--color-accent)}.checkout-radio.checked::after{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#fff}.checkout-payment-option:hover .checkout-radio,.checkout-address-option:hover .checkout-radio{border-color:var(--color-accent)}
.checkout-payment-label{font-weight:600}
.checkout-payment-desc{font-size:0.85rem;color:var(--color-text-muted)}
.checkout-summary-table{width:100%;border-collapse:collapse}
.checkout-summary-table td{padding:10px 0;border-bottom:1px solid #f0f2f3}
.checkout-summary-table .checkout-total-row td{border-top:2px solid var(--color-text);border-bottom:none;font-weight:700;font-size:1.15rem;padding-top:14px;color:var(--color-text)}
.checkout-items-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.checkout-items-table th,.checkout-items-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #eee;font-size:0.9rem}
.checkout-items-table th{background:#f9fafb;font-size:0.8rem;text-transform:uppercase;color:var(--color-text-muted)}
.checkout-legal{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:0.85rem}
.checkout-legal input[type="checkbox"]{margin-top:3px;flex-shrink:0}
.checkout-submit-btn{width:100%;padding:18px 32px;background:linear-gradient(135deg,var(--color-accent),#c68040);color:#fff;border:none;border-radius:12px;font-family:var(--font-button);font-size:1.05rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;margin-top:16px;box-shadow:0 4px 16px rgba(217,146,85,0.3);letter-spacing:0.3px}
.checkout-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,146,85,0.4)}
.checkout-submit-btn:active:not(:disabled){transform:translateY(0)}
.checkout-submit-btn:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none}
.checkout-msg{margin-top:12px;padding:12px 16px;border-radius:var(--radius-sm);font-size:0.9rem}
.checkout-msg--error{background:#fbe9e7;color:#c62828}
.checkout-msg--success{background:#e8f5e9;color:#2e7d32}
.checkout-savings{margin-top:12px;padding:10px 16px;background:#e8f5e9;border-radius:var(--radius-sm);color:#2e7d32;font-weight:600;font-size:0.9rem;text-align:center}
.checkout-delivery{margin-top:8px;font-size:0.82rem;color:var(--color-text-muted);text-align:center}
.checkout-trust-badges{display:flex;justify-content:center;gap:12px;padding:20px 16px;margin-bottom:20px;background:linear-gradient(135deg,rgba(156,177,180,0.06),rgba(156,177,180,0.02));border-radius:12px}
.checkout-trust-badge{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--color-text-muted);font-weight:500;padding:6px 12px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.checkout-trust-badge svg{color:var(--color-primary);flex-shrink:0}
.checkout-section{animation:checkoutFadeIn 0.4s ease both}
.checkout-section:nth-child(2){animation-delay:0.05s}
.checkout-section:nth-child(3){animation-delay:0.1s}
.checkout-section:nth-child(4){animation-delay:0.15s}
.checkout-section:nth-child(5){animation-delay:0.2s}
.checkout-section:nth-child(6){animation-delay:0.25s}
@keyframes checkoutFadeIn{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
.checkout-progress-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.checkout-progress-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eee;border-radius:var(--radius-md);padding:14px 18px}
.checkout-progress-item.checkout-progress-done{background:#f0faf0;border-color:#c8e6c9}
.checkout-progress-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-alt);border-radius:50%;color:var(--color-text-muted)}
.checkout-progress-done .checkout-progress-icon{background:#e8f5e9;color:#27ae60}
.checkout-progress-content{flex:1;min-width:0}
.checkout-progress-text{font-size:0.85rem;color:var(--color-text-light);margin-bottom:6px}
.checkout-progress-bar{height:5px;background:#eee;border-radius:3px;overflow:hidden}
.checkout-progress-fill{height:100%;background:var(--color-accent);border-radius:3px;transition:width 0.4s ease}
.checkout-progress-done .checkout-progress-fill{background:#27ae60}
.checkout-progress-bar--discount .checkout-progress-fill{background:var(--color-primary)}
.checkout-items-list{display:flex;flex-direction:column;gap:0}
.checkout-item-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-bottom:1px solid #f0f2f3;border-radius:8px;transition:background 0.2s}
.checkout-item-row:hover{background:rgba(156,177,180,0.03)}
.checkout-item-row:last-child{border-bottom:none}
.checkout-item-img{width:60px;height:60px;border-radius:10px;object-fit:contain;background:#f9fafb;flex-shrink:0;border:1px solid #f0f0f0}
.checkout-item-img--placeholder{background:linear-gradient(135deg,#f0f0f0,#e8e8e8)}
.checkout-item-info{flex:1;min-width:0}
.checkout-item-name{font-weight:600;font-size:0.9rem;line-height:1.3}
.checkout-item-vpe{font-size:0.78rem;color:var(--color-text-muted);margin-top:2px}
.checkout-item-qty{flex-shrink:0;text-align:center}
.checkout-item-qty .cart-item-qty{display:inline-flex;align-items:center;border:1px solid #ddd;border-radius:6px;overflow:hidden}
.checkout-item-qty .cart-item-qty button{width:28px;height:28px;border:none;background:#f5f5f5;cursor:pointer;font-size:0.9rem;display:flex;align-items:center;justify-content:center;transition:background 0.15s}
.checkout-item-qty .cart-item-qty button:hover{background:#e8e8e8}
.checkout-item-qty .cart-item-qty span{width:30px;text-align:center;font-size:0.85rem;font-weight:600}
.checkout-item-remove{background:none;border:none;color:#ccc;font-size:1rem;cursor:pointer;padding:4px 6px;flex-shrink:0;border-radius:4px;transition:color 0.2s,background 0.2s}
.checkout-item-remove:hover{color:#dc3545;background:rgba(220,53,69,0.06)}
.checkout-item-price{text-align:right;flex-shrink:0;min-width:80px}
.checkout-item-unit{font-size:0.78rem;color:var(--color-text-muted)}
.checkout-item-total{font-weight:600;font-size:0.9rem}
.checkout-upsell-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.checkout-upsell-card{background:#f9fafb;border:1px solid #eee;border-radius:var(--radius-sm);padding:12px;text-align:center;cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s}
.checkout-upsell-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-card)}
.checkout-upsell-img{width:80px;height:80px;margin:0 auto 8px}
.checkout-upsell-img img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.checkout-upsell-placeholder{width:100%;height:100%;background:#eee;border-radius:4px}
.checkout-upsell-name{font-size:0.78rem;font-weight:500;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.checkout-upsell-price{font-size:0.8rem;font-weight:600;color:var(--color-accent);margin-bottom:6px}
.checkout-upsell-btn{background:var(--color-accent);color:#fff;border:none;border-radius:4px;padding:5px 10px;font-size:0.72rem;font-family:var(--font-button);font-weight:500;cursor:pointer;transition:background 0.2s}
.checkout-upsell-btn:hover{background:var(--color-accent-hover)}
.checkout-upsell-btn--added{background:#27ae60}
@media (max-width:768px){.checkout-layout{padding:20px 16px}
.checkout-section{padding:16px}
.checkout-upsell-grid{grid-template-columns:repeat(2,1fr)}
.checkout-item-img{width:48px;height:48px}
.checkout-item-price{min-width:60px}
.checkout-progress-item{padding:10px 14px}
.checkout-trust-badges{flex-wrap:wrap;gap:10px}
}