/*
 * Virtuele 3D-marifoon (/marifoon-uitleg en de compacte versie op de homepage).
 *
 * Het model is CSS 3D: .mf-model heeft transform-style: preserve-3d en draait met rotateX en rotateY
 * (gezet door marifoon.js). Het front is de gewone HTML met echte knoppen; wanden, cilinders,
 * achterkant, beugel, microfoon en snoer zijn vlakken in hetzelfde 3D-model.
 * Wanden hangen altijd vanaf het vlak van hun ouder naar achteren, met diepte --d.
 * Alle maten in em: de lettergrootte van .mf-set volgt de breedte van de container.
 * Brede opbouw: microfoon rechts naast het toestel. Smal (container onder 620px): microfoon liggend eronder.
 *
 * Let op: elementen in de 3D-keten mogen geen overflow, opacity, filter, mask of mix-blend-mode hebben,
 * anders worden ze plat. Alleen eindvlakken (zonder 3D-kinderen) mogen dat.
 */

.mf-podium {
  --mf-paneel: #1b1f24;
  --mf-lcd-licht: #f9dd9a;
  --mf-lcd: #e9b357;
  --mf-inkt: #2a1904;
  --mf-label: #aab4be;
  --mf-gloed: #ffc65c;
}

/* Podium: het donkere vlak met kop, toestel en paneel */

.mf-podium {
  position: relative;
  color: #d5e1ec;
  background:
    radial-gradient(60rem 30rem at 32% 62%, rgba(42, 92, 145, .55), rgba(42, 92, 145, 0) 70%),
    linear-gradient(180deg, var(--zee) 0%, var(--zee-diep) 100%);
  overflow: hidden;
}
.mf-podium-binnen {
  max-width: calc(var(--paginabreedte) + 2 * var(--rand));
  margin: 0 auto;
  padding: 1.25rem var(--rand) 4.5rem;
}
.mf-kruimel, .mf-kruimel a { color: #b6c6d6; }
.mf-podium h1 { color: var(--wit); max-width: 22ch; margin-bottom: .4em; }
.mf-lead { font-size: 1.2rem; line-height: 1.55; max-width: 38rem; margin-bottom: 1.4rem; color: #d5e1ec; }

.mf-modi {
  display: inline-flex; flex-wrap: wrap; gap: .25rem;
  padding: .25rem; border-radius: 10px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); margin: 0 0 1.25rem;
}
.mf-modus {
  font: inherit; font-size: 1rem; font-weight: 700; color: #e8eef4; background: transparent;
  border: 0; border-radius: 7px; padding: .55rem 1rem; min-height: 2.75rem; cursor: pointer;
}
.mf-modus:hover { background: rgba(255, 255, 255, .08); }
.mf-modus[aria-pressed="true"] { background: var(--signaal); color: var(--zee); }

.mf-raster { display: grid; gap: 1.5rem; align-items: start; }
@media (max-width: 40rem) {
  .mf-lead { font-size: 1.05rem; margin-bottom: 1.25rem; }
  .mf-modi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-bottom: 1rem; }
  .mf-modi[hidden] { display: none; }
  .mf-modus { font-size: .9rem; line-height: 1.25; padding: .45rem .35rem; }
}
@media (min-width: 60rem) {
  .mf-raster { grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 1fr); gap: 2.5rem; align-items: center; }
}

.mf-disclaimer { font-size: 1rem; color: #b6c6d6; max-width: 44rem; margin: 1.5rem 0 0; }

/* Het toestel: maten en podium */

.mf-toestel { margin: 0; container-type: inline-size; min-width: 0; }

.mf-set {
  position: relative;
  font-size: clamp(8px, calc(100cqi / 48.5), 17px);
  width: 48.5em; height: 24em;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.mf-buhne {
  position: absolute; inset: 0;
  perspective: 90em; perspective-origin: 50% 40%;
  touch-action: pan-y pinch-zoom;
}
.mf-toestel.is-live .mf-buhne { cursor: grab; }
.mf-toestel.is-sleep .mf-buhne { cursor: grabbing; }

/* Alleen echte knoppen vangen de muis; de rest van het model laat klikken en slepen door naar het podium.
   (Elk vlak in het 3D-model doet anders mee in de hit-test, ook het lege modelvlak zelf.) */
.mf-model { pointer-events: none; }
.mf-model button { pointer-events: auto; }
.mf-model {
  position: absolute; inset: 0;
  transform-origin: 24em 10.5em -6em;
  transform: rotateX(-10deg) rotateY(-21deg);
}

/* Alles in de 3D-keten */
.mf-model, .mf-romp, .mf-achter, .mf-radio, .mf-knoppen, .mf-plek, .mf-rechts, .mf-wip, .mf-distress, .mf-toetsen,
.mf-wanden, .mf-cil, .mf-draaiknop, .mf-toets, .mf-klep, .mf-distress-knop, .mf-lcd-rand, .mf-lcd-gat,
.mf-mic, .mf-mic-voor, .mf-mic-achter, .mf-ptt, .mf-ptt-toets, .mf-mic-tule, .mf-beugel, .mf-beugel-knop,
.mf-aansl, .mf-ant-plug, .mf-dc, .mf-sp, .mf-tule, .mf-snoer {
  transform-style: preserve-3d;
}

/* Vlakken: grote beschilderde oppervlakken staan op een eigen eindvlak, net achter hun ouder.
   Een 3D-ouder die zelf een grote effen achtergrond schildert, wordt in Chromium soms maar deels getekend. */
.mf-vlak { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translateZ(-.02em); }

/* Wanden: rechte stukken en hoekfacetten. Kleur uit --wh, --ws, --wb (basis) en --wk (lichtsterkte) maal --wl. */
.mf-wanden { position: absolute; inset: 0; pointer-events: none; --wh: 212; --ws: 7%; --wb: 14%; --wk: 7%; }
.mf-w {
  position: absolute; display: block;
  background-color: hsl(var(--wh) var(--ws) calc(var(--wb) + var(--wl, 0) * var(--wk)));
}
.mf-w-b, .mf-w-o, .mf-w-h { height: var(--d); }
.mf-w-l, .mf-w-r { width: var(--d); }
.mf-w-b { top: 0; transform-origin: 50% 0; transform: rotateX(-90deg); }
.mf-w-o { bottom: 0; transform-origin: 50% 100%; transform: rotateX(90deg); }
.mf-w-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.mf-w-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.mf-w-h { transform-origin: 0 0; }
:where(button) > .mf-wanden, :where(button) .mf-ptt-toets > .mf-wanden { pointer-events: auto; }

/* Cilindermantel: facetten rond het midden, naar achteren hangend */
.mf-cil { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.mf-cil i {
  position: absolute; left: calc(var(--fw) / -2); top: 0; width: var(--fw); height: var(--cd);
  transform-origin: 50% 0;
  transform: rotateZ(var(--f)) translateY(calc(var(--ca) * -1)) rotateX(-90deg);
  background-color: hsl(var(--wh, 212) var(--ws, 6%) calc(var(--wb, 14%) + var(--wl) * var(--wk, 7%)));
}

/* Romp: de kast achter het front */
.mf-romp {
  position: absolute; left: 2.4em; top: 3.8em; width: 34.8em; height: 13.4em;
  transform: translateZ(-1.3em);
  --d: 14em;
  pointer-events: none;
}
.mf-romp > .mf-wanden { --wb: 12%; --wk: 6%; --ws: 6%; }
.mf-romp > .mf-wanden .mf-w-b, .mf-romp > .mf-wanden .mf-w-o, .mf-romp > .mf-wanden .mf-w-h {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .28));
}
.mf-romp > .mf-wanden .mf-w-l, .mf-romp > .mf-wanden .mf-w-r {
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 .9em, rgba(0, 0, 0, .18) .9em 1.05em),
    linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3));
}
.mf-romp > .mf-wanden .mf-w-r {
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 .9em, rgba(0, 0, 0, .18) .9em 1.05em),
    linear-gradient(270deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3));
}

/* Achterkant */
.mf-achter {
  position: absolute; inset: 0; border-radius: .9em; pointer-events: auto;
  transform: translateZ(-14em) rotateY(180deg);
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: 1fr 1fr 1fr 1.9fr; grid-template-areas: "ant dc sp koel";
  padding: 1.2em 1.4em; gap: 0 1em;
}
.mf-achter > .mf-vlak {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)),
    #1a1d21;
  box-shadow: inset 0 0 0 .14em #24282d, inset 0 0 0 .2em #0e1013;
}
.mf-koel {
  grid-area: koel; align-self: stretch; justify-self: stretch; border-radius: .4em;
  background:
    repeating-linear-gradient(90deg, #2b3036 0 .34em, #3a4047 .34em .42em, #0d0f12 .42em .64em, #15181c .64em .82em);
  box-shadow: inset 0 .2em .5em rgba(0, 0, 0, .6), 0 0 0 .12em #0c0e10;
}
.mf-achter-kop { display: none; }
.mf-aansl {
  position: relative; align-self: stretch; justify-self: stretch;
  display: flex; flex-direction: column; align-items: center; gap: .5em; padding-top: .6em;
}
.mf-aansl-ant { grid-area: ant; }
.mf-aansl-ant .mf-druk { order: 2; margin-top: .4em; }
.mf-aansl-dc { grid-area: dc; }
.mf-aansl-sp { grid-area: sp; }
.mf-druk { font-size: .62em; font-weight: 800; letter-spacing: .1em; color: #b8c2cc; line-height: 1; white-space: nowrap; }

.mf-achter button { position: relative; width: 4.4em; height: 9em; border-radius: .6em; }
.mf-achter button.is-actief { box-shadow: 0 0 0 .16em var(--signaal), 0 0 1.2em rgba(245, 160, 15, .5); }

/* Antenne-aansluiting: moer met kern, steekt uit */
.mf-ant-plug.mf-ant-plug {
  width: 3.4em; height: 3.4em; border-radius: 50%; margin-top: .3em;
  --ca: 1.7em; --fw: .62em; --cd: 1.5em; --wh: 210; --ws: 6%; --wb: 52%; --wk: 18%;
  transform: translateZ(1.5em);
  background:
    radial-gradient(circle, #d8a646 0 .2em, #3a2a12 .22em .42em, rgba(0, 0, 0, 0) .44em),
    radial-gradient(circle at 38% 32%, #f1f4f6 0, #a7b1ba 40%, #66717b 72%, #4a535c 100%);
  box-shadow: inset 0 0 0 .42em rgba(0, 0, 0, .15);
}
.mf-ant-pin { position: absolute; inset: .9em; border-radius: 50%; box-shadow: inset 0 .08em .2em rgba(0, 0, 0, .6); }
.mf-kabel-coax {
  position: absolute; left: 50%; width: 1em; margin-left: -.5em; top: -8em; height: 9.9em; border-radius: .5em;
  transform: translateZ(1.2em);
  background: linear-gradient(90deg, #08090b, #33393f 40%, #14171a 75%, #060708);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%); mask-image: linear-gradient(180deg, transparent 0, #000 45%);
  pointer-events: none;
}

/* Voeding en luidspreker: kabeltule met draden */
.mf-dc, .mf-sp { background: none; transform: translateZ(.01em); }
.mf-tule {
  position: absolute; left: 50%; top: .9em; width: 2em; height: 2em; margin-left: -1em; border-radius: 50%;
  --ca: 1em; --fw: .56em; --cd: .9em; --wb: 9%; --wk: 7%;
  transform: translateZ(.9em);
}
.mf-tule-kap { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #30353b, #121417 70%); }
.mf-draad {
  position: absolute; top: 1.9em; height: 9.2em; width: .44em; border-radius: .22em;
  transform: translateZ(.75em); pointer-events: none;
}
.mf-draad-rood { left: calc(50% - .55em); background: linear-gradient(90deg, #5e0f0b, #d8382c 45%, #7a1510); }
.mf-draad-zwart { left: calc(50% + .1em); background: linear-gradient(90deg, #050607, #3a3f45 45%, #08090a); }
.mf-draad-grijs { left: calc(50% - .45em); width: .34em; background: linear-gradient(90deg, #4c535a, #b8c0c7 45%, #59616a); }
.mf-draad-wit { left: calc(50% + .1em); width: .34em; background: linear-gradient(90deg, #8e969c, #f2f4f5 45%, #9aa2a8); }
.mf-zekering {
  position: absolute; left: calc(50% - 1.05em); top: 4.2em; width: 1.45em; height: 2.9em; border-radius: .6em;
  transform: translateZ(1.05em); pointer-events: none;
  background: linear-gradient(90deg, #5a0e0a, #c62e23 40%, #7b1510);
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .25);
}
.mf-zekering i {
  position: absolute; left: .3em; right: .3em; top: .9em; height: 1.1em; border-radius: .15em;
  background: linear-gradient(180deg, #f2d26a, #c79b2c);
  box-shadow: inset 0 0 0 .1em rgba(0, 0, 0, .25);
}

/* Front: matzwart kunststof met een iets lichtere rand */
.mf-radio {
  position: absolute; left: 1.8em; top: 3.2em; width: 36em; height: 14.6em;
  --d: 1.3em;
  display: grid; gap: .9em 1em; padding: 1.15em 1.2em 1.1em;
  grid-template-columns: 6em minmax(0, 1fr) 7.6em;
  grid-template-rows: minmax(0, 1fr) 3.3em;
  grid-template-areas: "knoppen lcd rechts" "knoppen toetsen rechts";
  border-radius: 1.4em;
}
.mf-radio > .mf-vlak {
  background:
    radial-gradient(130% 160% at 18% -10%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 52%),
    radial-gradient(rgba(255, 255, 255, .03) .06em, rgba(255, 255, 255, 0) .08em) 0 0 / .26em .26em,
    linear-gradient(180deg, #2b3036 0%, #1d2126 9%, #191c21 78%, #121418 100%);
  box-shadow:
    inset 0 .08em 0 rgba(255, 255, 255, .14),
    inset 0 -.12em 0 rgba(0, 0, 0, .5);
}
.mf-radio > .mf-wanden { --wb: 15%; --wk: 8%; --ws: 6%; }
.mf-radio::before {
  content: ""; position: absolute; inset: .45em; border-radius: 1.05em; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}

.mf-led {
  position: absolute; top: .5em; left: 50%; width: .42em; height: .42em; border-radius: 50%;
  background: #3b1712; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.mf-toestel.is-tx .mf-led { background: #ff4b3a; box-shadow: 0 0 .5em #ff4b3a, 0 0 1.2em rgba(255, 75, 58, .6); }
.mf-toestel.is-rx .mf-led { background: #58e08c; box-shadow: 0 0 .5em #58e08c; }

/* Plekken: elke plek bevat een knop, een label en (zonder JS) een nummer */
.mf-plek { position: relative; min-width: 0; }

.mf-knoppen {
  grid-area: knoppen; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: .1em 0;
}
.mf-plek-vol, .mf-plek-sql { display: flex; flex-direction: column; align-items: center; gap: .4em; }
.mf-label { font-size: .62em; font-weight: 800; letter-spacing: .1em; color: var(--mf-label); line-height: 1; }

/* Alle knoppen in het toestel: basis */
:where(.mf-set) :where(button) {
  font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
:where(.mf-set) :where(button:disabled) { cursor: default; }
.mf-set button:focus-visible { outline: .18em solid var(--signaal); outline-offset: .18em; border-radius: .6em; }
.mf-set .is-deco { cursor: inherit; }

/* Draaiknoppen: cilinder met kartelrand, kap met wijzer */
.mf-knopvoet {
  position: absolute; left: 50%; top: 0; width: 5.2em; height: 5.2em; margin-left: -2.6em; margin-top: -.3em; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .7) 0 2.35em, rgba(0, 0, 0, .35) 2.45em, rgba(0, 0, 0, 0) 2.6em);
  transform: translate(.15em, .35em);
}
.mf-draaiknop {
  position: relative; display: block; width: 4.6em; height: 4.6em; border-radius: 50% !important;
  --ca: 2.3em; --fw: .54em; --cd: 1.9em; --wh: 210; --ws: 5%; --wb: 15%; --wk: 9%;
  transform: translateZ(var(--cd));
  background: radial-gradient(circle at 40% 32%, #3a4047 0, #23272c 46%, #15181b 100%);
  box-shadow: inset 0 0 0 .2em #2b3035, inset 0 .1em .1em rgba(255, 255, 255, .12);
}
.mf-draaiknop-kap {
  position: absolute; inset: .5em; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #4d555e 0, #2a2f35 45%, #181b1f 85%);
  box-shadow: inset 0 -.1em .2em rgba(0, 0, 0, .5), inset 0 .08em .1em rgba(255, 255, 255, .18), 0 0 0 .06em rgba(0, 0, 0, .5);
  transform: rotate(var(--hoek, 0deg));
  transition: transform .2s cubic-bezier(.3, .7, .3, 1);
}
.mf-draaiknop-kap::after {
  content: ""; position: absolute; left: 50%; top: .3em; width: .26em; height: 1.05em; margin-left: -.13em;
  border-radius: .13em; background: #e9eef3; box-shadow: 0 0 .1em rgba(255, 255, 255, .4);
}
.is-compact .mf-draaiknop { --fw: .74em; }
.mf-draaiknop.is-actief { box-shadow: inset 0 0 0 .2em var(--signaal), 0 0 1.2em rgba(245, 160, 15, .45); }
.mf-draaiknop.is-actief .mf-draaiknop-kap::after { background: var(--mf-gloed); box-shadow: 0 0 .4em var(--mf-gloed); }

/* Display: licht verzonken achter een opstaande rand */
.mf-plek-lcd { grid-area: lcd; display: flex; pointer-events: none; }
.mf-plek-lcd > .mf-lcd { pointer-events: auto; }
.mf-lcd {
  position: relative; flex: 1; display: flex; padding: .42em !important; border-radius: .75em;
  transform: translateZ(.01em);
  background: #07090c;
}
.mf-lcd::after {
  content: ""; position: absolute; inset: .42em; border-radius: .38em; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 31%);
}
.mf-lcd-rand {
  grid-area: lcd; position: absolute; inset: 0; border-radius: .75em; pointer-events: none;
  --d: .42em;
  transform: translateZ(.42em);
}
.mf-lcd-rand > .mf-vlak {
  transform: none; border: .42em solid #23272c;
  box-shadow: inset 0 .08em 0 rgba(255, 255, 255, .12), inset 0 -.06em 0 rgba(0, 0, 0, .5), 0 .06em 0 rgba(255, 255, 255, .06);
}
.mf-lcd-gat { position: absolute; inset: .42em; border-radius: .38em; }
.mf-lcd-gat > .mf-wanden { --wb: 8%; --wk: 6%; }
.mf-radio:has(.mf-lcd.is-actief) > .mf-lcd-rand > .mf-vlak { border-color: #3a2c12; box-shadow: 0 0 0 .16em var(--signaal), 0 0 1.3em rgba(245, 160, 15, .35); }

.mf-lcd-glas {
  flex: 1; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .15em;
  padding: .45em .7em .4em; border-radius: .38em; color: var(--mf-inkt); text-align: left;
  background: radial-gradient(120% 90% at 50% 40%, var(--mf-lcd-licht) 0%, var(--mf-lcd) 100%);
  box-shadow: inset 0 0 1em rgba(120, 66, 0, .4), inset 0 .3em .35em rgba(0, 0, 0, .35);
  transition: background .3s, box-shadow .3s;
}
.mf-lcd-glas > * { transition: opacity .2s; }

.mf-lcd-boven { display: flex; align-items: center; gap: .55em; min-height: 1.1em; }
.mf-ind { font-size: .62em; font-weight: 800; letter-spacing: .06em; line-height: 1; opacity: .09; white-space: nowrap; }
.mf-ind.is-aan { opacity: 1; }
.mf-ind[data-ind="tx"].is-aan { background: var(--mf-inkt); color: var(--mf-lcd-licht); padding: .12em .3em; border-radius: .15em; }
.mf-ind.is-knipper { animation: mf-knipper .8s steps(2, jump-none) infinite; }
@keyframes mf-knipper { 50% { opacity: .09; } }

.mf-signaal { margin-left: auto; display: flex; align-items: flex-end; gap: .14em; height: .95em; }
.mf-signaal i { display: block; width: .28em; background: var(--mf-inkt); opacity: .09; border-radius: .05em; }
.mf-signaal i:nth-child(1) { height: 20%; } .mf-signaal i:nth-child(2) { height: 40%; }
.mf-signaal i:nth-child(3) { height: 60%; } .mf-signaal i:nth-child(4) { height: 80%; }
.mf-signaal i:nth-child(5) { height: 100%; }
.mf-signaal[data-signaal="1"] i:nth-child(-n+1),
.mf-signaal[data-signaal="2"] i:nth-child(-n+2),
.mf-signaal[data-signaal="3"] i:nth-child(-n+3),
.mf-signaal[data-signaal="4"] i:nth-child(-n+4),
.mf-signaal[data-signaal="5"] i { opacity: 1; }

.mf-lcd-midden { display: flex; align-items: center; gap: .6em; min-height: 0; }
.mf-cijfers { height: 100%; max-height: 5.2em; width: auto; flex: 0 1 auto; min-width: 0; overflow: visible; }
.mf-seg { fill: var(--mf-inkt); opacity: .075; }
.mf-seg.is-aan { opacity: 1; }
.mf-lcd-zij { display: grid; gap: .28em; justify-items: start; margin-left: auto; padding-right: .1em; }
.mf-ind-groot { font-size: .9em; letter-spacing: .02em; }

.mf-lcd-tekst {
  display: flex; align-items: center; gap: .5em; min-height: 1.35em;
  font-size: .74em; font-weight: 800; letter-spacing: .09em; line-height: 1; white-space: nowrap; overflow: hidden;
  border-top: 1px solid rgba(42, 25, 4, .18); padding-top: .38em;
}
.mf-meter { display: inline-flex; gap: .16em; }
.mf-meter i { display: block; width: .48em; height: .78em; background: var(--mf-inkt); opacity: .12; }
.mf-meter i.is-aan { opacity: 1; }

/* Uit: geen achtergrondverlichting en geen tekens */
.mf-toestel.is-uit .mf-lcd-glas { background: radial-gradient(120% 90% at 50% 40%, #4a4232, #2e2a20); box-shadow: inset 0 0 .9em rgba(0, 0, 0, .5); }
.mf-toestel.is-uit .mf-lcd-glas > * { opacity: 0; }

/* Rechterkolom: luidspreker, 16, CH, DISTRESS */
.mf-rechts {
  grid-area: rechts; display: grid; gap: .55em;
  grid-template-columns: 1fr 1fr; grid-template-rows: 3.9em minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "spk spk" "ch k16" "ch dis";
}
.mf-luidspreker {
  grid-area: spk; position: relative; border-radius: .55em; overflow: hidden;
  background:
    radial-gradient(circle, #020304 0 .14em, transparent .16em) 0 0 / .52em .52em,
    linear-gradient(180deg, #23272c, #181b1f);
  box-shadow: inset 0 .12em .25em rgba(0, 0, 0, .8), 0 .06em 0 rgba(255, 255, 255, .06);
}
.mf-ruis {
  position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background:
    radial-gradient(circle, rgba(255, 214, 140, .95) 0 .06em, transparent .09em) 0 0 / .37em .41em,
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 .05em, transparent .08em) .13em .2em / .53em .29em,
    radial-gradient(circle, rgba(255, 190, 90, .8) 0 .05em, transparent .08em) .3em .05em / .44em .61em;
  animation: mf-ruis .24s steps(3) infinite;
}
@keyframes mf-ruis {
  33% { background-position: .21em .12em, 0 .31em, .1em .4em; }
  66% { background-position: .05em .33em, .32em 0, .41em .18em; }
}
.mf-toestel.is-ruis .mf-ruis { opacity: calc(.25 + var(--vol, .5) * .75); }
.mf-toestel.is-geluid .mf-luidspreker { box-shadow: inset 0 .12em .25em rgba(0, 0, 0, .8), inset 0 0 0 .14em rgba(88, 224, 140, .55); }

.mf-plek-16 { grid-area: k16; }
.mf-plek-distress { grid-area: dis; }
.mf-plek-ch { grid-area: ch; }

/* Rubberen toetsen: kap op hoogte --d, wanden naar het paneel. Indrukken laat de kap zakken. */
.mf-toets {
  position: relative; width: 100%; height: 100%; min-height: 2.4em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  border-radius: .55em; color: #e3e8ec; font-weight: 800; font-size: .78em; letter-spacing: .06em; line-height: 1;
  --d: .75em; --wh: 210; --ws: 6%; --wb: 15%; --wk: 8%;
  transform: translateZ(var(--d));
  transition: transform .07s ease-out, color .15s;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #353b42, #262a30);
  box-shadow: inset 0 .07em 0 rgba(255, 255, 255, .14), inset 0 -.1em .18em rgba(0, 0, 0, .35);
}
.mf-toets small { font-size: .72em; font-weight: 700; color: var(--mf-label); letter-spacing: .08em; }
.mf-toets:active:not(:disabled):not(.is-deco), .mf-toets.is-druk { transform: translateZ(.25em); }
.mf-toets.is-actief { color: var(--mf-gloed); text-shadow: 0 0 .6em rgba(255, 198, 92, .7); box-shadow: inset 0 0 0 .14em var(--signaal), 0 0 1em rgba(245, 160, 15, .4); }
.mf-toets.is-actief small { color: #ffe0a3; }
.mf-toets-16 { font-size: 1.15em; color: var(--signaal); }
.mf-toets.is-hint, .mf-draaiknop.is-hint { animation: mf-hint 1.2s ease-in-out infinite; }
@keyframes mf-hint { 50% { box-shadow: inset 0 0 0 .2em var(--signaal), 0 0 1.4em rgba(245, 160, 15, .8); } }
/* Contactschaduw op het paneel onder elke toets */
.mf-toetsen .mf-plek::before, .mf-plek-16::before {
  content: ""; position: absolute; inset: .05em; border-radius: .6em; pointer-events: none;
  box-shadow: .15em .35em .6em rgba(0, 0, 0, .6);
}

/* Kanaalwip: een verzonken bak met twee toetsen */
.mf-wip {
  position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto 1fr; border-radius: .7em; padding: .22em;
}
.mf-wip > .mf-vlak, .mf-distress > .mf-vlak {
  background: linear-gradient(180deg, #0e1013, #08090b); box-shadow: inset 0 .12em .3em rgba(0, 0, 0, .9), 0 .06em 0 rgba(255, 255, 255, .06);
}
.mf-wip .mf-toets { border-radius: .5em; --d: .6em; }
.mf-wip-op { border-bottom-left-radius: .2em !important; border-bottom-right-radius: .2em !important; }
.mf-wip-neer { border-top-left-radius: .2em !important; border-top-right-radius: .2em !important; }
.mf-wip svg { width: 1.3em; height: .8em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mf-wip-label { text-align: center; font-size: .58em; font-weight: 800; letter-spacing: .12em; color: var(--mf-label); padding: .4em 0 .45em; }

/* Toetsenrij onder het display */
.mf-toetsen { grid-area: toetsen; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.mf-toetsen .mf-plek { height: 100%; }

/* DISTRESS onder een scharnierend klepje */
.mf-distress {
  position: relative; height: 100%; border-radius: .55em;
}
.mf-distress-knop {
  position: absolute !important; inset: .32em; border-radius: .4em; color: #fff; font-weight: 800; font-size: .5em; letter-spacing: .06em;
  display: flex; align-items: center; justify-content: center;
  --d: .45em; --wh: 4; --ws: 70%; --wb: 30%; --wk: 9%;
  transform: translateZ(var(--d)); transition: transform .07s ease-out;
  background: linear-gradient(180deg, #e2483b, #a8180f); box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .3);
}
.mf-distress-knop:active:not(:disabled):not(.is-deco), .mf-distress-knop.is-druk { transform: translateZ(.15em); }
.mf-klep {
  position: absolute !important; inset: 0; border-radius: .55em; transform-origin: 50% 0;
  --d: .3em; --wh: 4; --ws: 62%; --wb: 30%; --wk: 8%;
  transform: translateZ(.95em);
  background: linear-gradient(180deg, rgba(235, 70, 55, .7), rgba(160, 24, 14, .78));
  box-shadow: inset 0 .08em 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .35s cubic-bezier(.3, .8, .3, 1);
  display: flex; align-items: center; justify-content: center;
}
.mf-klep > .mf-wanden .mf-w { opacity: .85; }
.mf-klep::before {
  content: ""; position: absolute; top: .18em; left: 18%; right: 18%; height: .18em; border-radius: .1em; background: rgba(0, 0, 0, .35);
}
.mf-klep[aria-expanded="true"] { transform: translateZ(.95em) rotateX(100deg); }
.mf-klep.is-actief { box-shadow: inset 0 0 0 .14em var(--signaal), 0 0 1em rgba(245, 160, 15, .5); }

/* Beugel met knoppen aan de zijkanten */
.mf-beugel { position: absolute; inset: 0; pointer-events: none; }
.mf-beugel-arm {
  position: absolute; top: 8em; width: 7em; height: 9.6em; border-radius: 3.5em 3.5em .3em .3em;
  transform-origin: 0 0; transform: translateZ(-3em) rotateY(90deg);
  background: linear-gradient(180deg, #2c3136, #16191c 70%, #0e1012);
  box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .05);
}
.mf-beugel-l { left: 2.05em; }
.mf-beugel-r { left: 37.55em; }
.mf-beugel-voet {
  position: absolute; left: 2.05em; top: 17.6em; width: 35.5em; height: 7em;
  transform-origin: 0 0; transform: translateZ(-3em) rotateX(-90deg);
  background: linear-gradient(180deg, #23272b, #111315);
}
.mf-beugel-knop {
  position: absolute; top: 8.8em; width: 3.4em; height: 3.4em; border-radius: 50%;
  --ca: 1.7em; --fw: .56em; --cd: 2.2em; --wb: 15%; --wk: 9%;
}
.mf-beugel-kl { left: .35em; transform: translate3d(-2.2em, 0, -6.5em) rotateY(-90deg); }
.mf-beugel-kr { left: 35.85em; transform: translate3d(2.2em, 0, -6.5em) rotateY(90deg); }
.mf-beugel-kap {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #3e444b 0, #22262b 50%, #131518 100%);
  box-shadow: inset 0 0 0 .3em #1b1e22, inset 0 0 0 .34em rgba(255, 255, 255, .06);
}

/* Schaduw op de ondergrond */
.mf-vloer {
  position: absolute; left: -3em; top: 17.8em; width: 53em; height: 28em; pointer-events: none;
  transform-origin: 0 0; transform: translateZ(7em) rotateX(-90deg);
  background: radial-gradient(40% 30% at 45% 46%, rgba(0, 3, 8, .85), rgba(0, 3, 8, .4) 55%, rgba(0, 3, 8, 0) 100%);
}

/* Spiraalsnoer: ringen langs een boog */
.mf-snoer { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mf-snoer i {
  position: absolute; left: -.62em; top: -.62em; width: 1.24em; height: 1.24em; border-radius: 50%;
  border: .2em solid #0d0f12; border-top-color: #353b42; border-left-color: #1f2328;
}
.mf-snoer-smal { display: none; }

/* Handmicrofoon: los 3D-object, iets gedraaid zodat de PTT-knop aan de zijkant te zien is */
.mf-mic {
  position: absolute; left: 42em; top: 2.1em; width: 5.8em; height: 14.4em;
  transform: translateZ(-3.3em) rotateY(30deg);
}
.mf-mic-voor, .mf-mic-achter { position: absolute; inset: 0; border-radius: 2.7em 2.7em 1.9em 1.9em; }
.mf-mic-voor {
  --d: 3.2em;
  transform: translateZ(1.6em);
}
.mf-mic-voor > .mf-vlak {
  background:
    radial-gradient(120% 70% at 30% 8%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25)),
    linear-gradient(180deg, #2a2f35, #181b1f);
  box-shadow: inset 0 .08em 0 rgba(255, 255, 255, .14), inset 0 0 0 .2em rgba(0, 0, 0, .25);
}
.mf-mic-voor > .mf-wanden { --wb: 14%; --wk: 8%; }
.mf-mic-achter {
  pointer-events: none;
  transform: translateZ(-1.6em) rotateY(180deg);
  background: linear-gradient(180deg, #202428, #121417);
}
.mf-mic-clip {
  position: absolute; left: 1.7em; right: 1.7em; top: 3em; height: 4.4em; border-radius: .5em;
  background: linear-gradient(180deg, #30353b, #1a1d21); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .06);
}
.mf-mic-rooster {
  position: absolute; left: 1.2em; right: 1.2em; top: 1.5em; height: 4.4em; border-radius: 1.5em 1.5em .5em .5em;
  background: repeating-linear-gradient(180deg, #050607 0 .26em, #2a2f35 .26em .5em);
  box-shadow: inset 0 .1em .2em rgba(0, 0, 0, .9), 0 .05em 0 rgba(255, 255, 255, .07);
}
.mf-mic-naad { position: absolute; left: 50%; bottom: 1.4em; width: 1.6em; height: .3em; margin-left: -.8em; border-radius: .15em; background: #0b0d0f; }
.mf-mic-tule {
  position: absolute; left: 2.3em; top: 14.6em; width: 1.2em; height: 1.2em; border-radius: 50%;
  --ca: .6em; --fw: .34em; --cd: .8em; --wb: 10%; --wk: 7%;
  background: #0e1012;
  transform: translateZ(-1.6em) rotateX(-90deg);
}

/* PTT: de knop is een ruim drukvlak voor de zijkant van de microfoon, de zichtbare toets zit op de zijkant */
.mf-ptt {
  position: absolute !important; left: -2.2em; top: 3.6em; width: 3.8em; height: 7.6em; border-radius: 1em;
  transform: translateZ(.01em);
}
.mf-ptt-toets {
  position: absolute; left: 2.2em; top: .8em; width: 2.1em; height: 6em; border-radius: .7em;
  --d: .6em; --wh: 210; --ws: 6%; --wb: 17%; --wk: 8%;
  transform-origin: 0 0;
  transform: translate3d(-.6em, 0, -2.65em) rotateY(-90deg);
  transition: transform .07s ease-out, background .15s;
  background: linear-gradient(90deg, #3a4148, #282d33);
  box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .15), inset 0 0 0 .12em rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
}
.mf-ptt-tekst {
  font-size: .62em; font-weight: 800; letter-spacing: .14em; color: #e3e8ec;
  writing-mode: vertical-rl;
}
.mf-ptt.is-druk .mf-ptt-toets { transform: translate3d(-.22em, 0, -2.65em) rotateY(-90deg); background: linear-gradient(90deg, #6a2a22, #3d1712); }
.mf-ptt.is-actief .mf-ptt-toets { box-shadow: inset 0 0 0 .16em var(--signaal), 0 0 1.4em rgba(245, 160, 15, .55); }
.mf-ptt.is-actief .mf-ptt-tekst { color: var(--mf-gloed); }
.mf-ptt.is-hint .mf-ptt-toets { animation: mf-hint 1.2s ease-in-out infinite; }
.mf-ptt:focus-visible { outline-offset: -.1em !important; }

/* Draaiknoppen onder het toestel */
.mf-draai { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin: .25rem 0 0; }
.mf-draai[hidden] { display: none; }
.mf-draai-tip { margin: 0; font-size: .95rem; color: #9fb4c8; }
.mf-draai-knoppen { display: flex; gap: .5rem; }
.mf-draai-knop {
  font: inherit; font-size: .95rem; font-weight: 700; color: #e8eef4; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 7px;
  padding: .45rem .85rem; min-height: 2.75rem;
}
.mf-draai-knop:hover { background: rgba(255, 255, 255, .12); border-color: var(--wit); }
.mf-draai-knop[aria-pressed="true"] { background: var(--signaal); border-color: var(--signaal); color: var(--zee); }
.mf-draai-knop.is-rust { opacity: .6; }

/* Nummers op de afbeelding (zonder JavaScript) */
.mf-nr {
  position: absolute; z-index: 6; top: -.55em; right: -.55em;
  display: grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 50%;
  background: var(--signaal); color: var(--zee); font-size: .8em; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 .18em var(--zee-diep);
  transform: translateZ(1.3em);
}
.mf-plek-vol .mf-nr, .mf-plek-sql .mf-nr { top: -.2em; right: -.4em; transform: translateZ(2.4em); }
.mf-aansl .mf-nr { top: auto; bottom: 1.2em; right: .1em; transform: translateZ(2em); }
.mf-mic .mf-nr { top: 6em; right: auto; left: -3.4em; transform: translateZ(.5em); }
.mf-toestel.is-live .mf-nr { display: none; }

/* Zonder JavaScript: achterkant plat onder het toestel, met een kop */
.mf-toestel:not(.is-live) .mf-set { height: 41em; }
.mf-toestel:not(.is-live) .mf-achter { transform: translate3d(0, 18.6em, 1.4em); }
.mf-toestel:not(.is-live) .mf-achter-kop {
  display: block; position: absolute; left: 0; top: -1.9em; margin: 0; font-size: .9em; font-weight: 800; color: #cfdae4;
}
.mf-toestel:not(.is-live) .mf-kabel-coax { display: none; }
.mf-toestel.is-compact:not(.is-live) .mf-set { height: 24em; }
.mf-toestel.is-compact:not(.is-live) .mf-achter { transform: translateZ(-14em) rotateY(180deg); }

/* Smalle opbouw */
@container (max-width: 620px) {
  .mf-set { font-size: clamp(8px, calc(100cqi / 24), 17px); width: 24em; height: 39.2em; }
  .mf-model { transform-origin: 12em 16.2em -5em; }
  .mf-beugel { display: none; }
  .mf-vloer { left: -6em; top: 30em; width: 36em; height: 26em; transform: translateZ(9em) rotateX(-90deg); }
  .mf-radio {
    left: .8em; top: 2.4em; width: 22.4em; height: 27em;
    grid-template-columns: minmax(0, 1fr) 7.8em;
    grid-template-rows: 9.2em minmax(0, 1fr) 3.4em;
    grid-template-areas: "lcd lcd" "knoppen rechts" "toetsen toetsen";
    gap: .9em; padding: 1.1em 1em 1em;
  }
  .mf-romp { left: 1.4em; top: 3em; width: 21.2em; height: 25.8em; --d: 12em; }
  .mf-achter {
    transform: translateZ(-12em) rotateY(180deg);
    grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1.25fr;
    grid-template-areas: "koel koel koel" "ant dc sp"; gap: 1em .6em; padding: 1.2em 1em;
  }
  .mf-knoppen { flex-direction: row; justify-content: space-around; align-items: center; padding: 0; }
  .mf-rechts { grid-template-rows: 1.6em minmax(0, 1fr) minmax(0, 1fr); }
  .mf-snoer-breed { display: none; }
  .mf-snoer-smal { display: block; }
  .mf-mic { left: 11.7em; top: 27.4em; transform: translateZ(-2.6em) rotateZ(90deg) rotateY(30deg); }
  .mf-mic .mf-nr { top: 4em; left: -3.6em; }
  .mf-ptt-tekst { transform: rotate(180deg); }
  .mf-toestel:not(.is-live) .mf-set { height: 67em; }
  .mf-toestel:not(.is-live) .mf-achter { transform: translate3d(0, 37.8em, 1.4em); }
  .mf-toestel.is-compact:not(.is-live) .mf-set { height: 39.2em; }
  .mf-toestel.is-compact:not(.is-live) .mf-achter { transform: translateZ(-12em) rotateY(180deg); }
}

/* Paneel naast of onder het toestel */

.mf-paneel { min-width: 0; }
.mf-paneel-kop, .mf-p-titel { color: var(--wit); font-size: 1.45rem; margin-bottom: .6rem; }
.mf-p-titel:focus { outline: none; }
.mf-legenda { margin: 0; padding-left: 1.6em; columns: 2 12rem; column-gap: 2rem; }
.mf-legenda li { break-inside: avoid; margin: 0 0 .35em; }
.mf-legenda li::marker { color: var(--signaal); font-weight: 800; }
.mf-legenda a, .mf-paneel a { color: #ffd88f; }
.mf-legenda a:hover, .mf-paneel a:hover { color: #ffe9bf; }

.mf-p { font-size: 1.05rem; line-height: 1.6; }
.mf-p p { margin: 0 0 .9em; }
.mf-p strong { color: var(--wit); }
.mf-p-stap { font-size: 1rem; color: #9fb4c8; margin: 0 0 .35rem !important; font-weight: 600; }
.mf-p-examen { border-left: 3px solid var(--signaal); padding: .15em 0 .15em .9em; color: #e6edf3; }
.mf-p-bediening { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.mf-p-knop {
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--wit); cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 7px;
  padding: .5rem .9rem; min-height: 2.75rem;
}
.mf-p-knop:hover { background: rgba(255, 255, 255, .12); border-color: var(--wit); }
.mf-p-knop-hoofd { background: var(--signaal); border-color: var(--signaal); color: var(--zee); }
.mf-p-knop-hoofd:hover { background: var(--signaal-hover); border-color: var(--signaal-hover); color: var(--zee); }
.mf-p-knop:disabled { opacity: .45; cursor: not-allowed; }

.mf-p-status { min-height: 1.6em; color: #ffd88f; font-weight: 700; margin: 0 0 1rem !important; }
.mf-p-status:empty { display: none; }

.mf-spraak { margin: 0 0 .8em !important; padding: .7em .9em; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #f1f5f8; }
.mf-spraak b { display: block; font-size: .9rem; color: #9fb4c8; font-weight: 700; margin-bottom: .1rem; }
.mf-spraak.is-jij { background: rgba(245, 160, 15, .12); }

.mf-opties { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.mf-opties li { margin: 0; }
.mf-optie {
  width: 100%; text-align: left; font: inherit; font-size: 1rem; line-height: 1.45; color: #eef3f7; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 8px; padding: .65rem .85rem;
}
.mf-optie:hover:not(:disabled) { border-color: var(--wit); background: rgba(255, 255, 255, .1); }
.mf-optie.is-goed { border-color: #5fd08f; background: rgba(95, 208, 143, .14); }
.mf-optie.is-fout { border-color: #ff8a80; background: rgba(255, 138, 128, .12); }
.mf-optie:disabled { cursor: default; }
.mf-terugkoppeling { padding: .6em .9em; border-radius: 8px; margin: 0 0 1rem !important; }
.mf-terugkoppeling.is-goed { background: rgba(95, 208, 143, .14); color: #d9f6e5; }
.mf-terugkoppeling.is-fout { background: rgba(255, 138, 128, .12); color: #ffe1dd; }
.mf-reeks { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.mf-reeks li { margin: 0; background: rgba(255, 255, 255, .09); border-radius: 6px; padding: .25rem .6rem; font-weight: 700; color: var(--wit); font-size: 1rem; }

/* Compacte versie op de homepage */

.mf-home { padding: 4rem 0 0; }
.mf-home .mf-podium-binnen { padding-top: 0; padding-bottom: 5rem; }
.mf-home h2 { color: var(--wit); max-width: 30rem; }
.mf-home-intro { max-width: 38rem; color: #d5e1ec; margin-bottom: 1.25rem; }
.mf-home .mf-raster { margin-top: 1rem; }
.mf-kort { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.mf-kort li { margin: 0; }
.mf-kort h4 { color: var(--wit); font-size: 1.05rem; margin: 0 0 .1rem; }
.mf-kort p { margin: 0; color: #d5e1ec; font-size: 1rem; }
.mf-home-link { margin: 1.5rem 0 0; }

/* Tekst onder het podium */

.mf-tekst { max-width: calc(var(--paginabreedte) + 2 * var(--rand)); margin: 0 auto; padding: 2.5rem var(--rand) 4rem; }
.mf-intro { max-width: var(--tekstbreedte); color: var(--grijs); }
.mf-lijst { display: grid; gap: 0 3.5rem; margin-top: 1.5rem; }
@media (min-width: 60rem) { .mf-lijst { grid-template-columns: 1fr 1fr; } }
.mf-uitleg { border-top: 1px solid var(--lijn); padding: 1.5rem 0 .75rem; scroll-margin-top: 1rem; }
.mf-uitleg h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.3rem; margin-bottom: .7rem; }
.mf-uitleg-nr {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--zee); color: var(--wit); font-size: 1rem; font-weight: 800;
}
.mf-uitleg p { margin-bottom: .8em; }
.mf-uitleg .mf-examen { background: var(--vlak); border-left: 4px solid var(--signaal); padding: .7em .9em; border-radius: 0 6px 6px 0; }
.mf-meer { font-size: 1rem; }
.mf-coax { margin: 0 0 1em; color: var(--grijs); }
.mf-coax svg { display: block; width: 100%; max-width: 22rem; height: auto; }

.mf-blok { max-width: var(--tekstbreedte); margin-top: 3rem; }
.mf-stappen { padding-left: 1.4em; }
.mf-stappen li + li { margin-top: .6em; }
.mf-dialoog { border-left: 4px solid var(--zee); padding: .2rem 0 .2rem 1.1rem; margin: 1.5rem 0 1rem; }
.mf-dialoog p { margin: 0 0 .8em; }
.mf-dialoog span { display: block; font-size: 1rem; font-weight: 800; color: var(--zee); }
.mf-tekst .cta-blok { max-width: var(--tekstbreedte); }

@media (prefers-reduced-motion: reduce) {
  .mf-ruis { animation: none; }
  .mf-draaiknop-kap, .mf-klep, .mf-toets, .mf-ptt-toets, .mf-distress-knop { transition: none; }
  .mf-toestel.is-live .mf-buhne { cursor: auto; }
}