@charset "utf-8";
/* CSS Document */

/*
Theme Name: Klaassen website 2026
Author: VanderVeer Creative Agency
Author URI: https://vdveer.nl
Description: Custom template door VanderVeer
Version: 1.1
Tags: 
*/

:root {
    --main-color:#A2C616;
    --text-color:#054040;
    --tint-color:#DADCDF;
    --tint-color:#f0f1f1;
    --sec-color:#020224;
    --border-radius:13px;
}

html { scroll-behavior:smooth; scroll-padding-top:106px; }

body, html {
	padding:0;
	margin:0;
    background-color:white;
    color:var(--text-color);
    font-size:17px;
    line-height:145%;
    font-family: "Encode Sans Semi Expanded", sans-serif;
}

@media screen and (max-width:767px) {
    body, html {font-size:16px;}
    html { scroll-padding-top:72px; }
}

* {	box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

/* gebruik nu data-animate="fade-up" data-animate="fade-left" data-animate="fade-right" */
.has-animate-js [data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--animate-duration, 600ms);
  transition-delay: var(--animate-delay, 0ms);
  transition-timing-function: ease;
}
.has-animate-js [data-animate="fade-in"] {
  transition-duration: var(--animate-duration, 1800ms);
  transition-delay: var(--animate-delay, 100ms);
}
.has-animate-js [data-animate="fade-up"] {
  transform: translateY(3.5rem);
}
.has-animate-js [data-animate="fade-left"] {
  transform: translateX(-3.5rem);
}
.has-animate-js [data-animate="fade-right"] {
  transform: translateX(3.5rem);
}
.has-animate-js [data-animate][data-animate-visible] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .has-animate-js [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
hr {border:none;height:1px;background-color:var(--main-color);}
p { font-size:1rem;line-height: 145%;color:inherit; }
a { color:inherit; }

img { display:block; width:100%; height:auto; }
.imgwrap-square img {
    display:block;
    height:auto;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    object-position:center;
    border-radius:var(--border-radius);
}

button, input { font:inherit; }
.button, .altbutton, .forminator-button-submit {
    -webkit-appearance:none;
    cursor:pointer;
    display:inline-flex; 
    justify-content:center; 
    align-items:center;  
    padding:.64em 1.2em;
    border:2px solid var(--main-color);
    border-radius:999px;
    background:var(--main-color); 
    color:white; 
    font-size:.85rem; 
    line-height:1; 
    font-weight:600; 
    text-decoration:none; 
    text-transform:uppercase; 
    transition:background .2s,color .2s,transform .2s; 
    &[target="_blank"]::after {
        content:' ↗';
        content: "";
        display: inline-block;
        width: .75em;
        height: .8em;
        margin-left: .5em;
        background-color: currentColor;
        --icon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"%3E%3Cpolygon points="12.7 .2 7.9 1.5 9.3 2.9 .1 12.1 .8 12.8 10 3.6 11.4 5.1 12.7 .2"/%3E%3C/svg%3E');
        --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><polygon points="12.9 0 6 1.9 8.1 4.1 0 12.1 .9 12.9 8.9 4.9 11.1 7 12.9 0"/></svg>');
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
    }
}
div:not(.button-row) {
    > .button:has(+ .button), > .button:has(+ .altbutton), > .altbutton:has(+ .button) {
        margin-bottom:.64rem;
    }
}
.button:hover, .button:focus-visible { 
    background:#82ad00; 
    border-color:#82ad00; 
    transform:translateY(-1px); 
}
.button-outline, .altbutton {
    color:var(--main-color);
    background:transparent; 
}
.button-outline:hover, .button-outline:focus-visible, .altbutton:hover { 
    color:white; 
}
.button-row { 
    display:flex; 
    flex-wrap:wrap; 
    gap:1rem; 
    margin-top:1.5rem; 
}
.space-bottom {	margin-bottom:80px; }
.space-top { margin-top:80px; }
.space { margin-top:80px;margin-bottom:80px; }
.smallspace-bottom { margin-bottom:40px; }
.smallspace-top { margin-top:40px; }
.smallspace { margin-top:40px; margin-bottom:40px; }
.bigspace-bottom { margin-bottom:120px; }
.bigspace-top { margin-top:120px; }
.bigspace {	margin-top:120px;margin-bottom:120px; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    color:inherit;
    b, strong, span {
        color:var(--main-color);
    }
}
h1, .h1 {
    font-size:54px;
    font-size:clamp(30px,4vw,54px);
    line-height: 125%;
    font-weight:800;
    margin:0 0 1rem 0;
}
h2, .h2 {
    font-size:46px;
    font-size: clamp(26px, 3vw, 46px);
    line-height: 125%;
    font-weight:700;
    margin:0 0 1rem 0;
}
h3, .h3 {
    font-size:26px;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 115%;
    font-weight:600;
    margin:0 0 1rem 0;
}
h4, .h4 {
    font-size:20px;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 120%;
    font-weight:600;
    margin:0 0 1rem 0;
}
.bg-tint {
    background:var(--tint-color);
}
.bg-dark {
    background:var(--sec-color);
    color:white;
}
.bg-tint:has(+ .bg-tint), .bg-dark:has(+ .bg-dark) {
    .smallspace, .space {
        margin-bottom:.5rem;
    }
}
.bg-tint + .bg-tint, .bg-dark + .bg-dark {
    .smallspace, .space {
        margin-top:.5rem;
    }
}

.images-2 + .images-2 {
    margin-top:1rem;
}

.bigcontainer, .container, .midcontainer, .smallcontainer, .minicontainer, .flexrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	position: relative;
	max-width:100%;
	padding-left:1rem;
    padding-right:1rem;
	margin-left:auto;
    margin-right: auto;
	overflow:hidden;
}
.row, .flexrow {
	width:100%;
	overflow:hidden;
    padding:0;
}
.center { text-align: center; }
.split-row { align-items:center; }
.reverse { flex-direction: row-reverse; }
.bigcontainer { width:1640px; }
.container { width:1230px; }
.midcontainer {	width:1130px; }
.smallcontainer { width:730px; }
.minicontainer { width:450px; }

.div5  { width:calc(5% - .5rem);  }
.div10 { width:calc(10% - .5rem); }
.div15 { width:calc(15% - .5rem); }
.div20 { width:calc(20% - .5rem); }
.div25 { width:calc(25% - .5rem); }
.div30 { width:calc(30% - .5rem); }
.div33 { width:calc(33% - .5rem); }
.div35 { width:calc(35% - .5rem); }
.div40 { width:calc(40% - .5rem); }
.div45 { width:calc(45% - .5rem); }
.div50 { width:calc(50% - .5rem); }
.div55 { width:calc(55% - .5rem); }
.div60 { width:calc(60% - .5rem); }
.div65 { width:calc(65% - .5rem); }
.div70 { width:calc(70% - .5rem); }
.div75 { width:calc(75% - .5rem); }
.div80 { width:calc(80% - .5rem); }
@media screen and (min-width:768px) {
    
}
@media screen and (max-width:767px) {
    .space-bottom { margin-bottom:48px; }
    .space-top { margin-top:48px; }
    .space { margin-top:48px;margin-bottom:48px; }
    .smallspace-bottom { margin-bottom:24px; }
    .smallspace-top { margin-top:24px; }
    .smallspace { margin-top:24px;margin-bottom:24px; }
    .bigspace-bottom { margin-bottom:64px; }
    .bigspace-top { margin-top:64px; }
    .bigspace { margin-top:64px;margin-bottom:64px; }
    .div10, .div15, .div20, .div25 { width:calc(50% - 8px); }
    .div30, .div33, .div35, .div40, .div45, .div50, .div55, .div60, .div65, .div70, .div75, .div80 { width:100%; }
}

header {
    position: -webkit-sticky;
    position: sticky;
    width:100%;
    top:0;
    left:0;
    z-index: 99;
    background: white;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
    nav ul {
        list-style: none;
        margin:0;
        padding:0;
        li {
            display: inline-block;
        }
    }
}
.utility-bar {
    padding: .16rem 0;
    background: var(--sec-color);
    color: white;
    border-bottom: 2px solid var(--main-color);
    & .utility-inner {
        align-items: center;
        justify-content: flex-end;
    }
    & nav {
        & ul {
            display: flex;
            gap: 1.5rem;
        }
    }
    & a {
        font-size: .85rem;
        text-decoration: none;
        opacity: .85;
    }
}
.logo {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: .8;
    color: var(--main-color);
    text-decoration: none;
    & img {
        display: block;
        width: 180px;
        max-width: 40vw;
        max-height:45px;
        object-fit:contain;
        object-position:left center;
        height: auto;
    }
}
.main-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
    overflow: visible;
    & nav {
        margin-left: auto;
        & ul {
            display: flex;
            align-items: center;
            gap: 30px;
            white-space: nowrap;
        }
        & a {
            font-size: .72rem;
            font-weight: 600;
            text-decoration: none;
            text-transform: uppercase;
            &:hover {
                color: var(--main-color);
            }
            &[target="_blank"]::after {
                content:' ↗';
                margin-left:.32em;
                content:'';
                display: inline-block;
                width: .75em;
                height: .8em;
                margin-left: .5em;
                background-color: currentColor;
                --icon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"%3E%3Cpolygon points="12.7 .2 7.9 1.5 9.3 2.9 .1 12.1 .8 12.8 10 3.6 11.4 5.1 12.7 .2"/%3E%3C/svg%3E');
                --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><polygon points="12.9 0 6 1.9 8.1 4.1 0 12.1 .9 12.9 8.9 4.9 11.1 7 12.9 0"/></svg>');
                -webkit-mask: var(--icon) center / contain no-repeat;
                mask: var(--icon) center / contain no-repeat;
            }
        }
    }
    & .menu {
        & > .menu-item {
            position: relative;
        }
        li.menu-item-has-children:has(.current-menu-parent) > a, > .current-menu-item > a, .current-menu-item > a, & > .current-menu-ancestor > a, .current-menu-parent > a, .current-menu-ancestor > a {
            color: var(--main-color);
        }
    }
    & .menu-item-has-children {
        & > a {
            display: flex;
            align-items: center;
            gap: 7px;
            &::after {
                content: "";
                width: 6px;
                height: 6px;
                border-right: 1.5px solid currentColor;
                border-bottom: 1.5px solid currentColor;
                transform: rotate(45deg) translateY(-2px);
            }
        }
        &:hover > .sub-menu, &:focus-within > .sub-menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }
    }
    & .sub-menu {
        position: absolute;
        top: calc(100% + 27px);
        left: -18px;
        z-index: 20;
        display: block;
        min-width: 250px;
        padding: 10px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .2s, transform .2s, visibility .2s;
        border-top: 3px solid var(--main-color);
        border-radius: 0 0 9px 9px;
        background: white;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
        &::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 100%;
            width: 100%;
            height: 32px;
        }
        & .menu-item {
            display: block;
        }
        & a {
            display: block;
            padding: 11px 12px;
            font-size: .66rem;
            white-space: normal;
            &:hover,
            &:focus-visible {
                background: #f4f7ed;
                color: #638800;
            }
        }
    }
}
.submenu-toggle {
    display: none;
}
.nav-contact {
    flex: 0 0 auto;
}
.phone-link {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--main-color);
    color: white;
    text-decoration: none;
    font-size: 1rem;
    img {
        display:block;
        width:1.15rem;
        height:1.15rem;
        object-fit:contain;
        object-position:center;
    }
}
.hamburger {
    display: none;
}
@media screen and (min-width:1181px) {
    .main-nav {
        li.show-mobile {
            display:none!important;
        }
        li.menu-item-has-children {
            position:relative;
            &:hover > a {
                color: #638800;
            }
        }
        li.menu-item-has-children:has(ul.sub-menu ul.sub-menu) {
            position:static!important;
        }
        ul.sub-menu:has(.sub-menu) {
            top:100%;
            left:0;
            width:100%;
            > li {
                width:33%;
            }
            li.menu-item-has-children {
                position:static;
                &:hover {
                    background: #f4f7ed;
                    color: #638800;
                    > ul.sub-menu {
                        /* display:block; */
                        color:var(--text-color);
                        visibility: visible;
                        transform:none;
                        opacity:1;
                    }
                }
                & > a {
                    position:relative;
                    &::after {
                        position:absolute;
                        top:50%;
                        right:1rem;
                        display:inline-block;
                        transform:translateY(-50%) Rotate(-45deg);
                    }
                }
                /*
                &:hover > a::before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    background: red;
                    width: 50%;
                    height: 600px;
                    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
                    z-index: 5;
                }
                */
            }
        }
        ul.sub-menu ul.sub-menu {
            position:absolute;
            border-top:none;
            border-radius:0;
            top:0;
            left:33%;
            width:66%;
            min-height:calc(100% - 16px);
            box-shadow:none;
            overflow:visible;
            /*
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            display:none; 
            */
            opacity:0;
            visibility:hidden;
            transform:translateY(16px);
            /*
            &::before {
                content:'';
                position:absolute;
                right:100%;
                top:0;
                left:auto;
                bottom:auto;
                height:100%;
                width:15%;
                background:red;
                opacity:.5;
            }
            */
            li {
                width:50%;
            }
            ul.sub-menu {
                left:50%;
                width:50%;
                li {
                    width:100%;
                }
            }
        }
    }
}
@media screen and (max-width:1180px) {
    .hamburger {
        -webkit-appearance:none;
        position: relative;
        align-self:center;
        z-index:99;
        width:45px;
        height:45px;
        cursor: pointer;
        order:5;
        margin-left:0;
        display: block;
        border: 0;
        background: transparent;
        span {
            display:block;
            position: absolute;
            left:50%;
            height:3px;
            width:33px;
            background: var(--text-color);
            transition: 0.3s ease;
            transform-origin: center;
            transform:translate(-50%, -50%);
            &:nth-child(1) { top:calc(50% - 9px); }
            &:nth-child(2) { top:50%; }
            &:nth-child(3) { top:calc(50% + 9px); }
        }
        .opennav & {
            span {
                &:nth-child(1) {top:50%; transform:translate(-50%, -50%) rotate(45deg);}
                &:nth-child(2) {top:50%; opacity:0;}
                &:nth-child(3) {top:50%; transform:translate(-50%, -50%) rotate(-45deg);}
            }
        }
    }
    a.phone-link {
        margin-left:auto;
    }
    header nav {
        display: none;
    }
    header.opennav nav {
        display: block;
        overscroll-behavior: contain;
    }
    header nav ul li {
        display: block;
    }
    .main-nav {
        & nav {
            & ul {
                gap: 16px;
            }
            & a {
                font-size: .61rem;
            }
        }
    }
    .utility-bar {
        display: none;
    }
    header, .main-nav-wrap {
        overflow: visible;
    }
    .main-nav {
        min-height: 72px;
        & nav {
            position: absolute;
            display: none;
            top: 72px;
            height:calc(100vh - 72px);
            left: 0;
            width: 100%;
            margin: 0;
            padding: 18px 1rem 64px 2rem;
            background: white;
            box-shadow: 0 12px 18px rgba(0, 0, 0, .1);
            overflow:auto;
            & ul {
                align-items: stretch;
                flex-direction: column;
                gap: 0;
            }
            & li {
                display: block;
                border-bottom: 1px solid #e2e2e2;
            }
            & a {
                display: block;
                padding: 14px 0;
                font-size: .85rem;
            }
        }
        & .menu-item-has-children {
            display: grid;
            grid-template-columns: 1fr 46px;
            & > a {
                grid-column: 1;

                &::after {
                    display: none;
                }
            }
            &:hover > .sub-menu,
            &:focus-within > .sub-menu {
                transform: none;
            }
            &.submenu-open {
                & > .submenu-toggle {
                    &::before {
                        transform: rotate(225deg) translate(-2px, -2px);
                    }
                }

                & > .sub-menu {
                    display: block;
                }
            }
        }
        & .sub-menu {
            position: static;
            grid-column: 1 / -1;
            display: none;
            min-width: 0;
            padding: 0 0 8px 16px;
            visibility: visible;
            opacity: 1;
            transform: none;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            background: #f6f6f6;

            & .menu-item {
                display:grid;
                border: 0;
            }

            & a {
                padding: 11px 10px;
                font-size: .76rem;
            }
        }
    }
    .opennav {
        & .hamburger {
            & span {
                &:nth-child(1) {
                    top: 21px;
                    transform: translateX(-50%) rotate(45deg);
                }

                &:nth-child(2) {
                    opacity: 0;
                }

                &:nth-child(3) {
                    top: 21px;
                    transform: translateX(-50%) rotate(-45deg);
                }
            }
        }
        & .main-nav {
            & nav {
                display: block;
            }
        }
    }
    .submenu-toggle {
        grid-column: 2;
        display: grid;
        place-items: center;
        width: 46px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;
        &::before {
            content: "";
            width: 8px;
            height: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg) translate(-2px, -2px);
            transition: transform .2s;
        }
    }
    .nav-contact {
        display: none;
    }
}


.hero {
    background:var(--tint-color);
    color:white; 
    display:block;
    position:relative;
    &::after {
        content:'';
        display:block;
        position:absolute;
        z-index:5;
        inset:0;
        background:linear-gradient(to bottom, var(--text-color), black);
        pointer-events:none;
        opacity:.75;
    }
    &.hero-home {
        h1 {
            font-size:64px;
            font-size:clamp(32px,4vw,64px);
        }
    }
    .hero-bg {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        img, video {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            display:block;
            object-fit: cover;
            object-position:center;
            pointer-events:none;
            filter:contrast(150%) brightness(85%);
        }
    }
    .hero-inner { 
        align-items:center; 
        padding-top:70px; 
        padding-bottom:150px; 
        overflow:visible; 
        position:relative;
        z-index:15;
    }
    .hero-copy > p { 
        font-size:1.45rem; 
        font-size:clamp(1.08rem,1vw,1.45rem);
        line-height:1.2; 
    }
    .hero-benefits { 
        display:block;
        width:max-content;
        margin:0 0 45px auto; 
        padding:0; 
        list-style:none; 
    }
    .hero-benefits li { 
        display:flex; 
        align-items:center; 
        gap:1rem; 
        margin-top:23px; 
    }
    &.hero-noimg {
        color:var(--text-color);
        &::after {
            display:none;
        }
        .hero-inner {
            padding-top:2rem;
            padding-bottom:2rem;
        }
    }
}
.benefit-icon { 
    width:28px;
    height:28px;
    display:inline-block;
    align-self:center;
    object-fit:contain;
    object-position: center;
}
.breadcrumbs {
    margin-top:.32rem;
    color:rgb(144, 144, 144); 
    width:100%;
    .breadcrumb-home {
        display:inline-block;
        height:.9rem;
        width:1rem;
        background:url('img/icons/home.svg') center / contain no-repeat;
        transform:translateY(2px);
    }
    p#breadcrumbs {
        font-size:.86rem;
        margin:.25em;
        display:block;
        max-width:100%;
        white-space:nowrap;
        overflow-x:auto;
    }
    a {
        text-decoration:none;
        color:var(--text-color);
        &:hover {
            text-decoration: underline;
        }
    }
    .breadcrumb_last {
        font-weight:500;
        color:var(--text-color);
    }
    .separator::after {
        content: "";
        display:inline-block;
        width: 6px;
        height: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg) translateY(-2px);
    }
    .hero-hasimg & {
        .breadcrumb-home {
            filter:brightness(0) invert(1);
        }
        a, .breadcrumb_last {
            color:white;
        }
    }
}

.products { 
    z-index:20; 
    gap:20px 0; 
    overflow:visible; 
}
.hero + .products {
    margin-top:-120px; 
}

.product-card { 
    position:relative; 
    padding:24px 18px 18px; 
    background:var(--tint-color); 
    border-radius:var(--border-radius); 
    overflow:hidden; 
    p {
        font-size:.85rem;
    }
    .card-actions {
        display:flex;
        flex-direction: column;
        align-items:flex-start;
        gap:.5rem;
    }
    .card-machine {
        width:50%;
        height:auto;
        aspect-ratio:5/4;
        object-fit:contain;
        object-position:center;
    }
}

.reasons { list-style:none; margin:1rem 0 0; padding:0; }
.reasons li { display:flex; gap:1rem; margin:25px 0; }
.reasons li > span { flex:0 0 38px; color:var(--main-color); font-size:1.7rem; text-align:center; }
.reasons p { margin:.2rem 0 0; font-size:.9em; line-height:1.35; }

@media screen and (max-width:1000px) {
    .product-card { grid-template-columns:1fr 90px; }
    .machine { width:90px; }
}
@media screen and (max-width:768px) {
    .hero {
        &.hero-home .hero-inner { align-content:center; padding-top:2rem; padding-bottom:145px; }
        .hero-inner { align-content:center; padding-top:2rem; padding-bottom:2rem; }
        .hero-copy { width:100%; }
        .hero-benefits { width:100%; align-self:auto; margin:35px 0 0; }
        .hero-benefits li { margin-top:12px; }
    }
    .products { gap:14px; }
    .hero + .products { margin-top:-105px; }
    .split-row { gap:35px; }
    .split-row > * { width:100%; }
}

.compare-float {
    position:fixed;
    bottom:1rem;
    right:1rem;
    max-width:calc(100vw - 2rem);
    z-index:90;
    background:var(--tint-color);
    padding:1.25rem 1.5rem;
    border-radius:var(--border-radius);
    box-shadow:0 0 16px 0 rgba(0,0,0,0.06);
    ul {
        list-style:none;
        width:100%;
        margin:0;
        padding:0;
        li {
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content: space-between;
            gap:1rem;
            border-bottom:1px solid var(--text-color);
            padding:.75rem 0;
            width:100%;
            img {
                display:block;
                width:64px;
                height:64px;
                object-fit:contain;
                object-position:center;
            }
        }
    }
    .compare-float__title {
        font-weight:600;
        max-width:220px;
        flex:1 1 0px;
    }
    .button {
        margin-top:1rem;
        margin-left:auto;
        float:right;
    }
    button {
        -webkit-appearance:none;
        border-radius:0;
        border:none;
        cursor:pointer;
        color:red;
    }
    button.js-compare-clear {
        display:inline-block;
        margin-left:auto;
        float:right;
    }
    button.compare-float__remove {
        font-weight:600;
        margin-left:auto;
    }
}
@media screen and (max-width:767px) {
    .compare-float {
        padding:.5rem 1rem;
        box-shadow:0 0 1rem 0 rgba(0,0,0,0.16);
        ul {
            li {
                padding:.32rem 0;
            }
        }
        .compare-float__title {
            font-size:.9rem;
            line-height:125%;
        }
        .button {
            margin-top:.32rem;
        }
    }
}

.filter-wrap {
    width:260px;
    max-width:100%;
}
.machine-loop-wrap {
    flex:1 1 0px;  
}
@media screen and (max-width:767px) {
    .filter-wrap {
        width:100%;
    }
    .machine-loop-wrap {
        width:100%;
    }
}
.machine-card {
    width:280px;
    max-width:100%;
    margin-bottom:1rem;
    text-decoration:none;
    .category-selection & {
        width:360px;
    }
    &.empty {
        margin:0;
        align-self:flex-start;
    }
    .machine-upper {
        background-color:var(--tint-color);
        padding:1rem 1rem .5rem 1rem;
        border-radius:var(--border-radius);
    }
    img.machine-img {
        display:block;
        width:100%;
        aspect-ratio:1/1;
        object-fit:contain;
        object-position:center;
    }
    .machine-content {
        display:block;
        text-decoration:none;
        padding:1rem 0;
        .machine-list & {
            padding:1rem 2rem 1rem 0;
        }
    }
    .machine-title {
        margin:0 0 .32rem 0;
        max-width:100%;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    .machine-shortdesc {
        display:none;
        .machine-list & {
            display:block;
            font-size:.8rem;
            line-height:135%;
            margin:.5em 0;
        }
    }
    .machine-price {
        margin-top:.32rem;
        font-size:1rem;
    }
    .machine-list & {
        width:100%;
        display:flex;
        background:var(--tint-color);
        border-radius:var(--border-radius);
        align-items:center;
        gap:.5rem 2rem;
        position:relative;
        .machine-upper {
            width:230px;
            position:static;
        }
        .machine-content {
            flex:1 1 0px;
        }
        label.compare {
            position:absolute;
            top:.15rem;
            right:1rem;
            z-index:5;
            padding:.5rem;
        }
    }
}
@media screen and (max-width:1080px) {
    .machine-card, .category-selection .machine-card {
        width:calc(50% - .5rem);
    }
}
@media screen and (max-width:767px) {
    .machine-card {
        .machine-list & {
            gap:.5rem;
            .machine-upper {
                width:160px;
                max-width:25vw;
                padding-right:0;
            }
            .machine-content {
                padding:1.75rem 1rem .25rem 0;
            }
            label.compare {
                top:0;
                padding-top:.32rem;
                margin-top:0;
                right:.32rem;
            }
        }
    }
}

@media screen and (max-width:460px) {
    .machine-card, .category-selection .machine-card {
        width:100%;
    }
}

label.compare {
    display:flex;
    align-content:center;
    align-items:center;
    margin-left:auto;
    width:max-content;
    color:#6C6C6C;
    cursor:pointer;
    margin-top:.25rem;
    font-size:.9rem;
    user-select: none;
    padding:.25rem;
    input {
        -webkit-appearance: none;
        display:inline-block;
        width:1rem;
        height:1rem;
        background:#D9D9D9;
        margin:0 0 0 .64rem;
        border-radius:2px;
        cursor:pointer;
        &:checked::after {
            content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.2595 0.4656C12.5174 0.0200056 13.0875 -0.132198 13.5338 0.125146C13.98 0.38264 14.1324 0.952017 13.8747 1.39775L6.59007 14L0.156776 4.3617C-0.129103 3.93344 -0.0130486 3.3547 0.415639 3.06907C0.844547 2.7835 1.42401 2.89925 1.70995 3.3276L6.47522 10.468L12.2595 0.4656Z" fill="black"/> </svg>');
            display:block;
            width:80%;
            height:80%;
            margin:auto;
            transform:scale(0.9) translateY(-1px);
        }
    }
}



.grid-sort {
	justify-content:flex-end;
	padding-bottom:.32rem;
	.machine-query-toggle {
		opacity:.32;
		cursor:pointer;
		display:inline-block;
		padding:.25em;
		border-radius:3px;
		img {
			display:block;
			width:1.15rem;
			height:1.15rem;
			object-fit:contain;
			object-position:center;
		}
		&.active {
			opacity:.8;
		}
	}
}
@media screen and (max-width:767px) {
	.grid-sort {
		.machine-query-toggle {
			padding:.32em;;
			img {
				width:1.5em;
				height:1.5em;
			}
		}
	}
}

.contactgegevens {
    width:100%;
    p {
        margin:.5rem 0;
    }
    .h4 {
        margin-bottom:.5rem;
        margin-top:1rem;
    }
    a {
        text-decoration:none;
        font-weight:600;
        display:inline-block;
        &:hover {
            text-decoration:underline;
        }
        &[href^="mailto:"], &[href^="tel:"] {
            margin:.08em 0;
            &::before {
                content:'';
                display:inline-block;
                background:url('img/icons/phone.svg') center / contain no-repeat;
                height:1em;
                width:1em;
                margin-right:.5em;
                transform:translateY(2px) translateX(1px);
                filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(4113%) hue-rotate(139deg) brightness(98%) contrast(96%);
            }
        }
        &[href^="mailto:"]::before {
            background:url('img/icons/mail.svg') center / contain no-repeat;
            transform:translateY(3px);
        }
    }
}
.technischedienst {
    width:360px;
    max-width:100%;
    background-color:var(--text-color);
    color:white;
    padding:1rem;
    border-radius:var(--border-radius);
    margin:1rem 0 0 0;
    gap:1rem 1.5rem;
    align-items:center;
    .h4 {
        margin:0;
    }
    a::before {
        filter:none!important;
    }
}

.news-item {
    text-decoration:none;
    margin-bottom:1rem;
    border:1px solid var(--tint-color);
    border-radius:var(--border-radius);
    padding:1rem;
    &.empty {
        visibility:hidden;
        border:none;
        padding:0;
        margin:0;
    }
    .imgwrap-square {
        margin-bottom:1rem;
        transition:.32s ease;
        overflow:hidden;
        img {
            aspect-ratio:4/3;
            transition:.3s ease;
        }
    }
    &:hover {
        .imgwrap-square {
            transform:scale(1.03);
        }
    }
}
.post-categories {
    list-style:none;
    margin:.15em 0 0 0;
    padding:0;
    li {
        display:inline-block;
        padding:.15em .5em;
        margin:0 .25em .25em 0;
        color:var(--text-color);
        font-size:.8rem;
        font-weight:500;
        background-color:#eef6ce;
        border-radius:100px;
    }
}

.form-wrap {
    background:var(--tint-color);
    padding:2rem;
    border-radius:var(--border-radius);
    width:680px;
    max-width:100%;
}

/* --- CUSTOM FORMINATOR STYLES --- */
.forminator-response-message.forminator-error {
    display: none;
}
label {
    display:block;
    margin-bottom:.25em;
}
.forminator-row, .forminator-field-address {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items:flex-start;
    margin-bottom:1rem;
    .forminator-field {
        margin-bottom:.25em;
    }
    &.forminator-no-margin {
        margin-bottom:0;
    }
    .forminator-col-12, .forminator-col {
        width:100%;
    }
    .forminator-col-6, .forminator-col-md-6, .forminator-field-address .forminator-row {
        width:calc(50% - .5rem);
    }
    .forminator-col-4, .forminator-col-md-4 {
        width:calc(33% - .5rem);
    }
    .forminator-col-3, .forminator-col-md-3 {
        width:calc(25% - .5rem);
    }
    .forminator-repeater-label {
        font-weight:600;
    }
    .forminator-field-html p:first-child {
        margin-top:0;
    }
    .forminator-field-html p:last-child {
        margin-bottom:0;
    }
}
@media screen and (max-width:560px) {
    .forminator-row {
        .forminator-col-6, .forminator-col-md-6, .forminator-col-4, .forminator-col-md-4, .forminator-col-3, .forminator-col-md-3, .forminator-field-address .forminator-row  {
            width:100%;
        }
    }
}
span.forminator-error-message {
    display:block;
    margin:.25em 0;
    font-size:.85rem;
    line-height:1.15em;
    color:red;
}
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
    -webkit-appearance:none;
    appearance:none;
    resize:none;
    font-family:inherit;
    background-color:white;
    color:var(--text-color);
    font-weight:inherit;
    font-size:1rem;
    width:100%;
    padding:.5em;
    border:1px solid var(--text-color);
    border-radius:var(--border-radius);
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .64em center;
    background-size: .64em .64em;
}
input[type="radio"], input[type="checkbox"] {
    margin-right:1em;
}
/* --- END FORMINATOR STYLES --- */