.bmi-sectie { padding-top: 0; margin-top: -56px; }
.bmi-wrap { max-width: 640px; margin: 0 auto; display: grid; gap: 20px; }
.bmi-kaart { padding: 28px; }
.bmi-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bmi-invoer { position: relative; }
.bmi-invoer input { width: 100%; padding-right: 48px; font-size: 1.1rem; }
.bmi-invoer span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gedempt); font-size: .95rem; pointer-events: none; }
.bmi-fout { color: #b3261e; font-size: .92rem; margin: 0 0 14px; }
.bmi-uitslag { padding: 28px; text-align: center; }
.bmi-getal { font-family: var(--kop-font, inherit); font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; color: var(--ink); margin: 10px 0 18px; font-weight: 600; }
.bmi-schaal { position: relative; display: grid; grid-template-columns: 3.5fr 6.5fr 5fr 10fr; height: 10px; border-radius: 99px; overflow: visible; margin: 0 4px; }
.bmi-schaal i { display: block; height: 100%; }
.bmi-schaal i:first-child { border-radius: 99px 0 0 99px; }
.bmi-schaal i:nth-child(4) { border-radius: 0 99px 99px 0; }
.bmi-s1 { background: #cfe0f2; }
.bmi-s2 { background: #8fcfae; }
.bmi-s3 { background: #f2d38c; }
.bmi-s4 { background: #eeaa8f; }
.bmi-schaal b { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); transform: translate(-50%, -50%); transition: left .5s cubic-bezier(.2,.8,.2,1); }
.bmi-schaal-label { display: grid; grid-template-columns: 3.5fr 6.5fr 5fr 10fr; font-size: .78rem; color: var(--gedempt); margin: 8px 4px 22px; }
.bmi-schaal-label span { grid-column: auto; text-align: right; }
.bmi-schaal-label span:nth-child(1) { grid-column: 1; }
.bmi-schaal-label span:nth-child(2) { grid-column: 2; }
.bmi-schaal-label span:nth-child(3) { grid-column: 3; }
.bmi-kop { font-size: 1.5rem; margin-bottom: .4em; }
.bmi-uitslag p { color: var(--tekst-2); max-width: 480px; margin: 0 auto; }
.bmi-meer { margin-top: 22px; }
.bmi-klein { font-size: .86rem; color: var(--gedempt); text-align: center; margin: 0; }
@media (max-width: 560px) { .bmi-velden { grid-template-columns: 1fr; gap: 0; } .bmi-kaart, .bmi-uitslag { padding: 22px; } }
