/* ODH-training — gedeelde huisstijl. Eén bron voor alle deelnemerschermen.
   Laad met: <link rel="stylesheet" href="/huisstijl.css">
   Alle klassen zijn genamespaced met "odh-" zodat ze niet botsen met de
   bestaande pagina-CSS. Kleur, typografie en de kerncomponenten staan hier. */

:root{
  --odh-blauw:#1d4e89; --odh-blauw-d:#163a66; --odh-blauw-l:#2a64a8;
  --odh-inkt:#1d2530; --odh-grijs:#5b6877; --odh-lijn:#e2e8f0;
  --odh-bg:#eef1f5; --odh-vlak:#fff; --odh-blauwvlak:#e8f0f9;
  --odh-groen:#1b6b43; --odh-groenvlak:#e6f4ec;
  --odh-rood:#9a3b2f; --odh-roodvlak:#f7e9e6;
  --odh-goud:#8a5a00; --odh-goudvlak:#fbf3e2;
  --odh-radius:14px; --odh-radius-s:9px; --odh-radius-pill:20px;
  --odh-schaduw:0 6px 18px rgba(29,78,137,.12);
  --odh-maxw:880px;
}

/* ---- Deelnemer-header: overal dezelfde balk ---------------------------- */
.odh-header{background:linear-gradient(135deg,var(--odh-blauw-d),var(--odh-blauw-l));color:#fff;padding:.85rem 1.1rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.odh-header__in{max-width:var(--odh-maxw);margin:0 auto;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.odh-header__logo{background:#fff;border-radius:8px;padding:4px 8px;display:inline-flex;align-items:center;flex:0 0 auto}
.odh-header__logo img{height:26px;width:auto;display:block}
.odh-header__titel{min-width:0}
.odh-header__titel h1{margin:0;font-size:1.12rem;font-weight:740;letter-spacing:-.01em;line-height:1.2;color:#fff}
.odh-header__sub{display:block;font-size:.8rem;font-weight:500;opacity:.85;margin-top:.1rem}
.odh-header__acties{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.odh-home{display:inline-flex;align-items:center;gap:.35rem;color:#fff;text-decoration:none;font-size:.85rem;font-weight:650;border:1px solid rgba(255,255,255,.5);border-radius:var(--odh-radius-s);padding:.32rem .7rem;background:rgba(255,255,255,.1)}
.odh-home:hover{background:rgba(255,255,255,.22)}
.odh-home svg{width:14px;height:14px}
.odh-badge{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:var(--odh-radius-pill);padding:.2rem .65rem;background:var(--odh-goudvlak);color:var(--odh-goud)}

/* ---- Pagina-omhulsel --------------------------------------------------- */
.odh-main{max-width:var(--odh-maxw);margin:0 auto;padding:1.2rem 1.1rem 4rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--odh-inkt)}
.odh-lead{font-size:1.05rem;margin:0 0 1rem;line-height:1.6}
.odh-sectie{font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--odh-grijs);margin:1.6rem 0 .5rem}

/* ---- Knoppen ----------------------------------------------------------- */
.odh-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:650;text-decoration:none;border:1px solid transparent;border-radius:var(--odh-radius-s);padding:.7rem 1.2rem;cursor:pointer;transition:filter .12s,border-color .12s}
.odh-btn--primair{background:var(--odh-blauw);color:#fff} .odh-btn--primair:hover{filter:brightness(1.06)}
.odh-btn--secundair{background:var(--odh-vlak);color:var(--odh-blauw);border-color:var(--odh-lijn)} .odh-btn--secundair:hover{border-color:var(--odh-blauw)}
.odh-btn--uit{background:var(--odh-bg);color:var(--odh-grijs);border-color:var(--odh-lijn);cursor:not-allowed}

/* ---- Kaarten / tegels -------------------------------------------------- */
.odh-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem}
.odh-tegel{display:block;text-decoration:none;color:inherit;background:var(--odh-vlak);border:1px solid var(--odh-lijn);border-radius:var(--odh-radius);padding:1.1rem 1.15rem;transition:border-color .15s,box-shadow .15s}
.odh-tegel:hover{border-color:var(--odh-blauw);box-shadow:var(--odh-schaduw)}
.odh-tegel--prim{border-color:#c6d7eb;background:linear-gradient(180deg,#f7fafd,#fff)}
.odh-tegel__ic{width:38px;height:38px;border-radius:10px;background:var(--odh-blauwvlak);color:var(--odh-blauw);display:flex;align-items:center;justify-content:center;margin-bottom:.65rem}
.odh-tegel--prim .odh-tegel__ic{background:var(--odh-blauw);color:#fff}
.odh-tegel__ic svg{width:21px;height:21px}
.odh-tegel__k{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--odh-blauw)}
.odh-tegel h3{margin:.2rem 0 .3rem;font-size:1.06rem}
.odh-tegel p{margin:0;font-size:.86rem;color:var(--odh-grijs)}

/* ---- Voet -------------------------------------------------------------- */
.odh-footer{max-width:var(--odh-maxw);margin:0 auto;padding:0 1.1rem 3rem;color:var(--odh-grijs);font-size:.8rem}
.odh-footer a{color:inherit}

@media print{.odh-home,.odh-header__acties{display:none}}