*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green-50: #f0fdf4;--green-100: #dcfce7;--green-200: #bbf7d0;--green-500: #22c55e;--green-600: #16a34a;--green-700: #15803d;--green-800: #166534;--green-900: #14532d;--stone-50: #fafaf9;--stone-100: #f5f5f4;--stone-200: #e7e5e4;--stone-300: #d6d3d1;--stone-400: #a8a29e;--stone-500: #78716c;--stone-600: #57534e;--stone-700: #44403c;--stone-800: #292524;--stone-900: #1c1917;--white: #ffffff;--shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);--radius: 12px;--radius-sm: 8px;--radius-lg: 16px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--stone-50);color:var(--stone-800);line-height:1.6;min-height:100vh}.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:linear-gradient(135deg,var(--green-50) 0%,var(--stone-50) 100%)}.login-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:48px 40px;max-width:420px;width:100%;text-align:center}.login-card h1{font-family:Playfair Display,serif;font-size:2rem;font-style:italic;color:var(--green-800);margin-bottom:4px}.login-card .subtitle{color:var(--stone-500);font-size:.95rem;margin-bottom:32px}.login-card label{display:block;text-align:left;font-weight:600;font-size:.85rem;color:var(--stone-600);margin-bottom:6px}.login-card input{width:100%;padding:12px 16px;border:2px solid var(--stone-200);border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;transition:border-color .2s;letter-spacing:.05em}.login-card input:focus{outline:none;border-color:var(--green-500)}.login-card input::placeholder{color:var(--stone-400);letter-spacing:0}.login-card button{width:100%;margin-top:20px;padding:14px;background:var(--green-700);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.login-card button:hover{background:var(--green-800)}.login-card button:disabled{background:var(--stone-300);cursor:not-allowed}.login-error{color:#dc2626;font-size:.85rem;margin-top:12px}.link-btn{background:none;border:none;color:var(--stone-400);font-size:.85rem;cursor:pointer;margin-top:12px;text-decoration:underline;padding:0}.link-btn:hover{color:var(--stone-600)}.email-sent{text-align:center;padding:16px 0 24px}.email-sent-icon{font-size:3rem;margin-bottom:12px}.email-sent p{color:var(--stone-600);font-size:.95rem;margin-bottom:8px}.email-sent-note{font-size:.8rem!important;color:var(--stone-400)!important;margin-top:8px}.portal{max-width:900px;margin:0 auto;padding:32px 24px 64px}.portal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.portal-header h1{font-family:Playfair Display,serif;font-style:italic;color:var(--green-800);font-size:1.5rem}.portal-header .client-name{color:var(--stone-500);font-size:.9rem}.portal-header button{background:none;border:1px solid var(--stone-300);padding:8px 16px;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;color:var(--stone-600)}.portal-header button:hover{background:var(--stone-100)}.project-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:32px;margin-bottom:24px}.project-card h2{font-size:1.4rem;font-weight:700;color:var(--stone-900);margin-bottom:4px}.project-card .project-meta{color:var(--stone-500);font-size:.9rem;margin-bottom:8px}.project-card .project-description{color:var(--stone-600);margin-bottom:24px;line-height:1.7}.status-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:capitalize}.status-badge.concept{background:var(--stone-100);color:var(--stone-600)}.status-badge.offerte{background:#fef3c7;color:#92400e}.status-badge.ontwerp{background:#dbeafe;color:#1e40af}.status-badge.uitvoering{background:#dcfce7;color:#166534}.status-badge.opgeleverd{background:var(--green-100);color:var(--green-800)}.timeline{position:relative;padding-left:32px}.timeline:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--stone-200)}.timeline-item{position:relative;margin-bottom:32px}.timeline-item:last-child{margin-bottom:0}.timeline-dot{position:absolute;left:-32px;top:4px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.timeline-dot.afgerond{background:var(--green-600);color:var(--white)}.timeline-dot.actief{background:var(--white);border:3px solid var(--green-500);animation:pulse 2s infinite}.timeline-dot.gepland{background:var(--stone-200);border:2px solid var(--stone-300)}@keyframes pulse{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 8px #22c55e00}}.timeline-item h3{font-size:1.05rem;font-weight:600;color:var(--stone-800);margin-bottom:2px}.timeline-item .fase-label{font-size:.8rem;color:var(--stone-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.timeline-item .fase-description{color:var(--stone-600);font-size:.95rem;line-height:1.6}.files-section{margin-top:16px}.files-section h4{font-size:.85rem;font-weight:600;color:var(--stone-500);margin-bottom:8px}.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.file-card{background:var(--stone-50);border:1px solid var(--stone-200);border-radius:var(--radius-sm);padding:12px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s;display:block}.file-card:hover{border-color:var(--green-500);box-shadow:var(--shadow-md)}.file-card .file-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-bottom:8px;background:var(--stone-100)}.file-card .file-name{font-size:.85rem;font-weight:500;color:var(--stone-700);word-break:break-word}.file-card .file-type{font-size:.75rem;color:var(--stone-400);text-transform:capitalize}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--stone-500);font-size:1.1rem}.spinner{width:24px;height:24px;border:3px solid var(--stone-200);border-top-color:var(--green-600);border-radius:50%;animation:spin .8s linear infinite;margin-right:12px}@keyframes spin{to{transform:rotate(360deg)}}.portal-footer{text-align:center;padding:32px 24px;color:var(--stone-400);font-size:.8rem}.privacy-link{background:none;border:none;color:var(--stone-400);font-size:.8rem;cursor:pointer;text-decoration:underline;padding:0;margin-top:4px}.privacy-link:hover{color:var(--stone-600)}.privacy-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}.privacy-modal{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:40px 36px;max-width:560px;width:100%;max-height:80vh;overflow-y:auto}.privacy-modal h2{font-size:1.3rem;color:var(--green-800);margin-bottom:16px}.privacy-modal h3{font-size:.95rem;font-weight:600;color:var(--stone-700);margin-top:16px;margin-bottom:4px}.privacy-modal p{color:var(--stone-600);font-size:.9rem;line-height:1.6}.privacy-modal button{margin-top:24px;padding:10px 24px;background:var(--green-700);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer}.privacy-modal button:hover{background:var(--green-800)}@media(max-width:640px){.login-card{padding:32px 24px}.project-card{padding:24px 20px}.portal-header{flex-direction:column;gap:12px;text-align:center}.files-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}