@font-face{font-family:"Jost";src:url(/static/fonts/jost-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(/static/fonts/jost-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/static/fonts/archivo-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/static/fonts/archivo-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/static/fonts/archivo-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Personlig Træning – progressionstrappen.
   Mobil først, maks. 1200 px, radius 2 px, kompakt tæthed, burgermenu på alle skærme.
   Formsprog: fem stigende søjler (faserne), en segmenteret ring (fem dele) og hvide forløbskort med clipboard-klemme.
   Palet: kølig lysegrå + grafit, koralrødt signal som mættet hovedfarve og frisk cyan på grafit. */

:root {
  --yg-is: #EEF2F5;
  --yg-hvid: #FFFFFF;
  --yg-lys: #F4F7F9;
  --yg-tavle: #E1E7EC;
  --yg-streg: #C3CED6;
  --yg-grafit: #0F1D26;
  --yg-nat: #13232E;
  --yg-grafit2: #1B2C37;
  --yg-kant: #2E3F4A;
  --yg-skifer: #4A5966;
  --yg-signal: #FF5A36;
  --yg-rust: #B8321A;
  --yg-rustmoerk: #93260F;
  --yg-puls: #00C9D6;
  --yg-signallys: #FFE3DB;
  --yg-fodtekst: #E6EDF2;
  --yg-foddaemp: #A9B7C2;
  --yg-lystekst: #C9D4DC;
  --yg-r: 2px;
  --yg-rubrik: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --yg-brod: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --yg-bredde: 75rem;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--yg-is);
  color: var(--yg-grafit);
  font-family: var(--yg-brod);
  font-size: 1rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > * { flex: none; }
body > .yg-hoved { flex: 1 0 auto; }

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

a { color: var(--yg-rust); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--yg-rustmoerk); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--yg-grafit); outline-offset: 2px; }
.yg-top :focus-visible, .yg-fod :focus-visible, .yg-vt-hoved :focus-visible, .yg-sl-styr :focus-visible,
.yg-sm-ud :focus-visible, .yg-fasekort :focus-visible, .yg-vtp :focus-visible { outline-color: var(--yg-puls); }

h1, h2, h3, h4 { font-family: var(--yg-rubrik); font-weight: 800; line-height: 1.12; margin: 0; letter-spacing: -.005em; overflow-wrap: break-word; hyphens: auto; }
h3, h4 { font-weight: 600; }

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

.yg-ramme { width: 100%; max-width: var(--yg-bredde); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

.yg-spring {
  position: absolute; left: .75rem; top: -4rem; z-index: 50;
  background: var(--yg-signal); color: var(--yg-grafit); font-weight: 700;
  padding: .55rem 1rem; border-radius: var(--yg-r); text-decoration: none;
}
.yg-spring:focus { top: .75rem; }

/* ---------- Ikoner: mini-trappe og segmenteret ring ---------- */
.yg-minitrappe { width: 1.4rem; height: auto; flex: none; display: block; }
.yg-tt-on { fill: var(--yg-signal); }
.yg-tt-off { fill: currentColor; opacity: .3; }

.yg-ring { display: block; width: 3rem; height: 3rem; }
.yg-ring path, .yg-ring circle { fill: none; stroke-width: 6; }
.yg-ring-on { stroke: var(--yg-signal); }
.yg-ring-off { stroke: var(--yg-tavle); }
.yg-ring-spor { stroke: var(--yg-kant); }
.yg-ring-fyld { stroke: var(--yg-puls); transition: stroke-dasharray .35s ease; }

.yg-pil { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; transition: transform .2s ease; }

/* ---------- Topbjælke og burgermenu (alle skærme) ---------- */
.yg-top { position: relative; z-index: 30; background: var(--yg-grafit); color: var(--yg-fodtekst); }
.yg-topbar { display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding-top: .55rem; padding-bottom: .55rem; }
.yg-logo { display: block; flex: none; padding: .2rem 0; }
.yg-logo svg { display: block; width: min(13.5rem, 52vw); height: auto; }
.yg-topnote { display: none; }
.yg-burger {
  margin-left: auto; display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .4rem .95rem .4rem .8rem;
  background: transparent; color: var(--yg-hvid); cursor: pointer;
  border: 2px solid var(--yg-signal); border-radius: var(--yg-r);
  font: 600 1rem/1 var(--yg-rubrik); letter-spacing: .04em;
}
.yg-burger[hidden] { display: none; }
.yg-burger:hover, .yg-burger[aria-expanded="true"] { background: var(--yg-signal); color: var(--yg-grafit); }
.yg-burgerikon { position: relative; display: inline-block; width: 1.2rem; height: 14px; flex: none; }
.yg-burgerikon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.yg-burgerikon span:nth-child(1) { top: 0; }
.yg-burgerikon span:nth-child(2) { top: 6px; }
.yg-burgerikon span:nth-child(3) { top: 12px; }
.yg-burger[aria-expanded="true"] .yg-burgerikon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.yg-burger[aria-expanded="true"] .yg-burgerikon span:nth-child(2) { opacity: 0; }
.yg-burger[aria-expanded="true"] .yg-burgerikon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.yg-menu { background: var(--yg-nat); border-top: 1px solid var(--yg-kant); padding: 1rem 0 1.5rem; }
.yg-js .yg-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 1.25rem 2rem rgba(15, 29, 38, .35); }
.yg-js .yg-menu.yg-aaben { display: block; }
.yg-menu-gitter { display: grid; gap: 1.25rem; }
.yg-menuliste { list-style: none; margin: 0; padding: 0; }
.yg-menuliste a {
  display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; padding: .35rem 0;
  color: var(--yg-hvid); text-decoration: none; border-bottom: 1px solid var(--yg-kant);
  font: 600 1.2rem/1.2 var(--yg-rubrik);
}
.yg-menuliste a::before { content: ""; width: .5rem; height: .5rem; background: var(--yg-kant); flex: none; }
.yg-menuliste a:hover { color: var(--yg-puls); }
.yg-menuliste a[aria-current="page"] { color: var(--yg-signal); }
.yg-menuliste a[aria-current="page"]::before { background: var(--yg-signal); }
.yg-menu-etiket { margin: 0 0 .4rem; font: 600 .78rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em; color: var(--yg-puls); }
.yg-menu-faser ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.yg-menu-faser a { display: flex; align-items: center; gap: .65rem; min-height: 2.6rem; color: var(--yg-fodtekst); text-decoration: none; font-size: .98rem; }
.yg-menu-faser a:hover span { text-decoration: underline; color: var(--yg-hvid); }
.yg-menu-faser .yg-tt-off { fill: var(--yg-kant); opacity: 1; }

/* ---------- Hovedområde ---------- */
.yg-hoved { display: block; padding-bottom: 3rem; }

.yg-etiket {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  background: var(--yg-grafit); color: var(--yg-hvid); padding: .35rem .65rem .35rem .5rem;
  font: 600 .8rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em;
  border-radius: var(--yg-r);
}
.yg-etiket .yg-tt-off { fill: var(--yg-kant); opacity: 1; }
.yg-etiket-lys { background: var(--yg-tavle); color: var(--yg-grafit); }

/* Knapper */
.yg-knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.9rem; padding: .6rem 1.1rem; border: 2px solid var(--yg-grafit); border-radius: var(--yg-r);
  font: 600 1.05rem/1.15 var(--yg-rubrik); text-decoration: none; cursor: pointer; text-align: center;
}
.yg-knap:hover .yg-pil { transform: translateX(3px); }
.yg-knap-grafit { background: var(--yg-grafit); color: var(--yg-hvid); }
.yg-knap-grafit:hover { background: #000; color: var(--yg-hvid); }
.yg-knap-hvid { background: var(--yg-hvid); color: var(--yg-grafit); }
.yg-knap-hvid:hover { background: var(--yg-grafit); color: var(--yg-hvid); }
.yg-knap-rust { background: var(--yg-rust); border-color: var(--yg-rust); color: var(--yg-hvid); }
.yg-knap-rust:hover { background: var(--yg-rustmoerk); border-color: var(--yg-rustmoerk); color: var(--yg-hvid); }

/* ---------- Forside: startblok ---------- */
.yg-start { background: var(--yg-signal); color: var(--yg-grafit); padding: 1.75rem 0 2.5rem; }
.yg-start-gitter { display: grid; gap: 2rem; align-items: center; }
.yg-start h1 { font-size: clamp(2.3rem, 1.25rem + 5vw, 4.3rem); line-height: 1.02; letter-spacing: -.02em; margin: 1rem 0 .9rem; max-width: 15ch; }
.yg-start-lead { margin: 0 0 1.4rem; font-size: 1.15rem; line-height: 1.45; max-width: 34rem; }
.yg-start-knapper { display: flex; flex-wrap: wrap; gap: .65rem; }
.yg-start-foto { margin: 0; padding: .9rem .5rem 0 0; }
.yg-clipboard {
  position: relative; background: var(--yg-hvid); padding: 1.1rem .6rem .6rem;
  border: 2px solid var(--yg-grafit); border-radius: var(--yg-r);
  box-shadow: 8px 8px 0 var(--yg-grafit); transform: rotate(1.2deg);
}
.yg-clipboard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--yg-r); }
.yg-klemme {
  position: absolute; top: -.9rem; left: 50%; transform: translateX(-50%);
  width: 6rem; height: 1.6rem; background: var(--yg-grafit); border-radius: var(--yg-r);
}
.yg-klemme::after {
  content: ""; position: absolute; left: 50%; top: .5rem; transform: translateX(-50%);
  width: 2rem; height: .45rem; background: var(--yg-signal); border-radius: 1px;
}
.yg-ai { margin: .6rem 0 0; font-size: .78rem; line-height: 1.3; color: var(--yg-skifer); }
.yg-ai::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; background: currentColor; vertical-align: .05em; }
.yg-ai-start { color: var(--yg-grafit); margin-top: 1rem; }

/* ---------- Forside: progressionstrappen ---------- */
.yg-rute { padding: 2.5rem 0 .5rem; }
.yg-rute-hoved { max-width: 46rem; margin-bottom: 1.5rem; }
.yg-rute-hoved h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); margin: .8rem 0 .5rem; }
.yg-rute-hoved p:last-child { margin: 0; color: var(--yg-skifer); max-width: 38rem; }
.yg-faser { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.yg-fase { display: flex; flex-direction: column; }
.yg-fase-1 { --yg-n: 1; } .yg-fase-2 { --yg-n: 2; } .yg-fase-3 { --yg-n: 3; } .yg-fase-4 { --yg-n: 4; } .yg-fase-5 { --yg-n: 5; }
.yg-trin {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: calc(var(--yg-n) * 20%); min-width: 7rem; height: 3rem; padding: 0 .45rem 0 .7rem;
  background: var(--yg-signal); border-radius: var(--yg-r) var(--yg-r) 0 0;
}
.yg-trin-nr { font: 800 1.7rem/1 var(--yg-rubrik); color: var(--yg-grafit); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.yg-trin-ring { width: 2.1rem; height: 2.1rem; }
.yg-trin .yg-ring-on { stroke: var(--yg-grafit); }
.yg-trin .yg-ring-off { stroke: rgba(15, 29, 38, .22); }
.yg-fase-kort {
  flex: 1; background: var(--yg-hvid); border: 1px solid var(--yg-streg); border-top: 3px solid var(--yg-grafit);
  padding: .85rem 1rem 1rem; border-radius: 0 var(--yg-r) var(--yg-r) var(--yg-r);
}
.yg-fase-kort h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .3rem; }
.yg-fase-kort p { margin: 0 0 .7rem; color: var(--yg-skifer); font-size: .95rem; }
.yg-fase-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.yg-fase-links li { position: relative; padding: .3rem 0 .3rem 1.05rem; border-top: 1px dashed var(--yg-streg); font-size: .97rem; line-height: 1.35; }
.yg-fase-links li::before { content: ""; position: absolute; left: 0; top: .78rem; width: .45rem; height: .45rem; background: var(--yg-signal); }
.yg-fase-links a { color: var(--yg-grafit); font-weight: 700; text-decoration-color: var(--yg-rust); }
.yg-fase-links a:hover { color: var(--yg-rust); }
.yg-vt-chip {
  display: inline-block; vertical-align: .1em; margin-left: .2rem; padding: .08rem .35rem;
  background: var(--yg-grafit); color: var(--yg-puls); border-radius: var(--yg-r);
  font: 600 .68rem/1.3 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}

/* ---------- Forside: brødtekst og værktøjspanel ---------- */
.yg-hjem { padding-top: 2.25rem; }
.yg-hjem-gitter { display: grid; gap: 2rem; align-items: start; }
.yg-hjem-hoved { min-width: 0; }
.yg-vtp { background: var(--yg-grafit); color: var(--yg-fodtekst); padding: 1.1rem 1rem 1rem; border-radius: var(--yg-r); border-top: .4rem solid var(--yg-puls); }
.yg-vtp h2 { font: 600 .82rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em; color: var(--yg-puls); margin: 0 0 .5rem; }
.yg-vtp-liste { list-style: none; margin: 0; padding: 0; }
.yg-vtp-liste li + li { border-top: 1px solid var(--yg-kant); }
.yg-vtp-link { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; align-items: center; padding: .8rem .2rem; color: var(--yg-fodtekst); text-decoration: none; }
.yg-vtp-link:hover { background: var(--yg-grafit2); color: var(--yg-fodtekst); }
.yg-vtp-link:hover strong { text-decoration: underline; text-decoration-color: var(--yg-puls); }
.yg-vtp-ikon .yg-ring { width: 3rem; height: 3rem; }
.yg-vtp .yg-ring-on { stroke: var(--yg-puls); }
.yg-vtp .yg-ring-off { stroke: var(--yg-kant); }
.yg-vtp-aa {
  display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--yg-grafit2);
  border: 2px solid var(--yg-signal); color: var(--yg-signal); font: 800 .95rem/1 var(--yg-rubrik); border-radius: var(--yg-r);
}
.yg-vtp-tekst { display: grid; gap: .15rem; }
.yg-vtp-tekst strong { font: 800 1.15rem/1.2 var(--yg-rubrik); color: var(--yg-hvid); }
.yg-vtp-tekst span { font-size: .9rem; line-height: 1.4; color: var(--yg-lystekst); }

/* ---------- Brødsti ---------- */
.yg-sti { padding-top: 1rem; font-size: .85rem; }
.yg-sti ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; color: var(--yg-skifer); }
.yg-sti li { min-width: 0; overflow-wrap: anywhere; }
.yg-sti li + li::before { content: "/"; margin-right: .3rem; color: var(--yg-skifer); }
.yg-sti a { color: var(--yg-grafit); }

/* ---------- Undersider: forløbskortet ---------- */
.yg-opslag { display: grid; gap: 2rem; align-items: start; }
.yg-artikel { min-width: 0; }
.yg-smal { max-width: 48rem; }
.yg-sidehoved { padding: 1rem 0 1.4rem; }
.yg-maerker { display: flex; flex-wrap: wrap; gap: .4rem; }
.yg-fasemaerke, .yg-typemaerke {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: .3rem .65rem .3rem .5rem;
  border-radius: var(--yg-r); font: 600 .8rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
}
.yg-fasemaerke { background: var(--yg-grafit); color: var(--yg-hvid); }
.yg-fasemaerke .yg-tt-off { fill: var(--yg-kant); opacity: 1; }
.yg-fasemaerke:hover { background: var(--yg-nat); color: var(--yg-puls); }
.yg-typemaerke { background: var(--yg-tavle); color: var(--yg-grafit); padding-left: .65rem; }
.yg-typemaerke-vt { background: var(--yg-puls); }
.yg-sidehoved h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.05rem); margin: .8rem 0 .55rem; letter-spacing: -.015em; }
.yg-lead { font-size: 1.13rem; line-height: 1.5; margin: 0 0 .5rem; max-width: 44rem; }
.yg-dato { margin: .4rem 0 0; font-size: .85rem; color: var(--yg-skifer); }

.yg-foto { margin: 0 0 2rem; }
.yg-foto-ramme { border: 2px solid var(--yg-grafit); border-radius: var(--yg-r); box-shadow: 6px 6px 0 var(--yg-signal); background: var(--yg-hvid); overflow: hidden; margin-right: 6px; }
.yg-foto-ramme img { width: 100%; }
.yg-foto .yg-ai { margin-top: .8rem; }

/* Hvidt kort med clipboard-klemme: sidens brødtekst */
.yg-kort {
  position: relative; background: var(--yg-hvid); border: 1px solid var(--yg-streg); border-radius: var(--yg-r);
  padding: 1.6rem 1rem 1.25rem; margin-top: .9rem;
}
.yg-kort::before {
  content: ""; position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  width: 5rem; height: 1.3rem; background: var(--yg-grafit); border-radius: var(--yg-r);
}
.yg-kort::after {
  content: ""; position: absolute; top: -.3rem; left: 50%; transform: translateX(-50%);
  width: 1.7rem; height: .38rem; background: var(--yg-signal); border-radius: 1px;
}

/* Brødtekst */
.yg-tekst { overflow-wrap: anywhere; hyphens: auto; }
.yg-tekst > :first-child { margin-top: 0; }
.yg-tekst > :last-child { margin-bottom: 0; }
.yg-tekst p, .yg-tekst ul, .yg-tekst ol { margin: 0 0 1rem; }
.yg-tekst h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); margin: 2.1rem 0 .7rem; }
.yg-tekst h2::before { content: ""; display: block; width: 2.6rem; height: .32rem; background: var(--yg-signal); margin-bottom: .65rem; }
.yg-tekst h3 { font-size: 1.22rem; margin: 1.6rem 0 .45rem; }
.yg-tekst h4 { font-size: 1.05rem; margin: 1.3rem 0 .35rem; text-transform: uppercase; letter-spacing: .06em; }
.yg-tekst ul, .yg-tekst ol { padding-left: 1.35rem; }
.yg-tekst li { margin: .25rem 0; padding-left: .15rem; }
.yg-tekst li > ul, .yg-tekst li > ol { margin: .3rem 0 .4rem; }
.yg-tekst ul > li::marker { color: var(--yg-rust); }
.yg-tekst ol > li::marker { color: var(--yg-rust); font-family: var(--yg-rubrik); font-weight: 800; }
.yg-tekst strong { font-weight: 700; }
.yg-tekst blockquote {
  margin: 1.4rem 0; padding: .9rem 1rem .9rem 1.1rem; background: var(--yg-lys);
  border-left: .4rem solid var(--yg-signal); font-size: 1.06rem;
}
.yg-tekst blockquote p:last-child { margin-bottom: 0; }
.yg-tekst hr { border: 0; height: 4px; margin: 2rem 0; background: linear-gradient(90deg, var(--yg-signal) 0 20%, var(--yg-tavle) 20% 100%); }
.yg-tabel { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--yg-streg); border-radius: var(--yg-r); -webkit-overflow-scrolling: touch; }
html:not(.yg-js) .yg-tekst table { display: block; overflow-x: auto; }
.yg-tekst table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.4; overflow-wrap: normal; hyphens: manual; }
.yg-tabel table { margin: 0; }
.yg-tekst th, .yg-tekst td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--yg-streg); }
.yg-tekst th { background: var(--yg-grafit); color: var(--yg-hvid); font: 600 .82rem/1.25 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.yg-tekst tbody tr:nth-child(even) td { background: var(--yg-lys); }
.yg-tekst td:first-child { font-weight: 700; }

/* A–Å-register (ordbogen) */
.yg-register { margin: 0 0 1.2rem; }
.yg-register ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.yg-register a, .yg-reg-tom {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: var(--yg-r);
  font: 800 1.05rem/1 var(--yg-rubrik); text-decoration: none;
}
.yg-register a { background: var(--yg-grafit); color: var(--yg-hvid); }
.yg-register a:hover { background: var(--yg-signal); color: var(--yg-grafit); }
.yg-reg-tom { color: var(--yg-skifer); border: 1px dashed var(--yg-streg); }

/* Spørgsmål og svar */
.yg-spm { margin: 2.25rem 0 0; }
.yg-spm h2, .yg-kilder h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin: 0 0 .9rem; }
.yg-spm h2::before { content: ""; display: block; width: 2.6rem; height: .32rem; background: var(--yg-signal); margin-bottom: .65rem; }
.yg-spm-liste { display: grid; gap: .45rem; }
.yg-spm-punkt { background: var(--yg-hvid); border: 1px solid var(--yg-streg); border-radius: var(--yg-r); }
.yg-spm-punkt[open] { border-color: var(--yg-grafit); }
.yg-spm-punkt summary {
  display: grid; grid-template-columns: 2rem 1fr 1.2rem; gap: .5rem; align-items: baseline;
  padding: .8rem .9rem; cursor: pointer; list-style: none; font: 600 1.06rem/1.3 var(--yg-rubrik);
}
.yg-spm-punkt summary::-webkit-details-marker { display: none; }
.yg-spm-punkt summary::after { content: "+"; font: 800 1.3rem/1 var(--yg-rubrik); color: var(--yg-rust); justify-self: end; }
.yg-spm-punkt[open] summary::after { content: "–"; }
.yg-spm-nr { font-weight: 800; color: var(--yg-rust); font-variant-numeric: tabular-nums; }
.yg-spm-q { min-width: 0; overflow-wrap: anywhere; }
.yg-spm-punkt p { margin: 0; padding: 0 .9rem 1rem 3.4rem; overflow-wrap: anywhere; }

/* Kilder */
.yg-kilder { margin: 2rem 0 0; padding: 1rem 1rem 1.1rem; background: var(--yg-tavle); border-radius: var(--yg-r); }
.yg-kilder h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: .5rem; }
.yg-kilder ol { margin: 0; padding-left: 1.3rem; font-size: .93rem; }
.yg-kilder li { margin: .2rem 0; overflow-wrap: anywhere; }

/* Sidekolonnen: forløbet i fem faser */
.yg-fasekort { background: var(--yg-grafit); color: var(--yg-fodtekst); padding: 1rem 1rem 1.1rem; border-radius: var(--yg-r); border-top: .4rem solid var(--yg-signal); }
.yg-fk-titel { font: 600 .82rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em; color: var(--yg-puls); margin: 0 0 .6rem; }
.yg-fk-liste { list-style: none; margin: 0; padding: 0; }
.yg-fk-fase { border-top: 1px solid var(--yg-kant); padding: .5rem 0; }
.yg-fk-navn { display: flex; align-items: baseline; gap: .6rem; margin: 0; font: 600 1rem/1.3 var(--yg-rubrik); }
.yg-fk-nr { font-weight: 800; color: var(--yg-signal); font-variant-numeric: tabular-nums; min-width: 1.5rem; }
.yg-fk-navn a { color: var(--yg-fodtekst); text-decoration: none; }
.yg-fk-navn a:hover { color: var(--yg-puls); text-decoration: underline; }
.yg-fk-her { background: var(--yg-grafit2); margin: 0 -1rem; padding: .6rem 1rem .7rem; border-left: .3rem solid var(--yg-signal); }
.yg-fk-her .yg-fk-navn { color: var(--yg-hvid); }
.yg-fk-sider { list-style: none; margin: .45rem 0 0; padding: 0 0 0 2.1rem; display: grid; gap: .3rem; font-size: .92rem; line-height: 1.35; }
.yg-fk-sider a { color: var(--yg-fodtekst); }
.yg-fk-sider a:hover { color: var(--yg-puls); }
.yg-fk-sider [aria-current="page"] { color: var(--yg-hvid); font-weight: 700; padding-left: .7rem; border-left: 3px solid var(--yg-puls); display: inline-block; }

/* Næste i forløbet */
.yg-naeste { background: var(--yg-signal); margin: 3rem 0 -3rem; }
.yg-naeste-link {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
  padding: 1.5rem 0; color: var(--yg-grafit); text-decoration: none;
}
.yg-naeste-link:hover { color: var(--yg-grafit); }
.yg-naeste-link:hover .yg-naeste-titel { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.yg-naeste-link:hover .yg-pil { transform: translateX(5px); }
.yg-naeste-trappe { width: 2.6rem; }
.yg-naeste-trappe .yg-tt-on { fill: var(--yg-grafit); }
.yg-naeste-trappe .yg-tt-off { fill: var(--yg-grafit); opacity: .22; }
.yg-naeste-tekst { display: grid; gap: .25rem; min-width: 0; }
.yg-naeste-etiket { font: 600 .8rem/1.25 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .1em; }
.yg-naeste-titel { font: 800 clamp(1.25rem, 1rem + 1.4vw, 1.95rem)/1.15 var(--yg-rubrik); overflow-wrap: break-word; hyphens: auto; }
.yg-naeste .yg-pil { width: 2rem; height: 2rem; }

/* ---------- Værktøjer (fælles) ---------- */
.yg-vaerktoej { margin: 0 0 2.25rem; background: var(--yg-hvid); border: 2px solid var(--yg-grafit); border-radius: var(--yg-r); }
.yg-vt-hoved {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; align-items: start;
  background: var(--yg-grafit); color: var(--yg-fodtekst); padding: 1.1rem 1rem 1.2rem;
}
.yg-vt-ring { position: relative; width: 4.25rem; height: 4.25rem; }
.yg-vt-ring .yg-ring { width: 4.25rem; height: 4.25rem; }
.yg-vt-ring .yg-ring-on { stroke: var(--yg-puls); }
.yg-vt-ring .yg-ring-off { stroke: var(--yg-kant); }
.yg-vt-ringtal { position: absolute; inset: 0; display: grid; place-items: center; font: 800 .95rem/1 var(--yg-rubrik); color: var(--yg-hvid); font-variant-numeric: tabular-nums; }
.yg-vt-etiket { margin: 0 0 .35rem; font: 600 .78rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em; color: var(--yg-puls); }
.yg-vt-hoved h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem); color: var(--yg-hvid); margin: 0 0 .45rem; }
.yg-vt-intro { margin: 0; font-size: .95rem; color: var(--yg-lystekst); max-width: 40rem; }
.yg-vt-knap {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: .4rem .9rem; cursor: pointer;
  background: var(--yg-puls); color: var(--yg-grafit); border: 2px solid var(--yg-puls); border-radius: var(--yg-r);
  font: 600 .98rem/1.15 var(--yg-rubrik);
}
.yg-vt-knap:hover { background: var(--yg-hvid); border-color: var(--yg-hvid); }
.yg-vt-knap[aria-pressed="true"] { background: var(--yg-signal); border-color: var(--yg-signal); }
.yg-vt-knap-stille { background: transparent; color: var(--yg-fodtekst); border-color: var(--yg-foddaemp); }
.yg-vt-knap-stille:hover { background: var(--yg-grafit2); color: var(--yg-hvid); border-color: var(--yg-hvid); }
.yg-vt-status { margin: .55rem 0 0; font-size: .9rem; color: var(--yg-puls); }
.yg-vt-status:empty { display: none; }
.yg-vt-note { margin: 0; padding: .85rem 1rem; font-size: .88rem; color: var(--yg-skifer); background: var(--yg-lys); border-top: 1px solid var(--yg-streg); }

/* Spørgeliste */
.yg-sl-styr {
  position: sticky; top: 0; z-index: 5; background: var(--yg-grafit2); color: var(--yg-fodtekst);
  padding: .75rem 1rem .8rem; border-top: 1px solid var(--yg-kant);
}
.yg-sl-styr[hidden] { display: none; }
.yg-sl-taeller { margin: 0 0 .55rem; font: 800 1.15rem/1.2 var(--yg-rubrik); color: var(--yg-hvid); font-variant-numeric: tabular-nums; }
.yg-sl-knapper { display: flex; flex-wrap: wrap; gap: .45rem; }
.yg-sl-gruppe { margin: 0; padding: 1rem 1rem .6rem; border: 0; border-bottom: 1px solid var(--yg-streg); min-width: 0; }
.yg-sl-gruppe legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; width: 100%; padding: 0; margin-bottom: .35rem; font: 800 1.18rem/1.25 var(--yg-rubrik); }
.yg-sl-gnr { color: var(--yg-rust); font-variant-numeric: tabular-nums; }
.yg-sl-gt { margin-left: auto; padding: .1rem .45rem; background: var(--yg-tavle); border-radius: var(--yg-r); font: 600 .8rem/1.4 var(--yg-rubrik); font-variant-numeric: tabular-nums; }
.yg-sl-gt[hidden] { display: none; }
.yg-sl-liste { list-style: none; margin: 0; padding: 0; }
.yg-sl-punkt {
  display: grid; grid-template-columns: 1.45rem 1fr; gap: .65rem; align-items: start;
  padding: .55rem .5rem; margin: 0 -.5rem; border-top: 1px dashed var(--yg-streg);
}
.yg-sl-punkt:first-child { border-top: 0; }
.yg-sl-boks { width: 1.3rem; height: 1.3rem; margin: .12rem 0 0; accent-color: var(--yg-rust); cursor: pointer; }
.yg-sl-punkt label { cursor: pointer; overflow-wrap: anywhere; }
.yg-sl-valgt { background: var(--yg-signallys); }
.yg-sl-valgt label { font-weight: 700; }
.yg-sl-kunvalgte .yg-sl-punkt:not(.yg-sl-valgt) { display: none; }
.yg-sl-kunvalgte .yg-sl-tom { display: none; }

/* SMART-mål */
.yg-sm-felter { display: grid; gap: 1rem; padding: 1.1rem 1rem 1.2rem; }
.yg-sm-felt { min-width: 0; margin: 0; padding: 0; border: 0; }
.yg-sm-felt > label, .yg-sm-felt > legend {
  display: grid; grid-template-columns: 2.3rem 1fr; column-gap: .65rem; align-items: center; padding: 0; margin-bottom: .45rem; width: 100%;
}
.yg-sm-felt .yg-sm-b { grid-row: span 2; }
.yg-sm-b {
  display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; background: var(--yg-grafit); color: var(--yg-hvid);
  border-radius: var(--yg-r); font: 800 1.3rem/1 var(--yg-rubrik);
}
.yg-sm-navn { font: 800 1.08rem/1.2 var(--yg-rubrik); }
.yg-sm-hjaelp { font-size: .86rem; line-height: 1.35; color: var(--yg-skifer); }
.yg-sm-felt input, .yg-sm-felt select, .yg-felt input, .yg-felt textarea {
  width: 100%; min-height: 2.75rem; padding: .55rem .7rem; font: inherit; color: var(--yg-grafit);
  background: var(--yg-hvid); border: 2px solid var(--yg-skifer); border-radius: var(--yg-r);
}
.yg-sm-felt input::placeholder { color: #66737D; opacity: 1; }
.yg-sm-felt input:focus, .yg-sm-felt select:focus, .yg-felt input:focus, .yg-felt textarea:focus { border-color: var(--yg-grafit); }
.yg-sm-datoer { display: grid; gap: .7rem; }
.yg-sm-lille { display: block; margin-bottom: .25rem; font-size: .86rem; font-weight: 700; }
.yg-sm-ud { background: var(--yg-grafit); color: var(--yg-fodtekst); padding: 1.1rem 1rem 1.25rem; }
.yg-sm-ud[hidden] { display: none; }
.yg-sm-udtitel { font-size: 1.2rem; color: var(--yg-hvid); margin: 0 0 .7rem; }
.yg-sm-tjek { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .86rem; }
.yg-sm-tjek li { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem .2rem .2rem; border: 1px solid var(--yg-kant); border-radius: var(--yg-r); }
.yg-sm-tjek .yg-sm-b { width: 1.5rem; height: 1.5rem; font-size: .9rem; background: var(--yg-grafit2); }
.yg-sm-tjek .yg-sm-ok { background: var(--yg-puls); border-color: var(--yg-puls); color: var(--yg-grafit); }
.yg-sm-tjek .yg-sm-ok .yg-sm-b { background: var(--yg-grafit); }
.yg-sm-saetning {
  margin: 1rem 0; padding: .2rem 0 .2rem .9rem; border-left: .4rem solid var(--yg-signal);
  font: 600 clamp(1.15rem, 1rem + .7vw, 1.45rem)/1.35 var(--yg-rubrik); color: var(--yg-hvid); overflow-wrap: anywhere;
}
.yg-sm-hul { color: var(--yg-foddaemp); }
.yg-sm-uger { margin: 0 0 .8rem; }
.yg-sm-uger strong { color: var(--yg-puls); font-family: var(--yg-rubrik); font-size: 1.15em; }
.yg-sm-delmaal { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; counter-reset: none; }
.yg-sm-delmaal[hidden] { display: none; }
.yg-sm-delmaal li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; padding: .4rem .6rem; background: var(--yg-grafit2); border-radius: var(--yg-r); }
.yg-sm-delmaal span { font: 600 .82rem/1.5 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .08em; color: var(--yg-signal); }
.yg-sm-knapper { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Oversigt (list) ---------- */
.yg-program { margin: 2rem 0 0; }
.yg-program > h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin: 0 0 1rem; }
.yg-program-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.yg-program-fase { background: var(--yg-hvid); border: 1px solid var(--yg-streg); border-left: .4rem solid var(--yg-signal); padding: .8rem 1rem; border-radius: var(--yg-r); }
.yg-program-fase h3 { display: flex; gap: .6rem; align-items: baseline; font-size: 1.2rem; font-weight: 800; margin: 0 0 .4rem; }
.yg-program-nr { color: var(--yg-rust); }
.yg-program-fase ul, .yg-program-ekstra { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.yg-program-fase li span { display: block; font-size: .9rem; color: var(--yg-skifer); }
.yg-program-fase p { margin: 0; color: var(--yg-skifer); }
.yg-program-andre { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

/* ---------- Kontakt ---------- */
.yg-formular { position: relative; margin-top: 1.5rem; padding: 1.2rem 1rem; background: var(--yg-hvid); border: 2px solid var(--yg-grafit); border-radius: var(--yg-r); }
.yg-formular-etiket { margin: 0 0 1rem; font: 600 .8rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em; color: var(--yg-rust); }
.yg-felt { margin-bottom: 1rem; }
.yg-felt label { display: block; margin-bottom: .3rem; font: 600 1rem/1.3 var(--yg-rubrik); }
.yg-felt textarea { min-height: 9rem; resize: vertical; }
.yg-honning { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.yg-formnote { margin: 1rem 0 0; font-size: .88rem; color: var(--yg-skifer); }
.yg-smal [role="status"] { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--yg-signallys); border-left: .4rem solid var(--yg-signal); font-weight: 700; }

/* ---------- 404 ---------- */
.yg-404 { display: grid; gap: 1.5rem; padding: 2.5rem 0 1rem; align-items: center; }
.yg-404-ring { position: relative; width: 9rem; height: 9rem; }
.yg-404-ring .yg-ring { width: 9rem; height: 9rem; }
.yg-404-ring .yg-ring-off { stroke: var(--yg-tavle); }
.yg-404-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.2rem/1 var(--yg-rubrik); color: var(--yg-grafit); }
.yg-404 h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin: 0 0 .6rem; }
.yg-404-faser { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; display: grid; gap: .35rem; }
.yg-404-faser a { display: inline-flex; align-items: center; gap: .6rem; color: var(--yg-grafit); font-weight: 700; }
.yg-404-faser .yg-tt-off { fill: var(--yg-skifer); }

/* ---------- Footer i kolonner ---------- */
.yg-fod { background: var(--yg-grafit); color: var(--yg-fodtekst); }
.yg-fod-skala { display: flex; align-items: flex-end; gap: 4px; height: 1.1rem; }
.yg-fod-skala span { flex: 1; background: var(--yg-puls); }
.yg-fod-skala span:nth-child(1) { height: 15%; } .yg-fod-skala span:nth-child(2) { height: 30%; }
.yg-fod-skala span:nth-child(3) { height: 45%; } .yg-fod-skala span:nth-child(4) { height: 60%; }
.yg-fod-skala span:nth-child(5) { height: 75%; }
.yg-fod-gitter { display: grid; gap: 1.75rem; padding-top: 2.25rem; padding-bottom: 1.75rem; }
.yg-fod-kol { min-width: 0; }
.yg-fod h2 { font: 600 .8rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em; color: var(--yg-puls); margin: 0 0 .7rem; }
.yg-fod .yg-fod-navn { font: 800 1.45rem/1.15 var(--yg-rubrik); text-transform: none; letter-spacing: -.01em; color: var(--yg-signal); }
.yg-fod p { margin: 0 0 .6rem; font-size: .93rem; max-width: 26rem; }
.yg-fod-note { color: var(--yg-hvid); font-weight: 700; }
.yg-fod ul, .yg-fod ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.yg-fod a { color: var(--yg-fodtekst); text-decoration: none; display: inline-flex; align-items: center; min-height: 2rem; }
.yg-fod a:hover { color: var(--yg-hvid); text-decoration: underline; text-decoration-color: var(--yg-puls); }
.yg-fod a[aria-current="page"] { color: var(--yg-puls); }
.yg-fod-faser li { display: flex; align-items: center; gap: .6rem; }
.yg-fod-faser .yg-tt-off { fill: var(--yg-kant); opacity: 1; }
.yg-fod-bund {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem;
  padding-top: 1rem; padding-bottom: 1.5rem; border-top: 1px solid var(--yg-kant); font-size: .85rem; color: var(--yg-foddaemp);
}
.yg-fod-bund p { margin: 0; font-size: .85rem; }

/* ---------- Større skærme ---------- */
@media (min-width: 30rem) {
  .yg-sm-datoer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .yg-ramme { padding-left: 1.5rem; padding-right: 1.5rem; }
  .yg-kort { padding: 2rem 1.75rem 1.6rem; }
  .yg-vt-hoved { grid-template-columns: 5rem 1fr; padding: 1.4rem 1.5rem; gap: 1.25rem; }
  .yg-vt-ring, .yg-vt-ring .yg-ring { width: 5rem; height: 5rem; }
  .yg-sl-styr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1.5rem; }
  .yg-sl-taeller { margin: 0; }
  .yg-sl-knapper { margin-left: auto; }
  .yg-vt-status { flex-basis: 100%; margin: 0; }
  .yg-sl-gruppe { padding: 1.1rem 1.5rem .7rem; }
  .yg-sm-felter { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.4rem 1.5rem; gap: 1.2rem 1.4rem; }
  .yg-sm-tid { grid-column: 1 / -1; }
  .yg-sm-ud { padding: 1.4rem 1.5rem 1.5rem; }
  .yg-vt-note { padding: .9rem 1.5rem; }
  .yg-fod-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yg-formular { padding: 1.6rem 1.75rem; }
  .yg-404 { grid-template-columns: auto 1fr; gap: 2.5rem; padding-top: 4rem; }
  .yg-404-ring, .yg-404-ring .yg-ring { width: 12rem; height: 12rem; }
}

@media (min-width: 48rem) {
  .yg-logo svg { width: 15rem; }
  .yg-topnote {
    display: flex; align-items: center; gap: .55rem; margin: 0 0 0 .5rem; padding-left: 1.1rem;
    border-left: 1px solid var(--yg-kant); color: var(--yg-foddaemp);
    font: 600 .78rem/1.2 var(--yg-rubrik); text-transform: uppercase; letter-spacing: .12em;
  }
  .yg-topnote .yg-minitrappe { width: 1.3rem; }
  .yg-menu-gitter { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
  .yg-start { padding: 2.75rem 0 3.5rem; }
  .yg-start-gitter { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 3rem; }
  .yg-start-tekst:only-child { grid-column: 1 / -1; }
  .yg-start-tekst:only-child h1 { max-width: 20ch; }
  .yg-start-lead { font-size: 1.25rem; }
}

@media (min-width: 60rem) {
  .yg-faser { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; align-items: stretch; }
  .yg-trin {
    width: 100%; min-width: 0; align-items: flex-end;
    height: calc(3.6rem + var(--yg-n) * 1.7rem); margin-top: calc((5 - var(--yg-n)) * 1.7rem);
    padding: .55rem .55rem .5rem .7rem;
  }
  .yg-trin-nr { font-size: 2.2rem; }
  .yg-trin-ring { align-self: flex-start; width: 2.3rem; height: 2.3rem; }
  .yg-fase-kort { padding: .85rem .85rem 1rem; }
  .yg-fase-kort h3 { font-size: 1.2rem; }
  .yg-fase-kort p { font-size: .9rem; }
  .yg-fase-links li { font-size: .92rem; }
  .yg-hjem-gitter { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
  .yg-hjem-hoved { max-width: 50rem; }
  .yg-vtp { position: sticky; top: 1rem; }
  .yg-fod-gitter { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
}

@media (min-width: 64rem) {
  .yg-opslag { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 2.75rem; }
  .yg-artikel { max-width: 50rem; }
  .yg-fasekort { position: sticky; top: 1rem; margin-top: 1rem; }
  .yg-kort { padding: 2.25rem 2.5rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .yg-top, .yg-fod, .yg-naeste, .yg-fasekort, .yg-sl-styr, .yg-sti, .yg-spring { display: none !important; }
  body { background: #fff; }
  .yg-vaerktoej, .yg-kort { border: 0; box-shadow: none; }
  .yg-kort::before, .yg-kort::after { display: none; }
  .yg-vt-hoved { background: #fff; color: #000; }
  .yg-vt-hoved h2 { color: #000; }
}
