/* ===== basis: kleuren per thema via variabelen ===== */
:root {
  --f: 1vw;                 /* basis voor lettergroottes, schaalt mee met het scherm */
  --kop-h: 8vh;
  --voet-h: 11vh;
  --accent: #6c9249;        /* praktijkgroen uit het logo */
  --accent-donker: #4f6f33;
  --accent-licht: #9bc46a;
  --radius: 1.4vw;
  --lettertype: "Segoe UI", Roboto, "Noto Sans", Piboto, "Helvetica Neue", Arial, sans-serif;

  /* thema klassiek (zoals het oude scherm) */
  --body-bg: #000;
  --kop-bg: #688f45; --kop-tekst: #fff; --kop-rand: transparent;
  --podium-bg: #4f6f33;
  --paneel-bg: rgba(104,143,69,.94); --paneel-tekst: #fff; --paneel-schaduw: 0 1vh 4vh rgba(0,0,0,.35); --paneel-rand: transparent;
  --titel-kleur: #fff; --titel-lijn: transparent;
  --kaart-bg: rgba(255,255,255,.12); --kaart-tekst: #fff; --kaart-vandaag: rgba(255,255,255,.3);
  --lijn: rgba(255,255,255,.25); --gedempt: rgba(255,255,255,.3);
  --datum-bg: #fff; --datum-tekst: #4f6f33;
  --voet-bg: #1f2a14; --voet-tekst: #fff; --arts-bg: rgba(255,255,255,.08); --voet-rand: transparent;
  --toon-logo: none; --toon-logo-wit: none; --toon-naam: block;
}
/* thema licht: wit, rustig, logo in de kop */
:root[data-thema="licht"] {
  --body-bg: #f3f5ef;
  --kop-bg: #ffffff; --kop-tekst: #1f2a14; --kop-rand: #6c9249;
  --podium-bg: #f3f5ef;
  --paneel-bg: #ffffff; --paneel-tekst: #1f2a14; --paneel-schaduw: 0 1.2vh 4vh rgba(31,42,20,.10); --paneel-rand: transparent;
  --titel-kleur: #4f6f33; --titel-lijn: #6c9249;
  --kaart-bg: #eef3e6; --kaart-tekst: #1f2a14; --kaart-vandaag: #d9e7c4;
  --lijn: #e3e8da; --gedempt: #c5ccb8;
  --datum-bg: #6c9249; --datum-tekst: #fff;
  --voet-bg: #ffffff; --voet-tekst: #1f2a14; --arts-bg: #f3f5ef; --voet-rand: #e3e8da;
  --toon-logo: block; --toon-logo-wit: none; --toon-naam: none;
}
/* thema donker: diep groenzwart, witte tekst, veel contrast */
:root[data-thema="donker"] {
  --body-bg: #121810;
  --kop-bg: #121810; --kop-tekst: #fff; --kop-rand: rgba(255,255,255,.08);
  --podium-bg: #121810;
  --paneel-bg: #1d271a; --paneel-tekst: #f2f5ee; --paneel-schaduw: 0 1.2vh 5vh rgba(0,0,0,.5); --paneel-rand: rgba(255,255,255,.07);
  --titel-kleur: #9bc46a; --titel-lijn: #6c9249;
  --kaart-bg: rgba(255,255,255,.07); --kaart-tekst: #f2f5ee; --kaart-vandaag: rgba(155,196,106,.28);
  --lijn: rgba(255,255,255,.12); --gedempt: rgba(255,255,255,.22);
  --datum-bg: #6c9249; --datum-tekst: #fff;
  --voet-bg: #0c100a; --voet-tekst: #fff; --arts-bg: rgba(255,255,255,.06); --voet-rand: rgba(255,255,255,.08);
  --toon-logo: none; --toon-logo-wit: block; --toon-naam: none;
}
/* thema natuur: zacht saliegroen met diepgroene panelen */
:root[data-thema="natuur"] {
  --body-bg: #e4ecdb;
  --kop-bg: #e4ecdb; --kop-tekst: #2b3a1f; --kop-rand: transparent;
  --podium-bg: #e4ecdb;
  --paneel-bg: #3f5f2b; --paneel-tekst: #fff; --paneel-schaduw: 0 1.5vh 5vh rgba(43,58,31,.25); --paneel-rand: transparent;
  --titel-kleur: #fff; --titel-lijn: #9bc46a;
  --kaart-bg: rgba(255,255,255,.13); --kaart-tekst: #fff; --kaart-vandaag: rgba(255,255,255,.3);
  --lijn: rgba(255,255,255,.22); --gedempt: rgba(255,255,255,.3);
  --datum-bg: #fff; --datum-tekst: #3f5f2b;
  --voet-bg: #2b3a1f; --voet-tekst: #fff; --arts-bg: rgba(255,255,255,.08); --voet-rand: transparent;
  --toon-logo: block; --toon-logo-wit: none; --toon-naam: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--body-bg); cursor: none; }
body { font-family: var(--lettertype); color: var(--paneel-tekst); display: flex; flex-direction: column; }

/* ===== kop ===== */
#kop {
  height: var(--kop-h); flex: 0 0 var(--kop-h);
  background: var(--kop-bg); color: var(--kop-tekst); border-bottom: .4vh solid var(--kop-rand);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5vw; font-size: calc(var(--f) * 2.4); font-weight: 700;
}
#merk { height: 100%; display: flex; align-items: center; }
:root[data-thema="licht"], :root[data-thema="donker"], :root[data-thema="natuur"] { --kop-h: 11vh; }
#praktijknaam { display: var(--toon-naam); }
#logo { display: var(--toon-logo); height: 72%; width: auto; }
#logo-wit { display: var(--toon-logo-wit); height: 72%; width: auto; }
#datumtijd { display: flex; gap: 2vw; align-items: baseline; font-weight: 400; }
#datum { font-size: calc(var(--f) * 1.8); opacity: .85; text-transform: lowercase; }
#klok { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ===== podium met twee lagen voor een vloeiende overgang ===== */
#podium { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--podium-bg); }
.dia { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; display: flex; overflow: hidden; }
.dia.zichtbaar { opacity: 1; }

.achtergrond { position: absolute; inset: 0; background-size: cover; background-position: center; }
.achtergrond.vervaagd { filter: blur(28px) brightness(.6); transform: scale(1.12); }
.vol { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
video.vol { background: #000; }
video::cue { font-size: calc(var(--f) * 2.4); background: rgba(0,0,0,.65); color: #fff; }

/* ===== paneel (tekstdia's) ===== */
.paneel {
  --schaal: 1;
  position: relative; z-index: 1; margin: 4vh 3vw; padding: 3.2vh 3vw;
  background: var(--paneel-bg); color: var(--paneel-tekst); border: 1px solid var(--paneel-rand);
  border-radius: var(--radius); max-width: 80vw; min-width: 55vw; align-self: center;
  box-shadow: var(--paneel-schaduw);
}
.paneel.breed { max-width: 94vw; width: 94vw; }
.dia.met-foto .paneel { max-width: 56vw; }
.foto-rechts { position: absolute; right: 0; top: 0; bottom: 0; width: 42vw; background-size: cover; background-position: center; }
.titel { font-size: calc(var(--f) * var(--schaal, 1) * 3.6); font-weight: 800; margin-bottom: 2vh; line-height: 1.15; color: var(--titel-kleur); letter-spacing: -.01em; }
.titel::after { content: ""; display: block; width: 6vw; height: .5vh; background: var(--titel-lijn); border-radius: 1vh; margin-top: 1.4vh; }
.titel.belangrijk::before { content: "⚠ "; }
.tekst { font-size: calc(var(--f) * var(--schaal, 1) * 2.15); line-height: 1.45; }
.tekst p { margin-bottom: 1.6vh; }
.tekst ul { margin: 0 0 1.6vh 1.6vw; }
.tekst li { margin-bottom: .6vh; }
.tekst strong { font-weight: 800; }
.voetnoot { margin-top: 2vh; font-size: calc(var(--f) * var(--schaal, 1) * 1.5); opacity: .85; }
.dia.belangrijk .paneel { border-left: 1.2vw solid #d9534f; }

/* mededelingen */
.berichten { display: grid; grid-template-columns: repeat(auto-fit, minmax(26vw, 1fr)); gap: 2vw; }
.bericht { background: var(--kaart-bg); color: var(--kaart-tekst); border-radius: calc(var(--radius) * .7); padding: 2vh 1.6vw; }
.bericht h3 { font-size: calc(var(--f) * var(--schaal, 1) * 2.2); margin-bottom: 1vh; color: var(--titel-kleur); }
.bericht p { font-size: calc(var(--f) * var(--schaal, 1) * 1.75); line-height: 1.35; }

/* team */
table.rooster { width: 100%; border-collapse: collapse; font-size: calc(var(--f) * var(--schaal, 1) * 1.9); }
table.rooster th, table.rooster td { padding: 1.1vh 1vw; text-align: center; border-bottom: 1px solid var(--lijn); }
table.rooster th { font-size: calc(var(--f) * var(--schaal, 1) * 1.7); font-weight: 700; opacity: .95; }
table.rooster th small { display: block; font-weight: 400; font-size: calc(var(--f) * var(--schaal, 1) * 1.3); opacity: .75; }
table.rooster td:first-child, table.rooster th:first-child { text-align: left; }
table.rooster td.naam { font-weight: 700; }
table.rooster td.naam small { display: block; font-weight: 400; font-size: calc(var(--f) * var(--schaal, 1) * 1.35); opacity: .8; }
table.rooster td.ja::before { content: "●"; font-size: calc(var(--f) * var(--schaal, 1) * 1.6); color: var(--accent-licht); }
:root[data-thema="licht"] table.rooster td.ja::before { color: var(--accent); }
table.rooster td.ja .loc { display: block; font-size: calc(var(--f) * var(--schaal, 1) * 1.3); opacity: .9; }
table.rooster td.nee { color: var(--gedempt); }
table.rooster td.nee::before { content: "–"; }
table.rooster .vandaag { background: var(--kaart-vandaag); }
.weeknoot { margin-top: 1.5vh; font-size: calc(var(--f) * var(--schaal, 1) * 1.4); opacity: .75; }

/* openingstijden */
.tijden { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5vw; margin-top: 1vh; }
.tijden div { background: var(--kaart-bg); color: var(--kaart-tekst); border-radius: calc(var(--radius) * .7); padding: 2.5vh 1vw; text-align: center; }
.tijden div.vandaag { background: var(--kaart-vandaag); }
.tijden b { display: block; font-size: calc(var(--f) * var(--schaal, 1) * 1.8); margin-bottom: 1vh; text-transform: capitalize; }
.tijden span { font-size: calc(var(--f) * var(--schaal, 1) * 2.6); font-weight: 800; white-space: nowrap; }

/* agenda */
.agenda-blok { display: flex; gap: 2vw; margin-top: 1.5vh; }
.agenda-datum { background: var(--datum-bg); color: var(--datum-tekst); border-radius: calc(var(--radius) * .7); padding: 1.5vh 1.5vw; text-align: center; min-width: 11vw; }
.agenda-datum b { display: block; font-size: calc(var(--f) * var(--schaal, 1) * 4); line-height: 1; }
.agenda-datum span { display: block; font-size: calc(var(--f) * var(--schaal, 1) * 1.6); text-transform: capitalize; }
.agenda-info { font-size: calc(var(--f) * var(--schaal, 1) * 1.8); line-height: 1.4; }
.agenda-info div::before { margin-right: .6vw; }
.agenda-tijd::before { content: "🕑"; }
.agenda-plek::before { content: "📍"; }

/* ===== uitloopbalk ===== */
#uitloopbalk {
  height: var(--voet-h); flex: 0 0 var(--voet-h);
  background: var(--voet-bg); color: var(--voet-tekst); border-top: 1px solid var(--voet-rand);
  display: flex; align-items: center; padding: 0 2.5vw; gap: 2vw;
}
#uitlooplabel { font-size: calc(var(--f) * 1.45); font-weight: 700; opacity: .75; width: 9vw; flex-shrink: 0; line-height: 1.2; }
#uitloopartsen { display: flex; gap: 1.2vw; flex: 1; min-width: 0; }
.arts { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 1vw;
  background: var(--arts-bg); border-radius: 10vh; padding: 1.2vh 1vw 1.2vh 1.8vw; }
.arts .naam { font-size: calc(var(--f) * 1.9); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arts .status { flex-shrink: 0; font-size: calc(var(--f) * 1.5); font-weight: 800; padding: .9vh 1.1vw; border-radius: 10vh; white-space: nowrap; color: #1f2a14; }
.arts.c0 .status { background: #8bc34a; }
.arts.c1 .status { background: #ffd54f; }
.arts.c2 .status { background: #ffa726; }
.arts.c3 .status { background: #ef5350; color: #fff; }
#uitloopbalk.leeg { display: none; }
.geen-dia { align-self: center; margin: auto; text-align: center; font-size: calc(var(--f) * 2.5); opacity: .7; }
#laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--f) * 2); opacity: .6; }
#laden.weg { display: none; }
#zwart { position: fixed; inset: 0; background: #000; z-index: 100; display: none; }
#zwart.actief { display: block; }

/* ===== thema modern: dia's links, vaste zijbalk rechts ===== */
#zijbalk { display: none; }
:root[data-thema="modern"] {
  --body-bg: #f4f6f1;
  --podium-bg: #f4f6f1;
  --paneel-bg: #ffffff; --paneel-tekst: #1f2a14; --paneel-schaduw: 0 1.2vh 4vh rgba(31,42,20,.08); --paneel-rand: transparent;
  --titel-kleur: #1f2a14; --titel-lijn: #6c9249;
  --kaart-bg: #eef3e6; --kaart-tekst: #1f2a14; --kaart-vandaag: #d9e7c4;
  --lijn: #e3e8da; --gedempt: #c5ccb8;
  --datum-bg: #6c9249; --datum-tekst: #fff;
  --voet-bg: transparent; --voet-tekst: #fff; --arts-bg: rgba(255,255,255,.1); --voet-rand: transparent;
  --radius: 1.6vw;
}
:root[data-thema="modern"] body {
  display: grid; grid-template-columns: 1fr 26vw; grid-template-rows: 1fr auto;
  grid-template-areas: "podium zij" "podium uit";
}
:root[data-thema="modern"] #kop { display: none; }
:root[data-thema="modern"] #podium { grid-area: podium; }
:root[data-thema="modern"] .paneel { max-width: 68vw; min-width: 50vw; margin: 4vh 2.5vw; }
:root[data-thema="modern"] .paneel.breed { width: 68vw; max-width: 68vw; }
:root[data-thema="modern"] .dia.met-foto .paneel { max-width: 44vw; }
:root[data-thema="modern"] .foto-rechts { width: 30vw; }
:root[data-thema="modern"] .berichten { grid-template-columns: repeat(auto-fit, minmax(19vw, 1fr)); }
:root[data-thema="modern"] .tijden { gap: 1vw; }
:root[data-thema="modern"] .tijden span { font-size: calc(var(--f) * var(--schaal, 1) * 1.6); }
:root[data-thema="modern"] .tijden b { font-size: calc(var(--f) * var(--schaal, 1) * 1.5); }
:root[data-thema="modern"] .tijden div { padding: 2.5vh .6vw; }
:root[data-thema="modern"] #zijbalk {
  grid-area: zij; display: flex; flex-direction: column; gap: 2.6vh; min-height: 0; overflow: hidden;
  background: #2f4a22; color: #fff; padding: 4vh 2vw 2vh;
}
:root[data-thema="modern"] #uitloopbalk {
  grid-area: uit; height: auto; flex: none; background: #2f4a22; border: 0;
  flex-direction: column; align-items: stretch; gap: 1.2vh; padding: 0 2vw 4vh;
}
:root[data-thema="modern"] #uitlooplabel { width: auto; margin-top: 1vh; font-size: calc(var(--f) * 1.15); text-transform: uppercase; letter-spacing: .12em; opacity: .65; }
:root[data-thema="modern"] #uitlooplabel br { display: none; }
:root[data-thema="modern"] #uitloopartsen { flex-direction: column; gap: .9vh; }
:root[data-thema="modern"] .arts { padding: 1.1vh .8vw 1.1vh 1.3vw; }
:root[data-thema="modern"] .arts .naam { font-size: calc(var(--f) * 1.45); }
:root[data-thema="modern"] .arts .status { font-size: calc(var(--f) * 1.15); padding: .8vh 1vw; }
#zb-logo { width: 100%; height: auto; background: #fff; border-radius: 1vw; padding: 1.6vh 1.2vw; }
#zb-klok { font-size: calc(var(--f) * 4.4); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#zb-datum { font-size: calc(var(--f) * 1.4); opacity: .8; margin-top: .8vh; }
#zb-datum::first-letter { text-transform: uppercase; }
.zb-kop { font-size: calc(var(--f) * 1.15); text-transform: uppercase; letter-spacing: .12em; opacity: .65; margin-bottom: 1vh; font-weight: 700; }
#zb-vandaag { flex: 1; min-height: 0; overflow: hidden; }
#zb-vandaag ul { list-style: none; }
#zb-vandaag li { display: flex; justify-content: space-between; align-items: baseline; gap: 1vw; padding: .6vh 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: calc(var(--f) * 1.3); }
#zb-vandaag li b { font-weight: 700; }
#zb-vandaag li span { opacity: .7; font-size: calc(var(--f) * 1.05); text-align: right; }
#zb-vandaag .gesloten { font-size: calc(var(--f) * 1.4); opacity: .85; }
.alleen-modern { display: none; }
:root[data-thema="modern"] .alleen-modern { display: inline; }