@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("skrifter/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("skrifter/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("skrifter/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("skrifter/barlow-condensed-latin-600-normal.woff2") format("woff2")}
/* Layout: én venstrestillet spalte. Øverst en grøn tavle med søgningen, sat op som en vejtavle
   (hvid inderkant, navn til venstre, tal til højre). Under den prislisten på hvidt, som en tabel. */
:root {
  --groen: #00694b;        /* tavlegrøn */
  --groen-moerk: #004f39;
  --paa-groen: #ffffff;
  --paa-groen-daempet: #cfe6dc;
  --papir: #ffffff;
  --grund: #f1f4f1;
  --blaek: #17211c;
  --daempet: #55615a;
  --streg: #d3dad5;
  --gul: #ffd21f;          /* markering og fokus */
  --paa-gul: #17211c;
  --advarsel: #8a4b00;
  --advarsel-flade: #fff3d6;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --tekst: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --maal: 60rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --groen: #0a6e50; --groen-moerk: #0d5a43; --paa-groen: #ffffff; --paa-groen-daempet: #c4e0d4;
    --papir: #131a16; --grund: #0c120f; --blaek: #e8eee9; --daempet: #a4b1a9; --streg: #2b3530;
    --gul: #ffd21f; --paa-gul: #17211c; --advarsel: #f2b65c; --advarsel-flade: #3a2a0c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --groen: #0a6e50; --groen-moerk: #0d5a43; --paa-groen: #ffffff; --paa-groen-daempet: #c4e0d4;
  --papir: #131a16; --grund: #0c120f; --blaek: #e8eee9; --daempet: #a4b1a9; --streg: #2b3530;
  --gul: #ffd21f; --paa-gul: #17211c; --advarsel: #f2b65c; --advarsel-flade: #3a2a0c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papir); color: var(--blaek);
  font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }

.ramme { max-width: var(--maal); margin-inline: auto; padding-inline: 1rem; }

/* Top: navn og ydelserne */
.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; padding-block: 0.9rem; }
.navn { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.01em; text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 1rem; }
.top nav a { text-decoration: none; padding-block: 0.15rem; border-bottom: 3px solid transparent; }
.top nav a:hover { border-bottom-color: var(--streg); }
.top nav a[aria-current="page"] { border-bottom-color: var(--gul); }

/* Tavlen */
.tavle {
  background: var(--groen); color: var(--paa-groen);
  border-radius: 0.75rem; padding: 1.25rem 1.1rem 1.35rem;
  outline: 1.5px solid var(--paa-groen); outline-offset: -0.5rem;   /* vejtavlens hvide inderkant */
  display: grid; gap: 1rem;
}
.tavle > * { margin-inline: 0.5rem; min-width: 0; }
.tavle h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); letter-spacing: 0.005em; }
.tavle.ydelse { gap: 0.8rem; }
.tavle.ydelse h1 { font-size: clamp(2rem, 7.5vw, 3.2rem); }
.tavle .under { color: var(--paa-groen); font-weight: 500; max-width: 38rem; margin-top: -0.5rem; }
.tavlenote { color: var(--paa-groen-daempet); font-size: 0.9rem; max-width: 46rem; }
.tavle :focus-visible { outline-color: var(--gul); }

/* Forsidens tavle: en linje pr. ydelse med navn til venstre og pris til højre */
.ruter { list-style: none; margin: 0; padding: 0; display: grid; }
.ruter li + li { border-top: 2px solid var(--paa-groen); }
/* Hver linje er et link: navn og lokalt antal til venstre, landstallet til højre, pil yderst som på en vejtavle */
.ruter a { display: grid; grid-template-columns: 1fr auto 0.9rem; align-items: baseline; gap: 0.15rem 1rem;
  padding: 0.8rem 0.5rem; margin-inline: -0.5rem; text-decoration: none; border-radius: 0.3rem; }
.ruter a::after { content: ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end;
  width: 0.65rem; height: 0.65rem; border-top: 3px solid var(--paa-groen); border-right: 3px solid var(--paa-groen); transform: rotate(45deg); }
.ruter .rute { grid-column: 1; grid-row: 1; font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 7.5vw, 2.9rem); line-height: 1.05; }
.ruter .spaend { grid-column: 2; grid-row: 1; text-align: right; font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 5vw, 1.9rem); white-space: nowrap; }
.ruter .hvad { grid-column: 1; grid-row: 2; color: var(--paa-groen-daempet); font-size: 1rem; }
.ruter .land { grid-column: 2; grid-row: 2; text-align: right; color: var(--paa-groen-daempet); font-size: 0.9rem; white-space: nowrap; }
.ruter a:hover, .ruter a:focus-visible { background: var(--groen-moerk); }
.ruter a:hover .rute, .ruter a:focus-visible .rute { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.ruter a:hover::after, .ruter a:focus-visible::after { border-color: var(--gul); }

/* Søgning */
.soeg { display: grid; gap: 0.75rem; }
.feltfejl { background: var(--gul); color: var(--paa-gul); font-weight: 500; font-size: 0.97rem; padding: 0.3rem 0.6rem; border-radius: 0.3rem; justify-self: start; }
.felt input[aria-invalid="true"] { border-color: var(--gul); }
.tavlestatus { color: var(--paa-groen); font-weight: 500; }
.tavlestatus:empty { display: none; }
.felt { display: grid; gap: 0.3rem; position: relative; max-width: 24rem; }
.felt label, .gruppe legend { font-weight: 500; font-size: 0.95rem; }
.felt input {
  font: inherit; font-size: 1.2rem; font-weight: 500; padding: 0.5rem 0.7rem; width: 100%;
  border: 2px solid var(--paa-groen); border-radius: 0.4rem; background: var(--papir); color: var(--blaek);
}
.forslag { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 0.25rem 0 0; padding: 0.25rem; list-style: none;
  background: var(--papir); color: var(--blaek); border: 2px solid var(--blaek); border-radius: 0.4rem; }
.forslag button { font: inherit; display: block; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 0.25rem; }
.forslag button:hover, .forslag button:focus-visible { background: var(--gul); color: var(--paa-gul); outline: none; }
.gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.3rem; }
.gruppe legend { padding: 0; margin-bottom: 0.3rem; }
.valg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.valg label { position: relative; cursor: pointer; }
.valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.valg span { display: block; padding: 0.3rem 0.6rem; border: 2px solid var(--paa-groen); border-radius: 0.4rem; font-weight: 500; font-size: 0.97rem; white-space: nowrap; }
.valg input:checked + span { background: var(--gul); color: var(--paa-gul); border-color: var(--gul); }
.valg input:focus-visible + span { outline: 3px solid var(--gul); outline-offset: 2px; }
.kryds { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.kryds input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--gul); }
.rader { display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; align-items: start; }

/* Tekst omkring listen */
.om { display: grid; gap: 0.4rem; padding-block: 1rem 0; max-width: 42rem; }
.om.kort p { font-size: 0.95rem; line-height: 1.45; }
/* Forklaringen om, hvad prisen dækker. Den foldes sammen, når der er valgt et sted, så listen kommer højere op. */
details.om { display: block; padding-block: 0.8rem 0; }
details.om > summary { cursor: pointer; font-weight: 500; width: fit-content; padding-block: 0.15rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
details.om[open] > summary { text-decoration: none; }
details.om > p { margin-top: 0.4rem; }
.om .lille, .lille { color: var(--daempet); font-size: 0.95rem; }
.status { padding-block: 0.8rem 0.5rem; font-weight: 500; font-size: 1.1rem; scroll-margin-top: 0.5rem; max-width: 46rem; }
.status span { font-weight: 400; color: var(--daempet); }
.note { color: var(--daempet); font-size: 0.95rem; margin-top: -0.3rem; padding-bottom: 0.7rem; max-width: 46rem; }
.pakkenote { font-size: 0.95rem; max-width: 42rem; padding: 0.5rem 0.75rem; border-left: 4px solid var(--gul); background: var(--grund); }
.meld { padding-top: 1.5rem; font-size: 0.95rem; color: var(--daempet); }
.meld a { color: var(--blaek); font-weight: 500; }

/* Før der er valgt et sted: nøgletal for hele landet */
.start { display: grid; gap: 1rem; padding-top: 0.25rem; max-width: 46rem; }
dl.tal { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-top: 2px solid var(--blaek); }
dl.tal > div { padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--streg); }
dl.tal dt { color: var(--daempet); font-size: 0.95rem; }
dl.tal dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.15; white-space: nowrap; }
table.tal { border-collapse: collapse; width: 100%; border-top: 2px solid var(--blaek); font-size: 1rem; }
table.tal th, table.tal td { text-align: left; padding: 0.55rem 1rem 0.55rem 0; border-bottom: 1px solid var(--streg); vertical-align: baseline; }
table.tal thead th { color: var(--daempet); font-weight: 400; font-size: 0.95rem; }
table.tal tbody th { font-weight: 600; }
table.tal td { white-space: nowrap; }
table.tal td:last-child, table.tal th:last-child { padding-right: 0; }
.genveje { color: var(--daempet); }
.genveje a { color: var(--blaek); }

/* Prislisten */
.hoved { display: none; }
.liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--blaek); }
.liste > li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--streg); }
.liste > li > * { min-width: 0; }
.liste .vnavn { font-weight: 600; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.liste .adr { color: var(--daempet); overflow-wrap: anywhere; }
.liste .tal { text-align: right; white-space: nowrap; }
.liste .pris { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; }
.liste .km { color: var(--daempet); }
.liste .vilkaar { grid-column: 1 / -1; font-size: 0.95rem; display: grid; gap: 0.1rem; justify-items: start; }
.liste .kilde { color: var(--daempet); display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center; margin-top: 0.2rem; }
.liste .kilde a { color: var(--blaek); font-weight: 500; display: inline-block; padding: 0.2rem 0.6rem; text-decoration: none;
  border: 1.5px solid var(--blaek); border-radius: 0.35rem; }
.liste .kilde a:hover { background: var(--blaek); color: var(--papir); }
.maerke { margin-top: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 0.25rem;
  background: var(--advarsel-flade); color: var(--advarsel); font-size: 0.9rem; font-weight: 500; }
.sektion { padding-top: 2rem; display: grid; gap: 0.4rem; }
.sektion h2 { font-size: 1.7rem; }
.sektion p { max-width: 42rem; }
.sektion .liste { margin-top: 0.6rem; }
.tom { padding-block: 0.25rem 1rem; max-width: 40rem; display: grid; gap: 0.6rem; justify-items: start; }
.tom .mere { margin-top: 0.25rem; }
.mere { margin-top: 1rem; font: inherit; font-weight: 500; padding: 0.55rem 1rem; border: 2px solid var(--blaek); border-radius: 0.4rem; background: var(--papir); color: var(--blaek); cursor: pointer; }
.mere:hover { background: var(--blaek); color: var(--papir); }

@media (max-width: 45.99rem) {
  .tavle.ydelse { padding: 1rem 0.9rem 1.05rem; gap: 0.55rem; }
  .tavle.ydelse h1 { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .tavle.ydelse .soeg { gap: 0.55rem; }
  .tavle.ydelse .gruppe legend { margin-bottom: 0.15rem; }
  .tavle.ydelse .felt input { font-size: 1.1rem; padding: 0.4rem 0.65rem; }
  .tavle.ydelse .rader { gap: 0.5rem 1.5rem; }
  .kryds { font-size: 0.95rem; line-height: 1.3; }
  .ruter a { column-gap: 0.7rem; }
}
@media (min-width: 46rem) {
  .tavle { padding: 1.75rem 1.6rem 1.9rem; }
  .valg span { padding: 0.4rem 0.8rem; font-size: 1rem; }
  .hoved, .liste > li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 13.75rem; gap: 0.15rem 1.25rem; }
  .hoved { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 5.5rem 7rem; color: var(--daempet); font-size: 0.9rem; padding-bottom: 0.3rem; }
  .hoved span:nth-child(n+3) { text-align: right; }
  .liste > li { align-items: start; }
  .liste .hvem { grid-column: 1; grid-row: 1; }
  .liste .vilkaar { grid-column: 2; grid-row: 1; padding-top: 0.15rem; }
  .liste .tal { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 5.5rem 7rem; gap: 1.25rem; align-items: baseline; }
  .liste .km { order: 1; }
  .liste .pris { order: 2; }
}

/* Fod */
.fod { margin-top: 3rem; background: var(--grund); padding-block: 1.75rem 2.5rem; font-size: 0.95rem; }
.fod .ramme { display: grid; gap: 0.6rem; }
.fod .links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; }
.fod p { max-width: 44rem; color: var(--daempet); }
.fod a { color: var(--blaek); }

/* Tekstsider */
.tekstside { padding-block: 0.5rem 1rem; display: grid; gap: 1rem; max-width: 42rem; }
.tekstside h1 { font-size: 2.6rem; }
.tekstside h2 { font-size: 1.5rem; margin-top: 0.75rem; }
.tekstside dl { margin: 0; display: grid; gap: 0.35rem; }
.tekstside dt { font-weight: 600; }
.tekstside dd { margin: 0 0 0.5rem; }
.tekstside ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
@media (max-width: 30rem) {
  table.tal thead { display: none; }
  table.tal tr { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding-block: 0.55rem; border-bottom: 1px solid var(--streg); }
  table.tal th, table.tal td { border: 0; padding: 0; }
  table.tal tbody th { grid-column: 1 / -1; }
  table.tal td:nth-child(2)::after { content: " værksteder"; }
  table.tal td:nth-child(2) { color: var(--daempet); }
  table.tal td:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }