/* ═══════════════════════════════════════════════════════════════════
   Fartbøde.dk — konsolideret stilark (v2, 2026-10)
   Erstatter: style.css, home-tool.css, inner-pages.css, fartbode-2026.css
   Dækker al markup i: index, fartboede-beregner, bodetakster-2026, 10 guider,
   artikler, artikel (+ artikler.json-indhold), kontakt, om-os,
   redaktionelle-principper, privatlivspolitik, vilkaar, includes/*, js/inner-pages.js
   Kræver INGEN markup-ændringer. Tokens her overstyrer :root-blokken i header.php.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Fallback-fonte (metrik-tilpasset mod CLS) ─────────────────── */
@font-face { font-family: 'Instrument-fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('DejaVu Sans');
  size-adjust: 101%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'SourceSerif-fallback'; src: local('Georgia'), local('Times New Roman'), local('Liberation Serif'), local('DejaVu Serif');
  size-adjust: 104%; ascent-override: 92%; descent-override: 30%; line-gap-override: 0%; }

/* ── 2. Tokens ────────────────────────────────────────────────────── */
:root {
  --c-paper: #f8f6f1; --c-surface: #ffffff; --c-sand: #efebe3; --c-tint: #faf9f6; --c-hover: #f3f0ea;
  --c-line: #e2ddd3; --c-line-soft: #eeeae2; --c-line-strong: #cfc8bb;
  --c-ink: #16202e; --c-ink-2: #2c3747; --c-muted: #525a66;
  --c-red: #c8102e; --c-red-dark: #a00d25; --c-red-press: #8a0b20; --c-link: #b00e29;
  --c-warn: #8a4b00; --c-warn-bg: #fdf1dc; --c-warn-ink: #4a2a00;
  --c-ok: #2e6a4a; --c-ok-bg: #e7f2ea; --c-ok-ink: #1d4331;
  --f-sans: 'Instrument Sans', 'Instrument-fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Source Serif 4', 'SourceSerif-fallback', Georgia, serif;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-18: 72px;
  --r-ctl: 6px; --r-panel: 10px;
  --w-page: 1240px; --w-read: 740px;
  --header-h: 64px;
  --focus-ring: 3px solid var(--c-ink);
  /* Legacy-aliaser: overstyrer header.php's :root, så config.php ikke skal røres */
  --primary: var(--c-red); --primary-dark: var(--c-red-dark); --accent: var(--c-red);
  --bg: var(--c-paper); --surface: var(--c-surface); --text: var(--c-ink); --text-muted: var(--c-muted); --border: var(--c-line);
  --font-body: var(--f-sans); --font-heading: var(--f-serif);
  --radius: var(--r-ctl); --radius-lg: var(--r-panel); --shadow: none; --transition: .15s ease;
}

/* ── 3. Reset + base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-sans); background: var(--c-paper); color: var(--c-ink); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
main#main { display: block; }
img, svg { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

h1, h2, h3, h4 { color: var(--c-ink); text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; }
h1, h2 { font-family: var(--f-serif); font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; }
h2 { font-size: clamp(24px, 2.7vw, 30px); line-height: 1.18; }
h3 { font-family: var(--f-sans); font-size: 19px; font-weight: 600; line-height: 1.35; }
h4 { font-family: var(--f-sans); font-size: 17px; font-weight: 600; }
p, li { text-wrap: pretty; }
strong, b { font-weight: 600; }

/* Links: understreget i løbende tekst (WCAG 1.4.1), ikke i UI */
a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-red-press); text-decoration-thickness: 2px; }
.logo, .main-nav a, .nav-cta, .btn, .tb-preview-card, .footer-nav-group a, .inner-tool-dock, .tb-toc a, .tool-home-hero__link { text-decoration: none; }

/* ── 4. Layout ────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 20px; }
.tb-narrow { max-width: calc(var(--w-read) + 40px); }
.section { padding: var(--s-16) 0; }
.section + .section:not(.tb-section-alt) { padding-top: 0; }
.section + .section:not(.tb-section-alt) > .container { border-top: 1px solid var(--c-line); padding-top: 56px; }
.tb-section-alt { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tb-section-alt + .section { padding-top: var(--s-16); }
.tb-section-alt + .section > .container { border-top: 0; padding-top: 0; }
.tb-intro { padding-top: var(--s-10); padding-bottom: var(--s-4); }
.tb-intro + .section > .container { border-top: 0; padding-top: 0; }

/* Løbende indhold: ensartet vertikal rytme i alle guider/artikler (lav specificitet → inline style vinder) */
:where(.section .container, .tb-article-body) > :where(* + *) { margin-top: var(--s-4); }
:where(.section .container, .tb-article-body) > :where(h2) { margin-top: var(--s-12); }
:where(.section .container, .tb-article-body) > :where(h3) { margin-top: var(--s-8); }
:where(.section .container, .tb-article-body) > :where(h2 + *, h3 + *) { margin-top: var(--s-3); }
:where(.section .container) > :where(.section-label + h2) { margin-top: 0; }
:where(.section .container, .tb-article-body) > :where(:first-child) { margin-top: 0; }
:where(.section .container, .tb-article-body, .tb-faq-answer, .legal-section, .tb-callout) :where(ul:not([class]), ol:not([class])) { padding-left: 1.35em; display: flex; flex-direction: column; gap: 6px; }
:where(.section .container, .tb-article-body) :where(ul:not([class]) li::marker) { color: var(--c-red); }
:where(.section, .tb-article-body) :where(section[id]) > :where(* + *) { margin-top: var(--s-4); }

/* ── 5. Header + navigation (includes/header.php, footer.php-JS) ──── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; gap: var(--s-6); min-height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--c-ink); flex-shrink: 0; }
.logo:hover { color: var(--c-ink); }
.logo-icon { width: 28px; height: 28px; border-radius: var(--r-ctl); background: var(--c-red); color: #fff; display: grid; place-items: center; font: 600 17px/1 var(--f-serif); }
.logo-name { font: 700 18px/1 var(--f-sans); letter-spacing: -0.01em; white-space: nowrap; }
.logo-name .tld { color: var(--c-muted); font-weight: 500; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav > ul { list-style: none; display: flex; align-items: center; gap: var(--s-1); }
.main-nav .has-sub { position: relative; }
.main-nav .nav-parent { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--c-ink); font: 500 15px/1 var(--f-sans); cursor: pointer; white-space: nowrap; transition: background var(--transition); }
.main-nav .nav-parent:hover, .main-nav .has-sub.open > .nav-parent { background: var(--c-hover); }
.main-nav .nav-parent.active { box-shadow: inset 0 -2px 0 var(--c-red); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nav-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--transition); }
.has-sub.open > .nav-parent .nav-chevron { transform: translateY(2px) rotate(225deg); }

.main-nav .sub-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 200; min-width: 280px; list-style: none; flex-direction: column; gap: 2px; padding: var(--s-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-panel); box-shadow: 0 16px 40px rgba(22, 32, 46, .12); }
.main-nav .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover-bro over mellemrummet */
.main-nav .has-sub.open > .sub-menu { display: flex; }
.main-nav .has-mega.open > .mega-menu { display: grid; }
.main-nav .sub-right > .sub-menu { left: auto; right: 0; }
.main-nav .mega-menu { width: min(560px, calc(100vw - 40px)); left: -80px; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.mega-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-section + .mega-section { border-left: 1px solid var(--c-line); padding-left: var(--s-3); }
.mega-heading { margin: 0 0 var(--s-2); padding: 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.main-nav .sub-menu a { display: block; padding: 9px 10px; border-radius: var(--r-ctl); color: var(--c-ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
.main-nav .sub-menu a:hover { background: var(--c-hover); color: var(--c-ink); }
.main-nav .sub-menu a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--c-red); }
.main-nav .mega-section a strong, .main-nav .mega-section a small { display: block; }
.main-nav .mega-section a small { margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--c-muted); }

.nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 42px; padding: 0 18px; border-radius: var(--r-ctl); background: var(--c-red); color: #fff; font: 600 15px/1 var(--f-sans); white-space: nowrap; flex-shrink: 0; transition: background var(--transition); }
.nav-cta:hover, .nav-cta.active { background: var(--c-red-dark); color: #fff; }
.nav-cta:active { background: var(--c-red-press); }
.nav-cta--mobile { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-ctl); background: var(--c-surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav-toggle:hover { background: var(--c-hover); }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--c-ink); border-radius: 1px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (hover: hover) and (min-width: 960px) {
  .main-nav .has-sub:hover > .sub-menu { display: flex; }
  .main-nav .has-mega:hover > .mega-menu { display: grid; }
}
@media (max-width: 959px) {
  .header-inner { gap: var(--s-2); }
  .nav-cta--desktop { margin-left: auto; height: 44px; padding: 0 14px; }
  .nav-toggle { display: flex; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: 0 16px 32px rgba(22, 32, 46, .08); padding: var(--s-1) 20px var(--s-6); }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; max-width: 640px; margin: 0 auto; }
  .main-nav > ul > li { border-bottom: 1px solid var(--c-line); }
  .main-nav .nav-parent { width: 100%; height: 56px; padding: 0; justify-content: space-between; font-size: 17px; font-weight: 600; border-radius: 0; background: none !important; }
  .main-nav .nav-parent.active { box-shadow: none; color: var(--c-link); }
  .main-nav .sub-menu, .main-nav .mega-menu { position: static; width: auto; min-width: 0; padding: 0 0 var(--s-4); border: 0; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; }
  .main-nav .sub-menu::before { display: none; }
  .mega-section + .mega-section { border-left: 0; padding-left: 0; margin-top: var(--s-3); }
  .mega-heading { padding: 0; margin-bottom: var(--s-1); }
  .main-nav .sub-menu a { display: flex; align-items: center; min-height: 44px; padding: 0; font-weight: 400; font-size: 16px; }
  .main-nav .sub-menu a:hover { background: none; color: var(--c-link); }
  .main-nav .mega-section a { flex-direction: column; align-items: flex-start; justify-content: center; }
  .main-nav .mega-section a strong { font-weight: 400; }
  .main-nav .mega-section a small { display: none; }
}
@media (max-width: 374px) { .logo-name { font-size: 16px; } .nav-cta--desktop { padding: 0 10px; font-size: 14px; } }

/* ── 6. Brødkrumme (functions.php → tb_breadcrumb_html) ───────────── */
.tb-breadcrumb { padding: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); background: none; border: 0; }
.tb-breadcrumb .container { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.tb-breadcrumb a { color: var(--c-muted); }
.tb-breadcrumb a:hover { color: var(--c-ink); }
.tb-breadcrumb .sep { color: var(--c-line-strong); margin: 0; }
.tb-breadcrumb .container > span:last-child { color: var(--c-ink); }

/* ── 7. Sidehoveder ───────────────────────────────────────────────── */
/* 7a. Undersider: .page-hero (18 sider) + js/inner-pages.js' body.tb-inner-page */
.page-hero { padding: var(--s-6) 0 var(--s-10); border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink); }
.page-hero h1 { max-width: 860px; }
.page-hero p { max-width: 720px; margin-top: var(--s-3); font-size: 18px; line-height: 1.5; color: var(--c-ink-2); }
.page-hero .tb-article-meta { font-size: 14px; color: var(--c-muted); }
.page-hero + .section, .page-hero + .tb-intro { padding-top: var(--s-10); }
.section-label { display: block; margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--c-link); background: none; border: 0; border-radius: 0; }
.tb-article-meta { display: block; margin-top: var(--s-3); font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* 7b. Forside: .tb-hero.tool-home-hero (index.php) */
.tb-hero, .tool-home-hero { position: relative; padding: var(--s-12) 0 56px; background: none; color: var(--c-ink); border-bottom: 1px solid var(--c-line); overflow: visible; }
.tool-home-hero::before, .tool-home-hero::after, .tb-hero::after { content: none; display: none; }
.tool-home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: var(--s-16); align-items: start; }
.tool-home-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); min-width: 0; max-width: 560px; }
.tool-home-hero h1, .tb-hero h1 { margin: 0; font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.015em; color: var(--c-ink); }
.tb-hero-eyebrow { display: block; padding: 0; margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--c-muted); background: none; border-radius: 0; }
.tb-hero-lead { max-width: 600px; margin: 0; font-size: 19px; line-height: 1.5; color: var(--c-ink-2); }
.tb-trust-pills { display: block; margin: 0; padding: 12px 0; width: 100%; border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-line); font-size: 14.5px; line-height: 1.7; color: var(--c-ink-2); }
.tb-trust-pill { display: inline; padding: 0; font-size: inherit; font-weight: 500; color: inherit; background: none; border: 0; border-radius: 0; }
.tb-trust-pill + .tb-trust-pill::before { content: '·'; margin: 0 10px; color: var(--c-muted); }
.home-hero-facts { width: 100%; margin: 8px 0 0; border-top: 2px solid var(--c-ink); }
.home-hero-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.home-hero-facts dt, .home-hero-facts dd { margin: 0; font-size: 16px; line-height: 1.4; }
.home-hero-facts dd { text-align: right; font-weight: 650; color: var(--c-ink); }
.home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; width: 100%; }
.home-hero-source { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.home-hero-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.home-hero-source a:hover { color: var(--c-link); }
.tool-home-hero__link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 16px; margin: 0; border: 1px solid var(--c-ink); border-radius: var(--r-ctl); color: var(--c-ink); font-weight: 600; font-size: 15px; white-space: nowrap; }
.tool-home-hero__link:hover { background: var(--c-ink); color: #fff; }
.tool-home-tool { min-width: 0; }
@media (max-width: 999px) {
  .tb-hero, .tool-home-hero { padding: 28px 0 var(--s-10); }
  .tool-home-hero__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; gap: var(--s-8); }
}
@media (max-width: 520px) {
  .home-hero-facts > div { grid-template-columns: 1fr; gap: 3px; }
  .home-hero-facts dd { text-align: left; }
  .home-hero-actions { align-items: flex-start; flex-direction: column; }
}

/* ── 8. Tekst-komponenter ─────────────────────────────────────────── */
.tb-lead { font-size: 19px; line-height: 1.6; color: var(--c-ink-2); }
.tb-section-lead { max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--c-ink-2); }
.tb-source { font-size: 13.5px; line-height: 1.55; color: var(--c-muted); }
.tb-source a { color: var(--c-muted); }
.tb-source a:hover { color: var(--c-ink); }
.tb-note { font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.tb-warn { color: var(--c-red-dark); font-weight: 600; }
.body-text { font-size: 17px; line-height: 1.7; }

/* Indholdsfortegnelse (inline links adskilt af « · »; .is-active fra inner-pages.js) */
.tb-toc { margin-top: var(--s-6); padding: 14px 0; border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-line); font-size: 15px; line-height: 2.1; color: var(--c-line-strong); background: none; }
.tb-toc strong { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.tb-toc a { color: var(--c-ink); font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--c-line-strong); padding-bottom: 1px; }
.tb-toc a:hover { color: var(--c-link); border-bottom-color: currentColor; }
.tb-toc a.is-active, .tb-toc a[aria-current] { color: var(--c-link); border-bottom: 2px solid var(--c-red); }
@media (max-width: 599px) { .tb-toc a { white-space: normal; } }

/* Noter / callouts — blok-layout (sikkert for blandet inline-indhold) */
.tb-callout { position: relative; padding: 16px 18px 16px 52px; border: 0; border-radius: 8px; background: var(--c-sand); font-size: 16px; line-height: 1.6; color: var(--c-ink); box-shadow: none; }
.tb-callout::before { content: 'i'; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ink); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--f-sans); }
.tb-callout p + p, .tb-callout > * + * { margin-top: var(--s-2); }
.tb-callout-info { background: var(--c-sand); }
.tb-callout-warn { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.tb-callout-warn::before { content: '!'; background: var(--c-warn); }
.tb-callout-danger { background: var(--c-ink); color: #fff; }
.tb-callout-danger::before { content: '!'; background: #fff; color: var(--c-ink); }
.tb-callout-danger a { color: #fff; }
:where(.section .container, .tb-article-body) > .tb-callout { margin-top: var(--s-6); }
:where(.section .container, .tb-article-body) > .tb-callout + * { margin-top: var(--s-6); }

/* Alerts (kontakt, om-os). Teksten indeholder selv ✓/⚠️ — ingen ekstra glyf */
.alert { padding: 14px 16px; border: 0; border-radius: 8px; font-size: 15px; line-height: 1.55; }
.alert + .alert, .alert + form { margin-top: var(--s-4); }
.alert-success { background: var(--c-ok-bg); color: var(--c-ok-ink); }
.alert-warning { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.alert a { color: inherit; font-weight: 600; }

/* ── 9. Lister ────────────────────────────────────────────────────── */
.tb-sources-list, .tb-steps { list-style: none; padding: 0; border-top: 1px solid var(--c-line); }
.tb-sources-list > li, .tb-steps > li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--c-line); font-size: 16px; line-height: 1.55; background: none; border-radius: 0; margin: 0; }
.tb-sources-list > li::before, ul.tb-steps > li::before { content: ''; position: absolute; left: 3px; top: 20px; width: 6px; height: 6px; background: var(--c-red); border-radius: 1px; }
.tb-sources-list strong { color: var(--c-ink); }
ol.tb-steps { counter-reset: tb-step; }
ol.tb-steps > li { counter-increment: tb-step; padding-left: 40px; }
ol.tb-steps > li::before { content: counter(tb-step); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-ink); color: var(--c-ink); background: none; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transform: none; }

/* ── 10. Faktarække (.tb-fact-grid > .tb-fact — PHP + artikler.json) ─ */
.tb-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); column-gap: var(--s-6); border-top: 2px solid var(--c-ink); }
:where(.section .container, .tb-article-body) > .tb-fact-grid { margin-top: var(--s-6); }
:where(.section .container, .tb-article-body) > .tb-fact-grid + * { margin-top: var(--s-6); }
.tb-fact { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; box-shadow: none; text-align: left; }
.tb-fact-num { margin: 0; font: 600 30px/1.05 var(--f-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.tb-fact-label { font-size: 15px; line-height: 1.4; color: var(--c-ink-2); }

/* ── 11. Tabeller (.tb-table, .tb-fines-table, uklassede i artikler) ─ */
.tb-table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 0; border-radius: 0; background: none; box-shadow: none; }
:where(.section .container, .tb-article-body) > .tb-table-wrap { margin-top: var(--s-5); }
.tb-table, .tb-article-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; background: none; }
.tb-table caption:not(.visually-hidden) { caption-side: top; text-align: left; padding: 0 0 10px; font-weight: 600; }
.tb-table th, .tb-table td, .tb-article-body table :is(th, td) { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; background: none; }
.tb-table :is(th, td):last-child, .tb-article-body table :is(th, td):last-child { padding-right: 0; }
.tb-table thead th, .tb-article-body table thead th { padding-top: 0; padding-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); background: none; border-bottom: 2px solid var(--c-ink); position: static; white-space: nowrap; }
.tb-table tbody th { font-weight: 600; color: var(--c-ink); width: auto; }
.tb-table tbody tr:hover > *, .tb-article-body table tbody tr:hover > * { background: var(--c-tint); }
.tb-table tbody tr:last-child > * { border-bottom: 1px solid var(--c-line); }
.tb-fines-table td { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.tb-fines-table thead th:not(:first-child) { text-align: right; }
.tb-article-body table td { font-variant-numeric: tabular-nums; }
.tb-table .num, .tb-table td.tb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 599px) {
  .tb-table, .tb-article-body table { font-size: 15px; }
  .tb-table :is(th, td), .tb-article-body table :is(th, td) { padding: 11px 12px 11px 0; }
  .tb-table thead th, .tb-article-body table thead th { font-size: 12.5px; letter-spacing: .03em; white-space: normal; }
  .tb-fines-table { font-size: 14.5px; }
  .tb-fines-table :is(th, td) { padding-right: 8px; }
  .tb-fines-table tbody th { font-weight: 500; }
  /* Uindpakkede tabeller i artikler.json: egen vandret scroll i stedet for sideoverløb */
  .tb-article-body > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Opt-in: stablede rækker på mobil (kræver data-label på td) */
@media (max-width: 759px) {
  .tb-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tb-table--stack, .tb-table--stack tbody, .tb-table--stack tr, .tb-table--stack :is(th, td) { display: block; width: 100%; }
  .tb-table--stack { border-top: 2px solid var(--c-ink); }
  .tb-table--stack tr { padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .tb-table--stack :is(th, td) { padding: 2px 0; border: 0 !important; text-align: left !important; }
  .tb-table--stack td[data-label]::before { content: attr(data-label) ': '; color: var(--c-muted); }
}

/* ── 12. Regneeksempler (index.php: .tb-example-grid > article.tb-example) */
.tb-example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: var(--s-10); border-top: 2px solid var(--c-ink); }
:where(.section .container) > .tb-example-grid { margin-top: var(--s-6); }
.tb-example { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; box-shadow: none; }
.tb-example-h { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tb-example-tag { display: block; padding: 0; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-muted); background: none; border-radius: 0; }
.tb-example h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.tb-example-over { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tb-example p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--c-ink); }
.tb-example p strong { font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .tb-example-grid:has(> .tb-example) { grid-template-columns: 1fr; }
  .tb-example { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--s-8); }
  .tb-example > .tb-example-h { grid-column: 1; grid-row: 1; }
  .tb-example > .tb-example-over { grid-column: 1; grid-row: 2; }
  .tb-example > p:not(.tb-example-over) { grid-column: 2; }
  .tb-example > p:nth-of-type(2) { grid-row: 1; }
  .tb-example > p:nth-of-type(3) { grid-row: 2; }
}

/* ── 13. Link-rækker (.tb-preview-card i .tb-fact-grid / .tb-example-grid / alene) */
.tb-preview-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 32px 16px 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; box-shadow: none; color: var(--c-ink); transition: color var(--transition); }
.tb-preview-card::after { content: '→'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 18px; transition: transform var(--transition); }
.tb-preview-card:hover { color: var(--c-link); transform: none; box-shadow: none; border-color: var(--c-line); }
.tb-preview-card:hover::after { transform: translate(3px, -50%); }
.tb-preview-card h3 { margin: 0; font-size: 17px; color: inherit; }
.tb-preview-card p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--c-muted); }
.tb-preview-card .tb-example-tag { order: -1; }
.tb-preview-card .tb-preview-link { display: none; }
.tb-preview-card .tb-preview-link em { font-style: normal; }
:where(.section .container) > .tb-preview-card { border-top: 2px solid var(--c-ink); margin-top: var(--s-6); }
.tb-fact-grid:has(> .tb-preview-card), .tb-example-grid:has(> .tb-preview-card) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: var(--s-10); }
/* artikler.php: læsetid er gemt inde i .tb-preview-link → vis den som metadata */
.tb-preview-card:has(.tb-preview-link em) .tb-preview-link { display: block; order: 9; font-size: 13.5px; color: var(--c-muted); font-weight: 400; }
.tb-preview-card:has(.tb-preview-link em) .tb-preview-link { font-size: 0; }
.tb-preview-card:has(.tb-preview-link em) .tb-preview-link em { font-size: 13.5px; color: var(--c-muted) !important; }

/* ── 14. FAQ (<details class="tb-faq-item">) ─────────────────────── */
.tb-faq-list { display: block; border-top: 2px solid var(--c-ink); }
:where(.section .container, section[id]) > .tb-faq-list { margin-top: var(--s-5); }
.tb-faq-item { border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; overflow: visible; }
.tb-faq-item > summary { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); padding: 18px 0; list-style: none; cursor: pointer; font: 600 17px/1.4 var(--f-sans); color: var(--c-ink); user-select: auto; background: none; position: static; }
.tb-faq-item > summary::-webkit-details-marker { display: none; }
.tb-faq-item > summary::after { content: '+'; position: static; flex-shrink: 0; width: 26px; height: 26px; margin-top: -1px; border: 1px solid var(--c-line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 500; line-height: 1; color: var(--c-ink); transform: none; }
.tb-faq-item[open] > summary::after { content: '−'; }
.tb-faq-item > summary:hover { color: var(--c-link); background: none; }
.tb-faq-item > summary:focus-visible { outline-offset: 4px; }
.tb-faq-answer { padding: 0 44px 20px 0; }
.tb-faq-answer p { font-size: 16px; line-height: 1.65; color: var(--c-ink-2); }

/* ── 15. Knapper ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-ctl); font: 600 15px/1.2 var(--f-sans); cursor: pointer; transition: background var(--transition), color var(--transition); }
.btn-primary { background: var(--c-red); color: #fff; }
.btn-primary:hover { background: var(--c-red-dark); color: #fff; }
.btn-primary:active { background: var(--c-red-press); }
.btn-outline, .btn-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-outline:hover, .btn-secondary:hover { background: var(--c-ink); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-line); color: #6b6457; border-color: transparent; cursor: not-allowed; }

/* ── 16. Formularer (kontakt.php) ─────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); padding: var(--s-6); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-panel); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 15px; font-weight: 600; color: var(--c-ink); }
.form-group input, .form-group textarea, .form-group select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-ctl); background: var(--c-surface); color: var(--c-ink); font: 400 16px/1.4 var(--f-sans); transition: border-color var(--transition); }
.form-group input::placeholder, .form-group textarea::placeholder { color: #6b7280; }
.form-group input:hover, .form-group textarea:hover { border-color: var(--c-muted); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--c-ink); outline: 3px solid rgba(22, 32, 46, .18); outline-offset: 0; }
.form-group input:user-invalid, .form-group textarea:user-invalid, .form-group [aria-invalid="true"] { border: 2px solid var(--c-red-dark); }
.form-group textarea { min-height: 150px; resize: vertical; }
.contact-form .btn { align-self: flex-start; min-width: 160px; }
@media (max-width: 599px) { .contact-form { padding: var(--s-5) var(--s-4); } .contact-form .btn { align-self: stretch; } }
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); column-gap: var(--s-6); border-top: 2px solid var(--c-ink); }
.info-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; text-align: left; }
.info-card-icon { display: none; }
.info-card-label { font-size: 13px; color: var(--c-muted); text-transform: none; letter-spacing: 0; margin: 0; }
.info-card-value { font-size: 16px; font-weight: 600; color: var(--c-ink); }
a.info-card-value { color: var(--c-link); overflow-wrap: anywhere; }

/* ── 17. Juridiske sider (privatlivspolitik, vilkaar) ─────────────── */
.legal-section h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.legal-section p { font-size: 16px; line-height: 1.7; color: var(--c-ink-2); }
.legal-divider { height: 0; border: 0; border-top: 1px solid var(--c-line); margin: 28px 0; }
:where(.section .container) > .legal-divider { margin-top: 28px; }
:where(.section .container) > .legal-divider + * { margin-top: 0; }

/* ── 18. Artikel (artikel.php + artikler.json) ────────────────────── */
.tb-article-body { font-size: 17px; line-height: 1.7; }
.tb-article-body > .tb-lead:first-child { font-size: 19px; }
.tb-article-body h2 { font-size: clamp(22px, 2.5vw, 27px); }
.tb-review-note { display: grid; gap: 4px; margin: 0 0 var(--s-8); padding: 14px 16px; border-left: 3px solid var(--c-ink); background: var(--c-tint); }
.tb-review-note strong { font-size: 14px; }
.tb-review-note span { font-size: 14px; line-height: 1.5; color: var(--c-muted); }

/* ── Beslutningsstøtte og indholdsvejvisere ─────────────────────── */
.tb-decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: var(--s-6); border: 1px solid var(--c-line); background: var(--c-line); }
.tb-decision-card { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: start; gap: 4px 10px; padding: 18px; background: var(--c-surface); }
.tb-decision-n { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: 13px; font-weight: 700; }
.tb-decision-card h3 { margin: 2px 0 0; font-size: 17px; }
.tb-decision-card p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); }
.tb-next-actions { display: grid; gap: 12px; margin-top: var(--s-6); padding: 18px 20px; border: 1px solid var(--c-line); background: var(--c-tint); }
.tb-next-actions > div { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tb-next-actions a { font-size: 14.5px; font-weight: 600; }
.tb-situation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-10); margin: var(--s-6) 0 var(--s-12); border-top: 2px solid var(--c-ink); }
.tb-situation-list a { position: relative; display: grid; gap: 2px; padding: 16px 30px 16px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
.tb-situation-list a::after { content: '→'; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }
.tb-situation-list a:hover { color: var(--c-link); }
.tb-situation-list span { font-size: 14px; line-height: 1.45; color: var(--c-muted); }
.tb-card-date { order: 8; margin-top: 4px; font-size: 13px; color: var(--c-muted); }
.tb-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: var(--s-6) 0 var(--s-4); border: 1px solid var(--c-line); background: var(--c-line); }
.tb-method-grid > div { display: grid; gap: 5px; padding: 18px; background: var(--c-surface); }
.tb-method-grid strong { font-size: 15px; }
.tb-method-grid span { font-size: 14.5px; line-height: 1.55; color: var(--c-muted); }
@media (max-width: 699px) {
  .tb-decision-grid, .tb-situation-list, .tb-method-grid { grid-template-columns: 1fr; }
}

/* ── 19. Footer ───────────────────────────────────────────────────── */
.site-footer { background: var(--c-ink); color: #d9dde3; padding: 0; margin: 0; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 40px 48px; padding-top: 56px; padding-bottom: 40px; }
.footer-brand { min-width: 0; }
.footer-logo { display: block; margin: 0; color: #fff; font: 700 18px/1.3 var(--f-sans); }
.footer-tagline { margin-top: var(--s-3); max-width: 340px; font-size: 15px; line-height: 1.55; color: #c3c9d2; }
.footer-nav-h, .footer-nav-group h4 { margin: 0 0 var(--s-3); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a9b0bb; }
.footer-nav-group ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.footer-nav-group a { display: inline-flex; align-items: center; min-height: 32px; color: #fff; font-size: 15px; }
.footer-nav-group a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer :focus-visible { outline-color: #fff; }
.footer-bottom { border-top: 1px solid #2c3747; background: none; padding: 0; }
.footer-bottom p { padding: 20px 0 28px; font-size: 13.5px; line-height: 1.55; color: #a9b0bb; }
.footer-bottom a { color: #fff; text-decoration: underline; }
@media (max-width: 959px) { .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 599px) { .footer-inner { grid-template-columns: 1fr; gap: 32px; padding-top: var(--s-10); } }

/* ── 20. js/inner-pages.js: læse-progress + værktøjsdock ──────────── */
.inner-reading-progress { position: fixed; z-index: 9999; top: 0; left: 0; width: 0; height: 3px; background: var(--c-red); pointer-events: none; }
.inner-tool-dock { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 18px; border-radius: var(--r-ctl); background: var(--c-red); color: #fff; font: 600 15px/1 var(--f-sans); box-shadow: 0 8px 24px rgba(22, 32, 46, .22); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, background var(--transition); }
.inner-tool-dock::after { content: '→'; }
.inner-tool-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.inner-tool-dock:hover { background: var(--c-red-dark); color: #fff; }
.inner-tool-dock:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
@media (max-width: 599px) { .inner-tool-dock { right: 12px; bottom: 12px; } }
@media print { .inner-tool-dock, .inner-reading-progress, .site-header, .nav-toggle { display: none !important; } }

/* ── 21. Status (aldrig kun farve) ────────────────────────────────── */
.tb-status { font-weight: 600; }
.tb-status--ok { color: var(--c-ok); } .tb-status--ok::before { content: '✓ '; }
.tb-status--klip { color: var(--c-warn); } .tb-status--klip::before { content: '● '; }
.tb-status--bad { color: var(--c-red-dark); } .tb-status--bad::before { content: '! '; }
.tb-status--severe { color: var(--c-red-dark); } .tb-status--severe::before { content: '✕ '; }
.tb-status--:not([class*="--ok"]) { color: var(--c-muted); }

/* ═══ 22. Fartbøde-beregner (includes/beregner-widget.php) ═══════════ */
.fb-calc { max-width: none; margin: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-panel); overflow: hidden; box-shadow: none; container-type: inline-size; color: var(--c-ink); font-family: var(--f-sans); }
:where(.section .container) > .fb-calc { margin-top: var(--s-6); }
:where(.section .container) > .fb-calc + * { margin-top: var(--s-12); }
.fb-calc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink); }
.fb-calc__head h2 { margin: 0; font: 600 19px/1.3 var(--f-sans); letter-spacing: -0.005em; color: var(--c-ink); }
.fb-calc__head p { margin: 0; font-size: 13.5px; color: var(--c-muted); opacity: 1; white-space: nowrap; }
.fb-calc__grid { display: flex; flex-direction: column; }
@container (min-width: 820px) {
  .fb-calc--full .fb-calc__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .fb-calc--full .fb-result { border-top: 0; border-left: 1px solid var(--c-line); }
}
.fb-calc__body { display: flex; flex-direction: column; gap: 22px; padding: 20px; min-width: 0; }
.fb-step { border: 0; min-width: 0; }
.fb-step > legend, .fb-step > label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 600; }
.fb-step-n { font-size: 13px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fb-hint { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); }
.fb-road-label { display: block; margin: 14px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
.fb-road { width: 100%; min-height: 46px; padding: 0 40px 0 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-ctl); background: var(--c-surface); color: var(--c-ink); font: 500 15px/1.3 var(--f-sans); }
.fb-road:focus { border-color: var(--c-ink); outline: 3px solid rgba(22, 32, 46, .18); }
.fb-zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fb-zones input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fb-zones label { height: 48px; display: grid; place-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--r-ctl); background: var(--c-surface); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; transition: border-color var(--transition); }
.fb-zones label:hover { border-color: var(--c-ink); }
.fb-zones input:checked + label { background: var(--c-ink); border: 2px solid var(--c-ink); color: #fff; }
.fb-zones input:focus-visible + label { outline: var(--focus-ring); outline-offset: 2px; }
.fb-speed { display: flex; align-items: stretch; gap: 6px; }
.fb-speed button { width: 52px; flex-shrink: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-ctl); background: var(--c-surface); color: var(--c-ink); font: 500 22px/1 var(--f-sans); cursor: pointer; touch-action: manipulation; }
.fb-speed button:hover { background: var(--c-hover); }
.fb-speed button:active { background: #e9e4da; }
.fb-speed__field { position: relative; flex: 1; min-width: 0; }
.fb-speed__field input { width: 100%; height: 56px; padding: 0 64px 0 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-ctl); background: var(--c-surface); font: 600 24px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.fb-speed__field input::placeholder { font-weight: 400; font-size: 18px; color: #6b7280; }
.fb-speed__field input:focus { border-color: var(--c-ink); outline: 3px solid rgba(22, 32, 46, .18); outline-offset: 0; }
.fb-speed__field span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--c-muted); pointer-events: none; }
.fb-opts { border-top: 1px solid var(--c-line); }
.fb-opts > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.fb-opts > summary::-webkit-details-marker { display: none; }
.fb-opts > summary > span[aria-hidden] { transition: transform var(--transition); }
.fb-opts[open] > summary > span[aria-hidden] { transform: rotate(180deg); }
.fb-opts > summary small { font-weight: 400; font-size: 15px; color: var(--c-muted); }
.fb-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: 4px; }
.fb-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-ctl); cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--c-ink); }
.fb-check:hover { border-color: var(--c-ink); }
.fb-check:has(input:checked) { border: 2px solid var(--c-ink); padding: 11px 13px; background: var(--c-paper); }
.fb-check input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--c-ink); }
.fb-check small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--c-muted); }
.fb-result { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 20px; background: var(--c-tint); border-top: 1px solid var(--c-line); min-width: 0; }
.fb-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.fb-over { font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fb-total { margin: 0; padding: 0; border: 0; font-size: clamp(36px, 9cqi, 44px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fb-conseq { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; }
.fb-conseq > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--c-surface); }
.fb-conseq dt { font-size: 13px; color: var(--c-muted); }
.fb-conseq dd { font-size: 17px; font-weight: 600; }
.fb-vanvid { display: flex; gap: 12px; margin: 0; padding: 12px 14px; background: var(--c-ink); color: #fff; border: 0; border-radius: 8px; font-size: 15px; font-weight: 400; line-height: 1.5; }
.fb-vanvid p { color: #fff; }
.fb-vanvid a { color: #fff; }
.fb-lines { font-size: 15px; }
.fb-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--c-line-soft); }
.fb-lines dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-lines > .fb-lines__total { margin-top: -1px; border-bottom: 0; border-top: 2px solid var(--c-ink); font-weight: 700; }
.fb-scale { position: relative; }
.fb-scale.has-marker { padding-top: 30px; }
.fb-scale__bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.fb-scale__bar span { min-width: 6px; }
.fb-scale__marker { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transition: left .25s ease; }
.fb-scale__marker b { padding: 2px 6px; border-radius: 4px; background: var(--c-ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fb-scale__marker i { width: 2px; height: 10px; background: var(--c-ink); }
.fb-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.fb-legend li { display: flex; align-items: baseline; gap: 10px; }
.fb-legend li > span:nth-child(2) { flex: 1; min-width: 0; }
.fb-legend li > span:last-child { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-legend i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 2px; transform: translateY(1px); }
.fb-seg-b { background: #d8d2c6; } .fb-seg-k { background: #e0a53a; } .fb-seg-bf { background: #d9707f; } .fb-seg-uf { background: #8a0b20; }
.fb-disclaimer { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
/* Beregner i forside-hero */
.tool-home-tool .fb-calc { width: 100%; }
/* Beregner på /fartboede-beregner ligger i .tb-narrow — giv den plads til 2 kolonner */
.section .tb-narrow > .fb-calc--full { width: min(1080px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }

/* ═══ 23. Opt-in komponenter (ingen produktionsside kræver dem endnu) ═ */
.tb-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--s-3); font-size: 14px; color: var(--c-muted); }
.tb-meta a { color: var(--c-muted); }
.tb-answer { margin-top: var(--s-6); padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-line); border-top: 3px solid var(--c-ink); border-radius: 0 0 8px 8px; }
.tb-answer-h { margin: 0 0 var(--s-2); font: 600 13px/1.4 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.tb-quote { padding-left: 20px; border-left: 3px solid var(--c-ink); }
.tb-quote > p:first-child { font: 500 21px/1.45 var(--f-serif); }

/* ═══ 24. Originale grafiske vejledninger ══════════════════════════ */
.guide-graphic { margin: var(--s-8) 0; overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-panel); }
.guide-graphic figcaption { display: flex; flex-direction: column; gap: 2px; padding: 17px 20px; border-bottom: 1px solid var(--c-line); background: var(--c-tint); }
.guide-graphic figcaption strong { font: 600 19px/1.35 var(--f-sans); }
.guide-graphic figcaption span { color: var(--c-muted); font-size: 14px; line-height: 1.45; }
.process-flow { counter-reset: none; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); padding: 22px 18px; }
.process-flow li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 0 12px; }
.process-flow li:not(:last-child)::after { content: '→'; position: absolute; top: 10px; right: -7px; color: var(--c-red); font-weight: 700; }
.process-no { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--c-red); color: #fff; font-weight: 700; }
.process-flow strong, .process-flow small { display: block; }
.process-flow strong { font-size: 15px; line-height: 1.35; }
.process-flow small { margin-top: 5px; color: var(--c-muted); font-size: 13px; line-height: 1.45; }
.notice-anatomy { display: grid; grid-template-columns: minmax(180px,.75fr) minmax(0,1.25fr); gap: 28px; align-items: center; padding: 24px; }
.notice-paper { position: relative; min-height: 310px; padding: 38px 26px; border: 1px solid var(--c-line-strong); border-radius: 4px; background: #fff; box-shadow: 0 8px 24px rgba(22,32,46,.08); }
.notice-line { display: block; width: 100%; height: 7px; margin-bottom: 22px; border-radius: 4px; background: var(--c-line); }
.notice-line--title { width: 65%; height: 13px; background: var(--c-ink); }.notice-line--short { width: 55%; }.notice-line--amount { width: 42%; height: 12px; margin-left: auto; background: var(--c-red); }
.notice-pin { position: absolute; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--c-red); color: #fff; font: 700 13px/1 var(--f-sans); box-shadow: 0 0 0 4px #fff; }
.notice-pin--1 { top: 20px; right: 22px; }.notice-pin--2 { top: 82px; left: 12px; }.notice-pin--3 { top: 142px; right: 18px; }.notice-pin--4 { top: 205px; left: 24px; }.notice-pin--5 { bottom: 24px; right: 48px; }
.notice-anatomy ol { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.notice-anatomy li { display: flex; gap: 11px; align-items: flex-start; }
.notice-anatomy li > b { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--c-red); color: #fff; font-size: 12px; }
.notice-anatomy li strong, .notice-anatomy li small { display: block; }.notice-anatomy li strong { font-size: 15px; }.notice-anatomy li small { color: var(--c-muted); font-size: 13.5px; line-height: 1.4; }
.licence-ladder { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ladder-step { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(180px,1fr) minmax(220px,1.4fr); gap: 18px; align-items: center; padding: 13px 15px; border-left: 7px solid var(--c-line-strong); background: var(--c-tint); }
.ladder-step span { color: var(--c-muted); font-size: 13.5px; font-weight: 600; }.ladder-step strong { font-size: 16px; }.ladder-step small { color: var(--c-muted); font-size: 13px; line-height: 1.4; }
.ladder-step--clip { border-color: #e0a53a; }.ladder-step--conditional { border-color: #d9707f; }.ladder-step--unconditional { border-color: #8a0b20; }
.clip-timeline-static { padding: 28px 28px 24px; }.clip-axis { position: relative; height: 28px; margin: 0 10px; color: var(--c-muted); font-size: 12px; }.clip-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }.clip-axis span:first-child { transform: none; }.clip-axis span:last-child { transform: translateX(-100%); }
.clip-track { display: flex; justify-content: space-between; position: relative; height: 22px; margin: 0 10px; }.clip-track::before { content:''; position:absolute; top:8px; left:0; right:0; height:6px; border-radius:3px; background: linear-gradient(90deg,var(--c-red),var(--c-red-dark)); }.clip-track i { position:relative; z-index:1; width:20px; height:20px; border:5px solid var(--c-red); border-radius:50%; background:#fff; }.clip-timeline-static p { display:flex; justify-content:space-between; gap:20px; margin-top:8px; font-size:14px; }.clip-timeline-static p span { color:var(--c-muted); text-align:right; }
.speed-chain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:stretch; padding:24px; }.speed-chain > div { padding:18px; border:1px solid var(--c-line); border-radius:8px; background:var(--c-tint); }.speed-chain > div span { width:28px; height:28px; display:grid; place-items:center; margin-bottom:12px; border-radius:50%; background:var(--c-ink); color:#fff; font-size:13px; font-weight:700; }.speed-chain strong,.speed-chain small { display:block; }.speed-chain small { margin-top:6px; color:var(--c-muted); font-size:13px; line-height:1.45; }.speed-chain > i { align-self:center; color:var(--c-red); font-style:normal; font-weight:700; }
.tool-promo { display:flex; align-items:center; gap:15px; margin:24px 0; padding:17px 18px; border:1px solid var(--c-line-strong); border-left:4px solid var(--c-red); border-radius:var(--r-panel); background:var(--c-surface); color:var(--c-ink); text-decoration:none; }.tool-promo:hover { border-color:var(--c-red); color:var(--c-ink); }.tool-promo__icon { width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--c-ink); color:#fff; font-weight:700; font-size:13px; }.tool-promo > span:nth-child(2) { flex:1; }.tool-promo strong,.tool-promo small { display:block; }.tool-promo small { margin-top:3px; color:var(--c-muted); font-size:14px; line-height:1.4; }.tool-promo > b { color:var(--c-red); font-size:22px; }
.fb-next a { display:flex; flex-direction:column; gap:2px; padding:13px 14px; border:1px solid var(--c-line); border-left:4px solid var(--c-red); border-radius:7px; background:var(--c-surface); color:var(--c-ink); text-decoration:none; }.fb-next a span { color:var(--c-muted); font-size:13px; line-height:1.4; }.fb-next a b { margin-top:5px; color:var(--c-link); font-size:13.5px; }

/* ═══ 25. Klipberegner ════════════════════════════════════════════ */
.clip-tool { width:min(1040px,calc(100vw - 40px)); margin:var(--s-8) 0 var(--s-12) 50%; transform:translateX(-50%); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); overflow:hidden; border:1px solid var(--c-line); border-radius:var(--r-panel); background:var(--c-surface); }
.clip-tool__form { display:flex; flex-direction:column; gap:24px; padding:24px; }.clip-tool__form fieldset { border:0; }.clip-tool__form legend,.clip-field > label { display:block; margin-bottom:6px; font-weight:600; }.clip-tool__form legend + p,.clip-field p { margin:0 0 12px; color:var(--c-muted); font-size:13.5px; }.clip-field label small { color:var(--c-muted); font-weight:400; }.clip-field > input,.clip-date-list input { width:100%; min-height:46px; padding:0 12px; border:1px solid var(--c-line-strong); border-radius:var(--r-ctl); background:#fff; }.clip-date-list { display:flex; flex-direction:column; gap:9px; }.clip-date-list label { display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center; font-size:14px; font-weight:600; }.clip-add { margin-top:10px; border:0; background:transparent; color:var(--c-link); font-weight:600; cursor:pointer; }.clip-tool__result { min-width:0; padding:26px; border-left:1px solid var(--c-line); background:var(--c-tint); }.clip-tool__result > * + * { margin-top:14px; }.clip-count { display:flex; align-items:baseline; gap:10px; padding:15px; border:1px solid var(--c-line); border-radius:8px; background:#fff; }.clip-count strong { font-size:38px; line-height:1; }.clip-count span { color:var(--c-muted); }.clip-alert { display:flex; flex-direction:column; gap:3px; padding:13px 15px; border-left:4px solid var(--c-warn); background:var(--c-warn-bg); color:var(--c-warn-ink); }.clip-alert--danger { border-color:var(--c-red); background:#f9e7e9; color:#6f0a1b; }.clip-alert span { font-size:13.5px; line-height:1.45; }.clip-result-list { list-style:none; display:flex; flex-direction:column; gap:0; padding:0; }.clip-result-list li { position:relative; display:grid; grid-template-columns:18px 1fr auto; gap:10px; padding:12px 0; border-bottom:1px solid var(--c-line); }.clip-result-list li:last-child { border:0; }.clip-dot { width:12px; height:12px; margin-top:5px; border-radius:50%; background:var(--c-red); }.clip-result-list .is-expired .clip-dot { background:var(--c-line-strong); }.clip-result-list strong,.clip-result-list small { display:block; }.clip-result-list small { margin-top:2px; color:var(--c-muted); font-size:13px; line-height:1.4; }.clip-result-list li > b { color:var(--c-ok); font-size:13px; }.clip-result-list .is-expired > b { color:var(--c-muted); }

@media (max-width: 760px) {
  .process-flow { grid-template-columns:1fr; gap:0; }.process-flow li { flex-direction:row; padding:11px 4px; border-bottom:1px solid var(--c-line); }.process-flow li:last-child { border:0; }.process-flow li:not(:last-child)::after { content:'↓'; top:auto; bottom:-13px; right:auto; left:15px; z-index:2; background:#fff; }
  .notice-anatomy,.clip-tool { grid-template-columns:1fr; }.notice-paper { min-height:260px; }.ladder-step { grid-template-columns:1fr; gap:3px; }.speed-chain { grid-template-columns:1fr; }.speed-chain > i { transform:rotate(90deg); justify-self:center; }
  .clip-tool__result { border-left:0; border-top:1px solid var(--c-line); }.clip-tool { width:calc(100vw - 24px); }.clip-timeline-static { padding-left:18px; padding-right:18px; }.clip-axis { font-size:10px; }.clip-timeline-static p { flex-direction:column; gap:3px; }.clip-timeline-static p span { text-align:left; }
}

/* ═══ 26. Brevguide, tjeklister og synlig faglig kontrol ═══════════ */
.letter-tool { width:min(1040px,calc(100vw - 40px)); margin:var(--s-8) 0 var(--s-12) 50%; transform:translateX(-50%); display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); overflow:hidden; border:1px solid var(--c-line); border-radius:var(--r-panel); background:var(--c-surface); }
.letter-tool__choose,.letter-result { padding:24px; }.letter-tool__choose > * + *,.letter-result > * + * { margin-top:14px; }.letter-result { border-left:1px solid var(--c-line); background:var(--c-tint); }
.letter-options { display:flex; flex-direction:column; gap:8px; }.letter-options label { display:flex; min-height:60px; padding:12px 13px; border:1px solid var(--c-line); border-radius:var(--r-ctl); cursor:pointer; }.letter-options label:hover { border-color:var(--c-ink); }.letter-options label:has(input:checked) { padding:11px 12px; border:2px solid var(--c-ink); background:var(--c-paper); }.letter-options input { width:19px; height:19px; margin:2px 11px 0 0; accent-color:var(--c-ink); }.letter-options b,.letter-options small { display:block; }.letter-options b { font-size:15px; }.letter-options small { margin-top:2px; color:var(--c-muted); font-size:13px; line-height:1.4; }
.letter-steps { list-style:none; counter-reset:letter-step; display:flex; flex-direction:column; gap:10px; padding:0; }.letter-steps li { counter-increment:letter-step; display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; font-size:14px; line-height:1.5; }.letter-steps li::before { content:counter(letter-step); width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--c-ink); color:#fff; font-size:12px; font-weight:700; }
.letter-links { display:flex; flex-wrap:wrap; gap:8px; }.letter-links a { padding:8px 10px; border:1px solid var(--c-line-strong); border-radius:var(--r-ctl); background:#fff; color:var(--c-link); font-size:13.5px; font-weight:600; text-decoration:none; }.letter-links a:hover { border-color:var(--c-red); }
.print-checklist { margin:var(--s-8) 0; padding:22px; border:1px solid var(--c-line); border-radius:var(--r-panel); background:var(--c-surface); }.print-checklist__head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:10px; }.print-checklist__head h2 { margin:0; }.check-box-list { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; margin-top:16px; padding:0; }.check-box-list li { position:relative; min-height:28px; padding-left:32px; font-size:14.5px; line-height:1.5; }.check-box-list li::before { content:''; position:absolute; left:0; top:2px; width:19px; height:19px; border:2px solid var(--c-line-strong); border-radius:3px; background:#fff; }
.content-review { margin:var(--s-10) 0 0; padding:18px 20px; border:1px solid var(--c-line); border-top:3px solid var(--c-ok); border-radius:0 0 var(--r-panel) var(--r-panel); background:var(--c-surface); font-size:13.5px; color:var(--c-muted); }.content-review > div { display:flex; align-items:flex-start; gap:12px; }.content-review > div > span { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--c-ok-bg); color:var(--c-ok); font-weight:700; }.content-review strong,.content-review small { display:block; }.content-review small { margin-top:2px; font-size:13px; font-weight:400; }.content-review > p { margin-top:8px; }
.article-supplement { margin-top:var(--s-10); padding-top:var(--s-8); border-top:1px solid var(--c-line); }
.article-supplement > h2:first-child { margin-top:0; }
.change-log { display:flex; flex-direction:column; margin-top:16px; border-top:1px solid var(--c-line); }.change-log > div { display:grid; grid-template-columns:120px 1fr; gap:18px; padding:12px 0; border-bottom:1px solid var(--c-line); }.change-log time { color:var(--c-muted); font-size:13.5px; font-variant-numeric:tabular-nums; }.change-log p { font-size:14px; }
.process-flow--four { grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:760px) {
  .letter-tool { width:calc(100vw - 24px); grid-template-columns:1fr; }.letter-result { border-left:0; border-top:1px solid var(--c-line); }.check-box-list { grid-template-columns:1fr; }.print-checklist__head { align-items:flex-start; flex-direction:column; }.process-flow--four { grid-template-columns:1fr; }.change-log > div { grid-template-columns:1fr; gap:2px; }
}

@media print {
  .print-checklist-page { background:#fff; font-size:12pt; }.print-checklist-page .site-header,.print-checklist-page .site-footer,.print-checklist-page .page-hero,.print-checklist-page .tb-breadcrumb,.print-checklist-page .inner-tool-dock,.print-checklist-page .inner-reading-progress,.print-checklist-page .letter-tool,.print-checklist-page .content-review,.print-checklist-page .tb-example-grid,.print-checklist-page .print-checklist__head .btn { display:none !important; }
  .print-checklist-page .section { padding:0; }.print-checklist-page .section .container { max-width:none; padding:0; }.print-checklist-page .section .container:has(> .print-checklist) > *:not(.print-checklist) { display:none !important; }.print-checklist-page .print-checklist { display:block !important; margin:0; padding:0; border:0; }.print-checklist-page .print-checklist__head { display:block; }.print-checklist-page .check-box-list { grid-template-columns:1fr; }.print-checklist-page .check-box-list li { break-inside:avoid; }
}