.fk-speellijst{
  --fk-orange:#c9550e;
  --fk-orange-dark:#923905;
  --fk-ink:#16120f;
  --fk-wood:#f7f2e8;
  --fk-wood-line:#1f1711;
  --fk-paper:#f7e3c1;
  --fk-shadow:rgba(35,24,13,.22);
  max-width:1200px;
  margin:0 auto;
  padding:clamp(24px,5vw,64px) 12px 80px;
  background:#fff;
  color:var(--fk-ink);
  font-family:ui-monospace,"Courier New",monospace;
  box-sizing:border-box;
}
.fk-speellijst *{box-sizing:border-box}
.fk-title{
  margin:0 auto 26px;
  width:max-content;
  padding:8px 28px 10px;
  color:var(--fk-ink);
  font-size:clamp(34px,6vw,76px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  background:linear-gradient(90deg,rgba(201,85,14,.18),rgba(201,85,14,.36),rgba(201,85,14,.18));
  transform:rotate(-1deg);
}
.fk-drawer{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  perspective:1200px;
}
.fk-front{
  position:relative;
  z-index:4;
  width:100%;
  min-height:136px;
  display:grid;
  grid-template-columns:minmax(300px,460px) 1fr 82px;
  align-items:center;
  gap:26px;
  padding:18px clamp(18px,4vw,54px);
  cursor:pointer;
  border:2px solid var(--fk-wood-line);
  border-bottom-width:3px;
  border-radius:8px 8px 3px 3px;
  background:
    radial-gradient(circle at 20% 30%,rgba(80,45,20,.12),transparent 18%),
    linear-gradient(90deg,rgba(255,255,255,.50),rgba(255,255,255,.12) 18%,rgba(60,35,18,.04) 55%,rgba(255,255,255,.36)),
    repeating-linear-gradient(0deg,rgba(40,24,12,.045),rgba(40,24,12,.045) 1px,transparent 1px,transparent 7px),
    linear-gradient(180deg,#fffdf7,#eee5d6 62%,#d7c5ab);
  box-shadow:0 7px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -10px 22px rgba(70,43,20,.10);
  font-family:inherit;
  color:inherit;
  text-align:left;
  transition:transform .28s ease, box-shadow .28s ease;
}
.fk-drawer + .fk-drawer .fk-front{margin-top:8px}
.fk-front:hover{transform:translateY(1px);box-shadow:0 5px 0 rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.7)}
.fk-drawer.is-open .fk-front{box-shadow:0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7);}
.fk-label{
  display:block;
  width:100%;
  min-height:92px;
  padding:15px 24px 13px;
  background:linear-gradient(180deg,#fff5e1,#e9d0aa);
  border:4px solid #251914;
  border-radius:5px;
  outline:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 0 5px rgba(37,25,20,.28), inset 0 1px 0 rgba(255,255,255,.55), 0 5px 9px rgba(0,0,0,.20);
}
.fk-label strong{
  display:block;
  color:var(--fk-orange);
  font-size:clamp(39px,5.8vw,74px);
  line-height:.88;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.fk-label small{font-size:.45em;color:var(--fk-ink)}
.fk-label em{
  display:block;
  margin-top:8px;
  color:var(--fk-ink);
  font-style:normal;
  font-size:clamp(14px,1.65vw,22px);
  line-height:1.12;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.fk-handle{
  justify-self:center;
  width:210px;
  max-width:25vw;
  height:40px;
  border:9px solid #19120f;
  border-top:0;
  border-radius:0 0 48px 48px;
  background:linear-gradient(180deg,#42362f,#17120f);
  box-shadow:0 7px 12px rgba(0,0,0,.24), inset 0 -6px 0 rgba(255,255,255,.12);
}
.fk-handle:before,.fk-handle:after{
  content:"";
  position:absolute;
  width:25px;height:25px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8c7768,#201814 58%,#090706);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.fk-handle:before{margin-left:-38px;margin-top:-4px}
.fk-handle:after{margin-left:calc(min(210px,25vw) - 8px);margin-top:-4px}
.fk-chevron{
  justify-self:end;
  width:44px;height:44px;
  border-right:6px solid var(--fk-orange);
  border-bottom:6px solid var(--fk-orange);
  transform:rotate(45deg);
  transition:transform .35s ease;
}
.fk-drawer.is-open .fk-chevron{transform:rotate(225deg)}
.fk-body{
  height:0;
  opacity:0;
  overflow:hidden;
  transition:height .68s cubic-bezier(.18,.9,.18,1), opacity .25s ease;
}
.fk-drawer.is-open > .fk-body{opacity:1}
.fk-box{
  position:relative;
  margin:0 2.2% 18px;
  padding:clamp(22px,3.8vw,45px) clamp(18px,3vw,34px) 82px;
  background:
    linear-gradient(90deg,rgba(65,38,18,.26) 0 26px,transparent 26px calc(100% - 26px),rgba(65,38,18,.26) calc(100% - 26px)),
    linear-gradient(180deg,#c7a87b,#ead4b2 18%,#f5e8cf 48%,#c6a377);
  border-left:3px solid #21160f;
  border-right:3px solid #21160f;
  box-shadow:inset 0 28px 26px rgba(30,18,8,.26), 0 30px 44px rgba(0,0,0,.18);
  transform-origin:top center;
  animation:fkOpenDrawer .7s cubic-bezier(.16,.9,.18,1) both;
}
@keyframes fkOpenDrawer{
  from{transform:translateY(-76px) scaleY(.86) rotateX(-10deg);opacity:.35}
  to{transform:translateY(0) scaleY(1) rotateX(0);opacity:1}
}
.fk-box:before{
  content:"";
  position:absolute;
  left:-3.2%;right:-3.2%;bottom:0;height:86px;
  background:
    repeating-linear-gradient(0deg,rgba(40,24,12,.04),rgba(40,24,12,.04) 1px,transparent 1px,transparent 7px),
    linear-gradient(180deg,#fffaf1,#e5d8c5 65%,#cabaa1);
  border:3px solid #21160f;
  border-top:2px solid rgba(33,22,15,.55);
  border-radius:0 0 8px 8px;
  box-shadow:0 -8px 18px rgba(60,35,18,.10),0 9px 13px rgba(0,0,0,.14);
  z-index:3;
}
.fk-knob{
  position:absolute;
  z-index:6;
  left:50%;bottom:22px;
  width:38px;height:38px;
  transform:translateX(-50%);
  border-radius:50%;
  border:2px solid #0c0908;
  background:radial-gradient(circle at 33% 28%,#7d6a5a,#2a211d 55%,#090706);
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.15);
  cursor:pointer;
}
.fk-knob:hover{filter:brightness(1.18);transform:translateX(-50%) scale(1.06)}
.fk-file{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(180px,285px) 1fr;
  gap:clamp(18px,3vw,38px);
  align-items:center;
  min-height:310px;
  padding:clamp(18px,3vw,34px);
  border:1px solid rgba(45,30,16,.35);
  border-radius:0 18px 18px 0;
  background:
    radial-gradient(circle at 80% 15%,rgba(130,77,25,.10),transparent 20%),
    linear-gradient(180deg,#f9e5c5,#f0d4a8 72%,#e2bc82);
  box-shadow:0 12px 0 rgba(84,55,25,.22),0 18px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.45);
}
.fk-file:after{
  content:"";
  position:absolute;
  right:-1px;top:0;
  width:84px;height:46px;
  border-radius:0 17px 0 15px;
  background:#e9c18a;
  border-left:1px solid rgba(45,30,16,.22);
  border-bottom:1px solid rgba(45,30,16,.22);
}
.fk-photo{margin:0;transform:rotate(-2deg)}
.fk-photo img{
  display:block;width:100%;max-height:315px;object-fit:cover;
  border:11px solid #fff;background:#fff;
  box-shadow:0 8px 17px rgba(0,0,0,.27);
}
.fk-info{position:relative;z-index:1}
.fk-info h2{
  margin:0;
  color:var(--fk-orange);
  font-size:clamp(34px,5.2vw,66px);
  line-height:.95;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.fk-info h2 small{font-size:.45em;color:var(--fk-ink)}
.fk-by{
  margin:6px 0 18px;
  font-size:clamp(14px,1.8vw,21px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.fk-sectiontitle{
  margin:0 0 8px;
  color:var(--fk-orange);
  font-size:clamp(15px,1.8vw,19px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.fk-dates{list-style:none;margin:0;padding:0}
.fk-dates li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:9px 0;
  border-top:1px dashed rgba(35,22,12,.42);
  font-size:clamp(15px,1.65vw,20px);
  font-weight:700;
}
.fk-dates b{display:inline-block;min-width:132px;color:#1a120d}
.fk-dates em{font-style:normal;text-transform:uppercase;letter-spacing:.025em}
.fk-ticket{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:8px 12px;
  background:var(--fk-orange);
  color:#fff!important;
  border:2px solid var(--fk-orange-dark);
  border-radius:5px;
  box-shadow:0 3px 0 rgba(75,28,5,.35);
  text-decoration:none!important;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:900;
  font-size:15px;
  transition:transform .13s ease,filter .13s ease,box-shadow .13s ease;
}
.fk-ticket:before{content:"🎟";margin-right:7px;font-size:.92em}
.fk-ticket:hover{transform:translateY(2px);box-shadow:0 1px 0 rgba(75,28,5,.35);filter:brightness(1.08)}
.fk-box-archive{padding-top:clamp(18px,3vw,34px)}
.fk-archive-grid{position:relative;z-index:2;display:grid;gap:24px}
.fk-file-archive{grid-template-columns:minmax(145px,235px) 1fr;min-height:260px;padding:clamp(16px,2.4vw,26px)}
.fk-file-archive .fk-photo img{max-height:240px}
.fk-file-archive .fk-info h2{font-size:clamp(30px,4.3vw,54px)}
.fk-dates-small li{font-size:15px;padding:6px 0;gap:10px}
.fk-dates-small b{min-width:116px}
.fk-dates-small .fk-ticket{min-width:86px;padding:5px 8px;font-size:12px}
.fk-columns{columns:2;column-gap:24px;display:block}
.fk-columns li{break-inside:avoid;display:grid;grid-template-columns:1fr auto}
.fk-momentje-archive{grid-template-columns:minmax(150px,220px) 1fr}
@media(max-width:850px){
  .fk-front{grid-template-columns:1fr 54px;min-height:112px;gap:10px;padding:14px}
  .fk-handle{display:none}
  .fk-chevron{width:32px;height:32px;border-width:5px}
  .fk-label{min-height:80px;padding:12px 16px}
  .fk-label strong{font-size:clamp(34px,11vw,52px)}
  .fk-label em{font-size:13px}
  .fk-file,.fk-file-archive,.fk-momentje-archive{grid-template-columns:1fr;min-height:0}
  .fk-photo{max-width:310px;margin:0 auto;transform:rotate(-1deg)}
  .fk-box{padding-left:12px;padding-right:12px;padding-bottom:74px}
  .fk-dates li{grid-template-columns:1fr;gap:8px}
  .fk-ticket{width:max-content;min-width:128px}
  .fk-columns{columns:1}
}
@media(max-width:520px){
  .fk-speellijst{padding-left:6px;padding-right:6px}
  .fk-title{font-size:34px}
  .fk-front{min-height:98px}
  .fk-label strong{font-size:32px;letter-spacing:.035em}
  .fk-label em{font-size:11px}
  .fk-box:before{height:72px}
  .fk-knob{bottom:18px}
  .fk-info h2{font-size:36px}
  .fk-dates b{min-width:0;display:block;margin-bottom:2px}
}

/* v4: archief is enkel datum + plek, zonder ticketknoppen */
.fk-archive .fk-dates li{
  grid-template-columns: 1fr;
}
.fk-archive .fk-dates-small li{
  padding: 4px 0;
}
.fk-archive .fk-dates-small span{
  width: 100%;
}


/* v5: stevige mobiele versie zodat de dossierlabels niet uit beeld schuiven */
.fk-speellijst{
  width:100%;
  max-width:min(1200px, 100vw);
  overflow-x:hidden;
}
.fk-drawer,
.fk-front,
.fk-body,
.fk-box{
  max-width:100%;
}
.fk-label,
.fk-label strong,
.fk-label em{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

@media(max-width:700px){
  .fk-speellijst{
    padding:22px 10px 58px;
  }
  .fk-title{
    margin-bottom:18px;
    font-size:34px;
    letter-spacing:.08em;
  }
  .fk-drawer{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .fk-front{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    min-height:118px;
    padding:12px 14px;
    overflow:hidden;
    border-radius:7px 7px 3px 3px;
  }
  .fk-label{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    max-width:calc(100% - 54px);
    min-height:82px;
    padding:12px 13px 10px;
    border-width:3px;
    box-shadow:0 0 0 4px rgba(37,25,20,.24), inset 0 1px 0 rgba(255,255,255,.55), 0 4px 7px rgba(0,0,0,.16);
  }
  .fk-label strong{
    font-size:clamp(26px,9vw,42px);
    line-height:.94;
    letter-spacing:.035em;
    white-space:normal;
  }
  .fk-label small{
    font-size:.48em;
    white-space:nowrap;
  }
  .fk-label em{
    font-size:clamp(10px,3.4vw,14px);
    line-height:1.05;
    letter-spacing:.035em;
  }
  .fk-chevron{
    flex:0 0 34px;
    width:34px;
    height:34px;
    margin-right:2px;
    border-width:5px;
  }
  .fk-handle{display:none !important;}

  .fk-box{
    margin:0 0 16px;
    padding:16px 10px 74px;
    border-left-width:2px;
    border-right-width:2px;
  }
  .fk-box:before{
    left:-2px;
    right:-2px;
    height:74px;
  }
  .fk-file,
  .fk-file-archive,
  .fk-momentje-archive{
    grid-template-columns:1fr !important;
    gap:16px;
    padding:16px 14px;
    border-radius:0 14px 14px 0;
  }
  .fk-file:after{width:52px;height:34px;}
  .fk-photo{
    max-width:230px;
    margin:0 auto;
  }
  .fk-photo img{
    max-height:240px;
    border-width:8px;
  }
  .fk-info h2{
    font-size:clamp(30px,10vw,42px);
    line-height:.95;
  }
  .fk-by{font-size:13px;line-height:1.1;}
  .fk-dates li{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    font-size:14px;
  }
  .fk-dates b{
    min-width:0;
    display:block;
  }
  .fk-ticket{
    min-width:86px;
    padding:7px 9px;
    font-size:12px;
  }
  .fk-archive .fk-dates li{grid-template-columns:1fr;}
  .fk-columns{columns:1;}
}

@media(max-width:390px){
  .fk-speellijst{padding-left:6px;padding-right:6px;}
  .fk-front{min-height:108px;padding:10px;gap:8px;}
  .fk-label{max-width:calc(100% - 44px);padding:10px 11px;min-height:76px;}
  .fk-label strong{font-size:27px;letter-spacing:.02em;}
  .fk-label em{font-size:10px;}
  .fk-chevron{flex-basis:28px;width:28px;height:28px;border-width:4px;}
  .fk-dates li{grid-template-columns:1fr;}
  .fk-ticket{width:max-content;min-width:96px;}
}