/* Offentlig prisside — samme farver som portalen og annoncerne */
:root { --g: #1d5c4f; --g2: #154a3f; --mint: #9fd8c4; --mint2: #e2f2ec; --bg: #f4f7f6; --flade: #fff; --t: #17302b; --d: #5f7470; --k: #e1e8e6; --k2: #cfdad7; --gul: #f2c46d; --fare: #b42318; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { overflow-x: hidden; background: var(--bg); color: var(--t); font-family: 'Public Sans', Inter, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--g); }
[hidden] { display: none !important; }
.hoved { display: flex; align-items: center; justify-content: space-between; padding: 14px max(16px, calc((100vw - 1120px) / 2)); background: var(--flade); border-bottom: 1px solid var(--k); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t); font-weight: 800; font-size: 18px; }
.login { font-weight: 600; text-decoration: none; font-size: 14px; }
main { max-width: 1120px; margin: 0 auto; padding: 0 16px 40px; }
.intro { padding: 44px 0 26px; max-width: 760px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--g); margin: 0 0 10px; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -1.2px; margin: 0; font-weight: 800; }
h1 em { font-style: normal; color: var(--g); background: linear-gradient(transparent 64%, var(--mint) 64%); }
h2 { font-size: 26px; letter-spacing: -.4px; margin: 0 0 8px; }
.under { color: var(--d); font-size: 18px; margin: 14px 0 0; }
.beregner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.trin { display: flex; flex-direction: column; gap: 16px; }
.felt { border: 1px solid var(--k); border-radius: 18px; background: var(--flade); padding: 20px 22px 22px; margin: 0; min-width: 0; }
legend { font-weight: 800; font-size: 18px; padding: 0; float: left; width: 100%; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
legend + * { clear: both; }
.nr { width: 28px; height: 28px; border-radius: 50%; background: var(--g); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.typer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.typer label { cursor: pointer; } .typer input { position: absolute; opacity: 0; }
.typer span { display: block; border: 2px solid var(--k); border-radius: 14px; padding: 12px 12px; height: 100%; transition: border-color .15s, background .15s; }
.typer b { display: block; font-size: 15.5px; } .typer small { color: var(--d); font-size: 12.5px; }
.typer input:checked + span { border-color: var(--g); background: var(--mint2); }
.typer input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }
.areal { display: flex; align-items: center; gap: 16px; }
.areal input[type=range] { flex: 1; accent-color: var(--g); height: 28px; }
.arealtal { display: flex; align-items: center; gap: 6px; border: 2px solid var(--k2); border-radius: 12px; padding: 6px 12px; background: var(--flade); }
.arealtal input { width: 72px; border: 0; font: inherit; font-size: 22px; font-weight: 800; color: var(--t); background: transparent; text-align: right; outline: none; }
.arealtal span { color: var(--d); font-weight: 600; }
.taellere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.taeller { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--k); border-radius: 12px; padding: 8px 10px 8px 14px; font-size: 14.5px; }
.taeller > div { display: flex; align-items: center; gap: 4px; flex: none; }
.taeller button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--k2); background: var(--flade); font-size: 20px; line-height: 1; cursor: pointer; color: var(--g); font-weight: 700; }
.taeller input { width: 36px; text-align: center; border: 0; font: inherit; font-weight: 800; font-size: 17px; background: transparent; color: var(--t); }
.vaelg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vaelg2 label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--d); }
select, .kontaktform input, .kontaktform textarea { font: inherit; font-size: 16px; color: var(--t); border: 1px solid var(--k2); border-radius: 12px; padding: 11px 12px; background: var(--flade); width: 100%; }
select:focus, .kontaktform input:focus, .kontaktform textarea:focus, .arealtal:focus-within { outline: 3px solid var(--mint); outline-offset: 1px; }
.tjek { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 15px; cursor: pointer; } .tjek input { width: 20px; height: 20px; accent-color: var(--g); flex: none; margin-top: 2px; }
.resultat { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.reskort { background: var(--g); color: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 16px 40px rgba(23, 48, 43, .18); }
.reskort .lbl { margin: 0; font-weight: 700; color: var(--mint); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.pris { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; margin: 4px 0 0; line-height: 1.05; }
.moms { margin: 4px 0 0; color: #cfe7df; font-size: 14px; }
.detaljer { list-style: none; padding: 14px 0 0; margin: 16px 0 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 14.5px; display: flex; flex-direction: column; gap: 6px; }
.detaljer li::before { content: '✓ '; color: var(--mint); font-weight: 800; }
.knap { display: block; width: 100%; margin-top: 18px; border: 0; border-radius: 999px; background: var(--gul); color: var(--t); font: inherit; font-weight: 800; font-size: 17px; padding: 15px 20px; cursor: pointer; }
.knap:hover { filter: brightness(1.04); } .knap:disabled { opacity: .6; }
.lille { font-size: 12.5px; color: var(--d); margin: 10px 0 0; } .reskort .lille { color: #b9d8ce; }
.pulser { animation: pulser .35s ease-out; } @keyframes pulser { from { transform: scale(.985); } to { transform: none; } }
.tillid { list-style: none; margin: 0; padding: 16px 18px; background: var(--flade); border: 1px solid var(--k); border-radius: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tillid li { padding-left: 26px; position: relative; } .tillid li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mint2); box-shadow: inset 0 0 0 5px var(--g); }
.kontakt { margin-top: 32px; background: var(--flade); border: 1px solid var(--k); border-radius: 22px; padding: 28px; max-width: 760px; scroll-margin-top: 16px; }
.kontaktform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.kontaktform label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.kontaktform .bred { grid-column: 1 / -1; } .kontaktform .tjek { flex-direction: row; font-weight: 400; margin: 0; }
.kontaktform .knap { background: var(--g); color: #fff; margin: 0; }
.postby { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.skjult { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fejl { color: var(--fare); margin: 0; min-height: 0; font-weight: 600; } .fejl:empty { display: none; }
.tak { text-align: center; padding: 24px 0 8px; } .takik { width: 64px; height: 64px; border-radius: 50%; background: var(--mint2); color: var(--g); font-size: 34px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.faq { margin-top: 40px; max-width: 760px; }
.faq details { background: var(--flade); border: 1px solid var(--k); border-radius: 14px; padding: 14px 18px; margin-top: 10px; }
.faq summary { font-weight: 700; cursor: pointer; } .faq p { color: var(--d); margin: 10px 0 0; }
.fod { text-align: center; color: var(--d); font-size: 14px; padding: 24px 16px 40px; }
@media (max-width: 920px) {
  .beregner { grid-template-columns: minmax(0, 1fr); }
  .resultat { position: sticky; top: auto; bottom: 0; order: 2; z-index: 5; margin: 0 -16px; }
  .reskort { border-radius: 22px 22px 0 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .reskort .lbl { grid-column: 1; font-size: 11.5px; } .reskort .pris { grid-column: 1; font-size: 32px; } .reskort .moms { grid-column: 1; font-size: 12.5px; }
  .reskort .detaljer, .reskort .lille { display: none; } .reskort .knap { grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; padding: 13px 18px; font-size: 15px; }
  .tillid { display: none; }
}
@media (max-width: 620px) {
  .typer { grid-template-columns: repeat(2, minmax(0, 1fr)); } .taellere, .vaelg2, .kontaktform { grid-template-columns: minmax(0, 1fr); }
  .intro { padding-top: 28px; } .felt { padding: 16px; } .kontakt { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pulser { animation: none; } }
/* Samtykkebanner (kun når måling er sat op) */
.samtykke { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; display: flex; gap: 16px; align-items: center; background: #fff; color: var(--t); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.18); padding: 16px 18px; font-size: 14px; }
.samtykke p { margin: 4px 0 0; }
.samtykke-knapper { display: flex; gap: 8px; flex-shrink: 0; }
.samtykke .knap { margin: 0; width: auto; padding: 10px 16px; font-size: 14px; }
.samtykke .knap.sekundaer { background: #eef2f0; }
@media (max-width: 600px) { .samtykke { flex-direction: column; align-items: stretch; } .samtykke-knapper .knap { flex: 1; } }