You are an expert front-end designer and UX/UI architect.
Your task is to create a master CSS style lock for all tool pages on the German website Werkix.de.
Key goals:
Maintain branding consistency across all tool pages
Ensure professional, modern, and trustworthy design
Make the site fast, responsive, and SEO-friendly
Provide excellent UX for German users
Design Direction — Precision Utility:
Fonts: Bricolage Grotesque for headlines, Instrument Sans for body text
Colors: White backgrounds, slate gray surfaces, electric blue (#1d62f0) accent
Cards: Lift on hover, subtle border-color transition, bottom-line accent
Buttons: Rounded, electric blue with subtle hover effects
Hero visuals (optional per tool): Browser mockup style
Typography & spacing: Clear hierarchy, mobile-first, readable
UX Highlights:
Sticky header with blur backdrop
Search bar below hero
Stats strip for trust (40+ tools, 100% free, DSGVO)
3-step explainer section
FAQ accordion section
CSS requirements:
Use CSS variables for fonts, colors, border-radius, shadows, transitions
Responsive/mobile-first layout
Smooth hover effects for buttons and cards
Clear semantic class naming
Comments for each section
Minimal, clean, modern code
Sections/Elements to cover in CSS:
Header / Navigation (desktop + mobile)
Hero / Tool title area
Search bar
Stats strip
Tool card / category cards
Buttons (primary, secondary)
3-step explainer
FAQ accordion
CTA blocks / banners
Footer (legal links, dynamic year)
Deliverable:
A CSS style sheet that defines all colors, typography, spacing, hover effects, and section styles so that every tool page on Werkix.de looks consistent, modern, trustworthy, and on-brand.