/* margo.dk — design system
   Retning hentet fra itm8.dk/ai: dyb violet som brandfarve, varm amber som
   sparsom accent, display-sans i overskrifter, og en side bygget som
   fuldbredde-bånd der skifter mellem lys, tonet og mørk.
   Farverne er beslægtede, ikke identiske — det er en retning, ikke en kopi.
   Skrifterne er self-hostede; ingen eksterne kald. */

/* ── skrifter ────────────────────────────────────────── */
@font-face{
  font-family:'Miriam Libre';
  src:url('/assets/fonts/MiriamLibre.woff2') format('woff2');
  font-weight:400 700;           /* variabel: én fil dækker begge vægte */
  font-style:normal; font-display:swap;
}
/* Kun 400 og 600 (500 droppet 2026-09-08, 24 KB): en font-weight:400 ville
   falde lydloest tilbage til 400 — skriv 400 eller 600. */
@font-face{
  font-family:'Fira Sans'; src:url('/assets/fonts/FiraSans-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fira Sans'; src:url('/assets/fonts/FiraSans-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ── tokens ──────────────────────────────────────────── */
:root{
  --ground:#FFFFFF;
  --raise:#FFFFFF;
  --alt:#F4F1F8;
  --sunk:#EFEBF4;
  --deep:#1B1026;
  --deep-2:#2A1A3B;

  --ink:#17141F;
  --ink-2:#4A4459;
  --muted:#6E687C;
  --line:#E4DFEC;
  --line-2:#CFC6DE;

  --accent:#5B2A86;
  --accent-ink:#46206A;
  /* Knapfyld har sit EGET token: i moerkt tema er --accent en lys lilla
     (læses lyserød), og den maa aldrig vaere fyld bag hvid tekst. */
  --knap:#5B2A86; --knap-hover:#46206A; --knap-varm:#8F5A02;
  --alt-lys:#FAF8FC;
  --boble-bund:#F6F2FA; --boble-glans:rgba(255,255,255,.85); --boble-kant:rgba(123,71,170,.55);
  --accent-lift:#7B47AA;
  --accent-wash:#F1EAF8;

  --warm:#8F5A02;
  --warm-wash:#FBF2E0;

  --on-deep:#F3EFF8;
  --on-deep-2:#BBAECC;

  --shadow:0 1px 2px rgba(23,20,31,.05), 0 10px 30px -14px rgba(23,20,31,.22);
  --shadow-lg:0 2px 6px rgba(23,20,31,.06), 0 24px 56px -28px rgba(23,20,31,.34);
  --r:16px;
  --maxw:1180px;
  --prose:68ch;
  --display:'Miriam Libre', Georgia, serif;
  --body:'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141019; --raise:#1C1725; --alt:#191320; --sunk:#231C2E;
    --deep:#0E0916; --deep-2:#1A1026;
    --ink:#EFEBF5; --ink-2:#C0B8CE; --muted:#8E869C;
    --line:#2C2438; --line-2:#3D3350;
    --accent:#B98FE0; --accent-ink:#CDAcEE; --accent-lift:#CBA6EC; --accent-wash:#241A33;
    --knap:#7B47AA; --knap-hover:#8E5BBE; --knap-varm:#B87503;
    --alt-lys:#171121;
    --boble-bund:#191322; --boble-glans:rgba(255,255,255,.07); --boble-kant:rgba(203,166,236,.40);
    --warm:#E0A94F; --warm-wash:#2A2214;
    --on-deep:#F3EFF8; --on-deep-2:#B6A8C9;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 56px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#141019; --raise:#1C1725; --alt:#191320; --sunk:#231C2E;
  --deep:#0E0916; --deep-2:#1A1026;
  --ink:#EFEBF5; --ink-2:#C0B8CE; --muted:#8E869C;
  --line:#2C2438; --line-2:#3D3350;
  --accent:#B98FE0; --accent-ink:#CDACEE; --accent-lift:#CBA6EC; --accent-wash:#241A33;
  --knap:#7B47AA; --knap-hover:#8E5BBE; --knap-varm:#B87503;
  --alt-lys:#171121;
    --boble-bund:#191322; --boble-glans:rgba(255,255,255,.07); --boble-kant:rgba(203,166,236,.40);
  --warm:#E0A94F; --warm-wash:#2A2214;
  --on-deep:#F3EFF8; --on-deep-2:#B6A8C9;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 56px -28px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (max-width:600px){body{font-size:16.5px}}
img{max-width:100%;height:auto}
a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-lift)}

/* ── shell ───────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
@media (max-width:600px){.wrap{padding:0 18px}}
.prose{max-width:var(--prose)}

/* ── header ──────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:700;letter-spacing:-.01em;font-size:17.5px;
  color:var(--ink);text-decoration:none;flex:none;
}
.brand:hover{color:var(--ink)}
/* ⚠ FASTE farver, ikke tokens (2026-09-01): favicon.svg er #7B47AA→#5B2A86
   i begge temaer, men --accent/--accent-lift bliver LYS lilla i moerkt tema,
   saa prikken og fanebladsikonet var to forskellige maerker. Samme gradient
   og retning som make_icon.py, samme radius (4/13). */
.brand .dot{
  width:13px;height:13px;border-radius:4px;flex:none;
  background:linear-gradient(135deg,#7B47AA,#5B2A86);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.menu-btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 15px 9px 17px;border-radius:99px;cursor:pointer;
  font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink);background:transparent;border:1.5px solid var(--line-2);
  transition:background .16s,border-color .16s,color .16s;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-ink)}
.menu-btn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.menu-btn-label{line-height:1}
@media (max-width:420px){.menu-btn-label{display:none} .menu-btn{padding:10px;gap:0}}

/* de tre streger, der bliver til et kryds */
.menu-bars{position:relative;width:17px;height:12px;flex:none;display:block}
.menu-bars i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .24s cubic-bezier(.5,.2,.2,1),opacity .16s;
}
.menu-bars i:nth-child(1){top:0}
.menu-bars i:nth-child(2){top:5px}
.menu-bars i:nth-child(3){top:10px}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ── menupanel ───────────────────────────────────────
   Uden JS ligger menuen som en almindelig linkrække under
   headeren; .js flytter den ud i panelet. */
.menu-btn{display:none}
.js .menu-btn{display:inline-flex}

/* uden JS: en almindelig linkrække under headeren */
.menu{
  max-width:var(--maxw);margin:0 auto;padding:8px 26px 14px;
  border-bottom:1px solid var(--line);
}
.menu-inner{display:flex;gap:4px;flex-wrap:wrap}
@media (max-width:600px){.menu{padding:8px 18px 14px}}
.menu a{
  padding:8px 13px;border-radius:9px;white-space:nowrap;
  font-size:15px;font-weight:400;color:var(--ink-2);text-decoration:none;
}
.menu a:hover{background:var(--sunk);color:var(--ink)}
.menu a[aria-current="page"]{background:var(--accent);color:#fff;font-weight:600}
.menu .menu-i,.menu .menu-head{display:none}

.js .menu{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(400px,86vw);display:block;padding:0;margin:0;
  background:var(--deep);color:var(--on-deep);
  background-image:radial-gradient(620px 420px at 90% 0%, rgba(123,71,170,.42), transparent 62%);
  border-left:1px solid rgba(255,255,255,.09);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.6);
  transform:translateX(101%);
  transition:transform .34s cubic-bezier(.4,.02,.2,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.js .menu[data-open="true"]{transform:translateX(0)}
@media (prefers-reduced-motion: reduce){.js .menu{transition:none}}

.js .menu-inner{padding:96px 34px 40px;display:flex;flex-direction:column;gap:2px}
.js .menu-head{
  display:block;font-family:var(--body);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-deep-2);
  margin:0 0 20px;padding-left:2px;
}
.js .menu a{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);letter-spacing:-.015em;
  color:var(--on-deep);padding:12px 15px;border-radius:11px;white-space:normal;
  border:1px solid transparent;transition:background .15s,border-color .15s;
}
.js .menu a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.13)}
.js .menu a[aria-current="page"]{
  background:rgba(255,255,255,.11);color:#fff;
  border-color:rgba(255,255,255,.2);
}
.js .menu .menu-i{
  display:block;font-family:var(--body);font-size:12.5px;font-weight:600;
  color:var(--accent-lift);letter-spacing:.06em;flex:none;min-width:2.2ch;
  font-variant-numeric:tabular-nums;
}

.js .menu a[aria-current="page"] .menu-i{color:#fff}

.menu-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(12,8,18,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s;
}
.menu-backdrop[hidden]{display:none}
.menu-backdrop[data-open="true"]{opacity:1}
body.menu-open{overflow:hidden}

/* ── typografi ───────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;
  line-height:1.14;letter-spacing:-.018em;margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(2.3rem,1.5rem + 3.2vw,3.9rem);letter-spacing:-.028em;line-height:1.06}
h2{font-size:clamp(1.65rem,1.25rem + 1.6vw,2.5rem);margin-top:0}
h3{font-size:clamp(1.16rem,1.05rem + .5vw,1.4rem);margin-top:1.9em}
h4{font-size:1.05rem;margin-top:1.6em;color:var(--ink-2)}
h3:first-child,h4:first-child{margin-top:0}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.12rem,1.02rem + .45vw,1.4rem);color:var(--ink-2);line-height:1.55}
/* "Lad os tage en uforpligtende og gratis snak" skal staa paa hoejst to linjer.
   Maalt i Miriam Libre: den laengste af de to linjer ("Lad os tage en
   uforpligtende") er 13,72 em, saa der er plads til to linjer naar
   font-size <= (100vw - 36px) / 13,72. Med ~5 %% luft: 6.93vw - 2.5px.
   min() gør at almindelig h2-stoerrelse vinder, saa snart skaermen er bred nok.
   ⚠ Aendres teksten, skal 13,72 maales om.  */
.kicker{
  display:inline-block;font-family:var(--body);
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-wash);
  padding:6px 13px;border-radius:99px;margin:0 0 20px;
}
strong,b{font-weight:600;color:var(--ink)}
small,.small{font-size:14.5px;color:var(--muted);line-height:1.55}
ul,ol{margin:0 0 1.05em;padding-left:1.3em}
li{margin:.36em 0}
li::marker{color:var(--accent);font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0}

/* ── bånd: sidens rytme ──────────────────────────────── */
section{padding:clamp(52px,6.5vw,96px) 0;background:var(--ground)}
.section-tight{padding:clamp(32px,4vw,56px) 0}
.band-alt{background:var(--alt)}
.band-lys{background:var(--alt-lys)}
.band-deep{
  background:var(--deep);color:var(--on-deep);
  background-image:radial-gradient(1100px 460px at 12% -12%, rgba(123,71,170,.42), transparent 62%);
}
.band-deep h1,.band-deep h2,.band-deep h3,.band-deep strong{color:var(--on-deep)}
.band-deep .lede,.band-deep p{color:var(--on-deep-2)}
.band-deep .kicker{color:#E7DAF6;background:rgba(255,255,255,.12)}
.band-deep a{color:#DFC9F5}

/* ── hero ────────────────────────────────────────────── */
.hero{
  padding:clamp(60px,8vw,124px) 0 clamp(56px,7vw,104px);
  background:var(--deep);color:var(--on-deep);
  background-image:
    radial-gradient(980px 420px at 10% -18%, rgba(123,71,170,.5), transparent 60%),
    radial-gradient(760px 380px at 92% 8%, rgba(184,117,3,.18), transparent 58%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hero h1{color:var(--on-deep);margin-bottom:.36em}
.hero .lede,.hero p{color:var(--on-deep-2);max-width:64ch}
.hero .kicker{color:#E7DAF6;background:rgba(255,255,255,.13)}
.hero a{color:#DFC9F5}
.hero .prose{max-width:64ch}

/* ── knapper ─────────────────────────────────────────── */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:11px;font-family:var(--body);
  font-size:15.5px;font-weight:600;text-decoration:none;
  border:1.5px solid transparent;transition:background .15s,border-color .15s,transform .1s,color .15s;
}
.btn:active{transform:translateY(1px)}
/* Nuancer i knapfyldet (2026-09-01): et lodret lysfald + indvendig
   kant + farvet skygge. background-image lever OVEN paa --knap, saa
   .hero-overriden (background:#fff, shorthand) stadig nulstiller alt. */
.btn-primary{
  background:var(--knap);color:#fff;border-color:transparent;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%,rgba(0,0,0,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -12px var(--knap);
}
.btn-primary:hover{background:var(--knap-hover);border-color:transparent;color:#fff;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%,rgba(0,0,0,.16))}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--sunk);color:var(--ink);border-color:var(--accent)}
.hero .btn-ghost,.band-deep .btn-ghost{color:var(--on-deep);border-color:rgba(255,255,255,.3)}
.hero .btn-ghost:hover,.band-deep .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-primary,.band-deep .btn-primary{background:#fff;color:var(--deep);border-color:#fff}
.hero .btn-primary:hover,.band-deep .btn-primary:hover{background:#EFE6F8;color:var(--deep)}

/* ── kort / grid ─────────────────────────────────────── */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{
  position:relative;background:var(--raise);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--shadow);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.card h3{margin-top:0;font-size:1.14rem}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card-plain{
  background:var(--raise);box-shadow:none;
  border-top:3px solid var(--accent);
}
.card-plain:hover{transform:none;box-shadow:var(--shadow)}
.band-alt .card,.band-alt .card-plain{background:var(--raise)}

/* ── trappen ─────────────────────────────────────────── */
.ladder{display:grid;gap:0;margin-top:8px;counter-reset:rung}
.rung{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:28px 0;border-top:1px solid var(--line);
}
.rung:last-child{border-bottom:1px solid var(--line)}
.rung-n{
  counter-increment:rung;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--accent-lift),var(--accent));color:#fff;
  font-family:var(--display);font-weight:700;font-size:17px;
  box-shadow:0 6px 16px -8px var(--accent);
}
.rung-n::before{content:counter(rung)}
.rung-b{min-width:0}
.rung h3{margin:3px 0 .4em;font-size:1.2rem}
.rung p{margin-bottom:.75em;color:var(--ink-2)}
.rung p:last-child{margin-bottom:0}
.upkeep{
  display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-2);background:var(--accent-wash);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:10px;padding:8px 14px;margin-top:5px;
}
.upkeep b{font-weight:600;color:var(--accent-ink)}
.rung-break{
  margin:30px 0 0;padding:14px 20px;border-radius:12px;
  background:var(--warm-wash);border:1px solid color-mix(in srgb,var(--warm) 34%,transparent);
  color:var(--warm);font-size:14.5px;font-weight:600;
}
@media (max-width:520px){
  .rung{grid-template-columns:1fr;gap:12px}
  .rung-n{width:38px;height:38px;font-size:15px;border-radius:11px}
}

/* ── fremhævninger ───────────────────────────────────── */
.note{
  border-left:4px solid var(--accent);background:var(--accent-wash);
  padding:20px 22px;border-radius:0 12px 12px 0;margin:1.7em 0;
}
.note.warn{border-left-color:var(--warm);background:var(--warm-wash)}
.note > :last-child{margin-bottom:0}
.note .label{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px;
}
.note.warn .label{color:var(--warm)}
.band-deep .note{background:rgba(255,255,255,.07);border-left-color:var(--accent-lift)}
.band-deep .note .label{color:#DFC9F5}
blockquote{
  margin:1.9em 0;padding:0 0 0 24px;border-left:3px solid var(--accent);
  font-size:1.16rem;line-height:1.55;color:var(--ink-2);
}
blockquote > :last-child{margin-bottom:0}

/* ── tabeller ────────────────────────────────────────── */
.tw{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.7em 0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--raise);
  box-shadow:var(--shadow);
}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
caption{caption-side:top;text-align:left;padding:16px 18px 0;font-size:14px;color:var(--muted)}
th,td{padding:13px 17px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{
  position:sticky;top:0;background:var(--accent);color:#fff;
  font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;border-bottom:0;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--accent-wash)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-name{font-weight:600;color:var(--ink)}
.t-sub{display:block;font-size:13.5px;color:var(--muted);font-weight:400;margin-top:3px}

/* ── pills ───────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;
  font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;
}
.pill-in{background:var(--accent-wash);color:var(--accent-ink);
  border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.pill-over{background:var(--warm-wash);color:var(--warm);
  border-color:color-mix(in srgb,var(--warm) 30%,transparent)}
.pill-under{background:var(--sunk);color:var(--muted);border-color:var(--line-2)}

/* ── details ─────────────────────────────────────────── */
details{
  border:1px solid var(--line);border-radius:13px;background:var(--raise);
  margin:.8em 0;overflow:hidden;box-shadow:var(--shadow);
}
summary{
  padding:16px 20px;cursor:pointer;font-weight:600;font-size:16px;
  list-style:none;display:flex;align-items:center;gap:12px;color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);transition:transform .18s;margin-left:2px;
}
details[open] > summary::before{transform:rotate(45deg)}
summary:hover{background:var(--accent-wash)}
details[open] > summary{background:var(--accent-wash)}
.details-body{padding:4px 20px 20px;border-top:1px solid var(--line)}
.details-body > :first-child{margin-top:16px}
.details-body > :last-child{margin-bottom:0}

/* ── indholdsfortegnelse ─────────────────────────────── */
.toc{
  background:var(--raise);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:0 0 2.6rem;box-shadow:var(--shadow);
}
.toc h2{font-family:var(--body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:36px;font-size:15.5px}
.toc li{margin:.3em 0;break-inside:avoid}
@media (max-width:600px){.toc ol{columns:1}}

/* ── sidefod ─────────────────────────────────────────── */
.site-foot{
  border-top:1px solid rgba(255,255,255,.08);background:var(--deep);color:var(--on-deep-2);
  padding:52px 0 60px;font-size:15px;
  background-image:radial-gradient(760px 300px at 88% -40%, rgba(123,71,170,.32), transparent 62%);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:flex-start}
.site-foot p{margin:0 0 .5em;max-width:54ch}

/* slank sidefod (2026-09-08): ét <p>, én linje paa desktop — copyright · CVR ·
   adresse · mail · Privatliv — og tre linjer paa telefon, alle venstrestillede:
   .foot-sep skjules, og de to .foot-adr (adressen og "mail · Privatliv")
   bliver blokke. Den hoejrestillede <nav> med Privatliv er vaek: paa telefon
   landede den midt ud for de tre linjer. Links uden understregning — den
   lysere farve baerer dem, understregning ved hover. */
.site-foot.slim{padding:26px 0 30px;font-size:14.5px}
.site-foot.slim .wrap{align-items:center;gap:10px 24px}
.site-foot.slim p{margin:0;max-width:none}
.foot-adr{white-space:nowrap}
.foot-cvr{white-space:nowrap}   /* bliver paa copyright-linjen, ogsaa paa telefon */
.site-foot.slim p a{color:var(--on-deep);text-decoration:none}
.site-foot.slim p a:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55)}
@media (max-width:600px){.foot-sep{display:none}.foot-adr{display:block;margin-top:2px}}

/* ── procesdiagram ───────────────────────────────────
   Tre trin med pile imellem. Vandret på bred skærm, lodret på
   smal — pilen roterer med, så flowet aldrig bliver tvetydigt. */
.proces{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;counter-reset:proces;
}
.proces-trin{
  counter-increment:proces;position:relative;
  background:var(--raise);border:1px solid var(--line);
  border-top:3px solid var(--accent);border-radius:var(--r);
  padding:28px 24px 26px;box-shadow:var(--shadow);
}
.proces-n{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent-lift),var(--accent));color:#fff;
  font-family:var(--display);font-weight:700;font-size:18px;
  box-shadow:0 6px 16px -8px var(--accent);margin:0 0 16px;
}
.proces-n::before{content:counter(proces)}
.proces-trin h3{
  margin:0 0 .4em;font-size:clamp(1.12rem,1.02rem + .45vw,1.3rem);
}
.proces-trin p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
/* kortene kan stå med badge + overskrift alene — ingen efterladt margen */
.proces-trin > :last-child{margin-bottom:0}
.proces-trin a{display:block;text-decoration:none;color:inherit}
.proces-trin a > :last-child{margin-bottom:0}
.proces-trin:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent)}

/* det trin man står på — inverteret, så det ikke kan misforstås */
.proces-trin.er-her,
.proces-trin.er-her:hover{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 12px 30px -16px var(--accent);transform:none;
}
.proces-trin.er-her h3{color:#fff}
.proces-trin.er-her .proces-n{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.proces-trin.er-her::after{
  content:"Du læser om dette trin";
  display:block;margin-top:10px;font-family:var(--body);
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

/* pilen mellem trinnene */
.proces-trin + .proces-trin::before{
  content:"";position:absolute;z-index:1;
  width:11px;height:11px;
  border-top:2.5px solid var(--accent);border-right:2.5px solid var(--accent);
  left:-14px;top:50%;transform:translateY(-50%) rotate(45deg);
}
@media (max-width:760px){
  .proces{grid-template-columns:1fr;gap:26px}
  .proces-trin + .proces-trin::before{
    left:50%;top:-19px;transform:translateX(-50%) rotate(135deg);
  }
}

/* ── formular ────────────────────────────────────────── */
.form{max-width:36rem;margin:2rem 0 0}
.field{margin:0 0 20px}
.field label{
  display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  margin:0 0 7px;letter-spacing:.01em;
}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16.5px;color:var(--ink);
  background:var(--raise);border:1.5px solid var(--line-2);border-radius:11px;
  padding:13px 15px;-webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:190px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
/* honeypot: usynlig for mennesker, udfyldes af bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-msg{
  border-left:4px solid var(--accent);background:var(--accent-wash);
  padding:16px 20px;border-radius:0 12px 12px 0;margin:0 0 1.8rem;
}
.svartid{margin:0 0 10px;color:var(--ink-2)}
.efter-knap{margin:14px 0 0}
.form-msg.err{border-left-color:var(--warm);background:var(--warm-wash);color:var(--warm)}
.form-msg > :last-child{margin-bottom:0}
.form-msg strong{color:inherit}
[hidden]{display:none!important}

/* ── kontaktknap nederst i menupanelet ───────────────── */
.js .menu-cta{
  margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
}
.js .menu-cta a{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:0;
  background:#fff;color:var(--deep);border:1.5px solid #fff;
  padding:13px 24px;border-radius:11px;width:100%;
}
.js .menu-cta a:hover{background:#EFE6F8;color:var(--deep);border-color:#EFE6F8}
.menu-cta{margin-left:8px}
.menu-cta a{font-weight:600}

/* ── taleboblen om kontaktformularen (2026-09-01, 3. udgave) ──
   Kuverten (1. og 2. udgave, flap-femkant med clip-path) er afloest af en
   TALEBOBBEL paa brugerens oenske. Laeseren er den, der taler ("Beskriv
   jeres opgave"), saa halen peger ned mod venstre — laeserens side.
   Kanten: gradient-kant via to baggrunde (fyld paa padding-box, gradient
   paa border-box, gennemsigtig border) — det virker MED border-radius, hvor
   clip-path ikke gjorde. Indvendig lyskant i toppen, svag violet glans
   oeverst til hoejre, og lagdelt violet-tonet skygge.
   Halen er en inline-SVG (.boble-hale, i build.py) lagt OVEN paa kanten:
   dens fyld daekker kantlinjen i det stykke, og kun de to ydre sider er
   streget — en CSS-border kan ikke aabnes paa ét stykke. Farverne styres
   herfra; ingen style=-attributter (CSP'en forbyder dem).
   ⚠ Skyggen ligger som drop-shadow paa den YDRE .boble, saa den foelger
   halen. box-shadow paa .boble-inder ville stoppe ved hjoernerne.
   ⚠ Halens fyld SKAL vaere --boble-bund — den farve fyldgradienten ender i.
   Aendres gradienten, skal halen med, ellers faar den en synlig soem.
   ⚠ Geometri: SVG'en er 40×24 px og staar bottom:-20px, saa dens oeverste
   4 px ligger inde i boblen. Kantlinjen (1,5 px) ligger dermed i y=2,5–4 i
   SVG-koordinater, og stregen starter i y=3,25 — midt i den. Halen staar
   ved left:44px, uden for det nederste venstre hjoernes radius (22px). */
.boble{margin-top:1.6rem;position:relative;
  filter:drop-shadow(0 1px 2px rgba(23,20,31,.08)) drop-shadow(0 22px 44px rgba(59,31,96,.18));
}
.boble-inder{
  position:relative;border:1.5px solid transparent;
  border-radius:28px 28px 28px 22px;padding:36px 32px 32px;
  background:
    radial-gradient(520px 260px at 92% -12%, rgba(123,71,170,.10), transparent 62%) padding-box,
    linear-gradient(180deg,var(--raise),var(--boble-bund)) padding-box,
    linear-gradient(180deg,var(--boble-kant),var(--line-2) 70%) border-box;
  box-shadow:inset 0 1px 0 var(--boble-glans);
}
.boble-hale{position:absolute;left:44px;bottom:-20px;width:40px;height:24px;display:block;pointer-events:none}
.boble-hale .hale-fyld{fill:var(--boble-bund)}
.boble-hale .hale-kant{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .boble-inder{border-radius:22px 22px 22px 18px;padding:28px 20px 26px}
  .boble-hale{left:32px}
}

/* ── diverse ─────────────────────────────────────────── */
/* ── portraettet under Om (2026-09-08, tredje udgave: fritlagt "sticker") ──
   Billedet er fritlagt (gennemsigtig WebP), og bagpladen er CSS: en afrundet
   plade i --accent-wash (foelger temaet), samme tone som kickeren over den
   og kortenes ikonfelter. Pladen fylder den nederste, kvadratiske del af
   boksen; hovedet stikker op over den, og en violet skygge af silhuetten
   giver dybde. Billedets bund klippes med pladens hjoerneradius (clip-path),
   saa skjorten foelger pladen. Ingen farver bagt ind i billedet.
   Placering (4. udgave, 2026-09-08): grid med omraader. Telefon: foto + navn
   paa én linje, teksten i fuld bredde under. Floaten (3. udgave) gav ragget
   ombrydning og navnet oppe ved hovedet.
   5. udgave (2026-09-09, hans valg efter mock-up af tre placeringer): fra
   720 px staar navn + rolle UNDER billedet som billedtekst i fotokolonnen,
   og teksten er én ren spalte over begge raekker fra billedets top. Raekkerne
   er auto 1fr, saa navnet sidder lige under pladen og ikke skubbes ned af
   tekstens hoejde. Navnet beholder mobilens 1.25rem: "Martin Grove" i 1.4rem
   maaler 149 px, én pixel bredere end kolonnen (148). */
.om-grid{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"foto navn" "tekst tekst";
  column-gap:18px;row-gap:16px;align-items:center;margin-top:.4rem;
}
.om-foto{grid-area:foto;position:relative;display:block;width:88px}
.om-navn{grid-area:navn;margin:0;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
/* rollelinjen (2026-09-08): synlig SEO — "AI-konsulent · Aarhus" under navnet.
   Skjult tekst er spam i Googles politik; ordene skal kunne laeses. */
.om-rolle{display:block;font-family:var(--body);font-weight:400;font-size:14.5px;color:var(--muted);letter-spacing:0;margin-top:3px}
.om-grid > .prose{grid-area:tekst}
.om-foto::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:88px;border-radius:18px;
  background:var(--accent-wash);   /* ensfarvet som kickeren og ikonfelterne — prikmoenstret roeg 2026-09-08 ("faa baggrunden til at matche") */
  box-shadow:var(--shadow);
}
.om-foto img{
  position:relative;display:block;width:100%;height:auto;
  clip-path:inset(0 round 0 0 18px 18px);
  filter:drop-shadow(0 6px 10px rgba(59,31,96,.28));
}
@media (min-width:720px){
  .om-grid{grid-template-areas:"foto tekst" "navn tekst";grid-template-rows:auto 1fr;column-gap:32px;row-gap:14px;align-items:start}
  .om-foto{width:148px;margin-top:6px}
  .om-foto::before{height:148px;border-radius:26px}
  .om-foto img{clip-path:inset(0 round 0 0 26px 26px)}
}

/* Knapperne under Om (2026-09-08): .btn-row + .btn-ghost fra oven; kun
   afstanden og pilen er egne. */
.om-links{margin-top:4px}
.om-links .btn svg{width:14px;height:14px;flex:none;opacity:.75}
.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:var(--knap);
  color:#fff;border-radius:0 0 10px 0;z-index:100;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent-lift);outline-offset:2px;border-radius:5px}
/* ══════════════════════════════════════════════════════════
   ÉT-SIDES-SITE (2026-08-31, runde 3)
   Alt indhold ligger nu paa forsiden; menupunkterne er ankre.
   ══════════════════════════════════════════════════════════ */

/* Bloed scroll til ankrene, men respekter systemets indstilling. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ⚠ .site-head er sticky og ~66px hoej. Uden scroll-margin lander et anker
   BAG headeren, saa overskriften er usynlig naar man klikker i menuen. */
[id]{scroll-margin-top:84px}
/* Sektionerne har deres egen toppolstring (52–96 px), saa ankeret maa ikke
   laegge 84 px oven i den (2026-09-08, telefon: "for meget luft over titel").
   Maal: ~22–30 px mellem headerens underkant og kickeren = header 66 + 22 −
   polstring, aldrig under 0 — en negativ vaerdi kunne blive afvist, og saa
   landede ankeret bag headeren igen. #pris, #former, #anatomi og #demo er
   ikke sektioner og beholder de 84 px: de har ingen egen polstring. */
section[id]{scroll-margin-top:max(0px, calc(88px - clamp(52px,6.5vw,96px)))}

/* ── topmenu (desktop) ───────────────────────────────────
   Maalt: de fire punkter + Kontakt + brandet fylder 643 px inkl.
   wrap-polstring, saa 760 px giver rigelig luft. Under det tager
   burgerknappen over. */
.menu-top{display:none}
.menu-top a{
  padding:8px 12px;border-radius:9px;white-space:nowrap;text-decoration:none;
  font-size:15px;font-weight:400;color:var(--ink-2);
  transition:background .15s,color .15s;
}
.menu-top a:hover{background:var(--sunk);color:var(--ink)}
.menu-top a[aria-current="true"]{color:var(--accent-ink);background:var(--accent-wash)}
.menu-top-cta{
  margin-left:8px;background:var(--knap);color:#fff !important;font-weight:600;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%,rgba(0,0,0,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -14px var(--knap);
}
.menu-top-cta:hover{background:var(--knap-hover);color:#fff !important}

@media (min-width:760px){
  .menu-top{display:flex;align-items:center;gap:2px;margin-left:auto}
  /* ⚠ Hoejere specificitet end `.js .menu-btn{display:inline-flex}`, ellers
     bliver burgerknappen staaende ved siden af topmenuen. */
  .site-head .menu-btn,.js .site-head .menu-btn{display:none}
  /* Topmenuen har margin-left:auto her. Specificiteten er noedvendig: .lang
     defineres LAENGERE NEDE i filen, saa en ren .lang-regel her ville tabe. */
  .site-head .lang{margin-left:0}
  .menu,.js .menu,.menu-backdrop{display:none}
}

/* ── afsnitsnummer: det grafiske brud mellem sektionerne ── */
.afsnit-n{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font-family:var(--body);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.afsnit-n span{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:10px;letter-spacing:0;font-size:13px;
  background:var(--accent-wash);color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.hero + section .afsnit-n{margin-top:0}


/* ══════════════════════════════════════════════════════════
   GRAFIK (2026-08-31, runde 7)
   Bad om "grafikker, illustrationer og brud i grafikken".
   ⚠ Alt herunder er geometrisk og paastaar INTET — ingen tal, ingen
   resultater, ingen cases. Det er der en grund til: sitet har endnu
   ingen eksempler, og en illustration maa ikke antyde noget, teksten
   ikke daekker.
   ══════════════════════════════════════════════════════════ */

/* ── heroens illustration ────────────────────────────────
   Illustrerer heroens EGEN saetning: ni opgaver, én valgt, ét resultat.
   aria-hidden, fordi den ikke tilfoejer information ud over teksten. */
.hero-grid{display:grid;gap:clamp(30px,5vw,56px);align-items:center}
.hero-fig{min-width:0}
.hero-fig svg{width:100%;height:auto;display:block;max-width:460px}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1fr minmax(300px,430px)}
  .hero-grid .lede{max-width:52ch}
}
@media (max-width:899px){
  .hero-fig{max-width:400px}
}

/* ── ikoner paa tilbudskortene ───────────────────────── */
.ikon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;margin-bottom:16px;
  background:var(--accent-wash);color:var(--accent);
}
.ikon svg{width:26px;height:26px;display:block}
.card .ikon + h3{margin-top:0}

/* ── baandovergang: en tynd accentkant paa de tonede baand,
      saa skiftet mellem sektionerne er et brud og ikke bare
      en anden nuance ────────────────────────────────────── */
.band-alt{position:relative}
.band-alt::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-lift) 22%,transparent 62%);
}

/* ── opgavevurderingen ───────────────────────────────────
   Ligger i #tilbud, fordi den ER afklaringen i miniature: de tre
   spoergsmaal, der afgoer om en opgave egner sig. */
.vurder{
  margin-top:2.2rem;background:var(--raise);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  padding:26px 26px 24px;box-shadow:var(--shadow);
}
.vurder > h3{margin-top:0;font-size:1.14rem}
.vurder-liste{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:18px}
.vurder-liste > li{padding-top:16px;border-top:1px solid var(--line)}
.vurder-liste > li > p{margin:0 0 .5em;font-size:15px;color:var(--ink-2);line-height:1.55}
.vurder-n{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink) !important;margin:0 0 6px !important;
}
.vurder-valg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vurder-valg button{
  font-family:var(--body);font-size:14.5px;font-weight:600;cursor:pointer;
  padding:8px 16px;border-radius:99px;border:1.5px solid var(--line-2);
  background:transparent;color:var(--ink-2);
  transition:border-color .15s,background .15s,color .15s;
}
.vurder-valg button:hover{border-color:var(--accent);color:var(--accent-ink)}
.vurder-valg button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.vurder-ud{
  margin-top:1.6rem;padding:18px 20px;border-radius:12px;
  background:var(--accent-wash);
}
.vurder-ud > :last-child{margin-bottom:0}
.vurder-ud p{font-size:15px;line-height:1.55}
.vurder-tal{
  font-family:var(--display);font-weight:700;font-size:1.14rem;
  color:var(--accent-ink);margin-top:0;
}
/* Uden JS er knapperne dekoration — skjul dem, saa ingen trykker forgaeves. */
html:not(.js) .vurder-valg{display:none}

/* ── ydelseskortene (2026-08-31, runde 9) ────────────────
   Brugeren: "for meget tekst og for lidt grafik". Kortene er derfor
   ét ikon, én titel og ÉN linje. Uddybningen hoerer til paa
   trin-siderne — ikke i et kort, man skal kunne skanne.
   ⚠ Eget gitter frem for .grid-2: med fire kort giver .grid-2 tre i
   raekken paa bred skaerm og efterlader ét alene. Her er det 2×2. */
.ydelse-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:2rem}
/* Luft mellem afsnittets delblokke. Uden den nulstiller .prose h3:first-child
   sin topmargin og klasker op ad kort 4 — fanget 2026-09-01. */
.luft{margin-top:3rem}
@media (min-width:720px){.ydelse-grid{grid-template-columns:1fr 1fr}}

.ydelse{position:relative;padding:30px 28px 26px;overflow:hidden}
/* Et stort, svagt farvefelt bag ikonet — grafisk vaegt uden at paastaa noget */
.ydelse::before{
  content:"";position:absolute;right:-38px;top:-38px;width:132px;height:132px;
  border-radius:50%;background:var(--accent-wash);opacity:.7;
}
.ydelse > *{position:relative}
.ydelse .ikon{
  width:60px;height:60px;border-radius:18px;margin-bottom:18px;
  background:var(--knap);color:#fff;
  background-image:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px -12px var(--knap);
}
.ydelse .ikon svg{width:32px;height:32px}
.ydelse h3{margin:0 0 .45em;font-size:1.28rem}
.ydelse p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.ydelse-maerke{
  position:absolute;top:0;right:0;margin:0 !important;
  font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--warm) !important;
}
/* "Ejerskab og opfoelgning" er maalet, ikke et trin — derfor den varme accent.
   Bundet til klassen .maal (sat i build.py), saa kortene kan flyttes rundt
   uden at accenten flytter med. Seks kort = 2x2x2 fra 720 px, ingen rest. */
.ydelse.maal::before{background:var(--warm-wash)}
.ydelse.maal .ikon{background:var(--knap-varm);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px -12px var(--knap-varm)}

/* ── "Hvad I staar med bagefter": skillens fire dele ─────
   ⚠ Beskriver FORMEN paa en leverance — ikke en kunde, ikke et resultat.
   Sitet har stadig ingen cases, og det her er ikke én. */
.anatomi{
  margin-top:3rem;padding:26px 26px 24px;border-radius:var(--r);
  background:var(--deep);color:var(--on-deep);
  background-image:radial-gradient(620px 300px at 88% -30%, rgba(123,71,170,.42), transparent 62%);
}
.anatomi h3{margin:0 0 .35em;color:var(--on-deep);font-size:1.2rem}
.anatomi .small{color:var(--on-deep-2);margin:0}
.anatomi-fil{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 0}
.anatomi-fil button{
  flex:1 1 150px;text-align:left;cursor:pointer;
  padding:11px 14px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:var(--on-deep-2);font-family:var(--body);font-size:14.5px;font-weight:400;
  transition:background .15s,border-color .15s,color .15s;
}
.anatomi-fil button span{
  display:block;font-family:var(--body);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;color:#E7DAF6;margin-bottom:3px;
}
.anatomi-fil button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* Fast farve: boksen er moerk i BEGGE temaer, og --accent-lift er lys
   i moerkt tema — hvid tekst skal have et fast, dybt fyld. Fyldet er den
   samme dybe lilla som knapperne i lyst tema (brugerens valg 2026-09-07,
   "hvis der skal skaeres en farve vaek"); den lysere lilla er kun kant, saa
   knappen staar frem paa den moerke bund. */
.anatomi-fil button[aria-selected="true"]{
  background:#5B2A86;border-color:#7B47AA;color:#fff;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%);
}
.anatomi-fil button[aria-selected="true"] span{color:#fff}
.anatomi-ud{margin-top:16px;font-size:15.5px;line-height:1.6}
.anatomi-ud p{margin:0;color:var(--on-deep-2)}
.anatomi-ud strong{color:var(--on-deep)}
html:not(.js) .anatomi-fil{display:none}

/* ── .former: hvad en skill og en koersel kan goere ────────────────────
   Tre faneblade med hver sin geometriske figur. ⚠ Figurerne paastaar
   INTET — ingen tal, ingen resultater, ingen kunder. De viser formen paa
   en opgave: hvad der gaar ind, hvad der koerer, hvad der kommer ud, og
   hvad der stadig skal kontrolleres.
   ⚠ Progressive enhancement: uden JS skjules fanebladsraekken, og ALLE
   tre paneler staar under hinanden som almindelig tekst. Panelerne maa
   derfor ikke baere `hidden` i markup'en — JS saetter det ved opstart. */
.former{margin-top:1.4rem}
/* ⚠ Kassen om .former er fjernet 2026-09-01 ("sitet er tungt grafisk") —
   fanebladene staar frit paa baandet, kun figuren og teksten baerer panelet. */
.former-fil{display:flex;flex-wrap:wrap;gap:8px}
/* ⚠ Samme stil som .demo-valg button (2026-09-07: "tre fanebladsstile" blev
   til én). Begge staar nu paa det tonede baand i #eksempel, saa fyldet er
   --raise — --alt ville forsvinde i baandet. Valgt = --knap begge steder. */
.former-fil button{
  flex:1 1 150px;cursor:pointer;padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--raise);color:var(--ink-2);
  font-family:var(--body);font-size:14.5px;font-weight:400;text-align:left;
  transition:background .15s,border-color .15s,color .15s;
}
.former-fil button:hover{border-color:var(--line-2);color:var(--ink)}
.former-fil button[aria-selected="true"]{
  background:var(--knap);border-color:var(--knap);color:#fff;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%);
}
.former-panel{display:grid;gap:26px;padding:22px 2px 6px;align-items:center}
@media (min-width:720px){.former-panel{grid-template-columns:minmax(0,240px) 1fr}}
.former-fig svg{display:block;width:100%;height:auto}
.former-panel p{margin:0 0 .6em;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.former-panel p:last-child{margin-bottom:0}
.former-panel strong{color:var(--ink)}
.former-kontrol{
  margin-top:.9em;padding-top:.8em;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted);
}
html:not(.js) .former-fil{display:none}
html:not(.js) .former-panel + .former-panel{border-top:1px solid var(--line)}

/* ── eksemplet: et opdigtet firma, tre opgaver (2026-09-02) ──
   Chatvindue med valgknapper. Uden JS staar den foerste opgave som
   faerdig markup, og knapperne er skjult. Ingen style=-attributter
   (CSP style-src 'self'), ingen data-URI'er (img-src 'self') —
   fluebenet og spinneren er tegnet i CSS. */
.demo{margin-top:2rem;max-width:760px}
.demo-valg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.demo-valg button{
  flex:1 1 150px;text-align:left;cursor:pointer;padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--raise);color:var(--ink-2);
  font-family:var(--body);font-size:14.5px;font-weight:400;
  transition:background .15s,border-color .15s,color .15s;
}
.demo-valg button span{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px;
}
.demo-valg button:hover{border-color:var(--line-2);color:var(--ink)}
.demo-valg button[aria-pressed="true"]{
  background:var(--knap);border-color:var(--knap);color:#fff;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%);
}
.demo-valg button[aria-pressed="true"] span{color:#fff}
.demo-vindue{
  background:var(--raise);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.demo-bar{
  display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:var(--alt);border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:400;color:var(--muted);
}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.demo-bar span{margin-left:8px}
.demo-log{padding:22px 20px 20px;display:grid;gap:14px;min-height:360px;align-content:start}
@media (max-width:600px){.demo-log{padding:18px 14px 16px}}
.d-msg{max-width:min(100%,46ch);padding:12px 16px;border-radius:16px;font-size:15.5px;line-height:1.5}
.d-msg p{margin:0}
.d-bruger{
  justify-self:end;background:var(--knap);color:#fff;border-bottom-right-radius:5px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%);
}
.d-system{
  justify-self:start;background:var(--warm-wash);color:var(--warm);font-weight:600;
  border:1px solid color-mix(in srgb,var(--warm) 30%,transparent);border-bottom-left-radius:5px;
}
.d-skill{
  justify-self:start;margin:0;display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 6px;border-radius:99px;font-size:13px;font-weight:400;
  color:var(--ink-2);background:var(--sunk);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.d-skill span{
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent-wash);
  padding:2px 8px;border-radius:99px;
}
.d-trin{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--ink-2);line-height:1.5}
.d-trin li{position:relative;padding-left:30px}
.d-trin li::before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line-2);
}
.d-trin li.d-nu::before{border-color:var(--accent);border-top-color:transparent;animation:d-spin .8s linear infinite}
.d-trin li.d-ok::before{background:var(--knap);border-color:var(--knap)}
.d-trin li.d-ok::after{
  content:"";position:absolute;left:6.5px;top:6px;width:4px;height:8px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
}
.d-ud{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 18px;border-radius:14px;max-width:56ch;
  background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  font-size:15px;line-height:1.5;
}
.d-ud p{margin:0 0 .45em;color:var(--ink-2)}
.d-ud p:last-child{margin-bottom:0}
.d-ud .d-ud-titel{font-weight:600;color:var(--ink)}
.d-ud ul{margin:.2em 0 .6em;padding-left:1.2em;color:var(--ink-2)}
.d-ud li{margin:.2em 0}
.d-ud-ikon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--knap);color:#fff;
  background-image:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
}
.d-ud-ikon svg{width:20px;height:20px;display:block}
.d-kontrol{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.demo-note{margin:12px 0 0}
.d-ind{animation:d-ind .32s ease-out}
@keyframes d-ind{from{opacity:0;transform:translateY(6px)}}
@keyframes d-spin{to{transform:rotate(360deg)}}
html:not(.js) .demo-valg{display:none}

/* ── sprogskifte (2026-09-09) ──────────────────────────────────
   Et rent link — ingen JS: CSP'en hasher det eneste inline-script, og et
   link er nok. Pillen sidder yderst i headeren paa begge layouts (efter
   topmenuen fra 760 px; FOER burgerknappen derunder, saa knappen sidder
   yderst — "menukort laengst til hoejre", 2026-09-09) og viser kun teksten
   "EN" / "DK" — flagene og sprogpunktet i burgerpanelet blev fjernet samme
   dag ("bare EN og DK i stedet for flag", "ikke i drop down paa tlf").
   margin-left:auto ligger paa pillen (ikke knappen): den skubber pille +
   knap til hoejre paa telefon; fra 760 px har topmenuen den, og pillen
   nulstilles. */
.lang{
  display:inline-flex;align-items:center;flex:none;margin-left:auto;
  padding:8px 12px;border-radius:99px;border:1.5px solid var(--line-2);
  font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;line-height:1;
  transition:background .16s,border-color .16s,color .16s;
  -webkit-tap-highlight-color:transparent;
}
.lang:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-ink)}