/* Foxy in beeld, Act: laadt enkel op play/act (naast galerij.css). */
/* ---------- Act: Foxy's atelier (okt 2026) ---------- */
/* de zes rondetypes: schetsjes op papier, met een stukje plakband */
.modi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* alle schetsjes even hoog */
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
}
.modus {
    --mc: #ff6b35;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 16px 16px 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-card);
}
.modus__blad {
    position: relative;
    aspect-ratio: 16 / 10;
    margin: 6px 0 16px;
    border-radius: 10px;
    background:
        repeating-linear-gradient(#fffdf7 0 15px, #eef2f8 15px 16px),
        #fffdf7;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    rotate: var(--r, -1deg);
}
.modus:nth-child(2n) .modus__blad { --r: 1.2deg; }
.modus:nth-child(3n) .modus__blad { --r: -0.6deg; }
.modus__blad::before { /* plakband */
    content: '';
    position: absolute;
    z-index: 2;
    top: -9px;
    left: 50%;
    width: 64px;
    height: 20px;
    margin-left: -32px;
    background: color-mix(in srgb, var(--mc) 35%, rgba(255, 255, 255, 0.55));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    rotate: -3deg;
}
.modus__blad svg { display: block; width: 100%; height: 100%; overflow: visible; }
.modus h3 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 800; }
.modus p { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.93rem; line-height: 1.55; }
.modus__tijd {
    align-self: flex-start;
    margin-top: auto;
    padding: 3px 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--mc) 16%, transparent);
    color: color-mix(in srgb, var(--mc) 70%, #fff);
    font-size: 0.8rem;
    font-weight: 700;
}
.modi__veeg { display: none; }
@media (max-width: 900px) { .modi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { /* gsm: veegrij zoals de speelkaarten van Cards */
    .modi {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 14px;
        margin: 0 -16px;
        padding: 14px 16px 18px;
    }
    .modi::-webkit-scrollbar { display: none; }
    .modus { scroll-snap-align: center; }
    .modi__veeg { display: block; margin: 4px 0 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
}
/* onderdelen van de schetsjes */
.mb-i { stroke: #23324a; }
.mb-lijn { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mb-kleur { stroke: var(--mc); }
.mb-pen { transform: translate(142px, 86px); }
.mb-tekst { font-family: inherit; font-weight: 600; fill: #3b3b4f; }
.mb-streep { stroke: #e5484d; stroke-width: 1.8; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; }
.mb-hand, .mb-vink, .mb-stap { transform-box: fill-box; transform-origin: 50% 50%; }
.mb-muur { opacity: 0; }
.mb-wijzer { transform-box: view-box; transform-origin: 44px 56px; }

/* proefspel "Raad wat Foxy tekent": flip-over op een ezel */
.tekenproef { padding: 90px 0; background: var(--surface); }
.teken {
    max-width: 920px;
    margin: 0 auto;
    padding: 22px clamp(14px, 3vw, 28px) 24px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg-card);
}
.teken__werk { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.teken__ezel { position: relative; padding: 0 4% 26px; }
.teken__ezel::before, .teken__ezel::after { /* twee houten poten */
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 0;
    width: 12px;
    height: 70%;
    border-radius: 4px;
    background: linear-gradient(90deg, #8a5a2b, #b07a3e 45%, #6b4220);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.teken__ezel::before { left: 16%; rotate: 9deg; }
.teken__ezel::after { right: 16%; rotate: -9deg; }
.teken__blad {
    position: relative;
    z-index: 1;
    aspect-ratio: 300 / 220;
    border-radius: 6px 6px 10px 10px;
    background: #fffdf7;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform-origin: 50% 0;
}
.teken__blad::before { /* klem van de flip-over */
    content: '';
    position: absolute;
    z-index: 2;
    top: -12px;
    left: -2%;
    right: -2%;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(#4a4f63, #2b2f3d);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.teken__svg { position: absolute; inset: 14px 0 0; width: 100%; height: calc(100% - 14px); overflow: visible; }
.teken__lijnen path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.teken__lijnen .k-i { stroke: #23324a; }
.teken__lijnen .k-b { stroke: #2f7fd8; }
.teken__lijnen .k-o { stroke: #f26b1d; }
.teken__lijnen .k-r { stroke: #e5484d; }
.teken__lijnen .k-g { stroke: #8792a2; }
.teken__lijnen .k-y { stroke: #f5a524; }
.teken__lijnen .k-h { stroke: #8a5a2b; }
.teken__pen { opacity: 0; transition: opacity 0.2s ease; }
.teken.is-bezig .teken__pen { opacity: 1; }
.teken__vraag {
    position: absolute;
    inset: 14px 0 0;
    display: grid;
    place-items: center;
    color: rgba(35, 50, 74, 0.16);
    font-size: clamp(5rem, 14vw, 8rem);
    font-weight: 900;
    line-height: 1;
}
.teken__score {
    position: absolute;
    inset: 14px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 8%;
    background: rgba(255, 253, 247, 0.9);
    border-radius: 0 0 10px 10px;
    text-align: center;
}
.teken__einde-score { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; color: #e2531f; line-height: 1; }
.teken__score p { margin: 0; color: #3b3b4f; font-weight: 600; font-size: 0.95rem; max-width: 380px; }
.teken__kolom { display: grid; }
.teken__kolom > * { grid-area: 1 / 1; min-width: 0; }
.teken__start, .teken__einde { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
.teken__start p { margin: 0; color: var(--text-secondary); font-weight: 600; }
.teken__opties { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: center; }
.teken__optie {
    min-height: 52px;
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .teken__optie:not([aria-disabled="true"]):hover { border-color: var(--primary); } }
.teken__optie:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.teken__optie[aria-disabled="true"] { cursor: default; }
.teken__optie.is-fout { opacity: 0.45; text-decoration: line-through; }
.teken__optie.is-goed { border-color: #22c55e; background: rgba(34, 197, 94, 0.16); }
.teken[data-staat="start"] .teken__opties, .teken[data-staat="start"] .teken__einde, .teken[data-staat="start"] .teken__score,
.teken[data-staat="spel"] .teken__start, .teken[data-staat="spel"] .teken__einde, .teken[data-staat="spel"] .teken__vraag, .teken[data-staat="spel"] .teken__score,
.teken[data-staat="einde"] .teken__start, .teken[data-staat="einde"] .teken__opties, .teken[data-staat="einde"] .teken__vraag { visibility: hidden; pointer-events: none; }
.teken__host { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.teken__host img { width: 74px; height: 74px; flex: 0 0 auto; }
.teken__host .fx-bubble { flex: 1 1 auto; margin-bottom: 8px; }
@media (max-width: 700px) {
    .teken__werk { grid-template-columns: minmax(0, 1fr); }
    .teken__opties { grid-template-columns: 1fr 1fr; }
    .teken__optie { min-height: 48px; padding: 8px 12px; text-align: center; font-size: 0.95rem; }
    .teken__start, .teken__einde { align-items: center; text-align: center; }
}
@media (max-width: 480px) { .teken__host img { width: 60px; height: 60px; } }
html:not(.js) .teken { display: none; }

/* spelvormen + het Wie ben ik?-tafereel */
.vormen { padding: 80px 0; }
.vormen__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.wbi {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "kaart kaart" "foxy ballon" "antwoord antwoord";
    align-items: end;
    gap: 6px 10px;
    padding: 22px 20px 20px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: radial-gradient(ellipse 80% 70% at 30% 40%, rgba(255, 107, 53, 0.12), transparent 70%), var(--bg-card);
}
.wbi__kaart { /* het kaartje op Foxy's voorhoofd: de anderen zien het, Foxy niet */
    position: relative;
    z-index: 2;
    grid-area: kaart;
    justify-self: start;
    margin: 0 0 -16px 18px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #fffaf0;
    color: #2b1d12;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
    rotate: -4deg;
}
.wbi__kaart small { display: block; color: #8a7a68; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.wbi__img { grid-area: foxy; width: 116px; height: 116px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.wbi .fx-bubble { grid-area: ballon; margin-bottom: 26px; }
.wbi__antwoord {
    grid-area: antwoord;
    justify-self: end;
    margin: 0;
    padding: 8px 14px;
    border-radius: 14px 14px 4px 14px;
    background: #2f7fd8;
    color: #fff;
    font-weight: 700;
}
.wbi__antwoord span { opacity: 0.75; font-weight: 600; margin-right: 6px; }
.wbi__antwoord[data-leeg] { visibility: hidden; }
.vormen__lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vorm { padding: 16px 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.vorm h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; }
.vorm h3 span { flex: 0 0 auto; padding: 1px 8px; border-radius: 99px; background: rgba(255, 107, 53, 0.16); color: #ffb08f; font-size: 0.8rem; }
.vorm p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; }
.vormen__extra { max-width: 800px; margin: 26px auto 0; color: var(--text-secondary); line-height: 1.7; text-align: center; }
.vormen__extra + .vormen__extra { margin-top: 10px; }
.roomcode { display: inline-block; padding: 1px 9px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--text-primary); font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: 0.06em; }
@media (max-width: 860px) { .vormen__grid { grid-template-columns: minmax(0, 1fr); } .wbi { max-width: 520px; margin: 0 auto; width: 100%; } }
@media (max-width: 520px) { .vormen__lijst { grid-template-columns: 1fr; } .wbi__img { width: 92px; height: 92px; } }
@media (prefers-reduced-motion: no-preference) {
    /* pas bewegen als de schetsjes in beeld zijn (galerij.js zet .is-zichtbaar), tot dan stil op het eerste beeld */
    html.js .modi:not(.is-zichtbaar) svg * { animation-play-state: paused !important; }
    html.js .modi .mb-inkt { animation: mb-vervaag 7s linear infinite; }
    html.js .modi .mb--6s .mb-inkt { animation-duration: 6s; }
    html.js .modi .mb--4s .mb-inkt { animation-duration: 4s; }
    html.js .modi .mb-lijn { stroke-dasharray: 1 1; }
    html.js .modi .mb-pen--teken { animation: mb-teken-pen 7s linear infinite; }
    html.js .modi .mb-huis { animation: mb-teken-huis 7s linear infinite; }
    html.js .modi .mb-deur { animation: mb-teken-deur 7s linear infinite; }
    html.js .modi .mb-zon { animation: mb-teken-zon 7s linear infinite; }
    html.js .modi .mb-pen--blind { animation: mb-blind-pen 7s linear infinite; }
    html.js .modi .mb-ster { animation: mb-blind-ster 7s linear infinite; }
    html.js .modi .mb-streep { animation: mb-taboe-0 6s linear infinite; }
    html.js .modi .mb-streep:nth-of-type(2) { animation-name: mb-taboe-1; }
    html.js .modi .mb-streep:nth-of-type(3) { animation-name: mb-taboe-2; }
    html.js .modi .mb-streep:nth-of-type(4) { animation-name: mb-taboe-3; }
    html.js .modi .mb-streep:nth-of-type(5) { animation-name: mb-taboe-4; }
    html.js .modi .mb-hand--l { animation: mb-mime-l 4.8s ease-in-out infinite; }
    html.js .modi .mb-hand--r { animation: mb-mime-r 4.8s ease-in-out infinite; }
    html.js .modi .mb-muur { animation: mb-mime-muur 4.8s ease-in-out infinite; }
    html.js .modi .mb-wijzer { animation: mb-wijzer 2s linear infinite; }
    html.js .modi .mb-vink { animation: mb-speed-0 4s linear infinite; }
    html.js .modi .mb-vink:nth-of-type(2) { animation-name: mb-speed-1; }
    html.js .modi .mb-vink:nth-of-type(3) { animation-name: mb-speed-2; }
    html.js .modi .mb-stap { animation: mb-tel-0 7s linear infinite; }
    html.js .modi .mb-stap:nth-of-type(2) { animation-name: mb-tel-1; }
    html.js .modi .mb-stap:nth-of-type(3) { animation-name: mb-tel-2; }
    html.js .modi .mb-stap:nth-of-type(4) { animation-name: mb-tel-3; }
    html.js .modi .mb-stap:nth-of-type(5) { animation-name: mb-tel-4; }
    .teken__optie.is-fout { animation: flash-schud 0.45s ease; }
    .teken.is-bezig .teken__blad { animation: teken-wiebel 6s ease-in-out infinite; }
    .teken__host img.is-pop, .teken__host .fx-bubble.is-pop, .wbi__img.is-pop, .wbi .fx-bubble.is-pop, .wbi__antwoord.is-pop { animation: fx-pop 0.35s cubic-bezier(.2, .75, .2, 1.2); }
}
@keyframes mb-vervaag {
    0.00% { opacity: 1; }
    88.00% { opacity: 1; }
    95.00% { opacity: 0; }
    100.00% { opacity: 0; }
}
@keyframes mb-teken-pen {
    0.00% { transform: translate(52px, 86px); }
    2.00% { transform: translate(52px, 86px); }
    8.02% { transform: translate(52px, 54px); }
    14.73% { transform: translate(80px, 32px); }
    21.43% { transform: translate(108px, 54px); }
    27.46% { transform: translate(108px, 86px); }
    38.00% { transform: translate(52px, 86px); }
    41.00% { transform: translate(73px, 86px); }
    44.24% { transform: translate(73px, 68px); }
    46.76% { transform: translate(87px, 68px); }
    50.00% { transform: translate(87px, 86px); }
    53.00% { transform: translate(121.0px, 24.0px); }
    53.62% { transform: translate(121.69px, 27.44px); }
    54.25% { transform: translate(123.64px, 30.36px); }
    54.88% { transform: translate(126.56px, 32.31px); }
    55.50% { transform: translate(130.0px, 33.0px); }
    56.12% { transform: translate(133.44px, 32.31px); }
    56.75% { transform: translate(136.36px, 30.36px); }
    57.38% { transform: translate(138.31px, 27.44px); }
    58.00% { transform: translate(139.0px, 24.0px); }
    58.62% { transform: translate(138.31px, 20.56px); }
    59.25% { transform: translate(136.36px, 17.64px); }
    59.88% { transform: translate(133.44px, 15.69px); }
    60.50% { transform: translate(130.0px, 15.0px); }
    61.12% { transform: translate(126.56px, 15.69px); }
    61.75% { transform: translate(123.64px, 17.64px); }
    62.38% { transform: translate(121.69px, 20.56px); }
    63.00% { transform: translate(121.0px, 24.0px); }
    68.00% { transform: translate(142px, 86px); }
    95.00% { transform: translate(142px, 86px); }
    100.00% { transform: translate(52px, 86px); }
}
@keyframes mb-teken-huis {
    0.00% { stroke-dashoffset: 1; }
    2.00% { stroke-dashoffset: 1; }
    38.00% { stroke-dashoffset: 0; }
    100.00% { stroke-dashoffset: 0; }
}
@keyframes mb-teken-deur {
    0.00% { stroke-dashoffset: 1; }
    41.00% { stroke-dashoffset: 1; }
    50.00% { stroke-dashoffset: 0; }
    100.00% { stroke-dashoffset: 0; }
}
@keyframes mb-teken-zon {
    0.00% { stroke-dashoffset: 1; }
    53.00% { stroke-dashoffset: 1; }
    63.00% { stroke-dashoffset: 0; }
    100.00% { stroke-dashoffset: 0; }
}
@keyframes mb-blind-pen {
    0.00% { transform: translate(80.0px, 14.0px); }
    3.00% { transform: translate(80.0px, 14.0px); }
    7.21% { transform: translate(88.8px, 37.9px); }
    11.40% { transform: translate(114.2px, 38.9px); }
    15.59% { transform: translate(94.3px, 54.6px); }
    19.79% { transform: translate(101.2px, 79.1px); }
    24.00% { transform: translate(80.0px, 65.0px); }
    28.21% { transform: translate(58.8px, 79.1px); }
    32.41% { transform: translate(65.7px, 54.6px); }
    36.60% { transform: translate(45.8px, 38.9px); }
    40.79% { transform: translate(71.2px, 37.9px); }
    45.00% { transform: translate(80.0px, 14.0px); }
    50.00% { transform: translate(142px, 86px); }
    95.00% { transform: translate(142px, 86px); }
    100.00% { transform: translate(80.0px, 14.0px); }
}
@keyframes mb-blind-ster {
    0.00% { stroke-dashoffset: 1; }
    31.57% { stroke-dashoffset: 1; }
    73.57% { stroke-dashoffset: 0; }
    100.00% { stroke-dashoffset: 0; }
}
@keyframes mb-taboe-0 {
    0.00% { transform: scaleX(0); }
    8.00% { transform: scaleX(0); }
    13.00% { transform: scaleX(1); }
    100.00% { transform: scaleX(1); }
}
@keyframes mb-taboe-1 {
    0.00% { transform: scaleX(0); }
    20.00% { transform: scaleX(0); }
    25.00% { transform: scaleX(1); }
    100.00% { transform: scaleX(1); }
}
@keyframes mb-taboe-2 {
    0.00% { transform: scaleX(0); }
    32.00% { transform: scaleX(0); }
    37.00% { transform: scaleX(1); }
    100.00% { transform: scaleX(1); }
}
@keyframes mb-taboe-3 {
    0.00% { transform: scaleX(0); }
    44.00% { transform: scaleX(0); }
    49.00% { transform: scaleX(1); }
    100.00% { transform: scaleX(1); }
}
@keyframes mb-taboe-4 {
    0.00% { transform: scaleX(0); }
    56.00% { transform: scaleX(0); }
    61.00% { transform: scaleX(1); }
    100.00% { transform: scaleX(1); }
}
@keyframes mb-speed-0 {
    0.00% { opacity: 0; transform: scale(0.4); }
    12.00% { opacity: 0; transform: scale(0.4); }
    15.00% { opacity: 1; transform: scale(1.15); }
    18.00% { opacity: 1; transform: scale(1); }
    100.00% { opacity: 1; transform: scale(1); }
}
@keyframes mb-speed-1 {
    0.00% { opacity: 0; transform: scale(0.4); }
    32.00% { opacity: 0; transform: scale(0.4); }
    35.00% { opacity: 1; transform: scale(1.15); }
    38.00% { opacity: 1; transform: scale(1); }
    100.00% { opacity: 1; transform: scale(1); }
}
@keyframes mb-speed-2 {
    0.00% { opacity: 0; transform: scale(0.4); }
    52.00% { opacity: 0; transform: scale(0.4); }
    55.00% { opacity: 1; transform: scale(1.15); }
    58.00% { opacity: 1; transform: scale(1); }
    100.00% { opacity: 1; transform: scale(1); }
}
@keyframes mb-tel-0 {
    0.00% { opacity: 0; transform: scale(0.4); }
    2.00% { opacity: 0; transform: scale(0.4); }
    6.00% { opacity: 1; transform: scale(1.15); }
    10.00% { opacity: 1; transform: scale(1); }
    100.00% { opacity: 1; transform: scale(1); }
}
@keyframes mb-tel-1 {
    0.00% { opacity: 0; }
    16.00% { opacity: 0; }
    22.00% { opacity: 1; }
    100.00% { opacity: 1; }
}
@keyframes mb-tel-2 {
    0.00% { opacity: 0; transform: scale(0.4); }
    26.00% { opacity: 0; transform: scale(0.4); }
    30.00% { opacity: 1; transform: scale(1.15); }
    34.00% { opacity: 1; transform: scale(1); }
    100.00% { opacity: 1; transform: scale(1); }
}
@keyframes mb-tel-3 {
    0.00% { opacity: 0; }
    40.00% { opacity: 0; }
    46.00% { opacity: 1; }
    100.00% { opacity: 1; }
}
@keyframes mb-tel-4 {
    0.00% { opacity: 0; transform: scale(0.4); }
    50.00% { opacity: 0; transform: scale(0.4); }
    54.00% { opacity: 1; transform: scale(1.15); }
    58.00% { opacity: 1; transform: scale(1); }
    100.00% { opacity: 1; transform: scale(1); }
}
@keyframes mb-mime-l {
    0.00% { transform: translate(0px, 5px) scale(1); }
    22.00% { transform: translate(0px, -7px) scale(1); }
    30.00% { transform: translate(0px, -7px) scale(0.93); }
    38.00% { transform: translate(0px, -7px) scale(1); }
    60.00% { transform: translate(0px, 5px) scale(1); }
    70.00% { transform: translate(0px, 5px) scale(0.93); }
    78.00% { transform: translate(0px, 5px) scale(1); }
    100.00% { transform: translate(0px, 5px) scale(1); }
}
@keyframes mb-mime-r {
    0.00% { transform: translate(0px, -7px) scale(1); }
    22.00% { transform: translate(0px, 5px) scale(1); }
    30.00% { transform: translate(0px, 5px) scale(0.93); }
    38.00% { transform: translate(0px, 5px) scale(1); }
    60.00% { transform: translate(0px, -7px) scale(1); }
    70.00% { transform: translate(0px, -7px) scale(0.93); }
    78.00% { transform: translate(0px, -7px) scale(1); }
    100.00% { transform: translate(0px, -7px) scale(1); }
}
@keyframes mb-mime-muur {
    0.00% { opacity: 0; }
    24.00% { opacity: 0; }
    30.00% { opacity: 0.55; }
    40.00% { opacity: 0; }
    64.00% { opacity: 0; }
    70.00% { opacity: 0.55; }
    80.00% { opacity: 0; }
    100.00% { opacity: 0; }
}
@keyframes mb-wijzer {
    0.00% { transform: rotate(0deg); }
    100.00% { transform: rotate(360deg); }
}
@keyframes teken-wiebel {
    0.00% { rotate: 0deg; }
    25.00% { rotate: -1.2deg; }
    60.00% { rotate: 0.8deg; }
    100.00% { rotate: 0deg; }
}
/* ---------- einde Act ---------- */