/* FRONSKOP Interactive Home v7.1.0 - opgeschoonde responsive CSS */

.fronskop-interactive,
.fk600-wrap,
.fk600-wrap *{
  box-sizing:border-box;
}

.fk600-wrap{
  width:100%;
  max-width:100%;
  margin:0 auto;
  background:#fff;
  overflow-x:hidden;
}

.fk600-desktop{display:block;}
.fk600-mobile{display:none;}

/* DESKTOP */
.fk600-desktop .fronskop-interactive{
  position:relative!important;
  width:min(100%,800px)!important;
  margin:0 auto!important;
  isolation:isolate!important;
  background:#fff!important;
  overflow:visible!important;
}

.fk600-desktop .fronskop-head{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:auto!important;
  display:block!important;
}

.fk600-desktop .fronskop-brain-layer{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  transform-origin:48% 28%!important;
  will-change:transform!important;
  animation:fronskop-brain-float 6.8s ease-in-out infinite;
}

@keyframes fronskop-brain-float{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);}
  22%{transform:translate3d(2px,-4px,0) rotate(.12deg) scale(1.003);}
  45%{transform:translate3d(5px,-9px,0) rotate(.32deg) scale(1.009);}
  70%{transform:translate3d(-4px,-6px,0) rotate(-.22deg) scale(1.005);}
  88%{transform:translate3d(-1px,-2px,0) rotate(-.08deg) scale(1.002);}
}

.fk600-desktop .fronskop-brain{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
}

.fk600-svg-slot{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:3!important;
  overflow:visible!important;
}
.fk600-svg-slot svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}

.fk600-svg-slot a,
.fk600-svg-slot .brain-link,
.fk600-svg-slot .brain-hotspot,
.fk600-svg-slot .brain-hitbox,
.fk600-svg-slot .brain-fill{
  pointer-events:auto!important;
  cursor:pointer!important;
}

.brain-fill{
  opacity:0;
  stroke:#ffffff;
  stroke-width:6;
  stroke-linejoin:round;
  stroke-linecap:round;
  cursor:pointer;
  transition:opacity .24s ease, filter .24s ease, transform .24s ease;
  transform-box:fill-box;
  transform-origin:center;
}
.brain-link:hover .brain-fill,
.brain-link:focus .brain-fill{
  opacity:.92;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 22px currentColor);
  transform:scale(1.028);
}
.brain-hitbox{fill:transparent;cursor:pointer;}
.brain-title{
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:opacity .24s ease, transform .24s ease;
  pointer-events:none;
}
.brain-link:hover .brain-title,
.brain-link:focus .brain-title{
  opacity:1;
  transform:translateY(0) scale(1);
}
.brain-title rect{
  fill:#fff;
  stroke:#111;
  stroke-width:3;
  rx:16;
}
.brain-title text{
  font-family:Arial, Helvetica, sans-serif;
  font-size:26px;
  font-weight:800;
  fill:#111;
  text-anchor:middle;
  dominant-baseline:middle;
}
.brain-link:focus{outline:none;}
.brain-link:focus .brain-fill{
  stroke:#000;
  stroke-width:7;
}

.fronskop-interactive.is-clicking .fronskop-brain-layer{
  animation:fronskop-brain-boing .32s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes fronskop-brain-boing{
  0%{transform:scale(1) rotate(0deg);}
  28%{transform:scale(.975) rotate(-.18deg);}
  62%{transform:scale(1.032) rotate(.16deg);}
  100%{transform:scale(1) rotate(0deg);}
}

/* MOBIEL — alleen op schermbreedte, niet op hover/pointer. Dit voorkomt verschillende iPhone-resultaten. */
@media (max-width:768px){
  html, body{overflow-x:hidden;}

  .fk600-wrap{
    overflow:hidden!important;
    width:100%!important;
    max-width:100vw!important;
  }

  .fk600-desktop{display:none!important;}
  .fk600-mobile{display:block!important;}

  .fk620-mobile-map{
    position:relative!important;
    width:100%!important;
    max-width:800px!important;
    margin:0 auto!important;
    background:#fff!important;
    overflow:hidden!important;
    aspect-ratio:2/3!important;
    font-family:Arial, Helvetica, sans-serif!important;
  }

  .fk620-mobile-head{
    position:absolute!important;
    display:block!important;
    z-index:1!important;
    width:90%!important;
    height:90%!important;
    left:5%!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    object-fit:contain!important;
    pointer-events:none!important;
  }

  .fk620-lines{display:none!important;}

  .fk620-label{
    position:absolute!important;
    z-index:10!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:32px!important;
    padding:5px 9px!important;
    border:2.5px solid #111!important;
    border-radius:999px!important;
    color:#111!important;
    text-decoration:none!important;
    font-family:Arial, Helvetica, sans-serif!important;
    font-size:clamp(10px,2.35vw,14px)!important;
    font-weight:900!important;
    line-height:.95!important;
    text-align:center!important;
    text-transform:uppercase!important;
    letter-spacing:-.02em!important;
    box-shadow:2.5px 2.5px 0 #111, 0 0 12px rgba(0,0,0,.06)!important;
    -webkit-text-stroke:0!important;
    -webkit-tap-highlight-color:rgba(0,0,0,.12)!important;
    white-space:normal!important;
  }

  .fk620-label:active{
    transform:translate(2px,2px) scale(.98)!important;
    box-shadow:1px 1px 0 #111!important;
  }

  /* Posities v7.1: alles binnen beeld, geen afgesneden linkerbordjes */
  .fk620-momentje{left:8.5%!important;top:10.2%!important;width:25%!important;background:#2ca544!important;}
  .fk620-karlijn{left:56.5%!important;top:10%!important;width:23%!important;background:#91e84a!important;}
  .fk620-lore{left:75%!important;top:19.5%!important;width:21.5%!important;background:#ff940d!important;}
  .fk620-contact{left:78.8%!important;top:37.8%!important;width:18.5%!important;background:#39dbe7!important;}
  .fk620-agenda{left:74.8%!important;top:52.4%!important;width:20%!important;background:#ffdf2c!important;}
  .fk620-pluto{left:1.5%!important;top:34.9%!important;width:19.5%!important;background:#45ea14!important;}
  .fk620-gallerij{left:3.5%!important;top:48.8%!important;width:20%!important;background:#8624ee!important;color:#111!important;}
  .fk620-fronskop{left:24%!important;top:74.8%!important;width:52%!important;min-height:44px!important;background:#31dce9!important;font-size:clamp(22px,7.2vw,52px)!important;letter-spacing:.03em!important;}
}

@media (max-width:380px){
  .fk620-label{
    min-height:30px!important;
    padding:5px 8px!important;
    font-size:10px!important;
  }
  .fk620-fronskop{
    min-height:40px!important;
    font-size:26px!important;
  }
}

@media (min-width:769px){
  .fk600-desktop{display:block!important;}
  .fk600-mobile{display:none!important;}
}

@media (prefers-reduced-motion: reduce){
  .fronskop-brain-layer{animation:none!important;}
  .brain-fill,.brain-title{transition:none!important;}
}