/* mitbmi.dk - håndskrevet CSS. Verden: flisevæggen i en dansk svømmehal. Signatur: vandstanden på en flisevæg viser dit tal. */
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo.woff2") format("woff2-variations"), url("/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  --grund: #f2f5f3; --flade: #ffffff; --flise: #e4ecea; --fuge: #d2dedb;
  --blaek: #0f2a33; --bloed: #3a535c; --svag: #56707a;
  --vand: #14646a; --vand-dyb: #0e4a50; --vand-moerk: #0a3539; --aqua: #cfe9e8; --aqua-lys: #e7f4f3;
  --sand: #ead2a0; --sand-lys: #f6ecd6;
  --k-under: #dbe5f1; --k-normal: #c6e6e4; --k-over: #f2e0b6; --k-fedme1: #eccbb0; --k-fedme2: #e3b79c; --k-fedme3: #d9a48a;
  --advar: #fbeccb; --advar-blaek: #5b4100; --roed: #9b2b1f; --roed-lys: #fbe7e3;
  --skrift: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ud: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; accent-color: var(--vand); }
body { margin: 0; font: 400 1.0625rem/1.6 var(--skrift); font-stretch: 100%; color: var(--blaek); background: var(--grund); }
::selection { background: var(--aqua); color: var(--vand-moerk); }
a { color: var(--vand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--vand-dyb); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--vand); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--flade); padding: 8px 12px; z-index: 9; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html { scrollbar-color: var(--vand) var(--flise); }

/* ---------- Top: bassinkanten ---------- */
.top { background: var(--vand-dyb); color: #fff; }
.top-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.logo { width: 34px; height: 34px; flex: none; }
.ordmaerke { font-weight: 700; font-stretch: 80%; font-size: 1.45rem; letter-spacing: -.01em; line-height: 1; }
.ordmaerke b { font-weight: 700; color: var(--aqua); }
.menu { display: flex; gap: 2px; }
.menu a { color: #fff; text-decoration: none; font-weight: 500; font-size: .98rem; padding: 8px 12px; transition: background-color .15s; }
.menu a:hover { background: var(--vand); color: #fff; }
.menu a[aria-current] { background: var(--aqua); color: var(--vand-moerk); }
.menu a:focus-visible { outline-color: var(--aqua); }
@media (max-width: 860px) {
  .top-inner { padding-top: 12px; }
  .menu { width: 100%; flex-wrap: wrap; gap: 4px; padding: 0 0 12px; }
  .menu a { white-space: nowrap; background: var(--vand); padding: 0 11px; font-size: .95rem; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Hero ---------- */
.hero { padding: 44px 0 4px; }
h1 { font-size: clamp(2.6rem, 1.7rem + 4.2vw, 5.25rem); line-height: .95; font-weight: 760; font-stretch: 72%; letter-spacing: -.02em; margin: 0 0 .25em; max-width: 16ch; text-wrap: balance; color: var(--vand-moerk); }
@media (min-width: 861px) { .hero { padding: 64px 0 8px; } }
.ingress { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); line-height: 1.5; color: var(--bloed); margin: 0; max-width: 56ch; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.4rem); line-height: 1.05; font-weight: 720; font-stretch: 78%; letter-spacing: -.01em; margin: 2.1em 0 .5em; text-wrap: balance; color: var(--vand-moerk); }
h3 { font-size: 1.2rem; font-weight: 650; margin: 1.6em 0 .35em; }

/* ---------- Beregner ---------- */
.beregner-sektion { padding: 24px 0 8px; }
.beregner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .beregner { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.input { background: var(--flade); padding: 26px; }
@media (max-width: 480px) { .input { padding: 20px 16px; } }
.input h2 { margin: 0 0 18px; font-size: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.felt { display: block; margin: 0 0 16px; }
.felt-navn { display: block; font-weight: 550; margin-bottom: 6px; padding: 0; font-size: 1rem; }
.felt small { display: block; color: var(--bloed); font-size: .92rem; margin-top: 6px; line-height: 1.45; }
.felt-raekke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.felt-raekke.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .felt-raekke.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); } .felt-raekke.tre > :last-child { grid-column: 1 / -1; } }
.enhed input[name=tommer], .enhed input[name=pund], .enhed input[name=fod] { padding-right: 4.4em; }
input[type=text], select { width: 100%; height: 54px; font: inherit; font-size: 1.2rem; font-weight: 500; font-variant-numeric: tabular-nums; padding: 10px 12px; border: 2px solid #6f8f8d; border-radius: 0; background: var(--flade); color: var(--blaek); caret-color: var(--vand); transition: border-color .15s, box-shadow .15s; }
input[type=text]:hover, select:hover { border-color: #4b6c6a; }
input:focus, select:focus { outline: none; border-color: var(--vand); box-shadow: 0 0 0 4px var(--aqua); } /* taste-skill-ignore: fokusring på formularfelt */
input[aria-invalid="true"] { border-color: var(--roed); background: var(--roed-lys); }
select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
  background: var(--flade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230e4a50' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat right 14px center; }
.enhed { position: relative; display: block; }
.enhed input { padding-right: 64px; }
.enhed i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--bloed); pointer-events: none; font-size: 1rem; }
/* Køn: to lige brede valg */
.valg { display: flex; gap: 4px; background: var(--flise); padding: 4px; }
.valg label { flex: 1; text-align: center; cursor: pointer; padding: 11px 6px; font-weight: 550; color: var(--bloed); transition: background-color .15s, color .15s; }
.valg label:hover { background: var(--aqua-lys); }
.valg input { position: absolute; opacity: 0; pointer-events: none; }
.valg label:has(input:checked) { background: var(--vand-dyb); color: #fff; }
.valg label:has(input:focus-visible) { outline: 3px solid var(--vand); outline-offset: 2px; }
.knap-raekke { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.lille-valg select { height: 48px; font-size: 1rem; width: auto; min-width: 12rem; }
.knap { font: inherit; font-weight: 650; font-size: 1.08rem; border: 0; cursor: pointer; background: var(--vand-dyb); color: #fff; padding: 13px 30px; min-height: 48px; border-radius: 0; transition: background-color .15s, transform .12s var(--ud); }
.knap:hover { background: var(--vand); }
.knap:active { transform: translateY(1px) scale(.99); }
.knap:focus-visible { outline: 3px solid var(--vand); outline-offset: 3px; }
.input .knap { margin-bottom: 12px; }
.input .lille { margin: 8px 0 14px; }
.input .knap + .lille { margin-bottom: 0; }

/* ---------- Resultat: tallet og flisevæggen ---------- */
.resultat { position: sticky; top: 16px; }
@media (max-width: 900px) { .resultat { position: static; } }
.maal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; background: var(--flade); padding: 22px 18px 18px 24px; margin: 0 0 12px; }
@media (min-width: 901px) { .maal { padding: 30px 28px 24px 34px; gap: 8px 32px; } }
.maal p { margin: 0; }
.maal-over { font-weight: 550; font-size: 1.05rem; color: var(--bloed); }
.maal-tal { font-weight: 800; font-stretch: 70%; line-height: .9; letter-spacing: -.02em; margin: 6px 0 14px !important; font-variant-numeric: tabular-nums; color: var(--vand-moerk); }
.maal-tal output { font-size: clamp(4.2rem, 3rem + 6vw, 7.5rem); display: inline-block; }
.maal-enhed { font-size: 1.15rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--bloed); white-space: nowrap; }
.maal-kat { display: inline-block; font-weight: 650; font-size: 1.12rem; line-height: 1.3; padding: 7px 12px; background: var(--flise); color: var(--blaek); }
.k-under .maal-kat { background: var(--k-under); }
.k-normal .maal-kat { background: var(--k-normal); }
.k-over .maal-kat { background: var(--k-over); }
.k-fedme1 .maal-kat { background: var(--k-fedme1); }
.k-fedme2 .maal-kat { background: var(--k-fedme2); }
.k-fedme3 .maal-kat { background: var(--k-fedme3); }
.maal-under { margin-top: 10px !important; color: var(--bloed); font-size: .98rem; font-variant-numeric: tabular-nums; }
.maal.tom .maal-tal output { color: var(--fuge); }
.maal.interval .maal-tal output { font-size: clamp(3rem, 2.2rem + 4vw, 5.5rem); white-space: nowrap; }
.mini-wrap { margin: 0; }
table.mini th, table.mini td { white-space: nowrap; }

/* Flisevæggen */
.vaeg { width: 132px; height: auto; display: block; overflow: visible; }
@media (min-width: 901px) { .vaeg { width: 172px; } }
@media (max-width: 380px) { .vaeg { width: 104px; } }
.vaeg rect { shape-rendering: crispEdges; }
.vaeg .b-under { fill: var(--k-under); } .vaeg .b-normal { fill: var(--k-normal); } .vaeg .b-over { fill: var(--k-over); }
.vaeg .b-fedme1 { fill: var(--k-fedme1); } .vaeg .b-fedme2 { fill: var(--k-fedme2); } .vaeg .b-fedme3 { fill: var(--k-fedme3); }
.vaeg .fuge { stroke: var(--flade); stroke-width: 2.2; fill: none; }
.vaeg .vand rect, .vaeg .vand path { fill: var(--vand); opacity: .62; }
.vaeg .vand path { opacity: .9; }
.vaeg .vand, .vaeg .vandlinje { transition: transform .7s var(--ud); }
.vaeg .maerke-streg { stroke: var(--blaek); stroke-width: 2; }
.vaeg .maerke { font: 700 13px var(--skrift); font-stretch: 75%; fill: var(--blaek); text-anchor: end; font-variant-numeric: tabular-nums; }
.vaeg .vandlinje path { stroke: var(--vand-moerk); stroke-width: 3; }
.vaeg .plade { fill: var(--vand-moerk); }
.vaeg .plade-tal { font: 700 14px var(--skrift); font-stretch: 80%; fill: #fff; text-anchor: middle; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .vaeg .vand, .vaeg .vandlinje { transition: none; } }

.res-note { color: var(--bloed); font-size: .97rem; margin: 12px 0 0; }
.tal-liste { display: grid; grid-template-columns: 1fr auto; margin: 0; background: var(--flade); padding: 6px 20px; }
.tal-liste dt, .tal-liste dd { padding: 10px 0; border-bottom: 1px solid var(--flise); } /* taste-skill-ignore: tabeldata (talliste) */
.tal-liste dt:last-of-type, .tal-liste dd:last-of-type { border-bottom: 0; }
.tal-liste dt { color: var(--bloed); }
.tal-liste dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 14px; }
table.mini { width: 100%; border-collapse: collapse; background: var(--flade); font-variant-numeric: tabular-nums; }
table.mini th, table.mini td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--flise); font-weight: 400; }
table.mini td { text-align: right; white-space: nowrap; font-weight: 600; }
table.mini thead th, table.mini thead td { font-size: .92rem; color: var(--bloed); font-weight: 550; }
table.mini tr.valgt th, table.mini tr.valgt td { background: var(--k-normal); }
table.mini tbody tr:last-child th, table.mini tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 480px) { table.mini th, table.mini td { padding: 9px 10px; font-size: .95rem; } }
.noter { margin: 0 0 12px; display: grid; gap: 8px; }
.note { margin: 0; padding: 12px 16px; font-size: .98rem; line-height: 1.5; }
.note-advar { background: var(--advar); color: var(--advar-blaek); }
.note-info { background: var(--aqua-lys); color: var(--blaek); }
.fejlboks { background: var(--roed-lys); color: var(--roed); padding: 16px 18px; margin: 0 0 12px; }
.fejlboks p { margin: 0 0 4px; }

/* ---------- Tekstsektioner ---------- */
.tekst { padding: 16px 0 40px; }
.indhold > p, .indhold > ul, .indhold > ol, .indhold > h2, .indhold > h3, .indhold > .faq, .indhold > .vigtigt, .indhold > .formel, .indhold > .noter { max-width: 70ch; }
.indhold > .tabel-wrap { max-width: 900px; }
.tekst.bred .indhold > .tabel-wrap { max-width: none; }
.illustration { margin: 32px 0 8px; }
.illustration img { display: block; width: 100%; height: auto; background: var(--flise); }
@media (min-width: 760px) { .illustration { float: right; width: 40%; margin: 40px 0 24px 40px; } }
.videre, .faq, .kilder, h2 + .tabel-wrap { clear: both; }
.vigtigt { background: var(--sand-lys); color: var(--blaek); padding: 16px 20px; margin: 28px 0; display: flow-root; }
.vigtigt p { margin: 0; }
.punkter { padding-left: 0; list-style: none; }
.punkter li { position: relative; padding-left: 28px; margin: 0 0 12px; }
.punkter li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 13px; height: 13px; background: var(--vand); box-shadow: inset 0 -5px 0 var(--vand-dyb); } /* taste-skill-ignore: punkttegn tegnet som flise med vand, ikke skygge */
.trin { padding-left: 0; list-style: none; counter-reset: trin; }
.trin li { counter-increment: trin; position: relative; padding-left: 48px; margin: 0 0 14px; min-height: 34px; }
.trin li::before { content: counter(trin); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--vand-dyb); color: #fff; font-weight: 700; font-stretch: 80%; font-variant-numeric: tabular-nums; }
.formel { background: var(--flade); padding: 16px 20px; margin: 14px 0; font-variant-numeric: tabular-nums; display: flow-root; }
.formel p { margin: 4px 0; }
p.formel { font-size: 1.2rem; font-weight: 600; }
.lille { font-size: .95rem; color: var(--bloed); }
.videre { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px; max-width: none !important; }
.videre a { display: block; height: 100%; text-decoration: none; color: var(--blaek); background: var(--flade); padding: 18px 20px 20px; transition: background-color .15s; }
.videre a:hover { background: var(--aqua-lys); }
.videre strong { display: block; font-weight: 700; font-stretch: 85%; font-size: 1.15rem; color: var(--vand-dyb); }
.videre span { color: var(--bloed); font-size: .97rem; }

/* Tabeller: én linje pr. celle, sidelæns scroll i rammen, fast første kolonne på mobil */
.tabel-wrap { overflow-x: auto; margin: 16px 0 20px; -webkit-overflow-scrolling: touch; background: var(--flade); scrollbar-width: thin; }
table.data { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; font-size: 1rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 10px 16px; border-bottom: 1px solid var(--flise); text-align: left; white-space: nowrap; }
table.data thead th { background: var(--vand-dyb); color: #fff; font-weight: 600; }
table.data tbody th { font-weight: 600; }
table.data td.tal, table.data th.tal { text-align: right; }
table.data tbody tr:hover th, table.data tbody tr:hover td { background: var(--aqua-lys); }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--flade); box-shadow: 1px 0 0 var(--flise); } /* taste-skill-ignore: fast første kolonne i rigtig tabel */
table.data thead tr > :first-child { background: var(--vand-dyb); z-index: 2; }
@media (max-width: 480px) { table.data th, table.data td { padding: 9px 12px; font-size: .95rem; } }
/* BMI-skemaet: hver celle er en flise i kategoriens farve */
table.skema { border-spacing: 2px; background: var(--grund); }
table.skema th, table.skema td { padding: 8px 9px; border: 0; font-size: .92rem; }
table.skema td { color: var(--blaek); font-weight: 550; }
table.skema td.k-under { background: var(--k-under); } table.skema td.k-normal { background: var(--k-normal); } table.skema td.k-over { background: var(--k-over); }
table.skema td.k-fedme1 { background: var(--k-fedme1); } table.skema td.k-fedme2 { background: var(--k-fedme2); } table.skema td.k-fedme3 { background: var(--k-fedme3); }
table.skema tbody tr:hover td { filter: brightness(.95); }
table.skema tbody th { background: var(--flade); }
.forklaring { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; color: var(--bloed); }
.forklaring li { display: inline-flex; align-items: center; gap: 8px; }
.prik { width: 16px; height: 16px; display: inline-block; }
.prik.k-under { background: var(--k-under); } .prik.k-normal { background: var(--k-normal); } .prik.k-over { background: var(--k-over); }
.prik.k-fedme1 { background: var(--k-fedme1); } .prik.k-fedme2 { background: var(--k-fedme2); } .prik.k-fedme3 { background: var(--k-fedme3); }

/* FAQ */
.faq { margin: 8px 0 12px; display: grid; gap: 4px; }
.faq details { background: var(--flade); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; font-weight: 600; font-size: 1.06rem; position: relative; transition: background-color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--aqua-lys); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 2px; background: var(--vand-dyb); transition: transform .25s var(--ud); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq .svar { padding: 0 20px 18px; }
.faq .svar p { margin: 0; }
.kilder { padding-left: 1.2em; font-size: .97rem; color: var(--bloed); }
.kilder li { margin-bottom: 6px; }

/* ---------- Bund: bassinet ---------- */
.bund { background: var(--vand-dyb); color: var(--aqua-lys); margin-top: 48px; padding: 56px 0 28px; }
.bund a { color: #fff; }
.bund-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 860px) { .bund-grid { grid-template-columns: 1fr 1fr; } .bund-om { grid-column: 1 / -1; } }
@media (max-width: 480px) { .bund-grid { grid-template-columns: 1fr; } }
.bund-navn { font-weight: 800; font-stretch: 68%; font-size: clamp(3.4rem, 2rem + 6vw, 6rem); line-height: .9; letter-spacing: -.02em; margin: 0 0 16px; color: #fff; }
.bund-navn b { font-weight: 800; color: var(--aqua); }
.bund-om p:last-child { max-width: 52ch; margin: 0; }
.bund h2 { font-size: 1.15rem; margin: 6px 0 10px; color: #fff; font-stretch: 90%; }
.bund ul { list-style: none; padding: 0; margin: 0; }
.bund li { margin: 0 0 8px; }
.bund-linje { margin-top: 40px; font-size: .92rem; color: var(--aqua); }
.bund-linje p { margin: 0; padding-top: 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.maal.interval .maal-kat { white-space: nowrap; }