:root {
  --achter: #15121f;
  --vlak: #211c30;
  --vlak2: #2b2540;
  --tekst: #f3efe6;
  --zacht: #b9b2c9;
  --geel: #ffd23f;
  --cyaan: #3ad1e6;
  --rood: #ff5a5f;
  --groen: #5ee08a;
  --net1: #3a7bff;
  --net2: #ff5a5f;
  --net3: #5ee08a;
  --hoek: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--achter);
  color: var(--tekst);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--cyaan); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--geel); outline-offset: 2px; border-radius: 6px; }

/* ---------- Kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--achter) 85%, transparent);
  padding: calc(env(safe-area-inset-top) + 0.75rem) 1rem 0.75rem;
}
.kop-binnen { max-width: 70rem; margin: 0 auto; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.logo {
  margin: 0;
  font: italic 900 2.4rem/1 "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
  letter-spacing: 0.06em;
  background: repeating-linear-gradient(180deg, var(--geel) 0 0.18em, #ff9f1c 0.18em 0.36em, var(--rood) 0.36em 0.54em, #c13dd6 0.54em 0.72em);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ondertitel { margin: 0; color: var(--zacht); font-size: 1rem; }

.dagen {
  max-width: 70rem; margin: 0.75rem auto 0;
  display: flex; gap: 0.4rem; align-items: center; overflow-x: auto; scrollbar-width: none;
}
.dagen::-webkit-scrollbar { display: none; }
.dagen a {
  flex: 0 0 auto; min-width: 3.4rem; min-height: 3.4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--vlak); border: 2px solid transparent; border-radius: 12px;
  color: var(--tekst); text-decoration: none; padding: 0.3rem 0.6rem;
}
.dagen a[aria-current="page"] { border-color: var(--geel); background: var(--vlak2); }
.dag-naam { font-size: 0.8rem; color: var(--zacht); text-transform: uppercase; letter-spacing: 0.08em; }
.dag-nr { font-size: 1.3rem; font-weight: 800; }
.maand { color: var(--zacht); padding-left: 0.5rem; white-space: nowrap; }

/* ---------- Inhoud ---------- */
main { max-width: 70rem; margin: 0 auto; padding: 0.5rem 1rem 2rem; outline: none; }
.laden { color: var(--zacht); padding: 2rem 0; }
.dagkop h2 { margin: 0.5rem 0 0; font-size: 1.6rem; }
.dagkop h2::first-letter { text-transform: uppercase; }
.samenvatting { margin: 0.2rem 0 1rem; color: var(--zacht); }

.zenders { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.zender { background: var(--vlak); border-radius: var(--hoek); padding: 0.75rem 0.75rem 0.25rem; }
.zendernaam { margin: 0 0 0.5rem; font-size: 1.15rem; display: flex; align-items: center; gap: 0.6rem; }
.net {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--net1); color: #fff; font-weight: 900;
}
.zender:nth-child(2) .net { background: var(--net2); }
.zender:nth-child(3) .net { background: var(--net3); color: #102; }

.programmas { list-style: none; margin: 0; padding: 0; }
.prog { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.5rem; padding: 0.6rem 0.25rem; border-top: 1px solid #ffffff14; }
.prog:first-child { border-top: 0; }
.tijd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--geel); }
.titel { margin: 0; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.omroep {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: 0.12em;
  background: #ffffff1a; color: var(--zacht);
}
.beschrijving {
  margin: 0.2rem 0 0; color: var(--zacht); font-size: 0.92rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prog.nu { background: #ffd23f14; border-radius: 10px; }
.nu-label { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 700; color: var(--achter); background: var(--geel); padding: 0 0.4rem; border-radius: 4px; vertical-align: 0.12em; }

.archief {
  margin-top: 0.5rem; display: flex; gap: 0.6rem; align-items: center;
  background: var(--vlak2); border-radius: 10px; padding: 0.4rem; text-decoration: none; color: var(--tekst);
  border: 2px solid transparent; min-height: 2.75rem; flex-wrap: wrap;
}
.archief:hover { border-color: var(--cyaan); }
.archief img { width: 6.5rem; max-width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #000; }
.archief-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1 1 9rem; }
.archief strong, .archief .klein { overflow-wrap: anywhere; }
.archief strong { color: var(--cyaan); }
.archief.niet-af strong { color: var(--zacht); }
.archief.niet-af img { filter: grayscale(1) brightness(0.7); }
.klein { font-size: 0.85rem; color: var(--zacht); }

.ook { margin-top: 1.5rem; background: var(--vlak); border-radius: var(--hoek); padding: 0.75rem 1rem; }
.ook h2 { margin: 0; font-size: 1.15rem; }
.ook > .klein { margin: 0.2rem 0 0.5rem; }
.ook-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.ook-lijst a { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; align-items: baseline; padding: 0.5rem 0.6rem; background: var(--vlak2); border-radius: 8px; color: var(--tekst); text-decoration: none; min-height: 2.75rem; }
.ook-lijst .omroep { margin-left: 0; }
.ook-lijst .klein { width: 100%; }

.bron { color: var(--zacht); font-size: 0.85rem; margin-top: 1.5rem; }

.melding { background: var(--vlak); border-radius: var(--hoek); padding: 1.25rem; margin-top: 1rem; }
.melding h2 { margin-top: 0; }
.knop { font: inherit; font-weight: 700; background: var(--geel); color: var(--achter); border: 0; border-radius: 10px; padding: 0.7rem 1.1rem; min-height: 2.75rem; cursor: pointer; }

.voet { max-width: 70rem; margin: 0 auto; padding: 1rem 1rem 2rem; color: var(--zacht); font-size: 0.85rem; border-top: 1px solid #ffffff14; }

/* Op een smalle telefoon houdt de kop niet vast: anders blijft er bij grote letters weinig gids over. */
@media (max-width: 600px) {
  .kop { position: static; }
}

@media (prefers-reduced-motion: no-preference) {
  .archief { transition: border-color 0.15s; }
}