/* Alleen de trajectenpagina. Prijzen, JS-carrousel, footer en mobile navigatie blijven van het bestaande thema. */
body.tl-playful{background:#faf8f4}
body.tl-playful .page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:26px;padding:42px 48px 38px;
  border:1px solid #f3d9c7;border-radius:35px;
  background:radial-gradient(circle at 100% 5%,rgba(250,145,81,.24) 0,transparent 37%),linear-gradient(120deg,#fffaf3 0%,#fff0e3 100%);
  box-shadow:0 15px 48px rgba(141,78,36,.065);
}
body.tl-playful .page-hero:before,body.tl-playful .page-hero:after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
body.tl-playful .page-hero:before{width:240px;height:240px;right:-115px;top:-125px;border:32px solid rgba(247,153,85,.15)}
body.tl-playful .page-hero:after{width:140px;height:140px;left:-94px;bottom:-80px;background:rgba(250,139,74,.12)}
body.tl-playful .page-hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #f0cfb8;
  border-radius:999px;padding:7px 14px;margin-bottom:22px;font-size:10px;letter-spacing:.13em;
  box-shadow:0 5px 15px rgba(141,78,36,.04);color:#b34f1b
}
body.tl-playful .page-hero .eyebrow:before{display:none}
body.tl-playful .page-hero .eyebrow span{font-size:15px;line-height:1;color:#f07931}
body.tl-playful .page-hero h1{max-width:840px;font-weight:700;font-size:clamp(44px,5.65vw,75px);line-height:1.09;letter-spacing:-.065em}
body.tl-playful .page-hero h1 em{color:#bf4d1b}
body.tl-playful .page-hero .intro{font-size:15px;line-height:1.7;margin-top:19px;max-width:660px;color:#4f5c59}
body.tl-playful .tl-journey-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;max-width:660px;position:relative;margin-top:28px
}
body.tl-playful .tl-journey-strip:before{content:'';position:absolute;top:28px;left:14%;right:14%;border-top:2px dashed #ecc2a5}
body.tl-playful .tl-journey-item{
  display:flex;align-items:center;gap:11px;min-width:0;position:relative;z-index:1;
  background:rgba(255,255,255,.88);border:1px solid #efd8c6;padding:11px 12px;border-radius:20px;
  box-shadow:0 8px 18px rgba(127,60,26,.045)
}
body.tl-playful .tl-journey-icon{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;font-size:21px;background:#ffecd9;border-radius:13px}
body.tl-playful .tl-journey-item:nth-child(2) .tl-journey-icon{background:#ffe0c7}
body.tl-playful .tl-journey-item:nth-child(3) .tl-journey-icon{background:#e3f1e8}
body.tl-playful .tl-journey-item strong{display:block;font-size:12px;color:#263832;line-height:1.3;font-weight:800}
body.tl-playful .tl-journey-item small{display:block;font-size:10px;color:#7b7771;line-height:1.4;margin-top:3px}
body.tl-playful .tl-traj-section{padding-top:29px;padding-bottom:68px}
body.tl-playful .tl-carousel-heading{margin-bottom:16px;align-items:center;gap:10px}
body.tl-playful .tl-carousel-heading>p{
  color:#ae4c1c;font-size:13px;line-height:1.45;font-weight:800;
  display:inline-flex;align-items:center;gap:8px;background:#fff0e4;
  border:1px solid #f2d7c6;padding:9px 14px;border-radius:999px
}
body.tl-playful .tl-carousel-heading>p span{font-size:20px;line-height:0.8}
body.tl-playful .tl-carousel-controls button{
  border:1px solid #eebda0;background:#fff;border-radius:50%;width:48px;height:48px;
  box-shadow:0 6px 13px rgba(150,75,33,.07);color:#cb581f
}
body.tl-playful .tl-carousel-controls button:not(:disabled):hover{background:#ffdeca;transform:translateY(-2px) scale(1.04)}
body.tl-playful .tl-carousel-controls button:disabled{opacity:.36}
body.tl-playful .tl-carousel-count{font-size:13px;font-weight:850;color:#263832}
body.tl-playful .trajectory-grid.tl-carousel-track{
  grid-auto-columns:calc((100% - 23px)/2);gap:19px;padding:8px 5px 24px;scroll-padding-inline:5px
}
body.tl-playful .tl-carousel-track>.trajectory{
  position:relative;overflow:hidden;border:1.5px solid #ead6c5;border-radius:32px;
  padding:26px 29px 26px;background:linear-gradient(145deg,#fffefa 0%,#fff8f1 100%);
  box-shadow:0 13px 32px rgba(95,50,24,.075);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
body.tl-playful .tl-carousel-track>.trajectory:hover{transform:translateY(-3px);box-shadow:0 17px 42px rgba(95,50,24,.12)}
body.tl-playful .tl-carousel-track>.trajectory:before{
  content:'';position:absolute;width:175px;height:175px;border-radius:50%;background:rgba(243,145,87,.1);
  top:-105px;right:-65px;pointer-events:none
}
body.tl-playful .tl-carousel-track>.trajectory.tl-spoed{
  background:linear-gradient(148deg,#fff0e0 0%,#fffaf5 72%);border-color:#eeb68d
}
body.tl-playful .tl-carousel-track>.trajectory.tl-turbo{
  background:linear-gradient(145deg,#f0f8f3 0%,#fffdf8 83%);border-color:#c6decf
}
body.tl-playful .tl-carousel-track>.trajectory.tl-turbo:before{background:rgba(115,174,136,.12)}
body.tl-playful .tl-card-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:8px}
body.tl-playful .tl-route-tag{display:inline-flex;align-items:center;gap:6px;color:#bd521d;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
body.tl-playful .tl-route-tag b{font-size:11px;line-height:1;display:inline-grid;place-items:center;color:#fff;background:#ec7539;border-radius:8px;width:27px;height:27px;letter-spacing:0}
body.tl-playful .tl-turbo .tl-route-tag{color:#28664c}
body.tl-playful .tl-turbo .tl-route-tag b{background:#2b8a64}
body.tl-playful .tl-card-icon{
  display:grid;place-items:center;flex-shrink:0;width:51px;height:51px;border-radius:17px;
  background:#ffebdc;border:1px solid #f4d4bd;font-size:26px;transform:rotate(7deg)
}
body.tl-playful .tl-spoed .tl-card-icon{background:#ffdfc9;border-color:#efbc9d}
body.tl-playful .tl-turbo .tl-card-icon{background:#e0efe5;border-color:#c0dfcb}
body.tl-playful .card-heading{align-items:flex-start;margin-bottom:9px;gap:13px}
body.tl-playful .card-heading h3{font-size:clamp(33px,3.5vw,43px);font-weight:800;letter-spacing:-.055em}
body.tl-playful .pace{height:auto;gap:3px;padding:8px 10px;border:1px solid #f0d2bf;border-radius:14px;background:#fff7ef}
body.tl-playful .pace i{width:6px;border-radius:3px}
body.tl-playful .tl-turbo .pace{background:#eaf4ed;border-color:#cfe3d6}
body.tl-playful .trajectory>p:not(.card-fit){font-size:13px;line-height:1.65;min-height:46px;color:#5a6862}
body.tl-playful .tl-card-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
body.tl-playful .tl-card-chips span{
  display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border-radius:999px;
  font-size:10px;font-weight:750;line-height:1.25;color:#80502f;border:1px solid #f1d8c7;background:rgba(255,255,255,.85)
}
body.tl-playful .tl-turbo .tl-card-chips span{border-color:#d3e9db;color:#326e52}
body.tl-playful .trajectory .duration{
  margin-top:20px;padding:17px 18px 18px;background:rgba(255,255,255,.9);
  border:1px solid #eee1d5;border-radius:21px
}
body.tl-playful .trajectory .duration>span{font-size:10px;letter-spacing:.065em;font-weight:700;margin-bottom:8px}
body.tl-playful .trajectory .duration>strong{font-size:53px;line-height:1.11;font-weight:750;letter-spacing:-.075em;color:#213b36}
body.tl-playful .trajectory .duration>strong.own-pace{font-size:31px;line-height:1.25;padding:4px 0}
body.tl-playful .trajectory .duration strong b{font-size:24px;font-weight:650}
body.tl-playful .trajectory .duration small{font-size:11px;line-height:1.5}
body.tl-playful .trajectory .payment{
  margin-top:12px;padding:15px 16px;gap:9px;align-items:center;
  background:rgba(255,244,232,.9);border:1px solid #f1dfcd;border-radius:21px;
  grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)
}
body.tl-playful .tl-spoed .payment{background:rgba(255,255,255,.7)}
body.tl-playful .tl-turbo .payment{background:rgba(242,250,244,.8);border-color:#dcebe1}
body.tl-playful .payment>div>span{font-size:10px;line-height:1.5;white-space:normal}
body.tl-playful .payment strong{font-size:31px}
body.tl-playful .lesson-rate-old{font-size:13px}
body.tl-playful .payment-arrow{font-size:21px;padding-top:10px;color:#dc772d;text-align:center}
body.tl-playful .trajectory .card-fit{
  position:relative;margin:17px 0 20px;padding-left:21px;font-size:11px;line-height:1.6;
  color:#52635a;font-weight:650
}
body.tl-playful .trajectory .card-fit:before{content:'✓';position:absolute;left:0;top:0;color:#2b9265;font-weight:850;font-size:14px}
body.tl-playful .trajectory>.button,
body.tl-playful .trajectory>.button.outline{
  display:flex;min-height:55px;justify-content:space-between;align-items:center;
  padding:7px 8px 7px 19px;border-radius:999px;border:1px solid #e86929;
  background:#e86929;color:#fff;font-size:13px;font-weight:850;
  box-shadow:0 9px 22px rgba(226,103,39,.19);transition:transform .2s ease,background .2s ease
}
body.tl-playful .trajectory>.button span{display:grid;place-items:center;flex-shrink:0;width:39px;height:39px;border-radius:50%;background:#fff;color:#d96120;font-size:19px}
body.tl-playful .trajectory>.button:hover{background:#c95419;transform:translateY(-1px)}
body.tl-playful .tl-turbo>.button{background:#287759;border-color:#287759;box-shadow:0 9px 22px rgba(36,112,80,.16)}
body.tl-playful .tl-turbo>.button span{color:#287759}
body.tl-playful .tl-turbo>.button:hover{background:#1c6046}
body.tl-playful .trajectory-note{max-width:none;margin-top:6px;padding:17px 19px;border:1px solid #e9dfd5;border-radius:18px;background:#fffdf9}
body.tl-playful .trajectory-note>span{display:grid;place-items:center;flex-shrink:0;height:27px;width:27px;border-radius:50%;background:#fff0e3;color:#bf5c25}
body.tl-playful .trajectory-note p{font-size:11px}
@media(max-width:760px){
  body.tl-playful .page-hero{width:calc(100% - 30px);margin-top:15px;padding:23px 19px 23px;border-radius:27px}
  body.tl-playful .page-hero:before{width:142px;height:142px;right:-80px;top:-65px;border-width:20px}
  body.tl-playful .page-hero h1{font-size:clamp(33px,8.7vw,44px);line-height:1.13;overflow-wrap:break-word}
  body.tl-playful .page-hero .eyebrow{padding:6px 11px;font-size:9px;margin-bottom:15px}
  body.tl-playful .page-hero .intro{font-size:12px;line-height:1.65;margin-top:13px}
  body.tl-playful .tl-journey-strip{gap:5px;margin-top:20px}
  body.tl-playful .tl-journey-strip:before{display:none}
  body.tl-playful .tl-journey-item{display:flex;flex-direction:column;gap:5px;text-align:center;padding:9px 3px 10px;border-radius:15px}
  body.tl-playful .tl-journey-icon{width:33px;height:33px;border-radius:11px;font-size:19px}
  body.tl-playful .tl-journey-item strong{font-size:10px}
  body.tl-playful .tl-journey-item small{font-size:9px;margin-top:0}
  body.tl-playful .tl-traj-section{padding-top:24px;padding-bottom:49px}
  body.tl-playful .tl-carousel-heading>p{font-size:10px;padding:8px 10px;max-width:165px;gap:5px}
  body.tl-playful .tl-carousel-heading>p span{font-size:17px}
  body.tl-playful .tl-carousel-controls{gap:4px}
  body.tl-playful .tl-carousel-controls button{height:36px;width:36px;font-size:18px}
  body.tl-playful .tl-carousel-count{min-width:39px;font-size:11px}
  body.tl-playful .trajectory-grid.tl-carousel-track{grid-auto-columns:calc(100% - 32px);gap:12px;padding:6px 3px 20px;scroll-padding-inline:3px}
  body.tl-playful .tl-carousel-track>.trajectory{padding:21px 20px 20px;border-radius:27px}
  body.tl-playful .tl-card-topline{margin-bottom:11px}
  body.tl-playful .tl-card-icon{width:43px;height:43px;font-size:23px;border-radius:15px}
  body.tl-playful .tl-card-chips{margin-top:12px}
  body.tl-playful .card-heading h3{font-size:32px}
  body.tl-playful .trajectory>p:not(.card-fit){min-height:0;font-size:12px}
  body.tl-playful .trajectory .duration{margin-top:16px;padding:14px 15px;border-radius:17px}
  body.tl-playful .trajectory .duration>strong{font-size:47px}
  body.tl-playful .trajectory .duration>strong.own-pace{font-size:27px}
  body.tl-playful .trajectory .payment{padding:13px 12px;border-radius:17px;gap:7px}
  body.tl-playful .payment>div>span{font-size:9px}
  body.tl-playful .payment strong{font-size:29px}
  body.tl-playful .trajectory-note{margin-top:3px;padding:14px 12px}
  body.tl-playful .trajectory-note p{font-size:10px}
}
@media(max-width:350px){
  body.tl-playful .page-hero h1{font-size:32px}
  body.tl-playful .tl-carousel-heading{flex-wrap:wrap}
  body.tl-playful .trajectory .payment{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:4px}
  body.tl-playful .payment strong{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  body.tl-playful .tl-carousel-track>.trajectory,
  body.tl-playful .trajectory>.button,
  body.tl-playful .tl-carousel-controls button{transition:none}
}
/* TL_VECTOR_ICONS_V1: bij elkaar passende lijniconen i.p.v. emoji */
body.tl-playful .tl-journey-icon svg{display:block;width:23px;height:23px}
body.tl-playful .tl-card-icon svg{display:block;width:27px;height:27px}
body.tl-playful .tl-journey-icon,
body.tl-playful .tl-card-icon{color:#c5632c}
body.tl-playful .tl-journey-item:nth-child(2) .tl-journey-icon,
body.tl-playful .tl-spoed .tl-card-icon{color:#e46827}
body.tl-playful .tl-journey-item:nth-child(3) .tl-journey-icon,
body.tl-playful .tl-turbo .tl-card-icon{color:#2b7a58}
@media(max-width:760px){
 body.tl-playful .tl-journey-icon svg{width:20px;height:20px}
 body.tl-playful .tl-card-icon svg{width:25px;height:25px}
}