@font-face{font-family:"Jost";src:url(/filer/fonts/jost-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(/filer/fonts/jost-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/filer/fonts/ibm-plex-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/filer/fonts/ibm-plex-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/filer/fonts/ibm-plex-sans-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Low FODMAP forklaret – tema m8 "bogstavtavle".
   Nattehavsblå grund, iskold tekst, signalcyan til alt klikbart og én fast farve pr. kulhydratgruppe:
   O = lime, D = kornblå, M = citron, P = pink. Mobil først. */

:root {
  --m8-nat: #0A1628;
  --m8-dyb: #11223B;
  --m8-staal: #183052;
  --m8-kant: #2C4570;
  --m8-feltkant: #6F86AA;
  --m8-is: #EEF4FB;
  --m8-tekst: #DDE7F3;
  --m8-frost: #A9BCD6;
  --m8-cyan: #3CE0F0;
  --m8-o: #A8EB4F;
  --m8-d: #7DAAFF;
  --m8-m: #FFD43D;
  --m8-p: #FF6F9C;
  --m8-pille: 999px;
  --m8-blok: 1.5rem;
  --m8-overskrift: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --m8-broed: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --m8-bredde: 1080px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--m8-nat);
  color: var(--m8-tekst);
  font-family: var(--m8-broed);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: var(--m8-cyan); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.m8-ramme { width: min(100% - 2rem, var(--m8-bredde)); margin-inline: auto; }
@media (min-width: 40rem) { .m8-ramme { width: min(100% - 3rem, var(--m8-bredde)); } }

.m8-hop {
  position: absolute; left: 1rem; top: -5rem; z-index: 20;
  padding: .6rem 1.15rem; border-radius: var(--m8-pille);
  background: var(--m8-cyan); color: var(--m8-nat); font-weight: 600; text-decoration: none;
}
.m8-hop:focus { top: 1rem; }

/* ---------- Top og menu ---------- */
.m8-top { background: var(--m8-nat); }
.m8-top__indre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .85rem 1.5rem; padding-block: 1rem .95rem;
}
.m8-top__logo { display: inline-flex; padding: .3rem 0; border-radius: .4rem; color: var(--m8-cyan); }
.m8-top__logo svg { display: block; width: auto; height: 1.2rem; }
@media (min-width: 48rem) { .m8-top__logo svg { height: 1.45rem; } }

.m8-nav__liste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.m8-nav__link {
  display: inline-block; padding: .4rem .95rem; border: 1px solid var(--m8-kant); border-radius: var(--m8-pille);
  color: var(--m8-is); font-size: .9rem; line-height: 1.3; text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
.m8-nav__link:hover { border-color: var(--m8-cyan); color: var(--m8-cyan); }
.m8-nav__link[aria-current="page"] { background: var(--m8-cyan); border-color: var(--m8-cyan); color: var(--m8-nat); font-weight: 600; }

.m8-top__stribe {
  height: 6px;
  background: linear-gradient(90deg, var(--m8-o) 0 25%, var(--m8-d) 25% 50%, var(--m8-m) 50% 75%, var(--m8-p) 75% 100%);
}

/* ---------- Fælles overskrifter og knapper ---------- */
.m8-tavle__titel, .m8-faser__titel, .m8-abc__titel, .m8-faq__titel, .m8-oversigt__titel {
  margin: 0; color: var(--m8-is);
  font-family: var(--m8-overskrift); font-weight: 300; line-height: 1.12; letter-spacing: -.015em;
  font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.35rem);
}

.m8-knap {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.4rem; border: 2px solid var(--m8-cyan); border-radius: var(--m8-pille);
  background: var(--m8-cyan); color: var(--m8-nat);
  font: 600 1rem/1.2 var(--m8-broed); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.m8-knap:hover { background: var(--m8-is); border-color: var(--m8-is); color: var(--m8-nat); }
.m8-knap--kontur { background: transparent; color: var(--m8-cyan); }
.m8-knap--kontur:hover { background: var(--m8-cyan); border-color: var(--m8-cyan); color: var(--m8-nat); }
.m8-knap--moerk { background: var(--m8-nat); border-color: var(--m8-nat); color: var(--m8-is); }
.m8-knap--moerk:hover { background: var(--m8-is); border-color: var(--m8-is); color: var(--m8-nat); }

.m8-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Forside: intro ---------- */
.m8-intro { display: grid; gap: 1rem; padding-block: 2.25rem 1.75rem; }
.m8-intro__kicker {
  margin: 0; color: var(--m8-cyan);
  font-family: var(--m8-overskrift); font-weight: 500; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
}
.m8-intro__titel {
  margin: 0; max-width: 14ch; color: var(--m8-is);
  font-family: var(--m8-overskrift); font-weight: 300; line-height: 1; letter-spacing: -.028em;
  font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.6rem);
}
.m8-intro__tekst {
  margin: 0; max-width: 32rem; padding-left: 1rem; border-left: 3px solid var(--m8-cyan);
  color: var(--m8-frost); font-size: 1.1rem; line-height: 1.55;
}
@media (min-width: 56rem) {
  .m8-intro { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; column-gap: 3rem; padding-top: 3.25rem; }
  .m8-intro__kicker { grid-column: 1 / -1; }
  .m8-intro__tekst { margin-bottom: .6rem; }
}

/* ---------- Forside: bogstavtavlen ---------- */
.m8-tavle { padding-block: .75rem 3rem; }
.m8-tavle__hoved { display: grid; gap: .5rem 2.5rem; margin-bottom: 1.25rem; }
.m8-tavle__note { margin: 0; max-width: 40rem; color: var(--m8-frost); font-size: .975rem; }
@media (min-width: 56rem) { .m8-tavle__hoved { grid-template-columns: auto minmax(0, 1fr); align-items: end; } }

.m8-tavle__fliser { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.m8-flise { display: flex; min-width: 0; }
.m8-flise__link {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: .95rem; align-content: start;
  padding: .95rem 1.15rem 1rem .85rem; border-radius: 1.75rem;
  color: var(--m8-nat); text-decoration: none; overflow-wrap: anywhere;
  transition: transform .18s ease, box-shadow .18s ease;
}
.m8-flise__link > * { grid-column: 2; }
.m8-flise__bogstav {
  grid-column: 1; grid-row: 1 / span 5; align-self: start; text-align: center;
  font-family: var(--m8-overskrift); font-weight: 300; font-size: 3.5rem; line-height: .95;
}
.m8-flise__ord { font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.15rem; line-height: 1.2; }
.m8-flise__betydning { margin-top: .15rem; font-size: .92rem; line-height: 1.45; }
.m8-flise__eksempler { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid currentColor; font-size: .85rem; line-height: 1.4; }
.m8-flise__videre { margin-top: .5rem; font-size: .85rem; font-weight: 600; }

.m8-flise--o .m8-flise__link { background: var(--m8-o); }
.m8-flise--d .m8-flise__link { background: var(--m8-d); }
.m8-flise--m .m8-flise__link { background: var(--m8-m); }
.m8-flise--p .m8-flise__link { background: var(--m8-p); }
.m8-flise--neutral .m8-flise__link { background: var(--m8-dyb); border: 1px solid var(--m8-kant); color: var(--m8-is); }
.m8-flise--neutral .m8-flise__bogstav { color: var(--m8-cyan); }
.m8-flise--neutral .m8-flise__betydning { color: var(--m8-frost); }
a.m8-flise__link:hover { transform: translateY(-4px); box-shadow: 0 .6rem 0 -.2rem rgba(0, 0, 0, .45); }
a.m8-flise__link:hover .m8-flise__videre { text-decoration: underline; }

@media (min-width: 40rem) {
  .m8-tavle__fliser { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .m8-flise__link { display: flex; flex-direction: column; padding: 1.1rem 1.15rem 1.25rem; }
  .m8-flise__bogstav { text-align: left; font-size: clamp(4.25rem, 2.5rem + 4vw, 6.75rem); line-height: .9; margin: -.1rem 0 .7rem -.04em; }
  .m8-flise__videre { margin-top: auto; padding-top: .75rem; }
}
@media (min-width: 64rem) {
  .m8-tavle__fliser { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m8-flise__link { padding: 1rem 1rem 1.15rem; }
  .m8-flise__ord { font-size: 1rem; }
  .m8-flise__betydning { font-size: .875rem; }
  .m8-flise__eksempler, .m8-flise__videre { font-size: .8rem; }
}

/* ---------- Forside: de tre faser ---------- */
.m8-faser { padding-block: 2.5rem 3rem; background: var(--m8-dyb); border-block: 1px solid var(--m8-kant); }
.m8-faser__hoved { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.m8-faser__liste { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.m8-faser__trin { position: relative; min-height: 3.25rem; padding-left: 4.4rem; }
.m8-faser__nr {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--m8-cyan); color: var(--m8-nat);
  font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.55rem; line-height: 1;
}
.m8-faser__trin:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.625rem - 1px); top: 3.25rem; bottom: -1.6rem;
  width: 2px; background: repeating-linear-gradient(180deg, var(--m8-cyan) 0 6px, transparent 6px 12px);
}
.m8-faser__navn { margin: 0; color: var(--m8-is); font-family: var(--m8-overskrift); font-weight: 300; font-size: 1.65rem; line-height: 1.15; }
.m8-faser__etiket {
  display: block; margin-bottom: .2rem; color: var(--m8-cyan);
  font-family: var(--m8-broed); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.m8-faser__tekst { margin: .45rem 0 0; color: var(--m8-frost); font-size: .975rem; }
@media (min-width: 48rem) {
  .m8-faser__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }
  .m8-faser__trin { padding-left: 0; padding-top: 4.6rem; }
  .m8-faser__trin:not(:last-child)::after {
    left: 4rem; right: -1.6rem; top: calc(1.625rem - 1px); bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--m8-cyan) 0 8px, transparent 8px 16px);
  }
}

/* ---------- Forside: ordliste A–Å ---------- */
.m8-abc {
  display: grid; gap: 1.25rem; margin-block: 3rem; padding: 1.6rem 1.25rem 1.75rem;
  border-radius: 2rem; background: var(--m8-cyan); color: var(--m8-nat);
}
.m8-abc .m8-abc__titel { color: var(--m8-nat); }
.m8-abc__hoved { display: grid; gap: .4rem 2.5rem; }
.m8-abc__note { margin: 0; max-width: 36rem; font-size: 1rem; }
.m8-abc__raekke { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.m8-abc__bogstav {
  display: grid; place-items: center; min-width: 2.45rem; height: 2.45rem; padding: 0 .55rem;
  border: 2px solid var(--m8-nat); border-radius: var(--m8-pille);
  background: var(--m8-nat); color: var(--m8-is);
  font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.1rem; line-height: 1; text-decoration: none;
}
.m8-abc__bogstav--tom { background: transparent; border: 2px dashed #1E3A5F; color: #1E3A5F; }
.m8-abc__videre { margin: 0; }
.m8-abc :focus-visible { outline-color: var(--m8-nat); }
@media (min-width: 56rem) {
  .m8-abc { padding: 2.25rem 2.5rem 2.4rem; }
  .m8-abc__hoved { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
  .m8-abc__bogstav { min-width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
}

/* ---------- Forside: brødtekst og læserækkefølge ---------- */
.m8-forside { display: grid; gap: 2.5rem; padding-block: .5rem 3.5rem; }
.m8-forside__tekst { min-width: 0; max-width: 44rem; }
@media (min-width: 64rem) {
  .m8-forside { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 3.5rem; }
  .m8-forside__side .m8-laes { position: sticky; top: 1.5rem; }
}

/* ---------- Register: læserækkefølge og mini-tavle ---------- */
.m8-laes, .m8-mini { padding: 1.2rem 1rem 1.1rem; border: 1px solid var(--m8-kant); border-radius: var(--m8-blok); background: var(--m8-dyb); }
.m8-laes__titel, .m8-mini__titel, .m8-kilder__titel, .m8-kort__titel {
  margin: 0 0 .75rem; color: var(--m8-cyan);
  font-family: var(--m8-overskrift); font-weight: 500; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3;
}
.m8-laes__titel, .m8-mini__titel { padding-left: .55rem; }
.m8-laes__liste, .m8-mini__liste { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.m8-laes__link {
  display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; border-radius: .9rem;
  color: var(--m8-tekst); font-size: .925rem; line-height: 1.3; text-decoration: none;
}
.m8-laes__link:hover { background: var(--m8-staal); color: var(--m8-is); }
.m8-laes__link[aria-current="page"] { background: var(--m8-cyan); color: var(--m8-nat); font-weight: 600; }
.m8-laes__nr { flex: none; min-width: 1.35rem; color: var(--m8-frost); font-family: var(--m8-overskrift); font-weight: 500; font-size: .8rem; font-variant-numeric: tabular-nums; }
.m8-laes__link[aria-current="page"] .m8-laes__nr { color: var(--m8-nat); }
.m8-laes__navn { flex: 1; min-width: 0; }
.m8-laes__gruppe {
  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  color: var(--m8-nat); font-family: var(--m8-overskrift); font-weight: 500; font-size: .8rem; line-height: 1;
}
.m8-laes__link--o .m8-laes__gruppe { background: var(--m8-o); }
.m8-laes__link--d .m8-laes__gruppe { background: var(--m8-d); }
.m8-laes__link--m .m8-laes__gruppe { background: var(--m8-m); }
.m8-laes__link--p .m8-laes__gruppe { background: var(--m8-p); }
.m8-laes__link[aria-current="page"] .m8-laes__gruppe { background: var(--m8-nat); color: var(--m8-is); }

.m8-mini__flise {
  display: flex; align-items: center; gap: .7rem; padding: .28rem .8rem .28rem .3rem; border-radius: var(--m8-pille);
  color: var(--m8-tekst); font-size: .925rem; line-height: 1.25; text-decoration: none;
}
.m8-mini__bogstav {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--m8-staal); color: var(--m8-cyan);
  font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.1rem; line-height: 1;
}
.m8-mini__flise--neutral { color: var(--m8-frost); }
.m8-mini__flise--o .m8-mini__bogstav { background: var(--m8-o); color: var(--m8-nat); }
.m8-mini__flise--d .m8-mini__bogstav { background: var(--m8-d); color: var(--m8-nat); }
.m8-mini__flise--m .m8-mini__bogstav { background: var(--m8-m); color: var(--m8-nat); }
.m8-mini__flise--p .m8-mini__bogstav { background: var(--m8-p); color: var(--m8-nat); }
a.m8-mini__flise:hover { background: var(--m8-staal); color: var(--m8-is); }
a.m8-mini__flise[aria-current="page"] { color: var(--m8-nat); font-weight: 600; }
a.m8-mini__flise[aria-current="page"] .m8-mini__bogstav { background: var(--m8-nat); }
.m8-mini__flise--o[aria-current="page"] { background: var(--m8-o); }
.m8-mini__flise--d[aria-current="page"] { background: var(--m8-d); }
.m8-mini__flise--m[aria-current="page"] { background: var(--m8-m); }
.m8-mini__flise--p[aria-current="page"] { background: var(--m8-p); }
.m8-mini__flise--o[aria-current="page"] .m8-mini__bogstav { color: var(--m8-o); }
.m8-mini__flise--d[aria-current="page"] .m8-mini__bogstav { color: var(--m8-d); }
.m8-mini__flise--m[aria-current="page"] .m8-mini__bogstav { color: var(--m8-m); }
.m8-mini__flise--p[aria-current="page"] .m8-mini__bogstav { color: var(--m8-p); }

/* ---------- Sidehoved (artikler og enkle sider) ---------- */
.m8-sidehoved { position: relative; overflow: hidden; border-bottom: 1px solid var(--m8-kant); }
.m8-sidehoved--o { border-bottom: 4px solid var(--m8-o); }
.m8-sidehoved--d { border-bottom: 4px solid var(--m8-d); }
.m8-sidehoved--m { border-bottom: 4px solid var(--m8-m); }
.m8-sidehoved--p { border-bottom: 4px solid var(--m8-p); }
.m8-sidehoved__indre { position: relative; padding-block: 1.5rem 2.1rem; }
.m8-sti__liste { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; color: var(--m8-frost); font-size: .875rem; }
.m8-sti__punkt + .m8-sti__punkt::before { content: "/"; margin-right: .5rem; color: var(--m8-feltkant); }
.m8-sti__link { color: var(--m8-cyan); }
.m8-sidehoved__trin {
  margin: 0 0 .9rem; color: var(--m8-cyan);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.m8-sidehoved__titel {
  position: relative; z-index: 1; margin: 0; max-width: 20ch; color: var(--m8-is);
  font-family: var(--m8-overskrift); font-weight: 300; line-height: 1.05; letter-spacing: -.022em;
  font-size: clamp(2.15rem, 1.4rem + 3.2vw, 4rem); hyphens: auto;
}
.m8-sidehoved--enkel .m8-sidehoved__titel { font-size: clamp(2.15rem, 1.5rem + 3vw, 3.9rem); }
.m8-sidehoved__dato { position: relative; z-index: 1; margin: 1.1rem 0 0; color: var(--m8-frost); font-size: .9rem; }
.m8-sidehoved__tegn { display: none; }
@media (min-width: 48rem) {
  .m8-sidehoved__indre { padding-block: 2rem 2.75rem; }
  .m8-sidehoved__tegn {
    display: block; position: absolute; right: 0; bottom: -.2em; z-index: 0;
    font-family: var(--m8-overskrift); font-weight: 300; line-height: 1;
    font-size: clamp(10rem, 4rem + 14vw, 17rem); pointer-events: none; user-select: none;
  }
  .m8-sidehoved--o .m8-sidehoved__tegn { color: var(--m8-o); }
  .m8-sidehoved--d .m8-sidehoved__tegn { color: var(--m8-d); }
  .m8-sidehoved--m .m8-sidehoved__tegn { color: var(--m8-m); }
  .m8-sidehoved--p .m8-sidehoved__tegn { color: var(--m8-p); }
  .m8-sidehoved--o .m8-sidehoved__titel, .m8-sidehoved--d .m8-sidehoved__titel,
  .m8-sidehoved--m .m8-sidehoved__titel, .m8-sidehoved--p .m8-sidehoved__titel { max-width: 16ch; }
}

.m8-maerkat {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  margin: 0 0 1rem; padding: .3rem 1rem .3rem .3rem; border-radius: var(--m8-pille);
  color: var(--m8-nat); font-size: .875rem; font-weight: 600; line-height: 1.3;
}
.m8-maerkat__bogstav {
  flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--m8-nat); font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.05rem; line-height: 1;
}
.m8-maerkat--o { background: var(--m8-o); } .m8-maerkat--o .m8-maerkat__bogstav { color: var(--m8-o); }
.m8-maerkat--d { background: var(--m8-d); } .m8-maerkat--d .m8-maerkat__bogstav { color: var(--m8-d); }
.m8-maerkat--m { background: var(--m8-m); } .m8-maerkat--m .m8-maerkat__bogstav { color: var(--m8-m); }
.m8-maerkat--p { background: var(--m8-p); } .m8-maerkat--p .m8-maerkat__bogstav { color: var(--m8-p); }

.m8-fremdrift { display: flex; gap: 4px; padding-bottom: 1.25rem; }
.m8-fremdrift__del { flex: 1; height: 5px; border-radius: var(--m8-pille); background: var(--m8-kant); }
.m8-fremdrift__del--laest { background: var(--m8-feltkant); }
.m8-fremdrift__del--o { background: var(--m8-o); }
.m8-fremdrift__del--d { background: var(--m8-d); }
.m8-fremdrift__del--m { background: var(--m8-m); }
.m8-fremdrift__del--p { background: var(--m8-p); }
.m8-fremdrift__del--her { height: 9px; margin-top: -2px; background: var(--m8-cyan); box-shadow: 0 0 0 2px var(--m8-nat), 0 0 0 4px var(--m8-is); }

/* ---------- Artikel ---------- */
.m8-artikel { display: grid; gap: 2.5rem; padding-block: 2rem 3.5rem; }
.m8-artikel__tekst { min-width: 0; max-width: 44rem; }
.m8-artikel__side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
@media (min-width: 64rem) {
  .m8-artikel { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 3.5rem; padding-top: 2.5rem; }
  .m8-artikel__side .m8-laes { position: sticky; top: 1.5rem; }
}

.m8-kort {
  margin: 0 0 2rem; padding: 1.2rem 1.35rem 1.3rem;
  border: 2px solid var(--m8-cyan); border-radius: var(--m8-blok); background: var(--m8-staal);
}
.m8-kort__tekst { margin: 0; color: var(--m8-is); font-size: 1.075rem; }
.m8-kort__liste { display: grid; gap: .4rem; margin: 0; padding-left: 1.2rem; color: var(--m8-is); }
.m8-kort__punkt::marker { color: var(--m8-cyan); }
.m8-kort--o { border-color: var(--m8-o); } .m8-kort--o .m8-kort__titel, .m8-kort--o .m8-kort__punkt::marker { color: var(--m8-o); }
.m8-kort--d { border-color: var(--m8-d); } .m8-kort--d .m8-kort__titel, .m8-kort--d .m8-kort__punkt::marker { color: var(--m8-d); }
.m8-kort--m { border-color: var(--m8-m); } .m8-kort--m .m8-kort__titel, .m8-kort--m .m8-kort__punkt::marker { color: var(--m8-m); }
.m8-kort--p { border-color: var(--m8-p); } .m8-kort--p .m8-kort__titel, .m8-kort--p .m8-kort__punkt::marker { color: var(--m8-p); }

.m8-figur { margin: 0 0 2.25rem; }
.m8-figur__billede { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--m8-blok); background: var(--m8-dyb); }
.m8-figur__maerke { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; color: var(--m8-frost); font-size: .78rem; line-height: 1.3; }
.m8-figur__maerke::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--m8-cyan); }

/* ---------- Brødtekst ---------- */
.m8-tekst { overflow-wrap: anywhere; }
.m8-tekst > :first-child { margin-top: 0; }
.m8-tekst p, .m8-tekst ul, .m8-tekst ol, .m8-tekst blockquote { margin: 0 0 1.15rem; }
.m8-tekst h2 {
  margin: 2.75rem 0 .9rem; color: var(--m8-is); scroll-margin-top: 1.5rem;
  font-family: var(--m8-overskrift); font-weight: 300; line-height: 1.12; letter-spacing: -.015em;
  font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.25rem); overflow-wrap: break-word;
}
.m8-tekst h2::before {
  content: ""; display: block; width: 2.75rem; height: 5px; margin-bottom: .85rem;
  border-radius: var(--m8-pille); background: var(--m8-cyan);
}
.m8-tekst h3 { margin: 2rem 0 .6rem; color: var(--m8-is); font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.3rem; line-height: 1.25; overflow-wrap: break-word; }
.m8-tekst h4 { margin: 1.6rem 0 .5rem; color: var(--m8-cyan); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.m8-tekst strong { color: var(--m8-is); font-weight: 600; }
.m8-tekst a { color: var(--m8-cyan); text-decoration-thickness: 1px; }
.m8-tekst a:hover { text-decoration-thickness: 2px; }
/* Gruppernes farvekode går igen, hver gang en gruppe linkes. */
.m8-tekst a[href^="/oligosakkarider/"] { color: var(--m8-o); }
.m8-tekst a[href^="/disakkarider/"] { color: var(--m8-d); }
.m8-tekst a[href^="/monosakkarider/"] { color: var(--m8-m); }
.m8-tekst a[href^="/polyoler/"] { color: var(--m8-p); }
.m8-tekst ul { padding-left: 1.4rem; list-style: none; }
.m8-tekst ul > li { position: relative; margin-bottom: .45rem; }
.m8-tekst ul > li::before {
  content: ""; position: absolute; left: -1.15rem; top: .6em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--m8-cyan);
}
.m8-tekst ul ul { margin: .45rem 0 0; }
.m8-tekst ul ul > li::before { background: transparent; border: 2px solid var(--m8-cyan); }
.m8-tekst ol { padding-left: 1.6rem; }
.m8-tekst ol > li { margin-bottom: .45rem; padding-left: .25rem; }
.m8-tekst ol > li::marker { color: var(--m8-cyan); font-family: var(--m8-overskrift); font-weight: 500; }
.m8-tekst blockquote {
  margin-inline: 0; padding: 1.1rem 1.35rem; border: 1px solid var(--m8-kant); border-radius: var(--m8-blok);
  background: var(--m8-dyb); color: var(--m8-is); font-size: 1.1rem;
}
.m8-tekst blockquote > :last-child { margin-bottom: 0; }
/* Tabellerne ombryder i stedet for at scrolle vandret, så der ikke opstår et scrollområde uden tastaturadgang. */
.m8-tekst table {
  width: 100%; margin: 1.5rem 0 1.75rem;
  border-collapse: collapse; font-size: .95rem; line-height: 1.5;
}
.m8-tekst th, .m8-tekst td {
  padding: .65rem .85rem; border-bottom: 1px solid var(--m8-kant);
  text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto;
}
/* Første kolonne holder hele ord, så auto-layout ikke klemmer den ned til ét tegns bredde. */
.m8-tekst th:first-child, .m8-tekst td:first-child { overflow-wrap: normal; hyphens: manual; }
@media (max-width: 600px) {
  .m8-tekst table { font-size: .86rem; }
  .m8-tekst th, .m8-tekst td { padding: .55rem .5rem; }
}
.m8-tekst thead th {
  background: var(--m8-staal); color: var(--m8-is); border-bottom: 2px solid var(--m8-cyan);
  font-family: var(--m8-overskrift); font-weight: 500; font-size: .95rem;
}
.m8-tekst thead th:first-child { border-top-left-radius: .9rem; }
.m8-tekst thead th:last-child { border-top-right-radius: .9rem; }
.m8-tekst tbody tr:nth-child(even) td { background: #0E1D33; }
.m8-tekst td:first-child { color: var(--m8-is); }
/* Farvekoden i tabeller (uden JavaScript): når en af rækkens tre første celler starter med et link til en
   kulhydratgruppe, får rækkens første celle gruppens farve og en farvet kant. */
.m8-tekst tr:has(> :nth-child(-n+3) > a[href^="/oligosakkarider/"]:first-child) > :first-child { box-shadow: inset 4px 0 0 var(--m8-o); color: var(--m8-o); font-weight: 600; }
.m8-tekst tr:has(> :nth-child(-n+3) > a[href^="/disakkarider/"]:first-child) > :first-child { box-shadow: inset 4px 0 0 var(--m8-d); color: var(--m8-d); font-weight: 600; }
.m8-tekst tr:has(> :nth-child(-n+3) > a[href^="/monosakkarider/"]:first-child) > :first-child { box-shadow: inset 4px 0 0 var(--m8-m); color: var(--m8-m); font-weight: 600; }
.m8-tekst tr:has(> :nth-child(-n+3) > a[href^="/polyoler/"]:first-child) > :first-child { box-shadow: inset 4px 0 0 var(--m8-p); color: var(--m8-p); font-weight: 600; }

/* Ordlisten: bogstavoverskrifterne som cyan piller, begreberne fremhævet. */
.m8-tekst--ordliste h2 {
  display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 3.1rem; height: 3.1rem;
  margin: 2.5rem 0 1rem; padding: 0 1rem; border-radius: var(--m8-pille);
  background: var(--m8-cyan); color: var(--m8-nat);
  font-weight: 500; font-size: 1.6rem; line-height: 1; letter-spacing: 0;
}
.m8-tekst--ordliste h2::before { content: none; }
.m8-tekst--ordliste p > strong:first-child { font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.1em; }
.m8-tekst--ordliste p { padding-left: 1rem; border-left: 2px solid var(--m8-kant); }
.m8-tekst--ordliste > p:first-child { padding-left: 0; border-left: 0; }

/* ---------- Spørgsmål, kilder og bladring ---------- */
.m8-faq { margin-top: 3rem; }
.m8-faq__titel { margin-bottom: 1.1rem; }
.m8-faq__liste { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.m8-faq__punkt { padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--m8-kant); border-radius: var(--m8-blok); background: var(--m8-dyb); }
.m8-faq__q { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .45rem; color: var(--m8-is); font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.15rem; line-height: 1.3; }
.m8-faq__nr {
  flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--m8-cyan); color: var(--m8-nat); font-size: .85rem; line-height: 1; transform: translateY(-.1rem);
}
.m8-faq__a { margin: 0; }
.m8-krop--faq .m8-faq { margin-top: 0; margin-bottom: 3rem; }

.m8-kilder { margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--m8-kant); }
.m8-kilder__liste { display: grid; gap: .35rem; margin: 0; padding-left: 1.4rem; font-size: .925rem; }
.m8-kilder__punkt::marker { color: var(--m8-frost); }
.m8-kilder__link { color: var(--m8-tekst); text-decoration-color: var(--m8-cyan); }
.m8-kilder__link:hover { color: var(--m8-cyan); }
.m8-kilder__vaert { margin-left: .3rem; color: var(--m8-frost); font-size: .8rem; }

.m8-blad { display: grid; gap: .75rem; margin-top: 3rem; }
.m8-blad__link {
  display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.35rem 1.1rem;
  border: 2px solid var(--m8-kant); border-radius: var(--m8-blok); background: var(--m8-dyb);
  color: var(--m8-is); text-decoration: none; transition: border-color .15s;
}
.m8-blad__link:hover { border-color: var(--m8-cyan); }
.m8-blad__retning { color: var(--m8-cyan); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.m8-blad__navn { font-family: var(--m8-overskrift); font-weight: 300; font-size: 1.45rem; line-height: 1.2; }
.m8-blad__link--o { border-color: var(--m8-o); } .m8-blad__link--o .m8-blad__retning { color: var(--m8-o); }
.m8-blad__link--d { border-color: var(--m8-d); } .m8-blad__link--d .m8-blad__retning { color: var(--m8-d); }
.m8-blad__link--m { border-color: var(--m8-m); } .m8-blad__link--m .m8-blad__retning { color: var(--m8-m); }
.m8-blad__link--p { border-color: var(--m8-p); } .m8-blad__link--p .m8-blad__retning { color: var(--m8-p); }
.m8-blad__link--o:hover, .m8-blad__link--d:hover, .m8-blad__link--m:hover, .m8-blad__link--p:hover { border-color: var(--m8-is); }
@media (min-width: 40rem) {
  .m8-blad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m8-blad__link--naeste { grid-column: 2; text-align: right; }
}

/* ---------- Enkle sider: kontakt, privatliv, oversigt, 404 ---------- */
.m8-enkel { padding-block: 2rem 3.5rem; }
.m8-enkel > * { max-width: 44rem; }
.m8-ingress { margin: 0 0 1.75rem; color: var(--m8-is); font-size: 1.2rem; line-height: 1.55; }
.m8-enkel__dato { margin: 2rem 0 0; color: var(--m8-frost); font-size: .9rem; }

.m8-oversigt { margin-top: 2.5rem; }
.m8-oversigt__titel { margin-bottom: 1rem; }
.m8-oversigt__liste { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.m8-oversigt__link {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .15rem 1rem; padding: 1rem 1.15rem;
  border: 1px solid var(--m8-kant); border-radius: var(--m8-blok); background: var(--m8-dyb); color: var(--m8-is); text-decoration: none;
}
.m8-oversigt__link:hover { border-color: var(--m8-cyan); }
.m8-oversigt__nr {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--m8-staal); color: var(--m8-cyan); font-family: var(--m8-overskrift); font-weight: 500; line-height: 1;
}
.m8-oversigt__link--o .m8-oversigt__nr { background: var(--m8-o); color: var(--m8-nat); }
.m8-oversigt__link--d .m8-oversigt__nr { background: var(--m8-d); color: var(--m8-nat); }
.m8-oversigt__link--m .m8-oversigt__nr { background: var(--m8-m); color: var(--m8-nat); }
.m8-oversigt__link--p .m8-oversigt__nr { background: var(--m8-p); color: var(--m8-nat); }
.m8-oversigt__navn { font-family: var(--m8-overskrift); font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.m8-oversigt__besk { grid-column: 2; color: var(--m8-frost); font-size: .925rem; line-height: 1.45; }

.m8-kontakt { display: grid; gap: 2rem; padding-block: 2rem 3.5rem; }
.m8-kontakt__tekst { min-width: 0; }
@media (min-width: 56rem) { .m8-kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: start; } }
.m8-kontakt__formular > p[role="status"] {
  margin: 0 0 1rem; padding: .8rem 1.2rem; border-radius: var(--m8-blok);
  background: var(--m8-cyan); color: var(--m8-nat); font-weight: 600;
}
.m8-form {
  position: relative; display: grid; gap: 1.1rem; padding: 1.5rem 1.25rem;
  border: 1px solid var(--m8-kant); border-radius: var(--m8-blok); background: var(--m8-dyb);
}
@media (min-width: 40rem) { .m8-form { padding: 1.75rem 1.75rem 1.6rem; } }
.m8-form__felt { display: grid; gap: .4rem; }
.m8-form__label, .m8-form__felt label { color: var(--m8-is); font-size: .95rem; font-weight: 600; }
.m8-form__input, .m8-form__felt input {
  width: 100%; padding: .7rem 1.15rem; border: 1.5px solid var(--m8-feltkant); border-radius: var(--m8-pille);
  background: var(--m8-nat); color: var(--m8-is); font: inherit;
}
.m8-form__input--tekst { min-height: 9.5rem; border-radius: 1.25rem; resize: vertical; }
.m8-form__input:focus-visible, .m8-form__felt input:focus-visible { border-color: var(--m8-cyan); outline: 3px solid #FFFFFF; outline-offset: 2px; }
.m8-form__honning { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.m8-form__send { margin-top: .25rem; }
.m8-form__note { margin: 0; color: var(--m8-frost); font-size: .85rem; line-height: 1.5; }

.m8-tabt { display: grid; gap: 2.5rem; padding-block: 2rem 3.5rem; }
.m8-tabt__tekst { max-width: 40rem; }
.m8-tabt__knapper { margin: 0; }
.m8-tabt__side { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 56rem) {
  .m8-tabt { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 3.5rem; }
}

/* ---------- Bund: forbehold og sidefod på én linje ---------- */
.m8-fod { border-top: 1px solid var(--m8-kant); background: var(--m8-nat); }
.m8-forbehold { background: var(--m8-dyb); border-bottom: 1px solid var(--m8-kant); }
.m8-forbehold__tekst {
  display: flex; align-items: flex-start; gap: .8rem; margin-block: 0; padding-block: 1.1rem;
  color: var(--m8-is); font-size: .95rem; line-height: 1.5;
}
.m8-forbehold__ikon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .05rem; color: var(--m8-cyan); }
.m8-fod__linje {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1.5rem; padding-block: 1.1rem 1.5rem; font-size: .85rem;
}
.m8-fod__navn { margin: 0; color: var(--m8-frost); }
.m8-fod__liste { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.m8-fod__link { color: var(--m8-tekst); text-decoration: none; }
.m8-fod__link:hover { color: var(--m8-cyan); text-decoration: underline; }
.m8-fod__link[aria-current="page"] { color: var(--m8-cyan); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  a.m8-flise__link:hover { transform: none; }
}