/* Kaffee Kabaal — gedeelde stijl */
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{--inkt:#1B1512;--room:#F4EEDF;--roze:#F7A8D8;--rood:#E5432B}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--room);color:var(--inkt);font-family:'Bricolage Grotesque',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:inherit}a:hover{color:#B8321E}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
.kk-pagina{position:relative;overflow:hidden;min-height:100vh}
.kk-korrel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.22;mix-blend-mode:multiply;z-index:5}

/* Knoppen en links */
.kk-knop{transition:transform .15s ease, box-shadow .15s ease}
.kk-knop:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:7px 7px 0 var(--inkt) !important}
.kk-knop:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--inkt) !important}
.kk-link{text-decoration:none}
.kk-link:hover{text-decoration:underline wavy;text-decoration-thickness:2px;text-underline-offset:7px}

/* Getekende stop-motion */
@keyframes kk-a{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes kk-b{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes kk-tril{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2px)}}
@keyframes kk-wiebel{0%,100%{transform:rotate(-2deg)}25%{transform:rotate(-6deg) scale(1.04)}75%{transform:rotate(3deg) scale(1.04)}}
@keyframes kk-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kk-tril{animation:kk-tril .35s steps(2) infinite}
.kk-loop{animation:kk-loop 24s linear infinite}

/* Scroll-animaties */
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
@keyframes kk-in{from{opacity:0;transform:translateY(56px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes kk-draai{from{opacity:0;transform:rotate(-25deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes kk-kaart{from{transform:translateY(80px) rotate(3deg)}to{transform:none}}
.kk-in{animation:kk-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
.kk-loop{animation:kk-loop linear both;animation-timeline:scroll(root)}
.kk-draai{animation:kk-draai linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.kk-kaartvel{animation:kk-kaart linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}}
@media (prefers-reduced-motion: reduce){.kk-tril,.kk-loop{animation:none}}

/* Kop */
.kk-kop{max-width:1280px;margin:0 auto;padding:24px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.kk-merk{display:flex;align-items:center;min-height:44px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.02em}
.kk-nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:18px;font-weight:600}
.kk-pil{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;background:var(--roze);border:3px solid var(--inkt);border-radius:999px;font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--inkt);color:var(--inkt)}
@media (max-width:600px){.kk-kop{padding:20px}.kk-nav{gap:16px 20px;font-size:16px}}

/* Footerbalk (alle pagina's) */
.kk-voet-balk{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 32px 32px}
.kk-voet-balk>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;background:var(--room);border:3px solid var(--inkt);border-radius:28px;padding:14px 28px;font-family:'Space Mono',monospace;font-size:14px}
@media (max-width:969px){.kk-voet-balk{padding:0 20px 24px}}

/* Grote footer (alleen home) */
.kk-voet{position:relative;overflow:hidden;background:var(--inkt)}
.kk-voet-rij{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;min-height:820px;padding-left:max(32px, calc((100% - 1280px) / 2 + 32px))}
.kk-voet-paneel{position:relative;z-index:2;align-self:center;flex:0 0 auto;width:min(578px,100%);margin:96px 0}
.kk-podium{position:relative;flex:1 1 360px;min-height:380px;container-type:inline-size}
.kk-podium video{position:absolute;z-index:0;display:block;max-width:none;left:-128.571cqw;top:calc(50% - 226.19cqw);width:264.286cqw;height:333.333cqw}
@media (max-width:969px){
.kk-voet-rij{padding-left:0;min-height:0}
.kk-voet-paneel{margin:56px 20px 0;width:calc(100% - 40px)}
.kk-podium{flex-basis:100%;min-height:400px}
}

.kk-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hamburgermenu (mobiel) */
.kk-burger{display:none}
.kk-menu-extra{display:none}
@media (max-width:760px){
.kk-js .kk-kop{position:relative;z-index:30;flex-wrap:nowrap}
.kk-js .kk-merk{position:relative;z-index:32}
.kk-burger{display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:32;width:52px;height:52px;padding:0;border:3px solid var(--inkt);border-radius:50%;background:var(--room);color:var(--inkt);box-shadow:3px 3px 0 var(--inkt);cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.kk-burger:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--inkt)}
.kk-burger svg{width:28px;height:28px;overflow:visible}
.kk-burger path{stroke:currentColor;stroke-width:3.5;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,1.5,.5,1), opacity .2s ease}
.kk-b2{transition-delay:.02s}
.kk-menu-open .kk-b1{transform:translateY(7px) rotate(45deg)}
.kk-menu-open .kk-b2{opacity:0;transform:scaleX(.2)}
.kk-menu-open .kk-b3{transform:translateY(-7px) rotate(-45deg)}

.kk-js .kk-nav{position:fixed;inset:0;z-index:31;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:104px 28px 40px;background:var(--roze);font-size:clamp(40px,12vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  visibility:hidden;opacity:0;clip-path:circle(0 at calc(100% - 46px) 46px);transition:clip-path .45s cubic-bezier(.6,0,.3,1), opacity .2s ease, visibility 0s linear .45s;overflow-y:auto}
.kk-js .kk-menu-open .kk-nav{visibility:visible;opacity:1;clip-path:circle(150% at calc(100% - 46px) 46px);transition:clip-path .5s cubic-bezier(.6,0,.3,1), opacity .15s ease, visibility 0s}
.kk-js .kk-nav>a{opacity:0;transform:translateY(24px) rotate(-2deg);transition:opacity .25s ease, transform .35s cubic-bezier(.3,1.5,.5,1)}
.kk-js .kk-menu-open .kk-nav>a{opacity:1;transform:none}
.kk-js .kk-menu-open .kk-nav>a:nth-child(1){transition-delay:.12s}
.kk-js .kk-menu-open .kk-nav>a:nth-child(2){transition-delay:.17s}
.kk-js .kk-menu-open .kk-nav>a:nth-child(3){transition-delay:.22s}
.kk-js .kk-menu-open .kk-nav>a:nth-child(4){transition-delay:.27s}
.kk-js .kk-nav>a.kk-link{text-decoration:none}
.kk-js .kk-nav>a[aria-current]{text-decoration:underline wavy;text-decoration-thickness:3px;text-underline-offset:8px}
.kk-js .kk-nav>a.kk-pil{margin-top:18px;font-size:20px;letter-spacing:0;min-height:56px;padding:14px 28px;background:var(--inkt)!important;color:var(--room)!important;box-shadow:0 0 0 var(--inkt)!important}
.kk-js .kk-menu-extra{display:block;margin-top:auto;width:100%;padding-top:32px;font-family:'Space Mono',monospace;font-size:14px;font-weight:400;letter-spacing:0;opacity:0;transition:opacity .3s ease .3s}
.kk-js .kk-menu-open .kk-menu-extra{opacity:1}
.kk-menu-extra p{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0}
.kk-menu-ogen{width:72px;height:36px}
.kk-menu-open .kk-mp{animation:kk-rond 2.4s ease-in-out infinite}
@keyframes kk-rond{0%,20%{transform:translate(0,0)}35%,55%{transform:translate(-6px,-1px)}70%,90%{transform:translate(1px,2px)}100%{transform:translate(0,0)}}
.kk-menu-open{overflow:hidden}
.kk-menu-open .kk-merk{color:var(--inkt)}
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
.kk-js .kk-nav,.kk-js .kk-menu-open .kk-nav,.kk-js .kk-nav>a,.kk-burger path{transition:none}
.kk-menu-open .kk-mp{animation:none}
}
@media (max-width:760px){.kk-js .kk-nav a:focus:not(:focus-visible){outline:none}}