/* Stichting VDB Media Platform - huisstijl (kleurcodes uit het kleurcode-PDF) */
:root {
  --oranje: #EF6238; --oranje2: #F38056; --oranje3: #F59B75;
  --oranje4: #F9B895; --donker: #35363A; --grijs: #919092; --licht: #FAFAFA;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: Arial, Helvetica, sans-serif; background: var(--licht); color: var(--donker); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* Layout */
.pagina { display: flex; min-height: 100vh; }
.inhoud-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
main { padding: 32px; flex: 1; max-width: 1000px; margin: 0 auto; width: 100%; }

/* Zijmenu */
.zijmenu { width: 224px; background: var(--donker); color: #fff; padding: 24px 0; display: flex; flex-direction: column; align-items: center; }
.logo-vlak { background: #fff; border-radius: 12px; padding: 16px 20px; text-align: center; }
.zijmenu nav { width: 100%; padding: 0 16px; margin-top: 32px; display: flex; flex-direction: column; gap: 4px; }
.zijmenu nav a { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; }
.zijmenu nav a.actief, .zijmenu nav a:hover { background: #fff; color: var(--oranje); font-weight: 700; }
.widgets { width: 100%; padding: 0 16px; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.widget { background: #fff; border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.widget-plaatje { height: 56px; width: 100%; background: var(--licht); border: 1px solid var(--oranje4); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.widget-plaatje img { max-height: 48px; max-width: 90%; object-fit: contain; }
.widget-plaatje b { color: var(--oranje); font-size: 13px; }
.widget span { font-size: 11px; font-weight: 600; color: var(--donker); }
.kvk-btw { width: calc(100% - 32px); margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.1); font-size: 11px; line-height: 1.6; color: #fff; }
.kvk-btw b { color: var(--oranje); }
.portaal-knop { margin-top: auto; background: var(--donker); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 8px; }
.portaal-knop:hover { background: var(--oranje); }

/* Live header */
.live-header { background: var(--donker); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; gap: 16px; flex-wrap: wrap; }
.onair { background: var(--oranje); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 4px 12px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.stip { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; animation: knipper 1.5s infinite; }
.stip-oranje { width: 10px; height: 10px; border-radius: 50%; background: var(--oranje); display: inline-block; animation: knipper 1.5s infinite; }
@keyframes knipper { 50% { opacity: .3; } }
.nu-op-nonstop { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: center; }
.nu-op-nonstop b { color: var(--oranje); }
.social { display: flex; gap: 10px; }
.social a { display: inline-flex; }

/* Footer */
.partner-footer { background: var(--donker); padding: 20px 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.partners-kop { color: var(--oranje); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.partner-footer a { background: #fff; border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; gap: 8px; }
.partner-footer a img { max-height: 26px; max-width: 110px; object-fit: contain; }
.partner-footer a span { font-size: 12px; font-weight: 600; }
.partner-footer p { width: 100%; margin-top: 12px; color: var(--grijs); font-size: 12px; }

/* Koppen, kaarten, knoppen */
.hero { background: linear-gradient(120deg, var(--oranje), var(--oranje3)); color: #fff; border-radius: 16px; padding: 32px; margin-bottom: 32px; }
.hero h1 { font-size: 28px; margin-bottom: 8px; }
h1.paginakop { color: var(--oranje); font-size: 24px; margin-bottom: 24px; }
h2 { margin: 24px 0 12px; }
h3 { margin-bottom: 4px; }
.sub { color: var(--grijs); margin-bottom: 20px; }
.kaart { background: #fff; border: 1px solid var(--oranje4); border-left: 5px solid var(--oranje); border-radius: 12px; padding: 20px; margin-bottom: 16px; display: flex; gap: 20px; }
.datum { color: var(--grijs); font-size: 12px; font-weight: 400; margin-left: 8px; }
.item-plaatje { width: 200px; max-width: 40%; height: 150px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.item-plaatje.voorbeeld { background: linear-gradient(135deg, var(--oranje), var(--oranje4)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; }
.knop { display: inline-block; background: var(--oranje); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; }
.knop.klein { padding: 6px 10px; font-size: 12px; }
.knop.groen { background: #1E8449; }
.knop.rood { background: #fff; color: #C0392B; border: 1px solid #C0392B; }
.knop.grijs-knop { background: var(--licht); color: var(--donker); }
.knop.rss { background: var(--licht); color: var(--oranje); border: 1px solid var(--oranje); }
.knop:hover { opacity: .9; }
.succes { color: #1E8449; font-weight: 700; margin-bottom: 12px; }
.foutmelding { color: #C0392B; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
details.lees-meer { margin-top: 8px; }
details.lees-meer summary { display: inline-block; background: var(--oranje); color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; width: fit-content; }
details.lees-meer[open] summary { background: var(--licht); color: var(--donker); border: 1px solid var(--oranje4); }
details.lees-meer p { padding-top: 12px; }
details.lees-meer summary::-webkit-details-marker { display: none; }

/* Programma-weekoverzicht & uitzendingen */
.dagfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dagfilters a { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; color: var(--grijs); border: 1px solid var(--oranje4); }
.dagfilters a.actief { background: var(--oranje); color: #fff; border-color: var(--oranje); }
.programma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.programma-kaart { background: #fff; border: 1px solid var(--oranje4); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.programma-kaart .item-plaatje { width: 100%; max-width: 100%; height: 140px; border-radius: 0; }
.afspeel-wrap { position: relative; }
.afspeel-knop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background: rgba(53,54,58,.35); pointer-events: none; }
.p-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.p-body .regel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.badge { background: var(--oranje4); color: var(--donker); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.tijd { color: var(--oranje); font-size: 12px; font-weight: 600; }
.presentator { color: var(--grijs); font-size: 12px; margin: 6px 0; }
.klein { font-size: 13px; margin-bottom: 12px; }
.knoppen { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.gegevens-rij { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--grijs); margin-bottom: 12px; }
.gegevens-rij b { color: var(--oranje); }

/* Live-pagina */
.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.live-blok { background: #fff; border: 1px solid var(--oranje4); border-radius: 12px; padding: 24px; }
.live-blok h3 { color: var(--oranje); font-size: 18px; }
.speler { background: var(--licht); border: 1px dashed var(--oranje4); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--grijs); margin: 12px 0; min-height: 110px; }
.speler-placeholder { text-align: center; padding: 24px 16px; }
.speler-placeholder p { font-weight: 700; color: var(--donker); font-size: 15px; margin: 8px 0 4px; }
.speler-placeholder small { color: var(--grijs); font-size: 12px; }
.embed-wrap { position: relative; width: 100%; padding-top: 56.25%; margin: 12px 0; border-radius: 8px; overflow: hidden; background: #000; }
.embed-wrap iframe, .embed-wrap embed, .embed-wrap object { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.nu-live { margin-top: 32px; background: var(--oranje4); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; font-weight: 700; }

/* Geschiedenis tijdlijn */
.tijdlijn { display: flex; flex-direction: column; }
.jaar-rij { display: flex; gap: 20px; }
.jaar-blok { width: 76px; height: 44px; background: var(--oranje); color: #fff; font-weight: 800; font-size: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jaar-rij p { padding-top: 12px; }

/* Formulieren */
label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--oranje4); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; }
.drie-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tijd-duo { display: flex; gap: 8px; }

/* Portaal */
.portaal-achtergrond { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.portaal-inlog { background: #fff; border: 1px solid var(--oranje4); border-radius: 16px; padding: 32px; width: 100%; max-width: 380px; text-align: center; }
.portaal-inlog form { text-align: left; }
.portaal-knop-vol { width: 100%; padding: 12px; margin-top: 16px; }
.terug { display: block; margin-top: 12px; color: var(--grijs); font-size: 12px; }
.portaal-top { background: var(--donker); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 32px; gap: 16px; flex-wrap: wrap; }
.portaal-top .merk { display: flex; align-items: center; gap: 16px; }
.portaal-top .logo-vlak { background: transparent; padding: 0; }
.portaal-body { max-width: 1000px; margin: 0 auto; padding: 32px 16px; }
.tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; background: #fff; border: 1px solid var(--oranje4); }
.tabs a.actief { background: var(--oranje); color: #fff; border-color: var(--oranje); }
.statistiek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid var(--oranje4); border-radius: 12px; padding: 16px; }
.stat b { font-size: 24px; display: block; }
.stat span { color: var(--grijs); font-size: 12px; }
.item-tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--oranje4); margin: 16px 0 32px; font-size: 14px; }
.item-tabel th, .item-tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--oranje4); }
.item-tabel .acties { white-space: nowrap; }
.item-tabel .acties form { display: inline; }
.item-tabel .acties .knop { margin: 2px; }
.portaal-modal { background: #fff; border: 1px solid var(--oranje4); border-radius: 16px; padding: 24px; margin: 16px 0; }
.portaal-modal h4 { margin-top: 20px; color: var(--oranje); font-size: 13px; text-transform: uppercase; }
.bewerk-balk { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }


/* ===== Portaal: nieuwe overzichtelijke layout ===== */
.portaal-body-vol { background: var(--licht); margin: 0; }

/* Kopbalk: donker met oranje rand onderaan */
.p-kop { background: var(--donker); border-bottom: 3px solid var(--oranje); color: #fff; padding: 12px 28px; position: sticky; top: 0; z-index: 10; }
.p-kop-boven { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.p-merk { display: flex; align-items: center; gap: 16px; }
.p-merk .logo-vlak { background: transparent; padding: 0; }
.p-gebruiker { color: var(--oranje4); font-size: 12px; }
.p-kop-knoppen { display: flex; gap: 10px; }
.p-knop-licht { background: rgba(255,255,255,.12); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.p-knop-licht:hover { background: rgba(255,255,255,.22); }
.p-knop-uit { background: var(--oranje); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.p-knop-uit:hover { opacity: .9; }

/* Navigatiebalk in de kop (menu zit nu bovenin) */
.p-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; }
.p-nav a { padding: 8px 11px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; }
.p-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.p-nav a.actief { background: var(--licht); color: var(--oranje); font-weight: 700; }
.p-nav-sub { font-size: 13px !important; color: rgba(255,255,255,.75) !important; }
.p-nav-sub:hover { color: var(--oranje) !important; background: transparent !important; }
.p-navscheiding { width: 1px; height: 20px; background: rgba(255,255,255,.25); margin: 0 4px; }

.p-inhoud { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 32px; }
.p-titel { font-size: 24px; color: var(--oranje); }
.p-titel-balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.p-subtekst { color: var(--grijs); margin: 6px 0 24px; font-size: 14px; }
.p-sectiekop { margin: 28px 0 14px; font-size: 16px; color: var(--donker); border-left: 4px solid var(--oranje); padding-left: 10px; }
.p-modal-titel { font-size: 18px; margin-bottom: 12px; color: var(--donker); }

/* Statistiek: oranje-hoofdkaart, donker randaccent */
.p-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
.p-stat { background: linear-gradient(135deg, var(--oranje) 0%, var(--oranje2) 100%); border: none; border-radius: 12px; padding: 18px; box-shadow: 0 3px 10px rgba(239,98,56,.25); }
.p-stat b { font-size: 28px; display: block; color: #fff; }
.p-stat b.p-oranje { color: #fff; }
.p-stat b.p-grijs { color: rgba(255,255,255,.8); }
.p-stat span { color: rgba(255,255,255,.9); font-size: 13px; }

.p-rubriek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.p-rubriek-kaart { background: #fff; border: 1px solid var(--oranje4); border-left: 5px solid var(--oranje); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.p-rubriek-kaart:hover { border-color: var(--oranje); box-shadow: 0 2px 10px rgba(239,98,56,.2); transform: translateY(-1px); }
.p-rubriek-kaart b { font-size: 24px; color: var(--oranje); }
.p-rubriek-kaart span { font-weight: 700; color: var(--donker); }
.p-rubriek-kaart small { color: var(--grijs); font-size: 12px; margin-top: 6px; }

.p-snel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.p-snel { background: var(--donker); color: #fff; border-radius: 10px; padding: 14px 16px; font-weight: 700; font-size: 14px; }
.p-snel:hover { background: var(--oranje); }

.p-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.p-filters a { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; color: var(--grijs); border: 1px solid var(--oranje4); }
.p-filters a:hover { border-color: var(--oranje); color: var(--oranje); }
.p-filters a.actief { background: var(--oranje); color: #fff; border-color: var(--oranje); }

@media (max-width: 800px) {
  .p-kop-boven { justify-content: center; }
  .p-navscheiding { display: none; }
  .p-nav a { padding: 8px 8px; font-size: 12px; }
  .p-inhoud { padding: 20px 16px; }
  .p-stat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .pagina { flex-direction: column; }
  .zijmenu { width: 100%; }
  .portaal-knop { margin-top: 16px; }
  .live-grid { grid-template-columns: 1fr; }
  .statistiek { grid-template-columns: 1fr; }
  .kaart { flex-direction: column; }
  .item-plaatje { width: 100%; max-width: 100%; }
}


/* ===== Promopagina (one-pager met popups) ===== */
.pr-body { margin: 0; background: var(--donker); color: #fff; min-height: 100vh; overflow-x: hidden; }
.pr-achtergrond-plat { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 70% 20%, rgba(239,98,56,.28), transparent 60%), radial-gradient(900px 500px at 20% 85%, rgba(243,128,86,.18), transparent 55%), linear-gradient(160deg, #232429 0%, var(--donker) 55%, #1d1e21 100%); z-index: -2; }
.pr-achtergrond-plat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 96%, rgba(239,98,56,.35) 100%); background-size: 100% 34px; }
.pr-achtergrond-plaatje { position: fixed; inset: 0; background-size: cover; background-position: center; z-index: -3; }
.pr-achtergrond-plaatje::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(53,54,58,.55) 0%, rgba(53,54,58,.82) 100%); }

.pr-kop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 16px 28px; background: rgba(29,30,33,.92); border-bottom: 3px solid var(--oranje); flex-wrap: wrap; }
.pr-merk { flex-shrink: 0; }
.pr-merk .logo-vlak { background: transparent; padding: 0; }
.pr-merk img { max-height: 120px; width: auto; }
.pr-merk .logo-vlak { background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px 14px; }
.pr-merk { margin-right: 10px; }
.pr-nav { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.pr-nav a { color: #fff; font-size: 15px; font-weight: 600; padding: 10px 13px; border-radius: 8px; white-space: nowrap; }
.pr-nav a:hover { background: rgba(239,98,56,.85); }
.pr-social { display: flex; gap: 6px; flex-shrink: 0; }
.pr-social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; font-weight: 700; font-size: 16px; }
.pr-social a:hover { background: var(--oranje); }
.pr-login-knop { background: var(--oranje); color: #fff; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-left: 8px; box-shadow: 0 3px 12px rgba(239,98,56,.45); }
.pr-login-knop:hover { background: var(--oranje2); }

.pr-hero { min-height: calc(100vh - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 18px 130px; }
.pr-hero h1 { font-size: clamp(34px, 7vw, 72px); color: #fff; letter-spacing: .02em; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.pr-hero-sub { margin-top: 12px; font-size: clamp(15px, 2.5vw, 20px); color: rgba(255,255,255,.9); max-width: 640px; }
.pr-nu-live { margin-top: 22px; display: inline-flex; align-items: center; background: var(--oranje); color: #fff; font-weight: 800; border-radius: 999px; padding: 10px 20px; font-size: 14px; box-shadow: 0 4px 18px rgba(239,98,56,.45); }
.pr-live-stip { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; margin-right: 8px; animation: prKnipper 1.2s infinite; }
@keyframes prKnipper { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pr-hero-knoppen { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pr-knop { background: var(--oranje); color: #fff; font-weight: 700; border-radius: 10px; padding: 12px 22px; font-size: 15px; display: inline-block; box-shadow: 0 4px 14px rgba(239,98,56,.4); }
.pr-knop:hover { background: var(--oranje2); }
.pr-knop-licht { background: rgba(255,255,255,.14); box-shadow: none; }
.pr-knop-licht:hover { background: rgba(255,255,255,.24); }
.pr-knop-klein { padding: 6px 12px; font-size: 12px; }

/* Visual Radio in het midden */
.pr-visual { margin-top: 34px; width: 100%; max-width: 720px; background: rgba(255,255,255,.06); border: 1px solid var(--oranje4); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.pr-visual-tekst { padding: 30px 24px; text-align: center; }
.pr-visual-icoon { font-size: 34px; color: var(--oranje4); }
.pr-visual-tekst h2 { color: #fff; font-size: 22px; margin: 8px 0 6px; }
.pr-visual-tekst p { color: rgba(255,255,255,.85); font-size: 14px; max-width: 420px; margin: 0 auto; }
.pr-visual-play { margin-top: 16px; background: var(--oranje); color: #fff; border: none; border-radius: 999px; padding: 12px 30px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(239,98,56,.5); }
.pr-visual-play:hover { background: var(--oranje2); }
.pr-visual-venster { display: none; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.pr-visual.speelt .pr-visual-venster { display: block; }
.pr-visual-venster iframe { width: calc(100% + 20px); height: 100%; border: 0; }
.pr-visual.speelt { border-color: var(--oranje); }

/* Contactformulier in de popup */
.pr-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pr-form label { font-size: 12px; font-weight: 700; color: var(--oranje4); text-transform: uppercase; letter-spacing: .04em; }
.pr-form input, .pr-form textarea { background: rgba(255,255,255,.08); border: 1px solid var(--oranje4); border-radius: 8px; color: #fff; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.pr-form input:focus, .pr-form textarea:focus { outline: none; border-color: var(--oranje); }
.pr-form .pr-knop { margin-top: 10px; align-self: flex-start; border: none; cursor: pointer; }
.pr-succes { background: rgba(60,180,90,.18); border: 1px solid #3cb45a; color: #9fe6b3; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.pr-fout { background: rgba(220,70,50,.18); border: 1px solid #dc4632; color: #ffb3a6; border-radius: 8px; padding: 10px 12px; font-size: 13px; }

.pr-achter { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 40; display: none; }
.pr-achter.open { display: block; }
.pr-popup { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; }
.pr-popup.open { display: flex; }
.pr-popup-venster { position: relative; background: #2b2c31; border: 1px solid var(--oranje4); border-top: 4px solid var(--oranje); border-radius: 14px; padding: 26px 28px; width: 100%; max-width: 640px; max-height: 82vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.pr-popup-venster h2 { color: var(--oranje4); font-size: 20px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em; }
.pr-popup-venster h3 { color: #fff; font-size: 15px; margin: 14px 0 6px; }
.pr-popup-venster p { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.55; }
.pr-sluit { position: absolute; top: 10px; right: 12px; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; cursor: pointer; }
.pr-sluit:hover { background: var(--oranje); }
.pr-lijst { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.pr-item { display: flex; gap: 12px; background: rgba(255,255,255,.06); border-left: 4px solid var(--oranje); border-radius: 10px; padding: 12px 14px; }
.pr-item img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.pr-item h3 { margin: 0 0 4px; font-size: 15px; color: #fff; }
.pr-datum { color: var(--oranje4); font-size: 12px; font-weight: 600; }
.pr-tijdvlak { flex-shrink: 0; width: 110px; font-size: 13px; color: rgba(255,255,255,.85); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pr-badge { display: inline-block; background: var(--oranje); color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.pr-presentator { color: var(--oranje4); font-size: 13px; font-weight: 600; }
.pr-leeg { color: rgba(255,255,255,.6); }
.pr-meer { display: inline-block; margin-top: 6px; color: var(--oranje4); font-weight: 700; font-size: 13px; }
.pr-lees-meer { margin-top: 6px; }
.pr-lees-meer summary { color: var(--oranje4); font-weight: 700; font-size: 13px; cursor: pointer; }
.pr-lees-meer summary:hover { color: #fff; }
.pr-lees-meer[open] summary { margin-bottom: 4px; }
.pr-meer:hover { color: #fff; }
.pr-klein, .pr-klein-line { font-size: 13px; color: rgba(255,255,255,.75); }
.pr-placeholder { background: rgba(255,255,255,.07); border: 1px dashed var(--oranje4); border-radius: 10px; padding: 18px; text-align: center; }
.pr-placeholder b { color: var(--oranje); }
.pr-placeholder small { color: rgba(255,255,255,.6); }
.pr-tijdlijn .pr-jaar { display: flex; gap: 12px; margin-bottom: 10px; }
.pr-tijdlijn b { color: var(--oranje); min-width: 60px; }

.pr-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 14px; background: rgba(29,30,33,.96); border-top: 3px solid var(--oranje); padding: 10px 18px; }
.pr-speler { flex: 1; min-width: 0; max-width: 560px; }
.pr-embed { width: 100%; overflow: hidden; border-radius: 8px; }
.pr-embed iframe, .pr-embed audio, .pr-embed video { width: 100% !important; }
.pr-embed-groot iframe { height: 220px !important; }
.pr-placeholder-balk { padding: 8px 14px; text-align: left; font-size: 13px; }
.pr-video-item { margin-top: 18px; }
.pr-video-naam { font-size: 15px; color: #fff; margin: 0 0 6px; }
.pr-video { width: 100%; max-width: 560px; border-radius: 12px; background: #000; margin-top: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); display: block; }
.pr-partners { display: flex; gap: 10px; align-items: center; flex-shrink: 0; margin-left: auto; }
.pr-partner { background: #fff; border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; justify-content: center; min-width: 150px; height: 92px; }
.pr-partner img { max-height: 72px; max-width: 220px; }
.pr-partner-tekst { color: var(--donker); font-size: 15px; font-weight: 800; text-align: center; line-height: 1.3; text-transform: uppercase; }

/* Hamburgerknop: alleen op mobiel zichtbaar */
.pr-hamburger { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; z-index: 60; }
.pr-hamburger span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.pr-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pr-hamburger.open span:nth-child(2) { opacity: 0; }
.pr-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .pr-hamburger { display: flex; }
  .pr-nav { display: none; position: fixed; top: 0; left: 0; right: 0; background: rgba(29,30,33,.98); flex-direction: column; align-items: stretch; padding: 84px 16px 20px; gap: 4px; z-index: 55; max-height: 100vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .pr-nav.open { display: flex; }
  .pr-nav a { padding: 14px 16px; font-size: 16px; border-radius: 10px; }
  .pr-nav a:hover { background: var(--oranje); }
  .pr-social a:not(.pr-login-knop) { display: none; }
  .pr-social { gap: 0; flex: 1; justify-content: flex-end; }
  .pr-login-knop { margin-left: 0; }
  .pr-merk { flex: 1; }
  .pr-hamburger { margin-left: 0; }
}
@media (min-width: 901px) and (max-width: 1366px) {
  .pr-social a:not(.pr-login-knop) { display: none; }
  .pr-login-knop { margin-left: 8px; }
  .pr-hero { padding-bottom: 150px; }
  .pr-balk { flex-wrap: wrap; gap: 8px; }
  .pr-speler { max-width: 100%; flex-basis: 100%; order: 2; }
  .pr-partners { order: 1; flex: 1; justify-content: space-between; }
  .pr-partner { flex: 1; height: 64px; min-width: 120px; }
  .pr-partner img { max-height: 48px; max-width: 160px; }
  .pr-partner-tekst { font-size: 12px; }
  .pr-merk img { max-height: 84px; }
  .pr-kop { padding: 12px 16px; }
}


/* ===== Portaal in promostijl (zelfde uitstraling als de voorpagina) ===== */
.portaal-body-vol .p-inhoud { padding-bottom: 30px; }
.pr-balk-portal { position: static; margin-top: 30px; justify-content: center; border-top: none; background: transparent; padding: 10px 0 26px; }
.pr-balk-portal .pr-partner { background: #fff; border-radius: 10px; padding: 8px 14px; min-width: 110px; height: 64px; }
.pr-balk-portal .pr-partner img { max-height: 48px; max-width: 170px; }
.pr-balk-portal .pr-partner-tekst { font-size: 12px; }
.portaal-body-vol { background: var(--donker); color: #fff; }
.portaal-body-vol::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 70% 10%, rgba(239,98,56,.16), transparent 60%), radial-gradient(900px 500px at 15% 90%, rgba(243,128,86,.10), transparent 55%); pointer-events: none; }

/* Kop: net als de promopagina */
.portaal-body-vol .p-kop { background: rgba(29,30,33,.94); border-bottom: 3px solid var(--oranje); padding: 16px 28px; position: sticky; top: 0; z-index: 20; }
.portaal-body-vol .p-merk .logo-vlak { background: transparent; padding: 0; }
.portaal-body-vol .p-merk img { max-height: 88px; width: auto; }
.portaal-body-vol .p-gebruiker { color: var(--oranje4); }
.portaal-body-vol .p-kop-boven { gap: 16px; }
.portaal-body-vol .p-nav { flex: 1; justify-content: center; }
.portaal-body-vol .p-nav a { color: #fff; }
.portaal-body-vol .p-nav a:hover { background: rgba(239,98,56,.85); }
.portaal-body-vol .p-nav a.actief { background: var(--oranje); color: #fff; }
.portaal-body-vol .p-knop-licht { background: rgba(255,255,255,.12); color: #fff; }
.portaal-body-vol .p-knop-licht:hover { background: rgba(255,255,255,.24); }

/* Inhoud */
.portaal-body-vol .p-inhoud { width: 100%; max-width: 1100px; margin: 0 auto; padding: 30px 32px 60px; }
.portaal-body-vol .p-titel { color: var(--oranje4); font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.portaal-body-vol .p-subtekst, .portaal-body-vol .sub { color: rgba(255,255,255,.65); }
.portaal-body-vol .p-sectiekop { color: #fff; border-left-color: var(--oranje); }
.portaal-body-vol .p-modal-titel { color: #fff; }

/* Statistiekkaarten: al oranje, randen bijwerken */
.portaal-body-vol .p-stat { border-radius: 14px; }

/* Rubriekkaarten: donker met oranje rand */
.portaal-body-vol .p-rubriek-kaart { background: rgba(255,255,255,.06); border: 1px solid rgba(249,184,149,.35); border-left: 5px solid var(--oranje); }
.portaal-body-vol .p-rubriek-kaart:hover { border-color: var(--oranje); box-shadow: 0 4px 18px rgba(239,98,56,.35); }
.portaal-body-vol .p-rubriek-kaart span { color: #fff; }
.portaal-body-vol .p-rubriek-kaart small { color: rgba(255,255,255,.55); }
.portaal-body-vol .p-rubriek-kaart b { color: var(--oranje4); }

/* Snelle knoppen */
.portaal-body-vol .p-snel { background: rgba(255,255,255,.08); color: #fff; }
.portaal-body-vol .p-snel:hover { background: var(--oranje); }

/* Filters */
.portaal-body-vol .p-filters a { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); border-color: rgba(249,184,149,.35); }
.portaal-body-vol .p-filters a:hover { border-color: var(--oranje); color: var(--oranje4); }
.portaal-body-vol .p-filters a.actief { background: var(--oranje); color: #fff; border-color: var(--oranje); }

/* Tabellen */
.portaal-body-vol .item-tabel { background: rgba(255,255,255,.05); border: 1px solid rgba(249,184,149,.3); }
.portaal-body-vol .item-tabel th { background: rgba(29,30,33,.95); color: var(--oranje4); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.portaal-body-vol .item-tabel td { color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.08); }
.portaal-body-vol .item-tabel tr:hover td { background: rgba(255,255,255,.04); }

/* Bewerkvlakken (pop-up-achtige kaders, net als de promopagina) */
.portaal-body-vol .portaal-modal { background: #2b2c31; border: 1px solid rgba(249,184,149,.3); border-top: 4px solid var(--oranje); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.portaal-body-vol .portaal-modal h4 { color: var(--oranje4); }
.portaal-body-vol .bewerk-balk { color: #fff; }

/* Formuliervelden: donker met oranje focus */
.portaal-body-vol input, .portaal-body-vol textarea, .portaal-body-vol select { background: rgba(255,255,255,.08); border: 1px solid rgba(249,184,149,.35); border-radius: 8px; color: #fff; padding: 10px 12px; font-family: inherit; }
.portaal-body-vol input:focus, .portaal-body-vol textarea:focus, .portaal-body-vol select:focus { outline: none; border-color: var(--oranje); box-shadow: 0 0 0 3px rgba(239,98,56,.2); }
.portaal-body-vol input::placeholder, .portaal-body-vol textarea::placeholder { color: rgba(255,255,255,.4); }
.portaal-body-vol label { color: var(--oranje4); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Knoppen */
.portaal-body-vol .knop { background: var(--oranje); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.portaal-body-vol .knop:hover { background: var(--oranje2); }
.portaal-body-vol .grijs-knop { background: rgba(255,255,255,.12); color: #fff; }
.portaal-body-vol .grijs-knop:hover { background: rgba(255,255,255,.24); }
.portaal-body-vol .rood { background: #c0392b; color: #fff; }
.portaal-body-vol .groen { background: #2e8b57; color: #fff; }

/* Drie-kolom layout in donker */
.portaal-body-vol .drie-kolom { color: #fff; }
.portaal-body-vol .p-titel-balk { color: #fff; }
.portaal-body-vol .badge { background: var(--oranje); color: #fff; }
.portaal-body-vol .succes { background: rgba(60,180,90,.18); border: 1px solid #3cb45a; color: #9fe6b3; border-radius: 8px; padding: 10px 12px; }
.portaal-body-vol .foutmelding { background: rgba(220,70,50,.18); border: 1px solid #dc4632; color: #ffb3a6; border-radius: 8px; padding: 10px 12px; }
.portaal-body-vol a { color: var(--oranje4); }
.portaal-body-vol .tijd-duo input { color-scheme: dark; }

/* ===== Inlogpagina in promostijl ===== */
.portaal-achtergrond { background: var(--donker); }
.portaal-achtergrond::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 70% 20%, rgba(239,98,56,.28), transparent 60%), radial-gradient(900px 500px at 20% 85%, rgba(243,128,86,.18), transparent 55%); }
.portaal-inlog { background: #2b2c31; border: 1px solid rgba(249,184,149,.3); border-top: 4px solid var(--oranje); color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.portaal-inlog input { background: rgba(255,255,255,.08); border: 1px solid rgba(249,184,149,.35); border-radius: 8px; color: #fff; padding: 10px 12px; }
.portaal-inlog input:focus { outline: none; border-color: var(--oranje); box-shadow: 0 0 0 3px rgba(239,98,56,.2); }
.portaal-inlog label { color: var(--oranje4); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.portaal-inlog .portaal-knop-vol, .portaal-inlog button { background: var(--oranje); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.portaal-inlog h1.po-titel { color: var(--oranje4); font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.portaal-inlog .po-sub { color: rgba(255,255,255,.65); font-size: 13px; margin: 6px 0 18px; }
.portaal-inlog .foutmelding { background: rgba(220,70,50,.18); border: 1px solid #dc4632; color: #ffb3a6; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.portaal-inlog input::placeholder { color: rgba(255,255,255,.4); }
.portaal-top { background: rgba(29,30,33,.94); }
.portaal-body { color: #fff; }
.terug { color: rgba(255,255,255,.6); }

/* ===== Overzichtelijk invulformulier (toegankelijk, grote letters) ===== */
.veld-blok { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.veld-blok label { color: var(--oranje4); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.veld-blok b { color: var(--oranje); }
.veld-blok input, .veld-blok textarea, .veld-blok select { font-size: 16px; padding: 12px 14px; }
.veld-blok textarea { min-height: 110px; }
.veld-hulp { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.45; }
.stap-uitleg { color: rgba(255,255,255,.75); font-size: 14px; margin-bottom: 18px; background: rgba(239,98,56,.12); border-left: 4px solid var(--oranje); border-radius: 8px; padding: 10px 14px; }
.knoppen-balk { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.tijd-duo { display: flex; align-items: center; gap: 8px; }
.tijd-tot { color: rgba(255,255,255,.6); font-size: 14px; }
.knoppen-balk .knop { font-size: 15px; padding: 12px 22px; }

/* ===== Partners: één balk die van rechts naar links loopt (ook te vegen op touch) ===== */
.pr-ticker { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }
.pr-ticker::-webkit-scrollbar { display: none; }
.pr-ticker-spoor { display: flex; align-items: center; gap: 12px; width: max-content; }
.pr-ticker .pr-partner { flex-shrink: 0; min-width: 0; width: auto; height: 64px; padding: 8px 18px; }
.pr-ticker .pr-partner img { max-height: 46px; max-width: 170px; width: auto; }
.pr-ticker .pr-partner-tekst { font-size: 13px; white-space: nowrap; }

/* Tablet en kleiner (iPad, telefoon): partnerbalk over de volle breedte, speler eronder */
@media (max-width: 1366px) {
  .pr-balk { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .pr-ticker { order: 1; flex: 1 1 100%; }
  .pr-speler { order: 2; flex: 1 1 100%; max-width: 100%; }
  .pr-ticker .pr-partner { height: 52px; padding: 6px 14px; }
  .pr-ticker .pr-partner img { max-height: 38px; max-width: 130px; }
  .pr-hero { padding-bottom: 200px; }
}

/* Menu op iPad (liggend): iets compacter zodat het op één rij past */
@media (min-width: 901px) and (max-width: 1366px) {
  .pr-nav a { font-size: 14px; padding: 9px 9px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .pr-nav a { font-size: 13px; padding: 8px 7px; }
  .pr-merk img { max-height: 64px; }
}

/* Visual Radio op de voorpagina */
.pr-visual-titel { padding: 12px 18px; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--oranje4); background: rgba(0,0,0,.28); text-align: left; }

/* "Luister live" laat de speler onderaan even oplichten */
.pr-balk.pr-uitgelicht { animation: prGloed 1.1s ease-in-out 3; }
@keyframes prGloed { 0%, 100% { box-shadow: 0 0 0 rgba(239,98,56,0); } 50% { box-shadow: 0 -4px 28px 6px rgba(239,98,56,.75); } }