/* MASK Suite 26 : huisstijl De Voorhof
   Oranje van de Protestantse Kerk op wit, met het blauw van het dak en de
   stalen kolommen als tweede accent. De liturgische kleuren staan apart:
   die horen bij het kerkelijk jaar, niet bij de app. */

:root{
  --oranje:#F39200;
  --oranje-diep:#D97E00;
  --oranje-licht:#FEF3E4;
  --blauw:#3C5A8F;          /* dak en kolommen van De Voorhof */
  --blauw-diep:#2A4269;
  --blauw-licht:#EDF1F8;

  --ink:#2B2B2B;
  --gedempt:#6E6D6A;
  --lijn:#E4E2DE;
  --vlak:#FFFFFF;
  --papier:#F8F7F5;

  --rood:#B3261E;  --rood-vlak:#FCEDEC;
  --groen:#2E7D52; --groen-vlak:#EDF6F0;
  --paars:#6B3FA0;

  --schaduw:0 1px 2px rgba(43,43,43,.05), 0 8px 24px rgba(43,43,43,.06);
  --rond:12px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--papier); line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:400; letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer}
a{color:var(--blauw)}
.hidden{display:none !important}
.stil{color:var(--gedempt)}
.leeg{padding:34px; text-align:center; color:var(--gedempt)}

/* ---------- opstartscherm ---------- */
/* De kerk tekent zichzelf met stroke-dashoffset: de lijn is "opgerold" en rolt
   uit. Daarna komt het merk op. Alles samen ruim twee seconden. */
#opstart{position:fixed; inset:0; z-index:200; background:var(--vlak); display:grid; place-items:center;
  animation:kp-op-weg .5s ease 2.35s forwards}
#opstart.weg{display:none}
.op-binnen{display:flex; flex-direction:column; align-items:center; gap:2px; padding:24px}
.op-kerk{width:min(260px,62vw); color:var(--blauw)}
.op-kerk svg{width:100%; height:auto; display:block}
.op-kerk .lijn{stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
  animation:kp-teken 1.25s ease-out forwards}
@keyframes kp-teken{to{stroke-dashoffset:0}}
@keyframes kp-op-weg{to{opacity:0; visibility:hidden}}
.op-merk{display:flex; align-items:baseline; gap:10px; margin-top:14px; opacity:0;
  animation:kp-op-in .5s ease 1.25s forwards}
.op-mas{font-size:30px; font-weight:700; letter-spacing:.06em; color:var(--blauw-diep)}
.op-mas span{color:var(--oranje)}
.op-naam{font-size:30px; font-weight:300; letter-spacing:-.01em; color:var(--ink)}
.op-streep{width:0; height:3px; background:var(--oranje); border-radius:2px; margin-top:10px;
  animation:kp-op-streep .55s ease 1.6s forwards}
.op-onder{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gedempt);
  margin-top:10px; opacity:0; animation:kp-op-in .5s ease 1.85s forwards}
@keyframes kp-op-in{to{opacity:1}}
@keyframes kp-op-streep{to{width:132px}}
@media (prefers-reduced-motion: reduce){
  #opstart,.op-kerk .lijn,.op-merk,.op-streep,.op-onder{animation:none}
  .op-kerk .lijn{stroke-dashoffset:0}
  .op-merk,.op-onder{opacity:1}
  .op-streep{width:132px}
}

/* ---------- merk ---------- */
.merk{display:flex; align-items:center; gap:12px}
.merk .logo{width:44px; height:44px; flex:0 0 auto}
.merk b{font-size:19px; font-weight:600; display:block; line-height:1.15}
.merk span{font-size:12px; color:var(--gedempt)}

/* ---------- knoppen ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent;
  background:var(--oranje); color:#fff; padding:10px 16px; border-radius:9px; font-weight:600; font-size:14px}
.btn:hover{background:var(--oranje-diep)}
/* .vol en niet .blok: de blokken op het startscherm heten .blok, en die zetten
   een witte achtergrond — dat gaf een witte knop met witte letters. */
.btn.vol{width:100%; margin-top:18px}
.btn.rand{background:#fff; color:var(--ink); border-color:var(--lijn)}
.btn.rand:hover{background:var(--oranje-licht); border-color:var(--oranje)}
.btn.blauw{background:var(--blauw)} .btn.blauw:hover{background:var(--blauw-diep)}
.btn.gevaar{background:#fff; color:var(--rood); border-color:#EBC9C6}
.btn.gevaar:hover{background:var(--rood-vlak)}
.btn.sm{padding:7px 11px; font-size:12.5px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- formulier ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--gedempt); margin:14px 0 6px}
input,select,textarea{width:100%; padding:10px 12px; border:1px solid var(--lijn); border-radius:9px;
  font-size:14px; background:#fff; color:var(--ink); font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(243,146,0,.35); border-color:var(--oranje)}
.veld{display:flex; flex-direction:column}
.rij{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.fout{color:var(--rood); font-size:13px; margin-top:12px; min-height:18px}

/* ---------- inloggen ---------- */
#inlog{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1100px 460px at 50% -10%, rgba(243,146,0,.10), transparent 62%), var(--papier)}
.inlogkaart{width:100%; max-width:400px; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--rond); box-shadow:var(--schaduw); padding:32px 30px 26px}
.inlogkaart h1{font-size:20px; margin:18px 0 2px}
.inlogkaart p.sub{margin:0 0 16px; color:var(--gedempt); font-size:13.5px}
.pinveld{letter-spacing:.42em; font-size:20px; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.pintoets{border:1px solid var(--lijn); background:#fff; border-radius:11px; padding:13px 0;
  font-size:19px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.pintoets:hover{background:var(--oranje-licht); border-color:var(--oranje)}
.pintoets:active{background:var(--oranje); color:#fff}
.pintoets.wis{font-size:16px; color:var(--gedempt)}
.hint{margin-top:18px; padding:11px 13px; background:var(--oranje-licht); border:1px solid #F6DFC0;
  border-radius:9px; font-size:12.5px; color:#7A4E06}
.hint b{color:var(--oranje-diep)}

/* ---------- schil: zijbalk links, werkvlak rechts ---------- */
.schil{display:grid; grid-template-columns:246px 1fr; min-height:100vh}
.zijbalk{background:var(--blauw-diep); color:#fff; padding:20px 14px; display:flex; flex-direction:column;
  gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto}
.zijbalk .merk{padding:4px 8px 18px}
.zijbalk .merk .logo{background:#fff; border-radius:10px; padding:5px; box-shadow:4px 4px 0 var(--oranje)}
.zijbalk .merk b{color:#fff; font-size:15px}
.zijbalk .merk span{color:rgba(255,255,255,.66)}
.menu{display:flex; flex-direction:column; gap:2px}
.menu a{display:flex; align-items:center; gap:11px; color:#DCE4F2; text-decoration:none; padding:10px 12px;
  border-radius:9px; font-size:14px; font-weight:500; cursor:pointer; user-select:none}
.menu a:hover{background:rgba(255,255,255,.10); color:#fff}
.menu a.actief{background:#fff; color:var(--blauw-diep); font-weight:700}
.menu a svg{width:18px; height:18px; flex:0 0 18px}
.menu a .telling{margin-left:auto; font-size:11.5px; font-weight:700; background:rgba(255,255,255,.16);
  padding:1px 8px; border-radius:999px}
.menu a.actief .telling{background:var(--oranje); color:#fff}
/* Het kopje is een knop: klikken klapt de hele groep in. */
.menu .scheiding{display:flex; align-items:center; gap:6px; width:100%; margin:12px 0 6px; padding:4px 8px;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-family:inherit;
  color:rgba(255,255,255,.45); font-weight:700; background:transparent; border:none; border-radius:7px;
  cursor:pointer; text-align:left}
.menu .scheiding:hover{background:rgba(255,255,255,.08); color:rgba(255,255,255,.8)}
.menu .scheiding .kappijl{font-size:9px; transition:transform .15s; display:inline-block}
.menu .scheiding.dicht .kappijl{transform:rotate(-90deg)}
.menu a.ingeklapt{display:none}
.rek{flex:1; min-height:14px}
.zijvoet{border-top:1px solid rgba(255,255,255,.15); padding-top:12px; display:flex; flex-direction:column; gap:8px;
  font-size:13px; color:rgba(255,255,255,.8)}
.zijvoet .naam{color:#fff; font-weight:600}
.zijvoet button{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:8px; padding:8px 10px; font-size:12.5px; cursor:pointer; text-align:left}
.zijvoet button:hover{background:rgba(255,255,255,.2)}
/* versie onderin de zijbalk */
.versie{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12);
  font-size:11px; color:rgba(255,255,255,.45); line-height:1.5}
.versie b{color:rgba(255,255,255,.75); font-weight:700}
.versie .dat{display:block}
.versie .dat.let{color:#FFC9A8}
.versie.scheef{color:#FFC9A8}
:root.zij-klein .versie{display:none}

.werkvlak{min-width:0}
/* Geen vaste maximumbreedte: het rooster heeft vijftien kolommen, dus alle
   ruimte die er is kan gebruikt worden. */
main{max-width:none; margin:0; padding:22px 24px 80px}

.klapknop{margin-top:10px; background:transparent; color:rgba(255,255,255,.6); border:none;
  display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 8px; border-radius:8px}
.klapknop:hover{background:rgba(255,255,255,.10); color:#fff}
.klapknop svg{flex:0 0 16px; transition:transform .2s}

/* ---------- zijbalk smal: alleen iconen ---------- */
:root.zij-klein .schil{grid-template-columns:68px 1fr}
:root.zij-klein .zijbalk{padding:16px 10px; align-items:stretch}
:root.zij-klein .menu a{justify-content:center; padding:11px 0}
:root.zij-klein .menu a span:not(.telling){display:none}
:root.zij-klein .menu a .telling{position:absolute; transform:translate(14px,-12px); margin:0; padding:0 5px; font-size:10px}
:root.zij-klein .menu a{position:relative}
:root.zij-klein .menu .scheiding{justify-content:center; font-size:0; margin:10px 0 6px;
  border-top:1px solid rgba(255,255,255,.16); padding-top:10px; border-radius:0}
:root.zij-klein .menu .scheiding span:not(.kappijl){display:none}
:root.zij-klein .merk > div{display:none}
:root.zij-klein .merk{justify-content:center; padding:2px 0 16px}
:root.zij-klein .zijvoet > div{display:none}
:root.zij-klein .zijvoet button{text-align:center; font-size:11px; padding:8px 4px}
:root.zij-klein .klapknop{justify-content:center}
:root.zij-klein .klapknop span{display:none}
:root.zij-klein .klapknop svg{transform:rotate(180deg)}

.mobielbalk{display:none; position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--lijn);
  align-items:center; gap:12px; padding:8px 12px}
.hamburger{border:1px solid var(--lijn); background:#fff; border-radius:9px; padding:7px 9px; color:var(--ink); display:flex}
.menusluier{display:none; position:fixed; inset:0; background:rgba(20,28,46,.45); z-index:44}

.kop{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 0 16px; flex-wrap:wrap}
.kop h2{font-size:23px; margin:0}
.kop .uitleg{color:var(--gedempt); font-size:14px; margin-top:3px}
.werkbalk{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Filteren op bundel in de liedbibliotheek. De strook wordt opgebouwd uit de
   bundels die er werkelijk in staan, dus hij groeit vanzelf mee. */
.bundelstrook{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 2px}
.bundelknop{background:var(--vlak); border:1px solid var(--lijn); border-radius:999px;
  padding:5px 12px; font:inherit; font-size:13px; color:var(--tekst); cursor:pointer}
.bundelknop:hover{border-color:var(--merk)}
.bundelknop.aan{background:var(--merk); border-color:var(--merk); color:#fff; font-weight:600}
.bundelknop .stil{opacity:.65; margin-left:4px; font-size:12px}
.bundelknop.aan .stil{opacity:.8; color:#fff}

/* De liednaam in de bibliotheek is de knop naar de viewer. */
.liedknop{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--merk);
  cursor:pointer; text-align:left}
.liedknop:hover{text-decoration:underline}
.liedknop:disabled{color:var(--tekst); cursor:default; text-decoration:none; opacity:.6}

/* Dia's van een lied bekijken. De plaat schaalt mee met het venster; de
   hoogte is begrensd zodat de strook eronder altijd in beeld blijft. */
.viewvlak{position:relative; background:#111; border-radius:var(--rond); margin-top:10px;
  display:flex; align-items:center; justify-content:center; min-height:220px}
.viewvlak img{max-width:100%; max-height:56vh; display:block; border-radius:var(--rond)}
.viewpijl{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45);
  color:#fff; border:0; width:42px; height:64px; font-size:22px; cursor:pointer; line-height:1}
.viewpijl:hover{background:rgba(0,0,0,.7)}
.viewpijl.links{left:0; border-radius:var(--rond) 0 0 var(--rond)}
.viewpijl.rechts{right:0; border-radius:0 var(--rond) var(--rond) 0}
.viewvoet{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:8px 2px 0; font-size:13px}
.viewvoet .stil{font-size:12px; word-break:break-all; text-align:right}
.viewstrip{display:flex; gap:6px; overflow-x:auto; padding:8px 2px 2px}
.viewstrip img{height:56px; width:auto; border:2px solid transparent; border-radius:4px;
  cursor:pointer; background:#fff; flex:0 0 auto}
.viewstrip img:hover{border-color:var(--lijn)}
.viewstrip img.aan{border-color:var(--merk)}
.kaart{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); box-shadow:var(--schaduw)}
.pad{padding:16px 18px}
.raster2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:820px){.raster2{grid-template-columns:1fr}}

/* ---------- tabellen ---------- */
.scroll{overflow:auto; border-radius:var(--rond)}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:7px 9px; text-align:left; border-bottom:1px solid var(--lijn); white-space:nowrap; vertical-align:middle}
thead th{position:sticky; top:0; background:var(--blauw); color:#fff; font-weight:600; font-size:12px; z-index:1}
tbody tr:hover{background:#FBFAF8}
td.midden,th.midden{text-align:center}
.scroll table td:first-child{position:sticky; left:0; background:#fff; z-index:1}
.scroll table thead th:first-child{position:sticky; left:0; z-index:3}
.scroll tbody tr:hover td:first-child{background:#FBFAF8}
.scroll tr.botsrij td:first-child{background:#FDF4F3}
td.botsing{background:var(--rood-vlak) !important; box-shadow:inset 0 0 0 2px rgba(179,38,30,.45); border-radius:6px}
tr.botsrij{background:#FDF4F3}

select.cel{border:1px solid transparent; background:transparent; padding:5px 6px; border-radius:7px;
  font-size:12.5px; min-width:140px; max-width:220px; width:100%}
select.cel:hover{border-color:var(--lijn); background:#fff}
input.cel{border:1px solid transparent; background:transparent; padding:5px 6px; border-radius:7px; font-size:12.5px}
input.cel:hover{border-color:var(--lijn); background:#fff}
.wegknop{border:none; background:transparent; color:var(--gedempt); font-size:15px; line-height:1; padding:2px 6px; border-radius:6px}
.wegknop:hover{background:var(--rood-vlak); color:var(--rood)}

/* ---------- kleine onderdelen ---------- */
.speld{display:inline-flex; align-items:center; gap:7px; max-width:100%}
.vlek{width:11px; height:11px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(0,0,0,.08)}
.pil{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700}
/* GEEN flexbox hier: de tekst bestaat uit losse stukjes met <b> ertussen, en
   die zouden dan elk een eigen vak met tussenruimte worden ("De kolom | In het
   rooster | laat zien"). Gewoon een blok, de tekens lopen vanzelf mee. */
.melding{display:block; padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px; line-height:1.5}
.melding .btn{vertical-align:middle; margin-left:4px}
.melding.let{background:var(--rood-vlak); color:#7A1A14; border:1px solid #F1CFCC}
.melding.goed{background:var(--groen-vlak); color:#1E5638; border:1px solid #CFE7DA}
.melding.info{background:var(--oranje-licht); color:#7A4E06; border:1px solid #F6DFC0}
.voet{color:var(--gedempt); font-size:12px; margin-top:10px}
.maandkop{display:flex; align-items:center; gap:12px; margin:22px 0 10px}
.maandkop .bar{height:1px; background:var(--lijn); flex:1}
.geruild{display:inline-block; margin-left:5px; color:var(--oranje-diep); font-weight:700; cursor:help}

/* ---------- diensten die geweest zijn, ingeklapt ---------- */
tbody.metverleden:not(.open) tr.geweest{display:none}
tbody.metverleden.open tr.geweest{opacity:.55}
/* De eerste cel van een rij is normaal sticky-links met een witte achtergrond;
   voor deze regel over de volle breedte moet dat juist niet. */
.scroll table tr.klaprij td{position:static; background:#FBFAF8; padding:0}
.klapregel{width:100%; text-align:left; background:transparent; border:none; padding:9px 12px;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--gedempt); cursor:pointer}
.klapregel:hover{background:var(--oranje-licht); color:#7A4E06}

/* ---------- zoeken, filteren en sorteren in een lijst ---------- */
.zoekbalk{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 12px}
.zoekvak{position:relative; display:flex; align-items:center}
.zoekvak svg{position:absolute; left:11px; color:var(--gedempt); pointer-events:none}
.zoekvak input{width:280px; max-width:100%; padding-left:33px; border-radius:999px}
.zoekvak input::-webkit-search-cancel-button{cursor:pointer}
select.filter{width:auto; min-width:150px; padding:9px 12px; border-radius:999px; font-size:13px}
.telrij{margin-left:auto; color:var(--gedempt); font-size:12.5px; white-space:nowrap}

/* ---------- de nieuwsbriefeditor binnen het werkvlak ---------- */
#nbvlak,#bmvlak{display:flex; flex-direction:column; height:100vh; min-width:0}
#nbvlak.hidden,#bmvlak.hidden{display:none}
.nbbalk{display:flex; align-items:center; gap:14px; padding:10px 18px; background:var(--vlak);
  border-bottom:1px solid var(--lijn); flex:0 0 auto}
.nbbalk .nbtitel{font-weight:600; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nbbalk .nbstand{margin-left:auto; font-size:12.5px; color:var(--gedempt); white-space:nowrap}
.nbbalk .nbstand.goed{color:var(--groen)}
.nbbalk .nbstand.waarschuwing{color:var(--rood); font-weight:600}
#nbFrame,#bmFrame{flex:1; width:100%; border:none; display:block; min-height:0; background:#8b8f93}
@media(max-width:760px){ .nbbalk{padding:8px 12px}
  #nbvlak,#bmvlak{height:calc(100vh - 54px)} }

/* ---------- kiezen uit een lijst (welke dienst krijgt een presentatie) ----------
   Een radioknop met een hele regel eromheen: op een telefoon is een bolletje
   van 14 pixels niet te raken. */
/* Bewust GEEN eigen overflow hier: het venster staat in een grid-overlay, en een
   scrollend vak daarbinnen laat de kolom naar min-content krimpen - dan wordt de
   hele lijst één woord breed. Het venster zelf schuift al (max-height 88vh). */
.kieslijst{margin:4px 0 10px; border:1px solid var(--lijn);
  border-radius:var(--rond); background:var(--vlak); overflow:hidden}
.kiesrij{display:flex; gap:11px; align-items:flex-start; padding:10px 13px; font-size:13.5px;
  border-bottom:1px solid var(--lijn); cursor:pointer}
.kieslijst .kiesrij:last-child{border-bottom:none}
.kiesrij:hover{background:var(--oranje-licht)}
.kiesrij.al{opacity:.6}
/* Zonder deze regel erft het bolletje `input{width:100%}` uit de huisstijl: dan
   duwt het de tekst plat tot één woord per regel. Zelfde maatvoering als de
   vinkjes in de personenlijst (input.pkies). */
.kiesrij input[type=radio]{width:15px; height:15px; flex:0 0 15px; padding:0; margin:3px 0 0;
  border-radius:50%; accent-color:var(--oranje); cursor:pointer}
.kiesrij span{min-width:0; flex:1}
.kiesrij .pil{margin-left:4px}

/* ---------- bericht van de beheerder tussen de meldingen ---------- */
.keuze.bericht{cursor:default; background:#fff}
.keuze.bericht:hover{background:#fff}
.keuze.bericht.belangrijk{border-color:var(--rood); background:var(--rood-vlak)}
.berichttekst{display:block; margin-top:4px; font-size:13px; color:var(--gedempt); line-height:1.45}
.berichttekst p{margin:0 0 6px} .berichttekst p:last-child{margin-bottom:0}
.berichttekst ul,.berichttekst ol{margin:0 0 6px 18px; padding:0}
.berichttekst a{color:var(--blauw)}

/* ---------- tekstveld met opmaakknoppen (geplande berichten) ---------- */
.rijkbalk{display:flex; gap:2px; flex-wrap:wrap; border:1px solid var(--lijn); border-bottom:none;
  border-radius:9px 9px 0 0; background:#FAF9F6; padding:3px; margin-top:6px}
.rijkbalk button{min-width:28px; height:28px; border:1px solid transparent; background:transparent;
  border-radius:6px; font-size:13px; cursor:pointer; color:var(--ink); font-family:inherit; padding:0 6px}
.rijkbalk button:hover{background:var(--oranje-licht); border-color:var(--oranje)}
.rijkveld{border:1px solid var(--lijn); border-radius:0 0 9px 9px; padding:9px 12px; min-height:120px;
  max-height:240px; overflow-y:auto; font-size:14px; line-height:1.45; background:#fff}
.rijkveld:focus{outline:2px solid rgba(243,146,0,.35); outline-offset:-1px; border-color:var(--oranje)}
.rijkveld p{margin:0 0 8px}
.rijkveld ul,.rijkveld ol{margin:0 0 8px 18px; padding:0}

/* regel met de nummering boven het nieuwsbriefarchief */
.nbtelling{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:9px 14px; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--rond); font-size:13px; color:var(--gedempt)}
.nbtelling b{color:var(--ink)}

/* ---------- meter voor de bezette opslag (liedbibliotheek) ---------- */
.meter{display:inline-block; width:180px; max-width:40vw; height:8px; background:#EFEDE8;
  border-radius:99px; overflow:hidden; vertical-align:middle}
.meter i{display:block; height:100%; background:var(--oranje); border-radius:99px}

/* ---------- verlof ---------- */
/* Een vliegtuigje naast de naam: iemand staat ingedeeld terwijl hij weg is. */
.verlofmerk{margin-left:4px; color:var(--rood); font-size:12px; cursor:help}
select.cel.opverlof{border-color:var(--rood); background:var(--rood-vlak)}
.tussenkop{font-size:14px; font-weight:600; color:var(--gedempt); margin:18px 0 8px}

/* ---------- liturgie ---------- */
.litlijst{max-height:none; gap:6px}
.litregel{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--lijn);
  border-radius:9px; background:var(--vlak); cursor:grab; flex-wrap:wrap}
.litregel:hover{border-color:var(--oranje)}
.litregel .greep{color:var(--lijn); font-size:15px; flex:none; cursor:grab}
.litregel .litmidden{flex:1; min-width:160px; font-size:13.5px}
.litregel .litextra{font-size:12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.litregel .litknoppen{display:flex; gap:4px; flex:none}
.pil.soort{text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; min-width:52px; text-align:center}
.pil.soort.lied{background:var(--blauw-licht); color:var(--blauw)}
.pil.soort.lezing{background:#F1ECF8; color:var(--paars)}
.pil.soort.tekst{background:var(--oranje-licht); color:#7A4E06}
.pil.aan{background:var(--groen-vlak); color:var(--groen)}
.pil.uit{background:#EFEDE8; color:var(--gedempt)}
.coupletraster{display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin-top:4px}
@media(max-width:520px){ .coupletraster{grid-template-columns:repeat(6,1fr)} }
.couplet{border:1px solid var(--lijn); background:var(--vlak); border-radius:7px; padding:7px 0;
  font-size:12.5px; color:var(--gedempt); font-family:inherit}
.couplet:hover{border-color:var(--oranje)}
.couplet.aan{background:var(--oranje); border-color:var(--oranje); color:#fff; font-weight:600}
/* Gedimd = van dit couplet ligt geen dia in de bibliotheek. Kies je hem tóch,
   dan kleurt hij rood: het lied wordt gezongen, maar er moet nog gedownload. */
.couplet.leeg{color:#C9C4B8; border-style:dashed}
.couplet.mist{background:var(--rood); border-color:var(--rood); color:#fff}

/* ---------- dekking van het Liedboek ---------- */
.dekkop{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:10px}
.dekgroot{font-size:34px; line-height:1.1; letter-spacing:-.02em; color:var(--oranje); font-weight:600}
.meter.breed{width:100%; max-width:none; height:10px; display:block; margin-bottom:16px}
.rubrieken{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px 20px}
.rubriek{display:flex; align-items:center; gap:10px; font-size:12.5px}
.rublabel{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gedempt)}
.rubriek .meter{width:70px; max-width:70px; height:6px; flex:none}
.rubgetal{width:58px; text-align:right; color:var(--gedempt); font-variant-numeric:tabular-nums}

/* ---------- inloggegevens van Liedbundels Online ---------- */
.lbrij{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--lijn);
  flex-wrap:wrap}
.lbrij:last-child{border-bottom:none}
.lblabel{width:150px; flex:none; color:var(--gedempt); font-size:12.5px}
.lbwaarde{flex:1; min-width:160px; font-size:14.5px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all}
.stappen{margin:0; padding-left:20px; font-size:13.5px; color:var(--ink); line-height:1.6}
.stappen li{margin-bottom:5px}
.stappen code{background:var(--papier); border:1px solid var(--lijn); border-radius:5px; padding:1px 5px;
  font-size:12.5px}

/* balk die verschijnt zodra je personen aanvinkt */
.keuzebalk{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px;
  background:var(--oranje-licht); border:1px solid #F6DFC0; border-radius:var(--rond); font-size:13px; color:#7A4E06}
.keuzebalk button{margin-left:0}
.keuzebalk .btn[disabled]{opacity:.45; cursor:not-allowed}
.keuzebalk .btn[disabled]:hover{background:var(--oranje)}
input.pkies{width:15px; height:15px; flex:0 0 15px; margin:0; accent-color:var(--oranje); cursor:pointer}
.kiesregel{cursor:pointer; align-items:flex-start; padding:9px 11px}
.kiesregel input{width:auto; margin-right:2px; accent-color:var(--oranje)}
.kiesregel .stil{font-size:12.5px}

/* een kolomkop die sorteert: knop over de hele kop, tekst blijft wit */
th .sorteer{background:transparent; border:none; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; display:inline-flex; align-items:center; gap:4px; width:100%}
th .sorteer:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
th.midden .sorteer{justify-content:center}
th .sorteer .pijl{font-size:9px; line-height:1; opacity:.9}
th .sorteer.aan{font-weight:800}

/* onderdelen binnen een venster: naam, meedoen, toegang onder elkaar */
.vdeel{border-top:1px solid var(--lijn); margin-top:16px; padding-top:12px}
.vdeel:first-of-type{border-top:none; margin-top:6px; padding-top:0}
.vdeel h4{margin:0 0 2px; font-size:14px; letter-spacing:.02em}
.vdeel .vsub{margin:0 0 8px; color:var(--gedempt); font-size:12.5px}
.deelknoppen{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}

/* naam als knop in de personenlijst */
.naamknop{border:none; background:transparent; padding:0; font-size:13px; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--lijn); text-underline-offset:3px}
.naamknop:hover{color:var(--oranje-diep); text-decoration-color:var(--oranje)}
/* de tijdelijke code, één keer groot in beeld */
.codevak{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:38px; font-weight:700;
  letter-spacing:.22em; text-align:center; padding:18px 10px; margin-top:10px;
  background:var(--oranje-licht); border:1px dashed var(--oranje); border-radius:12px; color:var(--oranje-diep)}

/* twee plekken in één vakje (Kosters, Bloemen) */
.stapel{display:flex; flex-direction:column; gap:3px; align-items:flex-start}
.stapel > *{width:100%}
.rolraster .rk .rv + .rv{margin-top:1px}

/* eigen dienst valt op in het rooster */
td.vanmij{box-shadow:inset 3px 0 0 var(--oranje)}
.ruilknop{border:1px solid var(--oranje); background:var(--oranje-licht); color:var(--oranje-diep);
  font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:7px; margin-left:6px}
.ruilknop:hover{background:var(--oranje); color:#fff}

/* ---------- komende dienst ---------- */
.komend{overflow:hidden}
.komend-kop{padding:20px 24px; background:linear-gradient(135deg,var(--blauw),#4E6FA8); color:#fff}
.bovenregel{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#D8E2F2; font-weight:700; margin-bottom:7px}
.datumregel{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.datumregel .dag{font-size:26px; text-transform:capitalize; line-height:1}
.datumregel .dd{font-size:18px; opacity:.92}
.datumregel .tt{font-size:14px; background:rgba(255,255,255,.18); padding:3px 11px; border-radius:999px}
.vg{margin-top:10px; font-size:14px; color:#EEF2F9}
.notitie{margin-top:9px; font-size:13px; background:rgba(255,255,255,.14); padding:6px 11px; border-radius:8px; display:inline-block}
.rolraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--lijn)}
.rk{background:#fff; padding:11px 15px; display:flex; flex-direction:column; gap:3px}
.rk .rl{font-size:11px; font-weight:700; letter-spacing:.03em}
.rk .rv{font-size:14px}

/* ---------- podium ---------- */
.podium{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end; max-width:700px; margin:8px auto 26px}
.trede{border-radius:12px 12px 0 0; color:#3A2F18; padding:16px 12px; text-align:center;
  border:1px solid rgba(0,0,0,.06); border-bottom:none}
.trede .nm{font-weight:700; font-size:15px; margin-bottom:4px}
.trede .ct{font-size:12.5px; opacity:.8}
.trede .medaille{font-size:29px; margin-bottom:6px}
.trede.goud{background:linear-gradient(180deg,#FBE28A,#F2C744); height:148px}
.trede.zilver{background:linear-gradient(180deg,#E6E7EA,#CBCED4); height:118px}
.trede.brons{background:linear-gradient(180deg,#E7BC93,#CE854F); height:98px}

/* ---------- matrix met bolletjes ---------- */
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.bol{cursor:pointer; font-size:16px; color:var(--lijn); user-select:none; display:inline-block; min-width:20px}
.bol.aan{color:var(--groen)}
.merkjes{display:flex; gap:6px; flex-wrap:wrap; max-width:560px}
.merkje{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  border:1px solid var(--lijn); background:#fff; padding:5px 9px; border-radius:8px; cursor:pointer}
.merkje input{width:auto}
.merkje.aan{border-color:var(--oranje); background:var(--oranje-licht)}

/* ---------- venster ---------- */
.overlay{position:fixed; inset:0; background:rgba(43,43,43,.42); display:grid; place-items:center; z-index:60; padding:20px}
.venster{background:#fff; border-radius:14px; box-shadow:var(--schaduw); padding:22px 22px 18px; width:100%; max-width:420px;
  max-height:88vh; overflow:auto}
.venster.breed{max-width:620px}
.venster h3{margin:0 0 4px; font-size:19px}
.venster .vsub{margin:0 0 10px; color:var(--gedempt); font-size:13px}
.vknoppen{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap}
.keuzelijst{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.keuze{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  border:1px solid var(--lijn); background:#fff; border-radius:9px; padding:9px 12px; text-align:left; font-size:13.5px}
.keuze:hover{border-color:var(--oranje); background:var(--oranje-licht)}
.keuze .mee{font-size:12px; color:var(--gedempt); white-space:nowrap}
.keuze.waarschuw .mee{color:var(--rood)}

/* twee knoppen die als één schakelaar aanvoelen */
.schakel{display:inline-flex; border:1px solid var(--lijn); border-radius:9px; overflow:hidden; background:#fff}
.schakel button{border:none; background:transparent; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--gedempt)}
.schakel button + button{border-left:1px solid var(--lijn)}
.schakel button:hover{background:var(--oranje-licht); color:var(--ink)}
.schakel button.aan{background:var(--oranje); color:#fff}

/* uitklapmenu in een werkbalk */
.dropdown{position:relative; display:inline-block}
.dropdown > .btn svg{margin-left:2px; opacity:.6}
.droplijst{position:absolute; right:0; top:calc(100% + 5px); z-index:50; min-width:230px;
  background:#fff; border:1px solid var(--lijn); border-radius:11px; box-shadow:var(--schaduw);
  padding:6px; display:flex; flex-direction:column; gap:1px}
.dropkop{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gedempt); padding:9px 10px 4px}
.dropitem{border:none; background:transparent; text-align:left; padding:9px 10px; border-radius:8px;
  font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px}
.dropitem:hover{background:var(--oranje-licht)}
.dropitem.aan{font-weight:700; color:var(--oranje-diep)}
.dropitem.aan::before{content:"✓"; font-size:12px}
.dropitem:not(.aan)::before{content:""; width:9px}

/* stappenbalk van de vulhulp */
.stapbalk{display:flex; align-items:center; gap:6px; margin-bottom:12px}
.stapbol{width:9px; height:9px; border-radius:50%; background:var(--lijn); flex:0 0 auto}
.stapbol.klaar{background:var(--oranje)}
.stapbol.nu{background:var(--oranje); box-shadow:0 0 0 4px var(--oranje-licht)}
.staptekst{margin-left:auto; font-size:11.5px; font-weight:600; color:var(--gedempt);
  letter-spacing:.04em; text-transform:uppercase}
/* keuzeknoppen die een hele regel beslaan, voor de wizard */
.merkjes.groot{flex-direction:column; max-width:none}
.merkjes.groot .merkje{width:100%; justify-content:flex-start; padding:12px 14px; font-size:14px}
.keuze.gekozen{border-color:var(--oranje); background:var(--oranje-licht)}

/* volgorde-lijstje in de vulhulp */
.volgorde{display:flex; flex-direction:column; gap:4px; max-height:230px; overflow:auto; margin-top:6px}
.volgrij{display:flex; align-items:center; gap:9px; border:1px solid var(--lijn); border-radius:8px; padding:5px 9px; font-size:13px}
.volgrij .nr{font-weight:700; color:var(--gedempt); min-width:20px}
.volgrij .mee{margin-left:auto; font-size:12px; color:var(--gedempt); white-space:nowrap}
/* ---------- slepen om de volgorde te bepalen ----------
   Pijltjesknoppen zijn weg: je pakt een regel op en zet hem neer. De lijn laat
   zien waar hij terechtkomt. */
.volgrij{cursor:grab; user-select:none; background:#fff; transition:background .1s, box-shadow .1s}
.volgrij:hover{border-color:var(--oranje); background:var(--oranje-licht)}
.volgrij:active{cursor:grabbing}
.volgrij .greep{color:var(--lijn); font-size:14px; line-height:1; letter-spacing:-2px; flex:0 0 auto}
.volgrij:hover .greep{color:var(--oranje)}
.volgrij.sleepend{opacity:.4; box-shadow:none}
/* de streep waar hij neerkomt */
.volgrij.sleepdoel{box-shadow:0 -3px 0 -1px var(--oranje)}
.volgrij.sleepdoel.onder{box-shadow:0 3px 0 -1px var(--oranje)}
.volgrij.opgepakt{border-color:var(--oranje); background:var(--oranje-licht); box-shadow:0 0 0 2px rgba(243,146,0,.3)}
.volgrij:focus-visible{outline:2px solid var(--oranje); outline-offset:1px}

/* kolomkoppen in het rooster: ook slepen */
thead th.sleepkop{cursor:grab; user-select:none}
thead th.sleepkop:active{cursor:grabbing}
thead th.sleepkop.sleepend{opacity:.45}
thead th.sleepkop.sleepdoel{box-shadow:inset 3px 0 0 0 var(--oranje)}
thead th.sleepkop.sleepdoel.onder{box-shadow:inset -3px 0 0 0 var(--oranje)}
thead th.sleepkop .kopgreep{opacity:.45; font-size:10px; letter-spacing:-2px; margin-right:4px}
thead th.sleepkop:hover .kopgreep{opacity:1}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:10px; font-size:13px; box-shadow:var(--schaduw); opacity:0; transition:.25s;
  pointer-events:none; z-index:80; max-width:90vw; text-align:center}
.toast.zichtbaar{opacity:1; bottom:30px}

/* ---------- print ---------- */
#printvlak{display:none}
@media print{
  .zijbalk,.mobielbalk,.werkbalk,.wegknop,.hero,.menusluier{display:none}
  .schil{grid-template-columns:1fr}
  body{background:#fff}
  body.printen>*{display:none !important}
  body.printen #printvlak{display:block !important}
  #printvlak{font-family:Arial,Helvetica,sans-serif; color:#000}
  #printvlak h1{font-size:20px; margin:0 0 2px}
  #printvlak .pmeta{color:#555; font-size:11px; margin-bottom:14px}
  #printvlak h3{font-size:15px; margin:16px 0 6px}
  #printvlak table{border-collapse:collapse; width:100%; font-size:10px; margin-bottom:12px}
  #printvlak th{background:#3C5A8F; color:#fff; border:1px solid #999; padding:3px 5px; text-align:left}
  #printvlak td{border:1px solid #bbb; padding:2px 5px}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  /* De standaard. De blokvorm van het maandrooster wil juist staand; @page kan
     niet onder een selector hangen, dus die stand wordt bij het printen zelf
     ingespoten (zie printStand() in app.js). */
  @page{size:landscape; margin:10mm}

  /* ---------- kop en voet van elke uitdraai ---------- */
  #printvlak .pkop{display:flex; align-items:center; gap:10px; border-bottom:2px solid #3C5A8F;
    padding-bottom:6px; margin-bottom:14px}
  #printvlak .plogo{flex:0 0 auto; line-height:0}
  #printvlak .plogo svg{stroke:#3C5A8F}
  #printvlak .ptitel{flex:1 1 auto}
  #printvlak .ptitel h1{font-size:17px; margin:0; font-weight:700}
  #printvlak .psub{font-size:10.5px; color:#555}
  #printvlak .prechts{font-size:15px; text-align:right; white-space:nowrap}
  #printvlak .pvoet{margin-top:14px; padding-top:6px; border-top:1px solid #bbb; text-align:center}
  #printvlak .pwijzig{font-size:10.5px; color:#333}
  #printvlak .pmerk{font-size:9px; color:#777; letter-spacing:.04em; margin-top:2px}

  /* ---------- het maandrooster als blokken ---------- */
  #printvlak .pmaand{break-inside:auto}
  #printvlak .pmaand + .pmaand{margin-top:18px; break-before:page}
  #printvlak .pmaand h2{font-size:13px; margin:0 0 6px; text-transform:capitalize}
  /* Een dienst mag niet over twee bladzijden gebroken worden: dan staat de
     helft van de namen op het volgende blad. */
  #printvlak .pblok{display:flex; gap:14px; border-top:1px solid #999; padding:6px 0;
    break-inside:avoid; page-break-inside:avoid}
  #printvlak .pblok.pvast{border-top-width:1px}
  #printvlak .plinks{flex:0 0 34%; font-size:11px}
  #printvlak .prechts2{flex:1 1 auto; font-size:11px}
  #printvlak .pwanneer{font-weight:600}
  #printvlak .pkleur{display:flex; align-items:center; gap:5px; color:#444}
  #printvlak .pvlek{width:8px; height:8px; border-radius:2px; border:1px solid #999; display:inline-block}
  #printvlak .pzondag{color:#444}
  #printvlak .pvoorganger{font-weight:600; margin-bottom:2px}
  #printvlak .pvoorganger.pleeg{font-weight:400; color:#777; font-style:italic}
  #printvlak .pregel{display:flex; gap:6px; line-height:1.45}
  #printvlak .pregel .pl{flex:0 0 34%; color:#333}
  #printvlak .pregel .pw{flex:1 1 auto}

  /* ---------- de liturgie als genummerde lijst ---------- */
  #printvlak .ponder{font-size:11.5px; color:#333; margin:-6px 0 12px;
    display:flex; align-items:center; gap:4px; flex-wrap:wrap}
  #printvlak .plijst{margin:0; padding-left:22px; font-size:12px}
  #printvlak .plr{padding:4px 0; border-bottom:1px dotted #ccc; break-inside:avoid; page-break-inside:avoid}
  #printvlak .plr:last-child{border-bottom:none}
  #printvlak .plrkop{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
  #printvlak .plrtitel{flex:1 1 auto}
  #printvlak .plrmerk{flex:0 0 auto; font-size:9.5px; color:#777; white-space:nowrap}
  #printvlak .plrinhoud{font-size:11px; color:#333; margin-top:1px; white-space:pre-wrap}
  /* Wat niet op de beamer komt hoort er wel bij, maar mag rustiger staan. */
  #printvlak .plr.pstil .plrtitel{color:#555}

  /* ---------- de handleiding op papier ---------- */
  #printvlak .phandleiding{font-size:11.5px; line-height:1.55; max-width:none}
  #printvlak .phandleiding h2{font-size:15px; margin:0 0 2px; border-bottom:2px solid #3C5A8F;
    padding-bottom:2px; break-after:avoid; page-break-after:avoid}
  /* Elke module op een eigen bladzijde: dan kun je er één uitdelen. */
  #printvlak .phandleiding h2 ~ h2{break-before:page; page-break-before:always; margin-top:0}
  #printvlak .phandleiding h3{font-size:12.5px; margin:12px 0 2px; break-after:avoid;
    page-break-after:avoid}
  #printvlak .phandleiding .pintro{color:#555; margin:2px 0 8px; font-style:italic}
  #printvlak .phandleiding .pvraag{margin:6px 0; break-inside:avoid; page-break-inside:avoid}
  #printvlak .phandleiding .pvraag > div{margin-left:12px; color:#333}
  #printvlak .phandleiding p{margin:6px 0}
  #printvlak .phandleiding ul,#printvlak .phandleiding ol{margin:6px 0; padding-left:18px}
  #printvlak .phandleiding h4{font-size:11.5px; margin:8px 0 1px; break-after:avoid}
  #printvlak .phandleiding code{background:#F1EFEB; padding:0 3px; border-radius:3px}
  #printvlak .phandleiding .hlfig{width:100%; max-width:none; height:auto; border:1px solid #ddd;
    border-radius:6px; padding:6px; margin:8px 0; break-inside:avoid; page-break-inside:avoid}
  #printvlak .phandleiding .hltab th{width:34%; background:none; color:#000; border:1px solid #ddd;
    font-weight:600}
  #printvlak .phandleiding .hltab td{border:1px solid #ddd}
  #printvlak .phandleiding .pil{border:1px solid #ccc; padding:1px 6px; border-radius:8px; font-size:9px}
}

/* ---------- de drie blokken op het startscherm ---------- */
.blokken{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px}
@media(max-width:1080px){.blokken{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.blokken{grid-template-columns:1fr}}
.blok{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); box-shadow:var(--schaduw);
  padding:14px 16px; display:flex; flex-direction:column}
.blok.mijn{border-left:4px solid var(--oranje)}
.blok.volgende{border-left:4px solid var(--blauw)}
.bloklabel{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gedempt)}
.blokgroot{font-size:20px; margin-top:6px; line-height:1.15}
.blokregel{font-size:13px; margin-top:3px}
.blokknoppen{display:flex; gap:8px; margin-top:auto; padding-top:12px; flex-wrap:wrap}
.blok .keuze{padding:7px 10px}

/* ---------- dienstkaarten die openklappen ---------- */
.dienstlijst{display:flex; flex-direction:column; gap:10px}
.dienstkaart{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); box-shadow:var(--schaduw);
  overflow:hidden}
.dienstkaart.open{border-color:var(--oranje)}
.dienstkop{display:flex; align-items:center; gap:14px; width:100%; border:none; background:transparent;
  padding:12px 14px; text-align:left}
.dienstkop:hover{background:var(--oranje-licht)}
.dienstkaart.open .dienstkop{background:var(--oranje-licht); border-bottom:1px solid var(--lijn)}
.datumblok{flex:0 0 auto; width:52px; text-align:center; background:var(--blauw); color:#fff;
  border-radius:9px; padding:5px 2px; line-height:1.05}
.datumblok .dg{font-size:19px; font-weight:700; display:block}
.datumblok .mnd{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; opacity:.9}
.dienstkaart.verleden .datumblok{background:#B7B4AE}
.dienstinfo{flex:1; min-width:0}
.dienstinfo .t1{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dienstinfo .t2{font-size:12.5px; color:var(--gedempt); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pijl{flex:0 0 auto; color:var(--gedempt); transition:transform .18s}
.dienstkaart.open .pijl{transform:rotate(90deg); color:var(--oranje-diep)}
.dienstlijf{padding:14px}
.takenraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.taakvak{border:1px solid var(--lijn); border-radius:10px; padding:9px 11px; background:#FCFBF9}
.taakvak.vanjou{border-color:var(--oranje); background:var(--oranje-licht)}
.taakvak.botsvak{border-color:#E9C4C1; background:var(--rood-vlak)}
.taakvak .tl{font-size:11px; font-weight:700; letter-spacing:.03em; display:block; margin-bottom:5px}
.taakvak .tp{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13.5px; min-height:26px}
.taakvak .tp + .tp{margin-top:4px; padding-top:4px; border-top:1px dashed var(--lijn)}
.dienstvelden{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:12px}
.dienstvelden label{margin-top:0}

/* ---------- handleiding ----------
   Per module: bovenaan de keuze, dan de uitleg, dan de vragen. De uitleg staat
   gewoon open (je leest hem door), de vragen klappen open (je zoekt er één op).
   Leesbaarheid boven dichtheid: een smalle tekstkolom en flink wat lucht — een
   regel van negentig tekens leest niet. */
.hlkiezer{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
  margin-bottom:18px}
.hltegel{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); padding:12px 14px;
  font:inherit; border-top:3px solid var(--mk,var(--blauw)); box-shadow:var(--schaduw)}
.hltegel:hover{border-color:var(--mk,var(--blauw))}
.hltegel.aan{background:color-mix(in srgb, var(--mk,#3C5A8F) 8%, #fff); border-color:var(--mk,var(--blauw))}
.hltegel.vreemd{opacity:.65}
.hltegel .hlico{color:var(--mk,var(--blauw)); line-height:0}
.hltegel .hlico svg{width:22px; height:22px}
.hltegel .hlnaam{font-weight:600; font-size:14px}
.hltegel .hlaantal{font-size:11.5px; color:var(--gedempt)}
.hlmodkop{border-left:3px solid var(--mk,var(--blauw)); padding-left:12px; margin:0 0 14px}
.hlmodkop h3{margin:0; font-size:19px; font-weight:600}
.hluitleg{max-width:820px; padding:6px 24px 20px}
.hlsub{font-size:16px; font-weight:600; margin:22px 0 0; padding-top:14px;
  border-top:1px solid var(--lijn)}
.hluitleg > .hlsub:first-child{border-top:none; padding-top:4px; margin-top:6px}
.hluitleg p{margin:12px 0; font-size:14.5px; line-height:1.6}
.hluitleg ul,.hluitleg ol{margin:12px 0; padding-left:22px; font-size:14.5px; line-height:1.6}
.hluitleg li{margin-bottom:5px}
.hluitleg b{font-weight:600}
.hluitleg h4{font-size:14px; font-weight:600; margin:16px 0 -6px; color:var(--blauw)}
.hluitleg code{background:#F1EFEB; border-radius:4px; padding:1px 5px; font-size:13px}

/* De uitgaven. Het nummer links in een blokje, zodat de lijst leest als een
   tijdlijn en je in één oogopslag ziet wat er wanneer bij kwam. */
.hluitgaven{max-width:820px; margin-bottom:20px}
.hlvu{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond);
  margin-bottom:8px; overflow:hidden; box-shadow:var(--schaduw)}
.hlvu.open{border-color:var(--groen)}
.hlvukop{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none;
  border:none; padding:12px 14px; font:inherit}
.hlvukop:hover{background:#FCFBF9}
.hlvunr{flex:0 0 auto; background:var(--blauw); color:#fff; font-weight:700; font-size:14px;
  padding:5px 11px; border-radius:8px; letter-spacing:.02em}
.hlvu.open .hlvunr{background:var(--groen)}
.hlvutekst{flex:1 1 auto; font-size:14.5px}
.hlvulijf{padding:2px 16px 16px 16px; border-top:1px solid var(--lijn)}
.hlvuonder{margin:12px 0; font-size:14px; color:var(--gedempt); line-height:1.6}
.hlvulijf h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--gedempt);
  margin:14px 0 6px}
.hlvulijst{margin:0; padding-left:20px; font-size:14px; line-height:1.6}
.hlvulijst li{margin-bottom:6px}
.hlvulijst b{font-weight:600}

/* De vragen. Eén regel per vraag, antwoord eronder als je hem opent. */
.hlfaq{margin-top:22px; max-width:820px}
.hlfaqkop{font-size:15px; font-weight:600; color:var(--gedempt); margin:0 0 8px}
.hlv{background:var(--vlak); border:1px solid var(--lijn); border-radius:10px; margin-bottom:6px;
  overflow:hidden}
.hlv.open{border-color:var(--oranje)}
.hlvraag{display:flex; align-items:baseline; gap:9px; width:100%; text-align:left; background:none;
  border:none; padding:11px 14px; font:inherit; font-size:14.5px; font-weight:600}
.hlvraag:hover{background:var(--oranje-licht)}
.hlantwoord{padding:0 14px 13px 32px; font-size:14px; line-height:1.6; color:#3A3A3A}
.hlpijl{color:var(--gedempt); transition:transform .18s; font-size:17px; line-height:1}
.hlv.open .hlpijl{transform:rotate(90deg); color:var(--oranje-diep)}
.hlfig{display:block; width:100%; max-width:660px; height:auto; margin:16px 0;
  border:1px solid var(--lijn); border-radius:10px; padding:10px; background:#FCFBF9}
.hltab{margin:12px 0; font-size:14px}
.hltab th{width:38%; font-weight:600; vertical-align:top; white-space:normal}
.hltab td{white-space:normal}

/* ---------- de agenda van het gebouw ----------
   Weekweergave: de ruimtes onder elkaar, de zeven dagen ernaast. Eén grid met
   een vaste eerste kolom, zodat je bij het zijwaarts schuiven altijd blijft
   zien over welke ruimte je kijkt. Op een telefoon wordt die kolom smaller maar
   blijft hij staan - zonder ruimtenaam is het raster onleesbaar. */
.rskaart{overflow:auto; margin-bottom:6px}
.rsraster{min-width:760px}
.rsrij{display:grid; grid-template-columns:150px repeat(7,minmax(96px,1fr)); border-bottom:1px solid var(--lijn)}
.rsrij:last-child{border-bottom:none}
.rskop{position:sticky; top:0; z-index:3; background:var(--vlak)}
.rshoek,.rsdag{padding:8px 10px; font-size:12px; font-weight:700; color:var(--gedempt);
  border-left:1px solid var(--lijn)}
.rshoek{border-left:none; position:sticky; left:0; background:var(--vlak); z-index:2}
.rsdag.nu{background:var(--oranje-licht); color:#7A4E06}
.rsnaam{display:flex; align-items:center; gap:7px; padding:8px 10px; font-size:13px; font-weight:600;
  position:sticky; left:0; background:var(--vlak); z-index:1; border-right:1px solid var(--lijn)}
.rsvak{position:relative; min-height:58px; padding:5px; border-left:1px solid var(--lijn);
  display:flex; flex-direction:column; gap:4px; cursor:pointer}
.rsvak:hover{background:#FCFBF9}
.rsvak.voorbij{background:repeating-linear-gradient(135deg,transparent,transparent 6px,#F4F2EF 6px,#F4F2EF 12px);
  cursor:default}
.rsplus{position:absolute; right:4px; bottom:4px; width:20px; height:20px; line-height:1; padding:0;
  border:1px dashed var(--lijn); background:var(--vlak); color:var(--gedempt); border-radius:6px;
  font-size:14px; opacity:0; transition:opacity .15s}
.rsvak:hover .rsplus,.rsmdag:hover .rsplus{opacity:1}
.rsplus:hover{border-color:var(--oranje); color:var(--oranje-diep); border-style:solid}

/* Een blokje in de agenda. De kleur is die van de ruimte (--rk); een aanvraag
   die nog op akkoord wacht krijgt een streepjesrand, want dat is precies het
   verschil dat je in één oogopslag wilt zien. */
.rsblok{display:block; width:100%; text-align:left; font:inherit; font-size:11.5px; line-height:1.35;
  padding:4px 6px; border-radius:7px; border:1px solid var(--lijn); background:#F7F6F4; color:var(--ink);
  border-left:3px solid var(--rk,#3C5A8F); overflow:hidden}
/* De tint van de ruimte, waar de browser color-mix kent; anders blijft het
   grijze blokje met het gekleurde randje links staan. */
@supports (background:color-mix(in srgb,#000 10%,#fff)){
  .rsblok{border-color:color-mix(in srgb, var(--rk,#3C5A8F) 35%, #fff);
    background:color-mix(in srgb, var(--rk,#3C5A8F) 10%, #fff);
    border-left-color:var(--rk,#3C5A8F)}
}
.rsblok:hover{background:color-mix(in srgb, var(--rk,#3C5A8F) 18%, #fff)}
.rsblok.vraag{border-style:dashed; border-left-style:solid}
.rsblok.mijn{box-shadow:inset 0 0 0 1px var(--oranje)}
.rsblok .rstijd{font-weight:700}
.rsblok .rsruimte{font-weight:600; color:var(--gedempt)}
.rsblok .rstitel{display:inline}
.rsblok .rsext,.rsblok .rsverw{font-size:9.5px; margin-left:3px; vertical-align:top}
.rsblok .rsext{background:var(--blauw-licht); color:var(--blauw); padding:0 4px; border-radius:5px;
  font-weight:700; text-transform:uppercase}

/* Maandweergave: het gewone kalenderraster. */
.rsmaand{display:grid; grid-template-columns:repeat(7,1fr); min-width:700px}
.rsmkopdag{padding:7px 9px; font-size:12px; font-weight:700; color:var(--gedempt);
  border-bottom:1px solid var(--lijn); text-transform:uppercase; letter-spacing:.04em}
.rsmdag{position:relative; min-height:92px; padding:5px 6px 8px; border-left:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn); display:flex; flex-direction:column; gap:3px; cursor:pointer}
.rsmdag:nth-child(7n+1){border-left:none}
.rsmdag.buiten{background:#FAF9F7; color:var(--gedempt)}
.rsmdag.nu .rsmkop{color:var(--oranje-diep); font-weight:800}
.rsmkop{font-size:12px; font-weight:700; color:var(--gedempt); display:flex; justify-content:space-between;
  align-items:center; min-height:20px}
.rsmdag .rsplus{position:static; opacity:0}

/* De dagdelen in het reserveervenster. Een raster in plaats van een flexrij:
   dan zijn de knoppen even breed en houd je geen half lege regel over met een
   gat aan de rechterkant. De tijd staat onder de naam, zodat er vier naast
   elkaar passen. */
.merkjes.dagdelen{display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:8px;
  max-width:none; margin-top:2px}
.merkjes.dagdelen .merkje{flex-direction:column; align-items:flex-start; gap:1px; padding:8px 11px;
  width:100%; line-height:1.3}
.merkjes.dagdelen .merkje b{font-weight:600}
.merkjes.dagdelen .merkje .stil{font-size:11.5px; font-weight:400}

/* Het vinkje in de aanvragentabel: het label hoort ernaast te staan, niet
   eronder - vandaar de expliciete breedte op het vakje zelf (input{width:100%}
   uit het vensterblok slaat anders ook hier toe). */
.rsvink{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--gedempt);
  white-space:nowrap; cursor:pointer}
.rsvink input{width:15px; flex:0 0 15px; height:15px; padding:0; margin:0}

/* ---------- mobiel ---------- */
@media(max-width:860px){
  .mobielbalk{display:flex}
  .schil{grid-template-columns:1fr}
  .zijbalk{position:fixed; top:0; left:0; z-index:45; width:min(84vw,300px); height:100vh;
    transform:translateX(-100%); transition:transform .26s ease; padding-bottom:24px}
  :root.menu-open .zijbalk{transform:translateX(0); box-shadow:var(--schaduw)}
  :root.menu-open .menusluier{display:block}
  main{padding:14px 12px 70px}
  .takenraster{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .kop h2{font-size:20px}
  .werkbalk{width:100%}
  select.cel,input.cel{min-height:38px; font-size:14px; max-width:190px}
  th,td{padding:9px 10px}
  .podium{gap:8px}
  .trede.goud{height:130px} .trede.zilver{height:104px} .trede.brons{height:88px}
  .inlogkaart{padding:26px 22px}
}
@media(max-width:480px){
  .takenraster{grid-template-columns:1fr}
  .mobielbalk .merk span{display:none}
  /* De ruimtekolom smaller, maar hij blijft staan: zonder naam ernaast weet je
     niet meer waar je naar kijkt. */
  .rsrij{grid-template-columns:104px repeat(7,minmax(84px,1fr))}
  .rsnaam{font-size:12px; padding:8px 7px}
  .rsplus{opacity:1}
}

/* ---------- App installeren ----------
   Twee kaarten naast elkaar: links wat er op dit toestel moet gebeuren, rechts
   de code om hem op je telefoon te openen. Op een smal scherm onder elkaar. */
.instrooster{display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start}
.instkop{margin:0 0 4px; font-size:15px}
.instwie{color:var(--gedempt); font-size:13px; margin-bottom:14px}
.inststap{margin:0; padding-left:20px; line-height:1.6; font-size:14px}
.inststap li{margin-bottom:7px}
.inststap li:last-child{margin-bottom:0}
.instmeer{margin-top:14px; border-top:1px solid var(--lijn); padding-top:12px}
.instmeer summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--blauw)}
.instmeer[open] summary{margin-bottom:10px}
.instkies{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 4px}
.instkies .merkje{cursor:pointer}
.instqr{text-align:center}
.instqr .stil{font-size:12.5px; text-align:left}
.qrdoos{margin:14px auto 10px; width:max-content; padding:8px; background:#fff;
  border:1px solid var(--lijn); border-radius:10px}
.qrdoos svg{display:block}
.instlink{font-size:11.5px; color:var(--gedempt); word-break:break-all; margin-bottom:10px}
.instqr .werkbalk{justify-content:center}
@media(max-width:860px){
  .instrooster{grid-template-columns:1fr}
}