/* Elbilfrist — "Nummerpladen og nedtællingen" (8. okt. 2026)
   Palet: hvid #FFFFFF, asfaltlys #F1F2F4, asfalt #2B2D31 (tekst), pladerød #C8102E (accent),
   ladegrøn #1E9E5A (kun besparelsen). Skrifter: Saira Semi Condensed (overskrifter, pladen),
   Nunito Sans (brødtekst), DM Mono (beløb). Altid lyst tema. */
:root {
  --hvid: #FFFFFF;
  --lys: #F1F2F4;
  --asfalt: #2B2D31;
  --roed: #C8102E;
  --roed-moerk: #A50D26;
  --groen: #1E9E5A;
  --graa: #5E626B;
  --linje: #D6D9DE;
  --overskrift: "Saira Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --broed: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bredde: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--hvid); color: var(--asfalt); font-family: var(--broed); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--asfalt); text-decoration-color: var(--roed); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--roed); }
:focus-visible { outline: 3px solid var(--roed); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--overskrift); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; hyphens: manual; overflow-wrap: break-word; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem); max-width: 15ch; }
h2 { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-weight: 700; font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--bredde); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
.lead { font-size: 1.15rem; color: var(--asfalt); max-width: 36em; }
.small { font-size: .9rem; color: var(--graa); }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skjult { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* knapper */
.btn { display: inline-block; background: var(--roed); color: var(--hvid); font-family: var(--overskrift); font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; text-decoration: none; padding: .7em 1.3em; border-radius: 6px; border: 2px solid var(--roed); cursor: pointer; line-height: 1.1; }
.btn:hover { background: var(--roed-moerk); border-color: var(--roed-moerk); color: var(--hvid); }
.btn--lille { font-size: .98rem; padding: .5em 1em; }
.btn--streg { background: transparent; color: var(--asfalt); border-color: var(--asfalt); }
.btn--streg:hover { background: var(--asfalt); color: var(--hvid); border-color: var(--asfalt); }
.link { font-weight: 700; }

/* topmenu */
.top { background: var(--hvid); border-bottom: 1px solid var(--linje); position: sticky; top: 0; z-index: 10; }
.top__in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { text-decoration: none; color: var(--asfalt); display: inline-flex; }
.logo__plade { display: inline-block; font-family: var(--overskrift); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; background: var(--hvid); padding: 2px 10px; border-radius: 4px; box-shadow: 0 0 0 1px #C9CCD1, inset 0 0 0 2px var(--hvid), inset 0 0 0 4px var(--roed); line-height: 1.5; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav a:hover { color: var(--roed); }
@media (max-width: 820px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* hero */
.hero { background: var(--hvid); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-top: 56px; padding-bottom: 40px; }
.hero__tekst h1 { margin-bottom: .35em; }
.ur { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin: 0; }
.ur__tal { font-family: var(--overskrift); font-weight: 800; font-size: clamp(5rem, 3rem + 7vw, 9.5rem); line-height: .82; color: var(--roed); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ur__tekst { font-weight: 600; max-width: 15.5em; margin-top: .55em; }
.ur__tekst--slut { max-width: 20em; }
.ur--lille .ur__tal { font-size: clamp(3.6rem, 2.4rem + 4vw, 6rem); }
@media (max-width: 760px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 32px; padding-bottom: 28px; }
  .ur { flex-direction: row; align-items: center; gap: 14px; text-align: left; order: -1; }
  .ur__tal { font-size: 4.6rem; }
  .ur__tekst { margin-top: 0; }
}

/* vejen: asfaltlys bånd med pladen og søjlerne */
.vej { background: var(--lys); border-top: 6px solid var(--asfalt); position: relative; }
.vej::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='2'%3E%3Crect width='38' height='2' fill='%23fff'/%3E%3C/svg%3E") repeat-x; }
.vej__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 52px; align-items: start; }
@media (max-width: 900px) { .vej__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 32px; padding-bottom: 40px; } }

.plade-label { display: block; font-family: var(--overskrift); font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.plade { position: relative; display: flex; align-items: center; gap: 10px; background: var(--hvid); width: 100%; max-width: 560px; aspect-ratio: 520 / 112; min-height: 84px; padding: 0 8.5%; border-radius: 12px; box-shadow: 0 0 0 1px #BFC3C9, 0 2px 0 #BFC3C9, 0 10px 24px -14px rgba(43, 45, 49, .45), inset 0 0 0 7px var(--hvid), inset 0 0 0 11px var(--roed); }
.plade:focus-within { box-shadow: 0 0 0 1px #BFC3C9, 0 0 0 5px rgba(200, 16, 46, .25), inset 0 0 0 7px var(--hvid), inset 0 0 0 11px var(--roed); }
.plade__input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font-family: var(--overskrift); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.1rem); letter-spacing: .05em; color: var(--asfalt); text-align: center; padding: 0; outline: none; font-variant-numeric: tabular-nums; }
.plade__kr { font-family: var(--overskrift); font-weight: 700; font-size: clamp(1.2rem, .8rem + 1.6vw, 1.9rem); color: var(--asfalt); }
.plade__bolt { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #E4E6E9; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.plade__bolt:first-child { left: 3.2%; }
.plade__bolt:last-child { right: 3.2%; }
.valg { border: 0; padding: 0; margin: 16px 0 6px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.valg label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.valg input { accent-color: var(--roed); width: 18px; height: 18px; }
.plade-fejl { color: var(--roed); font-weight: 700; margin: 6px 0; }
.plade-knap { margin-top: 6px; }
.js-beregner .plade-knap { display: none; }

.soejler { display: flex; flex-direction: column; --maks: 230px; }
.soejler__par { display: flex; gap: 28px; align-items: flex-end; border-bottom: 2px solid var(--asfalt); padding: 0 6px; }
.soejle { flex: 1; max-width: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.soejle__kr { font-family: var(--mono); font-weight: 500; font-size: clamp(1.15rem, .9rem + .9vw, 1.55rem); margin-bottom: 8px; white-space: nowrap; }
.soejle__bar { display: block; width: 100%; height: calc(var(--h, 0) * var(--maks)); min-height: 3px; border-radius: 4px 4px 0 0; transition: height .35s ease; }
.soejle--2026 .soejle__bar { background: var(--asfalt); }
.soejle--2027 .soejle__bar { background: var(--roed); }
.soejler__aar { display: flex; gap: 28px; padding: 8px 6px 0; }
.soejler__aar span { flex: 1; max-width: 150px; font-family: var(--overskrift); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.spar { font-size: 1.15rem; font-weight: 700; margin: 22px 0 .4em; }
.spar__kr { font-family: var(--mono); font-weight: 500; color: var(--groen); font-size: 1.6rem; white-space: nowrap; }
.dom { margin-bottom: .5em; max-width: 30em; }
.soejler.is-tom .soejler__par, .soejler.is-tom .spar, .soejler.is-tom .dom { opacity: .35; }
@media (max-width: 600px) { .soejler { --maks: 150px; } .soejler__par, .soejler__aar { gap: 18px; } }

/* sektioner */
.sektion { padding: 72px 0; }
.sektion--lys { background: var(--lys); }
.sektion--taet { padding-top: 8px; }
.sektion__lead { max-width: 40em; }
@media (max-width: 600px) { .sektion { padding: 48px 0; } }

.trin { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.trin li { display: flex; gap: 16px; align-items: flex-start; }
.trin__nr { flex: none; font-family: var(--overskrift); font-weight: 800; font-size: 1.5rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; background: var(--hvid); box-shadow: 0 0 0 1px #BFC3C9, inset 0 0 0 3px var(--hvid), inset 0 0 0 5px var(--roed); }
.trin h3 { margin-bottom: .25em; }
.trin p { margin: 0; }
@media (max-width: 820px) { .trin { grid-template-columns: 1fr; gap: 22px; } }

/* kalenderstriben 21.-31. december */
.kalender { list-style: none; margin: 28px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.kalender__dag { background: var(--hvid); border: 1px solid var(--linje); border-radius: 6px; padding: 10px 6px 12px; text-align: center; min-height: 104px; display: flex; flex-direction: column; align-items: center; }
.kalender__ugedag { font-size: .8rem; color: var(--graa); font-weight: 600; }
.kalender__nr { font-family: var(--overskrift); font-weight: 800; font-size: 1.9rem; line-height: 1.1; }
.kalender__tekst { font-size: .78rem; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.kalender__dag--lukket { background: transparent; border-style: dashed; color: var(--graa); }
.kalender__dag--lukket .kalender__nr { color: #9A9EA5; }
.kalender__dag--sikker { background: var(--asfalt); border-color: var(--asfalt); color: var(--hvid); }
.kalender__dag--sikker .kalender__ugedag { color: #C9CCD1; }
.kalender__dag--buffer { border-color: var(--asfalt); }
.kalender__dag--sidste { border: 2px solid var(--roed); color: var(--roed); }
@media (max-width: 760px) {
  .kalender { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kalender__dag { min-height: 0; }
}

/* status */
.status { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 20px 0 12px; }
.status__kol ul { margin: 0; padding-left: 1.1em; }
.status__kol li { margin-bottom: .7em; }
.status__h { font-size: 1.2rem; padding-bottom: 8px; border-bottom: 2px solid var(--linje); }
.status__h--ja { border-bottom-color: var(--asfalt); }
.kilde { display: block; font-size: .88rem; color: var(--graa); }
@media (max-width: 760px) { .status { grid-template-columns: 1fr; gap: 24px; } }

/* eksempel og klausul */
.eksempel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.liste { padding-left: 1.2em; margin: 0 0 1.2em; }
.liste li { margin-bottom: .35em; }
.liste li::marker { color: var(--roed); }
.liste--kort { margin-top: 1em; }
.klausul { margin: 0; background: var(--hvid); border-left: 4px solid var(--asfalt); padding: 22px 26px; font-size: 1.02rem; }
.klausul__titel { font-family: var(--overskrift); font-weight: 700; font-size: 1.1rem; margin-bottom: .5em; }
.klausul p:last-child { margin: 0; }
@media (max-width: 820px) { .eksempel { grid-template-columns: 1fr; gap: 28px; } }

/* pris og køb */
.pris { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.pris__boks { padding-top: 6px; }
.pris__beloeb { font-size: 1.15rem; font-weight: 700; margin-bottom: .2em; }
.pris__beloeb .mono { font-size: 2.6rem; font-weight: 500; margin-right: .2em; }
.koeb { border: 2px solid var(--asfalt); border-radius: 8px; padding: 26px 28px; display: grid; gap: 14px; background: var(--hvid); }
.koeb h3 { margin: 0; }
.koeb .small { margin: 0; }
.felt { display: grid; gap: 4px; font-weight: 700; font-size: .95rem; }
.felt input { font: inherit; font-weight: 400; font-size: 1rem; padding: 11px 12px; border: 1.5px solid #B9BDC4; border-radius: 6px; width: 100%; background: var(--hvid); color: var(--asfalt); }
.felt input:focus { border-color: var(--asfalt); outline: 3px solid rgba(200, 16, 46, .25); outline-offset: 0; }
.flueben { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: .93rem; align-items: start; }
.flueben input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--roed); }
.koeb .btn { justify-self: start; }
.besked { margin: 0; padding: 10px 14px; border-radius: 6px; background: var(--lys); font-weight: 600; }
.besked--fejl { background: #FBE9EC; color: var(--roed-moerk); }
@media (max-width: 820px) { .pris { grid-template-columns: 1fr; gap: 28px; } .koeb { padding: 20px 18px; } }

/* tillid */
.tillid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.tillid li { font-size: .95rem; color: var(--graa); }
.tillid strong { display: block; font-family: var(--overskrift); font-size: 1.15rem; color: var(--asfalt); margin-bottom: 2px; }
@media (max-width: 820px) { .tillid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tillid { grid-template-columns: 1fr; gap: 16px; } }

/* faq */
.faq-wrap { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linje); }
.faq details:first-child { border-top: 1px solid var(--linje); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-family: var(--overskrift); font-weight: 700; font-size: 1.5rem; color: var(--roed); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; max-width: 46em; }

/* afslutning */
.slut { background: var(--asfalt); color: var(--hvid); padding: 48px 0; }
.slut__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.slut__tal { font-family: var(--overskrift); font-weight: 800; font-size: 2.2rem; margin: 0; }
.slut__tal .mono { font-family: var(--overskrift); color: var(--hvid); }
.slut__tekst { margin: 0; font-size: 1.1rem; flex: 1; min-width: 14em; }

/* undersider */
.side-top { padding: 56px 0 24px; }
.side-top__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
@media (max-width: 760px) { .side-top { padding: 32px 0 12px; } .side-top__grid { grid-template-columns: 1fr; } .side-top .ur { order: -1; } }
.tekst { max-width: 760px; }
.tekst h2 { font-size: 1.6rem; margin-top: 1.4em; }
.kildelinje { font-size: .88rem; color: var(--graa); margin-top: 28px; }

/* bundlinje */
.bund { border-top: 1px solid var(--linje); padding: 48px 0 32px; font-size: .95rem; }
.bund__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.bund__om { color: var(--graa); max-width: 26em; margin-top: 12px; }
.bund__h { font-size: 1.05rem; margin-bottom: .6em; }
.bund ul { list-style: none; margin: 0; padding: 0; }
.bund li { margin-bottom: .4em; }
.bund a { text-decoration: none; }
.bund a:hover { text-decoration: underline; }
.bund__jura { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linje); color: var(--graa); font-size: .85rem; }
@media (max-width: 760px) { .bund__grid { grid-template-columns: 1fr; gap: 20px; } }
/* 8. okt. 2026: Marks regel 2, købsboksen lige efter det gratis svar */
.overslag { background: var(--hvid); border: 1px solid var(--linje); border-left: 6px solid var(--roed); border-radius: 6px; padding: 22px 24px; margin: 0; max-width: 760px; }
.overslag-wrap { padding-bottom: 48px; }
.overslag__titel { font-family: var(--overskrift); font-weight: 700; font-size: 1.2rem; color: var(--asfalt); margin: 0 0 .6em; }
.overslag .liste { margin-bottom: .9em; }
.overslag__koster { font-size: .95rem; color: var(--asfalt); margin: 0 0 1.1em; max-width: 44em; }