/* Fakta om muslimer - fælles designsystem. Ret KUN her, aldrig pr. side. */
:root {
  --bg: #ffffff; --ink: #101418; --ink-2: #4b5560; --ink-3: #7a838d; --line: #e6e9ec; --tile: #f4f6f8;
  --accent: #2a78d6; --accent-tint: #eaf2fc;
  --s-dansk: #eb6834; --s-menapt: #2a78d6; --s-eft: #1baf7a;   /* faste seriefarver */
  --good-tint: #e9f6ef; --good-ink: #0f6b3f; --bad-tint: #fdeeee; --bad-ink: #a12a2a;
  --r-card: 14px; --r-btn: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Inter Tight', Inter, sans-serif; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; }
h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lead { color: var(--ink-2); max-width: 64ch; margin-top: 14px; }
.num { font-variant-numeric: tabular-nums; }
.draft { background: #fff7d6; color: #5c4a00; font-size: 14px; text-align: center; padding: 8px 16px; }

nav.top { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font: 700 20px 'Inter Tight', Inter, sans-serif; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--accent); }
.links { display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 500; }
.links a { text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.links a:hover, .links a[aria-current] { color: var(--ink); }
.links a[aria-current] { box-shadow: 0 2px 0 var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .15s; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 56px 0 72px; }
.hero h1 { font-size: clamp(35px, 4.8vw, 56px); }
.hero .lead { font-size: 17.5px; }
.cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-tile { background: var(--accent-tint); border-radius: var(--r-card); padding: 28px; }
.hero-tile .label { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.hero-tile .big { font: 700 clamp(60px, 8vw, 92px)/1 'Inter Tight', Inter, sans-serif; letter-spacing: -0.04em; margin: 10px 0 6px; }
.hero-tile .delta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--good-ink); }
.hero-tile .foot { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.spark { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }

.page-head { padding: 40px 0 8px; }
.crumb { font-size: 14px; color: var(--ink-3); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 14px; }
section { padding: 60px 0; border-top: 1px solid var(--line); }
section.first { border-top: 0; padding-top: 28px; }

/* emnekort på forsiden */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.card { display: block; text-decoration: none; background: var(--tile); border-radius: var(--r-card); padding: 24px; transition: transform .15s, background .15s; }
.card:hover { background: var(--accent-tint); transform: translateY(-2px); }
.card .top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.card .top i { font-size: 22px; color: var(--accent); }
.card .what { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.card .pair { display: flex; gap: 28px; margin-top: 6px; align-items: baseline; flex-wrap: wrap; }
.card .v { font: 700 40px/1.1 'Inter Tight', Inter, sans-serif; letter-spacing: -0.03em; }
.card .cmp { font-size: 14px; color: var(--ink-2); }
.card .cmp b { color: var(--ink); font-weight: 600; }
.card .trend { font-size: 14px; font-weight: 600; margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.card .trend.up { color: var(--good-ink); } .card .trend.down { color: var(--bad-ink); }
.card .more { font-size: 14px; font-weight: 600; margin-top: 14px; display: inline-flex; gap: 6px; align-items: center; color: var(--accent); }

/* grafer */
.viz { margin-top: 26px; }
.viz h3 { margin-bottom: 4px; }
.viz .sub { font-size: 15px; color: var(--ink-2); }
.filters { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.chip { font: 500 14px Inter, sans-serif; padding: 8px 14px; border-radius: var(--r-btn); border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); margin: 14px 0 4px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 8px; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 500 13px Inter, sans-serif; fill: var(--ink-3); }
.chart .endlabel { font-weight: 600; fill: var(--ink); font-size: 13.5px; }
.tip { position: absolute; pointer-events: none; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.45; border-radius: 12px; opacity: 0; white-space: nowrap; transform: translate(-50%, -100%); z-index: 2; box-shadow: 0 8px 28px rgba(16, 20, 24, .16), 0 0 0 1px var(--line); overflow: hidden; min-width: 190px; }
.tip .th { background: var(--accent); color: #fff; font: 600 15px 'Inter Tight', Inter, sans-serif; padding: 7px 14px; }
.tip .tb { padding: 10px 14px 12px; display: grid; gap: 4px; }
.tip .tr { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.tip .tr span { color: var(--ink-2); } .tip .tr b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tip .tr i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.tip .tf { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.tip .tx { color: var(--ink-2); font-size: 13px; white-space: normal; max-width: 260px; margin-top: 4px; }
.band { fill: var(--accent); opacity: 0; } .band.on { opacity: .07; }
.note { font-size: 15px; color: var(--ink-2); margin-top: 14px; max-width: 72ch; }
.source { font-size: 13px; color: var(--ink-3); margin-top: 14px; }
.source a { color: var(--ink-2); }
details { margin-top: 12px; font-size: 14px; }
details summary { cursor: pointer; color: var(--ink-2); font-weight: 500; }
table { border-collapse: collapse; margin-top: 12px; }
th, td { text-align: right; padding: 5px 12px; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
thead th { font-weight: 600; border-bottom: 1px solid var(--line); }

/* godt / dårligt */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.side { border-radius: var(--r-card); padding: 28px; }
.side.good { background: var(--good-tint); } .side.bad { background: var(--bad-tint); }
.side h3 { display: flex; align-items: center; gap: 10px; }
.side.good h3 { color: var(--good-ink); } .side.bad h3 { color: var(--bad-ink); }
.fact { margin-top: 22px; }
.fact .v { font: 700 32px/1.1 'Inter Tight', Inter, sans-serif; letter-spacing: -0.03em; }
.fact p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.fact a { font-weight: 600; font-size: 14px; }

/* vandrette søjler */
.bars { margin-top: 20px; display: grid; gap: 9px; max-width: 840px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; font-size: 15px; }
.bar-row .track { display: flex; align-items: center; gap: 10px; }
.bar { height: 22px; border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row .val { font-weight: 600; white-space: nowrap; }
.bar-row .was { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.bar-group { margin-top: 10px; }
.bar-group .g { font-weight: 600; font-size: 14px; margin: 12px 0 4px; }

/* forbehold */
.caveats { background: var(--tile); border-radius: var(--r-card); padding: 24px 28px; margin-top: 26px; max-width: 840px; }
.caveats ul { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; }
.caveats li { margin-top: 6px; }

/* generationer */
.gens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.gen { background: var(--tile); border-radius: var(--r-card); padding: 22px; }
.gen .v { font: 700 30px/1.1 'Inter Tight', Inter, sans-serif; letter-spacing: -0.03em; margin: 8px 0 6px; }
.gen p { font-size: 15px; color: var(--ink-2); }
.gen.none { background: transparent; border: 1px dashed #cfd5da; }

.steps { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); }
.step { padding: 0 20px; border-left: 1px solid var(--line); }
.step:first-child { padding-left: 0; border-left: 0; }
.step i.ph { font-size: 24px; color: var(--accent); }
.step h3 { font-size: 17px; margin: 10px 0 6px; }
.step p { font-size: 15px; color: var(--ink-2); }

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) {
  .links a:not(.btn) { display: none; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 52px; }
  .two, .cards, .steps, .gens { grid-template-columns: 1fr; }
  .step { padding: 16px 0 0; border-left: 0; }
  section { padding: 48px 0; }
  .bar-row { grid-template-columns: 104px 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .card { transition: none; } }

/* kontekst: "hvorfor ikke 100 %?" */
.card .ctx, .ctx { font-size: 14px; color: var(--ink-2); margin-top: 12px; padding-top: 12px; border-top: 1px solid #dfe3e7; }
.ctx b { color: var(--ink); font-weight: 600; }
.stack-row { margin-top: 18px; max-width: 880px; }
.stack-row .n { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.stack { display: flex; gap: 2px; height: 44px; }
.stack div { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; }
.stack div:first-child { border-radius: 4px 0 0 4px; } .stack div:last-child { border-radius: 0 4px 4px 0; }
.stack .light { color: var(--ink); }
.legend i.sq { width: 12px; height: 12px; border-radius: 3px; }

/* indvandring: 100 mennesker */
.waffle-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; margin-top: 28px; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.waffle i { aspect-ratio: 1; border-radius: 4px; }
.keys { display: grid; gap: 14px; }
.key { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; }
.key i { width: 16px; height: 16px; border-radius: 4px; margin-top: 5px; }
.key b { font: 700 24px/1.1 'Inter Tight', Inter, sans-serif; letter-spacing: -0.02em; }
.key div > span { display: block; font-size: 15px; color: var(--ink-2); }
.card.full { grid-column: 1 / -1; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.trio .gen .v { font-size: 34px; }
@media (max-width: 900px) { .waffle-wrap, .trio { grid-template-columns: 1fr; } .waffle { max-width: 320px; } }

/* Metode i menuen: bokset i accentfarven */
.links a.metode { background: var(--accent-tint); color: var(--accent); padding: 8px 14px; border-radius: var(--r-btn); font-weight: 600; }
.links a.metode:hover { color: var(--accent); background: #dbe9fa; }
.links a.metode[aria-current] { background: var(--accent); color: #fff; box-shadow: none; }
@media (max-width: 900px) { .links a.metode { display: inline-flex !important; } }

/* årsager */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.toc a { font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ink-2); }
.toc a:hover { color: var(--ink); border-color: var(--ink-3); }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.why article { background: var(--tile); border-radius: var(--r-card); padding: 24px; }
.why h3 { font-size: 17px; color: var(--ink-2); font-weight: 600; }
.why .v { font: 700 28px/1.15 'Inter Tight', Inter, sans-serif; letter-spacing: -0.02em; margin: 8px 0 8px; }
.why p { font-size: 15.5px; color: var(--ink-2); }
.why .but { margin-top: 10px; font-size: 14px; }
.why .but b { color: var(--ink); }
.why .src { margin-top: 12px; padding-top: 12px; border-top: 1px solid #dfe3e7; font-size: 13px; color: var(--ink-3); }
.why .src a { color: var(--ink-2); }
.why .src em { font-style: normal; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.notx { background: var(--bad-tint); border-radius: var(--r-card); padding: 24px 28px; margin-top: 16px; }
.notx h3 { color: var(--bad-ink); display: flex; gap: 10px; align-items: center; }
.notx ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; }
.notx li { margin-top: 8px; }
.idx { margin-top: 24px; max-width: 760px; }
.idx table { width: 100%; }
.idx td.hi { font-weight: 600; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }

/* infografik-plader */

  .plate { border-radius: 20px; padding: 40px; margin-top: 28px; background: var(--tile); }
  .plate.blue { background: var(--accent-tint); }
  .plate.dark { background: #101418; color: #fff; }
  .plate.dark .kicker, .plate.dark .hvorfor { color: #aab3bc; } .plate.dark .hvorfor b { color: #fff; }
  .kicker { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: .01em; }
  .plate h2 { font-size: clamp(24px, 2.9vw, 36px); font-weight: 600; margin: 8px 0 6px; max-width: 28ch; }
  .plate .sub { color: var(--ink-2); max-width: 60ch; }
  .plate.dark .sub { color: #c7ced5; }
  .plate svg { width: 100%; height: auto; display: block; overflow: visible; margin-top: 22px; }
  .plate svg text { font-family: Inter, sans-serif; }
  .hvorfor { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(16,20,24,.12); font-size: 14.5px; color: var(--ink-2); max-width: 78ch; }
  .plate.dark .hvorfor { border-color: rgba(255,255,255,.18); }
  .hvorfor b { color: var(--ink); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .people { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; margin-top: 24px; font-size: 30px; line-height: 1; }
  .people i { color: #cfd5da; } .people i.a { color: var(--accent); } .people i.b { color: #eb6834; } .people i.c { color: #1baf7a; }
  .pk { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; font-size: 15px; color: var(--ink-2); }
  .pk b { font: 700 22px 'Inter Tight', Inter, sans-serif; color: var(--ink); margin-right: 6px; }
  .pk span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; background: var(--c); }
  .ten { display: grid; gap: 18px; margin-top: 26px; }
  .ten .r { display: grid; grid-template-columns: 190px auto 1fr; gap: 18px; align-items: center; }
  .ten .n { font-weight: 600; } .ten .ic { font-size: 38px; letter-spacing: 2px; white-space: nowrap; }
  .ten .ic i { color: #cfd5da; } .ten .ic i.on { color: var(--accent); } .ten .r.ref .ic i.on { color: #5b6570; }
  .ten .p { font: 700 30px 'Inter Tight', Inter, sans-serif; letter-spacing: -0.02em; } .ten .p small { font: 500 14px Inter, sans-serif; color: var(--ink-2); margin-left: 8px; letter-spacing: 0; }
  .dots h3 { font-size: 16px; } .dots .big { font: 700 44px/1 'Inter Tight', Inter, sans-serif; letter-spacing: -0.03em; margin: 6px 0 0; } .dots .big small { font: 500 15px Inter, sans-serif; color: #aab3bc; margin-left: 8px; letter-spacing: 0; }
  .mult { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; margin-top: 24px; }
  .mult h3 { font-size: 16px; } .mult svg { margin-top: 4px; }
  .rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
  .rules div { background: var(--tile); border-radius: 14px; padding: 18px 20px; font-size: 15px; color: var(--ink-2); }
  .rules b { display: block; color: var(--ink); font: 600 16px 'Inter Tight', Inter, sans-serif; margin-bottom: 4px; }
  .pchart { position: relative; }
  .split.dots { margin-top: 26px; }
  @media (max-width: 900px) { .plate { padding: 24px; } .split, .mult, .rules { grid-template-columns: 1fr; } .people { grid-template-columns: repeat(10, 1fr); } .ten .r { grid-template-columns: 1fr; gap: 4px; } .ten .ic { font-size: 26px; } }

.plate h2 { max-width: 30ch; }
.plate + .plate, .plate + .viz, .viz + .plate { margin-top: 28px; }
.plate .filters { margin-top: 18px; }

@media (max-width: 900px) { .idx { overflow-x: auto; } .why .src em { white-space: normal; } .why article, .plate, .side, .caveats { min-width: 0; } .why { grid-template-columns: minmax(0, 1fr); } table { font-size: 13px; } }

/* fremdriftsbjælker */
.prog-g { margin-top: 22px; } .prog-g .pt { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--ink-2); }
.prog { display: grid; grid-template-columns: 220px 1fr 110px; gap: 16px; align-items: center; margin-top: 10px; }
.prog .n { font-weight: 600; font-size: 15px; }
.prog .tr { height: 26px; border-radius: 13px; background: rgba(16, 20, 24, .07); overflow: hidden; display: block; }
.prog .fill { display: block; height: 100%; border-radius: 13px; }
.prog .p { font: 700 24px 'Inter Tight', Inter, sans-serif; letter-spacing: -0.02em; text-align: right; }
.plate .legend { margin-top: 18px; } .plate .chart svg { margin-top: 6px; }
.plate .chart text { font-size: 13px; } .plate .chart .endlabel { font-size: 14px; font-weight: 500; }
.plate details { margin-top: 14px; }
.plate + h2, .plate + .lead { margin-top: 48px; }
@media (max-width: 900px) { .prog { grid-template-columns: 1fr 80px; } .prog .n { grid-column: 1 / -1; margin-bottom: -6px; } .prog .p { font-size: 20px; } }

.brand { font-size: 19px; }
.why article .v { color: var(--ink-3); }

.brand { font-size: 18px; }
.links a.metode { padding: 7px 11px; }
@media (max-width: 1099px) { .links a:not(.btn):not(.metode) { display: none; } }

.hero-tile .delta { flex-wrap: wrap; }

/* infoboks: mindre og ved siden af markøren */
.tip { transform: none; min-width: 150px; font-size: 13px; border-radius: 10px; transition: opacity .1s; }
.tip .th { font-size: 13.5px; padding: 5px 11px; } .tip .tb { padding: 8px 11px 9px; gap: 2px; }
.tip .tr { gap: 14px; } .tip .tr i { width: 9px; height: 9px; margin-right: 6px; }
.tip .tx { font-size: 12px; max-width: 210px; }
/* de tre begreber forklaret */
.pk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 22px; }
.pk div span { display: block; } .pk span::before { content: none; }
.pk div > span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; background: var(--c); }
.pk small { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }
/* prikker: hele befolkningen */
.crowd { margin-top: 22px; } .crowd canvas { display: block; touch-action: pan-y; cursor: none; }
.chipbody.ten { margin-top: 18px; }
/* mobil: grafer kan stryges sidelæns i læsbar størrelse */
.swipe { display: none; font-size: 13px; color: var(--ink-3); margin-top: 10px; }
@media (max-width: 900px) {
  .pchart, .chart, .xs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pchart > svg, .chart > svg, .xs > svg { min-width: 700px; }
  .pk { grid-template-columns: 1fr 1fr; }
  .plate .tip { display: none; }
  .swipe { display: block; }
  .people { font-size: 22px; }
  .stack div { font-size: 12px; }
  .split.dots svg { min-width: 0; }
}

.pk b { white-space: nowrap; }
@media (max-width: 900px) { .pk b { display: block; margin-bottom: 2px; } .pk div > span::before { vertical-align: middle; } }

/* krige: små grafer pr. land */
.krig { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 30px; margin-top: 22px; }
.krig h3 { font-size: 16px; } .krig svg { margin-top: 4px; }
.krig-key { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--ink-2); margin-top: 16px; }
.krig-key i { display: inline-block; vertical-align: middle; margin-right: 8px; }
.prog.wide { grid-template-columns: 330px 1fr 90px; }
.delt { width: 100%; max-width: 900px; margin-top: 14px; font-size: 15px; }
.delt td, .delt th { text-align: left; padding: 8px 12px 8px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.delt td:nth-child(2) { white-space: nowrap; color: var(--ink-2); } .delt td:last-child { font-size: 13px; }
@media (max-width: 900px) { .krig { grid-template-columns: 1fr; } .prog.wide { grid-template-columns: 1fr 70px; } .delt td:nth-child(2) { white-space: normal; } }

/* smal skærm: menuen bliver en række, man kan stryge i - i stedet for at forsvinde */
@media (max-width: 1099px) {
  nav.top { height: auto; flex-wrap: wrap; padding: 14px 0 6px; row-gap: 8px; }
  nav.top .links { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; gap: 16px; font-size: 14.5px; }
  nav.top .links a { display: inline-block !important; flex: none; }
}

/* vigtig kontekst øverst på en side */
.laes { border: 2px solid var(--accent); border-radius: var(--r-card); padding: 30px 34px; background: #fff; max-width: 920px; margin-bottom: 28px; }
.laes h2 { font-size: 24px; display: flex; gap: 10px; align-items: center; } .laes h2 i { color: var(--accent); }
.laes .lead { margin-top: 10px; font-size: 16px; }
.laes ul { margin: 18px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 16px; }
.laes li { margin-top: 12px; } .laes li b { color: var(--ink); }
@media (max-width: 900px) { .laes { padding: 22px 20px; } }

/* menu i to rækker på computer: emner øverst til højre for logoet, hjælpesider til sidst */
nav.top { flex-wrap: wrap; height: auto; padding: 14px 0 10px; row-gap: 6px; }
nav.top .links { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.links .skil { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
@media (max-width: 1099px) { nav.top .links { flex-wrap: nowrap; justify-content: flex-start; } .links .skil { flex: none; } }
/* ordbog */
.soeg { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 12px 16px; max-width: 520px; margin-top: 22px; background: #fff; }
.soeg i { font-size: 20px; color: var(--ink-3); } .soeg input { border: 0; outline: 0; font: 400 16px Inter, sans-serif; width: 100%; background: transparent; color: var(--ink); }
.soeg:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.toc a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ordliste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ordliste article { background: var(--tile); border-radius: var(--r-card); padding: 22px 24px; scroll-margin-top: 20px; }
.ordliste .k { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ordliste h3 { margin: 4px 0 8px; font-size: 20px; } .ordliste p { font-size: 15.5px; color: var(--ink-2); }
.ordliste .mere { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
@media (max-width: 900px) { .ordliste { grid-template-columns: 1fr; } }

/* racisme: konvolutter */
.konv { display: grid; gap: 14px; margin-top: 24px; } .konv > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center; }
.konv .n { font-weight: 600; } .konv .ik { font-size: 34px; line-height: 1.1; letter-spacing: 3px; }
@media (max-width: 900px) { .konv > div { grid-template-columns: 1fr; gap: 2px; } .konv .ik { font-size: 26px; } }
.konv .ik { display: flex; flex-wrap: wrap; gap: 4px; letter-spacing: 0; }
.delt.aarsag td:nth-child(2) { white-space: normal; color: var(--ink-2); } .delt.aarsag td:last-child { font-size: 14px; color: var(--ink-2); } .delt.aarsag td:first-child { white-space: nowrap; }
@media (max-width: 900px) { .delt.aarsag td:first-child { white-space: normal; } .delt.aarsag { min-width: 620px; } }

/* Menuens tre faste sider har hver sin farve: Årsager grøn, Ordbog gul, Metode blå */
.links a.metode.aarsager { background: #e1f5ec; color: #0f7a54; }
.links a.metode.aarsager:hover { background: #cdeede; color: #0f7a54; }
.links a.metode.aarsager[aria-current] { background: #12805a; color: #fff; }
.links a.metode.ordbog { background: #fdf0d2; color: #8a5a00; }
.links a.metode.ordbog:hover { background: #fbe5b3; color: #8a5a00; }
.links a.metode.ordbog[aria-current] { background: #b87a00; color: #fff; }
.card .kilde, .kilde { font-size: 12.5px; color: #7a838d; margin-top: 8px; }

/* Kilder: fjerde faste side i menuen (lilla) + kildelisten */
.links a.metode.kilder { background: #efe9fb; color: #5b3fa8; }
.links a.metode.kilder:hover { background: #e2d8f7; color: #5b3fa8; }
.links a.metode.kilder[aria-current] { background: #6a4bc4; color: #fff; }
table.kildeliste td { vertical-align: top; white-space: normal; }
table.kildeliste td:first-child { min-width: 220px; } table.kildeliste td:nth-child(2) { min-width: 200px; } table.kildeliste td:nth-child(3) { min-width: 200px; }
table.kildeliste .lille { font-size: 13px; color: #5b6570; }
table.delt.kildeliste td, table.delt.kildeliste th { white-space: normal !important; } table.delt.kildeliste { width: 100%; table-layout: auto; }
.kortfortalt { margin-top: 16px; } .kortfortalt + .kilde { margin-bottom: 36px; } .kortfortalt + .kilde + h2, .laes + h2, .plate + h2, .caveats + h2 { margin-top: 44px; }

/* Forsiden: "Hvor mange er vi?" - tre animerede visninger, man selv vælger imellem */
.hm-scene { position: relative; background: #0f1620; border-radius: 16px; overflow: hidden; margin: 16px 0 12px; }
.hm-scene canvas { display: block; width: 100%; }
.hm-tael { position: absolute; left: 12px; top: 10px; background: rgba(15,22,32,.82); padding: 6px 14px 10px; border-radius: 12px; color: #fff; font-family: var(--font-display, 'Inter Tight', Inter, sans-serif); line-height: 1.1; pointer-events: none; }
.hm-tael b { display: block; font-size: clamp(30px, 7vw, 54px); font-weight: 700; color: #6fb1ff; font-variant-numeric: tabular-nums; }
.hm-tael span { font-size: clamp(13px, 2.6vw, 16px); color: #c7d0da; font-family: Inter, sans-serif; }
.hm-gade { position: relative; height: 150px; background: linear-gradient(#e9eef4 0 72%, #cfd6de 72% 100%); border-radius: 16px; overflow: hidden; margin: 16px 0 12px; }
.hm-gade i { position: absolute; bottom: 26px; left: 0; font-size: 64px; line-height: 1; will-change: transform; }
.hm-gade .maal { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(#2a78d6 0 8px, transparent 8px 16px); opacity: .5; }
.hm-gadetal { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; font-family: 'Inter Tight', Inter, sans-serif; margin-bottom: 12px; }
.hm-gadetal b { font-size: clamp(28px, 6vw, 44px); font-variant-numeric: tabular-nums; } .hm-gadetal .bl { color: #2a78d6; } .hm-gadetal small { font: 400 15px Inter, sans-serif; color: #5b6570; margin-left: 6px; }
.hm-igen { border: 1px solid #cfd5da; background: #fff; color: #101418; border-radius: 999px; padding: 8px 16px; font: 600 14px Inter, sans-serif; cursor: pointer; }
.hm-igen:hover { background: #f3f5f8; }

/* "Sat i perspektiv": tre animerede visninger af sidens hovedtal, én rude pr. gruppe */
.pv-rist { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 14px; margin: 16px 0 14px; }
.pv-rist[style*="--k:1"] { max-width: 620px; }
@media (max-width: 760px) { .pv-rist { grid-template-columns: minmax(0, 1fr); } }
.pv-felt { background: #0f1620; border-radius: 16px; padding: 12px 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pv-scene { min-height: 60px; } .pv-scene canvas { display: block; width: 100%; }
.pv-tekst { margin-top: auto; }
.pv-tal { color: #e3e8ee; font-size: 15px; line-height: 1.4; } .pv-tal b { font-family: 'Inter Tight', Inter, sans-serif; font-size: clamp(28px, 5vw, 40px); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.pv-navn { color: #fff; font-weight: 600; font-size: 14.5px; margin-top: 2px; }
.pv-del { color: #c7d0da; font-size: 14px; margin-top: 4px; } .pv-del i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; } .pv-del b { color: #fff; font-variant-numeric: tabular-nums; }
.pv-gade { position: relative; height: 78px; background: linear-gradient(#1a2330 0 70%, #232e3c 70% 100%); border-radius: 12px; overflow: hidden; }
.pv-gade i { position: absolute; left: 0; bottom: 14px; font-size: 38px; line-height: 1; will-change: transform; }
.pv-gade .maal { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(#6fb1ff 0 6px, transparent 6px 12px); opacity: .5; }
.pv-gadetal { color: #8f9ba8; font-size: 12.5px; margin-top: 6px; }
.pv-fig { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px 2px; } .pv-fig i { font-size: clamp(15px, 2.4vw, 24px); text-align: center; color: #394453; line-height: 1.05; }
@media (max-width: 760px) { .pv-fig { grid-template-columns: repeat(20, minmax(0, 1fr)); } .pv-fig i { font-size: clamp(11px, 3.6vw, 18px); } }

/* Sektor-kasser: hvor indvandrere fra de ni lande arbejder */
.br-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.br-stor { background: #0f1620; color: #fff; border-radius: 16px; padding: 18px 20px; } .br-stor b { display: block; font-family: 'Inter Tight', Inter, sans-serif; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.1; color: #6fb1ff; font-variant-numeric: tabular-nums; } .br-stor span { font-size: 14.5px; color: #c7d0da; }
.br-rist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.br-kasse { background: #fff; border: 1px solid #dfe3e7; border-radius: 16px; padding: 18px 18px 16px; min-width: 0; }
.br-hoved { display: flex; align-items: center; gap: 10px; } .br-hoved i { font-size: 26px; color: #2a78d6; background: #e8f1fc; border-radius: 10px; padding: 8px; } .br-hoved h3 { font-size: 17px; margin: 0; }
.br-tal { margin-top: 12px; font-size: 14.5px; color: #4b5560; } .br-tal b { font-family: 'Inter Tight', Inter, sans-serif; font-size: 30px; color: #101418; font-variant-numeric: tabular-nums; margin-right: 4px; }
.br-bar { height: 8px; background: #eef1f4; border-radius: 99px; margin: 10px 0 8px; overflow: hidden; } .br-bar i { display: block; height: 100%; background: #2a78d6; border-radius: 99px; }
.br-andel { font-size: 14.5px; margin: 0; } .br-tekst { font-size: 13.5px; color: #5b6570; margin: 6px 0 0; }
.br-kr { background: #fff7d6; border-radius: 16px; padding: 20px 22px; margin-top: 18px; } .br-kr p { margin: 8px 0 0; max-width: 72ch; } .br-kr ul { margin: 12px 0 0; padding-left: 20px; max-width: 74ch; } .br-kr li { margin: 6px 0; font-size: 15px; }
.br-maerke { display: inline-block; background: #101418; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; }
.br-kr-tal { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 700; font-size: clamp(26px, 5vw, 40px); line-height: 1.15; margin-top: 8px; }
@media (max-width: 760px) { .br-top { grid-template-columns: minmax(0, 1fr); } }

.br-forkl { margin: 4px 0 12px; } .br-bar3 { display: flex; } .br-bar3 i { border-radius: 0; flex: none; } .br-bar3 i:first-child { border-radius: 99px 0 0 99px; } .br-bar3 i:last-child { border-radius: 0 99px 99px 0; }
.br-linjer { list-style: none; padding: 0; margin: 0; font-size: 14px; color: #3d4650; } .br-linjer li { margin: 4px 0; } .br-linjer b { color: #101418; font-variant-numeric: tabular-nums; }
.br-rist { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Del en graf */
.kan-deles { position: relative; scroll-margin-top: 16px; }
.del { position: absolute; top: 14px; right: 14px; z-index: 5; }
.del-knap { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfd5da; background: #fff; color: #101418; border-radius: 999px; padding: 6px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; }
.del-knap:hover { background: #f3f5f8; } .del-knap:focus-visible, .del-menu a:focus-visible, .del-menu button:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; }
.del-menu { position: absolute; right: 0; top: 38px; background: #fff; border: 1px solid #dfe3e7; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,20,24,.14); padding: 6px; min-width: 210px; display: flex; flex-direction: column; }
.del-menu[hidden] { display: none; }
.del-menu a, .del-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 9px; font: 500 14.5px Inter, sans-serif; color: #101418; text-decoration: none; cursor: pointer; text-align: left; }
.del-menu a:hover, .del-menu button:hover { background: #f3f5f8; } .del-menu i { font-size: 18px; }
.del-status { font-size: 12.5px; color: #4b5560; margin: 4px 12px 6px; max-width: 200px; overflow-wrap: anywhere; } .del-status:empty { display: none; }
.kan-deles > .kicker { padding-right: 84px; }
#g-brancher.kan-deles { padding-top: 46px; }
.del-maerke { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(128,138,150,.35); font: 500 13px Inter, sans-serif; color: #5b6570; }
.del-maerke b { font-family: 'Inter Tight', Inter, sans-serif; font-size: 16px; color: #101418; } .del-maerke b span { color: #2a78d6; }
.plate.dark .del-maerke, .plate.dark .del-maerke b { color: #fff; }
#g-brancher.del-fotograferes { background: #fff; padding: 46px 24px 24px; }
@media print { .del { display: none; } }

/* Forklaring af "point" (procentpoint) */
.pkt { color: #5b6570; } .pkt-forkl { font-size: 13.5px; color: #4b5560; background: #eef3f9; border-radius: 10px; padding: 9px 13px; margin: 10px 0 0; max-width: 78ch; } .pkt-forkl b { color: #101418; }

/* mobil: grafer i smal udgave fylder bredden og skal ikke stryges */
.xs > svg.fit, .pchart > svg.fit, .chart > svg.fit { min-width: 0 !important; width: 100%; height: auto; }
.xs:has(> svg.fit) + .swipe { display: none !important; }

.menapt9 { display: flex; gap: 10px; align-items: flex-start; max-width: 72ch; margin-top: 16px; padding: 12px 16px; background: var(--tile); border-radius: 12px; font-size: 15px; color: var(--ink-2); }
.menapt9 i { color: #2a78d6; font-size: 18px; margin-top: 2px; flex: none; }
.menapt9 b { color: var(--ink); font-weight: 600; }

/* udviklingsbarometer */
.baro { --b: #5b6570; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.baro > i { font-size: 24px; color: var(--b); flex: none; }
.baro-t b { color: var(--b); font-weight: 700; }
.baro-s { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.baro-s u { width: 16px; height: 6px; border-radius: 3px; background: #d5dae0; text-decoration: none; }
.baro-s u.her { background: var(--b); height: 10px; }
.baro-q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #9aa3ac; color: var(--ink-2); font-size: 13px; font-weight: 700; cursor: help; background: #fff; flex: none; }
.baro-q:hover, .baro-q:focus-visible { border-color: var(--ink); color: var(--ink); outline: none; }
.baro-tip { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(440px, 86vw); padding: 14px 16px; border-radius: 12px; background: #101418; color: #e8edf2; font-size: 13.5px; line-height: 1.5; font-weight: 400; box-shadow: 0 10px 30px rgba(16,20,24,.25); text-align: left; }
.baro-tip b { color: #fff; }
.baro-q:hover + .baro-tip, .baro-q:focus + .baro-tip, .baro.vis .baro-tip { display: block; }
.plate .baro-plads .baro, .plate > .baro, .plate > [data-baro] .baro { margin-top: 16px; }
.plate.dark .baro { color: #c9d2db; } .plate.dark .baro-q { background: transparent; color: #c9d2db; }

/* kontakt */
.links a.metode.kontakt { background: #101418; color: #fff; }
.links a.metode.kontakt:hover { background: #2b3138; color: #fff; }
.links a.metode.kontakt[aria-current] { background: #101418; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #101418; }
.kontaktside { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.kform { display: grid; gap: 20px; }
.kto { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kfelt { display: grid; gap: 6px; }
.kfelt label { font-weight: 600; font-size: 15px; color: var(--ink); }
.kvalgfri { font-weight: 400; color: var(--ink-3); }
.kfelt input, .kfelt select, .kfelt textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid #c9d0d7; border-radius: 10px; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.kfelt textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.kfelt input:focus, .kfelt select:focus, .kfelt textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.kfelt [aria-invalid="true"] { border-color: var(--bad-ink); }
.khj { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.kfejl { font-size: 13.5px; color: var(--bad-ink); font-weight: 600; margin: 0; }
.kskjul { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kknap { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: 16px; color: #fff; background: var(--accent); border: 0; border-radius: var(--r-btn); padding: 14px 22px; cursor: pointer; transition: transform .1s, background .15s; }
.kknap:hover { background: #1f66bd; } .kknap:active { transform: translateY(1px); } .kknap:disabled { opacity: .6; cursor: default; }
.kknap:focus-visible { outline: 3px solid var(--accent-tint); outline-offset: 2px; }
.kstatus { margin: 0; padding: 12px 16px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.kstatus.ok { background: var(--good-tint); color: var(--good-ink); } .kstatus.fejl { background: var(--bad-tint); color: var(--bad-ink); } .kstatus.info { background: #fff7d6; color: #6b4e00; }
.kside { background: var(--tile); border-radius: var(--r-card); padding: 24px 26px; }
.kside ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; } .kside li { margin-top: 10px; } .kside b { color: var(--ink); }
@media (max-width: 800px) { .kontaktside { grid-template-columns: 1fr; gap: 28px; } .kto { grid-template-columns: 1fr; } .kknap { justify-self: stretch; justify-content: center; } }
.kfelt { align-content: start; }
/* plads til Kontakt i menuen på én linje */
@media (min-width: 1100px) { nav.top .links { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 4px; font-size: 13.5px; } .links a.metode { padding: 6px 10px; } .links .skil { margin: 0; } }
@media (min-width: 1240px) { nav.top .links { font-size: 15px; } .links a.metode { padding: 7px 12px; } }
.kfelt select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%234b5560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }

/* test (quiz) */
.btn.test { background: #12805a; color: #fff; border: 1px solid #12805a; } .btn.test:hover { background: #0f6b4b; }
.quiz { max-width: 760px; }
.q-kort { background: var(--tile); border-radius: var(--r-card); padding: 32px; }
.q-start { text-align: left; } .q-ikon { font-size: 40px; color: var(--accent); } .q-start p { color: var(--ink-2); margin: 8px 0 20px; }
.q-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.q-emne { color: var(--accent); }
.q-bar { height: 6px; border-radius: 3px; background: #dfe4e9; margin: 12px 0 26px; overflow: hidden; } .q-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .25s; }
.q-kort h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin: 0 0 22px; outline: none; }
.q-svar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-svar button { display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: #fff; border: 1.5px solid #c9d0d7; border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.q-svar button b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tile); font-size: 14px; flex: none; }
.q-svar button:hover, .q-svar button:focus-visible { border-color: var(--accent); background: var(--accent-tint); outline: none; } .q-svar button:active { transform: scale(.99); }
.q-svar button.valgt { border-color: var(--accent); background: var(--accent-tint); } .q-svar button.valgt b { background: var(--accent); color: #fff; }
.q-tilbage { margin-top: 20px; background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; padding: 6px 0; } .q-tilbage:hover { color: var(--ink); }
.q-knap { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: 16px; color: #fff; background: var(--accent); border: 0; border-radius: var(--r-btn); padding: 14px 22px; cursor: pointer; } .q-knap:hover { background: #1f66bd; }
.q-tal { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 18px; } .q-tal b { font: 700 64px/1 'Inter Tight', Inter, sans-serif; } .q-tal span { color: var(--ink-2); font-size: 17px; }
.q-fordeling { display: flex; gap: 3px; height: 30px; } .q-fordeling i { display: grid; place-items: center; min-width: 26px; border-radius: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; }
.q-fordeling .neg, .q-forkl .neg { background: #b45f06; } .q-fordeling .ok, .q-forkl .ok { background: #17895f; } .q-fordeling .pos, .q-forkl .pos { background: #2a78d6; } .q-fordeling .andet, .q-forkl .andet { background: #7a838d; }
.q-forkl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 26px; font-size: 13.5px; color: var(--ink-2); } .q-forkl span { display: inline-flex; align-items: center; gap: 6px; } .q-forkl i { width: 10px; height: 10px; border-radius: 3px; }
.q-slut h2 { margin-bottom: 10px; } .q-konkl { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 0 0 22px; max-width: 62ch; }
.q-handl { display: flex; flex-wrap: wrap; gap: 10px; }
.q-over { margin: 44px 0 16px; }
.q-liste { list-style: none; counter-reset: q; margin: 0; padding: 0; display: grid; gap: 12px; }
.q-liste li { counter-increment: q; background: var(--tile); border-radius: 14px; padding: 18px 22px; border-left: 5px solid #7a838d; }
.q-liste li.ok { border-left-color: #17895f; } .q-liste li.neg { border-left-color: #b45f06; } .q-liste li.pos { border-left-color: #2a78d6; }
.q-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #5b6570; } .q-status i { font-size: 18px; }
.q-liste li.ok .q-status { color: #0f6b3f; } .q-liste li.neg .q-status { color: #8a4a05; } .q-liste li.pos .q-status { color: #1b4f91; }
.q-liste h3 { font-size: 17px; line-height: 1.35; margin: 8px 0 6px; } .q-liste h3::before { content: counter(q) ". "; }
.q-liste p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; } .q-liste .q-dit { color: var(--ink); } .q-liste s { color: var(--ink-3); }
@media (max-width: 640px) { .q-kort { padding: 22px 18px; } .q-svar { grid-template-columns: 1fr; } .q-tal b { font-size: 52px; } }

.page-head .lead.bred { max-width: 108ch; }
.baro.ord { display: inline-flex; margin: 0 0 0 4px; vertical-align: middle; font: 400 14.5px/1.5 Inter, sans-serif; letter-spacing: 0; }
/* spring-til-indhold-link (vises kun ved tastaturfokus) */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #101418; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 8px; }

.menapt9.obs { background: #fff7d6; margin: 18px 0 6px; } .menapt9.obs i { color: #b87a00; }