/* Alles wat alleen zichtbaar is als je bent ingelogd om te bewerken. */

body.bewerkmodus{padding-bottom:76px}

.bewerkbaar{outline:1px dashed rgba(214,40,40,.45);outline-offset:4px;border-radius:2px;cursor:text}
.bewerkbaar:hover{outline-style:solid;outline-color:rgba(214,40,40,.7)}
.bewerkbaar:focus{outline:2px solid var(--rood);background:rgba(214,40,40,.04)}
.gewijzigd{outline:2px solid #16a34a !important}

.beeld[data-foto]{outline:1px dashed rgba(214,40,40,.45);outline-offset:4px}
.foto-knop{
  position:absolute;left:12px;bottom:12px;z-index:3;
  background:rgba(0,0,0,.78);color:#fff;border:0;border-radius:999px;
  padding:9px 16px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
}
.foto-knop:hover{background:var(--rood)}

.kaart-bediening{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:3}
.kaart-bediening button{
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.78);color:#fff;font-size:1rem;line-height:1;
}
.kaart-bediening button:hover{background:var(--rood)}

.werkbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--zwart);color:#fff;
  display:flex;align-items:center;gap:16px;
  padding:12px 24px;
}
.werkbalk .knop{padding:9px 20px;font-size:.95rem}
.werkbalk-melding{margin-right:auto;font-size:.95rem;color:#cfc6bb}
.werkbalk-melding.goed{color:#86efac}
.werkbalk-melding.fout{color:#fca5a5}
.werkbalk-melding.let-op{color:#fcd34d}

/* het kleine venster met instellingen van een onderwerp */
.venster{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.venster-kaart{
  background:#fff;border-radius:6px;padding:28px;width:min(560px,100%);
  max-height:90vh;overflow:auto;
}
.venster-kaart h2{margin-top:0}
.venster-kaart label{display:block;margin:0 0 18px;font-weight:700}
.venster-kaart .hint{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-bottom:6px}
.venster-kaart input,.venster-kaart textarea{
  width:100%;font:inherit;padding:10px 12px;border:1px solid var(--lijn);border-radius:4px;font-weight:400;
}
.venster-knoppen{display:flex;gap:10px;margin:0}

/* de inlogpagina */
.inlog{max-width:460px;margin:0 auto;padding:80px 24px}
.inlog img{margin-bottom:28px;width:220px}
.inlog label{display:block;font-weight:700;margin:22px 0 6px}
.inlog input{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--lijn);border-radius:4px}
.inlog .knop{margin-top:20px;border:0;font:inherit;font-weight:800;cursor:pointer}
.inlog .melding{background:#fee2e2;color:#b91c1c;padding:12px 16px;border-radius:4px;font-weight:700}
.inlog .melding-goed{background:#dcfce7;color:#166534}
.inlog .vinkje{display:flex;align-items:center;gap:10px;font-weight:400;margin-top:16px;font-size:.95rem}
.inlog .vinkje input{width:auto;margin:0}
.inlog #code{font-size:1.6rem;letter-spacing:.35em;text-align:center;font-weight:700}
.inlog .terug{margin-top:28px;font-size:.9rem}