@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#201E1C; --ink2:#4A4640; --paper:#EFECE4; --card:#F9F7F2;
  --red:#C0271C; --red2:#8E1C14; --rule:rgba(32,30,28,.18);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.5;
  padding:28px 18px 64px;
}
.wrap{max-width:640px; margin:0 auto}
a{color:var(--red)}

.disp{font-family:Oswald,'Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.04em}
.eyebrow{font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.22em; font-size:11px; color:var(--ink2)}
.muted{color:var(--ink2)}

/* kop */
.head{display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:2px solid var(--ink)}
.mark{
  width:48px; height:48px; border-radius:50%; border:2px solid var(--ink); background:var(--ink);
  color:var(--paper); display:flex; align-items:center; justify-content:center; flex:none;
  font-family:Oswald,sans-serif; font-weight:700; font-size:22px;
}
.mark span{display:block; border-bottom:2px solid var(--red); line-height:1; padding-bottom:2px}
.head h1{margin:0; font-size:19px; font-weight:600; letter-spacing:.06em}
.head p{margin:3px 0 0}

.intro{margin:22px 0 26px; font-size:15px; line-height:1.6; color:var(--ink2); max-width:52ch}
.intro strong{color:var(--ink); font-weight:600}

.daylab{display:flex; align-items:baseline; gap:10px; margin:26px 0 10px}
.daylab h2{margin:0; font-size:17px; font-weight:600}
.daylab hr{flex:1; border:0; border-top:1px solid var(--rule)}

/* het blok als ticket — het herkenningspunt van deze pagina */
.ticket{
  position:relative; display:flex; align-items:center; gap:16px; width:100%;
  background:var(--card); border:1.5px solid var(--ink); border-radius:3px;
  padding:16px 18px 16px 24px; margin-bottom:10px; color:inherit; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.ticket::before{content:''; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--ink)}
.ticket:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink)}
.ticket:focus-visible{outline:3px solid var(--red); outline-offset:2px}
.ticket.sel{box-shadow:4px 4px 0 var(--red); transform:translate(-2px,-2px); border-color:var(--red)}
.ticket.sel::before{background:var(--red)}
.ticket.is-taken{
  opacity:.72; transform:none; box-shadow:none;
  background:repeating-linear-gradient(135deg,var(--card),var(--card) 7px,#EDE9E0 7px,#EDE9E0 14px);
}
.t-part{font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:15px}
.t-time{font-size:13px; color:var(--ink2); margin-top:2px}
.t-cta{margin-left:auto; font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--red); font-weight:600}
.stamp{
  margin-left:auto; transform:rotate(-7deg); border:2px solid var(--red2); color:var(--red2);
  border-radius:2px; padding:3px 9px; font-family:Oswald,sans-serif; font-weight:700;
  letter-spacing:.14em; font-size:12px; opacity:.85;
}

/* panelen en formulieren */
.panel{
  background:var(--card); border:1.5px solid var(--ink); border-left:7px solid var(--red);
  border-radius:3px; padding:20px; margin:14px 0 4px;
}
.panel h3{margin:0 0 4px; font-size:16px; font-weight:600; font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.06em}
.panel .sub{margin:0 0 18px; font-size:13px; color:var(--ink2)}

label.f{display:block; margin-bottom:14px}
label.f > span, .lbl{
  display:block; font-family:Oswald,sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:11px; color:var(--ink2); margin-bottom:5px;
}
input[type=text],input[type=email],input[type=password],input[type=date],textarea{
  width:100%; font:inherit; font-size:15px; padding:10px 12px; background:#fff;
  border:1.5px solid var(--rule); border-radius:2px; color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--red); border-color:var(--red)}
textarea{min-height:88px; resize:vertical}

label.chk{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--ink2); margin-bottom:11px; cursor:pointer}
label.chk input{margin-top:3px; width:16px; height:16px; accent-color:var(--red); flex:none}

/* valstrik voor bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.btn{
  font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.12em; font-weight:600;
  font-size:13px; padding:12px 22px; border:1.5px solid var(--ink); background:var(--ink);
  color:var(--paper); border-radius:2px; cursor:pointer;
}
.btn:hover{background:var(--red); border-color:var(--red)}
.btn:focus-visible{outline:3px solid var(--red); outline-offset:2px}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
.btn.sm{padding:7px 13px; font-size:11px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.note{border-left:3px solid var(--red); padding-left:12px; font-size:13.5px; color:var(--ink2); line-height:1.55}
.err{background:#F7E4E2; border:1.5px solid var(--red2); color:var(--red2); padding:11px 14px; border-radius:2px; font-size:13.5px; margin-bottom:14px}
.ok{background:#E7EDE4; border:1.5px solid #4C6B3C; color:#38512C; padding:11px 14px; border-radius:2px; font-size:13.5px; margin-bottom:14px}
.empty{border:1.5px dashed var(--rule); border-radius:3px; padding:26px; text-align:center; color:var(--ink2); font-size:14px}

/* beheer */
.admin-row{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--rule); padding:13px 0; flex-wrap:wrap}
.admin-row.past{opacity:.5}
.admin-row .d-date{min-width:94px; font-size:14px}
.admin-row .right{margin-left:auto}
.badge{
  font-family:Oswald,sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  padding:4px 9px; border-radius:2px; cursor:pointer;
}
.badge.on{background:var(--ink); color:var(--paper)}
.badge.bk{border-color:var(--red); color:var(--red); cursor:default}
.badge.add{border-style:dashed; color:var(--ink2)}
.badge:focus-visible{outline:3px solid var(--red); outline-offset:2px}

.card-bk{background:#fff; border:1px solid var(--rule); border-radius:2px; padding:12px 14px; font-size:13.5px; line-height:1.6; margin-top:8px}

.foot{margin-top:44px; padding-top:16px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.link{
  background:none; border:0; padding:0; font:inherit; font-size:12px; color:var(--ink2);
  text-decoration:underline; cursor:pointer; letter-spacing:.04em;
}
.link:hover{color:var(--red)}

@media (prefers-reduced-motion: reduce){ .ticket{transition:none} }
@media (max-width:480px){
  .ticket{flex-wrap:wrap; gap:8px}
  .t-cta,.stamp{margin-left:0}
  .admin-row .right{margin-left:0}
}