@font-face{font-family:"Plus Jakarta Sans";src:url(/indhold/fonts/plus-jakarta-sans-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/indhold/fonts/plus-jakarta-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bitter";src:url(/indhold/fonts/bitter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bitter";src:url(/indhold/fonts/bitter-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bitter";src:url(/indhold/fonts/bitter-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Gløgg.dk – opskriftsværksted.
   Ren hvid flade, gløggrød skinne til venstre, farveblokke i safran, kardemomme, appelsin og gløggrød.
   Mobil først. Alle klasser har præfikset vi-. */

:root {
  --vi-hvid: #FFFFFF;
  --vi-blaek: #230B29;
  --vi-daemp: #5E4A63;
  --vi-roed: #C8102E;
  --vi-roed-dyb: #9E0B23;
  --vi-appelsin: #FF7A1A;
  --vi-safran: #FFC234;
  --vi-groen: #00805C;
  --vi-tint: #FFEBEE;
  --vi-linje: #F2D3D9;
  --vi-r: 20px;
  --vi-r-lille: 12px;
  --vi-skinne: 17rem;
  --vi-tekst: 44rem;
  --vi-pad: 1rem;
  --vi-head: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --vi-body: "Bitter", Georgia, "Times New Roman", serif;
}

*, *::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(--vi-hvid); color: var(--vi-blaek);
  font-family: var(--vi-body); font-size: 1rem; line-height: 1.58;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vi-roed); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--vi-roed-dyb); }
:focus-visible { outline: 3px solid var(--vi-fokus, var(--vi-blaek)); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.vi-skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  padding: .6rem 1rem; border-radius: 999px; background: var(--vi-safran); color: var(--vi-blaek);
  font: 800 .95rem/1.2 var(--vi-head); text-decoration: none;
}
.vi-skip:focus { top: 1rem; }

/* ---------- Skal: skinne, indhold, note, alle sider, sidefod ---------- */
.vi-shell {
  display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh;
  grid-template-areas: "rail" "main" "note" "index" "foot";
}
.vi-rail { grid-area: rail; }
.vi-main { grid-area: main; min-width: 0; padding: 1.25rem var(--vi-pad) 2rem; }
.vi-note { grid-area: note; }
.vi-index { grid-area: index; }
.vi-foot { grid-area: foot; }

@media (min-width: 60rem) {
  :root { --vi-pad: clamp(1.5rem, 3.2vw, 3.75rem); }
  body { font-size: 1.0625rem; }
  .vi-shell {
    grid-template-columns: var(--vi-skinne) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "rail main" "index main" "index note" "foot foot";
  }
  .vi-main { padding-top: 2rem; padding-bottom: 2.25rem; }
}
@media (min-width: 100rem) { :root { --vi-skinne: 18.5rem; } }

/* ---------- Skinnen (hovedmenu) ---------- */
.vi-rail {
  --vi-fokus: var(--vi-safran);
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
  padding: .8rem var(--vi-pad) .9rem; background: var(--vi-roed); color: var(--vi-hvid);
}
.vi-brand { display: block; color: var(--vi-hvid); border-radius: 10px; }
.vi-brand svg { display: block; width: auto; height: 3.4rem; }
.vi-rail__jump {
  margin-left: auto; padding: .4rem .9rem; border: 2px solid var(--vi-hvid); border-radius: 999px;
  color: var(--vi-hvid); font: 800 .85rem/1.2 var(--vi-head); text-decoration: none;
}
.vi-rail__jump:hover { background: var(--vi-hvid); color: var(--vi-roed); }
.vi-mainnav { flex: 1 1 100%; }
.vi-mainnav__list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.vi-mainnav__link {
  display: block; padding: .32rem .8rem; border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px;
  color: var(--vi-hvid); font: 600 .9rem/1.25 var(--vi-head); text-decoration: none;
}
.vi-mainnav__link:hover { background: var(--vi-roed-dyb); color: var(--vi-hvid); }
.vi-mainnav__link[aria-current="page"] { background: var(--vi-hvid); border-color: var(--vi-hvid); color: var(--vi-roed); font-weight: 800; }

@media (min-width: 60rem) {
  .vi-rail { display: block; padding: 1.75rem 1.25rem 1.1rem; }
  .vi-brand { width: fit-content; }
  .vi-brand svg { width: 9.25rem; height: auto; }
  .vi-rail__jump { display: none; }
  .vi-mainnav { margin-top: 1.6rem; }
  .vi-mainnav__list { flex-direction: column; gap: .15rem; }
  .vi-mainnav__link { padding: .5rem .8rem; border: 0; border-radius: var(--vi-r-lille); font-size: 1.04rem; font-weight: 800; letter-spacing: -.01em; }
}

/* ---------- Alle sider (skinnens nederste del / bund på mobil) ---------- */
.vi-index { --vi-fokus: var(--vi-safran); background: var(--vi-roed); color: var(--vi-hvid); }
.vi-index__inner { padding: 1.6rem var(--vi-pad) 1.9rem; }
.vi-index__title { margin: 0 0 .8rem; font: 800 1.45rem/1.1 var(--vi-head); letter-spacing: -.03em; }
.vi-index__top {
  display: flex; flex-direction: column; margin: 0 0 1.1rem; padding: .7rem .9rem;
  border-radius: var(--vi-r-lille); background: var(--vi-hvid); color: var(--vi-roed);
  font: 800 1rem/1.2 var(--vi-head); text-decoration: none;
}
.vi-index__topsub { color: var(--vi-blaek); font-size: .78rem; font-weight: 600; }
.vi-index__top:hover { background: var(--vi-safran); color: var(--vi-blaek); }
.vi-index__group { margin: 0 0 1.1rem; }
.vi-index__label {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem;
  font: 800 .74rem/1.2 var(--vi-head); letter-spacing: .14em; text-transform: uppercase;
}
.vi-index__label::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 4px; background: var(--vi-safran); box-shadow: 0 0 0 2px var(--vi-hvid); }
.vi-index__group--vaerkstedet .vi-index__label::before { background: var(--vi-appelsin); }
.vi-index__group--praksis .vi-index__label::before { background: var(--vi-blaek); }
.vi-index__group--ekstra .vi-index__label::before { background: var(--vi-groen); }
.vi-index__list { margin: 0; padding: 0; list-style: none; }
.vi-index__link {
  display: block; padding: .28rem .6rem; border-radius: 10px;
  color: var(--vi-hvid); font: 600 .95rem/1.3 var(--vi-head); text-decoration: none;
}
.vi-index__link:hover { background: var(--vi-roed-dyb); color: var(--vi-hvid); }
.vi-index__link[aria-current="page"] { background: var(--vi-hvid); color: var(--vi-roed); font-weight: 800; }

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .vi-index__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .vi-index__title, .vi-index__top { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .vi-index__inner {
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    padding: 1.1rem 1.25rem 1.5rem; border-top: 2px solid rgba(255, 255, 255, .35); margin: 0 1.25rem; padding-inline: 0;
  }
  .vi-index__title { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .7rem; }
  .vi-index__top { font-size: .95rem; }
}

/* ---------- Alkohol-note ---------- */
.vi-note {
  display: flex; gap: .8rem; align-items: flex-start;
  margin: 0 var(--vi-pad) 1.75rem; padding: .95rem 1.1rem;
  border-radius: var(--vi-r); background: var(--vi-safran); color: var(--vi-blaek);
}
.vi-note__icon { flex: none; width: 2rem; height: 2rem; }
.vi-note__text { margin: 0; font: 800 .95rem/1.45 var(--vi-head); overflow-wrap: anywhere; }
@media (min-width: 60rem) { .vi-note { margin-bottom: 2.5rem; padding: 1.1rem 1.4rem; } .vi-note__text { font-size: 1rem; } }

/* ---------- Sidefod i kolonner ---------- */
.vi-foot { --vi-fokus: var(--vi-safran); padding: 2.2rem var(--vi-pad) 1.5rem; background: var(--vi-blaek); color: var(--vi-hvid); }
.vi-foot__cols { display: grid; gap: 1.6rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vi-foot__col--brand, .vi-foot__col:last-child { grid-column: 1 / -1; }
.vi-foot__name { margin: 0; font: 800 1.7rem/1 var(--vi-head); letter-spacing: -.04em; }
.vi-foot__tag { margin: .55rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .86); max-width: 24rem; }
.vi-foot__title { margin: 0 0 .55rem; color: var(--vi-safran); font: 800 .76rem/1.2 var(--vi-head); letter-spacing: .14em; text-transform: uppercase; }
.vi-foot__list { margin: 0; padding: 0; list-style: none; }
.vi-foot__item { padding: .14rem 0; }
.vi-foot__link { color: var(--vi-hvid); font: 600 .95rem/1.35 var(--vi-head); text-decoration-color: rgba(255, 255, 255, .45); }
.vi-foot__link:hover { color: var(--vi-safran); }
.vi-foot__link[aria-current="page"] { color: var(--vi-safran); }
.vi-foot__text { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .86); }
.vi-foot__base {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  margin: 1.8rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22);
  font: 600 .82rem/1.4 var(--vi-head); color: rgba(255, 255, 255, .86);
}
.vi-foot__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--vi-appelsin); }
@media (min-width: 60rem) {
  .vi-foot { display: grid; grid-template-columns: var(--vi-skinne) minmax(0, 1fr); padding: 2.6rem 0 1.6rem; }
  .vi-foot__cols { grid-column: 1 / -1; grid-template-columns: var(--vi-skinne) repeat(3, minmax(0, 1fr)); gap: 2rem 0; }
  .vi-foot__col, .vi-foot__col--brand, .vi-foot__col:last-child { grid-column: auto; padding-right: var(--vi-pad); }
  .vi-foot__col--brand { padding-left: 1.25rem; padding-right: 1.25rem; }
  .vi-foot__col:nth-child(2) { padding-left: var(--vi-pad); }
  .vi-foot__base { grid-column: 2; margin-left: var(--vi-pad); margin-right: var(--vi-pad); }
}

/* ---------- Farvetoner til blokke ---------- */
.vi-tone--safran { --vi-bg: var(--vi-safran); --vi-fg: var(--vi-blaek); --vi-swirl: rgba(255, 255, 255, .42); --vi-fokus: var(--vi-blaek); }
.vi-tone--appelsin { --vi-bg: var(--vi-appelsin); --vi-fg: var(--vi-blaek); --vi-swirl: rgba(255, 255, 255, .32); --vi-fokus: var(--vi-blaek); }
.vi-tone--groen { --vi-bg: var(--vi-groen); --vi-fg: var(--vi-hvid); --vi-swirl: rgba(0, 0, 0, .16); --vi-fokus: var(--vi-safran); }
.vi-tone--roed { --vi-bg: var(--vi-roed); --vi-fg: var(--vi-hvid); --vi-swirl: rgba(0, 0, 0, .17); --vi-fokus: var(--vi-safran); }
.vi-tone--blaek { --vi-bg: var(--vi-blaek); --vi-fg: var(--vi-hvid); --vi-swirl: rgba(255, 194, 52, .16); --vi-fokus: var(--vi-safran); }
.vi-tone--lys { --vi-bg: var(--vi-hvid); --vi-fg: var(--vi-blaek); --vi-swirl: rgba(200, 16, 46, .07); --vi-fokus: var(--vi-blaek); }

/* ---------- Forsiden: intro ---------- */
.vi-intro { margin: 0 0 1.5rem; container-type: inline-size; }
.vi-intro__media { margin: 2.25rem 0 0; }
.vi-intro__kicker {
  display: inline-block; margin: 0 0 .8rem; padding: .32rem .8rem; border-radius: 999px;
  background: var(--vi-appelsin); color: var(--vi-blaek);
  font: 800 .76rem/1.2 var(--vi-head); letter-spacing: .14em; text-transform: uppercase;
}
.vi-intro__title {
  margin: 0; font: 800 clamp(2.2rem, min(1.6rem + 3.8vw, 13.5cqi), 4.6rem)/.96 var(--vi-head); letter-spacing: -.05em;
  overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance;
}
.vi-intro__title::after { content: ""; display: block; width: 4.5rem; height: .5rem; margin-top: 1rem; border-radius: 999px; background: var(--vi-roed); }
.vi-intro__lead { max-width: 36rem; margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.5; }
.vi-jump__list { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.vi-jump__link {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem .3rem .3rem;
  border: 2px solid var(--vi-blaek); border-radius: 999px; color: var(--vi-blaek);
  font: 800 .88rem/1.2 var(--vi-head); text-decoration: none;
}
.vi-jump__num {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--vi-roed); color: var(--vi-hvid); font-size: .7rem; letter-spacing: 0;
}
.vi-jump__link:hover { background: var(--vi-blaek); color: var(--vi-hvid); }
.vi-intro__media { position: relative; isolation: isolate; padding: .65rem .65rem 0 0; }
.vi-intro__media::before {
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 58%; height: 58%;
  border-radius: var(--vi-r); background: var(--vi-safran);
}
.vi-hero { margin: 0; }
.vi-hero__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--vi-r); }
@media (min-width: 75rem) {
  .vi-home { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; }
  .vi-home > * { grid-column: 1 / -1; }
  .vi-home > .vi-intro { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 2rem; }
  .vi-home > .vi-intro__media { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 2rem; }
}

/* AI-mærkning ved billeder */
.vi-ai {
  display: flex; align-items: center; gap: .4rem; margin-top: .45rem;
  color: var(--vi-daemp); font: 600 .76rem/1.3 var(--vi-head);
}
.vi-ai::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--vi-appelsin); }

/* ---------- Brødtekst ---------- */
.vi-prose { max-width: var(--vi-tekst); overflow-wrap: anywhere; }
.vi-prose > :first-child { margin-top: 0; }
.vi-prose p, .vi-prose ul, .vi-prose ol, .vi-prose blockquote, .vi-prose table { margin: 0 0 .95em; }
.vi-prose h2 {
  margin: 1.9rem 0 .6rem; font: 800 clamp(1.45rem, 1.15rem + 1.1vw, 2rem)/1.08 var(--vi-head);
  letter-spacing: -.035em; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance;
}
.vi-prose h2::before { content: ""; display: block; width: 2.4rem; height: .36rem; margin-bottom: .55rem; border-radius: 999px; background: var(--vi-appelsin); }
.vi-prose h3, .vi-prose h4 { overflow-wrap: normal; }
.vi-prose h3 { margin: 1.5rem 0 .4rem; font: 800 1.2rem/1.2 var(--vi-head); letter-spacing: -.02em; }
.vi-prose h4 { margin: 1.3rem 0 .35rem; color: var(--vi-roed); font: 800 .85rem/1.3 var(--vi-head); letter-spacing: .1em; text-transform: uppercase; }
.vi-prose strong { font-weight: 700; }
.vi-prose ul { padding-left: 1.3rem; list-style: square; }
.vi-prose ul ul { list-style: circle; margin: .25rem 0 .3rem; }
.vi-prose li { margin: .2rem 0; padding-left: .15rem; }
.vi-prose li::marker { color: var(--vi-roed); }
.vi-prose li > p { margin: 0 0 .4em; }

/* Nummererede trin med runde tal */
.vi-prose > ol { padding-left: 0; list-style: none; counter-reset: vi-trin; }
.vi-prose > ol > li { position: relative; min-height: 1.9rem; margin: .5rem 0; padding-left: 2.65rem; counter-increment: vi-trin; }
.vi-prose > ol > li::before {
  content: counter(vi-trin); position: absolute; left: 0; top: -.05rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--vi-roed); color: var(--vi-hvid);
  font: 800 .9rem/1.9rem var(--vi-head); text-align: center;
}
.vi-prose ol ol { padding-left: 1.3rem; list-style: lower-alpha; }

.vi-prose blockquote {
  padding: .85rem 1.1rem; border-left: 6px solid var(--vi-appelsin); border-radius: 0 var(--vi-r) var(--vi-r) 0;
  background: var(--vi-hvid); box-shadow: inset 0 0 0 2px var(--vi-linje);
  font: 600 1.06rem/1.5 var(--vi-head);
}
.vi-prose blockquote p:last-child { margin-bottom: 0; }
.vi-prose hr { height: 4px; margin: 2rem 0; border: 0; border-radius: 999px; background: var(--vi-linje); }

/* Tabeller: rul vandret, hvis de ikke kan være der */
.vi-prose table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 3px solid var(--vi-roed); border-radius: var(--vi-r); border-collapse: separate; border-spacing: 0;
  font-size: .93rem; line-height: 1.42;
}
.vi-prose th, .vi-prose td { padding: .5rem .75rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.vi-prose thead th { background: var(--vi-roed); color: var(--vi-hvid); font: 800 .84rem/1.3 var(--vi-head); }
.vi-prose tbody td { border-top: 1px solid var(--vi-linje); }
.vi-prose tbody tr:nth-child(even) td { background: var(--vi-tint); }
.vi-prose tbody td:first-child { font-weight: 700; }
/* Mobil: tabellen går ud til skærmkanten og får mindre skrift, så den kan være der uden at rulle. */
@media (max-width: 39.99rem) {
  .vi-prose table {
    max-width: calc(100% + 2 * var(--vi-pad)); margin-inline: calc(-1 * var(--vi-pad));
    border-width: 3px 0; border-radius: 0; font-size: .82rem;
  }
  .vi-prose th, .vi-prose td { padding: .4rem .45rem; }
  .vi-prose th:first-child, .vi-prose td:first-child { padding-left: var(--vi-pad); }
  .vi-prose th:last-child, .vi-prose td:last-child { padding-right: var(--vi-pad); }
}

/* ---------- Forsiden: grundopskriften som opskriftskort ----------
   Kortet er afsnittet mellem første og anden ## i forsidens Markdown. */
.vi-prose--home { --vi-kp: 1rem; max-width: 50rem; }
.vi-prose--home > p:first-child { font-size: 1.08rem; }
.vi-prose--home > h2:first-of-type {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  margin: 1.6rem 0 0; padding: 1rem var(--vi-kp) .95rem;
  border-radius: var(--vi-r) var(--vi-r) 0 0; background: var(--vi-roed); color: var(--vi-hvid);
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.7rem); line-height: 1;
}
.vi-prose--home > h2:first-of-type::before {
  content: "01"; width: auto; height: auto; margin: 0; padding: .32rem .6rem;
  border-radius: 999px; background: var(--vi-safran); color: var(--vi-blaek);
  font-size: .8rem; letter-spacing: 0; line-height: 1;
}
.vi-prose--home > h2:first-of-type ~ :not(h2:nth-of-type(n+2), h2:nth-of-type(n+2) ~ *) {
  margin: 0; padding: .3rem var(--vi-kp) .55rem;
  border: 3px solid var(--vi-roed); border-top: 0; border-bottom: 0; background: var(--vi-hvid);
}
.vi-prose--home > h2:first-of-type ~ :is(:has(+ h2), :last-child):not(h2:nth-of-type(n+2), h2:nth-of-type(n+2) ~ *) {
  margin-bottom: 2.4rem; padding-bottom: 1.3rem;
  border-bottom: 3px solid var(--vi-roed); border-radius: 0 0 var(--vi-r) var(--vi-r);
}
/* Dag 1 og Dag 2 */
.vi-prose--home > h2:first-of-type ~ h3:not(h2:nth-of-type(n+2) ~ *) {
  display: flex; align-items: center; gap: .55rem;
  padding-top: 1.15rem; padding-bottom: .5rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
}
.vi-prose--home > h2:first-of-type ~ h3:not(h2:nth-of-type(n+2) ~ *)::before {
  content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 5px; background: var(--vi-appelsin);
}
.vi-prose--home > h2:first-of-type ~ h3:not(h2:nth-of-type(n+2) ~ *) ~ h3:not(h2:nth-of-type(n+2) ~ *) {
  padding-top: 1.4rem;
  background: linear-gradient(var(--vi-linje), var(--vi-linje)) top center / calc(100% - 2 * var(--vi-kp)) 3px no-repeat, var(--vi-hvid);
}
.vi-prose--home > h2:first-of-type ~ h3:not(h2:nth-of-type(n+2) ~ *) ~ h3:not(h2:nth-of-type(n+2) ~ *)::before { background: var(--vi-roed); }
/* Ingredienser som afkrydsningsliste */
.vi-prose--home > h2:first-of-type ~ ul:not(h2:nth-of-type(n+2) ~ *) { list-style: none; }
.vi-prose--home > h2:first-of-type ~ ul:not(h2:nth-of-type(n+2) ~ *) > li { position: relative; padding-left: 1.75rem; break-inside: avoid; }
.vi-prose--home > h2:first-of-type ~ ul:not(h2:nth-of-type(n+2) ~ *) > li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 1rem; height: 1rem;
  border: 2.5px solid var(--vi-roed); border-radius: 5px; background: var(--vi-hvid);
}
.vi-prose--home > h2:first-of-type ~ ol:not(h2:nth-of-type(n+2) ~ *) { padding-top: .5rem; }
.vi-prose--home > h2:first-of-type ~ ol:not(h2:nth-of-type(n+2) ~ *) > li { padding-left: 2.85rem; }
.vi-prose--home > h2:first-of-type ~ ol:not(h2:nth-of-type(n+2) ~ *) > li::before { width: 2.05rem; height: 2.05rem; line-height: 2.05rem; font-size: 1rem; }
.vi-prose--home > h2:first-of-type ~ p:not(h2:nth-of-type(n+2) ~ *) { font-size: .97rem; }
@media (min-width: 40rem) {
  .vi-prose--home { --vi-kp: 1.6rem; }
  .vi-prose--home > h2:first-of-type ~ ul:not(h2:nth-of-type(n+2) ~ *) { columns: 2; column-gap: 2rem; }
}

/* ---------- Forsidens afsnit ---------- */
.vi-sec { margin: 2.75rem 0 0; }
.vi-sechead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .9rem; align-items: end; margin: 0 0 1.1rem; }
.vi-sechead__num {
  grid-row: span 2; align-self: start; margin: 0; color: var(--vi-roed);
  font: 800 clamp(2.5rem, 1.9rem + 2.6vw, 3.8rem)/.85 var(--vi-head); letter-spacing: -.06em;
}
.vi-sechead__title { margin: 0; font: 800 clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem)/1.02 var(--vi-head); letter-spacing: -.04em; }
.vi-sechead__text { margin: .25rem 0 0; color: var(--vi-daemp); font-size: .98rem; }

/* Baser: farveblokke i bento */
.vi-bases__grid { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.vi-base { display: flex; }
.vi-base__link {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex: 1; flex-direction: column; gap: .45rem; min-height: 11.5rem; padding: 1.15rem 1.25rem 1.1rem;
  border-radius: var(--vi-r); background: var(--vi-bg); color: var(--vi-fg); text-decoration: none;
}
.vi-base__link::after {
  content: ""; position: absolute; z-index: -1; right: -3rem; bottom: -4.5rem;
  width: 11rem; height: 11rem; border-radius: 50%; background: var(--vi-swirl);
}
.vi-base__link::before {
  content: ""; position: absolute; z-index: -1; right: 4.5rem; bottom: 1.6rem;
  width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--vi-swirl); transform: rotate(18deg);
}
.vi-base__link:hover { color: var(--vi-fg); }
.vi-base__link:focus-visible { outline-color: var(--vi-blaek); }
.vi-base__link:hover .vi-base__go { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.vi-base__name { font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.02 var(--vi-head); letter-spacing: -.04em; }
.vi-base__desc { max-width: 40ch; font-size: .95rem; line-height: 1.45; }
.vi-base__go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .4rem; font: 800 .92rem/1.2 var(--vi-head); }
.vi-base__arrow { width: 1.15rem; height: 1.15rem; }
@media (min-width: 40rem) { .vi-bases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) {
  .vi-bases__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vi-base:nth-child(4n+1), .vi-base:nth-child(4n) { grid-column: span 4; }
  .vi-base:nth-child(4n+2), .vi-base:nth-child(4n+3) { grid-column: span 2; }
  .vi-base:nth-child(4n+1) .vi-base__link, .vi-base:nth-child(4n) .vi-base__link { min-height: 13rem; padding: 1.5rem 1.7rem 1.4rem; }
}

/* Værkstedet: fliser med billede */
.vi-bench__list { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.vi-tool {
  position: relative; display: flex; overflow: hidden;
  border: 3px solid var(--vi-appelsin); border-radius: var(--vi-r); background: var(--vi-hvid);
}
.vi-tool:hover { border-color: var(--vi-roed); }
.vi-tool:focus-within { outline: 3px solid var(--vi-blaek); outline-offset: 3px; }
.vi-thumb { position: relative; flex: 0 0 40%; margin: 0; }
.vi-thumb__img { width: 100%; height: 100%; min-height: 7.5rem; object-fit: cover; }
.vi-thumb__cap {
  position: absolute; left: .4rem; bottom: .4rem; margin: 0; padding: .15rem .5rem .15rem .4rem;
  border-radius: 999px; background: rgba(35, 11, 41, .86); color: var(--vi-hvid); font-size: .64rem; white-space: nowrap;
}
.vi-tool__ph { flex: 0 0 40%; display: grid; place-items: center; min-height: 7.5rem; background: var(--vi-safran); }
.vi-tool__phsvg { width: 70%; max-width: 9rem; height: auto; }
.vi-tool__body { flex: 1; min-width: 0; padding: .8rem .95rem .95rem; }
.vi-tool__title { margin: 0 0 .3rem; font: 800 1.2rem/1.15 var(--vi-head); letter-spacing: -.025em; }
.vi-tool__link { color: var(--vi-blaek); text-decoration: none; }
.vi-tool__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vi-tool__link:hover { color: var(--vi-roed); }
.vi-tool__link:focus-visible { outline: 0; }
.vi-tool__desc { margin: 0; color: var(--vi-daemp); font-size: .9rem; line-height: 1.45; }
@media (min-width: 40rem) {
  .vi-bench__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vi-tool { flex-direction: column; }
  .vi-thumb, .vi-tool__ph { flex: none; }
  .vi-thumb__img { height: auto; aspect-ratio: 16 / 10; }
  .vi-tool__ph { aspect-ratio: 16 / 10; }
  .vi-thumb__cap { left: .6rem; bottom: .6rem; font-size: .72rem; }
  .vi-tool__body { padding: 1rem 1.1rem 1.15rem; }
}
@media (min-width: 85rem) { .vi-bench__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Praksis: nummererede rækker */
.vi-steps__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: vi-praksis; }
.vi-step { display: flex; counter-increment: vi-praksis; }
.vi-step__link {
  display: grid; flex: 1; grid-template-columns: auto minmax(0, 1fr); gap: .15rem 1rem; align-items: center;
  padding: .95rem 1.1rem; border-radius: var(--vi-r); background: var(--vi-blaek); color: var(--vi-hvid); text-decoration: none;
  --vi-fokus: var(--vi-roed);
}
.vi-step__link::before {
  content: counter(vi-praksis, decimal-leading-zero); grid-row: span 2; align-self: start;
  color: var(--vi-safran); font: 800 2.1rem/1 var(--vi-head); letter-spacing: -.05em;
}
.vi-step__title { font: 800 1.12rem/1.2 var(--vi-head); letter-spacing: -.015em; }
.vi-step__desc { color: rgba(255, 255, 255, .86); font-size: .9rem; line-height: 1.42; }
.vi-step__link:hover { background: var(--vi-roed); color: var(--vi-hvid); }
.vi-step__link:hover::before { color: var(--vi-hvid); }
@media (min-width: 64rem) { .vi-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Flere artikler / oversigt */
.vi-more__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; max-width: 50rem; }
.vi-more__item { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 3px solid var(--vi-linje); border-radius: var(--vi-r); }
.vi-more__link { font: 800 1.08rem/1.25 var(--vi-head); }
.vi-more__desc { color: var(--vi-daemp); font-size: .92rem; }
.vi-homeend { max-width: 50rem; }

/* ---------- Artikler ---------- */
.vi-crumbs__list {
  display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin: 0 0 .85rem; padding: 0; list-style: none;
  color: var(--vi-daemp); font: 600 .84rem/1.4 var(--vi-head);
}
.vi-crumbs__item + .vi-crumbs__item::before { content: "/"; margin-right: .5rem; color: var(--vi-roed); font-weight: 800; }
.vi-crumbs__link { color: var(--vi-blaek); }

.vi-head {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 1.4rem; padding: 1.3rem 1.15rem 1.2rem;
  border-radius: var(--vi-r); background: var(--vi-bg); color: var(--vi-fg); container-type: inline-size;
}
.vi-tone--lys.vi-head { border: 3px solid var(--vi-roed); }
.vi-head::after {
  content: ""; position: absolute; z-index: -1; right: -4rem; top: -5rem;
  width: 15rem; height: 15rem; border-radius: 50%; background: var(--vi-swirl);
}
.vi-head__kicker {
  display: inline-block; margin: 0 0 .65rem; padding: .28rem .7rem; border-radius: 999px; background: var(--vi-swirl);
  font: 800 .74rem/1.2 var(--vi-head); letter-spacing: .14em; text-transform: uppercase;
}
.vi-head__title {
  max-width: 24ch; margin: 0; font: 800 clamp(1.9rem, min(1.35rem + 3vw, 11cqi), 3.6rem)/1.02 var(--vi-head);
  letter-spacing: -.045em; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance;
}
.vi-head__lead { max-width: 46rem; margin: .8rem 0 0; font-size: 1.06rem; line-height: 1.5; }
.vi-head__facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; }
.vi-head__fact {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; padding: .32rem .8rem;
  border-radius: 999px; background: var(--vi-swirl); font: 600 .84rem/1.3 var(--vi-head);
}
.vi-head__key { font-weight: 800; }
.vi-head__key::after { content: ":"; }
.vi-head__val { margin: 0; }
.vi-head__link { color: inherit; }
.vi-head__link:hover { color: inherit; text-decoration-thickness: 3px; }
@media (min-width: 60rem) { .vi-head { padding: 1.9rem 2.2rem 1.7rem; margin-bottom: 1.8rem; } }

.vi-paper__body { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 75rem) {
  .vi-paper__body { grid-template-columns: minmax(0, var(--vi-tekst)) minmax(14rem, 19rem); column-gap: clamp(2rem, 4vw, 4.5rem); }
  .vi-paper__side { position: sticky; top: 1.25rem; align-self: start; }
}
.vi-fig { margin: 0 0 1.5rem; }
.vi-fig__img { width: 100%; border-radius: var(--vi-r); }

.vi-side { padding: 1.1rem 1.2rem 1.25rem; border: 3px solid var(--vi-blaek); border-radius: var(--vi-r); border-top-width: 10px; }
.vi-side--baser { border-top-color: var(--vi-roed); }
.vi-side--vaerkstedet { border-top-color: var(--vi-appelsin); }
.vi-side--praksis { border-top-color: var(--vi-blaek); }
.vi-side__title { margin: 0; font: 800 1.3rem/1.1 var(--vi-head); letter-spacing: -.03em; }
.vi-side__text { margin: .35rem 0 .7rem; color: var(--vi-daemp); font-size: .9rem; line-height: 1.45; }
.vi-side__list { margin: 0 0 1rem; padding: 0; list-style: none; }
.vi-side__item { border-top: 2px solid var(--vi-linje); }
.vi-side__link { display: block; padding: .45rem 0; font: 800 .96rem/1.3 var(--vi-head); text-decoration: none; }
.vi-side__link:hover { text-decoration: underline; }
.vi-side__link[aria-current="page"] { color: var(--vi-blaek); }
.vi-side__link[aria-current="page"]::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: var(--vi-appelsin); vertical-align: .1em; }
.vi-side__back {
  display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: var(--vi-roed); color: var(--vi-hvid);
  font: 800 .9rem/1.2 var(--vi-head); text-decoration: none;
}
.vi-side__back:hover { background: var(--vi-roed-dyb); color: var(--vi-hvid); }

/* Spørgsmål og svar */
.vi-faq { margin: 2.4rem 0 0; }
.vi-faq__title, .vi-src__title { margin: 0 0 .8rem; font: 800 clamp(1.4rem, 1.2rem + .8vw, 1.8rem)/1.1 var(--vi-head); letter-spacing: -.035em; }
.vi-faq__list { display: grid; gap: .55rem; }
.vi-faq__item { padding: .85rem 1.1rem .9rem; border-left: 6px solid var(--vi-roed); border-radius: 0 var(--vi-r) var(--vi-r) 0; background: var(--vi-tint); }
.vi-faq__q { margin: 0 0 .3rem; font: 800 1.05rem/1.3 var(--vi-head); letter-spacing: -.01em; }
.vi-faq__a { margin: 0; overflow-wrap: anywhere; }

/* Kilder */
.vi-src { margin: 2.2rem 0 0; padding-top: 1rem; border-top: 3px solid var(--vi-blaek); }
.vi-src__title { font-size: 1.15rem; }
.vi-src__list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.vi-src__item { overflow-wrap: anywhere; }
.vi-src__host { color: var(--vi-daemp); font: 600 .8rem/1.3 var(--vi-head); }

/* Forrige og næste */
.vi-pager { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); max-width: calc(var(--vi-tekst) + 2rem); margin: 2.6rem 0 0; }
.vi-pager__link {
  display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.1rem;
  border: 3px solid var(--vi-blaek); border-radius: var(--vi-r); color: var(--vi-blaek); text-decoration: none;
}
.vi-pager__dir { color: var(--vi-roed); font: 800 .72rem/1.2 var(--vi-head); letter-spacing: .14em; text-transform: uppercase; }
.vi-pager__title { font: 800 1.06rem/1.25 var(--vi-head); letter-spacing: -.015em; }
.vi-pager__link:hover { background: var(--vi-blaek); color: var(--vi-hvid); }
.vi-pager__link:hover .vi-pager__dir { color: var(--vi-safran); }
@media (min-width: 40rem) {
  .vi-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vi-pager__link--next { grid-column: 2; text-align: right; }
}

/* ---------- Kontakt ---------- */
.vi-contact { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 75rem) { .vi-contact { grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); align-items: start; column-gap: 3rem; } }
.vi-formwrap > p[role="status"] {
  margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--vi-r-lille); background: var(--vi-safran);
  color: var(--vi-blaek); font: 800 .95rem/1.4 var(--vi-head);
}
.vi-form {
  position: relative; display: grid; gap: .9rem; padding: 1.2rem 1.15rem 1.3rem;
  border: 3px solid var(--vi-roed); border-radius: var(--vi-r); background: var(--vi-hvid);
}
.vi-form__head { margin: 0; color: var(--vi-roed); font: 800 1.3rem/1.1 var(--vi-head); letter-spacing: -.03em; }
.vi-form__row { display: grid; gap: .3rem; }
.vi-form__label { font: 800 .92rem/1.3 var(--vi-head); }
.vi-form__input {
  width: 100%; padding: .65rem .8rem; border: 2px solid var(--vi-blaek); border-radius: var(--vi-r-lille);
  background: var(--vi-hvid); color: var(--vi-blaek); font: inherit; font-size: 1rem;
}
.vi-form__input:focus-visible { outline: 3px solid var(--vi-roed); outline-offset: 2px; }
.vi-form__input--area { min-height: 9rem; resize: vertical; }
.vi-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vi-form__button {
  padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--vi-roed); color: var(--vi-hvid);
  font: 800 1rem/1.2 var(--vi-head); cursor: pointer;
}
.vi-form__button:hover { background: var(--vi-roed-dyb); }
.vi-form__note { margin: 0; color: var(--vi-daemp); font-size: .86rem; line-height: 1.45; }

/* ---------- 404 ---------- */
.vi-lost { max-width: 50rem; }
.vi-lost__block {
  position: relative; overflow: hidden; isolation: isolate; padding: 1.5rem 1.3rem 1.4rem;
  border-radius: var(--vi-r); background: var(--vi-roed); color: var(--vi-hvid);
}
.vi-lost__block::after { content: ""; position: absolute; z-index: -1; right: -3rem; top: -4rem; width: 13rem; height: 13rem; border-radius: 50%; background: rgba(0, 0, 0, .16); }
.vi-lost__code { margin: 0; color: var(--vi-safran); font: 800 clamp(4rem, 3rem + 6vw, 7.5rem)/.85 var(--vi-head); letter-spacing: -.06em; }
.vi-lost__title { margin: .6rem 0 0; font: 800 clamp(1.8rem, 1.3rem + 2.4vw, 3rem)/1.05 var(--vi-head); letter-spacing: -.04em; }
.vi-lost__text { max-width: 36rem; margin: .7rem 0 0; }
.vi-lost__list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 1.1rem 0 0; padding: 0; list-style: none; }
.vi-lost__link {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 3px solid var(--vi-blaek); border-radius: var(--vi-r);
  color: var(--vi-blaek); font: 800 1rem/1.2 var(--vi-head); text-decoration: none;
}
.vi-lost__num { color: var(--vi-roed); font-size: 1.3rem; letter-spacing: -.04em; }
.vi-lost__link:hover { background: var(--vi-blaek); color: var(--vi-hvid); }
.vi-lost__link:hover .vi-lost__num { color: var(--vi-safran); }

/* Udskrift: kun opskriften */
@media print {
  .vi-rail, .vi-index, .vi-foot, .vi-jump, .vi-pager, .vi-paper__side, .vi-skip { display: none; }
  .vi-shell { display: block; }
  .vi-head, .vi-base__link, .vi-step__link { background: none; color: #000; }
}

/* Ordafstand: den negative letter-spacing i de tætte overskrifter må ikke trække ordene sammen */
h1, h2, h3, h4 { word-spacing: .12em; }