/* Ophuggerkatalog – stilark
   Udtryk: en rolig, dansk søgetjeneste. Lyse flader, mørk skifergrå tekst, blå til handlinger.
   Nummerplademotivet bor kun i logoet; pladerød bruges sparsomt. Kortet og de rigtige oplysninger er billedet. */

:root {
  --tekst: #25323b;
  --tekst-blid: #52616b;
  --flade: #f3f6f8;
  --papir: #ffffff;
  --streg: #dce3e7;
  --streg-staerk: #b4c0c7;
  --felt-kant: #86929b;
  --blaa: #245aa0;
  --blaa-moerk: #1a4580;
  --blaa-lys: #e9f0f9;
  --plade-roed: #c8102e;
  --eu-blaa: #003399;
  --fejl: #b3261e;
  --advarsel: #8a5a00;
  --advarsel-flade: #fdf6e7;
  --bredde: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
  --knap-hoejde: 52px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titel: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--papir);
}
img, svg { max-width: 100%; }
a { color: var(--blaa); text-underline-offset: .18em; }
a:hover { color: var(--blaa-moerk); }
:focus-visible { outline: 3px solid var(--blaa); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--font-titel); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; color: var(--tekst); }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 700; max-width: 20ch; }
h2 { font-size: clamp(1.45rem, 1.25rem + .7vw, 1.8rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 68ch; }
.ingress { font-size: 1.125rem; color: var(--tekst); max-width: 58ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.spring { position: absolute; left: -999px; top: 8px; background: var(--papir); padding: 8px 12px; z-index: 1000; }
.spring:focus { left: 8px; }

/* ---------- Top ---------- */
.top { border-bottom: 1px solid var(--streg); background: var(--papir); }
.top-indre {
  max-width: var(--bredde); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-titel); font-weight: 700; font-size: 1.3rem;
  color: var(--tekst); text-decoration: none;
}
.logo-maerke {
  width: 30px; height: 16px; border: 2.5px solid var(--plade-roed); border-radius: 3px;
  background: linear-gradient(90deg, var(--eu-blaa) 0 7px, var(--papir) 7px);
}
.top-nav { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.top-nav a { color: var(--tekst); text-decoration: none; font-weight: 500; padding: 6px 0; }
.top-nav a:hover { color: var(--blaa); text-decoration: underline; }

.krumme { max-width: var(--bredde); margin: 0 auto; padding: 14px var(--gutter) 0; font-size: .95rem; }
.krumme ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.krumme li + li::before { content: "/"; color: var(--tekst-blid); margin-right: 6px; }
.krumme span { color: var(--tekst-blid); }

main { display: block; }

/* ---------- Fælles bredde ---------- */
.side-top, .omraader-indre, .viden-indre, .cta-indre, .andre, .tekstside, .formular-gitter, .ophug-top, .ophug-gitter {
  max-width: var(--bredde); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter);
}
.side-top { padding-top: clamp(20px, 4vw, 44px); padding-bottom: 28px; }

/* ---------- Knapper ---------- */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--knap-hoejde); padding: 10px 22px; border-radius: var(--radius);
  font: 600 1.05rem/1.2 var(--font); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
}
.knap svg { flex: none; }
.knap-primaer { background: var(--blaa); color: #fff; }
.knap-primaer:hover { background: var(--blaa-moerk); color: #fff; }
.knap-sekundaer { background: var(--papir); color: var(--blaa); border-color: var(--blaa); }
.knap-sekundaer:hover { background: var(--blaa-lys); color: var(--blaa-moerk); }
.knap[disabled] { opacity: .6; cursor: progress; }

/* ---------- Søgning ---------- */
.soeg { margin-top: 24px; max-width: 460px; }
.soeg-label { display: block; font-weight: 600; margin-bottom: 6px; }
.soeg-raekke { display: flex; gap: 10px; }
.soeg-felt {
  flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 16px;
  border: 1.5px solid var(--felt-kant); border-radius: var(--radius); background: var(--papir);
  font: 500 1.25rem/1 var(--font); color: var(--tekst); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.soeg-felt::placeholder { color: #66737b; letter-spacing: 0; font-weight: 400; }
.soeg-felt:focus { outline: 3px solid var(--blaa); outline-offset: 1px; border-color: var(--blaa); }
.soeg-felt[aria-invalid="true"] { border-color: var(--fejl); }
.soeg-knap { flex: none; height: 54px; min-height: 54px; padding: 0 22px; }
.soeg-fejl { color: var(--fejl); font-weight: 600; margin: 8px 0 0; }
.soeg-hjaelp { margin: 6px 0 0; }
.placering-knap {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 2px;
  background: none; border: 0; cursor: pointer; font: 600 1rem var(--font); color: var(--blaa);
}
.placering-knap:hover span { text-decoration: underline; text-underline-offset: .18em; }
.placering-knap[disabled] { color: var(--tekst-blid); cursor: progress; }

/* ---------- Arbejdsfladen: søgning og liste + kort ---------- */
.arbejde { background: var(--papir); }
.arbejde-indre {
  max-width: var(--bredde); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
.resultat { margin-top: 32px; }
.resultat[hidden] { display: none; }
.resultat-titel { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); margin-bottom: .2em; }
.resultat-tekst { color: var(--tekst-blid); font-size: .97rem; margin-bottom: 12px; }

.kort { background: #e4e9ec; border: 1px solid var(--streg); border-radius: var(--radius); }
.kort-noscript { padding: 16px; }
.kort-lille { height: 320px; }
.kort-knap { display: none; }

/* Mobil: listen først, kortet bag en knap, så det ikke fanger rulningen */
@media (max-width: 959px) {
  .kort-knap { display: inline-flex; width: 100%; }
  .arbejde-kort .kort { display: none; height: 360px; margin-top: 12px; }
  .arbejde-kort.kort-aaben .kort { display: block; }
}
@media (min-width: 960px) {
  .arbejde-indre { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .arbejde-kort { position: sticky; top: 16px; }
  .kort-stor { height: clamp(420px, calc(100vh - 32px), 520px); }
  .kort-lille { height: 400px; }
}

/* Kortmarkører */
.kort-nr span, .kort-fokus span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.kort-nr span { background: var(--tekst); color: #fff; font: 700 13px/1 var(--font); }
.kort-nr.aktiv span { background: var(--blaa); box-shadow: 0 0 0 3px rgba(36, 90, 160, .35); }
.kort-fokus span { background: var(--blaa); border-width: 3px; }
.leaflet-marker-icon:focus-visible { outline: none; }
.leaflet-marker-icon:focus-visible span { outline: 3px solid var(--blaa); outline-offset: 2px; }
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content { margin: 12px 14px; font-size: .95rem; line-height: 1.4; }
.pop-navn { font-weight: 600; display: block; margin-bottom: 2px; }
.pop-adr { display: block; color: var(--tekst-blid); }

/* ---------- Resultatrækker ---------- */
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--streg); }
.raekke {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--streg);
}
.raekke.uden-km { grid-template-columns: minmax(0, 1fr) auto; }
.raekke-km {
  align-self: start; padding-top: 1px;
  font-family: var(--font-titel); font-weight: 700; font-size: 1.15rem; line-height: 1.4;
  font-variant-numeric: tabular-nums; color: var(--tekst); white-space: nowrap;
}
.raekke-tekst { position: relative; min-width: 0; }
.raekke-tekst:has(.raekke-nr) { padding-left: 34px; }
.raekke-top { margin: 0; max-width: none; }
.raekke-nr {
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--tekst); color: #fff; font: 700 .8rem/1 var(--font);
}
.raekke-navn {
  font-weight: 600; font-size: 1.08rem; line-height: 1.35; color: var(--tekst);
  text-decoration: underline; text-decoration-color: var(--streg-staerk); text-decoration-thickness: 1px; overflow-wrap: anywhere;
}
.raekke-navn:hover { color: var(--blaa); text-decoration-color: currentColor; }
.raekke-adr { display: block; color: var(--tekst-blid); font-size: .97rem; }
/* Ekstra link til profilen kun på telefon, hvor navnet er et lille mål. På desktop er navnet nok. */
.raekke-mere { display: none; margin-top: 2px; font-size: .93rem; font-weight: 500; }
@media (max-width: 600px) { .raekke-mere { display: inline-block; } }
.knap-ring {
  min-height: 44px; padding: 8px 14px; font-size: .98rem; white-space: nowrap;
  background: var(--papir); color: var(--blaa); border-color: var(--felt-kant);
}
.knap-ring:hover { border-color: var(--blaa); background: var(--blaa-lys); color: var(--blaa-moerk); }
/* Smal liste (mobil, eller venstre kolonne på en mindre desktop): ring-knappen under teksten */
.resultat, .andre { container-type: inline-size; }
@container (max-width: 520px) {
  .raekke { grid-template-columns: 3.9rem minmax(0, 1fr); }
  .raekke-km { font-size: 1.05rem; }
  .raekke .knap-ring { grid-column: 2; justify-self: start; margin-top: 8px; }
  .raekke.uden-km { grid-template-columns: minmax(0, 1fr); }
  .raekke.uden-km .knap-ring { grid-column: 1; }
  .raekke-tekst:has(.raekke-nr) ~ .knap-ring { margin-left: 34px; }
}
@media (max-width: 600px) {
  .raekke { grid-template-columns: 3.9rem minmax(0, 1fr); }
  .raekke-km { font-size: 1.05rem; }
  .raekke .knap-ring { grid-column: 2; justify-self: start; margin-top: 8px; }
  .raekke.uden-km { grid-template-columns: minmax(0, 1fr); }
  .raekke.uden-km .knap-ring { grid-column: 1; }
  .raekke-tekst:has(.raekke-nr) ~ .knap-ring { margin-left: 34px; }
}

/* ---------- Landsdele og byer ---------- */
.underomraader { margin-top: 18px; }
.underomraader ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.underomraader a { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--streg-staerk); border-radius: 999px; text-decoration: none; font-weight: 500; }
.underomraader a:hover { border-color: var(--blaa); background: var(--blaa-lys); }

.omraader { border-top: 1px solid var(--streg); }
.omraader-indre { padding-top: 44px; padding-bottom: 40px; }
.omraade-gitter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; margin-bottom: 40px; }
@media (min-width: 620px) { .omraade-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .omraade-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.omraade-gruppe h3 { margin-bottom: .3em; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font); }
.omraade-gruppe h3 a { color: var(--tekst); }
.link-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--streg); }
.link-liste a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 6px; border-bottom: 1px solid var(--streg); text-decoration: none; font-weight: 500;
}
.link-liste a:hover { background: var(--flade); }
.link-liste a:hover span:first-child { text-decoration: underline; }
.antal { color: var(--tekst-blid); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; font-weight: 400; }
.byer-titel { margin-top: 0; }
.by-liste {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--streg);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 32px;
}
.by-liste a { display: block; padding: 10px 6px; border-bottom: 1px solid var(--streg); text-decoration: none; font-weight: 500; }
.by-liste a:hover { background: var(--flade); text-decoration: underline; }

/* ---------- Godt at vide ---------- */
.viden { background: var(--flade); border-top: 1px solid var(--streg); }
.viden-indre { padding-top: 44px; padding-bottom: 36px; }
.viden-gitter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 48px; }
@media (min-width: 760px) { .viden-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.viden-gitter > div { border-top: 1px solid var(--streg-staerk); padding-top: 16px; }
.viden-gitter h3 { margin-bottom: .35em; }
.viden-gitter p { font-size: 1rem; }

/* ---------- Autoservice Denmarks eget tilbud ---------- */
.cta { background: var(--papir); padding: 44px 0 56px; }
.cta-indre > * { max-width: 62ch; }
.cta-indre {
  border: 1px solid var(--streg); border-top: 4px solid var(--plade-roed); border-radius: var(--radius);
  padding-top: 26px; padding-bottom: 28px;
}
@media (min-width: 760px) {
  .cta-indre { padding: 30px 36px 32px; max-width: calc(var(--bredde) - 2 * 40px); }
}
@media (max-width: 759px) { .cta-indre { margin-left: var(--gutter); margin-right: var(--gutter); padding: 22px 18px 24px; } }
.cta-afsender { font-size: .92rem; font-weight: 600; color: var(--tekst-blid); margin-bottom: 6px; }
.cta h2 { margin-bottom: .35em; }
.cta-note { color: var(--tekst-blid); font-size: .97rem; }

/* ---------- Ophugsprofil ---------- */
.ophug-top { padding-top: clamp(18px, 3vw, 36px); padding-bottom: 24px; }
.ophug-top h1 { max-width: 26ch; overflow-wrap: anywhere; }
.ophug-adr { font-size: 1.15rem; color: var(--tekst-blid); margin-bottom: 0; }
.ophug-knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ophug-gitter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 28px; }
@media (min-width: 900px) {
  .ophug-gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kontakt kort" "fakta kort" "kilde kort"; gap: 28px 48px; align-items: start; }
  .ophug-fakta { grid-area: fakta; }
  .ophug-kontakt { grid-area: kontakt; }
  .ophug-kort { grid-area: kort; position: sticky; top: 16px; }
  .ophug-kilde { grid-area: kilde; }
}
.ophug-kontakt h2, .ophug-kilde h2 { font-size: 1.3rem; }
.detaljer { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0 0 18px; border-top: 1px solid var(--streg); }
.detaljer dt, .detaljer dd { padding: 10px 0; border-bottom: 1px solid var(--streg); }
.detaljer dt { color: var(--tekst-blid); padding-right: 24px; }
.detaljer dd { margin: 0; overflow-wrap: anywhere; }
.ophug-spoerg { color: var(--tekst-blid); }
.ophug-kilde { background: var(--flade); border-radius: var(--radius); padding: 20px 22px 6px; font-size: .98rem; }
.data-advarsel { border-left: 4px solid #b7791f; background: var(--advarsel-flade); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; }
.andre { padding-top: 20px; padding-bottom: 24px; }

/* ---------- Formularer ---------- */
.formular-gitter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 56px; }
@media (min-width: 900px) { .formular-gitter { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.formular { max-width: 640px; }
.felt { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.felt label, .felt legend { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }
.felt-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@media (min-width: 640px) { .felt-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.felt input, .felt select, .felt textarea {
  width: 100%; min-height: var(--knap-hoejde); padding: 10px 12px; border: 1.5px solid var(--felt-kant); border-radius: var(--radius);
  font: inherit; color: var(--tekst); background: var(--papir);
}
.felt textarea { min-height: 96px; resize: vertical; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: 3px solid var(--blaa); outline-offset: 1px; border-color: var(--blaa); }
.felt [aria-invalid="true"] { border-color: var(--fejl); }
.felt-fejl { color: var(--fejl); font-weight: 600; font-size: .95rem; margin: 6px 0 0; }
.valg { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 400 !important; margin: 0 20px 6px 0; min-height: 32px; }
.valg input { width: 20px; height: 20px; min-height: 0; accent-color: var(--blaa); }
.valgfri { font-weight: 400; color: var(--tekst-blid); }
.vagt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-note { font-size: .97rem; color: var(--tekst-blid); }
.formular-svar { font-weight: 600; margin-top: 14px; }
.formular-svar.ok { color: #2e6b45; }
.formular-svar.fejl { color: var(--fejl); }
.formular-info { background: var(--flade); border-radius: var(--radius); padding: 22px 24px 8px; align-self: start; }
.formular-info h2 { font-size: 1.25rem; }
.trin { padding-left: 1.3em; margin: 0 0 24px; }
.trin li { margin-bottom: 8px; }

/* ---------- Tekstsider ---------- */
.tekstside { padding-top: clamp(20px, 4vw, 44px); padding-bottom: 56px; }
.tekstside h2 { margin-top: 1.4em; }
.tekstside h3 { margin-top: 1.1em; }

/* ---------- Bund ---------- */
.bund { background: var(--tekst); color: #e3e9ec; }
.bund-indre {
  max-width: var(--bredde); margin: 0 auto; padding: 36px var(--gutter) 44px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 40px; font-size: .97rem;
}
.bund a { color: #fff; }
.bund-navn { font-family: var(--font-titel); font-weight: 700; font-size: 1.2rem; color: #fff; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .top-nav, .kort, .kort-knap, .cta, .soeg, .bund { display: none !important; } }
.andre .liste { max-width: 880px; }

/* ---------- Det skriver de selv ---------- */
.ophug-fakta h2 { font-size: 1.3rem; }
.fakta-kilde, .fakta-tom { color: var(--tekst-blid); font-size: .97rem; }
.fakta { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 1px solid var(--streg); }
.fakta dt, .fakta dd { padding: 10px 0; border-bottom: 1px solid var(--streg); }
.fakta dt { color: var(--tekst-blid); padding-right: 24px; }
.fakta dd { margin: 0; min-width: 0; }
.fakta-status { display: inline-block; font-weight: 600; margin-right: 6px; }
.fakta-ja { color: #2e6b45; }
.fakta-betaling { color: var(--advarsel); }
.fakta-nej { color: var(--tekst); }
.fakta-ukendt { color: var(--tekst-blid); font-weight: 400; font-style: italic; }
.fakta-tekst { color: var(--tekst); }
.aabent { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.aabent th { text-align: left; font-weight: 400; color: var(--tekst-blid); padding: 0 16px 2px 0; }
.aabent td { padding: 0 0 2px; }
.raekke-maerker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.maerke { font-size: .82rem; font-weight: 500; color: var(--tekst); background: var(--flade); border: 1px solid var(--streg); border-radius: 999px; padding: 1px 10px; }