/* Teoribogens læser — forsiden, emnesiden, søgevinduet og kortet på
 * prøveoversigten.
 *
 * Selve bogens indhold (.tb-indhold: bokse, tavler, Kort fortalt) står i
 * teoribog-indhold.css, som deles med vinduet fra forklaringerne. Her står
 * rammen omkring: indholdsfortegnelsen, søgevinduet, artiklens hoved og
 * bund og lysboksen.
 *
 * Formen er rolig med vilje (Martins ønske, sep. 2026): én hvid flade uden
 * kort i kort, masser af luft, hårfine streger, ingen pynt-ikoner. Bredden:
 * teksten står i en spalte på 720 px (18 px brødtekst, ca. 70 tegn pr.
 * linje, som er det, øjet læser bedst), mens illustrationer og tabeller må
 * gå ud til 880 px, så detaljerne kan ses uden at forstørre.
 *
 * Alle farver er kundens egne (--fs-*), blandet med color-mix, så siden
 * både følger kundens farveskema og skifter med i mørk tilstand, hvor
 * tokens får nye værdier under .fs-dark. Skriften er kundens (arves fra
 * body). Alle placeringer er logiske (inline-start/end), så siden vender af
 * sig selv på arabisk.
 *
 * Husets regler: ingen farvet venstrekant (det aktive emne markeres med en
 * blød flade og kundens farve), og ingen .fs-btn — knapperne her har deres
 * egne højder.
 */

.tb-side {
  /* Hvor de klæbende spalter stopper. Topbaren klæber kun, når kunden har
     valgt det (body.fs-sticky); ellers ruller den væk, og så kan spalterne
     gå helt op. */
  --tb-top: 28px;
  --tb-bjaelke: 0px;
  --tb-toc-w: 336px;
  --tb-paa-w: 200px;
  --tb-tekst-w: 720px;
  --tb-bred-w: 880px;
  --tb-accent: var(--fs-navy);
  --tb-streg: color-mix(in srgb, var(--fs-text) 11%, transparent);
  --tb-hover: color-mix(in srgb, var(--fs-text) 5%, transparent);
  --tb-flade: color-mix(in srgb, var(--fs-text) 4.5%, var(--fs-surface));
  --tb-blod: color-mix(in srgb, var(--fs-navy) 9%, var(--fs-surface));
  background: var(--fs-surface);
}
.fs-sticky .tb-side { --tb-top: calc(var(--fs-bar-h) + 28px); --tb-bjaelke: var(--fs-bar-h); }
/* Kundens accent kan være for mørk til tekst på mørk flade — en lysning
   af den samme farve kan altid læses */
.fs-dark .tb-side {
  --tb-accent: color-mix(in srgb, var(--fs-navy) 55%, #ffffff);
  --tb-blod: color-mix(in srgb, var(--fs-navy) 22%, var(--fs-surface));
}

.tb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tb-side :focus-visible,
.tb-soegvindue :focus-visible {
  outline: 2px solid var(--tb-accent, var(--fs-navy));
  outline-offset: 2px;
}

/* Pilene peger den vej, man læser: det klarer proeve.css' [dir="rtl"]-liste
   på ::before. Vend dem IKKE også her på <i> — to spejlinger ophæver
   hinanden. */

/* ---------- Forhåndsvisning (kig) ---------- */

.tb-kig {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 40px);
  max-width: 1560px;
  margin: 16px auto 0;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--tb-flade);
  color: var(--fs-text-soft);
  font-size: 13.5px;
  line-height: 1.45;
}
.tb-kig-gitter { max-width: calc(var(--fs-maxw) - 2 * var(--fs-kant)); }

/* ---------- Fremdrift: en tynd streg ---------- */

.tb-bar {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--tb-streg, color-mix(in srgb, var(--fs-text) 11%, transparent));
  overflow: hidden;
}
.tb-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fs-navy);
  transition: width .6s cubic-bezier(.2, .8, .3, 1);
}

/* Læst: et lille flueben i enden af rækken — intet, før emnet er læst */
.tb-flueben {
  flex: none;
  display: inline-grid;
  place-items: center;
  color: var(--fs-green);
  font-size: 15px;
  line-height: 1;
  visibility: hidden;
}
.er-laest > .tb-flueben { visibility: visible; }
.tb-flueben.er-ny { animation: tb-pop .45s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes tb-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Søgeknappen ---------- */

.tb-soegknap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tb-streg);
  border-radius: 999px;
  background: var(--fs-surface);
  color: var(--fs-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tb-soegknap:hover { background: var(--tb-flade); border-color: color-mix(in srgb, var(--fs-text) 18%, transparent); }
.tb-soegknap:focus-visible { outline: 2px solid var(--tb-accent, var(--fs-navy)); outline-offset: 2px; }
.tb-soegknap .bi-search { font-size: 13px; }

/* Forsidens udgave: samme knap, blot større og med hele teksten */
.tb-soegknap-stor {
  height: 46px;
  padding: 0 22px;
  gap: 10px;
  font-size: 16px;
}
.tb-soegknap-stor .bi-search { font-size: 16px; }

/* ---------- Søgevinduet ---------- */

.tb-soegvindue {
  --tb-accent: var(--fs-navy);
  --tb-streg: color-mix(in srgb, var(--fs-text) 11%, transparent);
  --tb-flade: color-mix(in srgb, var(--fs-text) 4.5%, var(--fs-surface));
  --tb-blod: color-mix(in srgb, var(--fs-navy) 9%, var(--fs-surface));
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 24px 24px;
  background: rgba(15, 23, 33, 0.34);
  animation: tb-fade .18s ease-out;
}
.fs-dark .tb-soegvindue {
  --tb-accent: color-mix(in srgb, var(--fs-navy) 55%, #ffffff);
  --tb-blod: color-mix(in srgb, var(--fs-navy) 22%, var(--fs-surface));
  background: rgba(0, 0, 0, 0.55);
}
.tb-soegvindue[hidden] { display: none; }
.tb-soegvindue-panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(76vh, 780px);
  border-radius: 18px;
  background: var(--fs-surface);
  color: var(--fs-text);
  box-shadow: 0 0 0 1px var(--tb-streg), 0 30px 80px rgba(15, 23, 33, 0.22);
  overflow: hidden;
  animation: tb-op .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes tb-op { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.tb-soegvindue-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 14px 16px;
  padding-inline: 16px 10px;
  border-bottom: 1px solid var(--tb-streg);
}
.tb-soeg-felt { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.tb-soeg-felt > .bi-search {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--fs-text-soft);
  font-size: 17px;
  pointer-events: none;
}
.tb-soeg-felt input {
  width: 100%;
  height: 48px;
  padding-block: 0;
  padding-inline: 44px 44px;
  border: 0;
  border-radius: 12px;
  background: var(--tb-flade);
  color: var(--fs-text);
  font: inherit;
  font-size: 18px;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .15s;
}
.tb-soeg-felt input::placeholder { color: var(--fs-text-soft); opacity: 1; }
/* Feltet har altid fokus i vinduet: en tynd ring er nok (ikke to oven i
   hinanden — den fælles :focus-visible-ring slås fra her) */
.tb-soeg-felt input:focus,
.tb-soeg-felt input:focus-visible { outline: none; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tb-accent) 38%, transparent); }
/* Browserens eget kryds står midt i feltet og ser forskelligt ud fra
   browser til browser — vores eget står helt ude i enden */
.tb-soeg-felt input::-webkit-search-decoration,
.tb-soeg-felt input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.tb-soeg-ryd {
  position: absolute;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--fs-text-soft) 80%, transparent);
  font-size: 17px;
  cursor: pointer;
}
.tb-soeg-ryd:hover { color: var(--fs-text); }
.tb-soeg-ryd[hidden] { display: none; }
.tb-soegvindue-luk {
  flex: none;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tb-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.tb-soegvindue-luk:hover { background: var(--tb-flade); }

.tb-soeg-res { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.tb-soeg-res[hidden] { display: none; }
.tb-soeg-liste { list-style: none; margin: 0; padding: 0; }
.tb-soeg-hit {
  display: block;
  padding: 13px 14px 14px;
  border-radius: 12px;
  color: var(--fs-text);
  cursor: pointer;
}
.tb-soeg-hit + .tb-soeg-hit { margin-top: 2px; }
.tb-soeg-hit:hover { background: var(--tb-flade); }
.tb-soeg-hit[aria-selected="true"] { background: var(--tb-blod); }
.tb-soeg-hit-sted { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--fs-text-soft); }
.tb-soeg-hit-titel { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.tb-soeg-hit[aria-selected="true"] .tb-soeg-hit-titel { color: var(--tb-accent); }
.tb-soeg-hit-tekst {
  display: -webkit-box;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-text-soft);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Ordet fremhæves KUN her i listen — aldrig inde i emnet */
.tb-soeg-res mark {
  background: color-mix(in srgb, var(--fs-warn, #b07d18) 24%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.tb-soeg-ingen { margin: 0; padding: 32px 16px; text-align: center; font-size: 15px; color: var(--fs-text-soft); }

@media (max-width: 640px) {
  .tb-soegvindue { padding: 0; align-items: stretch; }
  .tb-soegvindue-panel { width: 100%; max-height: none; border-radius: 0; box-shadow: none; }
  .tb-soegvindue-top { padding: 10px 8px 10px 12px; padding-inline: 12px 6px; }
  .tb-soeg-felt input { height: 44px; font-size: 17px; }
}

/* Et valgt søgeresultat: afsnittet med ordet lyser kort op og falder
   tilbage af sig selv. Ingen varig markering i teksten. */
.tb-indhold .tb-glimt {
  border-radius: 6px;
  animation: tb-glimt 1.6s ease-out 1 both;
}
@keyframes tb-glimt {
  0%, 25% { background-color: color-mix(in srgb, var(--fs-navy) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--fs-navy) 12%, transparent); }
  100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}

/* ---------- Læseren: rammen ---------- */

.tb-laeser {
  display: grid;
  grid-template-columns: var(--tb-toc-w) minmax(0, 1fr);
  column-gap: clamp(40px, 3.4vw, 72px);
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px clamp(20px, 3vw, 48px) 0;
}
.tb-paasiden { display: none; }
@media (min-width: 1280px) {
  /* Spalten til "På denne side" står der altid — også når emnet har for
     få overskrifter til listen. Ellers hopper tekstspalten sidelæns, hver
     gang eleven går fra et emne med listen til et uden. */
  .tb-laeser { grid-template-columns: var(--tb-toc-w) minmax(0, 1fr) var(--tb-paa-w); }
  .tb-paasiden { display: block; position: sticky; top: var(--tb-top); }
  .tb-uden-paasiden .tb-paasiden { visibility: hidden; }
}
/* Luften under artiklen står i midterspalten, ikke under rammen: så når
   gitteret helt ned, og de klæbende spalter bliver stående, når eleven
   ruller til bunden, i stedet for at blive skubbet op under topbaren */
.tb-midte { min-width: 0; padding-bottom: 128px; }

/* ---------- Indholdsfortegnelsen ---------- */

/* Et roligt træ som i Apples sidepaneler: foldepilen står forrest i sin
   egen smalle kolonne, og hvert niveau rykker netop én kolonne ind, så
   kapitlets pil står under modulets tekst. Tre niveauer, skilt ad med
   skrift, ikke med tal, ikoner eller kanter: modulet i halvfed, kapitlet i
   fuld tekstfarve, emnet mindre og afdæmpet. */
.tb-toc {
  --tb-pil: 16px;
  --tb-mellem: 6px;
  --tb-kant: 8px;
  --tb-trin: calc(var(--tb-pil) + var(--tb-mellem));
  position: sticky;
  top: var(--tb-top);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--tb-top) - 24px);
  max-height: calc(100dvh - var(--tb-top) - 24px);
  min-width: 0;
}
.tb-toc-top { flex: none; padding: 2px 0 18px; }
.tb-toc-hoved { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.tb-toc-hoved .tb-toc-bog { flex: 1; }
.tb-toc-bog {
  min-width: 0;
  color: var(--fs-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
}
.tb-toc-bog:hover { color: var(--tb-accent); }
/* Søg i menuen: en blød pille uden kant */
.tb-toc .tb-soegknap {
  height: 32px;
  padding: 0 13px;
  border-color: transparent;
  background: var(--tb-flade);
  font-size: 13.5px;
  font-weight: 500;
}
.tb-toc .tb-soegknap:hover { border-color: transparent; background: color-mix(in srgb, var(--fs-text) 9%, var(--fs-surface)); }
.tb-toc .tb-soegknap .bi-search { font-size: 12.5px; opacity: .75; }
.tb-fremdrift { margin: 14px 0 0; }
.tb-fremdrift p { margin: 8px 0 0; font-size: 12.5px; color: var(--fs-text-soft); font-variant-numeric: tabular-nums; }

.tb-ikonknap {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fs-text);
  font-size: 17px;
  cursor: pointer;
}
.tb-ikonknap:hover { background: var(--tb-hover); }
.tb-skuffe-luk { display: none; }

/* Rækkernes flader går 8 px ud over titlens kant, så foldepilene flugter
   med bogens titel over dem */
.tb-toc-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: calc(-1 * var(--tb-kant));
  padding: 0 0 40px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fs-text) 18%, transparent) transparent;
}
.tb-toc-nav :focus-visible { outline-offset: -2px; }

.tb-moduler, .tb-emner, .tb-paasiden ol { list-style: none; margin: 0; padding: 0; }

/* Fælles for alle rækker: fuld bredde, pilen forrest, og teksten hænger
   ved sin egen kant, når den bryder over to linjer */
.tb-modul-knap,
.tb-kap-raekke,
.tb-toc-emne {
  --tb-rad: 14px;
  display: flex;
  align-items: flex-start;
  gap: var(--tb-mellem);
  width: 100%;
  margin: 0;
  padding-block: 7px;
  padding-inline: var(--tb-kant) 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fs-text);
  font: inherit;
  font-size: var(--tb-rad);
  line-height: 1.38;
  letter-spacing: -0.006em;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
/* Kun med en mus: på en telefon bliver en hover-flade hængende på den
   række, der glider ind under fingeren, når et kapitel foldes ud */
@media (hover: hover) {
  .tb-modul-knap:hover,
  .tb-kap-raekke:hover,
  .tb-toc-emne:hover { background: var(--tb-hover); color: var(--fs-text); }
}

.tb-chev {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--tb-pil);
  height: calc(var(--tb-rad, 14px) * 1.38);
  font-size: 10px;
  color: color-mix(in srgb, var(--fs-text-soft) 85%, transparent);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), color .15s;
}
.tb-chev::before { font-weight: 700 !important; }
@media (hover: hover) {
  .tb-modul-knap:hover .tb-chev,
  .tb-kap-knap:hover .tb-chev { color: var(--fs-text); }
}
.tb-modul-knap[aria-expanded="true"] .tb-chev,
.tb-kap-knap[aria-expanded="true"] .tb-chev { transform: rotate(calc(90deg * var(--fs-dir, 1))); }

/* En dansk titel (dir="auto") på en side, der læses fra højre, står
   stadig ind mod pilen — ikke ude i den modsatte side. (match-parent ville
   være det rene valg, men Chromium regner det som inherit.) */
[dir="rtl"] .tb-toc :is(.tb-modul-titel, .tb-kap-navn, .tb-toc-emne-titel) { text-align: right; }

/* Niveau 1 — modulet */
.tb-modul + .tb-modul { margin-top: 6px; }
/* Enden er smal: pilen står forrest, og modulernes titler skal kunne stå
   på én linje i menuens bredde */
.tb-modul-knap { --tb-rad: 15px; padding-block: 8px; padding-inline-end: 4px; }
.tb-modul-titel {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
/* Modulets nummer som en lille overlinje over titlen; pilen står ud for
   titlen, ikke ud for nummeret */
.tb-modul-nr {
  display: block;
  margin-bottom: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--fs-text-soft);
}
.tb-modul-knap .tb-chev { margin-top: calc(12px * 1.4 + 1px); }
.tb-modul.er-aktiv .tb-modul-nr { color: var(--tb-accent); }
/* Det åbne moduls række bliver stående øverst, mens eleven ruller i dets
   emner — uden streg eller skygge; kun fladen dækker det, der ruller ind
   under */
.tb-modul.er-aaben > .tb-modul-knap {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fs-surface);
  box-shadow: 0 -6px 0 var(--fs-surface), 0 6px 0 -1px var(--fs-surface);
}
@media (hover: hover) {
  .tb-modul.er-aaben > .tb-modul-knap:hover,
  .tb-kap.er-aaben > .tb-kap-knap:hover { background: color-mix(in srgb, var(--fs-text) 5%, var(--fs-surface)); }
}
/* Er modulet med det aktive emne foldet sammen, viser titlen, hvor
   eleven er */
.tb-modul.er-aktiv:not(.er-aaben) > .tb-modul-knap,
.tb-modul.er-aktiv:not(.er-aaben) > .tb-modul-knap .tb-chev { color: var(--tb-accent); }
.tb-modul-indhold { padding: 2px 0 14px; }
.tb-modul-indhold[hidden] { display: none; }
/* Opslagsdelen er ikke et modul i forløbet: luft og en hårstreg over */
.tb-modul.tb-modul-opslag { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tb-streg); }

/* Niveau 2 — kapitlet: ét trin ind, fuld tekstfarve */
.tb-kap-raekke {
  --tb-rad: 14.5px;
  padding-inline-start: calc(var(--tb-kant) + var(--tb-trin));
  font-weight: 500;
}
.tb-kap-navn { flex: 1; min-width: 0; text-wrap: pretty; }
/* Kun flueben, når hele kapitlet er læst — aldrig et antal */
.tb-kap-tal:not(.er-faerdig) { display: none; }
.tb-kap-tal.er-faerdig {
  flex: none;
  display: inline-grid;
  place-items: center;
  height: calc(var(--tb-rad) * 1.38);
  color: var(--fs-green);
  font-size: 13.5px;
}
/* Er kapitlet med det aktive emne foldet sammen, viser navnet, hvor
   eleven er */
.tb-kap.er-aktiv:not(.er-aaben) > .tb-kap-knap,
.tb-kap.er-aktiv:not(.er-aaben) > .tb-kap-knap .tb-chev { color: var(--tb-accent); }
/* Det åbne kapitels række klæber lige under modulets, mens eleven ruller
   i dets emner. Højden på modulets række sætter teoribog.js i
   --tb-modul-h, for titlen fylder én eller to linjer. */
.tb-kap.er-aaben > .tb-kap-knap {
  position: sticky;
  top: var(--tb-modul-h, 40px);
  z-index: 1;
  background: var(--fs-surface);
}
.tb-kap.er-aaben { margin-block: 0 6px; }
.tb-kap > .tb-emner[hidden] { display: none; }

/* Niveau 3 — emnet: under kapitlets tekst, mindre og afdæmpet */
.tb-toc-emne {
  padding-block: 6px;
  padding-inline-start: calc(var(--tb-kant) + 2 * var(--tb-trin) + 10px);
  color: color-mix(in srgb, var(--fs-text-soft) 72%, var(--fs-text));
}
.tb-toc-emne-titel { flex: 1; min-width: 0; text-wrap: pretty; }
.tb-toc-emne .tb-flueben { height: calc(var(--tb-rad) * 1.38); font-size: 13.5px; }
/* Kapitlet, der kun er ét emne af samme navn, står som et kapitel — uden
   pil, men med teksten på linje med de andre kapitlers */
.tb-kap-raekke.tb-toc-emne {
  --tb-rad: 14.5px;
  padding-block: 7px;
  padding-inline-start: calc(var(--tb-kant) + 2 * var(--tb-trin));
  color: var(--fs-text);
  font-weight: 500;
}
/* Det valgte emne: en blød flade i kundens farve */
.tb-toc-emne.er-aktiv,
.tb-kap-raekke.tb-toc-emne.er-aktiv {
  background: var(--tb-blod);
  color: var(--tb-accent);
  font-weight: 600;
}

/* ---------- Artiklen ---------- */

/* Arket er ikke et kort — det er siden selv. Container-typen lader de
   brede elementer i teksten (figurer, tabeller) regne ud, hvor meget plads
   der er ud over tekstspalten. */
.tb-ark {
  container-type: inline-size;
  transition: opacity .18s;
}
.tb-ark.er-henter { opacity: .5; }
.tb-artikel { max-width: var(--tb-tekst-w); margin-inline: auto; }
.tb-artikel .tb-indhold { --tb-tekst: 1.125rem; }
/* Figurer (ikke tabeller: de så ud som en fejl, Martin 27. sep) går ud over tekstspalten til højst 880 px — lige
   meget til hver side. Er der ikke plads, bliver de i spalten. */
.tb-artikel .tb-indhold > .tb-figur:not(.tb-figur-halv) {
  margin-inline: calc((100% - min(var(--tb-bred-w), 100cqi)) / 2);
}
/* En stående illustration må ikke fylde mere end skærmen — den bliver
   smallere og står i midten. Billedteksten følger tekstspalten, så den
   flugter med teksten over og under, uanset hvor bred figuren er. */
.tb-artikel .tb-figur img { width: auto; max-width: 100%; max-height: min(82vh, 900px); margin-inline: auto; }
.tb-artikel .tb-indhold > .tb-figur figcaption { max-width: var(--tb-tekst-w); margin-inline: auto; }

.tb-kruemmer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--fs-text-soft);
}
.tb-kruemmer a { color: var(--fs-text-soft); text-decoration: none; }
.tb-kruemmer a:hover { color: var(--tb-accent); }
.tb-kruemme-skel { opacity: .5; }
.tb-art-titel {
  margin: 0;
  font-size: clamp(32px, 3.3vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.tb-art-titel:focus { outline: none; }
.tb-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 14px 0 clamp(40px, 4.4vw, 56px);
  font-size: 14px;
  color: var(--fs-text-soft);
}
.tb-laest-maerke { display: inline-flex; align-items: center; gap: 5px; color: var(--fs-green); font-weight: 500; }
.tb-laest-maerke[hidden] { display: none; }
.tb-laest-maerke.er-ny { animation: tb-ind .45s ease-out; }
@keyframes tb-ind { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Artiklens bund ---------- */

.tb-art-fod { margin-top: clamp(64px, 7vw, 96px); }
.tb-naboer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--tb-streg);
}
.tb-nabo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--fs-text);
  text-decoration: none;
}
.tb-nabo-naeste { grid-column: 2; align-items: flex-end; text-align: end; }
.tb-nabo-retning { font-size: 13px; color: var(--fs-text-soft); }
.tb-nabo-titel {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tb-accent);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.tb-nabo:hover .tb-nabo-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.tb-fod-bund { margin-top: 56px; }
.tb-kilder { font-size: 13px; color: var(--fs-text-soft); }
.tb-kilder summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tb-kilder summary::-webkit-details-marker { display: none; }
.tb-kilder summary:hover { color: var(--fs-text); }
.tb-kilder summary .bi { font-size: 10px; transition: transform .2s; }
.tb-kilder[open] summary .bi { transform: rotate(180deg); }
.tb-kilder-liste { margin: 8px 0 4px; line-height: 1.6; }
.tb-kilder-liste div + div { margin-top: 4px; }
.tb-kilder-liste dt { display: inline; font-weight: 600; margin-inline-end: 6px; }
.tb-kilder-liste dd { display: inline; margin: 0; }
.tb-ophav {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--fs-text-soft) 85%, transparent);
}

/* ---------- På denne side ---------- */

.tb-paasiden-nav { padding-top: 6px; font-size: 13.5px; }
.tb-paasiden-titel {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fs-text-soft);
}
.tb-paasiden a {
  position: relative;
  display: block;
  padding-block: 5px;
  padding-inline: 14px 0;
  color: var(--fs-text-soft);
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s;
}
.tb-paasiden a:hover { color: var(--fs-text); }
.tb-paasiden a.er-aktiv { color: var(--tb-accent); font-weight: 600; }
.tb-paasiden a.er-aktiv::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: calc(5px + .7em - 3px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tb-accent);
}

/* Læsestregen: hvor langt eleven er i emnet */
.tb-laesestreg {
  position: fixed;
  inset-inline: 0;
  top: var(--tb-bjaelke);
  z-index: 90;
  height: 2px;
  pointer-events: none;
}
.fs-sticky .tb-laesestreg { top: var(--fs-bar-h); }
.tb-laesestreg span {
  display: block;
  height: 100%;
  background: var(--fs-navy);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
[dir="rtl"] .tb-laesestreg span { transform-origin: 100% 50%; }

/* ---------- Telefonen og tabletten: skuffen ---------- */

.tb-mobilbar { display: none; }
.tb-scrim[hidden] { display: none; }
@keyframes tb-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 959.98px) {
  .tb-laeser { display: block; padding: 28px 20px 96px; }
  .tb-midte { padding-bottom: 0; }
  .tb-mobilbar {
    position: sticky;
    top: var(--tb-bjaelke);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    padding-inline: 14px 8px;
    background: color-mix(in srgb, var(--fs-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--tb-streg);
  }
  .fs-sticky .tb-mobilbar { top: var(--fs-bar-h); }
  .tb-mobil-indhold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--tb-flade);
    color: var(--fs-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .tb-mobil-indhold .bi { font-size: 15px; }
  .tb-mobil-titel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--fs-text-soft);
  }
  .tb-toc {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 260;
    width: min(360px, 88vw);
    max-height: none;
    padding: 18px 16px 0 20px;
    padding-inline: 20px 16px;
    background: var(--fs-surface);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.22);
    transform: translateX(calc(-102% * var(--fs-dir, 1)));
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .3s;
  }
  .tb-laeser.er-skuffe-aaben .tb-toc {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s;
  }
  .tb-skuffe-luk { display: inline-grid; margin-inline-end: -8px; }
  /* Fingre rammer bedre med lidt mere højde pr. række */
  .tb-modul-knap, .tb-kap-raekke, .tb-kap-raekke.tb-toc-emne { padding-block: 9px; }
  .tb-toc-emne { padding-block: 8px; }
  .tb-scrim {
    position: fixed;
    inset: 0;
    z-index: 255;
    background: rgba(15, 23, 33, 0.38);
    animation: tb-fade .25s ease-out;
  }
  .tb-art-meta { margin-bottom: 36px; }
}
@media (max-width: 600px) {
  .tb-laeser { padding: 22px 18px 80px; }
  .tb-art-fod { margin-top: 56px; }
  .tb-naboer { grid-template-columns: 1fr; gap: 20px; }
  .tb-nabo-naeste { grid-column: auto; order: -1; align-items: flex-start; text-align: start; }
  .tb-nabo-tom { display: none; }
  .tb-kig { width: calc(100% - 24px); font-size: 13px; }
}

/* ---------- Lysboksen ---------- */

/* Et kig, ikke en dialog: et tryk hvor som helst lukker (undtaget fra
   husets modalregel, som resultatsidens billedzoom) */
.tb-lysboks {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* tæt nok til, at sidens egen billedtekst ikke skinner igennem lige
     under lysboksens (figuren står tit samme sted på telefonen) */
  background: rgba(15, 23, 33, 0.97);
  cursor: zoom-out;
  animation: tb-fade .2s ease-out;
}
.tb-lysboks[hidden] { display: none; }
.tb-lysboks-luk {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
.tb-lysboks-luk:hover { background: rgba(255, 255, 255, 0.24); }
.tb-lysboks-indhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: min(92vw, 1100px);
  max-height: 100%;
  margin: 0;
  color: #fff;
  text-align: center;
}
.tb-lysboks-plade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(22px, 4vw, 40px) clamp(26px, 5vw, 56px);
  border-radius: 22px;
  background: #eef1f4;
}
.tb-lysboks .tb-tavle-hoved { width: auto; height: min(300px, 40vh); max-width: 70vw; }
.tb-lysboks .tb-tavle-under { width: auto; height: min(120px, 15vh); max-width: 70vw; }
.tb-lysboks .tb-t { height: min(260px, 40vh); width: auto; }
.tb-lysboks .tb-plade { font-size: clamp(18px, 2.4vw, 26px); min-width: 180px; padding: 6px 16px; border-width: 3px; }
.tb-lysboks .tb-plade .tb-pil { width: 44px; height: 44px; }
.tb-lysboks-figur img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: #fff;
}
.tb-lysboks figcaption { display: flex; flex-direction: column; gap: 4px; max-width: 56ch; font-size: 15px; line-height: 1.5; }
.tb-lysboks-navn { font-size: clamp(19px, 2vw, 24px); font-weight: 650; }
.tb-lysboks-kode { font-size: 14px; opacity: .72; letter-spacing: .03em; }
.tb-lysboks-tekst { opacity: .9; }

/* Tavler og figurer i teksten kan forstørres — det skal kunne ses */
.tb-side .tb-tavle, .tb-side .tb-t-ramme { cursor: zoom-in; }

/* ---------- Bogens forside ---------- */

/* Enkel med vilje: titel, fakta, Søg — og så oversigten. Oversigten er et
   sitemap: modulet som en rolig overskrift i fuld bredde, kapitlerne som
   tydelige mellemrubrikker i spalter, der fyldes oppefra og ned (som et
   murværk, så korte og lange kapitler ikke efterlader huller), og emnerne
   afdæmpet under dem, uden streger og uden minuttal. */
.tb-forside {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 48px) 128px;
}
.tb-forside .tb-kig { width: 100%; margin: 0 0 32px; }
.tb-hero { max-width: 720px; }
.tb-eyebrow {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tb-accent);
}
.tb-hero h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.tb-hero-under { margin: 12px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--fs-text-soft); }
.tb-hero-intro {
  max-width: 60ch;
  margin: 20px 0 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--fs-text) 88%, var(--fs-surface));
}
.tb-hero-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--fs-text-soft);
}
.tb-hero-fremdrift { max-width: 340px; margin-top: 24px; }
.tb-hero-fremdrift p { margin: 8px 0 0; font-size: 13.5px; color: var(--fs-text-soft); }

.tb-forside-soeg { margin: clamp(28px, 3vw, 40px) 0 0; }
/* Det bærende billede: fuld bredde af forsiden, bredt panorama på store
   skærme og beskåret om midten på telefonen */
.tb-forsidebillede { margin: clamp(40px, 5vw, 64px) 0 0; }
.tb-forsidebillede img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 18 / 7;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: calc(var(--fs-radius, 12px) + 10px);
  background: color-mix(in srgb, var(--fs-text) 6%, var(--fs-surface));
}
@media (max-width: 700px) {
  .tb-forsidebillede img { aspect-ratio: 4 / 3; border-radius: calc(var(--fs-radius, 12px) + 4px); }
}

.tb-moduloversigt { margin-top: clamp(72px, 8vw, 112px); }
.tb-modulsektion {
  padding: clamp(64px, 7vw, 96px) 0 clamp(56px, 6vw, 80px);
  border-top: 1px solid var(--tb-streg);
  scroll-margin-top: calc(var(--tb-bjaelke) + 24px);
}
.tb-modulsektion:first-child { padding-top: 0; border-top: 0; }
.tb-modulsektion-hoved { max-width: 720px; margin-bottom: clamp(44px, 5vw, 64px); }
.tb-modulsektion-nr { display: flex; gap: 10px; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--tb-accent); }
.tb-modulsektion-tal { font-weight: 500; color: var(--fs-text-soft); font-variant-numeric: tabular-nums; }
.tb-modulsektion-tal::before { content: "·"; margin-inline-end: 10px; }
.tb-modulsektion h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.tb-modulsektion-intro { max-width: 62ch; margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--fs-text-soft); }

.tb-modulsektion-kapitler {
  columns: 3 240px;
  column-gap: clamp(32px, 4vw, 56px);
}
.tb-fkap { min-width: 0; break-inside: avoid; padding-bottom: clamp(36px, 3.6vw, 48px); }
.tb-fkap:last-child { padding-bottom: 0; }
.tb-fkap h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--fs-text);
  text-wrap: balance;
}
.tb-emneliste { list-style: none; margin: 0; padding: 0; }
.tb-emnerad {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  color: color-mix(in srgb, var(--fs-text-soft) 80%, var(--fs-text));
  font-size: 15.5px;
  text-decoration: none;
}
.tb-emnerad-titel { flex: 1; min-width: 0; line-height: 1.42; text-wrap: pretty; transition: color .12s; }
.tb-emnerad:hover .tb-emnerad-titel {
  color: var(--tb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tb-emnerad .tb-flueben { font-size: 14px; position: relative; top: 1px; }
.tb-ophav-forside { max-width: 80ch; margin-top: 24px; }

@media (max-width: 820px) {
  .tb-modulsektion-kapitler { columns: 1; }
  .tb-fkap { padding-bottom: 32px; }
}
@media (max-width: 600px) {
  .tb-emnerad { padding: 8px 0; }
}

/* ---------- Kortet på prøveoversigten ---------- */

.tb-gruppe-fremdrift {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-inline-end: 44px;
  font-size: 12.5px;
  color: var(--fs-text-soft);
  font-variant-numeric: tabular-nums;
}
.tb-gruppe-fremdrift .tb-bar { flex: 0 0 84px; }
.fs-uv-tpl-liste .tb-gruppe-fremdrift { margin-top: 0; padding-inline-end: 0; flex: none; }
.fs-uv-tpl-fliser .tb-gruppe-fremdrift { padding-inline-end: 0; justify-content: center; }
.tb-side-vaelger .tb-gruppe { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .tb-side *, .tb-side *::before, .tb-gruppe *, .tb-soegvindue, .tb-soegvindue * { transition: none !important; animation: none !important; }
}