/* ============================================================ VERHUISOFFERTES.NL — Design System & Stylesheet Production-ready CSS — No frameworks,pure modern CSS ============================================================ */ /* ──────────────────────────────────────────────────────────── 0. GOOGLE FONTS (Loaded via tags in HTML — no @import needed) ──────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────── 1. CUSTOM PROPERTIES (Design Tokens) ──────────────────────────────────────────────────────────── */ :root{/* Brand colours */ --color-primary:#C8E600;--color-primary-dark:#a8c200;--color-primary-rgb:200,230,0;/* Dark palette */ --color-dark:#0d1b2a;--color-dark-secondary:#1b2838;/* Accent */ --color-accent:#00D4AA;/* Neutrals */ --color-text:#1a1a2e;--color-text-gray:#6b7280;--color-light-bg:#f8f9fa;--color-white:#ffffff;--color-border:#e5e7eb;/* Typography */ --font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:12px;--font-size-sm:14px;--font-size-base:16px;--font-size-md:18px;--font-size-lg:20px;--font-size-xl:24px;--font-size-2xl:32px;--font-size-3xl:36px;--font-size-4xl:48px;--line-height:1.6;/* Spacing */ --spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;--spacing-4xl:80px;--section-padding:80px 0;/* Layout */ --container-max:1200px;--container-padding:0 24px;/* Radii */ --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;/* Shadows */ --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 32px rgba(0,0,0,0.12);--shadow-xl:0 12px 48px rgba(0,0,0,0.16);/* Transitions */ --transition:0.3s ease;--transition-fast:0.15s ease;/* Z-index layers */ --z-dropdown:100;--z-sticky:200;--z-header:500;--z-overlay:800;--z-modal:900;--z-cookie:1000} /* ──────────────────────────────────────────────────────────── 2. CSS RESET & BASE ──────────────────────────────────────────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} img,svg{display:block;max-width:100%;height:auto} a{text-decoration:none;color:inherit;transition:color var(--transition)} ul,ol{list-style:none} button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;border:none;outline:none;background:none} button{cursor:pointer} /* ──────────────────────────────────────────────────────────── 3. TYPOGRAPHY ──────────────────────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6{color:var(--color-text);line-height:1.2;margin-bottom:var(--spacing-md)} h1{font-size:var(--font-size-4xl);font-weight:800;letter-spacing:-0.02em} h2{font-size:var(--font-size-3xl);font-weight:700;letter-spacing:-0.01em} h3{font-size:var(--font-size-xl);font-weight:600} h4{font-size:var(--font-size-lg);font-weight:600} p{margin-bottom:var(--spacing-md);color:var(--color-text-gray)} .text-sm{font-size:var(--font-size-sm)} .text-lg{font-size:var(--font-size-md)} .text-center{text-align:center} .text-white{color:var(--color-white)} .section-subtitle{font-size:var(--font-size-md);color:var(--color-text-gray);max-width:640px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:var(--spacing-2xl)} /* Section header accent bar */ .section-header h2{position:relative;display:inline-block} .section-header.text-center h2::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:2px;margin:var(--spacing-md) auto 0} /* Badge label above headings */ .badge{display:inline-block;font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-primary-dark);background:rgba(var(--color-primary-rgb),0.12);padding:6px 16px;border-radius:var(--radius-full);margin-bottom:var(--spacing-md)} /* ──────────────────────────────────────────────────────────── 4. LAYOUT — Container & Grid Utilities ──────────────────────────────────────────────────────────── */ .container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding:var(--container-padding)} section{padding:var(--section-padding)} .grid{display:grid;gap:var(--spacing-lg)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center} .flex-between{display:flex;align-items:center;justify-content:space-between} /* ──────────────────────────────────────────────────────────── 5. BUTTONS ──────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:12px 28px;font-weight:600;font-size:var(--font-size-base);border-radius:var(--radius-md);transition:all var(--transition);white-space:nowrap;cursor:pointer;border:2px solid transparent;line-height:1.4} .btn-primary{background-color:var(--color-primary);color:var(--color-dark);border-color:var(--color-primary)} .btn-primary:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(var(--color-primary-rgb),0.35)} .btn-primary:active{transform:translateY(0)} .btn-secondary{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)} .btn-secondary:hover{background-color:var(--color-primary);color:var(--color-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(var(--color-primary-rgb),0.25)} .btn-secondary:active{transform:translateY(0)} .btn-large{padding:16px 40px;font-size:var(--font-size-md);border-radius:var(--radius-md)} .btn-white{background-color:var(--color-white);color:var(--color-dark);border-color:var(--color-white)} .btn-white:hover{background-color:var(--color-light-bg);border-color:var(--color-light-bg);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,0.25)} .btn-white:active{transform:translateY(0)} .btn-block{display:flex;width:100%} /* ──────────────────────────────────────────────────────────── 6. HEADER / NAVIGATION ──────────────────────────────────────────────────────────── */ .header{position:fixed;top:0;left:0;width:100%;z-index:var(--z-header);background-color:var(--color-dark);transition:background-color var(--transition),box-shadow var(--transition)} .header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.3)} .header .container{display:flex;align-items:center;justify-content:space-between;height:72px} /* Logo */ .logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-lg);font-weight:700;color:var(--color-white);z-index:var(--z-header)} .logo img{height:40px;width:auto} /* Desktop nav */ .nav{display:flex;align-items:center;gap:var(--spacing-xl)} .nav-links{display:flex;align-items:center;gap:var(--spacing-lg)} .nav-links a{color:rgba(255,255,255,0.8);font-size:var(--font-size-sm);font-weight:500;padding:var(--spacing-sm) 0;position:relative;transition:color var(--transition)} .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--color-primary);transition:width var(--transition)} .nav-links a:hover,.nav-links a.active{color:var(--color-white)} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-cta{margin-left:var(--spacing-sm)} /* Hamburger */ .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px;cursor:pointer;z-index:var(--z-header);background:none;border:none;padding:0} .hamburger span{display:block;width:100%;height:2px;background-color:var(--color-white);border-radius:2px;transition:all var(--transition);transform-origin:center} .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.active span:nth-child(2){opacity:0} .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile nav overlay */ .mobile-nav{display:none;position:fixed;inset:0;background-color:var(--color-dark);z-index:calc(var(--z-header) - 1);flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xl);opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition)} .mobile-nav.open{opacity:1;visibility:visible} .mobile-nav a{color:var(--color-white);font-size:var(--font-size-xl);font-weight:600;transition:color var(--transition)} .mobile-nav a:hover{color:var(--color-primary)} /* Spacer to offset fixed header */ .header-spacer{height:72px} /* Nav phone number */ .nav-phone{color:rgba(255,255,255,0.8);font-size:var(--font-size-sm);font-weight:500;transition:color var(--transition)} .nav-phone:hover{color:var(--color-primary)} /* Nav actions wrapper */ .nav-actions{display:flex;align-items:center;gap:var(--spacing-lg)} /* ──────────────────────────────────────────────────────────── 7. HERO SECTION ──────────────────────────────────────────────────────────── */ .hero{position:relative;padding:120px 0 100px;background:linear-gradient(135deg,rgba(13,27,42,0.82) 0%,rgba(27,40,56,0.78) 50%,rgba(15,34,51,0.82) 100%),url('../images/hero-main.webp') 30% center / cover no-repeat;overflow:hidden;min-height:600px;display:flex;align-items:center} .hero::before{content:'';position:absolute;top:-40%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(var(--color-primary-rgb),0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none} .hero::after{content:'';position:absolute;bottom:-20%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(0,212,170,0.06) 0%,transparent 70%);border-radius:50%;pointer-events:none} .hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 0.7fr;gap:var(--spacing-2xl);align-items:center} .hero-content{max-width:560px} .hero-content h1{color:var(--color-white);margin-bottom:var(--spacing-lg);font-size:clamp(32px,4vw,48px)} .hero-content h1 span{color:var(--color-primary)} .hero-content p{color:rgba(255,255,255,0.75);font-size:var(--font-size-md);margin-bottom:var(--spacing-xl);max-width:480px} .hero-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-lg)} .hero-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);color:rgba(255,255,255,0.7);font-size:var(--font-size-sm);font-weight:500} .hero-badge .icon{color:var(--color-primary);font-size:var(--font-size-md)} /* Hero form card */ .hero-form-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-lg) var(--spacing-xl);box-shadow:0 20px 60px rgba(0,0,0,0.25);position:relative;border:1px solid rgba(255,255,255,0.1)} .hero-form-card h2{color:var(--color-text);font-size:24px;margin-bottom:var(--spacing-xs)} .hero-form-card .form-subtitle{color:var(--color-text-gray);font-size:var(--font-size-sm);margin-bottom:var(--spacing-lg)} .hero-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)} .hero-form .form-group{margin-bottom:var(--spacing-md)} .hero-form .btn-primary{width:100%;padding:14px;font-size:var(--font-size-base);margin-top:var(--spacing-sm)} /* ──────────────────────────────────────────────────────────── 8. FORM ELEMENTS ──────────────────────────────────────────────────────────── */ .form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)} .form-group label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text)} .form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-white);transition:border-color var(--transition),box-shadow var(--transition)} .form-group input::placeholder,.form-group textarea::placeholder{color:#9ca3af} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.15)} .form-group textarea{resize:vertical;min-height:120px} .form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 1 1 .708.708l-4 4A.5.5 0 0 1 6 8.825Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:40px} .form-group .error-message{font-size:var(--font-size-xs);color:#ef4444;display:none} .form-group.error input,.form-group.error select,.form-group.error textarea{border-color:#ef4444} .form-group.error .error-message{display:block} .form-group.success input,.form-group.success select,.form-group.success textarea{border-color:#22c55e} .form-disclaimer{font-size:var(--font-size-xs);color:var(--color-text-gray);margin-top:var(--spacing-sm);line-height:1.5} .form-disclaimer a{color:var(--color-primary-dark);text-decoration:underline} /* Form row (two columns side-by-side) */ .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)} .form-row .form-group{margin-bottom:0} /* Hero form card form groups */ .hero-form-card .form-group{margin-bottom:var(--spacing-sm)} .hero-form-card .form-group label{font-size:var(--font-size-sm);margin-bottom:4px} .hero-form-card .form-group input,.hero-form-card .form-group textarea,.hero-form-card .form-group select{padding:10px 14px;font-size:var(--font-size-sm)} .hero-form-card .form-group textarea{min-height:70px} .hero-form-card .btn-block{margin-top:var(--spacing-sm)} /* ──────────────────────────────────────────────────────────── 8b. PROBLEEM & HERKENNING SECTIE ──────────────────────────────────────────────────────────── */ .section-problem{background-color:var(--color-white);position:relative;overflow:hidden} .section-problem::before{content:'';position:absolute;top:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(var(--color-primary-rgb),0.04) 0%,transparent 70%);border-radius:50%;pointer-events:none} .problem-grid{display:grid;grid-template-columns:1.4fr 0.6fr;gap:var(--spacing-3xl);align-items:center} .problem-content h2{margin-bottom:var(--spacing-lg);font-size:var(--font-size-2xl);line-height:1.3} .problem-content p{font-size:var(--font-size-md);line-height:1.8;margin-bottom:var(--spacing-md);color:var(--color-text)} .problem-stats{display:flex;flex-direction:column;gap:var(--spacing-lg)} .problem-stat{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;border-left:4px solid var(--color-primary);box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition)} .problem-stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .problem-stat-number{display:block;font-size:var(--font-size-3xl);font-weight:800;background:linear-gradient(135deg,var(--color-dark) 0%,var(--color-dark-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-xs)} .problem-stat-label{font-size:var(--font-size-sm);color:var(--color-text-gray);line-height:1.4} /* ──────────────────────────────────────────────────────────── 9. USP / VOORDELEN SECTIE ──────────────────────────────────────────────────────────── */ .section-usp{background-color:var(--color-light-bg);position:relative} .section-usp::after{content:'';position:absolute;bottom:-80px;right:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(0,212,170,0.05) 0%,transparent 70%);border-radius:50%;pointer-events:none} .section-usp .section-header{text-align:center;margin-bottom:var(--spacing-2xl)} .usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)} .usp-card{background:var(--color-white);border-radius:var(--radius-lg);padding:0;text-align:center;box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition);border:1px solid var(--color-border);overflow:hidden;position:relative} .usp-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 var(--transition);z-index:1} .usp-card:hover::before{opacity:1} .usp-card-image{width:100%;height:160px;overflow:hidden} .usp-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease} .usp-card:hover .usp-card-image img{transform:scale(1.05)} .usp-card-body{padding:var(--spacing-xl)} .usp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .usp-card .icon-wrapper{width:64px;height:64px;border-radius:var(--radius-md);background-color:rgba(var(--color-primary-rgb),0.1);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md)} .usp-card .icon-wrapper img,.usp-card .icon-wrapper svg{width:32px;height:32px} .usp-card .icon-wrapper .icon{font-size:28px;color:var(--color-primary)} .usp-card h3{font-size:var(--font-size-md);margin-bottom:var(--spacing-sm);color:var(--color-text)} .usp-card p{font-size:var(--font-size-sm);color:var(--color-text-gray);margin-bottom:0} /* ──────────────────────────────────────────────────────────── 10. HOE HET WERKT — Stappen ──────────────────────────────────────────────────────────── */ .section-steps{background:linear-gradient(180deg,var(--color-white) 0%,var(--color-light-bg) 100%);position:relative} .section-steps .section-header{text-align:center;margin-bottom:var(--spacing-3xl)} .steps-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:0;position:relative;max-width:900px;margin:0 auto} .step{flex:1;text-align:center;position:relative;padding:0 var(--spacing-lg)} /* Connector line between steps */ .step:not(:last-child)::after{content:'';position:absolute;top:28px;left:calc(50%+36px);width:calc(100% - 72px);height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-border))} .step-number{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-dark);font-size:var(--font-size-xl);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-lg);position:relative;z-index:1;box-shadow:0 4px 16px rgba(var(--color-primary-rgb),0.3);transition:transform var(--transition),box-shadow var(--transition)} .step:hover .step-number{transform:scale(1.1);box-shadow:0 6px 24px rgba(var(--color-primary-rgb),0.4)} .step h3{font-size:var(--font-size-md);margin-bottom:var(--spacing-sm)} .step p{font-size:var(--font-size-sm);color:var(--color-text-gray);max-width:240px;margin:0 auto} .step .step-icon{margin:0 auto var(--spacing-sm);color:var(--color-text-gray)} /* ──────────────────────────────────────────────────────────── 11. STATISTIEKEN BALK ──────────────────────────────────────────────────────────── */ .section-stats{background:linear-gradient(135deg,var(--color-dark) 0%,#162640 50%,var(--color-dark-secondary) 100%);padding:var(--spacing-3xl) 0;position:relative;overflow:hidden} .section-stats::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(var(--color-primary-rgb),0.06) 0%,transparent 70%);pointer-events:none} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);text-align:center} .stat-item{padding:var(--spacing-lg);position:relative} /* Divider between stats */ .stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:48px;background-color:rgba(255,255,255,0.12)} .stat-number{font-size:clamp(32px,4vw,48px);font-weight:800;color:var(--color-primary);line-height:1.1;margin-bottom:var(--spacing-sm);display:block;text-shadow:0 0 40px rgba(var(--color-primary-rgb),0.3)} .stat-label{font-size:var(--font-size-sm);color:rgba(255,255,255,0.7);font-weight:500} /* ──────────────────────────────────────────────────────────── 11b. WAAROM ONS / WHY SECTION ──────────────────────────────────────────────────────────── */ .section-why{background:linear-gradient(180deg,var(--color-light-bg) 0%,var(--color-white) 100%);position:relative;overflow:hidden} .section-why::after{content:'';position:absolute;bottom:-100px;right:-50px;width:350px;height:350px;background:radial-gradient(circle,rgba(var(--color-primary-rgb),0.05) 0%,transparent 70%);border-radius:50%;pointer-events:none} .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:stretch} .why-content h2{margin-bottom:var(--spacing-md)} .why-content>p{font-size:var(--font-size-md);line-height:1.8;margin-bottom:var(--spacing-xl)} .check-list{list-style:none;padding:0;margin-bottom:var(--spacing-xl)} .check-list li{position:relative;padding-left:36px;margin-bottom:var(--spacing-md);font-size:var(--font-size-base);color:var(--color-text);line-height:1.6} .check-list li::before{content:'\2713';position:absolute;left:0;top:1px;width:24px;height:24px;background:rgba(var(--color-primary-rgb),0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary-dark);font-weight:700;font-size:var(--font-size-sm);text-align:center;line-height:24px} .why-visual{display:flex;align-items:stretch;justify-content:center} .why-visual img{width:100%;height:100%;min-height:450px;border-radius:16px;box-shadow:var(--shadow-lg);object-fit:cover;object-position:center center} /* ──────────────────────────────────────────────────────────── 12. CTA SECTIE ──────────────────────────────────────────────────────────── */ .section-cta{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 50%,#9ab300 100%);padding:var(--spacing-4xl) 0;text-align:center;position:relative;overflow:hidden} .section-cta::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none} .section-cta::after{content:'';position:absolute;bottom:-30%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none} .section-cta h2{color:var(--color-dark);margin-bottom:var(--spacing-md);position:relative} .section-cta p{color:var(--color-dark-secondary);font-size:var(--font-size-md);max-width:560px;margin:0 auto var(--spacing-xl);position:relative;opacity:0.8} .section-cta .btn{position:relative} /* ──────────────────────────────────────────────────────────── 12b. FOTO-BALK / PHOTO STRIP SECTIE ──────────────────────────────────────────────────────────── */ .section-photos{padding:var(--spacing-3xl) 0;background-color:var(--color-light-bg)} .section-photos .section-header{text-align:center;margin-bottom:var(--spacing-2xl)} .photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)} .photo-card{border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:4 / 3;box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition)} .photo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .photo-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease} .photo-card:hover img{transform:scale(1.05)} .photo-card-caption{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-lg) var(--spacing-md);background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%);color:var(--color-white);font-size:var(--font-size-sm);font-weight:600} /* ──────────────────────────────────────────────────────────── 13. FOOTER ──────────────────────────────────────────────────────────── */ .footer{background-color:var(--color-dark);padding:var(--spacing-3xl) 0 0;color:rgba(255,255,255,0.7)} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--spacing-2xl);padding-bottom:var(--spacing-2xl);border-bottom:1px solid rgba(255,255,255,0.08)} .footer-col h4{color:var(--color-white);font-size:var(--font-size-base);font-weight:600;margin-bottom:var(--spacing-lg)} .footer-col p{color:rgba(255,255,255,0.55);font-size:var(--font-size-sm);line-height:1.7;margin-bottom:var(--spacing-md)} .footer-col ul li{margin-bottom:var(--spacing-sm)} .footer-col ul li a{color:rgba(255,255,255,0.55);font-size:var(--font-size-sm);transition:color var(--transition),padding-left var(--transition)} .footer-col ul li a:hover{color:var(--color-primary);padding-left:4px} .footer-brand .logo{margin-bottom:var(--spacing-md);font-size:var(--font-size-md)} .footer-contact-item{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);color:rgba(255,255,255,0.55)} .footer-contact-item .icon{color:var(--color-primary);flex-shrink:0} .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) 0;font-size:var(--font-size-sm);color:rgba(255,255,255,0.4)} .footer-bottom-links{display:flex;gap:var(--spacing-lg)} .footer-bottom-links a{color:rgba(255,255,255,0.4);transition:color var(--transition)} .footer-bottom-links a:hover{color:var(--color-primary)} /* ──────────────────────────────────────────────────────────── 14. CONTACT PAGINA ──────────────────────────────────────────────────────────── */ .section-contact{background-color:var(--color-light-bg)} .contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:var(--spacing-2xl);align-items:stretch} .contact-form-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-md)} .contact-form-card h2{margin-bottom:var(--spacing-sm)} .contact-form-card>p{margin-bottom:var(--spacing-xl)} .contact-form .form-group{margin-bottom:var(--spacing-md)} .contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)} .contact-form .btn-primary{margin-top:var(--spacing-sm)} /* Contact info card */ .contact-info{display:flex;flex-direction:column;gap:var(--spacing-lg);height:100%} .contact-info>.contact-info-card:last-child{flex-grow:1;display:flex;flex-direction:column;justify-content:center} .contact-info-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:box-shadow var(--transition),transform var(--transition)} .contact-info-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .contact-info-card h3{margin-bottom:var(--spacing-lg)} .contact-info-item{display:flex;align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-md)} .contact-info-item:last-child{margin-bottom:0} .contact-info-item .icon-wrapper{width:44px;height:44px;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.15) 0%,rgba(var(--color-primary-rgb),0.05) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-info-item .icon-wrapper .icon{color:var(--color-primary);font-size:var(--font-size-lg)} .contact-info-item h4{font-size:var(--font-size-sm);font-weight:600;margin-bottom:2px} .contact-info-item p{font-size:var(--font-size-sm);color:var(--color-text-gray);margin-bottom:0} /* Contact image card */ .contact-image-card{padding:0;overflow:hidden} .contact-image-card img{width:100%;height:200px;object-fit:cover;display:block;border-radius:var(--radius-lg)} /* Map placeholder */ .contact-map{border-radius:var(--radius-lg);overflow:hidden;height:220px;background-color:var(--color-light-bg)} .contact-map iframe{width:100%;height:100%;border:0} /* ──────────────────────────────────────────────────────────── 14b. FAQ SECTION ──────────────────────────────────────────────────────────── */ .section-faq{padding:var(--spacing-3xl) 0;background:linear-gradient(180deg,var(--color-white) 0%,var(--color-light-bg) 100%)} .section-faq .section-header{text-align:center;margin-bottom:var(--spacing-2xl)} .section-faq .badge{display:inline-block;background:rgba(var(--color-primary-rgb),0.12);color:var(--color-primary-dark);font-size:var(--font-size-sm);font-weight:600;padding:6px 16px;border-radius:20px;margin-bottom:var(--spacing-sm)} .section-faq .section-header h2{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-text)} .faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-sm)} .faq-item{background:var(--color-white);border-radius:var(--radius-md);border:1.5px solid var(--color-border);overflow:hidden;transition:border-color 0.2s,box-shadow 0.2s;box-shadow:var(--shadow-sm)} .faq-item:hover{box-shadow:var(--shadow-md)} .faq-item[open]{border-color:var(--color-primary);box-shadow:0 4px 20px rgba(var(--color-primary-rgb),0.12)} .faq-item summary{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-base);font-weight:600;color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);list-style:none;user-select:none;transition:color var(--transition)} .faq-item summary:hover{color:var(--color-primary-dark)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-gray);flex-shrink:0;transition:transform 0.3s} .faq-item[open] summary::after{content:'\2212'} .faq-answer{padding:0 var(--spacing-xl) var(--spacing-lg);font-size:var(--font-size-sm);color:var(--color-text-gray);line-height:1.7} /* ──────────────────────────────────────────────────────────── 15. PRIVACY / JURIDISCHE PAGINA ──────────────────────────────────────────────────────────── */ .page-header{background:linear-gradient(135deg,var(--color-dark) 0%,var(--color-dark-secondary) 100%);padding:100px 0 60px;text-align:center;position:relative} .page-header--contact{background:linear-gradient(135deg,rgba(13,27,42,0.82) 0%,rgba(27,40,56,0.78) 100%),url('../images/section-mover-handshake.webp') center/cover no-repeat} .page-header h1{color:var(--color-white);margin-bottom:var(--spacing-sm)} .page-header p{color:rgba(255,255,255,0.6);font-size:var(--font-size-md)} .section-legal{padding:var(--spacing-3xl) 0} .legal-content{max-width:800px;margin:0 auto} .legal-content h2{font-size:var(--font-size-xl);margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary);display:inline-block} .legal-content h3{font-size:var(--font-size-md);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)} .legal-content p{font-size:var(--font-size-base);line-height:1.8;color:var(--color-text-gray);margin-bottom:var(--spacing-md)} .legal-content ul{list-style:disc;padding-left:var(--spacing-lg);margin-bottom:var(--spacing-md)} .legal-content ul li{font-size:var(--font-size-base);line-height:1.8;color:var(--color-text-gray);margin-bottom:var(--spacing-xs)} .legal-content a{color:var(--color-primary-dark);text-decoration:underline;transition:color var(--transition)} .legal-content a:hover{color:var(--color-accent)} /* ──────────────────────────────────────────────────────────── 16. CARDS — Generic ──────────────────────────────────────────────────────────── */ .card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:transform var(--transition),box-shadow var(--transition)} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .card-flat{box-shadow:none;border:1px solid var(--color-border)} .card-flat:hover{box-shadow:var(--shadow-md)} /* Form success card (generated by JS) */ .form-success-card{text-align:center;padding:var(--spacing-xl)} .form-success-card .success-icon{width:64px;height:64px;border-radius:50%;background-color:var(--color-primary);color:var(--color-dark);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md)} .form-success-card h3{color:var(--color-text);margin-bottom:var(--spacing-sm)} .form-success-card p{color:var(--color-text-gray)} .form-success-card .fallback-info{font-size:var(--font-size-sm);margin-top:var(--spacing-md)} .form-success-card .fallback-info a{color:var(--color-primary-dark);text-decoration:underline} /* Input invalid state */ input.invalid,textarea.invalid,select.invalid{border-color:#ef4444 !important} .error-message{font-size:var(--font-size-xs);color:#ef4444;margin-top:4px;display:block} /* ──────────────────────────────────────────────────────────── 16a. PRIVACY CHECKBOX ──────────────────────────────────────────────────────────── */ .form-group-checkbox{margin-top:0} .checkbox-label{display:flex;gap:8px;font-size:14px;cursor:pointer;color:var(--color-text-gray);align-items:flex-start} .checkbox-label input[type="checkbox"]{accent-color:var(--color-primary);width:18px;height:18px;flex-shrink:0;margin-top:2px} .checkbox-label a{color:var(--color-primary-dark);text-decoration:underline} /* ──────────────────────────────────────────────────────────── 16a2. BEDANKT (THANK YOU) PAGE ──────────────────────────────────────────────────────────── */ .section-bedankt{padding:var(--spacing-3xl) 0;background:var(--color-light-bg)} .bedankt-card{max-width:560px;margin:0 auto;background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-xl);box-shadow:var(--shadow-md);text-align:center} .bedankt-card .success-icon{width:80px;height:80px;border-radius:50%;background-color:#22c55e;color:var(--color-white);font-size:36px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-lg)} .bedankt-card h2{margin-bottom:var(--spacing-sm)} .bedankt-card p{color:var(--color-text-gray);margin-bottom:var(--spacing-md);line-height:1.7} .bedankt-card .btn{margin-top:var(--spacing-md)} /* ──────────────────────────────────────────────────────────── 16b. ERROR PAGE (404) ──────────────────────────────────────────────────────────── */ .error-page{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:140px 0 80px} .error-content .error-code{font-size:clamp(80px,15vw,160px);font-weight:800;color:var(--color-primary);line-height:1;margin-bottom:var(--spacing-md)} .error-content h2{margin-bottom:var(--spacing-md)} .error-content p{max-width:480px;margin:0 auto var(--spacing-xl)} .error-actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap} /* ──────────────────────────────────────────────────────────── 17. COOKIE BANNER ──────────────────────────────────────────────────────────── */ .cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-cookie);background-color:var(--color-dark);border-top:1px solid rgba(255,255,255,0.08);padding:var(--spacing-lg) 0} .cookie-banner .container{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)} .cookie-text{flex:1;color:rgba(255,255,255,0.75);font-size:var(--font-size-sm);line-height:1.6} .cookie-text a{color:var(--color-primary);text-decoration:underline} .cookie-actions{display:flex;gap:var(--spacing-sm);flex-shrink:0} .cookie-actions .btn{padding:10px 24px;font-size:var(--font-size-sm)} .btn-cookie-decline{background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-sm)} .btn-cookie-decline:hover{color:var(--color-white);border-color:rgba(255,255,255,0.4)} /* ──────────────────────────────────────────────────────────── 18. SCROLL ANIMATIONS (fade-in) ──────────────────────────────────────────────────────────── */ .fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease} .fade-in.visible{opacity:1;transform:translateY(0)} .fade-in-left{opacity:0;transform:translateX(-24px);transition:opacity 0.6s ease,transform 0.6s ease} .fade-in-left.visible{opacity:1;transform:translateX(0)} .fade-in-right{opacity:0;transform:translateX(24px);transition:opacity 0.6s ease,transform 0.6s ease} .fade-in-right.visible{opacity:1;transform:translateX(0)} /* Stagger children */ .stagger-children>*{opacity:0;transform:translateY(16px);transition:opacity 0.5s ease,transform 0.5s ease} .stagger-children.visible>*:nth-child(1){transition-delay:0.05s;opacity:1;transform:translateY(0)} .stagger-children.visible>*:nth-child(2){transition-delay:0.1s;opacity:1;transform:translateY(0)} .stagger-children.visible>*:nth-child(3){transition-delay:0.15s;opacity:1;transform:translateY(0)} .stagger-children.visible>*:nth-child(4){transition-delay:0.2s;opacity:1;transform:translateY(0)} /* ──────────────────────────────────────────────────────────── 19. UTILITY CLASSES ──────────────────────────────────────────────────────────── */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .mb-0{margin-bottom:0} .mb-sm{margin-bottom:var(--spacing-sm)} .mb-md{margin-bottom:var(--spacing-md)} .mb-lg{margin-bottom:var(--spacing-lg)} .mb-xl{margin-bottom:var(--spacing-xl)} .mb-2xl{margin-bottom:var(--spacing-2xl)} .mt-0{margin-top:0} .mt-sm{margin-top:var(--spacing-sm)} .mt-md{margin-top:var(--spacing-md)} .mt-lg{margin-top:var(--spacing-lg)} .mt-xl{margin-top:var(--spacing-xl)} .pt-0{padding-top:0} .pb-0{padding-bottom:0} .hidden{display:none} .bg-light{background-color:var(--color-light-bg)} .bg-dark{background-color:var(--color-dark)} .bg-white{background-color:var(--color-white)} /* ──────────────────────────────────────────────────────────── 19b. TESTIMONIALS SECTION ──────────────────────────────────────────────────────────── */ .section-testimonials{background-color:var(--color-white);padding:var(--section-padding)} .section-testimonials .section-header{margin-bottom:var(--spacing-2xl)} .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .testimonial-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition)} .testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .testimonial-stars{color:#f59e0b;font-size:20px;margin-bottom:16px} .testimonial-quote{font-size:var(--font-size-base);color:var(--color-text);line-height:1.7;font-style:italic;margin-bottom:16px;margin-top:0;padding:0;border:none} .testimonial-author strong{display:block;color:var(--color-text);font-size:var(--font-size-sm)} .testimonial-author span{color:var(--color-text-gray);font-size:var(--font-size-xs)} /* ──────────────────────────────────────────────────────────── 19c. WHATSAPP FLOATING BUTTON ──────────────────────────────────────────────────────────── */ .whatsapp-float{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,0.4);z-index:999;transition:transform 0.3s,box-shadow 0.3s;text-decoration:none} .whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(37,211,102,0.6)} /* ──────────────────────────────────────────────────────────── 19d. MOBILE CTA BAR ──────────────────────────────────────────────────────────── */ .mobile-cta-bar{display:none} /* ──────────────────────────────────────────────────────────── 20. RESPONSIVE — Tablet (max-width:1024px) ──────────────────────────────────────────────────────────── */ @media (max-width:1024px){:root{--font-size-4xl:40px;--font-size-3xl:30px;--section-padding:60px 0} .hero .container{grid-template-columns:1fr;gap:var(--spacing-2xl)} .hero-content{text-align:center;max-width:100%} .hero-content p{max-width:100%;margin-left:auto;margin-right:auto} .hero-badges{justify-content:center} .hero-form-card{max-width:520px;margin:0 auto} /* USP grid:4 -> 2 columns */ .usp-grid{grid-template-columns:repeat(2,1fr)} /* Stats:4 -> 2 columns */ .stats-grid{grid-template-columns:repeat(2,1fr)} .stat-item:nth-child(2)::after{display:none} /* Footer:4 -> 2 columns */ .footer-grid{grid-template-columns:repeat(2,1fr)} /* Problem grid:stack */ .problem-grid{grid-template-columns:1fr} .problem-stats{flex-direction:row} .problem-stat{flex:1} /* Contact grid:stack */ .contact-grid{grid-template-columns:1fr} /* Why grid:stack */ .why-grid{grid-template-columns:1fr} .why-visual{order:-1} /* Photos grid:3 -> 2 columns */ .photos-grid{grid-template-columns:repeat(2,1fr)} .photos-grid .photo-card:last-child{grid-column:1 / -1;max-width:50%;margin:0 auto} /* Utility grids */ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} /* Testimonials:3 -> 2 columns */ .testimonials-grid{grid-template-columns:repeat(2,1fr)} } /* ──────────────────────────────────────────────────────────── 21. RESPONSIVE — Mobile (max-width:768px) ──────────────────────────────────────────────────────────── */ @media (max-width:768px){:root{--font-size-4xl:32px;--font-size-3xl:26px;--font-size-xl:20px;--section-padding:48px 0;--container-padding:0 16px} /* Problem stats:stack on mobile */ .problem-stats{flex-direction:column} /* Show hamburger,hide desktop nav */ .hamburger{display:flex} .nav-links,.nav-actions{display:none} .mobile-nav{display:flex} /* Header */ .header .container{height:64px} .header-spacer{height:64px} /* Hero */ .hero{padding:100px 0 60px;min-height:auto} .hero-form-card{padding:var(--spacing-lg)} .form-row{grid-template-columns:1fr} /* Why grid mobile */ .why-grid{grid-template-columns:1fr;gap:var(--spacing-xl)} /* USP grid:2 -> 1 column */ .usp-grid{grid-template-columns:1fr} /* USP card image:smaller on mobile */ .usp-card-image{height:140px} /* Photos grid:single column */ .photos-grid{grid-template-columns:1fr} .photos-grid .photo-card:last-child{grid-column:auto;max-width:100%} /* Steps:horizontal -> vertical */ .steps-wrapper{flex-direction:column;align-items:center;gap:var(--spacing-xl)} .step{padding:0} .step:not(:last-child)::after{top:unset;left:50%;bottom:calc(-1 * var(--spacing-xl) / 2 - 1px);transform:translateX(-50%);width:2px;height:var(--spacing-xl)} .step p{max-width:300px} /* Stats:smaller padding */ .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)} .stat-item::after{display:none} .stat-item{padding:var(--spacing-md)} /* Footer:2 -> 1 column */ .footer-grid{grid-template-columns:1fr;gap:var(--spacing-xl)} .footer-bottom{flex-direction:column;gap:var(--spacing-md);text-align:center} .footer-bottom-links{flex-wrap:wrap;justify-content:center} /* Contact form row:single column */ .contact-form .form-row{grid-template-columns:1fr} /* Cookie banner:stack */ .cookie-banner .container{flex-direction:column;text-align:center} .cookie-text{margin-bottom:var(--spacing-sm)} /* Utility grids:all single column */ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} /* Buttons full width on mobile */ .btn-large{width:100%} /* Testimonials:single column */ .testimonials-grid{grid-template-columns:1fr} /* WhatsApp:move up to leave room for sticky CTA */ .whatsapp-float{bottom:80px} /* Mobile CTA bar */ .mobile-cta-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:998;background:var(--color-dark);padding:12px 16px;gap:12px} .mobile-cta-phone{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;color:white;border:2px solid var(--color-primary);background:transparent;text-decoration:none} .mobile-cta-offerte{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;color:var(--color-dark);background:var(--color-primary);text-decoration:none} /* Body padding to prevent content hidden behind sticky bar */ body{padding-bottom:72px} } /* ──────────────────────────────────────────────────────────── 22. RESPONSIVE — Small mobile (max-width:480px) ──────────────────────────────────────────────────────────── */ @media (max-width:480px){:root{--font-size-4xl:28px;--font-size-3xl:22px} .hero{padding:80px 0 48px} .hero-form-card{padding:var(--spacing-md)} .section-cta h2{font-size:var(--font-size-xl)} .stat-number{font-size:28px} .step-number{width:48px;height:48px;font-size:var(--font-size-lg)} } /* ──────────────────────────────────────────────────────────── 23. PRINT STYLES ──────────────────────────────────────────────────────────── */ @media print{.header,.footer,.cookie-banner,.section-cta,.hamburger,.mobile-nav{display:none !important} body{color:#000;background:#fff;font-size:12pt} .hero{background:none;color:#000;padding:20px 0;min-height:auto} .hero-content h1,.hero-content p{color:#000} section{padding:20px 0;page-break-inside:avoid} a{text-decoration:underline} } /* ──────────────────────────────────────────────────────────── 24. REDUCED MOTION ──────────────────────────────────────────────────────────── */ @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} .fade-in,.fade-in-left,.fade-in-right{opacity:1;transform:none} .stagger-children>*{opacity:1;transform:none} }