/* Statische reconstructie van de publieke website op 28 oktober 2026.
   Gewone CSS met optionele JavaScript-effecten, zonder framework. */
@font-face{font-family:Outfit;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/outfit-400.ttf') format('truetype')}
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-500.ttf') format('truetype')}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-600.ttf') format('truetype')}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;src:url('fonts/outfit-700.ttf') format('truetype')}
@font-face{font-family:Outfit;font-style:normal;font-weight:800;font-display:swap;src:url('fonts/outfit-800.ttf') format('truetype')}
:root{--primary:hsl(61 100% 37%);--foreground:hsl(0 0% 15%);--muted:hsl(0 0% 40%);--border:hsl(0 0% 90%)}
*,*::before,*::after{box-sizing:border-box;border:0 solid var(--border)}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#fff;color:var(--foreground);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;overflow-x:clip}
h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:Outfit,sans-serif;text-wrap:balance}a{color:inherit;text-decoration:none}img,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}a:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.container{max-width:1280px;margin-inline:auto;padding-inline:16px}.narrow{max-width:896px}
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:rgb(255 255 255 / .9);backdrop-filter:blur(4px);transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.header-row{height:80px;display:flex;align-items:center;justify-content:space-between}
.logo{transition:transform .2s}.logo:hover{transform:scale(1.05)}.logo img{height:56px;width:auto;object-fit:contain}
.desktop-nav{display:none;align-items:center;gap:32px}.desktop-nav a{position:relative;font-weight:500;transition:color .2s}.desktop-nav a:hover{color:var(--primary)}
.menu-open,.menu-close{padding:8px;transition:color .2s}.menu-open:hover,.menu-close{color:var(--primary)}.menu-close{display:none}
.mobile-nav{display:none;position:absolute;inset:80px 0 auto;background:#fff;border-top:1px solid var(--border);padding:16px}
.mobile-nav a{display:block;width:100%;text-align:left;padding:12px 16px;border-radius:8px;font-weight:500;transition:background-color .2s,color .2s}.mobile-nav a+a{margin-top:8px}.mobile-nav a:hover{background:hsl(0 0% 96%)}
html:not(.js-effects) .mobile-nav:target{display:block}html:not(.js-effects) .site-header:has(.mobile-nav:target) .menu-open{display:none}html:not(.js-effects) .site-header:has(.mobile-nav:target) .menu-close{display:block}
/* De aangeklikte sectie bepaalt de actieve link; navigeren sluit het CSS-menu. */
html:not(.js-effects) body:not(:has(#tuinonderhoud:target,#contact:target)) .nav-welkom,html:not(.js-effects) body:has(#tuinonderhoud:target) .nav-tuinonderhoud,html:not(.js-effects) body:has(#contact:target) .nav-contact{color:var(--primary)}
html:not(.js-effects) body:not(:has(#tuinonderhoud:target,#contact:target)) .desktop-nav .nav-welkom::after,html:not(.js-effects) body:has(#tuinonderhoud:target) .desktop-nav .nav-tuinonderhoud::after,html:not(.js-effects) body:has(#contact:target) .desktop-nav .nav-contact::after{content:'';position:absolute;inset:auto 0 -4px;height:2px;background:var(--primary)}
html:not(.js-effects) body:not(:has(#tuinonderhoud:target,#contact:target)) .mobile-nav .nav-welkom,html:not(.js-effects) body:has(#tuinonderhoud:target) .mobile-nav .nav-tuinonderhoud,html:not(.js-effects) body:has(#contact:target) .mobile-nav .nav-contact{background:var(--primary);color:var(--foreground)}
.hero{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:80px}
.hero-background{position:absolute;inset:0;background:url('images/tuin.png') center / cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(0 0 0 / .7),rgb(0 0 0 / .5),rgb(0 0 0 / .8))}
.hero-content{position:relative;z-index:10;max-width:1024px;text-align:center}.hero h1{font-size:36px;line-height:1.25;font-weight:700;color:#fff;margin-bottom:24px;letter-spacing:-.02em;animation:enter .6s both}.hero p{font-size:20px;line-height:28px;font-weight:500;color:rgb(255 255 255 / .9);max-width:768px;margin-inline:auto;animation:enter .6s .2s both}
.scroll-down{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:rgb(255 255 255 / .8);transition:color .2s;animation:fade .6s .4s both}.scroll-down:hover{color:var(--primary)}.scroll-down svg{animation:bounce 1s infinite}
.section{padding-block:96px}.section-intro{text-align:center;margin-bottom:64px}.section-intro h2{font-size:30px;line-height:36px;font-weight:700;margin-bottom:24px}.section-intro p{font-size:18px;line-height:1.625;color:var(--muted);max-width:768px;margin-inline:auto}
.experience{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:hsl(0 0% 96% / .5);border-radius:24px;padding:32px;border:1px solid var(--border);text-align:center}.experience-icon{width:80px;height:80px;border-radius:16px;background:hsl(61 100% 37% / .2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary)}.experience-title{font-size:30px;line-height:36px;font-weight:700;margin-bottom:4px}.experience-subtitle{font-size:18px;line-height:28px;color:var(--muted)}
.services{background:hsl(0 0% 96% / .3)}.service-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:1152px;margin-inline:auto}.service-card{background:#fff;border-radius:24px;padding:32px;box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);transition:all .3s}.service-card:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)}.service-icon{width:56px;height:56px;border-radius:16px;background:hsl(61 100% 37% / .1);display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--primary)}.service-card h3{font-size:20px;line-height:28px;font-weight:600;margin-bottom:16px}.service-card p{color:var(--muted);line-height:1.625}
.contact .section-intro p{max-width:672px;font-size:18px}.contact-card{background:#fff;box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);border-radius:24px;padding:32px;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center}.contact-inner{width:100%;max-width:672px;display:flex;flex-direction:column;align-items:center}.contact-card h3{font-size:24px;line-height:32px;font-weight:600;border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:32px;width:100%;text-align:center}.contact-rows{width:100%}.contact-row{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.contact-row+.contact-row{margin-top:32px}.contact-icon{width:48px;height:48px;border-radius:12px;background:hsl(61 100% 37% / .1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary);transition:background-color .15s}.contact-row:hover .contact-icon{background:hsl(61 100% 37% / .2)}.contact-label{font-weight:600;margin-bottom:4px}.contact-value{font-size:18px;line-height:28px;color:var(--muted);display:block}.contact-value[href]{transition:color .2s}.contact-value[href]:hover{color:var(--primary)}
.site-footer{background:#0a0a0a;color:#fff}.footer-content{padding-block:48px}.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}.footer-grid h3{font-size:24px;line-height:32px;font-weight:700;margin-bottom:16px}.footer-grid p{color:rgb(255 255 255 / .8);line-height:1.625;max-width:448px}.footer-grid h4{font-size:18px;line-height:28px;font-weight:600;margin-bottom:16px;color:var(--primary)}.footer-contact>*{display:flex;align-items:center;gap:12px;color:rgb(255 255 255 / .8)}.footer-contact>*+*{margin-top:12px}.footer-contact svg{color:var(--primary);flex-shrink:0;transition:transform .2s}.footer-contact a{transition:color .2s}.footer-contact a:hover{color:var(--primary)}.footer-contact a:hover svg{transform:scale(1.1)}.footer-contact>div{align-items:flex-start}.footer-contact>div svg{margin-top:2px}.copyright{padding-top:32px;border-top:1px solid rgb(255 255 255 / .1);text-align:center;color:rgb(255 255 255 / .6);font-size:14px;line-height:20px}
@media(min-width:640px){.container{padding-inline:24px}.experience{flex-direction:row;padding:48px;text-align:left}}
@media(min-width:768px){.desktop-nav{display:flex}.menu-open,.menu-close,html:not(.js-effects) .site-header:has(.mobile-nav:target) .menu-close,.mobile-nav:target{display:none}.hero h1{font-size:60px;line-height:1}.hero p{font-size:30px;line-height:36px}.section-intro h2{font-size:48px;line-height:48px}.section-intro p{font-size:20px;line-height:28px}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-card{padding:48px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.container{padding-inline:32px}.hero h1{font-size:72px}.contact-inner{align-items:flex-start}.contact-row{flex-direction:row;justify-content:flex-start;gap:24px;text-align:left}}
@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
/* Progressieve CSS-benadering van de originele headerwissel na 20px scroll. */
@supports(animation-timeline:scroll()){@keyframes header-scroll{to{background:rgb(255 255 255 / .95);backdrop-filter:blur(12px);box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)}}html:not(.js-effects) .site-header{animation:header-scroll linear both;animation-timeline:scroll(root);animation-range:0px 21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(min-width:768px){.contact .section-intro p{line-height:1.625}}

/* Verbeterde bediening wanneer effects.js beschikbaar is. */
.js-effects .site-header.is-scrolled{background:rgb(255 255 255 / .95);backdrop-filter:blur(12px);box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)}
.js-effects .desktop-nav{position:relative}
.js-effects .desktop-nav a.is-active{color:var(--primary)}
.active-indicator{position:absolute;bottom:-4px;height:2px;background:var(--primary);transform-origin:left center;pointer-events:none}
.js-effects .mobile-nav{overflow:hidden}
.js-effects .mobile-nav a.is-active{background:var(--primary);color:var(--foreground)}
.js-effects .site-header.is-menu-open .menu-open{display:none}
.js-effects .site-header.is-menu-open .menu-close{display:block}
@media(min-width:768px){.js-effects .mobile-nav,.js-effects .site-header.is-menu-open .menu-close{display:none!important}}