:root{
  --red: #e10600;
  --yellow: #ffcc00;
  --ink: #0e0e0e;
  --surface: #f7f7f9;
  --card: #ffffff;
  --card-ink: #0f172a;
  --line: #dfe3ea;
  --muted: #6b7280;
  --shadow: 0 10px 30px rgba(2, 8, 23, .08);
}

*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

html,body{height:100%}
body{
  margin:0;
  color:var(--card-ink);
  background:
    radial-gradient(1200px 500px at 50% -200px, #fff 0, #f9fafc 50%, transparent 80%),
    linear-gradient(#ffffff, var(--surface));
  background-attachment: fixed;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
}

/* Header */
.site-header{
  position:fixed; inset:0 auto auto 0; right:0; height:64px;
  display:flex; align-items:center;
  background: var(--red);
  color:#fff; z-index:1000; font-weight:700; letter-spacing:.01em;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.site-header .brand{
  color:#fff; text-decoration:none; font-weight:800;
}
.site-header .nav-link{color:#ffe9e9}
.site-header .nav-link.active{font-weight:800; text-decoration:underline; text-underline-offset:4px}
.site-main{padding-top:84px}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px}
.card--soft{box-shadow: var(--shadow)}
.card--elevated{box-shadow: var(--shadow)}

/* Personen */
.person-card{
  border:1px solid var(--line);
  background:#fff; border-radius:14px; padding:.5rem; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.person-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(2,8,23,.09); border-color:#cbd5e1}
.person-card:focus{outline:3px solid var(--yellow)}
.person-name{display:block; font-weight:700; margin-top:.5rem; color:#111}
.person-photo img{object-fit:cover; width:100%; height:100%; border-radius:10px}

/* Detail card */
.detail-photo{
  width:120px; height:120px; border-radius:12px; overflow:hidden; border:1px solid var(--line);
}
.detail-photo img{width:100%; height:100%; object-fit:cover}

/* Stacked list utils */
.w-md-40{width:100%}
@media (min-width: 992px){ .w-md-40{width:40%} }

/* Footer */
.site-footer{
  border-top:4px solid var(--ink);
  background: linear-gradient(180deg, #ffe066, var(--yellow));
}

/* Form */
.form-control:focus{box-shadow: 0 0 0 .25rem rgba(225,6,0,.15); border-color:#ef4444}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .person-card{transition:none}
}

.activity-photo {
  width: 100%;
  max-width: 40%; /* of wat past in jouw design */
  flex-shrink: 0;
}

.activity-photo img {
  width: 100%;
  height: auto;
  object-fit: contain; /* of cover, als je liever bijsnijdt */
  display: block;
}

/* Niet-beschikbare tijdvakken duidelijk onderscheiden */
#timeslotList button:disabled {
  background-color: #d6d6d6;      /* donkerder grijs */
  color: #777;                    /* zachtere tekstkleur */
  text-decoration: line-through;  /* duidelijk niet beschikbaar */
  border-color: #aaa;
  cursor: not-allowed;
  opacity: 1;                     /* zorg dat het niet vervaagd oogt */
}

/* Actief geselecteerd tijdvak */
#timeslotList button.active:not(:disabled) {
  background-color: #212529;  /* donker */
  color: #fff;
  border-color: #212529;
}