/* ==========================================================================
   Oefenmeester — Componentenlaag  (om.css)
   Vereist assets/css/om-tokens.css; dat bestand levert alle variabelen.
   ========================================================================== */

/* ── 4. Basis ──────────────────────────────────────────────────────────────
   Deze elementregels gelden alleen op pagina's die de nieuwe shell gebruiken
   (body.om-page). Bestaande pagina's laden dit bestand ook — voor de header,
   footer en .om-*-componenten — maar hun eigen typografie en indeling blijven
   dan onaangeroerd. Zo kunnen we de shell overal uitrollen zonder 130 pagina's
   tegelijk om te gooien. */
.om-page, .om-page *, .om-page *::before, .om-page *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.om-page {
  margin: 0;
  font-family: var(--om-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--om-ink);
  background: var(--om-bg);
  -webkit-font-smoothing: antialiased;
}
/* Speelse, rustige achtergrondgloed — puur decoratief. */
body.om-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 8% -8%,  color-mix(in srgb, var(--om-brand) 13%, transparent), transparent),
    radial-gradient(32rem 24rem at 96% 2%,  color-mix(in srgb, var(--om-brand-2) 11%, transparent), transparent),
    radial-gradient(30rem 22rem at 50% 108%, color-mix(in srgb, var(--om-sky) 9%, transparent), transparent);
}
.om-page h1, .om-page h2, .om-page h3, .om-page h4 { margin: 0 0 .4em; line-height: 1.22; letter-spacing: -.021em; font-weight: 800; color: var(--om-ink); }
.om-page h1 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.032em; }
.om-page h2 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.026em; }
.om-page h3 { font-size: 18px; }
.om-page p  { margin: 0 0 1em; }
.om-page a  { color: var(--om-brand); text-decoration: none; }
.om-page a:hover { text-decoration: underline; }
.om-page img, .om-page svg, .om-page video { max-width: 100%; height: auto; }
.om-page hr { border: 0; border-top: 1px solid var(--om-line); margin: 22px 0; }
.om-page small { font-size: 12.5px; color: var(--om-ink-2); }
.om-small { font-size: 12.5px; color: var(--om-ink-2); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--om-brand) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--om-brand) 22%, transparent); }

/* De header en onderbalk hebben hun eigen box-sizing nodig op oude pagina's,
   die soms een afwijkende globale reset hanteren. */
.om-header, .om-header *, .om-footer, .om-footer *, .om-tabbar, .om-tabbar * { box-sizing: border-box; }

/* ── 5. Layout-shell ───────────────────────────────────────────────────── */
.om-shell { display: flex; flex-direction: column; min-height: 100vh; }
.om-main  { flex: 1; width: 100%; max-width: var(--om-content); margin-inline: auto; padding: 26px var(--om-gut) 64px; }
.om-main--wide { max-width: var(--om-content-wide); }
.om-section { margin-bottom: 34px; }
.om-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.om-section__head h2 { margin: 0; }
.om-section__head p  { margin: 2px 0 0; color: var(--om-ink-2); font-size: 14px; }

.om-grid { display: grid; gap: 18px; }
.om-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.om-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.om-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.om-grid--auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.om-split { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 22px; align-items: start; }
.om-stack { display: grid; gap: 14px; }
.om-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.om-row--end { justify-content: flex-end; }
.om-row--between { justify-content: space-between; }
.om-spacer { flex: 1; }

/* ── 6. Header & navigatie ─────────────────────────────────────────────── */
.om-header {
  position: sticky; top: 0; z-index: 300;
  background: color-mix(in srgb, var(--om-surface) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--om-line);
}
.om-header__in {
  max-width: var(--om-content-wide); margin-inline: auto;
  padding: 10px var(--om-gut);
  display: flex; align-items: center; gap: 14px; position: relative;
}
.om-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 17px; color: var(--om-ink); letter-spacing: -.03em; }
.om-logo:hover { text-decoration: none; }
.om-logo__mark {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--om-brand), var(--om-brand-2));
  color: #fff; font-size: 19px; font-weight: 900; box-shadow: var(--om-sh-brand); flex: none;
}
.om-logo__sub { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--om-ink-3); }

.om-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.om-nav a, .om-nav button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: var(--om-r-sm);
  font: inherit; font-weight: 700; font-size: 14px;
  color: var(--om-ink-2); background: none; border: 0; cursor: pointer;
  transition: background var(--om-fast) var(--om-ease), color var(--om-fast) var(--om-ease);
  white-space: nowrap;
}
.om-nav a:hover, .om-nav button:hover { background: var(--om-brand-soft); color: var(--om-brand-ink); text-decoration: none; }
.om-nav a.is-active {
  color: #fff; background: linear-gradient(135deg, var(--om-brand), var(--om-brand-2));
  box-shadow: var(--om-sh-brand);
}
.om-nav__ico { font-size: 15px; line-height: 1; }

.om-menu { position: relative; }
.om-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 235px;
  background: var(--om-surface); border: 1px solid var(--om-line);
  border-radius: var(--om-r); box-shadow: var(--om-sh-lg); padding: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--om-fast) var(--om-ease), transform var(--om-fast) var(--om-ease), visibility var(--om-fast);
  z-index: 320;
}
.om-menu.is-open .om-menu__panel { opacity: 1; visibility: visible; transform: none; }
.om-menu__panel a, .om-menu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: var(--om-r-xs); font: inherit; font-size: 14px; font-weight: 650;
  color: var(--om-ink); background: none; border: 0; cursor: pointer; text-align: left;
}
.om-menu__panel a:hover, .om-menu__panel button:hover { background: var(--om-surface-2); text-decoration: none; }
.om-menu__sep { height: 1px; background: var(--om-line); margin: 6px 4px; }

.om-avatar {
  width: 38px; height: 38px; border-radius: 13px; object-fit: cover; flex: none;
  border: 2px solid var(--om-surface); box-shadow: 0 0 0 1px var(--om-line), var(--om-sh-xs);
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--om-brand), var(--om-brand-2));
}
.om-burger { display: none; }
.om-tabbar { display: none; }

/* ── 7. Kaarten ────────────────────────────────────────────────────────── */
.om-card {
  background: var(--om-surface);
  border: 1px solid var(--om-line);
  border-radius: var(--om-r);
  padding: 20px;
  box-shadow: var(--om-sh-xs);
  transition: border-color var(--om-fast) var(--om-ease), box-shadow var(--om-mid) var(--om-ease), transform var(--om-mid) var(--om-ease);
}
.om-card--pad-lg { padding: 26px; }
.om-card--flat { box-shadow: none; }
.om-card--soft { background: var(--om-surface-2); }
a.om-card { display: block; color: inherit; }
a.om-card:hover, .om-card--hover:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--om-brand) 42%, var(--om-line));
  box-shadow: var(--om-sh);
}
.om-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.om-card__head h3 { margin: 0; font-size: 16px; }
.om-card__head p  { margin: 2px 0 0; font-size: 13px; color: var(--om-ink-2); }

/* Gekleurde kaart-varianten voor het speelse ritme */
.om-card--tint { border-color: transparent; background: var(--om-brand-soft); }
.om-tint-mint  { --om-brand:#10B981; --om-brand-2:#34D399; --om-brand-ink:#067A54; --om-brand-soft:var(--om-mint-soft); }
.om-tint-sky   { --om-brand:#38BDF8; --om-brand-2:#7DD3FC; --om-brand-ink:#0369A1; --om-brand-soft:var(--om-sky-soft); }
.om-tint-sun   { --om-brand:#F5A524; --om-brand-2:#FBBF24; --om-brand-ink:#A16207; --om-brand-soft:var(--om-sun-soft); }
.om-tint-coral { --om-brand:#F2545B; --om-brand-2:#FB7185; --om-brand-ink:#B42026; --om-brand-soft:var(--om-coral-soft); }
.om-tint-pink  { --om-brand:#EC4899; --om-brand-2:#F472B6; --om-brand-ink:#A21D68; --om-brand-soft:var(--om-pink-soft); }
.om-tint-lime  { --om-brand:#84CC16; --om-brand-2:#A3E635; --om-brand-ink:#4D7C0F; --om-brand-soft:var(--om-lime-soft); }
.om-tint-plum  { --om-brand:#A855F7; --om-brand-2:#C084FC; --om-brand-ink:#7126BC; --om-brand-soft:var(--om-plum-soft); }

/* ── 8. Hero ───────────────────────────────────────────────────────────── */
.om-hero {
  position: relative; overflow: hidden;
  border-radius: var(--om-r-lg);
  padding: 30px 32px;
  color: #fff;
  background: linear-gradient(130deg, var(--om-brand-ink) 0%, var(--om-brand) 48%, var(--om-brand-2) 100%);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--om-brand) 30%, transparent);
}
.om-hero::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -60px; top: -130px;
  border-radius: 50%; border: 42px solid rgba(255,255,255,.09); pointer-events: none;
}
.om-hero::before {
  content: ""; position: absolute; width: 150px; height: 150px; right: 22%; bottom: -100px;
  border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none;
}
.om-hero > * { position: relative; }
.om-hero h1, .om-hero h2 { color: #fff; margin: 0 0 6px; }
.om-hero p { color: rgba(255,255,255,.86); margin: 0; max-width: 56ch; }
.om-hero__stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 20px; }
.om-hero__stat b { display: block; font-size: 25px; font-weight: 900; letter-spacing: -.03em; }
.om-hero__stat span { font-size: 12px; color: rgba(255,255,255,.75); font-weight: 650; }

/* ── 9. Knoppen ────────────────────────────────────────────────────────── */
.om-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--om-r-sm);
  font: inherit; font-size: 14.5px; font-weight: 750; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--om-fast) var(--om-ease), box-shadow var(--om-mid) var(--om-ease), background var(--om-fast) var(--om-ease);
  touch-action: manipulation;
}
.om-btn:hover { text-decoration: none; transform: translateY(-2px); }
.om-btn:active { transform: translateY(0); }
.om-btn:disabled, .om-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.om-btn--primary { background: linear-gradient(135deg, var(--om-brand), var(--om-brand-2)); color: #fff; box-shadow: var(--om-sh-brand); }
.om-btn--primary:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--om-brand) 36%, transparent); }
.om-btn--soft { background: var(--om-brand-soft); color: var(--om-brand-ink); }
.om-btn--soft:hover { background: color-mix(in srgb, var(--om-brand) 16%, var(--om-surface)); }
.om-btn--ghost { background: var(--om-surface); color: var(--om-ink); border-color: var(--om-line); box-shadow: var(--om-sh-xs); }
.om-btn--ghost:hover { border-color: var(--om-line-2); }
.om-btn--quiet { background: none; color: var(--om-ink-2); }
.om-btn--quiet:hover { background: var(--om-surface-2); color: var(--om-ink); }
.om-btn--danger { background: var(--om-bad); color: #fff; }
.om-btn--ok { background: var(--om-ok); color: #fff; }
.om-btn--lg { padding: 15px 26px; min-height: 52px; font-size: 16px; border-radius: var(--om-r); }
.om-btn--sm { padding: 7px 12px; min-height: 34px; font-size: 13px; border-radius: var(--om-r-xs); }
.om-btn--block { width: 100%; }
.om-btn--pill { border-radius: var(--om-r-pill); }

/* ── 10. Formulieren ───────────────────────────────────────────────────── */
.om-field { display: block; margin-bottom: 16px; }
.om-label { display: block; font-size: 13px; font-weight: 750; color: var(--om-ink-2); margin-bottom: 6px; }
.om-input, .om-select, .om-textarea {
  width: 100%; padding: 12px 14px; min-height: 46px;
  font: inherit; font-size: 15px; color: var(--om-ink);
  background: var(--om-surface); border: 1.5px solid var(--om-line);
  border-radius: var(--om-r-sm); transition: border-color var(--om-fast), box-shadow var(--om-fast);
}
.om-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.om-input::placeholder, .om-textarea::placeholder { color: var(--om-ink-3); }
.om-input:focus, .om-select:focus, .om-textarea:focus {
  outline: none; border-color: var(--om-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--om-brand) 15%, transparent);
}
.om-hint { font-size: 12.5px; color: var(--om-ink-3); margin-top: 5px; }
.om-error { font-size: 12.5px; color: var(--om-bad); margin-top: 5px; font-weight: 650; }
.om-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.om-check input { width: 19px; height: 19px; accent-color: var(--om-brand); margin-top: 1px; flex: none; }

/* ── 11. Chips en badges ───────────────────────────────────────────────── */
.om-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--om-r-pill);
  font-size: 12.5px; font-weight: 750;
  background: var(--om-surface-2); color: var(--om-ink-2); border: 1px solid var(--om-line);
}
.om-chip--brand { background: var(--om-brand-soft); color: var(--om-brand-ink); border-color: transparent; }
.om-chip--ok    { background: var(--om-ok-soft);   color: #067A54; border-color: transparent; }
.om-chip--warn  { background: var(--om-warn-soft); color: #A16207; border-color: transparent; }
.om-chip--bad   { background: var(--om-bad-soft);  color: #B42026; border-color: transparent; }
html[data-theme="dark"] .om-chip--ok   { color: #5EEAD4; }
html[data-theme="dark"] .om-chip--warn { color: #FCD34D; }
html[data-theme="dark"] .om-chip--bad  { color: #FCA5A5; }
.om-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ── 12. Statistiek-tegels ─────────────────────────────────────────────── */
.om-stat {
  background: var(--om-surface); border: 1px solid var(--om-line);
  border-radius: var(--om-r); padding: 17px 18px 17px 22px; position: relative; overflow: hidden;
}
.om-stat::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--om-brand), var(--om-brand-2));
}
.om-stat__label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--om-ink-3); }
.om-stat__value { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.035em; margin: 6px 0 2px; color: var(--om-ink); }
.om-stat__meta  { font-size: 12.5px; color: var(--om-ink-2); }
.om-stat__meta.up   { color: var(--om-ok); font-weight: 700; }
.om-stat__meta.down { color: var(--om-bad); font-weight: 700; }

/* ── 13. Voortgang ─────────────────────────────────────────────────────── */
.om-progress { height: 10px; border-radius: var(--om-r-pill); background: var(--om-bg-2); overflow: hidden; }
.om-progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--om-brand), var(--om-brand-2)); transition: width var(--om-mid) var(--om-ease); }
.om-progress--thick { height: 16px; }
.om-ring {
  --pct: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--om-brand) calc(var(--pct) * 1%), var(--om-bg-2) 0);
}
.om-ring > span { width: 58px; height: 58px; border-radius: 50%; background: var(--om-surface); display: grid; place-items: center; font-weight: 900; font-size: 15px; }

/* ── 14. Tabellen ──────────────────────────────────────────────────────── */
.om-tablewrap { overflow-x: auto; border: 1px solid var(--om-line); border-radius: var(--om-r); background: var(--om-surface); }
.om-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.om-table th {
  text-align: left; padding: 12px 14px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--om-ink-3); background: var(--om-surface-2); border-bottom: 1px solid var(--om-line);
}
.om-table td { padding: 13px 14px; border-bottom: 1px solid var(--om-line); vertical-align: middle; }
.om-table tbody tr:last-child td { border-bottom: 0; }
.om-table tbody tr { transition: background var(--om-fast); }
.om-table tbody tr:hover { background: var(--om-surface-2); }
.om-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 15. Lege staat en meldingen ───────────────────────────────────────── */
.om-empty { text-align: center; padding: 46px 22px; color: var(--om-ink-2); }
.om-empty__ico { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.om-empty h3 { margin: 0 0 6px; }
.om-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--om-r-sm);
  background: var(--om-brand-soft); border: 1px solid transparent; font-size: 14px;
}
.om-note--ok   { background: var(--om-ok-soft); }
.om-note--warn { background: var(--om-warn-soft); }
.om-note--bad  { background: var(--om-bad-soft); }
.om-note b { display: block; margin-bottom: 2px; }

/* ── 16. Footer ────────────────────────────────────────────────────────── */
.om-footer { border-top: 1px solid var(--om-line); background: var(--om-surface); margin-top: auto; }
.om-footer__in { max-width: var(--om-content-wide); margin-inline: auto; padding: 34px var(--om-gut); }
.om-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.om-footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--om-ink-3); margin-bottom: 10px; }
.om-footer nav a { display: block; padding: 4px 0; font-size: 14px; color: var(--om-ink-2); }
.om-footer nav a:hover { color: var(--om-brand); }
.om-footer__base {
  border-top: 1px solid var(--om-line); padding: 16px var(--om-gut); font-size: 13px;
  color: var(--om-ink-3); max-width: var(--om-content-wide); margin-inline: auto;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
}

/* ── 17. Hulpklassen ───────────────────────────────────────────────────── */
.om-mut { color: var(--om-ink-2); }
.om-mut-3 { color: var(--om-ink-3); }
.om-center { text-align: center; }
.om-nowrap { white-space: nowrap; }
.om-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-mt-0{margin-top:0}.om-mt-1{margin-top:8px}.om-mt-2{margin-top:16px}.om-mt-3{margin-top:24px}.om-mt-4{margin-top:34px}
.om-mb-0{margin-bottom:0}.om-mb-1{margin-bottom:8px}.om-mb-2{margin-bottom:16px}.om-mb-3{margin-bottom:24px}.om-mb-4{margin-bottom:34px}
.om-hide { display: none !important; }
.om-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.om-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 999;
  background: var(--om-brand); color: #fff; padding: 11px 18px; border-radius: var(--om-r-sm); font-weight: 750;
}
.om-skip:focus { left: 12px; text-decoration: none; }

/* ── 18. Animatie ──────────────────────────────────────────────────────── */
@keyframes om-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes om-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes om-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.om-in  { animation: om-in var(--om-mid) var(--om-ease) both; }
.om-pop { animation: om-pop 360ms cubic-bezier(.34,1.56,.64,1) both; }
.om-skeleton {
  background: linear-gradient(90deg, var(--om-surface-2) 25%, var(--om-bg-2) 50%, var(--om-surface-2) 75%);
  background-size: 200% 100%; animation: om-shimmer 1.4s infinite; border-radius: var(--om-r-xs);
}

/* ── 19. Responsief ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .om-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .om-split   { grid-template-columns: 1fr; }
  .om-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .om-nav { display: none; }
  .om-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 10px; right: 10px; top: calc(100% + 8px);
    background: var(--om-surface); border: 1px solid var(--om-line);
    border-radius: var(--om-r); box-shadow: var(--om-sh-lg); padding: 10px; margin: 0;
  }
  .om-nav.is-open a, .om-nav.is-open button { justify-content: flex-start; padding: 12px 14px; }
  .om-burger {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    border-radius: var(--om-r-sm); border: 1px solid var(--om-line);
    background: var(--om-surface); cursor: pointer; font-size: 18px; color: var(--om-ink);
  }
  .om-grid--2, .om-grid--3, .om-grid--4 { grid-template-columns: 1fr; }
  .om-hero { padding: 24px 22px; border-radius: var(--om-r); }
  .om-main { padding: 18px 16px 96px; }
  :root { --om-gut: 16px; }

  /* Vaste onderbalk voor de belangrijkste routes */
  .om-tabbar {
    display: grid; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 400;
    grid-auto-flow: column; grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--om-surface) 94%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--om-line); border-radius: var(--om-r);
    box-shadow: var(--om-sh-lg); padding: 7px;
  }
  .om-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 3px; border-radius: var(--om-r-xs);
    font-size: 10.5px; font-weight: 750; color: var(--om-ink-3); min-width: 0;
  }
  .om-tabbar a:hover { text-decoration: none; }
  .om-tabbar a.is-active { background: var(--om-brand-soft); color: var(--om-brand-ink); }
  .om-tabbar .ico { font-size: 19px; line-height: 1; }
  .om-footer__cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .om-hero__stats { gap: 16px; }
  .om-stat__value { font-size: 25px; }
  .om-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .om-header, .om-footer, .om-tabbar, .om-btn { display: none !important; }
  body::before { display: none; }
  .om-card { box-shadow: none; border-color: #ccc; }
}