/* Edel beheerpaneel: liquid glass.
   Layout: a rail of icons on the left, a glass top bar with the client's logo, and the pages in glass panels
   over a slow, soft background of large stones that the glass bends and blurs. */
:root {
  --accent: oklch(62% 0.19 31);                 /* overwritten by the site's colour (BEHEER.kleur) */
  --accent-zacht: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-ink: oklch(99% 0 0);
  --ink: oklch(22% 0.02 265); --ink-2: oklch(42% 0.02 265); --ink-3: oklch(56% 0.015 265);
  --lijn: oklch(100% 0 0 / 0.55); --lijn-zacht: oklch(30% 0.02 265 / 0.08);
  --veld: oklch(100% 0 0 / 0.55); --veld-rand: oklch(30% 0.02 265 / 0.12);
  --glas: linear-gradient(155deg, oklch(100% 0 0 / 0.66), oklch(100% 0 0 / 0.30));
  --glas-sterk: linear-gradient(155deg, oklch(100% 0 0 / 0.82), oklch(100% 0 0 / 0.52));
  --rand-licht: oklch(100% 0 0 / 0.95); --rand-zwak: oklch(100% 0 0 / 0.12);
  --schaduw: 0 24px 60px -28px oklch(25% 0.04 265 / 0.45), 0 2px 6px -2px oklch(25% 0.04 265 / 0.12);
  --achter-1: oklch(93% 0.025 250); --achter-2: oklch(90% 0.03 220); --achter-3: oklch(95% 0.02 60);
  --steen-1: oklch(78% 0.06 250); --steen-2: oklch(84% 0.05 200); --steen-3: color-mix(in oklab, var(--accent) 55%, oklch(90% 0.03 60));
  --goed: oklch(52% 0.13 155); --slecht: oklch(55% 0.18 27);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --r-groot: 30px; --r: 20px; --r-klein: 12px;
  color-scheme: light;
}
:root[data-thema="donker"] {
  --ink: oklch(96% 0.01 265); --ink-2: oklch(80% 0.015 265); --ink-3: oklch(66% 0.015 265);
  --lijn: oklch(100% 0 0 / 0.14); --lijn-zacht: oklch(100% 0 0 / 0.08);
  --veld: oklch(100% 0 0 / 0.07); --veld-rand: oklch(100% 0 0 / 0.14);
  --glas: linear-gradient(155deg, oklch(34% 0.03 265 / 0.62), oklch(24% 0.03 265 / 0.38));
  --glas-sterk: linear-gradient(155deg, oklch(38% 0.03 265 / 0.82), oklch(28% 0.03 265 / 0.66));
  --rand-licht: oklch(100% 0 0 / 0.32); --rand-zwak: oklch(100% 0 0 / 0.04);
  --schaduw: 0 24px 60px -26px oklch(0% 0 0 / 0.7), 0 2px 6px -2px oklch(0% 0 0 / 0.4);
  --achter-1: oklch(20% 0.03 265); --achter-2: oklch(17% 0.03 240); --achter-3: oklch(22% 0.03 300);
  --steen-1: oklch(42% 0.08 260); --steen-2: oklch(40% 0.07 200); --steen-3: color-mix(in oklab, var(--accent) 60%, oklch(30% 0.03 265));
  --goed: oklch(76% 0.14 155); --slecht: oklch(72% 0.15 27);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 400 15px/1.5 var(--font); color: var(--ink); background: var(--achter-1); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* ---------- the background: soft light, and big stones for the glass to bend ---------- */
.achter { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(60% 50% at 15% 10%, var(--achter-2), transparent 70%), radial-gradient(50% 60% at 90% 80%, var(--achter-3), transparent 70%), var(--achter-1); }
.steen { position: absolute; border-radius: 22%; transform: rotate(45deg); filter: blur(2px); opacity: 0.85; animation: drijf 28s ease-in-out infinite alternate; }
.steen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, oklch(100% 0 0 / 0.55), transparent 45%); }
.steen--1 { width: 46vmax; height: 46vmax; left: -14vmax; top: 36vh; background: linear-gradient(135deg, var(--steen-1), transparent 75%); }
.steen--2 { width: 34vmax; height: 34vmax; right: -8vmax; top: -12vmax; background: linear-gradient(135deg, var(--steen-2), transparent 75%); animation-duration: 34s; }
.steen--3 { width: 18vmax; height: 18vmax; right: 18vw; bottom: -6vmax; background: linear-gradient(135deg, var(--steen-3), transparent 80%); animation-duration: 22s; }
@keyframes drijf { to { translate: 3vmax -2vmax; rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) { .steen { animation: none; } }

/* ---------- glass ---------- */
.glas { position: relative; background: var(--glas); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  border-radius: var(--r-groot); box-shadow: inset 0 1px 0 0 var(--rand-licht), inset 0 -1px 0 0 var(--rand-zwak), var(--schaduw); }
/* the bright rim along the edge, strongest top left and bottom right, as light on a lens */
.glas::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--rand-licht), transparent 38%, transparent 62%, color-mix(in oklab, var(--rand-licht) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glas--sterk { background: var(--glas-sterk); }

/* ---------- the frame ---------- */
.kader { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; min-height: 100%; padding: 20px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left)); }
.rail { position: sticky; top: 20px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 68px; padding: 10px; border-radius: 34px; }
.rail__knop { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background-color 0.2s, color 0.2s, transform 0.15s; }
.rail__knop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail__knop:hover { background: var(--veld); color: var(--ink); }
.rail__knop:active { transform: scale(0.94); }
.rail__knop[aria-current="page"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--accent) 80%, transparent), inset 0 1px 0 oklch(100% 0 0 / 0.4); }
.rail__knop .tip { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--achter-1); font-size: 13px; font-weight: 550; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.rail__knop:hover .tip, .rail__knop:focus-visible .tip { opacity: 1; }
.rail__scheiding { width: 28px; height: 1px; margin: 6px 0; background: var(--lijn-zacht); }
.rail__stip { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--achter-1); }

.hoofd { display: grid; align-content: start; gap: 20px; min-width: 0; }
.balk { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 14px 12px 22px; border-radius: 36px; }
.balk__merk { display: flex; align-items: center; gap: 14px; min-width: 0; margin-right: auto; }
.balk__logo { display: block; height: 30px; width: auto; max-width: 160px; object-fit: contain; }
:root[data-thema="donker"] .balk__logo { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.balk__naam { font-weight: 650; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balk__site { font-size: 13px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.balk__site:hover { color: var(--ink); text-decoration: underline; }
.wie { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border-radius: 30px; background: var(--veld); }
.wie__foto { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-zacht); color: var(--ink); font-weight: 650; font-size: 14px; }
.wie__naam { font-size: 14px; font-weight: 600; line-height: 1.2; }
.wie__rol { font-size: 12px; color: var(--ink-3); }

/* ---------- buttons, fields, chips ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--veld); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--veld-rand); transition: transform 0.15s, background-color 0.2s, box-shadow 0.2s; }
.knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knop:hover { background: color-mix(in oklab, var(--veld) 70%, var(--ink) 6%); }
.knop:active { transform: scale(0.97); }
.knop:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.knop--hoofd { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--accent) 90%, transparent), inset 0 1px 0 oklch(100% 0 0 / 0.35); }
.knop--hoofd:hover { background: color-mix(in oklab, var(--accent) 88%, black); }
.knop--klein { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 17px; }
.knop--icoon { width: 44px; padding: 0; }
.knop--gevaar:hover { background: color-mix(in oklab, var(--slecht) 14%, var(--veld)); color: var(--slecht); }

.veld { display: grid; gap: 6px; }
.veld > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.invoer { width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-radius: 14px; background: var(--veld); box-shadow: inset 0 0 0 1px var(--veld-rand); outline: 0; transition: box-shadow 0.2s, background-color 0.2s; }
.invoer:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--veld-rand) 50%, var(--ink) 25%); }
.invoer:focus { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in oklab, var(--veld) 60%, white 20%); }
textarea.invoer { min-height: 96px; resize: vertical; line-height: 1.45; }
.teller { justify-self: end; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.teller.is-buiten { color: var(--slecht); }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 6px 0 14px; border-radius: 17px; background: var(--veld); box-shadow: inset 0 0 0 1px var(--veld-rand); font-size: 14px; font-weight: 550; }
.chip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.chip button:hover { background: color-mix(in oklab, var(--slecht) 16%, transparent); color: var(--slecht); }
.chip--status { padding: 0 12px; min-height: 28px; font-size: 12.5px; }
.chip--goed { color: var(--goed); background: color-mix(in oklab, var(--goed) 12%, transparent); box-shadow: none; }
.chip--slecht { color: var(--slecht); background: color-mix(in oklab, var(--slecht) 12%, transparent); box-shadow: none; }
.chip--accent { color: var(--ink); background: var(--accent-zacht); box-shadow: none; }

.gesegmenteerd { display: inline-flex; padding: 4px; gap: 2px; border-radius: 22px; background: var(--veld); box-shadow: inset 0 0 0 1px var(--veld-rand); }
.gesegmenteerd button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 18px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13px; cursor: pointer; }
.gesegmenteerd button[aria-pressed="true"] { background: var(--glas-sterk); color: var(--ink); box-shadow: 0 2px 8px -2px oklch(20% 0.03 265 / 0.25), inset 0 1px 0 var(--rand-licht); }

/* ---------- pages ---------- */
.kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; padding: 6px 6px 0; }
.kop h1 { font-size: clamp(26px, 2.2vw + 12px, 38px); }
.kop p { margin-top: 6px; color: var(--ink-2); max-width: 60ch; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.paneel { padding: 24px; min-width: 0; }
.paneel__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.paneel__kop h2 { font-size: 17px; }
.paneel__kop p { font-size: 13px; color: var(--ink-3); }
.s-12 { grid-column: span 12; } .s-8 { grid-column: span 8; } .s-7 { grid-column: span 7; } .s-6 { grid-column: span 6; } .s-5 { grid-column: span 5; } .s-4 { grid-column: span 4; }
@media (max-width: 1100px) { .s-8, .s-7, .s-6, .s-5, .s-4 { grid-column: span 12; } }

/* stat tiles */
.tegels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tegel { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r); }
.tegel__naam { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tegel__getal { font-size: clamp(28px, 1.6vw + 16px, 36px); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tegel__verschil { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.tegel__verschil.is-op { color: var(--goed); } .tegel__verschil.is-neer { color: var(--slecht); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--goed); box-shadow: 0 0 0 0 color-mix(in oklab, var(--goed) 60%, transparent); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 8px transparent; } }

/* lists with a bar behind the number */
.lijst { display: grid; gap: 4px; }
.lijst__rij { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 12px; isolation: isolate; font-size: 14px; }
.lijst__rij::before { content: ""; position: absolute; inset: 4px auto 4px 0; z-index: -1; width: var(--deel, 0%); border-radius: 0 10px 10px 0; background: var(--accent-zacht); }
.lijst__rij:hover { background: var(--veld); }
.lijst__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lijst__getal { font-variant-numeric: tabular-nums; font-weight: 600; }
.leeg { padding: 24px 12px; text-align: center; color: var(--ink-3); font-size: 14px; }

.tabel-houder { overflow-x: auto; margin: 0 -8px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th { padding: 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
td { padding: 11px 8px; border-top: 1px solid var(--lijn-zacht); vertical-align: middle; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: color-mix(in oklab, var(--veld) 60%, transparent); }
td code, .code { font-family: var(--mono); font-size: 13px; }

/* chart */
.grafiek { position: relative; height: 280px; }
.grafiek svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grafiek .as text { fill: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.grafiek .raster-lijn { stroke: var(--lijn-zacht); stroke-width: 1; }
.grafiek .lijn { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek .vlak { fill: url(#vlak-kleur); }
.grafiek .kruis { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.grafiek .punt { fill: var(--accent); stroke: var(--achter-1); stroke-width: 2; }
.tooltip { position: absolute; z-index: 5; min-width: 120px; padding: 10px 12px; border-radius: 14px; pointer-events: none; font-size: 13px; translate: -50% calc(-100% - 14px); white-space: nowrap; }
.tooltip strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.tooltip span { color: var(--ink-3); font-size: 12px; }

/* login */
.inlog { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100%; padding: 24px 16px; }
.inlog__kaart { display: grid; gap: 18px; width: min(420px, 100%); padding: 34px; }
.inlog__kaart img { height: 36px; width: auto; justify-self: start; }
.inlog__kaart h1 { font-size: 26px; }
.inlog__kaart p { color: var(--ink-2); font-size: 14px; }
.melding { padding: 10px 14px; border-radius: 12px; font-size: 14px; background: color-mix(in oklab, var(--slecht) 12%, transparent); color: var(--slecht); }
.melding--goed { background: color-mix(in oklab, var(--goed) 12%, transparent); color: var(--goed); }
.uitleg { font-size: 13px; color: var(--ink-3); }

/* editor page, SEO, mail, accounts */
.groot-knop-kaart { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
@media (max-width: 760px) { .groot-knop-kaart { grid-template-columns: 1fr; } }
.stappen { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: stap; }
.stappen li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--ink-2); font-size: 14px; counter-increment: stap; }
.stappen li::before { content: counter(stap); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-zacht); color: var(--ink); font-weight: 650; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt { position: relative; padding: 16px 18px; border-radius: 16px; background: var(--veld); box-shadow: inset 0 0 0 1px var(--veld-rand); font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; max-height: 260px; overflow: auto; color: var(--ink-2); }
.snippet { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--veld); font-family: arial, sans-serif; }
.snippet__url { font-size: 12px; color: var(--ink-3); }
.snippet__titel { font-size: 18px; color: oklch(45% 0.18 265); line-height: 1.3; }
:root[data-thema="donker"] .snippet__titel { color: oklch(78% 0.1 265); }
.snippet__tekst { font-size: 13.5px; color: var(--ink-2); }
.controles { display: flex; flex-wrap: wrap; gap: 6px; }
.formrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }

/* applications */
.kandidaat { border-radius: 16px; background: var(--veld); box-shadow: inset 0 0 0 1px var(--veld-rand); }
.kandidaat summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.kandidaat summary::-webkit-details-marker { display: none; }
.kandidaat__wie { display: grid; gap: 2px; min-width: 0; }
.kandidaat__inhoud { display: grid; gap: 12px; padding: 0 16px 16px; }
.kandidaat__bericht { padding: 12px 14px; border-radius: 12px; background: var(--glas-sterk); white-space: pre-wrap; font-size: 14px; }

/* policies */
.controle { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.controle > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in oklab, var(--slecht) 14%, transparent); color: var(--slecht); font-weight: 700; font-size: 13px; }
.controle.is-ok > span { background: color-mix(in oklab, var(--goed) 14%, transparent); color: var(--goed); }
.beleid-voorbeeld { max-height: 50vh; overflow: auto; font-size: 14px; color: var(--ink-2); }
.beleid-voorbeeld h3 { margin: 18px 0 6px; font-size: 16px; color: var(--ink); }
.beleid-voorbeeld p, .beleid-voorbeeld ul { margin: 0 0 10px; }
.beleid-voorbeeld ul { padding-left: 20px; }

/* chat */
.chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: min(70vh, 720px); padding: 0; overflow: hidden; }
.chat__berichten { display: flex; flex-direction: column; gap: 10px; padding: 24px; overflow-y: auto; }
.bericht { max-width: min(76%, 560px); padding: 10px 14px; border-radius: 18px; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bericht small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.bericht--edel { align-self: flex-start; background: var(--glas-sterk); border-bottom-left-radius: 6px; box-shadow: inset 0 1px 0 var(--rand-licht), 0 6px 16px -10px oklch(20% 0.03 265 / 0.4); }
.bericht--klant { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.bericht--klant small { color: color-mix(in oklab, var(--accent-ink) 75%, transparent); }
.chat__invoer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--lijn-zacht); }
.chat__invoer textarea { min-height: 46px; height: 46px; resize: none; }

/* a dialog that shows a new password once */
.geheim { display: grid; gap: 14px; width: min(440px, calc(100vw - 32px)); padding: 28px; border: 0; color: var(--ink); }
.geheim::backdrop { background: oklch(20% 0.03 265 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.geheim p { color: var(--ink-2); font-size: 14px; }
.geheim__code { display: block; padding: 14px 16px; border-radius: 14px; background: var(--veld); font-family: var(--mono); font-size: 17px; letter-spacing: 0.04em; user-select: all; overflow-wrap: anywhere; }

/* toast */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50; translate: -50% 0; padding: 12px 18px; border-radius: 22px; font-size: 14px; font-weight: 550; animation: toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes toast-in { from { opacity: 0; translate: -50% 16px; } }

@media (max-width: 760px) {
  .kader { grid-template-columns: 1fr; padding-bottom: 96px; }
  .rail { position: fixed; z-index: 20; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; flex-direction: row; width: auto; max-width: calc(100vw - 24px); overflow-x: auto; }
  .rail__scheiding { width: 1px; height: 28px; margin: 0 4px; }
  .rail__knop .tip { display: none; }
  .balk { flex-wrap: wrap; padding-left: 16px; }
  .wie__tekst { display: none; }
}